首冲修改，墨西哥充值屏蔽qr 开关openQR ，地区加入可open标记 暂时关闭俄罗斯

src/api/config.js

@@ -56,6 +56,8 @@ export const APP_ACCOUNTS_PAY_INFO=BASE_PREFIX+"api/get_accounts_pay_info";
 export const APP_PAYMENT_ORDER=BASE_PREFIX+"payment_entry/pay";
 export const APP_PAY_ORDER_LIST=BASE_PREFIX+"pay/orderList";
 export const APP_PAYMENT_ORDER_QR=BASE_PREFIX+"payment_entry/payqr";
+export const APP_FIRST_PAY_MULTI=BASE_PREFIX+"pay/first_pay_multi";
+export const APP_GET_SECOND=BASE_PREFIX+"pay/get_second";
 //pay
 //withdraw
 export const APP_WITHDRAW_TAX="api/api/withDrawTax";

src/constants/localkey.js

@@ -16,4 +16,5 @@ const LOCAL_FAVO_IDS="LOCAL_FAVO_IDS";
 const LOCAL_FAVO_DATA="LOCAL_FAVO_DATA";
 const LOCAL_AREA_ID="LOCAL_AREA_ID";
 const LOCAL_DEFAULT_COUNTRY="LOCAL_DEFAULT_COUNTRY";
-export {LOCAL_VISTOR_ID,LOCAL_USER_INFO,LOCAL_IS_LOGIN,LOCAL_SIGN,LOCAL_GAME_URL,LOCAL_CUSTOM_LOCK,LOCAL_WHEEL_RETAIN,LOCAL_WHEEL_INVITE_CODE,LOCAL_WD_PASS,LOCAL_WD_PASS_SET_TIME,LOCAL_ACTIVITY_C,LOCAL_FAVO_IDS,LOCAL_FAVO_DATA,LOCAL_GAME_INFO,LOCAL_AREA_ID,LOCAL_DEFAULT_COUNTRY};
+const LOCAL_MULTI_FIRST_GUIDE="LOCAL_MULTI_FIRST_GUIDE";
+export {LOCAL_VISTOR_ID,LOCAL_USER_INFO,LOCAL_IS_LOGIN,LOCAL_SIGN,LOCAL_GAME_URL,LOCAL_CUSTOM_LOCK,LOCAL_WHEEL_RETAIN,LOCAL_WHEEL_INVITE_CODE,LOCAL_WD_PASS,LOCAL_WD_PASS_SET_TIME,LOCAL_ACTIVITY_C,LOCAL_FAVO_IDS,LOCAL_FAVO_DATA,LOCAL_GAME_INFO,LOCAL_AREA_ID,LOCAL_DEFAULT_COUNTRY,LOCAL_MULTI_FIRST_GUIDE};

src/db/area.js

@@ -8,28 +8,32 @@ const area=[
         name:"Brasil",
         icon:img1,
         code:"br",
-        alcode:"pt-BR"
+        alcode:"pt-BR",
+        open:1
     },
     {
         id:2,
         name:"México",
         icon:img2,
         code:"mx",
-        alcode:"es-MX"
+        alcode:"es-MX",
+        open:1
     },
     {
         id:4,
         name:"Europe",
         icon:img4,
         code:"eu",
-        alcode: 'en-EU'
+        alcode: 'en-EU',
+        open:1
     },
     {
         id:3,
         name:"Россия",
         icon:img3,
         code:"ru",
-        alcode:"ru-RU"
+        alcode:"ru-RU",
+        open:0
     }
 ]
 export default area;

src/features/api.js

@@ -16,12 +16,12 @@ import {
     APP_CUSTOMER_SERVICE,
     APP_FAVO_ADD,
     APP_FAVO_GET,
-    APP_FAVO_REMOVE,
+    APP_FAVO_REMOVE, APP_FIRST_PAY_MULTI,
     APP_FIRSTPAY_CONFIG, APP_FORGET_PASS, APP_FORGET_PAY_PASS,
     APP_GAME_ACTIVITY,
     APP_GAME_CARD_INFO,
     APP_GAME_INFO,
-    APP_GAME_LIST,
+    APP_GAME_LIST, APP_GET_SECOND,
     APP_LOGIN,
     APP_LOGOUT,
     APP_MAIL_CHECK,
@@ -415,6 +415,29 @@ export const reqCPFSave=createAsyncThunk(
         return response;
     }
 )
+export const reqFirstPayMulti=createAsyncThunk(
+    APP_FIRST_PAY_MULTI,
+    async (arg,thunkAPI)=>{
+        let params={
+            url:APP_FIRST_PAY_MULTI
+        }
+        const response=await Http.get(params);
+        return response;
+    }
+)
+export const reqGetSecond=createAsyncThunk(
+    APP_GET_SECOND,
+    async (arg,thunkAPI)=>{
+        let params={
+            url:APP_GET_SECOND
+        }
+        const response=await Http.get(params);
+        if (response&&response.code===200){
+            thunkAPI.dispatch(reqGameInfo());
+        }
+        return response;
+    }
+)
 //pay
 //withdraw
 export const reqWithdrawTax=createAsyncThunk(

src/features/paySlice.js

@@ -3,8 +3,8 @@ import {REQ_STATUS} from "@api/config";
 import {
     buildReqReducer,
     reqChangePayPass, reqCPFSave,
-    reqFirstPayConfig, reqForgetPayPass,
-    reqGetAccountsPayInfo, reqMexWithdrawSetInfo,
+    reqFirstPayConfig, reqFirstPayMulti, reqForgetPayPass,
+    reqGetAccountsPayInfo, reqGetSecond, reqMexWithdrawSetInfo,
     reqPaymentOrder, reqPaymentOrderQR,
     reqPayOrderList,
     reqRechargeConfig, reqRuWithdrawSetInfo,
@@ -18,6 +18,7 @@ import {
 import {getHttpMsg} from "@utils/helpers";
 import {toast} from "react-toastify";
 const i18n=global.i18n;
+const objInfo={}
 const reducerRechargeConfig=(state,action,arg)=>{
     let payload=action.payload;
     if (payload!=null&&payload.code===200){
@@ -253,6 +254,74 @@ const reducerSaveCPF=(state,action,arg)=>{
 const saveCPFStatus=(state,status,arg)=>{
     state.status.SaveCPF=status;
 }
+//FirstPayMulti
+const clearCDTimer=()=>{
+    if (objInfo.cdTimer!=null){
+        clearInterval(objInfo.cdTimer);
+        objInfo.cdTimer=null;
+    }
+}
+const checkPayMultiLeftTime=(data)=>{
+    clearCDTimer();
+    let leftitem=data.leftitem;
+    if (leftitem!=null){
+        let timeleft=leftitem.timeleft;
+        if (timeleft>0){
+            objInfo.cdTimer=setInterval(()=>{
+                timeleft--;
+                if (timeleft<=0){
+                    global.dispatch(reqFirstPayMulti());
+                    clearCDTimer();
+                }
+                else
+                {
+                    global.dispatch(updateMultiCD(timeleft));
+                }
+            },1000);
+        }
+    }
+}
+const reducerFirstPayMulti=(state,action,arg)=>{
+    let payload=action.payload;
+    if (payload!=null&&payload.code===200){
+        let data=payload.data;
+        // data={
+        //     "leftitem":{
+        //         "gift_id": "201",
+        //         "money": "10",
+        //         "give": "10",
+        //         "favorable_price": "10",
+        //         "second_give": "5",
+        //         "timeleft":10,
+        //     },
+        //     "default": 1
+        // }
+        state.firstPayMulti=data;
+        checkPayMultiLeftTime(data);
+    }
+}
+const firstPayMultiStatus=(state,status,arg)=>{
+    state.status.FirstPayMulti=status;
+}
+const reducerGetSecond=(state,action,arg)=>{
+    let payload=action.payload;
+    if (payload!=null&&payload.code===200){
+        toast.success(i18n.t("firstPay.claim_success"));
+        state.firstPayMulti=null;
+    }
+    else
+    {
+        let msg=getHttpMsg(payload);
+        toast.error(msg);
+    }
+    if (arg&&arg.callback!=null){
+        arg.callback(payload);
+    }
+}
+const getSecondStatus=(state,status,arg)=>{
+    state.status.GetSecond=status;
+}
+//FirstPayMulti
 export const Pay=createSlice({
     name: 'pay',
     initialState: {
@@ -271,6 +340,8 @@ export const Pay=createSlice({
             ForgetPayPass:REQ_STATUS.NONE,
             SaveCPF:REQ_STATUS.NONE,
             PaymentOrderQR:REQ_STATUS.NONE,
+            FirstPayMulti:REQ_STATUS.NONE,
+            GetSecond:REQ_STATUS.NONE,
         },
         config:[],
         payconfig:null,
@@ -284,7 +355,8 @@ export const Pay=createSlice({
         withdrawRecord:null,
         changePayPassType:0,
         showBonus:false,
-        cpfFirst:false
+        cpfFirst:false,
+        firstPayMulti:null
     },
     reducers: {
         updatePayFinish:((state, action) => {
@@ -299,7 +371,15 @@ export const Pay=createSlice({
         }),
         onSliceChangeUser:((state, action) => {
             state.isInit=false;
-        })
+        }),
+        updateMultiCD:((state, action) => {
+            let payload=action.payload;
+            if (payload!=null){
+                if (state.firstPayMulti!=null&&state.firstPayMulti.leftitem!=null){
+                    state.firstPayMulti.leftitem.timeleft=payload;
+                }
+            }
+        }),
     },
     extraReducers: (builder) => {
         buildReqReducer(builder,reqRechargeConfig,reducerRechargeConfig,rechargeConfigStatus);
@@ -319,9 +399,11 @@ export const Pay=createSlice({
         buildReqReducer(builder,reqCPFSave,reducerSaveCPF,saveCPFStatus);
         buildReqReducer(builder,reqRuWithdrawSetInfo,reducerWithdrawSetInfo,withdrawSetInfoStatus);
         buildReqReducer(builder,reqPaymentOrderQR,reducerPaymentOrder,paymentOrderQRStatus);
+        buildReqReducer(builder,reqFirstPayMulti,reducerFirstPayMulti,firstPayMultiStatus);
+        buildReqReducer(builder,reqGetSecond,reducerGetSecond,getSecondStatus);
     },
 })
-export const {updatePayFinish,setChangePayPassType} = Pay.actions;
+export const {updatePayFinish,setChangePayPassType,updateMultiCD} = Pay.actions;
 export const getConfig=(state)=>{
     return state.pay.config;
 }
@@ -432,6 +514,12 @@ export const getSaveCPFStatus=(state)=>{
 export const getPaymentOrderQRStatus=(state)=>{
     return state.pay.status.PaymentOrderQR;
 }
+export const getFirstPayMulti=(state)=>{
+    return state.pay.firstPayMulti;
+}
+export const getGetSecondStatus=(state)=>{
+    return state.pay.status.GetSecond;
+}
 export default Pay.reducer;
 
 export const reqPayConfig=(dispatch,userInfo)=>{

src/locales/languages/en_US.json

@@ -746,7 +746,14 @@
     "btn_get": "Get"
   },
   "firstPay": {
-    "only_need": "Only need"
+    "only_need": "Only need",
+    "today": "Today",
+    "day_2": "2nd Day",
+    "up": "UP!",
+    "already_got": "Already got",
+    "time_left": "Time Left: {0}",
+    "label_claim": "Claim",
+    "claim_success": "Successfully received"
   },
   "maintain": {
     "content": "Para fornecer um serviço melhor, faremos a manutenção do sistema das 3:00 às 7:00 em 27 de agosto. O site não estará acessível durante esse período. Por favor, seja paciente.",

src/locales/languages/es_MX.json

@@ -733,7 +733,14 @@
     "btn_get": "Obtener"
   },
   "firstPay": {
-    "only_need": "Solo necesito"
+    "only_need": "Solo necesito",
+    "today": "Hoy",
+    "day_2": "2do día",
+    "up": "¡ARRIBA!",
+    "already_got": "Ya lo conseguí",
+    "time_left": "Tiempo restante: {0}",
+    "label_claim": "Afirmar",
+    "claim_success": "Recibido exitosamente"
   },
   "maintain": {
     "content": "Para brindar un mejor servicio, realizaremos el mantenimiento del sistema de 3 a 7 en punto el 27 de agosto. No se podrá acceder al sitio web en ese momento, espere pacientemente.",

src/locales/languages/pt_BR.json

@@ -733,7 +733,14 @@
     "btn_get": "Obter"
   },
   "firstPay": {
-    "only_need": "Só precisa"
+    "only_need": "Só precisa",
+    "today": "Hoje",
+    "day_2": "2º Dia",
+    "up": "ACIMA!",
+    "already_got": "Já consegui",
+    "time_left": "Tempo restante: {0}",
+    "label_claim": "Alegar",
+    "claim_success": "Recebido com sucesso"
   },
   "maintain": {
     "content": "Para prestar um melhor serviço, realizaremos a manutenção do sistema das 15h às 19h do dia 27 de agosto. O site não estará acessível nesse horário, aguarde pacientemente.",

src/locales/languages/ru_RU.json

@@ -733,7 +733,14 @@
     "btn_get": "Получить"
   },
   "firstPay": {
-    "only_need": "Нужно только"
+    "only_need": "Нужно только",
+    "today": "Сегодня",
+    "day_2": "2-й день",
+    "up": "ВВЕРХ!",
+    "already_got": "Уже получил",
+    "time_left": "Осталось времени: {0}",
+    "label_claim": "Требовать",
+    "claim_success": "Успешно получено"
   },
   "maintain": {
     "content": "Для обеспечения лучшего сервиса мы проведем техническое обслуживание системы 27 августа с 3 до 7 часов. В это время доступ к веб-сайту будет недоступен. Пожалуйста, наберитесь терпения.",

src/locales/languages/zh_TW.json

@@ -733,7 +733,14 @@
     "btn_get": "獲得"
   },
   "firstPay": {
-    "only_need": "只需要"
+    "only_need": "只需要",
+    "today": "今天",
+    "day_2": "第二天",
+    "up": "向上！",
+    "already_got": "已經得到了",
+    "time_left": "剩餘時間: {0}",
+    "label_claim": "领取",
+    "claim_success": "成功收到"
   },
   "maintain": {
     "content": "為了更好地服務，我們將在8.27日，3點到7點進行系統維護，屆時不能訪問網站，請耐心等待。",

src/widgets/WAreaSelect/index.jsx

@@ -45,7 +45,11 @@ const WAreaSelect = ({})=>{
                 break;
             }
         }
-        return list;
+        let nlist=[];
+        for(let i=0;i<list.length;i++){
+            if (list[i].open)nlist.push(list[i])
+        }
+        return nlist;
     }
     const onChangeArea=(value)=>{
         setCurrArea(value);

src/widgets/WFirstPay/index.jsx

@@ -1,13 +1,20 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import styles from "./styles.module.scss";
 import Modal from "@mui/material/Modal";
 import Fade from "@mui/material/Fade";
 import Grow from "@mui/material/Grow";
+import { gsap } from 'gsap';
 import {useDispatch, useSelector} from "react-redux";
-import {getCPFFirst, getOFirstPay, getPaymentOrderStatus} from "@features/paySlice";
+import {
+    getCPFFirst,
+    getFirstPayMulti,
+    getGetSecondStatus,
+    getOFirstPay,
+    getPaymentOrderStatus
+} from "@features/paySlice";
 import {ROUTE_PATH} from "@constants/routes";
 import {REQ_STATUS} from "@api/config";
-import {reqPaymentOrder} from "@features/api";
+import {reqGetSecond, reqPaymentOrder} from "@features/api";
 import {useNavigate} from "react-router-dom";
 import {getUserInfo, isLogined} from "@features/mainSlice";
 import SmallLoading from "@components/SmallLoading";
@@ -15,8 +22,13 @@ import {useThemeProvider} from "@contexts/themeContext";
 import {APP_COUNTRY_CODE, APP_WELFARE} from "@constants/app";
 import BRCPFSave from "@widgets/WDeposit/BR/BRCPFSave/BRCPFSave";
 import RUPaytypeSelect from "@widgets/WDeposit/RU/RUPaytypeSelect";
+import {formatTime, localStorageGet, localStorageSet, stringFormat} from "@utils/helpers";
+import {LOCAL_MULTI_FIRST_GUIDE} from "@constants/localkey";
 const i18n=global.i18n;
-
+const objInfo={
+    guideTimer:null,
+    tl:null
+};
 const WFirstPay=()=>{
     const [isShow, setIsShow] = useState(false);
     const firstPayConf=useSelector(getOFirstPay);
@@ -28,6 +40,11 @@ const WFirstPay=()=>{
     const isLogin=useSelector(isLogined);
     const cpfFirst=useSelector(getCPFFirst);
     const areaItem=global.getLocalAreaItem();
+    const firstPayMulti=useSelector(getFirstPayMulti);
+    const [selectIndex,setSelectIndex]=useState(0);
+    const getSecondStatus=useSelector(getGetSecondStatus);
+    const handRef=useRef(null);
+    const [showGuide,setShowGuide]=useState(false);
     const show=()=>{
         setIsShow(true);
         setWelfTabState(APP_WELFARE.FIRST_PAY);
@@ -45,6 +62,58 @@ const WFirstPay=()=>{
         return ()=>{
         }
     },[])
+    useEffect(()=>{
+        if (firstPayMulti){
+            setSelectIndex(firstPayMulti.default)
+        }
+    },[firstPayMulti])
+    useEffect(() => {
+        clearGuideTimer();
+        if (isShow){
+           checkShowGuide();
+        }
+    }, [isShow]);
+    const clearGuideTimer=()=>{
+        if (objInfo.guideTimer){
+            clearTimeout(objInfo.guideTimer);
+            objInfo.guideTimer=null;
+        }
+        if (objInfo.tl){
+            objInfo.tl.kill();
+            objInfo.tl=null;
+        }
+    }
+    const checkShowGuide=()=>{
+        let items=firstPayMulti.items;
+        let isguide=items!=null&&items.length>1;
+        let lflag=localStorageGet(LOCAL_MULTI_FIRST_GUIDE,"0");
+        if (isguide)isguide=lflag==="0";
+        setShowGuide(isguide);
+        clearGuideTimer();
+        if (isguide){
+            objInfo.guideTimer=setTimeout(()=>{
+                let target=handRef.current;
+                if (target){
+                    let tl=gsap.timeline();
+                    objInfo.tl=tl;
+                    tl.fromTo(target,{x:180,y:420,opacity:0},{x:130,y:330,opacity:1}).call(()=>{setSelectIndex(0)});
+                    tl.to(target,{x:265,y:330},"+=1").call(()=>{setSelectIndex(1)});
+                    tl.to(target,{x:130,y:330},"+=1").call(()=>{setSelectIndex(0)});
+                    tl.to(target,{x:265,y:330},"+=1").call(()=>{setSelectIndex(1)});
+                    tl.to(target,{x:180,y:420,opacity:0},"+=1").call(()=>{setShowGuide(false)})
+                }
+            },500)
+            localStorageSet(LOCAL_MULTI_FIRST_GUIDE,"1");
+        }
+    }
+    const getPayItem=()=>{
+        if (firstPayMulti){
+            let items=firstPayMulti.items;
+            if (items)return items[selectIndex];
+            else return firstPayMulti.leftitem;
+        }
+        return null;
+    }
     const onGetPaymentCallback=()=>{
         hide();
         navigate(ROUTE_PATH.PAY_ORDER);
@@ -87,69 +156,185 @@ const WFirstPay=()=>{
             reqOrder();
         }
     }
+    const getSecondCallback=(payload)=>{
+        if (payload&&payload.code===200){
+            hide();
+        }
+    }
+    const onGetSecond=()=>{
+        if (getSecondStatus===REQ_STATUS.LOADING)return;
+        let data={};
+        data.callback=getSecondCallback;
+        dispatch(reqGetSecond(data))
+    }
     const renderMain=()=>{
-        if (firstPayConf==null)return (<></>);
-        let first_pay=firstPayConf.first_pay;
+        let payItem=getPayItem();
+        if (payItem==null)return (<></>);
+        let first_pay=payItem;
         let give=0;
         let money=0;
         let total=0;
+        let second_give=0;
         let precent="";
         if (first_pay!=null){
             give=Number(first_pay.give);
             money=Number(first_pay.money);
+            second_give=Number(first_pay.second_give);
             total=give+money;
-            precent='+'+Math.floor(give*100/money)+'%';
+            precent=''+Math.floor((give+second_give)*100/money)+'%';
         }
+        let isdone=first_pay.timeleft!=null;
         return (
             <div className={styles.f_main}>
                 <img className={styles.bglight} src={require('@assets/firstPay/bglight.png')}/>
                 <div className={styles.pack_con}>
-                    <div className={styles.percent_con}>
-                        <div data-title={precent} className={styles.text}>{precent}</div>
+                    <img className={styles.pack_bg} src={require('@assets/firstPay/pack.png')}/>
+                    <div className={`${styles.bonus_con} ${styles.p_left}`}>
+                        <img className={styles.l_bg} src={require('@assets/firstPay/l_bg.png')}/>
+                        <span data-title={global.DOLLAR + total}
+                              className={styles.p_text}>{global.DOLLAR + total}</span>
+                        <span className={styles.p_label}>{i18n.t("firstPay.today")}</span>
+                    </div>
+                    <div className={`${styles.bonus_con} ${styles.p_right}`}>
+                        <img className={styles.r_bg} src={require('@assets/firstPay/r_bg.png')}/>
+                        <span data-title={global.DOLLAR + second_give}
+                              className={styles.p_text}>{global.DOLLAR + second_give}</span>
+                        <span className={styles.p_label}>{i18n.t("firstPay.day_2")}</span>
                     </div>
-                    <div className={styles.bonus_con}>
-                        <div data-title={total} className={styles.bonus}>{total}</div>
+                    {/*<div className={styles.percent_con}>*/}
+                    {/*<div data-title={precent} className={styles.text}>{precent}</div>*/}
+                    {/*</div>*/}
+                    <div className={styles.percent_con}>
+                        <div data-title={precent+" "+i18n.t("firstPay.up")} className={styles.p_text}>{precent+" "+i18n.t("firstPay.up")}</div>
                     </div>
+                    {
+                        isdone? (
+                            <div className={styles.already_con}>
+                                <img className={styles.mask} src={require('@assets/firstPay/mask.png')}/>
+                                <div className={styles.flag_con}>
+                                    <img className={styles.flag_bg} src={require('@assets/firstPay/flag.png')}/>
+                                    <div className={styles.flag_label}>{i18n.t("firstPay.already_got")}</div>
+                                </div>
+                            </div>
+                        ):(<></>)
+                    }
                 </div>
             </div>
         )
     }
-    const renderPayBtn=()=>{
-        if (firstPayConf==null)return (<></>);
-        let first_pay=firstPayConf.first_pay;
-        let money=0;
-        let payType=0;
-        if (first_pay!=null){
-            money=Number(first_pay.money);
-            let gear=first_pay.gear;
-            if (gear!=null){
-                gear=JSON.parse(gear);
+    const renderPayBtn = () => {
+        let payItem = getPayItem();
+        if (payItem == null) return (<></>);
+        let first_pay = payItem;
+        let money = 0;
+        let payType = 0;
+        if (first_pay != null) {
+            money = Number(first_pay.money);
+            payType=first_pay.id;
+            let gear = first_pay.gear;
+            if (gear != null) {
+                gear = JSON.parse(gear);
                 if (gear)gear=gear[0];
                 payType=gear.id;
             }
         }
-        return (
-            <button className={styles.f_btnpay} onClick={()=>{
-                onGetPaymentOder({
-                    price:money,
-                    goodsName:"firstpay",
-                    payType:payType,
-                    GiftsID:201
-                })
-            }}>
-                {
-                    orderStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}/>):(
-                        <>
+        let status=-1;
+        let timeleft=0;
+        if (first_pay.timeleft!=null){
+            timeleft=Number(first_pay.timeleft);
+            status=timeleft===0?1:0;
+        }
+        let label=(<></>);
+        if (status===-1){
+            label=orderStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}/>):(
+                <>
                             <span data-title={i18n.t("firstPay.only_need")}
                                   className={styles.label}>{i18n.t("firstPay.only_need")}</span>
-                            <span data-title={global.DOLLAR + money}
-                                  className={styles.pay_num}>{global.DOLLAR + money}</span>
-                        </>
-                    )
+                    <span data-title={global.DOLLAR + money}
+                          className={styles.pay_num}>{global.DOLLAR + money}</span>
+                </>
+            )
+        }
+        else if (status===0){
+            let left_str=stringFormat(i18n.t("firstPay.time_left"),[formatTime(timeleft)])
+            label=(
+                <>
+                    <span data-title={left_str}
+                          className={styles.label_time}>{left_str}</span>
+                </>
+            )
+        }
+        else if (status===1){
+            label=getSecondStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}/>):(
+                <>
+                    <span data-title={i18n.t("firstPay.label_claim")}
+                          className={styles.label}>{i18n.t("firstPay.label_claim")}</span>
+                </>
+            )
+        }
+        return (
+            <button className={styles.f_btnpay} onClick={() => {
+                if (status === -1) {
+                    onGetPaymentOder({
+                        price:money,
+                        goodsName:"firstpay",
+                        payType:payType,
+                        GiftsID:first_pay.gift_id
+                    })
+                }
+                else if (status===1)
+                {
+                    onGetSecond();
                 }
+            }}>
+                {/*{*/}
+                {/*    orderStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}/>):(*/}
+                {/*        <>*/}
+                {/*            <span data-title={i18n.t("firstPay.only_need")}*/}
+                {/*                  className={styles.label}>{i18n.t("firstPay.only_need")}</span>*/}
+                {/*            <span data-title={global.DOLLAR + money}*/}
+                {/*                  className={styles.pay_num}>{global.DOLLAR + money}</span>*/}
+                {/*        </>*/}
+                {/*    )*/}
+                {/*}*/}
+                {label}
             </button>
         )
     }
+    const renderPayTabs=()=>{
+        let items=[];
+        if (firstPayMulti){
+            items=firstPayMulti.items;
+        }
+        if (items==null||items.length<=1)return (<></>);
+        return (
+            <div className={styles.f_ptabs_con}>
+                {
+                    items.map((item,index)=>{
+                        let t_img=index===selectIndex?1:0;
+                        return (
+                            <button className={styles.tab_con} key={index} onClick={()=>{
+                                setSelectIndex(index);
+                            }}>
+                                <img className={styles.t_bg} src={require(`@assets/firstPay/tab_${t_img}.png`)}/>
+                                <div className={styles.t_label_con}>
+                                    <span data-title={global.DOLLAR + item.money} className={styles.t_text}>{global.DOLLAR+item.money}</span>
+                                </div>
+                            </button>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
+    const renderTabsGuide=()=>{
+        if (!showGuide)return (<></>);
+        return (
+            <div className={styles.f_tab_guide}>
+                <img ref={handRef} className={styles.f_hand} src={require('@assets/firstPay/guide.png')}/>
+            </div>
+        )
+    }
     const renderPaytypeSelect=()=>{
         if (areaItem.code===APP_COUNTRY_CODE.RU){
             return (<RUPaytypeSelect/>)
@@ -177,7 +362,9 @@ const WFirstPay=()=>{
                             <div className={styles.f_con}>
                                 <img className={styles.title} src={require(`@assets/firstPay/${i18n.language}.png`)}/>
                                 {renderMain()}
+                                {renderPayTabs()}
                                 {renderPayBtn()}
+                                {renderTabsGuide()}
                             </div>
                         </Grow>
                     </div>

src/widgets/WFirstPay/styles.module.scss

@@ -1,6 +1,8 @@
 $bg:"./../../assets/firstPay/pack.png";
 $btnbg:"./../../assets/firstPay/button.png";
 $pbg:"./../../assets/firstPay/percent.png";
+$l_bg:"./../../assets/firstPay/l_bg.png";
+$r_bg:"./../../assets/firstPay/r_bg.png";
 .container{
   display: flex;
   flex-direction: column;
@@ -20,7 +22,7 @@ $pbg:"./../../assets/firstPay/percent.png";
   pointer-events: auto;
   align-items: center;
   position:relative;
-  gap: 0.5rem;
+  gap: 0.7rem;
   & .title{
     max-width: 90%;
     height: auto;
@@ -51,64 +53,121 @@ $pbg:"./../../assets/firstPay/percent.png";
       z-index: 2;
       width: 100%;
       aspect-ratio: 583/442;
-      background: url($bg);
+      //background: url($bg) no-repeat;
       background-size: 100% 100%;
-      & .percent_con{
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
+      & .pack_bg{
         position: absolute;
-        z-index: 2;
-        background: url($pbg);
-        background-size: 100% 100%;
-        width: 24%;
-        aspect-ratio: 137/136;
-        right: 16%;
-        bottom: 15%;
-        transform: rotate(-10deg);
-        & .text{
-          &::before{
-            content: attr(data-title);
-            position: absolute;
-            background-image: linear-gradient(to right,#ffd63c,#ffd63c, #fdfdd1);
-            background-clip: text;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            -webkit-text-stroke: 0px #483be3;
-            font-weight: bold;
-            font-size: 1rem;
-            pointer-events: none;
-          }
+        z-index: 1;
+        left: -0.4%;
+        height: 100%;
+        width: auto;
+      }
+      & .p_text{
+        &::before{
+          content: attr(data-title);
+          position: absolute;
+          background-image: linear-gradient(to bottom,#fffd5a 0%,#fffd5a 30%,#fffdea 60%,#ffb643 70%);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          -webkit-text-stroke: 0px #483be3;
           font-weight: bold;
-          font-size: 1rem;
-          -webkit-text-stroke: 2px #483be3;
-          filter: drop-shadow(0 1px 1px #3615a0);
+          font-size: 1.7rem;
+          pointer-events: none;
         }
+        font-weight: bold;
+        font-size: 1.7rem;
+        filter: drop-shadow(0 3px 1px #120519);
+      }
+      & .p_label{
+        color: #fff448;
+        font-size: 0.7rem;
       }
       & .bonus_con{
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        z-index: 2;
+        align-items: center;
+        justify-content: center;
+      }
+      & .p_left{
+        left: 6.5%;
+        top: 50%;
+        height: 28.7%;
+        aspect-ratio: 218/127;
+        & .l_bg{
+          top: -0.1rem;
+          right: -0.3rem;
+          position: absolute;
+          z-index: -1;
+          height: 100%;
+          width: auto;
+        }
+      }
+      & .p_right{
+        right: 11%;
+        top: 46%;
+        height: 36.6%;
+        aspect-ratio: 201/162;
+        & .r_bg{
+          position: absolute;
+          z-index: -1;
+          height: 100%;
+          width: auto;
+        }
+      }
+
+      & .percent_con{
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
+        position: absolute;
+        z-index: 3;
         width: 100%;
         height: 21%;
-        & .bonus{
-          &::before{
-            content: attr(data-title);
+      }
+      & .already_con{
+        position: absolute;
+        left: 10.3%;
+        top: 51.5%;
+        z-index: 4;
+        height: 24%;
+        aspect-ratio: 172/107;
+        & .mask{
+          position: absolute;
+          z-index: 1;
+          width: 100%;
+          height: 100%;
+        }
+        & .flag_con{
+          position: absolute;
+          z-index: 2;
+          height: 97%;
+          aspect-ratio: 253/103;
+          left: -11%;
+          top: 26%;
+          & .flag_bg{
             position: absolute;
-            background-image: linear-gradient(to bottom,#fffd5a 0%,#fffd5a 30%,#fffdea 60%,#ffb643 70%);
-            background-clip: text;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            -webkit-text-stroke: 0px #483be3;
-            font-weight: bold;
-            font-size: 1.8rem;
-            pointer-events: none;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+          }
+          & .flag_label{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+            left: 1.8rem;
+            top: 0.3rem;
+            color: #FFFFFF;
+            font-weight: 600;
+            transform: rotate(-1.32deg);
           }
-          font-weight: bold;
-          font-size: 1.8rem;
-          filter: drop-shadow(0 3px 1px #120519);
         }
       }
     }
@@ -118,7 +177,7 @@ $pbg:"./../../assets/firstPay/percent.png";
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    margin-top: 0.8rem;
+    //margin-top: 0.8rem;
     width: 48%;
     aspect-ratio: 347/91;
     background: url($btnbg);
@@ -142,6 +201,24 @@ $pbg:"./../../assets/firstPay/percent.png";
         font-size: 1.1rem;
       }
     }
+    & .label_time{
+      margin-top: -0.3rem;
+      color: #fff;
+      -webkit-text-stroke: 4px #1c4014;
+      font-weight: 600;
+      font-size: 1rem;
+      &::before{
+        content: attr(data-title);
+        position: absolute;
+        background-image: linear-gradient(to bottom,#fff,#fff);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        -webkit-text-stroke: 0px #1c4014;
+        font-weight: 600;
+        font-size: 1rem;
+      }
+    }
     & .pay_num{
       margin-top: -0.3rem;
       font-size: 1.2rem;
@@ -160,6 +237,68 @@ $pbg:"./../../assets/firstPay/percent.png";
       }
     }
   }
+  & .f_ptabs_con{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    width: 61%;
+    aspect-ratio: 442/88;
+    & .tab_con{
+      position: relative;
+      height: 100%;
+      aspect-ratio: 186/88;
+      & .t_bg{
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        height: 100%;
+        width: auto;
+      }
+      & .t_label_con{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 40%;
+        right: 0;
+        bottom: 0;
+        & .t_text{
+          font-size: 1.1rem;
+          font-weight: bold;
+          color: #f4eb00;
+          -webkit-text-stroke: 4px #830662;
+          &::before{
+            content: attr(data-title);
+            position: absolute;
+            background-image: linear-gradient(to bottom,#f4eb00,#f4eb00);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            -webkit-text-stroke: 0px #830662;
+            font-weight: bold;
+            font-size: 1.1rem;
+          }
+        }
+      }
+    }
+  }
+  & .f_tab_guide{
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    & .f_hand{
+      height: 15%;
+      width: auto;
+      opacity: 0;
+    }
+  }
 }
 @keyframes bg_light_ani {
   0%{

src/widgets/WPaymentOrder/MX/MXPayOrder.jsx

@@ -212,6 +212,9 @@ const MXPayOrder = ({close}) => {
         )
     }
     const renderQRBtn=()=>{
+        let openQR=0;
+        if (orderInfo&&orderInfo.openQR!=null)openQR=orderInfo.openQR;
+        if (!openQR)return renderCustomer();
         return (
             <button className={"button-green"} onClick={() => {
                 onClickQR();

src/widgets/WWelfarebar/index.jsx

@@ -1,10 +1,10 @@
 import styles from './styles.module.scss';
 import {useEffect, useRef, useState} from "react";
-import {reqFirstPayConfig, reqProtectCheck, reqRechargeConfig} from "@features/api";
+import {reqFirstPayConfig, reqFirstPayMulti, reqProtectCheck, reqRechargeConfig} from "@features/api";
 import {useDispatch, useSelector} from "react-redux";
 import {getFirstBonus, getOpenRelief, getPopBindPhone, getUpgradeBonus, getUserInfo} from "@features/mainSlice";
 import {APP_WELFARE} from "@constants/app";
-import {getCurrPayOrder, getOFirstPay} from "@features/paySlice";
+import {getCurrPayOrder, getFirstPayMulti, getOFirstPay} from "@features/paySlice";
 import {getProtectInfo} from "@features/protectSlice";
 import {formatCash} from "@utils/helpers";
 import {useThemeProvider} from "@contexts/themeContext";
@@ -65,6 +65,7 @@ const WWelfarebar = () => {
     const starPRef=useRef(null);
     const upgradBonus=useSelector(getUpgradeBonus);
     const regCoins=formatCash(upgradBonus,0);
+    const firstPayMulti=useSelector(getFirstPayMulti);
     const getWelfTabState=(key)=>{
         if (welfTabState===key)return true;
         return false;
@@ -116,8 +117,9 @@ const WWelfarebar = () => {
         let state=0;
         if (firstBonus){
             // if (user.UserID>0){
-                if (firstPayConf!=null)state=1;
+            //     if (firstPayConf!=null)state=1;
             // }
+            if (firstPayMulti!=null)state=1;
         }
         changeNewState(APP_WELFARE.FIRST_PAY,state);
     }
@@ -125,6 +127,7 @@ const WWelfarebar = () => {
         if (orderInfo!=null){
             if (orderInfo.status==="success"){
                 dispatch(reqFirstPayConfig());
+                dispatch(reqFirstPayMulti());
             }
         }
     }
@@ -153,13 +156,17 @@ const WWelfarebar = () => {
         }
         dispatch(reqRechargeConfig());
         dispatch(reqFirstPayConfig());
+        dispatch(reqFirstPayMulti());
     },[user.UserID]);
     useEffect(() => {
         checkProtectLimit();
     }, [user.Score]);
+    // useEffect(()=>{
+    //     checkFirstPay();
+    // },[firstPayConf]);
     useEffect(()=>{
         checkFirstPay();
-    },[firstPayConf]);
+    },[firstPayMulti]);
     useEffect(()=>{
         checkBind();
     },[popBindPhone,user.Phone]);