update fps expired

src/pages/Payment/FPS/FPS.js

@@ -10,7 +10,9 @@ import * as HttpUtils from "utils/HttpUtils";
 import * as UrlUtils from "utils/ApiPathConst";
 import { useNavigate } from "react-router-dom";
 import FpsIcon from "assets/images/icons/fps.svg";
-import expiredQrcode from "assets/images/icons/expiredQrcode.png";
+import expiredQrcodeEN from "assets/images/icons/expiredQrcodeEN.png";
+import expiredQrcodeZH from "assets/images/icons/expiredQrcodeZH.png";
+import expiredQrcodeCN from "assets/images/icons/expiredQrcodeCN.png";
 import { useLocation } from 'react-router-dom';
 // import {paymentPath} from "auth/utils";
 import {currencyFormat} from "utils/FormatUtils";
@@ -20,7 +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";
+import {FormattedMessage, useIntl} from "react-intl";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -37,12 +39,15 @@ const BackgroundHead = {
 const Index = () => {
     const navigate = useNavigate()
     const location = useLocation();
+    const intl = useIntl();
+    const { locale } = intl;
 
     const [locationData, setLocationData] = React.useState({});
     const [paymentData, setPaymentData] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
     const [qrCodeTimeout, setqrCodeTimeout] = React.useState(false);
     const [paymentStatusCode, setPaymentStatusCode] = React.useState("");
+    const [expiredQrcode, setExpiredQrcode] = React.useState(expiredQrcodeEN);
     
     const [responeData, setResponeDataData] = React.useState({});
     const [fpsTransctionData, setFpsTransctionData] = React.useState({});
@@ -101,6 +106,17 @@ const Index = () => {
         }
     }, [locationData]);
 
+    React.useEffect(() => {
+        // console.log (locationData)
+        if (locale === 'zh-HK'){
+            setExpiredQrcode(expiredQrcodeZH)
+        } else if (locale === 'en'){
+            setExpiredQrcode(expiredQrcodeEN)
+        } else {
+            setExpiredQrcode(expiredQrcodeCN)
+        }
+    }, [locale]);
+
     React.useEffect(() => {
         // console.log (paymentData)
         if (Object.keys(paymentData).length > 0){
@@ -202,7 +218,7 @@ const Index = () => {
         });
 
         //testing
-        // const timeoutdatetime = "2024-05-06T11:10:30Z[UTC]"
+        // const timeoutdatetime = "2024-11-18T07:04:35Z[UTC]"
         // const convertedDateString = timeoutdatetime.replace("[UTC]", "");
         // setFpsmerchanttimeoutdatetime(convertedDateString)
         // setPaymentId("C202310268000681")
@@ -210,7 +226,7 @@ const Index = () => {
         // {
         //     "paymentid": "C202310268000681",
         //     "paymentstatus": "INPR",
-        //     "fpsmerchanttimeoutdatetime": "2024-05-06T11:10:30Z[UTC]",
+        //     "fpsmerchanttimeoutdatetime": "2024-11-18T07:04:35Z[UTC]",
         //     "fpsqrcodeimgbase64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAuyklEQVR4Xu3dfcy/d1nff2IAAAAASUVORK5CYII=",
         //     "fpsqrcodeurl": "http://127.0.0.1:8080/api/payment/wallet/fps/enquiryfpspayload/vm.JKDDlTOavR3ASviSwUnS1Lw4-"
         // }
@@ -275,17 +291,20 @@ const Index = () => {
         const timeOutDate = new Date(fpsmerchanttimeoutdatetime);
         const currentTime = new Date;
         const timedowncount = Math.round((timeOutDate.getTime() - currentTime.getTime()) / 1000);
-        setTimeDownCount(timedowncount);
         // console.log(time)
         // console.log(timeOutDate)
         // console.log(currentTime)
         // console.log(timeOutDate.getTime()-currentTime.getTime())
         getPaymentStatus();
+
         if (timeOutDate.getTime()<currentTime.getTime()){
             // console.log("stop");
             clearInterval(currentTimer.current);
             setqrCodeTimeout(true)
+            setTimeDownCount(0);
             // cancelPayment()
+        }else{
+            setTimeDownCount(timedowncount);
         }
     },[time])
 
@@ -349,6 +368,8 @@ const Index = () => {
                                 <Grid item xs={12} md={12} >
 
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                        <FormattedMessage id="payAlert"/>
+                                        <br /><br />
                                         <img src={FpsIcon} width="80" height="80" alt="FPS"></img>
                                         <br />
                                         <FormattedMessage id="payTotalDeatail"/>
@@ -406,13 +427,20 @@ const Index = () => {
                                             <br />
                                             {"["+paymentId+"]"}
                                             <br/>
-                                            <FormattedMessage id="fpsQrcodeTitle2"/>
-                                            <br />
-                                            <FormattedMessage id="fpsQrcodeTitle3"/>
-                                            <br />
-                                            <FormattedMessage id="fpsQrcodeTitle4"/>&nbsp;
-                                            {timeDownCount}&nbsp; 
-                                            <FormattedMessage id="fpsQrcodeTitle5"/>
+                                            
+                                            {
+                                                timeDownCount<=0?
+                                                <FormattedMessage id="fpsQrcodeExpired"/>:
+                                                <>
+                                                    <FormattedMessage id="fpsQrcodeTitle2"/>
+                                                    <br />
+                                                    <FormattedMessage id="fpsQrcodeTitle3"/>
+                                                    <br />
+                                                    <FormattedMessage id="fpsQrcodeTitle4"/>&nbsp;
+                                                    {timeDownCount}&nbsp; 
+                                                    <FormattedMessage id="fpsQrcodeTitle5"/>
+                                                </>
+                                            }
                                         </Typography>
                                     }
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>

src/translations/en.json

@@ -384,6 +384,7 @@
   "payId": "Payment No.",
   "payConfirm": "Confirm payment",
   "payCancel": "Cancel payment",
+  "payAlert": "Please don’t close this window, you may either complete this payment or cancel this payment by the button at the bottom of this page.",
   "payTotalDeatail": "Total Payment Amount",
   "payDeatail": "Total Payment Amount",
   "payTotal": "Total Payment Amount",
@@ -478,6 +479,7 @@
   "fpsQrcodeTitle3":"Please complete the payment process within the specified time",
   "fpsQrcodeTitle4":"Remaining time:",
   "fpsQrcodeTitle5":"s",
+  "fpsQrcodeExpired":"QR code has expired.",
 
   "payDnRemark": "Payment proof (e.g. ATM receipt, internet banking record) to be sent to [email protected] by {date} 12:30 p.m.",
   "payNPGORemark" :"Payment to be completed at NPGO Collection Office by {date} 12:30 p.m.",

src/translations/zh-CN.json

@@ -77,6 +77,7 @@
   "fpsQrcodeTitle3":"请在规定时间内完成付款流程",
   "fpsQrcodeTitle4":"剩余时间:",
   "fpsQrcodeTitle5":"秒",
+  "fpsQrcodeExpired":"二维码已过期",
   
   "payDnRemark": "在{date}下午12时30分前将付款证明（例如银行入数纸或网上银行付款记录）电邮至 [email protected]",
   "payNPGORemark" :"在{date}下午12时30分前到北角政府合署收款处完成付款",
@@ -416,6 +417,7 @@
   "payId": "付款编号",
   "payConfirm": "确认付款",
   "payCancel": "取消付款",
+  "payAlert": "请不要关闭此窗口，您可以通过此页面底部的按钮完成此付款或取消此付款。",
   "payTotalDeatail": "付款总额",
   "payDeatail": "付款总额",
   "payTotal": "付款总额",

src/translations/zh-HK.json

@@ -77,6 +77,7 @@
   "fpsQrcodeTitle3":"請在規定時間內完成付款流程",
   "fpsQrcodeTitle4":"剩餘時間:",
   "fpsQrcodeTitle5":"秒",
+  "fpsQrcodeExpired":"二維碼已過期",
 
   "payDnRemark": "在{date}下午12時30分前將付款證明（例如銀行入數紙或網上銀行付款記錄）電郵至 [email protected]",
   "payNPGORemark" :"在{date}下午12時30分前到北角政府合署收款處完成付款",
@@ -417,6 +418,7 @@
   "payId": "付款編號",
   "payConfirm": "確認付款",
   "payCancel": "取消付款",
+  "payAlert": "請不要關閉此窗口，您可以透過本頁底部的按鈕完成此付款或取消本付款。",
   "payTotalDeatail": "付款總額",
   "payDeatail": "付款總額",
   "payTotal": "付款總額",