diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js index 4b4be74..c5aced5 100644 --- a/src/layout/MainLayout/Header/index.js +++ b/src/layout/MainLayout/Header/index.js @@ -210,9 +210,14 @@ function Header(props) { alignItems="center" spacing={0} > - - - 公共啟事提交及繳費系統 + + + + + 公共啟事提交 + 及繳費系統 + + - - 公共啟事提交及繳費系統 + + + 公共啟事提交及繳費系統 + } diff --git a/src/pages/authentication/AuthCardCustom.js b/src/pages/authentication/AuthCardCustom.js index 3538601..4862e9a 100644 --- a/src/pages/authentication/AuthCardCustom.js +++ b/src/pages/authentication/AuthCardCustom.js @@ -11,7 +11,7 @@ import MainCard from 'components/MainCard'; const AuthCardCustom = ({ children, ...other }) => ( *': { flexGrow: 1, diff --git a/src/pages/authentication/BusRegister.js b/src/pages/authentication/BusRegister.js index a6c4410..97de330 100644 --- a/src/pages/authentication/BusRegister.js +++ b/src/pages/authentication/BusRegister.js @@ -48,10 +48,9 @@ const BusRegister = () => { const [activeStep, setActiveStep] = useState(0); const [completed, setCompleted] = useState([false]); - const [isValid, setisValid] = useState(null); - const updateValid = (value) => { - setisValid(value); + const uploadStep = (value) => { + setActiveStep(value); console.log(value) }; @@ -108,7 +107,7 @@ {steps.map((label, index) => ( - + { index < 2 ? ( - + {/* */} @@ -179,7 +178,7 @@ ): ( - ) diff --git a/src/pages/authentication/Register.js b/src/pages/authentication/Register.js index 43516e8..fba488d 100644 --- a/src/pages/authentication/Register.js +++ b/src/pages/authentication/Register.js @@ -48,10 +48,9 @@ const Register = () => { const [activeStep, setActiveStep] = useState(0); const [completed, setCompleted] = useState([false]); - const [isValid, setisValid] = useState(null); - const updateValid = (value) => { - setisValid(value); + const uploadStep = (value) => { + setActiveStep(value); console.log(value) }; @@ -108,7 +107,7 @@ {steps.map((label, index) => ( - + { index < 2 ? ( - + {/* */} @@ -179,7 +178,7 @@ ): ( - ) diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js index d9a4e2e..13ec0ba 100644 --- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js +++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js @@ -37,6 +37,8 @@ import UploadFileTable from './UploadFileTable'; import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; // import { Paper } from '../../../../node_modules/@mui/material/index'; import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; +import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined'; + import { Link } from 'react-router-dom'; // ============================|| FIREBASE - REGISTER ||============================ // @@ -47,6 +49,8 @@ const BusCustomFormWizard = (props) => { const [showConfirmPassword, setshowConfirmPassword] = useState(false); const [fileList, setFileList] = useState([]); const [fileListData, setFileListData] = useState([]); + const [uploadStep, setUploadStep] = useState(0); + const [checkUpload, setCheckUpload] = useState(false); const handleClickShowPassword = () => { setShowPassword(!showPassword); @@ -64,13 +68,11 @@ const BusCustomFormWizard = (props) => { setLevel(strengthColorChi(temp)); }; - const [selectedIdDocType, setSelectedIdDocType] = useState(null); const [selectedAddress4, setSelectedAddress4] = useState(null); - const [selectedAddress5, setSelectedAddress5] = useState(null); + const [selectedAddress5, setSelectedAddress5] = useState("香港"); const [termsAndConAccept, setTermsAndConAccept] = useState(false); const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); - const idDocTypeComboList = ["BR","otherCert"]; const address4ComboList = ["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區", "坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"]; @@ -132,27 +134,39 @@ const BusCustomFormWizard = (props) => { }; useEffect(() => { - console.log(props.step); - _onSubmit(); - }, [props.step]) + props.step ==2?_onSubmit():null; + setUploadStep(props.step) + }, [props.step]) const {handleSubmit} = useForm({}) const _onSubmit = () => { - values.idDocType = selectedIdDocType values.address4 = selectedAddress4 values.address5 = selectedAddress5 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 = { "countryCode":values.faxCountryCode, "faxNumber":values.fax, }; - const userMobileNumber = { + const busUserContactTel = { "countryCode":values.phoneCountryCode, "phoneNumber":values.phone, }; @@ -169,21 +183,23 @@ const BusCustomFormWizard = (props) => { username: values.username, password: values.password, 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) => { + setCheckUpload(true) HttpUtils.fileUpload( { - refType:"identification", + refType:"brFile", refId: response.data.id, file: fileList[0], onSuccess: (response)=>{ @@ -203,7 +219,8 @@ const BusCustomFormWizard = (props) => { initialValues:({ username:'', enName: '', - chName: '', + enCompanyName: '', + chCompanyName: '', email: '', address1: '', address2: '', @@ -211,28 +228,31 @@ const BusCustomFormWizard = (props) => { password: '', confirmPassword: '', phone:'', - phoneCountryCode:'', - idNo:'', - checkDigit:'', + phoneCountryCode:'852', submit: null, 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 useEffect(() => { }, [values]) @@ -241,12 +261,12 @@ const BusCustomFormWizard = (props) => {
{/* Input Form */} - +
- 成為新的公司/機構用戶 + 成為新的機構/公司用戶
註有*的項目必須輸入資料 你的登入資料 @@ -398,147 +418,27 @@ const BusCustomFormWizard = (props) => { - 公司/機構資料 + 你的機構/公司資料 {/* Already have an account? */} - - - - 公司證明文件 - * - - {/* {formik.touched.enName && formik.errors.enName && ( - - {formik.errors.enName} - - )} */} - - - - - - - { - if (newValue !== null){ - setSelectedIdDocType(newValue); - } - }} - sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} - renderInput={(params) => } - /> - - - {selectedIdDocType =="HKID"? - <> - - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - {formik.touched.idNo && formik.errors.idNo && ( - - {formik.errors.idNo} - - )} - - - - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - fullWidth - error={Boolean(formik.touched.checkDigit && formik.errors.checkDigit)} - /> - {formik.touched.checkDigit && formik.errors.checkDigit && ( - - {formik.errors.checkDigit} - - )} - - - : - - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - {formik.touched.idNo && formik.errors.idNo && ( - - {formik.errors.idNo} - - )} - - - } - - + - 英文名稱 + 機構/公司英文名稱 * { if (e.key === 'Enter') { @@ -547,25 +447,79 @@ const BusCustomFormWizard = (props) => { }, }} /> - {formik.touched.enName && formik.errors.enName && ( - - {formik.errors.enName} + {formik.touched.enCompanyName && formik.errors.enCompanyName && ( + + {formik.errors.enCompanyName} )} - 中文名稱 + 機構/公司中文名稱 { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {formik.touched.chCompanyName && formik.errors.chCompanyName && ( + + {formik.errors.chCompanyName} + + )} + + + + + 商業登記證號碼 + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {formik.touched.brNo && formik.errors.brNo && ( + + {formik.errors.brNo} + + )} + + + + + 商業登記證有效日期 + { if (e.key === 'Enter') { @@ -574,9 +528,9 @@ const BusCustomFormWizard = (props) => { }, }} /> - {formik.touched.chName && formik.errors.chName && ( - - {formik.errors.chName} + {formik.touched.brExpiryDate && formik.errors.brExpiryDate && ( + + {formik.errors.brExpiryDate} )} @@ -651,7 +605,7 @@ const BusCustomFormWizard = (props) => { { if (newValue !== null){ @@ -681,7 +635,36 @@ const BusCustomFormWizard = (props) => { - 聯絡資料 + 你的聯絡資料 + + + + + 英文姓名 + * + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {formik.touched.enName && formik.errors.enName && ( + + {formik.errors.enName} + + )} @@ -859,11 +842,13 @@ const BusCustomFormWizard = (props) => { - 公司證明文件 - 請上傳你的 有效公司證明文件 的數碼檔案，以驗證你的身份。 + 商業登記證及其他文件 + * + + 請上傳你的 有效商業登記證及其他文件 的數碼檔案，以驗證你的身份。 如: 香港身份證; 護照; 中國內地身份證等 - - 如: 香港身份證; 護照; 中國內地身份證等 - - - + {/* Submit page */} - + - - {/* */} - - 完成申請，請登入帳戶 - - + {checkUpload? + // SUCCESS page + + {/* */} + + 完成申請，請登入帳戶 + + + : + // ERROR page + + {/* */} + + 申請失敗，請稍後嘗試 + + + } diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index a171c63..d1a6f01 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -21,7 +21,7 @@ import Autocomplete from "@mui/material/Autocomplete"; // third party import { useFormik,FormikProvider } from 'formik'; -import * as Yup from 'yup'; +import * as yup from 'yup'; // import axios from "axios"; // project import @@ -37,6 +37,7 @@ import UploadFileTable from './UploadFileTable'; import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; // import { Paper } from '../../../../node_modules/@mui/material/index'; import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; +import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined'; import { Link } from 'react-router-dom'; // ============================|| FIREBASE - REGISTER ||============================ // @@ -47,6 +48,8 @@ const CustomFormWizard = (props) => { const [showConfirmPassword, setshowConfirmPassword] = useState(false); const [fileList, setFileList] = useState([]); const [fileListData, setFileListData] = useState([]); + const [uploadStep, setUploadStep] = useState(0); + const [checkUpload, setCheckUpload] = useState(false); const handleClickShowPassword = () => { setShowPassword(!showPassword); @@ -66,7 +69,7 @@ const CustomFormWizard = (props) => { const [selectedIdDocType, setSelectedIdDocType] = useState(null); const [selectedAddress4, setSelectedAddress4] = useState(null); - const [selectedAddress5, setSelectedAddress5] = useState(null); + const [selectedAddress5, setSelectedAddress5] = useState("香港"); const [termsAndConAccept, setTermsAndConAccept] = useState(false); const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); @@ -132,9 +135,9 @@ const CustomFormWizard = (props) => { }; useEffect(() => { - console.log(props.step); - _onSubmit(); - }, [props.step]) + props.step ==2?_onSubmit():null; + setUploadStep(props.step) + }, [props.step]) const {handleSubmit} = useForm({}) const _onSubmit = () => { @@ -142,12 +145,25 @@ const CustomFormWizard = (props) => { values.address4 = selectedAddress4 values.address5 = selectedAddress5 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 = { "countryCode":values.faxCountryCode, "faxNumber":values.fax, @@ -178,9 +194,11 @@ const CustomFormWizard = (props) => { userFaxNo:userFaxNo, userMobileNumber:userMobileNumber, userAddress:userAddress, - tncFlag:tncFlag + tncFlag:tncFlag, + type:"IND" }) .then((response) => { + setCheckUpload(true) HttpUtils.fileUpload( { refType:"identification", @@ -211,28 +229,42 @@ const CustomFormWizard = (props) => { password: '', confirmPassword: '', phone:'', - phoneCountryCode:'', + phoneCountryCode:'852', idNo:'', checkDigit:'', submit: null, 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 useEffect(() => { }, [values]) @@ -241,7 +273,7 @@ const CustomFormWizard = (props) => { {/* Input Form */} - + @@ -271,6 +303,7 @@ const CustomFormWizard = (props) => { placeholder="用戶登入名稱" fullWidth error={Boolean(formik.touched.username && formik.errors.username)} + onBlur={formik.handleBlur} inputProps={{ onKeyDown: (e) => { if (e.key === 'Enter') { @@ -359,6 +392,7 @@ const CustomFormWizard = (props) => { type={showConfirmPassword ? 'text' : 'password'} value={formik.values.confirmPassword} name="confirmPassword" + onBlur={formik.handleBlur} onChange={(e) => { formik.handleChange(e); changePassword(e.target.value); @@ -450,6 +484,7 @@ const CustomFormWizard = (props) => { fullWidth sx={{mr:1}} error={Boolean(formik.touched.idNo && formik.errors.idNo)} + onBlur={formik.handleBlur} inputProps={{ maxLength: selectedIdDocType =='HKID'?7:18, onKeyDown: (e) => { @@ -651,7 +686,7 @@ const CustomFormWizard = (props) => { { if (newValue !== null){ @@ -942,7 +977,7 @@ const CustomFormWizard = (props) => { {/* Preview Form */} - + @@ -990,7 +1025,7 @@ const CustomFormWizard = (props) => { 證件類別: - {formik.values.idDocType} + {selectedIdDocType} @@ -1000,7 +1035,7 @@ const CustomFormWizard = (props) => { 證件號碼: - {formik.values.idNo} ({formik.values.checkDigit}) + {formik.values.idNo} {selectedAddress5=="香港"?'('+formik.values.checkDigit+')':null} @@ -1034,17 +1069,23 @@ const CustomFormWizard = (props) => { {formik.values.address1} - - {formik.values.address2} - + {formik.values.address2!=null? + + {formik.values.address2} + + :null} + {formik.values.address3!=null? {formik.values.address3} - - {formik.values.address4} - + :null} + {selectedAddress5==("香港")? + + 區域 (只適用於香港): {selectedAddress4} + + :null} - {formik.values.address5} + 國家/地區: {selectedAddress5} @@ -1074,16 +1115,18 @@ const CustomFormWizard = (props) => { - - - - 傳真號碼: - - - +{formik.values.faxCountryCode} {formik.values.fax} - - - + {formik.values.faxCountryCode!=""&&formik.values.fax!=""? + + + + 傳真號碼: + + + +{formik.values.faxCountryCode} {formik.values.fax} + + + + :null} 身份證明文件 @@ -1102,15 +1145,26 @@ const CustomFormWizard = (props) => { {/* Submit page */} - + - - {/* */} - - 完成申請，請登入帳戶 - - + {checkUpload? + // SUCCESS page + + {/* */} + + 完成申請，請登入帳戶 + + + : + // ERROR page + + {/* */} + + 申請失敗，請稍後嘗試 + + + }