alex
/
PNSPS-frontend-MaterialUI
1
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI 

# Conflicts:
#	src/routes/PublicUserRoutes.js
master
Anna Ho 1 年之前
父節點
783562771a ecb6a28ae3
當前提交
6fa6322ae7
共有 5 個檔案被更改，包括 16604 行新增 和 10335 行删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +16233
    -10259
      package-lock.json
  2. +249
    -0
      src/pages/Payment/Card/card.js
  3. +12
    -0
      src/pages/Payment/Card/index.js
  4. +94
    -76
      src/pages/Payment/FPS/FPS.js
  5. +16
    -0
      src/pages/Payment/FPS/fpscallback.js

+ 16233
- 10259
package-lock.json
文件差異過大導致無法顯示
查看文件


+ 249
- 0
src/pages/Payment/Card/card.js 查看文件

@@ -0,0 +1,249 @@
// material-ui
import {
Grid,
Typography,
Stack,
Button,
} from '@mui/material';
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')));

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`,
width: '100%',
height: '100%',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundColor: '#0C489E',
backgroundPosition: 'right'
}

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const Index = () => {
const navigate = useNavigate()
const location = useLocation();

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);
}, [fpsqrcodeimgbase64]);


const loadForm = () => {
HttpUtils.post({
url: paymentPath+loadPaymentUrl,
params:{
"transactionid": paymentData.transactionid,
"webtoken": paymentData.webtoken,
"paymentmethod":"04,BCFP,FPS",
"order": {
"totalamount":paymentData.amount,
"currency":"HKD",
"orderdetail":
[
{
"itemid": "1",
"qty":"1",
"unitprice":paymentData.amount,
"amount":paymentData.amount
},
]
},
// "locale":"<locale>",
// "eserviceid":"<eserviceid>"
},
onSuccess: function(responseData){
/*
{
"paymentid": "<paymentid>",
"paymentstatus": "<paymentstatus>",
"fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
"fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
"fpsqrcodeurl": "<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()
}
});
};

React.useEffect(() => {

//Fake
setFpsmerchanttimeoutdatetime(new Date().now()?500:null);
//
const timeOut = fpsmerchanttimeoutdatetime;
const interval = setInterval(() => {
getPaymentStatus();
console.log("test");
}, timeOut);
return () => clearInterval(interval);
}, []);

const cancelPayment = ()=>{
HttpUtils.post({
url: paymentPath+cancelPaymentUrl,
params:{
"transactionid": paymentData.transactionid,
"webtoken": paymentData.webtoken,
"paymentid": paymentid
},
onSuccess: function(){
navigate("/dashboard");
}
});
}

// const getPayload = ()=>{
// HttpUtils.get({
// url: payloadUrl+"<paymenttoken>",
// onSuccess: function(responseData){
// /*
// {
// "payload": "<payload>"
// }

// */
// }
// });
// }

// const getReceiver = ()=>{
// HttpUtils.get({
// url: receiverUrl+"<paymenttoken>",
// onSuccess: function(responseData){
// /*
// {
// "payload": "<payload>"
// }

// */
// }
// });
// }


return (
!onReady ?
<LoadingComponent />
:
(
<Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
<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 }}>公共啟事：FPS付款</Typography>
</Stack>
</div>
</Grid>
{/*row 1*/}
<Grid item xs={12} md={12} >
<Grid container justifyContent="flex-start" alignItems="center" >
<center>
<Grid item xs={12} md={12} >

<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
<img src={FpsIcon} width="80" height="80" alt="FPS"></img>
<br />
支付金額
<br />
{"$HK " + paymentData.amount}
</Typography>

<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
請掃描以下二維碼
<br />
<img src={fpsqrcodeimgbase64} alt="QR Code"/>
<img src={fpsqrcodeurl} alt="QR Code"/>
<br />
二維碼有效期限10分鐘
<br />
請在規定時間內完成付款流程
</Typography>

<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
<Button
component="span"
variant="contained"
size="large"
color="error"
onClick={()=>{
cancelPayment();
}}
sx={{ m: 4 }}
>取消付款</Button>
</Typography>
</Grid>
</center>
</Grid>
</Grid>
{/*row 2*/}
</Grid >
)


);
};

export default Index;

+ 12
- 0
src/pages/Payment/Card/index.js 查看文件

@@ -0,0 +1,12 @@
import * as React from "react";
import Loadable from 'components/Loadable';
const Card = Loadable(React.lazy(() => import('./card')));


const Index = () => {
return (
<Card/>
);
}

export default Index;

+ 94
- 76
src/pages/Payment/FPS/FPS.js 查看文件

@@ -38,13 +38,19 @@ const Index = () => {
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 [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
// const loadPaymentUrl = "/api/payment/wallet/fps";
const cancelPaymentUrl = "/api/payment/cancelpayment";
const paymentStatusApi = "/api/payment/status/";
// const paymentStatusApi = "/api/payment/status/";
// const payloadUrl = "/api/payment/wallet/fps/enquiryfpspayload/";
// const receiverUrl = "/noti-api/payment/payment-notification";
//timer
const currentTimer = React.useRef();
const [time, setTime] = React.useState(0);

React.useEffect(() => {
setFpsqrcodeimgbase64("")
@@ -52,6 +58,11 @@ const Index = () => {
setPaymentData(location.state)
}
loadForm();
currentTimer.current = setInterval(() => {
getPaymentStatus();
setTime((prevTime) => prevTime + 1);
}, 500);
return () => clearInterval(currentTimer.current);
}, []);

React.useEffect(() => {
@@ -60,82 +71,90 @@ const Index = () => {


const loadForm = () => {
HttpUtils.post({
url: paymentPath+loadPaymentUrl,
params:{
"transactionid": paymentData.transactionid,
"webtoken": paymentData.webtoken,
"paymentmethod":"04,BCFP,FPS",
"order": {
"totalamount":paymentData.amount,
"currency":"HKD",
"orderdetail":
[
{
"itemid": "1",
"qty":"1",
"unitprice":paymentData.amount,
"amount":paymentData.amount
},
]
},
// "locale":"<locale>",
// "eserviceid":"<eserviceid>"
},
onSuccess: function(responseData){
/*
{
"paymentid": "<paymentid>",
"paymentstatus": "<paymentstatus>",
"fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
"fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
"fpsqrcodeurl": "<fpsqrcodeurl>"
}
*/
setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64);
setPaymentid(responseData.paymentid);
setFpsmerchanttimeoutdatetime(responseData.fpsmerchanttimeoutdatetime);
const parsedUrl = new URL(responseData.fpsqrcodeurl);
const fpsqrcodeurl = parsedUrl.pathname
setFpsqrcodeurl(fpsqrcodeurl)
polling()
}
});
const timeoutdatetime = "2023-10-26T09:04:30Z[UTC]"
const convertedDateString = timeoutdatetime.replace("[UTC]", "");
setFpsmerchanttimeoutdatetime(convertedDateString)
setPaymentid("C202310268000681")
// HttpUtils.post({
// url: paymentPath+loadPaymentUrl,
// params:{
// "transactionid": paymentData.transactionid,
// "webtoken": paymentData.webtoken,
// "paymentmethod":"04,BCFP,FPS",
// "order": {
// "totalamount":paymentData.amount,
// "currency":"HKD",
// "orderdetail":
// [
// {
// "itemid": "1",
// "qty":"1",
// "unitprice":paymentData.amount,
// "amount":paymentData.amount
// },
// ]
// },
// // "locale":"<locale>",
// // "eserviceid":"<eserviceid>"
// },
// onSuccess: function(responseData){
// /*
// {
// "paymentid": "<paymentid>",
// "paymentstatus": "<paymentstatus>",
// "fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
// "fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
// "fpsqrcodeurl": "<fpsqrcodeurl>"
// }
// */
// setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64);
// setPaymentid(responseData.paymentid);
// setFpsmerchanttimeoutdatetime(responseData.fpsmerchanttimeoutdatetime);
// 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)
// }
// });
}

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()
}
});
// 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 = paymentPath + payment.config.ackPagePath + timestamp;
// } else if (paymentstatuscode === 'CANC') {
// window.top.location.href = paymentPath + payment.config.indexPagePath;
// } else {
// window.top.location.href = paymentPath + payment.config.errPagePath;
// }
// },
// onError: function(){
// cancelPayment()
// clearInterval(currentTimer.current);
// }
// });
};

useEffect(() => {
const timeOut = fpsmerchanttimeoutdatetime=now()?500:null;
const interval = setInterval(() => {
getPaymentStatus();
console.log("test");
}, timeOut);
return () => clearInterval(interval);
}, []);
React.useEffect(() => {
const timeOutDate = new Date(fpsmerchanttimeoutdatetime);
const currentTime = new Date;
if (timeOutDate.getTime()<currentTime.getTime()){
console.log("stop");
clearInterval(currentTimer.current);
}
},[time])

const cancelPayment = ()=>{
HttpUtils.post({
@@ -211,7 +230,6 @@ const Index = () => {
請掃描以下二維碼
<br />
<img src={fpsqrcodeimgbase64} alt="QR Code"/>
<img src={fpsqrcodeurl} alt="QR Code"/>
<br />
二維碼有效期限10分鐘
<br />


+ 16
- 0
src/pages/Payment/FPS/fpscallback.js 查看文件

@@ -0,0 +1,16 @@
import * as React from "react";
import {useEffect} from "react";


const Fpscallback = () => {

useEffect(() => {
window.close();
}, []);

return (
<div></div>
);
}

export default Fpscallback;

Write Preview
Loading…
取消
儲存