registration form - fix district check and email check

src/pages/authentication/auth-forms/BusCustomFormWizard.js

@@ -183,17 +183,21 @@ const BusCustomFormWizard = (props) => {
         }
     }, [checkDistrictBlur])
 
-    const handleCheckDistrict = async () => {
+    const handleCheckDistrict = () => {
         setDistrictErrStr("");
+
         if (selectedAddress5?.type === "hongKong") {
-            if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {}){
-                setCheckDistrict(true) 
-                setDistrictErrStr(getRequiredErrStr("district"))
-            }else {
-                setCheckDistrict(false)
+            if (!selectedAddress4 || Object.keys(selectedAddress4).length === 0) {
+                setCheckDistrict(true);
+                setDistrictErrStr(getRequiredErrStr("district"));
+                return false;
             }
         }
-    }
+
+        setCheckDistrict(false);
+        return true;
+    };
+
 
     function getRequiredErrStr(fieldname){
         return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""}));
@@ -217,8 +221,12 @@ const BusCustomFormWizard = (props) => {
     }
 
     const checkDataField = (data) => {
-        // console.log(data.brExpiryDate)
-        if (
+        const districtValid =
+            selectedAddress5?.type !== "hongKong" ||
+            (selectedAddress4 && Object.keys(selectedAddress4).length > 0);
+
+
+        const valid =
             handleCaptcha(data.captchaField) &&
             data.username !== "" &&
             data.password !== "" &&
@@ -242,19 +250,15 @@ const BusCustomFormWizard = (props) => {
             handlePhone(data.phone) &&
             handleUserName(data.username) &&
             handleBrNo(data.brNo) &&
-            handleCheckDistrict()&&
-            !checkUsername&&
-            !checkEmail&&
-            !checkDistrict
-        ) {
-            setisValid(true)
-            return isValid
-        } else {
-            setisValid(false)
-            return isValid
-        }
+            districtValid &&
+            !checkUsername &&
+            !checkEmail;
+
+        setisValid(valid);
     };
 
+
+
     const handleCheckBoxChange = (event) => {
         // console.log(event.target)
         if (event.target.name == 'termsAndConAccept') {
@@ -358,7 +362,18 @@ 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)
@@ -608,6 +623,15 @@ 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)}>

src/pages/authentication/auth-forms/CustomFormWizard.js

@@ -197,17 +197,21 @@ const CustomFormWizard = (props) => {
         }
     }
     
-    const handleCheckDistrict = async () => {
+    const handleCheckDistrict = () => {
         setDistrictErrStr("");
+
         if (selectedAddress5?.type === "hongKong") {
-            if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {}){
-                setCheckDistrict(true) 
-                setDistrictErrStr(getRequiredErrStr("district"))
-            }else {
-                setCheckDistrict(false)
+            if (!selectedAddress4 || Object.keys(selectedAddress4).length === 0) {
+                setCheckDistrict(true);
+                setDistrictErrStr(getRequiredErrStr("district"));
+                return false;
             }
         }
-    }
+
+        setCheckDistrict(false);
+        return true;
+    };
+
 
     useEffect(() => {
         if (username) {
@@ -313,46 +317,43 @@ const CustomFormWizard = (props) => {
     }
 
     const checkDataField = (data) => {
-        // console.log(data)
-        if (
+        const districtValid =
+            selectedAddress5?.type !== "hongKong" ||
+            (selectedAddress4 && Object.keys(selectedAddress4).length > 0);
+
+
+        const valid =
             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) &&
-            handleCheckDistrict()&&
+            districtValid &&
             !checkUsername &&
             !checkEmail &&
-            !checkIdDocNumber&&
-            !checkDistrict
-        ) {
-            setisValid(true)
-            return isValid
-        } else {
-            setisValid(false)
-            return isValid
-        }
+            !checkIdDocNumber;
+
+        setisValid(valid);
     };
 
+
+
     const handleCheckBoxChange = (event) => {
         if (event.target.name == 'termsAndConAccept') {
             setTermsAndConAccept(event.target.checked)
@@ -449,14 +450,28 @@ const CustomFormWizard = (props) => {
     // }, [selectedAddress4, selectedAddress5])
 
     useEffect(() => {
-        props.step == 2 ? _onSubmit() : null;
-        if (captchaImg == "")
-            onCaptchaChange();
-        checkDataField(values)
-    }, [props.step])
+        if (props.step == 2) {
+            handleCheckDistrict();
+            _onSubmit();
+        }
+        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
@@ -838,6 +853,15 @@ const CustomFormWizard = (props) => {
 
     const { values } = formik
 
+    useEffect(() => {
+        if (
+            selectedAddress5?.type === "hongKong" &&
+            values?.captchaField?.length === 5
+        ) {
+            handleCheckDistrict();
+        }
+    }, [values?.captchaField, selectedAddress5, selectedAddress4]);
+
     useEffect(() => {
         checkDataField(values)
     }, [values])
@@ -1404,6 +1428,9 @@ 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' },