update iAmSmart UI

src/components/iAmSmartButton.js

@@ -0,0 +1,32 @@
+// material-ui
+import {useState, useEffect} from 'react';
+import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';
+import {
+    Button,
+    Typography
+}from '@mui/material';
+
+// ==============================|| EVENT TABLE ||============================== //
+
+export function IAmSmartButton({ label, onClickFun, fullWidth }) {
+
+    const [_label, set_label] = useState("");
+   
+    useEffect(()=>{
+        set_label(label);
+    }
+    ,[label]);
+
+
+    const doOnClick=()=>{
+        onClickFun();
+    }
+
+    return (
+        <Button onClick={()=>doOnClick()}  sx={{textTransform: 'none'}} color="iAmSmart" fullWidth={fullWidth} size="large" variant="outlined" startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}>
+        <Typography variant="h5">
+            {_label}
+        </Typography>
+      </Button>  
+    );
+}

src/pages/authentication/RegisterCustom.js

@@ -6,13 +6,13 @@ import {
   Link, Button, Card, Box, Grid
 } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';
 import banner from 'assets/images/bg_ml.jpg';
 import { Stack } from '../../../node_modules/@mui/material/index';
-import { iAmSmartPath, clientId, getBowserType, isAppBowser, iAmSmartCallbackPath} from 'auth/utils'
+import { iAmSmartPath, clientId, getBowserType, isAppBowser, iAmSmartCallbackPath } from 'auth/utils'
+import { IAmSmartButton } from "components/iAmSmartButton";
 
 import * as React from 'react';
-import {FormattedMessage, useIntl} from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 // ================================|| LOGIN ||================================ //
 
@@ -33,31 +33,31 @@ const RegisterCustom = () => {
     }
   }
 
-  const openQR =()=>{
-    let callbackUrl = "https://"+iAmSmartCallbackPath()+"/iamsmart/registrycallback";
+  const openQR = () => {
+    let callbackUrl = "https://" + iAmSmartCallbackPath() + "/iamsmart/registrycallback";
     let url = iAmSmartPath + "/api/v1/auth/getQR"
       + "?clientID=" + clientId
       + "&responseType=code"
-      +"&source=" + getBowserType()
-      +"&redirectURI="+encodeURIComponent(callbackUrl)
-      +"&scope="+encodeURIComponent("eidapi_auth eidapi_profiles")
-      +"&lang="+(locale === 'en' ?"en-US":locale === 'zh-HK' ?"zh-HK":"zh-CN")
+      + "&source=" + getBowserType()
+      + "&redirectURI=" + encodeURIComponent(callbackUrl)
+      + "&scope=" + encodeURIComponent("eidapi_auth eidapi_profiles")
+      + "&lang=" + (locale === 'en' ? "en-US" : locale === 'zh-HK' ? "zh-HK" : "zh-CN")
       //+"&state="
-      +"&brokerPage=false"
+      + "&brokerPage=false"
     window.location.assign(url);
   }
 
   const openApp = () => {
-    let callbackUrl = "https://"+iAmSmartCallbackPath()+"/iamsmart/registrycallback";
+    let callbackUrl = "https://" + iAmSmartCallbackPath() + "/iamsmart/registrycallback";
     let url = iAmSmartPath + "/api/v1/auth/getQR"
       + "?clientID=" + clientId
       + "&responseType=code"
-      +"&source=" + getBowserType()
-      +"&redirectURI="+encodeURIComponent(callbackUrl)
-      +"&scope="+encodeURIComponent("eidapi_auth eidapi_profiles")
-      +"&lang="+(locale === 'en' ?"en-US":locale === 'zh-HK' ?"zh-HK":"zh-CN")
+      + "&source=" + getBowserType()
+      + "&redirectURI=" + encodeURIComponent(callbackUrl)
+      + "&scope=" + encodeURIComponent("eidapi_auth eidapi_profiles")
+      + "&lang=" + (locale === 'en' ? "en-US" : locale === 'zh-HK' ? "zh-HK" : "zh-CN")
       //+"&state="
-      +"&brokerPage=true"
+      + "&brokerPage=true"
     window.location.assign(url);
   }
 
@@ -81,14 +81,14 @@ const RegisterCustom = () => {
             <Grid container>
               <Grid item xs={12} md={12}>
                 <Typography mt={4} variant="h3">
-                  <FormattedMessage id="registerTitle1"/>
+                  <FormattedMessage id="registerTitle1" />
                   <strong style={{ color: '#FF5733' }}>
-                    {" " + intl.formatMessage({id: 'registerTitle2'}) + " "}
+                    {" " + intl.formatMessage({ id: 'registerTitle2' }) + " "}
                   </strong>
-                  <FormattedMessage id="registerTitle3"/>
+                  <FormattedMessage id="registerTitle3" />
                 </Typography>
                 <Typography variant="body1">
-                  {intl.formatMessage({id: 'registerSubTitle'})}
+                  {intl.formatMessage({ id: 'registerSubTitle' })}
                 </Typography>
               </Grid>
             </Grid>
@@ -96,44 +96,42 @@ const RegisterCustom = () => {
               <Grid container >
                 <Grid item xs={12} md={6} sx={{ borderRight: 1, borderColor: 'grey.500' }}>
                   <Typography mb={4} variant="h3">
-                    <FormattedMessage id="personalUser"/>
+                    <FormattedMessage id="personalUser" />
                   </Typography>
-                  <Button variant="outlined" color="iAmSmart" sx={{textTransform: 'none'}} onClick={registerWithIAmSmart} startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}>
-                    <Typography variant="h5">
-                      <FormattedMessage id="continueWithIAmSmart"/>
-                    </Typography>
-                  </Button>
-
+                  <IAmSmartButton
+                    label={intl.formatMessage({ id: 'continueWithIAmSmart' })}
+                    onClickFun={registerWithIAmSmart}
+                  />
                   <Box mt={4} ml={2} mr={2} bgcolor="grey.100" p={1.5} >
                     <Typography textAlign='justify' variant="body1" display="block" gutterBottom>
-                    <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({id: 'MSG.registerIAmSmart'}) }} />
+                      <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.registerIAmSmart' }) }} />
                     </Typography>
                     <Link href={intl.formatMessage({ id: "iamsmartLink" })}>
-                      <FormattedMessage id="learnMore"/>
+                      <FormattedMessage id="learnMore" />
                     </Link>
                   </Box>
 
                   <Typography m={5}>
-                    <FormattedMessage id="or"/>
+                    <FormattedMessage id="or" />
                   </Typography>
 
                   <Button href="/registerFrom" variant="contained"><Typography variant="h5">
-                    <FormattedMessage id="registerNewPersonalUser"/>
+                    <FormattedMessage id="registerNewPersonalUser" />
                   </Typography></Button>
 
                   <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{ fontWeight: 'bold' }} gutterBottom>
-                  <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({id: 'MSG.registerPersonal'}) }} />
+                    <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.registerPersonal' }) }} />
                   </Typography>
                 </Grid>
                 <Grid item xs={12} md={6} sx={{ borderLeft: 1, borderColor: 'grey.500' }}>
                   <Typography mb={4} variant="h3">
-                    <FormattedMessage id="businessUser"/>
+                    <FormattedMessage id="businessUser" />
                   </Typography>
                   <Button href="/registerFromOrganization" variant="contained" sx={{ mt: 0.5 }}><Typography variant="h5">
-                    <FormattedMessage id="registerNewBusinessUser"/>
+                    <FormattedMessage id="registerNewBusinessUser" />
                   </Typography></Button>
                   <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{ fontWeight: 'bold' }} gutterBottom>
-                  <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({id: 'MSG.registerOrg'}) }} />
+                    <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.registerOrg' }) }} />
                   </Typography>
                 </Grid>
               </Grid>
@@ -142,58 +140,60 @@ const RegisterCustom = () => {
         </Card >
       </center>
       <Dialog
-          open={isPopUp}
-          onClose={() => setIsPopUp(false)}
-          PaperProps={{
-            sx: {
-              minWidth: '40vw',
-              maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
-              maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
-            }
-          }}
+        open={isPopUp}
+        onClose={() => setIsPopUp(false)}
+        PaperProps={{
+          sx: {
+            minWidth: '40vw',
+            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+          }
+        }}
       >
         <DialogTitle></DialogTitle>
         <DialogContent>
           <Typography variant="h3" >
-            <FormattedMessage id="authorizeIAmSmartForInfo"/>
+            <FormattedMessage id="authorizeIAmSmartForInfo" />
           </Typography>
           <Typography variant="h5" style={{ padding: '4px' }}>
-            <FormattedMessage id="iAmSmartSubTitle"/>
+            <FormattedMessage id="iAmSmartSubTitle" />
           </Typography>
         </DialogContent>
         <DialogContent >
           <Grid container style={{ paddingLeft: '16px' }}>
             <Grid item xs={6} >
               <Typography style={{ padding: '4px' }}>
-                {"- " + intl.formatMessage({id: 'userChineseName'})}
+                {"- " + intl.formatMessage({ id: 'userChineseName' })}
               </Typography>
               <Typography style={{ padding: '4px' }}>
-                {"- " + intl.formatMessage({id: 'userEnglishName'})}
+                {"- " + intl.formatMessage({ id: 'userEnglishName' })}
               </Typography>
               <Typography style={{ padding: '4px' }}>
-                {"- " + intl.formatMessage({id: 'userIDNo'})}
+                {"- " + intl.formatMessage({ id: 'userIDNo' })}
               </Typography>
             </Grid>
             <Grid item xs={6} >
               <Typography style={{ padding: '4px' }}>
-                {"- " + intl.formatMessage({id: 'userEmailAddress'})}
+                {"- " + intl.formatMessage({ id: 'userEmailAddress' })}
               </Typography>
               <Typography style={{ padding: '4px' }}>
-                {"- " + intl.formatMessage({id: 'userPhoneNumber'})}
+                {"- " + intl.formatMessage({ id: 'userPhoneNumber' })}
               </Typography>
               <Typography style={{ padding: '4px' }}>
-                {"- " + intl.formatMessage({id: 'userAddress'})}
+                {"- " + intl.formatMessage({ id: 'userAddress' })}
               </Typography>
             </Grid>
           </Grid>
         </DialogContent>
         <DialogContent align="right">
-          <Button variant="outlined" onClick={getQRWithIAmSmart} startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}><Typography variant="h5">
-            <FormattedMessage id="iAmSmartAutoFillIn"/>
-          </Typography></Button>
-          <br/>
+
+          <IAmSmartButton
+            label={intl.formatMessage({ id: 'iAmSmartAutoFillIn' })}
+            onClickFun={getQRWithIAmSmart}
+          />
+          <br />
           <Link href={intl.formatMessage({ id: "iamsmartLink" })}>
-            <FormattedMessage id="learnMore"/>
+            <FormattedMessage id="learnMore" />
           </Link>
         </DialogContent>
       </Dialog>

src/pages/authentication/auth-forms/AuthLoginCustom.js

@@ -1,7 +1,7 @@
-import React, {
+import {
   useEffect,
   useState,
-  lazy, 
+  lazy,
   // useContext
 } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
@@ -36,18 +36,19 @@ import { useFormik, FormikProvider } from 'formik';
 import AnimateButton from 'components/@extended/AnimateButton';
 import Loadable from 'components/Loadable';
 const PasswordAlertDialog = Loadable(lazy(() => import('./PasswordAlertDialog')));
-
 // assets
 import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
 // import axios from "axios";
-import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';
+
 import { useDispatch } from "react-redux";
 import { handleLogin } from "auth/index";
 import useJwt from "auth/jwt/useJwt";
 import { handleLogoutFunction } from 'auth/index';
-import {FormattedMessage, useIntl} from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import {IAmSmartButton} from "components/iAmSmartButton";
 // import LocaleContext from "components/I18nProvider";
-const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
 
 // ============================|| FIREBASE - LOGIN ||============================ //
 
@@ -65,7 +66,7 @@ const AuthLoginCustom = () => {
 
   // let [posts, setPosts] = useState([]);
   const [isValid, setisValid] = useState(false);
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
   const [isButtonDisabled, setIsButtonDisabled] = useState(true);
   const [errorMassage, setErrorMassage] = useState('');
   const [onLogin, setOnLogin] = useState(false);
@@ -97,21 +98,21 @@ const AuthLoginCustom = () => {
           const data = { ...userData, accessToken: response.data.accessToken, refreshToken: response.data.refreshToken }
           // setSuccess(true)
           // console.log(response.data);
-          if(response.data.type === "GLD"){
+          if (response.data.type === "GLD") {
             // setLocale("en");
-            localStorage.setItem('locale','en');
-          }else{
-            if (response.data.preferLocale ==="zh_HK"){
+            localStorage.setItem('locale', 'en');
+          } else {
+            if (response.data.preferLocale === "zh_HK") {
               // setLocale("zh-HK");
-              localStorage.setItem('locale','zh-HK');
+              localStorage.setItem('locale', 'zh-HK');
             }
-            if (response.data.preferLocale ==="zh-CN"){
+            if (response.data.preferLocale === "zh-CN") {
               // setLocale("zh-CN");
-              localStorage.setItem('locale','zh-CN');
+              localStorage.setItem('locale', 'zh-CN');
             }
-            if (response.data.preferLocale ==="en"){
+            if (response.data.preferLocale === "en") {
               // setLocale("zh-CN");
-              localStorage.setItem('locale','en');
+              localStorage.setItem('locale', 'en');
             }
           }
           dispatch(handleLogin(data))
@@ -123,9 +124,9 @@ const AuthLoginCustom = () => {
           console.log(error)
           // setSuccess(false)
           setOnLogin(false)
-          if(error.response!= undefined){
+          if (error.response != undefined) {
             setErrorMassage(error.response.data.error)
-          }else{
+          } else {
             setErrorMassage("CONNECTION_ERROR")
           }
           setOpen(true)
@@ -143,12 +144,12 @@ const AuthLoginCustom = () => {
     }),
     validationSchema: yup.object().shape({
       // username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱'),
-      username: yup.string().required(intl.formatMessage({id: 'requireUsername'})),
-      password: yup.string().min(8, intl.formatMessage({id: 'atLeast8CharPassword'})).required(intl.formatMessage({id: 'requirePassword'}))
-        .matches(/^(?=.*[a-z])/, intl.formatMessage({id: 'atLeastOneSmallLetter'}))
-        .matches(/^(?=.*[A-Z])/, intl.formatMessage({id: 'atLeastOneCapLetter'}))
-        .matches(/^(?=.*[0-9])/, intl.formatMessage({id: 'atLeast1Number'}))
-        .matches(/^(?=.*[!@#%&])/, intl.formatMessage({id: 'atLeast1SpecialChar'})),
+      username: yup.string().required(intl.formatMessage({ id: 'requireUsername' })),
+      password: yup.string().min(8, intl.formatMessage({ id: 'atLeast8CharPassword' })).required(intl.formatMessage({ id: 'requirePassword' }))
+        .matches(/^(?=.*[a-z])/, intl.formatMessage({ id: 'atLeastOneSmallLetter' }))
+        .matches(/^(?=.*[A-Z])/, intl.formatMessage({ id: 'atLeastOneCapLetter' }))
+        .matches(/^(?=.*[0-9])/, intl.formatMessage({ id: 'atLeast1Number' }))
+        .matches(/^(?=.*[!@#%&])/, intl.formatMessage({ id: 'atLeast1SpecialChar' })),
     }),
   });
 
@@ -201,7 +202,7 @@ const AuthLoginCustom = () => {
 
   const { handleSubmit } = useForm({})
 
-  const getQRWithIAmSmart = () => {
+  function getQRWithIAmSmart(){
     if (isAppBowser()) {
       openApp();
     } else {
@@ -217,10 +218,10 @@ const AuthLoginCustom = () => {
       + "&source=" + getBowserType()
       + "&redirectURI=" + encodeURIComponent(callbackUrl)
       + "&scope=" + encodeURIComponent("eidapi_auth eidapi_profiles")
-      +"&lang="+(locale === 'en' ?"en-US":locale === 'zh-HK' ?"zh-HK":"zh-CN")
+      + "&lang=" + (locale === 'en' ? "en-US" : locale === 'zh-HK' ? "zh-HK" : "zh-CN")
       //+"&state="
       + "&brokerPage=false"
-    window.location=url;
+    window.location = url;
   }
 
   const openApp = () => {
@@ -249,10 +250,10 @@ const AuthLoginCustom = () => {
       + "&source=" + getBowserType()
       + "&redirectURI=" + encodeURIComponent(callbackUrl)
       + "&scope=" + encodeURIComponent("eidapi_auth eidapi_profiles")
-      +"&lang="+(locale === 'en' ?"en-US":locale === 'zh-HK' ?"zh-HK":"zh-CN")
+      + "&lang=" + (locale === 'en' ? "en-US" : locale === 'zh-HK' ? "zh-HK" : "zh-CN")
       //+"&state="
       + "&brokerPage=true"
-    window.location=url;
+    window.location = url;
 
   }
 
@@ -265,7 +266,7 @@ const AuthLoginCustom = () => {
             <Stack spacing={1}>
               <InputLabel htmlFor="email-login">
                 <Typography variant="h5">
-                  <FormattedMessage id="userLoginName"/>
+                  <FormattedMessage id="userLoginName" />
                 </Typography>
               </InputLabel>
               <OutlinedInput
@@ -297,7 +298,7 @@ const AuthLoginCustom = () => {
           <Grid item xs={12}>
             <Stack spacing={1}>
               <InputLabel htmlFor="password-login"><Typography variant="h5">
-                <FormattedMessage id="userPassword"/>
+                <FormattedMessage id="userPassword" />
               </Typography></InputLabel>
               <OutlinedInput
                 fullWidth
@@ -335,9 +336,9 @@ const AuthLoginCustom = () => {
             <Grid container>
               <Grid item xs={12}>
                 <AnimateButton>
-                  {onLogin?
-                    <LoadingComponent disableText={true} alignItems="center"/>
-                  :
+                  {onLogin ?
+                    <LoadingComponent disableText={true} alignItems="center" />
+                    :
                     <Button disableElevation disabled={isButtonDisabled}
                       fullWidth size="large" type="submit" variant="contained" color="primary"
                       sx={{
@@ -349,7 +350,7 @@ const AuthLoginCustom = () => {
                         }
                       }}>
                       <Typography variant="h5">
-                        <FormattedMessage id="login"/>
+                        <FormattedMessage id="login" />
                       </Typography>
                     </Button>
                   }
@@ -357,17 +358,17 @@ const AuthLoginCustom = () => {
               </Grid>
               <Grid item xs={12}>
                 <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={1}>
-                  <Link component={RouterLink} to="/forgot/password" color="primary" sx={{textDecoration:"none"}}>
+                  <Link component={RouterLink} to="/forgot/password" color="primary" sx={{ textDecoration: "none" }}>
                     <Typography align="center" variant="h7">
-                      <FormattedMessage id="forgotUserPassword"/>?
+                      <FormattedMessage id="forgotUserPassword" />?
                     </Typography>
                   </Link>
                   <Typography align="center" variant="h7">
                     |
                   </Typography>
-                  <Link component={RouterLink} to="/forgot/username" color="primary" sx={{textDecoration:"none"}}>
+                  <Link component={RouterLink} to="/forgot/username" color="primary" sx={{ textDecoration: "none" }}>
                     <Typography align="center" variant="h7">
-                      <FormattedMessage id="forgotUsername"/>?
+                      <FormattedMessage id="forgotUsername" />?
                     </Typography>
                   </Link>
                 </Stack>
@@ -378,18 +379,18 @@ const AuthLoginCustom = () => {
             <Grid container>
               <Grid item xs={12}>
                 <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-                  <Button onClick={() => getQRWithIAmSmart()}  sx={{textTransform: 'none'}} color="iAmSmart" fullWidth size="large" variant="outlined" startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}>
-                    <Typography variant="h5">
-                      <FormattedMessage id="iAmSmartLogin"/>
-                    </Typography>
-                  </Button>
+                  <IAmSmartButton
+                    label={intl.formatMessage({ id: "iAmSmartLogin" })}
+                    onClickFun={getQRWithIAmSmart}
+                    fullWidth={true}
+                  />
                 </Stack>
               </Grid>
               <Grid item xs={12}>
                 <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-                  <Link href={intl.formatMessage({ id: "iamsmartLink" })} color="primary" sx={{textDecoration:"none"}}>
+                  <Link href={intl.formatMessage({ id: "iamsmartLink" })} color="primary" sx={{ textDecoration: "none" }}>
                     <Typography align="center" variant="h7">
-                      { intl.formatMessage({id: 'learnMore'})+" >"}
+                      {intl.formatMessage({ id: 'learnMore' }) + " >"}
                     </Typography>
                   </Link>
                 </Stack>
@@ -399,7 +400,7 @@ const AuthLoginCustom = () => {
           <Grid item xs={12}>
             <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
               <Button fullWidth size="large" variant="outlined" href="/register" ><Typography variant="h5">
-                <FormattedMessage id="createOrReActivate"/>
+                <FormattedMessage id="createOrReActivate" />
               </Typography></Button>
             </Stack>
           </Grid>

src/pages/authentication/auth-forms/IAmSmartFormWizard.js

@@ -85,7 +85,7 @@ const CustomFormWizard = (props) => {
     const handleMouseDownId = (event) => {
         event.preventDefault();
     };
-   
+
     const handleClickShowComId = () => {
         setshowComId(!showId);
     };
@@ -102,18 +102,18 @@ const CustomFormWizard = (props) => {
         }
     }, [selectedAddress4, selectedAddress5])
 
-    function getRequiredErrStr(fieldname){
-        return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""}));
+    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})+": ":""}));
+    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 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 ?? "",
@@ -213,6 +213,7 @@ const CustomFormWizard = (props) => {
             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 ?? "");
@@ -393,11 +394,11 @@ const CustomFormWizard = (props) => {
             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' }))),
+            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' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
+            captchaField: yup.string().max(5, getMaxErrStr(5)).required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
         }),
     });
 
@@ -442,17 +443,15 @@ const CustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} md={12} >
                                     <Grid container sx={{ mb: 1 }}>
-                                        <Stack direction="row">
-                                            <InputLabel htmlFor="idDocType-signup">
-                                                <Typography variant="h5" sx={{mr:1}}>
-                                                    <FormattedMessage id="HKIDcard" />: 
-                                                    {/* {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"} */}
-                                                </Typography>
-                                                <Typography variant="h5">
-                                                    {iAmSmartData?.idNo?.slice(0, 4)}
-                                                </Typography>
+
+                                        <InputLabel htmlFor="idDocType-signup">
+                                            <Typography variant="h5" 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">
-                                                    {showId ?iAmSmartData?.idNo?.slice(4):"****"}{showId ? '(' + iAmSmartData.checkDigit + ')' :null}
+                                                    {iAmSmartData?.idNo?.slice(0, 4)}{showId ? iAmSmartData?.idNo?.slice(4) : "****"}{showId ? '(' + iAmSmartData.checkDigit + ')' : null}
                                                 </Typography>
                                                 <IconButton
                                                     aria-label="toggle id visibility"
@@ -462,26 +461,27 @@ const CustomFormWizard = (props) => {
                                                     size="medium"
                                                 >
                                                     {showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
-                                                </IconButton>  
-                                            </InputLabel>
-                                        </Stack>
+                                                </IconButton>
+                                            </Stack>
+                                        </InputLabel>
+
                                     </Grid>
                                 </Grid>
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="enName-signup">
                                             <Typography variant="h5">
-                                                <FormattedMessage id="userEnglishName" />: {iAmSmartData.enName}
+                                                <FormattedMessage id="userEnglishName" />: {iAmSmartData.enName}{iAmSmartData.enName ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}
                                             </Typography>
-                                        </InputLabel>
 
+                                        </InputLabel>
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="chName-signup">
                                             <Typography variant="h5">
-                                                {intl.formatMessage({ id: 'userChineseName' })}: {iAmSmartData.chName}
+                                                {intl.formatMessage({ id: 'userChineseName' })}: {iAmSmartData.chName}{iAmSmartData.chName ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}
                                             </Typography>
                                         </InputLabel>
                                     </Stack>
@@ -492,7 +492,7 @@ const CustomFormWizard = (props) => {
                                             <Typography variant="h5">
                                                 <FormattedMessage id="formAddress" />
                                                 <span style={{ color: '#f10000' }}>*</span>
-                                                {iAmSmartData.address1 ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
+                                                {iAmSmartData.address1 !="" && iAmSmartData.address1 ==formik.values.address1 ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                             </Typography>
                                         </InputLabel>
                                         <OutlinedInput
@@ -553,7 +553,7 @@ const CustomFormWizard = (props) => {
                                             value={selectedAddress4}
                                             options={address4ComboList}
                                             disabled={checkCountry}
-                                            error={Boolean(districtErrStr!="")}
+                                            error={Boolean(districtErrStr != "")}
                                             onBlur={formik.handleBlur}
                                             getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
                                             onChange={(event, newValue) => {
@@ -625,7 +625,7 @@ const CustomFormWizard = (props) => {
                                                     <Typography variant="h5">
                                                         <FormattedMessage id="userContactEmail" />
                                                         <span style={{ color: '#f10000' }}>*</span>
-                                                        {iAmSmartData.email ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
+                                                        {iAmSmartData.email && iAmSmartData.email ==formik.values.email  ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                                     </Typography>
                                                 </InputLabel>
                                                 <OutlinedInput
@@ -671,7 +671,7 @@ const CustomFormWizard = (props) => {
                                                     error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)}
                                                     id="emailConfirm-login"
                                                     type="email"
-                                                    value={formik.values.emailConfirm.trim()}
+                                                    value={formik.values.emailConfirm}
                                                     name="emailConfirm"
                                                     // onBlur={formik.handleBlur}
                                                     onChange={formik.handleChange}
@@ -704,7 +704,7 @@ const CustomFormWizard = (props) => {
                                                             <Typography variant="h5">
                                                                 <FormattedMessage id="userContactNumber" />
                                                                 <span style={{ color: '#f10000' }}>*</span>
-                                                                {iAmSmartData.phone ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
+                                                                {iAmSmartData.phone && iAmSmartData.phone ==formik.values.phone && iAmSmartData.phoneCountryCode ==formik.values.phoneCountryCode  ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                                             </Typography>
                                                         </InputLabel>
                                                         <Stack direction="row">
@@ -852,9 +852,9 @@ const CustomFormWizard = (props) => {
                                     <Grid item xs={12} md={12}>
                                         <Grid container>
                                             <Grid item xs={12} md={12}>
-                                                <Typography variant="h5" height="80%" sx={{ textAlign: "left", overflow: "scroll", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
-                                                    
-                                                    <div style={{padding: 12}} dangerouslySetInnerHTML={{__html: intl.formatMessage({id: "termsAndCon"})}} />
+                                                <Typography variant="h5"  sx={{ textAlign: "left", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
+
+                                                    <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "termsAndCon" }) }} />
                                                 </Typography>
                                             </Grid>
                                         </Grid>
@@ -968,7 +968,7 @@ const CustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} md={12} >
                                     <Stack direction="row">
-                                        <Typography variant="h5" color={theme.palette.grey[600]} sx={{mr:1}}>
+                                        <Typography variant="h5" color={theme.palette.grey[600]} sx={{ mr: 1 }}>
                                             <FormattedMessage id="userIdDoc" />
                                         </Typography>
                                         <Typography variant="h5" name="preview-idDocType-1">
@@ -976,7 +976,7 @@ const CustomFormWizard = (props) => {
                                             {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
                                         </Typography>
                                         <Typography variant="h5" name="preview-idDocType-2">
-                                            {showComId ?formik?.values?.idNo?.slice(4):"****"}{showComId ? '(' + formik.values.checkDigit + ')' : null}
+                                            {showComId ? formik?.values?.idNo?.slice(4) : "****"}{showComId ? '(' + formik.values.checkDigit + ')' : null}
                                             {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
                                         </Typography>
                                         <IconButton
@@ -987,10 +987,9 @@ const CustomFormWizard = (props) => {
                                             size="medium"
                                         >
                                             {showComId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
-                                        </IconButton>   
+                                        </IconButton>
                                     </Stack>
                                 </Grid>
-
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="h5" color={theme.palette.grey[600]}>
@@ -999,6 +998,7 @@ const CustomFormWizard = (props) => {
                                         <Typography variant="h5" 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}>

src/translations/en.json

@@ -113,11 +113,11 @@
 
   "login": "Login",
   "logout": "Logout",
-  "iAmSmartLogin": "iAM Smart Login",
+  "iAmSmartLogin": "Login with iAM Smart",
   "continueWithIAmSmart": "Continue with iAM Smart",
   "authorizeIAmSmartForInfo": "Authorize iAmSmart to provide personal information",
   "iAmSmartSubTitle": "In order to complete the account opening and establish a connection with \"iAmStart\", please authorize \"iAmSmart\" to provide the following personal information:",
-  "iAmSmartAutoFillIn": "Use \"iAmSmart\" to automatically fill in",
+  "iAmSmartAutoFillIn": "Open iAM Smart",
   "register": "Register",
   "userLoginName": "Username",
   "userPassword": "Password",

src/translations/zh-CN.json

@@ -115,7 +115,7 @@
   "continueWithIAmSmart": "以「智方便」继续",
   "authorizeIAmSmartForInfo": "授权「智方便」提供个人资料",
   "iAmSmartSubTitle": "为完成开户并建立与「智方便」的连接，请授权「智方便」提供以下个人资料：",
-  "iAmSmartAutoFillIn": "使用「智方便」自动填表",
+  "iAmSmartAutoFillIn": "开启智方便",
   "register": "申请",
   "userLoginName": "用户登入名称",
   "userPassword": "密码",

src/translations/zh-HK.json

@@ -115,7 +115,7 @@
   "continueWithIAmSmart": "以「智方便」繼續",
   "authorizeIAmSmartForInfo": "授權「智方便」提供個人資料",
   "iAmSmartSubTitle": "為完成開戶並建立與「智方便」的連接，請授權「智方便」提供以下個人資料：",
-  "iAmSmartAutoFillIn": "使用「智方便」自動填表",
+  "iAmSmartAutoFillIn": "開啟智方便",
   "register": "申請",
   "userLoginName": "用戶登入名稱",
   "userPassword": "密碼",