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

Merge branch 'master' into iAmSmart 

# Conflicts:
#	src/auth/utils.js
master
Anna Ho 1 year ago
parent
a7518f504c 3f72a7aae5
commit
58f2274518
9 changed files with 475 additions and 215 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +12
    -0
      src/assets/style/styles.css
  2. +5
    -0
      src/auth/utils.js
  3. +1
    -1
      src/pages/Payment/Card/index.js
  4. +248
    -116
      src/pages/Payment/FPS/AckPage.js
  5. +57
    -45
      src/pages/Payment/FPS/FPS.js
  6. +19
    -12
      src/pages/Payment/MultiPaymentWindow.js
  7. +5
    -5
      src/pages/Payment/PaymentCallback.js
  8. +119
    -21
      src/pages/Payment/index.js
  9. +9
    -15
      src/pages/Proof/Create_FromApp/ProofForm.js

+ 12
- 0
src/assets/style/styles.css View File

@@ -11,6 +11,18 @@ body,
font-family: "Noto Sans HK", "Noto Sans SC"; font-family: "Noto Sans HK", "Noto Sans SC";
} }


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}

/* body{ /* body{
padding-top: 53px; padding-top: 53px;
font-family: 微軟正黑體; font-family: 微軟正黑體;


+ 5
- 0
src/auth/utils.js View File

@@ -10,8 +10,13 @@ export const hostname = 'localhost';
const hostPort = '8090'; const hostPort = '8090';
export const hostPath = `http://${hostname}:${hostPort}`; export const hostPath = `http://${hostname}:${hostPort}`;
//export const apiPath = `http://192.168.0.112:8090/api`; //export const apiPath = `http://192.168.0.112:8090/api`;
<<<<<<< HEAD
//export const apiPath = `${hostPath}/api`; //export const apiPath = `${hostPath}/api`;
export const apiPath = `/api`; export const apiPath = `/api`;
=======
export const apiPath = `${hostPath}/api`;
//export const apiPath = `/api`;
>>>>>>> master
export const paymentPath = `http://pnspsdev.gld.gov.hk/payment`; export const paymentPath = `http://pnspsdev.gld.gov.hk/payment`;


export const iAmSmartPath = `https://apigw-isit.staging-eid.gov.hk`; export const iAmSmartPath = `https://apigw-isit.staging-eid.gov.hk`;


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

@@ -94,7 +94,7 @@ const Index = () => {
}, },
// "locale":"<locale>", // "locale":"<locale>",
// "eserviceid":"<eserviceid>", // "eserviceid":"<eserviceid>",
"returnurl": "http://"+window.location.hostname+"/paymentPage/callback"
"returnurl": "https://"+window.location.hostname+"/paymentPage/callback"
}, },
///{state:{transactionid:paymentData.transactionid,webtoken:paymentData.webtoken} } ///{state:{transactionid:paymentData.transactionid,webtoken:paymentData.webtoken} }
onSuccess: function(responseData){ onSuccess: function(responseData){


+ 248
- 116
src/pages/Payment/FPS/AckPage.js View File

@@ -3,8 +3,9 @@ import {
Grid, Grid,
Typography, Typography,
Stack, Stack,
Box
// Button, // Button,
FormLabel,
// FormLabel,
} from '@mui/material'; } from '@mui/material';
import * as React from "react"; import * as React from "react";
import * as HttpUtils from "utils/HttpUtils"; import * as HttpUtils from "utils/HttpUtils";
@@ -16,6 +17,8 @@ import {paymentPath} from "auth/utils";


import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); 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' import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
const BackgroundHead = { const BackgroundHead = {
@@ -39,11 +42,12 @@ const AckPage = () => {
const [responeData, setResponeDataData] = React.useState({}); const [responeData, setResponeDataData] = React.useState({});


const [transactionData, setTransactionData] = 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 [onReady, setOnReady] = React.useState(false);
const paymentStatusApi = "/api/payment/status/"; const paymentStatusApi = "/api/payment/status/";



React.useEffect(() => { React.useEffect(() => {
console.log (location.state) console.log (location.state)
if(Object.keys(location.state).length > 0){ if(Object.keys(location.state).length > 0){
@@ -69,7 +73,7 @@ const AckPage = () => {


React.useEffect(() => { React.useEffect(() => {
console.log(responeData) console.log(responeData)
if(Object.keys(responeData).length > 0 && fpsmerchanttimeoutdatetime!=""){
if(Object.keys(responeData).length > 0){
setTransactionData(responeData) setTransactionData(responeData)
} }
}, [responeData]); }, [responeData]);
@@ -83,20 +87,45 @@ const AckPage = () => {
}, [transactionData]); }, [transactionData]);


const loadForm = () => { 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({ HttpUtils.post({
url: paymentPath+paymentStatusApi+paymentData.transactionid,
url: paymentPath+paymentStatusApi+transactionid,
params:{ params:{
"apprefid": paymentData.transactionid,
"webtoken": paymentData.webtoken,
"apprefid": transactionid,
"webtoken": webtoken,
}, },
onSuccess: function(responseData){ onSuccess: function(responseData){
setResponeDataData(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 ? !onReady ?
<LoadingComponent /> <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" }}>
Your application and payment have been received
</Typography>

<Grid container>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
Transaction Reference No:
</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" }}>
Transaction Date:
</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" }}>
Transaction Time:
</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 Reference No:
</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" }}>
Payment Amount
</FormLabel>
transactionData.paymentdetail?.result?.paymentstatuscode === "APPR" ?
(
<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 }}>公共啟事：付款成功</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" }}>
您的申請和付款已收到
</Typography>

<Grid container>
<Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
<Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
<Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{ height: '100%' }}>
<Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
<DataGrid
recordList={itemList}
/>
</Box>
</Grid>
<Grid item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
<Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
<PaymentDetails
formData={paymentData}
style={{
display: "flex",
height: "100%",
flex: 1
}}
/>
</Box>
</Grid>
</Grid>
</Grid> </Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{"HK$ "+transactionData.amount}
</FormLabel>
{/* <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" }}>
{"P" + transactionData.transactionid}
</FormLabel>
</Grid>
</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>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
Payment Method:
</FormLabel>
<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>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{transactionData.paymentdetail.subtype}
</FormLabel>
<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>
<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>
<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 ?? (transactionData.paymentdetail.paymentmethod === "01" ? "PPS" : "")}
</FormLabel>
</Grid>
</Grid>
</Grid> */}
</Grid> </Grid>
</Grid> </Grid>
</Grid>
</center>
</center>
</Grid>
</Grid>
{/*row 2*/}
</Grid >
) :
(transactionData.paymentdetail?.result?.paymentstatuscode === "CANC" ?
<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 }}>公共啟事：付款取消</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={8} >
<Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
付款取消訊息：
<br /><br />
您的付款已被取消。我們收到了您的付款請求，但由於某些原因，付款無法完成。請注意以下事項：
<br /><br />
如果您主動取消了支付，請確認並確保取消是您的意願。
<br />
如果付款被取消是由於系統問題或其他原因，請您嘗試以下解決方法：
<br /><br />
檢查您的支付帳戶是否有任何異常或限制。
<br />
確保您的付款資訊準確無誤。
<br />
檢查您的網路連線是否正常。
<br /><br />
如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決您的付款問題。謝謝！
</Typography>
</Grid>
</center>
</Grid>
</Grid> </Grid>
</Grid>
{/*row 2*/}
</Grid >
)
{/*row 2*/}
</Grid >
:
<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 }}>公共啟事：付款失敗</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={8} >


<Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
付款失敗訊息：
<br /><br />
親愛的用戶，很遺憾地告訴您，您的付款操作未成功。我們在處理您的付款時遇到了問題。請您仔細檢查以下事項：
<br /><br />
您的支付帳戶餘額是否足夠。
<br />
您提供的付款資訊是否準確無誤。
<br />
請檢查您的網路連線是否正常。
<br /><br />
如果您已確認以上問題無誤，但付款失敗，請您嘗試以下解決方法：
<br /><br />
嘗試使用其他付款方式進行付款。
<br />
檢查您的支付帳戶是否有異常或限制。
<br />
聯絡我們的客服人員尋求協助。
<br /><br />
如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫。非常抱歉給您帶來不便，我們將盡快解決您的付款問題。謝謝！
</Typography>


</Grid>
</center>
</Grid>
</Grid>
{/*row 2*/}
</Grid >
)
); );
}; };




+ 57
- 45
src/pages/Payment/FPS/FPS.js View File

@@ -17,6 +17,7 @@ import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));


import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import { object } from 'prop-types';
const BackgroundHead = { const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`, backgroundImage: `url(${titleBackgroundImg})`,
width: '100%', width: '100%',
@@ -56,7 +57,7 @@ const Index = () => {
const [time, setTime] = React.useState(0); const [time, setTime] = React.useState(0);


React.useEffect(() => { React.useEffect(() => {
console.log (location.state)
// console.log (location.state)
if(Object.keys(location.state).length > 0){ if(Object.keys(location.state).length > 0){
console.log (location.state) console.log (location.state)
setLocationData(location.state) setLocationData(location.state)
@@ -64,7 +65,7 @@ const Index = () => {
}, []); }, []);


React.useEffect(() => { React.useEffect(() => {
console.log (locationData)
// console.log (locationData)
if (Object.keys(locationData).length > 0){ if (Object.keys(locationData).length > 0){
setPaymentData(locationData) setPaymentData(locationData)
// loadForm(); // loadForm();
@@ -72,21 +73,21 @@ const Index = () => {
}, [locationData]); }, [locationData]);


React.useEffect(() => { React.useEffect(() => {
console.log (paymentData)
// console.log (paymentData)
if (Object.keys(paymentData).length > 0){ if (Object.keys(paymentData).length > 0){
loadForm(); loadForm();
} }
}, [paymentData]); }, [paymentData]);


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


React.useEffect(() => { React.useEffect(() => {
console.log(fpsTransctionData)
// console.log(fpsTransctionData)
if(Object.keys(fpsTransctionData).length > 0 ){ if(Object.keys(fpsTransctionData).length > 0 ){
setOnReady(true); setOnReady(true);
currentTimer.current = setInterval(() => { currentTimer.current = setInterval(() => {
@@ -103,6 +104,11 @@ const Index = () => {
// setFpsmerchanttimeoutdatetime(convertedDateString) // setFpsmerchanttimeoutdatetime(convertedDateString)
// setPaymentid("C202310268000681") // setPaymentid("C202310268000681")
// setPaymentstatuscode("APPR") // setPaymentstatuscode("APPR")
localStorage.removeItem("transactionid")
localStorage.removeItem("webtoken")
localStorage.setItem("transactionid", paymentData.transactionid)
localStorage.setItem("webtoken", paymentData.webtoken)
HttpUtils.post({ HttpUtils.post({
url: paymentPath+loadPaymentUrl, url: paymentPath+loadPaymentUrl,
params:{ params:{
@@ -152,42 +158,45 @@ const Index = () => {
} }


const getPaymentStatus = () => { 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(() => { React.useEffect(() => {
const timeOutDate = new Date(fpsmerchanttimeoutdatetime); const timeOutDate = new Date(fpsmerchanttimeoutdatetime);
const currentTime = new Date; 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(); getPaymentStatus();
if (timeOutDate.getTime()<currentTime.getTime()){ if (timeOutDate.getTime()<currentTime.getTime()){
console.log("stop"); console.log("stop");
@@ -197,17 +206,20 @@ const Index = () => {
},[time]) },[time])


const cancelPayment = ()=>{ 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 ( return (


+ 19
- 12
src/pages/Payment/MultiPaymentWindow.js View File

@@ -21,6 +21,7 @@ import { useFormik, FormikProvider } from 'formik';
import * as yup from 'yup'; import * as yup from 'yup';
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); 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 VisaIcon from "assets/images/icons/visacard.svg";
import MasterIcon from "assets/images/icons/mastercard.svg"; import MasterIcon from "assets/images/icons/mastercard.svg";
@@ -45,14 +46,26 @@ const MultiPaymentWindow = (props) => {
if(Object.keys(props.transactionData).length > 0){ if(Object.keys(props.transactionData).length > 0){
setLoadtTransactionData(props.transactionData) setLoadtTransactionData(props.transactionData)
} }
}, [props.transactionData]);
}, []);

// useEffect(() => {
// console.log(props.availableMethods)
// if(props.availableMethods.length > 0){
// setLoadAvailableMethodData(props.availableMethods)
// }
// }, [props.availableMethods]);


useEffect(() => { 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) setLoadAvailableMethodData(props.availableMethods)
} }
}, [props.availableMethods]);
}, [transactionData]);


useEffect(() => { useEffect(() => {
if(loadAvailableMethodData.length > 0){ if(loadAvailableMethodData.length > 0){
@@ -60,17 +73,11 @@ const MultiPaymentWindow = (props) => {
} }
}, [loadAvailableMethodData]); }, [loadAvailableMethodData]);


useEffect(() => {
if(Object.keys(loadtTransactionData).length > 0){
setTransactionData(loadtTransactionData)
}
}, [loadtTransactionData]);

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


useEffect(() => { useEffect(() => {
console.log(paymentMethod) console.log(paymentMethod)
@@ -117,7 +124,7 @@ const MultiPaymentWindow = (props) => {
</Grid> </Grid>
<Grid item> <Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}> <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{"HK$ "+props.totalAmount}
{"HK$ "+FormatUtils.currencyFormat(props.totalAmount)}
</FormLabel> </FormLabel>
</Grid> </Grid>
</Grid> </Grid>


+ 5
- 5
src/pages/Payment/PaymentCallback.js View File

@@ -65,11 +65,11 @@ const Index = () => {
}, [transactionData]); }, [transactionData]);


const loadForm = () => { 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); const params = new URLSearchParams(window.location.search);
let transactionid = params.get("TRANSACTION_ID") let transactionid = params.get("TRANSACTION_ID")
let receipt_token = params.get("RECEIPT_TOKEN").replace("%3D", "=") let receipt_token = params.get("RECEIPT_TOKEN").replace("%3D", "=")


+ 119
- 21
src/pages/Payment/index.js View File

@@ -2,13 +2,14 @@ import * as React from "react";
import * as HttpUtils from "utils/HttpUtils"; import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst"; import * as UrlUtils from "utils/ApiPathConst";
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
const MultiPaymentWindow = Loadable(React.lazy(() => import('./MultiPaymentWindow')));
// const MultiPaymentWindow = Loadable(React.lazy(() => import('./MultiPaymentWindow')));
const DataGrid = Loadable(React.lazy(() => import('./Details_Public/DataGrid'))); const DataGrid = Loadable(React.lazy(() => import('./Details_Public/DataGrid')));
// const FPS = Loadable(React.lazy(() => import('./FPS'))); // const FPS = Loadable(React.lazy(() => import('./FPS')));
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom"; import { useNavigate, useLocation } from "react-router-dom";
import { paymentPath } from "auth/utils"; import { paymentPath } from "auth/utils";
import * as FormatUtils from "utils/FormatUtils"; import * as FormatUtils from "utils/FormatUtils";
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));


import { import {
Button, Button,
@@ -42,7 +43,7 @@ const Index = () => {




//statusWindow //statusWindow
const [open, setOpen] = useState(false);
// const [open, setOpen] = useState(false);
const [availableMethods, setAvailableMethods] = useState([]); const [availableMethods, setAvailableMethods] = useState([]);
const [transactionData, setTransactionData] = useState({}); const [transactionData, setTransactionData] = useState({});
const [fpsStatus, setFPSStatus] = useState({}); const [fpsStatus, setFPSStatus] = useState({});
@@ -53,6 +54,7 @@ const Index = () => {
const [confirmPayment, setConfirmPayment] = useState(false); const [confirmPayment, setConfirmPayment] = useState(false);


const [itemList, setItemList] = useState([]); const [itemList, setItemList] = useState([]);
const [onReady, setOnReady] = useState(false);


useEffect(() => { useEffect(() => {
setAppIds(location.state?.appIdList ?? []) setAppIds(location.state?.appIdList ?? [])
@@ -67,25 +69,26 @@ const Index = () => {
getAppList(); getAppList();
},[appIds]); },[appIds]);


const handleClose = () => {
// handleReset()
setOpen(false);
getTransactionId()
};
// const handleClose = () => {
// // handleReset()
// setOpen(false);
// getTransactionId()
// getAvailablePayment()
// };


const paymentClick = () => {
setTotalAmount(totalAmount);
setSelectedPaymentMethod("")
setConfirmPayment(false)
if (totalAmount > 0) {
getTransactionId()
setOpen(true)
}
};
// const paymentClick = () => {
// setTotalAmount(totalAmount);
// setSelectedPaymentMethod("")
// setConfirmPayment(false)
// if (totalAmount > 0) {
// getTransactionId()
// // setOpen(true)
// }
// };


useEffect(() => { useEffect(() => {
if (confirmPayment) { if (confirmPayment) {
setOpen(false);
// setOpen(false);
// let transactionid = ""; // let transactionid = "";
// let webtoken = ""; // let webtoken = "";


@@ -335,6 +338,12 @@ const Index = () => {
}); });
} }


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

const getAppList = () => { const getAppList = () => {
HttpUtils.post({ HttpUtils.post({
url: UrlUtils.PAYMENT_APP_LIST, url: UrlUtils.PAYMENT_APP_LIST,
@@ -346,7 +355,14 @@ const Index = () => {
} }
}); });
} }

const selectedPaymentMethodHandle = (method) => () =>{
setSelectedPaymentMethod(method);
};
const confirmPaymentHandle = () => () =>{
setConfirmPayment(true);
};


return ( return (
<Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" > <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
@@ -381,18 +397,100 @@ const Index = () => {
支付金額: HK$ {FormatUtils.currencyFormat(totalAmount)} 支付金額: HK$ {FormatUtils.currencyFormat(totalAmount)}
</Typography> </Typography>


<Button
{/* <Button
component="span" component="span"
variant="contained" variant="contained"
size="large" size="large"
// color="error" // color="error"
onClick={() => paymentClick()} onClick={() => paymentClick()}
sx={{ mt: 4 }} sx={{ mt: 4 }}
>選擇付款方式</Button>
>選擇付款方式</Button> */}
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
付款金額:
</Typography>
</Grid>
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
{"HK$ "+FormatUtils.currencyFormat(totalAmount)}
</Typography>
</Grid>
</Grid>
</Grid> </Grid>
{availableMethodData.length > 0?
!onReady ?
<LoadingComponent />:
<Grid item xs={12} md={12}>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
付款方式:
</Typography>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={fpsStatus.active === "N"}>
<img src={FpsIcon} width="80" height="80" alt="FPS"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={creditCardStatus.active === "N"}>
<img src={VisaIcon} width="80" height="80" alt="Visa"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={creditCardStatus.active === "N"}>
<img src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={unionPayStatus.active === "N"}>
<img src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={unionPayStatus.active === "N"}>
<img src={JcbIcon} width="80" height="80" alt="JCB"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={ppsStatus.active === "N"}>
<img src={PpsIcon} width="80" height="80" alt="PPS"></img>
</Button>
</Grid>
</Grid>
{selectedPaymentMethod !=""?
<Grid item xs={12} md={12}>
<Grid container direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
已選擇付款方式:
</Typography>
</Grid>
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
{selectedPaymentMethod}
</Typography>
</Grid>
</Grid>
</Grid>
: null}
<Button variant="contained" size="large" color="success" onClick={confirmPaymentHandle()} disabled={selectedPaymentMethod === ""}>
確認
</Button>
</Grid>:
<Grid container direction="row" justifyContent="center" alignItems="center">
<Typography sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
付款功能現在不可用。
</Typography>
</Grid>
}
</center> </center>
</Grid> </Grid>
<MultiPaymentWindow open={open}
{/* <MultiPaymentWindow open={open}
handleCose={handleClose} handleCose={handleClose}
availableMethods={availableMethods} availableMethods={availableMethods}
transactionData={transactionData} transactionData={transactionData}
@@ -404,7 +502,7 @@ const Index = () => {
setSelectedPaymentMethod={setSelectedPaymentMethod} setSelectedPaymentMethod={setSelectedPaymentMethod}
selectedPaymentMethod={selectedPaymentMethod} selectedPaymentMethod={selectedPaymentMethod}
setConfirmPayment={setConfirmPayment} setConfirmPayment={setConfirmPayment}
/>
/> */}
</Box> </Box>
</Grid> </Grid>
</Grid> </Grid>


+ 9
- 15
src/pages/Proof/Create_FromApp/ProofForm.js View File

@@ -236,14 +236,12 @@ const FormPanel = ({ formData }) => {
<TextField <TextField
fullWidth fullWidth
size="small" size="small"
type="text"
type="number"
value={formik.values["noOfPages"]}
onChange={(event) => { onChange={(event) => {
const re = /^[0-9\b]+$/;
if (event.target.value === '' || re.test(event.target.value)) {
const value = event.target.value;
formik.setFieldValue("length", value);
formik.setFieldValue("fee", 6552 * value);
}
const value = parseInt(event.target.value);
formik.setFieldValue("noOfPages", value);
formik.setFieldValue("fee", 6552 * value);
}} }}
variant="outlined" variant="outlined"
sx={ sx={
@@ -273,15 +271,11 @@ const FormPanel = ({ formData }) => {
<TextField <TextField
fullWidth fullWidth
size="small" size="small"
type="text"
type="number"
onChange={(event) => { onChange={(event) => {
const re = /^[0-9\b]+$/;
if (event.target.value === '' || re.test(event.target.value)) {
const value = event.target.value;
formik.setFieldValue("length", value);
formik.setFieldValue("fee", columnPrice.value * value);
}
let value = parseInt(event.target.value);
formik.setFieldValue("length", value);
formik.setFieldValue("fee", columnPrice.value * value);
}} }}
name="length" name="length"
value={formik.values["length"]} value={formik.values["length"]}


Write Preview
Loading…
Cancel
Save