充值类型选择

src/assets/singlesvg/right-arrow.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 8 8" enable-background="new 0 0 8 8" xml:space="preserve">
+<rect x="2.95" y="1.921" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 7.6689 8.4842)" width="5.283" height="1.466"/>
+<rect x="0.024" y="3.157" width="6.375" height="1.683"/>
+<rect x="2.956" y="4.615" transform="matrix(-0.7069 0.7073 -0.7073 -0.7069 13.3369 5.1684)" width="5.284" height="1.465"/>
+</svg>

src/features/api.js

@@ -334,7 +334,7 @@ export const reqGetAccountsPayInfo=createAsyncThunk(
 export const reqPaymentOrder=createAsyncThunk(
     APP_PAYMENT_ORDER,
     async (arg,thunkAPI)=>{
-        let {user,price,goodsName,payType,GiftsID}=arg;
+        let {user,price,goodsName,payType,GiftsID,eventType}=arg;
         let params={
             url:APP_PAYMENT_ORDER,
             params:{
@@ -346,7 +346,7 @@ export const reqPaymentOrder=createAsyncThunk(
                 pay_type:payType,
                 GiftsID:GiftsID,
                 // pck:APP_CHANNEL.Channel,
-                eventType:1,
+                eventType:eventType?eventType:1,
                 AdId:user.GlobalUID,
                 userName:user.NickName,
                 userEmail:user.Email,

src/features/paySlice.js

@@ -94,6 +94,13 @@ const reducerPaymentOrder=(state,action,arg)=>{
         state.currPayOrder=data;
         if (arg.callback!=null)arg.callback();
     }
+    else
+    {
+        if (payload!=null){
+            let msg=getHttpMsg(payload);
+            toast.error(msg);
+        }
+    }
 }
 const paymentOrderStatus=(state,status,arg)=>{
     state.status.PaymentOrder=status;

src/locales/languages/en_US.json

@@ -236,6 +236,12 @@
       "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",
       "title_help": "Help"
     },
+    "paytype_select_ru": {
+      "title": "Please select method of payment",
+      "type_1": "Fast Payment System (FPS)",
+      "type_2": "Bank transfer",
+      "btn_confirm": "Confirm"
+    },
     "promotions": {
       "tips": "Participate in promotions",
       "banner_tips": "Super bonus! Get an extra {0} bonus on deposit.",

src/locales/languages/es_MX.json

@@ -233,6 +233,12 @@
       "notice": "1. El monto real debe ser consistente con el monto del pedido.\n2. Cada número de clabe solo se puede pagar una vez, de lo contrario el pago fallará",
       "title_help": "Ayuda"
     },
+    "paytype_select_ru": {
+      "title": "Por favor seleccione el método de pago",
+      "type_1": "Sistema de Pago Rápido (FPS)",
+      "type_2": "Transferencia bancaria",
+      "btn_confirm": "Confirmar"
+    },
     "promotions": {
       "tips": "Participar en promociones",
       "banner_tips": "Súper bono de bonificación, obtén un bono extra de {0} en el depósito.",

src/locales/languages/pt_BR.json

@@ -233,6 +233,12 @@
       "notice": "1. O valor real deve ser consistente com o valor do pedido.\n2. Cada número de clabe só pode ser pago uma vez, caso contrário o pagamento falhará",
       "title_help": "Ajuda"
     },
+    "paytype_select_ru": {
+      "title": "Selecione o método de pagamento",
+      "type_1": "Sistema de Pagamento Rápido (FPS)",
+      "type_2": "Transferência bancária",
+      "btn_confirm": "Confirmar"
+    },
     "promotions": {
       "tips": "Participar de promoções",
       "banner_tips": "Super bônus, ganhe um bônus extra de {0} no depósito.",

src/locales/languages/ru_RU.json

@@ -233,6 +233,12 @@
       "notice": "1. Фактическая сумма должна соответствовать сумме заказа.\n2. Каждый номер клаба может быть оплачен только один раз, в противном случае платеж не будет выполнен.",
       "title_help": "Помощь"
     },
+    "paytype_select_ru": {
+      "title": "Пожалуйста, выберите способ оплаты",
+      "type_1": "Система быстрых платежей (СБП)",
+      "type_2": "Банковский перевод",
+      "btn_confirm": "Подтвердить"
+    },
     "promotions": {
       "tips": "Участвовать в акциях",
       "banner_tips": "Супер бонус, получите дополнительный бонус {0} на депозит.",

src/locales/languages/zh_TW.json

@@ -233,6 +233,12 @@
       "notice": "1. 實際金額必須與訂單金額一致。\n2. 每個號碼只能支付一次，否則付款失敗",
       "title_help": "幫助"
     },
+    "paytype_select_ru": {
+      "title": "請選擇付款方式",
+      "type_1": "快速支付系統 (FPS)",
+      "type_2": "銀行轉帳",
+      "btn_confirm": "確認"
+    },
     "promotions": {
       "tips": "參與促銷",
       "banner_tips": "超級獎金，存款獲得額外 {0} 獎金。",

src/widgets/WDeposit/BR/BRDeposit.jsx

@@ -15,6 +15,8 @@ import RadioBtn from "@components/RadioBtn";
 import img_bonus from "@assets/pay/topup_bonus.png";
 import styled from 'styled-components/macro';
 import {stringFormat} from "@utils/helpers";
+import {APP_COUNTRY_CODE} from "@constants/app";
+import RUPaytypeSelect from "@widgets/WDeposit/RU/RUPaytypeSelect";
 const i18n=global.i18n;
 const PPBanner=styled.div`
     background: url(${img_bonus});
@@ -31,6 +33,7 @@ const BRDeposit=()=>{
     const isLogin=useSelector(isLogined);
     const [selectedPromotion,setSelectedPromotion]=useState(false);
     const showBonus=useSelector(getShowBonus);
+    const areaItem=global.getLocalAreaItem();
     const getSelectedConfig=()=>{
         let selected=null;
         if (config){
@@ -53,9 +56,22 @@ const BRDeposit=()=>{
             return;
         }
         if (orderStatus===REQ_STATUS.LOADING)return;
-        data.user=user;
-        data.callback=onGetPaymentCallback;
-        dispatch(reqPaymentOrder(data));
+        let reqOrder=()=>{
+            data.user=user;
+            data.callback=onGetPaymentCallback;
+            dispatch(reqPaymentOrder(data));
+        }
+        if (areaItem.code===APP_COUNTRY_CODE.RU){
+            if (global.ruPaytypeSelect!=null){
+                global.ruPaytypeSelect.show((eventType)=>{
+                    data.eventType=eventType;
+                    reqOrder();
+                });
+            }
+        }
+        else{
+            reqOrder();
+        }
     }
     const renderFirst=()=>{
         if (firstpay==null)return (<></>);
@@ -257,12 +273,22 @@ const BRDeposit=()=>{
             </div>
         )
     }
+    const renderPaytypeSelect=()=>{
+        if (areaItem.code===APP_COUNTRY_CODE.RU){
+            return (<RUPaytypeSelect/>)
+        }
+        else
+        {
+            return (<></>);
+        }
+    }
     return (
         <Spring type="slideUp" className={styles.container}>
             {renderFirst()}
             {renderDeposits()}
             {renderPromotions()}
             {renderDepositBtn()}
+            {renderPaytypeSelect()}
         </Spring>
     )
 }

src/widgets/WDeposit/RU/RUPaytypeSelect.jsx

@@ -0,0 +1,84 @@
+import {useEffect, useState} from "react";
+import styles from "./styles.module.scss";
+import Popup from "@components/Popup";
+import ru1 from "@assets/pay/ru/ru1.png";
+import ru2 from "@assets/pay/ru/ru2.png";
+import RadioBtn from "@components/RadioBtn";
+import {ReactComponent as RightArrow} from "@assets/singlesvg/right-arrow.svg";
+
+const i18n=global.i18n;
+
+const RUPaytypeSelect = ({})=>{
+    const [isShow, setIsShow] = useState(false);
+    // const [choiceCB, setChoiceCB] = useState(null);
+    const [eventType, setEventType] = useState("");
+    const tdata=[
+        {
+            type:"sbp",
+            title:"deposit.paytype_select_ru.type_1",
+            img:ru1
+        },
+        {
+            type:"p2p",
+            title:"deposit.paytype_select_ru.type_2",
+            img:ru2
+        }
+    ]
+    const show=(callback)=>{
+        // setChoiceCB(callback);
+        global.ruPaytypeSelect.choiceCB=callback;
+        setIsShow(true);
+    }
+    const hide=()=>{
+        setIsShow(false);
+    }
+    const onConfirm=()=>{
+        if (eventType==null||eventType==="")return;
+        if (global.ruPaytypeSelect.choiceCB!=null){
+            global.ruPaytypeSelect.choiceCB(eventType);
+        }
+        hide();
+    }
+    useEffect(()=>{
+        const ruPaytypeSelect={
+            show,
+            hide
+        };
+        global.ruPaytypeSelect=ruPaytypeSelect;
+    },[])
+    return (
+        <Popup onClose={()=>{
+            hide();
+        }} open={isShow}>
+            <div className={styles.container}>
+                <span className={styles.title}>{i18n.t("deposit.paytype_select_ru.title")}</span>
+                <div className={styles.content}>
+                    {
+                        tdata.map((item,index)=>{
+                            return (
+                                <button key={index} className={styles.item_con} onClick={()=>{
+                                    setEventType(item.type);
+                                }}>
+                                    <RadioBtn className={styles.item_radio} selected={item.type===eventType} value={item.type} onChange={(value)=>{
+                                        setEventType(value);
+                                    }} />
+                                    <div className={styles.item}>
+                                        <span>{i18n.t(item.title)}</span>
+                                        <img src={item.img}/>
+                                    </div>
+                                </button>
+                            )
+                        })
+                    }
+                </div>
+                <div className={styles.btn_con}>
+                    <button className={`button-green ${styles.btn}`} onClick={onConfirm}>
+                        {i18n.t("deposit.paytype_select_ru.btn_confirm")}
+                        <RightArrow className={styles.icon}></RightArrow>
+                    </button>
+                </div>
+            </div>
+        </Popup>
+    )
+}
+export default RUPaytypeSelect;

src/widgets/WDeposit/RU/styles.module.scss

@@ -0,0 +1,58 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 1.2rem;
+  pointer-events: auto;
+  & .title{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    color: var(--header);
+    font-weight: 600;
+    font-size: 1.2rem;
+  }
+  & .content{
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+    padding: 0.5rem 2rem;
+    color: var(--header);
+    font-size: 1rem;
+    font-weight: 500;
+    & .item_con{
+      display: flex;
+      flex-direction: row;
+      gap: 0.5rem;
+      text-align: left;
+      & .item_radio{
+        margin-top: 0.1rem;
+      }
+      & .item{
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        img{
+          width: 12rem;
+          height: auto;
+        }
+      }
+    }
+  }
+  & .btn_con{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-top: 1rem;
+    padding:0rem 4rem;
+    & .btn{
+      gap: 0.5rem;
+      & .icon{
+        width: 1rem;
+        height: 1rem;
+        fill: #fff;
+      }
+    }
+  }
+}

src/widgets/WDeposit/WRechargeHistory/WRechargeHistory.jsx

@@ -15,6 +15,7 @@ import Popup from "@components/Popup";
 import {ReactComponent as SuccssLogo} from '@assets/singlesvg/succss.svg';
 import {ReactComponent as PendingLogo} from '@assets/singlesvg/pending.svg';
 import {ReactComponent as FailedLogo} from '@assets/singlesvg/failed.svg';
+import {APP_COUNTRY_CODE} from "@constants/app";
 
 const i18n=global.i18n;
 const WRechargeHistory = ({ close }) => {
@@ -23,9 +24,16 @@ const WRechargeHistory = ({ close }) => {
     const dispatch=useDispatch();
     const [showDetails,setShowDetails]=useState(false);
     const [detailInfo,setDetailInfo]=useState(null);
+    const areaItem=global.getLocalAreaItem();
     useEffect(()=>{
         dispatch(reqPayOrderList());
     },[])
+    const checkShowPixLogo=()=>{
+        if (areaItem.code===APP_COUNTRY_CODE.BR){
+            return true;
+        }
+        return false;
+    }
     const renderContent=()=>{
         if (status===REQ_STATUS.LOADING){
             return (<SmallLoading></SmallLoading>)
@@ -58,11 +66,15 @@ const WRechargeHistory = ({ close }) => {
                                 setShowDetails(true);
                             }}>
                                 <div className={styles.item}>
-                                    <div className={`${styles.pay_type_con} ${styles.title}`}>
-                                        <PixLogo className={styles.logo}></PixLogo>
-                                        PIX
-                                    </div>
-                                    <div className={styles.title}>{global.DOLLAR+amount}</div>
+                                    {
+                                        checkShowPixLogo()? (
+                                            <div className={`${styles.pay_type_con} ${styles.title}`}>
+                                                <PixLogo className={styles.logo}></PixLogo>
+                                                PIX
+                                            </div>
+                                        ):(<></>)
+                                    }
+                                    <div className={styles.title}>{global.DOLLAR + amount}</div>
                                 </div>
                                 <div className={styles.item}>
                                     <div>{time}</div>

src/widgets/WWithdraw/WWithdrawRecord/WWithdrawRecord.jsx

@@ -15,6 +15,7 @@ import {ReactComponent as PendingLogo} from '@assets/singlesvg/pending.svg';
 import {ReactComponent as FailedLogo} from '@assets/singlesvg/failed.svg';
 import {ReactComponent as PixLogo} from '@assets/singlesvg/pix.svg';
 import {reqWithdrawRecord} from "@features/api";
+import {APP_COUNTRY_CODE} from "@constants/app";
 const i18n=global.i18n;
 const stateType = {
     ERROR: -1,                  // 订单错误
@@ -31,9 +32,16 @@ const WWithdrawRecord=({close})=>{
     const [showDetails,setShowDetails]=useState(false);
     const [detailInfo,setDetailInfo]=useState(null);
     const dispatch =useDispatch();
+    const areaItem=global.getLocalAreaItem();
     useEffect(()=>{
         dispatch(reqWithdrawRecord())
     },[])
+    const checkShowPixLogo=()=>{
+        if (areaItem.code===APP_COUNTRY_CODE.BR){
+            return true;
+        }
+        return false;
+    }
     const getStateTxt=(state)=>{
         state=parseInt(state);
         switch(state) {
@@ -110,10 +118,14 @@ const WWithdrawRecord=({close})=>{
                                 setShowDetails(true);
                             }}>
                                 <div className={styles.item}>
-                                    <div className={`${styles.pay_type_con} ${styles.title}`}>
-                                        <PixLogo className={styles.logo}></PixLogo>
-                                        PIX
-                                    </div>
+                                    {
+                                        checkShowPixLogo()? (
+                                            <div className={`${styles.pay_type_con} ${styles.title}`}>
+                                                <PixLogo className={styles.logo}></PixLogo>
+                                                PIX
+                                            </div>
+                                        ):(<></>)
+                                    }
                                     <div className={styles.title}>
                                         {amount_str}
                                     </div>