alex
/
PNSPS-frontend-MaterialUI
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
417 提交
5 分支
19 MiB
 
 
目录树: 5ebe4ee01e
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '5ebe4ee01e'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/authentication/auth-forms/IAmSmartFormWizard.js

1032 行
62 KiB
原始文件 Blame 文件历史 

  1. import { useEffect, useState, } from 'react';

  2. 

  3. // material-ui

  4. import {

  5.     Button,

  6.     FormHelperText,

  7.     Grid, IconButton,

  8.     InputLabel, OutlinedInput,

  9.     Stack,

  10.     Typography,

  11.     FormGroup,

  12.     TextField,

  13.     Checkbox

  14.     // MenuItem

  15. } from '@mui/material';

  16. import { useForm, } from 'react-hook-form'

  17. import Autocomplete from "@mui/material/Autocomplete";

  18. 

  19. // third party

  20. import { useFormik, FormikProvider } from 'formik';

  21. import * as yup from 'yup';

  22. 

  23. import axios from "axios";

  24. import { POST_IAMSMART_USER_REGISTER, POST_CAPTCHA, GET_USER_EMAIL } from "utils/ApiPathConst";

  25. 

  26. import * as ComboData from "utils/ComboData";

  27. 

  28. import Loadable from 'components/Loadable';

  29. import { lazy } from 'react';

  30. const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));

  31. 

  32. import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';

  33. import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';

  34. import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';

  35. 

  36. import { Link } from 'react-router-dom';

  37. import * as HttpUtils from "../../../utils/HttpUtils";

  38. import LoopIcon from '@mui/icons-material/Loop';

  39. import { useTheme } from '@mui/material/styles';

  40. import { useLocation } from "react-router-dom";

  41. 

  42. // ============================|| FIREBASE - REGISTER ||============================ //

  43. 

  44. const CustomFormWizard = (props) => {

  45.     const location = useLocation();

  46.     const theme = useTheme();

  47. 

  48.     const [iAmSmartData, setIAmSmartData] = useState({});

  49. 

  50.     const [checkUpload, setCheckUpload] = useState(false);

  51.     const [isLoading, setLoding] = useState(true);

  52. 

  53.     const [captcha, setCaptcha] = useState([]);

  54.     const [captchaImg, setCaptchaImage] = useState([]);

  55. 

  56.     const [selectedAddress4, setSelectedAddress4] = useState(null);

  57.     const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]);

  58.     const [termsAndConAccept, setTermsAndConAccept] = useState(false);

  59.     const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);

  60.     const [isValid, setisValid] = useState(false);

  61.     const [checkCountry, setCheckCountry] = useState(false);

  62.     const email = document.getElementById("email-login")

  63.     const [checkEmail, setCheckEmail] = useState(false)

  64.     const [checkEmailBlur, setCheckEmailBlur] = useState(false)

  65. 

  66.     const address4ComboList = ComboData.district;

  67.     const address5ComboList = ComboData.country;

  68.     const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"

  69.         + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"

  70.         + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評"

  71.         + "估本網址所載或與本網址有關連的各項資料，並應在根據該等資料行事前，參照印行的香港"

  72.         + "特別行政區憲報以核實該等資料，以及徵詢獨立意見。\n版權公告本網頁的內容，包括但不限"

  73.         + "於所有文本、平面圖像、圖畫、圖片、照片以及數據或其他資料的匯編，均受版權保障。\n香"

  74.         + "港特別行政區政府是本網頁內所有版權作品的擁有人，除非預先得到政府物流服務署的書面"

  75.         + "授權，否則嚴禁複製、改編、分發、發布或向公眾提供該等版權作品。"

  76. 

  77. 

  78.     useEffect(() => {

  79.         location.state?.responseData ?? {}

  80.         onCaptchaChange();

  81.         responseToData();

  82.     }, []);

  83. 

  84.     const responseToData = () => {

  85.         //let rd = JSON.parse("{\"emailAddress\":\"[email protected]\",\"postalAddress\":{\"EngPremisesAddress\":{\"EngDistrict\":{\"DcDistrict\":\"KC\",\"Sub-district\":\"TSING YI\"},\"EngEstate\":{\"EstateName\":\"Cheung Hang Estate\",\"EngPhase\":{\"PhaseName\":\"N/A\"}},\"BuildingName\":\"Hang Lai House\",\"EngBlock\":{\"BlockDescriptor\":\"Block\",\"BlockNo\":\"2\"},\"Region\":\"NT\",\"EngStreet\":{\"StreetName\":\"Liu To Road\",\"BuildingNoFrom\":\"6\"},\"Eng3dAddress\":{\"EngFloor\":{\"FloorNum\":\"33\"},\"EngUnit\":{\"UnitDescriptor\":\"Room\",\"UnitNo\":\"3301\"}}}},\"mobileNumber\":{\"CountryCode\":\"852\",\"SubscriberNumber\":\"99999999\"},\"residentialAddress\":{\"ChiPremisesAddress\":{\"Chi3dAddress\":{\"ChiUnit\":{\"UnitDescriptor\":\"室\",\"UnitNo\":\"1010\"},\"ChiFloor\":{\"FloorNum\":\"10\"}},\"ChiBlock\":{\"BlockDescriptor\":\"座\",\"BlockNo\":\"2\"},\"BuildingName\":\"亨麗樓(第2座)\",\"ChiDistrict\":{\"DcDistrict\":\"KC\",\"Sub-district\":\"青衣\"},\"Region\":\"新界\",\"ChiEstate\":{\"EstateName\":\"長亨邨\"},\"ChiStreet\":{\"StreetName\":\"寮肚路\",\"BuildingNoFrom\":\"6\"}}},\"enName\":{\"UnstructuredName\":\"Testing Co One\"},\"idNo\":{\"Identification\":\"G561107\",\"CheckDigit\":\"4\"},\"chName\":{\"ChineseName\":\"測試商一\"}}");

  86.         let rd = props.state.responseData;

  87.         let data = {

  88.             "enName": rd.enName?.UnstructuredName ?? "",

  89.             "chName": rd.chName?.ChineseName ?? "",

  90.             "idNo": rd.idNo?.Identification ?? "",

  91.             "checkDigit": rd.idNo?.CheckDigit ?? "",

  92. 			"email": rd.emailAddress ?? "",

  93.             "phone": rd.mobileNumber?.SubscriberNumber ?? "",

  94.             "phoneCountryCode": rd.mobileNumber?.CountryCode ?? "",

  95.         };

  96. 

  97.         if (rd.postalAddress) {

  98.             if (rd.postalAddress.EngPremisesAddress) {

  99.                 data["address1"] = getAddressEng(rd.postalAddress.EngPremisesAddress);

  100.             } else if (rd.postalAddress.ChiPremisesAddress) {

  101.                 data["address1"] = getAddressChi(rd.postalAddress.ChiPremisesAddress);

  102.             }

  103.         } else if (rd.residentialAddress) {

  104.             if (rd.residentialAddress.EngPremisesAddress) {

  105.                 data["address1"] = getAddressEng(rd.residentialAddress.EngPremisesAddress);

  106.             } else if (rd.residentialAddress.ChiPremisesAddress) {

  107.                 data["address1"] = getAddressChi(rd.residentialAddress.ChiPremisesAddress);

  108.             }

  109.         }

  110. 

  111.         setIAmSmartData(data);

  112. 

  113.     }

  114. 

  115. 

  116.     const getAddressEng = (pAdd) => {

  117.         let unit = (pAdd.Eng3dAddress?.EngUnit?.UnitDescriptor ?? "") + " " + (pAdd.Eng3dAddress?.EngUnit?.UnitNo ?? "");

  118.         let block = (pAdd.EngBlock?.BlockDescriptor ?? "") + " " + (pAdd.EngBlock?.BlockNo ?? "");

  119.         let floor = pAdd.Eng3dAddress?.EngFloor?.FloorNum ? pAdd.Eng3dAddress?.EngFloor?.FloorNum + "/F " : "";

  120.         let street = (pAdd.EngStreet?.EngUnit?.UnitDescriptor ?? "") + " " + (pAdd.Eng3dAddress?.EngUnit?.UnitNo ?? "");

  121.         //let region = pAdd.Region ?? "";

  122.         let buildingName = pAdd.BuildingName ?? "";

  123.         let estate = pAdd.EngEstate?.EstateName ?? "";

  124.         let district = pAdd.EngDistrict["Sub - district"] ?? "";

  125.         return getAddressStr([unit, block, floor, buildingName, estate, street, district]);

  126.     }

  127. 

  128.     const getAddressChi = (pAdd) => {

  129.         let unit = (pAdd.Chi3dAddress?.ChiUnit?.UnitDescriptor ?? "") + " " + (pAdd.Chi3dAddress?.ChiUnit?.UnitNo ?? "");

  130.         let block = (pAdd.ChiBlock?.BlockDescriptor ?? "") + " " + (pAdd.ChiBlock?.BlockNo ?? "");

  131.         let floor = pAdd.Chi3dAddress?.ChiFloor?.FloorNum ? pAdd.Chi3dAddress?.ChiFloor?.FloorNum + "樓 " : "";

  132.         let street = (pAdd.ChiStreet?.ChiUnit?.UnitDescriptor ?? "") + " " + (pAdd.Chi3dAddress?.ChiUnit?.UnitNo ?? "");

  133.         //let region = pAdd.Region ?? "";

  134.         let buildingName = pAdd.BuildingName ?? "";

  135.         let estate = pAdd.ChiEstate?.EstateName ?? "";

  136.         let district = pAdd.ChiDistrict["Sub - district"] ?? "";

  137.         return getAddressStr([district, street, estate, buildingName, street, floor, block, unit ]);

  138.     }

  139. 

  140.     const getAddressStr = (strs) => {

  141.         let add = ""

  142.         strs.forEach(str => {

  143.             add += str ? str + ", " : "";

  144.         });

  145.         add = add.trim();

  146.         if (add.slice(- 1) == ",") {

  147.             add = add.substring(0, add.length - 1);

  148.         }

  149.         return add;

  150.     }

  151. 

  152.     const handleCheckEmail = async () => {

  153.         if (values?.email) {

  154.             const response = await axios.get(`${GET_USER_EMAIL}`, {

  155.                 params: {

  156.                     email: values.email,

  157.                 }

  158.             })

  159.             setCheckEmail((Number(response.data[0]) === 1))

  160.             return Number(response.data[0]) === 1

  161.         }

  162.     }

  163. 

  164.     useEffect(() => {

  165.         if (email) {

  166.             email.addEventListener("blur", function () {

  167.                 setCheckEmailBlur(true)

  168.             })

  169.         }

  170.     }, [email])

  171. 

  172.     useEffect(() => {

  173.         if (checkEmailBlur) {

  174.             handleCheckEmail()

  175.             setCheckEmailBlur(false)

  176.         }

  177.     }, [checkEmailBlur])

  178. 

  179.     useEffect(() => {

  180.         if (iAmSmartData) {

  181.             formik.setFieldValue("enName", iAmSmartData.enName??"");

  182.             formik.setFieldValue("chName", iAmSmartData.chName??"");

  183.             formik.setFieldValue("idNo", iAmSmartData.idNo??"");

  184.             formik.setFieldValue("checkDigit", iAmSmartData.checkDigit??"");

  185.             formik.setFieldValue("email", iAmSmartData.email??"");

  186.             formik.setFieldValue("phone", iAmSmartData.phone??"");

  187.             formik.setFieldValue("phoneCountryCode", iAmSmartData.phoneCountryCode??"");

  188.             formik.setFieldValue("address1", iAmSmartData.address1??"");

  189.             props.setIdNo(iAmSmartData.idNo??"");

  190.         }

  191.     }, [iAmSmartData])

  192. 

  193.     const onCaptchaChange = () => {

  194.         HttpUtils.post({

  195.             url: POST_CAPTCHA,

  196.             params: { width: 130, height: 40 },

  197.             onSuccess: (responseData) => {

  198.                 localStorage.setItem("checkCode", responseData.checkCode);

  199.                 localStorage.setItem("base64Url", responseData.base64Url);

  200.                 setCaptcha(localStorage.getItem('checkCode'));

  201.                 setCaptchaImage(localStorage.getItem('base64Url'));

  202.             }

  203.         });

  204.     }

  205. 

  206.     const checkDataField = (data) => {

  207.         if (data.address1 !== "" &&

  208.             data.email !== "" &&

  209.             data.emailConfirm !== "" &&

  210.             data.email == data.emailConfirm &&

  211.             data.phone !== "" &&

  212.             data.phoneCountryCode !== "" &&

  213.             termsAndConAccept == true &&

  214.             data.captchaField &&

  215.             handleEmail(data.email) &&

  216.             handlePhone(data.phone) &&

  217.             handleCaptcha(data.captchaField) &&

  218.             !checkEmail

  219.         ) {

  220.             setisValid(true)

  221.             return isValid

  222.         } else {

  223.             setisValid(false)

  224.             return isValid

  225.         }

  226.     };

  227. 

  228.     const handleCheckBoxChange = (event) => {

  229.         if (event.target.name == 'termsAndConAccept') {

  230.             setTermsAndConAccept(event.target.checked)

  231.             setTermsAndConNotAccept(!event.target.checked)

  232.         }

  233.         if (event.target.name == 'termsAndConNotAccept') {

  234.             setTermsAndConNotAccept(event.target.checked)

  235.             setTermsAndConAccept(!event.target.checked)

  236.         }

  237.     };

  238. 

  239.     useEffect(() => {

  240.         props.setUpdateValid(isValid)

  241.     }, [isValid])

  242. 

  243.     useEffect(() => {

  244.         checkDataField(values)

  245.     }, [

  246.         selectedAddress4, selectedAddress5,

  247.         termsAndConAccept, termsAndConNotAccept])

  248. 

  249.     useEffect(() => {

  250.         props.step == 2 ? _onSubmit() : null;

  251.         onCaptchaChange();

  252.         checkDataField(values)

  253.     }, [props.step])

  254. 

  255.     const { handleSubmit } = useForm({})

  256.     const _onSubmit = () => {

  257.         setLoding(true);

  258.         values.address4 = selectedAddress4

  259.         values.address5 = selectedAddress5

  260.         const userAddress = {

  261.             "addressLine1": "",

  262.             "addressLine2": "",

  263.             "addressLine3": "",

  264.             "district": "",

  265.             "country": ""

  266.         };

  267.         userAddress.addressLine1 = values.address1

  268.         userAddress.addressLine2 = values.address2

  269.         userAddress.addressLine3 = values.address3

  270.         userAddress.district = values.address4

  271.         userAddress.country = values.address5

  272. 

  273.         const userFaxNo = {

  274.             "countryCode": values.faxCountryCode,

  275.             "faxNumber": values.fax,

  276.         };

  277.         const userMobileNumber = {

  278.             "countryCode": values.phoneCountryCode,

  279.             "phoneNumber": values.phone,

  280.         };

  281.         let tncFlag = false;

  282.         if (termsAndConAccept) {

  283.             tncFlag = true

  284.         }

  285.         if (termsAndConNotAccept) {

  286.             tncFlag = false

  287.         }

  288. 

  289.         const formData = {

  290.             enName: iAmSmartData.enName,

  291.             chName: iAmSmartData.chName,

  292.             emailAddress: values.email,

  293.             idDocType: "HKID",

  294.             identification: iAmSmartData.idNo,

  295.             checkDigit: iAmSmartData.checkDigit,

  296.             tncFlag: tncFlag,

  297.             type: "IND",

  298.             userFaxNo: JSON.stringify(userFaxNo),

  299.             userMobileNumber: JSON.stringify(userMobileNumber),

  300.             userAddress: JSON.stringify(userAddress)

  301.         };

  302. 

  303.         if (isValid) {

  304.             axios.post(POST_IAMSMART_USER_REGISTER, formData, {

  305.                 headers: {

  306.                     "Content-Type": "multipart/form-data"

  307.                 }

  308.             })

  309.                 .then((response) => {

  310.                     console.log(response)

  311.                     setCheckUpload(true)

  312.                     setLoding(false);

  313.                 })

  314.                 .catch(error => {

  315.                     console.error(error);

  316.                     setLoding(false);

  317.                 });

  318.         } else {

  319.             setLoding(false);

  320.         }

  321.     }

  322. 

  323.     function handlePhone(phone) {

  324.         if (phone.length < 8) {

  325.             return false;

  326.         } else {

  327.             return true;

  328.         }

  329.     }

  330. 

  331.     function handleCaptcha(captchaField) {

  332.         return captchaField == captcha;

  333.     }

  334. 

  335.     function handleEmail(email) {

  336.         var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

  337.         if (!email.match(validRegex)) {

  338.             return false;

  339.         } else {

  340.             return true;

  341.         }

  342.     }

  343. 

  344.     function displayErrorMsg(errorMsg) {

  345.         return <Typography variant="errorMessage1">{errorMsg}</Typography>

  346.     }

  347. 

  348.     const formik = useFormik({

  349.         initialValues: ({

  350.             email: iAmSmartData.email??"",

  351.             emailConfirm: iAmSmartData.email??"",

  352.             address1: iAmSmartData.address1??"",

  353.             address2: '',

  354.             address3: '',

  355.             phone: iAmSmartData.phone??"",

  356.             phoneCountryCode: iAmSmartData.phoneCountryCode??"852",

  357.             submit: null,

  358.             fax: '',

  359.             faxCountryCode: '852',

  360.             captchaField: ''

  361.         }),

  362.         validationSchema: yup.object().shape({

  363.             address1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),

  364.             address2: yup.string().max(255).required(displayErrorMsg('請輸入第二行地址')),

  365.             address3: yup.string().max(255).required(displayErrorMsg('請輸入第三行地址')),

  366.             email: yup.string().email(displayErrorMsg('請輸入電郵格式')).max(255).required(displayErrorMsg('請輸入電郵')),

  367.             emailConfirm: yup.string().email(displayErrorMsg('請輸入電郵格式')).max(255).required(displayErrorMsg('請輸入電郵')).oneOf([yup.ref('email'), null], displayErrorMsg('請輸入相同電郵')),

  368.             phoneCountryCode: yup.string().min(2, displayErrorMsg('請輸入最少2位數字')).required(displayErrorMsg('請輸入國際區號')),

  369.             phone: yup.string().min(8, displayErrorMsg('請輸入最少8位數字')).required(displayErrorMsg('請輸入聯絡電話')),

  370.             captchaField: yup.string().required(displayErrorMsg('請輸入驗證')).oneOf([captcha], displayErrorMsg('請輸入有效驗證')),

  371.         }),

  372.     });

  373. 

  374. 

  375.     const { values } = formik

  376. 

  377.     useEffect(() => {

  378.         checkDataField(values)

  379.     }, [values])

  380. 

  381.     return (

  382.         <FormikProvider value={formik}>

  383.             <form onSubmit={handleSubmit(_onSubmit)}>

  384.                 {/* Input Form */}

  385.                 <FormGroup id={"inputForm"} sx={{ display: props.step === 0 ? "" : "none" }}>

  386.                     <Grid container spacing={3}>

  387.                         <Grid item xs={12} md={12}>

  388. 

  389.                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  390. 

  391.                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>

  392.                                     <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>成為新的個人用戶</Typography><img src={iAmSmartICon} alt="iAM Smart" width="50" />

  393.                                 </div>

  394. 

  395.                                 <Typography mt={0.25} variant="h6" sx={{ color: '#f10000' }}>註有*的項目必須輸入資料。</Typography>

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

  397. 

  398.                             </Stack>

  399.                         </Grid>

  400.                         <Grid item xs={12} md={12}>

  401.                             <Grid container spacing={1}>

  402.                                 <Grid item xs={12} mt={1} mb={1}>

  403.                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  404.                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>你的個人資料</Typography>

  405.                                     </Stack>

  406.                                 </Grid>

  407.                                 <Grid item xs={12} md={12} >

  408.                                     <Grid container sx={{ mb: 1 }}>

  409.                                         <Stack spacing={1}>

  410.                                             <InputLabel htmlFor="idDocType-signup">

  411.                                                 <Typography variant="h5">

  412.                                                     香港身份證: {iAmSmartData.idNo+"("+iAmSmartData.checkDigit+")"}

  413.                                                 </Typography>

  414.                                             </InputLabel>

  415.                                         </Stack>

  416.                                     </Grid>

  417.                                 </Grid>

  418.                                 <Grid item xs={12} md={6}>

  419.                                     <Stack spacing={1}>

  420.                                         <InputLabel htmlFor="enName-signup">

  421.                                             <Typography variant="h5">

  422.                                                 英文姓名: {iAmSmartData.enName}

  423.                                             </Typography>

  424.                                         </InputLabel>

  425. 

  426.                                     </Stack>

  427.                                 </Grid>

  428.                                 <Grid item xs={12} md={6}>

  429.                                     <Stack spacing={1}>

  430.                                         <InputLabel htmlFor="chName-signup">

  431.                                             <Typography variant="h5">

  432.                                                 中文姓名: {iAmSmartData.chName}

  433.                                             </Typography>

  434.                                         </InputLabel>

  435.                                     </Stack>

  436.                                 </Grid>

  437.                                 <Grid item xs={12}>

  438.                                     <Stack spacing={1}>

  439.                                         <InputLabel htmlFor="address1-signup">

  440.                                             <Typography variant="h5">

  441.                                                 地址

  442.                                                 <span style={{ color: '#f10000' }}>*</span>

  443.                                                 {iAmSmartData.address1?<img src={iAmSmartICon} alt="iAM Smart" width="25" />:null}

  444.                                             </Typography>

  445.                                         </InputLabel>

  446.                                         <OutlinedInput

  447.                                             fullWidth

  448.                                             error={Boolean(formik.touched.address1 && formik.errors.address1)}

  449.                                             id="address1-signup"

  450.                                             value={formik.values.address1}

  451.                                             name="address1"

  452.                                             onChange={formik.handleChange}

  453.                                             placeholder="第一行"

  454.                                             onBlur={formik.handleBlur}

  455.                                             inputProps={{

  456.                                                 onKeyDown: (e) => {

  457.                                                     if (e.key === 'Enter') {

  458.                                                         e.preventDefault();

  459.                                                     }

  460.                                                 },

  461.                                             }}

  462.                                         />

  463.                                         <OutlinedInput

  464.                                             fullWidth

  465.                                             error={Boolean(formik.touched.address2 && formik.errors.address2)}

  466.                                             id="address2-signup"

  467.                                             value={formik.values.address2}

  468.                                             name="address2"

  469.                                             onChange={formik.handleChange}

  470.                                             placeholder="第二行"

  471.                                             inputProps={{

  472.                                                 onKeyDown: (e) => {

  473.                                                     if (e.key === 'Enter') {

  474.                                                         e.preventDefault();

  475.                                                     }

  476.                                                 },

  477.                                             }}

  478.                                         />

  479.                                         <OutlinedInput

  480.                                             fullWidth

  481.                                             error={Boolean(formik.touched.address3 && formik.errors.address3)}

  482.                                             id="address3-signup"

  483.                                             value={formik.values.address3}

  484.                                             name="address3"

  485.                                             onChange={formik.handleChange}

  486.                                             placeholder="第三行"

  487.                                             inputProps={{

  488.                                                 onKeyDown: (e) => {

  489.                                                     if (e.key === 'Enter') {

  490.                                                         e.preventDefault();

  491.                                                     }

  492.                                                 },

  493.                                             }}

  494.                                         />

  495.                                         <Autocomplete

  496.                                             disablePortal

  497.                                             id="address4-combo"

  498.                                             value={selectedAddress4}

  499.                                             options={address4ComboList}

  500.                                             disabled={checkCountry}

  501.                                             onChange={(event, newValue) => {

  502.                                                 setSelectedAddress4(newValue);

  503.                                             }}

  504.                                             sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}

  505.                                             renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)" />}

  506.                                         />

  507.                                         <Autocomplete

  508.                                             disablePortal

  509.                                             id="address5-combo"

  510.                                             value={selectedAddress5}

  511.                                             options={address5ComboList}

  512.                                             onChange={(event, newValue) => {

  513.                                                 if (newValue !== null) {

  514.                                                     setSelectedAddress5(newValue);

  515.                                                     if (newValue == '香港') {

  516.                                                         setCheckCountry(false)

  517.                                                     } else {

  518.                                                         setSelectedAddress4("");

  519.                                                         setCheckCountry(true)

  520.                                                     }

  521.                                                 } else {

  522.                                                     setSelectedAddress4("");

  523.                                                     setCheckCountry(true)

  524.                                                 }

  525.                                             }}

  526. 

  527.                                             sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}

  528.                                             renderInput={(params) => <TextField {...params} placeholder="國家/地區" />}

  529.                                         />

  530.                                         {formik.touched.address1 && formik.errors.address1 && (

  531.                                             <FormHelperText error id="helper-text-address1-signup">

  532.                                                 {formik.errors.address1}

  533.                                             </FormHelperText>

  534.                                         )}

  535.                                         {formik.touched.address2 && formik.errors.address2 && (

  536.                                             <FormHelperText error id="helper-text-address2-signup">

  537.                                                 {formik.errors.address2}

  538.                                             </FormHelperText>

  539.                                         )}

  540.                                         {formik.touched.address3 && formik.errors.address3 && (

  541.                                             <FormHelperText error id="helper-text-address3-signup">

  542.                                                 {formik.errors.address3}

  543.                                             </FormHelperText>

  544.                                         )}

  545.                                     </Stack>

  546.                                 </Grid>

  547.                                 <Grid item xs={12} mt={1} mb={1}>

  548.                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  549.                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>你的聯絡資料</Typography>

  550.                                     </Stack>

  551.                                 </Grid>

  552.                                 <Grid item xs={12} md={12}>

  553.                                     <Grid container>

  554.                                         <Grid item xs={12} md={6}>

  555.                                             <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>

  556.                                                 <InputLabel htmlFor="email-signup">

  557.                                                     <Typography variant="h5">

  558.                                                         電郵

  559.                                                         <span style={{ color: '#f10000' }}>*</span>

  560.                                                         {iAmSmartData.email?<img src={iAmSmartICon} alt="iAM Smart" width="25" />:null}

  561.                                                     </Typography>

  562.                                                 </InputLabel>

  563.                                                 <OutlinedInput

  564.                                                     fullWidth

  565.                                                     error={Boolean((formik.touched.email && formik.errors.email) || checkEmail)}

  566.                                                     id="email-login"

  567.                                                     type="email"

  568.                                                     value={formik.values.email.trim()}

  569.                                                     name="email"

  570.                                                     onChange={formik.handleChange}

  571.                                                     placeholder="電郵"

  572.                                                     onBlur={formik.handleBlur}

  573.                                                     inputProps={{

  574.                                                         onKeyDown: (e) => {

  575.                                                             if (e.key === 'Enter') {

  576.                                                                 e.preventDefault();

  577.                                                             }

  578.                                                         },

  579.                                                     }}

  580.                                                 />

  581.                                                 {formik.touched.email && formik.errors.email && (

  582.                                                     <FormHelperText error id="helper-text-email-signup">

  583.                                                         {formik.errors.email}

  584.                                                     </FormHelperText>

  585.                                                 )}

  586.                                                 {checkEmail && (

  587.                                                     <FormHelperText error id="helper-text-email-signup">

  588.                                                         此電郵已被注冊，請使用其他電郵

  589.                                                     </FormHelperText>

  590.                                                 )}

  591.                                             </Stack>

  592.                                         </Grid>

  593.                                         <Grid item xs={12} md={6}>

  594.                                             <Stack spacing={1} >

  595.                                                 <InputLabel htmlFor="emailConfirm-signup">

  596.                                                     <Typography variant="h5">

  597.                                                         確認電郵

  598.                                                         <span style={{ color: '#f10000' }}>*</span>

  599.                                                     </Typography>

  600.                                                 </InputLabel>

  601.                                                 <OutlinedInput

  602.                                                     fullWidth

  603.                                                     error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)}

  604.                                                     id="emailConfirm-login"

  605.                                                     type="email"

  606.                                                     value={formik.values.emailConfirm.trim()}

  607.                                                     name="emailConfirm"

  608.                                                     // onBlur={formik.handleBlur}

  609.                                                     onChange={formik.handleChange}

  610.                                                     placeholder="確認電郵"

  611.                                                     onBlur={formik.handleBlur}

  612.                                                     inputProps={{

  613.                                                         onKeyDown: (e) => {

  614.                                                             if (e.key === 'Enter') {

  615.                                                                 e.preventDefault();

  616.                                                             }

  617.                                                         },

  618.                                                     }}

  619.                                                 />

  620.                                                 {formik.touched.emailConfirm && formik.errors.emailConfirm && (

  621.                                                     <FormHelperText error id="helper-text-emailConfirm-signup">

  622.                                                         {formik.errors.emailConfirm}

  623.                                                     </FormHelperText>

  624.                                                 )}

  625.                                             </Stack>

  626.                                         </Grid>

  627.                                     </Grid>

  628.                                 </Grid>

  629.                                 <Grid item xs={12} md={12}>

  630.                                     <Grid container>

  631.                                         <Grid item xs={12} md={6}>

  632.                                             <Grid container>

  633.                                                 <Grid item xs={12} md={12}>

  634.                                                     <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>

  635.                                                         <InputLabel htmlFor="phone-signup">

  636.                                                             <Typography variant="h5">

  637.                                                                 聯絡電話

  638.                                                                 <span style={{ color: '#f10000' }}>*</span>

  639.                                                                 {iAmSmartData.phone?<img src={iAmSmartICon} alt="iAM Smart" width="25" />:null}

  640.                                                             </Typography>

  641.                                                         </InputLabel>

  642.                                                         <Stack direction="row">

  643.                                                             <OutlinedInput

  644.                                                                 id="phoneCountryCode-login"

  645.                                                                 type="phoneCountryCode"

  646.                                                                 value={formik.values.phoneCountryCode.trim()}

  647.                                                                 name="phoneCountryCode"

  648.                                                                 // onBlur={formik.handleBlur}

  649.                                                                 // onChange={formik.handleChange}

  650.                                                                 onChange={(event) => {

  651.                                                                     const value = event.target.value;

  652.                                                                     if (value.match(/[^0-9]/)) {

  653.                                                                         return event.preventDefault();

  654.                                                                     }

  655.                                                                     formik.setFieldValue("phoneCountryCode", value);

  656.                                                                 }}

  657.                                                                 placeholder="國際區號"

  658.                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}

  659.                                                                 onBlur={formik.handleBlur}

  660.                                                                 inputProps={{

  661.                                                                     maxLength: 3,

  662.                                                                     onKeyDown: (e) => {

  663.                                                                         if (e.key === 'Enter') {

  664.                                                                             e.preventDefault();

  665.                                                                         }

  666.                                                                     },

  667.                                                                 }}

  668.                                                                 sx={{ width: '25%' }}

  669.                                                             />

  670.                                                             <OutlinedInput

  671.                                                                 id="phone-login"

  672.                                                                 type="phone"

  673.                                                                 value={formik.values.phone.trim()}

  674.                                                                 name="phone"

  675.                                                                 // onBlur={formik.handleBlur}

  676.                                                                 // onChange={formik.handleChange}

  677.                                                                 onChange={(event) => {

  678.                                                                     const value = event.target.value;

  679.                                                                     if (value.match(/[^0-9]/)) {

  680.                                                                         return event.preventDefault();

  681.                                                                     }

  682.                                                                     formik.setFieldValue("phone", value);

  683.                                                                 }}

  684.                                                                 placeholder="聯絡電話"

  685.                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}

  686.                                                                 onBlur={formik.handleBlur}

  687.                                                                 inputProps={{

  688.                                                                     maxLength: 11,

  689.                                                                     onKeyDown: (e) => {

  690.                                                                         if (e.key === 'Enter') {

  691.                                                                             e.preventDefault();

  692.                                                                         }

  693.                                                                     },

  694.                                                                 }}

  695.                                                                 sx={{ width: '75%' }}

  696.                                                             />

  697.                                                         </Stack>

  698.                                                         {formik.touched.phone && formik.errors.phone && (

  699.                                                             <FormHelperText error id="helper-text-phone-signup">

  700.                                                                 {formik.errors.phone}

  701.                                                             </FormHelperText>

  702.                                                         )}

  703.                                                     </Stack>

  704.                                                 </Grid>

  705.                                             </Grid>

  706.                                         </Grid>

  707.                                         <Grid item xs={12} md={6}>

  708.                                             <Grid container>

  709.                                                 <Grid item xs={12} md={12}>

  710.                                                     <Stack spacing={1} direction="column">

  711.                                                         <InputLabel htmlFor="fax-signup">

  712.                                                             <Typography variant="h5">

  713.                                                                 傳真號碼

  714.                                                             </Typography>

  715.                                                         </InputLabel>

  716.                                                         <Stack direction="row">

  717.                                                             <OutlinedInput

  718.                                                                 error={Boolean(formik.touched.fax && formik.errors.fax)}

  719.                                                                 id="faxCountryCode-login"

  720.                                                                 type="faxCountryCode"

  721.                                                                 value={formik.values.faxCountryCode.trim()}

  722.                                                                 name="faxCountryCode"

  723.                                                                 // onChange={formik.handleChange}

  724.                                                                 onChange={(event) => {

  725.                                                                     const value = event.target.value;

  726.                                                                     if (value.match(/[^0-9]/)) {

  727.                                                                         return event.preventDefault();

  728.                                                                     }

  729.                                                                     formik.setFieldValue("faxCountryCode", value);

  730.                                                                 }}

  731.                                                                 placeholder="國際區號"

  732.                                                                 onBlur={formik.handleBlur}

  733.                                                                 inputProps={{

  734.                                                                     maxLength: 3,

  735.                                                                     onKeyDown: (e) => {

  736.                                                                         if (e.key === 'Enter') {

  737.                                                                             e.preventDefault();

  738.                                                                         }

  739.                                                                     },

  740.                                                                 }}

  741.                                                                 sx={{ width: '25%' }}

  742.                                                             />

  743.                                                             <OutlinedInput

  744.                                                                 id="fax-login"

  745.                                                                 type="fax"

  746.                                                                 value={formik.values.fax.trim()}

  747.                                                                 name="fax"

  748.                                                                 onBlur={formik.handleBlur}

  749.                                                                 // onChange={formik.handleChange}

  750.                                                                 onChange={(event) => {

  751.                                                                     const value = event.target.value;

  752.                                                                     if (value.match(/[^0-9]/)) {

  753.                                                                         return event.preventDefault();

  754.                                                                     }

  755.                                                                     formik.setFieldValue("fax", value);

  756.                                                                 }}

  757.                                                                 placeholder="傳真號碼"

  758.                                                                 inputProps={{

  759.                                                                     maxLength: 8,

  760.                                                                     onKeyDown: (e) => {

  761.                                                                         if (e.key === 'Enter') {

  762.                                                                             e.preventDefault();

  763.                                                                         }

  764.                                                                     },

  765.                                                                 }}

  766.                                                                 sx={{ width: '75%' }}

  767.                                                             />

  768.                                                         </Stack>

  769.                                                     </Stack>

  770.                                                 </Grid>

  771.                                             </Grid>

  772.                                         </Grid>

  773.                                     </Grid>

  774.                                 </Grid>

  775.                             </Grid>

  776.                             <Grid item xs={12} md={12}>

  777.                                 <Grid container>

  778.                                     <Grid item xs={12} md={12}>

  779.                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>

  780.                                             條款和條件

  781.                                             <span style={{ color: '#f10000' }}>*</span>

  782.                                         </Typography>

  783.                                     </Grid>

  784.                                     <Grid item xs={12} md={12}>

  785.                                         <Grid container>

  786.                                             <Grid item xs={12} md={12}>

  787.                                                 <Typography variant="h5" height="80%" sx={{ textAlign: "left", overflow: "scroll", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>

  788.                                                     {termsAndCon}

  789.                                                 </Typography>

  790.                                             </Grid>

  791.                                         </Grid>

  792.                                         <Grid item xs={12} s={12} md={12} lg={12}>

  793.                                             <Grid container>

  794.                                                 <Grid item xs={6} s={6} md={2} lg={2}>

  795.                                                     <Grid container>

  796.                                                         <Grid item sx={{ display: 'flex', alignItems: 'center' }}>

  797.                                                             <Checkbox

  798.                                                                 checked={termsAndConAccept}

  799.                                                                 onChange={handleCheckBoxChange}

  800.                                                                 name="termsAndConAccept"

  801.                                                                 color="primary"

  802.                                                                 size="small"

  803.                                                             />

  804.                                                             <Typography variant="h5">我接受</Typography>

  805.                                                         </Grid>

  806.                                                     </Grid>

  807.                                                 </Grid>

  808.                                                 <Grid item xs={6} s={6} md={2} lg={2}>

  809.                                                     <Grid container>

  810.                                                         <Grid item sx={{ display: 'flex', alignItems: 'center' }}>

  811.                                                             <Checkbox

  812.                                                                 checked={termsAndConNotAccept}

  813.                                                                 onChange={handleCheckBoxChange}

  814.                                                                 name="termsAndConNotAccept"

  815.                                                                 color="primary"

  816.                                                                 size="small"

  817.                                                             />

  818.                                                             <Typography variant="h5">我不接受</Typography>

  819.                                                         </Grid>

  820.                                                     </Grid>

  821.                                                 </Grid>

  822.                                             </Grid>

  823.                                         </Grid>

  824.                                     </Grid>

  825.                                 </Grid>

  826.                             </Grid>

  827.                             <Grid item xs={12} lg={12}>

  828.                                 <Grid container>

  829.                                     <Stack direction="column">

  830.                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>

  831.                                             驗證

  832.                                             <span style={{ color: '#f10000' }}>*</span>

  833.                                         </Typography>

  834.                                         <Stack spacing={1} direction="row">

  835.                                             <Grid item xs={5} lg={5} style={{ "border": "1px solid black" }}>

  836.                                                 <img src={captchaImg} alt="" />

  837.                                             </Grid>

  838.                                             <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>

  839.                                                 <IconButton aria-label="refrashCaptcha" size="large" onClick={() => { onCaptchaChange() }}>

  840.                                                     <LoopIcon fontSize="inherit" />

  841.                                                 </IconButton>

  842.                                             </Grid>

  843.                                             <Grid item xs={6} lg={6}>

  844.                                                 <OutlinedInput

  845.                                                     fullWidth

  846.                                                     id="captchaField"

  847.                                                     type="text"

  848.                                                     value={formik.values.captchaField.trim()}

  849.                                                     onBlur={formik.handleBlur}

  850.                                                     error={Boolean(formik.touched.captchaField && formik.errors.captchaField)}

  851.                                                     name="captchaField"

  852.                                                     onChange={(event) => {

  853.                                                         const value = event.target.value;

  854.                                                         formik.setFieldValue("captchaField", value);

  855.                                                     }}

  856.                                                     sx={{ width: '75%' }}

  857.                                                 />

  858.                                             </Grid>

  859.                                         </Stack>

  860.                                         {formik.touched.captchaField && formik.errors.captchaField && (

  861.                                             <FormHelperText error id="helper-text-captcha-signup">

  862.                                                 {formik.errors.captchaField}

  863.                                             </FormHelperText>

  864.                                         )}

  865.                                     </Stack>

  866.                                 </Grid>

  867.                             </Grid>

  868.                         </Grid>

  869.                     </Grid>

  870.                 </FormGroup>

  871.                 {/* Preview Form */}

  872.                 <FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none" }}>

  873.                     <Grid container spacing={3}>

  874.                         <Grid item xs={12} md={12}>

  875.                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  876.                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>

  877.                                     <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>成為新的個人用戶</Typography>

  878.                                 </div>

  879.                             </Stack>

  880.                         </Grid>

  881.                         <Grid item xs={12} md={12}>

  882.                             <Grid container spacing={2}>

  883.                                 <Grid item xs={12} mt={1} mb={1}>

  884.                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  885.                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>你的個人資料</Typography>

  886.                                         {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">

  887.                                         Already have an account?

  888.                                     </Typography> */}

  889.                                     </Stack>

  890.                                 </Grid>

  891.                                 <Grid item xs={12} md={12} >

  892.                                     <Stack spacing={1}>

  893.                                         <Typography variant="h5" color={theme.palette.grey[600]}>

  894.                                             身份證明文件

  895.                                         </Typography>

  896.                                         <Typography variant="h5" name="preview-idDocType">

  897.                                             {formik.values.idNo+"("+formik.values.checkDigit+")"}

  898.                                         </Typography>

  899.                                     </Stack>

  900.                                 </Grid>

  901. 

  902.                                 <Grid item xs={12} md={6}>

  903.                                     <Stack spacing={1} direction="row">

  904.                                         <Typography variant="h5" color={theme.palette.grey[600]}>

  905.                                             英文姓名:

  906.                                         </Typography>

  907.                                         <Typography variant="h5" id="preview-enName-signup">

  908.                                             {formik.values.enName}

  909.                                         </Typography>

  910.                                     </Stack>

  911.                                 </Grid>

  912.                                 <Grid item xs={12} md={6}>

  913.                                     <Stack spacing={1} direction="row">

  914.                                         <Typography variant="h5" color={theme.palette.grey[600]}>

  915.                                             中文姓名:

  916.                                         </Typography>

  917.                                         <Typography variant="h5" id="preview-chName-signup">

  918.                                             {formik.values.chName}

  919.                                         </Typography>

  920.                                     </Stack>

  921.                                 </Grid>

  922.                                 <Grid item xs={12}>

  923.                                     <Stack spacing={1} direction="row">

  924.                                         <Typography variant="h5" color={theme.palette.grey[600]}>

  925.                                             地址:

  926.                                         </Typography>

  927.                                         <Stack spacing={1} direction="column">

  928.                                             <Typography variant="h5" id="preview-address1-signup">

  929.                                                 {formik.values.address1}

  930.                                             </Typography>

  931.                                             {formik.values.address2 != null ?

  932.                                                 <Typography variant="h5" id="preview-address2-signup">

  933.                                                     {formik.values.address2}

  934.                                                 </Typography>

  935.                                                 : null}

  936.                                             {formik.values.address3 != null ?

  937.                                                 <Typography variant="h5" id="preview-address3-signup">

  938.                                                     {formik.values.address3}

  939.                                                 </Typography>

  940.                                                 : null}

  941.                                             {selectedAddress5 == ("香港") ?

  942.                                                 <Stack direction="row">

  943.                                                     <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address4-signup">

  944.                                                         區域 (只適用於香港):

  945.                                                     </Typography>

  946.                                                     <Typography variant="h5">{selectedAddress4}</Typography>

  947.                                                 </Stack>

  948.                                                 : null}

  949.                                             <Stack direction="row">

  950.                                                 <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address5-signup">

  951.                                                     國家/地區:

  952.                                                 </Typography>

  953.                                                 <Typography variant="h5">{selectedAddress5}</Typography>

  954.                                             </Stack>

  955.                                         </Stack>

  956.                                     </Stack>

  957.                                 </Grid>

  958.                                 <Grid item xs={12} mt={1} mb={1}>

  959.                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  960.                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>你的聯絡資料</Typography>

  961.                                     </Stack>

  962.                                 </Grid>

  963.                                 <Grid item xs={12} md={12}>

  964.                                     <Stack spacing={1} direction="row">

  965.                                         <Typography variant="h5" color={theme.palette.grey[600]}>

  966.                                             電郵:

  967.                                         </Typography>

  968.                                         <Typography variant="h5" id="preview-email-signup">

  969.                                             {formik.values.email}

  970.                                         </Typography>

  971.                                     </Stack>

  972.                                 </Grid>

  973.                                 <Grid item xs={12} md={6}>

  974.                                     <Stack spacing={1} direction="row">

  975.                                         <Typography variant="h5" color={theme.palette.grey[600]}>

  976.                                             聯絡電話:

  977.                                         </Typography>

  978.                                         <Typography variant="h5" id="preview-phone-signup">

  979.                                             +{formik.values.phoneCountryCode} {formik.values.phone}

  980.                                         </Typography>

  981.                                     </Stack>

  982.                                 </Grid>

  983.                                 {formik.values.faxCountryCode != "" && formik.values.fax != "" ?

  984.                                     <Grid item xs={12} md={6}>

  985.                                         <Stack spacing={1} direction="row">

  986.                                             <Typography variant="h5" color={theme.palette.grey[600]}>

  987.                                                 傳真號碼:

  988.                                             </Typography>

  989.                                             <Typography variant="h5" id="preview-fax-signup">

  990.                                                 +{formik.values.faxCountryCode} {formik.values.fax}

  991.                                             </Typography>

  992.                                         </Stack>

  993.                                     </Grid>

  994.                                     : null}

  995.                             </Grid>

  996.                         </Grid>

  997.                     </Grid>

  998.                 </FormGroup>

  999.                 {/* Submit page */}

  1000.                 <FormGroup id={"submitForm"} sx={{ display: props.step === 2 ? "" : "none" }}>

  1001.                     <Grid container spacing={3}>

  1002.                         {isLoading ?

  1003.                             <LoadingComponent /> :

  1004.                             <Grid item xs={12}>

  1005.                                 {checkUpload ?

  1006.                                     // SUCCESS page

  1007.                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>

  1008.                                         <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />

  1009.                                         <Typography display="inline" variant="h4">帳戶申請已成功提交。</Typography>

  1010.                                         <Typography display="inline" variant="h4">驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。</Typography>

  1011.                                         <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</Typography></Button>

  1012.                                     </Stack>

  1013.                                     :

  1014.                                     // ERROR page

  1015.                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>

  1016.                                         {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}

  1017.                                         <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />

  1018.                                         <Typography display="inline" variant="h4">申請失敗，請稍後嘗試</Typography>

  1019.                                         <Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</Typography></Button>

  1020.                                     </Stack>

  1021.                                 }

  1022.                             </Grid>

  1023.                         }

  1024.                     </Grid>

  1025.                 </FormGroup>

  1026.             </form>

  1027.         </FormikProvider>

  1028.     );

  1029. }

  1030. 

  1031. export default CustomFormWizard;