Merge branch 'master'

src/layout/MainLayout/Header/index.js

@@ -41,7 +41,7 @@ import AdminLogo from 'components/AdminLogo';
 import MobileLogo from 'components/MobileLogo';
 import Profile from './HeaderContent/Profile';
 import "assets/style/navbarStyles.css";
-import { isUserLoggedIn, isGLDLoggedIn, isPrimaryLoggedIn } from "utils/Utils";
+import { isUserLoggedIn, isGLDLoggedIn, isPrimaryLoggedIn, isCreditorLoggedIn } from "utils/Utils";
 import { handleLogoutFunction } from 'auth/index';
 
 // assets
@@ -49,7 +49,7 @@ import { handleLogoutFunction } from 'auth/index';
 // import { AppBar } from '../../../../node_modules/@mui/material/index';
 import { Link } from "react-router-dom";
 import LocaleSelector from "./HeaderContent/LocaleSelector";
-import {FormattedMessage} from "react-intl";
+import { FormattedMessage } from "react-intl";
 
 const drawerWidth = 240;
 
@@ -83,13 +83,13 @@ function Header(props) {
           </Link>
         </li>
         <li>
-          <Link className="application" to='/application/search'><Typography style={{ opacity: 0.9 }}variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Application</Typography></Link>
+          <Link className="application" to='/application/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Application</Typography></Link>
         </li>
         <li>
           <Link className="proof" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Proof</Typography></Link>
         </li>
         <li>
-          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Payment</Typography><KeyboardArrowDownIcon sx={{fontSize: '1.0rem'}} /></Link>
+          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Payment</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
           <ul className='dropdown'>
             <li>
               <Link className="payment" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Payment Record</Typography></Link>
@@ -106,22 +106,22 @@ function Header(props) {
           </ul>
         </li>
         <li>
-          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Client</Typography><KeyboardArrowDownIcon sx={{fontSize: '1.0rem'}}/></Link>
+          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Client</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
           <ul className='dropdown'>
             <li>
-              <Link className="userSearchview" to='/userSearchview'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2,mt: 1, mb: 1}}>Users (GLD)</Typography></Link>
+              <Link className="userSearchview" to='/userSearchview'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users (GLD)</Typography></Link>
             </li>
             <li>
-              <Link className="indUser" to='/indUser'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2,mt: 1, mb: 1}}>Users (Individual)</Typography></Link>
+              <Link className="indUser" to='/indUser'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users (Individual)</Typography></Link>
             </li>
             <li>
-              <Link className="orgUser" to='/orgUser'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2,mt: 1, mb: 1 }}>Users (Organisation)</Typography></Link>
+              <Link className="orgUser" to='/orgUser'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users (Organisation)</Typography></Link>
             </li>
             <li>
-              <Link className="org" to='/org'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2,mt: 1, mb: 1 }}>Organisation</Typography></Link>
+              <Link className="org" to='/org'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Organisation</Typography></Link>
             </li>
             <li>
-              <Link className="usergroupSearchview" to='/usergroupSearchview'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2,mt: 1, mb: 1}}>User Group</Typography></Link>
+              <Link className="usergroupSearchview" to='/usergroupSearchview'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>User Group</Typography></Link>
             </li>
 
           </ul>
@@ -137,27 +137,32 @@ function Header(props) {
       <div id="individualUserContent">
         <li>
           <Link className="dashboard" to='/dashboard'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-            <FormattedMessage id="mainPage"/>
+            <FormattedMessage id="mainPage" />
           </Typography></Link>
         </li>
         <li>
           <Link className="myDocumet" to='/publicNotice'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-            <FormattedMessage id="myPublicNotice"/>
+            <FormattedMessage id="myPublicNotice" />
           </Typography></Link>
         </li>
         <li>
           <Link className="documentRecord" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-            <FormattedMessage id="proofRecord"/>
+            <FormattedMessage id="proofRecord" />
           </Typography></Link>
         </li>
         <li>
-          {isPrimaryLoggedIn() ?
+          {isCreditorLoggedIn() ?
             <>
-              <Link className="paymentRecord"><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>付款記錄</Typography></Link>
+              <Link className="paymentRecord">
+                <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+                  <FormattedMessage id="paymentHistory"/>
+                </Typography>
+                <KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} />
+              </Link>
               <ul className='dropdown'>
                 <li>
                   <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-                    <FormattedMessage id="onlinePaymentHistory"/>
+                    <FormattedMessage id="onlinePaymentHistory" />
                   </Typography></Link>
                 </li>
                 <li>
@@ -167,30 +172,38 @@ function Header(props) {
             </>
             :
             <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-              <FormattedMessage id="onlinePaymentHistory"/>
+              <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>
-          {!isPrimaryLoggedIn() ?
-            <ul className='dropdown'>
 
-              <li>
-                <Link className="manageOrgUser" to='setting/manageUser'>
-                  <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
-                    <FormattedMessage id="companyOrUserRecord"/>
-                  </Typography>
-                </Link>
-              </li>
-            </ul>
+          {isPrimaryLoggedIn() ?
+            <>
+              <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>
+              <ul className='dropdown'>
+                <li>
+                  <Link className="manageOrgUser" to='setting/manageUser'>
+                    <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
+                      <FormattedMessage id="companyOrUserRecord" />
+                    </Typography>
+                  </Link>
+                </li>
+              </ul>
+            </>
             :
-            <></>
+            <>
+              <Link className="userSetting" >
+                <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} onClick={(event) => console.log(event)}>
+                  <FormattedMessage id="setting" />
+                </Typography>
+              </Link>
+            </>
           }
         </li>
         {/* <li>
@@ -204,14 +217,14 @@ function Header(props) {
       <li>
         <Link className="login" to='/login'>
           <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
-            <FormattedMessage id="login"/>
+            <FormattedMessage id="login" />
           </Typography>
         </Link>
       </li>
       <li>
         <Link className="register" to='/register'>
           <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
-            <FormattedMessage id="register"/>
+            <FormattedMessage id="register" />
           </Typography>
         </Link>
       </li>
@@ -289,8 +302,11 @@ function Header(props) {
                   <Stack direction="row" justifyContent="flex-start" alignItems="center">
                     <Logo />
                     <Stack justifyContent="flex-start" alignItems="center">
-                      <span id="systemTitle">公共啟事提交</span>
-                      <span id="systemTitle">及繳費系統</span>
+                      {/*<span id="systemTitle">公共啟事提交</span>*/}
+                      {/*<span id="systemTitle">及繳費系統</span>*/}
+                      <span id="systemTitle">
+                        <FormattedMessage id="PNSPS" />
+                      </span>
                     </Stack>
                   </Stack>
                 </Box>
@@ -307,7 +323,7 @@ function Header(props) {
                   <Stack direction="row" justifyContent="flex-start" alignItems="center">
                     <MobileLogo />
                     <span id="mobileTitle" >
-                      <FormattedMessage id="PNSPS"/>
+                      <FormattedMessage id="PNSPS" />
                     </span>
                   </Stack>
                 </Box>
@@ -328,10 +344,10 @@ function Header(props) {
                 <Grid item>
                   <Grid container direction="row" >
                     {
-                      isGLDLoggedIn()?
-                      <Grid item/>
-                          :
-                      <LocaleSelector />
+                      isGLDLoggedIn() ?
+                        <Grid item />
+                        :
+                        <LocaleSelector />
                     }
                     <Profile />
                   </Grid>
@@ -350,7 +366,7 @@ function Header(props) {
               keepMounted: true, // Better open performance on mobile.
             }}
             sx={{
-              display: {sm: 'block', md: 'none' },
+              display: { sm: 'block', md: 'none' },
               '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
             }}
           >
@@ -372,7 +388,7 @@ function Header(props) {
                   <Logo />
                   <Stack justifyContent="flex-start" alignItems="center">
                     <span id="systemTitle">
-                      <FormattedMessage id="PNSPS"/>
+                      <FormattedMessage id="PNSPS" />
                     </span>
                   </Stack>
                 </Stack>
@@ -392,7 +408,7 @@ function Header(props) {
                   <MobileLogo />
                   <Stack justifyContent="flex-start" alignItems="center">
                     <span id="mobileTitle">
-                      <FormattedMessage id="PNSPS"/>
+                      <FormattedMessage id="PNSPS" />
                     </span>
                   </Stack>
 
@@ -412,7 +428,7 @@ function Header(props) {
                 <ul id="navbar" width="100%" >
                   {logoutContent}
                 </ul>
-                <LocaleSelector/>
+                <LocaleSelector />
 
                 {/* <Profile /> */}
               </Stack>

src/pages/DemandNote/Search/DataGrid.js

@@ -7,6 +7,7 @@ import {
     Box,
     Dialog, DialogTitle, DialogContent, DialogActions,
 } from '@mui/material';
+import DownloadIcon from '@mui/icons-material/Download';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
 import * as StatusUtils from "utils/statusUtils/DnStatus";
@@ -19,7 +20,7 @@ import * as UrlUtils from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SearchDemandNote({ recordList, reloadFun }) {
+export default function SearchDemandNote({ recordList, reloadFun, applySearch }) {
 
     const [isConfirmPopUp, setConfirmPopUp] = React.useState(false);
     const [isSendPopUp, setSendPopUp] = React.useState(false);
@@ -39,15 +40,22 @@ export default function SearchDemandNote({ recordList, reloadFun }) {
         navigate('/paymentPage/demandNote/details/' + params.id);
     };
 
+    const findReadyToSend=()=>{
+        const temp = {
+            status: 'pending',
+        };
+        applySearch(temp);
+    }
+
     const exportXml = () => {
         let idList = [];
         const datas = rows?.filter((row) =>
             selectedRowItems.includes(row.id)
         );
-        if(datas?.length<1){
+        if (datas?.length < 1) {
             setSelectonWarning(true);
             return;
-        }else if (datas?.length >= 100) {
+        } else if (datas?.length >= 100) {
             setIsErrorPopUp(true);
             return;
         }
@@ -55,10 +63,10 @@ export default function SearchDemandNote({ recordList, reloadFun }) {
             idList.push(datas[i].id);
         }
         HttpUtils.fileDownload({
-            method:'post',
+            method: 'post',
             url: UrlUtils.DEMAND_NOTE_EXPORT,
             params: {
-                dnIdList:idList
+                dnIdList: idList
             },
             onSuccess: function () {
                 notifyDownloadSuccess();
@@ -80,7 +88,7 @@ export default function SearchDemandNote({ recordList, reloadFun }) {
         const datas = rows?.filter((row) =>
             selectedRowItems.includes(row.id)
         );
-        if(datas?.length<1){
+        if (datas?.length < 1) {
             setSelectonWarning(true);
             return;
         }
@@ -106,16 +114,16 @@ export default function SearchDemandNote({ recordList, reloadFun }) {
             selectedRowItems.includes(row.id)
         );
         for (var i = 0; i < datas?.length; i++) {
-            let dnNo = datas[i].dnNo.replaceAll("-","");
+            let dnNo = datas[i].dnNo.replaceAll("-", "");
             dnMap[dnNo] = datas[i].id
         }
         let file = event.target.files[0];
         HttpUtils.postWithFiles({
-            url:UrlUtils.DEMAND_NOTE_ATTACH,
-            params:{
-                dnMap:dnMap
+            url: UrlUtils.DEMAND_NOTE_ATTACH,
+            params: {
+                dnMap: dnMap
             },
-            files:[file],
+            files: [file],
             onSuccess() {
                 setWait(false);
                 if (reloadFun) reloadFun();
@@ -130,7 +138,7 @@ export default function SearchDemandNote({ recordList, reloadFun }) {
         const datas = rows?.filter((row) =>
             selectedRowItems.includes(row.id)
         );
-        if(datas?.length<1){
+        if (datas?.length < 1) {
             setSelectonWarning(true);
             return;
         }
@@ -194,7 +202,7 @@ export default function SearchDemandNote({ recordList, reloadFun }) {
             width: 100,
             renderCell: (params) => {
                 return (<>
-                    {params?.value+"cm"}<br />
+                    {params?.value + "cm"}<br />
                     {params.row.column}
                 </>);
             }
@@ -234,8 +242,11 @@ export default function SearchDemandNote({ recordList, reloadFun }) {
         },
         {
             field: 'filename',
-            headerName: 'DN File',
-            width: 220,
+            //headerName: 'DN File',
+            renderHeader: () => (
+                <><DownloadIcon />DN File</>
+            ),
+            width: 250,
             renderCell: (params) => {
                 return <Button onClick={onDownloadClick(params)}><u>{params.row.filename}</u></Button>;
             },
@@ -245,7 +256,7 @@ export default function SearchDemandNote({ recordList, reloadFun }) {
             headerName: 'App Status',
             width: 175,
             renderCell: (params) => {
-                return [PublicNoteStatusUtils.getStatusByTextEng(params?.value,true)]
+                return [PublicNoteStatusUtils.getStatusByTextEng(params?.value, true)]
             },
         },
         {
@@ -272,7 +283,7 @@ export default function SearchDemandNote({ recordList, reloadFun }) {
                             const datas = rows?.filter((row) =>
                                 selectedRowItems.includes(row.id)
                             );
-                            if(datas.length==0){
+                            if (datas.length == 0) {
                                 setSelectonWarning(true);
                                 document.getElementById("uploadFileBtn").value = "";
                                 return;
@@ -290,6 +301,18 @@ export default function SearchDemandNote({ recordList, reloadFun }) {
                         </Button>
                     </label>
                 </Grid>
+                <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                    <Button
+                        size="large"
+                        variant="contained"
+                        onClick={findReadyToSend}
+                        sx={{
+                            textTransform: 'capitalize',
+                            alignItems: 'end'
+                        }}>
+                        <Typography variant="h5">Ready Send</Typography>
+                    </Button>
+                </Grid>
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <Button
                         size="large"
@@ -307,7 +330,7 @@ export default function SearchDemandNote({ recordList, reloadFun }) {
                     <Button
                         size="large"
                         variant="contained"
-                        onClick={()=>exportXml()}
+                        onClick={() => exportXml()}
                         sx={{
                             textTransform: 'capitalize',
                             alignItems: 'end'
@@ -348,16 +371,16 @@ export default function SearchDemandNote({ recordList, reloadFun }) {
                 />
             </Box>
             <div>
-                    <Dialog open={isErrorPopUp} onClose={() => setIsErrorPopUp(false)}  >
-                        <DialogTitle><Typography variant="h3">Action Fail</Typography></DialogTitle>
-                        <DialogContent style={{ display: 'flex', }}>
-                            <Typography variant="h4" style={{ padding: '16px' }}>Number of DN record must less than 100.<br/>Please edit search form.</Typography>
-                        </DialogContent>
-                        <DialogActions>
-                            <Button onClick={() => setIsErrorPopUp(false)}><Typography variant="h5">OK</Typography></Button>
-                        </DialogActions>
-                    </Dialog>
-                </div>
+                <Dialog open={isErrorPopUp} onClose={() => setIsErrorPopUp(false)}  >
+                    <DialogTitle><Typography variant="h3">Action Fail</Typography></DialogTitle>
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Typography variant="h4" style={{ padding: '16px' }}>Number of DN record must less than 100.<br />Please edit search form.</Typography>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={() => setIsErrorPopUp(false)}><Typography variant="h5">OK</Typography></Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
             <div>
                 <Dialog open={selectonWarning} onClose={() => setSelectonWarning(false)}  >
                     <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>

src/pages/DemandNote/Search/SearchForm.js

@@ -51,12 +51,6 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
         applySearch(temp);
     };
 
-    const findReadyToSend=()=>{
-        const temp = {
-            status: 'pending',
-        };
-        applySearch(temp);
-    }
 
     React.useEffect(() => {
         if (orgComboData && orgComboData.length > 0) {
@@ -264,20 +258,6 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
 
                     {/*last row*/}
                     <Grid container maxWidth justifyContent="flex-end">
-
-                        <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
-                            <Button
-                                size="large"
-                                variant="contained"
-                                onClick={findReadyToSend}
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
-                                <Typography variant="h5">Ready Send</Typography>
-                            </Button>
-                        </Grid>
-
                         <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                             <Button
                                 size="large"

src/pages/DemandNote/Search/index.js

@@ -122,6 +122,7 @@ const UserSearchPage_Individual = () => {
                         <EventTable
                             recordList={record}
                             reloadFun={getUserList}
+                            applySearch={applySearch}
                         />
                     </MainCard>
                 </Grid>

src/pages/DemandNote/Search_Public/DataGrid.js

@@ -9,10 +9,12 @@ import * as StatusUtils from "utils/statusUtils/DnStatus";
 import { FiDataGrid } from "components/FiDataGrid";
 
 import * as HttpUtils from "utils/HttpUtils";
+import {useIntl} from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchDemandNote({ recordList }) {
     const [rows, setRows] = React.useState(recordList);
+    const intl = useIntl();
 
     React.useEffect(() => {
         setRows(recordList);
@@ -34,7 +36,7 @@ export default function SearchDemandNote({ recordList }) {
         },
         {
             field: 'appNo',
-            headerName: '申請編號',
+            headerName: intl.formatMessage({id: 'applicationId'}),
             width: 150,
         },
         {
@@ -48,7 +50,7 @@ export default function SearchDemandNote({ recordList }) {
         },
         {
             field: 'status',
-            headerName: '狀態',
+            headerName: intl.formatMessage({id: 'status'}),
             width: 175,
             renderCell: (params) => {
                 return [StatusUtils.getStatus_Cht(params)]

src/pages/DemandNote/Search_Public/SearchForm.js

@@ -12,13 +12,13 @@ import * as React from "react";
 import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
-import {FormattedMessage} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
 }) => {
-
+    const intl = useIntl();
     const [type, setType] = React.useState([]);
     const [issueSelected, setIssueSelected] = React.useState({});
     const [issueCombo, setIssueCombo] = React.useState([]);
@@ -81,7 +81,9 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                     <Grid item xs={12}>
                         <CardContent sx={{ px: 2.5, pt: 3 }}>
                             <Grid item justifyContent="space-between" alignItems="center">
-                                <Typography variant="h5">搜尋</Typography>
+                                <Typography variant="h5">
+                                    <FormattedMessage id="search"/>
+                                </Typography>
                             </Grid>
                         </CardContent>
                     </Grid>
@@ -104,7 +106,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                                 }}
                                 renderInput={(params) => (
                                     <TextField {...params}
-                                        label="憲報期數"
+                                        label={intl.formatMessage({id: 'gazetteCount'})}
                                         InputLabelProps={{
                                             shrink: true
                                         }}
@@ -118,7 +120,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                                 fullWidth
                                 {...register("appNo")}
                                 id='appNo'
-                                label={"申請編號"}
+                                label={intl.formatMessage({id: 'applicationId'})}
                                 defaultValue={searchCriteria.appNo}
                                 InputLabelProps={{
                                     shrink: true
@@ -192,7 +194,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                                 renderInput={(params) => (
                                     <TextField
                                         {...params}
-                                        label="狀態"
+                                        label={intl.formatMessage({id: 'status'})}
                                     />
                                 )}
                                 InputLabelProps={{

src/pages/Organization/DetailPage/OrganizationCard.js

@@ -17,12 +17,13 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifySaveSuccess } from 'utils/CommonFunction';
+import {useIntl} from "react-intl";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
-
+    const intl = useIntl();
     const [creditorConfirmPopUp, setCreditorConfirmPopUp] = React.useState(false);
     const [nonCreditorConfirmPopUp, setNonCreditorConfirmPopUp] = React.useState(false);
 
@@ -371,7 +372,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 label: FieldUtils.notNullFieldLabel("District:"),
                                 valueName: "district",
                                 disabled: (!editMode && !createMode),
-                                dataList: ComboData.district,
+                                dataList: ComboData.district(intl),
                                 form: formik
                             })}
                         </Grid>

src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js

@@ -17,12 +17,13 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifyCreateSuccess } from 'utils/CommonFunction';
+import {useIntl} from "react-intl";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const OrganizationCard_loadFromUser = ({ userData, userId }) => {
-
+    const intl = useIntl();
     const [currentUserData, setCurrentUserData] = useState(userData);
     const navigate = useNavigate();
     const [onReady, setOnReady] = useState(false);
@@ -235,7 +236,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                         {FieldUtils.getComboField({
                             label: FieldUtils.notNullFieldLabel("District:"),
                             valueName: "district",
-                            dataList: ComboData.district,
+                            dataList: ComboData.district(intl),
                             form: formik
                         })}
                     </Grid>

src/pages/Payment/Card/index.js

@@ -22,6 +22,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%',
@@ -144,7 +145,7 @@ const Index = () => {
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                         <img src={getIcon()} width="80" height="80" alt={paymentData.type}></img>
                                         <br />
-                                        支付金額
+                                            <FormattedMessage id="payFee"/>
                                         <br />
                                         {"$HK " + paymentData.amount}
                                     </Typography>
@@ -160,7 +161,9 @@ const Index = () => {
                                                 cancelPayment();
                                             }}
                                             sx={{ m: 4 }}
-                                        >取消付款</Button>
+                                        >
+                                            <FormattedMessage id="payCancel"/>
+                                        </Button>
                                     </Typography>
                                 </Grid>
                             </center>

src/pages/Payment/Details_Public/DataGrid.js

@@ -10,6 +10,7 @@ import * as FormatUtils from "utils/FormatUtils"
 import { FiDataGrid } from "components/FiDataGrid";
 import * as DateUtils from "utils/DateUtils"
 import {useTheme} from "@emotion/react";
+import {FormattedMessage, useIntl} from "react-intl";
 // import * as Utils from "utils/Utils"
 // ==============================|| EVENT TABLE ||============================== //
 
@@ -18,6 +19,9 @@ export default function SearchPublicNoticeTable({ recordList }) {
     const [total, setTotal] = React.useState(0);
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+    const intl = useIntl();
+    const { locale } = intl;
+    //const intl = useIntl();
 
     React.useEffect(() => {
         const indexedData = recordList.map((obj, index) => ({ index_number: index + 1, ...obj }));
@@ -43,24 +47,25 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'appNo',
             field: 'appNo',
-            headerName:'項目',
+            headerName: intl.formatMessage({id: 'terms'}),
             width: isMdOrLg ? 'auto' : 300,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 let appNo = params.row.appNo;
                 // console.log(params)
-                return <div style={{ margin: 4, textAlign:"left"}}>憲報第6號副刊公告<br/>
+                return <div style={{ margin: 4, textAlign:"left"}}>
+                    <FormattedMessage id="gazetteSampleName"/><br/>
                     {isORGLoggedIn()?<>Care Of: {params.row.careOf}<br /></>:null}
-                    申請編號: {appNo}<br/>
-                    憲報日期: {DateUtils.dateStr_Cht(params.row.issueDate)}<br/>
-                    長度: {params.row.length+ " cm"}</div>
+                    <FormattedMessage id="applicationId"/>: {appNo}<br/>
+                    <FormattedMessage id="gazetteDate"/>: {locale === 'en' ? DateUtils.dateStr(params.row.issueDate) : DateUtils.dateStr_Cht(params.row.issueDate)}<br/>
+                    <FormattedMessage id="gazetteLength"/>: {params.row.length+ " cm"}</div>
             },
         },
         {
             id: 'fee',
             field: 'fee',
-            headerName: '金額 (HK$)',
-            width: 150,
+            headerName: intl.formatMessage({id: 'currencyPrice'}) + ' (HK$)',
+            width: 200,
             valueGetter: (params) => {
                 return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
             }
@@ -81,7 +86,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                 }}
             />
             <Typography align="right" variant="h4" sx={{mr:2}}>
-                付款總額:
+                <FormattedMessage id="payTotal"/>:
                 <span style={{ color: "blue", fontWeight: "bold", }}>
                     (HK$) {FormatUtils.currencyFormat(total)}
                 </span>

src/pages/Payment/Details_Public/PaymentDetails.js

@@ -13,6 +13,7 @@ import Loadable from 'components/Loadable';
 const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
 import DownloadIcon from '@mui/icons-material/Download';
+import {FormattedMessage} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const PaymentDetails = ({ formData,doPrint }) => {
 
@@ -48,7 +49,7 @@ const PaymentDetails = ({ formData,doPrint }) => {
                 content={false}
             >
                 <Typography variant="h5" sx={{ textAlign: "center", mb: 2, borderBottom: "1px solid black" }}>
-                    付款詳情
+                    <FormattedMessage id="payDetail"/>
                 </Typography>
                 <form>
                     <Grid container >
@@ -58,7 +59,7 @@ const PaymentDetails = ({ formData,doPrint }) => {
                                     <Grid container alignItems="center">
                                         <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right", alignItems: 'center', color: "#000000" }}>
                                             <FormLabel sx={{ color: "#000000" }}>
-                                                狀態:
+                                                <FormattedMessage id="status"/>:
                                             </FormLabel>
                                         </Grid>
                                         <Grid item xs={6} md={5} sx={{ ml:5,textAlign: "left" }}>
@@ -128,7 +129,7 @@ const PaymentDetails = ({ formData,doPrint }) => {
                                     <Grid container >
                                         <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                                付款總額:
+                                                <FormattedMessage id="payTotal"/>:
                                             </FormLabel>
                                         </Grid>
                                         <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
@@ -142,7 +143,7 @@ const PaymentDetails = ({ formData,doPrint }) => {
                                     <Grid container >
                                         <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                                付款方式:
+                                                <FormattedMessage id="payMethod"/>:
                                             </FormLabel>
                                         </Grid>
                                         <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
@@ -156,13 +157,15 @@ const PaymentDetails = ({ formData,doPrint }) => {
                                     <Grid container alignItems="center">
                                         <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                                付款收據:
+                                                <FormattedMessage id="payReceipt"/>:
                                             </FormLabel>
                                         </Grid>
                                         <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
                                                 <Button className="printHidden" variant="contained" sx={{ mt:2 }} onClick={doPrint}>
                                                     <DownloadIcon/>
-                                                    <Typography sx={{fontSize: "16px"}}>下載</Typography>
+                                                    <Typography sx={{fontSize: "16px"}}>
+                                                        <FormattedMessage id="download"/>
+                                                    </Typography>
                                                 </Button>
                                         </Grid>
                                     </Grid>

src/pages/Payment/Details_Public/index.js

@@ -18,6 +18,7 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa
 const PaymentDetails = Loadable(React.lazy(() => import('./PaymentDetails')));
 const DataGrid = Loadable(React.lazy(() => import('./DataGrid')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import {FormattedMessage} from "react-intl";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -92,7 +93,9 @@ const Index = () => {
                         <Grid className="printHidden" 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="payDetail"/>
+                                    </Typography>
                                 </Stack>
                             </div>
                         </Grid>

src/pages/Payment/FPS/AckPage.js

@@ -23,6 +23,7 @@ const PaymentDetails = Loadable(React.lazy(() => import('../Details_Public/Payme
 const DataGrid = Loadable(React.lazy(() => import('../Details_Public/DataGrid')));
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import {FormattedMessage} from "react-intl";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -159,7 +160,9 @@ const AckPage = () => {
                             <Grid className="printHidden" 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="publicNoticePaymentSuccess"/>
+                                        </Typography>
                                     </Stack>
                                 </div>
                             </Grid>
@@ -204,7 +207,9 @@ const AckPage = () => {
                             <Grid className="printHidden" 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="publicNoticePaymentCancel"/>
+                                        </Typography>
                                     </Stack>
                                 </div>
                             </Grid>
@@ -246,7 +251,9 @@ const AckPage = () => {
                             <Grid className="printHidden" 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="publicNoticePaymentFail"/>
+                                        </Typography>
                                     </Stack>
                                 </div>
                             </Grid>

src/pages/Payment/FPS/FPS.js

@@ -18,6 +18,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%',
@@ -253,7 +254,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 }}>公共啟事：FPS付款</Typography>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                                    <FormattedMessage id="publicNoticePaymentFPSPay"/>
+                                </Typography>
                             </Stack>
                         </div>
                     </Grid>
@@ -266,7 +269,7 @@ const Index = () => {
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                         <img src={FpsIcon} width="80" height="80" alt="FPS"></img>
                                         <br />
-                                        付款總額
+                                        <FormattedMessage id="payTotal"/>
                                         <br />
                                         {"HK$ " + currencyFormat(paymentData.amount)}
                                     </Typography>
@@ -318,7 +321,9 @@ const Index = () => {
                                                 cancelPayment();
                                             }}
                                             sx={{ m: 4 }}
-                                        >取消付款</Button>
+                                        >
+                                            <FormattedMessage id="payCancel"/>
+                                        </Button>
                                     </Typography>
                                 </Grid>
                             </center>

src/pages/Payment/FPS/FPSTest.js

@@ -17,6 +17,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%',
@@ -268,7 +269,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 }}>公共啟事：FPS付款</Typography>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                                    <FormattedMessage id="publicNoticePaymentFPSPay"/>
+                                </Typography>
                             </Stack>
                         </div>
                     </Grid>
@@ -281,7 +284,7 @@ const Index = () => {
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                         <img src={FpsIcon} width="80" height="80" alt="FPS"></img>
                                         <br />
-                                        支付金額
+                                            <FormattedMessage id="payFee"/>
                                         <br />
                                         {"$HK " + paymentData.amount}
                                     </Typography>
@@ -324,7 +327,9 @@ const Index = () => {
                                                 cancelPayment();
                                             }}
                                             sx={{ m: 4 }}
-                                        >取消付款</Button>
+                                        >
+                                            <FormattedMessage id="payCancel"/>
+                                        </Button>
                                     </Typography>
                                 </Grid>
                             </center>

src/pages/Payment/FPS/fpscallback.js

@@ -23,6 +23,7 @@ const PaymentDetails = Loadable(React.lazy(() => import('../Details_Public/Payme
 const DataGrid = Loadable(React.lazy(() => import('../Details_Public/DataGrid')));
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import {FormattedMessage} from "react-intl";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -146,7 +147,9 @@ const Fpscallback = () => {
                         <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="publicNoticePaymentSuccess"/>
+                                    </Typography>
                                 </Stack>
                             </div>
                         </Grid>
@@ -198,7 +201,9 @@ const Fpscallback = () => {
                         <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="publicNoticePaymentCancel"/>
+                                    </Typography>
                                 </Stack>
                             </div>
                         </Grid>
@@ -235,7 +240,9 @@ const Fpscallback = () => {
                         <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="publicNoticePaymentFail"/>
+                                    </Typography>
                                 </Stack>
                             </div>
                         </Grid>

src/pages/Payment/MultiPaymentWindow.js

@@ -30,10 +30,11 @@ import JcbIcon from "assets/images/icons/jcb.svg";
 import UnionPayIcon from "assets/images/icons/unionpay.svg";
 import PpsIcon from "assets/images/icons/ppshk.svg";
 import FpsIcon from "assets/images/icons/fps.svg";
+import {FormattedMessage, useIntl} from "react-intl";
 
 const MultiPaymentWindow = (props) => {
-
-  const windowTitle = "請選擇付款方式";
+  const intl = useIntl();
+  const windowTitle = intl.formatMessage({id: 'selectPaymentMethod'});
   // const [content, setContent] = useState();
   const [loadtTransactionData, setLoadtTransactionData] = useState({});
   const [loadAvailableMethodData, setLoadAvailableMethodData] = useState([]);
@@ -148,7 +149,7 @@ const MultiPaymentWindow = (props) => {
                     <center>
                         <Grid item xs={12} md={12} width="100%">
                               <Typography variant="h5" sx={{ textAlign: "left" }}>
-                                  交易參考編號: {transactionData.transactionid}
+                                <FormattedMessage id="transactionRefNo"/>: {transactionData.transactionid}
                               </Typography>
 
                               {/* <Typography variant="h5" sx={{ textAlign: "left" }}>
@@ -162,7 +163,7 @@ const MultiPaymentWindow = (props) => {
                                         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
                                           <Grid item>
                                               <Typography variant="h5" sx={{ textAlign: "left" }}>
-                                                  請選擇付款方法:
+                                                <FormattedMessage id="selectPaymentMethod"/>:
                                               </Typography>
                                           </Grid>
                                           <Grid item>
@@ -202,7 +203,7 @@ const MultiPaymentWindow = (props) => {
                                           <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                                             <Grid item>
                                               <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
-                                                已選擇付款方法:&nbsp;
+                                                <FormattedMessage id="selectedPaymentMethod"/>:&nbsp;
                                               </FormLabel>
                                             </Grid>
                                             <Grid item>
@@ -216,7 +217,7 @@ const MultiPaymentWindow = (props) => {
                                     </Grid>:
                                     <Grid container direction="row" justifyContent="center" alignItems="center">
                                       <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center"}}>
-                                        付款功能現在不可用。
+                                        <FormattedMessage id="paymentMethodNotAvailable"/>。
                                       </FormLabel>
                                     </Grid>
                               }
@@ -225,7 +226,7 @@ const MultiPaymentWindow = (props) => {
                             <Grid container >
                                 <Grid item>
                                     <Typography sx={{fontSize: "20px", color: "#000000", textAlign: "left" }}>
-                                        付款總額(HK$):&nbsp;
+                                      <FormattedMessage id="payTotal"/>(HK$):&nbsp;
                                     </Typography>
                                 </Grid>
                                 <Grid item>
@@ -246,12 +247,12 @@ const MultiPaymentWindow = (props) => {
       <Stack direction="row" justifyContent="space-around">
         <DialogActions>
           <Button variant="contained" onClick={() => props.setOpen(false)} autoFocus >
-            取消
+            <FormattedMessage id="cancel"/>
           </Button>
         </DialogActions>
         <DialogActions>
           <Button variant="contained" color="success" onClick={confirmPaymentHandle()} disabled={paymentMethod === ""}>
-            確認
+            <FormattedMessage id="confirm"/>
           </Button>
         </DialogActions>
       </Stack>

src/pages/Payment/PaymentCallback.js

@@ -20,6 +20,7 @@ const PaymentDetails = Loadable(React.lazy(() => import('./Details_Public/Paymen
 const DataGrid = Loadable(React.lazy(() => import('./Details_Public/DataGrid')));
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import {FormattedMessage} from "react-intl";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -162,7 +163,9 @@ const Index = () => {
                             <Grid className="printHidden" 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="publicNoticePaymentSuccess"/>
+                                        </Typography>
                                     </Stack>
                                 </div>
                             </Grid>
@@ -207,7 +210,9 @@ const Index = () => {
                             <Grid className="printHidden" 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="publicNoticePaymentCancel"/>
+                                        </Typography>
                                     </Stack>
                                 </div>
                             </Grid>
@@ -249,7 +254,9 @@ const Index = () => {
                             <Grid className="printHidden" 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="publicNoticePaymentFail"/>
+                                        </Typography>
                                     </Stack>
                                 </div>
                             </Grid>

src/pages/Payment/Search_Public/DataGrid.js

@@ -9,6 +9,7 @@ import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
 import {useTheme} from "@emotion/react";
+import {useIntl} from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -16,6 +17,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
     const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+    const intl = useIntl();
 
     const _sx = {
         padding: "4 2 4 2",
@@ -44,7 +46,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
     const columns = [
         {
             field: 'actions',
-            headerName: '付款編號',
+            headerName: intl.formatMessage({id: 'payId'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
@@ -55,7 +57,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'appNos',
             field: 'appNos',
-            headerName: '申請編號',
+            headerName: intl.formatMessage({id: 'applicationId'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
@@ -66,7 +68,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'transDateTime',
             field: 'transDateTime',
-            headerName: '付款日期',
+            headerName: intl.formatMessage({id: 'payDate'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -75,7 +77,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         },
         {
             field: 'action',
-            headerName: '付款狀況',
+            headerName: intl.formatMessage({id: 'payStatus'}),
             width: 150,
             renderCell: (params) => {
                 return PaymentStatus.getStatus_Cht(params);
@@ -84,7 +86,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'payAmount',
             field: 'payAmount',
-            headerName: '費用',
+            headerName: intl.formatMessage({id: 'fee'}),
             width: 150,
             valueGetter: (params) => {
                 return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";

src/pages/Payment/Search_Public/SearchForm.js

@@ -13,12 +13,12 @@ import * as DateUtils from "utils/DateUtils";
 import * as ComboData from "utils/ComboData";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
-import {FormattedMessage} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
-
+    const intl = useIntl();
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
     const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
@@ -68,7 +68,9 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center" >
-                        <Typography variant="h4">搜尋</Typography>
+                        <Typography variant="h4">
+                            <FormattedMessage id="search"/>
+                        </Typography>
                     </Grid>
                 </CardContent>
 
@@ -80,7 +82,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             fullWidth
                             {...register("code")}
                             id='code'
-                            label="申請編號:"
+                            label={intl.formatMessage({id: 'applicationId'}) + ":"}
                             defaultValue={searchCriteria.code}
                             InputLabelProps={{
                                 shrink: true
@@ -96,7 +98,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                     {...register("dateFrom")}
                                     id="dateFrom"
                                     type="date"
-                                    label="付款日期(從)"
+                                    label={intl.formatMessage({id: 'payDateFrom'})}
                                     defaultValue={searchCriteria.dateFrom}
                                     InputProps={{ inputProps: { max: maxDate } }}
                                     onChange={(newValue) => {
@@ -137,7 +139,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             fullWidth
                             {...register("tarnsNo")}
                             id='tarnsNo'
-                            label="付款編號:"
+                            label={intl.formatMessage({id: 'payId'})+":"}
                             defaultValue={searchCriteria.tarnsNo}
                             InputLabelProps={{
                                 shrink: true
@@ -163,7 +165,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             }}
                             renderInput={(params) => (
                                 <TextField {...params}
-                                    label="狀態"
+                                    label={intl.formatMessage({id: 'status'})}
                                 />
                             )}
                             InputLabelProps={{

src/pages/Payment/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})`,
@@ -68,7 +69,9 @@ const Index = () => {
                 <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="paymentHistory"/>
+                            </Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/Payment/index.js

@@ -31,6 +31,7 @@ import {
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {ThemeProvider} from "@emotion/react";
 import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
+import {FormattedMessage} from "react-intl";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -393,7 +394,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="publicNoticePayment"/>
+                        </Typography>
                     </Stack>
                 </div>
             </Grid>
@@ -418,7 +421,8 @@ const Index = () => {
                             // color="error"
                             onClick={() => paymentClick()}
                             sx={{ mt: 4 }}
-                        >付款
+                        >
+                        <FormattedMessage id="pay"/>
                     </Button>
                     <Button
                             component="span"
@@ -426,7 +430,8 @@ const Index = () => {
                             // color="error"
                             onClick={() => { navigate("/publicNotice") }}
                             sx={{ mt: 4 }}
-                        >取消
+                        >
+                        <FormattedMessage id="cancel"/>
                     </Button>
                     </ThemeProvider>
                 </Stack>
@@ -444,7 +449,9 @@ const Index = () => {
                         </Stack>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setExpiryDateErr(false)}><Typography variant="h5">關閉</Typography></Button>
+                        <Button onClick={() => setExpiryDateErr(false)}><Typography variant="h5">
+                            <FormattedMessage id="close"/>
+                        </Typography></Button>
                     </DialogActions>
                 </Dialog>
             </div>

src/pages/Proof/Payment/Pay.js

@@ -96,7 +96,7 @@ const Index = () => {
                             <center>
                                 <Grid item xs={12} md={8} >
                                     <Typography variant="h3" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
-                                        公共啟事：校對完成及付款
+                                        <FormattedMessage id="publicNoticePaymentProofDoneAndPaid"/>
                                     </Typography>
 
                                     <Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
@@ -156,16 +156,25 @@ const Index = () => {
                             }}
                         >
                             <DialogTitle>
-                                <Typography variant="h3" >確認付款</Typography>
+                                <Typography variant="h3" >
+                                    <FormattedMessage id="payConfirm"/>
+                                </Typography>
                             </DialogTitle>
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
-                                    <Typography variant="h4">總額(HK$): {FormatUtils.currencyFormat(fee)}</Typography>
+                                    <Typography variant="h4">
+                                        <FormattedMessage id="totalAmount"/>(HK$): {FormatUtils.currencyFormat(fee)}
+                                    </Typography>
                                 </Stack>
                             </DialogContent>
                             <DialogActions>
-                                <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">關閉</Typography></Button>
-                                <Button onClick={() => doPayment()}><Typography variant="h5">確認</Typography></Button>
+                                <Button onClick={() => setIsPopUp(false)}>
+                                    <Typography variant="h5">
+                                        <FormattedMessage id="close"/>
+                                    </Typography></Button>
+                                <Button onClick={() => doPayment()}><Typography variant="h5">
+                                    <FormattedMessage id="confirm"/>
+                                </Typography></Button>
                             </DialogActions>
                         </Dialog>
                     </div>

src/pages/Proof/Payment/Pay_Creditor.js

@@ -79,7 +79,7 @@ const Index = () => {
                             <center>
                                 <Grid item xs={12} md={8} >
                                     <Typography variant="h2" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
-                                        公共啟事：校對完成
+                                        <FormattedMessage id="publicNoticePaymentProofDone"/>
                                     </Typography>
 
 

src/pages/Proof/Reply_GLD/UploadFileTable.js

@@ -1,24 +1,26 @@
 // material-ui
-import * as React from 'react';
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import {
     DataGrid,
     GridActionsCellItem,
     GridRowModes
 } from "@mui/x-data-grid";
-import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
-import {useEffect} from "react";
+import * as React from 'react';
+import { useEffect } from "react";
 // import {useNavigate} from "react-router-dom";
 // import { useTheme } from '@mui/material/styles';
 import {
     Box,
     Stack
 } from '@mui/material';
+import {useIntl} from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UploadFileTable({recordList, setRecordList,}) {
     
     const [rows, setRows] = React.useState(recordList);
     const [rowModesModel,setRowModesModel] = React.useState({});
+    const intl = useIntl();
     // const theme = useTheme();
 
     // const navigate = useNavigate()

src/pages/Proof/Reply_Public/ApplicationDetails.js

@@ -17,10 +17,12 @@ import Loadable from 'components/Loadable';
 const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import FileList from "components/FileList"
+import {FormattedMessage, useIntl} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = ({ formData, }) => {
 
     const params = useParams();
+    const intl = useIntl();
 
     const [data, setData] = React.useState({});
     //const [proofId, setProofId] = React.useState();
@@ -65,7 +67,7 @@ const ApplicationDetailCard = ({ formData, }) => {
             content={false}
         >
             <Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
-                公共啟事：校對資料
+                <FormattedMessage id="publicNoticePaymentProofInfo"/>
             </Typography>
             <form>
                 <Grid container direction="column">
@@ -76,7 +78,9 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">申請編號:</Typography></FormLabel>
+                                        <FormLabel><Typography variant="h5">
+                                            <FormattedMessage id="applicationId"/>:
+                                        </Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
@@ -88,12 +92,14 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"left"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">申請狀態:</Typography></FormLabel>
+                                        <FormLabel><Typography variant="h5">
+                                            <FormattedMessage id="applyStatus"/>:
+                                        </Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormControl variant="outlined">
-                                            {StatusUtils.getStatusByText(data.appStatus)}
+                                            {StatusUtils.getStatusByTextIntl(data.appStatus, false, intl)}
                                         </FormControl>
                                     </Grid>
                                 </Grid>
@@ -105,7 +111,9 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">申請人:</Typography></FormLabel>
+                                        <FormLabel><Typography variant="h5">
+                                            <FormattedMessage id="applyPerson"/>:
+                                        </Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
@@ -123,7 +131,9 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">憲報期數:</Typography></FormLabel>
+                                        <FormLabel><Typography variant="h5">
+                                            <FormattedMessage id="FgazetteCount"/>:
+                                        </Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
@@ -138,7 +148,9 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">聯絡人:</Typography></FormLabel>
+                                        <FormLabel><Typography variant="h5">
+                                            <FormattedMessage id="contactPerson"/>:
+                                        </Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
@@ -166,7 +178,9 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems="left">
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">我的備註:</Typography></FormLabel>
+                                        <FormLabel><Typography variant="h5">
+                                            <FormattedMessage id="myRemarks"/>:
+                                        </Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
@@ -218,7 +232,9 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     </Grid>
                                     <Grid item xs={12} sm={3} md={3} lg={3}
                                         sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h5">應繳費用:</Typography>
+                                        <Typography variant="h5">
+                                            <FormattedMessage id="payFeeFor"/>:
+                                        </Typography>
                                     </Grid>
                                     <Grid item xs={12} sm={9} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h4" style={{ color: "#0049B8", fontWeight: "bold", }}>{FormatUtils.currencyFormat(data.fee)}</Typography>

src/pages/Proof/Reply_Public/ProofForm.js

@@ -24,13 +24,14 @@ import Loadable from 'components/Loadable';
 import { notifyActionSuccess } from 'utils/CommonFunction';
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
+import {FormattedMessage, useIntl} from "react-intl";
 const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const FormPanel = ({ formData }) => {
-
+    const intl = useIntl();
     const [data, setData] = React.useState({});
     const [attachments, setAttachments] = React.useState([]);
 
@@ -142,7 +143,7 @@ const FormPanel = ({ formData }) => {
             content={false}>
 
             <Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
-                公共啟事：校對回覆
+                <FormattedMessage id="publicNoticePaymentProofComment"/>
             </Typography>
 
             <form onSubmit={formik.handleSubmit}>
@@ -298,7 +299,9 @@ const FormPanel = ({ formData }) => {
             </form>
             <div>
                 <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
-                    <DialogTitle>注意</DialogTitle>
+                    <DialogTitle>
+                        <FormattedMessage id="attention"/>
+                    </DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>

src/pages/Proof/Reply_Public/UploadFileTable.js

@@ -13,6 +13,7 @@ import {
     Stack, useMediaQuery
 } from '@mui/material';
 import {useTheme} from "@emotion/react";
+import {useIntl} from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UploadFileTable({recordList, setRecordList,}) {
@@ -21,7 +22,7 @@ export default function UploadFileTable({recordList, setRecordList,}) {
     const [rowModesModel,setRowModesModel] = React.useState({});
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
-
+    const intl = useIntl();
     // const theme = useTheme();
 
     // const navigate = useNavigate()

src/pages/Proof/Reply_Public/index.js

@@ -30,13 +30,14 @@ const BackgroundHead = {
     backgroundColor: '#0C489E',
     backgroundPosition: 'right'
 }
+import {useIntl} from "react-intl";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
     const params = useParams();
     const navigate = useNavigate()
-
+    const intl = useIntl();
     const [record, setRecord] = React.useState();
     const [onReady, setOnReady] = React.useState(false);
 

src/pages/Proof/Search_Public/DataGrid.js

@@ -12,6 +12,7 @@ import {
     isORGLoggedIn,
   } from "utils/Utils";
 import {useTheme} from "@emotion/react";
+import {useIntl} from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -19,6 +20,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
     const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+    const intl = useIntl();
 
     const _sx = {
         padding: "4 2 4 2",
@@ -65,7 +67,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
     const columns = [
         {
             field: 'actions',
-            headerName: '校對編號',
+            headerName: intl.formatMessage({id: 'proofId'}),
             width: isMdOrLg ? 'auto' : 250,
             flex: isMdOrLg ? 1.5 : undefined,
             cellClassName: 'actions',
@@ -94,7 +96,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'created',
             field: 'created',
-            headerName: '校對日期',
+            headerName: intl.formatMessage({id: 'proofDate'}),
             width: isMdOrLg ? 'auto' : 250,
             flex: isMdOrLg ? 1.5 : undefined,
             valueGetter: (params) => {
@@ -116,7 +118,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'replyDate',
             field: 'replyDate',
-            headerName: '回覆日期',
+            headerName: intl.formatMessage({id: 'replyDate'}),
             width: isMdOrLg ? 'auto' : 250,
             flex: isMdOrLg ? 1.5 : undefined,
             valueGetter: (params) => {
@@ -125,7 +127,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         },
         {
             id: 'actions',
-            headerName: '狀態',
+            headerName: intl.formatMessage({id: 'status'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
@@ -135,7 +137,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'fee',
             field: 'fee',
-            headerName: '費用',
+            headerName: intl.formatMessage({id: 'fee'}),
             width: isMdOrLg ? 'auto' : 250,
             flex: isMdOrLg ? 1.5 : undefined,
             valueGetter: (params) => {

src/pages/Proof/Search_Public/SearchForm.js

@@ -14,13 +14,13 @@ import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
-import {FormattedMessage} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
 }) => {
-
+    const intl = useIntl();
     const [type, setType] = React.useState([]);
     const [status, setStatus] = React.useState(ComboData.proofStatus[0]);
     const [issueSelected, setIssueSelected] = React.useState({});
@@ -102,7 +102,9 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        <Typography variant="h4">搜尋</Typography>
+                        <Typography variant="h4">
+                            <FormattedMessage id="search"/>
+                        </Typography>
                     </Grid>
                 </CardContent>
 
@@ -113,7 +115,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                             fullWidth
                             {...register("refNo")}
                             id='refNo'
-                            label="校對編號:"
+                            label={intl.formatMessage({id: 'proofId'}) + ":"}
                             defaultValue={searchCriteria.refNo}
                             InputLabelProps={{
                                 shrink: true
@@ -126,7 +128,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                             fullWidth
                             {...register("code")}
                             id='code'
-                            label="申請編號:"
+                            label={intl.formatMessage({id: 'applicationId'}) + ":"}
                             defaultValue={searchCriteria.code}
                             InputLabelProps={{
                                 shrink: true
@@ -148,7 +150,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                             }}
                             renderInput={(params) => (
                                 <TextField {...params}
-                                    label="憲報期數"
+                                    label={intl.formatMessage({id: 'gazetteCount'})}
                                     InputLabelProps={{
                                         shrink: true
                                     }}
@@ -188,7 +190,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                                     {...register("dateFrom")}
                                     id="dateFrom"
                                     type="date"
-                                    label="校對日期(從)"
+                                    label={intl.formatMessage({id: 'proofDateFrom'})}
                                     defaultValue={searchCriteria.dateFrom}
                                     InputProps={{ inputProps: { max: maxDate } }}
                                     onChange={(newValue) => {
@@ -256,7 +258,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                             }}
                             renderInput={(params) => (
                                 <TextField {...params}
-                                    label="狀態"
+                                    label={intl.formatMessage({id: 'status'})}
                                 />
                             )}
                             InputLabelProps={{

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -23,7 +23,7 @@ import { useNavigate } from "react-router-dom";
 import { notifyActionSuccess } from 'utils/CommonFunction';
 import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
-import {useIntl} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -54,7 +54,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
         enableReinitialize: true,
         initialValues: loadedData,
         validationSchema: yup.object().shape({
-            contactPerson: yup.string().max(40, "不得超過 40 個字符").required('請輸入聯絡人'),
+            contactPerson: yup.string().max(40, "不得超過 40 個字符").required(intl.formatMessage({id: 'requireContactPerson'})),
             tel_countryCode: yup.string().min(3, intl.formatMessage({id: 'require3Number'})).required(intl.formatMessage({id: 'requireDialingCode'})),
             fax_countryCode: yup.string().min(3, intl.formatMessage({id: 'require3Number'})),
             phoneNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})).required(intl.formatMessage({id: 'requireContactNumber'})),
@@ -132,7 +132,9 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
             <Grid item xs={12} md={12} width="100%" >
                 <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="applyPublicNotice"/>
+                        </Typography>
                     </Stack>
                 </div>
             </Grid>
@@ -150,7 +152,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                         <Grid container spacing={1} sx={{ minHeight: '80vh' }} direction="row" justifyContent="flex-start" alignItems="center">
                             <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                 {FieldUtils.getTextField({
-                                    label: "聯絡人:",
+                                    label: intl.formatMessage({id: 'contactPerson'}) + ":",
                                     valueName: "contactPerson",
                                     form: formik,
                                     disabled: true
@@ -206,7 +208,9 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                 <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h5">稿件檔案 ({"檔案大小應<10MB"}):</Typography>
+                                        <Typography variant="h5">
+                                            <FormattedMessage id="draftFile"/> ({"檔案大小應<10MB"}):
+                                        </Typography>
                                     </Grid>
                                     <Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}>
                                         <input
@@ -244,7 +248,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                             }
                             <Grid item xs={12} md={12} lg={12}>
                                 {FieldUtils.getTextArea({
-                                    label: "備註:",
+                                    label: intl.formatMessage({id: 'extraMark'}) + ":",
                                     valueName: "remarks",
                                     form: formik,
                                     inputProps: { maxLength: 255 }
@@ -256,7 +260,9 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                     <Button
                                         variant="contained"
                                         type="submit"
-                                    >申請公共啟事</Button>
+                                    >
+                                        <FormattedMessage id="applyPublicNotice"/>
+                                    </Button>
                                     </ThemeProvider>
                                 </center>
                             </Grid>
@@ -266,7 +272,9 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
             </Grid>
             <div>
                 <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
-                    <DialogTitle>注意</DialogTitle>
+                    <DialogTitle>
+                        <FormattedMessage id="attention"/>
+                    </DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -40,7 +40,7 @@ import DownloadIcon from '@mui/icons-material/Download';
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import * as React from "react";
-import {FormattedMessage} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = (
     { applicationDetailData,
@@ -64,6 +64,7 @@ const ApplicationDetailCard = (
         // getValues
     } = useForm();
     const navigate = useNavigate();
+    const intl = useIntl();
 
     useEffect(() => {
         //if user data from parent are not null
@@ -157,7 +158,7 @@ const ApplicationDetailCard = (
                                             || currentApplicationDetailData.creditor}
                                         startIcon={<EditNoteIcon />}
                                     >
-                                        支付
+                                        <FormattedMessage id="payFor"/>
                                     </Button>
                                     : null
                             }
@@ -166,18 +167,17 @@ const ApplicationDetailCard = (
                                 onClick={cancelledClick()}
                                 color="edit"
                                 disabled={currentApplicationDetailData.status !== "submitted"}
-                                title={"取消"}
+                                title={intl.formatMessage({id: 'cancel'})}
                                 startIcon={<CloseIcon />}
                             >
-
-                                取消
+                                <FormattedMessage id="cancel"/>
                             </Button>
                             </ThemeProvider>
                         </Stack>
                     </Grid>
                 </Grid>
                 <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
-                    公共啟事申請資料
+                    <FormattedMessage id="publicNoticeDetailTitle"/>
                 </Typography>
                 <form>
                     <Grid container direction="column">
@@ -188,7 +188,9 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">申請編號:</Typography></FormLabel>
+                                            <FormLabel><Typography variant="h5">
+                                                <FormattedMessage id="applicationId"/>:
+                                            </Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
@@ -216,12 +218,14 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">申請狀態:</Typography></FormLabel>
+                                            <FormLabel><Typography variant="h5">
+                                                <FormattedMessage id="applyStatus"/>:
+                                            </Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={4} lg={4}>
                                             <FormControl variant="outlined">
-                                                {StatusUtils.getStatusByText(currentApplicationDetailData.status)}
+                                                {currentApplicationDetailData.status? StatusUtils.getStatusByTextIntl(currentApplicationDetailData.status, false,intl) : ""}
                                             </FormControl>
                                         </Grid>
                                         {
@@ -253,7 +257,9 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">申請人:</Typography></FormLabel>
+                                            <FormLabel><Typography variant="h5">
+                                                <FormattedMessage id="applyPerson"/>:
+                                            </Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
@@ -298,7 +304,9 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">憲報期數:</Typography></FormLabel>
+                                            <FormLabel><Typography variant="h5">
+                                                <FormattedMessage id="gazetteCount"/>:
+                                            </Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
@@ -330,7 +338,9 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">聯絡人:</Typography></FormLabel>
+                                            <FormLabel><Typography variant="h5">
+                                                <FormattedMessage id="contactPerson"/>:
+                                            </Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
@@ -358,7 +368,9 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">發布日期:</Typography></FormLabel>
+                                            <FormLabel><Typography variant="h5">
+                                                <FormattedMessage id="publishDate"/>:
+                                            </Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
@@ -440,7 +452,9 @@ const ApplicationDetailCard = (
                                             <Grid container alignItems={"center"}>
                                                 <Grid item xs={12} md={3} lg={3}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
-                                                    <FormLabel><Typography variant="h5">金額(HK$):</Typography></FormLabel>
+                                                    <FormLabel><Typography variant="h5">
+                                                        <FormattedMessage id="currencyPrice"/>(HK$):
+                                                    </Typography></FormLabel>
                                                 </Grid>
 
                                                 <Grid item xs={12} md={9} lg={9}>
@@ -508,7 +522,9 @@ const ApplicationDetailCard = (
                                             <Grid container direction="row">
                                                 <Grid item xs={12} sm={12} md={2.5} lg={1.6}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
-                                                    <FormLabel><Typography variant="h5">稿件檔案:</Typography></FormLabel>
+                                                    <FormLabel><Typography variant="h5">
+                                                        <FormattedMessage id="draftFile"/>:
+                                                    </Typography></FormLabel>
                                                 </Grid>
                                                 <Grid item xs={12} sm={12} md={9} lg={9} >
                                                     <Grid container direction="row" alignItems="center" justifyContent="flex-start">
@@ -528,11 +544,11 @@ const ApplicationDetailCard = (
                                                             <Button
                                                                 variant="contained"
                                                                 onClick={onDownloadClick()}
-                                                                title="下載"
+                                                                title={intl.formatMessage({id: 'download'})}
                                                                 color="save"
                                                                 startIcon={<DownloadIcon sx={{alignItems:"center"}}/>}
                                                             >
-                                                                下載
+                                                                <FormattedMessage id="download"/>
                                                             </Button>
                                                             </ThemeProvider>
                                                         </Grid>
@@ -560,7 +576,9 @@ const ApplicationDetailCard = (
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">備註:</Typography></FormLabel>
+                                        <FormLabel><Typography variant="h5">
+                                            <FormattedMessage id="extraMark"/>:
+                                        </Typography></FormLabel>
                                     </Grid>
                                     <Grid item xs={12} md={9} lg={9}>
                                         <Typography variant="h5">{currentApplicationDetailData.remarks}</Typography>
@@ -582,16 +600,24 @@ const ApplicationDetailCard = (
                             }}
                         >
                             <DialogTitle>
-                                <Typography variant="h3" >確認付款</Typography>
+                                <Typography variant="h3" >
+                                    <FormattedMessage id="payConfirm"/>
+                                </Typography>
                             </DialogTitle>
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
-                                    <Typography variant="h4">總額(HK$): {FormatUtils.currencyFormat(fee)}</Typography>
+                                    <Typography variant="h4">
+                                        <FormattedMessage id="totalAmount"/>(HK$): {FormatUtils.currencyFormat(fee)}
+                                    </Typography>
                                 </Stack>
                             </DialogContent>
                             <DialogActions>
-                                <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">關閉</Typography></Button>
-                                <Button onClick={() => doPayment()}><Typography variant="h5">確認</Typography></Button>
+                                <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">
+                                    <FormattedMessage id="close"/>
+                                </Typography></Button>
+                                <Button onClick={() => doPayment()}><Typography variant="h5">
+                                    <FormattedMessage id="confirm"/>
+                                </Typography></Button>
                             </DialogActions>
                         </Dialog>
                     </div>
@@ -607,7 +633,10 @@ const ApplicationDetailCard = (
                                 </Stack>
                             </DialogContent>
                             <DialogActions>
-                                <Button onClick={() => setErrorPopUp(false)}><Typography variant="h5">關閉</Typography></Button>
+                                <Button onClick={() => setErrorPopUp(false)}>
+                                    <Typography variant="h5">
+                                        <FormattedMessage id="close"/>
+                                    </Typography></Button>
                             </DialogActions>
                         </Dialog>
                     </div>

src/pages/PublicNotice/Details_Public/StatusChangeDialog.js

@@ -20,6 +20,7 @@ import { useFormik,FormikProvider } from 'formik';
 import * as yup from 'yup';
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
+import {FormattedMessage} from "react-intl";
 
 
 const StatusChangeDialog = (props) => {
@@ -83,7 +84,7 @@ const StatusChangeDialog = (props) => {
                 autoFocus
                 color="delete"
             >
-              取消
+              <FormattedMessage id="cancel"/>
             </Button>
           </DialogActions>
           <DialogActions>
@@ -93,7 +94,7 @@ const StatusChangeDialog = (props) => {
                 onClick={acceptedHandle()}
                 autoFocus
             >
-              確定
+              <FormattedMessage id="confirm"/>
             </Button>
           </DialogActions>
           </ThemeProvider>

src/pages/PublicNotice/Details_Public/index.js

@@ -31,7 +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";
+import {FormattedMessage, useIntl} from "react-intl";
 
 // ==============================|| Body - DEFAULT ||============================== //
 
@@ -44,7 +44,7 @@ const DashboardDefault = () => {
   const [proofList, setProofList] = useState([]);
   const [paymentList, setPaymentList] = useState([]);
   const navigate = useNavigate()
-
+  const intl = useIntl();
   //statusWindow
   const [open, setOpen] = useState(false);
   const [getStatus, setStatus] = useState("");

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

@@ -9,6 +9,7 @@ import * as FormatUtils from "utils/FormatUtils"
 import * as DateUtils from "utils/DateUtils"
 import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
 import {useTheme} from "@emotion/react";
+import {useIntl} from "react-intl";
 // import * as StatusUtils from "./PublicNoteStatusUtils";
 // ==============================|| EVENT TABLE ||============================== //
 
@@ -17,6 +18,7 @@ export default function SubmittedTab({ rows }) {
     const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+    const intl = useIntl();
 
     const handleEditClick = (params) => () => {
         navigate('/paymentPage/details/' + params.row.id);
@@ -25,7 +27,7 @@ export default function SubmittedTab({ rows }) {
     const columns = [
         {
             field: 'actions',
-            headerName: '付款編號',
+            headerName: intl.formatMessage({id: 'payId'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
@@ -36,7 +38,7 @@ export default function SubmittedTab({ rows }) {
         {
             id: 'transDateTime',
             field: 'transDateTime',
-            headerName: '付款日期',
+            headerName: intl.formatMessage({id: 'payDate'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -46,7 +48,7 @@ export default function SubmittedTab({ rows }) {
         {
             id: 'status',
             field: 'status',
-            headerName: '付款狀況',
+            headerName: intl.formatMessage({id: 'payStatus'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
@@ -56,7 +58,7 @@ export default function SubmittedTab({ rows }) {
         {
             id: 'payAmount',
             field: 'payAmount',
-            headerName: '費用',
+            headerName: intl.formatMessage({id: 'fee'}),
             width: 150,
             valueGetter: (params) => {
                 return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";

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

@@ -9,13 +9,15 @@ import * as ProofStatus from "utils/statusUtils/ProofStatus";
 import {FiDataGrid} from "components/FiDataGrid";
 import * as FormatUtils from "utils/FormatUtils"
 import {useTheme} from "@emotion/react";
+import {useIntl} from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function ProofTab({rows}) {
-
+    const intl = useIntl();
     const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+    const { locale } = intl;
 
     const handleEditClick = (params) => () => {
         navigate('/proof/reply/' + params.row.id);
@@ -25,7 +27,7 @@ export default function ProofTab({rows}) {
         {
            
             field: 'actions',
-            headerName: '校對編號',
+            headerName: intl.formatMessage({id: 'proofId'}),
             width: 200,
             cellClassName: 'actions',
             renderCell: (params) => {
@@ -34,17 +36,17 @@ export default function ProofTab({rows}) {
         },
         {
             id: 'actions',
-            headerName: '狀態',
+            headerName: intl.formatMessage({id: 'status'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
-                return ProofStatus.getStatus_Cht(params);
+                return locale === 'en' ? ProofStatus.getStatus_Eng(params) : ProofStatus.getStatus_Cht(params);
             },
         },
         {
             id: 'created',
             field: 'created',
-            headerName: '校對日期',
+            headerName: intl.formatMessage({id: 'proofDate'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -54,7 +56,7 @@ export default function ProofTab({rows}) {
         {
             id: 'replyDate',
             field: 'replyDate',
-            headerName: '回覆日期',
+            headerName: intl.formatMessage({id: 'replyDate'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -64,7 +66,7 @@ export default function ProofTab({rows}) {
         {
             id: 'fee',
             field: 'fee',
-            headerName: '費用',
+            headerName: intl.formatMessage({id: 'fee'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {

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

@@ -59,7 +59,7 @@ const PublicNotice = ({ proofList, paymentList }) => {
                                 <Tab label={
                                     intl.formatMessage({id: 'proofRecord'}) + "(" + _proofList.length + ") "} value="1"
                                 />
-                                <Tab label={"付款記錄(" + _paymentList.length + ") "} value="2" />
+                                <Tab label={ intl.formatMessage({id: 'paymentHistory'}) +"(" + _paymentList.length + ") "} value="2" />
                                 
                             </TabList>
                         </Box>

src/pages/PublicNotice/ListPanel/BaseGrid.js

@@ -6,18 +6,20 @@ import {
     Typography, useMediaQuery
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils"
-import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import {useNavigate} from "react-router-dom";
 import {
     isORGLoggedIn,
   } from "utils/Utils";
 import {useTheme} from "@emotion/react";
+import {getStatusIntl} from "utils/statusUtils/PublicNoteStatusUtils";
+import {FormattedMessage, useIntl} from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function BaseGrid({rows}) {
     const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+    const intl = useIntl();
 
     const handleDetailClick = (params) => () => {
         navigate('/publicNotice/'+ params.id);
@@ -29,14 +31,14 @@ export default function BaseGrid({rows}) {
         {
             id: 'appNo',
             field: 'appNo',
-            headerName: '申請編號',
+            headerName: intl.formatMessage({id: 'applicationId'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
         },
         {
             id: 'created',
             field: 'created',
-            headerName: '提交日期',
+            headerName: intl.formatMessage({id: 'submitDate'}),
             width: isMdOrLg ? 'auto' : 300,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter:(params)=>{
@@ -72,14 +74,16 @@ export default function BaseGrid({rows}) {
         {
             id: 'remarks',
             field: 'remarks',
-            headerName:  isORGLoggedIn()?"Care Of / 我的備註":"我的備註",
+            headerName:  isORGLoggedIn()?"Care Of / 我的備註": intl.formatMessage({id: 'myRemarks'}),
             width: isMdOrLg ? 'auto' : 400,
             flex: isMdOrLg ? 3 : undefined,
             renderCell: (params) => (
                 isORGLoggedIn()? 
                 <div>
                   <Typography>Care Of: {params.row.careOf}</Typography>
-                  <Typography>我的備註: {params.row.remarks}</Typography>
+                  <Typography>
+                      <FormattedMessage id="myRemarks"/>: {params.row.remarks}
+                  </Typography>
                 </div>:
                 <div>
                     <Typography>{params.row.remarks}</Typography>
@@ -89,11 +93,11 @@ export default function BaseGrid({rows}) {
         {
             id: 'status',
             field: 'status',
-            headerName: '狀態',
+            headerName: intl.formatMessage({id: 'status'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
-                return [StatusUtils.getStatus(params)]
+                return [getStatusIntl(params,intl)]
             },
         },
         {
@@ -102,7 +106,9 @@ export default function BaseGrid({rows}) {
             width: 160,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleDetailClick(params)}>查看詳細</Button>;
+                return <Button onClick={handleDetailClick(params)}>
+                    <FormattedMessage id="viewDetail"/>
+                </Button>;
             },
         }
     ];

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -21,6 +21,7 @@ import {
 } from "utils/Utils";
 import {ThemeProvider, useTheme} from "@emotion/react";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {FormattedMessage, useIntl} from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SubmittedTab({ rows }) {
@@ -35,6 +36,7 @@ export default function SubmittedTab({ rows }) {
     const [expiryDateErr, setExpiryDateErr] = React.useState(false);
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+    const intl = useIntl();
 
     //const [amount, setAmount] = React.useState(0);
     const navigate = useNavigate()
@@ -115,14 +117,14 @@ export default function SubmittedTab({ rows }) {
         {
             id: 'appNo',
             field: 'appNo',
-            headerName: '申請編號',
+            headerName: intl.formatMessage({id: 'applicationId'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
         },
         {
             id: 'created',
             field: 'created',
-            headerName: '提交日期',
+            headerName: intl.formatMessage({id: 'submitDate'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -158,14 +160,15 @@ export default function SubmittedTab({ rows }) {
         {
             id: 'remarks',
             field: 'remarks',
-            headerName: isORGLoggedIn() ? "Care Of / 我的備註" : "我的備註",
+            headerName: isORGLoggedIn() ? "Care Of / 我的備註" : intl.formatMessage({id: 'myRemarks'}),
             width: isMdOrLg ? 'auto' : 400,
             flex: isMdOrLg ? 3 : undefined,
             renderCell: (params) => (
                 isORGLoggedIn() ?
                     <div>
                         <Typography>Care Of: {params.row.careOf}</Typography>
-                        <Typography>我的備註: {params.row.remarks}</Typography>
+                        <Typography>
+                            <FormattedMessage id="myRemarks"/>: {params.row.remarks}</Typography>
                     </div> :
                     <div>
                         <Typography>{params.row.remarks}</Typography>
@@ -175,7 +178,7 @@ export default function SubmittedTab({ rows }) {
         {
             id: 'fee',
             field: 'fee',
-            headerName: '價錢',
+            headerName: intl.formatMessage({id: 'price'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
@@ -185,21 +188,23 @@ export default function SubmittedTab({ rows }) {
         {
             id: 'status',
             field: 'status',
-            headerName: '狀態',
+            headerName: intl.formatMessage({id: 'status'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
-                return [StatusUtils.getStatus(params)]
+                return [StatusUtils.getStatusIntl(params,intl)]
             },
         },
         {
             field: 'actions',
             type: 'actions',
             headerName: '',
-            width: 120,
+            width: 150,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleDetailClick(params)}>查看詳細</Button>;
+                return <Button onClick={handleDetailClick(params)}>
+                    <FormattedMessage id="viewDetail"/>
+                </Button>;
             },
         }
     ];
@@ -212,15 +217,21 @@ export default function SubmittedTab({ rows }) {
         );
         for (var i = 0; i < datas?.length; i++) {
             content.push(<>
-                <Stack direction="row" justifyContent="space-between"><Typography variant="h5">申請編號: {datas[i].appNo}</Typography>({DateUtils.datetimeStr(datas[i].created)})</Stack>
-                備註: {datas[i].remarks}
+                <Stack direction="row" justifyContent="space-between">
+                    <Typography variant="h5">
+                        <FormattedMessage id="applicationId"/>: {datas[i].appNo}
+                    </Typography>
+                    ({DateUtils.datetimeStr(datas[i].created)})
+                </Stack>
+                <FormattedMessage id="extraMark"/>: {datas[i].remarks}
                 <br /><br />
             </>);
 
             totalAmount += datas[i].fee;
         }
         content.push(<Typography variant="h5">
-            總額(HK$): {FormatUtils.currencyFormat(totalAmount)} <br /><br />
+            <FormattedMessage id="totalAmount"/>(HK$): {FormatUtils.currencyFormat(totalAmount)}
+            <br /><br />
         </Typography>);
         //setAmount(totalAmount);
         return content;
@@ -315,7 +326,7 @@ export default function SubmittedTab({ rows }) {
                     onClick={() => { handlePaymentBtn() }}
                     sx={{mt:2, ml:1}}
                 >
-                    付款
+                    <FormattedMessage id="pay"/>
                 </Button>
                 </ThemeProvider>
             </div>
@@ -333,7 +344,9 @@ export default function SubmittedTab({ rows }) {
                     }}
                 >
                     <DialogTitle>
-                        <Typography variant="h3" >確認付款</Typography>
+                        <Typography variant="h3" >
+                            <FormattedMessage id="payConfirm"/>
+                        </Typography>
                     </DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Stack direction="column" justifyContent="space-between">
@@ -341,8 +354,13 @@ export default function SubmittedTab({ rows }) {
                         </Stack>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">關閉</Typography></Button>
-                        <Button onClick={() => doPayment()}><Typography variant="h5">確認</Typography></Button>
+                        <Button onClick={() => setIsPopUp(false)}>
+                            <Typography variant="h5">
+                                <FormattedMessage id="close"/>
+                            </Typography></Button>
+                        <Button onClick={() => doPayment()}><Typography variant="h5">
+                            <FormattedMessage id="confirm"/>
+                        </Typography></Button>
                     </DialogActions>
                 </Dialog>
             </div>
@@ -359,8 +377,13 @@ export default function SubmittedTab({ rows }) {
                         </Stack>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setCheckCareOf(false)}><Typography variant="h5">關閉</Typography></Button>
-                        <Button onClick={() => afterWarningPayment()}><Typography variant="h5">確認</Typography></Button>
+                        <Button onClick={() => setCheckCareOf(false)}>
+                            <Typography variant="h5">
+                                <FormattedMessage id="close"/>
+                            </Typography></Button>
+                        <Button onClick={() => afterWarningPayment()}><Typography variant="h5">
+                            <FormattedMessage id="confirm"/>
+                        </Typography></Button>
                     </DialogActions>
                 </Dialog>
             </div>
@@ -377,7 +400,10 @@ export default function SubmittedTab({ rows }) {
                         </Stack>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setExpiryDateErr(false)}><Typography variant="h5">關閉</Typography></Button>
+                        <Button onClick={() => setExpiryDateErr(false)}>
+                            <Typography variant="h5">
+                                <FormattedMessage id="close"/>
+                            </Typography></Button>
                     </DialogActions>
                 </Dialog>
             </div>

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -15,14 +15,14 @@ import {
   } from "utils/Utils";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
-import {FormattedMessage} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
-
+    const intl = useIntl();
     const [type, setType] = React.useState([]);
-    const [status, setStatus] = React.useState([{ key: 0, label: 'All', labelCht: "全部", type: 'all' }]);
+    const [status, setStatus] = React.useState([{ key: 0, label: 'all', type: 'all' }]);
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
@@ -65,7 +65,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                 {/*row 1*/}
                 <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:marginBottom}}>
                     <Typography variant="pnspsFormTitle" >
-                        搜尋
+                        <FormattedMessage id="search"/>
                     </Typography>
                 </Grid>
                 {/*row 2*/}
@@ -75,7 +75,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             fullWidth
                             {...register("appNo")}
                             id='appNo'
-                            label="申請編號"
+                            label={intl.formatMessage({id: 'applicationId'})}
                             defaultValue={searchCriteria.appNo}
                             InputLabelProps={{
                                 shrink: true
@@ -89,7 +89,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             {...register("dateFrom")}
                             id="dateFrom"
                             type="date"
-                            label="提交日期(從)"
+                            label={intl.formatMessage({id: 'submitDateFrom'})}
                             defaultValue={searchCriteria.dateFrom}
                             InputProps={{ inputProps: { max: maxDate } }}
                             onChange={(newValue) => {
@@ -110,7 +110,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             {...register("dateTo")}
                             id="dateTo"
                             type="date"
-                            label="提交日期(到)"
+                            label={intl.formatMessage({id: 'submitDateTo'})}
                             defaultValue={searchCriteria.dateTo}
                             InputProps={{ inputProps: { min: minDate } }}
                             onChange={(newValue) => {
@@ -138,7 +138,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             fullWidth
                             {...register("contact")}
                             id="contact"
-                            label="聯絡人"
+                            label={intl.formatMessage({id: 'contactPerson'})}
                             defaultValue={searchCriteria.contact}
                             InputLabelProps={{
                                 shrink: true
@@ -160,7 +160,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             }
                             value={status}
                             // inputValue={status?.labelCht}
-                            getOptionLabel={(option) => option.labelCht}
+                            getOptionLabel={(option) => intl.formatMessage({id: option.label})}
                             onChange={(event, newValue) => {
                                 console.log(newValue)
                                 const findAllIndex = newValue.findIndex((ele) => {
@@ -182,7 +182,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             }}
                             renderInput={(params) => (
                                 <TextField {...params}
-                                    label="狀態"
+                                    label={intl.formatMessage({id: 'status'})}
                                     InputLabelProps={{
                                         shrink: true
                                     }}
@@ -224,7 +224,9 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             variant="contained"
                             type="submit"
                         >
-                            <Typography variant="pnspsButtonText">搜尋</Typography>
+                            <Typography variant="pnspsButtonText">
+                                <FormattedMessage id="search"/>
+                            </Typography>
                         </Button>
                     </Grid>
                     </ThemeProvider>

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js

@@ -12,6 +12,7 @@ import {
     isORGLoggedIn,
   } from "utils/Utils";
 import {useTheme} from "@emotion/react";
+import {FormattedMessage, useIntl} from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -19,6 +20,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
     const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+    const intl = useIntl();
 
     const handleDetailClick = (params) => () => {
         navigate('/publicNotice/'+ params.id);
@@ -32,14 +34,14 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'appNo',
             field: 'appNo',
-            headerName: '申請編號',
+            headerName: intl.formatMessage({id: 'applicationId'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
         },
         {
             id: 'created',
             field: 'created',
-            headerName: '提交日期',
+            headerName: intl.formatMessage({id: 'submitDate'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -75,14 +77,16 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'remarks',
             field: 'remarks',
-            headerName:  isORGLoggedIn()?"Care Of / 我的備註":"我的備註",
+            headerName:  isORGLoggedIn()?"Care Of / 我的備註": intl.formatMessage({id: 'myRemarks'}),
             width: isMdOrLg ? 'auto' : 400,
             flex: isMdOrLg ? 3 : undefined,
             renderCell: (params) => (
                 isORGLoggedIn()? 
                 <div>
                   <Typography>Care Of: {params.row.careOf}</Typography>
-                  <Typography>我的備註: {params.row.remarks}</Typography>
+                  <Typography>
+                      <FormattedMessage id="myRemarks"/>: {params.row.remarks}
+                  </Typography>
                 </div>:
                 <div>
                      <Typography>{params.row.remarks}</Typography>
@@ -92,10 +96,10 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'status',
             field: 'status',
-            headerName: '狀態',
-            width: 160,
+            headerName: intl.formatMessage({id: 'status'}),
+            width: 200,
             renderCell: (params) => {
-                return [StatusUtils.getStatus(params)]
+                return [StatusUtils.getStatusIntl(params, intl)]
             },
         },
         {
@@ -105,7 +109,9 @@ export default function SearchPublicNoticeTable({ recordList }) {
             width: 150,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleDetailClick(params)}>查看詳細</Button>;
+                return <Button onClick={handleDetailClick(params)}>
+                    <FormattedMessage id="viewDetail"/>
+                </Button>;
             },
         }
     ];

src/pages/PublicNotice/ListPanel/index.js

@@ -25,7 +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";
+import {FormattedMessage, useIntl} from "react-intl";
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -37,6 +37,7 @@ const PublicNotice = () => {
     const [isLoading, setLoding] = useState(true);
     const [selectedTab, setSelectedTab] = useState("1");
     const navigate = useNavigate();
+    const intl = useIntl();
 
     const _sx = {
         padding: "4 2 4 2",
@@ -118,7 +119,7 @@ const PublicNotice = () => {
                         <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                         <Box sx={{ mr: { md: "47px" } }}>
                             <Button variant="contained" onClick={() => { onBtnClick() }}>
-                                申請公共啟事
+                                <FormattedMessage id="applyPublicNotice"/>
                             </Button>
                         </Box>
                         </ThemeProvider>
@@ -132,10 +133,10 @@ const PublicNotice = () => {
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', }}>
                                     <TabList onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}>
-                                        <Tab label={"處理中 (" + submittedList?.length + ")"} value="1" />
-                                        <Tab label={"待發布 (" + pendingPublishList?.length + ")"} value="3" />
-                                        <Tab label={"待付款 (" + pendingPaymentList?.length + ")"} value="4" />
-                                        <Tab label="搜尋申請記錄" value="5" />
+                                        <Tab label={intl.formatMessage({id: 'processing'}) + " (" + submittedList?.length + ")"} value="1" />
+                                        <Tab label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList?.length + ")"} value="3" />
+                                        <Tab label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList?.length + ")"} value="4" />
+                                        <Tab label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" />
                                     </TabList>
                                 </Box>
                                 <TabPanel value="1">
@@ -169,10 +170,10 @@ const PublicNotice = () => {
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                                     <TabList onChange={handleChange} aria-label="lab API tabs example">
-                                        <Tab label={"處理中 (" + submittedList.length + ")"} value="1" />
-                                        <Tab label={"待付款 (" + pendingPaymentList.length + ")"} value="3" />
-                                        <Tab label={"待發布 (" + pendingPublishList.length + ")"} value="4" />
-                                        <Tab label="搜尋申請記錄" value="5" />
+                                        <Tab label={intl.formatMessage({id: 'processing'}) + " (" + submittedList.length + ")"} value="1" />
+                                        <Tab label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList.length + ")"} value="3" />
+                                        <Tab label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList.length + ")"} value="4" />
+                                        <Tab label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" />
                                     </TabList>
                                 </Box>
                                 <TabPanel value="1">

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -16,11 +16,13 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';
+import {useIntl} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
 
+    const intl = useIntl();
     const [currentUserData, setCurrentUserData] = useState(formData);
     const [editMode, setEditMode] = useState(false);
     const [locked, setLocked] = useState(false);
@@ -46,7 +48,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
             emailAddress: yup.string().email(intl.formatMessage({id: 'validEmailFormat'})).max(255).required(intl.formatMessage({id: 'requireEmail'})),
             identification: yup.string().min(7, "請輸入證件號碼").required('請輸入證件號碼'),
             checkDigit: yup.string().max(1).required('請輸入括號內的數字或字母').nullable(),
-            idDocType: yup.string().max(255).required('請輸入證件類別'),
+            idDocType: yup.string().max(255).required(intl.formatMessage({id: 'requireIdDocType'})),
             tel_countryCode: yup.string().min(3, intl.formatMessage({id: 'require3Number'})).required(intl.formatMessage({id: 'requireDialingCode'})),
             fax_countryCode: yup.string().min(3, intl.formatMessage({id: 'require3Number'})),
             phoneNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})).required(intl.formatMessage({id: 'requireContactNumber'})),
@@ -351,7 +353,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                             valueName: "identification",
                                                             disabled: (!editMode),
                                                             form: formik,
-                                                            placeholder: "證件號碼",
+                                                            placeholder: intl.formatMessage({id: 'idDocNumber'}),
                                                             inputProps: {
                                                                 maxLength: 7,
                                                                 onKeyDown: (e) => {
@@ -496,7 +498,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 {FieldUtils.getComboField({
                                     label: "District:",
                                     valueName: "district",
-                                    dataList: ComboData.district,
+                                    dataList: ComboData.district(intl),
                                     disabled: (!editMode),
                                     form: formik
                                 })}

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js

@@ -17,6 +17,7 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';
+import {useIntl} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -30,7 +31,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
     const [confirmAction, setConfirmAction] = React.useState();
     const [editMode, setEditMode] = React.useState(false);
     const [onReady, setOnReady] = React.useState(false);
-
+    const intl = useIntl();
     React.useEffect(() => {
         //if state data are ready and assign to different field
         // console.log(currentApplicationDetailData)
@@ -563,7 +564,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                 {FieldUtils.getComboField({
                                     label: "District:",
                                     valueName: "district",
-                                    dataList: ComboData.district,
+                                    dataList: ComboData.district(intl),
                                     disabled: true,
                                     form: formik
                                 })}

src/pages/User/ManagePage_OrgPublic/index.js

@@ -12,7 +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";
+import {FormattedMessage, useIntl} from "react-intl";
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -30,6 +30,7 @@ const BackgroundHead = {
 
 const ManageOrgUserPage = () => {
     const [rows, setRows] = React.useState([]);
+    const intl = useIntl();
 
     const _sx = {
         padding: "4 2 4 2",
@@ -164,7 +165,7 @@ const ManageOrgUserPage = () => {
         {
             field: 'actions',
             type: 'actions',
-            headerName: getHeader('狀態'),
+            headerName: getHeader(intl.formatMessage({id: 'status'})),
             flex: 1,
             cellClassName: 'actions',
             getActions: (params) => {

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

@@ -101,7 +101,7 @@ const BusCustomFormWizard = (props) => {
     const [checkEmail, setCheckEmail] = useState(false)
     const [checkEmailBlur, setCheckEmailBlur] = useState(false)
 
-    const address4ComboList = ComboData.district;
+    const address4ComboList = ComboData.district(intl);
     const address5ComboList = ComboData.country(intl);
     const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
         + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"

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

@@ -102,7 +102,7 @@ const CustomFormWizard = (props) => {
     const [checkEmailBlur, setCheckEmailBlur] = useState(false)
 
     const idDocTypeComboList = ComboData.idDocType;
-    const address4ComboList = ComboData.district;
+    const address4ComboList = ComboData.district(intl);
     const address5ComboList = ComboData.country(intl);
     const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
         + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"
@@ -626,7 +626,7 @@ const CustomFormWizard = (props) => {
                     }
                 }),
             checkDigit: yup.string().max(1).required(displayErrorMsg('請輸入括號內的數字或字母')),
-            idDocType: yup.string().max(255).required(displayErrorMsg('請輸入證件類別')),
+            idDocType: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireIdDocType'}))),
             phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
             // faxCountryCode: yup.string().min(3,'請輸入3位數字'),
             phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
@@ -789,7 +789,7 @@ const CustomFormWizard = (props) => {
                                                     </Grid>
                                                     <Grid item>
                                                         <Typography variant="subtitle1">
-                                                            {level?.label}
+                                                            <FormattedMessage id={level ? level?.label : "pwWeak" }/>
                                                         </Typography>
                                                     </Grid>
                                                 </Grid>
@@ -846,10 +846,10 @@ const CustomFormWizard = (props) => {
                                             <Grid container spacing={2} alignItems="center">
                                                 <Grid item sx={{mt:1}}>
                                                     <Typography variant="subtitle1">
-                                                        •至少8個字元，字元越多越好 <br />
-                                                        •字母和數字的混合<br />
-                                                        •英文字母大寫與小寫的混合<br />
-                                                        •至少包含一個特殊符號，例如，@ # ?
+                                                        •<FormattedMessage id="pwRemark1"/> <br />
+                                                        •<FormattedMessage id="pwRemark2"/><br />
+                                                        •<FormattedMessage id="pwRemark3"/><br />
+                                                        •<FormattedMessage id="pwRemark4"/>
                                                     </Typography>
                                                 </Grid>
                                             </Grid>
@@ -892,13 +892,13 @@ const CustomFormWizard = (props) => {
                                                     //value={selectedIdDocType}
                                                     size="small"
                                                     options={idDocTypeComboList}
-                                                    // getOptionLabel={(idDocTypeComboList) => idDocTypeComboList.label}
+                                                    getOptionLabel={(option) => intl.formatMessage({ id: option.label })}
                                                     onBlur={formik.handleBlur}
                                                     filterOptions={(options) => options}
                                                     inputValue={selectedIdDocInputType}
                                                     onChange={(event, newValue) => {
                                                         if (newValue != null ) {
-                                                            setSelectedIdDocInputType(newValue.label);
+                                                            setSelectedIdDocInputType(intl.formatMessage({ id: newValue.label }));
                                                             setSelectedIdDocType(newValue);
                                                             if (newValue.type !== "HKID") {
                                                                 formik.setFieldValue("checkDigit", "")
@@ -910,13 +910,13 @@ const CustomFormWizard = (props) => {
                                                     sx={{ "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
                                                     renderInput={(params) => <TextField
                                                         {...params}
-                                                        placeholder="證件類別"
+                                                        placeholder={intl.formatMessage({id: 'idDocType'})}
                                                     />}
                                                 />
                                                 {formik.touched.idDocType && (
                                                     selectedIdDocType === null ?
                                                         <FormHelperText error id="helper-text-idDocType-signup">
-                                                            請輸入證件類別
+                                                            <FormattedMessage id="requireIdDocType"/>
                                                         </FormHelperText> : ''
                                                 )}
                                             </Stack>
@@ -944,7 +944,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                 }
                                                             }}
-                                                            placeholder="證件號碼"
+                                                            placeholder={intl.formatMessage({id: 'idDocNumber'})}
                                                             fullWidth
                                                             sx={{ mr: 1 }}
                                                             error={Boolean(formik.touched.idNo && formik.errors.idNo)}
@@ -1024,7 +1024,7 @@ const CustomFormWizard = (props) => {
                                                                 }
                                                             }
                                                         }}
-                                                        placeholder="證件號碼"
+                                                        placeholder={intl.formatMessage({id: 'idDocNumber'})}
                                                         fullWidth
                                                         sx={{ mr: 1 }}
                                                         error={Boolean(formik.touched.idNo && formik.errors.idNo)}
@@ -1062,7 +1062,7 @@ const CustomFormWizard = (props) => {
                                             value={formik.values.enName}
                                             name="enName"
                                             onChange={formik.handleChange}
-                                            placeholder="與你的身份證明文件相同"
+                                            placeholder={intl.formatMessage({id: 'sameAsYourIdDoc'})}
                                             fullWidth
                                             error={Boolean(formik.touched.enName && formik.errors.enName && selectedIdDocType.type !== "CNID")}
                                             onBlur={formik.handleBlur}
@@ -1097,7 +1097,7 @@ const CustomFormWizard = (props) => {
                                             value={formik.values.chName.trim()}
                                             name="chName"
                                             onChange={formik.handleChange}
-                                            placeholder="與你的身份證明文件相同"
+                                            placeholder={intl.formatMessage({id: 'sameAsYourIdDoc'})}
                                             onBlur={formik.handleBlur}
                                             inputProps={{
                                                 maxLength: 6,
@@ -1464,12 +1464,16 @@ const CustomFormWizard = (props) => {
                                                 <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
                                                     <FormattedMessage id="userIdDoc"/>
                                                     <span style={{ color: '#f10000' }}>*</span></Typography>
-                                                <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography>
-                                                <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>如: 香港身份證; 護照; 中國內地身份證; 專業執業証書等</Typography>
+                                                <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
+                                                    <FormattedMessage id="pleaseUploadIdDoc"/>
+                                                </Typography>
+                                                <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
+                                                    <FormattedMessage id="pleaseUploadIdDocSubTitle"/>
+                                                </Typography>
                                                 <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                                     <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                                     <Button variant="contained" component="label" sx={{ height: '40px' }}>
-                                                        上傳身份證明文件
+                                                        <FormattedMessage id="uploadIdDoc"/>
                                                         <input
                                                             accept="image/png, .jpg, .bmp, .pdf"
                                                             //className={classes.input}
@@ -1646,7 +1650,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="idDocType"/>:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" name="preview-idDocType">
                                             {selectedIdDocType.label}
@@ -1656,7 +1660,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="idDocNumber"/>:
                                         </Typography>
                                         <Typography variant="pnspsFormHeader" id="idNo-login">
                                             {formik.values.idNo} {selectedIdDocType.type == "HKID" ? '(' + formik.values.checkDigit + ')' : null}

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

@@ -64,7 +64,7 @@ const CustomFormWizard = (props) => {
     const [checkEmail, setCheckEmail] = useState(false)
     const [checkEmailBlur, setCheckEmailBlur] = useState(false)
 
-    const address4ComboList = ComboData.district;
+    const address4ComboList = ComboData.district(intl);
     const address5ComboList = ComboData.country;
     const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
         + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"

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

@@ -16,6 +16,7 @@ import {
   DialogTitle
 } from '@mui/material';
 import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
+import {FormattedMessage} from "react-intl";
 
 const PasswordAlertDialog = (props) => {
   return (
@@ -54,7 +55,7 @@ const PasswordAlertDialog = (props) => {
       </DialogContent>
       <DialogActions>
         <Button variant="contained" color="error" onClick={props.handleClose} autoFocus>
-          關閉
+          <FormattedMessage id="close"/>
         </Button>
       </DialogActions>
     </Dialog>

src/pages/dashboard/Public/index.js

@@ -10,6 +10,7 @@ import {
   isORGLoggedIn,
 } from "utils/Utils";
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import {FormattedMessage} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const DashboardDefault = () => {
@@ -30,7 +31,9 @@ const DashboardDefault = () => {
         <div style={BackgroundHead}>
           <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
             {/* <Typography variant="h5">我的公共啟事</Typography> */}
-            <Typography ml={10} color='#FFF' variant="h4">{isORGLoggedIn() ?userData.fullenName:userData.fullchName}, 午安! 請選擇所需服務。</Typography>
+            <Typography ml={10} color='#FFF' variant="h4">
+              {isORGLoggedIn() ?userData.fullenName:userData.fullchName}, <FormattedMessage id="welcomeMsg"/>
+            </Typography>
           </Stack>
         </div>
       </Grid>

src/routes/LoginRoutes.js

@@ -58,6 +58,10 @@ const LoginRoutes = {
       path: 'error',
       element: <ErrorPage/>
     },
+    {
+      path: 'iamsmart/logincallback',
+      element: <IAmSmart_FallCallback/>
+    },
     {
       path: 'iamsmart/loginfallback',
       element: <IAmSmart_FallCallback/>

src/translations/en.json

@@ -6,6 +6,9 @@
   "PNSPS": "PNSPS",
   "HKSARGOV": "HKSAR Government",
   "Gazette": "Gazette",
+  "gazetteDate": "GazetteDate",
+  "gazetteLength": "length",
+  "gazetteSampleName": "Gazette Supplement No. 6",
 
   "registerTitle1": "Become",
   "registerTitle2": "Gazette Notice",
@@ -20,10 +23,20 @@
 
   "mainPage": "Main Page",
   "myPublicNotice": "My Public Notice",
+  "publicNoticePayment": "Public Notice: Payment",
+  "publicNoticePaymentFail": "Public Notice: Payment Failed",
+  "publicNoticePaymentSuccess": "Public Notice: Payment Success",
+  "publicNoticePaymentCancel": "Public Notice: Payment Canceled",
+  "publicNoticePaymentFPSPay": "Public Notice: FPS Payment",
+  "publicNoticePaymentProofDone": "Public Notice: Proofreading completed",
+  "publicNoticePaymentProofDoneAndPaid": "Public Notice: Proofreading Completed and Payment",
+  "publicNoticePaymentProofComment": "Public Notice: Proofreading Reply",
+  "publicNoticePaymentProofInfo": "Public Notice: Proofreading Information",
   "proofRecord": "Proof Record",
   "onlinePaymentHistory": "Online Payment History",
   "setting": "Setting",
   "companyOrUserRecord": "Company/Institutional User Records",
+  "welcomeMsg": "Good afternoon! Please select the required service.",
 
   "login": "Login",
   "iAmSmartLogin": "iAM Smart Login",
@@ -86,7 +99,7 @@
   "businessChName": "Chinese name of Organization/Company",
   "preview": "Preview",
   "finishSubmission": "Finish Submission",
-  "reset": "reset",
+  "reset": "Reset",
   "requireString": "Items marked with * must be filled in",
   "confirmPassword": "Confirm password",
   "pleaseConfirmPassword": "Please confirm password",
@@ -97,6 +110,9 @@
   "businessRegCertAndDoc":"Business Registration Certificate and other documents",
   "pleaseUploadDoc": "Please upload a digital file of your valid business registration certificate and other documents to verify your identity.",
   "uploadFile": "Upload business registration certificate and other documents",
+  "pleaseUploadIdDoc": "Please upload a digital file of your valid identity document to verify your identity.",
+  "pleaseUploadIdDocSubTitle": "Such as: Hong Kong ID card; passport; Mainland China ID card; professional practice certificate, etc.",
+  "uploadIdDoc": "Upload identity document",
   "fileName": "File name",
   "fileSize": "File size",
   "fileSizeWarning": "Upload file size should be <10MB",
@@ -138,6 +154,14 @@
   "mainland": "Mainland China",
   "macau": "Macau",
   "yourContact": "Your Contact Information",
+  "passport": "Passport",
+  "HKIDcard": "Hong Kong ID Card",
+  "mainlandIDCard": "Mainland ID card",
+  "proCert": "Professional Practice Certificate",
+  "idDocType": "Document Category",
+  "requireIdDocType": "Please enter the document type",
+  "idDocNumber": "ID number",
+  "sameAsYourIdDoc": "Same as your ID document",
 
   "pwRemark1": "At least 8 characters, the more characters the better",
   "pwRemark2": "A mix of letters and numbers",
@@ -148,6 +172,91 @@
   "pwGood": "Good",
   "pwStrong": "Strong",
 
+  "islandCombo": "Island District",
+  "kwaiTsingCombo": "Kwai Tsing District",
+  "northCombo": "North District",
+  "saiKungCombo": "Sai Kung District",
+  "shaTinCombo": "Sha Tin District",
+  "taiPoCombo": "Tai Po District",
+  "tsuenWanCombo": "Tsuen Wan District",
+  "tuenMunCombo": "Tuen Mun District",
+  "yuenLongCombo": "Yuen Long District",
+  "kowloonCityCombo": "Kowloon City District",
+  "kwunTongCombo": "Kwun Tong District",
+  "shamShuiPoCombo": "Sham Shui Po District",
+  "wongTaiSinCombo": "Wong Tai Sin District",
+  "yauTsimMongCombo": "Yau Tsim Mong District",
+  "centralAndWesternCombo": "Central and Western District",
+  "easternCombo": "Eastern District",
+  "southernCombo": "Southern District",
+  "wanChaiCombo": "Wan Chai District",
+  "lantauIslandCombo": "Lantau Island",
+  "lammaIslandCombo": "Lamma Island District",
+  "pengChauCombo": "Peng Chau District",
+
+  "applyPublicNotice": "Apply for public notice",
+  "attention": "attention",
+  "all": "All",
+  "processing": "Processing",
+  "pendingPayment": "Pending payment",
+  "pendingPublish": "To be Published",
+  "completed": "Completed",
+  "notAccepted": "Not accepted",
+  "resubmit": "Re-submit Required",
+  "cancelled": "Cancelled",
+  "withdrawn": "Withdrawn",
+  "searchApplyRecord": "Search application record",
+  "applicationId": "Application number",
+  "submitDate": "Submit date",
+  "submitDateFrom": "Submit date (from)",
+  "submitDateTo": "Submit date (to)",
+  "myRemarks": "Remarks",
+  "status": "Status",
+  "viewDetail": "View details",
+  "price": "Price",
+  "pay": "Pay",
+  "payDate": "Payment Date",
+  "payDateFrom": "Payment date (from)",
+  "payStatus": "Payment Status",
+  "payId": "Payment Code",
+  "payConfirm": "Confirm payment",
+  "payCancel": "Cancel payment",
+  "payTotal": "Payment total",
+  "payDetail": "Payment details",
+  "payMethod": "Payment method",
+  "selectPaymentMethod": "Please select a payment method",
+  "payReceipt": "Payment receipt",
+  "contactPerson": "Contact Person",
+  "requireContactPerson": "Please enter contact person",
+  "search": "Search",
+  "cancel": "Cancel",
+  "extraMark": "Remarks",
+  "totalAmount": "Total Amount",
+  "close": "Close",
+  "confirm": "Confirm",
+  "terms": "Terms",
+  "currencyPrice": "Price",
+  "transactionRefNo": "Transaction Reference Number",
+  "selectedPaymentMethod": "Selected payment method",
+  "paymentMethodNotAvailable":"The payment function is currently not available",
+
+  "publicNoticeDetailTitle": "Public Notice Application Information",
+  "applyPerson": "Applicant",
+  "applyStatus": "Application Status",
+  "gazetteCount": "Gazette issues date",
+  "publishDate": "Publish date",
+  "draftFile": "Manuscript file",
+  "download": "Download",
+  "paymentHistory": "Payment History",
+  "proofId": "Proof Code",
+  "proofDate": "Proofing date",
+  "proofDateFrom": "Proofing date (from)",
+  "replyDate": "Reply date",
+  "fee": "Fee",
+  "payFeeFor": "Pay for",
+  "payFor": "Pay",
+  "payFee": "Payment Amount",
+
   "Dashboard": "Dashboard",
   "event": "Event"
 }

src/translations/zh-CN.json

@@ -6,6 +6,9 @@
   "PNSPS": "公共启事提交及缴费系统",
   "HKSARGOV": "香港特别行政区政府",
   "Gazette": "宪报",
+  "gazetteDate": "宪报日期",
+  "gazetteLength": "长度",
+  "gazetteSampleName": "宪报第6号副刊公告",
 
   "registerTitle1": "立即成为",
   "registerTitle2": "宪报刊登公告",
@@ -20,10 +23,20 @@
 
   "mainPage": "主页",
   "myPublicNotice": "我的公共启事",
+  "publicNoticePayment": "公共启事：付款",
+  "publicNoticePaymentFail": "公共启事：付款失败",
+  "publicNoticePaymentSuccess": "公共启事：付款成功",
+  "publicNoticePaymentCancel": "公共启事：付款取消",
+  "publicNoticePaymentFPSPay": "公共启事：FPS付款",
+  "publicNoticePaymentProofDone": "公共启事：校对完成",
+  "publicNoticePaymentProofDoneAndPaid": "公共启事：校对完成及付款",
+  "publicNoticePaymentProofComment": "公共启事：校对回覆",
+  "publicNoticePaymentProofInfo": "公共启事：校对资料",
   "proofRecord": "校对记录",
   "onlinePaymentHistory": "网上付款记录",
   "setting": "设置",
   "companyOrUserRecord": "公司/机构用户记录",
+  "welcomeMsg": "午安! 请选择所需服务。",
 
   "login": "登录",
   "iAmSmartLogin": "智方便登录",
@@ -97,6 +110,9 @@
   "businessRegCertAndDoc":"商业登记证及其他文件",
   "pleaseUploadDoc": "请上传你的 有效商业登记证及其他文件 的数码档案，以验证你的身份。",
   "uploadFile": "上传商业登记证及其他文件",
+  "pleaseUploadIdDoc": "请上传你的 有效身份证明文件 的数码档案，以验证你的身份。",
+  "pleaseUploadIdDocSubTitle": "如: 香港身份证; 护照; 中国内地身份证; 专业执业证书等",
+  "uploadIdDoc": "上传身份证明文件",
   "fileName": "档案名称",
   "fileSize": "档案大小",
   "fileSizeWarning": "上传档案大小应<10MB",
@@ -133,11 +149,19 @@
   "requireUsername": "请输入用户名称",
   "requirePassword": "请输入密码",
   "region": "区域 (只适用于香港)",
-  "region Or Country": "国家/地区",
-  "hong Kong": "香港",
+  "regionOrCountry": "国家/地区",
+  "hongKong": "香港",
   "mainland": "内地",
   "macau": "澳门",
   "yourContact": "你的联络资料",
+  "passport": "护照",
+  "HKIDcard": "香港身份证",
+  "mainlandIDCard": "内地身份证",
+  "proCert": "专业执业证书",
+  "idDocType": "证件类别",
+  "requireIdDocType": "请输入证件类别",
+  "idDocNumber": "证件号码",
+  "sameAsYourIdDoc": "与你的身份证明文件相同",
 
   "pwRemark1": "至少8个字元，字元越多越好",
   "pwRemark2": "字母和数字的混合",
@@ -148,6 +172,91 @@
   "pwGood": "良好",
   "pwStrong": "强",
 
+  "islandCombo": "离岛区",
+  "kwaiTsingCombo": "葵青区",
+  "northCombo": "北区",
+  "saiKungCombo": "西贡区",
+  "shaTinCombo": "沙田区",
+  "taiPoCombo": "大埔区",
+  "tsuenWanCombo": "荃湾区",
+  "tuenMunCombo": "屯门区",
+  "yuenLongCombo": "元朗区",
+  "kowloonCityCombo": "九龙城区",
+  "kwunTongCombo": "观塘区",
+  "shamShuiPoCombo": "深水埗区",
+  "wongTaiSinCombo": "黄大仙区",
+  "yauTsimMongCombo": "油尖旺区",
+  "centralAndWesternCombo": "中西区",
+  "easternCombo": "东区",
+  "southernCombo": "南区",
+  "wanChaiCombo": "湾仔区",
+  "lantauIslandCombo": "大屿山区",
+  "lammaIslandCombo": "南丫岛区",
+  "pengChauCombo": "坪洲区",
+
+  "applyPublicNotice": "申请公共启事",
+  "attention": "注意",
+  "all": "全部",
+  "processing": "处理中",
+  "pendingPayment": "待付款",
+  "pendingPublish": "待发布",
+  "completed": "已完成",
+  "notAccepted": "不接受",
+  "resubmit": "需重新提交",
+  "cancelled": "已取消",
+  "withdrawn": "已撤销",
+  "searchApplyRecord": "搜寻申请记录",
+  "applicationId": "申请编号",
+  "submitDate": "提交日期",
+  "submitDateFrom": "提交日期(从)",
+  "submitDateTo": "提交日期(到)",
+  "myRemarks": "我的备注",
+  "status": "状态",
+  "viewDetail": "查看详细",
+  "price": "价钱",
+  "pay": "付款",
+  "payDate": "付款日期",
+  "payDateFrom": "付款日期(从)",
+  "payStatus": "付款状况",
+  "payId": "付款编号",
+  "payConfirm": "确认付款",
+  "payCancel": "取消付款",
+  "payTotal": "付款总额",
+  "payDetail": "付款详情",
+  "payMethod": "付款方式",
+  "selectPaymentMethod": "请选择付款方式",
+  "payReceipt": "付款收据",
+  "contactPerson": "联络人",
+  "requireContactPerson": "请输入联络人",
+  "search": "搜寻",
+  "cancel": "取消",
+  "extraMark": "备注",
+  "totalAmount": "总额",
+  "close": "关闭",
+  "confirm": "确认",
+  "terms": "项目",
+  "currencyPrice": "金额",
+  "transactionRefNo": "交易參考編號",
+  "selectedPaymentMethod": "已選擇付款方法",
+  "paymentMethodNotAvailable":"付款功能現在不可用",
+
+  "publicNoticeDetailTitle": "公共启事申请资料",
+  "applyPerson": "申请人",
+  "applyStatus": "申请状态",
+  "gazetteCount": "宪报期数",
+  "publishDate": "发布日期",
+  "draftFile": "稿件档案",
+  "download": "下载",
+  "paymentHistory": "付款记录",
+  "proofId": "校对编号",
+  "proofDate": "校对日期",
+  "proofDateFrom": "校对日期(从)",
+  "replyDate": "回覆日期",
+  "fee": "费用",
+  "payFeeFor": "应缴费用",
+  "payFor": "支付",
+  "payFee": "支付金額",
+
   "Dashboard": "仪表板",
   "event": "活动"
 }

src/translations/zh-HK.json

@@ -6,6 +6,9 @@
   "PNSPS": "公共啟事提交及繳費系統",
   "HKSARGOV": "香港特別行政區政府",
   "Gazette": "憲報",
+  "gazetteDate": "憲報日期",
+  "gazetteLength": "長度",
+  "gazetteSampleName": "憲報第6號副刊公告",
 
   "registerTitle1": "立即成為",
   "registerTitle2": "憲報刊登公告",
@@ -20,10 +23,20 @@
 
   "mainPage": "主頁",
   "myPublicNotice": "我的公共啟事",
+  "publicNoticePayment": "公共啟事：付款",
+  "publicNoticePaymentFail": "公共啟事：付款失敗",
+  "publicNoticePaymentSuccess": "公共啟事：付款成功",
+  "publicNoticePaymentCancel": "公共啟事：付款取消",
+  "publicNoticePaymentFPSPay": "公共啟事：FPS付款",
+  "publicNoticePaymentProofDone": "公共啟事：校對完成",
+  "publicNoticePaymentProofDoneAndPaid": "公共啟事：校對完成及付款",
+  "publicNoticePaymentProofComment": "公共啟事：校對回覆",
+  "publicNoticePaymentProofInfo": "公共啟事：校對資料",
   "proofRecord": "校對記錄",
   "onlinePaymentHistory": "網上付款記錄",
   "setting": "設定",
   "companyOrUserRecord": "公司/機構用戶記錄",
+  "welcomeMsg": "午安! 請選擇所需服務。",
 
   "login": "登入",
   "iAmSmartLogin": "智方便登入",
@@ -96,6 +109,9 @@
   "businessRegCertNumber": "商業登記證號碼",
   "businessRegCertAndDoc":"商業登記證及其他文件",
   "pleaseUploadDoc": "請上傳你的 有效商業登記證及其他文件 的數碼檔案，以驗證你的身份。",
+  "pleaseUploadIdDoc": "請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。",
+  "pleaseUploadIdDocSubTitle": "如: 香港身份證; 護照; 中國內地身份證; 專業執業証書等",
+  "uploadIdDoc": "上傳身份證明文件",
   "uploadFile": "上傳商業登記證及其他文件",
   "fileName": "檔案名稱",
   "fileSize": "檔案大小",
@@ -138,6 +154,14 @@
   "mainland": "內地",
   "macau": "澳門",
   "yourContact": "你的聯絡資料",
+  "passport": "護照",
+  "HKIDcard": "香港身份證",
+  "mainlandIDCard": "內地身份證",
+  "proCert": "專業執業證書",
+  "idDocType": "證件類別",
+  "requireIdDocType": "請輸入證件類別",
+  "idDocNumber": "證件號碼",
+  "sameAsYourIdDoc": "與你的身份證明文件相同",
 
   "pwRemark1": "至少8個字元，字元越多越好",
   "pwRemark2": "字母和數字的混合",
@@ -148,6 +172,91 @@
   "pwGood": "良好",
   "pwStrong": "強",
 
+  "islandCombo": "離島區",
+  "kwaiTsingCombo": "葵青區",
+  "northCombo": "北區",
+  "saiKungCombo": "西貢區",
+  "shaTinCombo": "沙田區",
+  "taiPoCombo": "大埔區",
+  "tsuenWanCombo": "荃灣區",
+  "tuenMunCombo": "屯門區",
+  "yuenLongCombo": "元朗區",
+  "kowloonCityCombo": "九龍城區",
+  "kwunTongCombo": "觀塘區",
+  "shamShuiPoCombo": "深水埗區",
+  "wongTaiSinCombo": "黃大仙區",
+  "yauTsimMongCombo": "油尖旺區",
+  "centralAndWesternCombo": "中西區",
+  "easternCombo": "東區",
+  "southernCombo": "南區",
+  "wanChaiCombo": "灣仔區",
+  "lantauIslandCombo": "大嶼山區",
+  "lammaIslandCombo": "南丫島區",
+  "pengChauCombo": "坪洲區",
+
+  "applyPublicNotice": "申請公共啟事",
+  "attention": "注意",
+  "all": "全部",
+  "processing": "處理中",
+  "pendingPayment": "待付款",
+  "pendingPublish": "待發佈",
+  "completed": "已完成",
+  "notAccepted": "不接受",
+  "resubmit": "需重新提交",
+  "cancelled": "已取消",
+  "withdrawn": "已撤銷",
+  "searchApplyRecord": "搜尋申請記錄",
+  "applicationId": "申請編號",
+  "submitDate": "提交日期",
+  "submitDateFrom": "提交日期(從)",
+  "submitDateTo": "提交日期(到)",
+  "myRemarks": "我的備註",
+  "status": "狀態",
+  "viewDetail": "查看詳細",
+  "price": "價錢",
+  "pay": "付款",
+  "payDate": "付款日期",
+  "payDateFrom": "付款日期(從)",
+  "payStatus": "付款狀況",
+  "payId": "付款編號",
+  "payConfirm": "確認付款",
+  "payCancel": "取消付款",
+  "payTotal": "付款總額",
+  "payDetail": "付款詳情",
+  "payMethod": "付款方式",
+  "selectPaymentMethod": "請選擇付款方式",
+  "payReceipt": "付款收據",
+  "contactPerson": "聯絡人",
+  "requireContactPerson": "請輸入聯絡人",
+  "search": "搜尋",
+  "cancel": "取消",
+  "extraMark": "備註",
+  "totalAmount": "總額",
+  "close": "關閉",
+  "confirm": "確認",
+  "terms": "項目",
+  "currencyPrice": "金額",
+  "transactionRefNo": "交易參考編號",
+  "selectedPaymentMethod": "已選擇付款方法",
+  "paymentMethodNotAvailable":"付款功能現在不可用",
+
+  "publicNoticeDetailTitle": "公共啟事申請資料",
+  "applyPerson": "申請人",
+  "applyStatus": "申請狀態",
+  "gazetteCount": "憲報期數",
+  "publishDate": "發佈日期",
+  "draftFile": "稿件檔案",
+  "download": "下載",
+  "paymentHistory": "付款記錄",
+  "proofId": "校對編號",
+  "proofDate": "校對日期",
+  "proofDateFrom": "校對日期(從)",
+  "replyDate": "回覆日期",
+  "fee": "費用",
+  "payFeeFor": "應繳費用",
+  "payFor": "支付",
+  "payFee": "支付金額",
+
   "Dashboard": "儀表板",
   "event": "活動"
 }

src/utils/ComboData.js

@@ -1,12 +1,20 @@
 export const idDocType = [
-    { key: 1, label: '護照',  type: 'passport' }, 
-    { key: 2, label: '香港身份證',  type: 'HKID' }, 
-    { key: 3, label: '內地身份證',  type: 'CNID' }, 
-    { key: 4, label: '專業執業證書',  type: 'otherCert' }
+    { key: 1, label: 'passport',  type: 'passport' },
+    { key: 2, label: 'HKIDcard',  type: 'HKID' },
+    { key: 3, label: 'mainlandIDCard',  type: 'CNID' },
+    { key: 4, label: 'proCert',  type: 'otherCert' }
 ];
                 
-export const district =  ['北區', '長洲區', '大埔區', '大嶼山區', '東區', '觀塘區', '黃大仙區', '九龍城區', '葵青區', '南區', '南丫島區', 
-'坪洲區', '荃灣區', '沙田區', '深水埗區', '屯門區', '灣仔區', '西貢區', '油尖旺區', '元朗區', '中西區'];
+export const district = (intl) =>{
+    return [
+        'islandCombo', 'kwaiTsingCombo', 'northCombo', 'saiKungCombo',
+        'shaTinCombo', 'taiPoCombo', 'tsuenWanCombo', 'tuenMunCombo',
+        'yuenLongCombo', 'kowloonCityCombo', 'kwunTongCombo', 'shamShuiPoCombo',
+        'wongTaiSinCombo', 'yauTsimMongCombo', 'centralAndWesternCombo', 'easternCombo',
+        'southernCombo', 'wanChaiCombo', 'lantauIslandCombo', 'lammaIslandCombo',
+        'pengChauCombo'
+    ].map((district) => intl.formatMessage({id: district}));
+};
 
 export const country = (intl) => {
     return ["hongKong", "mainland", "macau"]
@@ -16,27 +24,27 @@ export const country = (intl) => {
 export const accountFilter = [{ id: 1, key: 1, label: 'Active',  type: 'active' }, { id: 2, key: 2, label: 'Locked',  type: 'locked' }, { id: 3, key: 3, label: 'Not verified',  type: 'notVerified' }]; 
 
 export const publicNoticeStatic = [
-    { key: 0, labelCht: '全部', label: 'All',  type: 'all' }, 
-    { key: 1, labelCht: '處理中', label: 'Processing',  type: 'processing' }, // submitted and reviewed
-    { key: 2, labelCht: '待付款', label: 'Pending Payment',  type: 'confirmed' }, 
-    { key: 3, labelCht: '待發布', label: 'To be published',  type: 'paid' }, 
-    { key: 4, labelCht: '已完成', label: 'Completed', type: 'completed' },
-    { key: 5, labelCht: '不接受', label: 'Not accepted', type: 'notAccepted' },
-    { key: 6, labelCht: '需重新提交', label: 'Re-submit Required', type: 'resubmit' },
-    { key: 7, labelCht: '已取消', label: 'Cancelled', type: 'cancelled' },
-    { key: 8, labelCht: '已撤銷', label: 'Withdrawn', type: 'withdrawn' },
+    { key: 0, label: 'all',  type: 'all' },
+    { key: 1, label: 'processing',  type: 'processing' }, // submitted and reviewed
+    { key: 2, label: 'pendingPayment',  type: 'confirmed' },
+    { key: 3, label: 'pendingPublish',  type: 'paid' },
+    { key: 4, label: 'completed', type: 'completed' },
+    { key: 5, label: 'notAccepted', type: 'notAccepted' },
+    { key: 6, label: 'resubmit', type: 'resubmit' },
+    { key: 7, label: 'cancelled', type: 'cancelled' },
+    { key: 8, label: 'withdrawn', type: 'withdrawn' },
 ];
 
 export const publicNoticeStatic_Creditor = [
-    { key: 0, labelCht: '全部', label: 'All', type: 'all' }, 
-    { key: 1, labelCht: '處理中', label: 'Processing', type: 'processing' }, // submitted and reviewed
-    { key: 2, labelCht: '待發布', label: 'To be published', type: 'confirmed' }, 
-    { key: 3, labelCht: '待付款', label: 'Pending Payment', type: 'published' }, 
-    { key: 4, labelCht: '已完成', label: 'Completed',  type: 'completed' },
-    { key: 5, labelCht: '不接受', label: 'Not accepted', type: 'notAccepted' },
-    { key: 6, labelCht: '需重新提交', label: 'Re-submit Required', type: 'resubmit' },
-    { key: 7, labelCht: '已取消', label: 'Cancelled',  type: 'cancelled' },
-    { key: 8, labelCht: '已撤銷', label: 'Withdrawn',  type: 'withdrawn' },
+    { key: 0, label: 'all', type: 'all' },
+    { key: 1, label: 'processing', type: 'processing' }, // submitted and reviewed
+    { key: 2, label: 'pendingPublish', type: 'confirmed' },
+    { key: 3, label: 'pendingPayment', type: 'published' },
+    { key: 4, label: 'completed',  type: 'completed' },
+    { key: 5, label: 'notAccepted', type: 'notAccepted' },
+    { key: 6, label: 'resubmit', type: 'resubmit' },
+    { key: 7, label: 'cancelled',  type: 'cancelled' },
+    { key: 8, label: 'withdrawn',  type: 'withdrawn' },
 ];
 
 

src/utils/Utils.js

@@ -83,6 +83,11 @@ export const isPrimaryLoggedIn = () =>{
         return JSON.parse(localStorage.getItem('userData')).role === 'primary'
     }
 } 
+export const isCreditorLoggedIn = () =>{
+    if (localStorage.getItem('userData') != null){
+        return JSON.parse(localStorage.getItem('userData')).creditor
+    }
+} 
 /**
  ** This function is used for demo purpose route navigation
  ** In real app you won't need this function because your app will navigate to same route for each users regardless of ability

src/utils/statusUtils/Base.js

@@ -2,6 +2,10 @@ import { Typography } from "@mui/material"
 
 export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) {
     return (
-        <div style={{ borderRadius: "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px", margin: "6px 4px 6px 4px" }}><Typography variant="h6">{text}</Typography></div>
+        <div style={{ borderRadius: "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px", margin: "6px 4px 6px 4px" }}>
+            <Typography variant="h6">
+                {text}
+            </Typography>
+        </div>
     )
 }

src/utils/statusUtils/PublicNoteStatusUtils.js

@@ -14,13 +14,13 @@ export function getStatusByText(status, creditor) {
             return getStatusTag({ color: "#f5a83d", text: "處理中" })
         case "confirmed":
             if (creditor)
-                return getStatusTag({ color: "#22a13f", text: "待發布" })
+                return getStatusTag({ color: "#22a13f", text: "待發佈" })
             else
                 return getStatusTag({ color: "#22a13f", text: "待付款" })
         case "published":
             return getStatusTag({ color: "#22a13f", text: "待付款" })
         case "paid":
-            return getStatusTag({ color: "#22a13f", text: "待發布" })
+            return getStatusTag({ color: "#22a13f", text: "待發佈" })
         case "complated":
             return getStatusTag({ color: "#8a8784", text: "已完成" })
         case "notAccepted":
@@ -68,3 +68,37 @@ export function getStatusByTextEng(status, creditor) {
             return getStatusTag({ text: status })
     }
 }
+
+export function getStatusIntl(params, intl) {
+    return getStatusByTextIntl(params.row.status,  params.row.creditor, intl);
+}
+
+export function getStatusByTextIntl(status, creditor, intl) {
+    switch (status) {
+        case "submitted":
+            return getStatusTag({ color: "#f5a83d", text: intl.formatMessage({id: 'processing'}) })
+        case "reviewed":
+            return getStatusTag({ color: "#f5a83d", text: intl.formatMessage({id: 'processing'}) })
+        case "confirmed":
+            if (creditor)
+                return getStatusTag({ color: "#22a13f", text: intl.formatMessage({id: 'pendingPublish'}) })
+            else
+                return getStatusTag({ color: "#22a13f", text: intl.formatMessage({id: 'pendingPayment'}) })
+        case "published":
+            return getStatusTag({ color: "#22a13f", text: intl.formatMessage({id: 'pendingPayment'}) })
+        case "paid":
+            return getStatusTag({ color: "#22a13f", text: intl.formatMessage({id: 'pendingPublish'}) })
+        case "complated":
+            return getStatusTag({ color: "#8a8784", text: intl.formatMessage({id: 'completed'}) })
+        case "notAccepted":
+            return getStatusTag({ color: "#d9372b", text: intl.formatMessage({id: 'notAccepted'}) })
+        case "resubmit":
+            return getStatusTag({ color: "#757373", text: intl.formatMessage({id: 'resubmit'}) })
+        case "cancelled":
+            return getStatusTag({ color: "#909497", text: intl.formatMessage({id: 'cancelled'}) })
+        case "withdrawn":
+            return getStatusTag({ color: "#909497", text: intl.formatMessage({id: 'withdrawn'}) })
+        default:
+            return getStatusTag({ text: status })
+    }
+}