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

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

// material-ui
import {
    Button,
    FormHelperText,
    Grid, IconButton,
    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";
import { POST_IAMSMART_USER_REGISTER, POST_CAPTCHA, POST_USER_EMAIL, POST_CAPTCHA_AUDIO} from "utils/ApiPathConst";

import * as ComboData from "utils/ComboData";

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

import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';

import { Link } from 'react-router-dom';
import * as HttpUtils from "../../../utils/HttpUtils";
import LoopIcon from '@mui/icons-material/Loop';
import { useTheme } from '@mui/material/styles';
import { useLocation } from "react-router-dom";
import { FormattedMessage, useIntl } from "react-intl";
import { handleActionKeyDown, notifyActionError } from 'utils/CommonFunction';
import { ADDRESS_LINE_MAX_LENGTH, isAddressLineWithinLimit, isRegisterAddressValid, splitAddressIntoLines } from 'utils/registerValidation';

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

const CustomFormWizard = (props) => {
    const location = useLocation();
    const theme = useTheme();
    const intl = useIntl();
    const { locale } = intl;

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

    const [checkUpload, setCheckUpload] = useState(false);
    const [isLoading, setLoding] = useState(true);
    const [isLoadingData, setLodingData] = useState(true);

    const [captchaImg, setCaptchaImage] = useState("");

    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 email = document.getElementById("email-login")
    const [checkEmail, setCheckEmail] = useState(false)
    const [checkEmailBlur, setCheckEmailBlur] = useState(false)
    const district = document.getElementById("address4-combo")
    const [checkDistrict, setCheckDistrict] = useState(false)
    const [checkDistrictBlur, setCheckDistrictBlur] = useState(false)
    const [districtErrStr, setDistrictErrStr] = useState("")

    const address4ComboList = ComboData.district;
    const address5ComboList = ComboData.country;
    const [showId, setshowId] = useState(false);
    const [showComId, setshowComId] = useState(false);

    const [base64Url, setBase64Url] = useState("")
    const [checkCode, setCheckCode] = useState("")

    useEffect(() => {
        location.state?.responseData ?? window.location.assign("/login");
        if (captchaImg == "")
            onCaptchaChange();
        responseToData();
    }, []);

    const playCaptchaAudio = async () => {
        try {
            const resp = await axios.post(
            `${POST_CAPTCHA_AUDIO}`,
            { base64Url, lang: intl.locale },
            { responseType: "arraybuffer" }
            );

            const blob = new Blob([resp.data], { type: "audio/wav" });
            const url = URL.createObjectURL(blob);

            const audio = new Audio(url);

            await audio.play();

        } catch (error) {

            let message = intl.formatMessage({ id: "captchaAudioError" });

            if (error.response) {
                if (error.response.status === 404) {
                    message = intl.formatMessage({ id: "captchaExpired" });
                } else if (error.response.status === 500) {
                    message = intl.formatMessage({ id: "captchaAudioServerError" });
                }
            } else if (error.request) {
                message = intl.formatMessage({ id: "connectionError" });
            }

            notifyActionError(message);
        }
    };

    const handleClickShowId = () => {
        setshowId(!showId);
    };

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

    const handleClickShowComId = () => {
        setshowComId(!showId);
    };

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

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

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

    /** Synchronous HK district rule — must match enable logic for Continue (async handleCheckDistrict() was always truthy). */
    const isDistrictSelectionValid = () => {
        if (selectedAddress5?.type !== "hongKong") {
            return true;
        }
        return !(selectedAddress4 == null || selectedAddress4 === "");
    };

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

    useEffect(() => {
        handleCheckDistrict();
    }, [selectedAddress4, selectedAddress5]);

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

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


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

        let fullAddress = '';
        if (rd?.postalAddress?.EngPremisesAddress) {
            fullAddress = getAddressEng(rd.postalAddress.EngPremisesAddress);
        } else if (rd?.postalAddress?.ChiPremisesAddress) {
            fullAddress = getAddressChi(rd.postalAddress.ChiPremisesAddress);
        } else if (rd?.residentialAddress?.EngPremisesAddress) {
            fullAddress = getAddressEng(rd.residentialAddress.EngPremisesAddress);
        } else if (rd?.residentialAddress?.ChiPremisesAddress) {
            fullAddress = getAddressChi(rd.residentialAddress.ChiPremisesAddress);
        }

        const { address1, address2, address3 } = splitAddressIntoLines(fullAddress);
        data["address1"] = address1;
        data["address2"] = address2;
        data["address3"] = address3;

        setIAmSmartData(data);

    }


    const getAddressEng = (pAdd) => {
        let unit = (pAdd.Eng3dAddress?.EngUnit?.UnitDescriptor ?? "") + " " + (pAdd.Eng3dAddress?.EngUnit?.UnitNo ?? "");
        let block = (pAdd.EngBlock?.BlockDescriptor ?? "") + " " + (pAdd.EngBlock?.BlockNo ?? "");
        let floor = pAdd.Eng3dAddress?.EngFloor?.FloorNum ? pAdd.Eng3dAddress?.EngFloor?.FloorNum + "/F " : "";
        let street = (pAdd.EngStreet?.EngUnit?.UnitDescriptor ?? "") + " " + (pAdd.Eng3dAddress?.EngUnit?.UnitNo ?? "");
        //let region = pAdd.Region ?? "";
        let buildingName = pAdd.BuildingName ?? "";
        let estate = pAdd.EngEstate?.EstateName ?? "";
        let district = pAdd.EngDistrict["Sub - district"] ?? "";
        return getAddressStr([unit, block, floor, buildingName, estate, street, district]);
    }

    const getAddressChi = (pAdd) => {
        let unit = (pAdd.Chi3dAddress?.ChiUnit?.UnitDescriptor ?? "") + " " + (pAdd.Chi3dAddress?.ChiUnit?.UnitNo ?? "");
        let block = (pAdd.ChiBlock?.BlockDescriptor ?? "") + " " + (pAdd.ChiBlock?.BlockNo ?? "");
        let floor = pAdd.Chi3dAddress?.ChiFloor?.FloorNum ? pAdd.Chi3dAddress?.ChiFloor?.FloorNum + "樓 " : "";
        let street = (pAdd.ChiStreet?.ChiUnit?.UnitDescriptor ?? "") + " " + (pAdd.Chi3dAddress?.ChiUnit?.UnitNo ?? "");
        //let region = pAdd.Region ?? "";
        let buildingName = pAdd.BuildingName ?? "";
        let estate = pAdd.ChiEstate?.EstateName ?? "";
        let district = pAdd.ChiDistrict["Sub - district"] ?? "";
        return getAddressStr([district, street, estate, buildingName, street, floor, block, unit]);
    }

    const getAddressStr = (strs) => {
        let add = ""
        strs.forEach(str => {
            add += str.trim() ? str.trim() + ", " : "";
        });
        add = add.trim();
        if (add?.slice(- 1) == ",") {
            add = add.substring(0, add.length - 1);
        }
        return add;
    }

    /** POST /user/checkE1 — returns true if email is already registered */
    const checkEmailRegistered = async (emailStr) => {
        const em = emailStr?.trim();
        if (!em) return false;
        const response = await axios.post(`${POST_USER_EMAIL}`, { e1: em });
        return Number(response.data[0]) > 0;
    };

    const handleCheckEmail = async () => {
        if (!values?.email) return false;
        try {
            const taken = await checkEmailRegistered(values.email);
            setCheckEmail(taken);
            return taken;
        } catch (error) {
            notifyActionError(intl.formatMessage({ id: 'connectionError' }));
            return false;
        }
    };

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

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

    useEffect(() => {
        if (iAmSmartData) {
            formik.setFieldValue("enName", iAmSmartData.enName ?? "");
            formik.setFieldValue("chName", iAmSmartData.chName ?? "");
            formik.setFieldValue("idNo", iAmSmartData.idNo ?? "");
            formik.setFieldValue("checkDigit", iAmSmartData.checkDigit ?? "");
            formik.setFieldValue("email", iAmSmartData.email ?? "");
            formik.setFieldValue("emailConfirm", iAmSmartData.email ?? "");
            formik.setFieldValue("phone", iAmSmartData.phone ?? "");
            formik.setFieldValue("phoneCountryCode", iAmSmartData.phoneCountryCode ?? "");
            formik.setFieldValue("address1", iAmSmartData.address1 ?? "");
            formik.setFieldValue("address2", iAmSmartData.address2 ?? "");
            formik.setFieldValue("address3", iAmSmartData.address3 ?? "");
            props.setIdNo(iAmSmartData.idNo ?? "");
            setLodingData(false)
        }
    }, [iAmSmartData])

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


    /** All step-0 checks except duplicate-email result from /checkE1 (see checkEmail state). */
    const computeStep0ValidSync = (data) => (
        isRegisterAddressValid(data) &&
        data.email !== "" &&
        data.emailConfirm !== "" &&
        data.email == data.emailConfirm &&
        data.phone !== "" &&
        data.phoneCountryCode !== "" &&
        termsAndConAccept == true &&
        data.captchaField &&
        handleEmail(data.email) &&
        handlePhone(data.phone) &&
        handleCaptcha(data.captchaField) &&
        isDistrictSelectionValid()
    );

    const computeStep0Valid = (data) => computeStep0ValidSync(data) && !checkEmail;

    const checkDataField = (data) => {
        const can = computeStep0Valid(data);
        setisValid(can);
        return can;
    };

    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(() => {
        props.setUpdateValid(isValid)
    }, [isValid])

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

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

    const { handleSubmit } = useForm({})
    const _onSubmit = () => {
        setLoding(true);

        const userAddress = {
            "addressLine1": "",
            "addressLine2": "",
            "addressLine3": "",
            "district": "",
            "country": ""
        };
        userAddress.addressLine1 = values.address1
        userAddress.addressLine2 = values.address2
        userAddress.addressLine3 = values.address3
        userAddress.district = selectedAddress4 == null ? "" : selectedAddress4.type
        userAddress.country = selectedAddress5.type

        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 preferLocale = locale === 'en' ? 'en' : locale === 'zh-HK' ? 'zh_HK' : 'zh-CN'
        const formData = {
            enName: iAmSmartData.enName,
            chName: iAmSmartData.chName,
            emailAddress: values.email,
            idDocType: "HKID",
            identification: iAmSmartData.idNo,
            checkDigit: iAmSmartData.checkDigit,
            tncFlag: tncFlag,
            type: "IND",
            userFaxNo: JSON.stringify(userFaxNo),
            userMobileNumber: JSON.stringify(userMobileNumber),
            userAddress: JSON.stringify(userAddress),
            captcha: base64Url,
            checkCode: checkCode,
            preferLocale: preferLocale
        };

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

    function handlePhone(phone) {
        if (phone.length < 8) {
            return false;
        } else {
            return true;
        }
    }

    function handleCaptcha(captchaField) {
        if (captchaField.length == 5) {
            return true
        } else {
            return false
        }
    }

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

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

    const formik = useFormik({
        initialValues: ({
            email: iAmSmartData.email ?? "",
            emailConfirm: iAmSmartData.email ?? "",
            address1: iAmSmartData.address1 ?? "",
            address2: '',
            address3: '',
            phone: iAmSmartData.phone ?? "",
            phoneCountryCode: iAmSmartData.phoneCountryCode ?? "852",
            submit: null,
            fax: '',
            faxCountryCode: '852',
            captchaField: ''
        }),
        validationSchema: yup.object().shape({
            address1: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
            address2: yup.string().max(40),
            address3: yup.string().max(40),
            email: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))),
            emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({ id: 'validSameEmail' }))),
            phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast2Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))),
            phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast8Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))),
            captchaField: yup.string().max(5, getMaxErrStr(5)).required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))).min(5, displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
        }),
    });

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

    const { values } = formik

    useEffect(() => {
        if (!props.step0GuardRef) return;
        props.step0GuardRef.current = async () => {
            const syncOk = computeStep0ValidSync(values);
            if (!syncOk) {
                setisValid(false);
                if (!isRegisterAddressValid(values)) {
                    if (values.address1 === '') {
                        notifyActionError(intl.formatMessage({ id: 'validateAddressLine1' }));
                    } else if (!isAddressLineWithinLimit(values.address1)) {
                        notifyActionError(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: ADDRESS_LINE_MAX_LENGTH, fieldname: intl.formatMessage({ id: 'addressLine1' }) + ": " }));
                    } else if (!isAddressLineWithinLimit(values.address2)) {
                        notifyActionError(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: ADDRESS_LINE_MAX_LENGTH, fieldname: intl.formatMessage({ id: 'addressLine2' }) + ": " }));
                    } else if (!isAddressLineWithinLimit(values.address3)) {
                        notifyActionError(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: ADDRESS_LINE_MAX_LENGTH, fieldname: intl.formatMessage({ id: 'addressLine3' }) + ": " }));
                    }
                } else if (!isDistrictSelectionValid()) {
                    setDistrictErrStr(getRequiredErrStr("district"));
                    setCheckDistrict(true);
                    notifyActionError(intl.formatMessage({ id: 'require' }, { fieldname: intl.formatMessage({ id: 'district' }) }));
                }
                return false;
            }
            try {
                const taken = await checkEmailRegistered(values.email);
                setCheckEmail(taken);
                if (taken) {
                    setisValid(false);
                    notifyActionError(intl.formatMessage({ id: 'emailUsed' }));
                    return false;
                }
            } catch (error) {
                notifyActionError(intl.formatMessage({ id: 'connectionError' }));
                return false;
            }
            setisValid(true);
            return true;
        };
    }, [values, selectedAddress4, selectedAddress5, termsAndConAccept, checkEmail]);

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

    return (
        isLoadingData ?
            <LoadingComponent /> :
            <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 } }}>
    
                                    <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
                                        <Typography display="inline" variant="h3" component="h1" sx={{ color: '#1A4399' }}>
                                            <FormattedMessage id="becomeNewPersonalUser" />
                                        </Typography>
                                    </div>
    
                                    <Typography mt={0.25} variant="h6" component="span" sx={{ color: '#B00020' }}>
                                        <FormattedMessage id="requireString" />。
                                    </Typography>
                                    <Stack mt={1} direction="row" style={{ alignItems: "center" }}><img src={iAmSmartICon} alt="iAM Smart" width="25" /><Typography mt={0.25} variant="h6" component="span" >: <FormattedMessage id="MSG.providedByIAmSmart" /></Typography></Stack>
    
                                </Stack>
                            </Grid>
                            <Grid item xs={12} md={12}>
                                <Grid container spacing={1}>
                                    <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" component="h2" sx={{ color: 'primary.primary' }}>
                                                <FormattedMessage id="yourPersonalInformation" />
                                            </Typography>
                                        </Stack>
                                    </Grid>
                                    <Grid item xs={12} md={12} >
                                        <Grid container sx={{ mb: 1 }}>
    
                                            <InputLabel htmlFor="idDocType-signup">
                                                <Typography variant="h5" component="span" sx={{ mr: 1 }}>
                                                    <FormattedMessage id="HKIDcard" />: {iAmSmartData.idNo ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}
                                                    {/* {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"} */}
                                                </Typography>
                                                <Stack direction="row">
                                                    <Typography variant="h5" component="span">
                                                        {iAmSmartData?.idNo?.slice(0, 4)}{showId ? iAmSmartData?.idNo?.slice(4) : "****"}{showId ? '(' + iAmSmartData.checkDigit + ')' : null}
                                                    </Typography>
                                                    <IconButton
                                                        role="button"
                                                        tabIndex={0}
                                                        aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                                        onClick={handleClickShowId}
                                                        onKeyDown={(event) => handleActionKeyDown(event, handleClickShowId)}
                                                        onMouseDown={handleMouseDownId}
                                                        edge="end"
                                                        size="medium"
                                                    >
                                                        {showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                                    </IconButton>
                                                </Stack>
                                            </InputLabel>
    
                                        </Grid>
                                    </Grid>
                                    <Grid item xs={12} md={6}>
                                        <Stack spacing={1}>
                                            <InputLabel htmlFor="enName-signup">
                                                <Typography variant="h5" component="span">
                                                    <FormattedMessage id="userEnglishName" />: {iAmSmartData.enName}{iAmSmartData.enName ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}
                                                </Typography>
    
                                            </InputLabel>
                                        </Stack>
                                    </Grid>
                                    <Grid item xs={12} md={6}>
                                        <Stack spacing={1}>
                                            <InputLabel htmlFor="chName-signup">
                                                <Typography variant="h5" component="span">
                                                    {intl.formatMessage({ id: 'userChineseName' })}: {iAmSmartData.chName}{iAmSmartData.chName ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}
                                                </Typography>
                                            </InputLabel>
                                        </Stack>
                                    </Grid>
                                    <Grid item xs={12}>
                                        <Stack spacing={1}>
                                            <InputLabel htmlFor="address1-signup">
                                                <Typography variant="h5" component="span">
                                                    <FormattedMessage id="formAddress" />
                                                    <span style={{ color: '#B00020' }}>*</span>
    
                                                </Typography>
                                            </InputLabel>
    
                                            <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                                <OutlinedInput
                                                    fullWidth
                                                    autoFocus
                                                    error={Boolean(formik.touched.address1 && formik.errors.address1)}
                                                    id="address1-signup"
                                                    value={formik.values.address1}
                                                    name="address1"
                                                    onChange={formik.handleChange}
                                                    placeholder={intl.formatMessage({ id: 'addressLine1' })}
                                                    onBlur={formik.handleBlur}
                                                    inputProps={{
                                                        maxLength: ADDRESS_LINE_MAX_LENGTH,
                                                        onKeyDown: (e) => {
                                                            if (e.key === 'Enter') {
                                                                e.preventDefault();
                                                            }
                                                        },
                                                    }}
                                                />
                                                {iAmSmartData.address1 != "" && iAmSmartData.address1 == formik.values.address1 ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                            </Stack>
    
                                            <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                                <OutlinedInput
                                                    fullWidth
                                                    error={Boolean(formik.touched.address2 && formik.errors.address2)}
                                                    id="address2-signup"
                                                    value={formik.values.address2}
                                                    name="address2"
                                                    onBlur={formik.handleBlur}
                                                    onChange={formik.handleChange}
                                                    placeholder={intl.formatMessage({ id: 'addressLine2' })}
                                                    inputProps={{
                                                        maxLength: ADDRESS_LINE_MAX_LENGTH,
                                                        onKeyDown: (e) => {
                                                            if (e.key === 'Enter') {
                                                                e.preventDefault();
                                                            }
                                                        },
                                                    }}
                                                />
                                                {iAmSmartData.address2 != "" && iAmSmartData.address2 == formik.values.address2 ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                            </Stack>
    
    
                                            <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                                <OutlinedInput
                                                    fullWidth
                                                    error={Boolean(formik.touched.address3 && formik.errors.address3)}
                                                    id="address3-signup"
                                                    value={formik.values.address3}
                                                    name="address3"
                                                    onBlur={formik.handleBlur}
                                                    onChange={formik.handleChange}
                                                    placeholder={intl.formatMessage({ id: 'addressLine3' })}
                                                    inputProps={{
                                                        maxLength: ADDRESS_LINE_MAX_LENGTH,
                                                        onKeyDown: (e) => {
                                                            if (e.key === 'Enter') {
                                                                e.preventDefault();
                                                            }
                                                        },
                                                    }}
                                                />
                                                {iAmSmartData.address3 != "" && iAmSmartData.address3 == formik.values.address3 ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                            </Stack>
    
    
                                            <Autocomplete
                                                disablePortal
                                                id="address4-combo"
                                                value={selectedAddress4}
                                                options={address4ComboList}
                                                disabled={checkCountry}
                                                // error={Boolean(districtErrStr != "")}
                                                onBlur={formik.handleBlur}
                                                getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
                                                onChange={(event, newValue) => {
                                                    setSelectedAddress4(newValue);
                                                }}
                                                sx={{
                                                    '& .MuiInputBase-root': { alignItems: 'center' },
                                                    '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },
                                                    '& .MuiOutlinedInput-root': { height: 40 }
                                                }}
                                            renderInput={(params) => <TextField error={checkDistrict} {...params} placeholder={intl.formatMessage({ id: 'region' })}
                                                />}
                                                clearText={intl.formatMessage({ id: "muiClear" })}
                                                closeText={intl.formatMessage({ id: "muiClose" })}
                                                openText={intl.formatMessage({ id: "muiOpen" })}
                                                noOptionsText={intl.formatMessage({ id: "muiNoOptions" })}
                                            />
                                            <Autocomplete
                                                disablePortal
                                                id="address5-combo"
                                                value={selectedAddress5}
                                                options={address5ComboList}
                                                disabled= {true}
                                                getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
                                                onChange={(event, newValue) => {
                                                    if (newValue !== null) {
                                                        setSelectedAddress5(newValue);
                                                        if (newValue.type === 'hongKong') {
                                                            setCheckCountry(false)
                                                        } else {
                                                            setSelectedAddress4("");
                                                            setCheckCountry(true)
                                                        }
                                                    } else {
                                                        setSelectedAddress4("");
                                                        setCheckCountry(true)
                                                    }
                                                }}
                                                sx={{
                                                    '& .MuiInputBase-root': { alignItems: 'center' },
                                                    '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },
                                                    '& .MuiOutlinedInput-root': { height: 40 }
                                                }}
                                                renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({ id: 'regionOrCountry' })} />}
                                                clearText={intl.formatMessage({ id: "muiClear" })}
                                                closeText={intl.formatMessage({ id: "muiClose" })}
                                                openText={intl.formatMessage({ id: "muiOpen" })}
                                                noOptionsText={intl.formatMessage({ id: "muiNoOptions" })}
                                            />
                                            {formik.touched.address1 && formik.errors.address1 && (
                                                <FormHelperText error id="helper-text-address1-signup">
                                                    {formik.errors.address1}
                                                </FormHelperText>
                                            )}
                                            {formik.touched.address2 && formik.errors.address2 && (
                                                <FormHelperText error id="helper-text-address2-signup">
                                                    {formik.errors.address2}
                                                </FormHelperText>
                                            )}
                                            {formik.touched.address3 && formik.errors.address3 && (
                                                <FormHelperText error id="helper-text-address3-signup">
                                                    {formik.errors.address3}
                                                </FormHelperText>
                                            )}
                                            {checkDistrict && (
                                                <FormHelperText error >
                                                    {districtErrStr}
                                                </FormHelperText>
                                            )}
                                        </Stack>
                                    </Grid>
                                    <Grid item xs={12} mt={1} mb={1}>
                                        <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                            <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                                <FormattedMessage id="yourContact" />
                                            </Typography>
                                        </Stack>
                                    </Grid>
                                    <Grid item xs={12} md={12}>
                                        <Grid container>
                                            <Grid item xs={12} md={6}>
                                                <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                    <InputLabel htmlFor="email-login">
                                                        <Typography variant="h5" component="span">
                                                            <FormattedMessage id="userContactEmail" />
                                                            <span style={{ color: '#B00020' }}>*</span>
    
                                                        </Typography>
                                                    </InputLabel>
    
                                                    <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                                        <OutlinedInput
                                                            fullWidth
                                                            error={Boolean((formik.touched.email && formik.errors.email) || checkEmail)}
                                                            id="email-login"
                                                            type="email"
                                                            value={formik.values.email.trim()}
                                                            name="email"
                                                            onChange={formik.handleChange}
                                                            placeholder={intl.formatMessage({ id: 'userContactEmail' })}
                                                            onBlur={formik.handleBlur}
                                                            inputProps={{
                                                                "aria-describedby": "helper-text-email-signup",
                                                                "aria-label": intl.formatMessage({ id: "userContactEmail" }),
                                                                onKeyDown: (e) => {
                                                                    if (e.key === 'Enter') {
                                                                        e.preventDefault();
                                                                    }
                                                                },
                                                            }}
                                                        />
                                                        {iAmSmartData.email && iAmSmartData.email == formik.values.email ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                                    </Stack>
    
                                                    {formik.touched.email && formik.errors.email && (
                                                        <FormHelperText error id="helper-text-email-signup">
                                                            {formik.errors.email}
                                                        </FormHelperText>
                                                    )}
                                                    {checkEmail && (
                                                        <FormHelperText error id="helper-text-email-signup">
                                                            <FormattedMessage id="emailUsed" />
                                                        </FormHelperText>
                                                    )}
                                                </Stack>
                                            </Grid>
                                            <Grid item xs={12} md={6}>
                                                <Stack spacing={1} >
                                                    <InputLabel htmlFor="emailConfirm-login">
                                                        <Typography variant="h5" component="span">
                                                            <FormattedMessage id="confirmEmail" />
                                                            <span style={{ color: '#B00020' }}>*</span>
                                                        </Typography>
                                                    </InputLabel>
                                                    <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                                        <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={intl.formatMessage({ id: 'confirmEmail' })}
                                                            onBlur={formik.handleBlur}
                                                            onCut={handleCCPChange}
                                                            onCopy={handleCCPChange}
                                                            onPaste={handleCCPChange}
                                                            inputProps={{
                                                                "aria-label": intl.formatMessage({ id: "confirmEmail" }),
                                                                "aria-describedby": "helper-text-emailConfirm-signup",
                                                                onKeyDown: (e) => {
                                                                    if (e.key === 'Enter') {
                                                                        e.preventDefault();
                                                                    }
                                                                },
                                                            }}
                                                        />
                                                        {iAmSmartData.email && iAmSmartData.email == formik.values.emailConfirm ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                                    </Stack>
    
                                                    {formik.touched.emailConfirm && formik.errors.emailConfirm && (
                                                        <FormHelperText error id="helper-text-emailConfirm-signup">
                                                            {formik.errors.emailConfirm}
                                                        </FormHelperText>
                                                    )}
                                                </Stack>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                    <Grid item xs={12} md={12}>
                                        <Grid container>
                                            <Grid item xs={12} md={6}>
                                                <Grid container>
                                                    <Grid item xs={12} md={12}>
                                                        <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                            <InputLabel htmlFor="phone-signup">
                                                                <Typography variant="h5" component="span">
                                                                    <FormattedMessage id="userContactNumber" />
                                                                    <span style={{ color: '#B00020' }}>*</span>
                                                                    
                                                                </Typography>
                                                            </InputLabel>
                                                            <Stack direction="row" ustifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                                                <OutlinedInput
                                                                    id="phoneCountryCode-login"
                                                                    type="phoneCountryCode"
                                                                    value={formik.values.phoneCountryCode.trim()}
                                                                    name="phoneCountryCode"
                                                                    // onBlur={formik.handleBlur}
                                                                    // onChange={formik.handleChange}
                                                                    onChange={(event) => {
                                                                        const value = event.target.value;
                                                                        if (value.match(/[^0-9]/)) {
                                                                            return event.preventDefault();
                                                                        }
                                                                        formik.setFieldValue("phoneCountryCode", value);
                                                                    }}
                                                                    placeholder={intl.formatMessage({ id: 'dialingCode' })}
                                                                    error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                    onBlur={formik.handleBlur}
                                                                    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={intl.formatMessage({ id: 'userContactNumber' })}
                                                                    error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                    onBlur={formik.handleBlur}
                                                                    inputProps={{
                                                                        "aria-label": intl.formatMessage({ id: "userContactNumber" }),
                                                                        "aria-describedby": 'helper-text-phone-signup',
                                                                        maxLength: 11,
                                                                        onKeyDown: (e) => {
                                                                            if (e.key === 'Enter') {
                                                                                e.preventDefault();
                                                                            }
                                                                        },
                                                                    }}
                                                                    fullWidth
                                                                />
                                                                {iAmSmartData.phone && iAmSmartData.phone == formik.values.phone && iAmSmartData.phoneCountryCode == formik.values.phoneCountryCode ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                                            </Stack>
                                                            {formik.touched.phone && formik.errors.phone && (
                                                                <FormHelperText error id="helper-text-phone-signup">
                                                                    {formik.errors.phone}
                                                                </FormHelperText>
                                                            )}
                                                        </Stack>
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                            <Grid item xs={12} md={6}>
                                                <Grid container>
                                                    <Grid item xs={12} md={12}>
                                                        <Stack spacing={1} direction="column">
                                                            <InputLabel htmlFor="fax-signup">
                                                                <Typography variant="h5" component="span">
                                                                    <FormattedMessage id="userFaxNumber" />
                                                                </Typography>
                                                            </InputLabel>
                                                            <Stack direction="row" ustifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                                                <OutlinedInput
                                                                    error={Boolean(formik.touched.fax && formik.errors.fax)}
                                                                    id="faxCountryCode-login"
                                                                    type="faxCountryCode"
                                                                    value={formik.values.faxCountryCode.trim()}
                                                                    name="faxCountryCode"
                                                                    // onChange={formik.handleChange}
                                                                    onChange={(event) => {
                                                                        const value = event.target.value;
                                                                        if (value.match(/[^0-9]/)) {
                                                                            return event.preventDefault();
                                                                        }
                                                                        formik.setFieldValue("faxCountryCode", value);
                                                                    }}
                                                                    placeholder={intl.formatMessage({ id: 'dialingCode' })}
                                                                    onBlur={formik.handleBlur}
                                                                    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={intl.formatMessage({ id: 'userFaxNumber' })}
                                                                    inputProps={{
                                                                        maxLength: 8,
                                                                        onKeyDown: (e) => {
                                                                            if (e.key === 'Enter') {
                                                                                e.preventDefault();
                                                                            }
                                                                        },
                                                                    }}
                                                                    sx={{ width: '75%' }}
                                                                />
                                                            </Stack>
                                                        </Stack>
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container>
                                        <Grid item xs={12} md={12}>
                                            <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                                <FormattedMessage id="termsAndCondition" />
                                                <span style={{ color: '#B00020' }}>*</span>
                                            </Typography>
                                        </Grid>
                                        <Grid item xs={12} md={12}>
                                            <Grid container>
                                                <Grid item xs={12} md={12}>
                                                    <Typography sx={{ textAlign: "left", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0c489e" }}>
    
                                                        <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "termsAndCon" }) }} />
                                                    </Typography>
                                                </Grid>
                                            </Grid>
                                            <Grid item xs={12} s={12} md={12} lg={12}>
                                                <Grid container>
                                                    <Grid item xs={6} s={6} md={11} lg={11}>
                                                        <Grid container>
                                                            <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
                                                                <Checkbox
                                                                    checked={termsAndConAccept}
                                                                    onChange={handleCheckBoxChange}
                                                                    name="termsAndConAccept"
                                                                    color="primary"
                                                                    size="small"
                                                                />
                                                                <Typography variant="h5" component="span">
                                                                    <FormattedMessage id="iConfirm" />
                                                                </Typography>
                                                            </Grid>
                                                        </Grid>
                                                    </Grid>
                                                    <Grid item xs={6} s={6} md={3} lg={3}>
                                                        <Grid container style={{ display: "none" }}>
                                                            <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
                                                                <Checkbox
                                                                    checked={termsAndConNotAccept}
                                                                    onChange={handleCheckBoxChange}
                                                                    name="termsAndConNotAccept"
                                                                    color="primary"
                                                                    size="small"
                                                                    
                                                                />
                                                                <Typography variant="h5" component="span">
                                                                    <FormattedMessage id="rejectTerms" />
                                                                </Typography>
                                                            </Grid>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} lg={12}>
                                    <Grid container>
                                        <Stack direction="column">
                                            <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                                <FormattedMessage id="verify" />
                                                <span style={{ color: '#B00020' }}>*</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
                                                        role="button"
                                                        tabIndex={0}
                                                        aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })}
                                                        size="large"
                                                        onClick={() => { onCaptchaChange() }}
                                                        onKeyDown={(event) => handleActionKeyDown(event, () => onCaptchaChange())}
                                                    >
                                                        <LoopIcon fontSize="inherit" />
                                                    </IconButton>
                                                </Grid>
                                                <Grid item xs={6} lg={6}>
                                                    <OutlinedInput
                                                        fullWidth
                                                        id="captchaField"
                                                        type="text"
                                                        value={formik.values.captchaField.trim()}
                                                        onBlur={formik.handleBlur}
                                                        error={Boolean(formik.touched.captchaField && formik.errors.captchaField)}
                                                        name="captchaField"
                                                        onChange={(event) => {
                                                            const value = event.target.value;
                                                            props.setCheckCode(event.target.value);
                                                            setCheckCode(event.target.value);
                                                            formik.setFieldValue("captchaField", value);
                                                        }}
                                                        sx={{ width: '75%' }}
                                                    />
                                                </Grid>
                                            </Stack>
                                            {formik.touched.captchaField && formik.errors.captchaField && (
                                                <FormHelperText error id="helper-text-captcha-signup">
                                                    {formik.errors.captchaField}
                                                </FormHelperText>
                                            )}
                                            <Stack spacing={1} direction="row" sx={{ mt: 0.25 }}>
                                                <Button
                                                    variant="contained"
                                                    onClick={playCaptchaAudio}
                                                    aria-label={intl.formatMessage({ id: "captchaPlayAudio" })}
                                                    sx={{
                                                        backgroundColor: '#0c489e',
                                                        color: '#FFFFFF',
                                                        '&:hover': { backgroundColor: '#1565c0' },
                                                    }}
                                                >
                                                    <FormattedMessage id="captchaPlayAudio" />
                                                </Button>
                                            </Stack>
                                        </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" component="h1" sx={{ color: '#1A4399' }}>
                                            <FormattedMessage id="becomeNewPersonalUser" />
                                        </Typography>
                                    </div>
                                </Stack>
                            </Grid>
                            <Grid item xs={12} md={12}>
                                <Grid container spacing={2}>
                                    <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" component="h2" sx={{ color: 'primary.primary' }}>
                                                <FormattedMessage id="yourPersonalInformation" />
                                            </Typography>
                                            {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                            Already have an account?
                                        </Typography> */}
                                        </Stack>
                                    </Grid>
                                    <Grid item xs={12} md={12} >
                                        <Stack direction="row">
                                            <Typography variant="h5" component="h2" color={theme.palette.grey[600]} sx={{ mr: 1 }}>
                                                <FormattedMessage id="userIdDoc" />
                                            </Typography>
                                            <Typography variant="h5" component="span" name="preview-idDocType-1">
                                                {formik?.values?.idNo?.slice(0, 4)}
                                                {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
                                            </Typography>
                                            <Typography variant="h5" component="span" name="preview-idDocType-2">
                                                {showComId ? formik?.values?.idNo?.slice(4) : "****"}{showComId ? '(' + formik.values.checkDigit + ')' : null}
                                                {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
                                            </Typography>
                                            <IconButton
                                                role="button"
                                                tabIndex={0}
                                                aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                                onClick={handleClickShowComId}
                                                onKeyDown={(event) => handleActionKeyDown(event, handleClickShowComId)}
                                                onMouseDown={handleMouseDownComId}
                                                edge="end"
                                                size="medium"
                                            >
                                                {showComId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                            </IconButton>
                                        </Stack>
                                    </Grid>
                                    <Grid item xs={12} md={6}>
                                        <Stack spacing={1} direction="row">
                                            <Typography variant="h5" component="span" color={theme.palette.grey[600]}>
                                                <FormattedMessage id="userEnglishName" />:
                                            </Typography>
                                            <Typography variant="h5" component="span" id="preview-enName-signup">
                                                {formik.values.enName}
                                            </Typography>
                                            {iAmSmartData.enName ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}
                                        </Stack>
                                    </Grid>
                                    <Grid item xs={12} md={6}>
                                        <Stack spacing={1} direction="row">
                                            <Typography variant="h5" component="span" color={theme.palette.grey[600]}>
                                                <FormattedMessage id="userChineseName" />:
                                            </Typography>
                                            <Typography variant="h5" component="span" id="preview-chName-signup">
                                                {formik.values.chName}
                                            </Typography>
                                        </Stack>
                                    </Grid>
                                    <Grid item xs={12}>
                                        <Stack spacing={1} direction="column">
                                            <Typography variant="h5" component="span" color={theme.palette.grey[600]}>
                                                <FormattedMessage id="formAddress" />:
                                            </Typography>
                                            <Stack spacing={1} direction="column">
                                                <Typography variant="h5" component="span" id="preview-address1-signup">
                                                    {formik.values.address1}
                                                </Typography>
                                                {formik.values.address2 != null ?
                                                    <Typography variant="h5" component="span" id="preview-address2-signup">
                                                        {formik.values.address2}
                                                    </Typography>
                                                    : null}
                                                {formik.values.address3 != null ?
                                                    <Typography variant="h5" component="span" id="preview-address3-signup">
                                                        {formik.values.address3}
                                                    </Typography>
                                                    : null}
                                                {selectedAddress5.type === "hongKong" ?
                                                    <Stack direction="column">
                                                        {/* <Typography variant="h5" component="span" color={theme.palette.grey[600]} id="preview-address4-signup">
                                                            <FormattedMessage id="region" />:
                                                        </Typography> */}
                                                        <Typography variant="h5" component="span">
                                                            {!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })}
                                                        </Typography>
                                                    </Stack>
                                                    : null}
                                                <Stack direction="column">
                                                    {/* <Typography variant="h5" component="span" color={theme.palette.grey[600]} id="preview-address5-signup">
                                                        <FormattedMessage id="regionOrCountry" />:
                                                    </Typography> */}
                                                    <Typography variant="h5" component="span">
                                                        {intl.formatMessage({ id: selectedAddress5.type })}
                                                    </Typography>
                                                </Stack>
                                            </Stack>
                                        </Stack>
                                    </Grid>
                                    <Grid item xs={12} mt={1} mb={1}>
                                        <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                            <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                                <FormattedMessage id="yourContact" />
                                            </Typography>
                                        </Stack>
                                    </Grid>
                                    <Grid item xs={12} md={12}>
                                        <Stack spacing={1} direction="row">
                                            <Typography variant="h5" component="span" color={theme.palette.grey[600]}>
                                                <FormattedMessage id="userContactEmail" />:
                                            </Typography>
                                            <Typography variant="h5" component="span" id="preview-email-signup">
                                                {formik.values.email}
                                            </Typography>
                                        </Stack>
                                    </Grid>
                                    <Grid item xs={12} md={6}>
                                        <Stack spacing={1} direction="row">
                                            <Typography variant="h5" component="span" color={theme.palette.grey[600]}>
                                                <FormattedMessage id="userContactNumber" />:
                                            </Typography>
                                            <Typography variant="h5" component="span" id="preview-phone-signup">
                                                +{formik.values.phoneCountryCode} {formik.values.phone}
                                            </Typography>
                                        </Stack>
                                    </Grid>
                                    {formik.values.faxCountryCode != "" && formik.values.fax != "" ?
                                        <Grid item xs={12} md={6}>
                                            <Stack spacing={1} direction="row">
                                                <Typography variant="h5" component="span" color={theme.palette.grey[600]}>
                                                    <FormattedMessage id="userFaxNumber" />:
                                                </Typography>
                                                <Typography variant="h5" component="span" id="preview-fax-signup">
                                                    +{formik.values.faxCountryCode} {formik.values.fax}
                                                </Typography>
                                            </Stack>
                                        </Grid>
                                        : null}
                                </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" component="span">
                                                <FormattedMessage id="registerSubmitted" />
                                            </Typography>
                                            <Typography display="inline" variant="h4" component="span">
                                                <FormattedMessage id="emailSent" />
                                            </Typography>
                                            <Button variant="outlined" component={Link} to="/login" ><Typography variant="h5" component="span">
                                                <FormattedMessage id="backToLogin" />
                                            </Typography></Button>
                                        </Stack>
                                        :
                                        // ERROR page
                                        <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                            {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                                            <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
                                            <Typography display="inline" variant="h4" component="span">
                                                <FormattedMessage id="registerFail" />
                                            </Typography>
                                            <Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="h5" component="span">
                                                <FormattedMessage id="backToLogin" />
                                            </Typography></Button>
                                        </Stack>
                                    }
                                </Grid>
                            }
                        </Grid>
                    </FormGroup>
                </form>
            </FormikProvider>
    );
}

export default CustomFormWizard;