@traund/orquezta-widget-calculator 1.1.2 → 1.1.4

package/src/calculator.js

@@ -28,2131 +28,2131 @@ import FlagsHelpers from "./helpers/flagsHelpers";
 import { applyTaxDiscount } from "./helpers/taxDiscount";
 import { getSignatureHeader } from "./core/signature";
 class Calculator extends Component {
-    state = {
-        config: this.props.config ,
-        testMode: this.props.testMode,
-        sendValue: 100.0,
-        sendValueUSD: 100.0,
-        convertValue: 100.0,
-        convertValueCrypto: 100.0,
-        receivedValue: 0.0,
-        fees: {},
-        fromExchangeRate: 0.00,
-        couponValue: this.props.onlySimulation ? "" : this.props.couponCode,
-        fromCountryValue: "US",
-        fromCurrencyValue: "USD",
-        toCountryValue: "PE-USD",
-        toCurrencyValue: "USD",
-        isLoading: false,
-        storeId: null,
-        email: "",
-        hasError: false,
-        hasAmountError: false,
-        hasEmailError: false,
-        hasValidCoupon: true,
-        isValid: true,
-        isSuccess: false,
-        showCallToAction: false,
-        countryError: {
-            hasErrors: false,
-            value: "",
-        },
-        calculator: {},
-        minFromValue: 20,
-        maxFromValue: 5000,
-        minToValue: 80,
-        maxToValue: 20000,
-        plus: 0,
-        couponRedeemed: false,
-        typingTimeout: 0,
-        typingTimeoutCoupon: 0,
-        calculating: true,
-        banks: false,
-        loadingTo: true,
-        loadingFrom: false,
-        recalculate: false,
-        paymentMethods: [],
-        exchangeRateLabel: "x",
-        exchangeRate: 0.0,
-        isUsdt: false,
-        networkFee: 0.0,
-        paypalFee: 0.0,
-        traundFee: 0.0,
-        totalFees: 0.0,
-        showTotalFees: false,
-        isCountryFromPayPal: false,
-        onlySimulation: this.props.onlySimulation,
-        reference:this.props.reference,
-        secretKey: this.props.secretKey,
-        taxSender: 0.00,
-        taxReceiver: 0.00
-    };
-
-    ENDPOINTS = new Endpoints(this.state.testMode,this.state.config);
-
-    constructor(props) {
-        super(props);
-        this.unsubscribe = [];
+  state = {
+    config: this.props.config,
+    testMode: this.props.testMode,
+    sendValue: 100.0,
+    sendValueUSD: 100.0,
+    convertValue: 100.0,
+    convertValueCrypto: 100.0,
+    receivedValue: 0.0,
+    fees: {},
+    fromExchangeRate: 0.00,
+    couponValue: this.props.onlySimulation ? "" : this.props.couponCode,
+    fromCountryValue: "US",
+    fromCurrencyValue: "USD",
+    toCountryValue: "PE-USD",
+    toCurrencyValue: "USD",
+    isLoading: false,
+    storeId: null,
+    email: "",
+    hasError: false,
+    hasAmountError: false,
+    hasEmailError: false,
+    hasValidCoupon: true,
+    isValid: true,
+    isSuccess: false,
+    showCallToAction: false,
+    countryError: {
+      hasErrors: false,
+      value: "",
+    },
+    calculator: {},
+    minFromValue: 20,
+    maxFromValue: 5000,
+    minToValue: 80,
+    maxToValue: 20000,
+    plus: 0,
+    couponRedeemed: false,
+    typingTimeout: 0,
+    typingTimeoutCoupon: 0,
+    calculating: true,
+    banks: false,
+    loadingTo: true,
+    loadingFrom: false,
+    recalculate: false,
+    paymentMethods: [],
+    exchangeRateLabel: "x",
+    exchangeRate: 0.0,
+    isUsdt: false,
+    networkFee: 0.0,
+    paypalFee: 0.0,
+    traundFee: 0.0,
+    totalFees: 0.0,
+    showTotalFees: false,
+    isCountryFromPayPal: false,
+    onlySimulation: this.props.onlySimulation,
+    reference: this.props.reference,
+    secretKey: this.props.secretKey,
+    taxSender: 0.00,
+    taxReceiver: 0.00
+  };
+
+  ENDPOINTS = new Endpoints(this.state.testMode, this.state.config);
+
+  constructor(props) {
+    super(props);
+    this.unsubscribe = [];
+  }
+
+  async componentDidMount() {
+    //if (db) db.clearPersistence();
+    const firebase = await loadFirebaseDB(this.state.testMode, this.state.config);
+    const db = firebase.firestore();
+
+    this.subscribeCalculatorConfig(db);
+
+    if (
+      !sessionStorage.getItem(`storeId`) ||
+      sessionStorage.getItem(`storeId`) == null ||
+      sessionStorage.getItem(`storeId`) == undefined ||
+      sessionStorage.getItem(`storeId`) == ""
+    ) {
+      await this.createTransaction(db);
+    } else {
+      await this.setState({ storeId: sessionStorage.getItem(`storeId`) });
     }
 
-    async componentDidMount() {
-        //if (db) db.clearPersistence();
-         const firebase = await loadFirebaseDB(this.state.testMode, this.state.config);
-        const db = firebase.firestore();
+    this.calculate("initial");
 
-        this.subscribeCalculatorConfig(db);
+    this.subscribeTransaction(db);
 
-        if (
-            !sessionStorage.getItem(`storeId`) ||
-            sessionStorage.getItem(`storeId`) == null ||
-            sessionStorage.getItem(`storeId`) == undefined ||
-            sessionStorage.getItem(`storeId`) == ""
-        ) {
-            await this.createTransaction(db);
-        } else {
-            await this.setState({ storeId: sessionStorage.getItem(`storeId`) });
-        }
+    // this.unloadListener(db);
+  }
 
-        this.calculate("initial");
+  componentWillUnmount() {
+    this.unsubscribe && this.unsubscribe.map((unsubscribe) => unsubscribe());
+    clearTimeout(this.state.recalc);
+  }
 
-        this.subscribeTransaction(db);
+  setIdForPaymentMethods(payments) {
+    if (payments) {
+      let paymentsWithId = payments.map((el) => {
+        return {
+          ...el,
+          id: el.name.replace(/ /g, "").toLowerCase(),
+        };
+      });
 
-        // this.unloadListener(db);
-    }
+      const active = paymentsWithId.find(payment => payment.isActive);
+      if (active) {
+        if (active.id === 'trc20') {
+          this.setState({ isUsdt: true });
+        }
+      }
 
-    componentWillUnmount() {
-        this.unsubscribe && this.unsubscribe.map((unsubscribe) => unsubscribe());
-        clearTimeout(this.state.recalc);
+      return paymentsWithId;
     }
-    
-    setIdForPaymentMethods(payments) {
-        if (payments) {
-            let paymentsWithId = payments.map((el) => {
-                return {
-                    ...el,
-                    id: el.name.replace(/ /g, "").toLowerCase(),
-                };
-            });
 
-            const active = paymentsWithId.find(payment => payment.isActive);
-            if (active) {
-                if (active.id === 'trc20') {
-                    this.setState({ isUsdt: true });
-                }
-            }
+    return false;
+  }
+
+  createTransaction = async (db) => {
+    let model = {
+      coupon: this.state.couponValue,
+      from: {
+        amount: +this.state.sendValue,
+        country: this.state.fromCountryValue,
+        currency: this.state.fromCurrencyValue,
+      },
+      to: {
+        amount: +this.state.receivedValue,
+        country: this.state.toCountryValue,
+        currency: this.state.toCurrencyValue,
+      },
+      timestamp: Date.now(),
+    };
 
-            return paymentsWithId;
-        }
+    try {
+      const transaction = await db.collection("transactions").add(model);
+      await this.setState({ storeId: transaction.id });
+      sessionStorage.setItem("storeId", `${transaction.id}`);
+    } catch (e) {
+      this.setState({ hasError: true });
+    }
+  };
 
-        return false;
+  addLabelToPaymentMethods = (paymentMethods) => {
+    if (paymentMethods) {
+      return paymentMethods.map(paymentMethod => ({ ...paymentMethod, label: this.paymentMethodLabel(paymentMethod.name) }));
     }
+  }
+
+  paymentMethodLabel = (paymentMethodName) => {
+    const content = this.props.locale === 'es' ? es : en;
+    const labels = {
+      Zelle: 'Zelle',
+      BBVABank: content.banks.bbva,
+      STP: 'STP',
+      //BANK: 'BANK',
+      CreditBankOfPeru: content.banks.bcp,
+      Interbank: 'Interbank',
+      ScotiabankPeru: content.banks.scotiabank_peru,
+      WesternDiscountBank: content.banks.western_discount_bank,
+      Provincial: 'Provincial',
+      Mercantil: 'Mercantil',
+      Banesco: 'Banesco',
+      UalaNew: 'Ualá',
+      MercadoPagoNew: 'Mercado Pago',
+      bank: 'Otra entidad financiera (CBU)'
+    }
+    return paymentMethodName in labels ? labels[paymentMethodName] : paymentMethodName;
+  }
+
+  subscribeTransaction = async (db) => {
+    try {
+      const transactions = await db
+        .collection("transactions")
+        .doc(
+          `${this.state.storeId
+            ? this.state.storeId
+            : sessionStorage.getItem("storeId")
+          }`
+        )
+        .onSnapshot(async (transaction) => {
+          const data = await transaction.data();
+          if (data) {
+            const { from, to } = data;
+            let receivedValue = to.amount;
+
+            if (to.paymentMethods && to.paymentMethods.length > 0) {
+              const element = to.paymentMethods.find(element => element.isActive);
+              if (element) {
+                receivedValue = element.isWallet ? element.amountCrypto : element.amount;
+              }
+            }
 
-    createTransaction = async (db) => {
-        let model = {
-            coupon: this.state.couponValue,
-            from: {
-                amount: +this.state.sendValue,
-                country: this.state.fromCountryValue,
-                currency: this.state.fromCurrencyValue,
-            },
-            to: {
-                amount: +this.state.receivedValue,
-                country: this.state.toCountryValue,
-                currency: this.state.toCurrencyValue,
-            },
-            timestamp: new Date(),
-        };
+            let {
+              newAmountSender,
+              newAmountReceiver,
+              appliedDiscountSender,
+              appliedDiscountReceiver
+            } = applyTaxDiscount(from.country, to.country, +this.state.sendValue, to.amount);
 
-        try {
-            const transaction = await db.collection("transactions").add(model);
-            await this.setState({ storeId: transaction.id });
-            sessionStorage.setItem("storeId", `${transaction.id}`);
-        } catch (e) {
-            this.setState({ hasError: true });
-        }
-    };
+            receivedValue = (+newAmountReceiver).toFixed(2);
 
-    addLabelToPaymentMethods = (paymentMethods) => {
-        if (paymentMethods) {
-            return paymentMethods.map(paymentMethod => ({ ...paymentMethod, label: this.paymentMethodLabel(paymentMethod.name) }));
-        }
-    }
+            await this.setState({
+              sendValue: newAmountSender + appliedDiscountSender,
+              convertValue: from.amountConverted,
+              receivedValue: receivedValue,
+              fees: from.fees,
+              fromExchangeRate: from.exchangeRate,
+              fromCurrencyValue: from.currency,
+              toCurrencyValue: to.currency,
+              fromCountryValue: from.country === "TR" ? "WLT" : from.country,
+              toCountryValue: to.country,
+              coupon: data.coupon,
+              plus: data.coupon ? data.promo : 0,
+              couponRedeemed: false,
+              banks: this.setIdForPaymentMethods(to.banks),
+              paymentMethods: this.addLabelToPaymentMethods(this.setIdForPaymentMethods(to.paymentMethods)),
+              taxSender: appliedDiscountSender,
+              taxReceiver: appliedDiscountReceiver
+            }, () => {
+              this.showExchangeRate(receivedValue);
+              this.updateLimits();
+              this.addCoupon();
+            });
 
-    paymentMethodLabel = (paymentMethodName) => {
-        const content = this.props.locale === 'es' ? es : en;
-        const labels = {
-            Zelle: 'Zelle',
-            BBVABank: content.banks.bbva,
-            STP: 'STP',
-            //BANK: 'BANK',
-            CreditBankOfPeru: content.banks.bcp,
-            Interbank: 'Interbank',
-            ScotiabankPeru: content.banks.scotiabank_peru,
-            WesternDiscountBank: content.banks.western_discount_bank,
-            Provincial: 'Provincial',
-            Mercantil: 'Mercantil',
-            Banesco: 'Banesco',
-            UalaNew: 'Ualá',
-            MercadoPagoNew: 'Mercado Pago',
-            bank: 'Otra entidad financiera (CBU)'
-        }
-        return paymentMethodName in labels ? labels[paymentMethodName] : paymentMethodName;
+          }
+        });
+      this.unsubscribe.push(transactions);
+    } catch (e) {
+      this.setState({ hasError: true });
     }
+  };
 
-    subscribeTransaction = async (db) => {
-        try {
-            const transactions = await db
-                .collection("transactions")
-                .doc(
-                    `${this.state.storeId
-                        ? this.state.storeId
-                        : sessionStorage.getItem("storeId")
-                    }`
-                )
-                .onSnapshot(async (transaction) => {
-                    const data = await transaction.data();
-                    if (data) {
-                        const { from, to } = data;
-                        let receivedValue = to.amount;
-
-                        if (to.paymentMethods && to.paymentMethods.length > 0) {
-                            const element = to.paymentMethods.find(element => element.isActive);
-                            if (element) {
-                                receivedValue = element.isWallet ? element.amountCrypto : element.amount;
-                            }
-                        }
+  subscribeCalculatorConfig = async (db) => {
+    try {
+      const calculator = await db
+        .collection("variables")
+        .onSnapshot(async (variable) => {
+          let variables = {};
 
-                        let {
-                            newAmountSender,
-                            newAmountReceiver,
-                            appliedDiscountSender,
-                            appliedDiscountReceiver
-                        } = applyTaxDiscount(from.country, to.country, +this.state.sendValue, to.amount);
-                        
-                        receivedValue = (+newAmountReceiver).toFixed(2);
-                        
-                        await this.setState({
-                            sendValue: newAmountSender + appliedDiscountSender,
-                            convertValue: from.amountConverted,
-                            receivedValue: receivedValue,
-                            fees: from.fees,
-                            fromExchangeRate: from.exchangeRate,
-                            fromCurrencyValue: from.currency,
-                            toCurrencyValue: to.currency,
-                            fromCountryValue: from.country === "TR" ? "WLT" : from.country,
-                            toCountryValue: to.country,
-                            coupon: data.coupon,
-                            plus: data.coupon ? data.promo : 0,
-                            couponRedeemed: false,
-                            banks: this.setIdForPaymentMethods(to.banks),
-                            paymentMethods: this.addLabelToPaymentMethods(this.setIdForPaymentMethods(to.paymentMethods)),
-                            taxSender: appliedDiscountSender,
-                            taxReceiver: appliedDiscountReceiver
-                        }, () => {
-                            this.showExchangeRate(receivedValue);
-                            this.updateLimits();
-                            this.addCoupon();
-                        });
+          await variable.forEach((doc) => {
+            variables[doc.id] = doc.data();
+          });
 
-                    }
-                });
-            this.unsubscribe.push(transactions);
-        } catch (e) {
-            this.setState({ hasError: true });
-        }
+          if (Object.keys(variables).length > 0) {
+            this.setState({
+              showCallToAction: variables["event"].show,
+              calculator: variables["calculator"],
+            }, () => {
+              const { timestamp, frequency } = variables["calculator"];
+              const currentTime = +new Date().getTime();
+              const diference = Math.abs(currentTime - timestamp) / 1000;
+              if (diference > frequency) this.updateCaculatorData(db);
+            });
+          }
+        });
+      this.unsubscribe.push(calculator);
+      return calculator;
+    } catch (e) {
+      // this.setState({ hasError: true });
+    }
+  };
+
+  _convertAmount = async (currency) => {
+    try {
+      if (currency == "ARS") {
+        const { data } = await axios.get(`${this.ENDPOINTS.EXCHANGE.getUSDBlueRate}`);
+        let blueRate = await JSON.parse(JSON.stringify(data));
+        blueRate = { result: blueRate.blue.value_sell };
+        return blueRate;
+      } else {
+        const { data } = await axios.get(`${this.ENDPOINTS.EXCHANGE.getRate_v2(currency)}`);
+        return { result: parseFloat(data['usd'][currency.toLowerCase()].toFixed(2)) };
+      }
+    } catch (e) {
+      return e;
+    }
+  };
+
+  updateCaculatorData = async (db) => {
+    const countryModel = {
+      active: false,
+      countryMax: 5000,
+      countryMin: 20,
+      usdSell: 0,
+      usdBuy: 0,
+      rates: { from: 1, to: 1 },
     };
 
-    subscribeCalculatorConfig = async (db) => {
-        try {
-            const calculator = await db
-                .collection("variables")
-                .onSnapshot(async (variable) => {
-                    let variables = {};
-
-                    await variable.forEach((doc) => {
-                        variables[doc.id] = doc.data();
-                    });
-
-                    if (Object.keys(variables).length > 0) {
-                        this.setState({
-                            showCallToAction: variables["event"].show,
-                            calculator: variables["calculator"],
-                        }, () => {
-                            const { timestamp, frequency } = variables["calculator"];
-                            const currentTime = +new Date().getTime();
-                            const diference = Math.abs(currentTime - timestamp) / 1000;
-                            if (diference > frequency) this.updateCaculatorData(db);
-                        });
-                    }
-                });
-            this.unsubscribe.push(calculator);
-            return calculator;
-        } catch (e) {
-            // this.setState({ hasError: true });
-        }
-    };
+    const availableCountries = [
+      "USDT",
+      "AR",
+      "CL",
+      "CO",
+      "DO",
+      "EC",
+      "MX",
+      "PE",
+      "PE-USD",
+      "US",
+      "VE",
+      "ES",
+      "WLT"
+    ];
+
+    const rates = {};
+    let body = { timestamp: new Date().getTime(), frequency: 43200 };
+    await Promise.all(
+      availableCountries.map(async (country) => {
+        let currency = "";
+        body[country] = { ...this.state.calculator[country] };
+        if (body[country] && body[country].countryTo && body[country]) {
+          return await Promise.all(
+            availableCountries.map(async (c) => {
+              if (c != country)
+                body[country].countryTo[c] = {
+                  usdSell: 0,
+                  usdBuy: 0,
+                  ...body[country].countryTo[c],
+                };
+              let usdRate = "";
 
-    _convertAmount = async (currency) => {
-        try {
-            if (currency == "ARS") {
-                const { data } = await axios.get(`${this.ENDPOINTS.EXCHANGE.getUSDBlueRate}`);
-                let blueRate = await JSON.parse(JSON.stringify(data));
-                blueRate = { result: blueRate.blue.value_sell };
-                return blueRate;
-            } else {
-                const { data } = await axios.get(`${this.ENDPOINTS.EXCHANGE.getRate_v2(currency)}`);
-                return { result: parseFloat(data['usd'][currency.toLowerCase()].toFixed(2)) };
-            }
-        } catch (e) {
-            return e;
-        }
-    };
+              if (!rates.hasOwnProperty(c)) {
+                let forceUSD = (c == "USDT" || c == "WLT");
+                currency = countries.find(
+                  (country) => country.code == (forceUSD ? "US" : c)
+                ).currency;
 
-    updateCaculatorData = async (db) => {
-        const countryModel = {
-            active: false,
-            countryMax: 5000,
-            countryMin: 20,
-            usdSell: 0,
-            usdBuy: 0,
-            rates: { from: 1, to: 1 },
-        };
+                usdRate =
+                  currency == "USD"
+                    ? { result: 1 }
+                    : await this._convertAmount(currency);
 
-        const availableCountries = [
-            "USDT",
-            "AR",
-            "CL",
-            "CO",
-            "DO",
-            "EC",
-            "MX",
-            "PE",
-            "PE-USD",
-            "US",
-            "VE",
-            "ES",
-            "WLT"
-        ];
-
-        const rates = {};
-        let body = { timestamp: new Date().getTime(), frequency: 43200 };
-        await Promise.all(
-            availableCountries.map(async (country) => {
-                let currency = "";
-                body[country] = { ...this.state.calculator[country] };
-                if (body[country] && body[country].countryTo && body[country]) {
-                    return await Promise.all(
-                        availableCountries.map(async (c) => {
-                            if (c != country)
-                                body[country].countryTo[c] = {
-                                    usdSell: 0,
-                                    usdBuy: 0,
-                                    ...body[country].countryTo[c],
-                                };
-                            let usdRate = "";
-
-                            if (!rates.hasOwnProperty(c)) {
-                                let forceUSD = (c == "USDT" || c == "WLT");
-                                currency = countries.find(
-                                    (country) => country.code == (forceUSD ? "US" : c)
-                                ).currency;
-
-                                usdRate =
-                                    currency == "USD"
-                                        ? { result: 1 }
-                                        : await this._convertAmount(currency);
-
-                                rates[c] = { buy: 0, sell: 0 };
-                            }
+                rates[c] = { buy: 0, sell: 0 };
+              }
 
-                            if (usdRate && typeof usdRate.result === "number") {
-                                rates[c].buy = rates[c].sell = parseFloat(
-                                    c == "SV" ? usdRate.result : usdRate.result.toFixed(2)
-                                );
-                            } else {
-                                rates[c].buy = rates[c].sell = 1;
-                            }
-                            if (body[country].countryTo[c]) {
-                                body[country].countryTo[c].usdBuy = rates[c].buy;
-                                body[country].countryTo[c].usdSell = rates[c].sell;
-                                body[country].countryTo[c].countryMax = parseFloat(
-                                    c == "SV"
-                                        ? countryModel.countryMax * 1
-                                        : (
-                                            Math.ceil(countryModel.countryMax * rates[c].buy) /
-                                            rates[c].buy
-                                        ).toFixed(2)
-                                );
-                                body[country].countryTo[c].countryMin = parseFloat(
-                                    (c == "SV"
-                                        ? countryModel.countryMin * 1
-                                        : Math.ceil(countryModel.countryMin * rates[c].buy) /
-                                        rates[c].buy
-                                    ).toFixed(2)
-                                );
-                            }
-                            if (rates[country]) {
-                                body[country].usdBuy = rates[country].buy;
-                                body[country].usdSell = rates[country].sell;
-                                body[country].countryMax = parseFloat(
-                                    (country == "SV"
-                                        ? countryModel.countryMax * 1
-                                        : Math.ceil(
-                                            country == "VE"
-                                                ? 1000
-                                                : countryModel.countryMax * rates[country].buy
-                                        ) / rates[country].buy
-                                    ).toFixed(2)
-                                );
-                                body[country].countryMin = parseFloat(
-                                    (country == "SV"
-                                        ? countryModel.countryMin * 1
-                                        : Math.ceil(countryModel.countryMin * rates[country].buy) /
-                                        rates[country].buy
-                                    ).toFixed(2)
-                                );
-                            }
-                        })
-                    );
-                }
+              if (usdRate && typeof usdRate.result === "number") {
+                rates[c].buy = rates[c].sell = parseFloat(
+                  c == "SV" ? usdRate.result : usdRate.result.toFixed(2)
+                );
+              } else {
+                rates[c].buy = rates[c].sell = 1;
+              }
+              if (body[country].countryTo[c]) {
+                body[country].countryTo[c].usdBuy = rates[c].buy;
+                body[country].countryTo[c].usdSell = rates[c].sell;
+                body[country].countryTo[c].countryMax = parseFloat(
+                  c == "SV"
+                    ? countryModel.countryMax * 1
+                    : (
+                      Math.ceil(countryModel.countryMax * rates[c].buy) /
+                      rates[c].buy
+                    ).toFixed(2)
+                );
+                body[country].countryTo[c].countryMin = parseFloat(
+                  (c == "SV"
+                    ? countryModel.countryMin * 1
+                    : Math.ceil(countryModel.countryMin * rates[c].buy) /
+                    rates[c].buy
+                  ).toFixed(2)
+                );
+              }
+              if (rates[country]) {
+                body[country].usdBuy = rates[country].buy;
+                body[country].usdSell = rates[country].sell;
+                body[country].countryMax = parseFloat(
+                  (country == "SV"
+                    ? countryModel.countryMax * 1
+                    : Math.ceil(
+                      country == "VE"
+                        ? 1000
+                        : countryModel.countryMax * rates[country].buy
+                    ) / rates[country].buy
+                  ).toFixed(2)
+                );
+                body[country].countryMin = parseFloat(
+                  (country == "SV"
+                    ? countryModel.countryMin * 1
+                    : Math.ceil(countryModel.countryMin * rates[country].buy) /
+                    rates[country].buy
+                  ).toFixed(2)
+                );
+              }
             })
-        );
-        await db.collection("variables").doc("calculator").update(body);
+          );
+        }
+      })
+    );
+    await db.collection("variables").doc("calculator").update(body);
+  };
+
+  unloadListener = () => {
+    window.onbeforeunload = () => {
+      return this.beforeUnload();
     };
+  };
+
+  beforeUnload = async () => {
+    sessionStorage.removeItem("storeId");
+
+    //if (db) db.clearPersistence();
+    //const { db } = await loadFirebaseDB(this.state.testMode, this.state.config);
+    const firebase = await loadFirebaseDB(this.state.testMode, this.state.config);
+    const db = firebase.firestore();
+
+    return await db
+      .collection("transactions")
+      .doc(`${this.state.storeId}`)
+      .delete();
+  };
+
+  handleSend = async ({ target }) => {
+    await this.setState({ sendValue: target.value });
+    this.calculate();
+  };
+
+  handleReceived = async ({ target }) => {
+    await this.setState({ receivedValue: target.value });
+    this.calculate("to");
+  };
+
+  handleCoupon = async ({ target }) => {
+    if (this.state.typingTimeoutCoupon) {
+      clearTimeout(this.state.typingTimeoutCoupon);
+    }
 
-    unloadListener = () => {
-        window.onbeforeunload = () => {
-            return this.beforeUnload();
-        };
-    };
+    let initialAmount = parseFloat(this.state.receivedValue || 0);
+    let plusAmount = parseFloat(this.state.plus || 0);
+    this.setState({
+      isValid: false,
+      hasValidCoupon: false,
+      countryError: { hasErrors: false, value: "" },
+      receivedValue: initialAmount - plusAmount,
+      couponRedeemed: false,
+      plus: 0,
+    });
+
+    // this.setState({
+    //     hasValidCoupon: false,
+    // });
+
+    this.setState({
+      typingTimeoutCoupon: setTimeout(() => {
+        this.addCoupon();
+      }, 1200),
+    });
+
+    this.setState({
+      couponValue: target.value.toUpperCase(),
+      isValid: true,
+      hasValidCoupon: true,
+      countryError: { hasErrors: false, value: "" },
+    });
+  };
+
+  handleIsLoading = (value) => {
+    this.setState({ isLoading: value });
+  };
+
+  handleToCountryValue = async (value) => {
+    await this.setState({ toCountryValue: value, receivedValue: "" });
+    await this.updateLimits();
+    this.calculate("from");
+    this.setState({ banks: false });
+  };
+
+  handleToCurrencyValue = (value) => {
+    this.setState({ toCurrencyValue: value });
+  };
+
+  handleFromCountryValue = async (value) => {
+    await this.setState({ fromCountryValue: value, isCountryFromPayPal: value == "PAYPAL" });
+    await this.updateLimits();
+    this.calculate();
+  };
+
+  handleFromCurrencyValue = (value) => {
+    this.setState({ fromCurrencyValue: value });
+  };
+
+  updateLimits = (selectedMethod) => {
+
+    const countryData = this.state.calculator[this.state.fromCountryValue == "TR" ? "WLT" : this.state.fromCountryValue];
+    let { countryMin, countryMax, usdBuy } = countryData;
+    let { usdSell } = countryData.countryTo[this.state.toCountryValue || "US"];
+    if (
+      this.state.paymentMethods &&
+      this.state.paymentMethods.length &&
+      this.state.paymentMethods[0].isWallet &&
+      this.state.paymentMethods[0].isActive
+    ) {
+      //usdBuy = 1;
+      usdSell = 1;
+    }
 
-    beforeUnload = async () => {
-        sessionStorage.removeItem("storeId");
+    this.setState({
+      minFromValue:
+        this.state.fromCountryValue == "SV"
+          ? countryMin * usdBuy
+          : Math.ceil(countryMin * usdBuy),
+      maxFromValue:
+        this.state.fromCountryValue == "SV"
+          ? countryMax * usdBuy
+          : Math.ceil(countryMax * usdBuy),
+      minToValue:
+        this.state.toCountryValue == "SV"
+          ? countryMin * usdSell
+          : Math.ceil(countryMin * usdSell),
+      maxToValue:
+        this.state.toCountryValue == "SV"
+          ? countryMax * usdSell
+          : Math.ceil(countryMax * usdSell),
+    });
+  };
+
+  getCountryLimits = (countryFrom, countryTo) => {
+    const countryData = this.state.calculator[countryFrom];
+    let { countryMin, countryMax, usdBuy } = countryData;
+    let { usdSell } = countryData.countryTo[countryTo];
+    if (
+      this.state.paymentMethods &&
+      this.state.paymentMethods.length &&
+      this.state.paymentMethods[0].isWallet &&
+      this.state.paymentMethods[0].isActive
+    ) {
+      //usdBuy = 1;
+      usdSell = 1;
+    }
 
-        //if (db) db.clearPersistence();
-         //const { db } = await loadFirebaseDB(this.state.testMode, this.state.config);
-         const firebase = await loadFirebaseDB(this.state.testMode, this.state.config);
-        const db = firebase.firestore();
+    let limits = {
+      minFromValue: 0,
+      maxFromValue: 0,
+      minToValue: 0,
+      maxToValue: 0,
+    }
 
-        return await db
-            .collection("transactions")
-            .doc(`${this.state.storeId}`)
-            .delete();
-    };
+    if (countryFrom == "SV") {
+      limits.minFromValue = countryMin * usdBuy;
+      limits.maxFromValue = countryMax * usdBuy;
+    } else {
+      limits.minFromValue = Math.ceil(countryMin * usdBuy);
+      limits.maxFromValue = Math.ceil(countryMax * usdBuy);
+    }
 
-    handleSend = async ({ target }) => {
-        await this.setState({ sendValue: target.value });
-        this.calculate();
-    };
+    if (countryTo == "SV") {
+      limits.minToValue = countryMin * usdSell;
+      limits.maxToValue = countryMax * usdSell;
+    } else {
+      limits.minToValue = Math.ceil(countryMin * usdSell);
+      limits.maxToValue = Math.ceil(countryMax * usdSell);
+    }
 
-    handleReceived = async ({ target }) => {
-        await this.setState({ receivedValue: target.value });
-        this.calculate("to");
-    };
+    return limits;
+  };
+
+  calculateExchangeRate = (receivedValue) => {
+    const {
+      fromCurrencyValue,
+      isUsdt,
+      sendValue,
+      isCountryFromPayPal
+    } = this.state;
+
+    if (sendValue != 0 && receivedValue != 0) {
+      let rate = 0.00;
+      let networkFee = 0.00;
+      let countryFromFee = 0.00;
+
+      let amountFromCalc = sendValue;
+      let fee = this.state.calculator[this.state.fromCountryValue].fee ?
+        this.state.calculator[this.state.fromCountryValue].fee
+        : { type: "A", value: 0.00, enabled: false }
+
+      if (fee.enabled) {
+        countryFromFee = fee.type == "A" ? fee.value : (amountFromCalc * fee.value).toFixed(2);
+        amountFromCalc = amountFromCalc - (networkFee + countryFromFee);
+      }
 
-    handleCoupon = async ({ target }) => {
-        if (this.state.typingTimeoutCoupon) {
-            clearTimeout(this.state.typingTimeoutCoupon);
-        }
+      let amountFromUSD = fromCurrencyValue == "USD" ?
+        amountFromCalc :
+        parseFloat(amountFromCalc) / this.state.calculator[this.state.fromCountryValue].usdBuy;
+
+      if (isUsdt) {
+        rate = 1.00;
+        networkFee = isCountryFromPayPal ? 2.00 : (Math.abs(amountFromUSD - receivedValue / rate).toFixed(2));
+      } else {
+        rate = isCountryFromPayPal ?
+          rate = (Math.floor((receivedValue / amountFromCalc) * 100) / 100).toFixed(2) :
+          (Math.floor((receivedValue / sendValue) * 100) / 100).toFixed(2);
+      }
 
-        let initialAmount = parseFloat(this.state.receivedValue || 0);
-        let plusAmount = parseFloat(this.state.plus || 0);
-        this.setState({
-            isValid: false,
-            hasValidCoupon: false,
-            countryError: { hasErrors: false, value: "" },
-            receivedValue: initialAmount - plusAmount,
-            couponRedeemed: false,
-            plus: 0,
-        });
+      if (rate < 1) {
+        rate = (Math.floor((sendValue / receivedValue) * 100) / 100).toFixed(2);
+        networkFee = (Math.abs(receivedValue * rate - amountFromUSD).toFixed(2));
+      }
 
-        // this.setState({
-        //     hasValidCoupon: false,
-        // });
+      this.setState({
+        exchangeRate: rate,
+        networkFee: networkFee,
+        countryFromFee: countryFromFee,
+        sendValueUSD: amountFromUSD
+      });
+    }
+  };
+
+  showExchangeRate = (receivedValue) => {
+    const withoutFee = { amount: 0, value: 0, type: "A", amountUSD: 0, enabled: false };
+    const {
+      fromCurrencyValue,
+      isUsdt,
+      convertValue,
+      fromExchangeRate,
+      fees
+    } = this.state;
+
+    let convertValueCrypto = convertValue;
+    let showTotalFees = false;
+    let exchangeRateLabel = "x";
+
+    if (convertValue != 0 && receivedValue != 0) {
+
+      let feeTraund = fees.traund != null ? { ...fees.traund, enabled: true } : withoutFee;
+      let feePaypal = fees.paypal != null ? { ...fees.paypal, enabled: true } : withoutFee;
+
+      let rate = fromExchangeRate;
+      let networkFee = 0.00;
+      let traundFeeValue = feeTraund.enabled ? feeTraund.amount : 0.00;
+      let paypalFeeValue = feePaypal.enabled ? feePaypal.amount : 0.00;
+
+      showTotalFees = paypalFeeValue > 0;
+      if (isUsdt) {
+        rate = 1;
+        networkFee = Math.abs(convertValue - receivedValue / rate);
+        if (fromCurrencyValue != "USD") {
+          {
+            const { sendValue, paymentMethods } = this.state;
+            if (paymentMethods.length && paymentMethods[0].isWallet) {
+              networkFee = Math.abs(sendValue - Number(paymentMethods[0].amount) / fromExchangeRate)
+            }
+          }
+        }
+        convertValueCrypto = receivedValue;
+        showTotalFees = true;
+      }
 
-        this.setState({
-            typingTimeoutCoupon: setTimeout(() => {
-                this.addCoupon();
-            }, 1200),
-        });
+      if (rate < 1) {
+        exchangeRateLabel = "÷"
+        rate = (Math.floor((convertValue / receivedValue) * 100) / 100).toFixed(2);
+        networkFee = Math.abs(receivedValue * rate - convertValue);
+      }
+      let totalFees = traundFeeValue + paypalFeeValue + networkFee;
+
+      this.setState({
+        exchangeRateLabel: exchangeRateLabel,
+        exchangeRate: rate,
+        traundFee: traundFeeValue.toFixed(2),
+        paypalFee: paypalFeeValue.toFixed(2),
+        networkFee: networkFee.toFixed(2),
+        showTotalFees: showTotalFees,
+        totalFees: totalFees,
+        convertValueCrypto: convertValueCrypto
+      });
+    }
+  };
+
+  calculate = async (source = "from") => {
+    this.setState({
+      recalculate: false,
+      isUsdt: false,
+      exchangeRate: 0.0,
+      couponValue: this.state.couponValue,
+      couponRedeemed: false,
+      reference: this.state.reference,
+      secretKey: this.state.secretKey,
+      plus: 0
+    });
+    if (this.state.recalc) {
+      clearTimeout(this.state.recalc);
+    }
 
-        this.setState({
-            couponValue: target.value.toUpperCase(),
-            isValid: true,
-            hasValidCoupon: true,
-            countryError: { hasErrors: false, value: "" },
-        });
+    let {
+      newAmountSender,
+    } = applyTaxDiscount(this.state.fromCountryValue === "WLT" ? "TR" : this.state.fromCountryValue, this.state.toCountryValue, this.state.sendValue, this.state.receivedValue);
+
+    let model = {
+      coupon: this.state.couponValue,
+      from: {
+        amount: newAmountSender,
+        country: this.state.fromCountryValue === "WLT" ? "TR" : this.state.fromCountryValue,
+        currency: this.state.fromCurrencyValue,
+      },
+      to: {
+        amount: this.state.receivedValue,
+        country: this.state.toCountryValue,
+        currency: this.state.toCurrencyValue,
+      },
     };
 
-    handleIsLoading = (value) => {
-        this.setState({ isLoading: value });
-    };
+    if (source == "initial" || source == "end") {
+      const url = this.ENDPOINTS.OPERATIONS.calculate(this.state.storeId || sessionStorage.getItem('storeId'), "from");
 
-    handleToCountryValue = async (value) => {
-        await this.setState({ toCountryValue: value, receivedValue: "" });
-        await this.updateLimits();
-        this.calculate("from");
-        this.setState({ banks: false });
-    };
+      const res = await axios.post(
+        url,
+        model,
+        {
+          headers: {
+            "x-api-access-sig": getSignatureHeader('POST', url, model, this.state.reference, this.state.secretKey)
+          },
+        }
+      );
 
-    handleToCurrencyValue = (value) => {
-        this.setState({ toCurrencyValue: value });
-    };
+      if (res) {
+        await this.setState({
+          loadingTo: false,
+          loadingFrom: false,
+          recalculate: true,
+          recalc: setTimeout(() => {
+            this.calculate();
+          }, 5 * 60 * 1000),
+        });
+      }
 
-    handleFromCountryValue = async (value) => {
-        await this.setState({ fromCountryValue: value, isCountryFromPayPal: value == "PAYPAL" });
-        await this.updateLimits();
-        this.calculate();
-    };
+      this.setState({
+        loadingTo: false,
+        loadingFrom: false,
+      }, () => {
+        this.addCoupon()
+      });
 
-    handleFromCurrencyValue = (value) => {
-        this.setState({ fromCurrencyValue: value });
-    };
+      return;
+    }
 
-    updateLimits = (selectedMethod) => {
-        
-        const countryData = this.state.calculator[this.state.fromCountryValue == "TR" ? "WLT" : this.state.fromCountryValue];
-        let { countryMin, countryMax, usdBuy } = countryData;
-        let { usdSell } = countryData.countryTo[this.state.toCountryValue || "US"];
+    if (this.state.typingTimeout) clearTimeout(this.state.typingTimeout);
+    this.setState({
+      typingTimeout: setTimeout(async () => {
+        let validAmount = this.validateAmount(model.from.amount, "from");
+        let validAmountTo = this.validateAmount(model.to.amount, "to");
         if (
-            this.state.paymentMethods &&
-            this.state.paymentMethods.length &&
-            this.state.paymentMethods[0].isWallet &&
-            this.state.paymentMethods[0].isActive
+          (validAmount && validAmountTo) ||
+          (validAmount && source == "from") ||
+          (validAmountTo && source == "to")
         ) {
-            //usdBuy = 1;
-            usdSell = 1;
-        }
+          await this.setState({
+            loadingTo: source == "from",
+            loadingFrom: source == "to",
+            couponValue: this.state.couponValue,
+            couponRedeemed: false,
+            plus: 0
+          });
 
-        this.setState({
-            minFromValue:
-                this.state.fromCountryValue == "SV"
-                    ? countryMin * usdBuy
-                    : Math.ceil(countryMin * usdBuy),
-            maxFromValue:
-                this.state.fromCountryValue == "SV"
-                    ? countryMax * usdBuy
-                    : Math.ceil(countryMax * usdBuy),
-            minToValue:
-                this.state.toCountryValue == "SV"
-                    ? countryMin * usdSell
-                    : Math.ceil(countryMin * usdSell),
-            maxToValue:
-                this.state.toCountryValue == "SV"
-                    ? countryMax * usdSell
-                    : Math.ceil(countryMax * usdSell),
-        });
-    };
+          if (source == "from")
+            this.setState({
+              receivedValue: "",
+            });
+          if (source == "to")
+            this.setState({
+              sendValue: "",
+            });
+          const url = this.ENDPOINTS.OPERATIONS.calculate(this.state.storeId, source)
 
-    getCountryLimits = (countryFrom, countryTo) => {
-        const countryData = this.state.calculator[countryFrom];
-        let { countryMin, countryMax, usdBuy } = countryData;
-        let { usdSell } = countryData.countryTo[countryTo];
-        if (
-            this.state.paymentMethods &&
-            this.state.paymentMethods.length &&
-            this.state.paymentMethods[0].isWallet &&
-            this.state.paymentMethods[0].isActive
-        ) {
-            //usdBuy = 1;
-            usdSell = 1;
-        }
+          const res = await axios.post(
+            url,
+            model,
+            {
+              headers: {
+                "x-api-access-sig": getSignatureHeader('POST', url, model, this.state.reference, this.state.secretKey)
+              },
+            }
+          );
 
-        let limits = {
-            minFromValue: 0,
-            maxFromValue: 0,
-            minToValue: 0,
-            maxToValue: 0,
+          if (res) {
+            await this.setState({
+              loadingTo: false,
+              loadingFrom: false,
+              recalculate: true,
+              recalc: setTimeout(() => {
+                this.calculate();
+              }, 5 * 60 * 1000),
+            });
+          }
         }
+      }, 650),
+    }, () => {
+      this.addCoupon();
+    });
+  };
 
-        if (countryFrom == "SV") {
-            limits.minFromValue = countryMin * usdBuy;
-            limits.maxFromValue = countryMax * usdBuy;
-        } else {
-            limits.minFromValue = Math.ceil(countryMin * usdBuy);
-            limits.maxFromValue = Math.ceil(countryMax * usdBuy);
-        }
+  async addCoupon() {
+    let initialAmount = parseFloat(this.state.receivedValue || 0);
+    let plusAmount = parseFloat(this.state.plus || 0);
 
-        if (countryTo == "SV") {
-            limits.minToValue = countryMin * usdSell;
-            limits.maxToValue = countryMax * usdSell;
-        } else {
-            limits.minToValue = Math.ceil(countryMin * usdSell);
-            limits.maxToValue = Math.ceil(countryMax * usdSell);
-        }
+    if (initialAmount == 0) return;
 
-        return limits;
-    };
+    if (this.state.couponValue == "") {
+      this.setState({
+        isValid: true,
+        hasValidCoupon: true,
+        countryError: { hasErrors: false, value: "" },
+        receivedValue: initialAmount - plusAmount,
+        couponRedeemed: false,
+        plus: 0,
+      });
+      return;
+    }
 
-    calculateExchangeRate = (receivedValue) => {
-        const {
-            fromCurrencyValue,
-            isUsdt,
-            sendValue,
-            isCountryFromPayPal
-        } = this.state;
-
-        if (sendValue != 0 && receivedValue != 0) {
-            let rate = 0.00;
-            let networkFee = 0.00;
-            let countryFromFee = 0.00;
-
-            let amountFromCalc = sendValue;
-            let fee = this.state.calculator[this.state.fromCountryValue].fee ?
-                this.state.calculator[this.state.fromCountryValue].fee
-                : { type: "A", value: 0.00, enabled: false }
-
-            if (fee.enabled) {
-                countryFromFee = fee.type == "A" ? fee.value : (amountFromCalc * fee.value).toFixed(2);
-                amountFromCalc = amountFromCalc - (networkFee + countryFromFee);
-            }
+    let { data } = await this.validateCoupon(this.state.couponValue);
+    let { isValid, settings } = data.data;
 
-            let amountFromUSD = fromCurrencyValue == "USD" ?
-                amountFromCalc :
-                parseFloat(amountFromCalc) / this.state.calculator[this.state.fromCountryValue].usdBuy;
-
-            if (isUsdt) {
-                rate = 1.00;
-                networkFee = isCountryFromPayPal ? 2.00 : (Math.abs(amountFromUSD - receivedValue / rate).toFixed(2));
-            } else {
-                rate = isCountryFromPayPal ?
-                    rate = (Math.floor((receivedValue / amountFromCalc) * 100) / 100).toFixed(2) :
-                    (Math.floor((receivedValue / sendValue) * 100) / 100).toFixed(2);
-            }
+    if (!isValid) {
+      this.setState({
+        isValid: false,
+        hasValidCoupon: false,
+        countryError: { hasErrors: false, value: "" },
+        receivedValue: initialAmount - plusAmount,
+        couponRedeemed: false,
+        plus: 0,
+      });
 
-            if (rate < 1) {
-                rate = (Math.floor((sendValue / receivedValue) * 100) / 100).toFixed(2);
-                networkFee = (Math.abs(receivedValue * rate - amountFromUSD).toFixed(2));
-            }
+      return;
+    }
 
-            this.setState({
-                exchangeRate: rate,
-                networkFee: networkFee,
-                countryFromFee: countryFromFee,
-                sendValueUSD: amountFromUSD
-            });
-        }
-    };
+    let countryFrom = data.data.settings.countryFrom;
+    let countryTo = data.data.settings.countryTo;
+
+    if (
+      countryFrom.length != 0 &&
+      !countryFrom.includes(this.state.fromCountryValue)
+    ) {
+      this.setState({
+        isValid: false,
+        hasValidCoupon: false,
+        countryError: { hasErrors: true, value: "from" },
+        receivedValue: initialAmount - plusAmount,
+        couponRedeemed: false,
+        plus: 0,
+      });
+      return;
+    }
 
-    showExchangeRate = (receivedValue) => {
-        const withoutFee = { amount: 0, value: 0, type: "A", amountUSD: 0, enabled: false };
-        const {
-            fromCurrencyValue,
-            isUsdt,
-            convertValue,
-            fromExchangeRate,
-            fees
-        } = this.state;
-
-        let convertValueCrypto = convertValue;
-        let showTotalFees = false;
-        let exchangeRateLabel = "x";
-
-        if (convertValue != 0 && receivedValue != 0) {
-
-            let feeTraund = fees.traund != null ? { ...fees.traund, enabled: true } : withoutFee;
-            let feePaypal = fees.paypal != null ? { ...fees.paypal, enabled: true } : withoutFee;
-
-            let rate = fromExchangeRate;
-            let networkFee = 0.00;
-            let traundFeeValue = feeTraund.enabled ? feeTraund.amount : 0.00;
-            let paypalFeeValue = feePaypal.enabled ? feePaypal.amount : 0.00;
-
-            showTotalFees = paypalFeeValue > 0;
-            if (isUsdt) {
-                rate = 1;
-                networkFee = Math.abs(convertValue - receivedValue / rate);
-                if (fromCurrencyValue != "USD") {
-                    {
-                        const { sendValue, paymentMethods } = this.state;
-                        if (paymentMethods.length && paymentMethods[0].isWallet) {
-                            networkFee = Math.abs(sendValue - Number(paymentMethods[0].amount) / fromExchangeRate)
-                        }
-                    }
-                }
-                convertValueCrypto = receivedValue;
-                showTotalFees = true;
-            }
+    if (
+      countryTo.length != 0 &&
+      !countryTo.includes(this.state.toCountryValue)
+    ) {
+      this.setState({
+        isValid: false,
+        hasValidCoupon: false,
+        countryError: { hasErrors: true, value: "to" },
+        receivedValue: initialAmount - plusAmount,
+        couponRedeemed: false,
+        plus: 0,
+      });
 
-            if (rate < 1) {
-                exchangeRateLabel = "÷"
-                rate = (Math.floor((convertValue / receivedValue) * 100) / 100).toFixed(2);
-                networkFee = Math.abs(receivedValue * rate - convertValue);
-            }
-            let totalFees = traundFeeValue + paypalFeeValue + networkFee;
+      return;
+    }
 
-            this.setState({
-                exchangeRateLabel: exchangeRateLabel,
-                exchangeRate: rate,
-                traundFee: traundFeeValue.toFixed(2),
-                paypalFee: paypalFeeValue.toFixed(2),
-                networkFee: networkFee.toFixed(2),
-                showTotalFees: showTotalFees,
-                totalFees: totalFees,
-                convertValueCrypto: convertValueCrypto
-            });
-        }
-    };
+    if (this.state.isUsdt) {
+      this.setState({
+        isValid: false,
+        hasValidCoupon: false,
+        countryError: { hasErrors: true, value: "to" },
+        receivedValue: initialAmount - plusAmount,
+        couponRedeemed: false,
+        plus: 0,
+      });
+      return;
+    }
 
-    calculate = async (source = "from") => {
-        this.setState({
-            recalculate: false,
-            isUsdt: false,
-            exchangeRate: 0.0,
-            couponValue: this.state.couponValue,
-            couponRedeemed: false,
-            reference: this.state.reference ,
-            secretKey: this.state.secretKey,
-            plus: 0
-        });
-        if (this.state.recalc) {
-            clearTimeout(this.state.recalc);
-        }
+    let receivedRate = this.state.fromCurrencyValue == "USD" ?
+      ((initialAmount - plusAmount) / this.state.sendValue) :
+      (this.state.calculator[this.state.toCountryValue].usdBuy);
 
-        let {
-            newAmountSender,
-        } = applyTaxDiscount(this.state.fromCountryValue === "WLT" ? "TR" : this.state.fromCountryValue, this.state.toCountryValue, this.state.sendValue,  this.state.receivedValue);
-
-        let model = {
-            coupon: this.state.couponValue,
-            from: {
-                amount: newAmountSender,
-                country: this.state.fromCountryValue === "WLT" ? "TR" : this.state.fromCountryValue,
-                currency: this.state.fromCurrencyValue,
-            },
-            to: {
-                amount: this.state.receivedValue,
-                country: this.state.toCountryValue,
-                currency: this.state.toCurrencyValue,
-            },
-        };
+    let minAmount = parseInt(receivedRate * parseFloat(settings.minAmount || 0));
+    let maxAmount = parseInt(receivedRate * parseFloat(settings.maxAmount || 0));
+    let maxExchangeAmount = parseInt(receivedRate * parseFloat(settings.maxExchangeAmount || 0));
 
-        if (source == "initial" || source == "end") {
-            const url = this.ENDPOINTS.OPERATIONS.calculate(this.state.storeId || sessionStorage.getItem('storeId'), "from");
+    if (initialAmount < minAmount || initialAmount > maxAmount) {
+      this.setState({
+        isValid: false,
+        hasValidCoupon: false,
+        countryError: { hasErrors: true, value: "amount_from" },
+        receivedValue: initialAmount - plusAmount,
+        couponRedeemed: false,
+        plus: 0,
+      });
+      return;
+    }
 
-            const res = await axios.post(
-            url,
-            model,
-            {
-                headers: {
-                    "x-api-access-sig": getSignatureHeader('POST', url, model,this.state.reference,this.state.secretKey) 
-                },
-            }
-        );
-
-            if (res) {
-                await this.setState({
-                    loadingTo: false,
-                    loadingFrom: false,
-                    recalculate: true,
-                    recalc: setTimeout(() => {
-                        this.calculate();
-                    }, 5 * 60 * 1000),
-                });
-            }
+    if (!this.state.couponRedeemed) {
+      let plus = 0;
 
-            this.setState({
-                loadingTo: false,
-                loadingFrom: false,
-            }, () => {
-                this.addCoupon()
-            });
+      if (settings.discountType == "A") {
+        plus = parseInt(receivedRate * parseFloat(settings.amount));
+      } else if (settings.discountType == "P") {
+        plus = Math.trunc(this.state.receivedValue * parseFloat(settings.amount)).toFixed(2);
+      }
 
-            return;
-        }
+      if (maxExchangeAmount && (parseFloat(plus) > parseFloat(maxExchangeAmount))) {
+        plus = parseFloat(maxExchangeAmount);
+      }
+
+      const newAmount = initialAmount + parseFloat(plus);
+
+      this.setState({
+        isValid: true,
+        hasValidCoupon: true,
+        countryError: { hasErrors: false, value: "" },
+        receivedValue: newAmount,
+        couponRedeemed: true,
+        plus,
+      });
+    }
+  }
+
+  removeCoupon = async () => {
+    let initialAmount = parseFloat(this.state.receivedValue || 0);
+    let plusAmount = parseFloat(this.state.plus || 0);
+
+    this.setState({
+      couponValue: "",
+      isValid: true,
+      hasValidCoupon: true,
+      countryError: { hasErrors: false, value: "" },
+      receivedValue: initialAmount - plusAmount,
+      couponRedeemed: false,
+      plus: 0,
+    });
+  }
+
+  handleSubmitForm = async () => {
+    this.handleIsLoading(true);
+
+    let validAmount = this.validateAmount(this.state.sendValue, "from");
+    let validAmountTo = this.validateAmount(this.state.receivedValue, "to");
+    let validForm = true;
+
+    if (!validAmount || !validAmountTo) {
+      this.setState({ hasError: true });
+      this.setState({ isValid: false });
+      validForm = false;
+    } else {
+      this.setState({ hasError: false });
+      this.setState({ isValid: true });
+      validForm = true;
+    }
 
-        if (this.state.typingTimeout) clearTimeout(this.state.typingTimeout);
+    if (validForm) {
+      if (this.state.couponValue.length > 0) {
+        this.addCoupon();
+      }
+      else if (this.state.couponValue.length == 0 && this.state.couponRedeemed) {
         this.setState({
-            typingTimeout: setTimeout(async () => {
-                let validAmount = this.validateAmount(model.from.amount, "from");
-                let validAmountTo = this.validateAmount(model.to.amount, "to");
-                if (
-                    (validAmount && validAmountTo) ||
-                    (validAmount && source == "from") ||
-                    (validAmountTo && source == "to")
-                ) {
-                    await this.setState({
-                        loadingTo: source == "from",
-                        loadingFrom: source == "to",
-                        couponValue: this.state.couponValue,
-                        couponRedeemed: false,
-                        plus: 0
-                    });
-
-                    if (source == "from")
-                        this.setState({
-                            receivedValue: "",
-                        });
-                    if (source == "to")
-                        this.setState({
-                            sendValue: "",
-                        });
-                    const url = this.ENDPOINTS.OPERATIONS.calculate(this.state.storeId, source)
-
-                    const res = await axios.post(
-                        url,
-                        model,
-                        {
-                            headers: {
-                                "x-api-access-sig": getSignatureHeader('POST', url, model,this.state.reference,this.state.secretKey) 
-                            },
-                        }
-                    );
-                    
-                    if (res) {
-                        await this.setState({
-                            loadingTo: false,
-                            loadingFrom: false,
-                            recalculate: true,
-                            recalc: setTimeout(() => {
-                                this.calculate();
-                            }, 5 * 60 * 1000),
-                        });
-                    }
-                }
-            }, 650),
-        }, () => {
-            this.addCoupon();
+          isValid: true,
+          hasValidCoupon: true,
+          countryError: { hasErrors: false, value: "" },
+          receivedValue: this.state.receivedValue - this.state.plus,
+          couponRedeemed: false,
+          plus: 0,
         });
-    };
-
-    async addCoupon() {
-        let initialAmount = parseFloat(this.state.receivedValue || 0);
-        let plusAmount = parseFloat(this.state.plus || 0);
+      }
 
-        if (initialAmount == 0) return;
+      //if (db) db.clearPersistence();
+      const firebase = await loadFirebaseDB(this.state.testMode, this.state.config);
+      const db = firebase.firestore();
 
-        if (this.state.couponValue == "") {
-            this.setState({
-                isValid: true,
-                hasValidCoupon: true,
-                countryError: { hasErrors: false, value: "" },
-                receivedValue: initialAmount - plusAmount,
-                couponRedeemed: false,
-                plus: 0,
+      if (this.state.couponRedeemed && this.state.couponValue != "") {
+        try {
+          const userFS = await db
+            .collection("transactions")
+            .doc(this.state.storeId)
+            .update({
+              coupon: this.state.couponValue,
+              promo: +this.state.plus,
             });
-            return;
+        } catch (e) {
+          this.setState({ hasError: true });
         }
+      }
 
-        let { data } = await this.validateCoupon(this.state.couponValue);
-        let { isValid, settings } = data.data;
+      if (this.state.paymentMethods && this.state.paymentMethods.length) {
+        try {
+          let transactionFS = await db
+            .collection("transactions")
+            .doc(this.state.storeId)
+            .get();
+
+          if (transactionFS.exists) {
+            let transactionData = transactionFS.data();
+            let toReplace = {
+              ...transactionData.to,
+              paymentMethods: this.state.paymentMethods,
+            };
+
+            await db
+              .collection("transactions")
+              .doc(this.state.storeId)
+              .update({ to: toReplace });
+          }
+        } catch (e) {
+          this.setState({ hasError: true });
+        }
+      }
+      window.location.replace(`${this.props.startUrl.replace(/\/+$/, "")}/${this.state.storeId}`);
+    }
+  };
+
+  openChat = (message) => {
+    // tidioChatApi.open();
+    // tidioChatApi.messageFromVisitor(message);
+  };
+
+  validateAmount = (value, origin) => {
+    let valid = true;
+
+    if (origin == "from") {
+      valid = !(
+        value < this.state.minFromValue || value > this.state.maxFromValue
+      );
+    } else if (origin == "to") {
+      valid = !(value < this.state.minToValue || value > this.state.maxToValue);
+    }
 
-        if (!isValid) {
-            this.setState({
-                isValid: false,
-                hasValidCoupon: false,
-                countryError: { hasErrors: false, value: "" },
-                receivedValue: initialAmount - plusAmount,
-                couponRedeemed: false,
-                plus: 0,
-            });
+    return valid;
+  };
 
-            return;
-        }
+  validateEmail = (email) => {
+    let valid = true;
 
-        let countryFrom = data.data.settings.countryFrom;
-        let countryTo = data.data.settings.countryTo;
+    if (
+      !/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+        email
+      )
+    ) {
+      valid = false;
+    }
 
-        if (
-            countryFrom.length != 0 &&
-            !countryFrom.includes(this.state.fromCountryValue)
-        ) {
-            this.setState({
-                isValid: false,
-                hasValidCoupon: false,
-                countryError: { hasErrors: true, value: "from" },
-                receivedValue: initialAmount - plusAmount,
-                couponRedeemed: false,
-                plus: 0,
-            });
-            return;
-        }
+    return valid;
+  };
 
-        if (
-            countryTo.length != 0 &&
-            !countryTo.includes(this.state.toCountryValue)
-        ) {
-            this.setState({
-                isValid: false,
-                hasValidCoupon: false,
-                countryError: { hasErrors: true, value: "to" },
-                receivedValue: initialAmount - plusAmount,
-                couponRedeemed: false,
-                plus: 0,
-            });
+  validateCoupon = async (cupon) => {
+    const url = `${this.ENDPOINTS.OPERATIONS.validateCoupon}/${cupon}`
 
-            return;
+    try {
+      const response = await axios.get(
+        url,
+        {
+          headers: {
+            "x-api-access-sig": getSignatureHeader('GET', url, null, this.state.reference, this.state.secretKey)
+          },
         }
+      );
+      return response;
+    } catch {
+      this.handleIsLoading(false);
+    }
+  };
 
-        if (this.state.isUsdt) {
-            this.setState({
-                isValid: false,
-                hasValidCoupon: false,
-                countryError: { hasErrors: true, value: "to" },
-                receivedValue: initialAmount - plusAmount,
-                couponRedeemed: false,
-                plus: 0,
-            });
-            return;
-        }
+  changeBank = async ({ target }) => {
 
-        let receivedRate = this.state.fromCurrencyValue == "USD" ?
-            ((initialAmount - plusAmount) / this.state.sendValue) :
-            (this.state.calculator[this.state.toCountryValue].usdBuy);
+    if (!target.value) return;
 
-        let minAmount = parseInt(receivedRate * parseFloat(settings.minAmount || 0));
-        let maxAmount = parseInt(receivedRate * parseFloat(settings.maxAmount || 0));
-        let maxExchangeAmount = parseInt(receivedRate * parseFloat(settings.maxExchangeAmount || 0));
+    const selected = this.state.paymentMethods.find(
+      (payment) => payment.id == target.value
+    );
 
-        if (initialAmount < minAmount || initialAmount > maxAmount) {
-            this.setState({
-                isValid: false,
-                hasValidCoupon: false,
-                countryError: { hasErrors: true, value: "amount_from" },
-                receivedValue: initialAmount - plusAmount,
-                couponRedeemed: false,
-                plus: 0,
-            });
-            return;
-        }
+    let newOrder = this.state.paymentMethods.map((payment) => {
+      if (payment.name == selected.name) payment.isActive = true;
+      else payment.isActive = false;
+      return payment;
+    });
 
-        if (!this.state.couponRedeemed) {
-            let plus = 0;
+    this.setState({ isUsdt: selected.id === 'trc20' });
 
-            if (settings.discountType == "A") {
-                plus = parseInt(receivedRate * parseFloat(settings.amount));
-            } else if (settings.discountType == "P") {
-                plus = Math.trunc(this.state.receivedValue * parseFloat(settings.amount)).toFixed(2);
-            }
+    if (selected.isWallet) {
+      await this.setState({
+        receivedValue: selected.amountCrypto,
+        paymentMethods: this.arraymove(newOrder),
+      }, () => {
+        this.showExchangeRate(selected.amountCrypto)
+      });
 
-            if (maxExchangeAmount && (parseFloat(plus) > parseFloat(maxExchangeAmount))) {
-                plus = parseFloat(maxExchangeAmount);
-            }
+      this.updateLimits();
 
-            const newAmount = initialAmount + parseFloat(plus);
+      return;
+    }
 
-            this.setState({
-                isValid: true,
-                hasValidCoupon: true,
-                countryError: { hasErrors: false, value: "" },
-                receivedValue: newAmount,
-                couponRedeemed: true,
-                plus,
-            });
-        }
+    await this.setState({
+      receivedValue: selected.amount,
+      paymentMethods: this.arraymove(newOrder),
+    }, () => {
+      this.showExchangeRate(selected.amount);
+    });
+
+    this.updateLimits();
+  };
+
+  arraymove = (array) => {
+    var newArray = array.slice();
+    newArray.sort(function (a) {
+      return !a.isActive ? 1 : -1;
+    }); // put in first
+    return newArray;
+  };
+
+  handleOnChangeFromCountry = ({ target }, option) => {
+    this.setState({ isUsdt: false });
+    if (option) {
+      this.handleFromCountryValue(option.code);
+      this.handleFromCurrencyValue(option.currency);
+
+      if (
+        option.code == this.state.toCountryValue ||
+        !this.state.calculator[option.code].countryTo[this.state.toCountryValue]
+          .active
+      ) {
+        this.handleToCountryValue("");
+        this.handleToCurrencyValue("");
+      }
+    } else {
+      this.handleFromCountryValue(null);
+      this.handleFromCurrencyValue(null);
+    }
+  };
+
+  handleOnChangeToCountry = ({ target }, option) => {
+    this.setState({ isUsdt: false });
+    if (option) {
+      this.handleToCountryValue(option.code);
+      this.handleToCurrencyValue(option.currency);
+    } else {
+      this.handleToCountryValue(null);
+      this.handleToCurrencyValue(null);
     }
+  };
+
+  filterOptions = (options, { inputValue }) =>
+    matchSorter(options, inputValue, { keys: ["label", "currency"] });
+
+  render() {
+
+    const classes = {
+      root: {
+        fontFamily: "Poppins",
+        padding: "26px 21px 0 21px",
+        maxWidth: 400,
+        flexGrow: 1,
+        borderRadius: "24px",
+        borderWidth: "1px",
+        backgroundColor: "#FFFFFF",
+        boxShadow: "0px 4px 7px rgba(61, 71, 86, 0.52)"
+      },
+      labelAmount: {
+        fontFamily: "Poppins",
+        fontStyle: "normal",
+        fontWeight: 500,
+        fontSize: "16px",
+        lineHeight: "20px",
+        color: "#000F37",
+        marginTop: "25px"
+      },
+      inputAmount: {
+        background: "#C7CDD7",
+        borderRadius: "2px"
+      },
+      inputAmountText: {
+        marginLeft: "10px",
+        fontFamily: "Poppins",
+        fontStyle: "normal",
+        fontWeight: 600,
+        fontSize: "20px",
+        lineHeight: "20px",
+        color: "#000F37",
+        textAlign: "center"
+      },
+      labelCoupon: {
+        fontFamily: "Poppins",
+        fontStyle: "normal",
+        fontWeight: 400,
+        fontSize: "15px",
+        lineHeight: "20px",
+        color: "#000F37"
+      },
+      inputCoupon: {
+        background: "#A1ACBD",
+        borderRadius: "2px"
+      },
+      inputCouponText: {
+        marginLeft: "10px",
+        fontFamily: "Poppins",
+        fontStyle: "normal",
+        fontWeight: 500,
+        fontSize: "18px",
+        lineHeight: "20px",
+        color: "#000F37",
+        textAlign: "center"
+      },
+      buttonStart: {
+        background: "#008AFF",
+        borderRadius: "12px",
+        maxWidth: "100%",
+        minWidth: "100%"
+      },
+      buttonStartDisabled: {
+        background: "#C0C0C0",
+        borderRadius: "12px",
+        maxWidth: "100%",
+        minWidth: "100%"
+      },
+      textButtonStart: {
+        fontFamily: "Poppins",
+        fontStyle: "normal",
+        fontWeight: 400,
+        fontSize: "16px",
+        lineHeight: "20px",
+        color: "#F4F4F4"
+      },
+      buttonRemoveCoupon: {
+        background: "#000F37",
+        //borderRadius: "8px",
+        maxWidth: "70%",
+        minWidth: "70%"
+      },
+      textRemoveCoupon: {
+        fontFamily: "Poppins",
+        fontStyle: "normal",
+        fontWeight: 300,
+        fontSize: "15px",
+        lineHeight: "24px",
+        color: "#F4F4F4"
+      },
+      labelUpdateTC: {
+        fontFamily: "Poppins",
+        fontStyle: "normal",
+        fontWeight: 400,
+        fontSize: "14px",
+        lineHeight: "16px",
+        color: "#000F37",
+        textAlign: "center"
+      },
+      textTimeTC: {
+        fontWeight: "bold",
+        textAlign: "center"
+      },
+      divider: {
+        height: 28,
+        margin: 4
+      },
+      rootFlags: {
+        fontFamily: "Poppins",
+        padding: "5px 5px",
+        minWidth: 100,
+        //maxWidth: 150,
+        borderWidth: "0px",
+      },
+    };
 
-    removeCoupon = async () => {
-        let initialAmount = parseFloat(this.state.receivedValue || 0);
-        let plusAmount = parseFloat(this.state.plus || 0);
+    const { locale, pathname, locales } = this.props;
+    const content = locale === "es" ? es : en;
+    let {
+      sendValue,
+      receivedValue,
+      couponValue,
+      fromCountryValue,
+      fromCurrencyValue,
+      toCountryValue,
+      toCurrencyValue,
+      email,
+      isValid,
+      showCallToAction,
+      minFromValue,
+      maxFromValue,
+      minToValue,
+      maxToValue,
+      plus,
+      calculator,
+      loadingTo,
+      loadingFrom,
+      banks,
+      taxSender,
+      taxReceiver,
+      recalculate,
+      paymentMethods,
+      isLoading,
+      hasValidCoupon,
+      traundFee,
+      paypalFee,
+      networkFee,
+      totalFees,
+      convertValueCrypto,
+      convertValue,
+      exchangeRate,
+      onlySimulation,
+    } = this.state;
+
+    let startDisabled = loadingFrom || loadingTo || isLoading || !hasValidCoupon;
+
+    // if (sendValue > 0) {
+    //     sendValue = sendValue % 1 == 0 ? Number(sendValue).toFixed(0) : Number(sendValue).toFixed(2);
+    // }
+
+    // if (receivedValue > 0) {
+    //     receivedValue = receivedValue % 1 == 0 ? Number(receivedValue).toFixed(0) : Number(receivedValue).toFixed(2);
+    // }
+
+    if (traundFee != null && traundFee > 0) {
+      traundFee = traundFee % 1 == 0 ? Number(traundFee).toFixed(0) : Number(traundFee).toFixed(2);
+    }
 
-        this.setState({
-            couponValue: "",
-            isValid: true,
-            hasValidCoupon: true,
-            countryError: { hasErrors: false, value: "" },
-            receivedValue: initialAmount - plusAmount,
-            couponRedeemed: false,
-            plus: 0,
-        });
+    if (paypalFee != null && paypalFee > 0) {
+      paypalFee = paypalFee % 1 == 0 ? Number(paypalFee).toFixed(0) : Number(paypalFee).toFixed(2);
     }
 
-    handleSubmitForm = async () => {
-        this.handleIsLoading(true);
-
-        let validAmount = this.validateAmount(this.state.sendValue, "from");
-        let validAmountTo = this.validateAmount(this.state.receivedValue, "to");
-        let validForm = true;
-
-        if (!validAmount || !validAmountTo) {
-            this.setState({ hasError: true });
-            this.setState({ isValid: false });
-            validForm = false;
-        } else {
-            this.setState({ hasError: false });
-            this.setState({ isValid: true });
-            validForm = true;
-        }
-
-        if (validForm) {
-            if (this.state.couponValue.length > 0) {
-                this.addCoupon();
-            }
-            else if (this.state.couponValue.length == 0 && this.state.couponRedeemed) {
-                this.setState({
-                    isValid: true,
-                    hasValidCoupon: true,
-                    countryError: { hasErrors: false, value: "" },
-                    receivedValue: this.state.receivedValue - this.state.plus,
-                    couponRedeemed: false,
-                    plus: 0,
-                });
-            }
-
-            //if (db) db.clearPersistence();
-             const firebase = await loadFirebaseDB(this.state.testMode, this.state.config);
-        const db = firebase.firestore();
-        
-            if (this.state.couponRedeemed && this.state.couponValue != "") {
-                try {
-                    const userFS = await db
-                        .collection("transactions")
-                        .doc(this.state.storeId)
-                        .update({
-                            coupon: this.state.couponValue,
-                            promo: +this.state.plus,
-                        });
-                } catch (e) {
-                    this.setState({ hasError: true });
-                }
-            }
-
-            if (this.state.paymentMethods && this.state.paymentMethods.length) {
-                try {
-                    let transactionFS = await db
-                        .collection("transactions")
-                        .doc(this.state.storeId)
-                        .get();
-
-                    if (transactionFS.exists) {
-                        let transactionData = transactionFS.data();
-                        let toReplace = {
-                            ...transactionData.to,
-                            paymentMethods: this.state.paymentMethods,
-                        };
-
-                        await db
-                            .collection("transactions")
-                            .doc(this.state.storeId)
-                            .update({ to: toReplace });
-                    }
-                } catch (e) {
-                    this.setState({ hasError: true });
-                }
-            }
-            window.location.replace(`${this.props.startUrl.replace(/\/+$/, "")}/${this.state.storeId}`);
-        }
-    };
-
-    openChat = (message) => {
-        // tidioChatApi.open();
-        // tidioChatApi.messageFromVisitor(message);
-    };
-
-    validateAmount = (value, origin) => {
-        let valid = true;
-
-        if (origin == "from") {
-            valid = !(
-                value < this.state.minFromValue || value > this.state.maxFromValue
-            );
-        } else if (origin == "to") {
-            valid = !(value < this.state.minToValue || value > this.state.maxToValue);
-        }
-
-        return valid;
-    };
-
-    validateEmail = (email) => {
-        let valid = true;
-
-        if (
-            !/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
-                email
-            )
-        ) {
-            valid = false;
-        }
-
-        return valid;
-    };
-
-    validateCoupon = async (cupon) => {
-      const url =  `${this.ENDPOINTS.OPERATIONS.validateCoupon}/${cupon}`
-
-        try {
-        const response = await axios.get(
-            url,
-            {
-                headers: {
-                    "x-api-access-sig": getSignatureHeader('GET', url, null,this.state.reference,this.state.secretKey) 
-                },
-            }     
-        );
-            return response;
-        } catch {
-            this.handleIsLoading(false);
-        }
-    };
-
-    changeBank = async ({ target }) => {
-
-        if (!target.value) return;
-
-        const selected = this.state.paymentMethods.find(
-            (payment) => payment.id == target.value
-        );
-
-        let newOrder = this.state.paymentMethods.map((payment) => {
-            if (payment.name == selected.name) payment.isActive = true;
-            else payment.isActive = false;
-            return payment;
-        });
-
-        this.setState({ isUsdt: selected.id === 'trc20' });
-
-        if (selected.isWallet) {
-            await this.setState({
-                receivedValue: selected.amountCrypto,
-                paymentMethods: this.arraymove(newOrder),
-            }, () => {
-                this.showExchangeRate(selected.amountCrypto)
-            });
-
-            this.updateLimits();
-
-            return;
-        }
-
-        await this.setState({
-            receivedValue: selected.amount,
-            paymentMethods: this.arraymove(newOrder),
-        }, () => {
-            this.showExchangeRate(selected.amount);
-        });
-
-        this.updateLimits();
-    };
-
-    arraymove = (array) => {
-        var newArray = array.slice();
-        newArray.sort(function (a) {
-            return !a.isActive ? 1 : -1;
-        }); // put in first
-        return newArray;
-    };
-
-    handleOnChangeFromCountry = ({ target }, option) => {
-        this.setState({ isUsdt: false });
-        if (option) {
-            this.handleFromCountryValue(option.code);
-            this.handleFromCurrencyValue(option.currency);
-
-            if (
-                option.code == this.state.toCountryValue ||
-                !this.state.calculator[option.code].countryTo[this.state.toCountryValue]
-                    .active
-            ) {
-                this.handleToCountryValue("");
-                this.handleToCurrencyValue("");
-            }
-        } else {
-            this.handleFromCountryValue(null);
-            this.handleFromCurrencyValue(null);
-        }
-    };
-
-    handleOnChangeToCountry = ({ target }, option) => {
-        this.setState({ isUsdt: false });
-        if (option) {
-            this.handleToCountryValue(option.code);
-            this.handleToCurrencyValue(option.currency);
-        } else {
-            this.handleToCountryValue(null);
-            this.handleToCurrencyValue(null);
-        }
-    };
-
-    filterOptions = (options, { inputValue }) =>
-        matchSorter(options, inputValue, { keys: ["label", "currency"] });
-
-    render() {
-
-        const classes = {
-            root: {
-                fontFamily: "Poppins",
-                padding: "26px 21px 0 21px",
-                maxWidth: 400,
-                flexGrow: 1,
-                borderRadius: "24px",
-                borderWidth: "1px",
-                backgroundColor: "#FFFFFF",
-                boxShadow: "0px 4px 7px rgba(61, 71, 86, 0.52)"
-            },
-            labelAmount: {
-                fontFamily: "Poppins",
-                fontStyle: "normal",
-                fontWeight: 500,
-                fontSize: "16px",
-                lineHeight: "20px",
-                color: "#000F37",
-                marginTop:"25px"
-            },
-            inputAmount: {
-                background: "#C7CDD7",
-                borderRadius: "2px"
-            },
-            inputAmountText: {
-                marginLeft: "10px",
-                fontFamily: "Poppins",
-                fontStyle: "normal",
-                fontWeight: 600,
-                fontSize: "20px",
-                lineHeight: "20px",
-                color: "#000F37",
-                textAlign: "center"
-            },
-            labelCoupon: {
-                fontFamily: "Poppins",
-                fontStyle: "normal",
-                fontWeight: 400,
-                fontSize: "15px",
-                lineHeight: "20px",
-                color: "#000F37"
-            },
-            inputCoupon: {
-                background: "#A1ACBD",
-                borderRadius: "2px"
-            },
-            inputCouponText: {
-                marginLeft: "10px",
-                fontFamily: "Poppins",
-                fontStyle: "normal",
-                fontWeight: 500,
-                fontSize: "18px",
-                lineHeight: "20px",
-                color: "#000F37",
-                textAlign: "center"
-            },
-            buttonStart: {
-                background: "#008AFF",
-                borderRadius: "12px",
-                maxWidth: "100%",
-                minWidth: "100%"
-            },
-            buttonStartDisabled: {
-                background: "#C0C0C0",
-                borderRadius: "12px",
-                maxWidth: "100%",
-                minWidth: "100%"
-            },
-            textButtonStart: {
-                fontFamily: "Poppins",
-                fontStyle: "normal",
-                fontWeight: 400,
-                fontSize: "16px",
-                lineHeight: "20px",
-                color: "#F4F4F4"
-            },
-            buttonRemoveCoupon: {
-                background: "#000F37",
-                //borderRadius: "8px",
-                maxWidth: "70%",
-                minWidth: "70%"
-            },
-            textRemoveCoupon: {
-                fontFamily: "Poppins",
-                fontStyle: "normal",
-                fontWeight: 300,
-                fontSize: "15px",
-                lineHeight: "24px",
-                color: "#F4F4F4"
-            },
-            labelUpdateTC: {
-                fontFamily: "Poppins",
-                fontStyle: "normal",
-                fontWeight: 400,
-                fontSize: "14px",
-                lineHeight: "16px",
-                color: "#000F37",
-                textAlign: "center"
-            },
-            textTimeTC: {
-                fontWeight: "bold",
-                textAlign: "center"
-            },
-            divider: {
-                height: 28,
-                margin: 4
-            },
-            rootFlags: {
-                fontFamily: "Poppins",
-                padding: "5px 5px",
-                minWidth: 100,
-                //maxWidth: 150,
-                borderWidth: "0px",
-            },
-        };
-
-        const { locale, pathname, locales } = this.props;
-        const content = locale === "es" ? es : en;
-        let {
-            sendValue,
-            receivedValue,
-            couponValue,
-            fromCountryValue,
-            fromCurrencyValue,
-            toCountryValue,
-            toCurrencyValue,
-            email,
-            isValid,
-            showCallToAction,
-            minFromValue,
-            maxFromValue,
-            minToValue,
-            maxToValue,
-            plus,
-            calculator,
-            loadingTo,
-            loadingFrom,
-            banks,
-            taxSender,
-            taxReceiver,
-            recalculate,
-            paymentMethods,
-            isLoading,
-            hasValidCoupon,
-            traundFee,
-            paypalFee,
-            networkFee,
-            totalFees,
-            convertValueCrypto,
-            convertValue,
-            exchangeRate,
-            onlySimulation,
-        } = this.state;
-
-        let startDisabled = loadingFrom || loadingTo || isLoading || !hasValidCoupon;
-
-        // if (sendValue > 0) {
-        //     sendValue = sendValue % 1 == 0 ? Number(sendValue).toFixed(0) : Number(sendValue).toFixed(2);
-        // }
-
-        // if (receivedValue > 0) {
-        //     receivedValue = receivedValue % 1 == 0 ? Number(receivedValue).toFixed(0) : Number(receivedValue).toFixed(2);
-        // }
-
-        if (traundFee != null && traundFee > 0) {
-            traundFee = traundFee % 1 == 0 ? Number(traundFee).toFixed(0) : Number(traundFee).toFixed(2);
-        }
-
-        if (paypalFee != null && paypalFee > 0) {
-            paypalFee = paypalFee % 1 == 0 ? Number(paypalFee).toFixed(0) : Number(paypalFee).toFixed(2);
-        }
-
-        if (networkFee != null && networkFee > 0) {
-            networkFee = networkFee % 1 == 0 ? Number(networkFee).toFixed(0) : Number(networkFee).toFixed(2);
-        }
+    if (networkFee != null && networkFee > 0) {
+      networkFee = networkFee % 1 == 0 ? Number(networkFee).toFixed(0) : Number(networkFee).toFixed(2);
+    }
 
-        if (totalFees != null && totalFees > 0) {
-            totalFees = totalFees % 1 == 0 ? Number(totalFees).toFixed(0) : Number(totalFees).toFixed(2);
-        }
+    if (totalFees != null && totalFees > 0) {
+      totalFees = totalFees % 1 == 0 ? Number(totalFees).toFixed(0) : Number(totalFees).toFixed(2);
+    }
 
-        if (convertValueCrypto != null && convertValueCrypto > 0) {
-            convertValueCrypto = convertValueCrypto % 1 == 0 ? Number(convertValueCrypto).toFixed(0) : Number(convertValueCrypto).toFixed(2);
-        }
+    if (convertValueCrypto != null && convertValueCrypto > 0) {
+      convertValueCrypto = convertValueCrypto % 1 == 0 ? Number(convertValueCrypto).toFixed(0) : Number(convertValueCrypto).toFixed(2);
+    }
 
-        if (convertValue != null && convertValue > 0) {
-            convertValue = convertValue % 1 == 0 ? Number(convertValue).toFixed(0) : Number(convertValue).toFixed(2);
-        }
+    if (convertValue != null && convertValue > 0) {
+      convertValue = convertValue % 1 == 0 ? Number(convertValue).toFixed(0) : Number(convertValue).toFixed(2);
+    }
 
-        if (exchangeRate != null && exchangeRate > 0) {
-            exchangeRate = exchangeRate % 1 == 0 ? Number(exchangeRate).toFixed(0) : Number(exchangeRate).toFixed(2);
-        }
+    if (exchangeRate != null && exchangeRate > 0) {
+      exchangeRate = exchangeRate % 1 == 0 ? Number(exchangeRate).toFixed(0) : Number(exchangeRate).toFixed(2);
+    }
 
-        return (
-          <Fragment>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap"
-    rel="stylesheet"
-  />
-  <Paper sx={classes.root}>
-    <Grid container direction="column" spacing={0}>
-      <Grid container direction="column" spacing={0}>
-        <Grid>
-          <Typography
-            sx={classes.labelAmount}
-            gutterBottom
-            variant="subtitle1"
-            component="div"
-          >
-            {content.landing.send_content}
-          </Typography>
-        </Grid>
-        <Grid size={{ xs: 12}} container>
-         <Grid size={{ xs: 8, md:9}}
->
-            <Paper sx={classes.inputAmount}>
-              <InputBase
-                id="send"
-                sx={classes.inputAmountText}
-                required
-                value={sendValue}
-                //type="number"
-                disabled={loadingFrom || loadingTo}
-                startAdornment={
-                  <InputAdornment
-                    position="start"
-                    sx={{ marginTop: "0px" }}
-                  >
-                    <span>{loadingFrom && <CircularProgress size={18} />}</span>
-                  </InputAdornment>
-                }
-                slotProps={{
-                  input: { min: minFromValue, max: maxFromValue }
-                }}
-                onChange={this.handleSend}
-              />
-            </Paper>
-          </Grid>
-          <Grid size={{ xs: 4, md:3}}
->
-            <Autocomplete
-              disabled={loadingTo || loadingFrom}
-              options={countries.filter((country) => {
-                if (
-                  calculator &&
-                  calculator[country.code] &&
-                  calculator[country.code].active
-                )
-                  return country;
-              })}
-              sx={{
-                fontSize: 14,
-                "& > span": {
-                  marginRight: 10,
-                  fontSize: 18,
-                },
-              }}
-              value={
-                countries.filter(
-                  (country) => country.code == fromCountryValue
-                )[0]
-              }
-              autoHighlight
-              getOptionLabel={(option) => `${option.currency}`}
-              renderOption={(props, option) => (
-                <Box component="li" {...props}>
-                  <span style={{ marginRight: "5px" }}>
-                    <FlagsHelpers code={option.code == "PE-USD" ? "PE" : option.code} />
-                  </span>
-                  {option.code === "WLT" ? "WLT" : option.code === "USDT"? "USDT" : option.currency}
-                </Box>
-              )}
-              disableClearable
-              renderInput={(params) => (
-                <Paper variant="outlined" sx={classes.rootFlags}>
-                  <TextField
-                    sx={{ fontSize: "15px" }}
-                    {...params}
-                    variant="standard"
-                    slotProps={{
-                      input: {
-                        ...params.InputProps,
-                        startAdornment: (
-                          <FlagsHelpers
-                            code={this.state.fromCountryValue == "PE-USD" ?
-                              "PE" :
-                              this.state.fromCountryValue
-                            }>
-                          </FlagsHelpers>
-                        ),
-                        disableUnderline: true,
-                      }
-                    }}
-                  />
-                </Paper>
-              )}
-              onChange={this.handleOnChangeFromCountry}
-            />
-          </Grid>
-        </Grid>
-        <Grid size={{ xs: 12}} container>
-          {!isLoading && !loadingFrom && !loadingTo && (
-            <FormHelperText sx={{ color: "red" }}>
-              {(sendValue < minFromValue &&
-                content.landing.min_value.replace(
-                  "minValue",
-                  minFromValue
-                )) ||
-                (sendValue > maxFromValue &&
-                  content.landing.max_value.replace(
-                    "maxValue",
-                    maxFromValue
-                  ))}
-            </FormHelperText>
-          )}
-        </Grid>
-      </Grid>
-      {(!isLoading && !loadingFrom && !loadingTo) &&
-        <Grid size={{ xs: 12}} container direction="column">
-          <Grid size={{ xs: 12}} container spacing={1}>
-            <Grid size={{ xs: 1}}>
-              <Typography variant="body2" color="textSecondary"></Typography>
-            </Grid>
-             <Grid size={{ xs: 3, md: 4 }} >
-              <Typography
-                variant="body2"
-                color="textSecondary"
-                sx={{ textAlign: "right" }}
-              >
-                {traundFee}
-              </Typography>
-            </Grid>
-            <Grid size={{ xs: 1}}>
-              <Typography variant="body2" color="textSecondary">
-                {fromCurrencyValue}
-              </Typography>
-            </Grid>
-            <Grid size={{ xs: 1}}>
-              <Typography variant="body2" color="textSecondary">{" "}</Typography>
-            </Grid>
-            <Grid size="grow">
-              <Typography
-                variant="body2"
-                color="textSecondary"
-                sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
-              >
-                {content.calculator.comision}
-              </Typography>
-            </Grid>
-          </Grid>
-          {this.state.isCountryFromPayPal &&
-            <Grid size={{ xs: 12}} container spacing={1}>
-              <Grid size={{ xs: 1}}>
-                <Typography variant="body2" color="textSecondary"></Typography>
-              </Grid>
-               <Grid size={{ xs: 3, md: 4 }} >
+    return (
+      <Fragment>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap"
+          rel="stylesheet"
+        />
+        <Paper sx={classes.root}>
+          <Grid container direction="column" spacing={0}>
+            <Grid container direction="column" spacing={0}>
+              <Grid>
                 <Typography
-                  variant="body2"
-                  color="textSecondary"
-                  sx={{ textAlign: "right" }}
+                  sx={classes.labelAmount}
+                  gutterBottom
+                  variant="subtitle1"
+                  component="div"
                 >
-                  {paypalFee}
+                  {content.landing.send_content}
                 </Typography>
               </Grid>
-              <Grid size={{ xs: 1}}>
-                <Typography variant="body2" color="textSecondary">
-                  {fromCurrencyValue}
-                </Typography>
-              </Grid>
-              <Grid size={{ xs: 1}}>
-                <Typography variant="body2" color="textSecondary">{" "}</Typography>
-              </Grid>
-              <Grid size="grow">
-                <Typography
-                  variant="body2"
-                  color="textSecondary"
-                  sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
+              <Grid size={{ xs: 12 }} container>
+                <Grid size={{ xs: 8, md: 9 }}
                 >
-                  {content.calculator.paypal_fee}
-                </Typography>
-              </Grid>
-            </Grid>
-          }
-          {this.state.isUsdt &&
-            <Grid size={{ xs: 12}} container spacing={1}>
-              <Grid size={{ xs: 1}}>
-                <Typography variant="body2" color="textSecondary"></Typography>
-              </Grid>
-              <Grid size={{ xs: 3, md: 4 }}>
-                <Typography
-                  variant="body2"
-                  color="textSecondary"
-                  sx={{ textAlign: "right" }}
+                  <Paper sx={classes.inputAmount}>
+                    <InputBase
+                      id="send"
+                      sx={classes.inputAmountText}
+                      required
+                      value={sendValue}
+                      //type="number"
+                      disabled={loadingFrom || loadingTo}
+                      startAdornment={
+                        <InputAdornment
+                          position="start"
+                          sx={{ marginTop: "0px" }}
+                        >
+                          <span>{loadingFrom && <CircularProgress size={18} />}</span>
+                        </InputAdornment>
+                      }
+                      slotProps={{
+                        input: { min: minFromValue, max: maxFromValue }
+                      }}
+                      onChange={this.handleSend}
+                    />
+                  </Paper>
+                </Grid>
+                <Grid size={{ xs: 4, md: 3 }}
                 >
-                  {networkFee}
-                </Typography>
-              </Grid>
-              <Grid size={{ xs: 1}}>
-                <Typography variant="body2" color="textSecondary">
-                  {fromCurrencyValue}
-                </Typography>
-              </Grid>
-              <Grid size={{ xs: 1}}>
-                <Typography variant="body2" color="textSecondary">{" "}</Typography>
+                  <Autocomplete
+                    disabled={loadingTo || loadingFrom}
+                    options={countries.filter((country) => {
+                      if (
+                        calculator &&
+                        calculator[country.code] &&
+                        calculator[country.code].active
+                      )
+                        return country;
+                    })}
+                    sx={{
+                      fontSize: 14,
+                      "& > span": {
+                        marginRight: 10,
+                        fontSize: 18,
+                      },
+                    }}
+                    value={
+                      countries.filter(
+                        (country) => country.code == fromCountryValue
+                      )[0]
+                    }
+                    autoHighlight
+                    getOptionLabel={(option) => `${option.currency}`}
+                    renderOption={(props, option) => (
+                      <Box component="li" {...props}>
+                        <span style={{ marginRight: "5px" }}>
+                          <FlagsHelpers code={option.code == "PE-USD" ? "PE" : option.code} />
+                        </span>
+                        {option.code === "WLT" ? "WLT" : option.code === "USDT" ? "USDT" : option.currency}
+                      </Box>
+                    )}
+                    disableClearable
+                    renderInput={(params) => (
+                      <Paper variant="outlined" sx={classes.rootFlags}>
+                        <TextField
+                          sx={{ fontSize: "15px" }}
+                          {...params}
+                          variant="standard"
+                          slotProps={{
+                            input: {
+                              ...params.InputProps,
+                              startAdornment: (
+                                <FlagsHelpers
+                                  code={this.state.fromCountryValue == "PE-USD" ?
+                                    "PE" :
+                                    this.state.fromCountryValue
+                                  }>
+                                </FlagsHelpers>
+                              ),
+                              disableUnderline: true,
+                            }
+                          }}
+                        />
+                      </Paper>
+                    )}
+                    onChange={this.handleOnChangeFromCountry}
+                  />
+                </Grid>
               </Grid>
-              <Grid size="grow">
-                <Typography
-                  variant="body2"
-                  color="textSecondary"
-                  sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
-                >
-                  {content.calculator.tron_network_fee}
-                </Typography>
+              <Grid size={{ xs: 12 }} container>
+                {!isLoading && !loadingFrom && !loadingTo && (
+                  <FormHelperText sx={{ color: "red" }}>
+                    {(sendValue < minFromValue &&
+                      content.landing.min_value.replace(
+                        "minValue",
+                        minFromValue
+                      )) ||
+                      (sendValue > maxFromValue &&
+                        content.landing.max_value.replace(
+                          "maxValue",
+                          maxFromValue
+                        ))}
+                  </FormHelperText>
+                )}
               </Grid>
             </Grid>
-          }
-          <Grid size={{ xs: 10}}>
-            <Divider ></Divider>
-          </Grid>
-          {taxSender > 0 &&
-            <>
-              <Grid size={{ xs: 12}} container spacing={1}>
-                <Grid size={{ xs: 1}}>
-                  <Typography
-                    variant="subtitle2"
-                    color="textPrimary"
-                    sx={{ fontWeight: "bold", textAlign: "right" }}
-                  >
-                    -
-                  </Typography>
-                </Grid>
-                <Grid size={{ xs: 3, md: 4 }}>
-                  <Typography
-                    variant="subtitle2"
-                    color="textPrimary"
-                    sx={{ fontWeight: "bold", textAlign: "right" }}
-                  >
-                    {taxSender}
-                  </Typography>
-                </Grid>
-                <Grid size={{ xs: 1}}>
-                  <Typography
-                    variant="subtitle2"
-                    color="textPrimary"
-                    sx={{ fontWeight: "bold" }}
-                  >
-                    {fromCurrencyValue}
-                  </Typography>
-                </Grid>
-                <Grid size={{ xs: 1}}>
-                  <Typography variant="subtitle2" color="textPrimary">{" "}</Typography>
-                </Grid>
-                <Grid size="grow">
-                  <Typography
-                    variant="subtitle2"
-                    color="textPrimary"
-                    sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
-                  >
-                    {fromCurrencyValue == "COP" ? content?.calculator.tax_co : content?.calculator.tax_pe}
-                  </Typography>
-                </Grid>
-              </Grid>
-              <Grid size={{ xs: 12}} container spacing={1}>
-                <Grid size={{ xs: 1}}>
-                  <Typography
-                    variant="subtitle2"
-                    color="textPrimary"
-                    sx={{ fontWeight: "bold", textAlign: "right" }}
-                  >
-                    =
-                  </Typography>
-                </Grid>
-                <Grid size={{ xs: 3, md: 4 }}>
-                  <Typography
-                    variant="subtitle2"
-                    color="textPrimary"
-                    sx={{ fontWeight: "bold", textAlign: "right" }}
-                  >
-                    {this.state.isUsdt ? convertValueCrypto : (+convertValue).toFixed(2)}
-                  </Typography>
+            {(!isLoading && !loadingFrom && !loadingTo) &&
+              <Grid size={{ xs: 12 }} container direction="column">
+                <Grid size={{ xs: 12 }} container spacing={1}>
+                  <Grid size={{ xs: 1 }}>
+                    <Typography variant="body2" color="textSecondary"></Typography>
+                  </Grid>
+                  <Grid size={{ xs: 3, md: 4 }} >
+                    <Typography
+                      variant="body2"
+                      color="textSecondary"
+                      sx={{ textAlign: "right" }}
+                    >
+                      {traundFee}
+                    </Typography>
+                  </Grid>
+                  <Grid size={{ xs: 1 }}>
+                    <Typography variant="body2" color="textSecondary">
+                      {fromCurrencyValue}
+                    </Typography>
+                  </Grid>
+                  <Grid size={{ xs: 1 }}>
+                    <Typography variant="body2" color="textSecondary">{" "}</Typography>
+                  </Grid>
+                  <Grid size="grow">
+                    <Typography
+                      variant="body2"
+                      color="textSecondary"
+                      sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
+                    >
+                      {content.calculator.comision}
+                    </Typography>
+                  </Grid>
                 </Grid>
-                <Grid size={{ xs: 1}}>
-                  <Typography
-                    variant="subtitle2"
-                    color="textPrimary"
-                    sx={{ fontWeight: "bold" }}
-                  >
-                    {this.state.isUsdt ? 'USD' : fromCurrencyValue}
-                  </Typography>
+                {this.state.isCountryFromPayPal &&
+                  <Grid size={{ xs: 12 }} container spacing={1}>
+                    <Grid size={{ xs: 1 }}>
+                      <Typography variant="body2" color="textSecondary"></Typography>
+                    </Grid>
+                    <Grid size={{ xs: 3, md: 4 }} >
+                      <Typography
+                        variant="body2"
+                        color="textSecondary"
+                        sx={{ textAlign: "right" }}
+                      >
+                        {paypalFee}
+                      </Typography>
+                    </Grid>
+                    <Grid size={{ xs: 1 }}>
+                      <Typography variant="body2" color="textSecondary">
+                        {fromCurrencyValue}
+                      </Typography>
+                    </Grid>
+                    <Grid size={{ xs: 1 }}>
+                      <Typography variant="body2" color="textSecondary">{" "}</Typography>
+                    </Grid>
+                    <Grid size="grow">
+                      <Typography
+                        variant="body2"
+                        color="textSecondary"
+                        sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
+                      >
+                        {content.calculator.paypal_fee}
+                      </Typography>
+                    </Grid>
+                  </Grid>
+                }
+                {this.state.isUsdt &&
+                  <Grid size={{ xs: 12 }} container spacing={1}>
+                    <Grid size={{ xs: 1 }}>
+                      <Typography variant="body2" color="textSecondary"></Typography>
+                    </Grid>
+                    <Grid size={{ xs: 3, md: 4 }}>
+                      <Typography
+                        variant="body2"
+                        color="textSecondary"
+                        sx={{ textAlign: "right" }}
+                      >
+                        {networkFee}
+                      </Typography>
+                    </Grid>
+                    <Grid size={{ xs: 1 }}>
+                      <Typography variant="body2" color="textSecondary">
+                        {fromCurrencyValue}
+                      </Typography>
+                    </Grid>
+                    <Grid size={{ xs: 1 }}>
+                      <Typography variant="body2" color="textSecondary">{" "}</Typography>
+                    </Grid>
+                    <Grid size="grow">
+                      <Typography
+                        variant="body2"
+                        color="textSecondary"
+                        sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
+                      >
+                        {content.calculator.tron_network_fee}
+                      </Typography>
+                    </Grid>
+                  </Grid>
+                }
+                <Grid size={{ xs: 10 }}>
+                  <Divider ></Divider>
                 </Grid>
-                <Grid size="grow">
-                  <Typography variant="subtitle2" color="textPrimary" sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}>{content.calculator.receiver}</Typography>
+                {taxSender > 0 &&
+                  <>
+                    <Grid size={{ xs: 12 }} container spacing={1}>
+                      <Grid size={{ xs: 1 }}>
+                        <Typography
+                          variant="subtitle2"
+                          color="textPrimary"
+                          sx={{ fontWeight: "bold", textAlign: "right" }}
+                        >
+                          -
+                        </Typography>
+                      </Grid>
+                      <Grid size={{ xs: 3, md: 4 }}>
+                        <Typography
+                          variant="subtitle2"
+                          color="textPrimary"
+                          sx={{ fontWeight: "bold", textAlign: "right" }}
+                        >
+                          {taxSender}
+                        </Typography>
+                      </Grid>
+                      <Grid size={{ xs: 1 }}>
+                        <Typography
+                          variant="subtitle2"
+                          color="textPrimary"
+                          sx={{ fontWeight: "bold" }}
+                        >
+                          {fromCurrencyValue}
+                        </Typography>
+                      </Grid>
+                      <Grid size={{ xs: 1 }}>
+                        <Typography variant="subtitle2" color="textPrimary">{" "}</Typography>
+                      </Grid>
+                      <Grid size="grow">
+                        <Typography
+                          variant="subtitle2"
+                          color="textPrimary"
+                          sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
+                        >
+                          {fromCurrencyValue == "COP" ? content?.calculator.tax_co : content?.calculator.tax_pe}
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                    <Grid size={{ xs: 12 }} container spacing={1}>
+                      <Grid size={{ xs: 1 }}>
+                        <Typography
+                          variant="subtitle2"
+                          color="textPrimary"
+                          sx={{ fontWeight: "bold", textAlign: "right" }}
+                        >
+                          =
+                        </Typography>
+                      </Grid>
+                      <Grid size={{ xs: 3, md: 4 }}>
+                        <Typography
+                          variant="subtitle2"
+                          color="textPrimary"
+                          sx={{ fontWeight: "bold", textAlign: "right" }}
+                        >
+                          {this.state.isUsdt ? convertValueCrypto : (+convertValue).toFixed(2)}
+                        </Typography>
+                      </Grid>
+                      <Grid size={{ xs: 1 }}>
+                        <Typography
+                          variant="subtitle2"
+                          color="textPrimary"
+                          sx={{ fontWeight: "bold" }}
+                        >
+                          {this.state.isUsdt ? 'USD' : fromCurrencyValue}
+                        </Typography>
+                      </Grid>
+                      <Grid size="grow">
+                        <Typography variant="subtitle2" color="textPrimary" sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}>{content.calculator.receiver}</Typography>
+                      </Grid>
+                      <Grid size="grow">
+                        <Typography
+                          variant="subtitle2"
+                          color="textPrimary"
+                          sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
+                        >
+                          {content.calculator.we_receive}
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                  </>
+                }
+                {this.state.showTotalFees &&
+                  <Grid size={{ xs: 12 }} container spacing={1}>
+                    <Grid size={{ xs: 1 }}>
+                      <Typography
+                        variant="subtitle2"
+                        color="textPrimary"
+                        sx={{ fontWeight: "bold", textAlign: "right" }}
+                      >
+                        -
+                      </Typography>
+                    </Grid>
+                    <Grid size={{ xs: 3, md: 4 }}>
+                      <Typography
+                        variant="subtitle2"
+                        color="textPrimary"
+                        sx={{ fontWeight: "bold", textAlign: "right" }}
+                      >
+                        {totalFees}
+                      </Typography>
+                    </Grid>
+                    <Grid size={{ xs: 1 }}>
+                      <Typography
+                        variant="subtitle2"
+                        color="textPrimary"
+                        sx={{ fontWeight: "bold" }}
+                      >
+                        {fromCurrencyValue}
+                      </Typography>
+                    </Grid>
+                    <Grid size={{ xs: 1 }}>
+                      <Typography variant="body2" color="textSecondary">{" "}</Typography>
+                    </Grid>
+                    <Grid size="grow">
+                      <Typography
+                        variant="subtitle2"
+                        color="textPrimary"
+                        sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
+                      >
+                        {content.calculator.total_fees}
+                      </Typography>
+                    </Grid>
+                  </Grid>
+                }
+                <Grid size={{ xs: 12 }} container spacing={1}>
+                  <Grid size={{ xs: 1 }}>
+                    <Typography
+                      variant="subtitle2"
+                      color="textPrimary"
+                      sx={{ fontWeight: "bold", textAlign: "right" }}
+                    >
+                      {this.state.exchangeRateLabel}
+                    </Typography>
+                  </Grid>
+                  <Grid size={{ xs: 3, md: 4 }} >
+                    <Typography
+                      variant="subtitle2"
+                      color="textPrimary"
+                      sx={{ fontWeight: "bold", textAlign: "right" }}
+                    >
+                      {exchangeRate}
+                    </Typography>
+                  </Grid>
+                  <Grid size={{ xs: 1 }}>
+                    <Typography
+                      variant="subtitle2"
+                      color="textPrimary"
+                      sx={{ fontWeight: "bold" }}
+                    >
+                      {this.state.isUsdt ? 'USDT' : toCurrencyValue}
+                    </Typography>
+                  </Grid>
+                  <Grid size={{ xs: 1 }}>
+                    <Typography variant="body2" color="textSecondary">{" "}</Typography>
+                  </Grid>
+                  <Grid size="grow">
+                    <Typography
+                      variant="subtitle2"
+                      color="textPrimary"
+                      sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
+                    >
+                      {content.calculator.exchange_rate}
+                    </Typography>
+                  </Grid>
                 </Grid>
-                <Grid size="grow">
-                  <Typography
-                    variant="subtitle2"
-                    color="textPrimary"
-                    sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
-                  >
-                    {content.calculator.we_receive}
-                  </Typography>
+                <Grid size={{ xs: 12 }} container spacing={1}>
+                  <Grid size={{ xs: 1 }}>
+                    <Typography
+                      variant="subtitle2"
+                      color="textPrimary"
+                      sx={{ fontWeight: "bold", textAlign: "right" }}
+                    >
+                      =
+                    </Typography>
+                  </Grid>
+                  <Grid size={{ xs: 3, md: 4 }} >
+                    <Typography
+                      variant="subtitle2"
+                      color="textPrimary"
+                      sx={{ fontWeight: "bold", textAlign: "right" }}
+                    >
+                      {this.state.isUsdt ? convertValueCrypto : (+receivedValue + taxReceiver).toFixed(2)}
+                    </Typography>
+                  </Grid>
+                  <Grid size={{ xs: 1 }}>
+                    <Typography
+                      variant="subtitle2"
+                      color="textPrimary"
+                      sx={{ fontWeight: "bold" }}
+                    >
+                      {this.state.isUsdt ? 'USD' : toCurrencyValue}
+                    </Typography>
+                  </Grid>
+                  <Grid size={{ xs: 1 }}>
+                    <Typography variant="body2" color="textSecondary">{" "}</Typography>
+                  </Grid>
+                  <Grid size="grow">
+                    <Typography
+                      variant="subtitle2"
+                      color="textPrimary"
+                      sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
+                    >
+                      {content.calculator.converted_amount}
+                    </Typography>
+                  </Grid>
                 </Grid>
-              </Grid>
-            </>
-          }
-          {this.state.showTotalFees &&
-            <Grid size={{ xs: 12}} container spacing={1}>
-              <Grid size={{ xs: 1}}>
-                <Typography
-                  variant="subtitle2"
-                  color="textPrimary"
-                  sx={{ fontWeight: "bold", textAlign: "right" }}
-                >
-                  -
-                </Typography>
-              </Grid>
-              <Grid size={{ xs: 3, md: 4 }}>
-                <Typography
-                  variant="subtitle2"
-                  color="textPrimary"
-                  sx={{ fontWeight: "bold", textAlign: "right" }}
-                >
-                  {totalFees}
-                </Typography>
-              </Grid>
-              <Grid size={{ xs: 1}}>
-                <Typography
-                  variant="subtitle2"
-                  color="textPrimary"
-                  sx={{ fontWeight: "bold" }}
-                >
-                  {fromCurrencyValue}
-                </Typography>
-              </Grid>
-              <Grid size={{ xs: 1}}>
-                <Typography variant="body2" color="textSecondary">{" "}</Typography>
-              </Grid>
-              <Grid size="grow">
-                <Typography
-                  variant="subtitle2"
-                  color="textPrimary"
-                  sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
-                >
-                  {content.calculator.total_fees}
-                </Typography>
-              </Grid>
-            </Grid>
-          }
-          <Grid size={{ xs: 12}} container spacing={1}>
-            <Grid size={{ xs: 1}}>
-              <Typography
-                variant="subtitle2"
-                color="textPrimary"
-                sx={{ fontWeight: "bold", textAlign: "right" }}
-              >
-                {this.state.exchangeRateLabel}
-              </Typography>
-            </Grid>
-            <Grid size={{ xs: 3, md: 4 }} >
-              <Typography
-                variant="subtitle2"
-                color="textPrimary"
-                sx={{ fontWeight: "bold", textAlign: "right" }}
-              >
-                {exchangeRate}
-              </Typography>
-            </Grid>
-            <Grid size={{ xs: 1}}>
-              <Typography
-                variant="subtitle2"
-                color="textPrimary"
-                sx={{ fontWeight: "bold" }}
-              >
-                {this.state.isUsdt ? 'USDT' : toCurrencyValue}
-              </Typography>
-            </Grid>
-            <Grid size={{ xs: 1}}>
-              <Typography variant="body2" color="textSecondary">{" "}</Typography>
-            </Grid>
-            <Grid size="grow">
-              <Typography
-                variant="subtitle2"
-                color="textPrimary"
-                sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
-              >
-                {content.calculator.exchange_rate}
-              </Typography>
-            </Grid>
-          </Grid>
-          <Grid size={{ xs: 12}} container spacing={1}>
-            <Grid size={{ xs: 1}}>
-              <Typography
-                variant="subtitle2"
-                color="textPrimary"
-                sx={{ fontWeight: "bold", textAlign: "right" }}
-              >
-                =
-              </Typography>
-            </Grid>
-            <Grid size={{ xs: 3, md: 4 }} >
-              <Typography
-                variant="subtitle2"
-                color="textPrimary"
-                sx={{ fontWeight: "bold", textAlign: "right" }}
-              >
-                {this.state.isUsdt ? convertValueCrypto : (+receivedValue + taxReceiver).toFixed(2)}
-              </Typography>
-            </Grid>
-            <Grid size={{ xs: 1}}>
-              <Typography
-                variant="subtitle2"
-                color="textPrimary"
-                sx={{ fontWeight: "bold" }}
-              >
-                {this.state.isUsdt ? 'USD' : toCurrencyValue}
-              </Typography>
-            </Grid>
-            <Grid size={{ xs: 1}}>
-              <Typography variant="body2" color="textSecondary">{" "}</Typography>
-            </Grid>
-            <Grid size="grow">
-              <Typography
-                variant="subtitle2"
-                color="textPrimary"
-                sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
-              >
-                {content.calculator.converted_amount}
-              </Typography>
-            </Grid>
-          </Grid>
 
-          {taxReceiver > 0 &&
-            <Grid size={{ xs: 12}} container spacing={1}>
-              <Grid size={{ xs: 1}}>
-                <Typography
-                  variant="subtitle2"
-                  color="textPrimary"
-                  sx={{ fontWeight: "bold", textAlign: "right" }}
-                >
-                  -
-                </Typography>
-              </Grid>
-               <Grid size={{ xs: 3, md: 4 }} >
-                <Typography
-                  variant="subtitle2"
-                  color="textPrimary"
-                  sx={{ fontWeight: "bold", textAlign: "right" }}
-                >
-                  {(+taxReceiver).toFixed(2)}
-                </Typography>
+                {taxReceiver > 0 &&
+                  <Grid size={{ xs: 12 }} container spacing={1}>
+                    <Grid size={{ xs: 1 }}>
+                      <Typography
+                        variant="subtitle2"
+                        color="textPrimary"
+                        sx={{ fontWeight: "bold", textAlign: "right" }}
+                      >
+                        -
+                      </Typography>
+                    </Grid>
+                    <Grid size={{ xs: 3, md: 4 }} >
+                      <Typography
+                        variant="subtitle2"
+                        color="textPrimary"
+                        sx={{ fontWeight: "bold", textAlign: "right" }}
+                      >
+                        {(+taxReceiver).toFixed(2)}
+                      </Typography>
+                    </Grid>
+                    <Grid size={{ xs: 1 }}>
+                      <Typography
+                        variant="subtitle2"
+                        color="textPrimary"
+                        sx={{ fontWeight: "bold" }}
+                      >
+                        {toCurrencyValue}
+                      </Typography>
+                    </Grid>
+                    <Grid size={{ xs: 1 }}>
+                      <Typography variant="body2" color="textSecondary">{" "}</Typography>
+                    </Grid>
+                    <Grid size="grow">
+                      <Typography
+                        variant="subtitle2"
+                        color="textPrimary"
+                        sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
+                      >
+                        {toCurrencyValue == "COP" ? content?.calculator.tax_co : content?.calculator.tax_pe}
+                      </Typography>
+                    </Grid>
+                  </Grid>
+                }
               </Grid>
-              <Grid size={{ xs: 1}}>
+            }
+            <br></br>
+            <Grid container direction="column" >
+              <Grid>
                 <Typography
-                  variant="subtitle2"
-                  color="textPrimary"
-                  sx={{ fontWeight: "bold" }}
+                  sx={classes.labelAmount}
+                  gutterBottom
+                  variant="subtitle1"
+                  component="div"
                 >
-                  {toCurrencyValue}
+                  {content.landing.receiver_content}
                 </Typography>
               </Grid>
-              <Grid size={{ xs: 1}}>
-                <Typography variant="body2" color="textSecondary">{" "}</Typography>
-              </Grid>
-              <Grid size="grow">
-                <Typography
-                  variant="subtitle2"
-                  color="textPrimary"
-                  sx={{ fontWeight: "bold", textAlign: "left", marginLeft: "10px" }}
+              <Grid size={{ xs: 12 }} container>
+                <Grid size={{ xs: 8, md: 9 }}
                 >
-                  {toCurrencyValue == "COP" ? content?.calculator.tax_co : content?.calculator.tax_pe}
-                </Typography>
-              </Grid>
-            </Grid>
-          }
-        </Grid>
-      }
-      <br></br>
-      <Grid container direction="column" >
-        <Grid>
-          <Typography
-            sx={classes.labelAmount}
-            gutterBottom
-            variant="subtitle1"
-            component="div"
-          >
-            {content.landing.receiver_content}
-          </Typography>
-        </Grid>
-        <Grid size={{ xs: 12}} container>
-         <Grid size={{ xs: 8, md:9}}
->
-            <Paper sx={classes.inputAmount}>
-              <InputBase
-                id="receiver"
-                sx={classes.inputAmountText}
-                //type="number"
-                required
-                value={receivedValue}
-                disabled={true}
-                startAdornment={
-                  <InputAdornment
-                    position="start"
-                  >
-                    <span>{loadingTo && <CircularProgress size={18} />}</span>
-                  </InputAdornment>
-                }
-                endAdornment={
-                  <InputAdornment
-                    position="end"
-                  >
-                    <span sx={{
-                      fontSize: "10px",
-                      fontWeight: "500",
-                      paddingTop: "15px",
-                      paddingRight: "5px"
-                    }}>
-                      {
-                        (toCountryValue == "AR" &&
-                          paymentMethods.length &&
-                          paymentMethods[0].isWallet &&
-                          !loadingTo &&
-                          !loadingFrom) ? `(${paymentMethods[0].amount} ARS)` : ''
+                  <Paper sx={classes.inputAmount}>
+                    <InputBase
+                      id="receiver"
+                      sx={classes.inputAmountText}
+                      //type="number"
+                      required
+                      value={receivedValue}
+                      disabled={true}
+                      startAdornment={
+                        <InputAdornment
+                          position="start"
+                        >
+                          <span>{loadingTo && <CircularProgress size={18} />}</span>
+                        </InputAdornment>
                       }
-                    </span>
-                  </InputAdornment>
-                }
-                slotProps={{
-                  input: { min: minFromValue, max: maxFromValue }
-                }}
-                onChange={this.handleReceived}
-              />
-            </Paper>
-          </Grid>
-          <Grid size={{ xs: 4, md:3}}
->
-            <Autocomplete
-              disabled={loadingTo || loadingFrom}
-              options={countries.filter((country) => {
-                if (
-                  calculator &&
-                  calculator[fromCountryValue] &&
-                  calculator[fromCountryValue].active &&
-                  calculator[fromCountryValue].countryTo[
-                  country.code
-                  ] &&
-                  calculator[fromCountryValue].countryTo[country.code]
-                    .active
-                ) {
-                  return country;
-                }
-              })}
-              sx={{
-                fontSize: 14,
-                "& > span": {
-                  marginRight: 10,
-                  fontSize: 18,
-                },
-              }}
-              disableClearable
-              value={
-                countries.filter(
-                  (country) => country.code == toCountryValue
-                )[0]
-              }
-              autoHighlight
-               getOptionLabel={(option) => `${option.currency}`}
-              renderOption={(props, option) => (
-                <Box component="li" {...props}>
-                  <span style={{ marginRight: "5px" }}>
-                    <FlagsHelpers code={option.code == "PE-USD" ? "PE" : option.code} />
-                  </span>
-                  {option.currency}
-                </Box>
-              )}
-              renderInput={(params) => (
-                <Paper variant="outlined" sx={classes.rootFlags}>
-                  <TextField
-                    {...params}
-                    variant="standard"
-                    slotProps={{
-                      input: {
-                        ...params.InputProps,
-                        startAdornment: (
-                          <FlagsHelpers
-                            code={this.state.toCountryValue == "PE-USD" ?
-                              "PE" : this.state.toCountryValue
-                            }>
-                          </FlagsHelpers>
-                        ),
-                        disableUnderline: true,
+                      endAdornment={
+                        <InputAdornment
+                          position="end"
+                        >
+                          <span sx={{
+                            fontSize: "10px",
+                            fontWeight: "500",
+                            paddingTop: "15px",
+                            paddingRight: "5px"
+                          }}>
+                            {
+                              (toCountryValue == "AR" &&
+                                paymentMethods.length &&
+                                paymentMethods[0].isWallet &&
+                                !loadingTo &&
+                                !loadingFrom) ? `(${paymentMethods[0].amount} ARS)` : ''
+                            }
+                          </span>
+                        </InputAdornment>
                       }
-                    }}
-                  />
-                </Paper>
-              )}
-              onChange={this.handleOnChangeToCountry}
-            />
-          </Grid>
-        </Grid>
-        <Grid size={{ xs: 12}} container>
-          <Grid size={{ xs: 12}}>
-            {!isLoading && !loadingFrom && !loadingTo && (
-              <FormHelperText sx={{ color: "red" }}>
-                {(receivedValue < minToValue &&
-                  content.landing.min_value.replace(
-                    "minValue",
-                    minToValue
-                  )) ||
-                  (receivedValue > maxToValue &&
-                    content.landing.max_value.replace(
-                      "maxValue",
-                      maxToValue
-                    ))}
-              </FormHelperText>
-            )}
-          </Grid>
-        </Grid>
-        {(toCountryValue == "VE" || toCountryValue == "AR") &&
-          paymentMethods &&
-          !loadingTo &&
-          !loadingFrom && (
-            <Grid size={{ xs: 12}}>
-              <FormControl fullWidth>
-                <Select
-                  id="demo-customized-select-native"
-                  value="Banks"
-                  onChange={this.changeBank}
+                      slotProps={{
+                        input: { min: minFromValue, max: maxFromValue }
+                      }}
+                      onChange={this.handleReceived}
+                    />
+                  </Paper>
+                </Grid>
+                <Grid size={{ xs: 4, md: 3 }}
                 >
-                  {paymentMethods &&
-                    paymentMethods.map((payment, index) => {
-                      if (payment.id == "trc20") {
-                        return <MenuItem key={payment.name + index} value={payment.id}>
-                          Tron TRC20 ({payment.currency})
-                        </MenuItem>
+                  <Autocomplete
+                    disabled={loadingTo || loadingFrom}
+                    options={countries.filter((country) => {
+                      if (
+                        calculator &&
+                        calculator[fromCountryValue] &&
+                        calculator[fromCountryValue].active &&
+                        calculator[fromCountryValue].countryTo[
+                        country.code
+                        ] &&
+                        calculator[fromCountryValue].countryTo[country.code]
+                          .active
+                      ) {
+                        return country;
                       }
-                      return <MenuItem key={payment.name + index} value={payment.id}>
-                        {payment.label}
-                      </MenuItem>
                     })}
-                </Select>
-              </FormControl>
-            </Grid>
-          )
-        }
-      </Grid>
-      <br></br>
-      {!onlySimulation &&
-        <>
-          <Grid container direction="column" spacing={0}>
-            {this.state.hasValidCoupon && (plus != null && plus != 'undefined' && plus != 0) &&
-              <Grid>
-                <p
-                  sx={{
-                    textAlign: "center",
-                  }}
-                >
-                  {content.calculator.plus
-                    .replace("amount", plus)
-                    .replace("currency", this.state.isUsdt ? 'USDT' : toCurrencyValue)}
-                </p>
-              </Grid>
-            }
-            <Grid>
-              <Typography
-                sx={classes.labelCoupon}
-                gutterBottom
-                variant="subtitle1"
-                component="div"
-              >
-                {content.landing.coupon_content}
-              </Typography>
-            </Grid>
-            <Grid size={{ xs: 12}} container>
-              <Grid size={{ xs: 5}}>
-                <Paper sx={classes.inputCoupon}>
-                  <InputBase
-                    sx={classes.inputCouponText}
-                    value={couponValue}
-                    disabled={loadingFrom || loadingTo}
-                    type="text"
-                    onChange={this.handleCoupon}
+                    sx={{
+                      fontSize: 14,
+                      "& > span": {
+                        marginRight: 10,
+                        fontSize: 18,
+                      },
+                    }}
+                    disableClearable
+                    value={
+                      countries.filter(
+                        (country) => country.code == toCountryValue
+                      )[0]
+                    }
+                    autoHighlight
+                    getOptionLabel={(option) => `${option.currency}`}
+                    renderOption={(props, option) => (
+                      <Box component="li" {...props}>
+                        <span style={{ marginRight: "5px" }}>
+                          <FlagsHelpers code={option.code == "PE-USD" ? "PE" : option.code} />
+                        </span>
+                        {option.currency}
+                      </Box>
+                    )}
+                    renderInput={(params) => (
+                      <Paper variant="outlined" sx={classes.rootFlags}>
+                        <TextField
+                          {...params}
+                          variant="standard"
+                          slotProps={{
+                            input: {
+                              ...params.InputProps,
+                              startAdornment: (
+                                <FlagsHelpers
+                                  code={this.state.toCountryValue == "PE-USD" ?
+                                    "PE" : this.state.toCountryValue
+                                  }>
+                                </FlagsHelpers>
+                              ),
+                              disableUnderline: true,
+                            }
+                          }}
+                        />
+                      </Paper>
+                    )}
+                    onChange={this.handleOnChangeToCountry}
                   />
-                </Paper>
+                </Grid>
               </Grid>
-
-              {this.state.hasValidCoupon && (plus != null && plus != 'undefined' && plus != 0) &&
-                <Grid size={{ xs: 2}} sx={{ paddingLeft: "3px" }}>
-                  <Tooltip title={content.calculator.remove_coupon}>
-                    <Button
-                      sx={classes.buttonRemoveCoupon}
-                      onClick={this.removeCoupon}
-                    >
-                      <HighlightOffOutlinedIcon
-                        sx={{ color: "white" }} />
-                    </Button>
-                  </Tooltip>
+              <Grid size={{ xs: 12 }} container>
+                <Grid size={{ xs: 12 }}>
+                  {!isLoading && !loadingFrom && !loadingTo && (
+                    <FormHelperText sx={{ color: "red" }}>
+                      {(receivedValue < minToValue &&
+                        content.landing.min_value.replace(
+                          "minValue",
+                          minToValue
+                        )) ||
+                        (receivedValue > maxToValue &&
+                          content.landing.max_value.replace(
+                            "maxValue",
+                            maxToValue
+                          ))}
+                    </FormHelperText>
+                  )}
                 </Grid>
+              </Grid>
+              {(toCountryValue == "VE" || toCountryValue == "AR") &&
+                paymentMethods &&
+                !loadingTo &&
+                !loadingFrom && (
+                  <Grid size={{ xs: 12 }}>
+                    <FormControl fullWidth>
+                      <Select
+                        id="demo-customized-select-native"
+                        value="Banks"
+                        onChange={this.changeBank}
+                      >
+                        {paymentMethods &&
+                          paymentMethods.map((payment, index) => {
+                            if (payment.id == "trc20") {
+                              return <MenuItem key={payment.name + index} value={payment.id}>
+                                Tron TRC20 ({payment.currency})
+                              </MenuItem>
+                            }
+                            return <MenuItem key={payment.name + index} value={payment.id}>
+                              {payment.label}
+                            </MenuItem>
+                          })}
+                      </Select>
+                    </FormControl>
+                  </Grid>
+                )
               }
             </Grid>
-            {!this.state.hasValidCoupon && (
-              <Grid size={{ xs: 12}}>
+            <br></br>
+            {!onlySimulation &&
+              <>
+                <Grid container direction="column" spacing={0}>
+                  {this.state.hasValidCoupon && (plus != null && plus != 'undefined' && plus != 0) &&
+                    <Grid>
+                      <p
+                        sx={{
+                          textAlign: "center",
+                        }}
+                      >
+                        {content.calculator.plus
+                          .replace("amount", plus)
+                          .replace("currency", this.state.isUsdt ? 'USDT' : toCurrencyValue)}
+                      </p>
+                    </Grid>
+                  }
+                  <Grid>
+                    <Typography
+                      sx={classes.labelCoupon}
+                      gutterBottom
+                      variant="subtitle1"
+                      component="div"
+                    >
+                      {content.landing.coupon_content}
+                    </Typography>
+                  </Grid>
+                  <Grid size={{ xs: 12 }} container>
+                    <Grid size={{ xs: 5 }}>
+                      <Paper sx={classes.inputCoupon}>
+                        <InputBase
+                          sx={classes.inputCouponText}
+                          value={couponValue}
+                          disabled={loadingFrom || loadingTo}
+                          type="text"
+                          onChange={this.handleCoupon}
+                        />
+                      </Paper>
+                    </Grid>
+
+                    {this.state.hasValidCoupon && (plus != null && plus != 'undefined' && plus != 0) &&
+                      <Grid size={{ xs: 2 }} sx={{ paddingLeft: "3px" }}>
+                        <Tooltip title={content.calculator.remove_coupon}>
+                          <Button
+                            sx={classes.buttonRemoveCoupon}
+                            onClick={this.removeCoupon}
+                          >
+                            <HighlightOffOutlinedIcon
+                              sx={{ color: "white" }} />
+                          </Button>
+                        </Tooltip>
+                      </Grid>
+                    }
+                  </Grid>
+                  {!this.state.hasValidCoupon && (
+                    <Grid size={{ xs: 12 }}>
+                      <Typography
+                        sx={{
+                          color: "red",
+                          textAlign: "center",
+                          maxWidth: "100%",
+                          //paddingTop: "10px"
+                        }}
+                      >
+                        {
+                          this.state.countryError.hasErrors ?
+                            <>
+                              {this.state.countryError.value == "from" ? content.calculator.invalid_coupon_country_from : ""}
+                              {this.state.countryError.value == "to" ? content.calculator.invalid_coupon_country_to : ""}
+                              {this.state.countryError.value == "amount_from" ? content.calculator.invalid_coupon_amount_from : ""}
+                              {this.state.countryError.value == "" ? content.calculator.invalid_coupon_message : ""}
+                            </>
+                            : ""
+                        }
+                      </Typography>
+                    </Grid>
+                  )}
+                </Grid>
+                <br></br>
+                <Grid size={{ xs: 12 }} sx={{ marginTop: "20px", marginBottom: "10px" }}>
+                  <Button
+                    sx={startDisabled ? classes.buttonStartDisabled : classes.buttonStart}
+                    variant="contained"
+                    disabled={startDisabled}
+                    onClick={this.handleSubmitForm}
+                  >
+                    <Typography sx={classes.textButtonStart}>
+                      {content.landing.button_start}
+                    </Typography>
+                  </Button>
+                </Grid>
+                <br></br>
+              </>
+            }
+            {recalculate &&
+              <Grid size={{ xs: 12 }}>
+                <Typography
+                  sx={classes.labelUpdateTC}
+                >
+                  <Timer locale={locale} />
+                </Typography>
+              </Grid>
+            }
+            {this.state.hasError && (
+              <Grid size={{ xs: 12 }}>
                 <Typography
                   sx={{
                     color: "red",
                     textAlign: "center",
                     maxWidth: "100%",
-                    //paddingTop: "10px"
+                    paddingTop: "10px"
                   }}
                 >
-                  {
-                    this.state.countryError.hasErrors ?
-                      <>
-                        {this.state.countryError.value == "from" ? content.calculator.invalid_coupon_country_from : ""}
-                        {this.state.countryError.value == "to" ? content.calculator.invalid_coupon_country_to : ""}
-                        {this.state.countryError.value == "amount_from" ? content.calculator.invalid_coupon_amount_from : ""}
-                        {this.state.countryError.value == "" ? content.calculator.invalid_coupon_message : ""}
-                      </>
-                      : ""
-                  }
+                  {content.error_general}
                 </Typography>
               </Grid>
             )}
-          </Grid>
-          <br></br>
-          <Grid size={{ xs: 12}} sx={{ marginTop: "20px", marginBottom: "10px" }}>
-            <Button
-              sx={startDisabled ? classes.buttonStartDisabled : classes.buttonStart}
-              variant="contained"
-              disabled={startDisabled}
-              onClick={this.handleSubmitForm}
-            >
-              <Typography sx={classes.textButtonStart}>
-                {content.landing.button_start}
+            <Grid size={{ xs: 12 }} sx={{ marginTop: "45px" }}>
+              <Divider></Divider>
+            </Grid>
+            <Grid size={{ xs: 12 }} container
+              direction="row"
+              justifyContent="center"
+              alignItems="center"
+              sx={{ paddingBottom: "10px" }}>
+              <Typography
+                variant="subtitle1"
+              >
+                <span style={{ fontSize: "10px", textAlign: "center" }}>Powered by&nbsp;</span>
+                <span style={{ fontWeight: "bold", textAlign: "center", fontSize: "12px", }}>Orquezta</span>
               </Typography>
-            </Button>
+            </Grid>
           </Grid>
-          <br></br>
-        </>
-      }
-      {recalculate &&
-        <Grid size={{ xs: 12}}>
-          <Typography
-            sx={classes.labelUpdateTC}
-          >
-            <Timer locale={locale} />
-          </Typography>
-        </Grid>
-      }
-      {this.state.hasError && (
-        <Grid size={{ xs: 12}}>
-          <Typography
-            sx={{
-              color: "red",
-              textAlign: "center",
-              maxWidth: "100%",
-              paddingTop: "10px"
-            }}
-          >
-            {content.error_general}
-          </Typography>
-        </Grid>
-      )}
-      <Grid size={{ xs: 12}} sx={{ marginTop: "45px" }}>
-        <Divider></Divider>
-      </Grid>
-      <Grid size={{ xs: 12}} container
-        direction="row"
-        justifyContent="center"
-        alignItems="center"
-        sx={{ paddingBottom: "10px" }}>
-        <Typography
-          variant="subtitle1"
-        >
-          <span style={{ fontSize: "10px", textAlign: "center" }}>Powered by&nbsp;</span>
-          <span style={{ fontWeight: "bold", textAlign: "center", fontSize: "12px", }}>Orquezta</span>
-        </Typography>
-      </Grid>
-    </Grid>
-  </Paper>
-</Fragment>
-        );
-    }
+        </Paper>
+      </Fragment>
+    );
+  }
 }
 
 export default Calculator;