update public notice search

src/pages/DemandNote/Search_Public/SearchForm.js

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

src/pages/Payment/Details_Public/DataGrid.js

@@ -10,7 +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 {FormattedMessage, useIntl} from "react-intl";
 // import * as Utils from "utils/Utils"
 // ==============================|| EVENT TABLE ||============================== //
 
@@ -19,6 +19,8 @@ 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(() => {
@@ -45,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}
                     <FormattedMessage id="applicationId"/>: {appNo}<br/>
-                    憲報日期: {DateUtils.dateStr_Cht(params.row.issueDate)}<br/>
-                    長度: {params.row.length+ " cm"}</div>
+                    <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) : "";
             }

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

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

src/pages/Payment/FPS/FPSTest.js

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

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

@@ -149,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" }}>
@@ -163,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>
@@ -203,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>
@@ -217,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>
                               }
@@ -247,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/SearchForm.js

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

src/pages/Payment/index.js

@@ -394,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>
@@ -428,7 +430,8 @@ const Index = () => {
                             // color="error"
                             onClick={() => { navigate("/publicNotice") }}
                             sx={{ mt: 4 }}
-                        >取消
+                        >
+                        <FormattedMessage id="cancel"/>
                     </Button>
                     </ThemeProvider>
                 </Stack>
@@ -446,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" }}>
@@ -162,12 +162,19 @@ const Index = () => {
                             </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_Public/ApplicationDetails.js

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

src/pages/Proof/Reply_Public/ProofForm.js

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

src/pages/Proof/Search_Public/SearchForm.js

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

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -246,7 +246,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 }

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
@@ -166,11 +167,10 @@ const ApplicationDetailCard = (
                                 onClick={cancelledClick()}
                                 color="edit"
                                 disabled={currentApplicationDetailData.status !== "submitted"}
-                                title={"取消"}
+                                title={intl.formatMessage({id: 'cancel'})}
                                 startIcon={<CloseIcon />}
                             >
-
-                                取消
+                                <FormattedMessage id="cancel"/>
                             </Button>
                             </ThemeProvider>
                         </Stack>
@@ -564,7 +564,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>
@@ -592,12 +594,18 @@ const ApplicationDetailCard = (
                             </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>
@@ -613,7 +621,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/ListPanel/PendingPaymentTab.js

@@ -223,14 +223,15 @@ export default function SubmittedTab({ rows }) {
                     </Typography>
                     ({DateUtils.datetimeStr(datas[i].created)})
                 </Stack>
-                備註: {datas[i].remarks}
+                <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;
@@ -353,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>
@@ -371,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>
@@ -389,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

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

@@ -97,9 +97,9 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'status',
             field: 'status',
             headerName: intl.formatMessage({id: 'status'}),
-            width: 160,
+            width: 200,
             renderCell: (params) => {
-                return [StatusUtils.getStatus(params)]
+                return [StatusUtils.getStatusIntl(params, intl)]
             },
         },
         {

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/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,6 +23,15 @@
 
   "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",
@@ -218,6 +230,15 @@
   "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",
 
   "Dashboard": "Dashboard",
   "event": "Event"

src/translations/zh-CN.json

@@ -6,6 +6,9 @@
   "PNSPS": "公共启事提交及缴费系统",
   "HKSARGOV": "香港特别行政区政府",
   "Gazette": "宪报",
+  "gazetteDate": "宪报日期",
+  "gazetteLength": "长度",
+  "gazetteSampleName": "宪报第6号副刊公告",
 
   "registerTitle1": "立即成为",
   "registerTitle2": "宪报刊登公告",
@@ -20,6 +23,15 @@
 
   "mainPage": "主页",
   "myPublicNotice": "我的公共启事",
+  "publicNoticePayment": "公共启事：付款",
+  "publicNoticePaymentFail": "公共启事：付款失败",
+  "publicNoticePaymentSuccess": "公共启事：付款成功",
+  "publicNoticePaymentCancel": "公共启事：付款取消",
+  "publicNoticePaymentFPSPay": "公共启事：FPS付款",
+  "publicNoticePaymentProofDone": "公共启事：校对完成",
+  "publicNoticePaymentProofDoneAndPaid": "公共启事：校对完成及付款",
+  "publicNoticePaymentProofComment": "公共启事：校对回覆",
+  "publicNoticePaymentProofInfo": "公共启事：校对资料",
   "proofRecord": "校对记录",
   "onlinePaymentHistory": "网上付款记录",
   "setting": "设置",
@@ -218,6 +230,15 @@
   "requireContactPerson": "请输入联络人",
   "search": "搜寻",
   "cancel": "取消",
+  "extraMark": "备注",
+  "totalAmount": "总额",
+  "close": "关闭",
+  "confirm": "确认",
+  "terms": "项目",
+  "currencyPrice": "金额",
+  "transactionRefNo": "交易參考編號",
+  "selectedPaymentMethod": "已選擇付款方法",
+  "paymentMethodNotAvailable":"付款功能現在不可用",
 
   "Dashboard": "仪表板",
   "event": "活动"

src/translations/zh-HK.json

@@ -6,6 +6,9 @@
   "PNSPS": "公共啟事提交及繳費系統",
   "HKSARGOV": "香港特別行政區政府",
   "Gazette": "憲報",
+  "gazetteDate": "憲報日期",
+  "gazetteLength": "長度",
+  "gazetteSampleName": "憲報第6號副刊公告",
 
   "registerTitle1": "立即成為",
   "registerTitle2": "憲報刊登公告",
@@ -20,6 +23,15 @@
 
   "mainPage": "主頁",
   "myPublicNotice": "我的公共啟事",
+  "publicNoticePayment": "公共啟事：付款",
+  "publicNoticePaymentFail": "公共啟事：付款失敗",
+  "publicNoticePaymentSuccess": "公共啟事：付款成功",
+  "publicNoticePaymentCancel": "公共啟事：付款取消",
+  "publicNoticePaymentFPSPay": "公共啟事：FPS付款",
+  "publicNoticePaymentProofDone": "公共啟事：校對完成",
+  "publicNoticePaymentProofDoneAndPaid": "公共啟事：校對完成及付款",
+  "publicNoticePaymentProofComment": "公共啟事：校對回覆",
+  "publicNoticePaymentProofInfo": "公共啟事：校對資料",
   "proofRecord": "校對記錄",
   "onlinePaymentHistory": "網上付款記錄",
   "setting": "設定",
@@ -218,6 +230,15 @@
   "requireContactPerson": "請輸入聯絡人",
   "search": "搜尋",
   "cancel": "取消",
+  "extraMark": "備註",
+  "totalAmount": "總額",
+  "close": "關閉",
+  "confirm": "確認",
+  "terms": "項目",
+  "currencyPrice": "金額",
+  "transactionRefNo": "交易參考編號",
+  "selectedPaymentMethod": "已選擇付款方法",
+  "paymentMethodNotAvailable":"付款功能現在不可用",
 
   "Dashboard": "儀表板",
   "event": "活動"