diff --git a/src/pages/User/ChangePasswordPage/index.js b/src/pages/User/ChangePasswordPage/index.js index 0868bd0..b9b6367 100644 --- a/src/pages/User/ChangePasswordPage/index.js +++ b/src/pages/User/ChangePasswordPage/index.js @@ -196,13 +196,13 @@ const Index = () => {
{isPasswordExpiry()? - + : - + @@ -370,6 +370,17 @@ const Index = () => { )} + + + + •
+ •
+ •
+ •
+ •
+ + + diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js index dcbe535..b5e08d7 100644 --- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js +++ b/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 {errorMsg} + } + 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", "") } @@ -411,10 +502,10 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { : - {formik.values.identification.slice(0, 4)} + {formik.values.identification?.slice(0, 4)} - {showId ? formik.values.identification.slice(4) : "****"}{showId ? '(' + formik.values.checkDigit + ')' : null} + {showId ? formik.values.identification?.slice(4) : "****"}{showId ? formik.values.checkDigit?'(' +formik.values.checkDigit+ ')': "()" : ""} { : editMode ? - - {FieldUtils.initField({ - valueName: "identification", - disabled: (!editMode), - form: formik - })} - + <> + + {FieldUtils.initField({ + valueName: "identification", + disabled: (!editMode), + form: formik + })} + + : - {formik.values.identification.slice(0, 4)} + {formik.values.identification?.slice(0, 4)} - {showId ? formik.values.identification.slice(4) : "****"} + {showId ? formik.values.identification?.slice(4) : "****"} { } }); + const handleCCPChange = (e) => { + e.preventDefault(); + }; + return ( isLoading || verifyState == null ? @@ -316,6 +320,9 @@ const Index = () => { value={formik.values.confirmPassword.trim()} error={Boolean(formik.touched.confirmPassword && formik.errors.confirmPassword)} onBlur={formik.handleBlur} + onCut={handleCCPChange} + onCopy={handleCCPChange} + onPaste={handleCCPChange} inputProps={{ maxLength: 50, onKeyDown: (e) => { @@ -350,6 +357,17 @@ const Index = () => { )} + + + + •
+ •
+ •
+ •
+ •
+ + +