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

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

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

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

// project import
// import AnimateButton from 'components/@extended/AnimateButton';

import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
import {apiPath} from "auth/utils";
import axios from "axios";
import {POST_PUBLIC_USER_REGISTER} from "utils/ApiPathConst";
import * as HttpUtils from 'utils/HttpUtils';

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const UploadFileTable = Loadable(lazy(() => import('./UploadFileTable')));
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 CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';

import { Link } from 'react-router-dom';
// ============================|| FIREBASE - REGISTER ||============================ //

const BusCustomFormWizard = (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 handleClickShowPassword = () => {
        setShowPassword(!showPassword);
    };
    const handleClickShowConfirmPassword = () => {
        setshowConfirmPassword(!showConfirmPassword);
    };

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

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

    const [selectedAddress4, setSelectedAddress4] = useState(null);
    const [selectedAddress5, setSelectedAddress5] = useState("香港");
    const [termsAndConAccept, setTermsAndConAccept] = useState(false);
    const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
    const [isValid, setisValid] = useState(false);
    
    const address4ComboList = 
        ["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區",
         "坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"];
    const address5ComboList = ["香港","內地","澳門"];
    const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
                      + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"
                      + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評"
                      + "估本網址所載或與本網址有關連的各項資料，並應在根據該等資料行事前，參照印行的香港"
                      + "特別行政區憲報以核實該等資料，以及徵詢獨立意見。\n版權公告本網頁的內容，包括但不限"
                      + "於所有文本、平面圖像、圖畫、圖片、照片以及數據或其他資料的匯編，均受版權保障。\n香"
                      + "港特別行政區政府是本網頁內所有版權作品的擁有人，除非預先得到政府物流服務署的書面"
                      + "授權，否則嚴禁複製、改編、分發、發布或向公眾提供該等版權作品。"
    // const refType = "identification";

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

    const checkDataField = (data)=> {
        // console.log(data.brExpiryDate)
        if (data.username !==""&&
            data.password !==""&&
            data.confirmPassword !==""&&
            data.password == data.confirmPassword&&
            data.enCompanyName !==""&&
            data.enName !==""&&
            data.address1 !==""&&
            data.email !==""&&
            data.emailConfirm !==""&&
            data.phone !==""&&
            data.phoneCountryCode !==""&&
            termsAndConAccept == true&&
            fileList.length!==0&&
            handlePassword(data.password)&&
            handleEmail(data.email)&&
            handlePhone(data.phone)
        )
        {
            setisValid(true)
            return isValid
        }else{
            setisValid(false)
            return isValid
        }
    };

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

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

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

    }, [updateRows]);

    const 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) {
                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)
    }, [selectedAddress4,selectedAddress5,
        termsAndConAccept,termsAndConNotAccept,fileList])

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

    const {handleSubmit} = useForm({})
    const _onSubmit = () => {
        setLoding(true);
        values.address4 = selectedAddress4
        values.address5 = selectedAddress5
        // console.log(values)
        const busUserAddress  = {
            "addressLine1":"",
            "addressLine2":"",
            "addressLine3":"",
            "district":"",
            "country":""
        };
        busUserAddress.addressLine1 = values.address1
        busUserAddress.addressLine2 = values.address2
        busUserAddress.addressLine3 = values.address3
        busUserAddress.district = values.address4
        busUserAddress.country = values.address5

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

        if (isValid){
            axios.post(`${apiPath}${POST_PUBLIC_USER_REGISTER}`, {
                username: values.username,
                password: values.password,
                name: values.username,
                enCompanyName: values.enCompanyName,
                chCompanyName: values.chCompanyName,
                emailBus: values.email,
                brNo:values.brNo,
                brExpiryDate:values.brExpiryDate,
                userFaxNo:userFaxNo,
                busUserContactTel:busUserContactTel,
                busUserAddress:busUserAddress,
                contactPerson: values.enName,
                tncFlag:tncFlag,
                type:"ORG"
            })
            .then((response) => {
                setCheckUpload(true)
                HttpUtils.fileUpload(
                    {
                        refType:"brFile",
                        refId: response.data.id,
                        file: fileList[0],
                        onSuccess: (response)=>{
                            console.log(response);
                           setLoding(false);
                            // setOpen(true);
                        }
                    }
                );
            })
            .catch(error => {
                console.error(error);
                setLoding(false);
            });
        }else{
            setLoding(false);
        }
    }

    function handlePhone(phone) {
        if (phone.length < 8) {
            return false;
        } else {
            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;
        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.length < 8) {
            return false;
        } else {
            return true;
        }
    }

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

    const formik = useFormik({
        initialValues:({
            username:'',
            enName: '',
            enCompanyName: '',
            chCompanyName: '',
            email: '',
            address1: '',
            address2: '',
            address3: '',
            password: '',
            confirmPassword: '',
            phone:'',
            phoneCountryCode:'852',
            submit: null,
            fax:'',
            faxCountryCode:'852',
            brExpiryDate:'',
            brNo:'',
        }),
        validationSchema:yup.object().shape({
            username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱'),
            password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼')
                .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('請輸入英文姓名'),
            enCompanyName: yup.string().max(255).required('請輸入英文名稱'),
            chName: yup.string().max(255).required('請輸入中文姓名'),
            address1: yup.string().max(255).required('請輸入第一行地址'),
            address2: yup.string().max(255).required('請輸入第二行地址'),
            address3: yup.string().max(255).required('請輸入第三行地址'),
            email: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'),
            emailConfirm: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵').oneOf([yup.ref('email'), null], '請輸入相同電郵'),
            phoneCountryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'),
            faxCountryCode: yup.string().min(3,'請輸入3位數字'),
            phone: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'),
            fax: yup.string().min(8,'請輸入8位數字'),
            brExpiryDate: yup.string().min(8,'請輸入商業登記證有效日期'),
            brNo: yup.string().min(8,'請輸入商業登記證號碼'),
        })
    
    });

    const handleReset = (resetForm) => {
        resetForm();
        setSelectedAddress4("")
    };

    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>
                                {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                Already have an account?
                                </Typography> */}
                            </Stack>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container spacing={1}>
                                <Grid item xs={12} md={12} >
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="username-signup">用戶登入名稱
                                        <span style={{color: '#f10000'}}>*</span>
                                        </InputLabel>
                                        <OutlinedInput
                                            id="username-login"
                                            type="text"
                                            value={formik.values.username}
                                            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>
                                                    <InputLabel htmlFor="password-rule">密碼規則</InputLabel>
                                                </Stack>
                                                <OutlinedInput
                                                    fullWidth
                                                    error={Boolean(formik.touched.password && formik.errors.password)}
                                                    id="password-signup"
                                                    type={showPassword ? 'text' : 'password'}
                                                    value={formik.values.password}
                                                    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}
                                                    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>                                        
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} mt={1} mb={1}>
                                    <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                        <Typography display="inline" variant="h4" sx={{ color: '#1A4399'}}>你的機構/公司資料</Typography>          
                                        {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                            Already have an account?
                                        </Typography> */}
                                    </Stack>
                                </Grid>
                              
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="enCompanyName-signup">機構/公司英文名稱
                                            <span style={{color: '#f10000'}}>*</span>
                                        </InputLabel>
                                        <OutlinedInput
                                            id="enCompanyName-login"
                                            type="enCompanyName"
                                            value={formik.values.enCompanyName}
                                            name="enCompanyName"
                                            onChange={formik.handleChange}
                                            placeholder="與與商業登記證相同如有"
                                            fullWidth
                                            error={Boolean(formik.touched.enCompanyName && formik.errors.enCompanyName)}
                                            onBlur={formik.handleBlur}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.enCompanyName && formik.errors.enCompanyName && (
                                            <FormHelperText error id="helper-text-enCompanyName-signup">
                                            {formik.errors.enCompanyName}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="chCompanyName-signup">機構/公司中文名稱</InputLabel>
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.chCompanyName && formik.errors.chCompanyName)}
                                            id="chCompanyName-signup"
                                            type="text"
                                            value={formik.values.chCompanyName}
                                            name="chCompanyName"
                                            onChange={formik.handleChange}
                                            placeholder="與與商業登記證相同如有"
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.chCompanyName && formik.errors.chCompanyName && (
                                            <FormHelperText error id="helper-text-chCompanyName-signup">
                                            {formik.errors.chCompanyName}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="brNo-signup">商業登記證號碼</InputLabel>
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.brNo && formik.errors.brNo)}
                                            id="brNo-signup"
                                            type="text"
                                            value={formik.values.brNo}
                                            name="brNo"
                                            onChange={formik.handleChange}
                                            placeholder="與與商業登記證相同如有"
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.brNo && formik.errors.brNo && (
                                            <FormHelperText error id="helper-text-brNo-signup">
                                            {formik.errors.brNo}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="brExpiryDate-signup">商業登記證有效日期</InputLabel>
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.brExpiryDate && formik.errors.brExpiryDate)}
                                            id="brExpiryDate-signup"
                                            type="date"
                                            value={formik.values.brExpiryDate}
                                            name="brExpiryDate"
                                            onChange={formik.handleChange}
                                            placeholder="與與商業登記證相同如有"
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.brExpiryDate && formik.errors.brExpiryDate && (
                                            <FormHelperText error id="helper-text-brExpiryDate-signup">
                                            {formik.errors.brExpiryDate}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="address1-signup">地址
                                            <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 === null ? null : selectedAddress4}
                                                    options={address4ComboList}
                                                    onChange={(event, newValue) => {
                                                        if (newValue !== null){
                                                            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);
                                                        }
                                                    }}
                                                    
                                                    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}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="enName-signup">姓名
                                            <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)}
                                            onBlur={formik.handleBlur}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.enName && formik.errors.enName && (
                                            <FormHelperText error id="helper-text-enName-signup">
                                            {formik.errors.enName}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container>
                                        <Grid item xs={12} md={6}>
                                            <Stack spacing={1} sx={{mr:{md:1},mb:1}}>
                                                <InputLabel htmlFor="email-signup">電郵
                                                    <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}
                                                    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}
                                                    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}
                                                                name="phoneCountryCode"
                                                                // onBlur={formik.handleBlur}
                                                                onChange={formik.handleChange}
                                                                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}
                                                                name="phone"
                                                                onBlur={formik.handleBlur}
                                                                onChange={formik.handleChange}
                                                                placeholder="聯絡電話"
                                                                error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                inputProps={{
                                                                    maxLength: 8,
                                                                    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}
                                                                name="faxCountryCode"
                                                                // onBlur={formik.handleBlur}
                                                                onChange={formik.handleChange}
                                                                placeholder="國際區號"
                                                                inputProps={{
                                                                    maxLength: 3,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{width:'25%'}}
                                                            />
                                                            <OutlinedInput
                                                                id="fax-login"
                                                                type="fax"
                                                                value={formik.values.fax}
                                                                name="fax"
                                                                // onBlur={formik.handleBlur}
                                                                onChange={formik.handleChange}
                                                                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 recordList={fileListData} />: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>
                    </Grid>
                </FormGroup>
            {/* Preview Form */}
                <FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none"}}>
                    <Grid container spacing={2}>
                        <Grid item xs={12}>
                            <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                <div style={{borderBottom: "3px solid #1A4399", width:"100%", margin_right: "15px"}}>
                                <Typography display="inline" variant="h3" sx={{ color: '#1A4399'}}>成為新的機構/公司用戶</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}>
                            <Grid container spacing={1}>
                                <Grid item xs={12} >
                                    <Stack spacing={1} 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: '#1A4399'}}>你的機構/公司資料</Typography>          
                                    {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                        Already have an account?
                                    </Typography> */}
                                    </Stack>
                                </Grid>

                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                        機構/公司英文名稱:
                                        </Typography>
                                        <Typography id="preview-enCompanyName-signup">
                                            {formik.values.enCompanyName}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                        機構/公司中文名稱:
                                        </Typography>
                                        <Typography id="preview-chCompanyName-signup">
                                            {formik.values.chCompanyName}
                                        </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 id="brNo-login">
                                            {formik.values.brNo}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                        商業登記證有效日期:
                                        </Typography>
                                        <Typography id="brExpiryDate-login">
                                            {formik.values.brExpiryDate}
                                        </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-enName-signup">
                                            {formik.values.enName}
                                        </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>
                                <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>
                                
                            </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 BusCustomFormWizard;