| @@ -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 | ||||