fix fps bug

src/pages/Payment/FPS/AckPage.js

@@ -43,14 +43,16 @@ const AckPage = () => {
     const [paymentid, setPaymentid] = React.useState("");
 
     React.useEffect(() => {
-       
-        if(location.state != undefined){
+       console.log(location.state)
+        if(Object.keys(location.state).length > 0){
             console.log(location.state)
             setPaymentData(location.state)
         }
     }, []);
 
     React.useEffect(() => {
+        console.log(paymentData)
+        console.log(transactionData)
         if(Object.keys(transactionData).length > 0 ){
             setOnReady(true);
         }
@@ -65,6 +67,16 @@ const AckPage = () => {
             setTransactionDate(trnDate)
             setTransactionTime(trnTime)
             setPaymentid(paymentData.paymentid)
+            HttpUtils.post({
+                url: paymentPath+paymentStatusApi+paymentid,
+                params:{
+                    "apprefid": paymentData.transactionid,
+                    "webtoken": paymentData.webtoken,   
+                },
+                onSuccess: function(responseData){
+                    setTransactionData(responseData)
+                }
+            });
         }
         // setTransactionData(
         //     {
@@ -87,16 +99,7 @@ const AckPage = () => {
         //         "transactionid": "20231026170103921"
         //     }
         // )
-        HttpUtils.post({
-            url: paymentPath+paymentStatusApi+paymentid,
-            params:{
-                "apprefid": paymentData.transactionid,
-                "webtoken": paymentData.webtoken,   
-            },
-            onSuccess: function(responseData){
-                setTransactionData(responseData)
-            }
-        });
+        
     }, [paymentData]);
 
     return (

src/pages/Payment/FPS/FPS.js

@@ -33,12 +33,13 @@ const Index = () => {
     const navigate = useNavigate()
     const location = useLocation();
 
+    const [locationData, setLocationData] = React.useState({});
     const [paymentData, setPaymentData] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
-    const [paymentid, setPaymentid] = React.useState("");
+    
+    const [fpsTransctionData, setFpsTransctionData] = React.useState({});
     const [fpsmerchanttimeoutdatetime, setFpsmerchanttimeoutdatetime] = React.useState("");
-    const [fpsqrcodeimgbase64, setFpsqrcodeimgbase64] = React.useState("");
-    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
@@ -53,16 +54,38 @@ const Index = () => {
     const [time, setTime] = React.useState(0);
 
     React.useEffect(() => {
-        setFpsqrcodeimgbase64("")
-        if(location.state != undefined){
-            setPaymentData(location.state)
-            loadForm();
+        console.log (location.state)
+        if(Object.keys(location.state).length > 0){
+            console.log (location.state)
+            setLocationData(location.state)
         }
     }, []);
 
     React.useEffect(() => {
-        setOnReady(true);
-    }, [fpsqrcodeimgbase64]);
+        console.log (locationData)
+        if (Object.keys(locationData).length > 0){
+            setPaymentData(locationData)
+            // loadForm();
+        }
+    }, [locationData]);
+
+    React.useEffect(() => {
+        console.log (paymentData)
+        if (Object.keys(paymentData).length > 0){
+            loadForm();
+        }
+    }, [paymentData]);
+
+    React.useEffect(() => {
+        console.log(fpsTransctionData)
+        if(Object.keys(fpsTransctionData).length > 0 && fpsmerchanttimeoutdatetime!=""){
+            setOnReady(true);
+            currentTimer.current = setInterval(() => {
+                setTime((prevTime) => prevTime + 1);
+            }, 1000);
+            return () => clearInterval(currentTimer.current);
+        }
+    }, [fpsTransctionData]);
 
 
     const loadForm = () => {
@@ -103,55 +126,43 @@ const Index = () => {
                         "fpsqrcodeurl": "<fpsqrcodeurl>"
                     }
                 */
-               setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64);
-               setPaymentid(responseData.paymentid);
-
+               setFpsTransctionData(responseData)
                const timeoutdatetime = responseData.fpsmerchanttimeoutdatetime
                const convertedDateString = timeoutdatetime.replace("[UTC]", "");
                setFpsmerchanttimeoutdatetime(convertedDateString)
-               
-               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)
+                    
+                
             }
         });
-        currentTimer.current = setInterval(() => {
-            setTime((prevTime) => prevTime + 1);
-        }, 1000);
-        return () => clearInterval(currentTimer.current);
+        
     }
 
     const getPaymentStatus = () => {
-        console.log(paymentstatuscode)
-        // if (paymentstatuscode != "" && paymentstatuscode != "INPR" ){
-        //     if (paymentstatuscode === 'APPR') {
-        //         const timestamp = Date.now();
-        //         navigate('/payment/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:"",webtoken:"", paymentid:paymentid} });
-        //     } else if (paymentstatuscode === 'CANC') {
-        //         navigate('/payment');
-        //     } else {
-        //         alert("error")
-        //     }
-        // }
-        
+        console.log(fpsTransctionData.paymentstatuscode)
         HttpUtils.post({
-            url: paymentPath+paymentStatusApi+paymentid,
+            url: paymentPath+paymentStatusApi+fpsTransctionData.transactionid,
             params:{
                 "apprefid": paymentData.transactionid,
                 "webtoken": paymentData.webtoken,   
             },
             onSuccess: function(responseData){
                 const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode;
-                if (paymentstatuscode === 'APPR') {
-                    const timestamp = Date.now();
-                    navigate('/payment/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:"",webtoken:"", paymentid:paymentid} });
-                } else if (paymentstatuscode === 'CANC') {
-                    window.top.location.href = paymentPath + payment.config.indexPagePath;
-                } else {
-                    window.top.location.href = paymentPath + payment.config.errPagePath;
+                if (paymentstatuscode != "" && paymentstatuscode != "INPR" ){
+                    if (paymentstatuscode === 'APPR') {
+                        const timestamp = Date.now();
+                        navigate('/payment/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:paymentData.transactionid,webtoken:paymentData.webtoken, paymentid:paymentid} });
+                    } else if (paymentstatuscode === 'CANC') {
+                        // window.top.location.href = paymentPath + payment.config.indexPagePath;
+                        navigate('/payment');
+                    } else {
+                        // window.top.location.href = paymentPath + payment.config.errPagePath;
+                        alert("ERROR")
+                    }
                 }
             },
             onError: function(){
@@ -178,7 +189,7 @@ const Index = () => {
             params:{
                 "transactionid": paymentData.transactionid,
                 "webtoken": paymentData.webtoken,
-                "paymentid": paymentid
+                "paymentid": fpsTransctionData.paymentid
             },
             onSuccess: function(){
                 navigate("/dashboard");
@@ -216,7 +227,7 @@ const Index = () => {
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                         請掃描以下二維碼
                                         <br />
-                                        <img src={fpsqrcodeimgbase64} alt="QR Code"/>
+                                        <img src={fpsTransctionData.fpsqrcodeimgbase64} alt="QR Code"/>
                                         <br />
                                         二維碼有效期限10分鐘
                                         <br />

src/pages/Payment/MultiPaymentWindow.js

@@ -2,6 +2,7 @@ import {
   useEffect,
   useState
 } from "react";
+import * as React from "react";
 
 // material-ui
 import {
@@ -18,6 +19,8 @@ import {
 } from '@mui/material';
 import { useFormik, FormikProvider } from 'formik';
 import * as yup from 'yup';
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
 
 
 const MultiPaymentWindow = (props) => {
@@ -25,6 +28,26 @@ const MultiPaymentWindow = (props) => {
   const windowTitle = "請選擇付款方式";
   const [content, setContent] = useState();
   const [paymentMethod, setPaymentMethod] = useState("");
+  const [transactionData, setTransactionData] = useState([]);
+  const [availableMethodData, setAvailableMethodData] = useState([]);
+  const [onReady, setOnReady] = useState(false);
+
+  useEffect(() => {
+    console.log(props.availableMethods)
+    console.log(props.transactionData)
+    if(props.availableMethods.length > 0){
+        setAvailableMethodData(props.availableMethods)
+        setTransactionData(props.transactionData)
+    }
+  }, [props.transactionData]);
+
+  useEffect(() => {
+    console.log(availableMethodData)
+    console.log(transactionData)
+    if(availableMethodData.length > 0){
+        setOnReady(true)
+    }
+  }, [availableMethodData]);
 
   useEffect(() => {
     console.log(paymentMethod)
@@ -45,7 +68,7 @@ const MultiPaymentWindow = (props) => {
       setPaymentMethod("")
     }
     setPaymentMethod
-    if(props.availableMethods.length > 0){
+    if(availableMethodData.length > 0){
       setContent(
         <Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">
           <Grid item xs={12} md={12}>
@@ -57,7 +80,7 @@ const MultiPaymentWindow = (props) => {
               </Grid>
               <Grid item>
                 <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
-                  {props.transactionData.transicationId}
+                  {transactionData.transicationId}
                 </FormLabel>
               </Grid>
             </Grid>
@@ -137,7 +160,7 @@ const MultiPaymentWindow = (props) => {
         </Grid>
       )
     }
-  }, [props.open,paymentMethod]);
+  }, [availableMethodData]);
 
   const formik = useFormik({
     initialValues: ({
@@ -169,7 +192,10 @@ const MultiPaymentWindow = (props) => {
         <form>
           <DialogContent>
             <DialogContentText>
-              {content}
+              {!onReady ?
+              <LoadingComponent />
+              :content
+              }
             </DialogContentText>
           </DialogContent>
         </form>

src/pages/Payment/index.js

@@ -27,12 +27,12 @@ const BackgroundHead = {
 }
 
 const Index = () => {
-    // const getAvailablePaymentUrl = "/payment/api/payment/availability";
-    const getTransactionIdUrl = "/payment/api/payment/transaction";
+    const getAvailablePaymentUrl = "/api/payment/availability";
+    const getTransactionIdUrl = "/api/payment/transaction";
     const navigate = useNavigate()
 
     // const local = {en:"en-us", zh:"zh-hk", cn:"zh-cn"};
-    // const preferpaymentmethods = ['visa','mastercard','pps','creditcard','fps'];
+    const preferpaymentmethods = ['visa','mastercard','pps','creditcard','fps'];
     const [totalAmount,setTotalAmount] = useState(0);
     const id =1;
     
@@ -51,12 +51,15 @@ const Index = () => {
     useEffect(() => {
         if(id > 0 ){
             setTotalAmount(2000)
+            getAvailablePayment()
+            getTransactionId()
         }
     }, []);
 
     const handleClose = () => {
         // handleReset()
         setOpen(false);
+        getTransactionId()
     };
 
     const paymentClick = () => {
@@ -64,9 +67,8 @@ const Index = () => {
         setSelectedPaymentMethod("")
         setConfirmPayment(false)
         if (totalAmount>0){
+            getTransactionId()  
             setOpen(true)
-            getAvailablePayment()
-            getTransactionId()
         }
     };
 
@@ -74,7 +76,7 @@ const Index = () => {
         if (confirmPayment){
             setOpen(false);
             if(selectedPaymentMethod === "FPS"){
-                navigate('/payment/fps', {state:{amount:totalAmount,transactionid:"",webtoken:""} });
+                navigate('/payment/fps', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken} });
                 // navigate('/payment/fps', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken} });
             }
             
@@ -242,35 +244,40 @@ const Index = () => {
             onSuccess: (responseData)=>{
                 let availableMethods = responseData.availablepaymentmethods;
                 setAvailableMethods(availableMethods);
-                if (availableMethods.length>0){
-                    availableMethods.forEach((method)=>{
-                        if(method.subtype === "FPS" ){
-                            setFPSStatus(method)
-                        }else if (method.subtype === "CreditCard"){
-                            method.supportedcard.forEach((supportedcard)=>{
-                                if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){
-                                    setCreditCardStatus(method)
-                                } else {
-                                    if (supportedcard === "UnionPay"){
-                                        setUnionPayStatus(method)
-                                    }
-                                }
-                            })
-                        }else if (method.subtype === "PPS" ){
-                            setPPSStatus(method)
-                        }
-                    });
-                }
+                
             }
         });
     }
 
+    useEffect(() => {
+        console.log(availableMethods)
+        if (availableMethods.length>0){
+            availableMethods.forEach((method)=>{
+                if(method.subtype === "FPS" ){
+                    setFPSStatus(method)
+                }else if (method.subtype === "CreditCard"){
+                    method.supportedcard.forEach((supportedcard)=>{
+                        if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){
+                            setCreditCardStatus(method)
+                        } else {
+                            if (supportedcard === "UnionPay"){
+                                setUnionPayStatus(method)
+                            }
+                        }
+                    })
+                }else if (method.subtype === "PPS" ){
+                    setPPSStatus(method)
+                }
+            });
+        }
+    }, [availableMethods]);
+
     const getTransactionId = () => {
         HttpUtils.get({
             url: paymentPath+getTransactionIdUrl,
             onSuccess: (responseData)=>{
-                const transactionData = responseData;
-                setTransactionData(transactionData)
+                // const transactionData = responseData;
+                setTransactionData(responseData)
             }
         });
     }