alex
/
PNSPS-frontend-MaterialUI
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

max i18n label

master
Anna Ho 1年前
父节点
36cd5b6107
当前提交
b3bf86ddec
共有 3 个文件被更改，包括 148 次插入 和 94 次删除
合并视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +36
    -10
      src/pages/authentication/auth-forms/BusCustomFormWizard.js
  2. +2
    -2
      src/pages/authentication/auth-forms/CustomFormWizard.js
  3. +110
    -82
      src/pages/authentication/auth-forms/IAmSmartFormWizard.js

+ 36
- 10
src/pages/authentication/auth-forms/BusCustomFormWizard.js 查看文件

@@ -100,6 +100,7 @@ const BusCustomFormWizard = (props) => {
const email = document.getElementById("email-login") const email = document.getElementById("email-login")
const [checkEmail, setCheckEmail] = useState(false) const [checkEmail, setCheckEmail] = useState(false)
const [checkEmailBlur, setCheckEmailBlur] = useState(false) const [checkEmailBlur, setCheckEmailBlur] = useState(false)
const [districtErrStr, setDistrictErrStr] = useState("")


const address4ComboList = ComboData.district; const address4ComboList = ComboData.district;
const address5ComboList = ComboData.country; const address5ComboList = ComboData.country;
@@ -171,6 +172,22 @@ const BusCustomFormWizard = (props) => {
} }
}, [checkEmailBlur]) }, [checkEmailBlur])


useEffect(()=>{
setDistrictErrStr("");
if(selectedAddress5?.type === "hongKong"){
if(selectedAddress4 ==null || selectedAddress4 == ""|| selectedAddress4 == {})
setDistrictErrStr(getRequiredErrStr("district"))
}
},[selectedAddress4, selectedAddress5])

function getRequiredErrStr(fieldname){
return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""}));
}

function getMaxErrStr(num, fieldname){
return displayErrorMsg(intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""}));
}

const onCaptchaChange = () => { const onCaptchaChange = () => {
HttpUtils.post({ HttpUtils.post({
url: POST_CAPTCHA, url: POST_CAPTCHA,
@@ -497,17 +514,17 @@ const BusCustomFormWizard = (props) => {
}), }),


validationSchema: yup.object().shape({ validationSchema: yup.object().shape({
username: yup.string().min(6, displayErrorMsg(intl.formatMessage({id: 'atLeast6CharAccount'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireUsername'})))
username: yup.string().min(6, displayErrorMsg(intl.formatMessage({id: 'atLeast6CharAccount'}))).max(30,getMaxErrStr(30)).required(displayErrorMsg(intl.formatMessage({id: 'requireUsername'})))
.matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpecialCharAccount'})) }) .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpecialCharAccount'})) })
.matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpaceAccount'})) }), .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpaceAccount'})) }),
password: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).required(displayErrorMsg(intl.formatMessage({id: 'requirePassword'})))
password: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).max(60,getMaxErrStr(60)).required(displayErrorMsg(intl.formatMessage({id: 'requirePassword'})))
.matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpacePassword'})) }) .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpacePassword'})) })
.matches(/^(?=.*[a-z])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeastOneSmallLetter'})) }) .matches(/^(?=.*[a-z])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeastOneSmallLetter'})) })
.matches(/^(?=.*[A-Z])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeastOneCapLetter'})) }) .matches(/^(?=.*[A-Z])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeastOneCapLetter'})) })
.matches(/^(?=.*[0-9])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeast1Number'})) }) .matches(/^(?=.*[0-9])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeast1Number'})) })
.matches(/^(?=.*[!@#%&])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeast1SpecialChar'})) }), .matches(/^(?=.*[!@#%&])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeast1SpecialChar'})) }),
confirmPassword: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).required(displayErrorMsg(intl.formatMessage({id: 'pleaseConfirmPassword'}))).oneOf([yup.ref('password'), null], displayErrorMsg(intl.formatMessage({id: 'samePassword'}))), confirmPassword: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).required(displayErrorMsg(intl.formatMessage({id: 'pleaseConfirmPassword'}))).oneOf([yup.ref('password'), null], displayErrorMsg(intl.formatMessage({id: 'samePassword'}))),
enName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireEnglishName'}))),
enName: yup.string().max(40,getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({id: 'userRequireEnglishName'}))),
enCompanyName: yup.string().matches(/^[^$^*()]+$/, { message: displayErrorMsg('No special characters $/^/*/(/)') }).when('chCompanyName', { 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')),
@@ -517,11 +534,11 @@ const BusCustomFormWizard = (props) => {
then: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'validateEngOrChiName'}))), then: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'validateEngOrChiName'}))),
}), }),
chName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireChineseName'}))), chName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireChineseName'}))),
address1: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))),
address2: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine2'}))),
address3: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine3'}))),
email: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))),
emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({id: 'validSameEmail'}))),
address1: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))),
address2: yup.string().max(40, getMaxErrStr(40)),
address3: yup.string().max(40, getMaxErrStr(40)),
email: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))),
emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({id: 'validSameEmail'}))),
phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))), 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'}))), 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'}))), phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
@@ -529,7 +546,7 @@ const BusCustomFormWizard = (props) => {
brExpiryDate: yup.date().min(new Date().toISOString().split("T")[0], displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))) 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'}))),
brNo: yup.string().max(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'}))).test('checkBrNoFormat', displayErrorMsg(`${intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'})} (e.g. 12341234)`), function (value) {
brNo: yup.string().max(8, getMaxErrStr(8)).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'}))).test('checkBrNoFormat', displayErrorMsg(`${intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'})} (e.g. 12341234)`), function (value) {
// var brNo_pattern = /[0-9]{8}-[0-9]{3}-(0[1-9]|1[012])-[0-9]{2}-[0-9A-Z]{1}/ // var brNo_pattern = /[0-9]{8}-[0-9]{3}-(0[1-9]|1[012])-[0-9]{2}-[0-9A-Z]{1}/
var brNo_pattern = /[0-9]{8}/ var brNo_pattern = /[0-9]{8}/
if (value !== undefined) { if (value !== undefined) {
@@ -540,7 +557,7 @@ const BusCustomFormWizard = (props) => {
} }
} }
}), }),
captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證'))
captchaField: yup.string().max(5, getMaxErrStr(5)).required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證'))
}, ['enCompanyName', 'chCompanyName']), }, ['enCompanyName', 'chCompanyName']),


}); });
@@ -942,6 +959,7 @@ const BusCustomFormWizard = (props) => {
id="address2-signup" id="address2-signup"
value={formik.values.address2} value={formik.values.address2}
name="address2" name="address2"
onBlur={formik.handleBlur}
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder={intl.formatMessage({id: 'addressLine2'})} placeholder={intl.formatMessage({id: 'addressLine2'})}
inputProps={{ inputProps={{
@@ -958,6 +976,7 @@ const BusCustomFormWizard = (props) => {
id="address3-signup" id="address3-signup"
value={formik.values.address3} value={formik.values.address3}
name="address3" name="address3"
onBlur={formik.handleBlur}
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder={intl.formatMessage({id: 'addressLine3'})} placeholder={intl.formatMessage({id: 'addressLine3'})}
inputProps={{ inputProps={{
@@ -974,6 +993,8 @@ const BusCustomFormWizard = (props) => {
value={selectedAddress4} value={selectedAddress4}
options={address4ComboList} options={address4ComboList}
disabled={checkCountry} disabled={checkCountry}
error={Boolean(districtErrStr!="")}
onBlur={formik.handleBlur}
getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""} getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
onChange={(event, newValue) => { onChange={(event, newValue) => {
setSelectedAddress4(newValue); setSelectedAddress4(newValue);
@@ -1023,6 +1044,11 @@ const BusCustomFormWizard = (props) => {
{formik.errors.address3} {formik.errors.address3}
</FormHelperText> </FormHelperText>
)} )}
{districtErrStr!= "" && (
<FormHelperText error >
{districtErrStr}
</FormHelperText>
)}
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} mt={1} mb={1}> <Grid item xs={12} mt={1} mb={1}>


+ 2
- 2
src/pages/authentication/auth-forms/CustomFormWizard.js 查看文件

@@ -648,7 +648,7 @@ const CustomFormWizard = (props) => {
// faxCountryCode: yup.string().min(3,'請輸入3位數字'), // faxCountryCode: yup.string().min(3,'請輸入3位數字'),
phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast8Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))), 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(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
captchaField: yup.string().max(5, getMaxErrStr(5)).required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
}), }),
}); });


@@ -1199,7 +1199,7 @@ const CustomFormWizard = (props) => {
value={selectedAddress4} value={selectedAddress4}
options={ComboData.district} options={ComboData.district}
disabled={checkCountry} disabled={checkCountry}
error={Boolean(districtErrStr)}
error={Boolean(districtErrStr!="")}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""} getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
onChange={(event, newValue) => { onChange={(event, newValue) => {


+ 110
- 82
src/pages/authentication/auth-forms/IAmSmartFormWizard.js 查看文件

@@ -38,7 +38,7 @@ import * as HttpUtils from "../../../utils/HttpUtils";
import LoopIcon from '@mui/icons-material/Loop'; import LoopIcon from '@mui/icons-material/Loop';
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import {FormattedMessage, useIntl} from "react-intl";
import { FormattedMessage, useIntl } from "react-intl";


// ============================|| FIREBASE - REGISTER ||============================ // // ============================|| FIREBASE - REGISTER ||============================ //


@@ -63,6 +63,7 @@ const CustomFormWizard = (props) => {
const email = document.getElementById("email-login") const email = document.getElementById("email-login")
const [checkEmail, setCheckEmail] = useState(false) const [checkEmail, setCheckEmail] = useState(false)
const [checkEmailBlur, setCheckEmailBlur] = useState(false) const [checkEmailBlur, setCheckEmailBlur] = useState(false)
const [districtErrStr, setDistrictErrStr] = useState("")


const address4ComboList = ComboData.district; const address4ComboList = ComboData.district;
const address5ComboList = ComboData.country; const address5ComboList = ComboData.country;
@@ -78,11 +79,28 @@ const CustomFormWizard = (props) => {


useEffect(() => { useEffect(() => {
location.state?.responseData ?? {} location.state?.responseData ?? {}
if(captchaImg=="")
onCaptchaChange();
if (captchaImg == "")
onCaptchaChange();
responseToData(); responseToData();
}, []); }, []);


useEffect(() => {
setDistrictErrStr("");
if (selectedAddress5?.type === "hongKong") {
if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {})
setDistrictErrStr(getRequiredErrStr("district"))
}
}, [selectedAddress4, selectedAddress5])

function getRequiredErrStr(fieldname){
return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""}));
}

function getMaxErrStr(num, fieldname){
return displayErrorMsg(intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""}));
}


const responseToData = () => { const responseToData = () => {
//let rd = JSON.parse("{\"emailAddress\":\"[email protected]\",\"postalAddress\":{\"EngPremisesAddress\":{\"EngDistrict\":{\"DcDistrict\":\"KC\",\"Sub-district\":\"TSING YI\"},\"EngEstate\":{\"EstateName\":\"Cheung Hang Estate\",\"EngPhase\":{\"PhaseName\":\"N/A\"}},\"BuildingName\":\"Hang Lai House\",\"EngBlock\":{\"BlockDescriptor\":\"Block\",\"BlockNo\":\"2\"},\"Region\":\"NT\",\"EngStreet\":{\"StreetName\":\"Liu To Road\",\"BuildingNoFrom\":\"6\"},\"Eng3dAddress\":{\"EngFloor\":{\"FloorNum\":\"33\"},\"EngUnit\":{\"UnitDescriptor\":\"Room\",\"UnitNo\":\"3301\"}}}},\"mobileNumber\":{\"CountryCode\":\"852\",\"SubscriberNumber\":\"99999999\"},\"residentialAddress\":{\"ChiPremisesAddress\":{\"Chi3dAddress\":{\"ChiUnit\":{\"UnitDescriptor\":\"室\",\"UnitNo\":\"1010\"},\"ChiFloor\":{\"FloorNum\":\"10\"}},\"ChiBlock\":{\"BlockDescriptor\":\"座\",\"BlockNo\":\"2\"},\"BuildingName\":\"亨麗樓(第2座)\",\"ChiDistrict\":{\"DcDistrict\":\"KC\",\"Sub-district\":\"青衣\"},\"Region\":\"新界\",\"ChiEstate\":{\"EstateName\":\"長亨邨\"},\"ChiStreet\":{\"StreetName\":\"寮肚路\",\"BuildingNoFrom\":\"6\"}}},\"enName\":{\"UnstructuredName\":\"Testing Co One\"},\"idNo\":{\"Identification\":\"G561107\",\"CheckDigit\":\"4\"},\"chName\":{\"ChineseName\":\"測試商一\"}}"); //let rd = JSON.parse("{\"emailAddress\":\"[email protected]\",\"postalAddress\":{\"EngPremisesAddress\":{\"EngDistrict\":{\"DcDistrict\":\"KC\",\"Sub-district\":\"TSING YI\"},\"EngEstate\":{\"EstateName\":\"Cheung Hang Estate\",\"EngPhase\":{\"PhaseName\":\"N/A\"}},\"BuildingName\":\"Hang Lai House\",\"EngBlock\":{\"BlockDescriptor\":\"Block\",\"BlockNo\":\"2\"},\"Region\":\"NT\",\"EngStreet\":{\"StreetName\":\"Liu To Road\",\"BuildingNoFrom\":\"6\"},\"Eng3dAddress\":{\"EngFloor\":{\"FloorNum\":\"33\"},\"EngUnit\":{\"UnitDescriptor\":\"Room\",\"UnitNo\":\"3301\"}}}},\"mobileNumber\":{\"CountryCode\":\"852\",\"SubscriberNumber\":\"99999999\"},\"residentialAddress\":{\"ChiPremisesAddress\":{\"Chi3dAddress\":{\"ChiUnit\":{\"UnitDescriptor\":\"室\",\"UnitNo\":\"1010\"},\"ChiFloor\":{\"FloorNum\":\"10\"}},\"ChiBlock\":{\"BlockDescriptor\":\"座\",\"BlockNo\":\"2\"},\"BuildingName\":\"亨麗樓(第2座)\",\"ChiDistrict\":{\"DcDistrict\":\"KC\",\"Sub-district\":\"青衣\"},\"Region\":\"新界\",\"ChiEstate\":{\"EstateName\":\"長亨邨\"},\"ChiStreet\":{\"StreetName\":\"寮肚路\",\"BuildingNoFrom\":\"6\"}}},\"enName\":{\"UnstructuredName\":\"Testing Co One\"},\"idNo\":{\"Identification\":\"G561107\",\"CheckDigit\":\"4\"},\"chName\":{\"ChineseName\":\"測試商一\"}}");
let rd = JSON.parse(location.state?.responseData.data); let rd = JSON.parse(location.state?.responseData.data);
@@ -91,7 +109,7 @@ const CustomFormWizard = (props) => {
"chName": rd?.chName?.ChineseName ?? "", "chName": rd?.chName?.ChineseName ?? "",
"idNo": rd?.idNo?.Identification ?? "", "idNo": rd?.idNo?.Identification ?? "",
"checkDigit": rd?.idNo?.CheckDigit ?? "", "checkDigit": rd?.idNo?.CheckDigit ?? "",
"email": rd?.emailAddress ?? "",
"email": rd?.emailAddress ?? "",
"phone": rd?.mobileNumber?.SubscriberNumber ?? "", "phone": rd?.mobileNumber?.SubscriberNumber ?? "",
"phoneCountryCode": rd?.mobileNumber?.CountryCode ?? "", "phoneCountryCode": rd?.mobileNumber?.CountryCode ?? "",
}; };
@@ -136,7 +154,7 @@ const CustomFormWizard = (props) => {
let buildingName = pAdd.BuildingName ?? ""; let buildingName = pAdd.BuildingName ?? "";
let estate = pAdd.ChiEstate?.EstateName ?? ""; let estate = pAdd.ChiEstate?.EstateName ?? "";
let district = pAdd.ChiDistrict["Sub - district"] ?? ""; let district = pAdd.ChiDistrict["Sub - district"] ?? "";
return getAddressStr([district, street, estate, buildingName, street, floor, block, unit ]);
return getAddressStr([district, street, estate, buildingName, street, floor, block, unit]);
} }


const getAddressStr = (strs) => { const getAddressStr = (strs) => {
@@ -180,22 +198,22 @@ const CustomFormWizard = (props) => {


useEffect(() => { useEffect(() => {
if (iAmSmartData) { if (iAmSmartData) {
formik.setFieldValue("enName", iAmSmartData.enName??"");
formik.setFieldValue("chName", iAmSmartData.chName??"");
formik.setFieldValue("idNo", iAmSmartData.idNo??"");
formik.setFieldValue("checkDigit", iAmSmartData.checkDigit??"");
formik.setFieldValue("email", iAmSmartData.email??"");
formik.setFieldValue("phone", iAmSmartData.phone??"");
formik.setFieldValue("phoneCountryCode", iAmSmartData.phoneCountryCode??"");
formik.setFieldValue("address1", iAmSmartData.address1??"");
props.setIdNo(iAmSmartData.idNo??"");
formik.setFieldValue("enName", iAmSmartData.enName ?? "");
formik.setFieldValue("chName", iAmSmartData.chName ?? "");
formik.setFieldValue("idNo", iAmSmartData.idNo ?? "");
formik.setFieldValue("checkDigit", iAmSmartData.checkDigit ?? "");
formik.setFieldValue("email", iAmSmartData.email ?? "");
formik.setFieldValue("phone", iAmSmartData.phone ?? "");
formik.setFieldValue("phoneCountryCode", iAmSmartData.phoneCountryCode ?? "");
formik.setFieldValue("address1", iAmSmartData.address1 ?? "");
props.setIdNo(iAmSmartData.idNo ?? "");
} }
}, [iAmSmartData]) }, [iAmSmartData])


const onCaptchaChange = () => { const onCaptchaChange = () => {
HttpUtils.post({ HttpUtils.post({
url: POST_CAPTCHA, url: POST_CAPTCHA,
params: { width: 130, height: 40, captcha: captchaImg},
params: { width: 130, height: 40, captcha: captchaImg },
onSuccess: (responseData) => { onSuccess: (responseData) => {
props.setBase64Url(responseData.base64Url) props.setBase64Url(responseData.base64Url)
localStorage.setItem("base64Url", responseData.base64Url); localStorage.setItem("base64Url", responseData.base64Url);
@@ -250,8 +268,8 @@ const CustomFormWizard = (props) => {


useEffect(() => { useEffect(() => {
props.step == 2 ? _onSubmit() : null; props.step == 2 ? _onSubmit() : null;
if(captchaImg=="")
onCaptchaChange();
if (captchaImg == "")
onCaptchaChange();
checkDataField(values) checkDataField(values)
}, [props.step]) }, [props.step])


@@ -350,27 +368,27 @@ const CustomFormWizard = (props) => {


const formik = useFormik({ const formik = useFormik({
initialValues: ({ initialValues: ({
email: iAmSmartData.email??"",
emailConfirm: iAmSmartData.email??"",
address1: iAmSmartData.address1??"",
email: iAmSmartData.email ?? "",
emailConfirm: iAmSmartData.email ?? "",
address1: iAmSmartData.address1 ?? "",
address2: '', address2: '',
address3: '', address3: '',
phone: iAmSmartData.phone??"",
phoneCountryCode: iAmSmartData.phoneCountryCode??"852",
phone: iAmSmartData.phone ?? "",
phoneCountryCode: iAmSmartData.phoneCountryCode ?? "852",
submit: null, submit: null,
fax: '', fax: '',
faxCountryCode: '852', faxCountryCode: '852',
captchaField: '' captchaField: ''
}), }),
validationSchema: yup.object().shape({ validationSchema: yup.object().shape({
address1: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))),
address2: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine2'}))),
address3: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine3'}))),
email: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))),
emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({id: 'validSameEmail'}))),
phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
address1: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
address2: yup.string().max(40),
address3: yup.string().max(40),
email: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))),
emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({ id: 'validSameEmail' }))),
phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast2Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))),
phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast8Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))),
captchaField: yup.string().max(5, getMaxErrStr(5)).required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
}), }),
}); });


@@ -393,12 +411,12 @@ const CustomFormWizard = (props) => {


<div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}> <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
<Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}> <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
<FormattedMessage id="becomeNewPersonalUser"/>
<FormattedMessage id="becomeNewPersonalUser" />
</Typography><img src={iAmSmartICon} alt="iAM Smart" width="50" /> </Typography><img src={iAmSmartICon} alt="iAM Smart" width="50" />
</div> </div>


<Typography mt={0.25} variant="h6" sx={{ color: '#f10000' }}> <Typography mt={0.25} variant="h6" sx={{ color: '#f10000' }}>
<FormattedMessage id="requireString"/>。
<FormattedMessage id="requireString" />。
</Typography> </Typography>
<Stack mt={1} direction="row" style={{ alignItems: "center" }}><img src={iAmSmartICon} alt="iAM Smart" width="25" /><Typography mt={0.25} variant="h6" >: 表示該項由「智方便」提供。</Typography></Stack> <Stack mt={1} direction="row" style={{ alignItems: "center" }}><img src={iAmSmartICon} alt="iAM Smart" width="25" /><Typography mt={0.25} variant="h6" >: 表示該項由「智方便」提供。</Typography></Stack>


@@ -409,7 +427,7 @@ const CustomFormWizard = (props) => {
<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 display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="yourPersonalInformation"/>
<FormattedMessage id="yourPersonalInformation" />
</Typography> </Typography>
</Stack> </Stack>
</Grid> </Grid>
@@ -418,7 +436,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="idDocType-signup"> <InputLabel htmlFor="idDocType-signup">
<Typography variant="h5"> <Typography variant="h5">
香港身份證: {iAmSmartData.idNo+"("+iAmSmartData.checkDigit+")"}
香港身份證: {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"}
</Typography> </Typography>
</InputLabel> </InputLabel>
</Stack> </Stack>
@@ -428,7 +446,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="enName-signup"> <InputLabel htmlFor="enName-signup">
<Typography variant="h5"> <Typography variant="h5">
<FormattedMessage id="userEnglishName"/>: {iAmSmartData.enName}
<FormattedMessage id="userEnglishName" />: {iAmSmartData.enName}
</Typography> </Typography>
</InputLabel> </InputLabel>


@@ -438,7 +456,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="chName-signup"> <InputLabel htmlFor="chName-signup">
<Typography variant="h5"> <Typography variant="h5">
{intl.formatMessage({id: 'userChineseName'})}: {iAmSmartData.chName}
{intl.formatMessage({ id: 'userChineseName' })}: {iAmSmartData.chName}
</Typography> </Typography>
</InputLabel> </InputLabel>
</Stack> </Stack>
@@ -447,9 +465,9 @@ const CustomFormWizard = (props) => {
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="address1-signup"> <InputLabel htmlFor="address1-signup">
<Typography variant="h5"> <Typography variant="h5">
<FormattedMessage id="formAddress"/>
<FormattedMessage id="formAddress" />
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
{iAmSmartData.address1?<img src={iAmSmartICon} alt="iAM Smart" width="25" />:null}
{iAmSmartData.address1 ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
</Typography> </Typography>
</InputLabel> </InputLabel>
<OutlinedInput <OutlinedInput
@@ -459,7 +477,7 @@ const CustomFormWizard = (props) => {
value={formik.values.address1} value={formik.values.address1}
name="address1" name="address1"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder={intl.formatMessage({id: 'addressLine1'})}
placeholder={intl.formatMessage({ id: 'addressLine1' })}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -475,8 +493,9 @@ const CustomFormWizard = (props) => {
id="address2-signup" id="address2-signup"
value={formik.values.address2} value={formik.values.address2}
name="address2" name="address2"
onBlur={formik.handleBlur}
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder={intl.formatMessage({id: 'addressLine2'})}
placeholder={intl.formatMessage({ id: 'addressLine2' })}
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
@@ -491,8 +510,9 @@ const CustomFormWizard = (props) => {
id="address3-signup" id="address3-signup"
value={formik.values.address3} value={formik.values.address3}
name="address3" name="address3"
onBlur={formik.handleBlur}
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder={intl.formatMessage({id: 'addressLine3'})}
placeholder={intl.formatMessage({ id: 'addressLine3' })}
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
@@ -507,12 +527,14 @@ const CustomFormWizard = (props) => {
value={selectedAddress4} value={selectedAddress4}
options={address4ComboList} options={address4ComboList}
disabled={checkCountry} disabled={checkCountry}
getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
error={Boolean(districtErrStr!="")}
onBlur={formik.handleBlur}
getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
onChange={(event, newValue) => { onChange={(event, newValue) => {
setSelectedAddress4(newValue); setSelectedAddress4(newValue);
}} }}
sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'region'})}
renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({ id: 'region' })}
/>} />}
/> />
<Autocomplete <Autocomplete
@@ -520,7 +542,7 @@ const CustomFormWizard = (props) => {
id="address5-combo" id="address5-combo"
value={selectedAddress5} value={selectedAddress5}
options={address5ComboList} options={address5ComboList}
getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
onChange={(event, newValue) => { onChange={(event, newValue) => {
if (newValue !== null) { if (newValue !== null) {
setSelectedAddress5(newValue); setSelectedAddress5(newValue);
@@ -537,7 +559,7 @@ const CustomFormWizard = (props) => {
}} }}


sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'regionOrCountry'})} />}
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">
@@ -554,12 +576,18 @@ const CustomFormWizard = (props) => {
{formik.errors.address3} {formik.errors.address3}
</FormHelperText> </FormHelperText>
)} )}

{districtErrStr != "" && (
<FormHelperText error >
{districtErrStr}
</FormHelperText>
)}
</Stack> </Stack>
</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 display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="yourContact"/>
<FormattedMessage id="yourContact" />
</Typography> </Typography>
</Stack> </Stack>
</Grid> </Grid>
@@ -569,9 +597,9 @@ 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"/>
<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>
</InputLabel> </InputLabel>
<OutlinedInput <OutlinedInput
@@ -582,7 +610,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={intl.formatMessage({id: 'userContactEmail'})}
placeholder={intl.formatMessage({ id: 'userContactEmail' })}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -599,7 +627,7 @@ const CustomFormWizard = (props) => {
)} )}
{checkEmail && ( {checkEmail && (
<FormHelperText error id="helper-text-email-signup"> <FormHelperText error id="helper-text-email-signup">
<FormattedMessage id="emailUsed"/>
<FormattedMessage id="emailUsed" />
</FormHelperText> </FormHelperText>
)} )}
</Stack> </Stack>
@@ -608,7 +636,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"/>
<FormattedMessage id="userContactEmail" />
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
</InputLabel> </InputLabel>
@@ -621,7 +649,7 @@ const CustomFormWizard = (props) => {
name="emailConfirm" name="emailConfirm"
// onBlur={formik.handleBlur} // onBlur={formik.handleBlur}
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder={intl.formatMessage({id: 'confirmEmail'})}
placeholder={intl.formatMessage({ id: 'confirmEmail' })}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -648,9 +676,9 @@ 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"/>
<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>
</InputLabel> </InputLabel>
<Stack direction="row"> <Stack direction="row">
@@ -668,7 +696,7 @@ const CustomFormWizard = (props) => {
} }
formik.setFieldValue("phoneCountryCode", value); formik.setFieldValue("phoneCountryCode", value);
}} }}
placeholder={intl.formatMessage({id: 'dialingCode'})}
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={{
@@ -695,7 +723,7 @@ const CustomFormWizard = (props) => {
} }
formik.setFieldValue("phone", value); formik.setFieldValue("phone", value);
}} }}
placeholder={intl.formatMessage({id: 'userContactNumber'})}
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={{
@@ -724,7 +752,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"/>
<FormattedMessage id="userFaxNumber" />
</Typography> </Typography>
</InputLabel> </InputLabel>
<Stack direction="row"> <Stack direction="row">
@@ -742,7 +770,7 @@ const CustomFormWizard = (props) => {
} }
formik.setFieldValue("faxCountryCode", value); formik.setFieldValue("faxCountryCode", value);
}} }}
placeholder={intl.formatMessage({id: 'dialingCode'})}
placeholder={intl.formatMessage({ id: 'dialingCode' })}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
inputProps={{ inputProps={{
maxLength: 3, maxLength: 3,
@@ -768,7 +796,7 @@ const CustomFormWizard = (props) => {
} }
formik.setFieldValue("fax", value); formik.setFieldValue("fax", value);
}} }}
placeholder={intl.formatMessage({id: 'userFaxNumber'})}
placeholder={intl.formatMessage({ id: 'userFaxNumber' })}
inputProps={{ inputProps={{
maxLength: 8, maxLength: 8,
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -791,7 +819,7 @@ const CustomFormWizard = (props) => {
<Grid container> <Grid container>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}> <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="termsAndCondition"/>
<FormattedMessage id="termsAndCondition" />
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
</Grid> </Grid>
@@ -816,7 +844,7 @@ const CustomFormWizard = (props) => {
size="small" size="small"
/> />
<Typography variant="h5"> <Typography variant="h5">
<FormattedMessage id="acceptTerms"/>
<FormattedMessage id="acceptTerms" />
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>
@@ -832,7 +860,7 @@ const CustomFormWizard = (props) => {
size="small" size="small"
/> />
<Typography variant="h5"> <Typography variant="h5">
<FormattedMessage id="rejectTerms"/>
<FormattedMessage id="rejectTerms" />
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>
@@ -846,7 +874,7 @@ const CustomFormWizard = (props) => {
<Grid container> <Grid container>
<Stack direction="column"> <Stack direction="column">
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}> <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="verify"/>
<FormattedMessage id="verify" />
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
@@ -894,7 +922,7 @@ const CustomFormWizard = (props) => {
<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 } }}>
<div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}> <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
<Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}> <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
<FormattedMessage id="becomeNewPersonalUser"/>
<FormattedMessage id="becomeNewPersonalUser" />
</Typography> </Typography>
</div> </div>
</Stack> </Stack>
@@ -904,7 +932,7 @@ const CustomFormWizard = (props) => {
<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 display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="yourPersonalInformation"/>
<FormattedMessage id="yourPersonalInformation" />
</Typography> </Typography>
{/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary"> {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
Already have an account? Already have an account?
@@ -914,10 +942,10 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={12} > <Grid item xs={12} md={12} >
<Stack spacing={1}> <Stack spacing={1}>
<Typography variant="h5" color={theme.palette.grey[600]}> <Typography variant="h5" color={theme.palette.grey[600]}>
<FormattedMessage id="userIdDoc"/>
<FormattedMessage id="userIdDoc" />
</Typography> </Typography>
<Typography variant="h5" name="preview-idDocType"> <Typography variant="h5" name="preview-idDocType">
{formik.values.idNo+"("+formik.values.checkDigit+")"}
{formik.values.idNo + "(" + formik.values.checkDigit + ")"}
</Typography> </Typography>
</Stack> </Stack>
</Grid> </Grid>
@@ -925,7 +953,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="userEnglishName"/>:
<FormattedMessage id="userEnglishName" />:
</Typography> </Typography>
<Typography variant="h5" id="preview-enName-signup"> <Typography variant="h5" id="preview-enName-signup">
{formik.values.enName} {formik.values.enName}
@@ -935,7 +963,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="userChineseName"/>:
<FormattedMessage id="userChineseName" />:
</Typography> </Typography>
<Typography variant="h5" id="preview-chName-signup"> <Typography variant="h5" id="preview-chName-signup">
{formik.values.chName} {formik.values.chName}
@@ -945,7 +973,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12}> <Grid item xs={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="formAddress"/>:
<FormattedMessage id="formAddress" />:
</Typography> </Typography>
<Stack spacing={1} direction="column"> <Stack spacing={1} direction="column">
<Typography variant="h5" id="preview-address1-signup"> <Typography variant="h5" id="preview-address1-signup">
@@ -964,19 +992,19 @@ const CustomFormWizard = (props) => {
{selectedAddress5.type === "hongKong" ? {selectedAddress5.type === "hongKong" ?
<Stack direction="row"> <Stack direction="row">
<Typography variant="h5" color={theme.palette.grey[600]} id="preview-address4-signup"> <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address4-signup">
<FormattedMessage id="region"/>:
<FormattedMessage id="region" />:
</Typography> </Typography>
<Typography variant="h5"> <Typography variant="h5">
{!selectedAddress4? "" : intl.formatMessage({id: selectedAddress4.type})}
{!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })}
</Typography> </Typography>
</Stack> </Stack>
: 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"/>:
<FormattedMessage id="regionOrCountry" />:
</Typography> </Typography>
<Typography variant="h5"> <Typography variant="h5">
{intl.formatMessage({id: selectedAddress5.type})}
{intl.formatMessage({ id: selectedAddress5.type })}
</Typography> </Typography>
</Stack> </Stack>
</Stack> </Stack>
@@ -985,14 +1013,14 @@ const CustomFormWizard = (props) => {
<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 display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="yourContact"/>
<FormattedMessage id="yourContact" />
</Typography> </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"/>:
<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}
@@ -1002,7 +1030,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"/>:
<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}
@@ -1013,7 +1041,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"/>:
<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}
@@ -1036,13 +1064,13 @@ 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 display="inline" variant="h4">
<FormattedMessage id="registerSubmitted"/>
<FormattedMessage id="registerSubmitted" />
</Typography> </Typography>
<Typography display="inline" variant="h4"> <Typography display="inline" variant="h4">
<FormattedMessage id="emailSent"/>
<FormattedMessage id="emailSent" />
</Typography> </Typography>
<Button variant="outlined" component={Link} to="/login" ><Typography variant="h5"> <Button variant="outlined" component={Link} to="/login" ><Typography variant="h5">
<FormattedMessage id="backToLogin"/>
<FormattedMessage id="backToLogin" />
</Typography></Button> </Typography></Button>
</Stack> </Stack>
: :
@@ -1054,7 +1082,7 @@ const CustomFormWizard = (props) => {
<FormattedMessage id="registerFail" /> <FormattedMessage id="registerFail" />
</Typography> </Typography>
<Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="h5"> <Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="h5">
<FormattedMessage id="backToLogin"/>
<FormattedMessage id="backToLogin" />
</Typography></Button> </Typography></Button>
</Stack> </Stack>
} }


撰写 预览
正在加载...
取消
保存