From bb1d9180d92a028827555460f3bacc0c1f1f4606 Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Tue, 31 Oct 2023 12:53:41 +0800 Subject: [PATCH] fix fps bug --- src/pages/Payment/FPS/AckPage.js | 27 ++++---- src/pages/Payment/FPS/FPS.js | 91 ++++++++++++++----------- src/pages/Payment/MultiPaymentWindow.js | 34 +++++++-- src/pages/Payment/index.js | 61 +++++++++-------- 4 files changed, 130 insertions(+), 83 deletions(-) diff --git a/src/pages/Payment/FPS/AckPage.js b/src/pages/Payment/FPS/AckPage.js index a85961b..e4721ad 100644 --- a/src/pages/Payment/FPS/AckPage.js +++ b/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 ( diff --git a/src/pages/Payment/FPS/FPS.js b/src/pages/Payment/FPS/FPS.js index 48f7382..21de3bd 100644 --- a/src/pages/Payment/FPS/FPS.js +++ b/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": "" } */ - 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 = () => { 請掃描以下二維碼
- QR Code + QR Code
二維碼有效期限10分鐘
diff --git a/src/pages/Payment/MultiPaymentWindow.js b/src/pages/Payment/MultiPaymentWindow.js index dca60f7..e5e7326 100644 --- a/src/pages/Payment/MultiPaymentWindow.js +++ b/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( @@ -57,7 +80,7 @@ const MultiPaymentWindow = (props) => { - {props.transactionData.transicationId} + {transactionData.transicationId} @@ -137,7 +160,7 @@ const MultiPaymentWindow = (props) => { ) } - }, [props.open,paymentMethod]); + }, [availableMethodData]); const formik = useFormik({ initialValues: ({ @@ -169,7 +192,10 @@ const MultiPaymentWindow = (props) => {
- {content} + {!onReady ? + + :content + }
diff --git a/src/pages/Payment/index.js b/src/pages/Payment/index.js index 7a7fb52..eedb297 100644 --- a/src/pages/Payment/index.js +++ b/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) } }); }