From 5e0b21da6135ad33725a378dd0cfd5aa8a5e0c4f 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 ed2ac05..e57d60d 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'; @@ -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 {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, @@ -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(); diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index 4d624b3..b353357 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/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) { diff --git a/src/translations/en.json b/src/translations/en.json index c347d31..f91dbfd 100644 --- a/src/translations/en.json +++ b/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",