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

update form wizard

master
jason.lam 1 year ago
parent
afb430b981
commit
aad50c9430
6 changed files with 3502 additions and 33560 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3404
    -33487
      package-lock.json
  2. +65
    -55
      src/pages/authentication/auth-forms/BusCustomFormWizard.js
  3. +22
    -13
      src/pages/authentication/auth-forms/CustomFormWizard.js
  4. +1
    -1
      src/pages/authentication/auth-forms/UploadFileTable.js
  5. +5
    -4
      src/themes/themeConst.js
  6. +5
    -0
      src/themes/typography.js

+ 3404
- 33487
package-lock.json
File diff suppressed because it is too large
View File


+ 65
- 55
src/pages/authentication/auth-forms/BusCustomFormWizard.js View File

@@ -51,6 +51,9 @@ import { Link } from 'react-router-dom';
import * as HttpUtils from "../../../utils/HttpUtils" 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 {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
import {FormattedMessage} from "react-intl";
//import { Invaild } from 'utils/IconUtils'; //import { Invaild } from 'utils/IconUtils';
// ============================|| FIREBASE - REGISTER ||============================ // // ============================|| FIREBASE - REGISTER ||============================ //


@@ -561,7 +564,7 @@ const BusCustomFormWizard = (props) => {
<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 } }}>
<Button variant="outlined" type="reset" onClick={handleReset.bind(null, formik.resetForm)} sx={{ height: '40px' }}><Typography variant="h5">重置</Typography></Button>
<Button variant="outlined" type="reset" onClick={handleReset.bind(null, formik.resetForm)} sx={{ height: '40px' }}><Typography variant="pnspsFormHeader">重置</Typography></Button>
<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>
@@ -577,8 +580,8 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={12} > <Grid item xs={12} md={12} >
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="username-signup"> <InputLabel htmlFor="username-signup">
<Typography variant="h5">
用戶登入名稱
<Typography variant="pnspsFormHeader">
<FormattedMessage id="userLoginName"/>
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
{/* <Button {/* <Button
variant="contained" variant="contained"
@@ -628,7 +631,7 @@ const BusCustomFormWizard = (props) => {
<Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}> <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
<Stack direction="row" justifyContent="space-between"> <Stack direction="row" justifyContent="space-between">
<InputLabel htmlFor="password-signup"> <InputLabel htmlFor="password-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
密碼 密碼
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
@@ -690,7 +693,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={6} > <Grid item xs={12} md={6} >
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="confirmPassword-signup"> <InputLabel htmlFor="confirmPassword-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
確認密碼 確認密碼
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
@@ -768,7 +771,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="enCompanyName-signup"> <InputLabel htmlFor="enCompanyName-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
機構/公司英文名稱 機構/公司英文名稱
</Typography> </Typography>
</InputLabel> </InputLabel>
@@ -800,7 +803,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="chCompanyName-signup"> <InputLabel htmlFor="chCompanyName-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
機構/公司中文名稱 機構/公司中文名稱
</Typography> </Typography>
</InputLabel> </InputLabel>
@@ -832,7 +835,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="brNo-signup"> <InputLabel htmlFor="brNo-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
商業登記證號碼 (e.g. 12341234-123-12-12-1) 商業登記證號碼 (e.g. 12341234-123-12-12-1)
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
@@ -865,7 +868,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="brExpiryDate-signup"> <InputLabel htmlFor="brExpiryDate-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
商業登記證有效日期 商業登記證有效日期
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
@@ -900,7 +903,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12}> <Grid item xs={12}>
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="address1-signup"> <InputLabel htmlFor="address1-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
地址 地址
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
@@ -963,7 +966,8 @@ const BusCustomFormWizard = (props) => {
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" }, }}
size="small"
sx={{ "& .MuiInputBase-root": { height: "41px" }, /*"#address4-combo": { padding: "0px 0px 0px 0px" },*/ "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)" />} renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)" />}
/> />
<Autocomplete <Autocomplete
@@ -971,6 +975,7 @@ const BusCustomFormWizard = (props) => {
id="address5-combo" id="address5-combo"
value={selectedAddress5} value={selectedAddress5}
options={address5ComboList} options={address5ComboList}
size="small"
onChange={(event, newValue) => { onChange={(event, newValue) => {
if (newValue !== null) { if (newValue !== null) {
setSelectedAddress5(newValue); setSelectedAddress5(newValue);
@@ -986,7 +991,7 @@ const BusCustomFormWizard = (props) => {
} }
}} }}


sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
sx={{ "& .MuiInputBase-root": { height: "41px" }, /*"#address5-combo": { padding: "0px 0px 0px 0px" },*/ "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
renderInput={(params) => <TextField {...params} placeholder="國家/地區" />} renderInput={(params) => <TextField {...params} placeholder="國家/地區" />}
/> />
{formik.touched.address1 && formik.errors.address1 && ( {formik.touched.address1 && formik.errors.address1 && (
@@ -1014,7 +1019,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="enName-signup"> <InputLabel htmlFor="enName-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
姓名 姓名
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
@@ -1049,7 +1054,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<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="pnspsFormHeader">
電郵 電郵
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
@@ -1087,7 +1092,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1} > <Stack spacing={1} >
<InputLabel htmlFor="emailConfirm-signup"> <InputLabel htmlFor="emailConfirm-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
確認電郵 確認電郵
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
@@ -1127,7 +1132,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<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="pnspsFormHeader">
聯絡電話 聯絡電話
<span style={{ color: '#f10000' }}>*</span> <span style={{ color: '#f10000' }}>*</span>
</Typography> </Typography>
@@ -1147,6 +1152,7 @@ const BusCustomFormWizard = (props) => {
} }
formik.setFieldValue("phoneCountryCode", value); formik.setFieldValue("phoneCountryCode", value);
}} }}
endAdornment={<InputAdornment position="end">-</InputAdornment>}
placeholder="國際區號" placeholder="國際區號"
error={Boolean(formik.touched.phone && formik.errors.phone)} error={Boolean(formik.touched.phone && formik.errors.phone)}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
@@ -1158,7 +1164,7 @@ const BusCustomFormWizard = (props) => {
} }
}, },
}} }}
sx={{ width: '25%' }}
sx={{ width: '33%', mr:1 }}
/> />
<OutlinedInput <OutlinedInput
id="phone-login" id="phone-login"
@@ -1184,7 +1190,7 @@ const BusCustomFormWizard = (props) => {
} }
}, },
}} }}
sx={{ width: '75%' }}
sx={{ width: '66%' }}
/> />
</Stack> </Stack>
{formik.touched.phone && formik.errors.phone && ( {formik.touched.phone && formik.errors.phone && (
@@ -1201,7 +1207,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Stack spacing={1} direction="column"> <Stack spacing={1} direction="column">
<InputLabel htmlFor="fax-signup"> <InputLabel htmlFor="fax-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
傳真號碼 傳真號碼
</Typography> </Typography>
</InputLabel> </InputLabel>
@@ -1222,6 +1228,7 @@ const BusCustomFormWizard = (props) => {
formik.setFieldValue("faxCountryCode", value); formik.setFieldValue("faxCountryCode", value);
}} }}
placeholder="國際區號" placeholder="國際區號"
endAdornment={<InputAdornment position="end">-</InputAdornment>}
inputProps={{ inputProps={{
maxLength: 3, maxLength: 3,
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -1230,7 +1237,7 @@ const BusCustomFormWizard = (props) => {
} }
}, },
}} }}
sx={{ width: '25%' }}
sx={{ width: '33%', mr:1 }}
/> />
<OutlinedInput <OutlinedInput
id="fax-login" id="fax-login"
@@ -1255,7 +1262,7 @@ const BusCustomFormWizard = (props) => {
} }
}, },
}} }}
sx={{ width: '75%' }}
sx={{ width: '66%' }}
/> />
</Stack> </Stack>
</Stack> </Stack>
@@ -1274,7 +1281,9 @@ const BusCustomFormWizard = (props) => {
<Typography display="inline" variant="h6" sx={{ color: 'primary.primary' }}>請上傳你的 有效商業登記證及其他文件 的數碼檔案，以驗證你的身份。</Typography> <Typography display="inline" variant="h6" 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}> <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
<Button variant="contained" component="label" sx={{ height: '40px' }}><Typography variant="h6">上傳商業登記證及其他文件</Typography>
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
<Button variant="contained" component="label" sx={{ height: '40px' }}>
上傳商業登記證及其他文件
<input <input
accept="image/png, .jpg, .bmp, .pdf" accept="image/png, .jpg, .bmp, .pdf"
//className={classes.input} //className={classes.input}
@@ -1285,6 +1294,7 @@ const BusCustomFormWizard = (props) => {
style={{ display: 'none' }} style={{ display: 'none' }}
/> />
</Button> </Button>
</ThemeProvider>
{/* <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> </Stack>
{fileList != null ? {fileList != null ?
@@ -1309,7 +1319,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Grid container> <Grid container>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Typography variant="h6" height="80%" sx={{ textAlign: "left", overflow: "scroll", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
<Typography variant="h6" height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
{termsAndCon} {termsAndCon}
</Typography> </Typography>
</Grid> </Grid>
@@ -1326,7 +1336,7 @@ const BusCustomFormWizard = (props) => {
color="primary" color="primary"
size="small" size="small"
/> />
<Typography variant="h5">我接受</Typography>
<Typography variant="pnspsFormHeader">我接受</Typography>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
@@ -1340,7 +1350,7 @@ const BusCustomFormWizard = (props) => {
color="primary" color="primary"
size="small" size="small"
/> />
<Typography variant="h5">我不接受</Typography>
<Typography variant="pnspsFormHeader">我不接受</Typography>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
@@ -1413,10 +1423,10 @@ const BusCustomFormWizard = (props) => {
<Grid container spacing={1}> <Grid container spacing={1}>
<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="pnspsFormHeader" color={theme.palette.grey[600]}>
用戶登入名稱: 用戶登入名稱:
</Typography> </Typography>
<Typography variant="h5" id="preview-username-login">
<Typography variant="pnspsFormHeader" id="preview-username-login">
{formik.values.username} {formik.values.username}
</Typography> </Typography>
</Stack> </Stack>
@@ -1432,20 +1442,20 @@ const BusCustomFormWizard = (props) => {


<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
機構/公司英文名稱: 機構/公司英文名稱:
</Typography> </Typography>
<Typography variant="h5" id="preview-enCompanyName-signup">
<Typography variant="pnspsFormHeader" id="preview-enCompanyName-signup">
{formik.values.enCompanyName} {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 variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
機構/公司中文名稱: 機構/公司中文名稱:
</Typography> </Typography>
<Typography variant="h5" id="preview-chCompanyName-signup">
<Typography variant="pnspsFormHeader" id="preview-chCompanyName-signup">
{formik.values.chCompanyName} {formik.values.chCompanyName}
</Typography> </Typography>
</Stack> </Stack>
@@ -1453,7 +1463,7 @@ const BusCustomFormWizard = (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="pnspsFormHeader" color={theme.palette.grey[600]}>
商業登記證 商業登記證
</Typography> </Typography>
</Stack> </Stack>
@@ -1461,20 +1471,20 @@ const BusCustomFormWizard = (props) => {


<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Typography variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
商業登記證號碼: 商業登記證號碼:
</Typography> </Typography>
<Typography variant="h5" id="brNo-login">
<Typography variant="pnspsFormHeader" id="brNo-login">
{formik.values.brNo} {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 variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
商業登記證有效日期: 商業登記證有效日期:
</Typography> </Typography>
<Typography variant="h5" id="brExpiryDate-login">
<Typography variant="pnspsFormHeader" id="brExpiryDate-login">
{formik.values.brExpiryDate} {formik.values.brExpiryDate}
</Typography> </Typography>
</Stack> </Stack>
@@ -1482,38 +1492,38 @@ const BusCustomFormWizard = (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="pnspsFormHeader" color={theme.palette.grey[600]}>
地址: 地址:
</Typography> </Typography>
<Stack spacing={1} direction="column"> <Stack spacing={1} direction="column">
<Typography variant="h5" id="preview-address1-signup">
<Typography variant="pnspsFormHeader" id="preview-address1-signup">
{formik.values.address1} {formik.values.address1}
</Typography> </Typography>
{formik.values.address2 != null ? {formik.values.address2 != null ?
<Typography variant="h5" id="preview-address2-signup">
<Typography variant="pnspsFormHeader" id="preview-address2-signup">
{formik.values.address2} {formik.values.address2}
</Typography> </Typography>
: null} : null}
{formik.values.address3 != null ? {formik.values.address3 != null ?
<Typography variant="h5" id="preview-address3-signup">
<Typography variant="pnspsFormHeader" id="preview-address3-signup">
{formik.values.address3} {formik.values.address3}
</Typography> </Typography>
: null} : null}
{selectedAddress5 == ("香港") ?
{selectedAddress5 === "香港" ?
<Stack direction="row"> <Stack direction="row">
<Typography variant="h5" color={theme.palette.grey[600]} id="preview-address4-signup">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
區域 (只適用於香港): 區域 (只適用於香港):
</Typography> </Typography>
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
{selectedAddress4} {selectedAddress4}
</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="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
國家/地區: 國家/地區:
</Typography> </Typography>
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
{selectedAddress5} {selectedAddress5}
</Typography> </Typography>
</Stack> </Stack>
@@ -1527,40 +1537,40 @@ const BusCustomFormWizard = (props) => {
</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="pnspsFormHeader" color={theme.palette.grey[600]}>
英文名稱: 英文名稱:
</Typography> </Typography>
<Typography variant="h5" id="preview-enName-signup">
<Typography variant="pnspsFormHeader" id="preview-enName-signup">
{formik.values.enName} {formik.values.enName}
</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="pnspsFormHeader" color={theme.palette.grey[600]}>
電郵: 電郵:
</Typography> </Typography>
<Typography variant="h5" id="preview-email-signup">
<Typography variant="pnspsFormHeader" id="preview-email-signup">
{formik.values.email} {formik.values.email}
</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 variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
聯絡電話: 聯絡電話:
</Typography> </Typography>
<Typography variant="h5" id="preview-phone-signup">
<Typography variant="pnspsFormHeader" id="preview-phone-signup">
+{formik.values.phoneCountryCode} {formik.values.phone} +{formik.values.phoneCountryCode} {formik.values.phone}
</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 variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
傳真號碼: 傳真號碼:
</Typography> </Typography>
<Typography variant="h5" id="preview-fax-signup">
<Typography variant="pnspsFormHeader" id="preview-fax-signup">
+{formik.values.faxCountryCode} {formik.values.fax} +{formik.values.faxCountryCode} {formik.values.fax}
</Typography> </Typography>
</Stack> </Stack>
@@ -1592,7 +1602,7 @@ const BusCustomFormWizard = (props) => {
<CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} /> <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
<Typography display="inline" variant="h4">帳戶申請已成功提交。</Typography> <Typography display="inline" variant="h4">帳戶申請已成功提交。</Typography>
<Typography display="inline" variant="h4">驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。</Typography> <Typography display="inline" variant="h4">驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。</Typography>
<Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</Typography></Button>
<Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">返回登入頁面</Typography></Button>
</Stack> </Stack>
: :
// ERROR page // ERROR page
@@ -1600,7 +1610,7 @@ const BusCustomFormWizard = (props) => {
{/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */} {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
<CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} /> <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
<Typography display="inline" variant="h4">申請失敗，請稍後嘗試</Typography> <Typography display="inline" variant="h4">申請失敗，請稍後嘗試</Typography>
<Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</Typography></Button>
<Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">返回登入頁面</Typography></Button>
</Stack> </Stack>
} }
</Grid> </Grid>


+ 22
- 13
src/pages/authentication/auth-forms/CustomFormWizard.js View File

@@ -50,6 +50,8 @@ import { Link } from 'react-router-dom';
import * as HttpUtils from "../../../utils/HttpUtils"; 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 {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";


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


@@ -892,8 +894,11 @@ const CustomFormWizard = (props) => {
setSelectedIdDocInputType(""); setSelectedIdDocInputType("");
} }
}} }}
sx={{ "& .MuiInputBase-root": { minHeight: "46px", maxHeight: "46px" }, /*"#idDocType": { padding: "0px 0px 0px 0px" },*/ "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
renderInput={(params) => <TextField {...params} placeholder="證件類別" />}
sx={{ "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
renderInput={(params) => <TextField
{...params}
placeholder="證件類別"
/>}
/> />
{formik.touched.idDocType && ( {formik.touched.idDocType && (
selectedIdDocType === null ? selectedIdDocType === null ?
@@ -903,10 +908,10 @@ const CustomFormWizard = (props) => {
)} )}
</Stack> </Stack>
</Grid> </Grid>
{selectedIdDocType.type == "HKID" ?
{selectedIdDocType.type === "HKID" ?
<> <>
<Grid item xs={10} md={5}> <Grid item xs={10} md={5}>
<Stack spacing={1}>
<Stack spacing={1} sx={{ mr: { md: 1 } }}>
<OutlinedInput <OutlinedInput
id="idNo-login" id="idNo-login"
type="text" type="text"
@@ -961,8 +966,10 @@ const CustomFormWizard = (props) => {
value={formik.values.checkDigit.trim()} value={formik.values.checkDigit.trim()}
name="checkDigit" name="checkDigit"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="( )"
//placeholder="( )"
// sx={{height:"53px"}} // sx={{height:"53px"}}
startAdornment={<InputAdornment position="start">(</InputAdornment>}
endAdornment={<InputAdornment position="end">)</InputAdornment>}
inputProps={{ inputProps={{
maxLength: 1, maxLength: 1,
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -1310,6 +1317,7 @@ const CustomFormWizard = (props) => {
placeholder="國際區號" placeholder="國際區號"
error={Boolean(formik.touched.phone && formik.errors.phone)} error={Boolean(formik.touched.phone && formik.errors.phone)}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
endAdornment={<InputAdornment position="end">-</InputAdornment>}
inputProps={{ inputProps={{
maxLength: 3, maxLength: 3,
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -1318,7 +1326,7 @@ const CustomFormWizard = (props) => {
} }
}, },
}} }}
sx={{ width: '25%' }}
sx={{ width: '33%', mr:1}}
/> />
<OutlinedInput <OutlinedInput
id="phone-login" id="phone-login"
@@ -1345,7 +1353,7 @@ const CustomFormWizard = (props) => {
} }
}, },
}} }}
sx={{ width: '75%' }}
sx={{ width: '66%' }}
/> />
</Stack> </Stack>
{formik.touched.phone && formik.errors.phone && ( {formik.touched.phone && formik.errors.phone && (
@@ -1383,6 +1391,7 @@ const CustomFormWizard = (props) => {
}} }}
placeholder="國際區號" placeholder="國際區號"
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
endAdornment={<InputAdornment position="end">-</InputAdornment>}
inputProps={{ inputProps={{
maxLength: 3, maxLength: 3,
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -1391,7 +1400,7 @@ const CustomFormWizard = (props) => {
} }
}, },
}} }}
sx={{ width: '25%' }}
sx={{ width: '33%' , mr: 1}}
/> />
<OutlinedInput <OutlinedInput
id="fax-login" id="fax-login"
@@ -1416,7 +1425,7 @@ const CustomFormWizard = (props) => {
} }
}, },
}} }}
sx={{ width: '75%' }}
sx={{ width: '66%' }}
/> />
</Stack> </Stack>
</Stack> </Stack>
@@ -1433,10 +1442,9 @@ const CustomFormWizard = (props) => {
<Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography> <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography>
<Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>如: 香港身份證; 護照; 中國內地身份證; 專業執業証書等</Typography> <Typography display="inline" variant="subtitle1" sx={{ 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}>
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
<Button variant="contained" component="label" sx={{ height: '40px' }}> <Button variant="contained" component="label" sx={{ height: '40px' }}>
<Typography variant="h6">
上傳身份證明文件
</Typography>
上傳身份證明文件
<input <input
accept="image/png, .jpg, .bmp, .pdf" accept="image/png, .jpg, .bmp, .pdf"
//className={classes.input} //className={classes.input}
@@ -1447,6 +1455,7 @@ const CustomFormWizard = (props) => {
style={{ display: 'none' }} style={{ display: 'none' }}
/> />
</Button> </Button>
</ThemeProvider>
<Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>如: 香港身份證; 護照; 中國內地身份證等</Typography> <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>如: 香港身份證; 護照; 中國內地身份證等</Typography>
</Stack> </Stack>
{fileList != null ? {fileList != null ?
@@ -1471,7 +1480,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Grid container> <Grid container>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Typography variant="pnspsFormHeader" height="80%" sx={{ textAlign: "left", overflow: "scroll", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
<Typography variant="h6" height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
{termsAndCon} {termsAndCon}
</Typography> </Typography>
</Grid> </Grid>


+ 1
- 1
src/pages/authentication/auth-forms/UploadFileTable.js View File

@@ -77,7 +77,7 @@ export default function UploadFileTable({ recordList, setUpdateRows, }) {
id: 'name', id: 'name',
field: 'name', field: 'name',
headerName: <Typography variant="h6">檔案名稱</Typography>, headerName: <Typography variant="h6">檔案名稱</Typography>,
flex: 1,
flex: 5,
}, },
{ {
id: 'size', id: 'size',


+ 5
- 4
src/themes/themeConst.js View File

@@ -6,7 +6,7 @@ import {GENERAL_TABLE_BOARDER_COLOR, TABLE_HEADER_TEXT_COLOR} from "./colorConst
const FONT_SIZE = '1.1rem'; const FONT_SIZE = '1.1rem';
const TABLE_FONT_SIZE = '1.0rem'; const TABLE_FONT_SIZE = '1.0rem';
const HELPER_FONT_SIZE = '0.9rem'; const HELPER_FONT_SIZE = '0.9rem';
const ROW_HEIGHT = '42.5px';
const ROW_HEIGHT = '46px';
const theme = Palette('light', 'default'); const theme = Palette('light', 'default');
export const CARD_MAX_WIDTH = "98%" export const CARD_MAX_WIDTH = "98%"


@@ -204,14 +204,15 @@ export const PNSPS_THEME = createTheme({
border: `1px solid ${theme.palette.error.light}` border: `1px solid ${theme.palette.error.light}`
} }
} }
}
},
height: ROW_HEIGHT
}, },
inputSizeSmall: { inputSizeSmall: {
padding: '7.5px 8px 7.5px 12px' padding: '7.5px 8px 7.5px 12px'
}, },
inputMultiline: { inputMultiline: {
root:{ root:{
minHeight:'42.5px',
minHeight: ROW_HEIGHT,
maxHeight: '50vh' maxHeight: '50vh'
}, },
padding: '7.5px 8px 7.5px 12px' padding: '7.5px 8px 7.5px 12px'
@@ -230,7 +231,7 @@ export const PNSPS_THEME = createTheme({
}, },
'& .MuiInputBase-root': { '& .MuiInputBase-root': {
//height: '40px', //height: '40px',
minHeight: '42.5px',
minHeight: ROW_HEIGHT,
maxHeight: ROW_HEIGHT, maxHeight: ROW_HEIGHT,
boxSizing: 'border-box', // Ensure the background shape follows the size of the TextField boxSizing: 'border-box', // Ensure the background shape follows the size of the TextField
padding: '1px', // Adjust the padding as needed padding: '1px', // Adjust the padding as needed


+ 5
- 0
src/themes/typography.js View File

@@ -22,6 +22,11 @@ const Typography = (fontFamily) => ({
fontWeight: 600, fontWeight: 600,
lineHeight: 1.5 lineHeight: 1.5
}, },
pnspsFormParagraph: {
fontWeight: 600,
fontSize: '1.1rem',
lineHeight: 0.8
},
h1: { h1: {
fontWeight: 600, fontWeight: 600,
fontSize: '2.5rem', fontSize: '2.5rem',


Write Preview
Loading…
Cancel
Save