From 5e99096fc324b71d6a04b3869178dc721c2e818c Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Mon, 13 Nov 2023 12:29:51 +0800 Subject: [PATCH] update payment --- src/pages/Payment/Card/index.js | 2 +- src/pages/Payment/FPS/AckPage.js | 364 ++++++++++++++++-------- src/pages/Payment/FPS/FPS.js | 97 ++++--- src/pages/Payment/MultiPaymentWindow.js | 31 +- src/pages/Payment/PaymentCallback.js | 10 +- src/pages/Payment/index.js | 1 + 6 files changed, 326 insertions(+), 179 deletions(-) diff --git a/src/pages/Payment/Card/index.js b/src/pages/Payment/Card/index.js index c9ceebd..ce0cca5 100644 --- a/src/pages/Payment/Card/index.js +++ b/src/pages/Payment/Card/index.js @@ -94,7 +94,7 @@ const Index = () => { }, // "locale":"", // "eserviceid":"", - "returnurl": "http://"+window.location.hostname+"/paymentPage/callback" + "returnurl": "https://"+window.location.hostname+"/paymentPage/callback" }, ///{state:{transactionid:paymentData.transactionid,webtoken:paymentData.webtoken} } onSuccess: function(responseData){ diff --git a/src/pages/Payment/FPS/AckPage.js b/src/pages/Payment/FPS/AckPage.js index 075ab1d..98b26ef 100644 --- a/src/pages/Payment/FPS/AckPage.js +++ b/src/pages/Payment/FPS/AckPage.js @@ -3,8 +3,9 @@ import { Grid, Typography, Stack, + Box // Button, - FormLabel, + // FormLabel, } from '@mui/material'; import * as React from "react"; import * as HttpUtils from "utils/HttpUtils"; @@ -16,6 +17,8 @@ import {paymentPath} from "auth/utils"; import Loadable from 'components/Loadable'; const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); +const PaymentDetails = Loadable(React.lazy(() => import('../Details_Public/PaymentDetails'))); +const DataGrid = Loadable(React.lazy(() => import('../Details_Public/DataGrid'))); import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' const BackgroundHead = { @@ -39,11 +42,12 @@ const AckPage = () => { const [responeData, setResponeDataData] = React.useState({}); const [transactionData, setTransactionData] = React.useState({}); - const [transactionDate, setTransactionDate] = React.useState(""); - const [transactionTime, setTransactionTime] = React.useState(""); + // const [transactionDate, setTransactionDate] = React.useState(""); + // const [transactionTime, setTransactionTime] = React.useState(""); const [onReady, setOnReady] = React.useState(false); const paymentStatusApi = "/api/payment/status/"; + React.useEffect(() => { console.log (location.state) if(Object.keys(location.state).length > 0){ @@ -69,7 +73,7 @@ const AckPage = () => { React.useEffect(() => { console.log(responeData) - if(Object.keys(responeData).length > 0 && fpsmerchanttimeoutdatetime!=""){ + if(Object.keys(responeData).length > 0){ setTransactionData(responeData) } }, [responeData]); @@ -83,20 +87,45 @@ const AckPage = () => { }, [transactionData]); const loadForm = () => { - const dateTime = paymentData.transactionDateTime; - const date = new Date(dateTime); - const trnDate = date.getDate()+"/"+date.getMonth()+"/"+date.getFullYear(); - const trnTime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); - setTransactionDate(trnDate) - setTransactionTime(trnTime) + // const dateTime = paymentData.transactionDateTime; + // const date = new Date(dateTime); + // const trnDate = date.getDate()+"/"+date.getMonth()+"/"+date.getFullYear(); + // const trnTime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); + // setTransactionDate(trnDate) + // setTransactionTime(trnTime) + let transactionid = localStorage.getItem("transactionid") + let webtoken = localStorage.getItem("webtoken") + HttpUtils.post({ - url: paymentPath+paymentStatusApi+paymentData.transactionid, + url: paymentPath+paymentStatusApi+transactionid, params:{ - "apprefid": paymentData.transactionid, - "webtoken": paymentData.webtoken, + "apprefid": transactionid, + "webtoken": webtoken, }, onSuccess: function(responseData){ setResponeDataData(responseData) + if (responseData.paymentdetail?.result?.paymentstatuscode === "APPR") { + localStorage.removeItem("webtoken"); + localStorage.removeItem("transactionid"); + } + HttpUtils.post({ + url: UrlUtils.PAYMENT_SAVE, + params: { + id: localStorage.getItem("paymentId"), + transNo: transactionData.transicationId, + transDateTime: responseData.paymentdetail.time.replace("[UTC]", ""), + egisRefNo: responseData.paymentdetail.paymentid, + status: responseData.paymentdetail.result.paymentstatuscode, + payload: responseData + }, + onSuccess: function (responseData2) { + responseData2.data["transDateStr"] = DateUtils.dateFormat(responseData2.data.transDateTime, "DD/MM/YYYY"); + responseData2.data["transTimeStr"] = DateUtils.dateFormat(responseData2.data.transDateTime, "HH:mm:ss"); + setItemList(responseData2.paymentItemList) + setPaymentData(responseData2.data); + localStorage.removeItem("paymentId"); + } + }); } }); @@ -127,120 +156,223 @@ const AckPage = () => { !onReady ? : - ( - - -
- - 公共啟事：FPS付款 - -
- - {/*row 1*/} - - -
- - - - Your application and payment have been received - - - - - - - - Transaction Reference No: - - - - - - - - - - - - - - Transaction Date: - - - - - {transactionDate+" (DD/MM/YYYY)"} - - - - - - - - - Transaction Time: - - - - - {transactionTime+" (HH:MI:SS)"} - - - - - - - - - EGIS Reference No: - - - - - {transactionData.transactionid} - - - - - - - - - Payment Amount - + transactionData.paymentdetail?.result?.paymentstatuscode === "APPR" ? + ( + + +
+ + 公共啟事：付款成功 + +
+ + {/*row 1*/} + + +
+ + + + 您的申請和付款已收到 + + + + + + + + + + + + + + + + - - - {"HK$ "+transactionData.amount} - + {/* + + + + 交易參考號: + + + + + {"P" + transactionData.transactionid} + + + + + + + + 交易日期: + + + + + {transactionDate + " (DD/MM/YYYY)"} + + + - - - - - - Payment Method: - + + + + + 交易時間: + + + + + {transactionTime + " (HH:MI:SS)"} + + + - - - {transactionData.paymentdetail.subtype} - + + + + + EGIS 參考號: + + + + + {transactionData.transactionid} + + + + + + + + 支付金額 + + + + + {"HK$ " + transactionData.amount} + + + + + + + + 付款方式: + + + + + {transactionData.paymentdetail.subtype ?? (transactionData.paymentdetail.paymentmethod === "01" ? "PPS" : "")} + + + + */} - -
+
+ + + {/*row 2*/} + + ) : + (transactionData.paymentdetail?.result?.paymentstatuscode === "CANC" ? + + +
+ + 公共啟事：付款取消 + +
+ + {/*row 1*/} + + +
+ + + 付款取消訊息： +

+ 您的付款已被取消。我們收到了您的付款請求，但由於某些原因，付款無法完成。請注意以下事項： +

+ 如果您主動取消了支付，請確認並確保取消是您的意願。 +
+ 如果付款被取消是由於系統問題或其他原因，請您嘗試以下解決方法： +

+ 檢查您的支付帳戶是否有任何異常或限制。 +
+ 確保您的付款資訊準確無誤。 +
+ 檢查您的網路連線是否正常。 +

+ 如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決您的付款問題。謝謝！ + + +
+ - - {/*row 2*/} - - ) + {/*row 2*/} + + : + + +
+ + 公共啟事：付款失敗 + +
+ + {/*row 1*/} + + +
+ + + 付款失敗訊息： +

+ 親愛的用戶，很遺憾地告訴您，您的付款操作未成功。我們在處理您的付款時遇到了問題。請您仔細檢查以下事項： +

+ 您的支付帳戶餘額是否足夠。 +
+ 您提供的付款資訊是否準確無誤。 +
+ 請檢查您的網路連線是否正常。 +

+ 如果您已確認以上問題無誤，但付款失敗，請您嘗試以下解決方法： +

+ 嘗試使用其他付款方式進行付款。 +
+ 檢查您的支付帳戶是否有異常或限制。 +
+ 聯絡我們的客服人員尋求協助。 +

+ 如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫。非常抱歉給您帶來不便，我們將盡快解決您的付款問題。謝謝！ + + +
+ + + {/*row 2*/} + + ) ); }; diff --git a/src/pages/Payment/FPS/FPS.js b/src/pages/Payment/FPS/FPS.js index 37167ef..5caa946 100644 --- a/src/pages/Payment/FPS/FPS.js +++ b/src/pages/Payment/FPS/FPS.js @@ -17,6 +17,7 @@ import Loadable from 'components/Loadable'; const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' +import { object } from 'prop-types'; const BackgroundHead = { backgroundImage: `url(${titleBackgroundImg})`, width: '100%', @@ -56,7 +57,7 @@ const Index = () => { const [time, setTime] = React.useState(0); React.useEffect(() => { - console.log (location.state) + // console.log (location.state) if(Object.keys(location.state).length > 0){ console.log (location.state) setLocationData(location.state) @@ -64,7 +65,7 @@ const Index = () => { }, []); React.useEffect(() => { - console.log (locationData) + // console.log (locationData) if (Object.keys(locationData).length > 0){ setPaymentData(locationData) // loadForm(); @@ -72,21 +73,21 @@ const Index = () => { }, [locationData]); React.useEffect(() => { - console.log (paymentData) + // console.log (paymentData) if (Object.keys(paymentData).length > 0){ loadForm(); } }, [paymentData]); React.useEffect(() => { - console.log(responeData) + // console.log(responeData) if(Object.keys(responeData).length > 0 && fpsmerchanttimeoutdatetime!=""){ setFpsTransctionData(responeData) } }, [responeData]); React.useEffect(() => { - console.log(fpsTransctionData) + // console.log(fpsTransctionData) if(Object.keys(fpsTransctionData).length > 0 ){ setOnReady(true); currentTimer.current = setInterval(() => { @@ -152,42 +153,45 @@ const Index = () => { } const getPaymentStatus = () => { - HttpUtils.post({ - url: paymentPath+paymentStatusApi+paymentData.transactionid, - params:{ - "apprefid": paymentData.transactionid, - "webtoken": paymentData.webtoken, - }, - onSuccess: function(responseData){ - const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode; - if (paymentstatuscode != "" && paymentstatuscode != "INPR" ){ - if (paymentstatuscode === 'APPR') { - const timestamp = Date.now(); - navigate('/paymentPage/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:paymentData.transactionid,webtoken:paymentData.webtoken} }); - } else if (paymentstatuscode === 'CANC') { - // window.top.location.href = paymentPath + payment.config.indexPagePath; - navigate('/paymentPage'); - } else { - // window.top.location.href = paymentPath + payment.config.errPagePath; - alert("ERROR") + if(object.keys(paymentData).length > 0){ + HttpUtils.post({ + url: paymentPath+paymentStatusApi+paymentData.transactionid, + params:{ + "apprefid": paymentData.transactionid, + "webtoken": paymentData.webtoken, + }, + onSuccess: function(responseData){ + const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode; + if (paymentstatuscode != "" && paymentstatuscode != "INPR" ){ + if (paymentstatuscode === 'APPR') { + const timestamp = Date.now(); + navigate('/paymentPage/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:paymentData.transactionid} }); + } else if (paymentstatuscode === 'CANC') { + const timestamp = Date.now(); + navigate('/paymentPage/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:paymentData.transactionid} }); + } else { + // window.top.location.href = paymentPath + payment.config.errPagePath; + alert("ERROR") + } } + }, + onError: function(){ + cancelPayment() + // clearInterval(currentTimer.current); } - }, - onError: function(){ - cancelPayment() - // clearInterval(currentTimer.current); - } - }); + }); + } }; React.useEffect(() => { const timeOutDate = new Date(fpsmerchanttimeoutdatetime); const currentTime = new Date; - console.log(time) - console.log(timeOutDate) - console.log(currentTime) - console.log(timeOutDate.getTime()-currentTime.getTime()) - setTimeDownCount(timeOutDate.getTime()-currentTime.getTime()) + const timedowncount = Math.round((timeOutDate.getTime() - currentTime.getTime()) / 1000); + setTimeDownCount(timedowncount) + // console.log(time) + // console.log(timeOutDate) + // console.log(currentTime) + // console.log(timeOutDate.getTime()-currentTime.getTime()) getPaymentStatus(); if (timeOutDate.getTime() { },[time]) const cancelPayment = ()=>{ - HttpUtils.post({ - url: paymentPath+cancelPaymentUrl, - params:{ - "transactionid": paymentData.transactionid, - "webtoken": paymentData.webtoken, - "paymentid": fpsTransctionData.paymentid - }, - onSuccess: function(){ - navigate("/dashboard"); - } - }); + if (object.keys(paymentData).length>0){ + HttpUtils.post({ + url: paymentPath+cancelPaymentUrl, + params:{ + "transactionid": paymentData.transactionid, + "webtoken": paymentData.webtoken, + "paymentid": fpsTransctionData.paymentid + }, + onSuccess: function(){ + const timestamp = Date.now(); + navigate('/paymentPage/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:paymentData.transactionid} }); + } + }); + } } return ( diff --git a/src/pages/Payment/MultiPaymentWindow.js b/src/pages/Payment/MultiPaymentWindow.js index 7770895..3239743 100644 --- a/src/pages/Payment/MultiPaymentWindow.js +++ b/src/pages/Payment/MultiPaymentWindow.js @@ -21,6 +21,7 @@ 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'))); +import * as FormatUtils from "utils/FormatUtils"; import VisaIcon from "assets/images/icons/visacard.svg"; import MasterIcon from "assets/images/icons/mastercard.svg"; @@ -45,14 +46,26 @@ const MultiPaymentWindow = (props) => { if(Object.keys(props.transactionData).length > 0){ setLoadtTransactionData(props.transactionData) } - }, [props.transactionData]); + }, []); + + // useEffect(() => { + // console.log(props.availableMethods) + // if(props.availableMethods.length > 0){ + // setLoadAvailableMethodData(props.availableMethods) + // } + // }, [props.availableMethods]); useEffect(() => { - console.log(props.availableMethods) - if(props.availableMethods.length > 0){ + if(Object.keys(loadtTransactionData).length > 0){ + setTransactionData(loadtTransactionData) + } + }, [loadtTransactionData]); + + useEffect(() => { + if(Object.keys(transactionData).length > 0&&props.availableMethods.length > 0){ setLoadAvailableMethodData(props.availableMethods) } - }, [props.availableMethods]); + }, [transactionData]); useEffect(() => { if(loadAvailableMethodData.length > 0){ @@ -60,17 +73,11 @@ const MultiPaymentWindow = (props) => { } }, [loadAvailableMethodData]); - useEffect(() => { - if(Object.keys(loadtTransactionData).length > 0){ - setTransactionData(loadtTransactionData) - } - }, [loadtTransactionData]); - useEffect(() => { if(availableMethodData.length > 0 && Object.keys(transactionData).length > 0){ setOnReady(true) } - }, [availableMethodData,transactionData]); + }, [availableMethodData]); useEffect(() => { console.log(paymentMethod) @@ -117,7 +124,7 @@ const MultiPaymentWindow = (props) => { - {"HK$ "+props.totalAmount} + {"HK$ "+FormatUtils.currencyFormat(props.totalAmount)} diff --git a/src/pages/Payment/PaymentCallback.js b/src/pages/Payment/PaymentCallback.js index 1e882b6..f0c5249 100644 --- a/src/pages/Payment/PaymentCallback.js +++ b/src/pages/Payment/PaymentCallback.js @@ -65,11 +65,11 @@ const Index = () => { }, [transactionData]); const loadForm = () => { - const date = new Date(); - const trnDate = date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear(); - const trnTime = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); - setTransactionDate(trnDate) - setTransactionTime(trnTime) + // const date = new Date(); + // const trnDate = date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear(); + // const trnTime = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); + // setTransactionDate(trnDate) + // setTransactionTime(trnTime) const params = new URLSearchParams(window.location.search); let transactionid = params.get("TRANSACTION_ID") let receipt_token = params.get("RECEIPT_TOKEN").replace("%3D", "=") diff --git a/src/pages/Payment/index.js b/src/pages/Payment/index.js index 52c5eeb..3eee980 100644 --- a/src/pages/Payment/index.js +++ b/src/pages/Payment/index.js @@ -71,6 +71,7 @@ const Index = () => { // handleReset() setOpen(false); getTransactionId() + getAvailablePayment() }; const paymentClick = () => {