FPS update

src/auth/utils.js

@@ -12,6 +12,8 @@ export const hostPath = `http://${hostname}:${hostPort}`;
 //export const apiPath = `http://192.168.0.112:8090/api`;
 export const apiPath = `${hostPath}/api`;
 //export const apiPath = `/api`;
+export const paymentPath = `https://pnspsdev.gld.gov.hk/payment`;
+
 
 export const isUserLoggedIn = () => {
   return localStorage.getItem('userData') && localStorage.getItem(useJwt.jwtConfig.storageTokenKeyName);

src/pages/Payment/FPS/FPS.js

@@ -9,6 +9,9 @@ import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
 import { useNavigate } from "react-router-dom";
 import FpsIcon from "assets/images/icons/fps.svg";
+import { useLocation } from 'react-router-dom';
+import {paymentPath} from "auth/utils";
+// import {poll} from "utils/Utils";
 
 import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
@@ -28,53 +31,56 @@ const BackgroundHead = {
 
 const Index = () => {
     const navigate = useNavigate()
+    const location = useLocation();
 
-    const [fpsqrcodeimgUrl, setFpsqrcodeimgUrl] = React.useState();
+    const [paymentData, setPaymentData] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
+    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 cancelPaymentUrl = "/api/payment/cancelpayment";
+    const paymentStatusApi = "/api/payment/status/";
     // const payloadUrl = "/api/payment/wallet/fps/enquiryfpspayload/";
     // const receiverUrl = "/noti-api/payment/payment-notification";
 
     React.useEffect(() => {
+        setFpsqrcodeimgbase64("")
+        if(location.state != undefined){
+            setPaymentData(location.state)
+        }
         loadForm();
     }, []);
 
     React.useEffect(() => {
         setOnReady(true);
-    }, [fpsqrcodeimgUrl]);
+    }, [fpsqrcodeimgbase64]);
 
 
     const loadForm = () => {
-
         HttpUtils.post({
-            url: loadPaymentUrl,
+            url: paymentPath+loadPaymentUrl,
             params:{
-                "transactionid": "<transactionid>",
-                "webtoken": "<webtoken>",
-                "paymentmethod": "<paymentmethodcode>",
+                "transactionid": paymentData.transactionid,
+                "webtoken": paymentData.webtoken,
+                "paymentmethod":"04,BCFP,FPS",
                 "order": { 
-                    "totalamount":"<totalamount>",
-                    "currency":"<currency>",
+                    "totalamount":paymentData.amount,
+                    "currency":"HKD",
                     "orderdetail": 
                     [ 
                         { 
-                            "itemid": "<itemid>",
-                            "qty":"<qty>",
-                            "unitprice":"<unitprice>",
-                            "amount":"<amount>"
-                        },
-                        { 
-                            "itemid": "<itemid>",
-                            "qty":"<qty>",
-                            "unitprice":"<unitprice>",
-                            "amount":"<amount>"
+                            "itemid": "1",
+                            "qty":"1",
+                            "unitprice":paymentData.amount,
+                            "amount":paymentData.amount
                         },
                     ]
                 },
-                "locale":"<locale>",
-                "eserviceid":"<eserviceid>"
+                // "locale":"<locale>",
+                // "eserviceid":"<eserviceid>"
             },
             onSuccess: function(responseData){
                 /*
@@ -86,27 +92,60 @@ const Index = () => {
                         "fpsqrcodeurl": "<fpsqrcodeurl>"
                     }
                 */
-
-                    setFpsqrcodeimgUrl(responseData.fpsqrcodeurl);
+               setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64);
+               setPaymentid(responseData.paymentid);
+               setFpsmerchanttimeoutdatetime(responseData.fpsmerchanttimeoutdatetime);
+               const parsedUrl = new URL(responseData.fpsqrcodeurl);
+               const fpsqrcodeurl = parsedUrl.pathname
+               setFpsqrcodeurl(fpsqrcodeurl)
+               polling()
             }
         });
     }
 
+    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()
+            }
+        });
+    };
+
+    useEffect(() => {
+        const timeOut = fpsmerchanttimeoutdatetime=now()?500:null;
+        const interval = setInterval(() => {
+            getPaymentStatus();
+            console.log("test");
+        }, timeOut);
+    
+        return () => clearInterval(interval);
+    }, []);
+
     const cancelPayment = ()=>{
         HttpUtils.post({
-            url: cancelPaymentUrl,
+            url: paymentPath+cancelPaymentUrl,
             params:{
-                "transactionid": "<transactionid>",
-                "webtoken": "<webtoken>",
-                "paymentid": "<paymentid>"
+                "transactionid": paymentData.transactionid,
+                "webtoken": paymentData.webtoken,
+                "paymentid": paymentid
             },
             onSuccess: function(){
-        /* 
-            {
-                "resultcode": "<resultcode>",
-                "reason": "<reason>"
-            }
-        */
                 navigate("/dashboard");
             }
         });       
@@ -165,13 +204,13 @@ const Index = () => {
                                         <br />
                                         支付金額
                                         <br />
-                                        $
+                                        {"$HK " + paymentData.amount}
                                     </Typography>
 
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                         請掃描以下二維碼
                                         <br />
-                                        <img src={fpsqrcodeimgUrl} alt="QR Code"/>
+                                        <img src={fpsqrcodeimgbase64} alt="QR Code"/>
                                         <br />
                                         二維碼有效期限10分鐘
                                         <br />

src/pages/Payment/MultiPaymentWindow.js

@@ -24,12 +24,27 @@ const MultiPaymentWindow = (props) => {
 
   const windowTitle = "請選擇付款方式";
   const [content, setContent] = useState();
+  const [paymentMethod, setPaymentMethod] = useState("");
 
   useEffect(() => {
-    console.log(props.fpsStatus)
-    console.log(props.creditCardStatus)
-    console.log(props.unionPayStatus)
-    console.log(props.ppsStatus)
+    console.log(paymentMethod)
+  }, [paymentMethod]);
+
+  const selectedPaymentMethodHandle = (method) => () =>{
+    setPaymentMethod(method)
+    props.setSelectedPaymentMethod(method);
+  };
+
+  const confirmPaymentHandle = () => () =>{
+    props.setConfirmPayment(true);
+  };
+
+
+  useEffect(() => {
+    if(props.selectedPaymentMethod === ""){
+      setPaymentMethod("")
+    }
+    setPaymentMethod
     if(props.availableMethods.length > 0){
       setContent(
         <Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">
@@ -69,27 +84,48 @@ const MultiPaymentWindow = (props) => {
                 </FormLabel>
               </Grid>
               <Grid item>
-                <Button variant="contained" color="success" disabled={props.fpsStatus.active === "N"}>
+                <Button variant="contained" color="success" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active === "N"}>
                   FPS
                 </Button>
               </Grid>
               <Grid item>
-                <Button variant="contained" color="success" disabled={props.creditCardStatus.active === "N"}>
+                <Button variant="contained" color="success" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active === "N"}>
                   Visa
                 </Button>
               </Grid>
               <Grid item>
-                <Button variant="contained" color="success" disabled={props.unionPayStatus.active === "N"}>
+                <Button variant="contained" color="success" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={props.creditCardStatus.active === "N"}>
                   Mastercard
                 </Button>
               </Grid>
               <Grid item>
-                <Button variant="contained" color="success" disabled={props.ppsStatus.active === "N"}>
+                <Button variant="contained" color="success" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active === "N"}>
+                  UnionPay
+                </Button>
+              </Grid>
+              <Grid item>
+                <Button variant="contained" color="success" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N"}>
                   PPS
                 </Button>
               </Grid>
             </Grid>
           </Grid>
+          {paymentMethod !=""?
+            <Grid item xs={12} md={12}>
+              <Grid container direction="row" justifyContent="flex-start" alignItems="center">
+                  <Grid item>
+                    <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                      已選擇付款方式:
+                    </FormLabel>
+                  </Grid>
+                  <Grid item>
+                    <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                      {paymentMethod}
+                    </FormLabel>
+                  </Grid>
+                </Grid>
+              </Grid>
+          : null}
         </Grid>
       )
     }else{
@@ -101,7 +137,7 @@ const MultiPaymentWindow = (props) => {
         </Grid>
       )
     }
-  }, [props.open]);
+  }, [props.open,paymentMethod]);
 
   const formik = useFormik({
     initialValues: ({
@@ -145,7 +181,7 @@ const MultiPaymentWindow = (props) => {
           </Button>
         </DialogActions>
         <DialogActions>
-          <Button variant="contained" color="success" >
+          <Button variant="contained" color="success" onClick={confirmPaymentHandle()} disabled={paymentMethod === ""}>
             確認
           </Button>
         </DialogActions>

src/pages/Payment/index.js

@@ -5,6 +5,8 @@ import Loadable from 'components/Loadable';
 const MultiPaymentWindow = Loadable(lazy(() => import('./MultiPaymentWindow')));
 // const FPS = Loadable(React.lazy(() => import('./FPS')));
 import {useEffect, useState} from "react";
+import {useNavigate} from "react-router-dom";
+import {paymentPath} from "auth/utils";
 
 import {
     Button,
@@ -27,20 +29,24 @@ const BackgroundHead = {
 const Index = () => {
     // const getAvailablePaymentUrl = "/payment/api/payment/availability";
     const getTransactionIdUrl = "/payment/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 [totalAmount,setTotalAmount] = useState(0);
     const id =1;
+    
+    
+    //statusWindow
+    const [open, setOpen] = useState(false);
     const [availableMethods,setAvailableMethods] = useState([]);
     const [transactionData,setTransactionData] = useState({});
     const [fpsStatus,setFPSStatus] = useState({});
     const [creditCardStatus,setCreditCardStatus] = useState({});
     const [unionPayStatus,setUnionPayStatus] = useState({});
     const [ppsStatus,setPPSStatus] = useState({});
-
-    //statusWindow
-    const [open, setOpen] = useState(false);
+    const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("");
+    const [confirmPayment, setConfirmPayment] = useState(false);
 
     useEffect(() => {
         if(id > 0 ){
@@ -55,12 +61,25 @@ const Index = () => {
 
     const paymentClick = () => {
         setTotalAmount(totalAmount);
+        setSelectedPaymentMethod("")
+        setConfirmPayment(false)
         if (totalAmount>0){
             setOpen(true)
             getAvailablePayment()
             getTransactionId()
         }
     };
+
+    useEffect(() => {
+        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} });
+            }
+            
+        }
+    }, [confirmPayment]);
     
     const getAvailablePayment = () => {
         const responseData = {
@@ -125,7 +144,7 @@ const Index = () => {
                     ]
                 },
                 {
-                    "active": "N",
+                    "active": "Y",
                     "code": "03,BCMP,CreditCard",
                     "pointstonote": [
                         {
@@ -211,7 +230,7 @@ const Index = () => {
         }
 
         // HttpUtils.post({
-        //     url: getAvailablePaymentUrl,
+        //     url: paymentPath+getAvailablePaymentUrl,
         //     params: {
         //         // "locale": local.zh,;
         //         "amount": totalAmount,
@@ -248,7 +267,7 @@ const Index = () => {
 
     const getTransactionId = () => {
         HttpUtils.get({
-            url: getTransactionIdUrl,
+            url: paymentPath+getTransactionIdUrl,
             onSuccess: (responseData)=>{
                 const transactionData = responseData;
                 setTransactionData(transactionData)
@@ -256,43 +275,6 @@ const Index = () => {
         });
     }
 
-    // const startFPSTransaction = () => {
-    //     HttpUtils.post({
-    //         url: getAvailablePaymentUrl,
-    //         params: {
-    //             // "locale": local.zh,;
-    //             "amount": totalAmount,
-    //             // "eserviceids": [
-    //             //     "<eserviceid>", "<eserviceid>"
-    //             // ],
-    //             "preferpaymentmethods": preferpaymentmethods
-    //         },
-    //         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)
-    //                     }
-    //                 });
-    //             }
-    //         }
-    //     });
-    // }
-
     return (
         <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
             <Grid item xs={12} width="100%">
@@ -337,6 +319,9 @@ const Index = () => {
                     creditCardStatus={creditCardStatus}
                     unionPayStatus={unionPayStatus}
                     ppsStatus={ppsStatus}
+                    setSelectedPaymentMethod={setSelectedPaymentMethod}
+                    selectedPaymentMethod={selectedPaymentMethod}
+                    setConfirmPayment={setConfirmPayment}
                 />
             </Grid>
             {/*row 2*/}