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

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

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

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

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

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

// assets
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
// import { Paper } from '../../../../node_modules/@mui/material/index';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
import { Link } from 'react-router-dom';
import * as HttpUtils from "../../../utils/HttpUtils";
import LoopIcon from '@mui/icons-material/Loop';

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

const CustomFormWizard = (props) => {
    
    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 [captcha, setCaptcha] = useState([]);
    const [captchaImg, setCaptchaImage] = useState([]);


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

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

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

    const [selectedIdDocType, setSelectedIdDocType] = useState({});
    const [selectedIdDocInputType, setSelectedIdDocInputType] = useState("");
    // const [selectedIdDocLabel, setSelectedIdDocLabel] = useState(null);
    const [selectedAddress4, setSelectedAddress4] = useState(null);
    const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]);
    const [termsAndConAccept, setTermsAndConAccept] = useState(false);
    const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
    const [isValid, setisValid] = useState(false);
    const [checkCountry, setCheckCountry] = useState(false);

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

    useEffect(() => {
        changePassword('');
        onCaptchaChange();
        axios.get(`${GET_USERNAME}`)
            .then((response) => {
                if (response.status === 200) {
                    setUserNameList(response.data);
                }
                
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }, []);

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


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

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

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

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

    }, [updateRows]);

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

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

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

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

        setFileListData(saveFileList)
        setFileList(updatedFileList);
    };

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

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

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

    const {handleSubmit} = useForm({})
    const _onSubmit = () => {
        setLoding(true);
        values.idDocType = selectedIdDocType.type
        values.address4 = selectedAddress4
        values.address5 = selectedAddress5
        const userAddress  = {
            "addressLine1":"",
            "addressLine2":"",
            "addressLine3":"",
            "district":"",
            "country":""
        };
        userAddress.addressLine1 = values.address1
        userAddress.addressLine2 = values.address2
        userAddress.addressLine3 = values.address3
        userAddress.district = values.address4
        userAddress.country = values.address5
       
        const userFaxNo = {
            "countryCode":values.faxCountryCode,
            "faxNumber":values.fax,
        };
        const userMobileNumber = {
            "countryCode":values.phoneCountryCode,
            "phoneNumber":values.phone,
        };
        let tncFlag = false;
        if (termsAndConAccept){
            tncFlag = true
        }
        if (termsAndConNotAccept){
            tncFlag = false
        }

        const user = {
            username: values.username,
            password: values.password,
            name: values.username,
            enName: values.enName,
            chName: values.chName,
            emailAddress: values.email,
            idDocType:values.idDocType,
            identification:values.idNo,
            checkDigit:values.checkDigit,
            tncFlag:tncFlag,
            type:"IND",
        };

        var formData = new FormData();
        for (let i = 0; i < fileListData.length; i++){
            const file = fileListData[i]
            formData.append("multipartFileList", file);
        }
        formData.append("refType", refType);
        
        for (const [key, value] of Object.entries(user)) {
            formData.append(key, value);
        }
        
        formData.append("userFaxNo", JSON.stringify(userFaxNo));
        formData.append("userMobileNumber", JSON.stringify(userMobileNumber));
        formData.append("userAddress", JSON.stringify(userAddress));

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

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

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

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

    function handleCaptcha(captchaField) {
        return captchaField == captcha;
    }

    function handleIdNo(idNo,selectedIdDocType,checkDigit) {
        var pattern = /^[A-Z][0-9]*$/;
        var space = /\s/;
        if (!idNo.match(pattern)) {
            return false;
        }else if
        (selectedIdDocType=="HKID"&&checkDigit==""){
            return false;
        }
        else if (idNo.match(space)) {
            return false;
        }else if (idNo.length < 7) {
            return false;
        } else {
            // console.log("IdNo true")
            return true;
        }
    }

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

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

    const formik = useFormik({
        initialValues:({
            username:'',
            enName: '',
            chName: '',
            email: '',
            emailConfirm: '',
            address1: '',
            address2: '',
            address3: '',
            password: '',
            confirmPassword: '',
            phone:'',
            phoneCountryCode:'852',
            idNo:'',
            checkDigit:'',
            submit: null,
            fax:'',
            faxCountryCode:'852',
            idDocType:'',
            captchaField:''
        }),
        validationSchema:yup.object().shape({
            username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱').test(
                "checkUserNameUsed",
                "此用戶登入名稱已被注冊，請使用其他用戶登入名稱",
                function(value) {
                    if (userNameList.some(item => item.username === value)) {
                        return false
                    } else {
                        return true
                    }
                }
              )
            .matches(/^[aA-zZ0-9\s]+$/, "用戶名稱不包含特殊字符")
            .matches(/^\S*$/, '用戶名稱不包含空格'),
            password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼')
                .matches(/^\S*$/, '密碼不包含空格')
                .matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母')
                .matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母')
                .matches(/^(?=.*[0-9])/, '請包括最少1個數字')
                .matches(/^(?=.*[!@#%&])/, '請包括最少1個特殊字符'),
            confirmPassword: yup.string().min(8,'請最少輸入8位密碼').required('請確認密碼').oneOf([yup.ref('password'), null], '請輸入相同密碼'),
            enName: yup.string().max(255).required('請輸入英文姓名'),
            chName: yup.string().max(6).required('請輸入中文姓名'),
            address1: yup.string().max(255).required('請輸入第一行地址'),
            address2: yup.string().max(255).required('請輸入第二行地址'),
            address3: yup.string().max(255).required('請輸入第三行地址'),
            email: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'),
            emailConfirm: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵').oneOf([yup.ref('email'), null], '請輸入相同電郵'),
            idNo: yup.string().required('請輸入證件號碼')
                .matches(/^[aA-zZ0-9\s]+$/, "證件號碼不包含特殊字符")
                .matches(/^\S*$/, '證件號碼不包含空格')
                .test('checkIDCardFormat', '請輸入香港身份證號碼', function(value) {
                    const idDocType = selectedIdDocType.type;
                    var pattern = /^[A-Z][0-9]*$/;
                    if(value!==undefined){
                        if (!value.match(pattern)&&idDocType=="HKID"&&value.length<7) {
                            return false
                        } else {
                            return true
                        }
                    }
                }),
            checkDigit:yup.string().max(1).required('請輸入括號內的數字或字母'),
            idDocType: yup.string().max(255).required('請輸入證件類別'),
            phoneCountryCode: yup.string().min(2,'請輸入最少2位數字').required('請輸入國際區號'),
            // faxCountryCode: yup.string().min(3,'請輸入3位數字'),
            phone: yup.string().min(8,'請輸入最少8位數字').required('請輸入聯絡電話'),
            // fax: yup.string().min(8,'請輸入8位數字'),
            captchaField: yup.string().required('請輸入驗證').oneOf([captcha], '請輸入有效驗證'),
        }),
    });

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

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

    return (
        <FormikProvider value={formik}>
            <form onSubmit={handleSubmit(_onSubmit)}>
            {/* Input Form */}
                <FormGroup id={"inputForm"} sx={{ display: props.step === 0 ? "" : "none" }}>
                    <Grid container spacing={3}>
                        <Grid item xs={12} md={12}>
                            <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                <Button variant="outlined" type="reset" onClick={handleReset.bind(null, formik.resetForm)} sx={{ fontSize: 16,height:'30px'}}>重置</Button>
                                <div style={{borderBottom: "3px solid #1A4399", width:"100%", margin_right: "15px"}}>
                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399'}}>成為新的個人用戶</Typography>          
                                </div>
                                <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography>
                                <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary'}}>你的登入資料</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">用戶登入名稱
                                        <span style={{color: '#f10000'}}>*</span>
                                        </InputLabel>
                                        <OutlinedInput
                                            id="username-login"
                                            type="text"
                                            value={formik.values.username.trim()}
                                            name="username"
                                            onChange={formik.handleChange}
                                            placeholder="用戶登入名稱"
                                            fullWidth
                                            error={Boolean(formik.touched.username && formik.errors.username)}
                                            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>
                                        )}
                                    </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">密碼
                                                    <span style={{color: '#f10000'}}>*</span>
                                                    </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="密碼"
                                                    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" fontSize="0.75rem">
                                                            {level?.label}
                                                        </Typography>
                                                    </Grid>
                                                </Grid>
                                            </FormControl>
                                        </Grid>
                                        <Grid item xs={12} md={6} >
                                            <Stack spacing={1}>
                                                <InputLabel htmlFor="confirmPassword-signup">確認密碼
                                                    <span style={{color: '#f10000'}}>*</span>
                                                </InputLabel>
                                                <OutlinedInput
                                                    id="confirmPassword-login"
                                                    type={showConfirmPassword ? 'text' : 'password'}
                                                    value={formik.values.confirmPassword.trim()}
                                                    name="confirmPassword"
                                                    onBlur={formik.handleBlur}
                                                    onChange={(e) => {
                                                        formik.handleChange(e);
                                                        // changePassword(e.target.value);
                                                    }}
                                                    inputProps={{
                                                        onKeyDown: (e) => {
                                                            if (e.key === 'Enter') {
                                                                e.preventDefault();
                                                            }
                                                        },
                                                    }}
                                                    endAdornment={
                                                    <InputAdornment position="end">
                                                    <IconButton
                                                        aria-label="toggle password visibility"
                                                        onClick={handleClickShowConfirmPassword}
                                                        onMouseDown={handleMouseDownPassword}
                                                        edge="end"
                                                        size="large"
                                                    >
                                                        {showConfirmPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                                    </IconButton>
                                                    </InputAdornment>
                                                    }
                                                    placeholder="確認密碼"
                                                    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>
                                                        <Typography fontSize="0.75rem">
                                                        <br/>
                                                        •至少8個字元，字元越多越好 <br/>
                                                        •字母和數字的混合<br/>
                                                        •英文字母大寫與小寫的混合<br/>
                                                        •至少包含一個特殊符號，例如，@ # ?
                                                        </Typography>
                                                    </Grid>
                                                </Grid>
                                        </Grid>                                        
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} mt={1} mb={1}>
                                    <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>你的個人資料</Typography>          
                                        {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                            Already have an account?
                                        </Typography> */}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12} >
                                    <Grid container sx={{mb:1}}>
                                        <Stack spacing={1}>
                                            <InputLabel htmlFor="idDocType-signup">身份證明文件
                                                <span style={{color: '#f10000'}}>*</span>
                                            </InputLabel>
                                            {/* {formik.touched.enName && formik.errors.enName && (
                                                <FormHelperText error id="helper-text-enName-signup">
                                                {formik.errors.enName}
                                                </FormHelperText>
                                            )} */}
                                        </Stack>
                                    </Grid>

                                    <Grid container>
                                        <Grid item xs={12} md={6} >
                                            <Stack spacing={1}  sx={{mr:{md:1},mb:{xs:0.5}}}>
                                                <Autocomplete
                                                    disablePortal
                                                    id="idDocType"
                                                    //value={selectedIdDocType}
                                                    options={idDocTypeComboList}
                                                    // getOptionLabel={(idDocTypeComboList) => idDocTypeComboList.label}
                                                    onBlur={formik.handleBlur}
                                                    filterOptions={(options)=>options}
                                                    inputValue={selectedIdDocInputType}
                                                    onChange={(event, newValue) => {
                                                        if (newValue!=null && newValue != {}){
                                                            setSelectedIdDocInputType(newValue.label);
                                                            setSelectedIdDocType(newValue);
                                                            if (newValue.type!="HKID"){
                                                                formik.setFieldValue("checkDigit","")
                                                            }
                                                        }else{
                                                            setSelectedIdDocInputType("");
                                                        }
                                                    }}
                                                    sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
                                                    renderInput={(params) => <TextField {...params} placeholder="證件類別"/>}
                                                />
                                                {formik.touched.idDocType && (
                                                    selectedIdDocType===null?
                                                    <FormHelperText error id="helper-text-idDocType-signup">
                                                        請輸入證件類別
                                                    </FormHelperText>:''    
                                                )}
                                            </Stack>
                                        </Grid>
                                        {selectedIdDocType.type=="HKID"?
                                            <>
                                                <Grid item xs={10} md={5}>
                                                    <Stack spacing={1}>
                                                        <OutlinedInput
                                                            id="idNo-login"
                                                            type="text"
                                                            value={formik.values.idNo.toUpperCase().trim()}
                                                            name="idNo"
                                                            onChange={formik.handleChange}
                                                            placeholder="證件號碼"
                                                            fullWidth
                                                            sx={{mr:1}}
                                                            error={Boolean(formik.touched.idNo && formik.errors.idNo)}
                                                            onBlur={formik.handleBlur}
                                                            inputProps={{
                                                                maxLength: selectedIdDocType.type =='HKID'?7:18,
                                                                onKeyDown: (e) => {
                                                                    if (e.key === 'Enter') {
                                                                        e.preventDefault();
                                                                    }
                                                                },
                                                            }}
                                                        />
                                                        {formik.touched.idNo && formik.errors.idNo && (
                                                            <FormHelperText error id="helper-text-idNo-signup">
                                                            {formik.errors.idNo}
                                                            </FormHelperText>
                                                        )}
                                                        {formik.touched.checkDigit && formik.errors.checkDigit && (
                                                            <FormHelperText error id="helper-text-checkDigit-signup">
                                                            {formik.errors.checkDigit}
                                                            </FormHelperText>
                                                        )}
                                                    </Stack>
                                                </Grid>
                                                <Grid item xs={2} md={1}>
                                                    <Stack spacing={1}>
                                                        <OutlinedInput
                                                            id="checkDigit-login"
                                                            type="text"
                                                            value={formik.values.checkDigit.trim()}
                                                            name="checkDigit"
                                                            onChange={formik.handleChange}
                                                            placeholder="( )"
                                                            // sx={{height:"53px"}}
                                                            inputProps={{
                                                                maxLength: 1,
                                                                onKeyDown: (e) => {
                                                                    if (e.key === 'Enter') {
                                                                        e.preventDefault();
                                                                    }
                                                                },
                                                            }}
                                                            fullWidth
                                                            error={Boolean(formik.touched.checkDigit && formik.errors.checkDigit)}
                                                            onBlur={formik.handleBlur}
                                                        />
                                                    </Stack>
                                                </Grid>
                                            </>:
                                            <Grid item xs={12} md={6}>
                                                <Stack spacing={1}>
                                                    <OutlinedInput
                                                        id="idNo-login"
                                                        type="text"
                                                        value={formik.values.idNo.trim()}
                                                        name="idNo"
                                                        onChange={formik.handleChange}
                                                        placeholder="證件號碼"
                                                        fullWidth
                                                        sx={{mr:1}}
                                                        error={Boolean(formik.touched.idNo && formik.errors.idNo)}
                                                        onBlur={formik.handleBlur}
                                                        inputProps={{
                                                            maxLength: 18,
                                                            onKeyDown: (e) => {
                                                                if (e.key === 'Enter') {
                                                                    e.preventDefault();
                                                                }
                                                            },
                                                        }}
                                                    />
                                                    {formik.touched.idNo && formik.errors.idNo && (
                                                        <FormHelperText error id="helper-text-idNo-signup">
                                                        {formik.errors.idNo}
                                                        </FormHelperText>
                                                    )}
                                                </Stack>
                                            </Grid>
                                        }
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="enName-signup">英文姓名
                                            {selectedIdDocType.type === "CNID" ? "" : <span style={{color: '#f10000'}}>*</span>}
                                        </InputLabel>
                                        <OutlinedInput
                                            id="enName-login"
                                            type="enName"
                                            value={formik.values.enName}
                                            name="enName"
                                            onChange={formik.handleChange}
                                            placeholder="與你的身份證明文件相同"
                                            fullWidth
                                            error={Boolean(formik.touched.enName && formik.errors.enName && selectedIdDocType.type !== "CNID")}
                                            onBlur={formik.handleBlur}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.enName && formik.errors.enName && selectedIdDocType.type !== "CNID" && (
                                            <FormHelperText error id="helper-text-enName-signup">
                                            {formik.errors.enName}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="chName-signup">
                                            中文姓名
                                            <span style={{color: '#f10000'}}>*</span>
                                        </InputLabel>
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.chName && formik.errors.chName)}
                                            id="chName-signup"
                                            type="text"
                                            value={formik.values.chName.trim()}
                                            name="chName"
                                            onChange={formik.handleChange}
                                            placeholder="與你的身份證明文件相同"
                                            onBlur={formik.handleBlur}
                                            inputProps={{
                                                maxLength: 6,
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.chName && formik.errors.chName && (
                                            <FormHelperText error id="helper-text-chName-signup">
                                            {formik.errors.chName}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="address1-signup">地址
                                            <span style={{color: '#f10000'}}>*</span>
                                        </InputLabel>
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.address1 && formik.errors.address1)}
                                            id="address1-signup"
                                            value={formik.values.address1}
                                            name="address1"
                                            onChange={formik.handleChange}
                                            placeholder="第一行"
                                            onBlur={formik.handleBlur}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.address2 && formik.errors.address2)}
                                            id="address2-signup"
                                            value={formik.values.address2}
                                            name="address2"
                                            onChange={formik.handleChange}
                                            placeholder="第二行"
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.address3 && formik.errors.address3)}
                                            id="address3-signup"
                                            value={formik.values.address3}
                                            name="address3"
                                            onChange={formik.handleChange}
                                            placeholder="第三行"
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        <Autocomplete
                                                    disablePortal
                                                    id="address4-combo"
                                                    value={selectedAddress4}
                                                    options={address4ComboList}
                                                    disabled={checkCountry}
                                                    onChange={(event, newValue) => {
                                                        setSelectedAddress4(newValue);
                                                    }}
                                                    sx={{"& .MuiInputBase-root": { height: "41px" },"#address4-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
                                                    renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)"/>}
                                        />
                                        <Autocomplete
                                                    disablePortal
                                                    id="address5-combo"
                                                    value={selectedAddress5}
                                                    options={address5ComboList}
                                                    onChange={(event, newValue) => {
                                                        if (newValue !== null){
                                                            setSelectedAddress5(newValue);
                                                            if(newValue=='香港'){
                                                                setCheckCountry(false)
                                                            }else{
                                                                setSelectedAddress4("");
                                                                setCheckCountry(true)
                                                            }
                                                        }else{
                                                            setSelectedAddress4("");
                                                            setCheckCountry(true)
                                                        }
                                                    }}
                                                    
                                                    sx={{"& .MuiInputBase-root": { height: "41px" },"#address5-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
                                                    renderInput={(params) => <TextField {...params} placeholder="國家/地區"/>}
                                        />
                                        {formik.touched.address1 && formik.errors.address1 && (
                                            <FormHelperText error id="helper-text-address1-signup">
                                            {formik.errors.address1}
                                            </FormHelperText>
                                        )}
                                        {formik.touched.address2 && formik.errors.address2 && (
                                            <FormHelperText error id="helper-text-address2-signup">
                                            {formik.errors.address2}
                                            </FormHelperText>
                                        )}
                                        {formik.touched.address3 && formik.errors.address3 && (
                                            <FormHelperText error id="helper-text-address3-signup">
                                            {formik.errors.address3}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} mt={1} mb={1}>
                                    <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>你的聯絡資料</Typography>          
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container>
                                        <Grid item xs={12} md={6}>
                                            <Stack spacing={1} sx={{mr:{md:1},mb:1}}>
                                                <InputLabel htmlFor="email-signup">電郵
                                                    <span style={{color: '#f10000'}}>*</span>
                                                </InputLabel>
                                                <OutlinedInput
                                                    fullWidth
                                                    error={Boolean(formik.touched.email && formik.errors.email)}
                                                    id="email-login"
                                                    type="email"
                                                    value={formik.values.email.trim()}
                                                    name="email"
                                                    onChange={formik.handleChange}
                                                    placeholder="電郵"
                                                    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>
                                                )}
                                            </Stack>
                                        </Grid>
                                        <Grid item xs={12} md={6}>
                                            <Stack spacing={1} >
                                                <InputLabel htmlFor="emailConfirm-signup">確認電郵
                                                    <span style={{color: '#f10000'}}>*</span>
                                                </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="確認電郵"
                                                    onBlur={formik.handleBlur}
                                                    inputProps={{
                                                        onKeyDown: (e) => {
                                                            if (e.key === 'Enter') {
                                                                e.preventDefault();
                                                            }
                                                        },
                                                    }}
                                                />
                                                {formik.touched.emailConfirm && formik.errors.emailConfirm && (
                                                    <FormHelperText error id="helper-text-emailConfirm-signup">
                                                    {formik.errors.emailConfirm}
                                                    </FormHelperText>
                                                )}
                                            </Stack>
                                        </Grid>                                        
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container>
                                        <Grid item  xs={12} md={6}>
                                            <Grid container>
                                                <Grid item xs={12} md={12}>
                                                    <Stack direction="column" spacing={1} sx={{mr:{md:1},mb:1}}>
                                                        <InputLabel htmlFor="phone-signup">聯絡電話
                                                            <span style={{color: '#f10000'}}>*</span>
                                                        </InputLabel>
                                                        <Stack direction="row">
                                                            <OutlinedInput
                                                                id="phoneCountryCode-login"
                                                                type="phoneCountryCode"
                                                                value={formik.values.phoneCountryCode.trim()}
                                                                name="phoneCountryCode"
                                                                // onBlur={formik.handleBlur}
                                                                // onChange={formik.handleChange}
                                                                onChange={(event) => {
                                                                    const value = event.target.value;
                                                                    if (value.match(/[^0-9]/)) {
                                                                        return event.preventDefault();
                                                                    }
                                                                    formik.setFieldValue("phoneCountryCode",value);
                                                                }}
                                                                placeholder="國際區號"
                                                                error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                onBlur={formik.handleBlur}
                                                                inputProps={{
                                                                    maxLength: 3,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{width:'25%'}}
                                                            />
                                                            <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="聯絡電話"
                                                                error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                onBlur={formik.handleBlur}
                                                                inputProps={{
                                                                    maxLength: 11,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{width:'75%'}}
                                                            />
                                                        </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">傳真號碼</InputLabel>
                                                        <Stack direction="row">
                                                            <OutlinedInput
                                                                error={Boolean(formik.touched.fax && formik.errors.fax)}
                                                                id="faxCountryCode-login"
                                                                type="faxCountryCode"
                                                                value={formik.values.faxCountryCode.trim()}
                                                                name="faxCountryCode"
                                                                // onChange={formik.handleChange}
                                                                onChange={(event) => {
                                                                    const value = event.target.value;
                                                                    if (value.match(/[^0-9]/)) {
                                                                        return event.preventDefault();
                                                                    }
                                                                    formik.setFieldValue("faxCountryCode",value);
                                                                }}
                                                                placeholder="國際區號"
                                                                onBlur={formik.handleBlur}
                                                                inputProps={{
                                                                    maxLength: 3,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{width:'25%'}}
                                                            />
                                                            <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="傳真號碼"
                                                                inputProps={{
                                                                    maxLength: 8,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{width:'75%'}}
                                                            />
                                                        </Stack>
                                                    </Stack>
                                                </Grid>
                                            </Grid>
                                    </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={12} mt={1} mb={1}>
                                    <Grid container>
                                        <Grid item xs={12} md={12}>
                                            <Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                                <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件<span style={{color: '#f10000'}}>*</span></Typography>          
                                                <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography>          
                                                <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證; 專業執業証書等</Typography>          
                                                <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                                    <Button variant="contained" component="label" sx={{ fontSize: 12,height:'40px'}}>上傳身份證明文件
                                                        <input
                                                        accept="image/png, .jpg, .bmp, .pdf"
                                                        //className={classes.input}
                                                        id="contained-button-file"
                                                        multiple
                                                        type="file"
                                                        onChange={handleFileUpload}
                                                        style={{display: 'none'}}
                                                        />
                                                    </Button>
                                                    <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'}}>
                                            條款和條件
                                            <span style={{color: '#f10000'}}>*</span>
                                        </Typography>
                                    </Grid>
                                    <Grid item xs={12} md={12}>
                                        <Grid container>
                                            <Grid item xs={12} md={12}>
                                                <Typography height="80%" sx={{textAlign: "left",overflow: "scroll",borderRadius: "inherit", borderStyle: "solid",borderWidth: "1px",borderColor: "#0C489E"}}>
                                                    {termsAndCon}
                                                </Typography>
                                            </Grid>
                                        </Grid>
                                        <Grid item xs={12} s={12} md={12} lg={12}>
                                            <Grid container>
                                                <Grid item xs={6} s={6} md={2} lg={2}>
                                                    <Grid container>
                                                        <Grid item sx={{display: 'flex', alignItems: 'center'}}>
                                                            <Checkbox
                                                                checked={termsAndConAccept}
                                                                onChange={handleCheckBoxChange}
                                                                name="termsAndConAccept"
                                                                color="primary"
                                                                size="small"
                                                            />
                                                            <Typography>我接受</Typography>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                                <Grid item xs={6} s={6} md={2} lg={2}>
                                                    <Grid container>
                                                        <Grid item sx={{display: 'flex', alignItems: 'center'}}>
                                                            <Checkbox
                                                                checked={termsAndConNotAccept}
                                                                onChange={handleCheckBoxChange}
                                                                name="termsAndConNotAccept"
                                                                color="primary"
                                                                size="small"
                                                            />                                              
                                                            <Typography>我不接受</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'}}>
                                            驗證
                                            <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;
                                                    formik.setFieldValue("captchaField",value);
                                                }}
                                                sx={{width:'75%'}}
                                            />
                                    </Grid>
                                    </Stack>
                                        {formik.touched.captchaField && formik.errors.captchaField && (
                                            <FormHelperText error id="helper-text-captcha-signup">
                                            {formik.errors.captchaField}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </FormGroup>
            {/* Preview Form */}
                <FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none"}}>
                    <Grid container spacing={3}>
                        <Grid item xs={12} md={12}>
                            <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                <div style={{borderBottom: "3px solid #1A4399", width:"100%", margin_right: "15px"}}>
                                <Typography display="inline" variant="h3" sx={{ color: '#1A4399'}}>成為新的個人用戶</Typography>          
                                </div>
                                {/* <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography> */}
                                <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary'}}>你的登入資料</Typography>
                                {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                Already have an account?
                                </Typography> */}
                            </Stack>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container spacing={2}>
                                <Grid item xs={12} >
                                    <Stack spacing={2} direction="row">
                                        <Typography>
                                            用戶登入名稱:                                         
                                        </Typography>
                                        <Typography id="preview-username-login">
                                            {formik.values.username}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} mt={1} mb={1}>
                                    <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                    <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>你的個人資料</Typography>          
                                    {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                        Already have an account?
                                    </Typography> */}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12} >
                                    <Stack spacing={1}>
                                        <Typography>
                                            身份證明文件
                                        </Typography>
                                    </Stack>
                                </Grid>

                                <Grid item xs={12} md={6} >
                                    <Stack spacing={1}  direction="row">
                                        <Typography>
                                            證件類別:
                                        </Typography>
                                        <Typography name = "preview-idDocType">
                                            {selectedIdDocType.label}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                            證件號碼:
                                        </Typography>
                                        <Typography id="idNo-login">
                                            {formik.values.idNo} {selectedIdDocType.type=="HKID"?'('+formik.values.checkDigit+')':null}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                            英文姓名:
                                        </Typography>
                                        <Typography id="preview-enName-signup">
                                            {formik.values.enName}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                            中文姓名:
                                        </Typography>
                                        <Typography id="preview-chName-signup">
                                            {formik.values.chName}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                            地址:
                                        </Typography>
                                        <Stack spacing={1} direction="column">
                                            <Typography id="preview-address1-signup">
                                                {formik.values.address1}
                                            </Typography>
                                            {formik.values.address2!=null?
                                                <Typography id="preview-address2-signup">
                                                    {formik.values.address2}
                                                </Typography>
                                            :null}
                                            {formik.values.address3!=null?
                                            <Typography id="preview-address3-signup">
                                                {formik.values.address3}
                                            </Typography>
                                            :null}
                                            {selectedAddress5==("香港")?
                                                <Typography id="preview-address4-signup">
                                                區域 (只適用於香港): {selectedAddress4}
                                                </Typography>
                                            :null}
                                            <Typography id="preview-address5-signup">
                                            國家/地區: {selectedAddress5}
                                            </Typography>
                                        </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'}}>你的聯絡資料</Typography>          
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                            電郵:
                                        </Typography>
                                        <Typography id="preview-email-signup">
                                            {formik.values.email}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                            聯絡電話:
                                        </Typography>
                                        <Typography id="preview-phone-signup">
                                            +{formik.values.phoneCountryCode} {formik.values.phone}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                {formik.values.faxCountryCode!=""&&formik.values.fax!=""?
                                    <Grid item xs={12} md={6}>
                                        <Stack spacing={1} direction="row">
                                            <Typography>
                                                傳真號碼:
                                            </Typography>
                                            <Typography id="preview-fax-signup">
                                                +{formik.values.faxCountryCode} {formik.values.fax}
                                            </Typography>
                                        </Stack>
                                    </Grid>
                                :null}
                                <Grid item xs={12} md={12} mt={1} mb={1}>
                                    <Grid container>
                                        <Grid item xs={12} md={12}>
                                            <Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                                <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography>     
                                                {fileList !=null?
                                                    <PreviewUploadFileTable  key="previewTable" recordList={fileListData} />:null}
                                            </Stack>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </FormGroup>
            {/* Submit page */}
                <FormGroup id={"submitForm"} sx={{ display: props.step === 2 ? "" : "none"}}>
                    <Grid container spacing={3}>
                    {isLoading ?
                        <LoadingComponent/>:
                        <Grid item xs={12}>
                            {checkUpload?
                            // SUCCESS page
                                <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                        <CheckCircleOutlineIcon color="success" sx={{width:"200px",height:"200px"}}/>
                                        <Typography display="inline" variant="h4">帳戶申請已成功提交。</Typography>
                                        <Typography display="inline" variant="h4">驗證電郵將發送到你的電郵地址，請要指示完成驗證及登入系統。</Typography>
                                        <Button variant="outlined"  component={Link} to="/login" sx={{ fontSize: 20,height:'60px'}}>返回登入頁面</Button>
                                </Stack>
                            :
                            // ERROR page
                                <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                    {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                                    <CancelOutlinedIcon color="error" sx={{width:"200px",height:"200px"}}/>
                                    <Typography display="inline" variant="h4">申請失敗，請稍後嘗試</Typography>
                                    <Button color="error" variant="outlined"  component={Link} to="/login" sx={{ fontSize: 20,height:'60px'}}>返回登入頁面</Button>
                                </Stack>
                            }
                        </Grid>
                    }
                    </Grid>
                </FormGroup>
            </form>
        </FormikProvider>
    );
}

export default CustomFormWizard;