fix get status timer

src/pages/Payment/FPS/FPS.js

@@ -38,13 +38,19 @@ const Index = () => {
     const [paymentid, setPaymentid] = React.useState("");
     const [fpsmerchanttimeoutdatetime, setFpsmerchanttimeoutdatetime] = React.useState("");
     const [fpsqrcodeimgbase64, setFpsqrcodeimgbase64] = React.useState("");
-    const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState("");
-
-    const loadPaymentUrl = "/api/payment/wallet/fps";
+    // const [paymentstatuscode, setPaymentstatuscode] = React.useState("");
+    // const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState("");
+    // const pasgPath = 'https://fps.payapps.hkicl.com.hk'; //PRD
+    // const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing
+    // const loadPaymentUrl = "/api/payment/wallet/fps";
     const cancelPaymentUrl = "/api/payment/cancelpayment";
-    const paymentStatusApi = "/api/payment/status/";
+    // const paymentStatusApi = "/api/payment/status/";
     // const payloadUrl = "/api/payment/wallet/fps/enquiryfpspayload/";
     // const receiverUrl = "/noti-api/payment/payment-notification";
+    
+    //timer
+    const currentTimer = React.useRef();
+    const [time, setTime] = React.useState(0);
 
     React.useEffect(() => {
         setFpsqrcodeimgbase64("")
@@ -52,6 +58,11 @@ const Index = () => {
             setPaymentData(location.state)
         }
         loadForm();
+        currentTimer.current = setInterval(() => {
+            getPaymentStatus();
+            setTime((prevTime) => prevTime + 1);
+        }, 500);
+        return () => clearInterval(currentTimer.current);
     }, []);
 
     React.useEffect(() => {
@@ -60,82 +71,90 @@ const Index = () => {
 
 
     const loadForm = () => {
-        HttpUtils.post({
-            url: paymentPath+loadPaymentUrl,
-            params:{
-                "transactionid": paymentData.transactionid,
-                "webtoken": paymentData.webtoken,
-                "paymentmethod":"04,BCFP,FPS",
-                "order": { 
-                    "totalamount":paymentData.amount,
-                    "currency":"HKD",
-                    "orderdetail": 
-                    [ 
-                        { 
-                            "itemid": "1",
-                            "qty":"1",
-                            "unitprice":paymentData.amount,
-                            "amount":paymentData.amount
-                        },
-                    ]
-                },
-                // "locale":"<locale>",
-                // "eserviceid":"<eserviceid>"
-            },
-            onSuccess: function(responseData){
-                /*
-                    {
-                        "paymentid": "<paymentid>",
-                        "paymentstatus": "<paymentstatus>",
-                        "fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
-                        "fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
-                        "fpsqrcodeurl": "<fpsqrcodeurl>"
-                    }
-                */
-               setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64);
-               setPaymentid(responseData.paymentid);
-               setFpsmerchanttimeoutdatetime(responseData.fpsmerchanttimeoutdatetime);
-               const parsedUrl = new URL(responseData.fpsqrcodeurl);
-               const fpsqrcodeurl = parsedUrl.pathname
-               setFpsqrcodeurl(fpsqrcodeurl)
-               polling()
-            }
-        });
+        const timeoutdatetime = "2023-10-26T09:04:30Z[UTC]"
+        const convertedDateString = timeoutdatetime.replace("[UTC]", "");
+        setFpsmerchanttimeoutdatetime(convertedDateString)
+        setPaymentid("C202310268000681")
+        
+        // HttpUtils.post({
+        //     url: paymentPath+loadPaymentUrl,
+        //     params:{
+        //         "transactionid": paymentData.transactionid,
+        //         "webtoken": paymentData.webtoken,
+        //         "paymentmethod":"04,BCFP,FPS",
+        //         "order": { 
+        //             "totalamount":paymentData.amount,
+        //             "currency":"HKD",
+        //             "orderdetail": 
+        //             [ 
+        //                 { 
+        //                     "itemid": "1",
+        //                     "qty":"1",
+        //                     "unitprice":paymentData.amount,
+        //                     "amount":paymentData.amount
+        //                 },
+        //             ]
+        //         },
+        //         // "locale":"<locale>",
+        //         // "eserviceid":"<eserviceid>"
+        //     },
+        //     onSuccess: function(responseData){
+        //         /*
+        //             {
+        //                 "paymentid": "<paymentid>",
+        //                 "paymentstatus": "<paymentstatus>",
+        //                 "fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
+        //                 "fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
+        //                 "fpsqrcodeurl": "<fpsqrcodeurl>"
+        //             }
+        //         */
+        //        setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64);
+        //        setPaymentid(responseData.paymentid);
+        //        setFpsmerchanttimeoutdatetime(responseData.fpsmerchanttimeoutdatetime);
+        //        setPaymentstatuscode(responseData.paymentstatuscode);
+        //     //    const parsedUrl = new URL(responseData.fpsqrcodeurl);
+        //     //    const fpsqrcodeurl = parsedUrl.pathname;
+        //     //    const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(responseData.fpsqrcodeurl) + '&callback='
+        //     //                     + encodeURIComponent(paymentPath + payment.config.fpscallbackPage);
+        //     //    setFpsqrcodeurl(openPASGUrl)
+        //     }
+        // });
     }
 
     const getPaymentStatus = () => {
-        HttpUtils.post({
-            url: paymentPath+paymentStatusApi+paymentid,
-            params:{
-                "apprefid": paymentData.transactionid,
-                "webtoken": paymentData.webtoken,
-            },
-            onSuccess: function(responseData){
-                const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode;
-                if (paymentstatuscode === 'APPR') {
-                    const timestamp = '?t=' + Date.now();
-                    window.top.location.href = payment.config.domain + payment.config.ackPagePath + timestamp;
-                } else if (paymentstatuscode === 'CANC') {
-                    window.top.location.href = payment.config.domain + payment.config.indexPagePath;
-                } else {
-                    window.top.location.href = payment.config.domain + payment.config.errPagePath;
-                }
-            },
-            onError: function(){
-                cancelPayment()
-            }
-        });
+        
+        // HttpUtils.post({
+        //     url: paymentPath+paymentStatusApi+paymentid,
+        //     params:{
+        //         "apprefid": paymentData.transactionid,
+        //         "webtoken": paymentData.webtoken,   
+        //     },
+        //     onSuccess: function(responseData){
+        //         const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode;
+        //         if (paymentstatuscode === 'APPR') {
+        //             const timestamp = '?t=' + Date.now();
+        //             window.top.location.href = paymentPath + payment.config.ackPagePath + timestamp;
+        //         } else if (paymentstatuscode === 'CANC') {
+        //             window.top.location.href = paymentPath + payment.config.indexPagePath;
+        //         } else {
+        //             window.top.location.href = paymentPath + payment.config.errPagePath;
+        //         }
+        //     },
+        //     onError: function(){
+        //         cancelPayment()
+        //         clearInterval(currentTimer.current);
+        //     }
+        // });
     };
-
-    useEffect(() => {
-        const timeOut = fpsmerchanttimeoutdatetime=now()?500:null;
-        const interval = setInterval(() => {
-            getPaymentStatus();
-            console.log("test");
-        }, timeOut);
     
-        return () => clearInterval(interval);
-    }, []);
+    React.useEffect(() => {
+        const timeOutDate = new Date(fpsmerchanttimeoutdatetime);
+        const currentTime = new Date;
+        if (timeOutDate.getTime()<currentTime.getTime()){
+            console.log("stop");
+            clearInterval(currentTimer.current);
+        }
+    },[time])
 
     const cancelPayment = ()=>{
         HttpUtils.post({

src/pages/Payment/FPS/fpscallback.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import {useEffect} from "react";
+
+
+const Fpscallback = () => {
+
+    useEffect(() => {
+        window.close();
+    }, []);
+
+    return (
+        <div></div>
+    );
+}
+
+export default Fpscallback;

src/routes/PublicUserRoutes.js

@@ -16,6 +16,7 @@ const ProofSearch = Loadable(lazy(() => import('pages/Proof/Search_Public')));
 const ProofPayment = Loadable(lazy(() => import('pages/Proof/Payment')));
 const Payment_Multi = Loadable(lazy(() => import('pages/Payment')));
 const Payment_FPS = Loadable(lazy(() => import('pages/Payment/FPS')));
+const Payment_FPS_CallBack = Loadable(lazy(() => import('pages/Payment/FPS/fpscallback')));
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -70,6 +71,10 @@ const PublicDashboard = {
           path: 'payment/fps',
           element: <Payment_FPS/>
         },
+        {
+          path: 'payment/fps/fpscallback',
+          element: <Payment_FPS_CallBack/>
+        },
       ]
     },
   ]

yarn.lock

@@ -8715,7 +8715,7 @@ react-device-detect@^2.2.2:
   dependencies:
     ua-parser-js "^1.0.33"
 
-"react-dom@^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0", "react-dom@^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0 || ^17.0 || ^18.0.0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8 || ^17.0 || ^18.0", "react-dom@^16.8.0 || ^17.0.0", "react-dom@^17.0.0 || ^18.0.0", react-dom@^18.0.0, react-dom@^18.2.0, "react-dom@>= 0.14.0", "react-dom@>= 16.3.0", react-dom@>=16.0.0, react-dom@>=16.3.3, react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0, react-dom@>=16.9.0:
+"react-dom@^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0", "react-dom@^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0 || ^17.0 || ^18.0.0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8 || ^17.0 || ^18.0", "react-dom@^16.8.0 || ^17.0.0", "react-dom@^17.0.0 || ^18.0.0", react-dom@^18.0.0, react-dom@^18.2.0, "react-dom@>= 0.14.0", "react-dom@>= 16.3.0", react-dom@>=16, react-dom@>=16.0.0, react-dom@>=16.3.3, react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0, react-dom@>=16.9.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -8907,6 +8907,13 @@ react-to-print@^2.14.13:
   resolved "https://registry.npmjs.org/react-to-print/-/react-to-print-2.14.15.tgz"
   integrity sha512-SKnwOzU2cJ8eaAkoJO7+gNhvfEDmm+Y34IdcHsjtHioUevUPhprqbVtvNJlZ2JkGJ8ExK2QNWM9pXECTDR5D8w==
 
+react-toastify@^9.1.3:
+  version "9.1.3"
+  resolved "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz"
+  integrity sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==
+  dependencies:
+    clsx "^1.1.1"
+
 react-transition-group@^4.0.0, react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"
@@ -8925,7 +8932,7 @@ react-window@^1.8.7:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-"react@^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0", "react@^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0 || ^17.0 || ^18.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^15.3.0 || 16 || 17 || 18", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.9.0 || ^17.0.0 || ^18", "react@^17.0.0 || ^18.0.0", "react@^17.0.2 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 0.14.0", "react@>= 16", "react@>= 16.3.0", react@>=0.13, react@>=16.0.0, react@>=16.3.3, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@>=16.9.0:
+"react@^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0", "react@^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0 || ^17.0 || ^18.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^15.3.0 || 16 || 17 || 18", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.9.0 || ^17.0.0 || ^18", "react@^17.0.0 || ^18.0.0", "react@^17.0.2 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 0.14.0", "react@>= 16", "react@>= 16.3.0", react@>=0.13, react@>=16, react@>=16.0.0, react@>=16.3.3, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@>=16.9.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==