alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

update form

master
jason.lam 1 year ago
parent
d815c63139
commit
2f2ef07d52
17 changed files with 263 additions and 137 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      src/components/cards/AuthFooter.js
  2. +4
    -4
      src/pages/Organization/DetailPage/OrganizationCard.js
  3. +3
    -3
      src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js
  4. +4
    -4
      src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
  5. +7
    -2
      src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js
  6. +7
    -7
      src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
  7. +6
    -6
      src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js
  8. +44
    -37
      src/pages/authentication/auth-forms/BusCustomFormWizard.js
  9. +39
    -31
      src/pages/authentication/auth-forms/CustomFormWizard.js
  10. +31
    -25
      src/pages/authentication/auth-forms/IAmSmartFormWizard.js
  11. +8
    -8
      src/themes/buttonConst.js
  12. +1
    -1
      src/themes/themeConst.js
  13. +33
    -1
      src/translations/en.json
  14. +32
    -0
      src/translations/zh-CN.json
  15. +32
    -0
      src/translations/zh-HK.json
  16. +5
    -1
      src/utils/ComboData.js
  17. +5
    -5
      src/utils/password-strength.js

+ 2
- 2
src/components/cards/AuthFooter.js View File

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


+ 4
- 4
src/pages/Organization/DetailPage/OrganizationCard.js View File

@@ -52,10 +52,10 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
addressLine1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')), addressLine1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),
addressLine2: yup.string().max(255, displayErrorMsg("length must <= 255")), addressLine2: yup.string().max(255, displayErrorMsg("length must <= 255")),
addressLine3: 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'}))), 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) { 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}/ var brNo_pattern = /[0-9]{8}/


+ 3
- 3
src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js View File

@@ -50,9 +50,9 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
addressLine1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')), addressLine1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),
addressLine2: yup.string().max(255).nullable(), addressLine2: yup.string().max(255).nullable(),
addressLine3: 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(), faxNumber: yup.string().min(8).nullable(),
brExpiryDate: yup.string().min(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))), brExpiryDate: yup.string().min(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))),
brNo: yup.string().max(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'}))) brNo: yup.string().max(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'})))


+ 4
- 4
src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js View File

@@ -53,10 +53,10 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
initialValues: loadedData, initialValues: loadedData,
validationSchema: yup.object().shape({ validationSchema: yup.object().shape({
contactPerson: yup.string().max(40, "不得超過 40 個字符").required('請輸入聯絡人'), 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(), remarks: yup.string().max(255, "不得超過 255 個字符").nullable(),
}), }),
onSubmit: values => { onSubmit: values => {


+ 7
- 2
src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js View File

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


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -454,7 +457,9 @@ const ApplicationDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel><Typography variant="h5">傳真號碼:</Typography></FormLabel>
<FormLabel><Typography variant="h5">
<FormattedMessage id="userFaxNumber"/>:
</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} sm={12} md={9} lg={9}> <Grid item xs={12} sm={12} md={9} lg={9}>


+ 7
- 7
src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js View File

@@ -38,19 +38,19 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
enableReinitialize: true, enableReinitialize: true,
initialValues: currentUserData, initialValues: currentUserData,
validationSchema: yup.object().shape({ 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('請輸入第一行地址'), addressLine1: yup.string().max(255).required('請輸入第一行地址'),
addressLine2: yup.string().max(255).nullable(), addressLine2: yup.string().max(255).nullable(),
addressLine3: 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('請輸入證件號碼'), identification: yup.string().min(7, "請輸入證件號碼").required('請輸入證件號碼'),
checkDigit: yup.string().max(1).required('請輸入括號內的數字或字母').nullable(), checkDigit: yup.string().max(1).required('請輸入括號內的數字或字母').nullable(),
idDocType: yup.string().max(255).required('請輸入證件類別'), 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 => { onSubmit: values => {
console.log(values); console.log(values);


+ 6
- 6
src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js View File

@@ -47,17 +47,17 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
enableReinitialize: true, enableReinitialize: true,
initialValues: currentUserData, initialValues: currentUserData,
validationSchema: yup.object().shape({ 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('請輸入英文名稱')), enCompanyName: yup.string().max(255).required(displayErrorMsg('請輸入英文名稱')),
chCompanyName: yup.string().max(255).nullable(), chCompanyName: yup.string().max(255).nullable(),
addressLine1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')), addressLine1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),
addressLine2: yup.string().max(255).nullable(), addressLine2: yup.string().max(255).nullable(),
addressLine3: 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'}))), brExpiryDate: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))),
brNo: yup.string().max(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'}))) brNo: yup.string().max(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'})))
.test('checkBrNoFormat', displayErrorMsg(`${intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'})} (e.g. 12341234)`), function (value) { .test('checkBrNoFormat', displayErrorMsg(`${intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'})} (e.g. 12341234)`), function (value) {


+ 44
- 37
src/pages/authentication/auth-forms/BusCustomFormWizard.js View File

@@ -89,7 +89,7 @@ const BusCustomFormWizard = (props) => {
}; };


const [selectedAddress4, setSelectedAddress4] = 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 [termsAndConAccept, setTermsAndConAccept] = useState(false);
const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
const [isValid, setisValid] = useState(false); const [isValid, setisValid] = useState(false);
@@ -102,7 +102,7 @@ const BusCustomFormWizard = (props) => {
const [checkEmailBlur, setCheckEmailBlur] = useState(false) const [checkEmailBlur, setCheckEmailBlur] = useState(false)


const address4ComboList = ComboData.district; const address4ComboList = ComboData.district;
const address5ComboList = ComboData.country;
const address5ComboList = ComboData.country(intl);
const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n" const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
+ "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址" + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"
+ "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評" + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評"
@@ -506,7 +506,7 @@ const BusCustomFormWizard = (props) => {
.matches(/^(?=.*[0-9])/, { message: displayErrorMsg('請包括最少1個數字') }) .matches(/^(?=.*[0-9])/, { message: displayErrorMsg('請包括最少1個數字') })
.matches(/^(?=.*[!@#%&])/, { 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('請輸入相同密碼')), 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', { enCompanyName: yup.string().matches(/^[^$^*()]+$/, { message: displayErrorMsg('No special characters $/^/*/(/)') }).when('chCompanyName', {
is: (chCompanyName) => !chCompanyName || chCompanyName.length === 0, is: (chCompanyName) => !chCompanyName || chCompanyName.length === 0,
then: yup.string().required(displayErrorMsg('Please enter either English or Chinese name')), 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, is: (enCompanyName) => !enCompanyName || enCompanyName.length === 0,
then: yup.string().required(displayErrorMsg('請輸入英文或中文名稱')), 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('請輸入第一行地址')), address1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),
address2: yup.string().max(255).required(displayErrorMsg('請輸入第二行地址')), address2: yup.string().max(255).required(displayErrorMsg('請輸入第二行地址')),
address3: 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'}))) brExpiryDate: yup.date().min(new Date().toISOString().split("T")[0], displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'})))
.max("2099-12-31", displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))). .max("2099-12-31", displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))).
required(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']), }, ['enCompanyName', 'chCompanyName']),


}); });
@@ -547,7 +547,7 @@ const BusCustomFormWizard = (props) => {
const handleReset = (resetForm) => { const handleReset = (resetForm) => {
resetForm(); resetForm();
setSelectedAddress4("") setSelectedAddress4("")
setSelectedAddress5(ComboData.country[0])
setSelectedAddress5(ComboData.country(intl)[0])
setCheckCountry(false) setCheckCountry(false)
setFileList([]) setFileList([])
setFileListData([]) setFileListData([])
@@ -695,7 +695,7 @@ const BusCustomFormWizard = (props) => {
</Grid> </Grid>
<Grid item> <Grid item>
<Typography variant="subtitle1"> <Typography variant="subtitle1">
{level?.label}
<FormattedMessage id={level ? level?.label : "pwWeak" }/>
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>
@@ -976,9 +976,10 @@ const BusCustomFormWizard = (props) => {
onChange={(event, newValue) => { onChange={(event, newValue) => {
setSelectedAddress4(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 <Autocomplete
@@ -989,7 +990,7 @@ const BusCustomFormWizard = (props) => {
onChange={(event, newValue) => { onChange={(event, newValue) => {
if (newValue !== null) { if (newValue !== null) {
setSelectedAddress5(newValue); setSelectedAddress5(newValue);
if (newValue === '香港') {
if (newValue === intl.formatMessage({id: 'hongKong'})) {
setCheckCountry(false) setCheckCountry(false)
} else { } else {
setSelectedAddress4(""); setSelectedAddress4("");
@@ -1002,7 +1003,7 @@ const BusCustomFormWizard = (props) => {
}} }}


sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 3px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} 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 && ( {formik.touched.address1 && formik.errors.address1 && (
<FormHelperText error id="helper-text-address1-signup"> <FormHelperText error id="helper-text-address1-signup">
@@ -1023,14 +1024,16 @@ const BusCustomFormWizard = (props) => {
</Grid> </Grid>
<Grid item xs={12} mt={1} mb={1}> <Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}> <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> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="enName-signup"> <InputLabel htmlFor="enName-signup">
<Typography variant="pnspsFormHeader"> <Typography variant="pnspsFormHeader">
姓名
<FormattedMessage id="userContactName"/>
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
</InputLabel> </InputLabel>
@@ -1065,7 +1068,7 @@ const BusCustomFormWizard = (props) => {
<Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}> <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
<InputLabel htmlFor="email-signup"> <InputLabel htmlFor="email-signup">
<Typography variant="pnspsFormHeader"> <Typography variant="pnspsFormHeader">
電郵
<FormattedMessage id="userContactEmail"/>
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
</InputLabel> </InputLabel>
@@ -1077,7 +1080,7 @@ const BusCustomFormWizard = (props) => {
value={formik.values.email.trim()} value={formik.values.email.trim()}
name="email" name="email"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="電郵"
placeholder={intl.formatMessage({id: 'userContactEmail'})}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -1094,7 +1097,7 @@ const BusCustomFormWizard = (props) => {
)} )}
{checkEmail && ( {checkEmail && (
<FormHelperText error id="helper-text-email-signup"> <FormHelperText error id="helper-text-email-signup">
此電郵已被注冊，請使用其他電郵
<FormattedMessage id="emailUsed"/>
</FormHelperText> </FormHelperText>
)} )}
</Stack> </Stack>
@@ -1103,7 +1106,7 @@ const BusCustomFormWizard = (props) => {
<Stack spacing={1} > <Stack spacing={1} >
<InputLabel htmlFor="emailConfirm-signup"> <InputLabel htmlFor="emailConfirm-signup">
<Typography variant="pnspsFormHeader"> <Typography variant="pnspsFormHeader">
確認電郵
<FormattedMessage id="userContactEmail"/>
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
</InputLabel> </InputLabel>
@@ -1116,7 +1119,7 @@ const BusCustomFormWizard = (props) => {
name="emailConfirm" name="emailConfirm"
// onBlur={formik.handleBlur} // onBlur={formik.handleBlur}
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="確認電郵"
placeholder={intl.formatMessage({id: 'confirmEmail'})}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -1143,7 +1146,7 @@ const BusCustomFormWizard = (props) => {
<Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}> <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
<InputLabel htmlFor="phone-signup"> <InputLabel htmlFor="phone-signup">
<Typography variant="pnspsFormHeader"> <Typography variant="pnspsFormHeader">
聯絡電話
<FormattedMessage id="userContactNumber"/>
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
</InputLabel> </InputLabel>
@@ -1163,7 +1166,7 @@ const BusCustomFormWizard = (props) => {
formik.setFieldValue("phoneCountryCode", value); formik.setFieldValue("phoneCountryCode", value);
}} }}
endAdornment={<InputAdornment position="end">-</InputAdornment>} endAdornment={<InputAdornment position="end">-</InputAdornment>}
placeholder="國際區號"
placeholder={intl.formatMessage({id: 'dialingCode'})}
error={Boolean(formik.touched.phone && formik.errors.phone)} error={Boolean(formik.touched.phone && formik.errors.phone)}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
@@ -1190,7 +1193,7 @@ const BusCustomFormWizard = (props) => {
} }
formik.setFieldValue("phone", value); formik.setFieldValue("phone", value);
}} }}
placeholder="聯絡電話"
placeholder={intl.formatMessage({id: 'userContactNumber'})}
error={Boolean(formik.touched.phone && formik.errors.phone)} error={Boolean(formik.touched.phone && formik.errors.phone)}
inputProps={{ inputProps={{
maxLength: 11, maxLength: 11,
@@ -1218,7 +1221,7 @@ const BusCustomFormWizard = (props) => {
<Stack spacing={1} direction="column"> <Stack spacing={1} direction="column">
<InputLabel htmlFor="fax-signup"> <InputLabel htmlFor="fax-signup">
<Typography variant="pnspsFormHeader"> <Typography variant="pnspsFormHeader">
傳真號碼
<FormattedMessage id="userFaxNumber"/>
</Typography> </Typography>
</InputLabel> </InputLabel>
<Stack direction="row"> <Stack direction="row">
@@ -1237,7 +1240,7 @@ const BusCustomFormWizard = (props) => {
} }
formik.setFieldValue("faxCountryCode", value); formik.setFieldValue("faxCountryCode", value);
}} }}
placeholder="國際區號"
placeholder={intl.formatMessage({id: 'dialingCode'})}
endAdornment={<InputAdornment position="end">-</InputAdornment>} endAdornment={<InputAdornment position="end">-</InputAdornment>}
inputProps={{ inputProps={{
maxLength: 3, maxLength: 3,
@@ -1263,7 +1266,7 @@ const BusCustomFormWizard = (props) => {
} }
formik.setFieldValue("fax", value); formik.setFieldValue("fax", value);
}} }}
placeholder="傳真號碼"
placeholder={intl.formatMessage({id: 'userFaxNumber'})}
inputProps={{ inputProps={{
maxLength: 8, maxLength: 8,
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -1537,7 +1540,7 @@ const BusCustomFormWizard = (props) => {
: null} : null}
<Stack direction="row"> <Stack direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup"> <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
國家/地區:
<FormattedMessage id="regionOrCountry"/>:
</Typography> </Typography>
<Typography variant="pnspsFormHeader"> <Typography variant="pnspsFormHeader">
{selectedAddress5} {selectedAddress5}
@@ -1548,7 +1551,9 @@ const BusCustomFormWizard = (props) => {
</Grid> </Grid>
<Grid item xs={12} mt={1} mb={1}> <Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}> <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> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
@@ -1564,7 +1569,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}> <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
電郵:
<FormattedMessage id="userContactEmail"/>:
</Typography> </Typography>
<Typography variant="pnspsFormHeader" id="preview-email-signup"> <Typography variant="pnspsFormHeader" id="preview-email-signup">
{formik.values.email} {formik.values.email}
@@ -1574,7 +1579,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}> <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
聯絡電話:
<FormattedMessage id="userContactNumber"/>:
</Typography> </Typography>
<Typography variant="pnspsFormHeader" id="preview-phone-signup"> <Typography variant="pnspsFormHeader" id="preview-phone-signup">
+{formik.values.phoneCountryCode} {formik.values.phone} +{formik.values.phoneCountryCode} {formik.values.phone}
@@ -1584,7 +1589,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}> <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
傳真號碼:
<FormattedMessage id="userFaxNumber"/>:
</Typography> </Typography>
<Typography variant="pnspsFormHeader" id="preview-fax-signup"> <Typography variant="pnspsFormHeader" id="preview-fax-signup">
+{formik.values.faxCountryCode} {formik.values.fax} +{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}> <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
<CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} /> <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">驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。</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> <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">返回登入頁面</Typography></Button>
</Stack> </Stack>
: :


+ 39
- 31
src/pages/authentication/auth-forms/CustomFormWizard.js View File

@@ -89,7 +89,7 @@ const CustomFormWizard = (props) => {
const [selectedIdDocInputType, setSelectedIdDocInputType] = useState(""); const [selectedIdDocInputType, setSelectedIdDocInputType] = useState("");
// const [selectedIdDocLabel, setSelectedIdDocLabel] = useState(null); // const [selectedIdDocLabel, setSelectedIdDocLabel] = useState(null);
const [selectedAddress4, setSelectedAddress4] = 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 [termsAndConAccept, setTermsAndConAccept] = useState(false);
const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
const [isValid, setisValid] = useState(false); const [isValid, setisValid] = useState(false);
@@ -103,7 +103,7 @@ const CustomFormWizard = (props) => {


const idDocTypeComboList = ComboData.idDocType; const idDocTypeComboList = ComboData.idDocType;
const address4ComboList = ComboData.district; const address4ComboList = ComboData.district;
const address5ComboList = ComboData.country;
const address5ComboList = ComboData.country(intl);
const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n" const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
+ "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址" + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"
+ "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評" + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評"
@@ -564,13 +564,13 @@ const CustomFormWizard = (props) => {
.matches(/^(?=.*[0-9])/, { message: displayErrorMsg('請包括最少1個數字') }) .matches(/^(?=.*[0-9])/, { message: displayErrorMsg('請包括最少1個數字') })
.matches(/^(?=.*[!@#%&])/, { 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('請輸入相同密碼')), 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('請輸入第一行地址')), address1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),
address2: yup.string().max(255).required(displayErrorMsg('請輸入第二行地址')), address2: yup.string().max(255).required(displayErrorMsg('請輸入第二行地址')),
address3: 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}號碼`)) idNo: yup.string().required(displayErrorMsg(`請輸入${selectedIdDocInputType}號碼`))
.matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}號碼不包含特殊字符`) }) .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}號碼不包含特殊字符`) })
.matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputType}號碼不包含空格`) }) .matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputType}號碼不包含空格`) })
@@ -627,18 +627,18 @@ const CustomFormWizard = (props) => {
}), }),
checkDigit: yup.string().max(1).required(displayErrorMsg('請輸入括號內的數字或字母')), checkDigit: yup.string().max(1).required(displayErrorMsg('請輸入括號內的數字或字母')),
idDocType: yup.string().max(255).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位數字'), // 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位數字'), // 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) => { const handleReset = (resetForm) => {
resetForm(); resetForm();
setSelectedAddress4("") setSelectedAddress4("")
setSelectedAddress5(ComboData.country[0])
setSelectedAddress5(ComboData.country(intl)[0])
setCheckCountry(false) setCheckCountry(false)
setSelectedIdDocType({}) setSelectedIdDocType({})
setSelectedIdDocInputType(""); setSelectedIdDocInputType("");
@@ -1181,7 +1181,9 @@ const CustomFormWizard = (props) => {
onChange={(event, newValue) => { onChange={(event, newValue) => {
setSelectedAddress4(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'})} renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'region'})}
/>} />}
/> />
@@ -1193,7 +1195,7 @@ const CustomFormWizard = (props) => {
onChange={(event, newValue) => { onChange={(event, newValue) => {
if (newValue !== null) { if (newValue !== null) {
setSelectedAddress5(newValue); setSelectedAddress5(newValue);
if (newValue === '香港') {
if (newValue === intl.formatMessage({id: 'hongKong'})) {
setCheckCountry(false) setCheckCountry(false)
} else { } else {
setSelectedAddress4(""); setSelectedAddress4("");
@@ -1206,7 +1208,7 @@ const CustomFormWizard = (props) => {
}} }}


sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 3px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} 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 && ( {formik.touched.address1 && formik.errors.address1 && (
<FormHelperText error id="helper-text-address1-signup"> <FormHelperText error id="helper-text-address1-signup">
@@ -1227,7 +1229,9 @@ const CustomFormWizard = (props) => {
</Grid> </Grid>
<Grid item xs={12} mt={1} mb={1}> <Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}> <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> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
@@ -1236,7 +1240,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}> <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
<InputLabel htmlFor="email-signup"> <InputLabel htmlFor="email-signup">
<Typography variant="pnspsFormHeader"> <Typography variant="pnspsFormHeader">
電郵
<FormattedMessage id="userContactEmail"/>
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
</InputLabel> </InputLabel>
@@ -1248,7 +1252,7 @@ const CustomFormWizard = (props) => {
value={formik.values.email.trim()} value={formik.values.email.trim()}
name="email" name="email"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="電郵"
placeholder={intl.formatMessage({id: 'userContactEmail'})}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -1265,7 +1269,7 @@ const CustomFormWizard = (props) => {
)} )}
{checkEmail && ( {checkEmail && (
<FormHelperText error id="helper-text-email-signup"> <FormHelperText error id="helper-text-email-signup">
此電郵已被注冊，請使用其他電郵
<FormattedMessage id="emailUsed"/>
</FormHelperText> </FormHelperText>
)} )}
</Stack> </Stack>
@@ -1274,7 +1278,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1} > <Stack spacing={1} >
<InputLabel htmlFor="emailConfirm-signup"> <InputLabel htmlFor="emailConfirm-signup">
<Typography variant="pnspsFormHeader"> <Typography variant="pnspsFormHeader">
確認電郵
<FormattedMessage id="userContactEmail"/>
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
</InputLabel> </InputLabel>
@@ -1287,7 +1291,7 @@ const CustomFormWizard = (props) => {
name="emailConfirm" name="emailConfirm"
// onBlur={formik.handleBlur} // onBlur={formik.handleBlur}
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="確認電郵"
placeholder={intl.formatMessage({id: 'confirmEmail'})}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -1314,7 +1318,7 @@ const CustomFormWizard = (props) => {
<Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}> <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
<InputLabel htmlFor="phone-signup"> <InputLabel htmlFor="phone-signup">
<Typography variant="pnspsFormHeader"> <Typography variant="pnspsFormHeader">
聯絡電話
<FormattedMessage id="userContactNumber"/>
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
</InputLabel> </InputLabel>
@@ -1333,7 +1337,7 @@ const CustomFormWizard = (props) => {
} }
formik.setFieldValue("phoneCountryCode", value); formik.setFieldValue("phoneCountryCode", value);
}} }}
placeholder="國際區號"
placeholder={intl.formatMessage({id: 'dialingCode'})}
error={Boolean(formik.touched.phone && formik.errors.phone)} error={Boolean(formik.touched.phone && formik.errors.phone)}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
endAdornment={<InputAdornment position="end">-</InputAdornment>} endAdornment={<InputAdornment position="end">-</InputAdornment>}
@@ -1361,7 +1365,7 @@ const CustomFormWizard = (props) => {
} }
formik.setFieldValue("phone", value); formik.setFieldValue("phone", value);
}} }}
placeholder="聯絡電話"
placeholder={intl.formatMessage({id: 'userContactNumber'})}
error={Boolean(formik.touched.phone && formik.errors.phone)} error={Boolean(formik.touched.phone && formik.errors.phone)}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
@@ -1390,7 +1394,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1} direction="column"> <Stack spacing={1} direction="column">
<InputLabel htmlFor="fax-signup"> <InputLabel htmlFor="fax-signup">
<Typography variant="pnspsFormHeader"> <Typography variant="pnspsFormHeader">
傳真號碼
<FormattedMessage id="userFaxNumber"/>
</Typography> </Typography>
</InputLabel> </InputLabel>
<Stack direction="row"> <Stack direction="row">
@@ -1408,7 +1412,7 @@ const CustomFormWizard = (props) => {
} }
formik.setFieldValue("faxCountryCode", value); formik.setFieldValue("faxCountryCode", value);
}} }}
placeholder="國際區號"
placeholder={intl.formatMessage({id: 'dialingCode'})}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
endAdornment={<InputAdornment position="end">-</InputAdornment>} endAdornment={<InputAdornment position="end">-</InputAdornment>}
inputProps={{ inputProps={{
@@ -1435,7 +1439,7 @@ const CustomFormWizard = (props) => {
} }
formik.setFieldValue("fax", value); formik.setFieldValue("fax", value);
}} }}
placeholder="傳真號碼"
placeholder={intl.formatMessage({id: 'userFaxNumber'})}
inputProps={{ inputProps={{
maxLength: 8, maxLength: 8,
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -1703,7 +1707,7 @@ const CustomFormWizard = (props) => {
: null} : null}
<Stack direction="row"> <Stack direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup"> <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
國家/地區:
<FormattedMessage id="regionOrCountry"/>:
</Typography> </Typography>
<Typography variant="pnspsFormHeader">{selectedAddress5}</Typography> <Typography variant="pnspsFormHeader">{selectedAddress5}</Typography>
</Stack> </Stack>
@@ -1712,13 +1716,15 @@ const CustomFormWizard = (props) => {
</Grid> </Grid>
<Grid item xs={12} mt={1} mb={1}> <Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}> <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> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}> <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
電郵:
<FormattedMessage id="userContactEmail"/>:
</Typography> </Typography>
<Typography variant="pnspsFormHeader" id="preview-email-signup"> <Typography variant="pnspsFormHeader" id="preview-email-signup">
{formik.values.email} {formik.values.email}
@@ -1728,7 +1734,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}> <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
聯絡電話:
<FormattedMessage id="userContactNumber"/>:
</Typography> </Typography>
<Typography variant="pnspsFormHeader" id="preview-phone-signup"> <Typography variant="pnspsFormHeader" id="preview-phone-signup">
+{formik.values.phoneCountryCode} {formik.values.phone} +{formik.values.phoneCountryCode} {formik.values.phone}
@@ -1739,7 +1745,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}> <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
傳真號碼:
<FormattedMessage id="userFaxNumber"/>:
</Typography> </Typography>
<Typography variant="pnspsFormHeader" id="preview-fax-signup"> <Typography variant="pnspsFormHeader" id="preview-fax-signup">
+{formik.values.faxCountryCode} {formik.values.fax} +{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}> <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
<CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} /> <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">驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。</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> <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">返回登入頁面</Typography></Button>
</Stack> </Stack>
: :


+ 31
- 25
src/pages/authentication/auth-forms/IAmSmartFormWizard.js View File

@@ -366,11 +366,11 @@ const CustomFormWizard = (props) => {
address1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')), address1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),
address2: yup.string().max(255).required(displayErrorMsg('請輸入第二行地址')), address2: yup.string().max(255).required(displayErrorMsg('請輸入第二行地址')),
address3: 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) => { onChange={(event, newValue) => {
if (newValue !== null) { if (newValue !== null) {
setSelectedAddress5(newValue); setSelectedAddress5(newValue);
if (newValue == '香港') {
if (newValue === intl.formatMessage({id: 'hongKong'})) {
setCheckCountry(false) setCheckCountry(false)
} else { } else {
setSelectedAddress4(""); setSelectedAddress4("");
@@ -535,7 +535,7 @@ const CustomFormWizard = (props) => {
}} }}


sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} 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 && ( {formik.touched.address1 && formik.errors.address1 && (
<FormHelperText error id="helper-text-address1-signup"> <FormHelperText error id="helper-text-address1-signup">
@@ -556,7 +556,9 @@ const CustomFormWizard = (props) => {
</Grid> </Grid>
<Grid item xs={12} mt={1} mb={1}> <Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}> <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> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
@@ -565,7 +567,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}> <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
<InputLabel htmlFor="email-signup"> <InputLabel htmlFor="email-signup">
<Typography variant="h5"> <Typography variant="h5">
電郵
<FormattedMessage id="userContactEmail"/>
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
{iAmSmartData.email?<img src={iAmSmartICon} alt="iAM Smart" width="25" />:null} {iAmSmartData.email?<img src={iAmSmartICon} alt="iAM Smart" width="25" />:null}
</Typography> </Typography>
@@ -578,7 +580,7 @@ const CustomFormWizard = (props) => {
value={formik.values.email.trim()} value={formik.values.email.trim()}
name="email" name="email"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="電郵"
placeholder={intl.formatMessage({id: 'userContactEmail'})}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -595,7 +597,7 @@ const CustomFormWizard = (props) => {
)} )}
{checkEmail && ( {checkEmail && (
<FormHelperText error id="helper-text-email-signup"> <FormHelperText error id="helper-text-email-signup">
此電郵已被注冊，請使用其他電郵
<FormattedMessage id="emailUsed"/>
</FormHelperText> </FormHelperText>
)} )}
</Stack> </Stack>
@@ -604,7 +606,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1} > <Stack spacing={1} >
<InputLabel htmlFor="emailConfirm-signup"> <InputLabel htmlFor="emailConfirm-signup">
<Typography variant="h5"> <Typography variant="h5">
確認電郵
<FormattedMessage id="userContactEmail"/>
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
</InputLabel> </InputLabel>
@@ -617,7 +619,7 @@ const CustomFormWizard = (props) => {
name="emailConfirm" name="emailConfirm"
// onBlur={formik.handleBlur} // onBlur={formik.handleBlur}
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="確認電郵"
placeholder={intl.formatMessage({id: 'confirmEmail'})}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -644,7 +646,7 @@ const CustomFormWizard = (props) => {
<Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}> <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
<InputLabel htmlFor="phone-signup"> <InputLabel htmlFor="phone-signup">
<Typography variant="h5"> <Typography variant="h5">
聯絡電話
<FormattedMessage id="userContactNumber"/>
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
{iAmSmartData.phone?<img src={iAmSmartICon} alt="iAM Smart" width="25" />:null} {iAmSmartData.phone?<img src={iAmSmartICon} alt="iAM Smart" width="25" />:null}
</Typography> </Typography>
@@ -664,7 +666,7 @@ const CustomFormWizard = (props) => {
} }
formik.setFieldValue("phoneCountryCode", value); formik.setFieldValue("phoneCountryCode", value);
}} }}
placeholder="國際區號"
placeholder={intl.formatMessage({id: 'dialingCode'})}
error={Boolean(formik.touched.phone && formik.errors.phone)} error={Boolean(formik.touched.phone && formik.errors.phone)}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
@@ -691,7 +693,7 @@ const CustomFormWizard = (props) => {
} }
formik.setFieldValue("phone", value); formik.setFieldValue("phone", value);
}} }}
placeholder="聯絡電話"
placeholder={intl.formatMessage({id: 'userContactNumber'})}
error={Boolean(formik.touched.phone && formik.errors.phone)} error={Boolean(formik.touched.phone && formik.errors.phone)}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
@@ -720,7 +722,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1} direction="column"> <Stack spacing={1} direction="column">
<InputLabel htmlFor="fax-signup"> <InputLabel htmlFor="fax-signup">
<Typography variant="h5"> <Typography variant="h5">
傳真號碼
<FormattedMessage id="userFaxNumber"/>
</Typography> </Typography>
</InputLabel> </InputLabel>
<Stack direction="row"> <Stack direction="row">
@@ -738,7 +740,7 @@ const CustomFormWizard = (props) => {
} }
formik.setFieldValue("faxCountryCode", value); formik.setFieldValue("faxCountryCode", value);
}} }}
placeholder="國際區號"
placeholder={intl.formatMessage({id: 'dialingCode'})}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
maxLength: 3, maxLength: 3,
@@ -764,7 +766,7 @@ const CustomFormWizard = (props) => {
} }
formik.setFieldValue("fax", value); formik.setFieldValue("fax", value);
}} }}
placeholder="傳真號碼"
placeholder={intl.formatMessage({id: 'userFaxNumber'})}
inputProps={{ inputProps={{
maxLength: 8, maxLength: 8,
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -963,7 +965,7 @@ const CustomFormWizard = (props) => {
: null} : null}
<Stack direction="row"> <Stack direction="row">
<Typography variant="h5" color={theme.palette.grey[600]} id="preview-address5-signup"> <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address5-signup">
國家/地區:
<FormattedMessage id="regionOrCountry"/>:
</Typography> </Typography>
<Typography variant="h5">{selectedAddress5}</Typography> <Typography variant="h5">{selectedAddress5}</Typography>
</Stack> </Stack>
@@ -972,13 +974,15 @@ const CustomFormWizard = (props) => {
</Grid> </Grid>
<Grid item xs={12} mt={1} mb={1}> <Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}> <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> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography variant="h5" color={theme.palette.grey[600]}> <Typography variant="h5" color={theme.palette.grey[600]}>
電郵:
<FormattedMessage id="userContactEmail"/>:
</Typography> </Typography>
<Typography variant="h5" id="preview-email-signup"> <Typography variant="h5" id="preview-email-signup">
{formik.values.email} {formik.values.email}
@@ -988,7 +992,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography variant="h5" color={theme.palette.grey[600]}> <Typography variant="h5" color={theme.palette.grey[600]}>
聯絡電話:
<FormattedMessage id="userContactNumber"/>:
</Typography> </Typography>
<Typography variant="h5" id="preview-phone-signup"> <Typography variant="h5" id="preview-phone-signup">
+{formik.values.phoneCountryCode} {formik.values.phone} +{formik.values.phoneCountryCode} {formik.values.phone}
@@ -999,7 +1003,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography variant="h5" color={theme.palette.grey[600]}> <Typography variant="h5" color={theme.palette.grey[600]}>
傳真號碼:
<FormattedMessage id="userFaxNumber"/>:
</Typography> </Typography>
<Typography variant="h5" id="preview-fax-signup"> <Typography variant="h5" id="preview-fax-signup">
+{formik.values.faxCountryCode} {formik.values.fax} +{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}> <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
<CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} /> <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">驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。</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> <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</Typography></Button>
</Stack> </Stack>
: :


+ 8
- 8
src/themes/buttonConst.js View File

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


+ 1
- 1
src/themes/themeConst.js View File

@@ -235,7 +235,7 @@ export const PNSPS_THEME = createTheme({
minHeight: ROW_HEIGHT, minHeight: ROW_HEIGHT,
maxHeight: ROW_HEIGHT, maxHeight: ROW_HEIGHT,
boxSizing: 'border-box', // Ensure the background shape follows the size of the TextField 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': { '& .MuiInputBase-input:disabled': {
color: 'rgba(0, 0, 0, 0.8)', color: 'rgba(0, 0, 0, 0.8)',


+ 33
- 1
src/translations/en.json View File

@@ -43,10 +43,32 @@
"userName": "Username", "userName": "Username",
"userChineseName": "Chinese Name", "userChineseName": "Chinese Name",
"userEnglishName": "English 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", "userIDNo": "ID Card Number",
"userEmailAddress": "Email Address", "userEmailAddress": "Email Address",
"userPhoneNumber": "Mobile Phone Number", "userPhoneNumber": "Mobile Phone Number",
"userAddress": "Residential Address",
"userAddress": "Address",


"personalInformation": "Personal Information", "personalInformation": "Personal Information",
"yourPersonalInformation": "Your Personal Information", "yourPersonalInformation": "Your Personal Information",
@@ -72,6 +94,16 @@
"addressLine2": "Second line", "addressLine2": "Second line",
"addressLine3": "Third line", "addressLine3": "Third line",
"region": "Region (only applicable to Hong Kong)", "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", "Dashboard": "Dashboard",
"event": "Event" "event": "Event"

+ 32
- 0
src/translations/zh-CN.json View File

@@ -43,6 +43,28 @@
"userName": "用户名称", "userName": "用户名称",
"userChineseName": "中文姓名", "userChineseName": "中文姓名",
"userEnglishName": "英文姓名", "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": "身份证号码", "userIDNo": "身份证号码",
"userEmailAddress": "电邮地址", "userEmailAddress": "电邮地址",
"userPhoneNumber": "手机号码", "userPhoneNumber": "手机号码",
@@ -72,6 +94,16 @@
"addressLine2": "第二行", "addressLine2": "第二行",
"addressLine3": "第三行", "addressLine3": "第三行",
"region": "区域 (只适用于香港)", "region": "区域 (只适用于香港)",
"region Or Country": "国家/地区",
"hong Kong": "香港",
"mainland": "内地",
"macau": "澳门",
"yourContact": "你的联络资料",

"pwWeak": "弱",
"pwNormal": "普通",
"pwGood": "良好",
"pwStrong": "强",


"Dashboard": "仪表板", "Dashboard": "仪表板",
"event": "活动" "event": "活动"

+ 32
- 0
src/translations/zh-HK.json View File

@@ -43,6 +43,28 @@
"userName": "用戶名稱", "userName": "用戶名稱",
"userChineseName": "中文姓名", "userChineseName": "中文姓名",
"userEnglishName": "英文姓名", "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": "身份證號碼", "userIDNo": "身份證號碼",
"userEmailAddress": "電郵地址", "userEmailAddress": "電郵地址",
"userPhoneNumber": "手機號碼", "userPhoneNumber": "手機號碼",
@@ -72,6 +94,16 @@
"addressLine2": "第二行", "addressLine2": "第二行",
"addressLine3": "第三行", "addressLine3": "第三行",
"region": "區域 (只適用於香港)", "region": "區域 (只適用於香港)",
"regionOrCountry": "國家/地區",
"hongKong": "香港",
"mainland": "內地",
"macau": "澳門",
"yourContact": "你的聯絡資料",

"pwWeak": "弱",
"pwNormal": "普通",
"pwGood": "良好",
"pwStrong": "強",


"Dashboard": "儀表板", "Dashboard": "儀表板",
"event": "活動" "event": "活動"

+ 5
- 1
src/utils/ComboData.js View File

@@ -7,7 +7,11 @@ export const idDocType = [
export const district = ['北區', '長洲區', '大埔區', '大嶼山區', '東區', '觀塘區', '黃大仙區', '九龍城區', '葵青區', '南區', '南丫島區', 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' }]; 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' }];




+ 5
- 5
src/utils/password-strength.js View File

@@ -18,11 +18,11 @@ export const strengthColorEng = (count) => {
}; };


export const strengthColorChi = (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 // password strength indicator


Write Preview
Loading…
Cancel
Save