update id format

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -6,7 +6,7 @@ import {
     IconButton
 } from '@mui/material';
 import MainCard from "components/MainCard";
-import { useEffect, useState, lazy } from "react";
+import { useEffect, useState, useRef, lazy } from "react";
 import * as yup from 'yup';
 
 import { useFormik } from 'formik';
@@ -35,7 +35,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 selectedIdDocInputTypeRef = useRef("");
 
     const handleClickShowId = () => {
         setshowId(!showId);
@@ -58,7 +58,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);
+            selectedIdDocInputTypeRef.current = currentUserData.idDocType;
             setOnReady(true);
         }
     }, [currentUserData]);
@@ -76,6 +76,22 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
         return <Typography variant="errorMessage1">{errorMsg}</Typography>
     }
 
+    function getIdDocTypeDisplayName(docType) {
+        if (!docType) return "";
+        switch (docType) {
+            case "HKID":
+                return "Hong Kong ID Card";
+            case "passport":
+                return "Passport";
+            case "CNID":
+                return "Mainland ID Card";
+            case "otherCert":
+                return "Professional Practice Certificate";
+            default:
+                return docType;
+        }
+    }
+
     const formik = useFormik({
         enableReinitialize: true,
         initialValues: currentUserData,
@@ -94,16 +110,16 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                 is: (verifiedBy) => verifiedBy != null,
                 then: (schema) => schema.notRequired(),
                 otherwise: (schema) => schema.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) {
+            .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputTypeRef.current}${intl.formatMessage({ id: 'noSpecialCharacter' })}`) })
+            .matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputTypeRef.current}${intl.formatMessage({ id: 'noSpace' })}`) })
+            .test('checkIDCardFormat', displayErrorMsg(`${intl.formatMessage({ id: 'requiredValid' })}${getIdDocTypeDisplayName(selectedIdDocInputTypeRef.current)}${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_passport = /^[A-Za-z0-9]{6,9}$/;
                 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) {
+                    switch (selectedIdDocInputTypeRef.current) {
                         case "HKID":
                             if (value.match(pattern_HKIDv1)) {
                                 return true
@@ -151,11 +167,10 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                 is: (verifiedBy) => verifiedBy != null,
                 then: (schema) => schema.notRequired(),
                 otherwise: (schema) => schema.max(1, getMaxErrStr(1)).nullable()
-            .matches(/^[A-Z0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpecialCharacter' })}`) })
+            .matches(/^[A-Z0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputTypeRef.current}${intl.formatMessage({ id: 'noSpecialCharacter' })}`) })
             .test('checkIDCardFormat', displayErrorMsg(`${intl.formatMessage({ id: 'requiredNumberInQuote' })}`), function (value) {
-                // console.log(selectedIdDocInputType)
                 if (value != undefined || value != null) {
-                    switch (selectedIdDocInputType) {
+                    switch (selectedIdDocInputTypeRef.current) {
                         case "HKID":
                             if (value.length == 1) {
                                 return true
@@ -172,7 +187,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                             break;
                     }
                 } else {
-                    if (selectedIdDocInputType != "HKID"){
+                    if (selectedIdDocInputTypeRef.current != "HKID"){
                         return true
                     } else {
                         return false
@@ -424,11 +439,11 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                     onChange: (event, newValue) => {
                                         if (newValue == null) {
                                             formik.setFieldValue("idDocType", "");
-                                            setSelectedIdDocInputType("");
+                                            selectedIdDocInputTypeRef.current = "";
                                             return;
                                         }
                                         formik.setFieldValue("idDocType", newValue.type);
-                                        setSelectedIdDocInputType(newValue.type);
+                                        selectedIdDocInputTypeRef.current = newValue.type;
                                         if (newValue.type !== "HKID") {
                                             formik.setFieldValue("checkDigit", "")
                                         }
@@ -511,7 +526,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                                 form: formik,
                                                                 placeholder: intl.formatMessage({ id: 'idDocNumber' }),
                                                                 inputProps: {
-                                                                    maxLength: 7,
+                                                                    maxLength: 8,
                                                                     onKeyDown: (e) => {
                                                                         if (e.key === 'Enter') {
                                                                             e.preventDefault();

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

@@ -633,7 +633,7 @@ const CustomFormWizard = (props) => {
         // var pattern = /^[A-Z][0-9]*$/;
         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_passport = /^[A-Za-z0-9]{6,9}$/;
         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,}/;
         // var space = /\s/;
@@ -808,7 +808,7 @@ const CustomFormWizard = (props) => {
                     const idDocType = selectedIdDocType.type;
                     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_passport = /^[A-Za-z0-9]{6,9}$/;
                     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) {

src/translations/en.json

@@ -346,8 +346,8 @@
   "passport": "Passport",
   "HKIDcard": "Hong Kong ID Card",
   "HKID": "Hong Kong ID Card",
-  "mainlandIDCard": "Mainland ID card",
-  "CNID": "Mainland ID card",
+  "mainlandIDCard": "Mainland ID Card",
+  "CNID": "Mainland ID Card",
   "proCert": "Professional Practice Certificate",
   "otherCert": "Professional Practice Certificate",
   "idDocType": "Document Category",