update fps

src/pages/Payment/FPS/FPS.js

@@ -10,6 +10,7 @@ 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 { useLocation } from 'react-router-dom';
 // import {paymentPath} from "auth/utils";
 import {currencyFormat} from "utils/FormatUtils";
@@ -30,6 +31,7 @@ const BackgroundHead = {
     backgroundPosition: 'right'
 }
 
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
@@ -39,6 +41,8 @@ const Index = () => {
     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 [responeData, setResponeDataData] = React.useState({});
     const [fpsTransctionData, setFpsTransctionData] = React.useState({});
@@ -241,6 +245,7 @@ const Index = () => {
                 },
                 onSuccess: function(responseData){
                     const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode;
+                    setPaymentStatusCode(paymentstatuscode)
                     if (paymentstatuscode != "" && paymentstatuscode != "INPR" ){
                         if (paymentstatuscode === 'APPR') {
                             // const timestamp = Date.now();
@@ -279,26 +284,30 @@ const Index = () => {
         if (timeOutDate.getTime()<currentTime.getTime()){
             // console.log("stop");
             clearInterval(currentTimer.current);
-            cancelPayment()
+            setqrCodeTimeout(true)
+            // cancelPayment()
         }
     },[time])
 
     const cancelPayment = ()=>{
         if (Object.keys(paymentData).length>0){
-            HttpUtils.post({
-                url: UrlUtils.CANCEL_PAYMENT_URL,
-                params:{
-                    "transactionid": paymentData.transactionid,
-                    "webtoken": paymentData.webtoken,
-                    "paymentid": fpsTransctionData.paymentid
-                },
-                onSuccess: function(){
-                    // navigate('/paymentPage/fps/ackpage');
-                    let page = '/paymentPage/fps/ackpage';
-                    let stateParams = { state: { transactionid: paymentData.transactionid} }
-                    navigate(page, stateParams);                    
-                }
-            });       
+            getPaymentStatus()
+            if (paymentStatusCode === "INPR"){
+                HttpUtils.post({
+                    url: UrlUtils.CANCEL_PAYMENT_URL,
+                    params:{
+                        "transactionid": paymentData.transactionid,
+                        "webtoken": paymentData.webtoken,
+                        "paymentid": fpsTransctionData.paymentid
+                    },
+                    onSuccess: function(){
+                        // navigate('/paymentPage/fps/ackpage');
+                        let page = '/paymentPage/fps/ackpage';
+                        let stateParams = { state: { transactionid: paymentData.transactionid} }
+                        navigate(page, stateParams);                    
+                    }
+                });
+            }
         }
     }
 
@@ -389,7 +398,11 @@ const Index = () => {
                                         <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                             <FormattedMessage id="fpsQrcodeTitle1"/>
                                             <br />
-                                            <img src={fpsTransctionData.fpsqrcodeimgbase64} alt="QR Code"/>
+                                            { 
+                                                !qrCodeTimeout?
+                                                <img src={fpsTransctionData.fpsqrcodeimgbase64} alt="QR Code"/>
+                                                :<img src={expiredQrcode} alt="Expired QR Code"/>
+                                            }
                                             <br />
                                             {"["+paymentId+"]"}
                                             <br/>