fix cnid cannot save

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -34,6 +34,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
     const [onReady, setOnReady] = useState(false);
     const [errorMsg, setErrorMsg] = useState("");
     const [showId, setshowId] = useState(false);
+    const [selectedIdDocInputType, setSelectedIdDocInputType] = useState("");
 
     const handleClickShowId = () => {
         setshowId(!showId);
@@ -47,6 +48,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
         //if state data are ready and assign to different field
         // console.log(currentApplicationDetailData)
         if (Object.keys(currentUserData).length > 0) {
+            setSelectedIdDocInputType(currentUserData.idDocType)
             setOnReady(true);
         }
     }, [currentUserData]);
@@ -56,6 +58,14 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
         return intl.formatMessage({ id: 'noMoreThenNWords' }, { num: num, fieldname: fieldname ? intl.formatMessage({ id: fieldname }) + ": " : "" });
     }
 
+    function getRequiredErrStr(fieldname) {
+        return displayErrorMsg(intl.formatMessage({ id: 'require' }, { fieldname: fieldname ? intl.formatMessage({ id: fieldname }) : "" }));
+    }
+
+    function displayErrorMsg(errorMsg) {
+        return <Typography variant="errorMessage1">{errorMsg}</Typography>
+    }
+
     const formik = useFormik({
         enableReinitialize: true,
         initialValues: currentUserData,
@@ -69,9 +79,89 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
             addressLine2: yup.string().max(40, getMaxErrStr(40)).nullable(),
             addressLine3: yup.string().max(40, getMaxErrStr(40)).nullable(),
             emailAddress: yup.string().email(intl.formatMessage({ id: 'validEmailFormat' })).max(255).required(intl.formatMessage({ id: 'requireEmail' })),
-            identification: yup.string().min(7, intl.formatMessage({ id: 'requireIdDocNumber' })).required(intl.formatMessage({ id: 'requireIdDocNumber' })),
-            checkDigit: yup.string().max(1, getMaxErrStr(1)).required(intl.formatMessage({ id: 'requiredNumberInQuote' })).nullable(),
             idDocType: yup.string().max(255, getMaxErrStr(255)).required(intl.formatMessage({ id: 'requireIdDocType' })),
+            identification: yup.string().required(getRequiredErrStr('number'))
+            .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpecialCharacter' })}`) })
+            .matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpace' })}`) })
+            .test('checkIDCardFormat', displayErrorMsg(`${intl.formatMessage({ id: 'requiredValid' })}${selectedIdDocInputType}${intl.formatMessage({ id: 'number' })}`), function (value) {
+                var pattern_HKIDv1 = /^[A-Z]{1}[0-9]{6}$/;
+                var pattern_HKIDv2 = /^[A-Z]{2}[0-9]{6}$/;
+                var pattern_passport = /^[A-Z]{1}[0-9]{8}$/;
+                var pattern_CHID = /^[0-9]{6}(20|19)[0-9]{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])[0-9]{3}[0-9X]{1}/;
+                var pattern_otherCert = /^[A-Z]{1}[0-9]{5,}/;
+                if (value !== undefined) {
+                    switch (selectedIdDocInputType) {
+                        case "HKID":
+                            if (value.match(pattern_HKIDv1)) {
+                                return true
+                            } else if (value.match(pattern_HKIDv2)) {
+                                return true
+                            } else {
+                                return false
+                            }
+                        case "passport":
+                            if (value.match(pattern_passport)) {
+                                return true
+                            } else {
+                                return false
+                            }
+                        case "CNID":
+                            if (value.match(pattern_CHID)) {
+                                const subStr_year = value.substring(6, 10)
+                                const subStr_month = value.substring(10, 12)
+                                const subStr_date = value.substring(12, 14)
+
+                                const today = new Date()
+                                const inputDate = new Date(`${subStr_year}-${subStr_month}-${subStr_date}`)
+
+                                if (inputDate > today || inputDate === "Invalid Date" || inputDate.getFullYear().toString() !== subStr_year || (inputDate.getMonth() + 1).toString().padStart(2, "0") !== subStr_month || inputDate.getDate().toString().padStart(2, "0") !== subStr_date) {
+                                    return false
+                                } else {
+                                    return true
+                                }
+                            } else {
+                                return false
+                            }
+                        case "otherCert":
+                            if (value.match(pattern_otherCert)) {
+                                return true
+                            } else {
+                                return false
+                            }
+                        default:
+                            break;
+                    }
+                }
+            }),
+            checkDigit: yup.string().max(1, getMaxErrStr(1)).nullable()
+            .matches(/^[A-Z0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpecialCharacter' })}`) })
+            .test('checkIDCardFormat', displayErrorMsg(`${intl.formatMessage({ id: 'requiredNumberInQuote' })}`), function (value) {
+                console.log(selectedIdDocInputType)
+                if (value != undefined || value != null) {
+                    switch (selectedIdDocInputType) {
+                        case "HKID":
+                            if (value.length == 1) {
+                                return true
+                            } else {
+                                return false
+                            }
+                        case "passport":
+                            return true
+                        case "CNID":
+                            return true
+                        case "otherCert":
+                            return true
+                        default:
+                            break;
+                    }
+                } else {
+                    if (selectedIdDocInputType != "HKID"){
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }),            
             tel_countryCode: yup.string().min(3, intl.formatMessage({ id: 'require3Number' })).required(intl.formatMessage({ id: 'requireDialingCode' })),
             fax_countryCode: yup.string().min(3, intl.formatMessage({ id: 'require3Number' })),
             phoneNumber: yup.string().min(8, intl.formatMessage({ id: 'require8Number' })).required(intl.formatMessage({ id: 'requireContactNumber' })),
@@ -313,6 +403,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                             return;
                                         }
                                         formik.setFieldValue("idDocType", newValue.type);
+                                        setSelectedIdDocInputType(newValue.type);
                                         if (newValue.type !== "HKID") {
                                             formik.setFieldValue("checkDigit", "")
                                         }
@@ -414,7 +505,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                             {formik.values.identification?.slice(0, 4)}
                                                         </Typography>
                                                         <Typography variant="h5" mt={1}>
-                                                            {showId ? formik.values.identification?.slice(4) : "****"}{showId ? '(' + formik.values.checkDigit?formik.values.checkDigit:"" + ')' : ""}
+                                                            {showId ? formik.values.identification?.slice(4) : "****"}{showId ? formik.values.checkDigit?'(' +formik.values.checkDigit+ ')': "()" : ""}
                                                         </Typography>
                                                         <IconButton
                                                             aria-label="toggle id visibility"
@@ -428,20 +519,22 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                     </Stack>
                                                 :
                                                 editMode ?
-                                                    <Grid item xs={10} sm={4} md={4} lg={10}>
-                                                        {FieldUtils.initField({
-                                                            valueName: "identification",
-                                                            disabled: (!editMode),
-                                                            form: formik
-                                                        })}
-                                                    </Grid>
+                                                    <>
+                                                        <Grid item xs={10} sm={4} md={4} lg={10}>
+                                                            {FieldUtils.initField({
+                                                                valueName: "identification",
+                                                                disabled: (!editMode),
+                                                                form: formik
+                                                            })}
+                                                        </Grid>
+                                                    </>
                                                     :
                                                     <Stack direction="row">
                                                         <Typography variant="h5" mt={1}>
-                                                            {formik.values.identification.slice(0, 4)}
+                                                            {formik.values.identification?.slice(0, 4)}
                                                         </Typography>
                                                         <Typography variant="h5" mt={1}>
-                                                            {showId ? formik.values.identification.slice(4) : "****"}
+                                                            {showId ? formik.values.identification?.slice(4) : "****"}
                                                         </Typography>
                                                         <IconButton
                                                             aria-label="toggle id visibility"