update online payment

src/components/cards/AuthFooter.js

@@ -1,6 +1,7 @@
 // material-ui
 import { useMediaQuery, Container, Link, Typography, Stack } from '@mui/material';
 import bhkLogo from 'assets/images/BHK_logo_rgb_zh-hk.png';
+import {FormattedMessage} from "react-intl";
 // ==============================|| FOOTER - AUTHENTICATION ||============================== //
 
 const AuthFooter = () => {
@@ -16,7 +17,7 @@ const AuthFooter = () => {
         alignItems="center"
       >
         <Typography variant="subtitle2" color="secondary" component="span">
-          2024 &copy; 政府物流服務署
+          2024 &copy; <FormattedMessage id="HKGLD" />
         </Typography>
         <Typography
             variant="subtitle2"
@@ -26,7 +27,7 @@ const AuthFooter = () => {
             target="_blank"
             underline="hover"
           >
-            重要告示
+            <FormattedMessage id="importantNotice" />
           </Typography>
           <Typography
             variant="subtitle2"
@@ -37,7 +38,7 @@ const AuthFooter = () => {
             target="_blank"
             underline="hover"
           >
-            私隱政策
+            <FormattedMessage id="privacyPolicy" />
           </Typography>
       </Stack>  
         <Stack direction={matchDownSM ? 'column' : 'row'} spacing={matchDownSM ? 1 : 3} textAlign={matchDownSM ? 'center' : 'inherit'} justifyContent={matchDownSM?"center":"flex-end"}>

src/pages/Payment/Details_Public/PaymentDetails.js

@@ -13,10 +13,12 @@ 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";
+import {FormattedMessage, useIntl} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const PaymentDetails = ({ formData,doPrint }) => {
 
+    const intl = useIntl();
+    const { locale } = intl;
     const [data, setData] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
 
@@ -64,7 +66,12 @@ const PaymentDetails = ({ formData,doPrint }) => {
                                         </Grid>
                                         <Grid item xs={6} md={5} sx={{ ml:5,textAlign: "left" }}>
                                             <FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
-                                                {PaymentStatus.getStatus_Cht(data.status)}
+                                                {
+                                                    locale === 'en' ?
+                                                        PaymentStatus.getStatus_Eng(data.status)
+                                                        :
+                                                        PaymentStatus.getStatus_Cht(data.status)
+                                                }
                                             </FormLabel>
                                         </Grid>
                                     </Grid>
@@ -73,7 +80,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="transactionNo" />:
                                             </FormLabel>
                                         </Grid>
                                         <Grid item  xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
@@ -87,7 +94,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="transactionDate" />:
                                             </FormLabel>
                                         </Grid>
                                         <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
@@ -101,7 +108,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="transactionTime" />:
                                             </FormLabel>
                                         </Grid>
                                         <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
@@ -115,7 +122,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="paymentRefCode" />:
                                             </FormLabel>
                                         </Grid>
                                         <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>

src/pages/Payment/Search_Public/DataGrid.js

@@ -18,6 +18,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
     const intl = useIntl();
+    const { locale } = intl;
 
     const _sx = {
         padding: "4 2 4 2",
@@ -80,7 +81,10 @@ export default function SearchPublicNoticeTable({ recordList }) {
             headerName: intl.formatMessage({id: 'payStatus'}),
             width: 150,
             renderCell: (params) => {
-                return PaymentStatus.getStatus_Cht(params);
+                return locale === 'en' ?
+                    PaymentStatus.getStatus_Eng(params)
+                        :
+                    PaymentStatus.getStatus_Cht(params);
             }
         },
         {

src/pages/Payment/Search_Public/SearchForm.js

@@ -156,8 +156,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             filterOptions={(options) => options}
                             options={ComboData.paymentStatus}
                             value={status}
-                            getOptionLabel={(option) => option.labelCht}
-                            inputValue={status?.labelCht ? status?.labelCht : ""}
+                            getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.i18nLabel }) : ""}
+                            inputValue={status? intl.formatMessage({ id: status.i18nLabel }) : ""}
                             onChange={(event, newValue) => {
                                 if (newValue !== null) {
                                     setStatus(newValue);

src/pages/Proof/Payment/Pay.js

@@ -111,7 +111,7 @@ const Index = () => {
                                     </Typography>
 
                                     <Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
-                                        請按以下完成繳費：
+                                        <FormattedMessage id="pleaseClickToPay" />：
                                     </Typography>
 
                                     <Typography variant="h4" sx={{ml:8, textAlign: "left" }}>
@@ -122,7 +122,7 @@ const Index = () => {
                                                 sx={{ ml: {md:4,lg:4}, mr:4}}
                                                 onClick={() => { setIsPopUp(true) }}
                                             >
-                                                即時網上繳費
+                                                <FormattedMessage id="payInstantly" />
                                             </Button>
                                         </ThemeProvider>
 
@@ -137,9 +137,9 @@ const Index = () => {
                                                     navigate("/publicNotice");
                                                 }}
                                             >
-                                                稍後繳費
+                                                <FormattedMessage id="payLater" />
                                             </Button>
-                                            （返回「我的公共啟事」）
+                                            （<FormattedMessage id="backToNoticePage" />）
                                         </ThemeProvider>
                                     </Typography>
                                 </Grid>

src/pages/Proof/Payment/Pay_Creditor.js

@@ -99,7 +99,9 @@ const Index = () => {
                                             onClick={()=>{
                                                 navigate("/publicNotice");
                                             }}
-                                        >返回「我的公共啟事」</Button>
+                                        >
+                                            <FormattedMessage id="backToNoticePage" />
+                                        </Button>
                                     </Typography>
                                 </Grid>
                             </center>

src/translations/en.json

@@ -5,11 +5,19 @@
 
   "PNSPS": "PNSPS",
   "HKSARGOV": "HKSAR Government",
+  "HKGLD": "Government Logistics Department",
+  "importantNotice": "Important Notice",
+  "privacyPolicy": "Privacy Policy",
   "Gazette": "Gazette",
   "gazetteDate": "GazetteDate",
   "gazetteLength": "length",
   "gazetteSampleName": "Gazette Supplement No. 6",
 
+  "payInstantly": "Instant online payment",
+  "payLater": "Pay later",
+  "backToNoticePage": "Return to \"My Public Notices\"",
+  "pleaseClickToPay": "Please click below to complete the payment",
+
   "registerTitle1": "Become",
   "registerTitle2": "Gazette Notice",
   "registerTitle3": "Publisher now",
@@ -199,6 +207,10 @@
   "attention": "attention",
   "to": "To",
   "all": "All",
+  "success": "Success",
+  "reject": "Reject",
+  "cancelledStatus": "Cancelled",
+  "inProgress": "In progress",
   "replied": "Replied",
   "pendingReply": "PendingReply",
   "processing": "Processing",
@@ -226,7 +238,7 @@
   "payConfirm": "Confirm payment",
   "payCancel": "Cancel payment",
   "payTotal": "Payment total",
-  "payDetail": "Payment details",
+  "payDetail": "Payment Details",
   "payMethod": "Payment method",
   "selectPaymentMethod": "Please select a payment method",
   "payReceipt": "Payment receipt",
@@ -281,6 +293,11 @@
   "upload": "Upload",
   "actionFail": "Action failed: Please check the content and submit the reply again",
 
+  "transactionNo": "Transaction number",
+  "transactionDate": "Transaction date",
+  "transactionTime": "Transaction time",
+  "paymentRefCode": "Payment Reference Number",
+
   "Dashboard": "Dashboard",
   "event": "Event"
 }

src/translations/zh-CN.json

@@ -5,11 +5,19 @@
 
   "PNSPS": "公共启事提交及缴费系统",
   "HKSARGOV": "香港特别行政区政府",
+  "HKGLD": "政府物流服务署",
+  "importantNotice": "重要告示",
+  "privacyPolicy": "私隐政策",
   "Gazette": "宪报",
   "gazetteDate": "宪报日期",
   "gazetteLength": "长度",
   "gazetteSampleName": "宪报第6号副刊公告",
 
+  "payInstantly": "即时网上缴费",
+  "payLater": "稍后缴费",
+  "backToNoticePage": "返回「我的公共启事」",
+  "pleaseClickToPay": "请按以下完成缴费",
+
   "registerTitle1": "立即成为",
   "registerTitle2": "宪报刊登公告",
   "registerTitle3": "用户",
@@ -199,6 +207,10 @@
   "attention": "注意",
   "to": "到",
   "all": "全部",
+  "success": "成功",
+  "reject": "拒绝",
+  "cancelledStatus": "取消",
+  "inProgress": "进行中",
   "replied": "已回覆",
   "pendingReply": "未回覆",
   "processing": "处理中",
@@ -281,6 +293,11 @@
   "upload": "上载",
   "actionFail": "行动失败: 请检查内容并再次提交回覆",
 
+  "transactionNo": "交易号码",
+  "transactionDate": "交易日期",
+  "transactionTime": "交易时间",
+  "paymentRefCode": "付款参考号码",
+
   "Dashboard": "仪表板",
   "event": "活动"
 }

src/translations/zh-HK.json

@@ -5,11 +5,19 @@
 
   "PNSPS": "公共啟事提交及繳費系統",
   "HKSARGOV": "香港特別行政區政府",
+  "HKGLD": "政府物流服務署",
+  "importantNotice": "重要告示",
+  "privacyPolicy": "私隱政策",
   "Gazette": "憲報",
   "gazetteDate": "憲報日期",
   "gazetteLength": "長度",
   "gazetteSampleName": "憲報第6號副刊公告",
 
+  "payInstantly": "即時網上繳費",
+  "payLater": "稍後繳費",
+  "backToNoticePage": "返回「我的公共啟事」",
+  "pleaseClickToPay": "請按以下完成繳費",
+
   "registerTitle1": "立即成為",
   "registerTitle2": "憲報刊登公告",
   "registerTitle3": "用戶",
@@ -199,6 +207,10 @@
   "attention": "注意",
   "to": "到",
   "all": "全部",
+  "success": "成功",
+  "reject": "拒絕",
+  "cancelledStatus": "取消",
+  "inProgress": "進行中",
   "replied": "已回覆",
   "pendingReply": "未回覆",
   "processing": "處理中",
@@ -281,6 +293,11 @@
   "upload": "上載",
   "actionFail": "行動失敗: 請檢查內容並再次提交回覆",
 
+  "transactionNo": "交易號碼",
+  "transactionDate": "交易日期",
+  "transactionTime": "交易時間",
+  "paymentRefCode": "付款參考號碼",
+
   "Dashboard": "儀表板",
   "event": "活動"
 }

src/utils/ComboData.js

@@ -98,11 +98,11 @@ export const proofStatus = [
 ];
 
 export const paymentStatus = [
-    { key: 0, labelCht: '全部', label: 'All',  type: 'all' }, 
-    { key: 1, labelCht: '成功', label:'Success',  type: 'APPR' },
-    { key: 2, labelCht: '拒絕', label:'Reject', type: 'REJT' }, 
-    { key: 3, labelCht: '取消', label:'Cancelled', type: 'CANC' }, 
-    { key: 4, labelCht: '進行中', label:'In Progress', type: 'INPR' }, 
+    { key: 0, i18nLabel: 'all', labelCht: '全部', label: 'All',  type: 'all' },
+    { key: 1, i18nLabel: 'success', labelCht: '成功', label:'Success',  type: 'APPR' },
+    { key: 2, i18nLabel: 'reject', labelCht: '拒絕', label:'Reject', type: 'REJT' },
+    { key: 3, i18nLabel: 'cancelledStatus', labelCht: '取消', label:'Cancelled', type: 'CANC' },
+    { key: 4, i18nLabel: 'inProgress', labelCht: '進行中', label:'In Progress', type: 'INPR' },
 ];