PNSPS-frontend-MaterialUI/src/pages/authentication/auth-forms/CustomFormWizard.js

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

// material-ui
import {
    Box,
    Button,
    FormControl,
    FormHelperText,
    Grid, IconButton,
    InputAdornment,
    InputLabel, OutlinedInput,
    Stack,
    Typography,
    FormGroup,
    TextField,
    Checkbox
    // MenuItem
} from '@mui/material';
import { useForm, } from 'react-hook-form'
import Autocomplete from "@mui/material/Autocomplete";

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

// project import
// import AnimateButton from 'components/@extended/AnimateButton';
import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
// import {apiPath} from "auth/utils";
import axios from "axios";
import { POST_PUBLIC_USER_REGISTER, POST_CAPTCHA, GET_USERNAME, GET_USER_EMAIL } from "utils/ApiPathConst";
// import * as HttpUtils from 'utils/HttpUtils';
import * as ComboData from "utils/ComboData";

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const UploadFileTable = Loadable(lazy(() => import('./UploadFileTable')));
const PreviewUploadFileTable = Loadable(lazy(() => import('./PreviewUploadFileTable')));
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
// import UploadFileTable from './UploadFileTable';
// import LoadingComponent from "../../extra-pages/LoadingComponent";

// assets
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';
import * as HttpUtils from "../../../utils/HttpUtils";
import LoopIcon from '@mui/icons-material/Loop';
import { useTheme } from '@mui/material/styles';
import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
import {FormattedMessage, useIntl} from "react-intl";

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

const CustomFormWizard = (props) => {
    const intl = useIntl();
    const theme = useTheme()
    const [level, setLevel] = useState();
    const [showPassword, setShowPassword] = useState(false);
    const [showConfirmPassword, setshowConfirmPassword] = useState(false);
    const [fileList, setFileList] = useState([]);
    const [fileListData, setFileListData] = useState([]);
    const [checkUpload, setCheckUpload] = useState(false);
    const [isLoading, setLoding] = useState(true);
    const [updateRows, setUpdateRows] = useState([]);
    const [captchaImg, setCaptchaImage] = useState("");

    const handleClickShowPassword = () => {
        setShowPassword(!showPassword);
    };
    const handleClickShowConfirmPassword = () => {
        setshowConfirmPassword(!showConfirmPassword);
    };

    const handleMouseDownPassword = (event) => {
        event.preventDefault();
    };

    const changePassword = (value) => {
        const temp = strengthIndicator(value);
        setLevel(strengthColorChi(temp));
    };

    const [selectedIdDocType, setSelectedIdDocType] = useState({});
    const [selectedIdDocInputType, setSelectedIdDocInputType] = useState("");
    // const [selectedIdDocLabel, setSelectedIdDocLabel] = useState(null);
    const [selectedAddress4, setSelectedAddress4] = useState(null);
    const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country(intl)[0]);
    const [termsAndConAccept, setTermsAndConAccept] = useState(false);
    const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
    const [isValid, setisValid] = useState(false);
    const [checkCountry, setCheckCountry] = useState(false);
    const username = document.getElementById("username-login")
    const [checkUsername, setCheckUsername] = useState(false);
    const [checkUsernameBlur, setCheckUsernameBlur] = useState(false)
    const email = document.getElementById("email-login")
    const [checkEmail, setCheckEmail] = useState(false)
    const [checkEmailBlur, setCheckEmailBlur] = useState(false)

    const idDocTypeComboList = ComboData.idDocType;
    const address4ComboList = ComboData.district;
    const address5ComboList = ComboData.country(intl);
    const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
        + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"
        + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評"
        + "估本網址所載或與本網址有關連的各項資料，並應在根據該等資料行事前，參照印行的香港"
        + "特別行政區憲報以核實該等資料，以及徵詢獨立意見。\n版權公告本網頁的內容，包括但不限"
        + "於所有文本、平面圖像、圖畫、圖片、照片以及數據或其他資料的匯編，均受版權保障。\n香"
        + "港特別行政區政府是本網頁內所有版權作品的擁有人，除非預先得到政府物流服務署的書面"
        + "授權，否則嚴禁複製、改編、分發、發布或向公眾提供該等版權作品。"
    const refType = "identification";

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

    const handleCheckUsername = async () => {
        if (values?.username) {
            const response = await axios.get(`${GET_USERNAME}`, {
                params: {
                    username: values.username,
                }
            })
            setCheckUsername((Number(response.data[0]) === 1))
            return Number(response.data[0]) === 1
        }
    }

    const handleCheckEmail = async () => {
        if (values?.email) {
            const response = await axios.get(`${GET_USER_EMAIL}`, {
                params: {
                    email: values.email,
                }
            })
            setCheckEmail((Number(response.data[0]) === 1))
            return Number(response.data[0]) === 1
        }
    }

    useEffect(() => {
        if (username) {
            username.addEventListener("blur", function () {
                setCheckUsernameBlur(true)
            })
        }
    }, [username])

    useEffect(() => {
        if (checkUsernameBlur) {
            handleCheckUsername()
            setCheckUsernameBlur(false)
        }
    }, [checkUsernameBlur])

    useEffect(() => {
        if (email) {
            email.addEventListener("blur", function () {
                setCheckEmailBlur(true)
            })
        }
    }, [email])

    useEffect(() => {
        if (checkEmailBlur) {
            handleCheckEmail()
            setCheckEmailBlur(false)
        }
    }, [checkEmailBlur])

    const onCaptchaChange = () => {
        HttpUtils.post({
            url: POST_CAPTCHA,
            params: { width: 130, height: 40,  captcha: captchaImg},
            onSuccess: (responseData) => {
                props.setBase64Url(responseData.base64Url)
                localStorage.setItem("base64Url", responseData.base64Url);
                setCaptchaImage(localStorage.getItem('base64Url'));
            }
        });
    }

    const checkDataField = (data) => {
        if (data.username !== "" &&
            data.password !== "" &&
            data.confirmPassword !== "" &&
            data.password == data.confirmPassword &&
            selectedIdDocType.type !== "" &&
            data.idNo !== "" &&
            (data.enName !== "" || selectedIdDocType.type === "CNID") &&
            data.chName !== "" &&
            data.address1 !== "" &&
            data.email !== "" &&
            data.emailConfirm !== "" &&
            data.email == data.emailConfirm &&
            data.phone !== "" &&
            data.phoneCountryCode !== "" &&
            termsAndConAccept == true &&
            fileList.length !== 0 &&
            data.captchaField &&
            handlePassword(data.password) &&
            handleEmail(data.email) &&
            handleIdNo(data.idNo, selectedIdDocType.type, data.checkDigit) &&
            handlePhone(data.phone) &&
            handleUsername(data.username) &&
            handleCaptcha(data.captchaField) &&
            !checkUsername &&
            !checkEmail
        ) {
            setisValid(true)
            return isValid
        } else {
            setisValid(false)
            return isValid
        }
    };

    const handleCheckBoxChange = (event) => {
        if (event.target.name == 'termsAndConAccept') {
            setTermsAndConAccept(event.target.checked)
            setTermsAndConNotAccept(!event.target.checked)
        }
        if (event.target.name == 'termsAndConNotAccept') {
            setTermsAndConNotAccept(event.target.checked)
            setTermsAndConAccept(!event.target.checked)
        }
    };

    useEffect(() => {
        let updateRowList = new DataTransfer();
        var updateRowsIndex = updateRows.length;
        const saveFileList = [];

        if (updateRowsIndex != null) {
            for (let i = 0; i < updateRowsIndex; i++) {
                const file = updateRows[i]
                file.id = i;
                updateRowList.items.add(file);
                saveFileList.push(file);
            }
            let updatedFileList = updateRowList.files;
            setFileList(updatedFileList);
            setFileListData(saveFileList)

        }

    }, [updateRows]);

    const handleFileUpload = (event) => {
        let updateList = new DataTransfer();
        let currentFileList = fileListData;
        const uploadFileList = event.target.files;
        const saveFileList = [];
        var currentIndex = 0;

        if (currentFileList.length != null) {
            currentIndex = currentFileList.length;
            for (let i = 0; i < currentIndex; i++) {
                const file = currentFileList[i]
                // file.id = currentIndex;
                updateList.items.add(file);
                saveFileList.push(file);
            }
        }

        for (let i = 0; i < uploadFileList.length && currentIndex < 5; i++) {
            const file = event.target.files[i]
            let isDuplicate = false;

            // Check if the file name already exists in saveFileList
            for (let j = 0; j < saveFileList.length; j++) {
                if (saveFileList[j].name === file.name) {
                    isDuplicate = true;
                    break;
                }
            }
            if (!isDuplicate && i + currentIndex < 5) {
                file.id = currentIndex + i
                saveFileList.push(file)
                updateList.items.add(file);
            }

        }
        let updatedFileList = updateList.files;

        setFileListData(saveFileList)
        setFileList(updatedFileList);
    };

    useEffect(() => {
        props.setUpdateValid(isValid)
    }, [isValid])

    useEffect(() => {
        checkDataField(values)
    }, [
        selectedIdDocType,
        selectedAddress4, selectedAddress5,
        termsAndConAccept, termsAndConNotAccept, fileList])

    useEffect(() => {
        props.step == 2 ? _onSubmit() : null;
        if(captchaImg=="")
            onCaptchaChange();
        checkDataField(values)
    }, [props.step])

    const { handleSubmit } = useForm({})
    const _onSubmit = () => {
        setLoding(true);
        values.idDocType = selectedIdDocType.type
        values.address4 = selectedAddress4
        values.address5 = selectedAddress5
        const userAddress = {
            "addressLine1": "",
            "addressLine2": "",
            "addressLine3": "",
            "district": "",
            "country": ""
        };
        userAddress.addressLine1 = values.address1
        userAddress.addressLine2 = values.address2
        userAddress.addressLine3 = values.address3
        userAddress.district = values.address4
        userAddress.country = values.address5

        const userFaxNo = {
            "countryCode": values.faxCountryCode,
            "faxNumber": values.fax,
        };
        const userMobileNumber = {
            "countryCode": values.phoneCountryCode,
            "phoneNumber": values.phone,
        };
        let tncFlag = false;
        if (termsAndConAccept) {
            tncFlag = true
        }
        if (termsAndConNotAccept) {
            tncFlag = false
        }

        const user = {
            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,
            tncFlag: tncFlag,
            type: "IND",
        };

        var formData = new FormData();
        for (let i = 0; i < fileListData.length; i++) {
            const file = fileListData[i]
            formData.append("multipartFileList", file);
        }
        formData.append("refType", refType);

        for (const [key, value] of Object.entries(user)) {
            formData.append(key, value);
        }

        formData.append("userFaxNo", JSON.stringify(userFaxNo));
        formData.append("userMobileNumber", JSON.stringify(userMobileNumber));
        formData.append("userAddress", JSON.stringify(userAddress));
        // formData.append("preferLocale", "en");

        // if(refCode){
        //     formData.append("refCode", refCode);
        // }

        if (isValid) {
            axios.post(POST_PUBLIC_USER_REGISTER, formData, {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            })
                .then((response) => {
                    console.log(response)
                    setCheckUpload(true)
                    setLoding(false);
                })
                .catch(error => {
                    console.error(error);
                    setLoding(false);
                });
        } else {
            setLoding(false);
        }
    }

    function handlePhone(phone) {
        if (phone.length < 8) {
            return false;
        } else {
            // console.log("Phone true")
            return true;
        }
    }

    function handleUsername(username) {
        var symbol = /^(?=.*[!@#%&])/;
        var space = /\s/;
        if (username.length < 6) {
            return false;
        } else if (username.match(symbol)) {
            return false;
        } else if (username.match(space)) {
            return false;
        } else {
            return true;
        }
    }

    function handleCaptcha(captchaField) {
        return captchaField;
    }

    function handleIdNo(idNo, selectedIdDocType, checkDigit) {
        // var pattern = /^[A-Z][0-9]*$/;
        var pattern_HKIDv1 = /^[A-Z]{1}[0-9]{6}$/;
        var pattern_HKIDv2 = /^[A-Z]{2}[0-9]{6}$/;
        var pattern_passport = /^[A-Z]{1}[0-9]{8}$/;
        var pattern_CHID = /^[0-9]{6}(20|19)[0-9]{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])[0-9]{3}[0-9X]{1}/;
        var pattern_otherCert = /^[A-Z]{1}[0-9]{5,}/;
        // var space = /\s/;
        // if (!idNo.match(pattern)) {
        //     return false;
        // } else if (selectedIdDocType=="HKID"&&checkDigit==""){
        //     return false;
        // } else if (idNo.match(space)) {
        //     return false;
        // } else if (idNo.length < 6) {
        //     return false;
        // } else {
        //     // console.log("IdNo true")
        //     return true;
        // }
        switch (selectedIdDocType) {
            case "HKID":
                if (checkDigit === "") return false
                if (idNo.match(pattern_HKIDv1)) {
                    return true
                } else if (idNo.match(pattern_HKIDv2)) {
                    return true
                } else {
                    return false
                }
            case "passport":
                if (idNo.match(pattern_passport)) {
                    return true
                } else {
                    return false
                }
            case "CNID":
                if (idNo.match(pattern_CHID)) {
                    const subStr_year = idNo.substring(6, 10)
                    const subStr_month = idNo.substring(10, 12)
                    const subStr_date = idNo.substring(12, 14)

                    const today = new Date()
                    const inputDate = new Date(`${subStr_year}-${subStr_month}-${subStr_date}`)

                    if (inputDate > today || inputDate === "Invalid Date" || inputDate.getFullYear().toString() !== subStr_year || (inputDate.getMonth() + 1).toString().padStart(2, "0") !== subStr_month || inputDate.getDate().toString().padStart(2, "0") !== subStr_date) {
                        return false
                    } else {
                        return true
                    }
                } else {
                    return false
                }
            case "otherCert":
                if (idNo.match(pattern_otherCert)) {
                    return true
                } else {
                    return false
                }
            default:
                break;
        }
    }

    function handlePassword(password) {
        let new_pass = password;
        // regular expressions to validate password
        var lowerCase = /[a-z]/g;
        var upperCase = /[A-Z]/g;
        var numbers = /[0-9]/g;
        var symbol = /^(?=.*[!@#%&])/;
        var space = /\s/;
        if (!new_pass.match(lowerCase)) {
            return false;
        } else if (!new_pass.match(upperCase)) {
            return false;
        } else if (!new_pass.match(numbers)) {
            return false;
        } else if (!new_pass.match(symbol)) {
            return false;
        } else if (new_pass.length < 8) {
            return false;
        }
        else if (new_pass.match(space)) {
            return false;
        } else {
            // console.log("password true")
            return true;
        }
    }

    function handleEmail(email) {
        var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
        if (!email.match(validRegex)) {
            return false;
        } else {
            return true;
        }
    }

    function displayErrorMsg(errorMsg) {
        return <Typography variant="errorMessage1">{errorMsg}</Typography>
    }

    const formik = useFormik({
        initialValues: ({
            username: '',
            enName: '',
            chName: '',
            email: '',
            emailConfirm: '',
            address1: '',
            address2: '',
            address3: '',
            password: '',
            confirmPassword: '',
            phone: '',
            phoneCountryCode: '852',
            idNo: '',
            checkDigit: '',
            submit: null,
            fax: '',
            faxCountryCode: '852',
            idDocType: '',
            captchaField: ''
        }),
        validationSchema: yup.object().shape({
            username: yup.string().min(6, displayErrorMsg(intl.formatMessage({id: 'atLeast6CharAccount'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireUsername'})))
                .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpecialCharAccount'})) })
                .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpaceAccount'})) }),
            password: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).required(displayErrorMsg(intl.formatMessage({id: 'requirePassword'})))
                .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpacePassword'})) })
                .matches(/^(?=.*[a-z])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeastOneSmallLetter'})) })
                .matches(/^(?=.*[A-Z])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeastOneCapLetter'})) })
                .matches(/^(?=.*[0-9])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeast1Number'})) })
                .matches(/^(?=.*[!@#%&])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeast1SpecialChar'})) }),
            confirmPassword: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).required(displayErrorMsg(intl.formatMessage({id: 'pleaseConfirmPassword'}))).oneOf([yup.ref('password'), null], displayErrorMsg(intl.formatMessage({id: 'samePassword'}))),
            enName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireEnglishName'}))),
            chName: yup.string().max(6).required(displayErrorMsg(intl.formatMessage({id: 'userRequireChineseName'}))),
            address1: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))),
            address2: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine2'}))),
            address3: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine3'}))),
            email: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))),
            emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({id: 'validSameEmail'}))),
            idNo: yup.string().required(displayErrorMsg(`請輸入${selectedIdDocInputType}號碼`))
                .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}號碼不包含特殊字符`) })
                .matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputType}號碼不包含空格`) })
                .test('checkIDCardFormat', displayErrorMsg(`請輸入有效的${selectedIdDocInputType}號碼`), function (value) {
                    const idDocType = selectedIdDocType.type;
                    var pattern_HKIDv1 = /^[A-Z]{1}[0-9]{6}$/;
                    var pattern_HKIDv2 = /^[A-Z]{2}[0-9]{6}$/;
                    var pattern_passport = /^[A-Z]{1}[0-9]{8}$/;
                    var pattern_CHID = /^[0-9]{6}(20|19)[0-9]{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])[0-9]{3}[0-9X]{1}/;
                    var pattern_otherCert = /^[A-Z]{1}[0-9]{5,}/;
                    if (value !== undefined) {
                        switch (idDocType) {
                            case "HKID":
                                if (value.match(pattern_HKIDv1)) {
                                    return true
                                } else if (value.match(pattern_HKIDv2)) {
                                    return true
                                } else {
                                    return false
                                }
                            case "passport":
                                if (value.match(pattern_passport)) {
                                    return true
                                } else {
                                    return false
                                }
                            case "CNID":
                                if (value.match(pattern_CHID)) {
                                    const subStr_year = value.substring(6, 10)
                                    const subStr_month = value.substring(10, 12)
                                    const subStr_date = value.substring(12, 14)

                                    const today = new Date()
                                    const inputDate = new Date(`${subStr_year}-${subStr_month}-${subStr_date}`)

                                    if (inputDate > today || inputDate === "Invalid Date" || inputDate.getFullYear().toString() !== subStr_year || (inputDate.getMonth() + 1).toString().padStart(2, "0") !== subStr_month || inputDate.getDate().toString().padStart(2, "0") !== subStr_date) {
                                        return false
                                    } else {
                                        return true
                                    }
                                } else {
                                    return false
                                }
                            case "otherCert":
                                if (value.match(pattern_otherCert)) {
                                    return true
                                } else {
                                    return false
                                }
                            default:
                                break;
                        }
                    }
                }),
            checkDigit: yup.string().max(1).required(displayErrorMsg('請輸入括號內的數字或字母')),
            idDocType: yup.string().max(255).required(displayErrorMsg('請輸入證件類別')),
            phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
            // faxCountryCode: yup.string().min(3,'請輸入3位數字'),
            phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
            // fax: yup.string().min(8,'請輸入8位數字'),
            captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
        }),
    });

    const handleReset = (resetForm) => {
        resetForm();
        setSelectedAddress4("")
        setSelectedAddress5(ComboData.country(intl)[0])
        setCheckCountry(false)
        setSelectedIdDocType({})
        setSelectedIdDocInputType("");
        setFileList([])
        setFileListData([])
        onCaptchaChange()
        // setSelectedIdDocLabel("")
    };

    const { values } = formik

    useEffect(() => {
        checkDataField(values)
    }, [values])

    return (
        <FormikProvider value={formik}>
            <form onSubmit={handleSubmit(_onSubmit)}>
                {/* Input Form */}
                <FormGroup id={"inputForm"} sx={{ display: props.step === 0 ? "" : "none" }}>
                    <Grid container spacing={3}>
                        <Grid item xs={12} md={12}>
                            <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                <Button variant="outlined" type="reset" onClick={handleReset.bind(null, formik.resetForm)} sx={{ height: '40px' }}>
                                    <Typography variant="pnspsFormHeader">
                                    <FormattedMessage id="reset"/>
                                    </Typography>
                                </Button>
                                <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
                                        <FormattedMessage id="becomeNewPersonalUser"/>
                                    </Typography>
                                </div>
                                <Typography mt={0.25} variant="h6" sx={{ color: '#f10000' }}>
                                    <FormattedMessage id="requireString"/>
                                </Typography>
                                <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary' }}>
                                    <FormattedMessage id="yourLoginInformation"/>
                                </Typography>
                            </Stack>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container spacing={1}>
                                <Grid item xs={12} md={12} >
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="username-signup">
                                            <Typography variant="pnspsFormHeader">
                                                <FormattedMessage id="userLoginName"/>
                                                <span style={{ color: '#f10000' }}>*</span>
                                                {/*<Button*/}
                                                {/*    variant="contained"*/}
                                                {/*    onClick={handleCheckUsername}*/}
                                                {/*    sx={{ ml: 2, height: "40px" }}>*/}
                                                {/*    <Typography variant="h6">檢查是否重覆</Typography>*/}
                                                {/*</Button> **/}
                                            </Typography>
                                        </InputLabel>
                                        <OutlinedInput
                                            id="username-login"
                                            type="text"
                                            value={formik.values.username.trim()}
                                            name="username"
                                            onChange={(e) => {
                                                setCheckUsername(false)
                                                props.setUsername(e.target.value)
                                                formik.handleChange(e)
                                            }}
                                            placeholder={intl.formatMessage({id: 'userLoginName'})}
                                            fullWidth
                                            error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)}
                                            onBlur={formik.handleBlur}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.username && formik.errors.username && (
                                            <FormHelperText error id="helper-text-username-signup">
                                                {formik.errors.username}
                                            </FormHelperText>
                                        )}
                                        {checkUsername && (
                                            <FormHelperText error id="helper-text-username-signup">
                                                此用戶登入名稱已被注冊，請使用其他用戶登入名稱
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container>
                                        <Grid item xs={12} md={6} >
                                            <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                <Stack direction="row" justifyContent="space-between">
                                                    <InputLabel htmlFor="password-signup">
                                                        <Typography variant="pnspsFormHeader">
                                                            <FormattedMessage id="userPassword"/>
                                                            <span style={{ color: '#f10000' }}>*</span>
                                                        </Typography>
                                                    </InputLabel>
                                                </Stack>
                                                <OutlinedInput
                                                    fullWidth
                                                    error={Boolean(formik.touched.password && formik.errors.password)}
                                                    id="password-signup"
                                                    type={showPassword ? 'text' : 'password'}
                                                    value={formik.values.password.trim()}
                                                    name="password"
                                                    onChange={(e) => {
                                                        formik.handleChange(e);
                                                        changePassword(e.target.value);
                                                    }}
                                                    endAdornment={
                                                        <InputAdornment position="end">
                                                            <IconButton
                                                                aria-label="toggle password visibility"
                                                                onClick={handleClickShowPassword}
                                                                onMouseDown={handleMouseDownPassword}
                                                                edge="end"
                                                                size="large"
                                                            >
                                                                {showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                                            </IconButton>
                                                        </InputAdornment>
                                                    }
                                                    placeholder={intl.formatMessage({id: 'userPassword'})}
                                                    onBlur={formik.handleBlur}
                                                    inputProps={{
                                                        onKeyDown: (e) => {
                                                            if (e.key === 'Enter') {
                                                                e.preventDefault();
                                                            }
                                                        },
                                                    }}
                                                />
                                                {formik.touched.password && formik.errors.password && (
                                                    <FormHelperText error id="helper-text-password-signup">
                                                        {formik.errors.password}
                                                    </FormHelperText>
                                                )}
                                            </Stack>
                                            <FormControl fullWidth sx={{ mt: 2 }}>
                                                <Grid container spacing={2} alignItems="center">
                                                    <Grid item>
                                                        <Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: '7px' }} />
                                                    </Grid>
                                                    <Grid item>
                                                        <Typography variant="subtitle1">
                                                            {level?.label}
                                                        </Typography>
                                                    </Grid>
                                                </Grid>
                                            </FormControl>
                                        </Grid>
                                        <Grid item xs={12} md={6} >
                                            <Stack spacing={1}>
                                                <InputLabel htmlFor="confirmPassword-signup">
                                                    <Typography variant="pnspsFormHeader">
                                                        <FormattedMessage id="confirmPassword"/>
                                                        <span style={{ color: '#f10000' }}>*</span>
                                                    </Typography>
                                                </InputLabel>
                                                <OutlinedInput
                                                    id="confirmPassword-login"
                                                    type={showConfirmPassword ? 'text' : 'password'}
                                                    value={formik.values.confirmPassword.trim()}
                                                    name="confirmPassword"
                                                    onBlur={formik.handleBlur}
                                                    onChange={(e) => {
                                                        formik.handleChange(e);
                                                        // changePassword(e.target.value);
                                                    }}
                                                    inputProps={{
                                                        onKeyDown: (e) => {
                                                            if (e.key === 'Enter') {
                                                                e.preventDefault();
                                                            }
                                                        },
                                                    }}
                                                    endAdornment={
                                                        <InputAdornment position="end">
                                                            <IconButton
                                                                aria-label="toggle password visibility"
                                                                onClick={handleClickShowConfirmPassword}
                                                                onMouseDown={handleMouseDownPassword}
                                                                edge="end"
                                                                size="large"
                                                            >
                                                                {showConfirmPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                                            </IconButton>
                                                        </InputAdornment>
                                                    }
                                                    placeholder={intl.formatMessage({id: 'confirmPassword'})}
                                                    fullWidth
                                                    error={Boolean(formik.touched.confirmPassword && formik.errors.confirmPassword)}
                                                />
                                                {formik.touched.confirmPassword && formik.errors.confirmPassword && (
                                                    <FormHelperText error id="helper-text-confirmPassword-signup">
                                                        {formik.errors.confirmPassword}
                                                    </FormHelperText>
                                                )}
                                            </Stack>
                                            <Grid container spacing={2} alignItems="center">
                                                <Grid item sx={{mt:1}}>
                                                    <Typography variant="subtitle1">
                                                        •至少8個字元，字元越多越好 <br />
                                                        •字母和數字的混合<br />
                                                        •英文字母大寫與小寫的混合<br />
                                                        •至少包含一個特殊符號，例如，@ # ?
                                                    </Typography>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} mt={1} mb={1}>
                                    <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
                                            <FormattedMessage id="yourPersonalInformation"/>
                                        </Typography>
                                        {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                            Already have an account?
                                        </Typography> */}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12} >
                                    <Grid container sx={{ mb: 1 }}>
                                        <Stack spacing={1}>
                                            <InputLabel htmlFor="idDocType-signup">
                                                <Typography variant="pnspsFormHeader">
                                                    身份證明文件
                                                    <span style={{ color: '#f10000' }}>*</span>
                                                </Typography>
                                            </InputLabel>
                                            {/* {formik.touched.enName && formik.errors.enName && (
                                                <FormHelperText error id="helper-text-enName-signup">
                                                {formik.errors.enName}
                                                </FormHelperText>
                                            )} */}
                                        </Stack>
                                    </Grid>

                                    <Grid container>
                                        <Grid item xs={12} md={6} >
                                            <Stack spacing={1} sx={{ mr: { md: 1 } }}>
                                                <Autocomplete
                                                    disablePortal
                                                    id="idDocType"
                                                    //value={selectedIdDocType}
                                                    size="small"
                                                    options={idDocTypeComboList}
                                                    // getOptionLabel={(idDocTypeComboList) => idDocTypeComboList.label}
                                                    onBlur={formik.handleBlur}
                                                    filterOptions={(options) => options}
                                                    inputValue={selectedIdDocInputType}
                                                    onChange={(event, newValue) => {
                                                        if (newValue != null ) {
                                                            setSelectedIdDocInputType(newValue.label);
                                                            setSelectedIdDocType(newValue);
                                                            if (newValue.type !== "HKID") {
                                                                formik.setFieldValue("checkDigit", "")
                                                            }
                                                        } else {
                                                            setSelectedIdDocInputType("");
                                                        }
                                                    }}
                                                    sx={{ "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
                                                    renderInput={(params) => <TextField
                                                        {...params}
                                                        placeholder="證件類別"
                                                    />}
                                                />
                                                {formik.touched.idDocType && (
                                                    selectedIdDocType === null ?
                                                        <FormHelperText error id="helper-text-idDocType-signup">
                                                            請輸入證件類別
                                                        </FormHelperText> : ''
                                                )}
                                            </Stack>
                                        </Grid>
                                        {selectedIdDocType.type === "HKID" ?
                                            <>
                                                <Grid item xs={10} md={5}>
                                                    <Stack spacing={1} sx={{ mr: { md: 1 } }}>
                                                        <OutlinedInput
                                                            id="idNo-login"
                                                            type="text"
                                                            name="idNo"
                                                            value={formik.values.idNo}
                                                            onChange={async (e) => {
                                                                const ele = document.getElementById('idNo-login')
                                                                const startPos = ele.selectionStart
                                                                if (e.type === "change") {
                                                                    if (!(e.target.value.match(/\s/g))) {
                                                                        const newValue = await e.target.value.toUpperCase()
                                                                        await formik.setFieldValue("idNo", newValue)
                                                                        ele.setSelectionRange(startPos, startPos)
                                                                    } else {
                                                                        await formik.setFieldValue("idNo", formik.values.idNo)
                                                                        ele.setSelectionRange(startPos - 1, startPos - 1)
                                                                    }
                                                                }
                                                            }}
                                                            placeholder="證件號碼"
                                                            fullWidth
                                                            sx={{ mr: 1 }}
                                                            error={Boolean(formik.touched.idNo && formik.errors.idNo)}
                                                            onBlur={formik.handleBlur}
                                                            inputProps={{
                                                                maxLength: selectedIdDocType.type === 'HKID' ? 8 : 18,
                                                                onKeyDown: (e) => {
                                                                    console.log(e)
                                                                    if (e.key === 'Enter') {
                                                                        e.preventDefault();
                                                                    }
                                                                },
                                                            }}
                                                        />
                                                        {formik.touched.idNo && formik.errors.idNo && (
                                                            <FormHelperText error id="helper-text-idNo-signup">
                                                                {formik.errors.idNo}
                                                            </FormHelperText>
                                                        )}
                                                        {formik.touched.checkDigit && formik.errors.checkDigit && (
                                                            <FormHelperText error id="helper-text-checkDigit-signup">
                                                                {formik.errors.checkDigit}
                                                            </FormHelperText>
                                                        )}
                                                    </Stack>
                                                </Grid>
                                                <Grid item xs={2} md={1}>
                                                    <Stack spacing={1}>
                                                        <OutlinedInput
                                                            id="checkDigit-login"
                                                            type="text"
                                                            value={formik.values.checkDigit.trim()}
                                                            name="checkDigit"
                                                            onChange={formik.handleChange}
                                                            //placeholder="( )"
                                                            // sx={{height:"53px"}}
                                                            startAdornment={<InputAdornment position="start">(</InputAdornment>}
                                                            endAdornment={<InputAdornment position="end">)</InputAdornment>}
                                                            sx={{
                                                                '& .MuiOutlinedInput-input': {
                                                                    padding: '5px 5px 5px 5px', // Set the desired padding inline
                                                                },
                                                            }}
                                                            inputProps={{
                                                                maxLength: 1,
                                                                onKeyDown: (e) => {
                                                                    if (e.key === 'Enter') {
                                                                        e.preventDefault();
                                                                    }
                                                                },
                                                            }}
                                                            fullWidth
                                                            error={Boolean(formik.touched.checkDigit && formik.errors.checkDigit)}
                                                            onBlur={formik.handleBlur}
                                                        />
                                                    </Stack>
                                                </Grid>
                                            </> :
                                            <Grid item xs={12} md={6}>
                                                <Stack spacing={1}>
                                                    <OutlinedInput
                                                        id="idNo-login"
                                                        type="text"
                                                        value={formik.values.idNo}
                                                        name="idNo"
                                                        onChange={async (e) => {
                                                            const ele = document.getElementById('idNo-login')
                                                            const startPos = ele.selectionStart
                                                            if (e.type === "change") {
                                                                if (!(e.target.value.match(/\s/g))) {
                                                                    const newValue = await e.target.value.toUpperCase()
                                                                    await formik.setFieldValue("idNo", newValue)
                                                                    ele.setSelectionRange(startPos, startPos)
                                                                } else {
                                                                    await formik.setFieldValue("idNo", formik.values.idNo)
                                                                    ele.setSelectionRange(startPos - 1, startPos - 1)
                                                                }
                                                            }
                                                        }}
                                                        placeholder="證件號碼"
                                                        fullWidth
                                                        sx={{ mr: 1 }}
                                                        error={Boolean(formik.touched.idNo && formik.errors.idNo)}
                                                        onBlur={formik.handleBlur}
                                                        inputProps={{
                                                            maxLength: 18,
                                                            onKeyDown: (e) => {
                                                                if (e.key === 'Enter') {
                                                                    e.preventDefault();
                                                                }
                                                            },
                                                        }}
                                                    />
                                                    {formik.touched.idNo && formik.errors.idNo && (
                                                        <FormHelperText error id="helper-text-idNo-signup">
                                                            {formik.errors.idNo}
                                                        </FormHelperText>
                                                    )}
                                                </Stack>
                                            </Grid>
                                        }
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="enName-signup">
                                            <Typography variant="pnspsFormHeader">
                                                <FormattedMessage id="userEnglishName"/>
                                                {selectedIdDocType.type === "CNID" ? "" : <span style={{ color: '#f10000' }}>*</span>}
                                            </Typography>
                                        </InputLabel>
                                        <OutlinedInput
                                            id="enName-login"
                                            type="enName"
                                            value={formik.values.enName}
                                            name="enName"
                                            onChange={formik.handleChange}
                                            placeholder="與你的身份證明文件相同"
                                            fullWidth
                                            error={Boolean(formik.touched.enName && formik.errors.enName && selectedIdDocType.type !== "CNID")}
                                            onBlur={formik.handleBlur}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.enName && formik.errors.enName && selectedIdDocType.type !== "CNID" && (
                                            <FormHelperText error id="helper-text-enName-signup">
                                                {formik.errors.enName}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="chName-signup">
                                            <Typography variant="pnspsFormHeader">
                                                <FormattedMessage id="userChineseName"/>
                                                <span style={{ color: '#f10000' }}>*</span>
                                            </Typography>
                                        </InputLabel>
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.chName && formik.errors.chName)}
                                            id="chName-signup"
                                            type="text"
                                            value={formik.values.chName.trim()}
                                            name="chName"
                                            onChange={formik.handleChange}
                                            placeholder="與你的身份證明文件相同"
                                            onBlur={formik.handleBlur}
                                            inputProps={{
                                                maxLength: 6,
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.chName && formik.errors.chName && (
                                            <FormHelperText error id="helper-text-chName-signup">
                                                {formik.errors.chName}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="address1-signup">
                                            <Typography variant="pnspsFormHeader">
                                                <FormattedMessage id="formAddress"/>
                                                <span style={{ color: '#f10000' }}>*</span>
                                            </Typography>
                                        </InputLabel>
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.address1 && formik.errors.address1)}
                                            id="address1-signup"
                                            value={formik.values.address1}
                                            name="address1"
                                            onChange={formik.handleChange}
                                            placeholder={intl.formatMessage({id: 'addressLine1'})}
                                            onBlur={formik.handleBlur}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.address2 && formik.errors.address2)}
                                            id="address2-signup"
                                            value={formik.values.address2}
                                            name="address2"
                                            onChange={formik.handleChange}
                                            placeholder={intl.formatMessage({id: 'addressLine2'})}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.address3 && formik.errors.address3)}
                                            id="address3-signup"
                                            value={formik.values.address3}
                                            name="address3"
                                            onChange={formik.handleChange}
                                            placeholder={intl.formatMessage({id: 'addressLine3'})}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        <Autocomplete
                                            disablePortal
                                            id="address4-combo"
                                            value={selectedAddress4}
                                            options={address4ComboList}
                                            disabled={checkCountry}
                                            onChange={(event, newValue) => {
                                                setSelectedAddress4(newValue);
                                            }}
                                            sx={{ "& .MuiInputBase-root": { height: "41px" },
                                                "#address4-combo": { padding: "0px 0px 0px 3px" },
                                                "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'region'})}
                                            />}
                                        />
                                        <Autocomplete
                                            disablePortal
                                            id="address5-combo"
                                            value={selectedAddress5}
                                            options={address5ComboList}
                                            onChange={(event, newValue) => {
                                                if (newValue !== null) {
                                                    setSelectedAddress5(newValue);
                                                    if (newValue === intl.formatMessage({id: 'hongKong'})) {
                                                        setCheckCountry(false)
                                                    } else {
                                                        setSelectedAddress4("");
                                                        setCheckCountry(true)
                                                    }
                                                } else {
                                                    setSelectedAddress4("");
                                                    setCheckCountry(true)
                                                }
                                            }}

                                            sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 3px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'regionOrCountry'})} />}
                                        />
                                        {formik.touched.address1 && formik.errors.address1 && (
                                            <FormHelperText error id="helper-text-address1-signup">
                                                {formik.errors.address1}
                                            </FormHelperText>
                                        )}
                                        {formik.touched.address2 && formik.errors.address2 && (
                                            <FormHelperText error id="helper-text-address2-signup">
                                                {formik.errors.address2}
                                            </FormHelperText>
                                        )}
                                        {formik.touched.address3 && formik.errors.address3 && (
                                            <FormHelperText error id="helper-text-address3-signup">
                                                {formik.errors.address3}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} mt={1} mb={1}>
                                    <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
                                            <FormattedMessage id="yourContact"/>
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container>
                                        <Grid item xs={12} md={6}>
                                            <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                <InputLabel htmlFor="email-signup">
                                                    <Typography variant="pnspsFormHeader">
                                                        <FormattedMessage id="userContactEmail"/>
                                                        <span style={{ color: '#f10000' }}>*</span>
                                                    </Typography>
                                                </InputLabel>
                                                <OutlinedInput
                                                    fullWidth
                                                    error={Boolean((formik.touched.email && formik.errors.email) || checkEmail)}
                                                    id="email-login"
                                                    type="email"
                                                    value={formik.values.email.trim()}
                                                    name="email"
                                                    onChange={formik.handleChange}
                                                    placeholder={intl.formatMessage({id: 'userContactEmail'})}
                                                    onBlur={formik.handleBlur}
                                                    inputProps={{
                                                        onKeyDown: (e) => {
                                                            if (e.key === 'Enter') {
                                                                e.preventDefault();
                                                            }
                                                        },
                                                    }}
                                                />
                                                {formik.touched.email && formik.errors.email && (
                                                    <FormHelperText error id="helper-text-email-signup">
                                                        {formik.errors.email}
                                                    </FormHelperText>
                                                )}
                                                {checkEmail && (
                                                    <FormHelperText error id="helper-text-email-signup">
                                                        <FormattedMessage id="emailUsed"/>
                                                    </FormHelperText>
                                                )}
                                            </Stack>
                                        </Grid>
                                        <Grid item xs={12} md={6}>
                                            <Stack spacing={1} >
                                                <InputLabel htmlFor="emailConfirm-signup">
                                                    <Typography variant="pnspsFormHeader">
                                                        <FormattedMessage id="userContactEmail"/>
                                                        <span style={{ color: '#f10000' }}>*</span>
                                                    </Typography>
                                                </InputLabel>
                                                <OutlinedInput
                                                    fullWidth
                                                    error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)}
                                                    id="emailConfirm-login"
                                                    type="email"
                                                    value={formik.values.emailConfirm.trim()}
                                                    name="emailConfirm"
                                                    // onBlur={formik.handleBlur}
                                                    onChange={formik.handleChange}
                                                    placeholder={intl.formatMessage({id: 'confirmEmail'})}
                                                    onBlur={formik.handleBlur}
                                                    inputProps={{
                                                        onKeyDown: (e) => {
                                                            if (e.key === 'Enter') {
                                                                e.preventDefault();
                                                            }
                                                        },
                                                    }}
                                                />
                                                {formik.touched.emailConfirm && formik.errors.emailConfirm && (
                                                    <FormHelperText error id="helper-text-emailConfirm-signup">
                                                        {formik.errors.emailConfirm}
                                                    </FormHelperText>
                                                )}
                                            </Stack>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container>
                                        <Grid item xs={12} md={6}>
                                            <Grid container>
                                                <Grid item xs={12} md={12}>
                                                    <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                        <InputLabel htmlFor="phone-signup">
                                                            <Typography variant="pnspsFormHeader">
                                                                <FormattedMessage id="userContactNumber"/>
                                                                <span style={{ color: '#f10000' }}>*</span>
                                                            </Typography>
                                                        </InputLabel>
                                                        <Stack direction="row">
                                                            <OutlinedInput
                                                                id="phoneCountryCode-login"
                                                                type="phoneCountryCode"
                                                                value={formik.values.phoneCountryCode.trim()}
                                                                name="phoneCountryCode"
                                                                // onBlur={formik.handleBlur}
                                                                // onChange={formik.handleChange}
                                                                onChange={(event) => {
                                                                    const value = event.target.value;
                                                                    if (value.match(/[^0-9]/)) {
                                                                        return event.preventDefault();
                                                                    }
                                                                    formik.setFieldValue("phoneCountryCode", value);
                                                                }}
                                                                placeholder={intl.formatMessage({id: 'dialingCode'})}
                                                                error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                onBlur={formik.handleBlur}
                                                                endAdornment={<InputAdornment position="end">-</InputAdornment>}
                                                                inputProps={{
                                                                    maxLength: 3,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{ width: '33%', mr:1}}
                                                            />
                                                            <OutlinedInput
                                                                id="phone-login"
                                                                type="phone"
                                                                value={formik.values.phone.trim()}
                                                                name="phone"
                                                                // onBlur={formik.handleBlur}
                                                                // onChange={formik.handleChange}
                                                                onChange={(event) => {
                                                                    const value = event.target.value;
                                                                    if (value.match(/[^0-9]/)) {
                                                                        return event.preventDefault();
                                                                    }
                                                                    formik.setFieldValue("phone", value);
                                                                }}
                                                                placeholder={intl.formatMessage({id: 'userContactNumber'})}
                                                                error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                onBlur={formik.handleBlur}
                                                                inputProps={{
                                                                    maxLength: 11,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{ width: '66%' }}
                                                            />
                                                        </Stack>
                                                        {formik.touched.phone && formik.errors.phone && (
                                                            <FormHelperText error id="helper-text-phone-signup">
                                                                {formik.errors.phone}
                                                            </FormHelperText>
                                                        )}
                                                    </Stack>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                        <Grid item xs={12} md={6}>
                                            <Grid container>
                                                <Grid item xs={12} md={12}>
                                                    <Stack spacing={1} direction="column">
                                                        <InputLabel htmlFor="fax-signup">
                                                            <Typography variant="pnspsFormHeader">
                                                                <FormattedMessage id="userFaxNumber"/>
                                                            </Typography>
                                                        </InputLabel>
                                                        <Stack direction="row">
                                                            <OutlinedInput
                                                                error={Boolean(formik.touched.fax && formik.errors.fax)}
                                                                id="faxCountryCode-login"
                                                                type="faxCountryCode"
                                                                value={formik.values.faxCountryCode.trim()}
                                                                name="faxCountryCode"
                                                                // onChange={formik.handleChange}
                                                                onChange={(event) => {
                                                                    const value = event.target.value;
                                                                    if (value.match(/[^0-9]/)) {
                                                                        return event.preventDefault();
                                                                    }
                                                                    formik.setFieldValue("faxCountryCode", value);
                                                                }}
                                                                placeholder={intl.formatMessage({id: 'dialingCode'})}
                                                                onBlur={formik.handleBlur}
                                                                endAdornment={<InputAdornment position="end">-</InputAdornment>}
                                                                inputProps={{
                                                                    maxLength: 3,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{ width: '33%' , mr: 1}}
                                                            />
                                                            <OutlinedInput
                                                                id="fax-login"
                                                                type="fax"
                                                                value={formik.values.fax.trim()}
                                                                name="fax"
                                                                onBlur={formik.handleBlur}
                                                                // onChange={formik.handleChange}
                                                                onChange={(event) => {
                                                                    const value = event.target.value;
                                                                    if (value.match(/[^0-9]/)) {
                                                                        return event.preventDefault();
                                                                    }
                                                                    formik.setFieldValue("fax", value);
                                                                }}
                                                                placeholder={intl.formatMessage({id: 'userFaxNumber'})}
                                                                inputProps={{
                                                                    maxLength: 8,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{ width: '66%' }}
                                                            />
                                                        </Stack>
                                                    </Stack>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={12} mt={1} mb={1}>
                                    <Grid container>
                                        <Grid item xs={12} md={12}>
                                            <Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                                <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>身份證明文件<span style={{ color: '#f10000' }}>*</span></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}>
                                                    <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                                    <Button variant="contained" component="label" sx={{ height: '40px' }}>
                                                        上傳身份證明文件
                                                        <input
                                                            accept="image/png, .jpg, .bmp, .pdf"
                                                            //className={classes.input}
                                                            id="contained-button-file"
                                                            multiple
                                                            type="file"
                                                            onChange={handleFileUpload}
                                                            style={{ display: 'none' }}
                                                        />
                                                    </Button>
                                                    </ThemeProvider>
                                                    {/*<Typography xs={12} sm={9} md={3} display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>如: 香港身份證; 護照; 中國內地身份證等</Typography>*/}
                                                </Stack>
                                                {fileList != null ?
                                                    <UploadFileTable key="uploadTable" recordList={fileListData} setUpdateRows={setUpdateRows} /> : null}
                                                {/* <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                                    <Button variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
                                                    <Button disabled={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
                                                </Stack> */}
                                            </Stack>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={12}>
                                <Grid container>
                                    <Grid item xs={12} md={12}>
                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
                                            <FormattedMessage id="termsAndCondition"/>
                                            <span style={{ color: '#f10000' }}>*</span>
                                        </Typography>
                                    </Grid>
                                    <Grid item xs={12} md={12}>
                                        <Grid container>
                                            <Grid item xs={12} md={12}>
                                                <Typography variant="h6" height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
                                                    {termsAndCon}
                                                </Typography>
                                            </Grid>
                                        </Grid>
                                        <Grid item xs={12} s={12} md={12} lg={12}>
                                            <Grid container>
                                                <Grid item xs={6} s={6} md={2} lg={2}>
                                                    <Grid container>
                                                        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
                                                            <Checkbox
                                                                checked={termsAndConAccept}
                                                                onChange={handleCheckBoxChange}
                                                                name="termsAndConAccept"
                                                                color="primary"
                                                                size="small"
                                                            />
                                                            <Typography variant="pnspsFormHeader">
                                                                <FormattedMessage id="acceptTerms"/>
                                                            </Typography>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                                <Grid item xs={6} s={6} md={3} lg={3}>
                                                    <Grid container>
                                                        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
                                                            <Checkbox
                                                                checked={termsAndConNotAccept}
                                                                onChange={handleCheckBoxChange}
                                                                name="termsAndConNotAccept"
                                                                color="primary"
                                                                size="small"
                                                            />
                                                            <Typography variant="pnspsFormHeader">
                                                                <FormattedMessage id="rejectTerms"/>
                                                            </Typography>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} lg={12}>
                                <Grid container>
                                    <Stack direction="column">
                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
                                            <FormattedMessage id="verify"/>
                                            <span style={{ color: '#f10000' }}>*</span>
                                        </Typography>
                                        <Stack spacing={1} direction="row">
                                            <Grid item xs={5} lg={5} style={{ "border": "1px solid black" }}>
                                                <img src={captchaImg} alt="" />
                                            </Grid>
                                            <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>
                                                <IconButton aria-label="refrashCaptcha" size="large" onClick={() => { onCaptchaChange() }}>
                                                    <LoopIcon fontSize="inherit" />
                                                </IconButton>
                                            </Grid>
                                            <Grid item xs={6} lg={6}>
                                                <OutlinedInput
                                                    fullWidth
                                                    id="captchaField"
                                                    type="text"
                                                    value={formik.values.captchaField.trim()}
                                                    onBlur={formik.handleBlur}
                                                    error={Boolean(formik.touched.captchaField && formik.errors.captchaField)}
                                                    name="captchaField"
                                                    onChange={(event) => {
                                                        const value = event.target.value;
                                                        props.setCheckCode(event.target.value);
                                                        formik.setFieldValue("captchaField", value);
                                                    }}
                                                    sx={{ width: '75%' }}
                                                />
                                            </Grid>
                                        </Stack>
                                        {formik.touched.captchaField && formik.errors.captchaField && (
                                            <FormHelperText error id="helper-text-captcha-signup">
                                                {formik.errors.captchaField}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </FormGroup>
                {/* Preview Form */}
                <FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none" }}>
                    <Grid container spacing={3}>
                        <Grid item xs={12} md={12}>
                            <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
                                        <FormattedMessage id="becomeNewPersonalUser"/>
                                    </Typography>
                                </div>
                                {/* <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography> */}
                                <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary' }}>
                                    <FormattedMessage id="yourLoginInformation"/>
                                </Typography>
                                {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                Already have an account?
                                </Typography> */}
                            </Stack>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container spacing={2}>
                                <Grid item xs={12} >
                                    <Stack spacing={2} direction="row">
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="userLoginName"/>:
                                        </Typography>
                                        <Typography variant="pnspsFormHeader" id="preview-username-login">
                                            {formik.values.username}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} mt={1} mb={1}>
                                    <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
                                            <FormattedMessage id="yourPersonalInformation"/>
                                        </Typography>
                                        {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                        Already have an account?
                                    </Typography> */}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12} >
                                    <Stack spacing={1}>
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            身份證明文件
                                        </Typography>
                                    </Stack>
                                </Grid>

                                <Grid item xs={12} md={6} >
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            證件類別:
                                        </Typography>
                                        <Typography variant="pnspsFormHeader" name="preview-idDocType">
                                            {selectedIdDocType.label}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            證件號碼:
                                        </Typography>
                                        <Typography variant="pnspsFormHeader" id="idNo-login">
                                            {formik.values.idNo} {selectedIdDocType.type == "HKID" ? '(' + formik.values.checkDigit + ')' : null}
                                        </Typography>
                                    </Stack>
                                </Grid>

                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="userEnglishName"/>:
                                        </Typography>
                                        <Typography variant="pnspsFormHeader" id="preview-enName-signup">
                                            {formik.values.enName}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="userChineseName"/>:
                                        </Typography>
                                        <Typography variant="pnspsFormHeader" id="preview-chName-signup">
                                            {formik.values.chName}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="formAddress"/>:
                                        </Typography>
                                        <Stack spacing={1} direction="column">
                                            <Typography variant="pnspsFormHeader" id="preview-address1-signup">
                                                {formik.values.address1}
                                            </Typography>
                                            {formik.values.address2 != null ?
                                                <Typography variant="pnspsFormHeader" id="preview-address2-signup">
                                                    {formik.values.address2}
                                                </Typography>
                                                : null}
                                            {formik.values.address3 != null ?
                                                <Typography variant="pnspsFormHeader" id="preview-address3-signup">
                                                    {formik.values.address3}
                                                </Typography>
                                                : null}
                                            {selectedAddress5 == ("香港") ?
                                                <Stack direction="row">
                                                    <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
                                                        <FormattedMessage id="region"/>:
                                                    </Typography>
                                                    <Typography variant="pnspsFormHeader">{selectedAddress4}</Typography>
                                                </Stack>
                                                : null}
                                            <Stack direction="row">
                                                <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
                                                    <FormattedMessage id="regionOrCountry"/>:
                                                </Typography>
                                                <Typography variant="pnspsFormHeader">{selectedAddress5}</Typography>
                                            </Stack>
                                        </Stack>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} mt={1} mb={1}>
                                    <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
                                            <FormattedMessage id="yourContact"/>
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="userContactEmail"/>:
                                        </Typography>
                                        <Typography variant="pnspsFormHeader" id="preview-email-signup">
                                            {formik.values.email}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="userContactNumber"/>:
                                        </Typography>
                                        <Typography variant="pnspsFormHeader" id="preview-phone-signup">
                                            +{formik.values.phoneCountryCode} {formik.values.phone}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                {formik.values.faxCountryCode != "" && formik.values.fax != "" ?
                                    <Grid item xs={12} md={6}>
                                        <Stack spacing={1} direction="row">
                                            <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                                <FormattedMessage id="userFaxNumber"/>:
                                            </Typography>
                                            <Typography variant="pnspsFormHeader" id="preview-fax-signup">
                                                +{formik.values.faxCountryCode} {formik.values.fax}
                                            </Typography>
                                        </Stack>
                                    </Grid>
                                    : null}
                                <Grid item xs={12} md={12} mt={1} mb={1}>
                                    <Grid container>
                                        <Grid item xs={12} md={12}>
                                            <Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                                <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>身份證明文件</Typography>
                                                {fileList != null ?
                                                    <PreviewUploadFileTable key="previewTable" recordList={fileListData} /> : null}
                                            </Stack>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </FormGroup>
                {/* Submit page */}
                <FormGroup id={"submitForm"} sx={{ display: props.step === 2 ? "" : "none" }}>
                    <Grid container spacing={3}>
                        {isLoading ?
                            <LoadingComponent /> :
                            <Grid item xs={12}>
                                {checkUpload ?
                                    // SUCCESS page
                                    <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                        <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
                                        <Typography display="inline" variant="h4">帳戶申請已成功提交。</Typography>
                                        <Typography display="inline" variant="h4">
                                            <FormattedMessage id="emailSent"/>
                                        </Typography>
                                        <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">返回登入頁面</Typography></Button>
                                    </Stack>
                                    :
                                    // ERROR page
                                    <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                        {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                                        <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
                                        <Typography display="inline" variant="h4">申請失敗，請稍後嘗試</Typography>
                                        <Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">返回登入頁面</Typography></Button>
                                    </Stack>
                                }
                            </Grid>
                        }
                    </Grid>
                </FormGroup>
            </form>
        </FormikProvider>
    );
}

export default CustomFormWizard;