|
|
@@ -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>
|
