@traund/orquezta-widget-calculator 1.0.4 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/index.js +1176 -978
  2. package/dist/index.js.map +1 -1
  3. package/dist/module.js +1098 -900
  4. package/dist/module.js.map +1 -1
  5. package/package.json +36 -31
  6. package/src/calculatorV2.js +824 -824
  7. package/src/components/disclaimers.jsx +29 -30
  8. package/src/components/fees.jsx +80 -79
  9. package/src/components/inputAmount.js +48 -39
  10. package/src/components/paymentMethodSelector.jsx +4 -4
  11. package/src/components/simulatorStyles.js +5 -2
  12. package/src/components/taxFeeAlert.js +3 -5
  13. package/src/core/signature.js +1 -2
  14. package/src/firebase.config.js +1 -1
  15. package/src/index.js +38 -11
  16. package/src/model/enums.js +0 -1
  17. package/src/simulator.js +49 -35
  18. package/src/theme.js +99 -0
  19. package/src/utils/operationsHelper.js +4 -3
package/src/components/disclaimers.jsx CHANGED
@@ -1,8 +1,7 @@
1
- import { Alert } from "@material-ui/lab";
2
1
  import en from "../locale/en";
3
2
  import es from "../locale/es";
4
- import { Typography } from "@material-ui/core";
5
- import Grid from "@material-ui/core/Grid";
3
+ import { Button, Container, Typography, Box, Alert} from '@mui/material';
4
+ import Grid from '@mui/material/Grid2';
6
5
  import { useEffect, useState } from "react";
7
6
  import { SimulatorMode, TransferType } from "../model/enums";
8
7
  import { countries } from "../data/countries";
@@ -38,64 +37,64 @@ const Disclaimers = (props) => {
38
37
  switch (name) {
39
38
  case disclaimerTypes.send:
40
39
  return <Grid container spacing={2}>
41
- <Grid item xs={12}>
40
+ <Grid size={{ xs: 12}}>
42
41
  <Alert severity="info">
43
42
  <Typography variant="body2">
44
43
  {content.disclaimers.send}
45
44
  </Typography>
46
45
  </Alert>
47
46
  </Grid>
48
- <Grid item xs={12}>
47
+ <Grid size={{ xs: 12}}>
49
48
  <Typography variant="body2" align="center">
50
49
  {content.disclaimers.sendDescription} {" "}
51
50
  </Typography>
52
51
  </Grid>
53
- <Grid item xs={12}>
54
- <Typography variant="body2" align="center" style={{ color: "#666" }}>
52
+ <Grid size={{ xs: 12}}>
53
+ <Typography variant="body2" align="center" sx={{ color: "#666" }}>
55
54
  <b>{__expiration}</b>
56
55
  </Typography>
57
56
  </Grid>
58
57
  </Grid>
59
58
  case disclaimerTypes.sendWithIntegration:
60
59
  return <Grid container spacing={2}>
61
- <Grid item xs={12}>
60
+ <Grid size={{ xs: 12}}>
62
61
  <Alert severity="info">
63
- <Typography style={{ fontSize: "0.8rem" }}>
62
+ <Typography sx={{ fontSize: "0.8rem" }}>
64
63
  {content.disclaimers.send}
65
64
  </Typography>
66
65
  </Alert>
67
66
  </Grid>
68
- <Grid item xs={12}>
67
+ <Grid size={{ xs: 12}}>
69
68
  <Typography variant="body2" align="center">
70
69
  {content.disclaimers.sendDescription}
71
70
  </Typography>
72
71
  </Grid>
73
- <Grid item xs={12}>
74
- <Typography variant="body2" align="center" style={{ color: "#666" }}>
72
+ <Grid size={{ xs: 12}}>
73
+ <Typography variant="body2" align="center" sx={{ color: "#666" }}>
75
74
  <b>{__expiration}</b>
76
75
  </Typography>
77
76
  <Typography variant="caption" align="justify"
78
- style={{ display: "inline-block", color: "#878787", lineHeight: "15px", marginTop: 10, maringBottom: 15 }}>
77
+ sx={{ display: "inline-block", color: "#878787", lineHeight: "15px", marginTop: 10, maringBottom: 15 }}>
79
78
  {content.disclaimers.sendDisclaimer?.replace("{COUNTRY}", optionName)}
80
79
  </Typography>
81
80
  </Grid>
82
81
  </Grid>
83
82
  case disclaimerTypes.receive:
84
83
  return <Grid container spacing={2}>
85
- <Grid item xs={12}>
84
+ <Grid size={{ xs: 12}}>
86
85
  <Alert severity="info">
87
- <Typography style={{ fontSize: "0.8rem" }}>
86
+ <Typography sx={{ fontSize: "0.8rem" }}>
88
87
  {content.disclaimers.receive}
89
88
  </Typography>
90
89
  </Alert>
91
90
  </Grid>
92
- <Grid item xs={12}>
91
+ <Grid size={{ xs: 12}}>
93
92
  <Typography variant="body2" align="justify">
94
93
  {content.disclaimers.receiveDescription}
95
94
  </Typography>
96
95
  </Grid>
97
- <Grid item xs={12}>
98
- <Typography variant="caption" style={{ color: "#878787"}}>
96
+ <Grid size={{ xs: 12}}>
97
+ <Typography variant="caption" sx={{ color: "#878787"}}>
99
98
  {
100
99
  (simulatorMode === SimulatorMode.COLLECT && option.code == "US") ? content.disclaimers.receiveZelle : content.disclaimers.receiveBanks
101
100
  }
@@ -104,22 +103,22 @@ const Disclaimers = (props) => {
104
103
  </Grid>
105
104
  case disclaimerTypes.receiveWithIntegration:
106
105
  return <Grid container spacing={2}>
107
- <Grid item xs={12}>
106
+ <Grid size={{ xs: 12}}>
108
107
  <Alert severity="info">
109
- <Typography style={{ fontSize: "0.8rem" }}>
108
+ <Typography sx={{ fontSize: "0.8rem" }}>
110
109
  {content.disclaimers.receive}
111
110
  </Typography>
112
111
  </Alert>
113
112
  </Grid>
114
- <Grid item xs={12}>
113
+ <Grid size={{ xs: 12}}>
115
114
  <Typography variant="body2" align="justify">
116
115
  {content.disclaimers.receiveDescription}
117
116
  </Typography>
118
117
  <Typography variant="caption" align="justify"
119
- style={{ display: "inline-block", color: "#878787", lineHeight: "15px", marginTop: 10, maringBottom: 15 }}>
118
+ sx={{ display: "inline-block", color: "#878787", lineHeight: "15px", marginTop: 10, maringBottom: 15 }}>
120
119
  {content.disclaimers.receiveDisclaimer?.replace("{COUNTRY}", optionName)}
121
120
  </Typography>
122
- <Typography variant="caption" style={{ color: "#878787"}}>
121
+ <Typography variant="caption" sx={{ color: "#878787"}}>
123
122
  {
124
123
  (simulatorMode === SimulatorMode.COLLECT && option.code == "US") ? content.disclaimers.receiveZelle : content.disclaimers.receiveBanks
125
124
  }
@@ -128,31 +127,31 @@ const Disclaimers = (props) => {
128
127
  </Grid>
129
128
  case disclaimerTypes.wallet:
130
129
  return <Grid container spacing={2}>
131
- <Grid item xs={12}>
130
+ <Grid size={{ xs: 12}}>
132
131
  <Alert severity="info">
133
132
  {content.disclaimers.wallet}
134
133
  </Alert>
135
134
  </Grid>
136
- <Grid item xs={12}>
135
+ <Grid size={{ xs: 12}}>
137
136
  <Typography variant="body2" align="center">
138
137
  {content.disclaimers.walletDescription}
139
138
  </Typography>
140
139
  </Grid>
141
- <Grid item xs={12}>
142
- <Typography variant="body2" align="center" style={{ color: "#666" }}>
140
+ <Grid size={{ xs: 12}}>
141
+ <Typography variant="body2" align="center" sx={{ color: "#666" }}>
143
142
  <b>{__expiration}</b>
144
143
  </Typography>
145
144
  {option.code == "ACH" ?
146
145
  <Typography variant="caption" align="center"
147
- style={{ display: "inline-block", color: "#878787", lineHeight: "15px", marginTop: 10, maringBottom: 15 }}>
146
+ sx={{ display: "inline-block", color: "#878787", lineHeight: "15px", marginTop: 10, maringBottom: 15 }}>
148
147
  {content.disclaimers.walletDisclaimerACH}
149
148
  </Typography> :
150
149
  <Typography variant="caption" align="center"
151
- style={{ display: "inline-block", color: "#878787", lineHeight: "15px", marginTop: 10, maringBottom: 15 }}>
150
+ sx={{ display: "inline-block", color: "#878787", lineHeight: "15px", marginTop: 10, maringBottom: 15 }}>
152
151
  {content.disclaimers.walletDisclaimer?.replace("{PAYMENTMETHOD}", optionName)}
153
152
  </Typography>}
154
153
  </Grid>
155
- {/* <Grid item xs={12}>
154
+ {/* <Grid size={{ xs: 12}}>
156
155
  <Alert severity="warning">
157
156
  {content.disclaimers.walletDisclaimer?.replace("{PAYMENTMETHOD}", optionName)}
158
157
  </Alert>
package/src/components/fees.jsx CHANGED
@@ -1,4 +1,5 @@
1
- import { Divider, Grid, Typography } from "@material-ui/core";
1
+ import { Divider, Typography, Box, Alert } from '@mui/material';
2
+ import Grid from '@mui/material/Grid2';
2
3
  import { SimulatorMode } from "../model/enums";
3
4
  import { useEffect, useState } from "react";
4
5
 
@@ -11,34 +12,34 @@ const Fees = (props) => {
11
12
  setIsUSDTReceiver(details.currencyReceiver == "USDT")
12
13
  }, [details])
13
14
 
14
- return <Grid container direction="column" spacing={0} style={{ marginBottom: 15 }}>
15
- <Grid item xs={12} style={{ display: "contents" }}>
15
+ return <Grid container direction="column" spacing={0} sx={{ marginBottom: 15 }}>
16
+ <Grid size={{ xs: 12}} sx={{ display: "contents" }}>
16
17
  <Grid container spacing={1}>
17
- <Grid item xs={1}>
18
+ <Grid size={{ xs: 1}}>
18
19
  <Typography variant="body2" color="textSecondary"></Typography>
19
20
  </Grid>
20
- <Grid item md={4}>
21
+ <Grid size={{ md: 4}}>
21
22
  <Typography
22
23
  variant="body2"
23
24
  color="textSecondary"
24
- style={{ textAlign: "right" }}
25
+ sx={{ textAlign: "right" }}
25
26
  >
26
27
  {details.fees.traund.toFixed(2)}{" "}
27
28
  </Typography>
28
29
  </Grid>
29
- <Grid item xs={1}>
30
+ <Grid size={{ xs: 1}}>
30
31
  <Typography variant="body2" color="textSecondary">
31
32
  {details.currency}
32
33
  </Typography>
33
34
  </Grid>
34
- <Grid item xs={1}>
35
+ <Grid size={{ xs: 1}}>
35
36
  <Typography variant="body2" color="textSecondary">{" "}</Typography>
36
37
  </Grid>
37
- <Grid item xs={5}>
38
+ <Grid size={{ xs: 5}}>
38
39
  <Typography
39
40
  variant="body2"
40
41
  color="textSecondary"
41
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
42
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
42
43
  >
43
44
  {content?.calculator.comision}
44
45
  </Typography>
@@ -48,88 +49,88 @@ const Fees = (props) => {
48
49
 
49
50
  {
50
51
  walletName?.length > 0 &&
51
- <Grid item xs={12} style={{ display: "contents" }}>
52
+ <Grid size={{ xs: 12}} sx={{ display: "contents" }}>
52
53
  <Grid container spacing={1}>
53
- <Grid item xs={1}>
54
+ <Grid size={{ xs: 1}}>
54
55
  <Typography variant="body2" color="textSecondary"></Typography>
55
56
  </Grid>
56
- <Grid item md={4}>
57
+ <Grid size={{ md: 4}}>
57
58
  <Typography
58
59
  variant="body2"
59
60
  color="textSecondary"
60
- style={{ textAlign: "right" }}
61
+ sx={{ textAlign: "right" }}
61
62
  >
62
63
  {(details.fees.payoneer || details.fees.wise || details.fees.deel || details.fees.ontop || 0).toFixed(2)}
63
64
  </Typography>
64
65
  </Grid>
65
- <Grid item xs={1}>
66
+ <Grid size={{ xs: 1}}>
66
67
  <Typography variant="body2" color="textSecondary">
67
68
  {details.currency}
68
69
  </Typography>
69
70
  </Grid>
70
- <Grid item xs={1}>
71
+ <Grid size={{ xs: 1}}>
71
72
  <Typography variant="body2" color="textSecondary">{" "}</Typography>
72
73
  </Grid>
73
- <Grid item xs={5}>
74
+ <Grid size={{ xs: 5}}>
74
75
  <Typography
75
76
  variant="body2"
76
77
  color="textSecondary"
77
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
78
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
78
79
  >
79
80
  {locale == "es" &&
80
81
  <span>
81
- {content?.calculator.wallet_fee}{" "}{walletName[0]}<span style={{ textTransform: 'lowercase' }}>{walletName.slice(1)}</span>
82
+ {content?.calculator.wallet_fee}{" "}{walletName[0]}<span sx={{ textTransform: 'lowercase' }}>{walletName.slice(1)}</span>
82
83
  </span>}
83
84
  {locale == "en" &&
84
85
  <span>
85
- {walletName[0]}<span style={{ textTransform: 'lowercase' }}>{walletName.slice(1)}</span>{" "}{content?.calculator.wallet_fee}
86
+ {walletName[0]}<span sx={{ textTransform: 'lowercase' }}>{walletName.slice(1)}</span>{" "}{content?.calculator.wallet_fee}
86
87
  </span>}
87
88
  </Typography>
88
89
  </Grid>
89
90
  </Grid>
90
91
  </Grid>
91
92
  }
92
- <Grid item xs={12}>
93
- <Divider style={{ margin: 4 }}></Divider>
93
+ <Grid size={{ xs: 12}}>
94
+ <Divider sx={{ margin: 4 }}></Divider>
94
95
  </Grid>
95
96
  {(details.showTotalFees && !isUSDTReceiver) &&
96
- <Grid item xs={12} style={{ display: "contents" }}>
97
+ <Grid size={{ xs: 12}} sx={{ display: "contents" }}>
97
98
  <Grid container spacing={1}>
98
- <Grid item xs={1}>
99
+ <Grid size={{ xs: 1}}>
99
100
  <Typography
100
101
  variant="subtitle2"
101
102
  color="textPrimary"
102
- style={{ fontWeight: "bold", textAlign: "right" }}
103
+ sx={{ fontWeight: "bold", textAlign: "right" }}
103
104
  >
104
105
  -
105
106
  </Typography>
106
107
  </Grid>
107
- <Grid item md={4}>
108
+ <Grid size={{ md: 4}}>
108
109
  <Typography
109
110
  variant="subtitle2"
110
111
  color="textPrimary"
111
- style={{ fontWeight: "bold", textAlign: "right" }}
112
+ sx={{ fontWeight: "bold", textAlign: "right" }}
112
113
  >
113
114
  {details.totalFees}
114
115
  </Typography>
115
116
  </Grid>
116
- <Grid item xs={1}>
117
+ <Grid size={{ xs: 1}}>
117
118
  <Typography
118
119
  variant="subtitle2"
119
120
  color="textPrimary"
120
- style={{ fontWeight: "bold" }}
121
+ sx={{ fontWeight: "bold" }}
121
122
  >
122
123
  {details.currency}
123
124
  </Typography>
124
125
  </Grid>
125
- <Grid item xs={1}>
126
+ <Grid size={{ xs: 1}}>
126
127
  <Typography variant="body2" color="textSecondary">{" "}</Typography>
127
128
  </Grid>
128
- <Grid item xs={5}>
129
+ <Grid size={{ xs: 5}}>
129
130
  <Typography
130
131
  variant="subtitle2"
131
132
  color="textPrimary"
132
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
133
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
133
134
  >
134
135
  {content?.calculator.total_fees}
135
136
  </Typography>
@@ -138,34 +139,34 @@ const Fees = (props) => {
138
139
  </Grid>
139
140
  }
140
141
  {isUSDTReceiver &&
141
- <Grid item xs={12} style={{ display: "contents" }}>
142
+ <Grid size={{ xs: 12}} sx={{ display: "contents" }}>
142
143
  <Grid container spacing={1}>
143
- <Grid item xs={1}>
144
+ <Grid size={{ xs: 1}}>
144
145
  <Typography
145
146
  variant="body2"
146
147
  color="textPrimary">
147
148
  </Typography>
148
149
  </Grid>
149
- <Grid item md={4}>
150
+ <Grid size={{ md: 4}}>
150
151
  <Typography
151
152
  variant="body2"
152
- style={{ textAlign: "right" }}
153
+ sx={{ textAlign: "right" }}
153
154
  >
154
155
  {(details.calculatedAmount + details.fees.network).toFixed(2)}
155
156
  </Typography>
156
157
  </Grid>
157
- <Grid item xs={1}>
158
+ <Grid size={{ xs: 1}}>
158
159
  <Typography variant="body2">
159
160
  {` USDT`}
160
161
  </Typography>
161
162
  </Grid>
162
- <Grid item xs={1}>
163
+ <Grid size={{ xs: 1}}>
163
164
  <Typography variant="body2">{" "}</Typography>
164
165
  </Grid>
165
- <Grid item xs={5}>
166
+ <Grid size={{ xs: 5}}>
166
167
  <Typography
167
168
  variant="body2"
168
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
169
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
169
170
  >
170
171
  {content?.calculator.converted_amount_network}
171
172
  </Typography>
@@ -174,36 +175,36 @@ const Fees = (props) => {
174
175
  </Grid>
175
176
  }
176
177
  {isUSDTReceiver &&
177
- <Grid item xs={12} style={{ display: "contents" }}>
178
+ <Grid size={{ xs: 12}} sx={{ display: "contents" }}>
178
179
  <Grid container spacing={1}>
179
- <Grid item xs={1}>
180
+ <Grid size={{ xs: 1}}>
180
181
  <Typography
181
182
  variant="body2"
182
183
  color="textPrimary"
183
- style={{ fontWeight: "bold", textAlign: "right" }}>
184
+ sx={{ fontWeight: "bold", textAlign: "right" }}>
184
185
  -
185
186
  </Typography>
186
187
  </Grid>
187
- <Grid item md={4}>
188
+ <Grid size={{ md: 4}}>
188
189
  <Typography
189
190
  variant="body2"
190
- style={{ textAlign: "right" }}
191
+ sx={{ textAlign: "right" }}
191
192
  >
192
193
  {details.fees.network.toFixed(2)}
193
194
  </Typography>
194
195
  </Grid>
195
- <Grid item xs={1}>
196
+ <Grid size={{ xs: 1}}>
196
197
  <Typography variant="body2">
197
198
  {` USDT`}
198
199
  </Typography>
199
200
  </Grid>
200
- <Grid item xs={1}>
201
+ <Grid size={{ xs: 1}}>
201
202
  <Typography variant="body2">{" "}</Typography>
202
203
  </Grid>
203
- <Grid item xs={5}>
204
+ <Grid size={{ xs: 5}}>
204
205
  <Typography
205
206
  variant="body2"
206
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
207
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
207
208
  >
208
209
  {content?.calculator.tron_network_fee}
209
210
  </Typography>
@@ -211,86 +212,86 @@ const Fees = (props) => {
211
212
  </Grid>
212
213
  </Grid>
213
214
  }
214
- <Grid item xs={12} style={{ display: "contents" }}>
215
+ <Grid size={{ xs: 12}} sx={{ display: "contents" }}>
215
216
  <Grid container spacing={1}>
216
- <Grid item xs={1}>
217
+ <Grid size={{ xs: 1}}>
217
218
  <Typography
218
219
  variant="subtitle2"
219
220
  color="textPrimary"
220
- style={{ fontWeight: "bold", textAlign: "right" }}
221
+ sx={{ fontWeight: "bold", textAlign: "right" }}
221
222
  >
222
223
  =
223
224
  </Typography>
224
225
  </Grid>
225
- <Grid item md={4}>
226
+ <Grid size={{ md: 4}}>
226
227
  <Typography
227
228
  variant="subtitle2"
228
229
  color="textPrimary"
229
- style={{ fontWeight: "bold", textAlign: "right" }}
230
+ sx={{ fontWeight: "bold", textAlign: "right" }}
230
231
  >
231
232
  {details.calculatedAmount}
232
233
  </Typography>
233
234
  </Grid>
234
- <Grid item xs={1}>
235
+ <Grid size={{ xs: 1}}>
235
236
  <Typography
236
237
  variant="subtitle2"
237
238
  color="textPrimary"
238
- style={{ fontWeight: "bold" }}
239
+ sx={{ fontWeight: "bold" }}
239
240
  >
240
241
  {isUSDTReceiver ? "USDT" : details.currency}
241
242
  </Typography>
242
243
  </Grid>
243
- <Grid item xs={1}>
244
+ <Grid size={{ xs: 1}}>
244
245
  <Typography variant="body2" color="textSecondary">{" "}</Typography>
245
246
  </Grid>
246
- <Grid item xs={5}>
247
+ <Grid size={{ xs: 5}}>
247
248
  <Typography
248
249
  variant="subtitle2"
249
250
  color="textPrimary"
250
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
251
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
251
252
  >
252
253
  {(walletName?.length > 0 || simulatorMode == SimulatorMode.COLLECT) ? content?.calculator.converted_amount_receive : content?.calculator.converted_amount}
253
254
  </Typography>
254
255
  </Grid>
255
256
  </Grid>
256
257
  </Grid>
257
- <Grid item xs={12} style={{ display: "contents" }}>
258
+ <Grid size={{ xs: 12}} sx={{ display: "contents" }}>
258
259
  <Grid container spacing={1}>
259
- <Grid item xs={1}>
260
+ <Grid size={{ xs: 1}}>
260
261
  <Typography
261
262
  variant="subtitle2"
262
263
  color="textPrimary"
263
- style={{ fontWeight: "bold", textAlign: "right" }}
264
+ sx={{ fontWeight: "bold", textAlign: "right" }}
264
265
  >
265
266
  {details.exchangeRateLabel}
266
267
  </Typography>
267
268
  </Grid>
268
- <Grid item md={4}>
269
+ <Grid size={{ md: 4}}>
269
270
  <Typography
270
271
  variant="subtitle2"
271
272
  color="textPrimary"
272
- style={{ fontWeight: "bold", textAlign: "right" }}
273
+ sx={{ fontWeight: "bold", textAlign: "right" }}
273
274
  >
274
275
  {details.exchangeRate}
275
276
  </Typography>
276
277
  </Grid>
277
- <Grid item xs={1}>
278
+ <Grid size={{ xs: 1}}>
278
279
  <Typography
279
280
  variant="subtitle2"
280
281
  color="textPrimary"
281
- style={{ fontWeight: "bold" }}
282
+ sx={{ fontWeight: "bold" }}
282
283
  >
283
284
  {isUSDTReceiver ? "USDT" : (details.exchangeRateLabel == "x" ? details.currencyReceiver : details.currency)}
284
285
  </Typography>
285
286
  </Grid>
286
- <Grid item xs={1}>
287
+ <Grid size={{ xs: 1}}>
287
288
  <Typography variant="body2" color="textSecondary">{" "}</Typography>
288
289
  </Grid>
289
- <Grid item xs={5}>
290
+ <Grid size={{ xs: 5}}>
290
291
  <Typography
291
292
  variant="subtitle2"
292
293
  color="textPrimary"
293
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
294
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
294
295
  >
295
296
  {content?.calculator.exchange_rate}
296
297
  </Typography>
@@ -298,43 +299,43 @@ const Fees = (props) => {
298
299
  </Grid>
299
300
  </Grid>
300
301
  {details.tax > 0 &&
301
- <Grid item xs={12} style={{ display: "contents" }}>
302
+ <Grid size={{ xs: 12}} sx={{ display: "contents" }}>
302
303
  <Grid container spacing={1}>
303
- <Grid item xs={1}>
304
+ <Grid size={{ xs: 1}}>
304
305
  <Typography
305
306
  variant="subtitle2"
306
307
  color="textPrimary"
307
- style={{ fontWeight: "bold", textAlign: "right" }}
308
+ sx={{ fontWeight: "bold", textAlign: "right" }}
308
309
  >
309
310
  -
310
311
  </Typography>
311
312
  </Grid>
312
- <Grid item md={4}>
313
+ <Grid size={{ md: 4}}>
313
314
  <Typography
314
315
  variant="subtitle2"
315
316
  color="textPrimary"
316
- style={{ fontWeight: "bold", textAlign: "right" }}
317
+ sx={{ fontWeight: "bold", textAlign: "right" }}
317
318
  >
318
319
  {details.tax}
319
320
  </Typography>
320
321
  </Grid>
321
- <Grid item xs={1}>
322
+ <Grid size={{ xs: 1}}>
322
323
  <Typography
323
324
  variant="subtitle2"
324
325
  color="textPrimary"
325
- style={{ fontWeight: "bold" }}
326
+ sx={{ fontWeight: "bold" }}
326
327
  >
327
328
  {details.currencyReceiver}
328
329
  </Typography>
329
330
  </Grid>
330
- <Grid item xs={1}>
331
+ <Grid size={{ xs: 1}}>
331
332
  <Typography variant="body2" color="textSecondary">{" "}</Typography>
332
333
  </Grid>
333
- <Grid item xs={5}>
334
+ <Grid size={{ xs: 5}}>
334
335
  <Typography
335
336
  variant="subtitle2"
336
337
  color="textPrimary"
337
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
338
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
338
339
  >
339
340
  {details.currencyReceiver == "COP" ? content?.calculator.tax_co : content?.calculator.tax_pe}
340
341
  </Typography>