District is mandatory for HK

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

@@ -96,6 +96,7 @@ const CustomFormWizard = (props) => {
     const email = document.getElementById("email-login")
     const [checkEmail, setCheckEmail] = useState(false)
     const [checkEmailBlur, setCheckEmailBlur] = useState(false)
+    const [districtErrStr, setDistrictErrStr] = useState("")
 
     const idDocTypeComboList = ComboData.idDocType;
     const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
@@ -291,6 +292,10 @@ const CustomFormWizard = (props) => {
         props.setUpdateValid(isValid)
     }, [isValid])
 
+    useEffect(() => {
+        props.setUpdateValid(isValid)
+    }, [isValid])
+
     useEffect(() => {
         checkDataField(values)
     }, [
@@ -298,6 +303,14 @@ const CustomFormWizard = (props) => {
         selectedAddress4, selectedAddress5,
         termsAndConAccept, termsAndConNotAccept, fileList])
 
+    useEffect(()=>{
+        setDistrictErrStr("");
+        if(selectedAddress5?.type === "hongKong"){
+            if(selectedAddress4 ==null || selectedAddress4 == ""|| selectedAddress4 == {})
+                setDistrictErrStr(getRequiredErrStr("district"))
+        }
+    },[selectedAddress4, selectedAddress5])
+
     useEffect(() => {
         props.step == 2 ? _onSubmit() : null;
         if (captchaImg == "")
@@ -528,6 +541,13 @@ const CustomFormWizard = (props) => {
         return <Typography variant="errorMessage1">{errorMsg}</Typography>
     }
 
+    function getMaxErrStr(num, fieldname){
+        return displayErrorMsg(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}):""}));
+    }
+
     const formik = useFormik({
         initialValues: ({
             username: '',
@@ -551,23 +571,23 @@ const CustomFormWizard = (props) => {
             captchaField: ''
         }),
         validationSchema: yup.object().shape({
-            username: yup.string().min(6, displayErrorMsg(intl.formatMessage({ id: 'atLeast6CharAccount' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireUsername' })))
+            username: yup.string().min(6, displayErrorMsg(intl.formatMessage({ id: 'atLeast6CharAccount' }))).max(30, getMaxErrStr(30)).required(displayErrorMsg(intl.formatMessage({ id: 'requireUsername' })))
                 .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpecialCharAccount' })) })
                 .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpaceAccount' })) }),
-            password: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'atLeast8CharPassword' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requirePassword' })))
+            password: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'atLeast8CharPassword' }))).max(60, getMaxErrStr(60)).required(displayErrorMsg(intl.formatMessage({ id: 'requirePassword' })))
                 .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpacePassword' })) })
                 .matches(/^(?=.*[a-z])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeastOneSmallLetter' })) })
                 .matches(/^(?=.*[A-Z])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeastOneCapLetter' })) })
                 .matches(/^(?=.*[0-9])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeast1Number' })) })
                 .matches(/^(?=.*[!@#%&])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeast1SpecialChar' })) }),
             confirmPassword: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'atLeast8CharPassword' }))).required(displayErrorMsg(intl.formatMessage({ id: 'pleaseConfirmPassword' }))).oneOf([yup.ref('password'), null], displayErrorMsg(intl.formatMessage({ id: 'samePassword' }))),
-            enName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireEnglishName' }))),
-            chName: yup.string().max(6).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireChineseName' }))),
-            address1: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
-            address2: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine2' }))),
-            address3: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine3' }))),
-            email: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(255).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))),
-            emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(255).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({ id: 'validSameEmail' }))),
+            enName: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireEnglishName' }))),
+            chName: yup.string().max(6, getMaxErrStr(6)).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireChineseName' }))),
+            address1: yup.string().max(40, getMaxErrStr(40, "addressLine1")).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
+            address2: yup.string().max(40, getMaxErrStr(40, "addressLine2")),
+            address3: yup.string().max(40, getMaxErrStr(40, "addressLine3")),
+            email: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))),
+            emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({ id: 'validSameEmail' }))),
             idNo: yup.string().required(displayErrorMsg(`${intl.formatMessage({ id: 'require' })}${selectedIdDocInputType}${intl.formatMessage({ id: 'number' })}`))
                 .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpecialCharacter' })}`) })
                 .matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpace' })}`) })
@@ -622,8 +642,8 @@ const CustomFormWizard = (props) => {
                         }
                     }
                 }),
-            checkDigit: yup.string().max(1).required(displayErrorMsg(intl.formatMessage({ id: 'requiredNumberInQuote' }))),
-            idDocType: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'requireIdDocType' }))),
+            checkDigit: yup.string().max(1, getMaxErrStr(1)).required(displayErrorMsg(intl.formatMessage({ id: 'requiredNumberInQuote' }))),
+            idDocType: yup.string().max(255, getMaxErrStr(255)).required(displayErrorMsg(intl.formatMessage({ id: 'requireIdDocType' }))),
             phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast2Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))),
             // faxCountryCode: yup.string().min(3,'請輸入3位數字'),
             phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast8Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))),
@@ -1146,6 +1166,7 @@ const CustomFormWizard = (props) => {
                                             value={formik.values.address2}
                                             name="address2"
                                             onChange={formik.handleChange}
+                                            onBlur={formik.handleBlur}
                                             placeholder={intl.formatMessage({ id: 'addressLine2' })}
                                             inputProps={{
                                                 onKeyDown: (e) => {
@@ -1162,6 +1183,7 @@ const CustomFormWizard = (props) => {
                                             value={formik.values.address3}
                                             name="address3"
                                             onChange={formik.handleChange}
+                                            onBlur={formik.handleBlur}
                                             placeholder={intl.formatMessage({ id: 'addressLine3' })}
                                             inputProps={{
                                                 onKeyDown: (e) => {
@@ -1177,6 +1199,8 @@ const CustomFormWizard = (props) => {
                                             value={selectedAddress4}
                                             options={ComboData.district}
                                             disabled={checkCountry}
+                                            error={Boolean(districtErrStr)}
+                                            onBlur={formik.handleBlur}
                                             getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
                                             onChange={(event, newValue) => {
                                                 setSelectedAddress4(newValue);
@@ -1228,6 +1252,11 @@ const CustomFormWizard = (props) => {
                                                 {formik.errors.address3}
                                             </FormHelperText>
                                         )}
+                                         {districtErrStr!= "" && (
+                                            <FormHelperText error >
+                                                {districtErrStr}
+                                            </FormHelperText>
+                                        )}
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
@@ -1711,7 +1740,7 @@ const CustomFormWizard = (props) => {
                                                     {formik.values.address3}
                                                 </Typography>
                                                 : null}
-                                            {selectedAddress5.label === "hongKong" ?
+                                            {selectedAddress5.type === "hongKong" ?
                                                 <Stack direction="row">
                                                     <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
                                                         <FormattedMessage id="region" />:

src/translations/en.json

@@ -28,6 +28,8 @@
   "submissionSuccess": "Application submitted successfully",
   "noMoreThen40Words": "Must not exceed 40 characters",
   "noMoreThen255Words": "Must not exceed 255 characters",
+  "noMoreThenNWords": "{fieldname} Must not exceed {num} characters",
+  "atLeastNCharAccount": "{fieldname} Please enter at least {num} digits",
 
   "MSG.registerIAmSmart": "You may click the \"iAM Smart\" button to fill the personal information automatically or enter the information manually to activate the PNSPS account now.<br/>If you want to use \"iAM Smart\" to fill the personal information, please download the \"iAM Smart\" mobile app and register as an \"iAM Smart\" user first.",
   "MSG.registerPersonal": "To complete the online application, you need to upload digital copies of identification documents.<br/>e.g. Hong Kong Identity Card, Passport, Mainland China Identity Card, Professional Practicing Certificate, etc.",
@@ -199,7 +201,7 @@
   "verifyFail": "Verification failed, please contact the relevant system administrator for assistance.",
   "validVerify": "Please enter valid verification",
   "requiredValid": "Please enter valid ",
-  "require": "Please enter ",
+  "require": "Please enter {fieldname}",
   "number": " number",
   "noSpecialCharacter": " number cannot contain special characters",
   "noSpace": " number cannot contain spaces",
@@ -209,9 +211,9 @@
   "businessRegCertValidityDate": "Business Reg Cert validity date",
   "pleaseFillInBusinessRegCertValidityDate": "Please fill in Business Reg Cert validity date",
   "formAddress": "Address",
-  "addressLine1": "First line",
-  "addressLine2": "Second line",
-  "addressLine3": "Third line",
+  "addressLine1": "First line of address",
+  "addressLine2": "Second line of address",
+  "addressLine3": "Third line of address",
   "region": "Region (only applicable to Hong Kong)",
   "validateAddressLine1": "Please enter the first line of address",
   "validateAddressLine2": "Please enter the second line of address",

src/translations/zh-CN.json

@@ -28,6 +28,8 @@
   "submissionSuccess": "申请提交成功",
   "noMoreThen40Words": "不得超过 40 个字符",
   "noMoreThen255Words": "不得超过 255 个字符",
+  "noMoreThenNWords": "{fieldname}不得超过 {num} 个字符",
+  "atLeastNCharAccount": "{fieldname}最少{num}个字符",
 
   "MSG.registerIAmSmart": "你可点击「智方便」按钮，系统会自动输入个人资料，或自行输入个人资料，以即时启动 公共启事提交及缴费系统 帐户。<br/>如欲使用「智方便」提供个人资料，请先下载「智方便」流动应用程式并登记成为「智方便」用户。",
   "MSG.registerPersonal": "需上载身份证明文件数码档案以进行网上申请。 <br/>如：香港身份证; 护照; 中国内地身份证; 专业执业证书等",
@@ -194,7 +196,7 @@
   "verify": "验证",
   "validVerify": "请输入有效验证",
   "requiredValid": "请输入有效的",
-  "require": "请输入",
+  "require": "请输入{fieldname}",
   "number": "号码",
   "noSpecialCharacter": "号码不包含特殊字符",
   "noSpace": "号码不包含空格",
@@ -204,9 +206,9 @@
   "businessRegCertValidityDate": "商业登记证有效日期",
   "pleaseFillInBusinessRegCertValidityDate": "请输入商业登记证有效日期",
   "formAddress": "地址",
-  "addressLine1": "第一行",
-  "addressLine2": "第二行",
-  "addressLine3": "第三行",
+  "addressLine1": "第一行地址",
+  "addressLine2": "第二行地址",
+  "addressLine3": "第三行地址",
   "validateAddressLine1": "请输入第一行地址",
   "validateAddressLine2": "请输入第二行地址",
   "validateAddressLine3": "请输入第三行地址",

src/translations/zh-HK.json

@@ -28,6 +28,8 @@
   "submissionSuccess": "申請提交成功",
   "noMoreThen40Words": "不得超過 40 個字符",
   "noMoreThen255Words": "不得超過 255 個字符",
+  "noMoreThenNWords": "{fieldname}不得超過 {num} 個字符",
+  "atLeastNCharAccount": "{fieldname}最少{num}個字符",
 
   "MSG.registerIAmSmart": "你可點擊「智方便」按鈕，系統會自動輸入個人資料，或自行輸入個人資料，以即時啟動 公共啟事提交及繳費系統 帳戶。<br/>如欲使用「智方便」提供個人資料，請先下載「智方便」流動應用程式並登記成為「智方便」用戶。",
   "MSG.registerPersonal": "需上載身份證明文件數碼檔案以進行網上申請。<br/>如：香港身份證; 護照; 中國內地身份證; 專業執業証書等",
@@ -199,7 +201,7 @@
   "verifyFail": "驗證失敗，請聯絡相關的系統管理員協助。",
   "validVerify": "請輸入有效驗證",
   "requiredValid": "請輸入有效的",
-  "require": "請輸入",
+  "require": "請輸入{fieldname}",
   "number": "號碼",
   "noSpecialCharacter": "號碼不包含特殊字符",
   "noSpace": "號碼不包含空格",
@@ -209,9 +211,9 @@
   "businessRegCertValidityDate": "商業登記證有效日期",
   "pleaseFillInBusinessRegCertValidityDate": "請輸入商業登記證有效日期",
   "formAddress": "地址",
-  "addressLine1": "第一行",
-  "addressLine2": "第二行",
-  "addressLine3": "第三行",
+  "addressLine1": "第一行地址",
+  "addressLine2": "第二行地址",
+  "addressLine3": "第三行地址",
   "validateAddressLine1": "請輸入第一行地址",
   "validateAddressLine2": "請輸入第二行地址",
   "validateAddressLine3": "請輸入第三行地址",