| @@ -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" | |||
| > | |||
| @@ -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}/ | |||
| @@ -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'}))) | |||
| @@ -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 => { | |||
| @@ -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}> | |||
| @@ -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); | |||
| @@ -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) { | |||
| @@ -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> | |||
| : | |||
| @@ -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> | |||
| : | |||
| @@ -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> | |||
| : | |||
| @@ -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', | |||
| @@ -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)', | |||
| @@ -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" | |||
| @@ -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": "活动" | |||
| @@ -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": "活動" | |||
| @@ -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' }]; | |||
| @@ -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 | |||