|
|
@@ -0,0 +1,459 @@
|
|
|
+import {useDispatch, useSelector} from "react-redux";
|
|
|
+import {getUserInfo} from "@features/mainSlice";
|
|
|
+import {getWDBaseInfoStatus, getWDInfoStatus, getWDSetInfoStatus, getWithdrawInfo} from "@features/paySlice";
|
|
|
+import React, {useEffect, useRef, useState} from "react";
|
|
|
+import {reqMexWithdrawSetInfo, reqWithdrawInfo} from "@features/api";
|
|
|
+import {REQ_STATUS} from "@api/config";
|
|
|
+import styles from "./styles.module.scss";
|
|
|
+import SmallLoading from "@components/SmallLoading";
|
|
|
+import Spring from "@components/Spring";
|
|
|
+import {Controller, useForm} from "react-hook-form";
|
|
|
+import SvgIcon from "@components/SvgIcon";
|
|
|
+import {ReactComponent as Warning} from '@assets/singlesvg/warning.svg';
|
|
|
+import {useThemeProvider} from "@contexts/themeContext";
|
|
|
+import MuiDrawer from "@mui/material/Drawer";
|
|
|
+import RadioBtn from "@components/RadioBtn";
|
|
|
+import {Popover} from "@mui/material";
|
|
|
+import {validateEmail} from "@utils/helpers";
|
|
|
+
|
|
|
+const i18n=global.i18n;
|
|
|
+const MXAccountEdit=({close})=>{
|
|
|
+ const user=useSelector(getUserInfo);
|
|
|
+ const baseStatus=useSelector(getWDBaseInfoStatus);
|
|
|
+ const setStatus=useSelector(getWDSetInfoStatus);
|
|
|
+ const infoStatus=useSelector(getWDInfoStatus);
|
|
|
+ let info=useSelector(getWithdrawInfo);
|
|
|
+ let dinfo=info==null?{}:info;
|
|
|
+ const dispatch=useDispatch();
|
|
|
+ const {isMobile} = useThemeProvider();
|
|
|
+ const [showBankSelect, setShowBankSelect] = useState(false);
|
|
|
+ const [searchValue, setSearchValue] = useState("");
|
|
|
+ const {register, handleSubmit, formState: {errors}, control} = useForm({
|
|
|
+ values: {
|
|
|
+ account: dinfo.AccountsBank||"",
|
|
|
+ userName: dinfo.BankUserName||"",
|
|
|
+ bank: dinfo.BranchBank||"",
|
|
|
+ branceBank: dinfo.BranchBank||"",
|
|
|
+ phone: dinfo.PhoneNumber||"",
|
|
|
+ PAN: dinfo.PANNumber||"",
|
|
|
+ IFSC:dinfo.IFSCNumber||"",
|
|
|
+ email: dinfo.EmailAddress||"",
|
|
|
+ PixNum: dinfo.PixNum||"",
|
|
|
+ adhaar: dinfo.AdhaarNumber||"",
|
|
|
+ PixType: dinfo.PixType||"",
|
|
|
+ bankName:""
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const [bankNo, setBankNo] = useState(dinfo.BranchBank||"");
|
|
|
+ const selectRef = useRef(null);
|
|
|
+ const [showClabeHelp,setShowClabeHelp] = useState(false);
|
|
|
+ const clabeHelpRef = useRef(null);
|
|
|
+ useEffect(()=>{
|
|
|
+ dispatch(reqWithdrawInfo({UserID:user.UserID}));
|
|
|
+ },[])
|
|
|
+ useEffect(()=>{
|
|
|
+ if (info!=null){
|
|
|
+ setBankNo(info.BranchBank||"");
|
|
|
+ }
|
|
|
+ },[info])
|
|
|
+ const checkLockStatus=()=>{
|
|
|
+ if (baseStatus===REQ_STATUS.LOADING)return true;
|
|
|
+ if (setStatus===REQ_STATUS.LOADING)return true;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const validateBankCode=()=>{
|
|
|
+ let num=Number(bankNo);
|
|
|
+ return num>0;
|
|
|
+ }
|
|
|
+ const getBankNameFromCode=()=>{
|
|
|
+ let bankName="";
|
|
|
+ if (info!=null){
|
|
|
+ let bank_list=info.bank_list;
|
|
|
+ if (bank_list!=null){
|
|
|
+ let name=bank_list[bankNo];
|
|
|
+ if (name!=null)bankName=name;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return bankName;
|
|
|
+ }
|
|
|
+ const showCSelect=()=>{
|
|
|
+ setSearchValue("");
|
|
|
+ setShowBankSelect(true);
|
|
|
+ }
|
|
|
+ const hideCSelect=()=>{
|
|
|
+ setShowBankSelect(false);
|
|
|
+ }
|
|
|
+ const getBankCodeList=()=>{
|
|
|
+ let list=[];
|
|
|
+ if (info!=null){
|
|
|
+ let tempS=searchValue.toUpperCase();
|
|
|
+ let bank_list=info.bank_list;
|
|
|
+ if (bank_list!=null){
|
|
|
+ for (const key in bank_list) {
|
|
|
+ let value=bank_list[key];
|
|
|
+ if (tempS!==""){
|
|
|
+ let temp=value.replaceAll(" ","");
|
|
|
+ temp=temp.toUpperCase();
|
|
|
+ if (temp.indexOf(tempS)!==-1)list.push({code:key,value:value});
|
|
|
+ }
|
|
|
+ else list.push({code:key,value:value});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ list.sort((a, b) => {
|
|
|
+ const valueA = a.value;
|
|
|
+ const valueB = b.value;
|
|
|
+
|
|
|
+ if (valueA < valueB) {
|
|
|
+ return -1;
|
|
|
+ }
|
|
|
+ if (valueA > valueB) {
|
|
|
+ return 1;
|
|
|
+ }
|
|
|
+ return 0;
|
|
|
+ });
|
|
|
+ return list;
|
|
|
+ }
|
|
|
+ const callback=(data)=>{
|
|
|
+ if (data&&data.code===200){
|
|
|
+ // dispatch(reqWithdrawBaseInfo(callbackBase));
|
|
|
+ close();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const handleChange=(data)=>{
|
|
|
+ if (checkLockStatus())return;
|
|
|
+ data.bank=bankNo;
|
|
|
+ data.callback=callback;
|
|
|
+ dispatch(reqMexWithdrawSetInfo(data));
|
|
|
+ }
|
|
|
+ const validateMail=(value)=>{
|
|
|
+ return validateEmail(value);
|
|
|
+ }
|
|
|
+ const renderTips = () => {
|
|
|
+ return (
|
|
|
+ <div className={styles.notice_con}>
|
|
|
+ <Warning className={styles.n_icon}></Warning>
|
|
|
+ <div className={styles.notice}>
|
|
|
+ {i18n.t("withdraw.account_mx.help")}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderAccoutForm=()=>{
|
|
|
+ return (
|
|
|
+ <form autoComplete="off" className={styles.accout_form} onSubmit={handleSubmit((data) => {
|
|
|
+ handleChange(data);
|
|
|
+ })}>
|
|
|
+ <Controller control={control}
|
|
|
+ name="userName"
|
|
|
+ rules={{required: true}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
+ <div className={styles.form_item}>
|
|
|
+ <div className={styles.title}>{i18n.t("withdraw.account_mx.userName")}</div>
|
|
|
+ <div className={`input-control ${error ? 'input-control--error' : ''}`}>
|
|
|
+ <input
|
|
|
+ value={value}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('withdraw.account_mx.name_holder')}
|
|
|
+ ref={ref}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ <Controller control={control}
|
|
|
+ name="phone"
|
|
|
+ rules={{required: true}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
+ <div className={styles.form_item}>
|
|
|
+ <div className={styles.title}>{i18n.t("withdraw.account_mx.phone")}</div>
|
|
|
+ <div className={`input-control ${error ? 'input-control--error' : ''}`}>
|
|
|
+ <input
|
|
|
+ value={value}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('withdraw.account_mx.phone_holder')}
|
|
|
+ ref={ref}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ <Controller control={control}
|
|
|
+ name="email"
|
|
|
+ rules={{required: true,validate: validateMail}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
+ <div className={styles.form_item}>
|
|
|
+ <div className={styles.title}>{i18n.t("withdraw.account_mx.email")}</div>
|
|
|
+ <div className={`input-control ${error ? 'input-control--error' : ''}`}>
|
|
|
+ <input
|
|
|
+ value={value}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('withdraw.account_mx.email_holder')}
|
|
|
+ ref={ref}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ <Controller control={control}
|
|
|
+ name="account"
|
|
|
+ rules={{required: true}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
+ <div className={styles.form_item}>
|
|
|
+ <div className={styles.title}>{i18n.t("withdraw.account_mx.tedCon")}</div>
|
|
|
+ <div className={`input-control ${error ? 'input-control--error' : ''}`}>
|
|
|
+ <input
|
|
|
+ value={value}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('withdraw.account_mx.tedCon_holder')}
|
|
|
+ ref={ref}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ <Controller control={control}
|
|
|
+ name="bankName"
|
|
|
+ rules={{validate: validateBankCode}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) =>{
|
|
|
+ let bname=getBankNameFromCode();
|
|
|
+ return (
|
|
|
+ <div className={styles.form_item}>
|
|
|
+ <div className={styles.title}>{i18n.t("withdraw.account_mx.tedBan")}</div>
|
|
|
+ <button ref={selectRef} type={"button"}
|
|
|
+ className={`input-control ${styles.btn_bank} ${error ? 'input-control--error' : ''}`}
|
|
|
+ onClick={()=>{
|
|
|
+ showCSelect();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <input
|
|
|
+ disabled
|
|
|
+ value={bname}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('withdraw.account_mx.tedBan_holder')}
|
|
|
+ ref={ref}
|
|
|
+ />
|
|
|
+ <div className={styles.icon_btn}>
|
|
|
+ <SvgIcon className={styles.arrow} herf={"icon_Arrow"}></SvgIcon>
|
|
|
+ </div>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Controller control={control}
|
|
|
+ name="IFSC"
|
|
|
+ rules={{required: true}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
+ <div className={styles.form_item}>
|
|
|
+ <div className={styles.title}>{i18n.t("withdraw.account_mx.clabe")}</div>
|
|
|
+ <div ref={clabeHelpRef} className={`input-control ${error ? 'input-control--error' : ''}`}>
|
|
|
+ <input
|
|
|
+ value={value}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('withdraw.account_mx.clabe_holder')}
|
|
|
+ ref={ref}
|
|
|
+ />
|
|
|
+ <button type={"button"} className={styles.icon_btn} onClick={()=>{
|
|
|
+ setShowClabeHelp(true);
|
|
|
+ }}>
|
|
|
+ <SvgIcon className={styles.help} herf={"icon_Info"}></SvgIcon>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ {renderTips()}
|
|
|
+ <button className={`button-green ${styles.btn_save}`}>
|
|
|
+ {checkLockStatus() ? (
|
|
|
+ <SmallLoading fill={"#FFF"}></SmallLoading>) : i18n.t("withdraw.account.btn_save")}
|
|
|
+ </button>
|
|
|
+ </form>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderClabeHelp=()=>{
|
|
|
+ return (
|
|
|
+ <Popover
|
|
|
+ open={showClabeHelp}
|
|
|
+ anchorEl={clabeHelpRef.current}
|
|
|
+ onClose={()=>{
|
|
|
+ setShowClabeHelp(false);
|
|
|
+ }}
|
|
|
+ anchorOrigin={{
|
|
|
+ vertical: 'top',
|
|
|
+ horizontal: 'right',
|
|
|
+ }}
|
|
|
+ transformOrigin={{
|
|
|
+ vertical: 'bottom',
|
|
|
+ horizontal: 'right',
|
|
|
+ }}
|
|
|
+ sx={{
|
|
|
+ "& .MuiPopover-paper": {
|
|
|
+ backgroundColor:'var(--widget);',
|
|
|
+ borderRadius:'var(--border-radius);',
|
|
|
+ // width:'20rem;',
|
|
|
+ // height:'20rem;',
|
|
|
+ boxShadow:'var(--widget-shadow);',
|
|
|
+ minWidth:'17.4rem;',
|
|
|
+ minHeight:'11.8rem;'
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div className={styles.clabe_help_con}>
|
|
|
+ <span className={styles.title}>{i18n.t("withdraw.account_mx.clabe_help_title")}</span>
|
|
|
+ <div className={styles.exmp_con}>
|
|
|
+ <div className={`${styles.exmp_item} ${styles.item_1}`}>
|
|
|
+ <span>002</span>
|
|
|
+ <span>|—|</span>
|
|
|
+ </div>
|
|
|
+ <div className={`${styles.exmp_item}`}>
|
|
|
+ <span>-</span>
|
|
|
+ </div>
|
|
|
+ <div className={`${styles.exmp_item} ${styles.item_2}`}>
|
|
|
+ <span>010</span>
|
|
|
+ <span>|—|</span>
|
|
|
+ </div>
|
|
|
+ <div className={`${styles.exmp_item}`}>
|
|
|
+ <span>-</span>
|
|
|
+ </div>
|
|
|
+ <div className={`${styles.exmp_item} ${styles.item_3}`}>
|
|
|
+ <span>12345678901</span>
|
|
|
+ <span>| ————— |</span>
|
|
|
+ </div>
|
|
|
+ <div className={`${styles.exmp_item}`}>
|
|
|
+ <span>-</span>
|
|
|
+ </div>
|
|
|
+ <div className={`${styles.exmp_item} ${styles.item_4}`}>
|
|
|
+ <span>5</span>
|
|
|
+ <span>|</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span className={styles.help_1}>{i18n.t("withdraw.account_mx.clabe_help_1")}</span>
|
|
|
+ <span className={styles.help_2}>{i18n.t("withdraw.account_mx.clabe_help_2")}</span>
|
|
|
+ <span className={styles.help_3}>{i18n.t("withdraw.account_mx.clabe_help_3")}</span>
|
|
|
+ <span className={styles.help_4}>{i18n.t("withdraw.account_mx.clabe_help_4")}</span>
|
|
|
+ </div>
|
|
|
+ </Popover>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderSearch = () => {
|
|
|
+ return (
|
|
|
+ <div className={`input-control ${styles.select_search}`}>
|
|
|
+ <SvgIcon className={styles.icon} herf={"icon_Search"}></SvgIcon>
|
|
|
+ <input onChange={e => setSearchValue(e.target.value)}/>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderHeader=()=>{
|
|
|
+ return (
|
|
|
+ <div className={styles.header}>
|
|
|
+ {i18n.t("withdraw.account_mx.s_title")}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderBankCodeList=()=>{
|
|
|
+ let list=getBankCodeList();
|
|
|
+ return (
|
|
|
+ <div className={styles.select_list_con}>
|
|
|
+ {
|
|
|
+ list.map((item,index)=>{
|
|
|
+ return (
|
|
|
+ <button key={index} className={`${styles.item} ${(bankNo+"")===item.code?styles.active:''}`} onClick={()=>{
|
|
|
+ setBankNo(item.code);
|
|
|
+ hideCSelect();
|
|
|
+ }}>
|
|
|
+ <div className={styles.left}>
|
|
|
+ <span className={styles.name}>{item.value}</span>
|
|
|
+ </div>
|
|
|
+ <RadioBtn selected={(bankNo+"")===item.code} value={item.value} onChange={(value)=>{
|
|
|
+ setBankNo(item.code);
|
|
|
+ hideCSelect();
|
|
|
+ }} />
|
|
|
+ </button>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderMobileBankSelect=()=>{
|
|
|
+ return (
|
|
|
+ <MuiDrawer open={showBankSelect}
|
|
|
+ anchor={"bottom"}
|
|
|
+ sx={{
|
|
|
+ zIndex:1300,
|
|
|
+ "& .MuiDrawer-paper": {
|
|
|
+ height: "50%",
|
|
|
+ boxSizing: "border-box",
|
|
|
+ overflow: 'visible !important',
|
|
|
+ backgroundColor: 'var(--widget);',
|
|
|
+ boxShadow: 'var(--widget-shadow);',
|
|
|
+ borderTopLeftRadius: '1rem',
|
|
|
+ borderTopRightRadius: '1rem',
|
|
|
+ },
|
|
|
+ }}
|
|
|
+ variant="temporary"
|
|
|
+ onClose={() => {
|
|
|
+ setShowBankSelect(false);
|
|
|
+ }}>
|
|
|
+ <div className={`${styles.select_bank_con} ${styles.select_bank_con_m}`}>
|
|
|
+ {renderHeader()}
|
|
|
+ {renderSearch()}
|
|
|
+ {renderBankCodeList()}
|
|
|
+ </div>
|
|
|
+ </MuiDrawer>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderDeskBankSelect=()=>{
|
|
|
+ return (
|
|
|
+ <Popover
|
|
|
+ open={showBankSelect}
|
|
|
+ anchorEl={selectRef.current}
|
|
|
+ onClose={()=>{
|
|
|
+ hideCSelect();
|
|
|
+ }}
|
|
|
+ anchorOrigin={{
|
|
|
+ vertical: 45,
|
|
|
+ horizontal: 0,
|
|
|
+ }}
|
|
|
+ sx={{
|
|
|
+ "& .MuiPopover-paper": {
|
|
|
+ backgroundColor:'var(--widget);',
|
|
|
+ borderRadius:'var(--border-radius);',
|
|
|
+ width:'22rem;',
|
|
|
+ height:'20rem;',
|
|
|
+ boxShadow:'var(--widget-shadow);'
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div className={styles.select_bank_con}>
|
|
|
+ {renderSearch()}
|
|
|
+ {renderBankCodeList()}
|
|
|
+ </div>
|
|
|
+ </Popover>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderBankSelect=()=>{
|
|
|
+ if (isMobile())return renderMobileBankSelect();
|
|
|
+ else return renderDeskBankSelect();
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ {
|
|
|
+ infoStatus === REQ_STATUS.LOADING ? (
|
|
|
+ <div className={styles.loading}>
|
|
|
+ <SmallLoading/>
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <Spring type="slideUp" className={styles.container}>
|
|
|
+ {renderAccoutForm()}
|
|
|
+ {renderBankSelect()}
|
|
|
+ {renderClabeHelp()}
|
|
|
+ </Spring>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ </>
|
|
|
+ )
|
|
|
+}
|
|
|
+export default MXAccountEdit;
|
