alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

update payment success page

master
Anna Ho 1 year ago
parent
3c21326d1a
commit
9003069fb7
5 changed files with 138 additions and 31 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -1
      src/pages/Payment/Card/index.js
  2. +1
    -3
      src/pages/Payment/FPS/AckPage.js
  3. +1
    -1
      src/pages/Payment/FPS/FPS.js
  4. +133
    -25
      src/pages/Payment/PaymentSuccess.js
  5. +1
    -1
      src/routes/PublicUserRoutes.js

+ 2
- 1
src/pages/Payment/Card/index.js View File

@@ -89,8 +89,9 @@ const Index = () => {
},
// "locale":"<locale>",
// "eserviceid":"<eserviceid>",
"returnurl": "http://"+window.location.hostname+"/paymentPage/success"
"returnurl": "http://"+window.location.hostname+"/paymentPage/success/"+paymentData.transactionid+"/"+paymentData.webtoken
},
///{state:{transactionid:paymentData.transactionid,webtoken:paymentData.webtoken} }
onSuccess: function(responseData){
/*
{


+ 1
- 3
src/pages/Payment/FPS/AckPage.js View File

@@ -43,7 +43,6 @@ const AckPage = () => {
const [transactionTime, setTransactionTime] = React.useState("");
const [onReady, setOnReady] = React.useState(false);
const paymentStatusApi = "/api/payment/status/";
const [paymentid, setPaymentid] = React.useState("");

React.useEffect(() => {
console.log (location.state)
@@ -90,9 +89,8 @@ const AckPage = () => {
const trnTime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
setTransactionDate(trnDate)
setTransactionTime(trnTime)
setPaymentid(paymentData.paymentid)
HttpUtils.post({
url: paymentPath+paymentStatusApi+paymentid,
url: paymentPath+paymentStatusApi+paymentData.transactionid,
params:{
"apprefid": paymentData.transactionid,
"webtoken": paymentData.webtoken,


+ 1
- 1
src/pages/Payment/FPS/FPS.js View File

@@ -163,7 +163,7 @@ const Index = () => {
if (paymentstatuscode != "" && paymentstatuscode != "INPR" ){
if (paymentstatuscode === 'APPR') {
const timestamp = Date.now();
navigate('/paymentPage/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:paymentData.transactionid,webtoken:paymentData.webtoken, paymentid:responseData.paymentdetail.paymentid} });
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');


+ 133
- 25
src/pages/Payment/PaymentSuccess.js View File

@@ -3,12 +3,16 @@ import {
Grid,
Typography,
Stack,
// Button,
FormLabel,
} from '@mui/material';
import * as UrlUtils from "utils/ApiPathConst";
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";
// import { useNavigate } from "react-router-dom";
// import FpsIcon from "assets/images/icons/fps.svg";
import { useParams } 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')));
@@ -27,33 +31,53 @@ const BackgroundHead = {
// ==============================|| DASHBOARD - DEFAULT ||============================== //

const Index = () => {
// const navigate = useNavigate()
const params = useParams();
const navigate = useNavigate()
const [responeData, setResponeDataData] = React.useState({});

const [record, setRecord] = React.useState();
const [transactionData, setTransactionData] = 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(() => {
loadForm();
if (params.transactionid != "" && params.webtoken != "") {
loadForm();
}
}, []);

React.useEffect(() => {
setOnReady(true);
}, [record]);
console.log(responeData)
if (Object.keys(responeData).length > 0 && fpsmerchanttimeoutdatetime != "") {
setTransactionData(responeData)
}
}, [responeData]);

React.useEffect(() => {
console.log(transactionData)
if (Object.keys(transactionData).length > 0) {
setOnReady(true);
}
}, [transactionData]);

const loadForm = () => {
if (params.id > 0) {
HttpUtils.get({
url: UrlUtils.GET_PROOF_PAY + "/" + params.id,
onSuccess: (responseData) => {
if (!responseData.data?.id) {
navigate("/proof/search");
}
setRecord(responseData.data);
}
});
}
const date = new Date();
const trnDate = date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear();
const trnTime = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
setTransactionDate(trnDate)
setTransactionTime(trnTime)
HttpUtils.post({
url: paymentPath + paymentStatusApi + params.transactionid,
params: {
"apprefid": params.transactionid,
"webtoken": params.webtoken,
},
onSuccess: function (responseData) {
setResponeDataData(responseData)
}
});
}

return (
@@ -65,7 +89,7 @@ const Index = () => {
<Grid item xs={12} width="100%">
<div style={BackgroundHead} width="100%">
<Stack direction="row" height='70px'>
<Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：完成付款</Typography>
<Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款成功</Typography>
</Stack>
</div>
</Grid>
@@ -75,20 +99,104 @@ const Index = () => {
<center>
<Grid item xs={12} md={12} >

<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
付款成功
<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
您的申請和付款已收到
</Typography>

<Grid container>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
交易參考號:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>

</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
交易日期:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{transactionDate + " (DD/MM/YYYY)"}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
交易時間:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{transactionTime + " (HH:MI:SS)"}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
EGIS 參考號:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{transactionData.transactionid}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
支付金額
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{"HK$ " + transactionData.amount}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
付款方式:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{transactionData.paymentdetail.subtype}
</FormLabel>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</center>
</Grid>
</Grid>
{/*row 2*/}
</Grid >


)


);
};



+ 1
- 1
src/routes/PublicUserRoutes.js View File

@@ -79,7 +79,7 @@ const PublicDashboard = {
element: <Payment_Card/>
},
{
path: 'paymentPage/success',
path: 'paymentPage/success/:transactionid/:webtoken',
element: <Payment_Success/>
},
{


Write Preview
Loading…
Cancel
Save