update register page i18n

src/pages/Proof/Payment/Pay.js

@@ -123,7 +123,7 @@ const Index = () => {
                                             </Button>
                                         </ThemeProvider>
 
-                                        或
+                                        <FormattedMessage id="or"/>
 
                                         <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button

src/pages/authentication/RegisterCustom.js

@@ -12,14 +12,14 @@ import { Stack } from '../../../node_modules/@mui/material/index';
 import { iAmSmartPath, iAmSmartAppPath, clientId, getBowserType, isAppBowser, iAmSmartCallbackPath} from 'auth/utils'
 
 import * as React from 'react';
-import {FormattedMessage} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
 
 // ================================|| LOGIN ||================================ //
 
 const RegisterCustom = () => {
 
   const [isPopUp, setIsPopUp] = React.useState(false);
-
+  const intl = useIntl();
 
   const registerWithIAmSmart = () => {
     setIsPopUp(true);
@@ -83,15 +83,27 @@ const RegisterCustom = () => {
           <Box alignItems="center">
             <Grid container>
               <Grid item xs={12} md={12}>
-                <Typography mt={4} variant="h2">立即成為<strong style={{ color: '#FF5733' }}>憲報刊登公告</strong>用戶</Typography>
-                <Typography variant="body1">只需4-5分鐘</Typography>
+                <Typography mt={4} variant="h2">
+                  <FormattedMessage id="registerTitle1"/>
+                  <strong style={{ color: '#FF5733' }}>
+                    {" " + intl.formatMessage({id: 'registerTitle2'}) + " "}
+                  </strong>
+                  <FormattedMessage id="registerTitle3"/>
+                </Typography>
+                <Typography variant="body1">
+                  {intl.formatMessage({id: 'registerSubTitle'})}
+                </Typography>
               </Grid>
             </Grid>
             <Box mt={3} mb={3}>
               <Grid container >
                 <Grid item xs={12} md={6} sx={{ borderRight: 1, borderColor: 'grey.500' }}>
-                  <Typography mb={4} variant="h3">個人用戶</Typography>
-                  <Button variant="outlined" color="iAmSmart"  onClick={registerWithIAmSmart} startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}><Typography variant="h5">以「智方便」繼續</Typography></Button>
+                  <Typography mb={4} variant="h3">
+                    <FormattedMessage id="personalUser"/>
+                  </Typography>
+                  <Button variant="outlined" color="iAmSmart"  onClick={registerWithIAmSmart} startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}><Typography variant="h5">
+                    <FormattedMessage id="continueWithIAmSmart"/>
+                  </Typography></Button>
 
                   <Box mt={4} ml={2} mr={2} bgcolor="grey.100" p={1.5} >
                     <Typography textAlign='justify' variant="body1" display="block" gutterBottom>
@@ -103,9 +115,13 @@ const RegisterCustom = () => {
                     </Link>
                   </Box>
 
-                  <Typography m={5}>或</Typography>
+                  <Typography m={5}>
+                    <FormattedMessage id="or"/>
+                  </Typography>
 
-                  <Button href="/registerFrom" variant="contained"><Typography variant="h5">申請個人用戶</Typography></Button>
+                  <Button href="/registerFrom" variant="contained"><Typography variant="h5">
+                    <FormattedMessage id="registerNewPersonalUser"/>
+                  </Typography></Button>
 
                   <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{ fontWeight: 'bold' }} gutterBottom>
                     需上載身份證明文件數碼檔案以進行網上申請。
@@ -113,8 +129,12 @@ const RegisterCustom = () => {
                   </Typography>
                 </Grid>
                 <Grid item xs={12} md={6} sx={{ borderLeft: 1, borderColor: 'grey.500' }}>
-                  <Typography mb={4} variant="h3">機構／公司用戶</Typography>
-                  <Button href="/registerFromOrganization" variant="contained" sx={{ mt: 0.5 }}><Typography variant="h5">申請機構／公司用戶</Typography></Button>
+                  <Typography mb={4} variant="h3">
+                    <FormattedMessage id="businessUser"/>
+                  </Typography>
+                  <Button href="/registerFromOrganization" variant="contained" sx={{ mt: 0.5 }}><Typography variant="h5">
+                    <FormattedMessage id="registerNewBusinessUser"/>
+                  </Typography></Button>
                   <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{ fontWeight: 'bold' }} gutterBottom>
                     需上載以下任何一份證明文件以進行網上申請。
                     <br />如：商業登記證；專業執業證書
@@ -125,45 +145,57 @@ const RegisterCustom = () => {
           </Box>
         </Card >
       </center>
-      <Dialog open={isPopUp} onClose={() => setIsPopUp(false)}  >
+      <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' }
+            }
+          }}
+      >
         <DialogTitle></DialogTitle>
         <DialogContent>
           <Typography variant="h3" >
-            授權「智方便」提供個人資料
+            <FormattedMessage id="authorizeIAmSmartForInfo"/>
           </Typography>
           <Typography variant="h5" style={{ padding: '4px' }}>
-            為完成開戶並建立與「智方便」的連接，請授權「智方便」提供以下個人資料：
+            <FormattedMessage id="iAmSmartSubTitle"/>
           </Typography>
         </DialogContent>
         <DialogContent >
           <Grid container style={{ paddingLeft: '16px' }}>
             <Grid item xs={6} >
               <Typography style={{ padding: '4px' }}>
-                - 中文姓名
+                {"- " + intl.formatMessage({id: 'userChineseName'})}
               </Typography>
               <Typography style={{ padding: '4px' }}>
-                - 英文姓名
+                {"- " + intl.formatMessage({id: 'userEnglishName'})}
               </Typography>
               <Typography style={{ padding: '4px' }}>
-                - 身份證號碼
+                {"- " + intl.formatMessage({id: 'userIDNo'})}
               </Typography>
             </Grid>
             <Grid item xs={6} >
               <Typography style={{ padding: '4px' }}>
-                - 電郵地址
+                {"- " + intl.formatMessage({id: 'userEmailAddress'})}
               </Typography>
               <Typography style={{ padding: '4px' }}>
-                - 手機號碼
+                {"- " + intl.formatMessage({id: 'userPhoneNumber'})}
               </Typography>
               <Typography style={{ padding: '4px' }}>
-                - 住宅地址
+                {"- " + 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">使用「智方便」自動填表</Typography></Button>
-          <br />
+          <Button variant="outlined" onClick={getQRWithIAmSmart} startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}><Typography variant="h5">
+            <FormattedMessage id="iAmSmartAutoFillIn"/>
+          </Typography></Button>
+          <br/>
           <Link href="https://www.iamsmart.gov.hk/tc/">
             <FormattedMessage id="learnMore"/>
           </Link>

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

@@ -567,7 +567,9 @@ const BusCustomFormWizard = (props) => {
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                 <Button variant="outlined" type="reset" onClick={handleReset.bind(null, formik.resetForm)} sx={{ height: '40px' }}><Typography variant="pnspsFormHeader">重置</Typography></Button>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
-                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>成為新的機構/公司用戶</Typography>
+                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
+                                        <FormattedMessage id="becomeNewBusinessUser"/>
+                                    </Typography>
                                 </div>
                                 <Typography mt={0.25} variant="h6" sx={{ color: '#f10000' }}>註有*的項目必須輸入資料</Typography>
                                 <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary' }}>你的登入資料</Typography>
@@ -1407,7 +1409,9 @@ const BusCustomFormWizard = (props) => {
                         <Grid item xs={12}>
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
-                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>成為新的機構/公司用戶</Typography>
+                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
+                                        <FormattedMessage id="becomeNewBusinessUser"/>
+                                    </Typography>
                                 </div>
                                 {/* <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography> */}
                                 <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary' }}>你的登入資料</Typography>

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

@@ -664,7 +664,9 @@ const CustomFormWizard = (props) => {
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                 <Button variant="outlined" type="reset" onClick={handleReset.bind(null, formik.resetForm)} sx={{ height: '40px' }}><Typography variant="pnspsFormHeader">重置</Typography></Button>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
-                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>成為新的個人用戶</Typography>
+                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
+                                        <FormattedMessage id="becomeNewPersonalUser"/>
+                                    </Typography>
                                 </div>
                                 <Typography mt={0.25} variant="h6" sx={{ color: '#f10000' }}>註有*的項目必須輸入資料</Typography>
                                 <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary' }}>你的登入資料</Typography>
@@ -1040,7 +1042,7 @@ const CustomFormWizard = (props) => {
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="enName-signup">
                                             <Typography variant="pnspsFormHeader">
-                                                英文姓名
+                                                <FormattedMessage id="userEnglishName"/>
                                                 {selectedIdDocType.type === "CNID" ? "" : <span style={{ color: '#f10000' }}>*</span>}
                                             </Typography>
                                         </InputLabel>
@@ -1073,7 +1075,7 @@ const CustomFormWizard = (props) => {
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="chName-signup">
                                             <Typography variant="pnspsFormHeader">
-                                                中文姓名
+                                                <FormattedMessage id="userChineseName"/>
                                                 <span style={{ color: '#f10000' }}>*</span>
                                             </Typography>
                                         </InputLabel>
@@ -1577,7 +1579,9 @@ const CustomFormWizard = (props) => {
                         <Grid item xs={12} md={12}>
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
-                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>成為新的個人用戶</Typography>
+                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
+                                        <FormattedMessage id="becomeNewPersonalUser"/>
+                                    </Typography>
                                 </div>
                                 {/* <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography> */}
                                 <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary' }}>你的登入資料</Typography>
@@ -1638,7 +1642,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            英文姓名:
+                                            <FormattedMessage id="userEnglishName"/>:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="preview-enName-signup">
                                             {formik.values.enName}
@@ -1648,7 +1652,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            中文姓名:
+                                            <FormattedMessage id="userChineseName"/>:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="preview-chName-signup">
                                             {formik.values.chName}

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

@@ -38,12 +38,14 @@ import * as HttpUtils from "../../../utils/HttpUtils";
 import LoopIcon from '@mui/icons-material/Loop';
 import { useTheme } from '@mui/material/styles';
 import { useLocation } from "react-router-dom";
+import {FormattedMessage, useIntl} from "react-intl";
 
 // ============================|| FIREBASE - REGISTER ||============================ //
 
 const CustomFormWizard = (props) => {
     const location = useLocation();
     const theme = useTheme();
+    const intl = useIntl();
 
     const [iAmSmartData, setIAmSmartData] = useState({});
 
@@ -390,7 +392,9 @@ const CustomFormWizard = (props) => {
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
 
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
-                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>成為新的個人用戶</Typography><img src={iAmSmartICon} alt="iAM Smart" width="50" />
+                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
+                                        <FormattedMessage id="becomeNewPersonalUser"/>
+                                    </Typography><img src={iAmSmartICon} alt="iAM Smart" width="50" />
                                 </div>
 
                                 <Typography mt={0.25} variant="h6" sx={{ color: '#f10000' }}>註有*的項目必須輸入資料。</Typography>
@@ -420,7 +424,7 @@ const CustomFormWizard = (props) => {
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="enName-signup">
                                             <Typography variant="h5">
-                                                英文姓名: {iAmSmartData.enName}
+                                                <FormattedMessage id="userEnglishName"/>: {iAmSmartData.enName}
                                             </Typography>
                                         </InputLabel>
 
@@ -430,7 +434,7 @@ const CustomFormWizard = (props) => {
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="chName-signup">
                                             <Typography variant="h5">
-                                                中文姓名: {iAmSmartData.chName}
+                                                {intl.formatMessage({id: 'userChineseName'})}: {iAmSmartData.chName}
                                             </Typography>
                                         </InputLabel>
                                     </Stack>
@@ -876,7 +880,9 @@ const CustomFormWizard = (props) => {
                         <Grid item xs={12} md={12}>
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
-                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>成為新的個人用戶</Typography>
+                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
+                                        <FormattedMessage id="becomeNewPersonalUser"/>
+                                    </Typography>
                                 </div>
                             </Stack>
                         </Grid>
@@ -904,7 +910,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="h5" color={theme.palette.grey[600]}>
-                                            英文姓名:
+                                            <FormattedMessage id="userEnglishName"/>:
                                         </Typography>
                                         <Typography variant="h5" id="preview-enName-signup">
                                             {formik.values.enName}
@@ -914,7 +920,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="h5" color={theme.palette.grey[600]}>
-                                            中文姓名:
+                                            <FormattedMessage id="userChineseName"/>:
                                         </Typography>
                                         <Typography variant="h5" id="preview-chName-signup">
                                             {formik.values.chName}

src/translations/en.json

@@ -7,6 +7,12 @@
   "HKSARGOV": "HKSAR Government",
   "Gazette": "Gazette",
 
+  "registerTitle1": "Become",
+  "registerTitle2": "Gazette Notice",
+  "registerTitle3": "Publisher now",
+  "registerSubTitle": "Only takes 4-5 minutes",
+  "or": "or",
+
   "mainPage": "Main Page",
   "myPublicNotice": "My Public Notice",
   "proofRecord": "Proof Record",
@@ -16,13 +22,32 @@
 
   "login": "Login",
   "iAmSmartLogin": "iAmSmart Login",
+  "continueWithIAmSmart": "Continue with iAmSmart",
+  "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",
   "register": "Register",
   "userLoginName": "Username",
   "userPassword": "Password",
   "forgotUserPassword": "Forgot Password",
-  "learnMore": "Lean More",
+  "learnMore": "Learn More",
   "createOrReActivate": "Create/reactivate account",
 
+  "user": "User",
+  "personalUser": "Personal user",
+  "becomeNewPersonalUser": "Become New Personal User",
+  "registerNewPersonalUser": "Apply for personal user",
+  "businessUser": "Organization/Company User",
+  "registerNewBusinessUser": "Applying Organization/Company user",
+  "becomeNewBusinessUser": "Become New Organization/Company user",
+  "userName": "Username",
+  "userChineseName": "Chinese Name",
+  "userEnglishName": "English Name",
+  "userIDNo": "ID Card Number",
+  "userEmailAddress": "Email Address",
+  "userPhoneNumber": "Mobile Phone Number",
+  "userAddress": "Residential Address",
+
   "Dashboard": "Dashboard",
   "event": "Event"
 }

src/translations/zh-CN.json

@@ -7,6 +7,12 @@
   "HKSARGOV": "香港特别行政区政府",
   "Gazette": "宪报",
 
+  "registerTitle1": "立即成为",
+  "registerTitle2": "宪报刊登公告",
+  "registerTitle3": "用户",
+  "registerSubTitle": "只需4-5分钟",
+  "or": "或",
+
   "mainPage": "主页",
   "myPublicNotice": "我的公共启事",
   "proofRecord": "校对记录",
@@ -16,6 +22,10 @@
 
   "login": "登录",
   "iAmSmartLogin": "智方便登录",
+  "continueWithIAmSmart": "以「智方便」继续",
+  "authorizeIAmSmartForInfo": "授权「智方便」提供个人资料",
+  "iAmSmartSubTitle": "为完成开户并建立与「智方便」的连接，请授权「智方便」提供以下个人资料：",
+  "iAmSmartAutoFillIn": "使用「智方便」自动填表",
   "register": "申请",
   "userLoginName": "用户登入名称",
   "userPassword": "密码",
@@ -23,6 +33,21 @@
   "learnMore": "了解更多",
   "createOrReActivate": "建立/重新启动帐户",
 
+  "user": "用戶",
+  "personalUser": "個人用戶",
+  "becomeNewPersonalUser": "成为新的个人用户",
+  "registerNewPersonalUser": "申请个人用户",
+  "businessUser": "机构／公司用户",
+  "registerNewBusinessUser": "申请机构／公司用户",
+  "becomeNewBusinessUser": "成为新的机构／公司用户",
+  "userName": "用户名称",
+  "userChineseName": "中文姓名",
+  "userEnglishName": "英文姓名",
+  "userIDNo": "身份证号码",
+  "userEmailAddress": "电邮地址",
+  "userPhoneNumber": "手机号码",
+  "userAddress": "住宅地址",
+
   "Dashboard": "仪表板",
   "event": "活动"
 }

src/translations/zh-HK.json

@@ -7,6 +7,12 @@
   "HKSARGOV": "香港特別行政區政府",
   "Gazette": "憲報",
 
+  "registerTitle1": "立即成為",
+  "registerTitle2": "憲報刊登公告",
+  "registerTitle3": "用戶",
+  "registerSubTitle": "只需4-5分鐘",
+  "or": "或",
+
   "mainPage": "主頁",
   "myPublicNotice": "我的公共啟事",
   "proofRecord": "校對記錄",
@@ -16,6 +22,10 @@
 
   "login": "登入",
   "iAmSmartLogin": "智方便登入",
+  "continueWithIAmSmart": "以「智方便」繼續",
+  "authorizeIAmSmartForInfo": "授權「智方便」提供個人資料",
+  "iAmSmartSubTitle": "為完成開戶並建立與「智方便」的連接，請授權「智方便」提供以下個人資料：",
+  "iAmSmartAutoFillIn": "使用「智方便」自動填表",
   "register": "申請",
   "userLoginName": "用戶登入名稱",
   "userPassword": "密碼",
@@ -23,6 +33,21 @@
   "learnMore": "了解更多",
   "createOrReActivate": "建立/重新啟動帳戶",
 
+  "user": "用戶",
+  "personalUser": "個人用戶",
+  "becomeNewPersonalUser": "成為新的個人用戶",
+  "registerNewPersonalUser": "申請個人用戶",
+  "businessUser": "機構／公司用戶",
+  "registerNewBusinessUser": "申請機構／公司用戶",
+  "becomeNewBusinessUser": "成為新的機構／公司用戶",
+  "userName": "用戶名稱",
+  "userChineseName": "中文姓名",
+  "userEnglishName": "英文姓名",
+  "userIDNo": "身份證號碼",
+  "userEmailAddress": "電郵地址",
+  "userPhoneNumber": "手機號碼",
+  "userAddress": "住宅地址",
+
   "Dashboard": "儀表板",
   "event": "活動"
 }