· 5 years ago · Jun 24, 2020, 01:16 PM
1import React from 'react';
2import { OTSession, OTPublisher, OTStreams, OTSubscriber } from 'opentok-react';
3import { API } from 'api'
4import {connect} from 'react-redux'
5import CryptoJS from 'crypto-js';
6import Base64 from 'crypto-js/enc-base64'
7import Utf8 from 'crypto-js/enc-utf8'
8const commerce_code = "348788449";
9const secret_code = "sq7HjrUOBfKmC576ILgskD5srU870gJ7";
10
11export class TOK extends React.Component {
12 constructor(props) {
13 super(props);
14
15 this.state = {
16 finishCall: false,
17 error: null,
18 connection: 'Connecting',
19 publishVideo: true,
20 type: 'DEFAULT',
21 token: this.props.credentials.token,
22 showButtonPayment: false,
23 merchantParameters: {
24 DS_MERCHANT_AMOUNT: "145",
25 DS_MERCHANT_CURRENCY: "978",
26 DS_MERCHANT_MERCHANTCODE: "999008881",
27 DS_MERCHANT_MERCHANTURL: "www.google.com.ar",
28 DS_MERCHANT_ORDER: "1446068581",
29 DS_MERCHANT_TERMINAL: "1",
30 DS_MERCHANT_TRANSACTIONTYPE: "0",
31 DS_MERCHANT_URLKO: "www.google.com.ar",
32 DS_MERCHANT_URLOK: "www.google.com.ar"
33 },
34 secretCode: 'sq7HjrUOBfKmC576ILgskD5srU870gJ7',
35 hmac256: '',
36 Ds_MerchantParameters: '',
37 Ds_SignatureVersion: 'HMAC_SHA256_V1',
38 Ds_Signature: ''
39 };
40
41 this.otSession = React.createRef();
42
43 this.sessionEventHandlers = {
44 sessionConnected: () => {
45 console.log('TOK sessionConnected');
46 this.setState({ connection: 'Connected' });
47 },
48 sessionDisconnected: () => {
49 console.log('TOK sessionDisconnected');
50 this.setState({ connection: 'Disconnected' });
51 },
52 sessionReconnected: () => {
53 console.log('TOK sessionReconnected');
54 this.setState({ connection: 'Reconnected' });
55 },
56 sessionReconnecting: () => {
57 console.log('TOK sessionReconnecting');
58 this.setState({ connection: 'Reconnecting' });
59 },
60 };
61
62 this.publisherEventHandlers = {
63 accessDenied: () => {
64 console.log('User denied access to media source');
65 },
66 streamCreated: () => {
67 console.log('Publisher stream created');
68 },
69 streamDestroyed: ({ reason }) => {
70 console.log(`Publisher stream destroyed because: ${reason}`);
71 },
72 };
73
74 this.subscriberEventHandlers = {
75 videoEnabled: () => {
76 console.log('Subscriber video enabled');
77 },
78 videoDisabled: () => {
79 console.log('Subscriber video disabled');
80 },
81 };
82 }
83
84 toggleToken = () => {
85 var userType = this.state.type === 'DEFAULT' ? 'PROVIDER' : 'DEFAULT';
86 var token = this.state.type === 'DEFAULT' ? this.props.credentials.providerToken : this.props.credentials.token;
87 this.setState({ type: userType });
88 this.setState({ token: token });
89 }
90
91 showButton = () => {
92 this.payOrder();
93 this.setState({ showButtonPayment: !this.state.showButtonPayment });
94 };
95
96 onSessionError = error => {
97 console.log('onSessionError', error);
98 this.setState({ error });
99 };
100
101 onPublish = () => {
102 console.log('Publish Success');
103 };
104
105 onPublishError = error => {
106 console.log('onPublishError', error);
107 this.setState({ error });
108 };
109
110 onSubscribe = () => {
111 console.log('Subscribe Success');
112 };
113
114 onSubscribeError = error => {
115 console.error('onSubscriberError', error);
116 this.setState({ error });
117 };
118
119
120 toggleVideo = () => {
121 this.setState({ publishVideo: !this.state.publishVideo });
122 API.Order.cancel(commerceId, order).catch((error) => {
123 console.error('Error colgando', error);
124 }).then(() => {
125 this.props.goToTakeTurn();
126 });
127 };
128
129 finishCall = () => {
130 this.setState({ finishCall: !this.state.finishCall });
131 };
132
133 encodeOrder() {
134 var secretKey = new Buffer(this.state.secretCode, 'base64');
135 const cipher = CryptoJS.TripleDES.encrypt(this.state.merchantParameters.DS_MERCHANT_ORDER, CryptoJS.enc.Utf8.parse(secretKey), {
136 mode: CryptoJS.mode.CBC
137 });
138 this.setState({ hmac256: cipher });
139 }
140
141 decodeParametersStepOne = () => {
142 const object = JSON.stringify(this.state.merchantParameters);
143 const base64 = Buffer.from(object).toString("base64");
144 console.log('Parametros codificados en base64');
145 console.log(base64);
146 this.setState({ Ds_MerchantParameters: base64 });
147 };
148
149 doSignature() {
150 var hexMac256 = crypto.createHmac("sha256", new Buffer(this.state.Ds_MerchantParameters, 'base64')).update(this.state.hmac256).digest("hex");
151 this.setState({ Ds_Signature : new Buffer(hexMac256, 'hex').toString('base64') });
152 }
153
154 decodeCommerceCodeBase64 = () => {
155 const base64 = Base64.stringify(Utf8.parse(secret_code));
156 this.setState({ secretCode : base64 });
157 console.log('Clave de comercio codificado en base64');
158 console.log(base64);
159 };
160
161 endCall = () => {
162 // const {commerceId, orderId} = this.props;
163 API.TOK.disconnect();
164 // API.Order.finishOrder(commerceId, orderId);
165 this.props.goToOrderEnd();
166 };
167
168 payOrder = () => {
169 this.decodeParametersStepOne();
170 this.decodeCommerceCodeBase64();
171 this.encodeOrder()
172 this.doSignature();
173 debugger;
174 }
175
176 render() {
177 const { apiKey, sessionId, token } = this.props.credentials;
178 const { error, connection, publishVideo } = this.state;
179 return (
180 <div id='reactOT-session'>
181 <div id="sessionStatus">Session Status: {connection}</div>
182 {error ? (
183 <div className="error">
184 <strong>Error:</strong> {typeof error === "string" ? error : error.message}
185 </div>
186 ) : null}
187 <OTSession
188 apiKey={apiKey}
189 sessionId={sessionId}
190 token={token}
191 ref={this.otSession}
192 onError={this.onSessionError}
193 eventHandlers={this.sessionEventHandlers}
194 onComplete={this.sessionEventHandlers.sessionDisconnected}
195 >
196 <button onClick={this.showButton}>Pagar</button>
197 <button id="videoButton" onClick={this.toggleVideo}>
198 {publishVideo ? 'Ocultar' : 'Mostrar'} Video
199 </button>
200 <button id="finishVideoButton" onClick={this.finishCall}>
201 Terminar Llamada
202 </button>
203 <OTPublisher
204 properties={{ publishVideo }}
205 onPublish={this.onPublish}
206 onError={this.onPublishError}
207 eventHandlers={this.publisherEventHandlers}
208 />
209 <OTStreams>
210 <OTSubscriber
211 properties={{ width: this.props.width, height: this.props.height }}
212 onSubscribe={this.onSubscribe}
213 onError={this.onSubscribeError}
214 eventHandlers={this.subscriberEventHandlers}
215 />
216 </OTStreams>
217 </OTSession>
218 {this.state.finishCall ?
219 (<div id="callingModal" className="modal" tabIndex="-1" role="dialog">
220 <div className="modal-dialog" role="document">
221 <div className="modal-content">
222 <div className="modal-header">
223 <h5 className="modal-title">Terminar llamada</h5>
224 </div>
225 <div className="modal-body">
226 <p>¿Confirma que finaliza la llamada?.</p>
227 </div>
228 <div className="modal-footer">
229 <button type="button" className="btn btn-success" onClick={this.endCall}>Aceptar</button>
230 <button type="button" className="btn btn-danger" data-dismiss="modal">Cancelar</button>
231 </div>
232 </div>
233 </div>
234 </div>)
235 : null}
236 {this.state.showButtonPayment ?
237 ( <div>
238 <form name="from" action="https://sis-t.redsys.es:25443/sis/realizarPago" method="POST">
239 <input type="hidden" name="Ds_SignatureVersion" value={this.state.Ds_SignatureVersion}/>
240 <input type="hidden" name="Ds_MerchantParameters" value={this.state.Ds_MerchantParameters}/>
241 <input type="hidden" name="Ds_Signature" value={this.state.Ds_Signature}/>
242 <input type="submit" value="Go to pay" />
243 </form>
244 </div>
245
246 )
247 : null}
248 </div>
249 );
250 }
251}
252
253const mapStateToProps = (state) => {
254 return {
255 orderId:state.orderId,
256 commerceId : state.commerceId
257 }
258}
259
260export const ConnectedTOK = connect(mapStateToProps)(TOK);