alex
/
PNSPS-frontend-MaterialUI
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
1214 提交
5 分支
19 MiB
 
 
目录树: 0ee39a7fde
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '0ee39a7fde'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/authentication/auth-forms/IAmSmartFormWizard.js

1183 行
72 KiB
原始文件 Blame 文件历史 

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

  2. 

  3. // material-ui

  4. import {

  5.     Button,

  6.     FormHelperText,

  7.     Grid, IconButton,

  8.     InputLabel, OutlinedInput,

  9.     Stack,

  10.     Typography,

  11.     FormGroup,

  12.     TextField,

  13.     Checkbox

  14.     // MenuItem

  15. } from '@mui/material';

  16. import { useForm, } from 'react-hook-form'

  17. import Autocomplete from "@mui/material/Autocomplete";

  18. 

  19. // third party

  20. import { useFormik, FormikProvider } from 'formik';

  21. import * as yup from 'yup';

  22. 

  23. import axios from "axios";

  24. import { POST_IAMSMART_USER_REGISTER, POST_CAPTCHA, POST_USER_EMAIL } from "utils/ApiPathConst";

  25. 

  26. import * as ComboData from "utils/ComboData";

  27. 

  28. import Loadable from 'components/Loadable';

  29. import { lazy } from 'react';

  30. const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));

  31. 

  32. import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';

  33. import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';

  34. import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';

  35. import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';

  36. 

  37. import { Link } from 'react-router-dom';

  38. import * as HttpUtils from "../../../utils/HttpUtils";

  39. import LoopIcon from '@mui/icons-material/Loop';

  40. import { useTheme } from '@mui/material/styles';

  41. import { useLocation } from "react-router-dom";

  42. import { FormattedMessage, useIntl } from "react-intl";

  43. 

  44. // ============================|| FIREBASE - REGISTER ||============================ //

  45. 

  46. const CustomFormWizard = (props) => {

  47.     const location = useLocation();

  48.     const theme = useTheme();

  49.     const intl = useIntl();

  50.     const { locale } = intl;

  51. 

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

  53. 

  54.     const [checkUpload, setCheckUpload] = useState(false);

  55.     const [isLoading, setLoding] = useState(true);

  56. 

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

  58. 

  59.     const [selectedAddress4, setSelectedAddress4] = useState(null);

  60.     const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]);

  61.     const [termsAndConAccept, setTermsAndConAccept] = useState(false);

  62.     const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);

  63.     const [isValid, setisValid] = useState(false);

  64.     const [checkCountry, setCheckCountry] = useState(false);

  65.     const email = document.getElementById("email-login")

  66.     const [checkEmail, setCheckEmail] = useState(false)

  67.     const [checkEmailBlur, setCheckEmailBlur] = useState(false)

  68.     const [districtErrStr, setDistrictErrStr] = useState("")

  69. 

  70.     const address4ComboList = ComboData.district;

  71.     const address5ComboList = ComboData.country;

  72.     const [showId, setshowId] = useState(false);

  73.     const [showComId, setshowComId] = useState(false);

  74. 

  75.     const [base64Url, setBase64Url] = useState("")

  76.     const [checkCode, setCheckCode] = useState("")

  77. 

  78.     useEffect(() => {

  79.         location.state?.responseData ?? window.location.assign("/login");

  80.         if (captchaImg == "")

  81.             onCaptchaChange();

  82.         responseToData();

  83.     }, []);

  84. 

  85.     const handleClickShowId = () => {

  86.         setshowId(!showId);

  87.     };

  88. 

  89.     const handleMouseDownId = (event) => {

  90.         event.preventDefault();

  91.     };

  92. 

  93.     const handleClickShowComId = () => {

  94.         setshowComId(!showId);

  95.     };

  96. 

  97.     const handleMouseDownComId = (event) => {

  98.         event.preventDefault();

  99.     };

  100. 

  101.     useEffect(() => {

  102.         setDistrictErrStr("");

  103.         if (selectedAddress5?.type === "hongKong") {

  104.             if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {})

  105.                 setDistrictErrStr(getRequiredErrStr("district"))

  106.         }

  107.     }, [selectedAddress4, selectedAddress5])

  108. 

  109.     function getRequiredErrStr(fieldname) {

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

  111.     }

  112. 

  113.     function getMaxErrStr(num, fieldname) {

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

  115.     }

  116. 

  117. 

  118.     const responseToData = () => {

  119.         //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\":\"測試商一\"}}");

  120.         let rd = JSON.parse(location.state?.responseData.data);

  121.         let data = {

  122.             "enName": rd?.enName?.UnstructuredName ?? "",

  123.             "chName": rd?.chName?.ChineseName ?? "",

  124.             "idNo": rd?.idNo?.Identification ?? "",

  125.             "checkDigit": rd?.idNo?.CheckDigit ?? "",

  126.             "email": rd?.emailAddress ?? "",

  127.             "phone": rd?.mobileNumber?.SubscriberNumber ?? "",

  128.             "phoneCountryCode": rd?.mobileNumber?.CountryCode ?? "",

  129.         };

  130. 

  131.         if (rd?.postalAddress) {

  132.             if (rd?.postalAddress?.EngPremisesAddress) {

  133.                 data["address1"] = getAddressEng(rd?.postalAddress?.EngPremisesAddress);

  134.             } else if (rd.postalAddress.ChiPremisesAddress) {

  135.                 data["address1"] = getAddressChi(rd?.postalAddress?.ChiPremisesAddress);

  136.             }

  137.         } else if (rd?.residentialAddress) {

  138.             if (rd?.residentialAddress?.EngPremisesAddress) {

  139.                 data["address1"] = getAddressEng(rd?.residentialAddress?.EngPremisesAddress);

  140.             } else if (rd?.residentialAddress?.ChiPremisesAddress) {

  141.                 data["address1"] = getAddressChi(rd?.residentialAddress?.ChiPremisesAddress);

  142.             }

  143.         }

  144. 

  145.         setIAmSmartData(data);

  146. 

  147.     }

  148. 

  149. 

  150.     const getAddressEng = (pAdd) => {

  151.         let unit = (pAdd.Eng3dAddress?.EngUnit?.UnitDescriptor ?? "") + " " + (pAdd.Eng3dAddress?.EngUnit?.UnitNo ?? "");

  152.         let block = (pAdd.EngBlock?.BlockDescriptor ?? "") + " " + (pAdd.EngBlock?.BlockNo ?? "");

  153.         let floor = pAdd.Eng3dAddress?.EngFloor?.FloorNum ? pAdd.Eng3dAddress?.EngFloor?.FloorNum + "/F " : "";

  154.         let street = (pAdd.EngStreet?.EngUnit?.UnitDescriptor ?? "") + " " + (pAdd.Eng3dAddress?.EngUnit?.UnitNo ?? "");

  155.         //let region = pAdd.Region ?? "";

  156.         let buildingName = pAdd.BuildingName ?? "";

  157.         let estate = pAdd.EngEstate?.EstateName ?? "";

  158.         let district = pAdd.EngDistrict["Sub - district"] ?? "";

  159.         return getAddressStr([unit, block, floor, buildingName, estate, street, district]);

  160.     }

  161. 

  162.     const getAddressChi = (pAdd) => {

  163.         let unit = (pAdd.Chi3dAddress?.ChiUnit?.UnitDescriptor ?? "") + " " + (pAdd.Chi3dAddress?.ChiUnit?.UnitNo ?? "");

  164.         let block = (pAdd.ChiBlock?.BlockDescriptor ?? "") + " " + (pAdd.ChiBlock?.BlockNo ?? "");

  165.         let floor = pAdd.Chi3dAddress?.ChiFloor?.FloorNum ? pAdd.Chi3dAddress?.ChiFloor?.FloorNum + "樓 " : "";

  166.         let street = (pAdd.ChiStreet?.ChiUnit?.UnitDescriptor ?? "") + " " + (pAdd.Chi3dAddress?.ChiUnit?.UnitNo ?? "");

  167.         //let region = pAdd.Region ?? "";

  168.         let buildingName = pAdd.BuildingName ?? "";

  169.         let estate = pAdd.ChiEstate?.EstateName ?? "";

  170.         let district = pAdd.ChiDistrict["Sub - district"] ?? "";

  171.         return getAddressStr([district, street, estate, buildingName, street, floor, block, unit]);

  172.     }

  173. 

  174.     const getAddressStr = (strs) => {

  175.         let add = ""

  176.         strs.forEach(str => {

  177.             add += str.trim() ? str.trim() + ", " : "";

  178.         });

  179.         add = add.trim();

  180.         if (add?.slice(- 1) == ",") {

  181.             add = add.substring(0, add.length - 1);

  182.         }

  183.         return add;

  184.     }

  185. 

  186.     const handleCheckEmail = async () => {

  187.         if (values?.email) {

  188.             const response = await axios.post(`${POST_USER_EMAIL}`, {

  189.                 e1: values.email,

  190.             })

  191.             setCheckEmail((Number(response.data[0]) === 1))

  192.             return Number(response.data[0]) === 1

  193.         }

  194.     }

  195. 

  196.     useEffect(() => {

  197.         if (email) {

  198.             email.addEventListener("blur", function () {

  199.                 setCheckEmailBlur(true)

  200.             })

  201.         }

  202.     }, [email])

  203. 

  204.     useEffect(() => {

  205.         if (checkEmailBlur) {

  206.             handleCheckEmail()

  207.             setCheckEmailBlur(false)

  208.         }

  209.     }, [checkEmailBlur])

  210. 

  211.     useEffect(() => {

  212.         if (iAmSmartData) {

  213.             formik.setFieldValue("enName", iAmSmartData.enName ?? "");

  214.             formik.setFieldValue("chName", iAmSmartData.chName ?? "");

  215.             formik.setFieldValue("idNo", iAmSmartData.idNo ?? "");

  216.             formik.setFieldValue("checkDigit", iAmSmartData.checkDigit ?? "");

  217.             formik.setFieldValue("email", iAmSmartData.email ?? "");

  218.             formik.setFieldValue("emailConfirm", iAmSmartData.email ?? "");

  219.             formik.setFieldValue("phone", iAmSmartData.phone ?? "");

  220.             formik.setFieldValue("phoneCountryCode", iAmSmartData.phoneCountryCode ?? "");

  221.             formik.setFieldValue("address1", iAmSmartData.address1 ?? "");

  222.             props.setIdNo(iAmSmartData.idNo ?? "");

  223.         }

  224.     }, [iAmSmartData])

  225. 

  226.     const onCaptchaChange = () => {

  227.         HttpUtils.post({

  228.             url: POST_CAPTCHA,

  229.             params: { width: 130, height: 40, captcha: captchaImg },

  230.             onSuccess: (responseData) => {

  231.                 props.setBase64Url(responseData.base64Url)

  232.                 setBase64Url(responseData.base64Url)

  233.                 localStorage.setItem("base64Url", responseData.base64Url);

  234.                 setCaptchaImage(localStorage.getItem('base64Url'));

  235.             }

  236.         });

  237.     }

  238. 

  239. 

  240.     const checkDataField = (data) => {

  241.         if (data.address1 !== "" &&

  242.             data.email !== "" &&

  243.             data.emailConfirm !== "" &&

  244.             data.email == data.emailConfirm &&

  245.             data.phone !== "" &&

  246.             data.phoneCountryCode !== "" &&

  247.             termsAndConAccept == true &&

  248.             data.captchaField &&

  249.             handleEmail(data.email) &&

  250.             handlePhone(data.phone) &&

  251.             handleCaptcha(data.captchaField) &&

  252.             !checkEmail

  253.         ) {

  254.             setisValid(true)

  255.             return isValid

  256.         } else {

  257.             setisValid(false)

  258.             return isValid

  259.         }

  260.     };

  261. 

  262.     const handleCheckBoxChange = (event) => {

  263.         if (event.target.name == 'termsAndConAccept') {

  264.             setTermsAndConAccept(event.target.checked)

  265.             setTermsAndConNotAccept(!event.target.checked)

  266.         }

  267.         if (event.target.name == 'termsAndConNotAccept') {

  268.             setTermsAndConNotAccept(event.target.checked)

  269.             setTermsAndConAccept(!event.target.checked)

  270.         }

  271.     };

  272. 

  273.     useEffect(() => {

  274.         props.setUpdateValid(isValid)

  275.     }, [isValid])

  276. 

  277.     useEffect(() => {

  278.         checkDataField(values)

  279.     }, [

  280.         selectedAddress4, selectedAddress5,

  281.         termsAndConAccept, termsAndConNotAccept])

  282. 

  283.     useEffect(() => {

  284.         props.step == 2 ? _onSubmit() : null;

  285.         if (captchaImg == "")

  286.             onCaptchaChange();

  287.         checkDataField(values)

  288.     }, [props.step])

  289. 

  290.     const { handleSubmit } = useForm({})

  291.     const _onSubmit = () => {

  292.         setLoding(true);

  293. 

  294.         const userAddress = {

  295.             "addressLine1": "",

  296.             "addressLine2": "",

  297.             "addressLine3": "",

  298.             "district": "",

  299.             "country": ""

  300.         };

  301.         userAddress.addressLine1 = values.address1

  302.         userAddress.addressLine2 = values.address2

  303.         userAddress.addressLine3 = values.address3

  304.         userAddress.district = selectedAddress4 == null ? "" : selectedAddress4.type

  305.         userAddress.country = selectedAddress5.type

  306. 

  307.         const userFaxNo = {

  308.             "countryCode": values.faxCountryCode,

  309.             "faxNumber": values.fax,

  310.         };

  311.         const userMobileNumber = {

  312.             "countryCode": values.phoneCountryCode,

  313.             "phoneNumber": values.phone,

  314.         };

  315.         let tncFlag = false;

  316.         if (termsAndConAccept) {

  317.             tncFlag = true

  318.         }

  319.         if (termsAndConNotAccept) {

  320.             tncFlag = false

  321.         }

  322. 

  323.         const preferLocale = locale === 'en' ? 'en' : locale === 'zh-HK' ? 'zh_HK' : 'zh-CN'

  324.         const formData = {

  325.             enName: iAmSmartData.enName,

  326.             chName: iAmSmartData.chName,

  327.             emailAddress: values.email,

  328.             idDocType: "HKID",

  329.             identification: iAmSmartData.idNo,

  330.             checkDigit: iAmSmartData.checkDigit,

  331.             tncFlag: tncFlag,

  332.             type: "IND",

  333.             userFaxNo: JSON.stringify(userFaxNo),

  334.             userMobileNumber: JSON.stringify(userMobileNumber),

  335.             userAddress: JSON.stringify(userAddress),

  336.             captcha: base64Url,

  337.             checkCode: checkCode,

  338.             preferLocale: preferLocale

  339.         };

  340. 

  341.         if (isValid) {

  342.             axios.post(POST_IAMSMART_USER_REGISTER, formData, {

  343.                 headers: {

  344.                     "Content-Type": "multipart/form-data"

  345.                 }

  346.             })

  347.                 .then((response) => {

  348.                     console.log(response)

  349.                     setCheckUpload(true)

  350.                     setLoding(false);

  351.                 })

  352.                 .catch(error => {

  353.                     console.error(error);

  354.                     setLoding(false);

  355.                 });

  356.         } else {

  357.             setLoding(false);

  358.         }

  359.     }

  360. 

  361.     function handlePhone(phone) {

  362.         if (phone.length < 8) {

  363.             return false;

  364.         } else {

  365.             return true;

  366.         }

  367.     }

  368. 

  369.     function handleCaptcha(captchaField) {

  370.         if (captchaField.length == 5) {

  371.             return true

  372.         } else {

  373.             return false

  374.         }

  375.     }

  376. 

  377.     function handleEmail(email) {

  378.         var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

  379.         if (!email.match(validRegex)) {

  380.             return false;

  381.         } else {

  382.             return true;

  383.         }

  384.     }

  385. 

  386.     function displayErrorMsg(errorMsg) {

  387.         return <Typography variant="errorMessage1">{errorMsg}</Typography>

  388.     }

  389. 

  390.     const formik = useFormik({

  391.         initialValues: ({

  392.             email: iAmSmartData.email ?? "",

  393.             emailConfirm: iAmSmartData.email ?? "",

  394.             address1: iAmSmartData.address1 ?? "",

  395.             address2: '',

  396.             address3: '',

  397.             phone: iAmSmartData.phone ?? "",

  398.             phoneCountryCode: iAmSmartData.phoneCountryCode ?? "852",

  399.             submit: null,

  400.             fax: '',

  401.             faxCountryCode: '852',

  402.             captchaField: ''

  403.         }),

  404.         validationSchema: yup.object().shape({

  405.             address1: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),

  406.             address2: yup.string().max(40),

  407.             address3: yup.string().max(40),

  408.             email: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))),

  409.             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' }))),

  410.             phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast2Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))),

  411.             phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast8Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))),

  412.             captchaField: yup.string().max(5, getMaxErrStr(5)).required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))).min(5, displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),

  413.         }),

  414.     });

  415. 

  416.     const handleCCPChange = (e) => {

  417.         e.preventDefault();

  418.     };

  419. 

  420.     const { values } = formik

  421.     useEffect(() => {

  422.         checkDataField(values)

  423.     }, [values])

  424. 

  425.     return (

  426.         <FormikProvider value={formik}>

  427.             <form onSubmit={handleSubmit(_onSubmit)}>

  428.                 {/* Input Form */}

  429.                 <FormGroup id={"inputForm"} sx={{ display: props.step === 0 ? "" : "none" }}>

  430.                     <Grid container spacing={3}>

  431.                         <Grid item xs={12} md={12}>

  432. 

  433.                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  434. 

  435.                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>

  436.                                     <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>

  437.                                         <FormattedMessage id="becomeNewPersonalUser" />

  438.                                     </Typography>

  439.                                 </div>

  440. 

  441.                                 <Typography mt={0.25} variant="h6" sx={{ color: '#f10000' }}>

  442.                                     <FormattedMessage id="requireString" />。

  443.                                 </Typography>

  444.                                 <Stack mt={1} direction="row" style={{ alignItems: "center" }}><img src={iAmSmartICon} alt="iAM Smart" width="25" /><Typography mt={0.25} variant="h6" >: <FormattedMessage id="MSG.providedByIAmSmart" /></Typography></Stack>

  445. 

  446.                             </Stack>

  447.                         </Grid>

  448.                         <Grid item xs={12} md={12}>

  449.                             <Grid container spacing={1}>

  450.                                 <Grid item xs={12} mt={1} mb={1}>

  451.                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  452.                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>

  453.                                             <FormattedMessage id="yourPersonalInformation" />

  454.                                         </Typography>

  455.                                     </Stack>

  456.                                 </Grid>

  457.                                 <Grid item xs={12} md={12} >

  458.                                     <Grid container sx={{ mb: 1 }}>

  459. 

  460.                                         <InputLabel htmlFor="idDocType-signup">

  461.                                             <Typography variant="h5" sx={{ mr: 1 }}>

  462.                                                 <FormattedMessage id="HKIDcard" />: {iAmSmartData.idNo ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}

  463.                                                 {/* {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"} */}

  464.                                             </Typography>

  465.                                             <Stack direction="row">

  466.                                                 <Typography variant="h5">

  467.                                                     {iAmSmartData?.idNo?.slice(0, 4)}{showId ? iAmSmartData?.idNo?.slice(4) : "****"}{showId ? '(' + iAmSmartData.checkDigit + ')' : null}

  468.                                                 </Typography>

  469.                                                 <IconButton

  470.                                                     aria-label="toggle id visibility"

  471.                                                     onClick={handleClickShowId}

  472.                                                     onMouseDown={handleMouseDownId}

  473.                                                     edge="end"

  474.                                                     size="medium"

  475.                                                 >

  476.                                                     {showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}

  477.                                                 </IconButton>

  478.                                             </Stack>

  479.                                         </InputLabel>

  480. 

  481.                                     </Grid>

  482.                                 </Grid>

  483.                                 <Grid item xs={12} md={6}>

  484.                                     <Stack spacing={1}>

  485.                                         <InputLabel htmlFor="enName-signup">

  486.                                             <Typography variant="h5">

  487.                                                 <FormattedMessage id="userEnglishName" />: {iAmSmartData.enName}{iAmSmartData.enName ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}

  488.                                             </Typography>

  489. 

  490.                                         </InputLabel>

  491.                                     </Stack>

  492.                                 </Grid>

  493.                                 <Grid item xs={12} md={6}>

  494.                                     <Stack spacing={1}>

  495.                                         <InputLabel htmlFor="chName-signup">

  496.                                             <Typography variant="h5">

  497.                                                 {intl.formatMessage({ id: 'userChineseName' })}: {iAmSmartData.chName}{iAmSmartData.chName ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}

  498.                                             </Typography>

  499.                                         </InputLabel>

  500.                                     </Stack>

  501.                                 </Grid>

  502.                                 <Grid item xs={12}>

  503.                                     <Stack spacing={1}>

  504.                                         <InputLabel htmlFor="address1-signup">

  505.                                             <Typography variant="h5">

  506.                                                 <FormattedMessage id="formAddress" />

  507.                                                 <span style={{ color: '#f10000' }}>*</span>

  508. 

  509.                                             </Typography>

  510.                                         </InputLabel>

  511. 

  512.                                         <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  513.                                             <OutlinedInput

  514.                                                 fullWidth

  515.                                                 autoFocus

  516.                                                 error={Boolean(formik.touched.address1 && formik.errors.address1)}

  517.                                                 id="address1-signup"

  518.                                                 value={formik.values.address1}

  519.                                                 name="address1"

  520.                                                 onChange={formik.handleChange}

  521.                                                 placeholder={intl.formatMessage({ id: 'addressLine1' })}

  522.                                                 onBlur={formik.handleBlur}

  523.                                                 inputProps={{

  524.                                                     onKeyDown: (e) => {

  525.                                                         if (e.key === 'Enter') {

  526.                                                             e.preventDefault();

  527.                                                         }

  528.                                                     },

  529.                                                 }}

  530.                                             />

  531.                                             {iAmSmartData.address1 != "" && iAmSmartData.address1 == formik.values.address1 ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}

  532.                                         </Stack>

  533. 

  534.                                         <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  535.                                             <OutlinedInput

  536.                                                 fullWidth

  537.                                                 error={Boolean(formik.touched.address2 && formik.errors.address2)}

  538.                                                 id="address2-signup"

  539.                                                 value={formik.values.address2}

  540.                                                 name="address2"

  541.                                                 onBlur={formik.handleBlur}

  542.                                                 onChange={formik.handleChange}

  543.                                                 placeholder={intl.formatMessage({ id: 'addressLine2' })}

  544.                                                 inputProps={{

  545.                                                     onKeyDown: (e) => {

  546.                                                         if (e.key === 'Enter') {

  547.                                                             e.preventDefault();

  548.                                                         }

  549.                                                     },

  550.                                                 }}

  551.                                             />

  552.                                             {iAmSmartData.address2 != "" && iAmSmartData.address2 == formik.values.address2 ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}

  553.                                         </Stack>

  554. 

  555. 

  556.                                         <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  557.                                             <OutlinedInput

  558.                                                 fullWidth

  559.                                                 error={Boolean(formik.touched.address3 && formik.errors.address3)}

  560.                                                 id="address3-signup"

  561.                                                 value={formik.values.address3}

  562.                                                 name="address3"

  563.                                                 onBlur={formik.handleBlur}

  564.                                                 onChange={formik.handleChange}

  565.                                                 placeholder={intl.formatMessage({ id: 'addressLine3' })}

  566.                                                 inputProps={{

  567.                                                     onKeyDown: (e) => {

  568.                                                         if (e.key === 'Enter') {

  569.                                                             e.preventDefault();

  570.                                                         }

  571.                                                     },

  572.                                                 }}

  573.                                             />

  574.                                             {iAmSmartData.address3 != "" && iAmSmartData.address3 == formik.values.address3 ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}

  575.                                         </Stack>

  576. 

  577. 

  578.                                         <Autocomplete

  579.                                             disablePortal

  580.                                             id="address4-combo"

  581.                                             value={selectedAddress4}

  582.                                             options={address4ComboList}

  583.                                             disabled={checkCountry}

  584.                                             // error={Boolean(districtErrStr != "")}

  585.                                             onBlur={formik.handleBlur}

  586.                                             getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}

  587.                                             onChange={(event, newValue) => {

  588.                                                 setSelectedAddress4(newValue);

  589.                                             }}

  590.                                             sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}

  591.                                             renderInput={(params) => <TextField error={Boolean(districtErrStr != "")} {...params} placeholder={intl.formatMessage({ id: 'region' })}

  592.                                             />}

  593.                                         />

  594.                                         <Autocomplete

  595.                                             disablePortal

  596.                                             id="address5-combo"

  597.                                             value={selectedAddress5}

  598.                                             options={address5ComboList}

  599.                                             disabled= {true}

  600.                                             getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}

  601.                                             onChange={(event, newValue) => {

  602.                                                 if (newValue !== null) {

  603.                                                     setSelectedAddress5(newValue);

  604.                                                     if (newValue.type === 'hongKong') {

  605.                                                         setCheckCountry(false)

  606.                                                     } else {

  607.                                                         setSelectedAddress4("");

  608.                                                         setCheckCountry(true)

  609.                                                     }

  610.                                                 } else {

  611.                                                     setSelectedAddress4("");

  612.                                                     setCheckCountry(true)

  613.                                                 }

  614.                                             }}

  615. 

  616.                                             sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}

  617.                                             renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({ id: 'regionOrCountry' })} />}

  618.                                         />

  619.                                         {formik.touched.address1 && formik.errors.address1 && (

  620.                                             <FormHelperText error id="helper-text-address1-signup">

  621.                                                 {formik.errors.address1}

  622.                                             </FormHelperText>

  623.                                         )}

  624.                                         {formik.touched.address2 && formik.errors.address2 && (

  625.                                             <FormHelperText error id="helper-text-address2-signup">

  626.                                                 {formik.errors.address2}

  627.                                             </FormHelperText>

  628.                                         )}

  629.                                         {formik.touched.address3 && formik.errors.address3 && (

  630.                                             <FormHelperText error id="helper-text-address3-signup">

  631.                                                 {formik.errors.address3}

  632.                                             </FormHelperText>

  633.                                         )}

  634.                                         {districtErrStr != "" && (

  635.                                             <FormHelperText error >

  636.                                                 {districtErrStr}

  637.                                             </FormHelperText>

  638.                                         )}

  639.                                     </Stack>

  640.                                 </Grid>

  641.                                 <Grid item xs={12} mt={1} mb={1}>

  642.                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  643.                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>

  644.                                             <FormattedMessage id="yourContact" />

  645.                                         </Typography>

  646.                                     </Stack>

  647.                                 </Grid>

  648.                                 <Grid item xs={12} md={12}>

  649.                                     <Grid container>

  650.                                         <Grid item xs={12} md={6}>

  651.                                             <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>

  652.                                                 <InputLabel htmlFor="email-signup">

  653.                                                     <Typography variant="h5">

  654.                                                         <FormattedMessage id="userContactEmail" />

  655.                                                         <span style={{ color: '#f10000' }}>*</span>

  656. 

  657.                                                     </Typography>

  658.                                                 </InputLabel>

  659. 

  660.                                                 <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  661.                                                     <OutlinedInput

  662.                                                         fullWidth

  663.                                                         error={Boolean((formik.touched.email && formik.errors.email) || checkEmail)}

  664.                                                         id="email-login"

  665.                                                         type="email"

  666.                                                         value={formik.values.email.trim()}

  667.                                                         name="email"

  668.                                                         onChange={formik.handleChange}

  669.                                                         placeholder={intl.formatMessage({ id: 'userContactEmail' })}

  670.                                                         onBlur={formik.handleBlur}

  671.                                                         inputProps={{

  672.                                                             onKeyDown: (e) => {

  673.                                                                 if (e.key === 'Enter') {

  674.                                                                     e.preventDefault();

  675.                                                                 }

  676.                                                             },

  677.                                                         }}

  678.                                                     />

  679.                                                     {iAmSmartData.email && iAmSmartData.email == formik.values.email ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}

  680.                                                 </Stack>

  681. 

  682.                                                 {formik.touched.email && formik.errors.email && (

  683.                                                     <FormHelperText error id="helper-text-email-signup">

  684.                                                         {formik.errors.email}

  685.                                                     </FormHelperText>

  686.                                                 )}

  687.                                                 {checkEmail && (

  688.                                                     <FormHelperText error id="helper-text-email-signup">

  689.                                                         <FormattedMessage id="emailUsed" />

  690.                                                     </FormHelperText>

  691.                                                 )}

  692.                                             </Stack>

  693.                                         </Grid>

  694.                                         <Grid item xs={12} md={6}>

  695.                                             <Stack spacing={1} >

  696.                                                 <InputLabel htmlFor="emailConfirm-signup">

  697.                                                     <Typography variant="h5">

  698.                                                         <FormattedMessage id="confirmEmail" />

  699.                                                         <span style={{ color: '#f10000' }}>*</span>

  700.                                                     </Typography>

  701.                                                 </InputLabel>

  702.                                                 <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  703.                                                     <OutlinedInput

  704.                                                         fullWidth

  705.                                                         error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)}

  706.                                                         id="emailConfirm-login"

  707.                                                         type="email"

  708.                                                         value={formik.values.emailConfirm}

  709.                                                         name="emailConfirm"

  710.                                                         // onBlur={formik.handleBlur}

  711.                                                         onChange={formik.handleChange}

  712.                                                         placeholder={intl.formatMessage({ id: 'confirmEmail' })}

  713.                                                         onBlur={formik.handleBlur}

  714.                                                         onCut={handleCCPChange}

  715.                                                         onCopy={handleCCPChange}

  716.                                                         onPaste={handleCCPChange}

  717.                                                         inputProps={{

  718.                                                             onKeyDown: (e) => {

  719.                                                                 if (e.key === 'Enter') {

  720.                                                                     e.preventDefault();

  721.                                                                 }

  722.                                                             },

  723.                                                         }}

  724.                                                     />

  725.                                                     {iAmSmartData.email && iAmSmartData.email == formik.values.emailConfirm ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}

  726.                                                 </Stack>

  727. 

  728.                                                 {formik.touched.emailConfirm && formik.errors.emailConfirm && (

  729.                                                     <FormHelperText error id="helper-text-emailConfirm-signup">

  730.                                                         {formik.errors.emailConfirm}

  731.                                                     </FormHelperText>

  732.                                                 )}

  733.                                             </Stack>

  734.                                         </Grid>

  735.                                     </Grid>

  736.                                 </Grid>

  737.                                 <Grid item xs={12} md={12}>

  738.                                     <Grid container>

  739.                                         <Grid item xs={12} md={6}>

  740.                                             <Grid container>

  741.                                                 <Grid item xs={12} md={12}>

  742.                                                     <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>

  743.                                                         <InputLabel htmlFor="phone-signup">

  744.                                                             <Typography variant="h5">

  745.                                                                 <FormattedMessage id="userContactNumber" />

  746.                                                                 <span style={{ color: '#f10000' }}>*</span>

  747.                                                                 

  748.                                                             </Typography>

  749.                                                         </InputLabel>

  750.                                                         <Stack direction="row" ustifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  751.                                                             <OutlinedInput

  752.                                                                 id="phoneCountryCode-login"

  753.                                                                 type="phoneCountryCode"

  754.                                                                 value={formik.values.phoneCountryCode.trim()}

  755.                                                                 name="phoneCountryCode"

  756.                                                                 // onBlur={formik.handleBlur}

  757.                                                                 // onChange={formik.handleChange}

  758.                                                                 onChange={(event) => {

  759.                                                                     const value = event.target.value;

  760.                                                                     if (value.match(/[^0-9]/)) {

  761.                                                                         return event.preventDefault();

  762.                                                                     }

  763.                                                                     formik.setFieldValue("phoneCountryCode", value);

  764.                                                                 }}

  765.                                                                 placeholder={intl.formatMessage({ id: 'dialingCode' })}

  766.                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}

  767.                                                                 onBlur={formik.handleBlur}

  768.                                                                 inputProps={{

  769.                                                                     maxLength: 3,

  770.                                                                     onKeyDown: (e) => {

  771.                                                                         if (e.key === 'Enter') {

  772.                                                                             e.preventDefault();

  773.                                                                         }

  774.                                                                     },

  775.                                                                 }}

  776.                                                                 sx={{ width: '25%' }}

  777.                                                             />

  778.                                                             <OutlinedInput

  779.                                                                 id="phone-login"

  780.                                                                 type="phone"

  781.                                                                 value={formik.values.phone.trim()}

  782.                                                                 name="phone"

  783.                                                                 // onBlur={formik.handleBlur}

  784.                                                                 // onChange={formik.handleChange}

  785.                                                                 onChange={(event) => {

  786.                                                                     const value = event.target.value;

  787.                                                                     if (value.match(/[^0-9]/)) {

  788.                                                                         return event.preventDefault();

  789.                                                                     }

  790.                                                                     formik.setFieldValue("phone", value);

  791.                                                                 }}

  792.                                                                 placeholder={intl.formatMessage({ id: 'userContactNumber' })}

  793.                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}

  794.                                                                 onBlur={formik.handleBlur}

  795.                                                                 inputProps={{

  796.                                                                     maxLength: 11,

  797.                                                                     onKeyDown: (e) => {

  798.                                                                         if (e.key === 'Enter') {

  799.                                                                             e.preventDefault();

  800.                                                                         }

  801.                                                                     },

  802.                                                                 }}

  803.                                                                 fullWidth

  804.                                                             />

  805.                                                             {iAmSmartData.phone && iAmSmartData.phone == formik.values.phone && iAmSmartData.phoneCountryCode == formik.values.phoneCountryCode ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}

  806.                                                         </Stack>

  807.                                                         {formik.touched.phone && formik.errors.phone && (

  808.                                                             <FormHelperText error id="helper-text-phone-signup">

  809.                                                                 {formik.errors.phone}

  810.                                                             </FormHelperText>

  811.                                                         )}

  812.                                                     </Stack>

  813.                                                 </Grid>

  814.                                             </Grid>

  815.                                         </Grid>

  816.                                         <Grid item xs={12} md={6}>

  817.                                             <Grid container>

  818.                                                 <Grid item xs={12} md={12}>

  819.                                                     <Stack spacing={1} direction="column">

  820.                                                         <InputLabel htmlFor="fax-signup">

  821.                                                             <Typography variant="h5">

  822.                                                                 <FormattedMessage id="userFaxNumber" />

  823.                                                             </Typography>

  824.                                                         </InputLabel>

  825.                                                         <Stack direction="row" ustifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  826.                                                             <OutlinedInput

  827.                                                                 error={Boolean(formik.touched.fax && formik.errors.fax)}

  828.                                                                 id="faxCountryCode-login"

  829.                                                                 type="faxCountryCode"

  830.                                                                 value={formik.values.faxCountryCode.trim()}

  831.                                                                 name="faxCountryCode"

  832.                                                                 // onChange={formik.handleChange}

  833.                                                                 onChange={(event) => {

  834.                                                                     const value = event.target.value;

  835.                                                                     if (value.match(/[^0-9]/)) {

  836.                                                                         return event.preventDefault();

  837.                                                                     }

  838.                                                                     formik.setFieldValue("faxCountryCode", value);

  839.                                                                 }}

  840.                                                                 placeholder={intl.formatMessage({ id: 'dialingCode' })}

  841.                                                                 onBlur={formik.handleBlur}

  842.                                                                 inputProps={{

  843.                                                                     maxLength: 3,

  844.                                                                     onKeyDown: (e) => {

  845.                                                                         if (e.key === 'Enter') {

  846.                                                                             e.preventDefault();

  847.                                                                         }

  848.                                                                     },

  849.                                                                 }}

  850.                                                                 sx={{ width: '25%' }}

  851.                                                             />

  852.                                                             <OutlinedInput

  853.                                                                 id="fax-login"

  854.                                                                 type="fax"

  855.                                                                 value={formik.values.fax.trim()}

  856.                                                                 name="fax"

  857.                                                                 onBlur={formik.handleBlur}

  858.                                                                 // onChange={formik.handleChange}

  859.                                                                 onChange={(event) => {

  860.                                                                     const value = event.target.value;

  861.                                                                     if (value.match(/[^0-9]/)) {

  862.                                                                         return event.preventDefault();

  863.                                                                     }

  864.                                                                     formik.setFieldValue("fax", value);

  865.                                                                 }}

  866.                                                                 placeholder={intl.formatMessage({ id: 'userFaxNumber' })}

  867.                                                                 inputProps={{

  868.                                                                     maxLength: 8,

  869.                                                                     onKeyDown: (e) => {

  870.                                                                         if (e.key === 'Enter') {

  871.                                                                             e.preventDefault();

  872.                                                                         }

  873.                                                                     },

  874.                                                                 }}

  875.                                                                 sx={{ width: '75%' }}

  876.                                                             />

  877.                                                         </Stack>

  878.                                                     </Stack>

  879.                                                 </Grid>

  880.                                             </Grid>

  881.                                         </Grid>

  882.                                     </Grid>

  883.                                 </Grid>

  884.                             </Grid>

  885.                             <Grid item xs={12} md={12}>

  886.                                 <Grid container>

  887.                                     <Grid item xs={12} md={12}>

  888.                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>

  889.                                             <FormattedMessage id="termsAndCondition" />

  890.                                             <span style={{ color: '#f10000' }}>*</span>

  891.                                         </Typography>

  892.                                     </Grid>

  893.                                     <Grid item xs={12} md={12}>

  894.                                         <Grid container>

  895.                                             <Grid item xs={12} md={12}>

  896.                                                 <Typography variant="h5" sx={{ textAlign: "left", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>

  897. 

  898.                                                     <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "termsAndCon" }) }} />

  899.                                                 </Typography>

  900.                                             </Grid>

  901.                                         </Grid>

  902.                                         <Grid item xs={12} s={12} md={12} lg={12}>

  903.                                             <Grid container>

  904.                                                 <Grid item xs={6} s={6} md={2} lg={2}>

  905.                                                     <Grid container>

  906.                                                         <Grid item sx={{ display: 'flex', alignItems: 'center' }}>

  907.                                                             <Checkbox

  908.                                                                 checked={termsAndConAccept}

  909.                                                                 onChange={handleCheckBoxChange}

  910.                                                                 name="termsAndConAccept"

  911.                                                                 color="primary"

  912.                                                                 size="small"

  913.                                                             />

  914.                                                             <Typography variant="h5">

  915.                                                                 <FormattedMessage id="acceptTerms" />

  916.                                                             </Typography>

  917.                                                         </Grid>

  918.                                                     </Grid>

  919.                                                 </Grid>

  920.                                                 <Grid item xs={6} s={6} md={3} lg={3}>

  921.                                                     <Grid container style={{ display: "none" }}>

  922.                                                         <Grid item sx={{ display: 'flex', alignItems: 'center' }}>

  923.                                                             <Checkbox

  924.                                                                 checked={termsAndConNotAccept}

  925.                                                                 onChange={handleCheckBoxChange}

  926.                                                                 name="termsAndConNotAccept"

  927.                                                                 color="primary"

  928.                                                                 size="small"

  929.                                                                 

  930.                                                             />

  931.                                                             <Typography variant="h5">

  932.                                                                 <FormattedMessage id="rejectTerms" />

  933.                                                             </Typography>

  934.                                                         </Grid>

  935.                                                     </Grid>

  936.                                                 </Grid>

  937.                                             </Grid>

  938.                                         </Grid>

  939.                                     </Grid>

  940.                                 </Grid>

  941.                             </Grid>

  942.                             <Grid item xs={12} lg={12}>

  943.                                 <Grid container>

  944.                                     <Stack direction="column">

  945.                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>

  946.                                             <FormattedMessage id="verify" />

  947.                                             <span style={{ color: '#f10000' }}>*</span>

  948.                                         </Typography>

  949.                                         <Stack spacing={1} direction="row">

  950.                                             <Grid item xs={5} lg={5} style={{ "border": "1px solid black" }}>

  951.                                                 <img src={captchaImg} alt="" />

  952.                                             </Grid>

  953.                                             <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>

  954.                                                 <IconButton aria-label="refrashCaptcha" size="large" onClick={() => { onCaptchaChange() }}>

  955.                                                     <LoopIcon fontSize="inherit" />

  956.                                                 </IconButton>

  957.                                             </Grid>

  958.                                             <Grid item xs={6} lg={6}>

  959.                                                 <OutlinedInput

  960.                                                     fullWidth

  961.                                                     id="captchaField"

  962.                                                     type="text"

  963.                                                     value={formik.values.captchaField.trim()}

  964.                                                     onBlur={formik.handleBlur}

  965.                                                     error={Boolean(formik.touched.captchaField && formik.errors.captchaField)}

  966.                                                     name="captchaField"

  967.                                                     onChange={(event) => {

  968.                                                         const value = event.target.value;

  969.                                                         props.setCheckCode(event.target.value);

  970.                                                         setCheckCode(event.target.value);

  971.                                                         formik.setFieldValue("captchaField", value);

  972.                                                     }}

  973.                                                     sx={{ width: '75%' }}

  974.                                                 />

  975.                                             </Grid>

  976.                                         </Stack>

  977.                                         {formik.touched.captchaField && formik.errors.captchaField && (

  978.                                             <FormHelperText error id="helper-text-captcha-signup">

  979.                                                 {formik.errors.captchaField}

  980.                                             </FormHelperText>

  981.                                         )}

  982.                                     </Stack>

  983.                                 </Grid>

  984.                             </Grid>

  985.                         </Grid>

  986.                     </Grid>

  987.                 </FormGroup>

  988.                 {/* Preview Form */}

  989.                 <FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none" }}>

  990.                     <Grid container spacing={3}>

  991.                         <Grid item xs={12} md={12}>

  992.                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  993.                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>

  994.                                     <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>

  995.                                         <FormattedMessage id="becomeNewPersonalUser" />

  996.                                     </Typography>

  997.                                 </div>

  998.                             </Stack>

  999.                         </Grid>

  1000.                         <Grid item xs={12} md={12}>

  1001.                             <Grid container spacing={2}>

  1002.                                 <Grid item xs={12} mt={1} mb={1}>

  1003.                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  1004.                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>

  1005.                                             <FormattedMessage id="yourPersonalInformation" />

  1006.                                         </Typography>

  1007.                                         {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">

  1008.                                         Already have an account?

  1009.                                     </Typography> */}

  1010.                                     </Stack>

  1011.                                 </Grid>

  1012.                                 <Grid item xs={12} md={12} >

  1013.                                     <Stack direction="row">

  1014.                                         <Typography variant="h5" color={theme.palette.grey[600]} sx={{ mr: 1 }}>

  1015.                                             <FormattedMessage id="userIdDoc" />

  1016.                                         </Typography>

  1017.                                         <Typography variant="h5" name="preview-idDocType-1">

  1018.                                             {formik?.values?.idNo?.slice(0, 4)}

  1019.                                             {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}

  1020.                                         </Typography>

  1021.                                         <Typography variant="h5" name="preview-idDocType-2">

  1022.                                             {showComId ? formik?.values?.idNo?.slice(4) : "****"}{showComId ? '(' + formik.values.checkDigit + ')' : null}

  1023.                                             {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}

  1024.                                         </Typography>

  1025.                                         <IconButton

  1026.                                             aria-label="toggle id visibility"

  1027.                                             onClick={handleClickShowComId}

  1028.                                             onMouseDown={handleMouseDownComId}

  1029.                                             edge="end"

  1030.                                             size="medium"

  1031.                                         >

  1032.                                             {showComId ? <EyeOutlined /> : <EyeInvisibleOutlined />}

  1033.                                         </IconButton>

  1034.                                     </Stack>

  1035.                                 </Grid>

  1036.                                 <Grid item xs={12} md={6}>

  1037.                                     <Stack spacing={1} direction="row">

  1038.                                         <Typography variant="h5" color={theme.palette.grey[600]}>

  1039.                                             <FormattedMessage id="userEnglishName" />:

  1040.                                         </Typography>

  1041.                                         <Typography variant="h5" id="preview-enName-signup">

  1042.                                             {formik.values.enName}

  1043.                                         </Typography>

  1044.                                         {iAmSmartData.enName ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}

  1045.                                     </Stack>

  1046.                                 </Grid>

  1047.                                 <Grid item xs={12} md={6}>

  1048.                                     <Stack spacing={1} direction="row">

  1049.                                         <Typography variant="h5" color={theme.palette.grey[600]}>

  1050.                                             <FormattedMessage id="userChineseName" />:

  1051.                                         </Typography>

  1052.                                         <Typography variant="h5" id="preview-chName-signup">

  1053.                                             {formik.values.chName}

  1054.                                         </Typography>

  1055.                                     </Stack>

  1056.                                 </Grid>

  1057.                                 <Grid item xs={12}>

  1058.                                     <Stack spacing={1} direction="column">

  1059.                                         <Typography variant="h5" color={theme.palette.grey[600]}>

  1060.                                             <FormattedMessage id="formAddress" />:

  1061.                                         </Typography>

  1062.                                         <Stack spacing={1} direction="column">

  1063.                                             <Typography variant="h5" id="preview-address1-signup">

  1064.                                                 {formik.values.address1}

  1065.                                             </Typography>

  1066.                                             {formik.values.address2 != null ?

  1067.                                                 <Typography variant="h5" id="preview-address2-signup">

  1068.                                                     {formik.values.address2}

  1069.                                                 </Typography>

  1070.                                                 : null}

  1071.                                             {formik.values.address3 != null ?

  1072.                                                 <Typography variant="h5" id="preview-address3-signup">

  1073.                                                     {formik.values.address3}

  1074.                                                 </Typography>

  1075.                                                 : null}

  1076.                                             {selectedAddress5.type === "hongKong" ?

  1077.                                                 <Stack direction="column">

  1078.                                                     {/* <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address4-signup">

  1079.                                                         <FormattedMessage id="region" />:

  1080.                                                     </Typography> */}

  1081.                                                     <Typography variant="h5">

  1082.                                                         {!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })}

  1083.                                                     </Typography>

  1084.                                                 </Stack>

  1085.                                                 : null}

  1086.                                             <Stack direction="column">

  1087.                                                 {/* <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address5-signup">

  1088.                                                     <FormattedMessage id="regionOrCountry" />:

  1089.                                                 </Typography> */}

  1090.                                                 <Typography variant="h5">

  1091.                                                     {intl.formatMessage({ id: selectedAddress5.type })}

  1092.                                                 </Typography>

  1093.                                             </Stack>

  1094.                                         </Stack>

  1095.                                     </Stack>

  1096.                                 </Grid>

  1097.                                 <Grid item xs={12} mt={1} mb={1}>

  1098.                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

  1099.                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>

  1100.                                             <FormattedMessage id="yourContact" />

  1101.                                         </Typography>

  1102.                                     </Stack>

  1103.                                 </Grid>

  1104.                                 <Grid item xs={12} md={12}>

  1105.                                     <Stack spacing={1} direction="row">

  1106.                                         <Typography variant="h5" color={theme.palette.grey[600]}>

  1107.                                             <FormattedMessage id="userContactEmail" />:

  1108.                                         </Typography>

  1109.                                         <Typography variant="h5" id="preview-email-signup">

  1110.                                             {formik.values.email}

  1111.                                         </Typography>

  1112.                                     </Stack>

  1113.                                 </Grid>

  1114.                                 <Grid item xs={12} md={6}>

  1115.                                     <Stack spacing={1} direction="row">

  1116.                                         <Typography variant="h5" color={theme.palette.grey[600]}>

  1117.                                             <FormattedMessage id="userContactNumber" />:

  1118.                                         </Typography>

  1119.                                         <Typography variant="h5" id="preview-phone-signup">

  1120.                                             +{formik.values.phoneCountryCode} {formik.values.phone}

  1121.                                         </Typography>

  1122.                                     </Stack>

  1123.                                 </Grid>

  1124.                                 {formik.values.faxCountryCode != "" && formik.values.fax != "" ?

  1125.                                     <Grid item xs={12} md={6}>

  1126.                                         <Stack spacing={1} direction="row">

  1127.                                             <Typography variant="h5" color={theme.palette.grey[600]}>

  1128.                                                 <FormattedMessage id="userFaxNumber" />:

  1129.                                             </Typography>

  1130.                                             <Typography variant="h5" id="preview-fax-signup">

  1131.                                                 +{formik.values.faxCountryCode} {formik.values.fax}

  1132.                                             </Typography>

  1133.                                         </Stack>

  1134.                                     </Grid>

  1135.                                     : null}

  1136.                             </Grid>

  1137.                         </Grid>

  1138.                     </Grid>

  1139.                 </FormGroup>

  1140.                 {/* Submit page */}

  1141.                 <FormGroup id={"submitForm"} sx={{ display: props.step === 2 ? "" : "none" }}>

  1142.                     <Grid container spacing={3}>

  1143.                         {isLoading ?

  1144.                             <LoadingComponent /> :

  1145.                             <Grid item xs={12}>

  1146.                                 {checkUpload ?

  1147.                                     // SUCCESS page

  1148.                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>

  1149.                                         <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />

  1150.                                         <Typography display="inline" variant="h4">

  1151.                                             <FormattedMessage id="registerSubmitted" />

  1152.                                         </Typography>

  1153.                                         <Typography display="inline" variant="h4">

  1154.                                             <FormattedMessage id="emailSent" />

  1155.                                         </Typography>

  1156.                                         <Button variant="outlined" component={Link} to="/login" ><Typography variant="h5">

  1157.                                             <FormattedMessage id="backToLogin" />

  1158.                                         </Typography></Button>

  1159.                                     </Stack>

  1160.                                     :

  1161.                                     // ERROR page

  1162.                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>

  1163.                                         {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}

  1164.                                         <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />

  1165.                                         <Typography display="inline" variant="h4">

  1166.                                             <FormattedMessage id="registerFail" />

  1167.                                         </Typography>

  1168.                                         <Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="h5">

  1169.                                             <FormattedMessage id="backToLogin" />

  1170.                                         </Typography></Button>

  1171.                                     </Stack>

  1172.                                 }

  1173.                             </Grid>

  1174.                         }

  1175.                     </Grid>

  1176.                 </FormGroup>

  1177.             </form>

  1178.         </FormikProvider>

  1179.     );

  1180. }

  1181. 

  1182. export default CustomFormWizard;