updated CR025, label change

src/pages/Payment/Card/index.js

@@ -24,6 +24,7 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {FormattedMessage} from "react-intl";
+import { ERROR_CONTAINED_BUTTON_SX } from "themes/colorConst";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -161,11 +162,10 @@ const Index = () => {
                                             component="span"
                                             variant="contained"
                                             size="large"
-                                            color="error"
                                             onClick={() => {
                                                 cancelPayment();
                                             }}
-                                            sx={{ m: 4 }}
+                                            sx={{ m: 4, ...ERROR_CONTAINED_BUTTON_SX }}
                                         >
                                             <FormattedMessage id="payCancel"/>
                                         </Button>

src/pages/Payment/FPS/FPS.js

@@ -4,6 +4,7 @@ import {
     Typography,
     Stack,
     Button,
+    Box,
 } from '@mui/material';
 import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
@@ -23,6 +24,7 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {FormattedMessage, useIntl} from "react-intl";
+import { PRIMARY_CONTAINED_BUTTON_SX, ERROR_CONTAINED_BUTTON_SX } from "themes/colorConst";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -399,9 +401,23 @@ const Index = () => {
                             <center>
                                 <Grid item xs={12} md={12} >
                                     <br /><br />
-                                    <Typography component="span" variant="body1" sx={{ width: '80%', margin: 'auto', mt: 4, textAlign: "left", fontSize: '20px' }}>
-                                        <FormattedMessage id="payAlert"/>
-                                        <br /><br />
+                                    <Box sx={{ width: { xs: '90%', md: '60%' }, mx: 'auto', mt: 4, textAlign: 'left' }}>
+                                        {!isError &&
+                                            <Typography component="div" variant="body1" sx={{ fontSize: '20px' }}>
+                                                <FormattedMessage id="payAlert"/>
+                                            </Typography>
+                                        }
+                                        {isError &&
+                                            <Typography component="div" variant="body1" color="error" sx={{ fontSize: '20px' }}>
+                                                <FormattedMessage id="fpsPaymentErrorMsg1"/>
+                                                <Box component="ul" sx={{ m: 0, mt: 1, pl: 2.5 }}>
+                                                    <li><FormattedMessage id="fpsPaymentErrorMsg2"/></li>
+                                                    <li><FormattedMessage id="fpsPaymentErrorMsg3"/></li>
+                                                </Box>
+                                            </Typography>
+                                        }
+                                    </Box>
+                                    <Typography component="span" variant="body1" sx={{ width: '80%', margin: 'auto', mt: 4, textAlign: "center", fontSize: '20px', display: 'block' }}>
                                         <img src={FpsIcon} width="80" height="80" alt="FPS"></img>
                                         <br />
                                         <FormattedMessage id="payTotalDeatail"/>
@@ -409,12 +425,8 @@ const Index = () => {
                                         {"HK$ " + currencyFormat(paymentData.amount)}
                                     </Typography>
                                     <br /><br />
-                                    {isError ?
-                                        <Typography component="span" variant="body1" color="error" sx={{ width: '80%', margin: 'auto', mt: 4, textAlign: "left", fontSize: '20px' }}>
-                                            <FormattedMessage id="fpsPaymentErrorMsg"/>
-                                        </Typography>
-                                        :
-                                        browserType==mobileBrowser?
+                                    {!isError &&
+                                        (browserType==mobileBrowser?
                                         <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                             {
                                                 sysEnv=="prod"?
@@ -480,26 +492,32 @@ const Index = () => {
                                                 </>
                                             }
                                         </Typography>
-                                    }
+                                    )}
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
-                                        <Button
-                                            component="span"
-                                            variant="contained"
-                                            size="large"
-                                            onClick={()=>{
-                                                cancelPayment();
-                                            }}
-                                            sx={{
-                                                m: 4,
-                                                backgroundColor: (theme) => theme.palette.error.darker,
-                                                color: (theme) => theme.palette.error.contrastText,
-                                                '&:hover': {
-                                                    backgroundColor: (theme) => theme.palette.error.dark,
-                                                },
-                                            }}
-                                        >
-                                            <FormattedMessage id="payCancel"/>
-                                        </Button>
+                                        {isError ?
+                                            <Button
+                                                component="span"
+                                                variant="contained"
+                                                size="large"
+                                                color="primary"
+                                                onClick={() => navigate("/dashboard")}
+                                                sx={{ m: 4, ...PRIMARY_CONTAINED_BUTTON_SX }}
+                                            >
+                                                <FormattedMessage id="backToMainPage"/>
+                                            </Button>
+                                            :
+                                            <Button
+                                                component="span"
+                                                variant="contained"
+                                                size="large"
+                                                onClick={()=>{
+                                                    cancelPayment();
+                                                }}
+                                                sx={{ m: 4, ...ERROR_CONTAINED_BUTTON_SX }}
+                                            >
+                                                <FormattedMessage id="payCancel"/>
+                                            </Button>
+                                        }
                                     </Typography>
                                 </Grid>
                             </center>

src/pages/Payment/FPS/FPSTest.js

@@ -18,6 +18,7 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {FormattedMessage} from "react-intl";
+import { ERROR_CONTAINED_BUTTON_SX } from "themes/colorConst";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -322,11 +323,10 @@ const Index = () => {
                                             component="span"
                                             variant="contained"
                                             size="large"
-                                            color="error"
                                             onClick={()=>{
                                                 cancelPayment();
                                             }}
-                                            sx={{ m: 4 }}
+                                            sx={{ m: 4, ...ERROR_CONTAINED_BUTTON_SX }}
                                         >
                                             <FormattedMessage id="payCancel"/>
                                         </Button>

src/pages/Payment/MultiPaymentWindow.js

@@ -277,23 +277,21 @@ const MultiPaymentWindow = (props) => {
       maxWidth={'xl'}
       fullScreen={props.isFullScreen}
     >
-      <DialogTitle >
-        <Grid container>
-          <Grid item>
-            <Stack direction="column" justifyContent="flex-start" alignItems="center">
-              <Typography variant="h4">
-                {windowTitle}              
-              </Typography>
-            </Stack>
-          </Grid>
-        </Grid>
+      <DialogTitle sx={{ pb: 1, pt: 2 }}>
+        <Typography variant="h4">
+          {windowTitle}
+        </Typography>
       </DialogTitle>
       <FormikProvider value={formik}>
         <form>
-          <DialogContent>
-            <DialogContentText>
-              <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "left", width: "100%", whiteSpace: "pre-line", paddingLeft: 0 }}>
-                <FormattedMessage id="paymentProcessLimited"/>
+          <DialogContent sx={{ pt: 1 }}>
+            <DialogContentText component="div" sx={{ m: 0 }}>
+              <FormLabel component="div" sx={{ fontSize: "18px", color: "#000000", textAlign: "left", width: "100%", paddingLeft: 0, mb: 0 }}>
+                <Box component="ul" sx={{ m: 0, pl: 2.5 }}>
+                  <li><FormattedMessage id="paymentProcessLimited1"/></li>
+                  <li><FormattedMessage id="paymentProcessLimited2"/></li>
+                  <li><FormattedMessage id="paymentProcessLimited3"/></li>
+                </Box>
               </FormLabel>
               <Grid item xs={12} md={12} sx={{ pt: 2 }} style={{ height: '100%' }} width="100%">
                 <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >

src/pages/authentication/auth-forms/PasswordAlertDialog.js

@@ -17,6 +17,7 @@ import {
 } from '@mui/material';
 import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
 import {FormattedMessage} from "react-intl";
+import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 
 const PasswordAlertDialog = (props) => {
   return (
@@ -63,7 +64,7 @@ const PasswordAlertDialog = (props) => {
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button variant="contained" color="error" onClick={props.handleClose} autoFocus>
+        <Button variant="contained" onClick={props.handleClose} autoFocus sx={PRIMARY_CONTAINED_BUTTON_SX}>
           <FormattedMessage id="close"/>
         </Button>
       </DialogActions>

src/pages/dashboard/Public/index.js

@@ -12,6 +12,7 @@ import {
 import { isORGLoggedIn, } from "utils/Utils";
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import { FormattedMessage, useIntl } from "react-intl";
+import { ERROR_CONTAINED_BUTTON_SX } from "themes/colorConst";
 import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
 import * as React from "react";
 import Loadable from 'components/Loadable';
@@ -300,7 +301,7 @@ const DashboardDefault = () => {
                   </Typography>
               </DialogContent>
               <DialogActions>
-                  <Button variant="contained" color="error" onClick={() => setIsPopUp(false)}><Typography variant="h5"><FormattedMessage id="close" /></Typography></Button>
+                  <Button variant="contained" onClick={() => setIsPopUp(false)} sx={ERROR_CONTAINED_BUTTON_SX}><Typography variant="h5"><FormattedMessage id="close" /></Typography></Button>
               </DialogActions>
             </Dialog>
         </div>

src/themes/colorConst.js

@@ -58,6 +58,17 @@ export const CONTAINED_PRIMARY_BLUE = '#0c489e';
 /** Validation error text/border — matches FormHelperText in styles.css (e.g. "Please enter password"). WCAG AA on white. */
 export const VALIDATION_ERROR_COLOR = '#B00020';
 
+/** WCAG 2.0 AA contained error button red — lightest tone passing 4.5:1 with white text (~4.57:1). */
+export const CONTAINED_ERROR_RED = '#e61f2a';
+
+export const ERROR_CONTAINED_BUTTON_SX = {
+    backgroundColor: CONTAINED_ERROR_RED,
+    color: '#FFFFFF',
+    '&:hover': {
+        backgroundColor: '#d32f2f',
+    },
+};
+
 export const PRIMARY_CONTAINED_BUTTON_SX = {
     backgroundColor: CONTAINED_PRIMARY_BLUE,
     color: '#FFFFFF',

src/translations/en.json

@@ -121,6 +121,7 @@
   "iAmSmartNoIdNoMsg": "Invalid information, please return to the creation of account page.",
 
   "mainPage": "Main Page",
+  "backToMainPage": "Back to Main Page",
   "myPublicNotice": "My Public Notices",
   "publicNotice": "Public Notice",
   "publicNoticeApp": "Public Notice Application",
@@ -418,7 +419,7 @@
   "payIdNRefer": "Payment No. / Payment Reference 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.",
+  "payAlert": "Please do not refresh or close this page during payment to avoid payment failure. In case of cancellation, please use the “Cancel Payment” button at the bottom of this page.",
   "payTotalDeatail": "Total Payment Amount",
   "payDeatail": "Total Payment Amount",
   "payTotal": "Total Payment Amount",
@@ -451,7 +452,9 @@
   "paymentLimitPrice2":" is only applicable when minimum amount is HK$0.10 and maximum amount is HK$9,999,999.99",
   "paymentLimitPPS":" Payment could not be made via mobile device browsers, please use desktop computers to make payment.",
   "paymentMethod": "Payment Method",
-  "paymentProcessLimited":"Please complete the payment process within 15 minutes.  Note: For FPS payments, scanning, payment and all necessary approvals must be finished within 3 minutes due to security-related QR code expiry.",
+  "paymentProcessLimited1":"Please complete the payment process within 15 minutes.",
+  "paymentProcessLimited2":"Please do not refresh or close any page during payment to avoid payment failure. In case of cancellation, please use the “Cancel Payment” button at the bottom of this page.",
+  "paymentProcessLimited3":"Note: For FPS payments, scanning, payment and all necessary approvals must be finished within 3 minutes due to security-related QR code expiry.",
   
   "publicNoticeDetailTitle": "Public Notice Application Information",
   "applyPerson": "Applicant",
@@ -515,7 +518,9 @@
   "fpsQrcodeTitle4":"Remaining time:",
   "fpsQrcodeTitle5":"s",
     "fpsQrcodeExpired":"QR code has expired.",
-    "fpsPaymentErrorMsg":"An error occurred while loading the payment QR code. Please do not refresh/reload this page manually during the payment. If the payment was not made successfully, please click 'Cancel payment' button and make the payment again. Sorry for the inconvenience caused.",
+    "fpsPaymentErrorMsg1":"The payment QR code is no longer valid after reloading the page. Please verify your banking transaction history:",
+    "fpsPaymentErrorMsg2":"If payment was deducted: Please contact Accounts Section (Tel.: 2231 5183/2231 5318) with your transaction details.",
+    "fpsPaymentErrorMsg3":"If payment was not deducted: Please click \"Back to Main Page\" and try again after 30 minutes.",
     "fpsSelectPaymentApp":"Please Select Bank App",
 
   "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.",

src/translations/zh-CN.json

@@ -90,7 +90,9 @@
   "fpsQrcodeTitle4":"剩余时间:",
   "fpsQrcodeTitle5":"秒",
     "fpsQrcodeExpired":"二维码已过期",
-    "fpsPaymentErrorMsg":"载入支付二维码时发生错误。请勿在付款过程中更新此页面。如果付款未完成，请点击「取消支付」按钮并重新支付。由此造成的不便，敬请谅解。",
+    "fpsPaymentErrorMsg1":"页面重新加载时发生错误，支付二维码已失效。请先确认银行交易纪录：",
+    "fpsPaymentErrorMsg2":"如已扣款：请联络会计组（电话：2231 5183 / 2231 5318）并提供交易信息。",
+    "fpsPaymentErrorMsg3":"如未扣款：请点击「返回主页」并等待30分钟后重新尝试。",
     "fpsSelectPaymentApp":"请选择付款支付程序",
   
   "payDnRemark": "在{date}下午12时30分前将付款证明（例如银行入数纸或网上银行付款记录）电邮至 gld_acct@gld.gov.hk",
@@ -159,6 +161,7 @@
   "iAmSmartNoIdNoMsg": "无效资料，请返回建立账户页面。",
 
   "mainPage": "主页",
+  "backToMainPage": "返回主页",
   "publicNotice": "公共启事",
   "publicNoticeApp": "公共啟事申请",
   "myPublicNotice": "我的公共启事",
@@ -452,7 +455,7 @@
   "payIdNRefer": "付款编号 / 付款参考编号",
   "payConfirm": "确认付款",
   "payCancel": "取消付款",
-  "payAlert": "请不要关闭此窗口，您可以通过此页面底部的按钮完成此付款或取消此付款。",
+  "payAlert": "付款过程中请勿重新整理或关闭此页面，以免支付失败。如需取消，请使用本页底部的「取消付款」按钮。",
   "payTotalDeatail": "付款总额",
   "payDeatail": "付款总额",
   "payTotal": "付款总额",
@@ -486,7 +489,9 @@
   "paymentLimitPrice2":"只适用于最小金额为 0.10 港元及最高金额为 9,999,999.99港元",
   "paymentLimitPPS":"付款不适用于流动装置的浏览器，请使用桌面电脑。",
   "paymentMethod": "付款方式",
-  "paymentProcessLimited":"请于15分钟内完成付款程序。  注意：使用转数快(FPS)时，因二维码具安全时效限制，须于3分钟内完成扫码、付款及所有相关审核程序。",
+  "paymentProcessLimited1":"请于15分钟内完成付款程序。",
+  "paymentProcessLimited2":"付款过程中请勿重新整理或关任何页面，以免支付失败。如需取消，请使用本页底部的「取消付款」按钮。",
+  "paymentProcessLimited3":"注意：使用转数快(FPS)时，因二维码具安全时效限制，须于3分钟内完成扫码、付款及所有相关审核程序。",
 
   "publicNoticeDetailTitle": "公共启事申请资料",
   "applyPerson": "申请人",

src/translations/zh-HK.json

@@ -90,7 +90,9 @@
   "fpsQrcodeTitle4":"剩餘時間:",
   "fpsQrcodeTitle5":"秒",
     "fpsQrcodeExpired":"二維碼已過期",
-    "fpsPaymentErrorMsg":"載入支付二維碼時發生錯誤。請勿在付款過程中更新此頁面。如果付款未完成，請點擊「取消支付」按鈕並重新支付。由此造成的不便，敬請諒解。",
+    "fpsPaymentErrorMsg1":"頁面重新載入時發生錯誤，支付二維碼已失效。請先確認銀行交易紀錄：",
+    "fpsPaymentErrorMsg2":"如已扣款：請聯絡會計組（電話：2231 5183 / 2231 5318）並提供交易資料。",
+    "fpsPaymentErrorMsg3":"如未扣款：請點擊「返回主頁」並等待30分鐘後重新嘗試。",
     "fpsSelectPaymentApp":"請選擇付款支付程式",
 
   "payDnRemark": "在{date}下午12時30分前將付款證明（例如銀行入數紙或網上銀行付款記錄）電郵至 gld_acct@gld.gov.hk",
@@ -159,6 +161,7 @@
   "iAmSmartNoIdNoMsg": "無效資料，請返回建立賬戶頁面。",
 
   "mainPage": "主頁",
+  "backToMainPage": "返回主頁",
   "publicNotice": "公共啟事",
   "publicNoticeApp": "公共啟事申請",
   "myPublicNotice": "我的公共啟事",
@@ -453,7 +456,7 @@
   "payIdNRefer": "付款編號 / 付款參考編號",
   "payConfirm": "確認付款",
   "payCancel": "取消付款",
-  "payAlert": "請不要關閉此窗口，您可以透過本頁底部的按鈕完成此付款或取消本付款。",
+  "payAlert": "付款過程中請勿重新整理或關閉此頁面，以免支付失敗。如需取消，請使用本頁底部的「取消付款」按鈕。",
   "payTotalDeatail": "付款總額",
   "payDeatail": "付款總額",
   "payTotal": "付款總額",
@@ -487,7 +490,9 @@
   "paymentLimitPrice2":"只適用於最小金額為 0.10 港元及最高金額為 9,999,999.99港元",
   "paymentLimitPPS":"付款不適用於流動裝置的瀏覽器，請使用桌面電腦。",
   "paymentMethod": "付款方法",
-  "paymentProcessLimited":"請於15分鐘內完成付款程序。  注意：使用轉數快(FPS)時，因二維碼具安全時效限制，須於3分鐘內完成掃碼、付款及所有相關審核程序。",
+  "paymentProcessLimited1":"請於15分鐘內完成付款程序。",
+  "paymentProcessLimited2":"付款過程中請勿重新整理或關閉此頁面，以免支付失敗。如需取消，請使用本頁底部的「取消付款」按鈕。",
+  "paymentProcessLimited3":"注意：使用轉數快(FPS)時，因二維碼具安全時效限制，須於3分鐘內完成掃碼、付款及所有相關審核程序。",
 
   "publicNoticeDetailTitle": "公共啟事申請資料",
   "applyPerson": "申請人",