From bb8c0321d25fd45d75d5ab7119fa3f82dc6ce1db Mon Sep 17 00:00:00 2001 From: anna Date: Mon, 6 Nov 2023 11:55:49 +0800 Subject: [PATCH] update payment --- src/pages/Payment/PaymentCallback.js | 61 +++++-- src/pages/Payment/index.js | 232 ++++++++++++++++----------- src/utils/ApiPathConst.js | 1 + 3 files changed, 182 insertions(+), 112 deletions(-) diff --git a/src/pages/Payment/PaymentCallback.js b/src/pages/Payment/PaymentCallback.js index 9f93dbf..1e882b6 100644 --- a/src/pages/Payment/PaymentCallback.js +++ b/src/pages/Payment/PaymentCallback.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"; @@ -14,6 +15,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 = { @@ -32,9 +35,12 @@ const Index = () => { //const navigate = useNavigate() const [responeData, setResponeDataData] = React.useState({}); + const [paymentData, setPaymentData] = React.useState({}); + const [itemList, setItemList] = 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 updatePaymentApi = "/api/payment/updatepayment"; const paymentStatusApi = "/api/payment/status/"; @@ -109,16 +115,20 @@ const Index = () => { 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 + 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(){ + 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"); } }); @@ -155,7 +165,30 @@ const Index = () => { - + + + + + + + + + + + + + + + {/* @@ -238,7 +271,7 @@ const Index = () => { - + */} diff --git a/src/pages/Payment/index.js b/src/pages/Payment/index.js index c108670..b573840 100644 --- a/src/pages/Payment/index.js +++ b/src/pages/Payment/index.js @@ -3,16 +3,18 @@ import * as HttpUtils from "utils/HttpUtils"; import * as UrlUtils from "utils/ApiPathConst"; import Loadable from 'components/Loadable'; const MultiPaymentWindow = Loadable(React.lazy(() => import('./MultiPaymentWindow'))); +const DataGrid = Loadable(React.lazy(() => import('./Details_Public/DataGrid'))); // const FPS = Loadable(React.lazy(() => import('./FPS'))); -import {useEffect, useState} from "react"; -import {useNavigate, useLocation } from "react-router-dom"; -import {paymentPath} from "auth/utils"; +import { useEffect, useState } from "react"; +import { useNavigate, useLocation } from "react-router-dom"; +import { paymentPath } from "auth/utils"; import { Button, - Grid, + Grid, Typography, - Stack + Stack, + Box } from '@mui/material'; import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' @@ -33,31 +35,37 @@ const Index = () => { const location = useLocation(); // 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; - - + const preferpaymentmethods = ['visa', 'mastercard', 'pps', 'creditcard', 'fps']; + const [totalAmount, setTotalAmount] = useState(0); + const [appIds, setAppIds] = useState([]); + + //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({}); + const [availableMethods, setAvailableMethods] = useState([]); + const [transactionData, setTransactionData] = useState({}); + const [fpsStatus, setFPSStatus] = useState({}); + const [creditCardStatus, setCreditCardStatus] = useState({}); + const [unionPayStatus, setUnionPayStatus] = useState({}); + const [ppsStatus, setPPSStatus] = useState({}); const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(""); const [confirmPayment, setConfirmPayment] = useState(false); + const [itemList, setItemList] = useState([]); + useEffect(() => { - if(id<0)return; - let amount = location.state?.amount??2000; - - setTotalAmount(amount) + setAppIds(location.state?.appIdList ?? []) + setTotalAmount(location.state?.amount ?? 2000) getAvailablePayment() getTransactionId() + }, []); + useEffect(()=>{ + if(appIds!=[] && appIds.length>0) + getAppList(); + },[appIds]); + const handleClose = () => { // handleReset() setOpen(false); @@ -68,56 +76,56 @@ const Index = () => { setTotalAmount(totalAmount); setSelectedPaymentMethod("") setConfirmPayment(false) - if (totalAmount>0){ + if (totalAmount > 0) { getTransactionId() setOpen(true) } }; useEffect(() => { - if (confirmPayment){ + if (confirmPayment) { setOpen(false); // let transactionid = ""; // let webtoken = ""; - + let page = ""; let stateParams = {}; let paymentMethod = ""; - if(selectedPaymentMethod === "FPS"){ - page='/paymentPage/fps'; - stateParams= {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken} } + if (selectedPaymentMethod === "FPS") { + page = '/paymentPage/fps'; + stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken } } paymentMethod = "04,BCFP,FPS"; - }else if(selectedPaymentMethod ==="Visa"){ - page='/paymentPage/card'; - stateParams= {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"Visa", paymentMethod:"02,BCMP,CreditCard"} } + } else if (selectedPaymentMethod === "Visa") { + page = '/paymentPage/card'; + stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "Visa", paymentMethod: "02,BCMP,CreditCard" } } paymentMethod = "02,BCMP,CreditCard"; - }else if(selectedPaymentMethod ==="Mastercard"){ - page='/paymentPage/card'; - stateParams= {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"Mastercard", paymentMethod:"02,BCMP,CreditCard"} } + } else if (selectedPaymentMethod === "Mastercard") { + page = '/paymentPage/card'; + stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "Mastercard", paymentMethod: "02,BCMP,CreditCard" } } paymentMethod = "02,BCMP,CreditCard"; - }else if(selectedPaymentMethod ==="JCB"){ - page='/paymentPage/card'; - stateParams= {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"JCB", paymentMethod:"02,BCMP,CreditCard"} } + } else if (selectedPaymentMethod === "JCB") { + page = '/paymentPage/card'; + stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "JCB", paymentMethod: "02,BCMP,CreditCard" } } paymentMethod = "02,BCMP,CreditCard"; - }else if(selectedPaymentMethod ==="UnionPay" ){ - page='/paymentPage/card'; - stateParams= {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"UnionPay", paymentMethod:"03,BCMP,CreditCard"} } + } else if (selectedPaymentMethod === "UnionPay") { + page = '/paymentPage/card'; + stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "UnionPay", paymentMethod: "03,BCMP,CreditCard" } } paymentMethod = "03,BCMP,CreditCard"; - }else if(selectedPaymentMethod ==="PPS"){ - page='/paymentPage/card'; - stateParams= {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"PPS", paymentMethod:"01,PPSB,PPS"} } + } else if (selectedPaymentMethod === "PPS") { + page = '/paymentPage/card'; + stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "PPS", paymentMethod: "01,PPSB,PPS" } } paymentMethod = "01,PPSB,PPS"; } - if(paymentMethod != ""){ + if (paymentMethod != "") { HttpUtils.post({ - url:UrlUtils.PAYMENT_CREATE, - params:{ - transNo:transactionData.transicationId, - payMethod:paymentMethod, - payAmount:totalAmount, - appIdList:location.state?.appIdList??[] + url: UrlUtils.PAYMENT_CREATE, + params: { + transNo: transactionData.transicationId, + payMethod: paymentMethod, + payAmount: totalAmount, + appIdList: location.state?.appIdList ?? [] }, - onSuccess:function(responData){ + onSuccess: function (responData) { localStorage.removeItem("paymentId"); localStorage.setItem("paymentId", responData.id) navigate(page, stateParams); @@ -126,7 +134,7 @@ const Index = () => { } } }, [confirmPayment]); - + const getAvailablePayment = () => { // const responseData = { // "availablepaymentmethods": [ @@ -276,7 +284,7 @@ const Index = () => { // } HttpUtils.post({ - url: paymentPath+getAvailablePaymentUrl, + url: paymentPath + getAvailablePaymentUrl, params: { // "locale": local.zh,; "amount": totalAmount, @@ -285,31 +293,31 @@ const Index = () => { // ], "preferpaymentmethods": preferpaymentmethods }, - onSuccess: (responseData)=>{ + onSuccess: (responseData) => { let availableMethods = responseData.availablepaymentmethods; setAvailableMethods(availableMethods); - + } }); } useEffect(() => { console.log(availableMethods) - if (availableMethods.length>0){ - availableMethods.forEach((method)=>{ - if(method.subtype === "FPS" ){ + 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"){ + } else if (method.subtype === "CreditCard") { + method.supportedcard.forEach((supportedcard) => { + if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa") { setCreditCardStatus(method) } else { - if (supportedcard === "UnionPay"){ + if (supportedcard === "UnionPay") { setUnionPayStatus(method) } } }) - }else if (method.subtype === "PPS" ){ + } else if (method.subtype === "PPS") { setPPSStatus(method) } }); @@ -318,14 +326,27 @@ const Index = () => { const getTransactionId = () => { HttpUtils.get({ - url: paymentPath+getTransactionIdUrl, - onSuccess: (responseData)=>{ + url: paymentPath + getTransactionIdUrl, + onSuccess: (responseData) => { // const transactionData = responseData; setTransactionData(responseData) } }); } + const getAppList = () => { + HttpUtils.post({ + url: UrlUtils.PAYMENT_APP_LIST, + params:{ + appIds:appIds + }, + onSuccess: (responseData) => { + setItemList(responseData) + } + }); + } + + return ( @@ -336,44 +357,59 @@ const Index = () => { {/*row 1*/} - - -
- + + + + + + + + + + + +
+ + + 交易參考號: {transactionData.transactionid} + - -
- 支付金額 -
- $ {totalAmount} - + + 支付金額: HK$ {totalAmount} + - - - - -
+ + +
+ + + + - + + + {/*row 2*/} diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js index bc2f867..cf6fb6d 100644 --- a/src/utils/ApiPathConst.js +++ b/src/utils/ApiPathConst.js @@ -85,6 +85,7 @@ export const PAYMENT_CREATE = apiPath+'/payment/create';//POST export const PAYMENT_SAVE = apiPath+'/payment/save';//POST export const PAYMENT_LIST = apiPath+'/payment/list';//GET export const PAYMENT_LOAD = apiPath+'/payment/load';//GET +export const PAYMENT_APP_LIST = apiPath+'/payment/applist';//POST