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