| @@ -183,21 +183,17 @@ const BusCustomFormWizard = (props) => { | |||
| } | |||
| }, [checkDistrictBlur]) | |||
| const handleCheckDistrict = () => { | |||
| const handleCheckDistrict = async () => { | |||
| setDistrictErrStr(""); | |||
| 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){ | |||
| return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""})); | |||
| @@ -221,12 +217,8 @@ const BusCustomFormWizard = (props) => { | |||
| } | |||
| const checkDataField = (data) => { | |||
| const districtValid = | |||
| selectedAddress5?.type !== "hongKong" || | |||
| (selectedAddress4 && Object.keys(selectedAddress4).length > 0); | |||
| const valid = | |||
| // console.log(data.brExpiryDate) | |||
| if ( | |||
| handleCaptcha(data.captchaField) && | |||
| data.username !== "" && | |||
| data.password !== "" && | |||
| @@ -250,15 +242,19 @@ const BusCustomFormWizard = (props) => { | |||
| handlePhone(data.phone) && | |||
| handleUserName(data.username) && | |||
| handleBrNo(data.brNo) && | |||
| districtValid && | |||
| !checkUsername && | |||
| !checkEmail; | |||
| setisValid(valid); | |||
| handleCheckDistrict()&& | |||
| !checkUsername&& | |||
| !checkEmail&& | |||
| !checkDistrict | |||
| ) { | |||
| setisValid(true) | |||
| return isValid | |||
| } else { | |||
| setisValid(false) | |||
| return isValid | |||
| } | |||
| }; | |||
| const handleCheckBoxChange = (event) => { | |||
| // console.log(event.target) | |||
| if (event.target.name == 'termsAndConAccept') { | |||
| @@ -362,18 +358,7 @@ const BusCustomFormWizard = (props) => { | |||
| const { handleSubmit } = useForm({}) | |||
| const _onSubmit = () => { | |||
| if (!handleCheckDistrict()) { | |||
| setLoding(false); | |||
| return; | |||
| } | |||
| if (!isValid) { | |||
| setLoding(false); | |||
| return; | |||
| } | |||
| setLoding(true); | |||
| values.address4 = selectedAddress4==null?"":selectedAddress4.type | |||
| values.address5 = selectedAddress5.type | |||
| // console.log(values) | |||
| @@ -623,15 +608,6 @@ const BusCustomFormWizard = (props) => { | |||
| checkDataField(values) | |||
| }, [values]) | |||
| useEffect(() => { | |||
| if ( | |||
| selectedAddress5?.type === "hongKong" && | |||
| values?.captchaField?.length === 5 | |||
| ) { | |||
| handleCheckDistrict(); | |||
| } | |||
| }, [values?.captchaField, selectedAddress5, selectedAddress4]); | |||
| return ( | |||
| <FormikProvider value={formik}> | |||
| <form onSubmit={handleSubmit(_onSubmit)}> | |||
| @@ -1109,7 +1085,7 @@ const BusCustomFormWizard = (props) => { | |||
| setCheckCountry(true) | |||
| } | |||
| }} | |||
| sx={{ | |||
| sx={{ | |||
| '& .MuiInputBase-root': { alignItems: 'center' }, | |||
| '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' }, | |||
| '& .MuiOutlinedInput-root': { height: 40 } | |||
| @@ -197,21 +197,17 @@ const CustomFormWizard = (props) => { | |||
| } | |||
| } | |||
| const handleCheckDistrict = () => { | |||
| const handleCheckDistrict = async () => { | |||
| setDistrictErrStr(""); | |||
| 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(() => { | |||
| if (username) { | |||
| @@ -317,43 +313,46 @@ const CustomFormWizard = (props) => { | |||
| } | |||
| const checkDataField = (data) => { | |||
| const districtValid = | |||
| selectedAddress5?.type !== "hongKong" || | |||
| (selectedAddress4 && Object.keys(selectedAddress4).length > 0); | |||
| const valid = | |||
| // console.log(data) | |||
| if ( | |||
| handleCaptcha(data.captchaField) && | |||
| data.username !== "" && | |||
| data.password !== "" && | |||
| data.confirmPassword !== "" && | |||
| data.password === data.confirmPassword && | |||
| data.password == data.confirmPassword && | |||
| selectedIdDocType.type !== "" && | |||
| data.idNo !== "" && | |||
| // (data.enName !== "" || selectedIdDocType.type === "CNID") && | |||
| // data.chName !== "" && | |||
| handleName(data.enName, data.chName) && | |||
| data.address1 !== "" && | |||
| data.email !== "" && | |||
| data.emailConfirm !== "" && | |||
| data.email === data.emailConfirm && | |||
| data.email == data.emailConfirm && | |||
| data.phone !== "" && | |||
| data.phoneCountryCode !== "" && | |||
| termsAndConAccept === true && | |||
| termsAndConAccept == true && | |||
| fileList.length !== 0 && | |||
| // data.captchaField && | |||
| handlePassword(data.password) && | |||
| handleEmail(data.email) && | |||
| handleIdNo(data.idNo, selectedIdDocType.type, data.checkDigit) && | |||
| handlePhone(data.phone) && | |||
| handleUsername(data.username) && | |||
| districtValid && | |||
| handleCheckDistrict()&& | |||
| !checkUsername && | |||
| !checkEmail && | |||
| !checkIdDocNumber; | |||
| setisValid(valid); | |||
| !checkIdDocNumber&& | |||
| !checkDistrict | |||
| ) { | |||
| setisValid(true) | |||
| return isValid | |||
| } else { | |||
| setisValid(false) | |||
| return isValid | |||
| } | |||
| }; | |||
| const handleCheckBoxChange = (event) => { | |||
| if (event.target.name == 'termsAndConAccept') { | |||
| setTermsAndConAccept(event.target.checked) | |||
| @@ -450,28 +449,14 @@ const CustomFormWizard = (props) => { | |||
| // }, [selectedAddress4, selectedAddress5]) | |||
| 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 _onSubmit = () => { | |||
| // hard stop | |||
| if (!handleCheckDistrict()) { | |||
| setLoding(false); | |||
| return; | |||
| } | |||
| if (!isValid) { | |||
| setLoding(false); | |||
| return; | |||
| } | |||
| setLoding(true); | |||
| values.idDocType = selectedIdDocType.type | |||
| values.address4 = selectedAddress4 == null ? "" : selectedAddress4.type | |||
| @@ -853,15 +838,6 @@ const CustomFormWizard = (props) => { | |||
| const { values } = formik | |||
| useEffect(() => { | |||
| if ( | |||
| selectedAddress5?.type === "hongKong" && | |||
| values?.captchaField?.length === 5 | |||
| ) { | |||
| handleCheckDistrict(); | |||
| } | |||
| }, [values?.captchaField, selectedAddress5, selectedAddress4]); | |||
| useEffect(() => { | |||
| checkDataField(values) | |||
| }, [values]) | |||
| @@ -1428,9 +1404,6 @@ const CustomFormWizard = (props) => { | |||
| getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""} | |||
| onChange={(event, newValue) => { | |||
| setSelectedAddress4(newValue); | |||
| setCheckDistrict(false); | |||
| setDistrictErrStr(""); | |||
| }} | |||
| sx={{ | |||
| '& .MuiInputBase-root': { alignItems: 'center' }, | |||
| @@ -86,15 +86,6 @@ const CustomFormWizard = (props) => { | |||
| responseToData(); | |||
| }, []); | |||
| useEffect(() => { | |||
| if ( | |||
| selectedAddress5?.type === "hongKong" && | |||
| values?.captchaField?.length === 5 | |||
| ) { | |||
| handleCheckDistrict(); | |||
| } | |||
| }, [values?.captchaField, selectedAddress5, selectedAddress4]); | |||
| const handleClickShowId = () => { | |||
| setshowId(!showId); | |||
| }; | |||
| @@ -126,22 +117,17 @@ const CustomFormWizard = (props) => { | |||
| } | |||
| }, [checkDistrictBlur]) | |||
| const handleCheckDistrict = () => { | |||
| const handleCheckDistrict = async () => { | |||
| setDistrictErrStr(""); | |||
| 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) { | |||
| return displayErrorMsg(intl.formatMessage({ id: 'require' }, { fieldname: fieldname ? intl.formatMessage({ id: fieldname }) : "" })); | |||
| @@ -222,16 +208,13 @@ const CustomFormWizard = (props) => { | |||
| const handleCheckEmail = async () => { | |||
| 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(() => { | |||
| if (email) { | |||
| @@ -261,10 +244,6 @@ const CustomFormWizard = (props) => { | |||
| formik.setFieldValue("address1", iAmSmartData.address1 ?? ""); | |||
| props.setIdNo(iAmSmartData.idNo ?? ""); | |||
| setLodingData(false) | |||
| if (iAmSmartData.email) { | |||
| handleCheckEmail(); | |||
| } | |||
| } | |||
| }, [iAmSmartData]) | |||
| @@ -283,30 +262,29 @@ const CustomFormWizard = (props) => { | |||
| const checkDataField = (data) => { | |||
| const districtValid = | |||
| selectedAddress5?.type !== "hongKong" || | |||
| (selectedAddress4 && Object.keys(selectedAddress4).length > 0); | |||
| const valid = | |||
| data.address1 !== "" && | |||
| if (data.address1 !== "" && | |||
| data.email !== "" && | |||
| data.emailConfirm !== "" && | |||
| data.email === data.emailConfirm && | |||
| data.email == data.emailConfirm && | |||
| data.phone !== "" && | |||
| data.phoneCountryCode !== "" && | |||
| termsAndConAccept === true && | |||
| termsAndConAccept == true && | |||
| data.captchaField && | |||
| handleEmail(data.email) && | |||
| handlePhone(data.phone) && | |||
| handleCaptcha(data.captchaField) && | |||
| districtValid && | |||
| !checkEmail; | |||
| setisValid(valid); | |||
| handleCheckDistrict()&& | |||
| !checkEmail&& | |||
| !checkDistrict | |||
| ) { | |||
| setisValid(true) | |||
| return isValid | |||
| } else { | |||
| setisValid(false) | |||
| return isValid | |||
| } | |||
| }; | |||
| const handleCheckBoxChange = (event) => { | |||
| if (event.target.name == 'termsAndConAccept') { | |||
| setTermsAndConAccept(event.target.checked) | |||
| @@ -329,30 +307,14 @@ const CustomFormWizard = (props) => { | |||
| termsAndConAccept, termsAndConNotAccept]) | |||
| 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 _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); | |||
| const userAddress = { | |||
| @@ -486,15 +448,6 @@ const CustomFormWizard = (props) => { | |||
| checkDataField(values) | |||
| }, [values]) | |||
| useEffect(() => { | |||
| if ( | |||
| selectedAddress5?.type === "hongKong" && | |||
| values?.captchaField?.length === 5 | |||
| ) { | |||
| handleCheckDistrict(); | |||
| } | |||
| }, [values?.captchaField, selectedAddress5, selectedAddress4]); | |||
| return ( | |||
| isLoadingData ? | |||
| <LoadingComponent /> : | |||
| @@ -661,16 +614,13 @@ const CustomFormWizard = (props) => { | |||
| getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""} | |||
| onChange={(event, newValue) => { | |||
| setSelectedAddress4(newValue); | |||
| setCheckDistrict(false); | |||
| setDistrictErrStr(""); | |||
| }} | |||
| sx={{ | |||
| '& .MuiInputBase-root': { alignItems: 'center' }, | |||
| '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' }, | |||
| '& .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 | |||
| @@ -750,10 +700,7 @@ const CustomFormWizard = (props) => { | |||
| type="email" | |||
| value={formik.values.email.trim()} | |||
| name="email" | |||
| onChange={(e) => { | |||
| setCheckEmail(false); | |||
| formik.handleChange(e); | |||
| }} | |||
| onChange={formik.handleChange} | |||
| placeholder={intl.formatMessage({ id: 'userContactEmail' })} | |||
| onBlur={formik.handleBlur} | |||
| inputProps={{ | |||