update locale

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([]);
@@ -118,7 +118,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 +192,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                                 renderInput={(params) => (
                                     <TextField
                                         {...params}
-                                        label="狀態"
+                                        label={intl.formatMessage({id: 'status'})}
                                     />
                                 )}
                                 InputLabelProps={{

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%',
@@ -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} from "react-intl";
 // import * as Utils from "utils/Utils"
 // ==============================|| EVENT TABLE ||============================== //
 
@@ -18,6 +19,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
     const [total, setTotal] = React.useState(0);
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+    //const intl = useIntl();
 
     React.useEffect(() => {
         const indexedData = recordList.map((obj, index) => ({ index_number: index + 1, ...obj }));
@@ -51,7 +53,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                 // console.log(params)
                 return <div style={{ margin: 4, textAlign:"left"}}>憲報第6號副刊公告<br/>
                     {isORGLoggedIn()?<>Care Of: {params.row.careOf}<br /></>:null}
-                    申請編號: {appNo}<br/>
+                    <FormattedMessage id="applicationId"/>: {appNo}<br/>
                     憲報日期: {DateUtils.dateStr_Cht(params.row.issueDate)}<br/>
                     長度: {params.row.length+ " cm"}</div>
             },
@@ -81,7 +83,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,7 +157,7 @@ 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" }}>

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/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%',
@@ -266,7 +267,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 +319,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%',
@@ -324,7 +325,9 @@ const Index = () => {
                                                 cancelPayment();
                                             }}
                                             sx={{ m: 4 }}
-                                        >取消付款</Button>
+                                        >
+                                            <FormattedMessage id="payCancel"/>
+                                        </Button>
                                     </Typography>
                                 </Grid>
                             </center>

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([]);
@@ -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>

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

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]);
@@ -80,7 +80,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             fullWidth
                             {...register("code")}
                             id='code'
-                            label="申請編號:"
+                            label={intl.formatMessage({id: 'applicationId'}) + ":"}
                             defaultValue={searchCriteria.code}
                             InputLabelProps={{
                                 shrink: true
@@ -96,7 +96,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 +137,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             fullWidth
                             {...register("tarnsNo")}
                             id='tarnsNo'
-                            label="付款編號:"
+                            label={intl.formatMessage({id: 'payId'})+":"}
                             defaultValue={searchCriteria.tarnsNo}
                             InputLabelProps={{
                                 shrink: true
@@ -163,7 +163,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             }}
                             renderInput={(params) => (
                                 <TextField {...params}
-                                    label="狀態"
+                                    label={intl.formatMessage({id: 'status'})}
                                 />
                             )}
                             InputLabelProps={{

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%',
@@ -418,7 +419,8 @@ const Index = () => {
                             // color="error"
                             onClick={() => paymentClick()}
                             sx={{ mt: 4 }}
-                        >付款
+                        >
+                        <FormattedMessage id="pay"/>
                     </Button>
                     <Button
                             component="span"

src/pages/Proof/Payment/Pay.js

@@ -156,7 +156,9 @@ 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">

src/pages/Proof/Reply_Public/ApplicationDetails.js

@@ -17,6 +17,7 @@ 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} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = ({ formData, }) => {
 
@@ -76,7 +77,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}>
@@ -138,7 +141,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 +171,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}>

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",
@@ -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) => {

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({});
@@ -126,7 +126,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                             fullWidth
                             {...register("code")}
                             id='code'
-                            label="申請編號:"
+                            label={intl.formatMessage({id: 'applicationId'}) + ":"}
                             defaultValue={searchCriteria.code}
                             InputLabelProps={{
                                 shrink: true
@@ -256,7 +256,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                             }}
                             renderInput={(params) => (
                                 <TextField {...params}
-                                    label="狀態"
+                                    label={intl.formatMessage({id: 'status'})}
                                 />
                             )}
                             InputLabelProps={{

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -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'})),
@@ -152,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

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -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}>
@@ -330,7 +332,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}>
@@ -582,7 +586,9 @@ 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">

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) => {

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

@@ -9,10 +9,11 @@ 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'));
@@ -34,7 +35,7 @@ export default function ProofTab({rows}) {
         },
         {
             id: 'actions',
-            headerName: '狀態',
+            headerName: intl.formatMessage({id: 'status'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {

src/pages/PublicNotice/ListPanel/BaseGrid.js

@@ -12,7 +12,7 @@ import {
   } from "utils/Utils";
 import {useTheme} from "@emotion/react";
 import {getStatusIntl} from "utils/statusUtils/PublicNoteStatusUtils";
-import {useIntl} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function BaseGrid({rows}) {
@@ -31,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)=>{
@@ -74,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>
@@ -91,7 +93,7 @@ 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) => {
@@ -104,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,7 +217,12 @@ 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>
+                <Stack direction="row" justifyContent="space-between">
+                    <Typography variant="h5">
+                        <FormattedMessage id="applicationId"/>: {datas[i].appNo}
+                    </Typography>
+                    ({DateUtils.datetimeStr(datas[i].created)})
+                </Stack>
                 備註: {datas[i].remarks}
                 <br /><br />
             </>);
@@ -315,7 +325,7 @@ export default function SubmittedTab({ rows }) {
                     onClick={() => { handlePaymentBtn() }}
                     sx={{mt:2, ml:1}}
                 >
-                    付款
+                    <FormattedMessage id="pay"/>
                 </Button>
                 </ThemeProvider>
             </div>
@@ -333,7 +343,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">

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -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
@@ -182,7 +182,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             }}
                             renderInput={(params) => (
                                 <TextField {...params}
-                                    label="狀態"
+                                    label={intl.formatMessage({id: 'status'})}
                                     InputLabelProps={{
                                         shrink: true
                                     }}

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,7 +96,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'status',
             field: 'status',
-            headerName: '狀態',
+            headerName: intl.formatMessage({id: 'status'}),
             width: 160,
             renderCell: (params) => {
                 return [StatusUtils.getStatus(params)]
@@ -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/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/translations/en.json

@@ -195,10 +195,29 @@
   "withdrawn": "Withdrawn",
   "searchApplyRecord": "Search application record",
   "applicationId": "Application number",
-  "submitDate": "submit date",
-  "myRemarks": "My notes",
-  "status": "status",
+  "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",
 
   "Dashboard": "Dashboard",
   "event": "Event"

src/translations/zh-CN.json

@@ -182,23 +182,42 @@
   "lammaIslandCombo": "南丫岛区",
   "pengChauCombo": "坪洲区",
 
-  "applyPublicNotice": "申請公共啟事",
+  "applyPublicNotice": "申请公共启事",
   "attention": "注意",
   "all": "全部",
-  "processing": "處理中",
+  "processing": "处理中",
   "pendingPayment": "待付款",
-  "pendingPublish": "待發佈",
+  "pendingPublish": "待发布",
   "completed": "已完成",
   "notAccepted": "不接受",
   "resubmit": "需重新提交",
   "cancelled": "已取消",
-  "withdrawn": "已撤銷",
-  "searchApplyRecord": "搜尋申請記錄",
-  "applicationId": "申請編號",
+  "withdrawn": "已撤销",
+  "searchApplyRecord": "搜寻申请记录",
+  "applicationId": "申请编号",
   "submitDate": "提交日期",
-  "myRemarks": "我的備註",
-  "status": "狀態",
-  "viewDetail": "查看詳細",
+  "submitDateFrom": "提交日期(从)",
+  "submitDateTo": "提交日期(到)",
+  "myRemarks": "我的备注",
+  "status": "状态",
+  "viewDetail": "查看详细",
+  "price": "价钱",
+  "pay": "付款",
+  "payDate": "付款日期",
+  "payDateFrom": "付款日期(从)",
+  "payStatus": "付款状况",
+  "payId": "付款编号",
+  "payConfirm": "确认付款",
+  "payCancel": "取消付款",
+  "payTotal": "付款总额",
+  "payDetail": "付款详情",
+  "payMethod": "付款方式",
+  "selectPaymentMethod": "请选择付款方式",
+  "payReceipt": "付款收据",
+  "contactPerson": "联络人",
+  "requireContactPerson": "请输入联络人",
+  "search": "搜寻",
+  "cancel": "取消",
 
   "Dashboard": "仪表板",
   "event": "活动"

src/translations/zh-HK.json

@@ -196,9 +196,28 @@
   "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": "取消",
 
   "Dashboard": "儀表板",
   "event": "活動"