墨西哥充值

src/Global.js

@@ -138,6 +138,18 @@ global.setLocalAreaID=(value)=>{
     localStorageSet(LOCAL_AREA_ID,value+"");
     window.location.reload();
 }
+global.getLocalAreaItem=()=>{
+    let areaID=global.getLocalAreaID();
+    for (let i = 0; i < area.length; i++) {
+        let item=area[i];
+        if (item){
+            if (item.id===areaID){
+                return item;
+            }
+        }
+    }
+    return null;
+}
 global.showSaveAccount=(info)=>{
     if (global.saveAccount)global.saveAccount.show(info);
 }

src/assets/singlesvg/warning.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 7V13M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="12" cy="16.5" r="1" fill="#000000"/>
+</svg>

src/constants/app.js

@@ -29,11 +29,18 @@ const APP_LOGIN_TYPE={
     MAIL:"mail",
     GUEST:"guest"
 }
+const APP_COUNTRY_CODE={
+    BR:"br",
+    MX:"mx",
+    EU:"eu",
+    RU:"ru"
+}
 export {
     APP_THEME,
     APP_GENDER,
     APP_CHANNEL,
     APP_SERVER,
     APP_WELFARE,
-    APP_LOGIN_TYPE
+    APP_LOGIN_TYPE,
+    APP_COUNTRY_CODE
 };

src/locales/languages/en_US.json

@@ -223,6 +223,16 @@
       "okey": "Okay",
       "success": "Successful recharge"
     },
+    "order_info_mx": {
+      "title1": "Destination bank",
+      "title2": "Beneficiary",
+      "title3": "Payment amount",
+      "title4": "CLABE",
+      "title5": "Concept",
+      "copy_all": "Copy All",
+      "btn_chat": "Help chat",
+      "notice": "1. The actual amount must be consistent with the order amount.\n2. Each clabe number can only be paid once, otherwise the payment will fail"
+    },
     "promotions": {
       "tips": "Participate in promotions",
       "banner_tips": "Super bonus! Get an extra {0} bonus on deposit.",

src/widgets/WDeposit/index.jsx

@@ -12,16 +12,32 @@ const WDeposit=({close})=>{
     const dispatch = useDispatch();
     const userInfo=useSelector(getUserInfo);
     const configStatus=useSelector(getPayConfigStatus);
+    const components={
+        "br":BRDeposit,
+        "mx":BRDeposit,
+        "eu":BRDeposit,
+        "ru":BRDeposit
+    }
     useEffect(()=>{
         if (config==null||config.length===0){
             dispatch(reqRechargeConfig());
         }
         dispatch(reqFirstPayConfig(userInfo.UserID))
     },[])
+    const renderDeposit=()=>{
+        let areaItem=global.getLocalAreaItem();
+        if (areaItem!=null){
+            let Comp=components[areaItem.code];
+            if (Comp!=null){
+                return <Comp />
+            }
+        }
+        return (<></>);
+    }
     return (
         <div className={styles.container}>
             {
-                configStatus===REQ_STATUS.LOADING?(<SmallLoading></SmallLoading>):(<BRDeposit/>)
+                configStatus===REQ_STATUS.LOADING?(<SmallLoading></SmallLoading>):renderDeposit()
             }
         </div>
     )

src/widgets/WPaymentOrder/MX/MXPayOrder.jsx

@@ -0,0 +1,226 @@
+import {useSelector} from "react-redux";
+import {getCurrPayOrder} from "@features/paySlice";
+import React, {useEffect, useState} from "react";
+import Spring from "@components/Spring";
+import styles from "./styles.module.scss";
+import {formatDate, formatTime, stringFormat} from "@utils/helpers";
+import SvgIcon from "@components/SvgIcon";
+import {toast} from "react-toastify";
+import {CopyToClipboard} from "react-copy-to-clipboard";
+import {ReactComponent as Warning} from '@assets/singlesvg/warning.svg';
+import {ROUTE_PATH} from "@constants/routes";
+import {useNavigate} from "react-router-dom";
+const i18n=global.i18n;
+const MXPayOrder = ({close}) => {
+    const orderInfo=useSelector(getCurrPayOrder);
+    const [leftTime,setLeftTime]=useState(0);
+    const navigate=useNavigate();
+    const getLeftTime=()=>{
+        if (orderInfo==null)return 0;
+        let deadline=Number(orderInfo.deadline);
+        let createAt=Number(orderInfo.createAt);
+        let expireAt=createAt+deadline*1000;
+        let now=Date.now();
+        let left=expireAt-now;
+        if (left<0)left=0;
+        return left;
+    }
+    const updateLeftTime=(timer)=>{
+        let left=getLeftTime();
+        setLeftTime(left);
+        if (left<=0){
+            clearInterval(timer);
+            timer=null;
+            if (close)close();
+        }
+        return timer;
+    }
+    useEffect(()=>{
+        let timer=null;
+        if (orderInfo){
+            setLeftTime(getLeftTime());
+            timer=setInterval(()=>{
+                timer=updateLeftTime(timer);
+            },1000)
+        }
+        return () => {
+            if (timer!=null){
+                clearInterval(timer);
+                timer=null;
+            }
+        };
+    },[orderInfo])
+    const onClickCustom=()=>{
+        navigate(ROUTE_PATH.CUSTOMER);
+    }
+    const renderCopyAll=()=>{
+        let content=i18n.t("deposit.order_info_mx.title1")+":"+orderInfo.bank+"\n";
+        content+=i18n.t("deposit.order_info_mx.title2")+":"+orderInfo.benefi+"\n";
+        content+=i18n.t("deposit.order_info_mx.title3")+":"+(global.DOLLAR + orderInfo.amount)+"\n";
+        content+=i18n.t("deposit.order_info_mx.title4")+":"+orderInfo.clabe+"\n";
+        content+=i18n.t("deposit.order_info_mx.title5")+":"+orderInfo.concepto+"\n";
+        return (
+            <CopyToClipboard text={content} onCopy={()=>{
+                toast.success(i18n.t("copy_success"));
+            }}>
+                <button className={"button-green"}>
+                    {i18n.t("deposit.order_info_mx.copy_all")}
+                </button>
+            </CopyToClipboard>
+        )
+    }
+    const renderCustomer=()=>{
+        return (
+            <button className={"button-green"} onClick={()=>{
+                onClickCustom();
+            }}>
+                <SvgIcon className={styles.icon_chat} herf={"icon_Support"}></SvgIcon>
+                {i18n.t("deposit.order_info_mx.btn_chat")}
+            </button>
+        )
+    }
+    const renderTips = () => {
+        return (
+            <div className={styles.notice_con}>
+                <Warning className={styles.n_icon}></Warning>
+                <div className={styles.notice}>
+                    {i18n.t("deposit.order_info_mx.notice")}
+                </div>
+            </div>
+        )
+    }
+    const renderBasic = () => {
+        let deadline = Number(orderInfo.deadline);
+        let createAt = Number(orderInfo.createAt);
+        let expireAt = createAt + deadline * 1000;
+        return (
+            <>
+                {/*<div className={styles.top}>*/}
+                {/*    /!*<button>*!/*/}
+                {/*    /!*    <SvgIcon className={styles.icon} herf={"icon_Support"}></SvgIcon>*!/*/}
+                {/*    /!*</button>*!/*/}
+                {/*    <div className={styles.tips}>*/}
+                {/*        {stringFormat(i18n.t("deposit.order_info.tips"), [formatDate(expireAt)])}*/}
+                {/*    </div>*/}
+                {/*</div>*/}
+                <div className={styles.base_info}>
+                    <div className={`${styles.info_row} ${styles.info_row_top} ${styles.info_row_light}`}>
+                        <div className={styles.label}>
+                            {i18n.t("deposit.order_info.create_date")}
+                        </div>
+                        {formatDate(createAt)}
+                    </div>
+                    <div className={styles.info_row}>
+                        <div className={styles.label}>
+                            {i18n.t("deposit.order_info.time")}
+                        </div>
+                        {formatTime(leftTime, true)}
+                    </div>
+
+                </div>
+                <div className={styles.base_info}>
+                    <CopyToClipboard text={orderInfo.bank} onCopy={() => {
+                        toast.success(i18n.t("copy_success"));
+                    }}>
+                        <button className={`${styles.info_row} ${styles.info_row_top} ${styles.info_row_light}`}>
+                            <div className={styles.label}>
+                                {i18n.t("deposit.order_info_mx.title1")}
+                            </div>
+                            <div className={styles.order}>
+                                {orderInfo.bank}
+                                <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
+                            </div>
+                        </button>
+                    </CopyToClipboard>
+                    <CopyToClipboard text={orderInfo.benefi} onCopy={() => {
+                        toast.success(i18n.t("copy_success"));
+                    }}>
+                        <button className={styles.info_row}>
+                            <div className={styles.label}>
+                                {i18n.t("deposit.order_info_mx.title2")}
+                            </div>
+                            <div className={styles.order}>
+                                {orderInfo.benefi}
+                                <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
+                            </div>
+                        </button>
+                    </CopyToClipboard>
+                    <CopyToClipboard text={orderInfo.amount} onCopy={() => {
+                        toast.success(i18n.t("copy_success"));
+                    }}>
+                        <button className={`${styles.info_row} ${styles.info_row_light}`}>
+                            <div className={styles.label}>
+                                {i18n.t("deposit.order_info_mx.title3")}
+                            </div>
+                            <div className={styles.order}>
+                                <div className={styles.money}>
+                                    {global.DOLLAR + orderInfo.amount}
+                                </div>
+                                <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
+                            </div>
+                        </button>
+                    </CopyToClipboard>
+                    <CopyToClipboard text={orderInfo.clabe} onCopy={() => {
+                        toast.success(i18n.t("copy_success"));
+                    }}>
+                        <button className={styles.info_row}>
+                            <div className={styles.label}>
+                                {i18n.t("deposit.order_info_mx.title4")}
+                            </div>
+                            <div className={styles.order}>
+                                {orderInfo.clabe}
+                                <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
+                            </div>
+                        </button>
+                    </CopyToClipboard>
+                    <CopyToClipboard text={orderInfo.clabe} onCopy={() => {
+                        toast.success(i18n.t("copy_success"));
+                    }}>
+                        <button className={`${styles.info_row} ${styles.info_row_bottom} ${styles.info_row_light}`}>
+                            <div className={styles.label}>
+                                {i18n.t("deposit.order_info_mx.title5")}
+                            </div>
+                            <div className={styles.order}>
+                                {orderInfo.concepto}
+                                <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
+                            </div>
+                        </button>
+                    </CopyToClipboard>
+                </div>
+            </>
+        )
+    }
+    const renderOrderInfo = () => {
+        return (
+            <div className={styles.order_info}>
+                {renderBasic()}
+                {/*{renderCopyAll()}*/}
+                {renderTips()}
+                {renderCustomer()}
+            </div>
+        )
+    }
+    const renderOrder = () => {
+        return (
+            <Spring type="slideUp" className={styles.container}>
+                {renderOrderInfo()}
+            </Spring>
+        )
+    }
+    const renderView = () => {
+        if (orderInfo != null) {
+            if (orderInfo.status === "success") {
+
+            } else {
+                return renderOrder();
+            }
+        }
+        return (<></>);
+    }
+    return (
+        <>
+            {renderView()}
+        </>
+    )
+}
+export default MXPayOrder;

src/widgets/WPaymentOrder/MX/styles.module.scss

@@ -0,0 +1,139 @@
+.container{
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 1rem;
+  width: 100%;
+  gap: 0.5rem;
+}
+.order_info{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 1rem;
+  & .top{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    & .icon{
+      width: 1.5rem;
+      height: 1.5rem;
+      fill: #3bc117;
+    }
+    & .tips{
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      width: 100%;
+      color: var(--text);
+      font-weight: 600;
+      gap: 0.5rem;
+      //font-size: 0.7rem;
+    }
+  }
+  & .base_info{
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--border-radius);
+    //padding: 1rem;
+    background: var(--card-bg);
+    //gap: 0.8rem;
+    //background: #222923;
+  }
+  & .info_row{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--header);
+    padding:0.8rem 1rem;
+    font-weight: 600;
+    font-size: 0.92rem;
+    &_light{
+      background-color: rgba(255, 255, 255, 0.02);
+    }
+    &_top{
+      border-top-left-radius: var(--border-radius);
+      border-top-right-radius: var(--border-radius);
+    }
+    &_bottom{
+      border-bottom-left-radius: var(--border-radius);
+      border-bottom-right-radius: var(--border-radius);
+    }
+    & .label{
+      color: #FFE827;
+    }
+    & .logo{
+      width: 1.4rem;
+      height: 1.4rem;
+      fill: var(--header);
+    }
+    & .order{
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      user-select: text;
+    }
+    & .money{
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: #fdea68;
+    }
+  }
+  & .pay_info{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-radius);
+    padding: 1rem;
+    background: var(--card-bg);
+    gap: 1rem;
+    color: var(--header);
+    & .pay_label{
+      font-size: 1rem;
+      color: var(--header);
+    }
+    & .pay_content{
+      word-wrap: break-word;
+      word-break: break-all;
+      text-align: center;
+      //opacity: 0.75;
+      color: var(--text);
+      user-select: text;
+    }
+  }
+}
+
+.notice{
+  color: var(--coin-yellow);
+  line-height: 1rem;
+  //opacity: 0.9;
+  white-space: pre-wrap;
+}
+.notice_con{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 1rem;
+  gap: 0.5rem;
+  border: 1px dashed rgba(237, 195, 73, 0.7);
+  border-radius: var(--border-radius);
+  & .n_icon{
+    width: 3.5rem;
+    height: 3.5rem;
+    fill: var(--coin-yellow);
+  }
+}
+.bottom_con{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.icon_chat{
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: #fff;
+  margin-right: 0.5rem;
+}

src/widgets/WPaymentOrder/index.jsx

@@ -1,9 +1,24 @@
 import styles from './styles.module.scss';
 import BRPayOrder from "@widgets/WPaymentOrder/BR/BRPayOrder";
+import MXPayOrder from "@widgets/WPaymentOrder/MX/MXPayOrder";
 const WPaymentOrder=({close})=>{
+    const components={
+        "br":BRPayOrder,
+        "mx":MXPayOrder,
+    }
+    const renderPayOrder=()=>{
+        let areaItem=global.getLocalAreaItem();
+        if (areaItem!=null){
+            let Comp=components[areaItem.code];
+            if (Comp!=null){
+                return <Comp close={close} />
+            }
+        }
+        return (<></>);
+    }
     return (
         <div className={styles.container}>
-            <BRPayOrder close={close}></BRPayOrder>
+            {renderPayOrder()}
         </div>
     )
 }