update form

src/components/cards/AuthFooter.js

@@ -32,8 +32,8 @@ const AuthFooter = () => {
             variant="subtitle2"
             color="secondary"
             component={Link}
-            // href="https://codedthemes.com"
-            href="/testMailPage"
+            href="https://www.gld.gov.hk/zh-hk/privacy-policy/"
+            //href="/testMailPage"
             target="_blank"
             underline="hover"
           >

src/pages/Organization/DetailPage/OrganizationCard.js

@@ -52,10 +52,10 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
             addressLine1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),
             addressLine2: yup.string().max(255, displayErrorMsg("length must <= 255")),
             addressLine3: yup.string().max(255, displayErrorMsg("length must <= 255")),
-            fax_countryCode: yup.string().min(3, displayErrorMsg('請輸入國際區號')).nullable(),
-            tel_countryCode: yup.string().min(3, displayErrorMsg('請輸入國際區號')),
-            phoneNumber: yup.string().min(8, displayErrorMsg('請輸入有效聯絡電話')).required(displayErrorMsg('請輸入聯絡電話')),
-            faxNumber: yup.string().min(8, displayErrorMsg('請輸入8位數字')).nullable(),
+            fax_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))).nullable(),
+            tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
+            phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requiredValidNumber'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
+            faxNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'require8Number'}))).nullable(),
             brExpiryDate: yup.string().min(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))),
             brNo: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'}))).test('checkBrNoFormat', displayErrorMsg(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'}))), function (value) {
                 var brNo_pattern = /[0-9]{8}/

src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js

@@ -50,9 +50,9 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
             addressLine1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),
             addressLine2: yup.string().max(255).nullable(),
             addressLine3: yup.string().max(255).nullable(),
-            fax_countryCode: yup.string().min(3, displayErrorMsg("請輸入國際區號")).nullable(),
-            tel_countryCode: yup.string().min(3, displayErrorMsg("請輸入國際區號")),
-            phoneNumber: yup.string().min(8, displayErrorMsg('請輸入有效聯絡電話')).required(displayErrorMsg('請輸入聯絡電話')),
+            fax_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))).nullable(),
+            tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
+            phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requiredValidNumber'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
             faxNumber: yup.string().min(8).nullable(),
             brExpiryDate: yup.string().min(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))),
             brNo: yup.string().max(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'})))

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -53,10 +53,10 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
         initialValues: loadedData,
         validationSchema: yup.object().shape({
             contactPerson: yup.string().max(40, "不得超過 40 個字符").required('請輸入聯絡人'),
-            tel_countryCode: yup.string().min(3, '請輸入3位數字').required('請輸入國際區號'),
-            fax_countryCode: yup.string().min(3, '請輸入3位數字'),
-            phoneNumber: yup.string().min(8, '請輸入8位數字').required('請輸入聯絡電話'),
-            faxNumber: yup.string().min(8, '請輸入8位數字'),
+            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'})),
+            faxNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})),
             remarks: yup.string().max(255, "不得超過 255 個字符").nullable(),
         }),
         onSubmit: values => {

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -40,6 +40,7 @@ import DownloadIcon from '@mui/icons-material/Download';
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import * as React from "react";
+import {FormattedMessage} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = (
     { applicationDetailData,
@@ -390,7 +391,9 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">聯絡電話:</Typography></FormLabel>
+                                            <FormLabel><Typography variant="h5">
+                                                <FormattedMessage id="userContactNumber"/>:
+                                            </Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
@@ -454,7 +457,9 @@ const ApplicationDetailCard = (
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">傳真號碼:</Typography></FormLabel>
+                                        <FormLabel><Typography variant="h5">
+                                            <FormattedMessage id="userFaxNumber"/>:
+                                        </Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} sm={12} md={9} lg={9}>

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -38,19 +38,19 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
         enableReinitialize: true,
         initialValues: currentUserData,
         validationSchema: yup.object().shape({
-            enName: yup.string().max(255).required('請輸入英文姓名'),
-            chName: yup.string().max(255).required('請輸入中文姓名'),
+            enName: yup.string().max(255).required(intl.formatMessage({id: 'userRequireEnglishName'})),
+            chName: yup.string().max(255).required(intl.formatMessage({id: 'userRequireChineseName'})),
             addressLine1: yup.string().max(255).required('請輸入第一行地址'),
             addressLine2: yup.string().max(255).nullable(),
             addressLine3: yup.string().max(255).nullable(),
-            emailAddress: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'),
+            emailAddress: yup.string().email(intl.formatMessage({id: 'validEmailFormat'})).max(255).required(intl.formatMessage({id: 'requireEmail'})),
             identification: yup.string().min(7, "請輸入證件號碼").required('請輸入證件號碼'),
             checkDigit: yup.string().max(1).required('請輸入括號內的數字或字母').nullable(),
             idDocType: yup.string().max(255).required('請輸入證件類別'),
-            tel_countryCode: yup.string().min(3, '請輸入3位數字').required('請輸入國際區號'),
-            fax_countryCode: yup.string().min(3, '請輸入3位數字'),
-            phoneNumber: yup.string().min(8, '請輸入8位數字').required('請輸入聯絡電話'),
-            faxNumber: yup.string().min(8, '請輸入8位數字').nullable(),
+            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'})),
+            faxNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})).nullable(),
         }),
         onSubmit: values => {
             console.log(values);

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js

@@ -47,17 +47,17 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
         enableReinitialize: true,
         initialValues: currentUserData,
         validationSchema: yup.object().shape({
-            contactPerson: yup.string().max(255).required(displayErrorMsg('請輸入姓名')),
+            contactPerson: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireName'}))),
             enCompanyName: yup.string().max(255).required(displayErrorMsg('請輸入英文名稱')),
             chCompanyName: yup.string().max(255).nullable(),
             addressLine1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),
             addressLine2: yup.string().max(255).nullable(),
             addressLine3: yup.string().max(255).nullable(),
-            emailBus: yup.string().max(255).required(displayErrorMsg('請輸入電郵')),
-            tel_countryCode: yup.string().min(3, displayErrorMsg('請輸入3位數字')).required(displayErrorMsg('請輸入國際區號')),
-            fax_countryCode: yup.string().min(3, displayErrorMsg('請輸入3位數字')).nullable(),
-            phoneNumber: yup.string().min(8, displayErrorMsg('請輸入8位數字')).required(displayErrorMsg('請輸入聯絡電話')),
-            faxNumber: yup.string().min(8, displayErrorMsg('請輸入8位數字')).nullable(),
+            emailBus: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))),
+            tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'require3Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
+            fax_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'require3Number'}))).nullable(),
+            phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'require8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
+            faxNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'require8Number'}))).nullable(),
             brExpiryDate: yup.string().min(8, 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) {

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

@@ -89,7 +89,7 @@ const BusCustomFormWizard = (props) => {
     };
 
     const [selectedAddress4, setSelectedAddress4] = useState(null);
-    const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]);
+    const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country(intl)[0]);
     const [termsAndConAccept, setTermsAndConAccept] = useState(false);
     const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
     const [isValid, setisValid] = useState(false);
@@ -102,7 +102,7 @@ const BusCustomFormWizard = (props) => {
     const [checkEmailBlur, setCheckEmailBlur] = useState(false)
 
     const address4ComboList = ComboData.district;
-    const address5ComboList = ComboData.country;
+    const address5ComboList = ComboData.country(intl);
     const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
         + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"
         + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評"
@@ -506,7 +506,7 @@ const BusCustomFormWizard = (props) => {
                 .matches(/^(?=.*[0-9])/, { message: displayErrorMsg('請包括最少1個數字') })
                 .matches(/^(?=.*[!@#%&])/, { message: displayErrorMsg('請包括最少1個特殊字符') }),
             confirmPassword: yup.string().min(8, displayErrorMsg('請最少輸入8位密碼')).required(displayErrorMsg(intl.formatMessage({id: 'pleaseConfirmPassword'}))).oneOf([yup.ref('password'), null], displayErrorMsg('請輸入相同密碼')),
-            enName: yup.string().max(255).required(displayErrorMsg('請輸入英文姓名')),
+            enName: yup.string().max(255).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')),
@@ -515,16 +515,16 @@ const BusCustomFormWizard = (props) => {
                 is: (enCompanyName) => !enCompanyName || enCompanyName.length === 0,
                 then: yup.string().required(displayErrorMsg('請輸入英文或中文名稱')),
             }),
-            chName: yup.string().max(255).required(displayErrorMsg('請輸入中文姓名')),
+            chName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireChineseName'}))),
             address1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),
             address2: yup.string().max(255).required(displayErrorMsg('請輸入第二行地址')),
             address3: yup.string().max(255).required(displayErrorMsg('請輸入第三行地址')),
-            email: yup.string().email(displayErrorMsg('請輸入電郵格式')).max(255).required(displayErrorMsg('請輸入電郵')),
-            emailConfirm: yup.string().email(displayErrorMsg('請輸入電郵格式')).max(255).required(displayErrorMsg('請輸入電郵')).oneOf([yup.ref('email'), null], displayErrorMsg('請輸入相同電郵')),
-            phoneCountryCode: yup.string().min(2, displayErrorMsg('請輸入最少2位數字')).required(displayErrorMsg('請輸入國際區號')),
-            faxCountryCode: yup.string().min(2, displayErrorMsg('請輸入最少2位數字')),
-            phone: yup.string().min(8, displayErrorMsg('請輸入最少8位數字')).required(displayErrorMsg('請輸入聯絡電話')),
-            fax: yup.string().min(8, displayErrorMsg('請輸入最少8位數字')),
+            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'}))),
+            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'}))),
+            fax: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast8Number'}))),
             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'}))),
@@ -539,7 +539,7 @@ const BusCustomFormWizard = (props) => {
                     }
                 }
             }),
-            captchaField: yup.string().required(displayErrorMsg('請輸入驗證')),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證'))
+            captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證'))
         }, ['enCompanyName', 'chCompanyName']),
 
     });
@@ -547,7 +547,7 @@ const BusCustomFormWizard = (props) => {
     const handleReset = (resetForm) => {
         resetForm();
         setSelectedAddress4("")
-        setSelectedAddress5(ComboData.country[0])
+        setSelectedAddress5(ComboData.country(intl)[0])
         setCheckCountry(false)
         setFileList([])
         setFileListData([])
@@ -695,7 +695,7 @@ const BusCustomFormWizard = (props) => {
                                                     </Grid>
                                                     <Grid item>
                                                         <Typography variant="subtitle1">
-                                                            {level?.label}
+                                                            <FormattedMessage id={level ? level?.label : "pwWeak" }/>
                                                         </Typography>
                                                     </Grid>
                                                 </Grid>
@@ -976,9 +976,10 @@ const BusCustomFormWizard = (props) => {
                                             onChange={(event, newValue) => {
                                                 setSelectedAddress4(newValue);
                                             }}
-                                            sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 3px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
-                                            renderInput={(params) => <TextField {...params}
-                                                                                placeholder={intl.formatMessage({id: 'region'})}
+                                            sx={{ "& .MuiInputBase-root": { height: "41px" },
+                                                "#address4-combo": { padding: "0px 0px 0px 3px" },
+                                                "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
+                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'region'})}
                                             />}
                                         />
                                         <Autocomplete
@@ -989,7 +990,7 @@ const BusCustomFormWizard = (props) => {
                                             onChange={(event, newValue) => {
                                                 if (newValue !== null) {
                                                     setSelectedAddress5(newValue);
-                                                    if (newValue === '香港') {
+                                                    if (newValue === intl.formatMessage({id: 'hongKong'})) {
                                                         setCheckCountry(false)
                                                     } else {
                                                         setSelectedAddress4("");
@@ -1002,7 +1003,7 @@ const BusCustomFormWizard = (props) => {
                                             }}
 
                                             sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 3px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
-                                            renderInput={(params) => <TextField {...params} placeholder="國家/地區" />}
+                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'regionOrCountry'})} />}
                                         />
                                         {formik.touched.address1 && formik.errors.address1 && (
                                             <FormHelperText error id="helper-text-address1-signup">
@@ -1023,14 +1024,16 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>你的聯絡資料</Typography>
+                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                            <FormattedMessage id="yourContact"/>
+                                        </Typography>
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="enName-signup">
                                             <Typography variant="pnspsFormHeader">
-                                                姓名
+                                                <FormattedMessage id="userContactName"/>
                                                 <span style={{ color: '#f10000' }}>*</span>
                                             </Typography>
                                         </InputLabel>
@@ -1065,7 +1068,7 @@ const BusCustomFormWizard = (props) => {
                                             <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                 <InputLabel htmlFor="email-signup">
                                                     <Typography variant="pnspsFormHeader">
-                                                        電郵
+                                                        <FormattedMessage id="userContactEmail"/>
                                                         <span style={{ color: '#f10000' }}>*</span>
                                                     </Typography>
                                                 </InputLabel>
@@ -1077,7 +1080,7 @@ const BusCustomFormWizard = (props) => {
                                                     value={formik.values.email.trim()}
                                                     name="email"
                                                     onChange={formik.handleChange}
-                                                    placeholder="電郵"
+                                                    placeholder={intl.formatMessage({id: 'userContactEmail'})}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
                                                         onKeyDown: (e) => {
@@ -1094,7 +1097,7 @@ const BusCustomFormWizard = (props) => {
                                                 )}
                                                 {checkEmail && (
                                                     <FormHelperText error id="helper-text-email-signup">
-                                                        此電郵已被注冊，請使用其他電郵
+                                                        <FormattedMessage id="emailUsed"/>
                                                     </FormHelperText>
                                                 )}
                                             </Stack>
@@ -1103,7 +1106,7 @@ const BusCustomFormWizard = (props) => {
                                             <Stack spacing={1} >
                                                 <InputLabel htmlFor="emailConfirm-signup">
                                                     <Typography variant="pnspsFormHeader">
-                                                        確認電郵
+                                                        <FormattedMessage id="userContactEmail"/>
                                                         <span style={{ color: '#f10000' }}>*</span>
                                                     </Typography>
                                                 </InputLabel>
@@ -1116,7 +1119,7 @@ const BusCustomFormWizard = (props) => {
                                                     name="emailConfirm"
                                                     // onBlur={formik.handleBlur}
                                                     onChange={formik.handleChange}
-                                                    placeholder="確認電郵"
+                                                    placeholder={intl.formatMessage({id: 'confirmEmail'})}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
                                                         onKeyDown: (e) => {
@@ -1143,7 +1146,7 @@ const BusCustomFormWizard = (props) => {
                                                     <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                         <InputLabel htmlFor="phone-signup">
                                                             <Typography variant="pnspsFormHeader">
-                                                                聯絡電話
+                                                                <FormattedMessage id="userContactNumber"/>
                                                                 <span style={{ color: '#f10000' }}>*</span>
                                                             </Typography>
                                                         </InputLabel>
@@ -1163,7 +1166,7 @@ const BusCustomFormWizard = (props) => {
                                                                     formik.setFieldValue("phoneCountryCode", value);
                                                                 }}
                                                                 endAdornment={<InputAdornment position="end">-</InputAdornment>}
-                                                                placeholder="國際區號"
+                                                                placeholder={intl.formatMessage({id: 'dialingCode'})}
                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                 onBlur={formik.handleBlur}
                                                                 inputProps={{
@@ -1190,7 +1193,7 @@ const BusCustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("phone", value);
                                                                 }}
-                                                                placeholder="聯絡電話"
+                                                                placeholder={intl.formatMessage({id: 'userContactNumber'})}
                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                 inputProps={{
                                                                     maxLength: 11,
@@ -1218,7 +1221,7 @@ const BusCustomFormWizard = (props) => {
                                                     <Stack spacing={1} direction="column">
                                                         <InputLabel htmlFor="fax-signup">
                                                             <Typography variant="pnspsFormHeader">
-                                                                傳真號碼
+                                                                <FormattedMessage id="userFaxNumber"/>
                                                             </Typography>
                                                         </InputLabel>
                                                         <Stack direction="row">
@@ -1237,7 +1240,7 @@ const BusCustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("faxCountryCode", value);
                                                                 }}
-                                                                placeholder="國際區號"
+                                                                placeholder={intl.formatMessage({id: 'dialingCode'})}
                                                                 endAdornment={<InputAdornment position="end">-</InputAdornment>}
                                                                 inputProps={{
                                                                     maxLength: 3,
@@ -1263,7 +1266,7 @@ const BusCustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("fax", value);
                                                                 }}
-                                                                placeholder="傳真號碼"
+                                                                placeholder={intl.formatMessage({id: 'userFaxNumber'})}
                                                                 inputProps={{
                                                                     maxLength: 8,
                                                                     onKeyDown: (e) => {
@@ -1537,7 +1540,7 @@ const BusCustomFormWizard = (props) => {
                                                 : null}
                                             <Stack direction="row">
                                                 <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
-                                                    國家/地區:
+                                                    <FormattedMessage id="regionOrCountry"/>:
                                                 </Typography>
                                                 <Typography variant="pnspsFormHeader">
                                                     {selectedAddress5}
@@ -1548,7 +1551,9 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>你的聯絡資料</Typography>
+                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                            <FormattedMessage id="yourContact"/>
+                                        </Typography>
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
@@ -1564,7 +1569,7 @@ const BusCustomFormWizard = (props) => {
                                 <Grid item xs={12} md={12}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            電郵:
+                                            <FormattedMessage id="userContactEmail"/>:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="preview-email-signup">
                                             {formik.values.email}
@@ -1574,7 +1579,7 @@ const BusCustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            聯絡電話:
+                                            <FormattedMessage id="userContactNumber"/>:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="preview-phone-signup">
                                             +{formik.values.phoneCountryCode} {formik.values.phone}
@@ -1584,7 +1589,7 @@ const BusCustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            傳真號碼:
+                                            <FormattedMessage id="userFaxNumber"/>:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="preview-fax-signup">
                                             +{formik.values.faxCountryCode} {formik.values.fax}
@@ -1617,7 +1622,9 @@ const BusCustomFormWizard = (props) => {
                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                         <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
                                         <Typography display="inline" variant="h4">帳戶申請已成功提交。</Typography>
-                                        <Typography display="inline" variant="h4">驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。</Typography>
+                                        <Typography display="inline" variant="h4">
+                                            <FormattedMessage id="emailSent"/>
+                                        </Typography>
                                         <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">返回登入頁面</Typography></Button>
                                     </Stack>
                                     :

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

@@ -89,7 +89,7 @@ const CustomFormWizard = (props) => {
     const [selectedIdDocInputType, setSelectedIdDocInputType] = useState("");
     // const [selectedIdDocLabel, setSelectedIdDocLabel] = useState(null);
     const [selectedAddress4, setSelectedAddress4] = useState(null);
-    const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]);
+    const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country(intl)[0]);
     const [termsAndConAccept, setTermsAndConAccept] = useState(false);
     const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
     const [isValid, setisValid] = useState(false);
@@ -103,7 +103,7 @@ const CustomFormWizard = (props) => {
 
     const idDocTypeComboList = ComboData.idDocType;
     const address4ComboList = ComboData.district;
-    const address5ComboList = ComboData.country;
+    const address5ComboList = ComboData.country(intl);
     const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
         + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"
         + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評"
@@ -564,13 +564,13 @@ const CustomFormWizard = (props) => {
                 .matches(/^(?=.*[0-9])/, { message: displayErrorMsg('請包括最少1個數字') })
                 .matches(/^(?=.*[!@#%&])/, { message: displayErrorMsg('請包括最少1個特殊字符') }),
             confirmPassword: yup.string().min(8, displayErrorMsg('請最少輸入8位密碼')).required(displayErrorMsg(intl.formatMessage({id: 'pleaseConfirmPassword'}))).oneOf([yup.ref('password'), null], displayErrorMsg('請輸入相同密碼')),
-            enName: yup.string().max(255).required(displayErrorMsg('請輸入英文姓名')),
-            chName: yup.string().max(6).required(displayErrorMsg('請輸入中文姓名')),
+            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(255).required(displayErrorMsg('請輸入第一行地址')),
             address2: yup.string().max(255).required(displayErrorMsg('請輸入第二行地址')),
             address3: yup.string().max(255).required(displayErrorMsg('請輸入第三行地址')),
-            email: yup.string().email(displayErrorMsg('請輸入電郵格式')).max(255).required(displayErrorMsg('請輸入電郵')),
-            emailConfirm: yup.string().email(displayErrorMsg('請輸入電郵格式')).max(255).required(displayErrorMsg('請輸入電郵')).oneOf([yup.ref('email'), null], displayErrorMsg('請輸入相同電郵')),
+            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'}))),
             idNo: yup.string().required(displayErrorMsg(`請輸入${selectedIdDocInputType}號碼`))
                 .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}號碼不包含特殊字符`) })
                 .matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputType}號碼不包含空格`) })
@@ -627,18 +627,18 @@ const CustomFormWizard = (props) => {
                 }),
             checkDigit: yup.string().max(1).required(displayErrorMsg('請輸入括號內的數字或字母')),
             idDocType: yup.string().max(255).required(displayErrorMsg('請輸入證件類別')),
-            phoneCountryCode: yup.string().min(2, displayErrorMsg('請輸入最少2位數字')).required(displayErrorMsg('請輸入國際區號')),
+            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('請輸入最少8位數字')).required(displayErrorMsg('請輸入聯絡電話')),
+            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('請輸入驗證')),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
+            captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
         }),
     });
 
     const handleReset = (resetForm) => {
         resetForm();
         setSelectedAddress4("")
-        setSelectedAddress5(ComboData.country[0])
+        setSelectedAddress5(ComboData.country(intl)[0])
         setCheckCountry(false)
         setSelectedIdDocType({})
         setSelectedIdDocInputType("");
@@ -1181,7 +1181,9 @@ const CustomFormWizard = (props) => {
                                             onChange={(event, newValue) => {
                                                 setSelectedAddress4(newValue);
                                             }}
-                                            sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 3px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
+                                            sx={{ "& .MuiInputBase-root": { height: "41px" },
+                                                "#address4-combo": { padding: "0px 0px 0px 3px" },
+                                                "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
                                             renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'region'})}
                                             />}
                                         />
@@ -1193,7 +1195,7 @@ const CustomFormWizard = (props) => {
                                             onChange={(event, newValue) => {
                                                 if (newValue !== null) {
                                                     setSelectedAddress5(newValue);
-                                                    if (newValue === '香港') {
+                                                    if (newValue === intl.formatMessage({id: 'hongKong'})) {
                                                         setCheckCountry(false)
                                                     } else {
                                                         setSelectedAddress4("");
@@ -1206,7 +1208,7 @@ const CustomFormWizard = (props) => {
                                             }}
 
                                             sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 3px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
-                                            renderInput={(params) => <TextField {...params} placeholder="國家/地區" />}
+                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'regionOrCountry'})} />}
                                         />
                                         {formik.touched.address1 && formik.errors.address1 && (
                                             <FormHelperText error id="helper-text-address1-signup">
@@ -1227,7 +1229,9 @@ const CustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>你的聯絡資料</Typography>
+                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                            <FormattedMessage id="yourContact"/>
+                                        </Typography>
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
@@ -1236,7 +1240,7 @@ const CustomFormWizard = (props) => {
                                             <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                 <InputLabel htmlFor="email-signup">
                                                     <Typography variant="pnspsFormHeader">
-                                                        電郵
+                                                        <FormattedMessage id="userContactEmail"/>
                                                         <span style={{ color: '#f10000' }}>*</span>
                                                     </Typography>
                                                 </InputLabel>
@@ -1248,7 +1252,7 @@ const CustomFormWizard = (props) => {
                                                     value={formik.values.email.trim()}
                                                     name="email"
                                                     onChange={formik.handleChange}
-                                                    placeholder="電郵"
+                                                    placeholder={intl.formatMessage({id: 'userContactEmail'})}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
                                                         onKeyDown: (e) => {
@@ -1265,7 +1269,7 @@ const CustomFormWizard = (props) => {
                                                 )}
                                                 {checkEmail && (
                                                     <FormHelperText error id="helper-text-email-signup">
-                                                        此電郵已被注冊，請使用其他電郵
+                                                        <FormattedMessage id="emailUsed"/>
                                                     </FormHelperText>
                                                 )}
                                             </Stack>
@@ -1274,7 +1278,7 @@ const CustomFormWizard = (props) => {
                                             <Stack spacing={1} >
                                                 <InputLabel htmlFor="emailConfirm-signup">
                                                     <Typography variant="pnspsFormHeader">
-                                                        確認電郵
+                                                        <FormattedMessage id="userContactEmail"/>
                                                         <span style={{ color: '#f10000' }}>*</span>
                                                     </Typography>
                                                 </InputLabel>
@@ -1287,7 +1291,7 @@ const CustomFormWizard = (props) => {
                                                     name="emailConfirm"
                                                     // onBlur={formik.handleBlur}
                                                     onChange={formik.handleChange}
-                                                    placeholder="確認電郵"
+                                                    placeholder={intl.formatMessage({id: 'confirmEmail'})}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
                                                         onKeyDown: (e) => {
@@ -1314,7 +1318,7 @@ const CustomFormWizard = (props) => {
                                                     <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                         <InputLabel htmlFor="phone-signup">
                                                             <Typography variant="pnspsFormHeader">
-                                                                聯絡電話
+                                                                <FormattedMessage id="userContactNumber"/>
                                                                 <span style={{ color: '#f10000' }}>*</span>
                                                             </Typography>
                                                         </InputLabel>
@@ -1333,7 +1337,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("phoneCountryCode", value);
                                                                 }}
-                                                                placeholder="國際區號"
+                                                                placeholder={intl.formatMessage({id: 'dialingCode'})}
                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                 onBlur={formik.handleBlur}
                                                                 endAdornment={<InputAdornment position="end">-</InputAdornment>}
@@ -1361,7 +1365,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("phone", value);
                                                                 }}
-                                                                placeholder="聯絡電話"
+                                                                placeholder={intl.formatMessage({id: 'userContactNumber'})}
                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                 onBlur={formik.handleBlur}
                                                                 inputProps={{
@@ -1390,7 +1394,7 @@ const CustomFormWizard = (props) => {
                                                     <Stack spacing={1} direction="column">
                                                         <InputLabel htmlFor="fax-signup">
                                                             <Typography variant="pnspsFormHeader">
-                                                                傳真號碼
+                                                                <FormattedMessage id="userFaxNumber"/>
                                                             </Typography>
                                                         </InputLabel>
                                                         <Stack direction="row">
@@ -1408,7 +1412,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("faxCountryCode", value);
                                                                 }}
-                                                                placeholder="國際區號"
+                                                                placeholder={intl.formatMessage({id: 'dialingCode'})}
                                                                 onBlur={formik.handleBlur}
                                                                 endAdornment={<InputAdornment position="end">-</InputAdornment>}
                                                                 inputProps={{
@@ -1435,7 +1439,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("fax", value);
                                                                 }}
-                                                                placeholder="傳真號碼"
+                                                                placeholder={intl.formatMessage({id: 'userFaxNumber'})}
                                                                 inputProps={{
                                                                     maxLength: 8,
                                                                     onKeyDown: (e) => {
@@ -1703,7 +1707,7 @@ const CustomFormWizard = (props) => {
                                                 : null}
                                             <Stack direction="row">
                                                 <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
-                                                    國家/地區:
+                                                    <FormattedMessage id="regionOrCountry"/>:
                                                 </Typography>
                                                 <Typography variant="pnspsFormHeader">{selectedAddress5}</Typography>
                                             </Stack>
@@ -1712,13 +1716,15 @@ const CustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>你的聯絡資料</Typography>
+                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                            <FormattedMessage id="yourContact"/>
+                                        </Typography>
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            電郵:
+                                            <FormattedMessage id="userContactEmail"/>:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="preview-email-signup">
                                             {formik.values.email}
@@ -1728,7 +1734,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            聯絡電話:
+                                            <FormattedMessage id="userContactNumber"/>:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="preview-phone-signup">
                                             +{formik.values.phoneCountryCode} {formik.values.phone}
@@ -1739,7 +1745,7 @@ const CustomFormWizard = (props) => {
                                     <Grid item xs={12} md={6}>
                                         <Stack spacing={1} direction="row">
                                             <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                                傳真號碼:
+                                                <FormattedMessage id="userFaxNumber"/>:
                                             </Typography>
                                             <Typography variant="pnspsFormHeader" id="preview-fax-signup">
                                                 +{formik.values.faxCountryCode} {formik.values.fax}
@@ -1773,7 +1779,9 @@ const CustomFormWizard = (props) => {
                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                         <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
                                         <Typography display="inline" variant="h4">帳戶申請已成功提交。</Typography>
-                                        <Typography display="inline" variant="h4">驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。</Typography>
+                                        <Typography display="inline" variant="h4">
+                                            <FormattedMessage id="emailSent"/>
+                                        </Typography>
                                         <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">返回登入頁面</Typography></Button>
                                     </Stack>
                                     :

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

@@ -366,11 +366,11 @@ const CustomFormWizard = (props) => {
             address1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),
             address2: yup.string().max(255).required(displayErrorMsg('請輸入第二行地址')),
             address3: yup.string().max(255).required(displayErrorMsg('請輸入第三行地址')),
-            email: yup.string().email(displayErrorMsg('請輸入電郵格式')).max(255).required(displayErrorMsg('請輸入電郵')),
-            emailConfirm: yup.string().email(displayErrorMsg('請輸入電郵格式')).max(255).required(displayErrorMsg('請輸入電郵')).oneOf([yup.ref('email'), null], displayErrorMsg('請輸入相同電郵')),
-            phoneCountryCode: yup.string().min(2, displayErrorMsg('請輸入最少2位數字')).required(displayErrorMsg('請輸入國際區號')),
-            phone: yup.string().min(8, displayErrorMsg('請輸入最少8位數字')).required(displayErrorMsg('請輸入聯絡電話')),
-            captchaField: yup.string().required(displayErrorMsg('請輸入驗證')),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
+            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('請輸入有效驗證')),
         }),
     });
 
@@ -522,7 +522,7 @@ const CustomFormWizard = (props) => {
                                             onChange={(event, newValue) => {
                                                 if (newValue !== null) {
                                                     setSelectedAddress5(newValue);
-                                                    if (newValue == '香港') {
+                                                    if (newValue === intl.formatMessage({id: 'hongKong'})) {
                                                         setCheckCountry(false)
                                                     } else {
                                                         setSelectedAddress4("");
@@ -535,7 +535,7 @@ const CustomFormWizard = (props) => {
                                             }}
 
                                             sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
-                                            renderInput={(params) => <TextField {...params} placeholder="國家/地區" />}
+                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'regionOrCountry'})} />}
                                         />
                                         {formik.touched.address1 && formik.errors.address1 && (
                                             <FormHelperText error id="helper-text-address1-signup">
@@ -556,7 +556,9 @@ const CustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>你的聯絡資料</Typography>
+                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                            <FormattedMessage id="yourContact"/>
+                                        </Typography>
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
@@ -565,7 +567,7 @@ const CustomFormWizard = (props) => {
                                             <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                 <InputLabel htmlFor="email-signup">
                                                     <Typography variant="h5">
-                                                        電郵
+                                                        <FormattedMessage id="userContactEmail"/>
                                                         <span style={{ color: '#f10000' }}>*</span>
                                                         {iAmSmartData.email?<img src={iAmSmartICon} alt="iAM Smart" width="25" />:null}
                                                     </Typography>
@@ -578,7 +580,7 @@ const CustomFormWizard = (props) => {
                                                     value={formik.values.email.trim()}
                                                     name="email"
                                                     onChange={formik.handleChange}
-                                                    placeholder="電郵"
+                                                    placeholder={intl.formatMessage({id: 'userContactEmail'})}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
                                                         onKeyDown: (e) => {
@@ -595,7 +597,7 @@ const CustomFormWizard = (props) => {
                                                 )}
                                                 {checkEmail && (
                                                     <FormHelperText error id="helper-text-email-signup">
-                                                        此電郵已被注冊，請使用其他電郵
+                                                        <FormattedMessage id="emailUsed"/>
                                                     </FormHelperText>
                                                 )}
                                             </Stack>
@@ -604,7 +606,7 @@ const CustomFormWizard = (props) => {
                                             <Stack spacing={1} >
                                                 <InputLabel htmlFor="emailConfirm-signup">
                                                     <Typography variant="h5">
-                                                        確認電郵
+                                                        <FormattedMessage id="userContactEmail"/>
                                                         <span style={{ color: '#f10000' }}>*</span>
                                                     </Typography>
                                                 </InputLabel>
@@ -617,7 +619,7 @@ const CustomFormWizard = (props) => {
                                                     name="emailConfirm"
                                                     // onBlur={formik.handleBlur}
                                                     onChange={formik.handleChange}
-                                                    placeholder="確認電郵"
+                                                    placeholder={intl.formatMessage({id: 'confirmEmail'})}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
                                                         onKeyDown: (e) => {
@@ -644,7 +646,7 @@ const CustomFormWizard = (props) => {
                                                     <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                         <InputLabel htmlFor="phone-signup">
                                                             <Typography variant="h5">
-                                                                聯絡電話
+                                                                <FormattedMessage id="userContactNumber"/>
                                                                 <span style={{ color: '#f10000' }}>*</span>
                                                                 {iAmSmartData.phone?<img src={iAmSmartICon} alt="iAM Smart" width="25" />:null}
                                                             </Typography>
@@ -664,7 +666,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("phoneCountryCode", value);
                                                                 }}
-                                                                placeholder="國際區號"
+                                                                placeholder={intl.formatMessage({id: 'dialingCode'})}
                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                 onBlur={formik.handleBlur}
                                                                 inputProps={{
@@ -691,7 +693,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("phone", value);
                                                                 }}
-                                                                placeholder="聯絡電話"
+                                                                placeholder={intl.formatMessage({id: 'userContactNumber'})}
                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                 onBlur={formik.handleBlur}
                                                                 inputProps={{
@@ -720,7 +722,7 @@ const CustomFormWizard = (props) => {
                                                     <Stack spacing={1} direction="column">
                                                         <InputLabel htmlFor="fax-signup">
                                                             <Typography variant="h5">
-                                                                傳真號碼
+                                                                <FormattedMessage id="userFaxNumber"/>
                                                             </Typography>
                                                         </InputLabel>
                                                         <Stack direction="row">
@@ -738,7 +740,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("faxCountryCode", value);
                                                                 }}
-                                                                placeholder="國際區號"
+                                                                placeholder={intl.formatMessage({id: 'dialingCode'})}
                                                                 onBlur={formik.handleBlur}
                                                                 inputProps={{
                                                                     maxLength: 3,
@@ -764,7 +766,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("fax", value);
                                                                 }}
-                                                                placeholder="傳真號碼"
+                                                                placeholder={intl.formatMessage({id: 'userFaxNumber'})}
                                                                 inputProps={{
                                                                     maxLength: 8,
                                                                     onKeyDown: (e) => {
@@ -963,7 +965,7 @@ const CustomFormWizard = (props) => {
                                                 : null}
                                             <Stack direction="row">
                                                 <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address5-signup">
-                                                    國家/地區:
+                                                    <FormattedMessage id="regionOrCountry"/>:
                                                 </Typography>
                                                 <Typography variant="h5">{selectedAddress5}</Typography>
                                             </Stack>
@@ -972,13 +974,15 @@ const CustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>你的聯絡資料</Typography>
+                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                            <FormattedMessage id="yourContact"/>
+                                        </Typography>
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="h5" color={theme.palette.grey[600]}>
-                                            電郵:
+                                            <FormattedMessage id="userContactEmail"/>:
                                         </Typography>
                                         <Typography variant="h5" id="preview-email-signup">
                                             {formik.values.email}
@@ -988,7 +992,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="h5" color={theme.palette.grey[600]}>
-                                            聯絡電話:
+                                            <FormattedMessage id="userContactNumber"/>:
                                         </Typography>
                                         <Typography variant="h5" id="preview-phone-signup">
                                             +{formik.values.phoneCountryCode} {formik.values.phone}
@@ -999,7 +1003,7 @@ const CustomFormWizard = (props) => {
                                     <Grid item xs={12} md={6}>
                                         <Stack spacing={1} direction="row">
                                             <Typography variant="h5" color={theme.palette.grey[600]}>
-                                                傳真號碼:
+                                                <FormattedMessage id="userFaxNumber"/>:
                                             </Typography>
                                             <Typography variant="h5" id="preview-fax-signup">
                                                 +{formik.values.faxCountryCode} {formik.values.fax}
@@ -1022,7 +1026,9 @@ const CustomFormWizard = (props) => {
                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                         <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
                                         <Typography display="inline" variant="h4">帳戶申請已成功提交。</Typography>
-                                        <Typography display="inline" variant="h4">驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。</Typography>
+                                        <Typography display="inline" variant="h4">
+                                            <FormattedMessage id="emailSent"/>
+                                        </Typography>
                                         <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</Typography></Button>
                                     </Stack>
                                     :

src/themes/buttonConst.js

@@ -64,16 +64,16 @@ export const PNSPS_BUTTON_THEME = createTheme({
                     fontSize: '1.2rem',
                     fontWeight: '600',
                     height: '45px',
-                    width: '35' +
+                    minWidth: '35' +
                         'vw', // Default width for xs screen sizes
                     '@media (min-width: 600px)': { // sm breakpoint
-                        width: '20vw',
+                        minWidth: '20vw',
                     },
                     '@media (min-width: 960px)': { // md breakpoint
-                        width: '15vw',
+                        minWidth: '15vw',
                     },
                     '@media (min-width: 1280px)': { // lg breakpoint
-                        width: '9vw',
+                        minWidth: '9vw',
                     },
                     textTransform: "none",
                     alignItems: 'normal',
@@ -147,15 +147,15 @@ export const PNSPS_LONG_BUTTON_THEME = createTheme({
                     fontSize: '1.2rem',
                     fontWeight: '600',
                     height: '45px',
-                    width: '60vw', // Default width for xs screen sizes
+                    minWidth: '60vw', // Default width for xs screen sizes
                     '@media (min-width: 600px)': { // sm breakpoint
-                        width: '33vw',
+                        minWidth: '33vw',
                     },
                     '@media (min-width: 960px)': { // md breakpoint
-                        width: '25vw',
+                        minWidth: '25vw',
                     },
                     '@media (min-width: 1280px)': { // lg breakpoint
-                        width: '16vw',
+                        minWidth: '16vw',
                     },
                     textTransform: "none",
                     alignItems: 'normal',

src/themes/themeConst.js

@@ -235,7 +235,7 @@ export const PNSPS_THEME = createTheme({
                         minHeight: ROW_HEIGHT,
                         maxHeight: ROW_HEIGHT,
                         boxSizing: 'border-box', // Ensure the background shape follows the size of the TextField
-                        padding: '1px', // Adjust the padding as needed
+                        //padding: '1px', // Adjust the padding as needed
                     },
                     '& .MuiInputBase-input:disabled': {
                         color: 'rgba(0, 0, 0, 0.8)',

src/translations/en.json

@@ -43,10 +43,32 @@
   "userName": "Username",
   "userChineseName": "Chinese Name",
   "userEnglishName": "English Name",
+  "userContactName": "Name",
+  "userRequireChineseName": "Please enter your Chinese name",
+  "userRequireEnglishName": "Please enter your English name",
+  "userRequireName": "Please enter your name",
+  "userContactEmail": "Email",
+  "confirmEmail": "Confirm Email",
+  "requireEmail": "Please enter your email",
+  "validEmailFormat": "Please enter a valid email",
+  "validSameEmail": "Please enter same email address",
+  "emailUsed": "This email has been registered, please use another email",
+  "emailSent": "A verification email will be sent to your email address. Please follow the instructions to complete the verification and log in to the system.",
+  "userContactNumber": "Contact Number",
+  "requiredValidNumber": "Please enter a valid contact number",
+  "requireContactNumber": "Please enter your contact number",
+  "require3Number": "Please enter an 3-digit number",
+  "require8Number": "Please enter an 8-digit number",
+  "requireAtLeast8Number": "Please enter at least 8 digits",
+  "requireAtLeast2Number": "Please enter at least 2 digits",
+  "requireDialingCode": "Please enter the international dialing code",
+  "requireVerify": "Please enter verification",
+  "dialingCode": "Global Code",
+  "userFaxNumber": "Fax number",
   "userIDNo": "ID Card Number",
   "userEmailAddress": "Email Address",
   "userPhoneNumber": "Mobile Phone Number",
-  "userAddress": "Residential Address",
+  "userAddress": "Address",
 
   "personalInformation": "Personal Information",
   "yourPersonalInformation": "Your Personal Information",
@@ -72,6 +94,16 @@
   "addressLine2": "Second line",
   "addressLine3": "Third line",
   "region": "Region (only applicable to Hong Kong)",
+  "regionOrCountry": "Country/Region",
+  "hongKong": "Hong Kong",
+  "mainland": "Mainland China",
+  "macau": "Macau",
+  "yourContact": "Your Contact Information",
+
+  "pwWeak": "Weak",
+  "pwNormal": "Normal",
+  "pwGood": "Good",
+  "pwStrong": "Strong",
 
   "Dashboard": "Dashboard",
   "event": "Event"

src/translations/zh-CN.json

@@ -43,6 +43,28 @@
   "userName": "用户名称",
   "userChineseName": "中文姓名",
   "userEnglishName": "英文姓名",
+  "userContactName": "姓名",
+  "userRequireChineseName": "請輸入中文姓名",
+  "userRequireEnglishName": "請輸入英文姓名",
+  "userRequireName": "請輸入姓名",
+  "userContactEmail": "电邮",
+  "confirmEmail": "确认电邮",
+  "requireEmail": "请输入电邮",
+  "validEmailFormat": "请输入电邮格式",
+  "validSameEmail": "请输入相同电邮",
+  "emailUsed": "此电邮已被注册，请使用其他电邮",
+  "emailSent": "验证电邮将发送到你的电邮地址，请依指示完成验证及登入系统。",
+  "userContactNumber": "联络电话",
+  "requiredValidNumber": "请输入有效联络电话",
+  "requireContactNumber": "请输入联络电话",
+  "require3Number": "请输入3位数字",
+  "require8Number": "请输入8位数字",
+  "requireAtLeast8Number": "请输入最少8位数字",
+  "requireAtLeast2Number": "请输入最少2位数字",
+  "requireDialingCode": "请输入国际区号",
+  "requireVerify": "请输入验证",
+  "dialingCode": "国际区号",
+  "userFaxNumber": "传真号码",
   "userIDNo": "身份证号码",
   "userEmailAddress": "电邮地址",
   "userPhoneNumber": "手机号码",
@@ -72,6 +94,16 @@
   "addressLine2": "第二行",
   "addressLine3": "第三行",
   "region": "区域 (只适用于香港)",
+  "region Or Country": "国家/地区",
+  "hong Kong": "香港",
+  "mainland": "内地",
+  "macau": "澳门",
+  "yourContact": "你的联络资料",
+
+  "pwWeak": "弱",
+  "pwNormal": "普通",
+  "pwGood": "良好",
+  "pwStrong": "强",
 
   "Dashboard": "仪表板",
   "event": "活动"

src/translations/zh-HK.json

@@ -43,6 +43,28 @@
   "userName": "用戶名稱",
   "userChineseName": "中文姓名",
   "userEnglishName": "英文姓名",
+  "userContactName": "姓名",
+  "userRequireChineseName": "請輸入中文姓名",
+  "userRequireEnglishName": "請輸入英文姓名",
+  "userRequireName": "請輸入姓名",
+  "userContactEmail": "電郵",
+  "confirmEmail": "確認電郵",
+  "requireEmail": "請輸入電郵",
+  "validEmailFormat": "請輸入電郵格式",
+  "validSameEmail": "請輸入相同電郵",
+  "emailUsed": "此電郵已被注冊，請使用其他電郵",
+  "emailSent": "驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。",
+  "userContactNumber": "聯絡電話",
+  "requiredValidNumber": "請輸入有效聯絡電話",
+  "requireContactNumber": "請輸入聯絡電話",
+  "require3Number": "請輸入3位數字",
+  "require8Number": "請輸入8位數字",
+  "requireAtLeast8Number": "請輸入最少8位數字",
+  "requireAtLeast2Number": "請輸入最少2位數字",
+  "requireDialingCode": "請輸入國際區號",
+  "requireVerify": "請輸入驗證",
+  "dialingCode": "國際區號",
+  "userFaxNumber": "傳真號碼",
   "userIDNo": "身份證號碼",
   "userEmailAddress": "電郵地址",
   "userPhoneNumber": "手機號碼",
@@ -72,6 +94,16 @@
   "addressLine2": "第二行",
   "addressLine3": "第三行",
   "region": "區域 (只適用於香港)",
+  "regionOrCountry": "國家/地區",
+  "hongKong": "香港",
+  "mainland": "內地",
+  "macau": "澳門",
+  "yourContact": "你的聯絡資料",
+
+  "pwWeak": "弱",
+  "pwNormal": "普通",
+  "pwGood": "良好",
+  "pwStrong": "強",
 
   "Dashboard": "儀表板",
   "event": "活動"

src/utils/ComboData.js

@@ -7,7 +7,11 @@ export const idDocType = [
                 
 export const district =  ['北區', '長洲區', '大埔區', '大嶼山區', '東區', '觀塘區', '黃大仙區', '九龍城區', '葵青區', '南區', '南丫島區', 
 '坪洲區', '荃灣區', '沙田區', '深水埗區', '屯門區', '灣仔區', '西貢區', '油尖旺區', '元朗區', '中西區'];
-export const country = ["香港","內地","澳門"]; 
+
+export const country = (intl) => {
+    return ["hongKong", "mainland", "macau"]
+        .map((country) => intl.formatMessage({ id: country }));
+};
 
 export const accountFilter = [{ id: 1, key: 1, label: 'Active',  type: 'active' }, { id: 2, key: 2, label: 'Locked',  type: 'locked' }, { id: 3, key: 3, label: 'Not verified',  type: 'notVerified' }]; 
 

src/utils/password-strength.js

@@ -18,11 +18,11 @@ export const strengthColorEng = (count) => {
 };
 
 export const strengthColorChi = (count) => {
-  if (count < 3) return { label: '弱', color: 'error.main' };
-  if (count < 4) return { label: '普通', color: 'warning.main' };
-  if (count < 5) return { label: '良好', color: 'success.main' };
-  if (count < 6) return { label: '強', color: 'success.dark' };
-  return { label: '弱', color: 'error.main' };
+  if (count < 3) return { label: 'pwWeak', color: 'error.main' };
+  if (count < 4) return { label: 'pwNormal', color: 'warning.main' };
+  if (count < 5) return { label: 'pwGood', color: 'success.main' };
+  if (count < 6) return { label: 'pwStrong', color: 'success.dark' };
+  return { label: 'pwWeak', color: 'error.main' };
 };
 
 // password strength indicator