fix FPS text size and add i18n

src/pages/Payment/FPS/FPS.js

@@ -398,8 +398,8 @@ const Index = () => {
                         <Grid container justifyContent="flex-start" alignItems="center" >
                             <center>
                                 <Grid item xs={12} md={12} >
-
-                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                    <br /><br />
+                                    <Typography component="span" variant="body1" sx={{ width: '80%', margin: 'auto', mt: 4, textAlign: "left", fontSize: '20px' }}>
                                         <FormattedMessage id="payAlert"/>
                                         <br /><br />
                                         <img src={FpsIcon} width="80" height="80" alt="FPS"></img>
@@ -408,8 +408,9 @@ const Index = () => {
                                         <br />
                                         {"HK$ " + currencyFormat(paymentData.amount)}
                                     </Typography>
+                                    <br /><br />
                                     {isError ?
-                                        <Typography variant="h3" color="error" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                        <Typography component="span" variant="body1" color="error" sx={{ width: '80%', margin: 'auto', mt: 4, textAlign: "left", fontSize: '20px' }}>
                                             <FormattedMessage id="fpsPaymentErrorMsg"/>
                                         </Typography>
                                         :
@@ -426,7 +427,7 @@ const Index = () => {
                                                             mobliePaymentPrd();
                                                         }}
                                                         sx={{ m: 4 }}
-                                                    >請選擇支付程式付款</Button>
+                                                    ><FormattedMessage id="fpsSelectPaymentApp"/></Button>
                                                 :
                                                 <>
                                                     <Button
@@ -438,7 +439,7 @@ const Index = () => {
                                                             mobliePayment();
                                                         }}
                                                         sx={{ m: 4 }}
-                                                    >請選擇支付程式付款-Testing</Button>
+                                                    ><FormattedMessage id="fpsSelectPaymentApp"/>-Testing</Button>
                                                     <Button
                                                         component="span"
                                                         variant="contained"
@@ -448,7 +449,7 @@ const Index = () => {
                                                             mobliePaymentFps();
                                                         }}
                                                         sx={{ m: 4 }}
-                                                    >請選擇支付程式付款-fps prefix</Button>
+                                                    ><FormattedMessage id="fpsSelectPaymentApp"/>-fps prefix</Button>
                                                 </>
                                             }
                                         </Typography>

src/translations/en.json

@@ -511,8 +511,9 @@
   "fpsQrcodeTitle3":"Please complete the payment process within the specified time",
   "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.",
+    "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.",
+    "fpsSelectPaymentApp":"Please Select Bank App",
 
   "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

@@ -89,8 +89,9 @@
   "fpsQrcodeTitle3":"请在规定时间内完成付款流程",
   "fpsQrcodeTitle4":"剩余时间:",
   "fpsQrcodeTitle5":"秒",
-  "fpsQrcodeExpired":"二维码已过期",
-  "fpsPaymentErrorMsg":"载入支付二维码时发生错误。请勿在付款过程中更新此页面。如果付款未完成，请点击「取消支付」按钮并重新支付。由此造成的不便，敬请谅解。",
+    "fpsQrcodeExpired":"二维码已过期",
+    "fpsPaymentErrorMsg":"载入支付二维码时发生错误。请勿在付款过程中更新此页面。如果付款未完成，请点击「取消支付」按钮并重新支付。由此造成的不便，敬请谅解。",
+    "fpsSelectPaymentApp":"请选择付款支付程序",
   
   "payDnRemark": "在{date}下午12时30分前将付款证明（例如银行入数纸或网上银行付款记录）电邮至 [email protected]",
   "payNPGORemark" :"在{date}下午12时30分前到北角政府合署收款处完成付款",

src/translations/zh-HK.json

@@ -89,8 +89,9 @@
   "fpsQrcodeTitle3":"請在規定時間內完成付款流程",
   "fpsQrcodeTitle4":"剩餘時間:",
   "fpsQrcodeTitle5":"秒",
-  "fpsQrcodeExpired":"二維碼已過期",
-  "fpsPaymentErrorMsg":"載入支付二維碼時發生錯誤。請勿在付款過程中更新此頁面。如果付款未完成，請點擊「取消支付」按鈕並重新支付。由此造成的不便，敬請諒解。",
+    "fpsQrcodeExpired":"二維碼已過期",
+    "fpsPaymentErrorMsg":"載入支付二維碼時發生錯誤。請勿在付款過程中更新此頁面。如果付款未完成，請點擊「取消支付」按鈕並重新支付。由此造成的不便，敬請諒解。",
+    "fpsSelectPaymentApp":"請選擇付款支付程式",
 
   "payDnRemark": "在{date}下午12時30分前將付款證明（例如銀行入數紙或網上銀行付款記錄）電郵至 [email protected]",
   "payNPGORemark" :"在{date}下午12時30分前到北角政府合署收款處完成付款",