alex
/
PNSPS-frontend-MaterialUI
1
0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
Sfoglia il codice sorgente

fix idCard i18n label

master
Anna Ho 1 anno fa
parent
0c4e106454
commit
bd8b8166e4
1 ha cambiato i file con 130 aggiunte e 127 eliminazioni
Visualizzazione separata
Opzioni Diff
Mostra statistiche Scarica il file Patch Scarica il file Diff
  1. +130
    -127
      src/pages/authentication/auth-forms/CustomFormWizard.js

+ 130
- 127
src/pages/authentication/auth-forms/CustomFormWizard.js Vedi File

@@ -110,7 +110,7 @@ const CustomFormWizard = (props) => {

useEffect(() => {
changePassword('');
if(captchaImg=="")
if (captchaImg == "")
onCaptchaChange();
}, []);

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

useEffect(() => {
props.step == 2 ? _onSubmit() : null;
if(captchaImg=="")
if (captchaImg == "")
onCaptchaChange();
checkDataField(values)
}, [props.step])
@@ -309,7 +309,7 @@ const CustomFormWizard = (props) => {
const _onSubmit = () => {
setLoding(true);
values.idDocType = selectedIdDocType.type
values.address4 = selectedAddress4==null?"":selectedAddress4.key
values.address4 = selectedAddress4 == null ? "" : selectedAddress4.key
values.address5 = selectedAddress5.key
// console.log(values)
const userAddress = {
@@ -383,7 +383,7 @@ const CustomFormWizard = (props) => {
})
.then((
// response
) => {
) => {
// console.log(response)
setCheckUpload(true)
setLoding(false);
@@ -551,27 +551,27 @@ const CustomFormWizard = (props) => {
captchaField: ''
}),
validationSchema: yup.object().shape({
username: yup.string().min(6, displayErrorMsg(intl.formatMessage({id: 'atLeast6CharAccount'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireUsername'})))
.matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpecialCharAccount'})) })
.matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpaceAccount'})) }),
password: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).required(displayErrorMsg(intl.formatMessage({id: 'requirePassword'})))
.matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpacePassword'})) })
.matches(/^(?=.*[a-z])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeastOneSmallLetter'})) })
.matches(/^(?=.*[A-Z])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeastOneCapLetter'})) })
.matches(/^(?=.*[0-9])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeast1Number'})) })
.matches(/^(?=.*[!@#%&])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeast1SpecialChar'})) }),
confirmPassword: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).required(displayErrorMsg(intl.formatMessage({id: 'pleaseConfirmPassword'}))).oneOf([yup.ref('password'), null], displayErrorMsg(intl.formatMessage({id: 'samePassword'}))),
enName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireEnglishName'}))),
chName: yup.string().max(6).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'}))),
idNo: yup.string().required(displayErrorMsg(`${intl.formatMessage({id: 'require'})}${selectedIdDocInputType}${intl.formatMessage({id: 'number'})}`))
.matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({id: 'noSpecialCharacter'})}`) })
.matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({id: 'noSpace'})}`) })
.test('checkIDCardFormat', displayErrorMsg(`${intl.formatMessage({id: 'requiredValid'})}${selectedIdDocInputType}${intl.formatMessage({id: 'number'})}`), function (value) {
username: yup.string().min(6, displayErrorMsg(intl.formatMessage({ id: 'atLeast6CharAccount' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireUsername' })))
.matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpecialCharAccount' })) })
.matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpaceAccount' })) }),
password: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'atLeast8CharPassword' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requirePassword' })))
.matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpacePassword' })) })
.matches(/^(?=.*[a-z])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeastOneSmallLetter' })) })
.matches(/^(?=.*[A-Z])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeastOneCapLetter' })) })
.matches(/^(?=.*[0-9])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeast1Number' })) })
.matches(/^(?=.*[!@#%&])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeast1SpecialChar' })) }),
confirmPassword: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'atLeast8CharPassword' }))).required(displayErrorMsg(intl.formatMessage({ id: 'pleaseConfirmPassword' }))).oneOf([yup.ref('password'), null], displayErrorMsg(intl.formatMessage({ id: 'samePassword' }))),
enName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireEnglishName' }))),
chName: yup.string().max(6).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' }))),
idNo: yup.string().required(displayErrorMsg(`${intl.formatMessage({ id: 'require' })}${selectedIdDocInputType}${intl.formatMessage({ id: 'number' })}`))
.matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpecialCharacter' })}`) })
.matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpace' })}`) })
.test('checkIDCardFormat', displayErrorMsg(`${intl.formatMessage({ id: 'requiredValid' })}${selectedIdDocInputType}${intl.formatMessage({ id: 'number' })}`), function (value) {
const idDocType = selectedIdDocType.type;
var pattern_HKIDv1 = /^[A-Z]{1}[0-9]{6}$/;
var pattern_HKIDv2 = /^[A-Z]{2}[0-9]{6}$/;
@@ -622,13 +622,13 @@ const CustomFormWizard = (props) => {
}
}
}),
checkDigit: yup.string().max(1).required(displayErrorMsg(intl.formatMessage({id: 'requiredNumberInQuote'}))),
idDocType: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireIdDocType'}))),
phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
checkDigit: yup.string().max(1).required(displayErrorMsg(intl.formatMessage({ id: 'requiredNumberInQuote' }))),
idDocType: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'requireIdDocType' }))),
phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast2Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))),
// faxCountryCode: yup.string().min(3,'請輸入3位數字'),
phone: yup.string().min(8, displayErrorMsg(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位數字'),
captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
}),
});

@@ -661,19 +661,19 @@ const CustomFormWizard = (props) => {
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Button variant="outlined" type="reset" onClick={handleReset.bind(null, formik.resetForm)} sx={{ height: '40px' }}>
<Typography variant="pnspsFormHeader">
<FormattedMessage id="reset"/>
<FormattedMessage id="reset" />
</Typography>
</Button>
<div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
<Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
<FormattedMessage id="becomeNewPersonalUser"/>
<FormattedMessage id="becomeNewPersonalUser" />
</Typography>
</div>
<Typography mt={0.25} variant="h6" sx={{ color: '#f10000' }}>
<FormattedMessage id="requireString"/>
<FormattedMessage id="requireString" />
</Typography>
<Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="yourLoginInformation"/>
<FormattedMessage id="yourLoginInformation" />
</Typography>
</Stack>
</Grid>
@@ -683,7 +683,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1}>
<InputLabel htmlFor="username-signup">
<Typography variant="pnspsFormHeader">
<FormattedMessage id="userLoginName"/>
<FormattedMessage id="userLoginName" />
<span style={{ color: '#f10000' }}>*</span>
{/*<Button*/}
{/* variant="contained"*/}
@@ -703,7 +703,7 @@ const CustomFormWizard = (props) => {
props.setUsername(e.target.value)
formik.handleChange(e)
}}
placeholder={intl.formatMessage({id: 'userLoginName'})}
placeholder={intl.formatMessage({ id: 'userLoginName' })}
fullWidth
error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)}
onBlur={formik.handleBlur}
@@ -722,7 +722,7 @@ const CustomFormWizard = (props) => {
)}
{checkUsername && (
<FormHelperText error id="helper-text-username-signup">
<FormattedMessage id="usernameTaken"/>
<FormattedMessage id="usernameTaken" />
</FormHelperText>
)}
</Stack>
@@ -734,7 +734,7 @@ const CustomFormWizard = (props) => {
<Stack direction="row" justifyContent="space-between">
<InputLabel htmlFor="password-signup">
<Typography variant="pnspsFormHeader">
<FormattedMessage id="userPassword"/>
<FormattedMessage id="userPassword" />
<span style={{ color: '#f10000' }}>*</span>
</Typography>
</InputLabel>
@@ -763,7 +763,7 @@ const CustomFormWizard = (props) => {
</IconButton>
</InputAdornment>
}
placeholder={intl.formatMessage({id: 'userPassword'})}
placeholder={intl.formatMessage({ id: 'userPassword' })}
onBlur={formik.handleBlur}
inputProps={{
onKeyDown: (e) => {
@@ -786,7 +786,7 @@ const CustomFormWizard = (props) => {
</Grid>
<Grid item>
<Typography variant="subtitle1">
<FormattedMessage id={level ? level?.label : "pwWeak" }/>
<FormattedMessage id={level ? level?.label : "pwWeak"} />
</Typography>
</Grid>
</Grid>
@@ -796,7 +796,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1}>
<InputLabel htmlFor="confirmPassword-signup">
<Typography variant="pnspsFormHeader">
<FormattedMessage id="confirmPassword"/>
<FormattedMessage id="confirmPassword" />
<span style={{ color: '#f10000' }}>*</span>
</Typography>
</InputLabel>
@@ -830,7 +830,7 @@ const CustomFormWizard = (props) => {
</IconButton>
</InputAdornment>
}
placeholder={intl.formatMessage({id: 'confirmPassword'})}
placeholder={intl.formatMessage({ id: 'confirmPassword' })}
fullWidth
error={Boolean(formik.touched.confirmPassword && formik.errors.confirmPassword)}
/>
@@ -841,12 +841,12 @@ const CustomFormWizard = (props) => {
)}
</Stack>
<Grid container spacing={2} alignItems="center">
<Grid item sx={{mt:1}}>
<Grid item sx={{ mt: 1 }}>
<Typography variant="subtitle1">
•<FormattedMessage id="pwRemark1"/> <br />
•<FormattedMessage id="pwRemark2"/><br />
•<FormattedMessage id="pwRemark3"/><br />
•<FormattedMessage id="pwRemark4"/>
•<FormattedMessage id="pwRemark1" /> <br />
•<FormattedMessage id="pwRemark2" /><br />
•<FormattedMessage id="pwRemark3" /><br />
•<FormattedMessage id="pwRemark4" />
</Typography>
</Grid>
</Grid>
@@ -856,7 +856,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="yourPersonalInformation"/>
<FormattedMessage id="yourPersonalInformation" />
</Typography>
{/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
Already have an account?
@@ -868,7 +868,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1}>
<InputLabel htmlFor="idDocType-signup">
<Typography variant="pnspsFormHeader">
<FormattedMessage id="userIdDoc"/>
<FormattedMessage id="userIdDoc" />
<span style={{ color: '#f10000' }}>*</span>
</Typography>
</InputLabel>
@@ -892,9 +892,9 @@ const CustomFormWizard = (props) => {
onBlur={formik.handleBlur}
filterOptions={(options) => options}
inputValue={selectedIdDocInputType}
getOptionLabel={(option) => option.label? intl.formatMessage({ id: option.label }) : ""}
getOptionLabel={(option) => option.label ? intl.formatMessage({ id: option.label }) : ""}
onChange={(event, newValue) => {
if (newValue != null ) {
if (newValue != null) {
setSelectedIdDocInputType(intl.formatMessage({ id: newValue.label }));
setSelectedIdDocType(newValue);
if (newValue.type !== "HKID") {
@@ -907,13 +907,13 @@ const CustomFormWizard = (props) => {
sx={{ "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
renderInput={(params) => <TextField
{...params}
placeholder={intl.formatMessage({id: 'idDocType'})}
placeholder={intl.formatMessage({ id: 'idDocType' })}
/>}
/>
{formik.touched.idDocType && (
selectedIdDocType === null ?
<FormHelperText error id="helper-text-idDocType-signup">
<FormattedMessage id="requireIdDocType"/>
<FormattedMessage id="requireIdDocType" />
</FormHelperText> : ''
)}
</Stack>
@@ -941,7 +941,7 @@ const CustomFormWizard = (props) => {
}
}
}}
placeholder={intl.formatMessage({id: 'idDocNumber'})}
placeholder={intl.formatMessage({ id: 'idDocNumber' })}
fullWidth
sx={{ mr: 1 }}
error={Boolean(formik.touched.idNo && formik.errors.idNo)}
@@ -1021,7 +1021,7 @@ const CustomFormWizard = (props) => {
}
}
}}
placeholder={intl.formatMessage({id: 'idDocNumber'})}
placeholder={intl.formatMessage({ id: 'idDocNumber' })}
fullWidth
sx={{ mr: 1 }}
error={Boolean(formik.touched.idNo && formik.errors.idNo)}
@@ -1049,7 +1049,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1}>
<InputLabel htmlFor="enName-signup">
<Typography variant="pnspsFormHeader">
<FormattedMessage id="userEnglishName"/>
<FormattedMessage id="userEnglishName" />
{selectedIdDocType.type === "CNID" ? "" : <span style={{ color: '#f10000' }}>*</span>}
</Typography>
</InputLabel>
@@ -1059,7 +1059,7 @@ const CustomFormWizard = (props) => {
value={formik.values.enName}
name="enName"
onChange={formik.handleChange}
placeholder={intl.formatMessage({id: 'sameAsYourIdDoc'})}
placeholder={intl.formatMessage({ id: 'sameAsYourIdDoc' })}
fullWidth
error={Boolean(formik.touched.enName && formik.errors.enName && selectedIdDocType.type !== "CNID")}
onBlur={formik.handleBlur}
@@ -1082,7 +1082,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1}>
<InputLabel htmlFor="chName-signup">
<Typography variant="pnspsFormHeader">
<FormattedMessage id="userChineseName"/>
<FormattedMessage id="userChineseName" />
<span style={{ color: '#f10000' }}>*</span>
</Typography>
</InputLabel>
@@ -1094,7 +1094,7 @@ const CustomFormWizard = (props) => {
value={formik.values.chName.trim()}
name="chName"
onChange={formik.handleChange}
placeholder={intl.formatMessage({id: 'sameAsYourIdDoc'})}
placeholder={intl.formatMessage({ id: 'sameAsYourIdDoc' })}
onBlur={formik.handleBlur}
inputProps={{
maxLength: 6,
@@ -1116,7 +1116,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1}>
<InputLabel htmlFor="address1-signup">
<Typography variant="pnspsFormHeader">
<FormattedMessage id="formAddress"/>
<FormattedMessage id="formAddress" />
<span style={{ color: '#f10000' }}>*</span>
</Typography>
</InputLabel>
@@ -1127,7 +1127,7 @@ const CustomFormWizard = (props) => {
value={formik.values.address1}
name="address1"
onChange={formik.handleChange}
placeholder={intl.formatMessage({id: 'addressLine1'})}
placeholder={intl.formatMessage({ id: 'addressLine1' })}
onBlur={formik.handleBlur}
inputProps={{
onKeyDown: (e) => {
@@ -1144,7 +1144,7 @@ const CustomFormWizard = (props) => {
value={formik.values.address2}
name="address2"
onChange={formik.handleChange}
placeholder={intl.formatMessage({id: 'addressLine2'})}
placeholder={intl.formatMessage({ id: 'addressLine2' })}
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
@@ -1160,7 +1160,7 @@ const CustomFormWizard = (props) => {
value={formik.values.address3}
name="address3"
onChange={formik.handleChange}
placeholder={intl.formatMessage({id: 'addressLine3'})}
placeholder={intl.formatMessage({ id: 'addressLine3' })}
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
@@ -1175,14 +1175,16 @@ const CustomFormWizard = (props) => {
value={selectedAddress4}
options={ComboData.district}
disabled={checkCountry}
getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
onChange={(event, newValue) => {
setSelectedAddress4(newValue);
}}
sx={{ "& .MuiInputBase-root": { height: "41px" },
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'})}
"& .MuiAutocomplete-endAdornment": { top: "auto" },
}}
renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({ id: 'region' })}
/>}
/>
<Autocomplete
@@ -1190,7 +1192,7 @@ const CustomFormWizard = (props) => {
id="address5-combo"
value={selectedAddress5}
options={ComboData.country}
getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
onChange={(event, newValue) => {
if (newValue !== null) {
setSelectedAddress5(newValue);
@@ -1207,7 +1209,7 @@ const CustomFormWizard = (props) => {
}}

sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 3px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'regionOrCountry'})} />}
renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({ id: 'regionOrCountry' })} />}
/>
{formik.touched.address1 && formik.errors.address1 && (
<FormHelperText error id="helper-text-address1-signup">
@@ -1229,7 +1231,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="yourContact"/>
<FormattedMessage id="yourContact" />
</Typography>
</Stack>
</Grid>
@@ -1239,7 +1241,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
<InputLabel htmlFor="email-signup">
<Typography variant="pnspsFormHeader">
<FormattedMessage id="userContactEmail"/>
<FormattedMessage id="userContactEmail" />
<span style={{ color: '#f10000' }}>*</span>
</Typography>
</InputLabel>
@@ -1251,7 +1253,7 @@ const CustomFormWizard = (props) => {
value={formik.values.email.trim()}
name="email"
onChange={formik.handleChange}
placeholder={intl.formatMessage({id: 'userContactEmail'})}
placeholder={intl.formatMessage({ id: 'userContactEmail' })}
onBlur={formik.handleBlur}
inputProps={{
onKeyDown: (e) => {
@@ -1268,7 +1270,7 @@ const CustomFormWizard = (props) => {
)}
{checkEmail && (
<FormHelperText error id="helper-text-email-signup">
<FormattedMessage id="emailUsed"/>
<FormattedMessage id="emailUsed" />
</FormHelperText>
)}
</Stack>
@@ -1277,7 +1279,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1} >
<InputLabel htmlFor="emailConfirm-signup">
<Typography variant="pnspsFormHeader">
<FormattedMessage id="userContactEmail"/>
<FormattedMessage id="userContactEmail" />
<span style={{ color: '#f10000' }}>*</span>
</Typography>
</InputLabel>
@@ -1290,7 +1292,7 @@ const CustomFormWizard = (props) => {
name="emailConfirm"
// onBlur={formik.handleBlur}
onChange={formik.handleChange}
placeholder={intl.formatMessage({id: 'confirmEmail'})}
placeholder={intl.formatMessage({ id: 'confirmEmail' })}
onBlur={formik.handleBlur}
inputProps={{
onKeyDown: (e) => {
@@ -1317,7 +1319,7 @@ const CustomFormWizard = (props) => {
<Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
<InputLabel htmlFor="phone-signup">
<Typography variant="pnspsFormHeader">
<FormattedMessage id="userContactNumber"/>
<FormattedMessage id="userContactNumber" />
<span style={{ color: '#f10000' }}>*</span>
</Typography>
</InputLabel>
@@ -1336,7 +1338,7 @@ const CustomFormWizard = (props) => {
}
formik.setFieldValue("phoneCountryCode", value);
}}
placeholder={intl.formatMessage({id: 'dialingCode'})}
placeholder={intl.formatMessage({ id: 'dialingCode' })}
error={Boolean(formik.touched.phone && formik.errors.phone)}
onBlur={formik.handleBlur}
endAdornment={<InputAdornment position="end">-</InputAdornment>}
@@ -1348,7 +1350,7 @@ const CustomFormWizard = (props) => {
}
},
}}
sx={{ width: '33%', mr:1}}
sx={{ width: '33%', mr: 1 }}
/>
<OutlinedInput
id="phone-login"
@@ -1364,7 +1366,7 @@ const CustomFormWizard = (props) => {
}
formik.setFieldValue("phone", value);
}}
placeholder={intl.formatMessage({id: 'userContactNumber'})}
placeholder={intl.formatMessage({ id: 'userContactNumber' })}
error={Boolean(formik.touched.phone && formik.errors.phone)}
onBlur={formik.handleBlur}
inputProps={{
@@ -1393,7 +1395,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1} direction="column">
<InputLabel htmlFor="fax-signup">
<Typography variant="pnspsFormHeader">
<FormattedMessage id="userFaxNumber"/>
<FormattedMessage id="userFaxNumber" />
</Typography>
</InputLabel>
<Stack direction="row">
@@ -1411,7 +1413,7 @@ const CustomFormWizard = (props) => {
}
formik.setFieldValue("faxCountryCode", value);
}}
placeholder={intl.formatMessage({id: 'dialingCode'})}
placeholder={intl.formatMessage({ id: 'dialingCode' })}
onBlur={formik.handleBlur}
endAdornment={<InputAdornment position="end">-</InputAdornment>}
inputProps={{
@@ -1422,7 +1424,7 @@ const CustomFormWizard = (props) => {
}
},
}}
sx={{ width: '33%' , mr: 1}}
sx={{ width: '33%', mr: 1 }}
/>
<OutlinedInput
id="fax-login"
@@ -1438,7 +1440,7 @@ const CustomFormWizard = (props) => {
}
formik.setFieldValue("fax", value);
}}
placeholder={intl.formatMessage({id: 'userFaxNumber'})}
placeholder={intl.formatMessage({ id: 'userFaxNumber' })}
inputProps={{
maxLength: 8,
onKeyDown: (e) => {
@@ -1461,28 +1463,28 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={12}>
<Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="userIdDoc"/>
<FormattedMessage id="userIdDoc" />
<span style={{ color: '#f10000' }}>*</span></Typography>
<Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="pleaseUploadIdDoc"/>
<FormattedMessage id="pleaseUploadIdDoc" />
</Typography>
<Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="pleaseUploadIdDocSubTitle"/>
<FormattedMessage id="pleaseUploadIdDocSubTitle" />
</Typography>
<Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
<Button variant="contained" component="label" sx={{ height: '40px' }}>
<FormattedMessage id="uploadIdDoc"/>
<input
accept="image/png, .jpg, .bmp, .pdf"
//className={classes.input}
id="contained-button-file"
multiple
type="file"
onChange={handleFileUpload}
style={{ display: 'none' }}
/>
</Button>
<Button variant="contained" component="label" sx={{ height: '40px' }}>
<FormattedMessage id="uploadIdDoc" />
<input
accept="image/png, .jpg, .bmp, .pdf"
//className={classes.input}
id="contained-button-file"
multiple
type="file"
onChange={handleFileUpload}
style={{ display: 'none' }}
/>
</Button>
</ThemeProvider>
{/*<Typography xs={12} sm={9} md={3} display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>如: 香港身份證; 護照; 中國內地身份證等</Typography>*/}
</Stack>
@@ -1501,7 +1503,7 @@ const CustomFormWizard = (props) => {
<Grid container>
<Grid item xs={12} md={12}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="termsAndCondition"/>
<FormattedMessage id="termsAndCondition" />
<span style={{ color: '#f10000' }}>*</span>
</Typography>
</Grid>
@@ -1526,7 +1528,7 @@ const CustomFormWizard = (props) => {
size="small"
/>
<Typography variant="pnspsFormHeader">
<FormattedMessage id="acceptTerms"/>
<FormattedMessage id="acceptTerms" />
</Typography>
</Grid>
</Grid>
@@ -1542,7 +1544,7 @@ const CustomFormWizard = (props) => {
size="small"
/>
<Typography variant="pnspsFormHeader">
<FormattedMessage id="rejectTerms"/>
<FormattedMessage id="rejectTerms" />
</Typography>
</Grid>
</Grid>
@@ -1556,7 +1558,7 @@ const CustomFormWizard = (props) => {
<Grid container>
<Stack direction="column">
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="verify"/>
<FormattedMessage id="verify" />
<span style={{ color: '#f10000' }}>*</span>
</Typography>
<Stack spacing={1} direction="row">
@@ -1604,12 +1606,12 @@ const CustomFormWizard = (props) => {
<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" }}>
<Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
<FormattedMessage id="becomeNewPersonalUser"/>
<FormattedMessage id="becomeNewPersonalUser" />
</Typography>
</div>
{/* <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography> */}
<Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="yourLoginInformation"/>
<FormattedMessage id="yourLoginInformation" />
</Typography>
{/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
Already have an account?
@@ -1621,7 +1623,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} >
<Stack spacing={2} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
<FormattedMessage id="userLoginName"/>:
<FormattedMessage id="userLoginName" />:
</Typography>
<Typography variant="pnspsFormHeader" id="preview-username-login">
{formik.values.username}
@@ -1631,7 +1633,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="yourPersonalInformation"/>
<FormattedMessage id="yourPersonalInformation" />
</Typography>
{/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
Already have an account?
@@ -1641,7 +1643,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={12} >
<Stack spacing={1}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
<FormattedMessage id="userIdDoc"/>
<FormattedMessage id="userIdDoc" />
</Typography>
</Stack>
</Grid>
@@ -1649,17 +1651,18 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={6} >
<Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
<FormattedMessage id="idDocType"/>:
<FormattedMessage id="idDocType" />:
</Typography>
<Typography variant="pnspsFormHeader" name="preview-idDocType">
{selectedIdDocType.label}
{intl.formatMessage({ id: selectedIdDocType?.label??" " })}
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
<FormattedMessage id="idDocNumber"/>:
<FormattedMessage id="idDocNumber" />:
</Typography>
<Typography variant="pnspsFormHeader" id="idNo-login">
{formik.values.idNo} {selectedIdDocType.type == "HKID" ? '(' + formik.values.checkDigit + ')' : null}
@@ -1670,7 +1673,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
<FormattedMessage id="userEnglishName"/>:
<FormattedMessage id="userEnglishName" />:
</Typography>
<Typography variant="pnspsFormHeader" id="preview-enName-signup">
{formik.values.enName}
@@ -1680,7 +1683,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
<FormattedMessage id="userChineseName"/>:
<FormattedMessage id="userChineseName" />:
</Typography>
<Typography variant="pnspsFormHeader" id="preview-chName-signup">
{formik.values.chName}
@@ -1690,7 +1693,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12}>
<Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
<FormattedMessage id="formAddress"/>:
<FormattedMessage id="formAddress" />:
</Typography>
<Stack spacing={1} direction="column">
<Typography variant="pnspsFormHeader" id="preview-address1-signup">
@@ -1709,19 +1712,19 @@ const CustomFormWizard = (props) => {
{selectedAddress5.label === "hongKong" ?
<Stack direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
<FormattedMessage id="region"/>:
<FormattedMessage id="region" />:
</Typography>
<Typography variant="pnspsFormHeader">
{!selectedAddress4? "" : intl.formatMessage({id: selectedAddress4.type})}
{!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })}
</Typography>
</Stack>
: null}
<Stack direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
<FormattedMessage id="regionOrCountry"/>:
<FormattedMessage id="regionOrCountry" />:
</Typography>
<Typography variant="pnspsFormHeader">
{intl.formatMessage({id: selectedAddress5.type})}
{intl.formatMessage({ id: selectedAddress5.type })}
</Typography>
</Stack>
</Stack>
@@ -1730,14 +1733,14 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="yourContact"/>
<FormattedMessage id="yourContact" />
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={12}>
<Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
<FormattedMessage id="userContactEmail"/>:
<FormattedMessage id="userContactEmail" />:
</Typography>
<Typography variant="pnspsFormHeader" id="preview-email-signup">
{formik.values.email}
@@ -1747,7 +1750,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
<FormattedMessage id="userContactNumber"/>:
<FormattedMessage id="userContactNumber" />:
</Typography>
<Typography variant="pnspsFormHeader" id="preview-phone-signup">
+{formik.values.phoneCountryCode} {formik.values.phone}
@@ -1758,7 +1761,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
<FormattedMessage id="userFaxNumber"/>:
<FormattedMessage id="userFaxNumber" />:
</Typography>
<Typography variant="pnspsFormHeader" id="preview-fax-signup">
+{formik.values.faxCountryCode} {formik.values.fax}
@@ -1771,7 +1774,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={12}>
<Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
<FormattedMessage id="userIdDoc"/>
<FormattedMessage id="userIdDoc" />
</Typography>
{fileList != null ?
<PreviewUploadFileTable key="previewTable" recordList={fileListData} /> : null}
@@ -1794,13 +1797,13 @@ const CustomFormWizard = (props) => {
<Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
<CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
<Typography display="inline" variant="h4">
<FormattedMessage id="registerSubmitted"/>
<FormattedMessage id="registerSubmitted" />
</Typography>
<Typography display="inline" variant="h4">
<FormattedMessage id="emailSent"/>
<FormattedMessage id="emailSent" />
</Typography>
<Button variant="outlined" component={Link} to="/login" ><Typography variant="pnspsFormHeader">
<FormattedMessage id="backToLogin"/>
<FormattedMessage id="backToLogin" />
</Typography></Button>
</Stack>
:
@@ -1812,7 +1815,7 @@ const CustomFormWizard = (props) => {
<FormattedMessage id="registerFail" />
</Typography>
<Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="pnspsFormHeader">
<FormattedMessage id="backToLogin"/>
<FormattedMessage id="backToLogin" />
</Typography></Button>
</Stack>
}


Scrivi Anteprima
Caricamento…
Annulla
Salva