|
|
@@ -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", "") |
|
|
|
} |
|
|
@@ -411,10 +502,10 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { |
|
|
|
: |
|
|
|
<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.checkDigit + ')' : null} |
|
|
|
{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" |
|
|
|