PNSPS-frontend-MaterialUI/src/pages/authentication/auth-forms/BusCustomFormWizard.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, POST_USERNAME, POST_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 LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
const PreviewUploadFileTable = Loadable(lazy(() => import('./PreviewUploadFileTable')));
// import UploadFileTable from './UploadFileTable';
// import LoadingComponent from "../../extra-pages/LoadingComponent";

// assets
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
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";
//import { Invaild } from 'utils/IconUtils';
// ============================|| FIREBASE - REGISTER ||============================ //

const BusCustomFormWizard = (props) => {
    const intl = useIntl();
    const { locale } = intl;

    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 [userNameList, setUserNameList] = useState([]);

    const [captchaImg, setCaptchaImage] = useState("");
    const [base64Url, setBase64Url] = useState("")
    const [checkCode, setCheckCode] = 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 [selectedAddress4, setSelectedAddress4] = useState(null);
    const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[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 district = document.getElementById("address4-combo")
    const [checkDistrict, setCheckDistrict] = useState(false)
    const [checkDistrictBlur, setCheckDistrictBlur] = useState(false)
    const [districtErrStr, setDistrictErrStr] = useState("")

    const address4ComboList = ComboData.district;
    const address5ComboList = ComboData.country;
    const refType = "identification";

    useEffect(() => {
        changePassword('');
    }, []);

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

    const handleCheckEmail = async () => {
        if (values?.email) {
            const response = await axios.post(`${POST_USER_EMAIL}`, { 
                e1: 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])

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

    useEffect(() => {
        if (checkDistrictBlur) {
            handleCheckDistrict()
            setCheckDistrictBlur(false)
        }
    }, [checkDistrictBlur])

    const handleCheckDistrict = async () => {
        setDistrictErrStr("");
        if (selectedAddress5?.type === "hongKong") {
            if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {}){
                setCheckDistrict(true) 
                setDistrictErrStr(getRequiredErrStr("district"))
            }else {
                setCheckDistrict(false)
            }
        }
    }

    function getRequiredErrStr(fieldname){
        return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""}));
    }

    function getMaxErrStr(num, fieldname){
        return displayErrorMsg(intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""}));
    }

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

    const checkDataField = (data) => {
        // console.log(data.brExpiryDate)
        if (
            handleCaptcha(data.captchaField) &&
            data.username !== "" &&
            data.password !== "" &&
            data.confirmPassword !== "" &&
            data.password === data.confirmPassword &&
            (data.chCompanyName !== "" || data.enCompanyName !== "") &&
            data.enName !== "" &&
            data.chName !== "" &&
            data.address1 !== "" &&
            data.email !== "" &&
            data.emailConfirm !== "" &&
            data.email === data.emailConfirm &&
            data.phone !== "" &&
            data.phoneCountryCode !== "" &&
            termsAndConAccept === true &&
            fileList.length !== 0 &&
            data.brNo !== "" &&
            data.brExpiryDate !== "" &&
            handlePassword(data.password) &&
            handleEmail(data.email) &&
            handlePhone(data.phone) &&
            handleUserName(data.username) &&
            handleBrNo(data.brNo) &&
            handleCheckDistrict()&&
            !checkUsername&&
            !checkEmail&&
            !checkDistrict
        ) {
            setisValid(true)
            return isValid
        } else {
            setisValid(false)
            return isValid
        }
    };

    const handleCheckBoxChange = (event) => {
        // console.log(event.target)
        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 handleBrNo = (brNo) => {
        var brNo_pattern = /[0-9]{8}/
        if (brNo !== undefined) {
            if (brNo.match(brNo_pattern)) {
                return true
            } else {
                return false
            }
        }
    }

    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);
            }
            // console.log("currentIndex")
            // console.log(currentIndex)
        }
        let updatedFileList = updateList.files;

        setFileListData(saveFileList)
        setFileList(updatedFileList);
    };

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

    useEffect(() => {
        checkDataField(values)
    }, [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.address4 = selectedAddress4==null?"":selectedAddress4.type
        values.address5 = selectedAddress5.type
        // console.log(values)
        const busUserAddress = {
            "addressLine1": "",
            "addressLine2": "",
            "addressLine3": "",
            "district": "",
            "country": ""
        };
        busUserAddress.addressLine1 = values.address1
        busUserAddress.addressLine2 = values.address2
        busUserAddress.addressLine3 = values.address3
        busUserAddress.district = values.address4
        busUserAddress.country = values.address5

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

        const preferLocale = locale === 'en' ? 'en': locale === 'zh-HK' ? 'zh_HK': 'zh-CN'
        const user = {
            username: values.username,
            password: values.password,
            name: values.username,
            enCompanyName: values.enCompanyName,
            chCompanyName: values.chCompanyName,
            emailBus: values.email,
            brNo: values.brNo,
            brExpiryDate: values.brExpiryDate,
            contactPerson: values.enName,
            tncFlag: tncFlag,
            type: "ORG",
            captcha: base64Url,
            checkCode: checkCode,
            preferLocale:preferLocale
        };

        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("busUserContactTel", JSON.stringify(busUserContactTel));
        formData.append("busUserAddress", JSON.stringify(busUserAddress));
        // formData.append("preferLocale", "en");

        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 {
            return true;
        }
    }

    function handleUserName(username) {
        var symbol = /^(?=.*\W)/;
        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) {
        if (captchaField.length == 5 ){
            return true
        } else {
            return false
        }
    }

    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 = /^(?=.*\W)/;
        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-]+(?:\.[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: '',
            enCompanyName: '',
            chCompanyName: '',
            email: '',
            address1: '',
            address2: '',
            address3: '',
            password: '',
            confirmPassword: '',
            phone: '',
            phoneCountryCode: '852',
            submit: null,
            fax: '',
            faxCountryCode: '852',
            brExpiryDate: '',
            brNo: '',
            emailConfirm: '',
            captchaField: ''
        }),

        validationSchema: yup.object().shape({
            username: yup.string().min(6, displayErrorMsg(intl.formatMessage({id: 'atLeast6CharAccount'}))).max(30,getMaxErrStr(30)).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'}))).max(60,getMaxErrStr(60)).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(/^(?=.*\W)/, { 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(40,getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({id: 'userRequireEnglishName'}))),
            enCompanyName: yup.string().matches(/^[^$^*]+$/, { message: displayErrorMsg('No special characters $/^/*') }).when('chCompanyName', {
                is: (chCompanyName) => !chCompanyName || chCompanyName.length === 0,
                then: yup.string().required(displayErrorMsg('Please enter either English or Chinese name')),
            }),
            chCompanyName: yup.string().matches(/^[^$^*]+$/, { message: displayErrorMsg(intl.formatMessage({id: 'notContainSpecialChar'})) }).when('enCompanyName', {
                is: (enCompanyName) => !enCompanyName || enCompanyName.length === 0,
                then: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'validateEngOrChiName'}))),
            }),
            chName: yup.string().max(6, getMaxErrStr(6)).required(displayErrorMsg(intl.formatMessage({id: 'userRequireChineseName'}))),
            address1: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))),
            address2: yup.string().max(40, getMaxErrStr(40)),
            address3: yup.string().max(40, getMaxErrStr(40)),
            email: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))),
            emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({id: 'validSameEmail'}))),
            phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
            faxCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))),
            phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
            fax: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast8Number'}))),
            brExpiryDate: yup.date().min(new Date().toISOString().split("T")[0], displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'})))
                .max("2099-12-31", displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))).
                required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))),
            brNo: yup.string().max(8, getMaxErrStr(8)).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'}))).test('checkBrNoFormat', displayErrorMsg(`${intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'})} (e.g. 12341234)`), function (value) {
                // var brNo_pattern = /[0-9]{8}-[0-9]{3}-(0[1-9]|1[012])-[0-9]{2}-[0-9A-Z]{1}/
                var brNo_pattern = /[0-9]{8}/
                if (value !== undefined) {
                    if (value.match(brNo_pattern)) {
                        return true
                    } else {
                        return false
                    }
                }
            }),
            captchaField: yup.string().max(5, getMaxErrStr(5)).required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))).min(5, displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
        }, ['enCompanyName', 'chCompanyName']),

    });

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

    const handleCCPChange = (e) => {
        e.preventDefault();
    };

    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="becomeNewBusinessUser"/>
                                    </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>
                                {/* <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={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
                                            autoFocus
                                            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">
                                                <FormattedMessage id="usernameTaken"/>
                                            </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">
                                                            <FormattedMessage id={level ? level?.label : "pwWeak" }/>
                                                        </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}
                                                    onCut={handleCCPChange}
                                                    onCopy={handleCCPChange}
                                                    onPaste={handleCCPChange}
                                                    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">
                                                        •<FormattedMessage id="pwRemark1"/><br />
                                                        •<FormattedMessage id="pwRemark2"/><br />
                                                        •<FormattedMessage id="pwRemark3"/><br />
                                                        •<FormattedMessage id="pwRemark4"/><br />
                                                        •<FormattedMessage id="pwRemark5"/>
                                                    </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: '#1A4399' }}*/>
                                            <FormattedMessage id="yourBusinessInformation"/>
                                        </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}>
                                    <Typography variant="subtitle1">
                                        •<FormattedMessage id="pleaseEnterOrgOrCompName"/>
                                    </Typography>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="enCompanyName-signup">
                                            <Typography variant="pnspsFormHeader">
                                                <FormattedMessage id="businessEngName"/>
                                            </Typography>
                                        </InputLabel>
                                        <OutlinedInput
                                            id="enCompanyName-login"
                                            type="enCompanyName"
                                            value={formik.values.enCompanyName}
                                            name="enCompanyName"
                                            onChange={formik.handleChange}
                                            placeholder={intl.formatMessage({id: 'sameAsBusinessRegistrationCert'})}
                                            fullWidth
                                            error={Boolean(formik.touched.enCompanyName && formik.errors.enCompanyName && selectedAddress5 !== "內地")}
                                            onBlur={formik.handleBlur}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.enCompanyName && formik.errors.enCompanyName && selectedAddress5 !== "內地" && (
                                            <FormHelperText error id="helper-text-enCompanyName-signup">
                                                {formik.errors.enCompanyName}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="chCompanyName-signup">
                                            <Typography variant="pnspsFormHeader">
                                                <FormattedMessage id="businessChName"/>
                                            </Typography>
                                        </InputLabel>
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.chCompanyName && formik.errors.chCompanyName)}
                                            id="chCompanyName-signup"
                                            type="text"
                                            value={formik.values.chCompanyName.trim()}
                                            name="chCompanyName"
                                            onChange={formik.handleChange}
                                            placeholder={intl.formatMessage({id: 'sameAsBusinessRegistrationCert'})}
                                            onBlur={formik.handleBlur}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.chCompanyName && formik.errors.chCompanyName && (
                                            <FormHelperText error id="helper-text-chCompanyName-signup">
                                                {formik.errors.chCompanyName}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="brNo-signup" sx={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
                                            <Typography variant="pnspsFormHeader">
                                                <FormattedMessage id="businessRegCertNumber"/> (e.g. 12341234)
                                                <span style={{ color: '#f10000' }}>*</span>
                                            </Typography>
                                        </InputLabel>
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.brNo && formik.errors.brNo)}
                                            id="brNo-signup"
                                            type="text"
                                            value={formik.values.brNo.trim()}
                                            name="brNo"
                                            onChange={formik.handleChange}
                                            onBlur={formik.handleBlur}
                                            placeholder={intl.formatMessage({id: 'sameAsBusinessRegistrationCert'})}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.brNo && formik.errors.brNo && (
                                            <FormHelperText error id="helper-text-brNo-signup">
                                                {formik.errors.brNo}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="brExpiryDate-signup">
                                            <Typography variant="pnspsFormHeader">
                                                <FormattedMessage id="businessRegCertValidityDate"/>
                                                <span style={{ color: '#f10000' }}>*</span>
                                            </Typography>
                                        </InputLabel>
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.brExpiryDate && formik.errors.brExpiryDate)}
                                            id="brExpiryDate-signup"
                                            type="date"
                                            value={formik.values.brExpiryDate}
                                            name="brExpiryDate"
                                            onChange={formik.handleChange}
                                            onBlur={formik.handleBlur}
                                            placeholder={intl.formatMessage({id: 'sameAsBusinessRegistrationCert'})}
                                            inputProps={{
                                                max: "2099-12-31",
                                                min: new Date().toISOString().split("T")[0],
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.brExpiryDate && formik.errors.brExpiryDate && (
                                            <FormHelperText error id="helper-text-brExpiryDate-signup">
                                                {formik.errors.brExpiryDate}
                                            </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"
                                            onBlur={formik.handleBlur}
                                            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"
                                            onBlur={formik.handleBlur}
                                            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}
                                            // error={Boolean(districtErrStr!="")}
                                            // onBlur={formik.handleBlur}
                                            getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
                                            onChange={(event, newValue) => {
                                                setSelectedAddress4(newValue);
                                            }}
                                            sx={{
                                                '& .MuiInputBase-root': { alignItems: 'center' },
                                                '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },
                                                '& .MuiOutlinedInput-root': { height: 40 }
                                            }}
                                            renderInput={(params) => <TextField error={checkDistrict} {...params} placeholder={intl.formatMessage({id: 'region'})}
                                            />}
                                        />
                                        <Autocomplete
                                            disablePortal
                                            id="address5-combo"
                                            value={selectedAddress5}
                                            options={address5ComboList}
                                            disabled= {true}
                                            getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
                                            onChange={(event, newValue) => {
                                                if (newValue !== null) {
                                                    setSelectedAddress5(newValue);
                                                    if (newValue.type === 'hongKong') {
                                                        setCheckCountry(false)
                                                        if(formik.values.phone==""){
                                                            formik.values.phoneCountryCode = "852";
                                                        }
                                                        if(formik.values.fax==""){
                                                            formik.values.faxCountryCode = "852";
                                                        }
                                                    } else {
                                                        if (newValue.type === 'mainland'){
                                                            if(formik.values.phone==""){
                                                                formik.values.phoneCountryCode = "86";
                                                            }
                                                            if(formik.values.fax==""){
                                                                formik.values.faxCountryCode = "86";
                                                            }
                                                        }else if(newValue.type === 'macau'){
                                                            if(formik.values.phone==""){
                                                                formik.values.phoneCountryCode = "853";
                                                            }
                                                            if(formik.values.fax==""){
                                                                formik.values.faxCountryCode = "853";
                                                            }
                                                        }
                                                        setSelectedAddress4("");
                                                        setCheckCountry(true)
                                                    }
                                                } else {
                                                    setSelectedAddress4("");
                                                    setCheckCountry(true)
                                                }
                                            }}
                                             sx={{
                                                '& .MuiInputBase-root': { alignItems: 'center' },
                                                '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },
                                                '& .MuiOutlinedInput-root': { height: 40 }
                                            }}
                                            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>
                                        )}
                                         {checkDistrict && (
                                            <FormHelperText error >
                                                {districtErrStr}
                                            </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}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="enName-signup">
                                            <Typography variant="pnspsFormHeader">
                                                <FormattedMessage id="userContactName"/>
                                                <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)}
                                            onBlur={formik.handleBlur}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.enName && formik.errors.enName && (
                                            <FormHelperText error id="helper-text-enName-signup">
                                                {formik.errors.enName}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </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="confirmEmail"/>
                                                        <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}
                                                    onCut={handleCCPChange}
                                                    onCopy={handleCCPChange}
                                                    onPaste={handleCCPChange}
                                                    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);
                                                                }}
                                                                endAdornment={<InputAdornment position="end">-</InputAdornment>}
                                                                placeholder={intl.formatMessage({id: 'dialingCode'})}
                                                                error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                onBlur={formik.handleBlur}
                                                                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)}
                                                                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"
                                                                // onBlur={formik.handleBlur}
                                                                // 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'})}
                                                                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' }}>
                                                    <FormattedMessage id="businessRegCertAndDoc"/>
                                                    <span style={{ color: '#f10000' }}>*</span>
                                                </Typography>
                                                <Typography display="inline" variant="h6" sx={{ color: 'primary.primary' }}>
                                                    <FormattedMessage id="pleaseUploadDoc"/>
                                                </Typography>
                                                {/* <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>           */}
                                                <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                                    <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                                    <Button variant="contained" component="label" sx={{ height: '40px' }}>
                                                        <FormattedMessage id="uploadFile"/>
                                                        <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 display="inline" variant="h6" sx={{ fontSize: 12, 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" }}>
                                                <div style={{padding: 12}} dangerouslySetInnerHTML={{__html: intl.formatMessage({id: "termsAndCon"})}} />
                                                </Typography>
                                            </Grid>
                                        </Grid>
                                        <Grid item xs={12} s={12} md={12} lg={12}>
                                            <Grid container>
                                                <Grid item xs={6} s={6} md={11} lg={11}>
                                                    <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="iConfirm"/>
                                                            </Typography>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                                <Grid item xs={6} s={6} md={3} lg={3}>
                                                    <Grid container style={{ display: "none" }}>
                                                        <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);
                                                        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={2}>
                        <Grid item xs={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="becomeNewBusinessUser"/>
                                    </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}>
                            <Grid container spacing={1}>
                                <Grid item xs={12} >
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            {intl.formatMessage({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: '#1A4399' }}*/>
                                            <FormattedMessage id="yourBusinessInformation"/>
                                        </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={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="businessEngName"/>:
                                        </Typography>
                                        <Typography variant="pnspsFormHeader" id="preview-enCompanyName-signup">
                                            {formik.values.enCompanyName}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="businessChName"/>:
                                        </Typography>
                                        <Typography variant="pnspsFormHeader" id="preview-chCompanyName-signup">
                                            {formik.values.chCompanyName}
                                        </Typography>
                                    </Stack>
                                </Grid>

                                <Grid item xs={12} md={12} >
                                    <Stack spacing={1}>
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="businessRegCert"/>
                                        </Typography>
                                    </Stack>
                                </Grid>

                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="businessRegCertNumber"/>:
                                        </Typography>
                                        <Typography variant="pnspsFormHeader" id="brNo-login">
                                            {formik.values.brNo}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="businessRegCertValidityDate"/>:
                                        </Typography>
                                        <Typography variant="pnspsFormHeader" id="brExpiryDate-login">
                                            {formik.values.brExpiryDate}
                                        </Typography>
                                    </Stack>
                                </Grid>

                                <Grid item xs={12}>
                                    <Stack spacing={1} direction="column">
                                        <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.type === "hongKong" ?
                                                <Stack direction="column">
                                                    {/* <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
                                                        <FormattedMessage id="region"/>:
                                                    </Typography> */}
                                                    <Typography variant="pnspsFormHeader">
                                                        {!selectedAddress4? "" : intl.formatMessage({id: selectedAddress4.type})}
                                                    </Typography>
                                                </Stack>
                                                : null}
                                            <Stack direction="column">
                                                {/* <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
                                                    <FormattedMessage id="regionOrCountry"/>:
                                                </Typography> */}
                                                <Typography variant="pnspsFormHeader">
                                                    {intl.formatMessage({id: selectedAddress5.type})}
                                                </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="userEnglishName"/>
                                        </Typography>
                                        <Typography variant="pnspsFormHeader" id="preview-enName-signup">
                                            {formik.values.enName}
                                        </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>
                                <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>
                                <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' }}>
                                                    <FormattedMessage id="userIdDoc"/>
                                                </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">
                                            <FormattedMessage id="registerSubmitted"/>
                                        </Typography>
                                        <Typography display="inline" variant="h4">
                                            <FormattedMessage id="emailSent"/>
                                        </Typography>
                                        <Button variant="outlined" component={Link} to="/login" >
                                            <Typography variant="pnspsFormHeader">
                                            <FormattedMessage id="backToLogin"/>
                                        </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">
                                            <FormattedMessage id="registerFail" />
                                        </Typography>
                                        <Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="pnspsFormHeader">
                                            <FormattedMessage id="backToLogin"/>
                                        </Typography></Button>
                                    </Stack>
                                }
                            </Grid>
                        }
                    </Grid>
                </FormGroup>
            </form>
        </FormikProvider>
    );
}

export default BusCustomFormWizard;