| @@ -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 } | ||||
| @@ -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' }, | ||||
| @@ -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={{ | ||||