From b3bf86ddecdf728bc6080faabcc0c317b98cfb7e Mon Sep 17 00:00:00 2001 From: anna Date: Tue, 20 Feb 2024 15:28:18 +0800 Subject: [PATCH] max i18n label --- .../auth-forms/BusCustomFormWizard.js | 46 ++++- .../auth-forms/CustomFormWizard.js | 4 +- .../auth-forms/IAmSmartFormWizard.js | 192 ++++++++++-------- 3 files changed, 148 insertions(+), 94 deletions(-) diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js index 13de4e4..04c1d0e 100644 --- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js +++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js @@ -100,6 +100,7 @@ const BusCustomFormWizard = (props) => { const email = document.getElementById("email-login") const [checkEmail, setCheckEmail] = useState(false) const [checkEmailBlur, setCheckEmailBlur] = useState(false) + const [districtErrStr, setDistrictErrStr] = useState("") const address4ComboList = ComboData.district; const address5ComboList = ComboData.country; @@ -171,6 +172,22 @@ const BusCustomFormWizard = (props) => { } }, [checkEmailBlur]) + useEffect(()=>{ + setDistrictErrStr(""); + if(selectedAddress5?.type === "hongKong"){ + if(selectedAddress4 ==null || selectedAddress4 == ""|| selectedAddress4 == {}) + setDistrictErrStr(getRequiredErrStr("district")) + } + },[selectedAddress4, selectedAddress5]) + + function getRequiredErrStr(fieldname){ + return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""})); + } + + function getMaxErrStr(num, fieldname){ + return displayErrorMsg(intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""})); + } + const onCaptchaChange = () => { HttpUtils.post({ url: POST_CAPTCHA, @@ -497,17 +514,17 @@ const BusCustomFormWizard = (props) => { }), 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'}))), + enName: yup.string().max(40,getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({id: 'userRequireEnglishName'}))), enCompanyName: yup.string().matches(/^[^$^*()]+$/, { message: displayErrorMsg('No special characters $/^/*/(/)') }).when('chCompanyName', { is: (chCompanyName) => !chCompanyName || chCompanyName.length === 0, then: yup.string().required(displayErrorMsg('Please enter either English or Chinese name')), @@ -517,11 +534,11 @@ const BusCustomFormWizard = (props) => { then: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'validateEngOrChiName'}))), }), chName: yup.string().max(255).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'}))), + address1: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))), + address2: yup.string().max(40, getMaxErrStr(40)), + address3: yup.string().max(40, getMaxErrStr(40)), + email: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255, 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'}))), phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))), faxCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))), phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))), @@ -529,7 +546,7 @@ const BusCustomFormWizard = (props) => { brExpiryDate: yup.date().min(new Date().toISOString().split("T")[0], displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))) .max("2099-12-31", displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))). required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))), - brNo: yup.string().max(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'}))).test('checkBrNoFormat', displayErrorMsg(`${intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'})} (e.g. 12341234)`), function (value) { + brNo: yup.string().max(8, getMaxErrStr(8)).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'}))).test('checkBrNoFormat', displayErrorMsg(`${intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'})} (e.g. 12341234)`), function (value) { // var brNo_pattern = /[0-9]{8}-[0-9]{3}-(0[1-9]|1[012])-[0-9]{2}-[0-9A-Z]{1}/ var brNo_pattern = /[0-9]{8}/ if (value !== undefined) { @@ -540,7 +557,7 @@ const BusCustomFormWizard = (props) => { } } }), - captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')) + captchaField: yup.string().max(5, getMaxErrStr(5)).required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')) }, ['enCompanyName', 'chCompanyName']), }); @@ -942,6 +959,7 @@ const BusCustomFormWizard = (props) => { id="address2-signup" value={formik.values.address2} name="address2" + onBlur={formik.handleBlur} onChange={formik.handleChange} placeholder={intl.formatMessage({id: 'addressLine2'})} inputProps={{ @@ -958,6 +976,7 @@ const BusCustomFormWizard = (props) => { id="address3-signup" value={formik.values.address3} name="address3" + onBlur={formik.handleBlur} onChange={formik.handleChange} placeholder={intl.formatMessage({id: 'addressLine3'})} inputProps={{ @@ -974,6 +993,8 @@ const BusCustomFormWizard = (props) => { value={selectedAddress4} options={address4ComboList} disabled={checkCountry} + error={Boolean(districtErrStr!="")} + onBlur={formik.handleBlur} getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""} onChange={(event, newValue) => { setSelectedAddress4(newValue); @@ -1023,6 +1044,11 @@ const BusCustomFormWizard = (props) => { {formik.errors.address3} )} + {districtErrStr!= "" && ( + + {districtErrStr} + + )} diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index 6e88e2d..22b5922 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -648,7 +648,7 @@ const CustomFormWizard = (props) => { // faxCountryCode: yup.string().min(3,'請輸入3位數字'), phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast8Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))), // fax: yup.string().min(8,'請輸入8位數字'), - captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')), + captchaField: yup.string().max(5, getMaxErrStr(5)).required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')), }), }); @@ -1199,7 +1199,7 @@ const CustomFormWizard = (props) => { value={selectedAddress4} options={ComboData.district} disabled={checkCountry} - error={Boolean(districtErrStr)} + error={Boolean(districtErrStr!="")} onBlur={formik.handleBlur} getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""} onChange={(event, newValue) => { diff --git a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js index dba69f3..51f452c 100644 --- a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js +++ b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js @@ -38,7 +38,7 @@ import * as HttpUtils from "../../../utils/HttpUtils"; import LoopIcon from '@mui/icons-material/Loop'; import { useTheme } from '@mui/material/styles'; import { useLocation } from "react-router-dom"; -import {FormattedMessage, useIntl} from "react-intl"; +import { FormattedMessage, useIntl } from "react-intl"; // ============================|| FIREBASE - REGISTER ||============================ // @@ -63,6 +63,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 address4ComboList = ComboData.district; const address5ComboList = ComboData.country; @@ -78,11 +79,28 @@ const CustomFormWizard = (props) => { useEffect(() => { location.state?.responseData ?? {} - if(captchaImg=="") - onCaptchaChange(); + if (captchaImg == "") + onCaptchaChange(); responseToData(); }, []); + useEffect(() => { + setDistrictErrStr(""); + if (selectedAddress5?.type === "hongKong") { + if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {}) + setDistrictErrStr(getRequiredErrStr("district")) + } + }, [selectedAddress4, selectedAddress5]) + + function getRequiredErrStr(fieldname){ + return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""})); + } + + function getMaxErrStr(num, fieldname){ + return displayErrorMsg(intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""})); + } + + const responseToData = () => { //let rd = JSON.parse("{\"emailAddress\":\"test@gmail.com\",\"postalAddress\":{\"EngPremisesAddress\":{\"EngDistrict\":{\"DcDistrict\":\"KC\",\"Sub-district\":\"TSING YI\"},\"EngEstate\":{\"EstateName\":\"Cheung Hang Estate\",\"EngPhase\":{\"PhaseName\":\"N/A\"}},\"BuildingName\":\"Hang Lai House\",\"EngBlock\":{\"BlockDescriptor\":\"Block\",\"BlockNo\":\"2\"},\"Region\":\"NT\",\"EngStreet\":{\"StreetName\":\"Liu To Road\",\"BuildingNoFrom\":\"6\"},\"Eng3dAddress\":{\"EngFloor\":{\"FloorNum\":\"33\"},\"EngUnit\":{\"UnitDescriptor\":\"Room\",\"UnitNo\":\"3301\"}}}},\"mobileNumber\":{\"CountryCode\":\"852\",\"SubscriberNumber\":\"99999999\"},\"residentialAddress\":{\"ChiPremisesAddress\":{\"Chi3dAddress\":{\"ChiUnit\":{\"UnitDescriptor\":\"室\",\"UnitNo\":\"1010\"},\"ChiFloor\":{\"FloorNum\":\"10\"}},\"ChiBlock\":{\"BlockDescriptor\":\"座\",\"BlockNo\":\"2\"},\"BuildingName\":\"亨麗樓(第2座)\",\"ChiDistrict\":{\"DcDistrict\":\"KC\",\"Sub-district\":\"青衣\"},\"Region\":\"新界\",\"ChiEstate\":{\"EstateName\":\"長亨邨\"},\"ChiStreet\":{\"StreetName\":\"寮肚路\",\"BuildingNoFrom\":\"6\"}}},\"enName\":{\"UnstructuredName\":\"Testing Co One\"},\"idNo\":{\"Identification\":\"G561107\",\"CheckDigit\":\"4\"},\"chName\":{\"ChineseName\":\"測試商一\"}}"); let rd = JSON.parse(location.state?.responseData.data); @@ -91,7 +109,7 @@ const CustomFormWizard = (props) => { "chName": rd?.chName?.ChineseName ?? "", "idNo": rd?.idNo?.Identification ?? "", "checkDigit": rd?.idNo?.CheckDigit ?? "", - "email": rd?.emailAddress ?? "", + "email": rd?.emailAddress ?? "", "phone": rd?.mobileNumber?.SubscriberNumber ?? "", "phoneCountryCode": rd?.mobileNumber?.CountryCode ?? "", }; @@ -136,7 +154,7 @@ const CustomFormWizard = (props) => { let buildingName = pAdd.BuildingName ?? ""; let estate = pAdd.ChiEstate?.EstateName ?? ""; let district = pAdd.ChiDistrict["Sub - district"] ?? ""; - return getAddressStr([district, street, estate, buildingName, street, floor, block, unit ]); + return getAddressStr([district, street, estate, buildingName, street, floor, block, unit]); } const getAddressStr = (strs) => { @@ -180,22 +198,22 @@ const CustomFormWizard = (props) => { useEffect(() => { if (iAmSmartData) { - formik.setFieldValue("enName", iAmSmartData.enName??""); - formik.setFieldValue("chName", iAmSmartData.chName??""); - formik.setFieldValue("idNo", iAmSmartData.idNo??""); - formik.setFieldValue("checkDigit", iAmSmartData.checkDigit??""); - formik.setFieldValue("email", iAmSmartData.email??""); - formik.setFieldValue("phone", iAmSmartData.phone??""); - formik.setFieldValue("phoneCountryCode", iAmSmartData.phoneCountryCode??""); - formik.setFieldValue("address1", iAmSmartData.address1??""); - props.setIdNo(iAmSmartData.idNo??""); + formik.setFieldValue("enName", iAmSmartData.enName ?? ""); + formik.setFieldValue("chName", iAmSmartData.chName ?? ""); + formik.setFieldValue("idNo", iAmSmartData.idNo ?? ""); + formik.setFieldValue("checkDigit", iAmSmartData.checkDigit ?? ""); + formik.setFieldValue("email", iAmSmartData.email ?? ""); + formik.setFieldValue("phone", iAmSmartData.phone ?? ""); + formik.setFieldValue("phoneCountryCode", iAmSmartData.phoneCountryCode ?? ""); + formik.setFieldValue("address1", iAmSmartData.address1 ?? ""); + props.setIdNo(iAmSmartData.idNo ?? ""); } }, [iAmSmartData]) const onCaptchaChange = () => { HttpUtils.post({ url: POST_CAPTCHA, - params: { width: 130, height: 40, captcha: captchaImg}, + params: { width: 130, height: 40, captcha: captchaImg }, onSuccess: (responseData) => { props.setBase64Url(responseData.base64Url) localStorage.setItem("base64Url", responseData.base64Url); @@ -250,8 +268,8 @@ const CustomFormWizard = (props) => { useEffect(() => { props.step == 2 ? _onSubmit() : null; - if(captchaImg=="") - onCaptchaChange(); + if (captchaImg == "") + onCaptchaChange(); checkDataField(values) }, [props.step]) @@ -350,27 +368,27 @@ const CustomFormWizard = (props) => { const formik = useFormik({ initialValues: ({ - email: iAmSmartData.email??"", - emailConfirm: iAmSmartData.email??"", - address1: iAmSmartData.address1??"", + email: iAmSmartData.email ?? "", + emailConfirm: iAmSmartData.email ?? "", + address1: iAmSmartData.address1 ?? "", address2: '', address3: '', - phone: iAmSmartData.phone??"", - phoneCountryCode: iAmSmartData.phoneCountryCode??"852", + phone: iAmSmartData.phone ?? "", + phoneCountryCode: iAmSmartData.phoneCountryCode ?? "852", submit: null, fax: '', faxCountryCode: '852', captchaField: '' }), validationSchema: yup.object().shape({ - 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'}))), - phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))), - phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))), - captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')), + address1: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))), + address2: yup.string().max(40), + address3: yup.string().max(40), + 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' }))), + phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast2Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))), + phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast8Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))), + captchaField: yup.string().max(5, getMaxErrStr(5)).required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')), }), }); @@ -393,12 +411,12 @@ const CustomFormWizard = (props) => {
- + iAM Smart
- 。 + 。 iAM Smart: 表示該項由「智方便」提供。 @@ -409,7 +427,7 @@ const CustomFormWizard = (props) => { - + @@ -418,7 +436,7 @@ const CustomFormWizard = (props) => { - 香港身份證: {iAmSmartData.idNo+"("+iAmSmartData.checkDigit+")"} + 香港身份證: {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"} @@ -428,7 +446,7 @@ const CustomFormWizard = (props) => { - : {iAmSmartData.enName} + : {iAmSmartData.enName} @@ -438,7 +456,7 @@ const CustomFormWizard = (props) => { - {intl.formatMessage({id: 'userChineseName'})}: {iAmSmartData.chName} + {intl.formatMessage({ id: 'userChineseName' })}: {iAmSmartData.chName} @@ -447,9 +465,9 @@ const CustomFormWizard = (props) => { - + * - {iAmSmartData.address1?iAM Smart:null} + {iAmSmartData.address1 ? iAM Smart : null} { value={formik.values.address1} name="address1" onChange={formik.handleChange} - placeholder={intl.formatMessage({id: 'addressLine1'})} + placeholder={intl.formatMessage({ id: 'addressLine1' })} onBlur={formik.handleBlur} inputProps={{ onKeyDown: (e) => { @@ -475,8 +493,9 @@ const CustomFormWizard = (props) => { id="address2-signup" value={formik.values.address2} name="address2" + onBlur={formik.handleBlur} onChange={formik.handleChange} - placeholder={intl.formatMessage({id: 'addressLine2'})} + placeholder={intl.formatMessage({ id: 'addressLine2' })} inputProps={{ onKeyDown: (e) => { if (e.key === 'Enter') { @@ -491,8 +510,9 @@ const CustomFormWizard = (props) => { id="address3-signup" value={formik.values.address3} name="address3" + onBlur={formik.handleBlur} onChange={formik.handleChange} - placeholder={intl.formatMessage({id: 'addressLine3'})} + placeholder={intl.formatMessage({ id: 'addressLine3' })} inputProps={{ onKeyDown: (e) => { if (e.key === 'Enter') { @@ -507,12 +527,14 @@ const CustomFormWizard = (props) => { value={selectedAddress4} options={address4ComboList} disabled={checkCountry} - getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""} + error={Boolean(districtErrStr!="")} + onBlur={formik.handleBlur} + getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""} onChange={(event, newValue) => { setSelectedAddress4(newValue); }} sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} - renderInput={(params) => } /> { id="address5-combo" value={selectedAddress5} options={address5ComboList} - getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""} + getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""} onChange={(event, newValue) => { if (newValue !== null) { setSelectedAddress5(newValue); @@ -537,7 +559,7 @@ const CustomFormWizard = (props) => { }} sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} - renderInput={(params) => } + renderInput={(params) => } /> {formik.touched.address1 && formik.errors.address1 && ( @@ -554,12 +576,18 @@ const CustomFormWizard = (props) => { {formik.errors.address3} )} + + {districtErrStr != "" && ( + + {districtErrStr} + + )} - + @@ -569,9 +597,9 @@ const CustomFormWizard = (props) => { - + * - {iAmSmartData.email?iAM Smart:null} + {iAmSmartData.email ? iAM Smart : null} { value={formik.values.email.trim()} name="email" onChange={formik.handleChange} - placeholder={intl.formatMessage({id: 'userContactEmail'})} + placeholder={intl.formatMessage({ id: 'userContactEmail' })} onBlur={formik.handleBlur} inputProps={{ onKeyDown: (e) => { @@ -599,7 +627,7 @@ const CustomFormWizard = (props) => { )} {checkEmail && ( - + )} @@ -608,7 +636,7 @@ const CustomFormWizard = (props) => { - + * @@ -621,7 +649,7 @@ const CustomFormWizard = (props) => { name="emailConfirm" // onBlur={formik.handleBlur} onChange={formik.handleChange} - placeholder={intl.formatMessage({id: 'confirmEmail'})} + placeholder={intl.formatMessage({ id: 'confirmEmail' })} onBlur={formik.handleBlur} inputProps={{ onKeyDown: (e) => { @@ -648,9 +676,9 @@ const CustomFormWizard = (props) => { - + * - {iAmSmartData.phone?iAM Smart:null} + {iAmSmartData.phone ? iAM Smart : null} @@ -668,7 +696,7 @@ const CustomFormWizard = (props) => { } formik.setFieldValue("phoneCountryCode", value); }} - placeholder={intl.formatMessage({id: 'dialingCode'})} + placeholder={intl.formatMessage({ id: 'dialingCode' })} error={Boolean(formik.touched.phone && formik.errors.phone)} onBlur={formik.handleBlur} inputProps={{ @@ -695,7 +723,7 @@ const CustomFormWizard = (props) => { } formik.setFieldValue("phone", value); }} - placeholder={intl.formatMessage({id: 'userContactNumber'})} + placeholder={intl.formatMessage({ id: 'userContactNumber' })} error={Boolean(formik.touched.phone && formik.errors.phone)} onBlur={formik.handleBlur} inputProps={{ @@ -724,7 +752,7 @@ const CustomFormWizard = (props) => { - + @@ -742,7 +770,7 @@ const CustomFormWizard = (props) => { } formik.setFieldValue("faxCountryCode", value); }} - placeholder={intl.formatMessage({id: 'dialingCode'})} + placeholder={intl.formatMessage({ id: 'dialingCode' })} onBlur={formik.handleBlur} inputProps={{ maxLength: 3, @@ -768,7 +796,7 @@ const CustomFormWizard = (props) => { } formik.setFieldValue("fax", value); }} - placeholder={intl.formatMessage({id: 'userFaxNumber'})} + placeholder={intl.formatMessage({ id: 'userFaxNumber' })} inputProps={{ maxLength: 8, onKeyDown: (e) => { @@ -791,7 +819,7 @@ const CustomFormWizard = (props) => { - + * @@ -816,7 +844,7 @@ const CustomFormWizard = (props) => { size="small" /> - + @@ -832,7 +860,7 @@ const CustomFormWizard = (props) => { size="small" /> - + @@ -846,7 +874,7 @@ const CustomFormWizard = (props) => { - + * @@ -894,7 +922,7 @@ const CustomFormWizard = (props) => {
- +
@@ -904,7 +932,7 @@ const CustomFormWizard = (props) => { - + {/* Already have an account? @@ -914,10 +942,10 @@ const CustomFormWizard = (props) => { - + - {formik.values.idNo+"("+formik.values.checkDigit+")"} + {formik.values.idNo + "(" + formik.values.checkDigit + ")"} @@ -925,7 +953,7 @@ const CustomFormWizard = (props) => { - : + : {formik.values.enName} @@ -935,7 +963,7 @@ const CustomFormWizard = (props) => { - : + : {formik.values.chName} @@ -945,7 +973,7 @@ const CustomFormWizard = (props) => { - : + : @@ -964,19 +992,19 @@ const CustomFormWizard = (props) => { {selectedAddress5.type === "hongKong" ? - : + : - {!selectedAddress4? "" : intl.formatMessage({id: selectedAddress4.type})} + {!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })} : null} - : + : - {intl.formatMessage({id: selectedAddress5.type})} + {intl.formatMessage({ id: selectedAddress5.type })} @@ -985,14 +1013,14 @@ const CustomFormWizard = (props) => { - + - : + : {formik.values.email} @@ -1002,7 +1030,7 @@ const CustomFormWizard = (props) => { - : + : +{formik.values.phoneCountryCode} {formik.values.phone} @@ -1013,7 +1041,7 @@ const CustomFormWizard = (props) => { - : + : +{formik.values.faxCountryCode} {formik.values.fax} @@ -1036,13 +1064,13 @@ const CustomFormWizard = (props) => { - + - + : @@ -1054,7 +1082,7 @@ const CustomFormWizard = (props) => { }