update main bar i18n

src/layout/MainLayout/Header/index.js

@@ -141,10 +141,14 @@ function Header(props) {
           </Typography></Link>
         </li>
         <li>
-          <Link className="myDocumet" to='/publicNotice'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>我的公共啟事</Typography></Link>
+          <Link className="myDocumet" to='/publicNotice'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+            <FormattedMessage id="myPublicNotice"/>
+          </Typography></Link>
         </li>
         <li>
-          <Link className="documentRecord" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>校對記錄</Typography></Link>
+          <Link className="documentRecord" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+            <FormattedMessage id="proofRecord"/>
+          </Typography></Link>
         </li>
         <li>
           {isPrimaryLoggedIn() ?
@@ -152,7 +156,9 @@ function Header(props) {
               <Link className="paymentRecord"><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>付款記錄</Typography></Link>
               <ul className='dropdown'>
                 <li>
-                  <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>網上付款記錄</Typography></Link>
+                  <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+                    <FormattedMessage id="onlinePaymentHistory"/>
+                  </Typography></Link>
                 </li>
                 <li>
                   <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>繳款通知記錄</Typography></Link>
@@ -160,13 +166,15 @@ function Header(props) {
               </ul>
             </>
             :
-            <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>網上付款記錄</Typography></Link>
+            <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+              <FormattedMessage id="onlinePaymentHistory"/>
+            </Typography></Link>
           }
         </li>
         <li>
           <Link className="userSetting" >
             <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} onClick={(event) => console.log(event)}>
-              設定
+              <FormattedMessage id="setting"/>
             </Typography>
             <KeyboardArrowDownIcon sx={{fontSize: '1.0rem'}}/>
           </Link>
@@ -174,7 +182,11 @@ function Header(props) {
             <ul className='dropdown'>
 
               <li>
-                <Link className="manageOrgUser" to='setting/manageUser'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>公司/機構用戶記錄</Typography></Link>
+                <Link className="manageOrgUser" to='setting/manageUser'>
+                  <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
+                    <FormattedMessage id="companyOrUserRecord"/>
+                  </Typography>
+                </Link>
               </li>
             </ul>
             :
@@ -190,10 +202,18 @@ function Header(props) {
   const logoutContent = (
     <div>
       <li>
-        <Link className="login" to='/login'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>登入</Typography></Link>
+        <Link className="login" to='/login'>
+          <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
+            <FormattedMessage id="login"/>
+          </Typography>
+        </Link>
       </li>
       <li>
-        <Link className="register" to='/register'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>申請</Typography></Link>
+        <Link className="register" to='/register'>
+          <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
+            <FormattedMessage id="register"/>
+          </Typography>
+        </Link>
       </li>
     </div>
   );

src/pages/Proof/Payment/Pay.js

@@ -34,6 +34,7 @@ import {
 } from "react";
 import {PNSPS_BUTTON_THEME, PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
+import {FormattedMessage} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
@@ -83,7 +84,9 @@ const Index = () => {
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>校對記錄</Typography>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                                    <FormattedMessage id="proofRecord"/>
+                                </Typography>
                             </Stack>
                         </div>
                     </Grid>

src/pages/Proof/Payment/Pay_Creditor.js

@@ -15,6 +15,7 @@ import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import {FormattedMessage} from "react-intl";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -66,7 +67,9 @@ const Index = () => {
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>校對記錄</Typography>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                                    <FormattedMessage id="proofRecord"/>
+                                </Typography>
                             </Stack>
                         </div>
                     </Grid>

src/pages/Proof/Reply_Public/index.js

@@ -20,6 +20,7 @@ const ApplicationDetails = Loadable(React.lazy(() => import('./ApplicationDetail
 const ProofForm = Loadable(React.lazy(() => import('./ProofForm')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import MainCard from "../../../components/MainCard";
+import {FormattedMessage} from "react-intl";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -86,7 +87,9 @@ const Index = () => {
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>校對記錄</Typography>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                                    <FormattedMessage id="proofRecord"/>
+                                </Typography>
                             </Stack>
                         </div>
                     </Grid>

src/pages/Proof/Search_Public/index.js

@@ -15,6 +15,7 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa
 const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
 const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import {FormattedMessage} from "react-intl";
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -83,7 +84,9 @@ const UserSearchPage_Individual = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">校對記錄</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4">
+                                <FormattedMessage id="proofRecord"/>
+                            </Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/PublicNotice/Details_Public/index.js

@@ -1,4 +1,4 @@
-import {
+import React, {
   useEffect,
   useState
 } from "react";
@@ -31,6 +31,7 @@ import { useNavigate } from "react-router-dom";
 
 import ForwardIcon from '@mui/icons-material/Forward';
 import { notifyActionSuccess } from "utils/CommonFunction";
+import {FormattedMessage} from "react-intl";
 
 // ==============================|| Body - DEFAULT ||============================== //
 
@@ -153,7 +154,9 @@ const DashboardDefault = () => {
       <Grid item xs={12}>
         <div style={BackgroundHead}>
           <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-            <Typography ml={15} color='#FFF' variant="h4">我的公共啟事</Typography>
+            <Typography ml={15} color='#FFF' variant="h4">
+              <FormattedMessage id="myPublicNotice"/>
+            </Typography>
           </Stack>
         </div>
       </Grid>

src/pages/PublicNotice/Details_Public/tabTableDetail/TabTable.js

@@ -13,6 +13,7 @@ import * as React from "react";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
+import {useIntl} from "react-intl";
 const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
 const ProofTab = Loadable(lazy(() => import('./ProofTab')));
 const PaymentTab = Loadable(lazy(() => import('./PaymentTab')));
@@ -25,7 +26,7 @@ const PublicNotice = ({ proofList, paymentList }) => {
     const [_paymentList, setPaymentList] = React.useState([]);
     const [onReady, setOnReady] = React.useState(false);
     const [selectedTab, setSelectedTab] = React.useState("1");
-
+    const intl = useIntl();
 
     const reloadPage = () => {
         window.location.reload(false);
@@ -55,7 +56,9 @@ const PublicNotice = ({ proofList, paymentList }) => {
                     <TabContext value={selectedTab}>
                         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                             <TabList onChange={handleChange} aria-label="lab API tabs example">
-                                <Tab label={"校對記錄(" + _proofList.length + ") "} value="1" />
+                                <Tab label={
+                                    intl.formatMessage({id: 'proofRecord'}) + "(" + _proofList.length + ") "} value="1"
+                                />
                                 <Tab label={"付款記錄(" + _paymentList.length + ") "} value="2" />
                                 
                             </TabList>

src/pages/PublicNotice/ListPanel/index.js

@@ -25,6 +25,7 @@ const SearchTab = Loadable(lazy(() => import('./SearchPublicNoticeTab')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
+import {FormattedMessage} from "react-intl";
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -106,7 +107,9 @@ const PublicNotice = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">我的公共啟事</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4">
+                                <FormattedMessage id="myPublicNotice"/>
+                            </Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/User/ManagePage_OrgPublic/index.js

@@ -12,6 +12,7 @@ import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
 import * as UrlUtils from "utils/ApiPathConst";
 import * as DateUtils from "utils/DateUtils";
+import {FormattedMessage} from "react-intl";
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -193,7 +194,9 @@ const ManageOrgUserPage = () => {
             <Grid item xs={12}>
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                        <Typography ml={15} color='#FFF' variant="h4">公司/機構用戶記錄</Typography>
+                        <Typography ml={15} color='#FFF' variant="h4">
+                            <FormattedMessage id="companyOrUserRecord"/>
+                        </Typography>
                     </Stack>
                 </div>
             </Grid>

src/pages/authentication/Login.js

@@ -5,7 +5,8 @@ import { Grid, Stack, Typography } from '@mui/material';
 
 // project import
 import Loadable from 'components/Loadable';
-import { lazy } from 'react';
+import React, { lazy } from 'react';
+import {FormattedMessage} from "react-intl";
 const AuthLogin = Loadable(lazy(() => import('./auth-forms/AuthLoginCustom')));
 const AuthWrapper = Loadable(lazy(() => import('./AuthWrapper')));
 // import AuthLogin from './auth-forms/AuthLoginCustom';
@@ -17,7 +18,9 @@ const Login = () => (
     <Grid container spacing={3}>
       <Grid item xs={12}>
         <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-          <Typography variant="h3">登入</Typography>
+          <Typography variant="h3">
+            <FormattedMessage id="login"/>
+          </Typography>
           {/* <Typography component={Link} to="/register" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
             Don&apos;t have an account?
           </Typography> */}

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

@@ -35,6 +35,7 @@ import axios from "axios";
 import {useDispatch} from "react-redux";
 import {handleLogin} from "auth/index";
 import { notifyActionSuccess } from 'utils/CommonFunction';
+import {FormattedMessage} from "react-intl";
 // ============================|| FIREBASE - LOGIN ||============================ //
 
 const AuthLogin = () => {
@@ -207,7 +208,7 @@ const AuthLogin = () => {
                 <AnimateButton>
                   <Button disableElevation onClick={tryLogin}
                           disabled={isSubmitting} fullWidth size="large" type="submit" variant="contained" color="primary">
-                    登入
+                    <FormattedMessage id="login"/>
                   </Button>
                 </AnimateButton>
               </Grid>

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

@@ -247,7 +247,9 @@ const AuthLoginCustom = () => {
           </Grid>
           <Grid item xs={12}>
             <Stack spacing={1}>
-              <InputLabel htmlFor="password-login"><Typography variant="h5">密碼</Typography></InputLabel>
+              <InputLabel htmlFor="password-login"><Typography variant="h5">
+                <FormattedMessage id="userPassword"/>
+              </Typography></InputLabel>
               <OutlinedInput
                 fullWidth
                 id="password-login"
@@ -292,7 +294,9 @@ const AuthLoginCustom = () => {
                     borderColor: "#e7e7e7"
                   }
                 }}>
-                <Typography variant="h5">登錄</Typography>
+                <Typography variant="h5">
+                  <FormattedMessage id="login"/>
+                </Typography>
               </Button>
             </AnimateButton>
           </Grid>

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

@@ -53,12 +53,12 @@ import LoopIcon from '@mui/icons-material/Loop';
 import { useTheme } from '@mui/material/styles';
 import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
-import {FormattedMessage} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
 //import { Invaild } from 'utils/IconUtils';
 // ============================|| FIREBASE - REGISTER ||============================ //
 
 const BusCustomFormWizard = (props) => {
-
+    const intl = useIntl();
     const theme = useTheme()
     const [level, setLevel] = useState();
     const [showPassword, setShowPassword] = useState(false);
@@ -602,7 +602,7 @@ const BusCustomFormWizard = (props) => {
                                                 props.setUsername(e.target.value)
                                                 formik.handleChange(e)
                                             }}
-                                            placeholder="用戶登入名稱"
+                                            placeholder={intl.formatMessage({id: 'userLoginName'})}
                                             fullWidth
                                             error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)}
                                             onBlur={formik.handleBlur}
@@ -633,7 +633,7 @@ const BusCustomFormWizard = (props) => {
                                                 <Stack direction="row" justifyContent="space-between">
                                                     <InputLabel htmlFor="password-signup">
                                                         <Typography variant="pnspsFormHeader">
-                                                            密碼
+                                                            <FormattedMessage id="userPassword"/>
                                                             <span style={{ color: '#f10000' }}>*</span>
                                                         </Typography>
                                                     </InputLabel>
@@ -662,7 +662,7 @@ const BusCustomFormWizard = (props) => {
                                                             </IconButton>
                                                         </InputAdornment>
                                                     }
-                                                    placeholder="密碼"
+                                                    placeholder={intl.formatMessage({id: 'userPassword'})}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
                                                         onKeyDown: (e) => {
@@ -1421,7 +1421,7 @@ const BusCustomFormWizard = (props) => {
                                 <Grid item xs={12} >
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            用戶登入名稱:
+                                            {intl.formatMessage({id: 'userLoginName'})}:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="preview-username-login">
                                             {formik.values.username}

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

@@ -52,11 +52,12 @@ import LoopIcon from '@mui/icons-material/Loop';
 import { useTheme } from '@mui/material/styles';
 import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
+import {FormattedMessage, useIntl} from "react-intl";
 
 // ============================|| FIREBASE - REGISTER ||============================ //
 
 const CustomFormWizard = (props) => {
-
+    const intl = useIntl();
     const theme = useTheme()
     const [level, setLevel] = useState();
     const [showPassword, setShowPassword] = useState(false);
@@ -675,7 +676,7 @@ const CustomFormWizard = (props) => {
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="username-signup">
                                             <Typography variant="pnspsFormHeader">
-                                                用戶登入名稱
+                                                <FormattedMessage id="userLoginName"/>
                                                 <span style={{ color: '#f10000' }}>*</span>
                                                 {/*<Button*/}
                                                 {/*    variant="contained"*/}
@@ -695,7 +696,7 @@ const CustomFormWizard = (props) => {
                                                 props.setUsername(e.target.value)
                                                 formik.handleChange(e)
                                             }}
-                                            placeholder="用戶登入名稱"
+                                            placeholder={intl.formatMessage({id: 'userLoginName'})}
                                             fullWidth
                                             error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)}
                                             onBlur={formik.handleBlur}
@@ -726,7 +727,7 @@ const CustomFormWizard = (props) => {
                                                 <Stack direction="row" justifyContent="space-between">
                                                     <InputLabel htmlFor="password-signup">
                                                         <Typography variant="pnspsFormHeader">
-                                                            密碼
+                                                            <FormattedMessage id="userPassword"/>
                                                             <span style={{ color: '#f10000' }}>*</span>
                                                         </Typography>
                                                     </InputLabel>
@@ -755,7 +756,7 @@ const CustomFormWizard = (props) => {
                                                             </IconButton>
                                                         </InputAdornment>
                                                     }
-                                                    placeholder="密碼"
+                                                    placeholder={intl.formatMessage({id: 'userPassword'})}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
                                                         onKeyDown: (e) => {
@@ -1590,7 +1591,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} >
                                     <Stack spacing={2} direction="row">
                                         <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
-                                            用戶登入名稱:
+                                            <FormattedMessage id="userLoginName"/>:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="preview-username-login">
                                             {formik.values.username}

src/translations/en.json

@@ -3,8 +3,18 @@
   "zh-HK": "繁體中文",
   "zh-CN": "简体中文",
 
-  "userLoginName": "User login name",
   "mainPage": "Main Page",
+  "myPublicNotice": "My Public Notice",
+  "proofRecord": "Proof Record",
+  "onlinePaymentHistory": "Online Payment History",
+  "setting": "Setting",
+  "companyOrUserRecord": "Company/Institutional User Records",
+
+  "login": "Login",
+  "register": "Register",
+  "userLoginName": "Username",
+  "userPassword": "Password",
+
 
   "Dashboard": "Dashboard",
   "event": "Event"

src/translations/zh-CN.json

@@ -3,8 +3,17 @@
   "zh-HK": "繁體中文",
   "zh-CN": "简体中文",
 
-  "userLoginName": "用戶登入名稱",
   "mainPage": "主页",
+  "myPublicNotice": "我的公共启事",
+  "proofRecord": "校对记录",
+  "onlinePaymentHistory": "网上付款记录",
+  "setting": "设置",
+  "companyOrUserRecord": "公司/机构用户记录",
+
+  "login": "登录",
+  "register": "申请",
+  "userLoginName": "用户登入名称",
+  "userPassword": "密码",
 
   "Dashboard": "仪表板",
   "event": "活动"

src/translations/zh-HK.json

@@ -3,8 +3,17 @@
   "zh-HK": "繁體中文",
   "zh-CN": "简体中文",
 
-  "userLoginName": "用戶登入名稱",
   "mainPage": "主頁",
+  "myPublicNotice": "我的公共啟事",
+  "proofRecord": "校對記錄",
+  "onlinePaymentHistory": "網上付款記錄",
+  "setting": "設定",
+  "companyOrUserRecord": "公司/機構用戶記錄",
+
+  "login": "登入",
+  "register": "申請",
+  "userLoginName": "用戶登入名稱",
+  "userPassword": "密碼",
 
   "Dashboard": "儀表板",
   "event": "活動"