@@ -0,0 +1,327 @@ | |||||
// material-ui | |||||
import { | |||||
Grid, | |||||
Typography, | |||||
Stack, | |||||
// Button, | |||||
FormLabel, | |||||
} from '@mui/material'; | |||||
import * as React from "react"; | |||||
import * as HttpUtils from "utils/HttpUtils"; | |||||
//import { useNavigate } from 'react-router-dom'; | |||||
import { paymentPath } from "auth/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 [responeData, setResponeDataData] = React.useState({}); | |||||
const [transactionData, setTransactionData] = 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/"; | |||||
React.useEffect(() => { | |||||
console.log("webtoken: " + localStorage.getItem("webtoken")); | |||||
if (localStorage.getItem("webtoken") != null && localStorage.getItem("webtoken") != "") { | |||||
loadForm(); | |||||
} | |||||
// else{ | |||||
// navigate("/dashboard"); | |||||
// } | |||||
}, []); | |||||
React.useEffect(() => { | |||||
console.log(responeData) | |||||
if (Object.keys(responeData).length > 0) { | |||||
setTransactionData(responeData) | |||||
} | |||||
}, [responeData]); | |||||
React.useEffect(() => { | |||||
console.log(transactionData) | |||||
if (Object.keys(transactionData).length > 0) { | |||||
setOnReady(true); | |||||
} | |||||
}, [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 params = new URLSearchParams(window.location.search); | |||||
let transactionid = params.get("TRANSACTION_ID") | |||||
let receipt_token = params.get("RECEIPT_TOKEN").replace("%3D", "=") | |||||
HttpUtils.post({ | |||||
url: paymentPath + updatePaymentApi, | |||||
params: { | |||||
"transactionid": transactionid, | |||||
"receipttoken": receipt_token, | |||||
}, | |||||
onSuccess: function () { | |||||
// { | |||||
// "amount": 999.99, | |||||
// "currencycode": "HKD", | |||||
// "paymentdetail": { | |||||
// "attemptno": 1, | |||||
// "channel": "MobileWallet", | |||||
// "paymentid": "C202310268000681", | |||||
// "paymentmethod": "04", | |||||
// "result": { | |||||
// "canretry": "Y", | |||||
// "description": "CANC - Cancelled by user or Payment Server.", | |||||
// "paymentstatuscode": "CANC", | |||||
// "rejectreasoncode": "Payment Cancelled. [PAY-E-9022]" | |||||
// }, | |||||
// "subtype": "FPS", | |||||
// "time": "2023-10-26T09:02:17Z[UTC]" | |||||
// }, | |||||
// "transactionid": "20231026170103921" | |||||
// } | |||||
// ) | |||||
HttpUtils.post({ | |||||
url: paymentPath + paymentStatusApi + transactionid, | |||||
params: { | |||||
"apprefid": transactionid, | |||||
"webtoken": localStorage.getItem("webtoken"), | |||||
}, | |||||
onSuccess: function (responseData) { | |||||
setResponeDataData(responseData) | |||||
if (responseData.paymentdetail?.result?.paymentstatuscode === "APPR") { | |||||
localStorage.removeItem("webtoken"); | |||||
localStorage.removeItem("transactionid"); | |||||
} | |||||
} | |||||
}); | |||||
} | |||||
}); | |||||
} | |||||
return ( | |||||
!onReady ? | |||||
<LoadingComponent /> | |||||
: | |||||
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}> | |||||
<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 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 ?? (transactionData.paymentdetail.paymentmethod === "01" ? "PPS" : "")} | |||||
</FormLabel> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</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> | |||||
{/*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 > | |||||
) | |||||
); | |||||
}; | |||||
export default Index; |
@@ -1,330 +0,0 @@ | |||||
// material-ui | |||||
import { | |||||
Grid, | |||||
Typography, | |||||
Stack, | |||||
// Button, | |||||
FormLabel, | |||||
} from '@mui/material'; | |||||
import * as React from "react"; | |||||
import * as HttpUtils from "utils/HttpUtils"; | |||||
//import { useNavigate } from 'react-router-dom'; | |||||
import { paymentPath } from "auth/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 [responeData, setResponeDataData] = React.useState({}); | |||||
const [transactionData, setTransactionData] = 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/"; | |||||
React.useEffect(() => { | |||||
console.log("webtoken: " + localStorage.getItem("webtoken")); | |||||
if (localStorage.getItem("webtoken") != null && localStorage.getItem("webtoken") != "") { | |||||
loadForm(); | |||||
} | |||||
// else{ | |||||
// navigate("/dashboard"); | |||||
// } | |||||
}, []); | |||||
React.useEffect(() => { | |||||
console.log(responeData) | |||||
if (Object.keys(responeData).length > 0) { | |||||
setTransactionData(responeData) | |||||
} | |||||
}, [responeData]); | |||||
React.useEffect(() => { | |||||
console.log(transactionData) | |||||
if (Object.keys(transactionData).length > 0) { | |||||
setOnReady(true); | |||||
} | |||||
}, [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 params = new URLSearchParams(window.location.search); | |||||
let transactionid = params.get("TRANSACTION_ID") | |||||
let receipt_token = params.get("RECEIPT_TOKEN").replace("%3D", "=") | |||||
HttpUtils.post({ | |||||
url: paymentPath + updatePaymentApi, | |||||
params: { | |||||
"transactionid": transactionid, | |||||
"receipttoken": receipt_token, | |||||
}, | |||||
onSuccess: function (responseData) { | |||||
// { | |||||
// "transactionid": "<transactionid>", | |||||
// "currencycode":"<currencycode>", | |||||
// "amount":<amount>, | |||||
// "paymentdetail":{ | |||||
// "paymentid": "<paymentid>", | |||||
// "paymentmethod": "<paymentmethod>", | |||||
// "time": "<time>", | |||||
// "brandname": "<brandname>", | |||||
// "channel": "<channeltype>", | |||||
// "subtype": "<subtype>", | |||||
// "attemptno": "<attemptno>", | |||||
// "result": { | |||||
// "code": "<code>", | |||||
// "paymentstatuscode": | |||||
// "<paymentstatuscode>" | |||||
// "description": "<description>", | |||||
// "rejectreasoncode": | |||||
// "<rejectreasoncode>", | |||||
// "canretry": "<retry>" | |||||
// } | |||||
// } | |||||
//} | |||||
setResponeDataData(responseData) | |||||
if (responseData.paymentdetail?.result?.paymentstatuscode === "APPR") { | |||||
localStorage.removeItem("webtoken"); | |||||
localStorage.removeItem("transactionid"); | |||||
} | |||||
// HttpUtils.post({ | |||||
// url: paymentPath + paymentStatusApi + transactionid, | |||||
// params: { | |||||
// "apprefid": transactionid, | |||||
// "webtoken": localStorage.getItem("webtoken"), | |||||
// }, | |||||
// onSuccess: function (responseData) { | |||||
// } | |||||
// }); | |||||
} | |||||
}); | |||||
} | |||||
return ( | |||||
!onReady ? | |||||
<LoadingComponent /> | |||||
: | |||||
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}> | |||||
<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 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.brandname??(transactionData.paymentdetail.paymentmethod==="01"?"PPS":"")} | |||||
</FormLabel> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</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> | |||||
{/*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 > | |||||
) | |||||
); | |||||
}; | |||||
export default Index; |
@@ -118,9 +118,21 @@ const FormPanel = ({ formData }) => { | |||||
noOfPages: values.noOfPages, | noOfPages: values.noOfPages, | ||||
}, | }, | ||||
files: attachments, | files: attachments, | ||||
onSuccess: function () { | |||||
notifySaveSuccess() | |||||
navigate("/proof/search"); | |||||
onSuccess: function (responeData) { | |||||
if(responeData.success == true){ | |||||
notifySaveSuccess() | |||||
navigate("/proof/search"); | |||||
}else{ | |||||
let msg = responeData.msg; | |||||
if(msg ==="haveActiveProof"){ | |||||
msg = "Action Failed: There is already a pending payment and proofreading record for client review." | |||||
}else if(msg === "haveProofed"){ | |||||
msg = "Action Failed: Already proofed." | |||||
} | |||||
setWarningText(msg); | |||||
setIsWarningPopUp(true); | |||||
} | |||||
} | } | ||||
}); | }); | ||||
} | } | ||||
@@ -20,6 +20,7 @@ import Loadable from 'components/Loadable'; | |||||
import { lazy } from 'react'; | import { lazy } from 'react'; | ||||
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); | const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); | ||||
import * as HttpUtils from "utils/HttpUtils" | import * as HttpUtils from "utils/HttpUtils" | ||||
import * as UrlUtils from "utils/ApiPathConst" | |||||
import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils"; | import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils"; | ||||
import DoneIcon from '@mui/icons-material/Done'; | import DoneIcon from '@mui/icons-material/Done'; | ||||
@@ -101,8 +102,25 @@ const ApplicationDetailCard = ( | |||||
const onProofClick = () => { | const onProofClick = () => { | ||||
if (applicationDetailData.data.groupNo) { | if (applicationDetailData.data.groupNo) { | ||||
window.open("/proof/create/" + currentApplicationDetailData.id, "_blank", "noreferrer"); | |||||
window.addEventListener("focus", onFocus) | |||||
HttpUtils.get({ | |||||
url: UrlUtils.CHECK_CREATE_PROOF+"/"+currentApplicationDetailData.id, | |||||
onSuccess:function(responeData){ | |||||
if(responeData.success == true){ | |||||
window.open("/proof/create/" + currentApplicationDetailData.id, "_blank", "noreferrer"); | |||||
window.addEventListener("focus", onFocus) | |||||
}else{ | |||||
let msg = responeData.msg; | |||||
if(msg === "haveActiveProof"){ | |||||
msg = "Action Failed: There is already a pending payment and proofreading record for client review." | |||||
}else if(msg === "haveProofed"){ | |||||
msg = "Action Failed: Already proofed." | |||||
} | |||||
setWarningText(msg); | |||||
setIsWarningPopUp(true); | |||||
} | |||||
} | |||||
}); | |||||
}else{ | }else{ | ||||
setWarningText("Please generate Gazette Code before Create Proof."); | setWarningText("Please generate Gazette Code before Create Proof."); | ||||
setIsWarningPopUp(true); | setIsWarningPopUp(true); | ||||
@@ -19,7 +19,7 @@ const Payment_FPS = Loadable(lazy(() => import('pages/Payment/FPS'))); | |||||
const Payment_FPS_CallBack = Loadable(lazy(() => import('pages/Payment/FPS/fpscallback'))); | const Payment_FPS_CallBack = Loadable(lazy(() => import('pages/Payment/FPS/fpscallback'))); | ||||
const Payment_FPS_Ackpage = Loadable(lazy(() => import('pages/Payment/FPS/AckPage'))); | const Payment_FPS_Ackpage = Loadable(lazy(() => import('pages/Payment/FPS/AckPage'))); | ||||
const Payment_Card = Loadable(lazy(() => import('pages/Payment/Card'))); | const Payment_Card = Loadable(lazy(() => import('pages/Payment/Card'))); | ||||
const Payment_Success = Loadable(lazy(() => import('pages/Payment/PaymentSuccess'))); | |||||
const Payment_Callback = Loadable(lazy(() => import('pages/Payment/PaymentCallback'))); | |||||
// ==============================|| MAIN ROUTING ||============================== // | // ==============================|| MAIN ROUTING ||============================== // | ||||
@@ -80,7 +80,7 @@ const PublicDashboard = { | |||||
}, | }, | ||||
{ | { | ||||
path: 'paymentPage/callback', | path: 'paymentPage/callback', | ||||
element: <Payment_Success/> | |||||
element: <Payment_Callback/> | |||||
}, | }, | ||||
{ | { | ||||
path: 'paymentPage/fps/fpscallback', | path: 'paymentPage/fps/fpscallback', | ||||
@@ -71,6 +71,7 @@ export const UPDATE_PUBLIC_NOTICE_APPLY_DETAIL = apiPath+'/application/save'; | |||||
export const GET_ISSUE_COMBO = apiPath+'/gazette-issue/combo'; | export const GET_ISSUE_COMBO = apiPath+'/gazette-issue/combo'; | ||||
export const CHECK_CREATE_PROOF = apiPath+'/proof/check-create';//GET | |||||
export const LIST_PROOF = apiPath+'/proof/list';//GET | export const LIST_PROOF = apiPath+'/proof/list';//GET | ||||
export const GET_PROOF_APP = apiPath+'/proof/create-from-app';//GLD | export const GET_PROOF_APP = apiPath+'/proof/create-from-app';//GLD | ||||
export const CREATE_PROOF = apiPath+'/proof/create';//POST | export const CREATE_PROOF = apiPath+'/proof/create';//POST | ||||