alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Quellcode durchsuchen

Merge branch 'master' into paymentApi

master
Alex Cheung vor 1 Jahr
Ursprung
0b9b0095d0 350c546e13
Commit
72bf94d3a6
7 geänderte Dateien mit 179 neuen und 146 gelöschten Zeilen
Geteilte Ansicht
Diff-Optionen
Statistiken anzeigen Patch-Datei herunterladen Vergleichs-Datei herunterladen
  1. +32
    -0
      src/components/iAmSmartButton.js
  2. +57
    -57
      src/pages/authentication/RegisterCustom.js
  3. +48
    -47
      src/pages/authentication/auth-forms/AuthLoginCustom.js
  4. +38
    -38
      src/pages/authentication/auth-forms/IAmSmartFormWizard.js
  5. +2
    -2
      src/translations/en.json
  6. +1
    -1
      src/translations/zh-CN.json
  7. +1
    -1
      src/translations/zh-HK.json

+ 32
- 0
src/components/iAmSmartButton.js Datei anzeigen

@@ -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>
);
}

+ 57
- 57
src/pages/authentication/RegisterCustom.js Datei anzeigen

@@ -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>


+ 48
- 47
src/pages/authentication/auth-forms/AuthLoginCustom.js Datei anzeigen

@@ -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>


+ 38
- 38
src/pages/authentication/auth-forms/IAmSmartFormWizard.js Datei anzeigen

@@ -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}>


+ 2
- 2
src/translations/en.json Datei anzeigen

@@ -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",


+ 1
- 1
src/translations/zh-CN.json Datei anzeigen

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


+ 1
- 1
src/translations/zh-HK.json Datei anzeigen

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


Verfassen Vorschau
Laden…
Abbrechen
Speichern