瀏覽代碼

undo formwizard

CR013B2
Jason Chuang 4 週之前
父節點
當前提交
03cdae0bb2
共有 3 個文件被更改,包括 85 次插入189 次删除
  1. +21
    -45
      src/pages/authentication/auth-forms/BusCustomFormWizard.js
  2. +30
    -57
      src/pages/authentication/auth-forms/CustomFormWizard.js
  3. +34
    -87
      src/pages/authentication/auth-forms/IAmSmartFormWizard.js

+ 21
- 45
src/pages/authentication/auth-forms/BusCustomFormWizard.js 查看文件

@@ -183,21 +183,17 @@ const BusCustomFormWizard = (props) => {
} }
}, [checkDistrictBlur]) }, [checkDistrictBlur])


const handleCheckDistrict = () => {
const handleCheckDistrict = async () => {
setDistrictErrStr(""); setDistrictErrStr("");

if (selectedAddress5?.type === "hongKong") { if (selectedAddress5?.type === "hongKong") {
if (!selectedAddress4 || Object.keys(selectedAddress4).length === 0) {
setCheckDistrict(true);
setDistrictErrStr(getRequiredErrStr("district"));
return false;
if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {}){
setCheckDistrict(true)
setDistrictErrStr(getRequiredErrStr("district"))
}else {
setCheckDistrict(false)
} }
} }

setCheckDistrict(false);
return true;
};

}


function getRequiredErrStr(fieldname){ function getRequiredErrStr(fieldname){
return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""})); return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""}));
@@ -221,12 +217,8 @@ const BusCustomFormWizard = (props) => {
} }


const checkDataField = (data) => { const checkDataField = (data) => {
const districtValid =
selectedAddress5?.type !== "hongKong" ||
(selectedAddress4 && Object.keys(selectedAddress4).length > 0);


const valid =
// console.log(data.brExpiryDate)
if (
handleCaptcha(data.captchaField) && handleCaptcha(data.captchaField) &&
data.username !== "" && data.username !== "" &&
data.password !== "" && data.password !== "" &&
@@ -250,15 +242,19 @@ const BusCustomFormWizard = (props) => {
handlePhone(data.phone) && handlePhone(data.phone) &&
handleUserName(data.username) && handleUserName(data.username) &&
handleBrNo(data.brNo) && handleBrNo(data.brNo) &&
districtValid &&
!checkUsername &&
!checkEmail;

setisValid(valid);
handleCheckDistrict()&&
!checkUsername&&
!checkEmail&&
!checkDistrict
) {
setisValid(true)
return isValid
} else {
setisValid(false)
return isValid
}
}; };




const handleCheckBoxChange = (event) => { const handleCheckBoxChange = (event) => {
// console.log(event.target) // console.log(event.target)
if (event.target.name == 'termsAndConAccept') { if (event.target.name == 'termsAndConAccept') {
@@ -362,18 +358,7 @@ const BusCustomFormWizard = (props) => {


const { handleSubmit } = useForm({}) const { handleSubmit } = useForm({})
const _onSubmit = () => { const _onSubmit = () => {
if (!handleCheckDistrict()) {
setLoding(false);
return;
}

if (!isValid) {
setLoding(false);
return;
}

setLoding(true); setLoding(true);

values.address4 = selectedAddress4==null?"":selectedAddress4.type values.address4 = selectedAddress4==null?"":selectedAddress4.type
values.address5 = selectedAddress5.type values.address5 = selectedAddress5.type
// console.log(values) // console.log(values)
@@ -623,15 +608,6 @@ const BusCustomFormWizard = (props) => {
checkDataField(values) checkDataField(values)
}, [values]) }, [values])


useEffect(() => {
if (
selectedAddress5?.type === "hongKong" &&
values?.captchaField?.length === 5
) {
handleCheckDistrict();
}
}, [values?.captchaField, selectedAddress5, selectedAddress4]);

return ( return (
<FormikProvider value={formik}> <FormikProvider value={formik}>
<form onSubmit={handleSubmit(_onSubmit)}> <form onSubmit={handleSubmit(_onSubmit)}>
@@ -1109,7 +1085,7 @@ const BusCustomFormWizard = (props) => {
setCheckCountry(true) setCheckCountry(true)
} }
}} }}
sx={{
sx={{
'& .MuiInputBase-root': { alignItems: 'center' }, '& .MuiInputBase-root': { alignItems: 'center' },
'& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' }, '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },
'& .MuiOutlinedInput-root': { height: 40 } '& .MuiOutlinedInput-root': { height: 40 }


+ 30
- 57
src/pages/authentication/auth-forms/CustomFormWizard.js 查看文件

@@ -197,21 +197,17 @@ const CustomFormWizard = (props) => {
} }
} }
const handleCheckDistrict = () => {
const handleCheckDistrict = async () => {
setDistrictErrStr(""); setDistrictErrStr("");

if (selectedAddress5?.type === "hongKong") { if (selectedAddress5?.type === "hongKong") {
if (!selectedAddress4 || Object.keys(selectedAddress4).length === 0) {
setCheckDistrict(true);
setDistrictErrStr(getRequiredErrStr("district"));
return false;
if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {}){
setCheckDistrict(true)
setDistrictErrStr(getRequiredErrStr("district"))
}else {
setCheckDistrict(false)
} }
} }

setCheckDistrict(false);
return true;
};

}


useEffect(() => { useEffect(() => {
if (username) { if (username) {
@@ -317,43 +313,46 @@ const CustomFormWizard = (props) => {
} }


const checkDataField = (data) => { const checkDataField = (data) => {
const districtValid =
selectedAddress5?.type !== "hongKong" ||
(selectedAddress4 && Object.keys(selectedAddress4).length > 0);


const valid =
// console.log(data)
if (
handleCaptcha(data.captchaField) && handleCaptcha(data.captchaField) &&
data.username !== "" && data.username !== "" &&
data.password !== "" && data.password !== "" &&
data.confirmPassword !== "" && data.confirmPassword !== "" &&
data.password === data.confirmPassword &&
data.password == data.confirmPassword &&
selectedIdDocType.type !== "" && selectedIdDocType.type !== "" &&
data.idNo !== "" && data.idNo !== "" &&
// (data.enName !== "" || selectedIdDocType.type === "CNID") &&
// data.chName !== "" &&
handleName(data.enName, data.chName) && handleName(data.enName, data.chName) &&
data.address1 !== "" && data.address1 !== "" &&
data.email !== "" && data.email !== "" &&
data.emailConfirm !== "" && data.emailConfirm !== "" &&
data.email === data.emailConfirm &&
data.email == data.emailConfirm &&
data.phone !== "" && data.phone !== "" &&
data.phoneCountryCode !== "" && data.phoneCountryCode !== "" &&
termsAndConAccept === true &&
termsAndConAccept == true &&
fileList.length !== 0 && fileList.length !== 0 &&
// data.captchaField &&
handlePassword(data.password) && handlePassword(data.password) &&
handleEmail(data.email) && handleEmail(data.email) &&
handleIdNo(data.idNo, selectedIdDocType.type, data.checkDigit) && handleIdNo(data.idNo, selectedIdDocType.type, data.checkDigit) &&
handlePhone(data.phone) && handlePhone(data.phone) &&
handleUsername(data.username) && handleUsername(data.username) &&
districtValid &&
handleCheckDistrict()&&
!checkUsername && !checkUsername &&
!checkEmail && !checkEmail &&
!checkIdDocNumber;

setisValid(valid);
!checkIdDocNumber&&
!checkDistrict
) {
setisValid(true)
return isValid
} else {
setisValid(false)
return isValid
}
}; };




const handleCheckBoxChange = (event) => { const handleCheckBoxChange = (event) => {
if (event.target.name == 'termsAndConAccept') { if (event.target.name == 'termsAndConAccept') {
setTermsAndConAccept(event.target.checked) setTermsAndConAccept(event.target.checked)
@@ -450,28 +449,14 @@ const CustomFormWizard = (props) => {
// }, [selectedAddress4, selectedAddress5]) // }, [selectedAddress4, selectedAddress5])


useEffect(() => { useEffect(() => {
if (props.step == 2) {
handleCheckDistrict();
_onSubmit();
}
if (captchaImg == "") onCaptchaChange();
checkDataField(values);
}, [props.step]);

props.step == 2 ? _onSubmit() : null;
if (captchaImg == "")
onCaptchaChange();
checkDataField(values)
}, [props.step])


const { handleSubmit } = useForm({}) const { handleSubmit } = useForm({})
const _onSubmit = () => { const _onSubmit = () => {
// hard stop
if (!handleCheckDistrict()) {
setLoding(false);
return;
}

if (!isValid) {
setLoding(false);
return;
}

setLoding(true); setLoding(true);
values.idDocType = selectedIdDocType.type values.idDocType = selectedIdDocType.type
values.address4 = selectedAddress4 == null ? "" : selectedAddress4.type values.address4 = selectedAddress4 == null ? "" : selectedAddress4.type
@@ -853,15 +838,6 @@ const CustomFormWizard = (props) => {


const { values } = formik const { values } = formik


useEffect(() => {
if (
selectedAddress5?.type === "hongKong" &&
values?.captchaField?.length === 5
) {
handleCheckDistrict();
}
}, [values?.captchaField, selectedAddress5, selectedAddress4]);

useEffect(() => { useEffect(() => {
checkDataField(values) checkDataField(values)
}, [values]) }, [values])
@@ -1428,9 +1404,6 @@ const CustomFormWizard = (props) => {
getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""} getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
onChange={(event, newValue) => { onChange={(event, newValue) => {
setSelectedAddress4(newValue); setSelectedAddress4(newValue);

setCheckDistrict(false);
setDistrictErrStr("");
}} }}
sx={{ sx={{
'& .MuiInputBase-root': { alignItems: 'center' }, '& .MuiInputBase-root': { alignItems: 'center' },


+ 34
- 87
src/pages/authentication/auth-forms/IAmSmartFormWizard.js 查看文件

@@ -86,15 +86,6 @@ const CustomFormWizard = (props) => {
responseToData(); responseToData();
}, []); }, []);


useEffect(() => {
if (
selectedAddress5?.type === "hongKong" &&
values?.captchaField?.length === 5
) {
handleCheckDistrict();
}
}, [values?.captchaField, selectedAddress5, selectedAddress4]);

const handleClickShowId = () => { const handleClickShowId = () => {
setshowId(!showId); setshowId(!showId);
}; };
@@ -126,22 +117,17 @@ const CustomFormWizard = (props) => {
} }
}, [checkDistrictBlur]) }, [checkDistrictBlur])


const handleCheckDistrict = () => {
const handleCheckDistrict = async () => {
setDistrictErrStr(""); setDistrictErrStr("");

if (selectedAddress5?.type === "hongKong") { if (selectedAddress5?.type === "hongKong") {
if (!selectedAddress4 || Object.keys(selectedAddress4).length === 0) {
setCheckDistrict(true);
setDistrictErrStr(getRequiredErrStr("district"));
return false;
if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {}){
setCheckDistrict(true)
setDistrictErrStr(getRequiredErrStr("district"))
}else {
setCheckDistrict(false)
} }
} }

setCheckDistrict(false);
return true;
};


}


function getRequiredErrStr(fieldname) { function getRequiredErrStr(fieldname) {
return displayErrorMsg(intl.formatMessage({ id: 'require' }, { fieldname: fieldname ? intl.formatMessage({ id: fieldname }) : "" })); return displayErrorMsg(intl.formatMessage({ id: 'require' }, { fieldname: fieldname ? intl.formatMessage({ id: fieldname }) : "" }));
@@ -222,16 +208,13 @@ const CustomFormWizard = (props) => {


const handleCheckEmail = async () => { const handleCheckEmail = async () => {
if (values?.email) { if (values?.email) {
if (handleEmail(values.email)) {
const response = await axios.post(`${POST_USER_EMAIL}`, {
e1: values.email,
});
setCheckEmail((Number(response.data[0]) === 1));
return Number(response.data[0]) === 1;
}
const response = await axios.post(`${POST_USER_EMAIL}`, {
e1: values.email,
})
setCheckEmail((Number(response.data[0]) === 1))
return Number(response.data[0]) === 1
} }
};

}


useEffect(() => { useEffect(() => {
if (email) { if (email) {
@@ -261,10 +244,6 @@ const CustomFormWizard = (props) => {
formik.setFieldValue("address1", iAmSmartData.address1 ?? ""); formik.setFieldValue("address1", iAmSmartData.address1 ?? "");
props.setIdNo(iAmSmartData.idNo ?? ""); props.setIdNo(iAmSmartData.idNo ?? "");
setLodingData(false) setLodingData(false)

if (iAmSmartData.email) {
handleCheckEmail();
}
} }
}, [iAmSmartData]) }, [iAmSmartData])


@@ -283,30 +262,29 @@ const CustomFormWizard = (props) => {




const checkDataField = (data) => { const checkDataField = (data) => {
const districtValid =
selectedAddress5?.type !== "hongKong" ||
(selectedAddress4 && Object.keys(selectedAddress4).length > 0);


const valid =
data.address1 !== "" &&
if (data.address1 !== "" &&
data.email !== "" && data.email !== "" &&
data.emailConfirm !== "" && data.emailConfirm !== "" &&
data.email === data.emailConfirm &&
data.email == data.emailConfirm &&
data.phone !== "" && data.phone !== "" &&
data.phoneCountryCode !== "" && data.phoneCountryCode !== "" &&
termsAndConAccept === true &&
termsAndConAccept == true &&
data.captchaField && data.captchaField &&
handleEmail(data.email) && handleEmail(data.email) &&
handlePhone(data.phone) && handlePhone(data.phone) &&
handleCaptcha(data.captchaField) && handleCaptcha(data.captchaField) &&
districtValid &&
!checkEmail;

setisValid(valid);
handleCheckDistrict()&&
!checkEmail&&
!checkDistrict
) {
setisValid(true)
return isValid
} else {
setisValid(false)
return isValid
}
}; };



const handleCheckBoxChange = (event) => { const handleCheckBoxChange = (event) => {
if (event.target.name == 'termsAndConAccept') { if (event.target.name == 'termsAndConAccept') {
setTermsAndConAccept(event.target.checked) setTermsAndConAccept(event.target.checked)
@@ -329,30 +307,14 @@ const CustomFormWizard = (props) => {
termsAndConAccept, termsAndConNotAccept]) termsAndConAccept, termsAndConNotAccept])


useEffect(() => { useEffect(() => {
if (props.step == 2) {
handleCheckDistrict();
_onSubmit();
}
if (captchaImg == "") onCaptchaChange();
checkDataField(values);
}, [props.step]);
props.step == 2 ? _onSubmit() : null;
if (captchaImg == "")
onCaptchaChange();
checkDataField(values)
}, [props.step])


const { handleSubmit } = useForm({}) const { handleSubmit } = useForm({})
const _onSubmit = async () => {
// hard stop: district
if (!handleCheckDistrict()) {
setLoding(false);
return;
}

await handleCheckEmail();

// hard stop: overall validation (now includes fresh email result)
if (!isValid) {
setLoding(false);
return;
}

const _onSubmit = () => {
setLoding(true); setLoding(true);


const userAddress = { const userAddress = {
@@ -486,15 +448,6 @@ const CustomFormWizard = (props) => {
checkDataField(values) checkDataField(values)
}, [values]) }, [values])


useEffect(() => {
if (
selectedAddress5?.type === "hongKong" &&
values?.captchaField?.length === 5
) {
handleCheckDistrict();
}
}, [values?.captchaField, selectedAddress5, selectedAddress4]);

return ( return (
isLoadingData ? isLoadingData ?
<LoadingComponent /> : <LoadingComponent /> :
@@ -661,16 +614,13 @@ const CustomFormWizard = (props) => {
getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""} getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
onChange={(event, newValue) => { onChange={(event, newValue) => {
setSelectedAddress4(newValue); setSelectedAddress4(newValue);

setCheckDistrict(false);
setDistrictErrStr("");
}} }}
sx={{ sx={{
'& .MuiInputBase-root': { alignItems: 'center' }, '& .MuiInputBase-root': { alignItems: 'center' },
'& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' }, '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },
'& .MuiOutlinedInput-root': { height: 40 } '& .MuiOutlinedInput-root': { height: 40 }
}} }}
renderInput={(params) => <TextField error={checkDistrict} {...params} placeholder={intl.formatMessage({ id: 'region' })}
renderInput={(params) => <TextField error={checkDistrict} {...params} placeholder={intl.formatMessage({ id: 'region' })}
/>} />}
/> />
<Autocomplete <Autocomplete
@@ -750,10 +700,7 @@ const CustomFormWizard = (props) => {
type="email" type="email"
value={formik.values.email.trim()} value={formik.values.email.trim()}
name="email" name="email"
onChange={(e) => {
setCheckEmail(false);
formik.handleChange(e);
}}
onChange={formik.handleChange}
placeholder={intl.formatMessage({ id: 'userContactEmail' })} placeholder={intl.formatMessage({ id: 'userContactEmail' })}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{


Loading…
取消
儲存