From 1260cd4800c6835f85656dcd2ce3f6832a924c6e Mon Sep 17 00:00:00 2001 From: jason Date: Tue, 28 Jul 2026 12:28:58 +0800 Subject: [PATCH] update id format --- .../UserInformationCard_Individual.js | 45 ++++++++++++------- .../auth-forms/CustomFormWizard.js | 4 +- src/translations/en.json | 4 +- 3 files changed, 34 insertions(+), 19 deletions(-) diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js index 99a13b6..6977ec0 100644 --- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js +++ b/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'; @@ -36,7 +36,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); @@ -59,7 +59,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]); @@ -77,6 +77,22 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { return {errorMsg} } + 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, @@ -95,16 +111,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 @@ -152,11 +168,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 @@ -173,7 +188,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { break; } } else { - if (selectedIdDocInputType != "HKID"){ + if (selectedIdDocInputTypeRef.current != "HKID"){ return true } else { return false @@ -425,11 +440,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", "") } @@ -512,7 +527,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(); diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index 0524bb2..5d522f8 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -641,7 +641,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/; @@ -816,7 +816,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) { diff --git a/src/translations/en.json b/src/translations/en.json index 39aa2c2..80ad1c4 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -348,8 +348,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",