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

add bus register

master
Alex Cheung 2 years ago
parent
fe54ab184a
commit
2f95d3adb7
6 changed files with 366 additions and 311 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +12
    -5
      src/layout/MainLayout/Header/index.js
  2. +1
    -1
      src/pages/authentication/AuthCardCustom.js
  3. +5
    -6
      src/pages/authentication/BusRegister.js
  4. +5
    -6
      src/pages/authentication/Register.js
  5. +233
    -237
      src/pages/authentication/auth-forms/BusCustomFormWizard.js
  6. +110
    -56
      src/pages/authentication/auth-forms/CustomFormWizard.js

+ 12
- 5
src/layout/MainLayout/Header/index.js View File

@@ -210,9 +210,14 @@ function Header(props) {
alignItems="center" alignItems="center"
spacing={0} spacing={0}
> >
<Box sx={{flexGrow: 1,display: { xs: 'none', sm: 'block' } }}>
<Logo/>
<span id="systemTitle" >公共啟事提交及繳費系統</span>
<Box sx={{width:'260px', flexGrow: 1,display: { xs: 'none', sm: 'block' } }}>
<Stack direction="row" justifyContent="flex-start" alignItems="center">
<Logo/>
<Stack justifyContent="flex-start" alignItems="center">
<span id="systemTitle">公共啟事提交</span>
<span id="systemTitle">及繳費系統</span>
</Stack>
</Stack>
</Box> </Box>
<IconButton <IconButton
color="inherit" color="inherit"
@@ -224,8 +229,10 @@ function Header(props) {
<MenuIcon style={{ color: '#0C489E' }} /> <MenuIcon style={{ color: '#0C489E' }} />
</IconButton> </IconButton>
<Box sx={{mr: 2, display: { sm: 'none' } }}> <Box sx={{mr: 2, display: { sm: 'none' } }}>
<MobileLogo/>
<span id="mobileTitle" >公共啟事提交及繳費系統</span>
<Stack direction="row" justifyContent="flex-start" alignItems="center">
<MobileLogo/>
<span id="mobileTitle" >公共啟事提交及繳費系統</span>
</Stack>
</Box> </Box>
</Stack> </Stack>
} }


+ 1
- 1
src/pages/authentication/AuthCardCustom.js View File

@@ -11,7 +11,7 @@ import MainCard from 'components/MainCard';
const AuthCardCustom = ({ children, ...other }) => ( const AuthCardCustom = ({ children, ...other }) => (
<MainCard <MainCard
sx={{ sx={{
maxWidth: { xs: 400, lg: 1000 },
maxWidth: { xs: 400, sm:600, md:800, lg: 1000 },
margin: { xs: 2.5, md: 3 }, margin: { xs: 2.5, md: 3 },
'& > *': { '& > *': {
flexGrow: 1, flexGrow: 1,


+ 5
- 6
src/pages/authentication/BusRegister.js View File

@@ -48,10 +48,9 @@
const BusRegister = () => { const BusRegister = () => {
const [activeStep, setActiveStep] = useState(0); const [activeStep, setActiveStep] = useState(0);
const [completed, setCompleted] = useState([false]); const [completed, setCompleted] = useState([false]);
const [isValid, setisValid] = useState(null);


const updateValid = (value) => {
setisValid(value);
const uploadStep = (value) => {
setActiveStep(value);
console.log(value) console.log(value)
}; };


@@ -108,7 +107,7 @@
<Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center"> <Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center">
<Stepper activeStep={activeStep} sx={stepStyle}> <Stepper activeStep={activeStep} sx={stepStyle}>
{steps.map((label, index) => ( {steps.map((label, index) => (
<Step key={label} completed={completed[index]} readOnly="true">
<Step key={label} completed={completed[index]} readOnly={true}>
{ {
index < 2 ? index < 2 ?
(<StepButton (<StepButton
@@ -141,7 +140,7 @@
) : ( ) : (
<React.Fragment> <React.Fragment>
<AuthWrapper> <AuthWrapper>
<CustomFormWizard updateValid={updateValid} step={activeStep} />
<CustomFormWizard uploadStep={uploadStep} step={activeStep} />
{/* <CustomFormWizard step={activeStep} /> */} {/* <CustomFormWizard step={activeStep} /> */}
</AuthWrapper> </AuthWrapper>
<Stack direction="row" sx={{ pt: 2 }}> <Stack direction="row" sx={{ pt: 2 }}>
@@ -179,7 +178,7 @@
</Button> </Button>
): ):
( (
<Button variant="outlined" disabled={isValid===false} onClick={handleNext} sx={{ mr: 1 }}>
<Button variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
繼續 繼續
</Button> </Button>
) )


+ 5
- 6
src/pages/authentication/Register.js View File

@@ -48,10 +48,9 @@
const Register = () => { const Register = () => {
const [activeStep, setActiveStep] = useState(0); const [activeStep, setActiveStep] = useState(0);
const [completed, setCompleted] = useState([false]); const [completed, setCompleted] = useState([false]);
const [isValid, setisValid] = useState(null);


const updateValid = (value) => {
setisValid(value);
const uploadStep = (value) => {
setActiveStep(value);
console.log(value) console.log(value)
}; };


@@ -108,7 +107,7 @@
<Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center"> <Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center">
<Stepper activeStep={activeStep} sx={stepStyle}> <Stepper activeStep={activeStep} sx={stepStyle}>
{steps.map((label, index) => ( {steps.map((label, index) => (
<Step key={label} completed={completed[index]} readOnly="true">
<Step key={label} completed={completed[index]} readOnly={true}>
{ {
index < 2 ? index < 2 ?
(<StepButton (<StepButton
@@ -141,7 +140,7 @@
) : ( ) : (
<React.Fragment> <React.Fragment>
<AuthWrapper> <AuthWrapper>
<CustomFormWizard updateValid={updateValid} step={activeStep} />
<CustomFormWizard uploadStep={uploadStep} step={activeStep} />
{/* <CustomFormWizard step={activeStep} /> */} {/* <CustomFormWizard step={activeStep} /> */}
</AuthWrapper> </AuthWrapper>
<Stack direction="row" sx={{ pt: 2 }}> <Stack direction="row" sx={{ pt: 2 }}>
@@ -179,7 +178,7 @@
</Button> </Button>
): ):
( (
<Button variant="outlined" disabled={isValid===false} onClick={handleNext} sx={{ mr: 1 }}>
<Button variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
繼續 繼續
</Button> </Button>
) )


+ 233
- 237
src/pages/authentication/auth-forms/BusCustomFormWizard.js View File

@@ -37,6 +37,8 @@ import UploadFileTable from './UploadFileTable';
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
// import { Paper } from '../../../../node_modules/@mui/material/index'; // import { Paper } from '../../../../node_modules/@mui/material/index';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';

import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
// ============================|| FIREBASE - REGISTER ||============================ // // ============================|| FIREBASE - REGISTER ||============================ //


@@ -47,6 +49,8 @@ const BusCustomFormWizard = (props) => {
const [showConfirmPassword, setshowConfirmPassword] = useState(false); const [showConfirmPassword, setshowConfirmPassword] = useState(false);
const [fileList, setFileList] = useState([]); const [fileList, setFileList] = useState([]);
const [fileListData, setFileListData] = useState([]); const [fileListData, setFileListData] = useState([]);
const [uploadStep, setUploadStep] = useState(0);
const [checkUpload, setCheckUpload] = useState(false);


const handleClickShowPassword = () => { const handleClickShowPassword = () => {
setShowPassword(!showPassword); setShowPassword(!showPassword);
@@ -64,13 +68,11 @@ const BusCustomFormWizard = (props) => {
setLevel(strengthColorChi(temp)); setLevel(strengthColorChi(temp));
}; };


const [selectedIdDocType, setSelectedIdDocType] = useState(null);
const [selectedAddress4, setSelectedAddress4] = useState(null); const [selectedAddress4, setSelectedAddress4] = useState(null);
const [selectedAddress5, setSelectedAddress5] = useState(null);
const [selectedAddress5, setSelectedAddress5] = useState("香港");
const [termsAndConAccept, setTermsAndConAccept] = useState(false); const [termsAndConAccept, setTermsAndConAccept] = useState(false);
const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
const idDocTypeComboList = ["BR","otherCert"];
const address4ComboList = const address4ComboList =
["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區", ["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區",
"坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"]; "坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"];
@@ -132,27 +134,39 @@ const BusCustomFormWizard = (props) => {
}; };


useEffect(() => { useEffect(() => {
console.log(props.step);
_onSubmit();
}, [props.step])
props.step ==2?_onSubmit():null;
setUploadStep(props.step)
}, [props.step])


const {handleSubmit} = useForm({}) const {handleSubmit} = useForm({})
const _onSubmit = () => { const _onSubmit = () => {
values.idDocType = selectedIdDocType
values.address4 = selectedAddress4 values.address4 = selectedAddress4
values.address5 = selectedAddress5 values.address5 = selectedAddress5
console.log(values) console.log(values)
const userAddress = {
"addressLine1":values.address1,
"addressLine2":values.address2,
"addressLine3":values.address4,
"country":values.address5
const busUserAddress = {
"addressLine1":"",
"addressLine2":"",
"addressLine3":"",
"country":""
}; };

if (values.address5=='香港'){
busUserAddress.addressLine1 = values.address1
busUserAddress.addressLine2 = values.address2
busUserAddress.addressLine3 = values.address3
busUserAddress.country = values.address5
}else{
busUserAddress.addressLine1 = values.address1
busUserAddress.addressLine2 = values.address2
busUserAddress.addressLine3 = values.address4
busUserAddress.country = values.address5
}

const userFaxNo = { const userFaxNo = {
"countryCode":values.faxCountryCode, "countryCode":values.faxCountryCode,
"faxNumber":values.fax, "faxNumber":values.fax,
}; };
const userMobileNumber = {
const busUserContactTel = {
"countryCode":values.phoneCountryCode, "countryCode":values.phoneCountryCode,
"phoneNumber":values.phone, "phoneNumber":values.phone,
}; };
@@ -169,21 +183,23 @@ const BusCustomFormWizard = (props) => {
username: values.username, username: values.username,
password: values.password, password: values.password,
name: values.username, name: values.username,
enName: values.enName,
chName: values.chName,
emailAddress: values.email,
idDocType:values.idDocType,
identification:values.idNo,
checkDigit:values.checkDigit,
userFaxNo:userFaxNo,
userMobileNumber:userMobileNumber,
userAddress:userAddress,
tncFlag:tncFlag
enCompanyName: values.enCompanyName,
chCompanyName: values.chCompanyName,
emailBus: values.email,
brNo:values.brNo,
brExpiryDate:values.brExpiryDate,
faxNo:userFaxNo,
busUserContactTel:busUserContactTel,
busUserAddress:busUserAddress,
contactPerson: values.enName,
tncFlag:tncFlag,
type:"ORG"
}) })
.then((response) => { .then((response) => {
setCheckUpload(true)
HttpUtils.fileUpload( HttpUtils.fileUpload(
{ {
refType:"identification",
refType:"brFile",
refId: response.data.id, refId: response.data.id,
file: fileList[0], file: fileList[0],
onSuccess: (response)=>{ onSuccess: (response)=>{
@@ -203,7 +219,8 @@ const BusCustomFormWizard = (props) => {
initialValues:({ initialValues:({
username:'', username:'',
enName: '', enName: '',
chName: '',
enCompanyName: '',
chCompanyName: '',
email: '', email: '',
address1: '', address1: '',
address2: '', address2: '',
@@ -211,28 +228,31 @@ const BusCustomFormWizard = (props) => {
password: '', password: '',
confirmPassword: '', confirmPassword: '',
phone:'', phone:'',
phoneCountryCode:'',
idNo:'',
checkDigit:'',
phoneCountryCode:'852',
submit: null, submit: null,
fax:'', fax:'',
faxCountryCode:'',
}),
validationSchema:Yup.object().shape({
username: Yup.string().max(255).required('請輸入用戶名稱'),
password: Yup.string().max(255).required('請輸入密碼'),
confirmPassword: Yup.string().max(255).required('請確認密碼'),
enName: Yup.string().max(255).required('請輸入英文名稱'),
chName: Yup.string().max(255).required('請輸入中文名稱'),
address1: Yup.string().max(255).required('請輸入第一行地址'),
address2: Yup.string().max(255).required('請輸入第二行地址'),
address3: Yup.string().max(255).required('請輸入第三行地址'),
email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
idNo: Yup.string().max(255).required('請輸入證件號碼'),
checkDigit:Yup.string().max(1).required('請輸入證件號碼'),
idType: Yup.string().max(255).required('請輸入第三行地址')
faxCountryCode:'852',
brExpiryDate:'',
brNo:'',
}), }),
validationSchema:validationSchema
}); });

const validationSchema=Yup.object().shape({
username: Yup.string().max(255).required('請輸入用戶名稱'),
password: Yup.string().max(255).required('請輸入密碼'),
confirmPassword: Yup.string().max(255).required('請確認密碼'),
enName: Yup.string().max(255).required('請輸入英文姓名'),
chName: Yup.string().max(255).required('請輸入中文姓名'),
address1: Yup.string().max(255).required('請輸入第一行地址'),
address2: Yup.string().max(255).required('請輸入第二行地址'),
address3: Yup.string().max(255).required('請輸入第三行地址'),
email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
idNo: Yup.string().max(255).required('請輸入證件號碼'),
checkDigit:Yup.string().max(1).required('請輸入證件號碼'),
idType: Yup.string().max(255).required('請輸入第三行地址')});


const { values } = formik const { values } = formik
useEffect(() => { useEffect(() => {
}, [values]) }, [values])
@@ -241,12 +261,12 @@ const BusCustomFormWizard = (props) => {
<FormikProvider value={formik}> <FormikProvider value={formik}>
<form onSubmit={handleSubmit(_onSubmit)}> <form onSubmit={handleSubmit(_onSubmit)}>
{/* Input Form */} {/* Input Form */}
<FormGroup id={"inputForm"} sx={{ display: props.step === 0 ? "" : "none" }}>
<FormGroup id={"inputForm"} sx={{ display: uploadStep === 0 ? "" : "none" }}>
<Grid container spacing={3}> <Grid container spacing={3}>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<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>
<Typography display="inline" variant="h3" sx={{ color: '#1A4399'}}>成為新的機構/公司用戶</Typography>
</div> </div>
<Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography> <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography>
<Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary'}}>你的登入資料</Typography> <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary'}}>你的登入資料</Typography>
@@ -398,147 +418,27 @@ 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: '#1A4399'}}>公司/機構資料</Typography>
<Typography display="inline" variant="h4" sx={{ color: '#1A4399'}}>你的機構/公司資料</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?
</Typography> */} </Typography> */}
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={12} >
<Grid container sx={{mb:1}}>
<Stack spacing={1}>
<InputLabel htmlFor="idDocType-signup">公司證明文件
<span style={{color: '#f10000'}}>*</span>
</InputLabel>
{/* {formik.touched.enName && formik.errors.enName && (
<FormHelperText error id="helper-text-enName-signup">
{formik.errors.enName}
</FormHelperText>
)} */}
</Stack>
</Grid>

<Grid container>
<Grid item xs={12} md={6} >
<Stack spacing={1} sx={{mr:{md:1},mb:{xs:0.5}}}>
<Autocomplete
disablePortal
id="idDocType-combo"
value={selectedIdDocType === null ? null : selectedIdDocType}
options={idDocTypeComboList}
onChange={(event, newValue) => {
if (newValue !== null){
setSelectedIdDocType(newValue);
}
}}
sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
renderInput={(params) => <TextField {...params} placeholder="證件類別"/>}
/>
</Stack>
</Grid>
{selectedIdDocType =="HKID"?
<>
<Grid item xs={10} md={5}>
<Stack spacing={1}>
<OutlinedInput
id="idNo-login"
type="text"
value={formik.values.idNo}
name="idNo"
onChange={formik.handleChange}
placeholder="證件號碼"
fullWidth
sx={{mr:1}}
error={Boolean(formik.touched.idNo && formik.errors.idNo)}
inputProps={{
maxLength: selectedIdDocType =='BR'?8:18,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
/>
{formik.touched.idNo && formik.errors.idNo && (
<FormHelperText error id="helper-text-enName-signup">
{formik.errors.idNo}
</FormHelperText>
)}
</Stack>
</Grid>
<Grid item xs={2} md={1}>
<Stack spacing={1}>
<OutlinedInput
id="checkDigit-login"
type="text"
value={formik.values.checkDigit}
name="checkDigit"
onChange={formik.handleChange}
placeholder="( )"
// sx={{height:"53px"}}
inputProps={{
maxLength: 1,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
fullWidth
error={Boolean(formik.touched.checkDigit && formik.errors.checkDigit)}
/>
{formik.touched.checkDigit && formik.errors.checkDigit && (
<FormHelperText error id="helper-text-enName-signup">
{formik.errors.checkDigit}
</FormHelperText>
)}
</Stack>
</Grid>
</>:
<Grid item xs={12} md={6}>
<Stack spacing={1}>
<OutlinedInput
id="idNo-login"
type="text"
value={formik.values.idNo}
name="idNo"
onChange={formik.handleChange}
placeholder="證件號碼"
fullWidth
sx={{mr:1}}
error={Boolean(formik.touched.idNo && formik.errors.idNo)}
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
/>
{formik.touched.idNo && formik.errors.idNo && (
<FormHelperText error id="helper-text-enName-signup">
{formik.errors.idNo}
</FormHelperText>
)}
</Stack>
</Grid>
}
</Grid>
</Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="enName-signup">英文名稱
<InputLabel htmlFor="enCompanyName-signup">機構/公司英文名稱
<span style={{color: '#f10000'}}>*</span> <span style={{color: '#f10000'}}>*</span>
</InputLabel> </InputLabel>
<OutlinedInput <OutlinedInput
id="enName-login"
type="enName"
value={formik.values.enName}
name="enName"
id="enCompanyName-login"
type="enCompanyName"
value={formik.values.enCompanyName}
name="enCompanyName"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="與公司證明文件相同"
placeholder="與與商業登記證相同如有"
fullWidth fullWidth
error={Boolean(formik.touched.enName && formik.errors.enName)}
error={Boolean(formik.touched.enCompanyName && formik.errors.enCompanyName)}
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
@@ -547,25 +447,79 @@ const BusCustomFormWizard = (props) => {
}, },
}} }}
/> />
{formik.touched.enName && formik.errors.enName && (
<FormHelperText error id="helper-text-enName-signup">
{formik.errors.enName}
{formik.touched.enCompanyName && formik.errors.enCompanyName && (
<FormHelperText error id="helper-text-enCompanyName-signup">
{formik.errors.enCompanyName}
</FormHelperText> </FormHelperText>
)} )}
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="chName-signup">中文名稱</InputLabel>
<InputLabel htmlFor="chCompanyName-signup">機構/公司中文名稱</InputLabel>
<OutlinedInput <OutlinedInput
fullWidth fullWidth
error={Boolean(formik.touched.chName && formik.errors.chName)}
id="chName-signup"
error={Boolean(formik.touched.chCompanyName && formik.errors.chCompanyName)}
id="chCompanyName-signup"
type="text" type="text"
value={formik.values.chName}
name="chName"
value={formik.values.chCompanyName}
name="chCompanyName"
onChange={formik.handleChange}
placeholder="與與商業登記證相同如有"
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
/>
{formik.touched.chCompanyName && formik.errors.chCompanyName && (
<FormHelperText error id="helper-text-chCompanyName-signup">
{formik.errors.chCompanyName}
</FormHelperText>
)}
</Stack>
</Grid>
<Grid item xs={12} md={6}>
<Stack spacing={1}>
<InputLabel htmlFor="brNo-signup">商業登記證號碼</InputLabel>
<OutlinedInput
fullWidth
error={Boolean(formik.touched.brNo && formik.errors.brNo)}
id="brNo-signup"
type="text"
value={formik.values.brNo}
name="brNo"
onChange={formik.handleChange}
placeholder="與與商業登記證相同如有"
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
/>
{formik.touched.brNo && formik.errors.brNo && (
<FormHelperText error id="helper-text-brNo-signup">
{formik.errors.brNo}
</FormHelperText>
)}
</Stack>
</Grid>
<Grid item xs={12} md={6}>
<Stack spacing={1}>
<InputLabel htmlFor="brExpiryDate-signup">商業登記證有效日期</InputLabel>
<OutlinedInput
fullWidth
error={Boolean(formik.touched.brExpiryDate && formik.errors.brExpiryDate)}
id="brExpiryDate-signup"
type="date"
value={formik.values.brExpiryDate}
name="brExpiryDate"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="與公司證明文件相同"
placeholder="與與商業登記證相同如有"
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
@@ -574,9 +528,9 @@ const BusCustomFormWizard = (props) => {
}, },
}} }}
/> />
{formik.touched.chName && formik.errors.chName && (
<FormHelperText error id="helper-text-chName-signup">
{formik.errors.chName}
{formik.touched.brExpiryDate && formik.errors.brExpiryDate && (
<FormHelperText error id="helper-text-brExpiryDate-signup">
{formik.errors.brExpiryDate}
</FormHelperText> </FormHelperText>
)} )}
</Stack> </Stack>
@@ -651,7 +605,7 @@ const BusCustomFormWizard = (props) => {
<Autocomplete <Autocomplete
disablePortal disablePortal
id="address5-combo" id="address5-combo"
value={selectedAddress5 === null ? null : selectedAddress5}
value={selectedAddress5}
options={address5ComboList} options={address5ComboList}
onChange={(event, newValue) => { onChange={(event, newValue) => {
if (newValue !== null){ if (newValue !== null){
@@ -681,7 +635,36 @@ 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'}}>你的聯絡資料</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={12}>
<Stack spacing={1}>
<InputLabel htmlFor="enName-signup">英文姓名
<span style={{color: '#f10000'}}>*</span>
</InputLabel>
<OutlinedInput
id="enName-login"
type="enName"
value={formik.values.enName}
name="enName"
onChange={formik.handleChange}
placeholder="與你的身份證明文件相同"
fullWidth
error={Boolean(formik.touched.enName && formik.errors.enName)}
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
/>
{formik.touched.enName && formik.errors.enName && (
<FormHelperText error id="helper-text-enName-signup">
{formik.errors.enName}
</FormHelperText>
)}
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
@@ -859,11 +842,13 @@ const BusCustomFormWizard = (props) => {
<Grid container> <Grid container>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}> <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'}}>公司證明文件</Typography>
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效公司證明文件 的數碼檔案，以驗證你的身份。</Typography>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>商業登記證及其他文件
<span style={{color: '#f10000'}}>*</span>
</Typography>
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效商業登記證及其他文件 的數碼檔案，以驗證你的身份。</Typography>
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography> <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>
<Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}> <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
<Button variant="contained" component="label" sx={{ fontSize: 12,height:'40px'}}>上傳公司證明文件
<Button variant="contained" component="label" sx={{ fontSize: 12,height:'40px'}}>上傳商業登記證及其他文件
<input <input
accept="image/*" accept="image/*"
//className={classes.input} //className={classes.input}
@@ -942,12 +927,12 @@ const BusCustomFormWizard = (props) => {
</Grid> </Grid>
</FormGroup> </FormGroup>
{/* Preview Form */} {/* Preview Form */}
<FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none"}}>
<FormGroup id={"previewForm"} sx={{ display: uploadStep === 1 ? "" : "none"}}>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12}> <Grid item xs={12}>
<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>
<Typography display="inline" variant="h3" sx={{ color: '#1A4399'}}>成為新的機構/公司用戶</Typography>
</div> </div>
{/* <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography> */} {/* <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography> */}
<Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary'}}>你的登入資料</Typography> <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary'}}>你的登入資料</Typography>
@@ -970,61 +955,63 @@ 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: '#1A4399'}}>公司/機構資料</Typography>
<Typography display="inline" variant="h4" sx={{ color: '#1A4399'}}>你的機構/公司資料</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?
</Typography> */} </Typography> */}
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={12} >
<Stack spacing={1}>
<Typography>
公司證明文件
</Typography>
</Stack>
</Grid>


<Grid item xs={12} md={6} >
<Stack spacing={1} direction="row">
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography> <Typography>
證件類別:
機構/公司英文名稱:
</Typography> </Typography>
<Typography name = "preview-idDocType">
{formik.values.idDocType}
<Typography id="preview-enCompanyName-signup">
{formik.values.enCompanyName}
</Typography> </Typography>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography> <Typography>
證件號碼:
機構/公司中文名稱:
</Typography> </Typography>
<Typography id="idNo-login">
{formik.values.idNo} ({formik.values.checkDigit})
<Typography id="preview-chCompanyName-signup">
{formik.values.chCompanyName}
</Typography> </Typography>
</Stack> </Stack>
</Grid> </Grid>

<Grid item xs={12} md={12} >
<Stack spacing={1}>
<Typography>
商業登記證:
</Typography>
</Stack>
</Grid>

<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography> <Typography>
英文名稱:
商業登記證號碼:
</Typography> </Typography>
<Typography id="preview-enName-signup">
{formik.values.enName}
<Typography id="brNo-login">
{formik.values.brNo}
</Typography> </Typography>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography> <Typography>
中文名稱:
商業登記證有效日期:
</Typography> </Typography>
<Typography id="preview-chName-signup">
{formik.values.chName}
<Typography id="brExpiryDate-login">
{formik.values.brExpiryDate}
</Typography> </Typography>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography> <Typography>
@@ -1051,7 +1038,17 @@ 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'}}>你的聯絡資料</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={12}>
<Stack spacing={1} direction="row">
<Typography>
英文名稱:
</Typography>
<Typography id="preview-enName-signup">
{formik.values.enName}
</Typography>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
@@ -1084,33 +1081,32 @@ const BusCustomFormWizard = (props) => {
</Typography> </Typography>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} mt={1} mb={1}>
<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'}}>公司證明文件</Typography>
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效公司證明文件 的數碼檔案，以驗證你的身份。</Typography>
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>
<Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
<Button variant="contained" component="label" sx={{ fontSize: 12,height:'25px'}}>上傳公司證明文件
<input type="file" accept=".csv" hidden />
</Button>
<Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>
</Stack>
</Stack>
</Grid>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
</FormGroup> </FormGroup>
{/* Submit page */} {/* Submit page */}
<FormGroup id={"submitForm"} sx={{ display: props.step === 2 ? "" : "none"}}>
<FormGroup id={"submitForm"} sx={{ display: uploadStep === 2 ? "" : "none"}}>
<Grid container spacing={3}> <Grid container spacing={3}>
<Grid item xs={12}> <Grid item xs={12}>
<Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
{/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
<CheckCircleOutlineIcon color="success" sx={{width:"200px",height:"200px"}}/>
<Typography display="inline" variant="h4">完成申請，請登入帳戶</Typography>
<Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20,height:'60px'}}>返回登入頁面</Button>
</Stack>
{checkUpload?
// SUCCESS page
<Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
{/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
<CheckCircleOutlineIcon color="success" sx={{width:"200px",height:"200px"}}/>
<Typography display="inline" variant="h4">完成申請，請登入帳戶</Typography>
<Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20,height:'60px'}}>返回登入頁面</Button>
</Stack>
:
// ERROR page
<Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
{/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
<CancelOutlinedIcon color="error" sx={{width:"200px",height:"200px"}}/>
<Typography display="inline" variant="h4">申請失敗，請稍後嘗試</Typography>
<Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20,height:'60px'}}>返回登入頁面</Button>
</Stack>
}
</Grid> </Grid>
</Grid> </Grid>
</FormGroup> </FormGroup>


+ 110
- 56
src/pages/authentication/auth-forms/CustomFormWizard.js View File

@@ -21,7 +21,7 @@ import Autocomplete from "@mui/material/Autocomplete";


// third party // third party
import { useFormik,FormikProvider } from 'formik'; import { useFormik,FormikProvider } from 'formik';
import * as Yup from 'yup';
import * as yup from 'yup';
// import axios from "axios"; // import axios from "axios";


// project import // project import
@@ -37,6 +37,7 @@ import UploadFileTable from './UploadFileTable';
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
// import { Paper } from '../../../../node_modules/@mui/material/index'; // import { Paper } from '../../../../node_modules/@mui/material/index';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
// ============================|| FIREBASE - REGISTER ||============================ // // ============================|| FIREBASE - REGISTER ||============================ //


@@ -47,6 +48,8 @@ const CustomFormWizard = (props) => {
const [showConfirmPassword, setshowConfirmPassword] = useState(false); const [showConfirmPassword, setshowConfirmPassword] = useState(false);
const [fileList, setFileList] = useState([]); const [fileList, setFileList] = useState([]);
const [fileListData, setFileListData] = useState([]); const [fileListData, setFileListData] = useState([]);
const [uploadStep, setUploadStep] = useState(0);
const [checkUpload, setCheckUpload] = useState(false);


const handleClickShowPassword = () => { const handleClickShowPassword = () => {
setShowPassword(!showPassword); setShowPassword(!showPassword);
@@ -66,7 +69,7 @@ const CustomFormWizard = (props) => {


const [selectedIdDocType, setSelectedIdDocType] = useState(null); const [selectedIdDocType, setSelectedIdDocType] = useState(null);
const [selectedAddress4, setSelectedAddress4] = useState(null); const [selectedAddress4, setSelectedAddress4] = useState(null);
const [selectedAddress5, setSelectedAddress5] = useState(null);
const [selectedAddress5, setSelectedAddress5] = useState("香港");
const [termsAndConAccept, setTermsAndConAccept] = useState(false); const [termsAndConAccept, setTermsAndConAccept] = useState(false);
const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
@@ -132,9 +135,9 @@ const CustomFormWizard = (props) => {
}; };


useEffect(() => { useEffect(() => {
console.log(props.step);
_onSubmit();
}, [props.step])
props.step ==2?_onSubmit():null;
setUploadStep(props.step)
}, [props.step])


const {handleSubmit} = useForm({}) const {handleSubmit} = useForm({})
const _onSubmit = () => { const _onSubmit = () => {
@@ -142,12 +145,25 @@ const CustomFormWizard = (props) => {
values.address4 = selectedAddress4 values.address4 = selectedAddress4
values.address5 = selectedAddress5 values.address5 = selectedAddress5
console.log(values) console.log(values)
const userAddress = {
"addressLine1":values.address1,
"addressLine2":values.address2,
"addressLine3":values.address4,
"country":values.address5
const userAddress = {
"addressLine1":"",
"addressLine2":"",
"addressLine3":"",
"country":""
}; };

if (values.address5=='香港'){
userAddress.addressLine1 = values.address1
userAddress.addressLine2 = values.address2
userAddress.addressLine3 = values.address3
userAddress.country = values.address5
}else{
userAddress.addressLine1 = values.address1
userAddress.addressLine2 = values.address2
userAddress.addressLine3 = values.address4
userAddress.country = values.address5
}

const userFaxNo = { const userFaxNo = {
"countryCode":values.faxCountryCode, "countryCode":values.faxCountryCode,
"faxNumber":values.fax, "faxNumber":values.fax,
@@ -178,9 +194,11 @@ const CustomFormWizard = (props) => {
userFaxNo:userFaxNo, userFaxNo:userFaxNo,
userMobileNumber:userMobileNumber, userMobileNumber:userMobileNumber,
userAddress:userAddress, userAddress:userAddress,
tncFlag:tncFlag
tncFlag:tncFlag,
type:"IND"
}) })
.then((response) => { .then((response) => {
setCheckUpload(true)
HttpUtils.fileUpload( HttpUtils.fileUpload(
{ {
refType:"identification", refType:"identification",
@@ -211,28 +229,42 @@ const CustomFormWizard = (props) => {
password: '', password: '',
confirmPassword: '', confirmPassword: '',
phone:'', phone:'',
phoneCountryCode:'',
phoneCountryCode:'852',
idNo:'', idNo:'',
checkDigit:'', checkDigit:'',
submit: null, submit: null,
fax:'', fax:'',
faxCountryCode:'',
}),
validationSchema:Yup.object().shape({
username: Yup.string().max(255).required('請輸入用戶名稱'),
password: Yup.string().max(255).required('請輸入密碼'),
confirmPassword: Yup.string().max(255).required('請確認密碼'),
enName: Yup.string().max(255).required('請輸入英文姓名'),
chName: Yup.string().max(255).required('請輸入中文姓名'),
address1: Yup.string().max(255).required('請輸入第一行地址'),
address2: Yup.string().max(255).required('請輸入第二行地址'),
address3: Yup.string().max(255).required('請輸入第三行地址'),
email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
idNo: Yup.string().max(255).required('請輸入證件號碼'),
checkDigit:Yup.string().max(1).required('請輸入證件號碼'),
idType: Yup.string().max(255).required('請輸入第三行地址')
faxCountryCode:'852',
}), }),
validationSchema:yup.object().shape({
username: yup.string().max(255).required('請輸入用戶名稱'),
password: yup.string().max(255).required('請輸入密碼'),
confirmPassword: yup.string().max(255).required('請確認密碼'),
enName: yup.string().max(255).required('請輸入英文姓名'),
chName: yup.string().max(255).required('請輸入中文姓名'),
address1: yup.string().max(255).required('請輸入第一行地址'),
address2: yup.string().max(255).required('請輸入第二行地址'),
address3: yup.string().max(255).required('請輸入第三行地址'),
email: yup.string().email('Must be a valid email').max(255).required('Email is required'),
idNo: yup.string().max(255).required('請輸入證件號碼'),
checkDigit:yup.string().max(1).required('請輸入證件號碼'),
idType: yup.string().max(255).required('請輸入第三行地址')}),
}); });

// const validationSchema =yup.object().shape({
// username: yup.string().max(255).required('請輸入用戶名稱'),
// password: yup.string().max(255).required('請輸入密碼'),
// confirmPassword: yup.string().max(255).required('請確認密碼'),
// enName: yup.string().max(255).required('請輸入英文姓名'),
// chName: yup.string().max(255).required('請輸入中文姓名'),
// address1: yup.string().max(255).required('請輸入第一行地址'),
// address2: yup.string().max(255).required('請輸入第二行地址'),
// address3: yup.string().max(255).required('請輸入第三行地址'),
// email: yup.string().email('Must be a valid email').max(255).required('Email is required'),
// idNo: yup.string().max(255).required('請輸入證件號碼'),
// checkDigit:yup.string().max(1).required('請輸入證件號碼'),
// idType: yup.string().max(255).required('請輸入第三行地址')});

const { values } = formik const { values } = formik
useEffect(() => { useEffect(() => {
}, [values]) }, [values])
@@ -241,7 +273,7 @@ const CustomFormWizard = (props) => {
<FormikProvider value={formik}> <FormikProvider value={formik}>
<form onSubmit={handleSubmit(_onSubmit)}> <form onSubmit={handleSubmit(_onSubmit)}>
{/* Input Form */} {/* Input Form */}
<FormGroup id={"inputForm"} sx={{ display: props.step === 0 ? "" : "none" }}>
<FormGroup id={"inputForm"} sx={{ display: uploadStep === 0 ? "" : "none" }}>
<Grid container spacing={3}> <Grid container spacing={3}>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<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 } }}>
@@ -271,6 +303,7 @@ const CustomFormWizard = (props) => {
placeholder="用戶登入名稱" placeholder="用戶登入名稱"
fullWidth fullWidth
error={Boolean(formik.touched.username && formik.errors.username)} error={Boolean(formik.touched.username && formik.errors.username)}
onBlur={formik.handleBlur}
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
@@ -359,6 +392,7 @@ const CustomFormWizard = (props) => {
type={showConfirmPassword ? 'text' : 'password'} type={showConfirmPassword ? 'text' : 'password'}
value={formik.values.confirmPassword} value={formik.values.confirmPassword}
name="confirmPassword" name="confirmPassword"
onBlur={formik.handleBlur}
onChange={(e) => { onChange={(e) => {
formik.handleChange(e); formik.handleChange(e);
changePassword(e.target.value); changePassword(e.target.value);
@@ -450,6 +484,7 @@ const CustomFormWizard = (props) => {
fullWidth fullWidth
sx={{mr:1}} sx={{mr:1}}
error={Boolean(formik.touched.idNo && formik.errors.idNo)} error={Boolean(formik.touched.idNo && formik.errors.idNo)}
onBlur={formik.handleBlur}
inputProps={{ inputProps={{
maxLength: selectedIdDocType =='HKID'?7:18, maxLength: selectedIdDocType =='HKID'?7:18,
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -651,7 +686,7 @@ const CustomFormWizard = (props) => {
<Autocomplete <Autocomplete
disablePortal disablePortal
id="address5-combo" id="address5-combo"
value={selectedAddress5 === null ? null : selectedAddress5}
value={selectedAddress5}
options={address5ComboList} options={address5ComboList}
onChange={(event, newValue) => { onChange={(event, newValue) => {
if (newValue !== null){ if (newValue !== null){
@@ -942,7 +977,7 @@ const CustomFormWizard = (props) => {
</Grid> </Grid>
</FormGroup> </FormGroup>
{/* Preview Form */} {/* Preview Form */}
<FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none"}}>
<FormGroup id={"previewForm"} sx={{ display: uploadStep === 1 ? "" : "none"}}>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12}> <Grid item xs={12}>
<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 } }}>
@@ -990,7 +1025,7 @@ const CustomFormWizard = (props) => {
證件類別: 證件類別:
</Typography> </Typography>
<Typography name = "preview-idDocType"> <Typography name = "preview-idDocType">
{formik.values.idDocType}
{selectedIdDocType}
</Typography> </Typography>
</Stack> </Stack>
</Grid> </Grid>
@@ -1000,7 +1035,7 @@ const CustomFormWizard = (props) => {
證件號碼: 證件號碼:
</Typography> </Typography>
<Typography id="idNo-login"> <Typography id="idNo-login">
{formik.values.idNo} ({formik.values.checkDigit})
{formik.values.idNo} {selectedAddress5=="香港"?'('+formik.values.checkDigit+')':null}
</Typography> </Typography>
</Stack> </Stack>
</Grid> </Grid>
@@ -1034,17 +1069,23 @@ const CustomFormWizard = (props) => {
<Typography id="preview-address1-signup"> <Typography id="preview-address1-signup">
{formik.values.address1} {formik.values.address1}
</Typography> </Typography>
<Typography id="preview-address2-signup">
{formik.values.address2}
</Typography>
{formik.values.address2!=null?
<Typography id="preview-address2-signup">
{formik.values.address2}
</Typography>
:null}
{formik.values.address3!=null?
<Typography id="preview-address3-signup"> <Typography id="preview-address3-signup">
{formik.values.address3} {formik.values.address3}
</Typography> </Typography>
<Typography id="preview-address4-signup">
{formik.values.address4}
</Typography>
:null}
{selectedAddress5==("香港")?
<Typography id="preview-address4-signup">
區域 (只適用於香港): {selectedAddress4}
</Typography>
:null}
<Typography id="preview-address5-signup"> <Typography id="preview-address5-signup">
{formik.values.address5}
國家/地區: {selectedAddress5}
</Typography> </Typography>
</Stack> </Stack>
</Stack> </Stack>
@@ -1074,16 +1115,18 @@ const CustomFormWizard = (props) => {
</Typography> </Typography>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography>
傳真號碼:
</Typography>
<Typography id="preview-fax-signup">
+{formik.values.faxCountryCode} {formik.values.fax}
</Typography>
</Stack>
</Grid>
{formik.values.faxCountryCode!=""&&formik.values.fax!=""?
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography>
傳真號碼:
</Typography>
<Typography id="preview-fax-signup">
+{formik.values.faxCountryCode} {formik.values.fax}
</Typography>
</Stack>
</Grid>
:null}
<Grid item xs={12} mt={1} mb={1}> <Grid item xs={12} mt={1} mb={1}>
<Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}> <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'}}>身份證明文件</Typography> <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography>
@@ -1102,15 +1145,26 @@ const CustomFormWizard = (props) => {
</Grid> </Grid>
</FormGroup> </FormGroup>
{/* Submit page */} {/* Submit page */}
<FormGroup id={"submitForm"} sx={{ display: props.step === 2 ? "" : "none"}}>
<FormGroup id={"submitForm"} sx={{ display: uploadStep === 2 ? "" : "none"}}>
<Grid container spacing={3}> <Grid container spacing={3}>
<Grid item xs={12}> <Grid item xs={12}>
<Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
{/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
<CheckCircleOutlineIcon color="success" sx={{width:"200px",height:"200px"}}/>
<Typography display="inline" variant="h4">完成申請，請登入帳戶</Typography>
<Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20,height:'60px'}}>返回登入頁面</Button>
</Stack>
{checkUpload?
// SUCCESS page
<Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
{/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
<CheckCircleOutlineIcon color="success" sx={{width:"200px",height:"200px"}}/>
<Typography display="inline" variant="h4">完成申請，請登入帳戶</Typography>
<Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20,height:'60px'}}>返回登入頁面</Button>
</Stack>
:
// ERROR page
<Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
{/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
<CancelOutlinedIcon color="error" sx={{width:"200px",height:"200px"}}/>
<Typography display="inline" variant="h4">申請失敗，請稍後嘗試</Typography>
<Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20,height:'60px'}}>返回登入頁面</Button>
</Stack>
}
</Grid> </Grid>
</Grid> </Grid>
</FormGroup> </FormGroup>


Write Preview
Loading…
Cancel
Save