@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/calculatorV2.js CHANGED
@@ -1,18 +1,23 @@
1
1
  import React, { Component, Fragment } from "react";
2
- import Grid from "@material-ui/core/Grid";
3
- import Paper from "@material-ui/core/Paper";
4
- import Typography from "@material-ui/core/Typography";
5
- import NativeSelect from "@material-ui/core/NativeSelect";
6
- import InputBase from "@material-ui/core/InputBase";
7
- import CircularProgress from "@material-ui/core/CircularProgress";
8
- import InputAdornment from "@material-ui/core/InputAdornment";
9
- import TextField from "@material-ui/core/TextField";
10
- import FormHelperText from "@material-ui/core/FormHelperText";
11
- import Tooltip from "@material-ui/core/Tooltip";
12
- import Button from "@material-ui/core/Button";
13
- import {Divider} from "@material-ui/core";
14
- import HighlightOffOutlinedIcon from "@material-ui/icons/HighlightOffOutlined";
15
- import { Autocomplete } from "@material-ui/lab";
2
+ import {
3
+ Paper,
4
+ Typography,
5
+ InputBase,
6
+ InputAdornment,
7
+ TextField,
8
+ Select,
9
+ MenuItem,
10
+ FormControl,
11
+ FormHelperText,
12
+ Button,
13
+ Divider,
14
+ CircularProgress,
15
+ Tooltip,
16
+ Autocomplete,
17
+ Box
18
+ } from '@mui/material';
19
+ import Grid from '@mui/material/Grid2';
20
+ import { HighlightOffOutlined as HighlightOffOutlinedIcon } from '@mui/icons-material';
16
21
  import { matchSorter } from "match-sorter";
17
22
  import en from "./locale/en";
18
23
  import es from "./locale/es";
@@ -80,6 +85,7 @@ class Calculator extends Component {
80
85
  isCountryFromPayPal: false,
81
86
  onlySimulation: this.props.onlySimulation,
82
87
  reference:this.props.reference,
88
+ secretKey: this.props.secretKey,
83
89
  taxSender: 0.00,
84
90
  taxReceiver: 0.00
85
91
  };
@@ -93,8 +99,7 @@ class Calculator extends Component {
93
99
 
94
100
  async componentDidMount() {
95
101
  //if (db) db.clearPersistence();
96
- const firebase = await loadFirebaseDB(this.state.testMode,this.state.config);
97
-
102
+ const firebase = await loadFirebaseDB(this.state.testMode, this.state.config);
98
103
  const db = firebase.firestore();
99
104
 
100
105
  this.subscribeCalculatorConfig(db);
@@ -362,10 +367,12 @@ class Calculator extends Component {
362
367
  rates[c] = { buy: 0, sell: 0 };
363
368
  }
364
369
 
365
- if (usdRate != "") {
370
+ if (usdRate && typeof usdRate.result === "number") {
366
371
  rates[c].buy = rates[c].sell = parseFloat(
367
372
  c == "SV" ? usdRate.result : usdRate.result.toFixed(2)
368
373
  );
374
+ } else {
375
+ rates[c].buy = rates[c].sell = 1;
369
376
  }
370
377
  if (body[country].countryTo[c]) {
371
378
  body[country].countryTo[c].usdBuy = rates[c].buy;
@@ -425,8 +432,10 @@ class Calculator extends Component {
425
432
  sessionStorage.removeItem("storeId");
426
433
 
427
434
  //if (db) db.clearPersistence();
428
- const firebase = await loadFirebaseDB(this.state.testMode);
435
+ //const { db } = await loadFirebaseDB(this.state.testMode, this.state.config);
436
+ const firebase = await loadFirebaseDB(this.state.testMode, this.state.config);
429
437
  const db = firebase.firestore();
438
+
430
439
  return await db
431
440
  .collection("transactions")
432
441
  .doc(`${this.state.storeId}`)
@@ -695,6 +704,7 @@ class Calculator extends Component {
695
704
  couponValue: this.state.couponValue,
696
705
  couponRedeemed: false,
697
706
  reference: this.state.reference ,
707
+ secretKey: this.state.secretKey,
698
708
  plus: 0
699
709
  });
700
710
  if (this.state.recalc) {
@@ -727,7 +737,7 @@ class Calculator extends Component {
727
737
  model,
728
738
  {
729
739
  headers: {
730
- "x-api-access-sig": getSignatureHeader('POST', url, model,this.state.reference)
740
+ "x-api-access-sig": getSignatureHeader('POST', url, model,this.state.reference,this.state.secretKey)
731
741
  },
732
742
  }
733
743
  );
@@ -786,7 +796,7 @@ class Calculator extends Component {
786
796
  model,
787
797
  {
788
798
  headers: {
789
- "x-api-access-sig": getSignatureHeader('POST', url, model,this.state.reference)
799
+ "x-api-access-sig": getSignatureHeader('POST', url, model,this.state.reference,this.state.secretKey)
790
800
  },
791
801
  }
792
802
  );
@@ -982,9 +992,9 @@ class Calculator extends Component {
982
992
  }
983
993
 
984
994
  //if (db) db.clearPersistence();
985
- const firebase = await loadFirebaseDB(this.state.testMode,this.state.config);
986
- const db = firebase.firestore();
987
-
995
+ const firebase = await loadFirebaseDB(this.state.testMode, this.state.config);
996
+ const db = firebase.firestore();
997
+
988
998
  if (this.state.couponRedeemed && this.state.couponValue != "") {
989
999
  try {
990
1000
  const userFS = await db
@@ -1067,7 +1077,7 @@ class Calculator extends Component {
1067
1077
  url,
1068
1078
  {
1069
1079
  headers: {
1070
- "x-api-access-sig": getSignatureHeader('GET', url, null,this.state.reference)
1080
+ "x-api-access-sig": getSignatureHeader('GET', url, null,this.state.reference,this.state.secretKey)
1071
1081
  },
1072
1082
  }
1073
1083
  );
@@ -1352,806 +1362,796 @@ class Calculator extends Component {
1352
1362
  }
1353
1363
 
1354
1364
  return (
1355
- <Fragment>
1356
- <link
1357
- href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
1358
- rel="stylesheet"
1359
- />
1360
- <link
1361
- href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap"
1362
- rel="stylesheet"
1363
- />
1364
- <Paper style={classes.root}>
1365
- <Grid container direction="column" spacing={0}>
1366
- <Grid item container direction="column" spacing={0}>
1367
- <Grid item>
1368
- <Typography
1369
- style={classes.labelAmount}
1370
- gutterBottom
1371
- variant="subtitle1"
1372
- component="div"
1373
- >
1374
- {content.landing.send_content}
1375
- </Typography>
1376
- </Grid>
1377
- <Grid item xs={12} container>
1378
- <Grid item xs={8} md={9}>
1379
- <Paper style={classes.inputAmount}>
1380
- <InputBase
1381
- id="send"
1382
- style={classes.inputAmountText}
1383
- required
1384
- value={sendValue}
1385
- type="number"
1386
- disabled={loadingFrom || loadingTo}
1387
- startAdornment={
1388
- <InputAdornment
1389
- position="start"
1390
- style={{ marginTop: "0px" }}
1391
- >
1392
- <span> {loadingFrom && <CircularProgress size={18} />} </span>
1393
- </InputAdornment>
1394
- }
1395
- inputprops={{
1396
- inputProps: { min: minFromValue, max: maxFromValue },
1397
- }}
1398
- onChange={this.handleSend}
1399
- />
1400
- </Paper>
1401
- </Grid>
1402
- <Grid item xs={4} md={3}>
1403
- <Autocomplete
1404
- disabled={loadingTo || loadingFrom}
1405
- options={countries.filter((country) => {
1406
- if (
1407
- calculator &&
1408
- calculator[country.code] &&
1409
- calculator[country.code].active
1410
- )
1411
- return country;
1412
- })}
1413
- // classes={{
1414
- // option: classes.option,
1415
- // }}
1416
- style={{
1417
- fontSize: 14,
1418
- "& > span": {
1419
- marginRight: 10,
1420
- fontSize: 18,
1421
- },
1422
- }}
1423
- filterOptions={this.filterOptions}
1424
- value={
1425
- countries.filter(
1426
- (country) => country.code == fromCountryValue
1427
- )[0]
1428
- }
1429
- autoHighlight
1430
- getOptionLabel={(option) =>
1431
- `${option.currency}`
1432
- }
1433
- renderOption={(option) => (
1434
- <Fragment>
1435
- <span style={{ marginRight: "5px" }}>
1436
- <FlagsHelpers code={option.code == "PE-USD" ? "PE" : option.code} />
1437
- </span>
1438
- {" "}
1439
- {option.currency}
1440
- </Fragment>
1441
- )}
1442
- disableClearable
1443
- renderInput={(params) => (
1444
- <Paper variant="outlined" style={classes.rootFlags} >
1445
- <TextField
1446
- style={{ fontSize: "15px" }}
1447
- {...params}
1448
- variant="standard"
1449
- InputProps={{
1450
- ...params.InputProps,
1451
- startAdornment: (
1452
- <FlagsHelpers
1453
- code={this.state.fromCountryValue == "PE-USD" ?
1454
- "PE" :
1455
- this.state.fromCountryValue
1456
- }>
1457
- </FlagsHelpers>
1458
- ),
1459
- disableUnderline: true,
1460
- }}
1461
- />
1462
- </Paper>
1463
- )}
1464
- onChange={this.handleOnChangeFromCountry}
1465
- />
1466
- </Grid>
1467
- </Grid>
1468
- <Grid item xs={12} container>
1469
- {!isLoading && !loadingFrom && !loadingTo && (
1470
- <FormHelperText style={{ color: "red" }}>
1471
- {(sendValue < minFromValue &&
1472
- content.landing.min_value.replace(
1473
- "minValue",
1474
- minFromValue
1475
- )) ||
1476
- (sendValue > maxFromValue &&
1477
- content.landing.max_value.replace(
1478
- "maxValue",
1479
- maxFromValue
1480
- ))}
1481
- </FormHelperText>
1482
- )}
1483
- </Grid>
1484
- </Grid>
1485
- {(!isLoading && !loadingFrom && !loadingTo) &&
1486
- <Grid item xs={12} container direction="column">
1487
- <Grid item xs={12} container spacing={1}>
1488
- <Grid item xs={1}>
1489
- <Typography variant="body2" color="textSecondary"></Typography>
1490
- </Grid>
1491
- <Grid item xs={3} md={4}>
1492
- <Typography
1493
- variant="body2"
1494
- color="textSecondary"
1495
- style={{ textAlign: "right" }}
1496
- >
1497
- {traundFee}
1498
- </Typography>
1499
- </Grid>
1500
- <Grid item xs={1}>
1501
- <Typography variant="body2" color="textSecondary">
1502
- {fromCurrencyValue}
1503
- </Typography>
1504
- </Grid>
1505
- <Grid item xs={1}>
1506
- <Typography variant="body2" color="textSecondary">{" "}</Typography>
1507
- </Grid>
1508
- <Grid item xs>
1509
- <Typography
1510
- variant="body2"
1511
- color="textSecondary"
1512
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1513
- >
1514
- {content.calculator.comision}
1515
- </Typography>
1516
- </Grid>
1517
- </Grid>
1518
- {this.state.isCountryFromPayPal &&
1519
- <Grid item xs={12} container spacing={1}>
1520
- <Grid item xs={1}>
1521
- <Typography variant="body2" color="textSecondary"></Typography>
1522
- </Grid>
1523
- <Grid item xs={3} md={4}>
1524
- <Typography
1525
- variant="body2"
1526
- color="textSecondary"
1527
- style={{ textAlign: "right" }}
1528
- >
1529
- {paypalFee}
1530
- </Typography>
1531
- </Grid>
1532
- <Grid item xs={1}>
1533
- <Typography variant="body2" color="textSecondary">
1534
- {fromCurrencyValue}
1535
- </Typography>
1536
- </Grid>
1537
- <Grid item xs={1}>
1538
- <Typography variant="body2" color="textSecondary">{" "}</Typography>
1539
- </Grid>
1540
- <Grid item xs>
1541
- <Typography
1542
- variant="body2"
1543
- color="textSecondary"
1544
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1545
- >
1546
- {content.calculator.paypal_fee}
1547
- </Typography>
1548
- </Grid>
1549
- </Grid>
1550
- }
1551
- {this.state.isUsdt &&
1552
- <Grid item xs={12} container spacing={1}>
1553
- <Grid item xs={1}>
1554
- <Typography variant="body2" color="textSecondary"></Typography>
1555
- </Grid>
1556
- <Grid item xs={3} md={4}>
1557
- <Typography
1558
- variant="body2"
1559
- color="textSecondary"
1560
- style={{ textAlign: "right" }}
1561
- >
1562
- {networkFee}
1563
- </Typography>
1564
- </Grid>
1565
- <Grid item xs={1}>
1566
- <Typography variant="body2" color="textSecondary">
1567
- {fromCurrencyValue}
1568
- </Typography>
1569
- </Grid>
1570
- <Grid item xs={1}>
1571
- <Typography variant="body2" color="textSecondary">{" "}</Typography>
1572
- </Grid>
1573
- <Grid item xs>
1574
- <Typography
1575
- variant="body2"
1576
- color="textSecondary"
1577
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1578
- >
1579
- {content.calculator.tron_network_fee}
1580
- </Typography>
1581
- </Grid>
1582
- </Grid>
1583
- }
1584
- <Grid item xs={10}>
1585
- <Divider style={{ margin: 4 }}></Divider>
1586
- </Grid>
1587
- {taxSender > 0 &&
1588
- <>
1589
- <Grid item xs={12} container spacing={1}>
1590
- <Grid item xs={1}>
1591
- <Typography
1592
- variant="subtitle2"
1593
- color="textPrimary"
1594
- style={{ fontWeight: "bold", textAlign: "right" }}
1595
- >
1596
- -
1597
- </Typography>
1598
- </Grid>
1599
- <Grid item xs={3} md={4}>
1600
- <Typography
1601
- variant="subtitle2"
1602
- color="textPrimary"
1603
- style={{ fontWeight: "bold", textAlign: "right" }}
1604
- >
1605
- {taxSender}
1606
- </Typography>
1607
- </Grid>
1608
- <Grid item xs={1}>
1609
- <Typography
1610
- variant="subtitle2"
1611
- color="textPrimary"
1612
- style={{ fontWeight: "bold" }}
1613
- >
1614
- {fromCurrencyValue}
1615
- </Typography>
1616
- </Grid>
1617
- <Grid item xs={1}>
1618
- <Typography variant="subtitle2" color="textPrimary">{" "}</Typography>
1619
- </Grid>
1620
- <Grid item xs>
1621
- <Typography
1622
- variant="subtitle2"
1623
- color="textPrimary"
1624
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1625
- >
1626
- {fromCurrencyValue == "COP" ? content?.calculator.tax_co : content?.calculator.tax_pe}
1627
- </Typography>
1628
- </Grid>
1629
- </Grid>
1630
- <Grid item xs={12} container spacing={1}>
1631
- <Grid item xs={1}>
1632
- <Typography
1633
- variant="subtitle2"
1634
- color="textPrimary"
1635
- style={{ fontWeight: "bold", textAlign: "right" }}
1636
- >
1637
- =
1638
- </Typography>
1639
- </Grid>
1640
- <Grid item xs={3} md={4}>
1641
- <Typography
1642
- variant="subtitle2"
1643
- color="textPrimary"
1644
- style={{ fontWeight: "bold", textAlign: "right" }}
1645
- >
1646
- {this.state.isUsdt ? convertValueCrypto : (+convertValue).toFixed(2)}
1647
- </Typography>
1648
- </Grid>
1649
- <Grid item xs={1}>
1650
- <Typography
1651
- variant="subtitle2"
1652
- color="textPrimary"
1653
- style={{ fontWeight: "bold" }}
1654
- >
1655
- {this.state.isUsdt ? 'USD' : fromCurrencyValue}
1656
- </Typography>
1657
- </Grid>
1658
- <Grid item xs>
1659
- <Typography variant="subtitle2" color="textPrimary" style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }} >{content.calculator.receiver}</Typography>
1660
- </Grid>
1661
- <Grid item xs>
1662
- <Typography
1663
- variant="subtitle2"
1664
- color="textPrimary"
1665
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1666
- >
1667
- {content.calculator.we_receive}
1668
- </Typography>
1669
- </Grid>
1670
- </Grid>
1671
- </>
1672
- }
1673
- {this.state.showTotalFees &&
1674
- <Grid item xs={12} container spacing={1}>
1675
- <Grid item xs={1}>
1676
- <Typography
1677
- variant="subtitle2"
1678
- color="textPrimary"
1679
- style={{ fontWeight: "bold", textAlign: "right" }}
1680
- >
1681
- -
1682
- </Typography>
1683
- </Grid>
1684
- <Grid item xs={3} md={4}>
1685
- <Typography
1686
- variant="subtitle2"
1687
- color="textPrimary"
1688
- style={{ fontWeight: "bold", textAlign: "right" }}
1689
- >
1690
- {totalFees}
1691
- </Typography>
1692
- </Grid>
1693
- <Grid item xs={1}>
1694
- <Typography
1695
- variant="subtitle2"
1696
- color="textPrimary"
1697
- style={{ fontWeight: "bold" }}
1698
- >
1699
- {fromCurrencyValue}
1700
- </Typography>
1701
- </Grid>
1702
- <Grid item xs={1}>
1703
- <Typography variant="body2" color="textSecondary">{" "}</Typography>
1704
- </Grid>
1705
- <Grid item xs>
1706
- <Typography
1707
- variant="subtitle2"
1708
- color="textPrimary"
1709
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1710
- >
1711
- {content.calculator.total_fees}
1712
- </Typography>
1713
- </Grid>
1714
- </Grid>
1715
- }
1716
- <Grid item xs={12} container spacing={1}>
1717
- <Grid item xs={1}>
1718
- <Typography
1719
- variant="subtitle2"
1720
- color="textPrimary"
1721
- style={{ fontWeight: "bold", textAlign: "right" }}
1722
- >
1723
- {this.state.exchangeRateLabel}
1724
- </Typography>
1725
- </Grid>
1726
- <Grid item xs={3} md={4}>
1727
- <Typography
1728
- variant="subtitle2"
1729
- color="textPrimary"
1730
- style={{ fontWeight: "bold", textAlign: "right" }}
1731
- >
1732
- {exchangeRate}
1733
- </Typography>
1734
- </Grid>
1735
- <Grid item xs={1}>
1736
- <Typography
1737
- variant="subtitle2"
1738
- color="textPrimary"
1739
- style={{ fontWeight: "bold" }}
1740
- >
1741
- {this.state.isUsdt ? 'USDT' : toCurrencyValue}
1742
- </Typography>
1743
- </Grid>
1744
- <Grid item xs={1}>
1745
- <Typography variant="body2" color="textSecondary">{" "}</Typography>
1746
- </Grid>
1747
- <Grid item xs>
1748
- <Typography
1749
- variant="subtitle2"
1750
- color="textPrimary"
1751
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1752
- >
1753
- {content.calculator.exchange_rate}
1754
- </Typography>
1755
- </Grid>
1756
- </Grid>
1757
- <Grid item xs={12} container spacing={1}>
1758
- <Grid item xs={1}>
1759
- <Typography
1760
- variant="subtitle2"
1761
- color="textPrimary"
1762
- style={{ fontWeight: "bold", textAlign: "right" }}
1763
- >
1764
- =
1765
- </Typography>
1766
- </Grid>
1767
- <Grid item xs={3} md={4}>
1768
- <Typography
1769
- variant="subtitle2"
1770
- color="textPrimary"
1771
- style={{ fontWeight: "bold", textAlign: "right" }}
1772
- >
1773
- {this.state.isUsdt ? convertValueCrypto : (+receivedValue + taxReceiver).toFixed(2)}
1774
- </Typography>
1775
- </Grid>
1776
- <Grid item xs={1}>
1777
- <Typography
1778
- variant="subtitle2"
1779
- color="textPrimary"
1780
- style={{ fontWeight: "bold" }}
1781
- >
1782
- {this.state.isUsdt ? 'USD' : toCurrencyValue}
1783
- </Typography>
1784
- </Grid>
1785
- <Grid item xs={1}>
1786
- <Typography variant="body2" color="textSecondary">{" "}</Typography>
1787
- </Grid>
1788
- <Grid item xs>
1789
- <Typography
1790
- variant="subtitle2"
1791
- color="textPrimary"
1792
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1793
- >
1794
- {content.calculator.converted_amount}
1795
- </Typography>
1796
- </Grid>
1797
- </Grid>
1798
-
1799
- {taxReceiver > 0 &&
1800
- <Grid item xs={12} container spacing={1}>
1801
- <Grid item xs={1}>
1802
- <Typography
1803
- variant="subtitle2"
1804
- color="textPrimary"
1805
- style={{ fontWeight: "bold", textAlign: "right" }}
1806
- >
1807
- -
1808
- </Typography>
1809
- </Grid>
1810
- <Grid item xs={3} md={4}>
1811
- <Typography
1812
- variant="subtitle2"
1813
- color="textPrimary"
1814
- style={{ fontWeight: "bold", textAlign: "right" }}
1815
- >
1816
- {(+taxReceiver).toFixed(2)}
1817
- </Typography>
1818
- </Grid>
1819
- <Grid item xs={1}>
1820
- <Typography
1821
- variant="subtitle2"
1822
- color="textPrimary"
1823
- style={{ fontWeight: "bold" }}
1824
- >
1825
- {toCurrencyValue}
1826
- </Typography>
1827
- </Grid>
1828
- <Grid item xs={1}>
1829
- <Typography variant="body2" color="textSecondary">{" "}</Typography>
1830
- </Grid>
1831
- <Grid item xs>
1832
- <Typography
1833
- variant="subtitle2"
1834
- color="textPrimary"
1835
- style={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1836
- >
1837
- {toCurrencyValue == "COP" ? content?.calculator.tax_co : content?.calculator.tax_pe}
1838
- </Typography>
1839
- </Grid>
1840
- </Grid>
1841
- }
1842
- </Grid>
1843
- }
1844
- <br></br>
1845
- <Grid item container direction="column" spacing={0} style={{marginTop: "20px"}}>
1846
- <Grid item>
1847
- <Typography
1848
- style={classes.labelAmount}
1849
- gutterBottom
1850
- variant="subtitle1"
1851
- component="div"
1852
- >
1853
- {content.landing.receiver_content}
1854
- </Typography>
1855
- </Grid>
1856
- <Grid item xs={12} container>
1857
- <Grid item xs={8} md={9}>
1858
- <Paper style={classes.inputAmount}>
1859
- <InputBase
1860
- id="receiver"
1861
- style={classes.inputAmountText}
1862
- type="number"
1863
- required
1864
- value={receivedValue}
1865
- disabled={true}
1866
- startAdornment={
1867
- <InputAdornment
1868
- position="start"
1869
- style={{ marginTop: "0px" }}
1870
- >
1871
- <span> {loadingTo && <CircularProgress size={18} />} </span>
1872
- </InputAdornment>
1873
- }
1874
- endAdornment={
1875
- <InputAdornment
1876
- position="end"
1877
- >
1878
- <span style={{
1879
- fontSize: "10px",
1880
- fontWeight: "500",
1881
- paddingTop: "15px",
1882
- paddingRight: "5px"
1883
- }}>
1884
- {
1885
- (toCountryValue == "AR" &&
1886
- paymentMethods.length &&
1887
- paymentMethods[0].isWallet &&
1888
- !loadingTo &&
1889
- !loadingFrom) ? `(${paymentMethods[0].amount} ARS)` : ''
1890
- }
1891
- </span>
1892
- </InputAdornment>
1893
- }
1894
- inputprops={{
1895
- inputProps: { min: minFromValue, max: maxFromValue }
1896
- }}
1897
- onChange={this.handleReceived}
1898
- />
1899
- </Paper>
1900
- </Grid>
1901
- <Grid item xs={4} md={3}>
1902
- <Autocomplete
1903
- disabled={loadingTo || loadingFrom}
1904
- options={countries.filter((country) => {
1905
- if (
1906
- calculator &&
1907
- calculator[fromCountryValue] &&
1908
- calculator[fromCountryValue].active &&
1909
- calculator[fromCountryValue].countryTo[
1910
- country.code
1911
- ] &&
1912
- calculator[fromCountryValue].countryTo[country.code]
1913
- .active
1914
- ) {
1915
- return country;
1916
- }
1917
- })}
1918
- // classes={{
1919
- // option: classes.option,
1920
- // }}
1921
- style={{
1922
- fontSize: 14,
1923
- "& > span": {
1924
- marginRight: 10,
1925
- fontSize: 18,
1926
- },
1927
- }}
1928
- filterOptions={this.filterOptions}
1929
- disableClearable
1930
- value={
1931
- countries.filter(
1932
- (country) => country.code == toCountryValue
1933
- )[0]
1934
- }
1935
- autoHighlight
1936
- getOptionLabel={(option) =>
1937
- `${option.currency}`
1938
- }
1939
- renderOption={(option) => (
1940
- <Fragment>
1941
- <span style={{ marginRight: "5px" }}>
1942
- <FlagsHelpers code={option.code == "PE-USD" ? "PE" : option.code} />
1943
- </span>
1944
- {option.currency}
1945
- </Fragment>
1946
- )}
1947
- renderInput={(params) => (
1948
- <Paper variant="outlined" style={classes.rootFlags} >
1949
- <TextField
1950
- {...params}
1951
- variant="standard"
1952
- InputProps={{
1953
- ...params.InputProps,
1954
- startAdornment: (
1955
- <FlagsHelpers
1956
- code={this.state.toCountryValue == "PE-USD" ?
1957
- "PE" : this.state.toCountryValue
1958
- }>
1959
- </FlagsHelpers>
1960
- ),
1961
- disableUnderline: true,
1962
- }}
1963
- />
1964
- </Paper>
1965
- )}
1966
- onChange={this.handleOnChangeToCountry}
1967
- />
1968
- </Grid>
1969
- </Grid>
1970
- <Grid item xs={12} container>
1971
- <Grid item xs={12}>
1972
- {!isLoading && !loadingFrom && !loadingTo && (
1973
- <FormHelperText style={{ color: "red" }}>
1974
- {(receivedValue < minToValue &&
1975
- content.landing.min_value.replace(
1976
- "minValue",
1977
- minToValue
1978
- )) ||
1979
- (receivedValue > maxToValue &&
1980
- content.landing.max_value.replace(
1981
- "maxValue",
1982
- maxToValue
1983
- ))}
1984
- </FormHelperText>
1985
- )}
1986
- </Grid>
1987
- </Grid>
1988
- {(toCountryValue == "VE" || toCountryValue == "AR") &&
1989
- paymentMethods &&
1990
- !loadingTo &&
1991
- !loadingFrom && (
1992
- <Grid item xs={12} >
1993
- <NativeSelect
1994
- id="demo-customized-select-native"
1995
- value="Banks"
1996
- onChange={this.changeBank}
1997
- >
1998
- {paymentMethods &&
1999
- paymentMethods.map((payment, index) => {
2000
- if (payment.id == "trc20") {
2001
- return <option key={payment.name + index} value={payment.id}>
2002
- Tron TRC20 ({payment.currency})
2003
- </option>
2004
- }
2005
- return <option key={payment.name + index} value={payment.id}>
2006
- {payment.label} {/* ({payment.currency}) */}
2007
- </option>
2008
- })}
2009
- </NativeSelect>
2010
- </Grid>
2011
- )
2012
- }
2013
- </Grid>
2014
- <br></br>
2015
- {!onlySimulation &&
2016
- <>
2017
- <Grid item container direction="column" spacing={0}>
2018
- {this.state.hasValidCoupon && (plus != null && plus != 'undefined' && plus != 0) &&
2019
- <Grid item>
2020
- <p
2021
- style={{
2022
- textAlign: "center",
2023
- //marginTop: "0px"
2024
- }}
2025
- >
2026
- {content.calculator.plus
2027
- .replace("amount", plus)
2028
- .replace("currency", this.state.isUsdt ? 'USDT' : toCurrencyValue)}
2029
- </p>
2030
- </Grid>
2031
- }
2032
- <Grid item style={{marginTop: "15px"}}>
2033
- <Typography
2034
- style={classes.labelCoupon}
2035
- gutterBottom
2036
- variant="subtitle1"
2037
- component="div"
2038
- >
2039
- {content.landing.coupon_content}
2040
- </Typography>
2041
- </Grid>
2042
- <Grid item xs={12} container>
2043
- <Grid item xs={5}>
2044
- <Paper style={classes.inputCoupon}>
2045
- <InputBase
2046
- style={classes.inputCouponText}
2047
- value={couponValue}
2048
- disabled={loadingFrom || loadingTo}
2049
- type="text"
2050
- onChange={this.handleCoupon}
2051
- />
2052
- </Paper>
2053
- </Grid>
2054
-
2055
- {this.state.hasValidCoupon && (plus != null && plus != 'undefined' && plus != 0) &&
2056
- <Grid item xs={2} style={{ paddingLeft: "3px" }}>
2057
- <Tooltip title={content.calculator.remove_coupon}>
2058
- <Button
2059
- style={classes.buttonRemoveCoupon}
2060
- onClick={this.removeCoupon}
2061
- >
2062
- <HighlightOffOutlinedIcon
2063
- style={{ color: "white" }} />
2064
- </Button>
2065
- </Tooltip>
2066
-
2067
- </Grid>
2068
- }
2069
- </Grid>
2070
- {!this.state.hasValidCoupon && (
2071
- <Grid item xs={12}>
2072
- <Typography
2073
- style={{
2074
- color: "red",
2075
- textAlign: "center",
2076
- maxWidth: "100%",
2077
- paddingTop: "10px"
2078
- }}
2079
- >
2080
- {
2081
- this.state.countryError.hasErrors ?
2082
- <>
2083
- {this.state.countryError.value == "from" ? content.calculator.invalid_coupon_country_from : ""}
2084
- {this.state.countryError.value == "to" ? content.calculator.invalid_coupon_country_to : ""}
2085
- {this.state.countryError.value == "amount_from" ? content.calculator.invalid_coupon_amount_from : ""}
2086
- {this.state.countryError.value == "" ? content.calculator.invalid_coupon_message : ""}
2087
- </>
2088
- : ""
2089
- }
2090
- </Typography>
2091
-
2092
- </Grid>
2093
- )}
2094
- </Grid>
2095
- <br></br>
2096
- <Grid item xs={12} style={{marginTop:"20px", marginBottom:"10px"}}>
2097
- <Button
2098
- style={startDisabled ? classes.buttonStartDisabled : classes.buttonStart}
2099
- variant="contained"
2100
- disabled={startDisabled}
2101
- onClick={this.handleSubmitForm}
2102
- >
2103
- <Typography style={classes.textButtonStart}>
2104
- {content.landing.button_start}
2105
- </Typography>
2106
- </Button>
2107
- </Grid>
2108
- <br></br>
2109
- </>
2110
- }
2111
- {recalculate &&
2112
- <Grid item xs={12}>
2113
- <Typography
2114
- style={classes.labelUpdateTC}
2115
- >
2116
- <Timer locale={locale} />
2117
- </Typography>
2118
-
2119
- </Grid>
2120
- }
2121
- {this.state.hasError && (
2122
- <Grid item xs={12}>
2123
- <Typography
2124
- style={{
2125
- color: "red",
2126
- textAlign: "center",
2127
- maxWidth: "100%",
2128
- paddingTop: "10px"
2129
- }}
2130
- >
2131
- {content.error_general}
2132
- </Typography>
2133
-
2134
- </Grid>
2135
- )}
2136
- <Grid item xs={12} style={{marginTop:"45px"}}>
2137
- <Divider ></Divider>
2138
- </Grid>
2139
- <Grid item xs={12} container
2140
- direction="row"
2141
- justifyContent="center"
2142
- alignItems="center"
2143
- style={{ paddingBottom: "10px"}} >
2144
- <Typography
2145
- variant="subtitle1"
2146
-
2147
- >
2148
- <span style={{fontSize: "10px", textAlign: "center" }} >Powered by&nbsp;</span>
2149
- <span style={{ fontWeight: "bold", textAlign: "center",fontSize: "12px", }}>Orquezta</span>
2150
- </Typography>
2151
- </Grid>
2152
- </Grid>
2153
- </Paper >
2154
- </Fragment >
1365
+ <Fragment>
1366
+ <link
1367
+ href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
1368
+ rel="stylesheet"
1369
+ />
1370
+ <link
1371
+ href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap"
1372
+ rel="stylesheet"
1373
+ />
1374
+ <Paper sx={classes.root}>
1375
+ <Grid container direction="column" spacing={0}>
1376
+ <Grid container direction="column" spacing={0}>
1377
+ <Grid>
1378
+ <Typography
1379
+ sx={classes.labelAmount}
1380
+ gutterBottom
1381
+ variant="subtitle1"
1382
+ component="div"
1383
+ >
1384
+ {content.landing.send_content}
1385
+ </Typography>
1386
+ </Grid>
1387
+ <Grid size={{ xs: 12}} container>
1388
+ <Grid size={{ xs: 8, md:9}}
1389
+ >
1390
+ <Paper sx={classes.inputAmount}>
1391
+ <InputBase
1392
+ id="send"
1393
+ sx={classes.inputAmountText}
1394
+ required
1395
+ value={sendValue}
1396
+ type="number"
1397
+ disabled={loadingFrom || loadingTo}
1398
+ startAdornment={
1399
+ <InputAdornment
1400
+ position="start"
1401
+ sx={{ marginTop: "0px" }}
1402
+ >
1403
+ <span>{loadingFrom && <CircularProgress size={18} />}</span>
1404
+ </InputAdornment>
1405
+ }
1406
+ slotProps={{
1407
+ input: { min: minFromValue, max: maxFromValue }
1408
+ }}
1409
+ onChange={this.handleSend}
1410
+ />
1411
+ </Paper>
1412
+ </Grid>
1413
+ <Grid size={{ xs: 4, md:3}}
1414
+ >
1415
+ <Autocomplete
1416
+ disabled={loadingTo || loadingFrom}
1417
+ options={countries.filter((country) => {
1418
+ if (
1419
+ calculator &&
1420
+ calculator[country.code] &&
1421
+ calculator[country.code].active
1422
+ )
1423
+ return country;
1424
+ })}
1425
+ sx={{
1426
+ fontSize: 14,
1427
+ "& > span": {
1428
+ marginRight: 10,
1429
+ fontSize: 18,
1430
+ },
1431
+ }}
1432
+ value={
1433
+ countries.filter(
1434
+ (country) => country.code == fromCountryValue
1435
+ )[0]
1436
+ }
1437
+ autoHighlight
1438
+ getOptionLabel={(option) => `${option.currency}`}
1439
+ renderOption={(props, option) => (
1440
+ <Box component="li" {...props}>
1441
+ <span style={{ marginRight: "5px" }}>
1442
+ <FlagsHelpers code={option.code == "PE-USD" ? "PE" : option.code} />
1443
+ </span>
1444
+ {option.currency}
1445
+ </Box>
1446
+ )}
1447
+ disableClearable
1448
+ renderInput={(params) => (
1449
+ <Paper variant="outlined" sx={classes.rootFlags}>
1450
+ <TextField
1451
+ sx={{ fontSize: "15px" }}
1452
+ {...params}
1453
+ variant="standard"
1454
+ slotProps={{
1455
+ input: {
1456
+ ...params.InputProps,
1457
+ startAdornment: (
1458
+ <FlagsHelpers
1459
+ code={this.state.fromCountryValue == "PE-USD" ?
1460
+ "PE" :
1461
+ this.state.fromCountryValue
1462
+ }>
1463
+ </FlagsHelpers>
1464
+ ),
1465
+ disableUnderline: true,
1466
+ }
1467
+ }}
1468
+ />
1469
+ </Paper>
1470
+ )}
1471
+ onChange={this.handleOnChangeFromCountry}
1472
+ />
1473
+ </Grid>
1474
+ </Grid>
1475
+ <Grid size={{ xs: 12}} container>
1476
+ {!isLoading && !loadingFrom && !loadingTo && (
1477
+ <FormHelperText sx={{ color: "red" }}>
1478
+ {(sendValue < minFromValue &&
1479
+ content.landing.min_value.replace(
1480
+ "minValue",
1481
+ minFromValue
1482
+ )) ||
1483
+ (sendValue > maxFromValue &&
1484
+ content.landing.max_value.replace(
1485
+ "maxValue",
1486
+ maxFromValue
1487
+ ))}
1488
+ </FormHelperText>
1489
+ )}
1490
+ </Grid>
1491
+ </Grid>
1492
+ {(!isLoading && !loadingFrom && !loadingTo) &&
1493
+ <Grid size={{ xs: 12}} container direction="column">
1494
+ <Grid size={{ xs: 12}} container spacing={1}>
1495
+ <Grid size={{ xs: 1}}>
1496
+ <Typography variant="body2" color="textSecondary"></Typography>
1497
+ </Grid>
1498
+ <Grid size={{ xs: 3, md: 4 }} >
1499
+ <Typography
1500
+ variant="body2"
1501
+ color="textSecondary"
1502
+ sx={{ textAlign: "right" }}
1503
+ >
1504
+ {traundFee}
1505
+ </Typography>
1506
+ </Grid>
1507
+ <Grid size={{ xs: 1}}>
1508
+ <Typography variant="body2" color="textSecondary">
1509
+ {fromCurrencyValue}
1510
+ </Typography>
1511
+ </Grid>
1512
+ <Grid size={{ xs: 1}}>
1513
+ <Typography variant="body2" color="textSecondary">{" "}</Typography>
1514
+ </Grid>
1515
+ <Grid size="grow">
1516
+ <Typography
1517
+ variant="body2"
1518
+ color="textSecondary"
1519
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1520
+ >
1521
+ {content.calculator.comision}
1522
+ </Typography>
1523
+ </Grid>
1524
+ </Grid>
1525
+ {this.state.isCountryFromPayPal &&
1526
+ <Grid size={{ xs: 12}} container spacing={1}>
1527
+ <Grid size={{ xs: 1}}>
1528
+ <Typography variant="body2" color="textSecondary"></Typography>
1529
+ </Grid>
1530
+ <Grid size={{ xs: 3, md: 4 }} >
1531
+ <Typography
1532
+ variant="body2"
1533
+ color="textSecondary"
1534
+ sx={{ textAlign: "right" }}
1535
+ >
1536
+ {paypalFee}
1537
+ </Typography>
1538
+ </Grid>
1539
+ <Grid size={{ xs: 1}}>
1540
+ <Typography variant="body2" color="textSecondary">
1541
+ {fromCurrencyValue}
1542
+ </Typography>
1543
+ </Grid>
1544
+ <Grid size={{ xs: 1}}>
1545
+ <Typography variant="body2" color="textSecondary">{" "}</Typography>
1546
+ </Grid>
1547
+ <Grid size="grow">
1548
+ <Typography
1549
+ variant="body2"
1550
+ color="textSecondary"
1551
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1552
+ >
1553
+ {content.calculator.paypal_fee}
1554
+ </Typography>
1555
+ </Grid>
1556
+ </Grid>
1557
+ }
1558
+ {this.state.isUsdt &&
1559
+ <Grid size={{ xs: 12}} container spacing={1}>
1560
+ <Grid size={{ xs: 1}}>
1561
+ <Typography variant="body2" color="textSecondary"></Typography>
1562
+ </Grid>
1563
+ <Grid size={{ xs: 3, md: 4 }}>
1564
+ <Typography
1565
+ variant="body2"
1566
+ color="textSecondary"
1567
+ sx={{ textAlign: "right" }}
1568
+ >
1569
+ {networkFee}
1570
+ </Typography>
1571
+ </Grid>
1572
+ <Grid size={{ xs: 1}}>
1573
+ <Typography variant="body2" color="textSecondary">
1574
+ {fromCurrencyValue}
1575
+ </Typography>
1576
+ </Grid>
1577
+ <Grid size={{ xs: 1}}>
1578
+ <Typography variant="body2" color="textSecondary">{" "}</Typography>
1579
+ </Grid>
1580
+ <Grid size="grow">
1581
+ <Typography
1582
+ variant="body2"
1583
+ color="textSecondary"
1584
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1585
+ >
1586
+ {content.calculator.tron_network_fee}
1587
+ </Typography>
1588
+ </Grid>
1589
+ </Grid>
1590
+ }
1591
+ <Grid size={{ xs: 10}}>
1592
+ <Divider sx={{ margin: 4 }}></Divider>
1593
+ </Grid>
1594
+ {taxSender > 0 &&
1595
+ <>
1596
+ <Grid size={{ xs: 12}} container spacing={1}>
1597
+ <Grid size={{ xs: 1}}>
1598
+ <Typography
1599
+ variant="subtitle2"
1600
+ color="textPrimary"
1601
+ sx={{ fontWeight: "bold", textAlign: "right" }}
1602
+ >
1603
+ -
1604
+ </Typography>
1605
+ </Grid>
1606
+ <Grid size={{ xs: 3, md: 4 }}>
1607
+ <Typography
1608
+ variant="subtitle2"
1609
+ color="textPrimary"
1610
+ sx={{ fontWeight: "bold", textAlign: "right" }}
1611
+ >
1612
+ {taxSender}
1613
+ </Typography>
1614
+ </Grid>
1615
+ <Grid size={{ xs: 1}}>
1616
+ <Typography
1617
+ variant="subtitle2"
1618
+ color="textPrimary"
1619
+ sx={{ fontWeight: "bold" }}
1620
+ >
1621
+ {fromCurrencyValue}
1622
+ </Typography>
1623
+ </Grid>
1624
+ <Grid size={{ xs: 1}}>
1625
+ <Typography variant="subtitle2" color="textPrimary">{" "}</Typography>
1626
+ </Grid>
1627
+ <Grid size="grow">
1628
+ <Typography
1629
+ variant="subtitle2"
1630
+ color="textPrimary"
1631
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1632
+ >
1633
+ {fromCurrencyValue == "COP" ? content?.calculator.tax_co : content?.calculator.tax_pe}
1634
+ </Typography>
1635
+ </Grid>
1636
+ </Grid>
1637
+ <Grid size={{ xs: 12}} container spacing={1}>
1638
+ <Grid size={{ xs: 1}}>
1639
+ <Typography
1640
+ variant="subtitle2"
1641
+ color="textPrimary"
1642
+ sx={{ fontWeight: "bold", textAlign: "right" }}
1643
+ >
1644
+ =
1645
+ </Typography>
1646
+ </Grid>
1647
+ <Grid size={{ xs: 3, md: 4 }}>
1648
+ <Typography
1649
+ variant="subtitle2"
1650
+ color="textPrimary"
1651
+ sx={{ fontWeight: "bold", textAlign: "right" }}
1652
+ >
1653
+ {this.state.isUsdt ? convertValueCrypto : (+convertValue).toFixed(2)}
1654
+ </Typography>
1655
+ </Grid>
1656
+ <Grid size={{ xs: 1}}>
1657
+ <Typography
1658
+ variant="subtitle2"
1659
+ color="textPrimary"
1660
+ sx={{ fontWeight: "bold" }}
1661
+ >
1662
+ {this.state.isUsdt ? 'USD' : fromCurrencyValue}
1663
+ </Typography>
1664
+ </Grid>
1665
+ <Grid size="grow">
1666
+ <Typography variant="subtitle2" color="textPrimary" sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}>{content.calculator.receiver}</Typography>
1667
+ </Grid>
1668
+ <Grid size="grow">
1669
+ <Typography
1670
+ variant="subtitle2"
1671
+ color="textPrimary"
1672
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1673
+ >
1674
+ {content.calculator.we_receive}
1675
+ </Typography>
1676
+ </Grid>
1677
+ </Grid>
1678
+ </>
1679
+ }
1680
+ {this.state.showTotalFees &&
1681
+ <Grid size={{ xs: 12}} container spacing={1}>
1682
+ <Grid size={{ xs: 1}}>
1683
+ <Typography
1684
+ variant="subtitle2"
1685
+ color="textPrimary"
1686
+ sx={{ fontWeight: "bold", textAlign: "right" }}
1687
+ >
1688
+ -
1689
+ </Typography>
1690
+ </Grid>
1691
+ <Grid size={{ xs: 3, md: 4 }}>
1692
+ <Typography
1693
+ variant="subtitle2"
1694
+ color="textPrimary"
1695
+ sx={{ fontWeight: "bold", textAlign: "right" }}
1696
+ >
1697
+ {totalFees}
1698
+ </Typography>
1699
+ </Grid>
1700
+ <Grid size={{ xs: 1}}>
1701
+ <Typography
1702
+ variant="subtitle2"
1703
+ color="textPrimary"
1704
+ sx={{ fontWeight: "bold" }}
1705
+ >
1706
+ {fromCurrencyValue}
1707
+ </Typography>
1708
+ </Grid>
1709
+ <Grid size={{ xs: 1}}>
1710
+ <Typography variant="body2" color="textSecondary">{" "}</Typography>
1711
+ </Grid>
1712
+ <Grid size="grow">
1713
+ <Typography
1714
+ variant="subtitle2"
1715
+ color="textPrimary"
1716
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1717
+ >
1718
+ {content.calculator.total_fees}
1719
+ </Typography>
1720
+ </Grid>
1721
+ </Grid>
1722
+ }
1723
+ <Grid size={{ xs: 12}} container spacing={1}>
1724
+ <Grid size={{ xs: 1}}>
1725
+ <Typography
1726
+ variant="subtitle2"
1727
+ color="textPrimary"
1728
+ sx={{ fontWeight: "bold", textAlign: "right" }}
1729
+ >
1730
+ {this.state.exchangeRateLabel}
1731
+ </Typography>
1732
+ </Grid>
1733
+ <Grid size={{ xs: 3, md: 4 }} >
1734
+ <Typography
1735
+ variant="subtitle2"
1736
+ color="textPrimary"
1737
+ sx={{ fontWeight: "bold", textAlign: "right" }}
1738
+ >
1739
+ {exchangeRate}
1740
+ </Typography>
1741
+ </Grid>
1742
+ <Grid size={{ xs: 1}}>
1743
+ <Typography
1744
+ variant="subtitle2"
1745
+ color="textPrimary"
1746
+ sx={{ fontWeight: "bold" }}
1747
+ >
1748
+ {this.state.isUsdt ? 'USDT' : toCurrencyValue}
1749
+ </Typography>
1750
+ </Grid>
1751
+ <Grid size={{ xs: 1}}>
1752
+ <Typography variant="body2" color="textSecondary">{" "}</Typography>
1753
+ </Grid>
1754
+ <Grid size="grow">
1755
+ <Typography
1756
+ variant="subtitle2"
1757
+ color="textPrimary"
1758
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1759
+ >
1760
+ {content.calculator.exchange_rate}
1761
+ </Typography>
1762
+ </Grid>
1763
+ </Grid>
1764
+ <Grid size={{ xs: 12}} container spacing={1}>
1765
+ <Grid size={{ xs: 1}}>
1766
+ <Typography
1767
+ variant="subtitle2"
1768
+ color="textPrimary"
1769
+ sx={{ fontWeight: "bold", textAlign: "right" }}
1770
+ >
1771
+ =
1772
+ </Typography>
1773
+ </Grid>
1774
+ <Grid size={{ xs: 3, md: 4 }} >
1775
+ <Typography
1776
+ variant="subtitle2"
1777
+ color="textPrimary"
1778
+ sx={{ fontWeight: "bold", textAlign: "right" }}
1779
+ >
1780
+ {this.state.isUsdt ? convertValueCrypto : (+receivedValue + taxReceiver).toFixed(2)}
1781
+ </Typography>
1782
+ </Grid>
1783
+ <Grid size={{ xs: 1}}>
1784
+ <Typography
1785
+ variant="subtitle2"
1786
+ color="textPrimary"
1787
+ sx={{ fontWeight: "bold" }}
1788
+ >
1789
+ {this.state.isUsdt ? 'USD' : toCurrencyValue}
1790
+ </Typography>
1791
+ </Grid>
1792
+ <Grid size={{ xs: 1}}>
1793
+ <Typography variant="body2" color="textSecondary">{" "}</Typography>
1794
+ </Grid>
1795
+ <Grid size="grow">
1796
+ <Typography
1797
+ variant="subtitle2"
1798
+ color="textPrimary"
1799
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1800
+ >
1801
+ {content.calculator.converted_amount}
1802
+ </Typography>
1803
+ </Grid>
1804
+ </Grid>
1805
+
1806
+ {taxReceiver > 0 &&
1807
+ <Grid size={{ xs: 12}} container spacing={1}>
1808
+ <Grid size={{ xs: 1}}>
1809
+ <Typography
1810
+ variant="subtitle2"
1811
+ color="textPrimary"
1812
+ sx={{ fontWeight: "bold", textAlign: "right" }}
1813
+ >
1814
+ -
1815
+ </Typography>
1816
+ </Grid>
1817
+ <Grid size={{ xs: 3, md: 4 }} >
1818
+ <Typography
1819
+ variant="subtitle2"
1820
+ color="textPrimary"
1821
+ sx={{ fontWeight: "bold", textAlign: "right" }}
1822
+ >
1823
+ {(+taxReceiver).toFixed(2)}
1824
+ </Typography>
1825
+ </Grid>
1826
+ <Grid size={{ xs: 1}}>
1827
+ <Typography
1828
+ variant="subtitle2"
1829
+ color="textPrimary"
1830
+ sx={{ fontWeight: "bold" }}
1831
+ >
1832
+ {toCurrencyValue}
1833
+ </Typography>
1834
+ </Grid>
1835
+ <Grid size={{ xs: 1}}>
1836
+ <Typography variant="body2" color="textSecondary">{" "}</Typography>
1837
+ </Grid>
1838
+ <Grid size="grow">
1839
+ <Typography
1840
+ variant="subtitle2"
1841
+ color="textPrimary"
1842
+ sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
1843
+ >
1844
+ {toCurrencyValue == "COP" ? content?.calculator.tax_co : content?.calculator.tax_pe}
1845
+ </Typography>
1846
+ </Grid>
1847
+ </Grid>
1848
+ }
1849
+ </Grid>
1850
+ }
1851
+ <br></br>
1852
+ <Grid container direction="column" spacing={0} >
1853
+ <Grid>
1854
+ <Typography
1855
+ sx={classes.labelAmount}
1856
+ gutterBottom
1857
+ variant="subtitle1"
1858
+ component="div"
1859
+ >
1860
+ {content.landing.receiver_content}
1861
+ </Typography>
1862
+ </Grid>
1863
+ <Grid size={{ xs: 12}} container>
1864
+ <Grid size={{ xs: 8, md:9}}
1865
+ >
1866
+ <Paper sx={classes.inputAmount}>
1867
+ <InputBase
1868
+ id="receiver"
1869
+ sx={classes.inputAmountText}
1870
+ type="number"
1871
+ required
1872
+ value={receivedValue}
1873
+ disabled={true}
1874
+ startAdornment={
1875
+ <InputAdornment
1876
+ position="start"
1877
+ >
1878
+ <span>{loadingTo && <CircularProgress size={18} />}</span>
1879
+ </InputAdornment>
1880
+ }
1881
+ endAdornment={
1882
+ <InputAdornment
1883
+ position="end"
1884
+ >
1885
+ <span sx={{
1886
+ fontSize: "10px",
1887
+ fontWeight: "500",
1888
+ paddingTop: "15px",
1889
+ paddingRight: "5px"
1890
+ }}>
1891
+ {
1892
+ (toCountryValue == "AR" &&
1893
+ paymentMethods.length &&
1894
+ paymentMethods[0].isWallet &&
1895
+ !loadingTo &&
1896
+ !loadingFrom) ? `(${paymentMethods[0].amount} ARS)` : ''
1897
+ }
1898
+ </span>
1899
+ </InputAdornment>
1900
+ }
1901
+ slotProps={{
1902
+ input: { min: minFromValue, max: maxFromValue }
1903
+ }}
1904
+ onChange={this.handleReceived}
1905
+ />
1906
+ </Paper>
1907
+ </Grid>
1908
+ <Grid size={{ xs: 4, md:3}}
1909
+ >
1910
+ <Autocomplete
1911
+ disabled={loadingTo || loadingFrom}
1912
+ options={countries.filter((country) => {
1913
+ if (
1914
+ calculator &&
1915
+ calculator[fromCountryValue] &&
1916
+ calculator[fromCountryValue].active &&
1917
+ calculator[fromCountryValue].countryTo[
1918
+ country.code
1919
+ ] &&
1920
+ calculator[fromCountryValue].countryTo[country.code]
1921
+ .active
1922
+ ) {
1923
+ return country;
1924
+ }
1925
+ })}
1926
+ sx={{
1927
+ fontSize: 14,
1928
+ "& > span": {
1929
+ marginRight: 10,
1930
+ fontSize: 18,
1931
+ },
1932
+ }}
1933
+ disableClearable
1934
+ value={
1935
+ countries.filter(
1936
+ (country) => country.code == toCountryValue
1937
+ )[0]
1938
+ }
1939
+ autoHighlight
1940
+ getOptionLabel={(option) => `${option.currency}`}
1941
+ renderOption={(props, option) => (
1942
+ <Box component="li" {...props}>
1943
+ <span style={{ marginRight: "5px" }}>
1944
+ <FlagsHelpers code={option.code == "PE-USD" ? "PE" : option.code} />
1945
+ </span>
1946
+ {option.currency}
1947
+ </Box>
1948
+ )}
1949
+ renderInput={(params) => (
1950
+ <Paper variant="outlined" sx={classes.rootFlags}>
1951
+ <TextField
1952
+ {...params}
1953
+ variant="standard"
1954
+ slotProps={{
1955
+ input: {
1956
+ ...params.InputProps,
1957
+ startAdornment: (
1958
+ <FlagsHelpers
1959
+ code={this.state.toCountryValue == "PE-USD" ?
1960
+ "PE" : this.state.toCountryValue
1961
+ }>
1962
+ </FlagsHelpers>
1963
+ ),
1964
+ disableUnderline: true,
1965
+ }
1966
+ }}
1967
+ />
1968
+ </Paper>
1969
+ )}
1970
+ onChange={this.handleOnChangeToCountry}
1971
+ />
1972
+ </Grid>
1973
+ </Grid>
1974
+ <Grid size={{ xs: 12}} container>
1975
+ <Grid size={{ xs: 12}}>
1976
+ {!isLoading && !loadingFrom && !loadingTo && (
1977
+ <FormHelperText sx={{ color: "red" }}>
1978
+ {(receivedValue < minToValue &&
1979
+ content.landing.min_value.replace(
1980
+ "minValue",
1981
+ minToValue
1982
+ )) ||
1983
+ (receivedValue > maxToValue &&
1984
+ content.landing.max_value.replace(
1985
+ "maxValue",
1986
+ maxToValue
1987
+ ))}
1988
+ </FormHelperText>
1989
+ )}
1990
+ </Grid>
1991
+ </Grid>
1992
+ {(toCountryValue == "VE" || toCountryValue == "AR") &&
1993
+ paymentMethods &&
1994
+ !loadingTo &&
1995
+ !loadingFrom && (
1996
+ <Grid size={{ xs: 12}}>
1997
+ <FormControl fullWidth>
1998
+ <Select
1999
+ id="demo-customized-select-native"
2000
+ value="Banks"
2001
+ onChange={this.changeBank}
2002
+ >
2003
+ {paymentMethods &&
2004
+ paymentMethods.map((payment, index) => {
2005
+ if (payment.id == "trc20") {
2006
+ return <MenuItem key={payment.name + index} value={payment.id}>
2007
+ Tron TRC20 ({payment.currency})
2008
+ </MenuItem>
2009
+ }
2010
+ return <MenuItem key={payment.name + index} value={payment.id}>
2011
+ {payment.label}
2012
+ </MenuItem>
2013
+ })}
2014
+ </Select>
2015
+ </FormControl>
2016
+ </Grid>
2017
+ )
2018
+ }
2019
+ </Grid>
2020
+ <br></br>
2021
+ {!onlySimulation &&
2022
+ <>
2023
+ <Grid container direction="column" spacing={0}>
2024
+ {this.state.hasValidCoupon && (plus != null && plus != 'undefined' && plus != 0) &&
2025
+ <Grid>
2026
+ <p
2027
+ style={{
2028
+ textAlign: "center",
2029
+ }}
2030
+ >
2031
+ {content.calculator.plus
2032
+ .replace("amount", plus)
2033
+ .replace("currency", this.state.isUsdt ? 'USDT' : toCurrencyValue)}
2034
+ </p>
2035
+ </Grid>
2036
+ }
2037
+ <Grid>
2038
+ <Typography
2039
+ sx={classes.labelCoupon}
2040
+ gutterBottom
2041
+ variant="subtitle1"
2042
+ component="div"
2043
+ >
2044
+ {content.landing.coupon_content}
2045
+ </Typography>
2046
+ </Grid>
2047
+ <Grid size={{ xs: 12}} container>
2048
+ <Grid size={{ xs: 5}}>
2049
+ <Paper sx={classes.inputCoupon}>
2050
+ <InputBase
2051
+ sx={classes.inputCouponText}
2052
+ value={couponValue}
2053
+ disabled={loadingFrom || loadingTo}
2054
+ type="text"
2055
+ onChange={this.handleCoupon}
2056
+ />
2057
+ </Paper>
2058
+ </Grid>
2059
+
2060
+ {this.state.hasValidCoupon && (plus != null && plus != 'undefined' && plus != 0) &&
2061
+ <Grid size={{ xs: 2}} sx={{ paddingLeft: "3px" }}>
2062
+ <Tooltip title={content.calculator.remove_coupon}>
2063
+ <Button
2064
+ sx={classes.buttonRemoveCoupon}
2065
+ onClick={this.removeCoupon}
2066
+ >
2067
+ <HighlightOffOutlinedIcon
2068
+ sx={{ color: "white" }} />
2069
+ </Button>
2070
+ </Tooltip>
2071
+ </Grid>
2072
+ }
2073
+ </Grid>
2074
+ {!this.state.hasValidCoupon && (
2075
+ <Grid size={{ xs: 12}}>
2076
+ <Typography
2077
+ sx={{
2078
+ color: "red",
2079
+ textAlign: "center",
2080
+ maxWidth: "100%",
2081
+ //paddingTop: "10px"
2082
+ }}
2083
+ >
2084
+ {
2085
+ this.state.countryError.hasErrors ?
2086
+ <>
2087
+ {this.state.countryError.value == "from" ? content.calculator.invalid_coupon_country_from : ""}
2088
+ {this.state.countryError.value == "to" ? content.calculator.invalid_coupon_country_to : ""}
2089
+ {this.state.countryError.value == "amount_from" ? content.calculator.invalid_coupon_amount_from : ""}
2090
+ {this.state.countryError.value == "" ? content.calculator.invalid_coupon_message : ""}
2091
+ </>
2092
+ : ""
2093
+ }
2094
+ </Typography>
2095
+ </Grid>
2096
+ )}
2097
+ </Grid>
2098
+ <br></br>
2099
+ <Grid size={{ xs: 12}} sx={{ marginTop: "20px", marginBottom: "10px" }}>
2100
+ <Button
2101
+ sx={startDisabled ? classes.buttonStartDisabled : classes.buttonStart}
2102
+ variant="contained"
2103
+ disabled={startDisabled}
2104
+ onClick={this.handleSubmitForm}
2105
+ >
2106
+ <Typography sx={classes.textButtonStart}>
2107
+ {content.landing.button_start}
2108
+ </Typography>
2109
+ </Button>
2110
+ </Grid>
2111
+ <br></br>
2112
+ </>
2113
+ }
2114
+ {recalculate &&
2115
+ <Grid size={{ xs: 12}}>
2116
+ <Typography
2117
+ sx={classes.labelUpdateTC}
2118
+ >
2119
+ <Timer locale={locale} />
2120
+ </Typography>
2121
+ </Grid>
2122
+ }
2123
+ {this.state.hasError && (
2124
+ <Grid size={{ xs: 12}}>
2125
+ <Typography
2126
+ sx={{
2127
+ color: "red",
2128
+ textAlign: "center",
2129
+ maxWidth: "100%",
2130
+ paddingTop: "10px"
2131
+ }}
2132
+ >
2133
+ {content.error_general}
2134
+ </Typography>
2135
+ </Grid>
2136
+ )}
2137
+ <Grid size={{ xs: 12}} sx={{ marginTop: "45px" }}>
2138
+ <Divider></Divider>
2139
+ </Grid>
2140
+ <Grid size={{ xs: 12}} container
2141
+ direction="row"
2142
+ justifyContent="center"
2143
+ alignItems="center"
2144
+ sx={{ paddingBottom: "10px" }}>
2145
+ <Typography
2146
+ variant="subtitle1"
2147
+ >
2148
+ <span style={{ fontSize: "10px", textAlign: "center" }}>Powered by&nbsp;</span>
2149
+ <span style={{ fontWeight: "bold", textAlign: "center", fontSize: "12px", }}>Orquezta</span>
2150
+ </Typography>
2151
+ </Grid>
2152
+ </Grid>
2153
+ </Paper>
2154
+ </Fragment>
2155
2155
  );
2156
2156
  }
2157
2157
  }