FPS refresh fix

src/pages/Payment/FPS/FPS.js

@@ -59,6 +59,7 @@ const Index = () => {
     const [fpsqrcodeurlFps, setFpsqrcodeurlFps] = React.useState("");
     const [browserType, setBrowserType] = React.useState("");
     const [sysEnv, setSysEnv] = React.useState("");
+    const [isError, setIsError] = React.useState(false);
     const mobileBrowser = "Mobile";
     const desktopBrowser = "Desktop";
     
@@ -171,49 +172,68 @@ const Index = () => {
                 // "eserviceid":"<eserviceid>"
             },
             onSuccess: function(responseData){
-                /*
-                    {
-                        "paymentid": "<paymentid>",
-                        "paymentstatus": "<paymentstatus>",
-                        "fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
-                        "fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
-                        "fpsqrcodeurl": "<fpsqrcodeurl>"
+                try {
+                    /*
+                        {
+                            "paymentid": "<paymentid>",
+                            "paymentstatus": "<paymentstatus>",
+                            "fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
+                            "fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
+                            "fpsqrcodeurl": "<fpsqrcodeurl>"
+                        }
+                    */
+                   if (!responseData || !responseData.fpsqrcodeurl) {
+                       throw new Error("Missing expected response data");
+                   }
+                   setResponeDataData(responseData)
+                   const timeoutdatetime = responseData.fpsmerchanttimeoutdatetime
+                   setSysEnv(responseData.sysEnv)
+                   const searchString = "[UTC]";
+                   let convertedDateString = "";
+                   if ( timeoutdatetime.toString().includes(searchString) ){
+                        convertedDateString = timeoutdatetime.replace("[UTC]", "");
+                    } else {
+                        convertedDateString = timeoutdatetime;
                     }
-                */
-               setResponeDataData(responseData)
-               const timeoutdatetime = responseData.fpsmerchanttimeoutdatetime
-               setSysEnv(responseData.sysEnv)
-               const searchString = "[UTC]";
-               let convertedDateString = "";
-               if ( timeoutdatetime.toString().includes(searchString) ){
-                    convertedDateString = timeoutdatetime.replace("[UTC]", "");
-                } else {
-                    convertedDateString = timeoutdatetime;
+                    setFpsmerchanttimeoutdatetime(convertedDateString)
+                   
+                    const parsedUrl = new URL(responseData.fpsqrcodeurl);
+                    const fpsqrcodeurl = "https://"+window.location.hostname+'/payment'+parsedUrl.pathname;
+                    const fpsqrcodeurlwithFps = "https://"+"fps."+window.location.hostname+parsedUrl.pathname;
+                    console.log(parsedUrl)
+                    console.log(fpsqrcodeurl)
+                    console.log(fpsqrcodeurlwithFps)
+     
+                    const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='
+                                     + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId"));
+                    const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='
+                                     + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId"));
+                    const openPASGUrlPrdFps = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='
+                                     + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId"));
+                    // const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='
+                    //                  + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));
+                    // const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='
+                    //                  + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));
+                    // const openPASGUrlPrdFps = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='
+                    //                  + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));
+                    setFpsqrcodeurl(openPASGUrl)
+                    setFpsqrcodeurlPrd(openPASGUrlPrd)
+                    setFpsqrcodeurlFps(openPASGUrlPrdFps)
+                } catch (e) {
+                    console.error("Error processing response:", e);
+                    setIsError(true);
+                    setOnReady(true);
                 }
-                setFpsmerchanttimeoutdatetime(convertedDateString)
-               
-                const parsedUrl = new URL(responseData.fpsqrcodeurl);
-                const fpsqrcodeurl = "https://"+window.location.hostname+'/payment'+parsedUrl.pathname;
-                const fpsqrcodeurlwithFps = "https://"+"fps."+window.location.hostname+parsedUrl.pathname;
-                console.log(parsedUrl)
-                console.log(fpsqrcodeurl)
-                console.log(fpsqrcodeurlwithFps)
- 
-                const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='
-                                 + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId"));
-                const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='
-                                 + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId"));
-                const openPASGUrlPrdFps = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='
-                                 + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId"));
-                // const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='
-                //                  + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));
-                // const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='
-                //                  + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));
-                // const openPASGUrlPrdFps = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='
-                //                  + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));
-                setFpsqrcodeurl(openPASGUrl)
-                setFpsqrcodeurlPrd(openPASGUrlPrd)
-                setFpsqrcodeurlFps(openPASGUrlPrdFps)
+            },
+            onFail: function(error){
+                console.error("post onFail:", error);
+                setIsError(true);
+                setOnReady(true);
+            },
+            onError: function(error){
+                console.error("post onError:", error);
+                setIsError(true);
+                setOnReady(true);
             }
         });
 
@@ -313,19 +333,29 @@ const Index = () => {
     const cancelPayment = ()=>{
         if (Object.keys(paymentData).length>0){
             getPaymentStatus()
-            if (paymentStatusCode === "INPR"){
+            if (paymentStatusCode === "INPR" || isError || paymentStatusCode === ""){
                 HttpUtils.post({
                     url: UrlUtils.CANCEL_PAYMENT_URL,
                     params:{
                         "transactionid": paymentData.transactionid,
                         "webtoken": paymentData.webtoken,
-                        "paymentid": fpsTransctionData.paymentid
+                        "paymentid": fpsTransctionData.paymentid || localStorage.getItem("paymentId")
                     },
                     onSuccess: function(){
                         navigate('/paymentPage/fps/ackpage');
                         let page = '/paymentPage/fps/ackpage';
                         let stateParams = { state: { transactionid: paymentData.transactionid} }
                         navigate(page, stateParams);                    
+                    },
+                    onFail: function(){
+                        let page = '/paymentPage/fps/ackpage';
+                        let stateParams = { state: { transactionid: paymentData.transactionid} }
+                        navigate(page, stateParams);                    
+                    },
+                    onError: function(){
+                        let page = '/paymentPage/fps/ackpage';
+                        let stateParams = { state: { transactionid: paymentData.transactionid} }
+                        navigate(page, stateParams);                    
                     }
                 });
             }
@@ -378,7 +408,12 @@ const Index = () => {
                                         <br />
                                         {"HK$ " + currencyFormat(paymentData.amount)}
                                     </Typography>
-                                    {browserType==mobileBrowser?
+                                    {isError ?
+                                        <Typography variant="h3" color="error" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                            <FormattedMessage id="fpsPaymentErrorMsg"/>
+                                        </Typography>
+                                        :
+                                        browserType==mobileBrowser?
                                         <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                             {
                                                 sysEnv=="prod"?

src/translations/en.json

@@ -511,6 +511,7 @@
   "fpsQrcodeTitle4":"Remaining time:",
   "fpsQrcodeTitle5":"s",
   "fpsQrcodeExpired":"QR code has expired.",
+  "fpsPaymentErrorMsg":"An error occurred while loading the payment. Please do not refresh the page. If the payment was not made successfully, please click 'Cancel payment' and try the payment again.",
 
   "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

@@ -90,6 +90,7 @@
   "fpsQrcodeTitle4":"剩余时间:",
   "fpsQrcodeTitle5":"秒",
   "fpsQrcodeExpired":"二维码已过期",
+  "fpsPaymentErrorMsg":"载入付款时发生错误。请勿重新整理页面。如果付款未能成功完成，请按「取消付款」并重新尝试付款。",
   
   "payDnRemark": "在{date}下午12时30分前将付款证明（例如银行入数纸或网上银行付款记录）电邮至 [email protected]",
   "payNPGORemark" :"在{date}下午12时30分前到北角政府合署收款处完成付款",

src/translations/zh-HK.json

@@ -90,6 +90,7 @@
   "fpsQrcodeTitle4":"剩餘時間:",
   "fpsQrcodeTitle5":"秒",
   "fpsQrcodeExpired":"二維碼已過期",
+  "fpsPaymentErrorMsg":"載入付款時發生錯誤。請勿重新整理頁面。如果付款未能成功完成，請按「取消付款」並重新嘗試付款。",
 
   "payDnRemark": "在{date}下午12時30分前將付款證明（例如銀行入數紙或網上銀行付款記錄）電郵至 [email protected]",
   "payNPGORemark" :"在{date}下午12時30分前到北角政府合署收款處完成付款",