diff --git a/src/assets/images/icons/expiredQrcode.png b/src/assets/images/icons/expiredQrcode.png deleted file mode 100644 index b8bd622..0000000 Binary files a/src/assets/images/icons/expiredQrcode.png and /dev/null differ diff --git a/src/assets/images/icons/expiredQrcodeCN.png b/src/assets/images/icons/expiredQrcodeCN.png new file mode 100644 index 0000000..facd525 Binary files /dev/null and b/src/assets/images/icons/expiredQrcodeCN.png differ diff --git a/src/assets/images/icons/expiredQrcodeEN.png b/src/assets/images/icons/expiredQrcodeEN.png new file mode 100644 index 0000000..aa4a7a4 Binary files /dev/null and b/src/assets/images/icons/expiredQrcodeEN.png differ diff --git a/src/assets/images/icons/expiredQrcodeZH.png b/src/assets/images/icons/expiredQrcodeZH.png new file mode 100644 index 0000000..8cd5ff9 Binary files /dev/null and b/src/assets/images/icons/expiredQrcodeZH.png differ diff --git a/src/pages/Payment/FPS/FPS.js b/src/pages/Payment/FPS/FPS.js index 4107c69..3f1fa51 100644 --- a/src/pages/Payment/FPS/FPS.js +++ b/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() { + +

FPS
@@ -406,13 +427,20 @@ const Index = () => {
{"["+paymentId+"]"}
- -
- -
-   - {timeDownCount}  - + + { + timeDownCount<=0? + : + <> + +
+ +
+   + {timeDownCount}  + + + } } diff --git a/src/translations/en.json b/src/translations/en.json index c397958..010144c 100644 --- a/src/translations/en.json +++ b/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 gld_acct@gld.gov.hk by {date} 12:30 p.m.", "payNPGORemark" :"Payment to be completed at NPGO Collection Office by {date} 12:30 p.m.", diff --git a/src/translations/zh-CN.json b/src/translations/zh-CN.json index 0ce93d5..99d1174 100644 --- a/src/translations/zh-CN.json +++ b/src/translations/zh-CN.json @@ -77,6 +77,7 @@ "fpsQrcodeTitle3":"请在规定时间内完成付款流程", "fpsQrcodeTitle4":"剩余时间:", "fpsQrcodeTitle5":"秒", + "fpsQrcodeExpired":"二维码已过期", "payDnRemark": "在{date}下午12时30分前将付款证明（例如银行入数纸或网上银行付款记录）电邮至 gld_acct@gld.gov.hk", "payNPGORemark" :"在{date}下午12时30分前到北角政府合署收款处完成付款", @@ -416,6 +417,7 @@ "payId": "付款编号", "payConfirm": "确认付款", "payCancel": "取消付款", + "payAlert": "请不要关闭此窗口，您可以通过此页面底部的按钮完成此付款或取消此付款。", "payTotalDeatail": "付款总额", "payDeatail": "付款总额", "payTotal": "付款总额", diff --git a/src/translations/zh-HK.json b/src/translations/zh-HK.json index 92564c4..79500ce 100644 --- a/src/translations/zh-HK.json +++ b/src/translations/zh-HK.json @@ -77,6 +77,7 @@ "fpsQrcodeTitle3":"請在規定時間內完成付款流程", "fpsQrcodeTitle4":"剩餘時間:", "fpsQrcodeTitle5":"秒", + "fpsQrcodeExpired":"二維碼已過期", "payDnRemark": "在{date}下午12時30分前將付款證明（例如銀行入數紙或網上銀行付款記錄）電郵至 gld_acct@gld.gov.hk", "payNPGORemark" :"在{date}下午12時30分前到北角政府合署收款處完成付款", @@ -417,6 +418,7 @@ "payId": "付款編號", "payConfirm": "確認付款", "payCancel": "取消付款", + "payAlert": "請不要關閉此窗口，您可以透過本頁底部的按鈕完成此付款或取消本付款。", "payTotalDeatail": "付款總額", "payDeatail": "付款總額", "payTotal": "付款總額",