From d6d303b9840d4ec2a40c8dbf8e38a6794da83615 Mon Sep 17 00:00:00 2001 From: anna Date: Thu, 12 Oct 2023 17:16:09 +0800 Subject: [PATCH] pay page --- src/pages/ProofPayment/Pay.js | 126 +++++++++++++++++++++++ src/pages/ProofPayment/Pay_Creditor.js | 115 +++++++++++++++++++++ src/pages/ProofPayment/index.js | 16 +++ src/pages/ProofReply_Public/ProofForm.js | 12 ++- src/routes/PublicUserRoutes.js | 5 + src/utils/ApiPathConst.js | 2 + 6 files changed, 272 insertions(+), 4 deletions(-) create mode 100644 src/pages/ProofPayment/Pay.js create mode 100644 src/pages/ProofPayment/Pay_Creditor.js create mode 100644 src/pages/ProofPayment/index.js diff --git a/src/pages/ProofPayment/Pay.js b/src/pages/ProofPayment/Pay.js new file mode 100644 index 0000000..58b5fa7 --- /dev/null +++ b/src/pages/ProofPayment/Pay.js @@ -0,0 +1,126 @@ +// material-ui +import { + Grid, + Typography, + Stack, + Button, +} from '@mui/material'; +import * as UrlUtils from "utils/ApiPathConst"; +import * as React from "react"; +import * as HttpUtils from "utils/HttpUtils"; +import { useParams } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; +import * as DateUtils from "utils/DateUtils" + +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 params = useParams(); + const navigate = useNavigate() + + const [record, setRecord] = React.useState(); + const [onReady, setOnReady] = React.useState(false); + + React.useEffect(() => { + loadForm(); + }, []); + + React.useEffect(() => { + setOnReady(true); + }, [record]); + + + const loadForm = () => { + if (params.id > 0) { + HttpUtils.get({ + url: UrlUtils.GET_PROOF_PAY + "/" + params.id, + onSuccess: (responseData) => { + if (!responseData.data?.id) { + navigate("/proof/search"); + } + setRecord(responseData.data); + } + }); + } + } + + return ( + !onReady ? + + : + ( + + +
+ + 校對記錄 + +
+ + {/*row 1*/} + + +
+ + + 公共啟事：交對完成及付款 + + + + 我們已收到申請編號: {record?.appNo} 的稿件交對確定及可付印的指示。 +

+ 請於 {DateUtils.dateStr_Cht(record?.returnBeforeDate)} 下午 2:00 前 完成繳費，我們將於收到繳費確認後處理刊出事宜。 +

+ 如你在憲報期數 {record?.issueYear} 年 {record?.issueVolume} 卷, 第 {record?.issueNo} 期內有多於一個公共啟事的申請，你可選擇完成所有此期所有稿件交對確定後，於繳費期限前在「我的公共啟事」內合併付款。 + + + + 請按以下完成繳費： + + + 或 + + + + +
+ + + {/*row 2*/} + + + + ) + + + ); +}; + +export default Index; diff --git a/src/pages/ProofPayment/Pay_Creditor.js b/src/pages/ProofPayment/Pay_Creditor.js new file mode 100644 index 0000000..b41a49b --- /dev/null +++ b/src/pages/ProofPayment/Pay_Creditor.js @@ -0,0 +1,115 @@ +// material-ui +import { + Grid, + Typography, + Stack, + Button, +} from '@mui/material'; +import * as UrlUtils from "utils/ApiPathConst"; +import * as React from "react"; +import * as HttpUtils from "utils/HttpUtils"; +import { useParams } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; + +import 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 params = useParams(); + const navigate = useNavigate() + + const [record, setRecord] = React.useState(); + const [onReady, setOnReady] = React.useState(false); + + React.useEffect(() => { + loadForm(); + }, []); + + React.useEffect(() => { + setOnReady(true); + }, [record]); + + + const loadForm = () => { + if (params.id > 0) { + HttpUtils.get({ + url: UrlUtils.GET_PROOF_PAY + "/" + params.id, + onSuccess: (responseData) => { + if (!responseData.data?.id) { + navigate("/proof/search"); + } + setRecord(responseData.data); + } + }); + } + } + + return ( + !onReady ? + + : + ( + + +
+ + 校對記錄 + +
+ + {/*row 1*/} + + +
+ + + 公共啟事：交對完成 + + + + + 我們已收到你已確定申請編號: {record?.appNo} 的稿件交對確定及可付印的指示，並將安排刊登於憲報 + 期數 {record?.appNo} 年 {record?.issueVolume} 卷 第 {record?.issueNo} 期內。 +

+ 此公共啟事申請的費用將於下期發出的繳費發票時收取，請依時繳費。 + + + + + + +
+ + + {/*row 2*/} + + + + ) + + + ); +}; + +export default Index; diff --git a/src/pages/ProofPayment/index.js b/src/pages/ProofPayment/index.js new file mode 100644 index 0000000..3a6168b --- /dev/null +++ b/src/pages/ProofPayment/index.js @@ -0,0 +1,16 @@ +import * as React from "react"; +import Loadable from 'components/Loadable'; +const Pay = Loadable(React.lazy(() => import('./Pay'))); +const Pay_Creditor = Loadable(React.lazy(() => import('./Pay_Creditor'))); + + +const Index = () => { + return ( + JSON.parse(localStorage.getItem('userData')).creditor? + + : + + ); +} + +export default Index; \ No newline at end of file diff --git a/src/pages/ProofReply_Public/ProofForm.js b/src/pages/ProofReply_Public/ProofForm.js index 0b318bc..b96612b 100644 --- a/src/pages/ProofReply_Public/ProofForm.js +++ b/src/pages/ProofReply_Public/ProofForm.js @@ -60,7 +60,7 @@ const FormPanel = ({ formData }) => { } } - if(isOverTime()){ + if (isOverTime()) { setWarningText("回覆逾時，請重新申請。"); setIsWarningPopUp(true); return; @@ -75,7 +75,11 @@ const FormPanel = ({ formData }) => { }, files: attachments ? attachments : [], onSuccess: function () { - navigate("/proof/search"); + if (actionValue) { + navigate("/proof/pay/"+params.id); + } else { + navigate("/proof/search"); + } }, onFail: function (response) { setWarningText("行動失敗: 請檢查內容並再次提交回覆"); @@ -183,8 +187,8 @@ const FormPanel = ({ formData }) => { id="action" name="action" defaultValue={true} - onChange={(event)=>{ - setActionValue(event.target.value=="true"?true:false); + onChange={(event) => { + setActionValue(event.target.value == "true" ? true : false); }} > } label="可以付印（稿件正確）" /> diff --git a/src/routes/PublicUserRoutes.js b/src/routes/PublicUserRoutes.js index 27aba9b..2cddd80 100644 --- a/src/routes/PublicUserRoutes.js +++ b/src/routes/PublicUserRoutes.js @@ -13,6 +13,7 @@ const PublicNoticeApplyForm = Loadable(lazy(() => import('pages/PublicNotice/App const PublicNoticeDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail'))); const ProofReply = Loadable(lazy(() => import('pages/ProofReply_Public'))); const ProofSearch = Loadable(lazy(() => import('pages/ProofSearch_Public'))); +const ProofPayment = Loadable(lazy(() => import('pages/ProofPayment'))); // ==============================|| MAIN ROUTING ||============================== // @@ -55,6 +56,10 @@ const PublicDashboard = { path: 'proof/search', element: }, + { + path: 'proof/pay/:id', + element: + }, ] }, ] diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js index 5692622..c9da639 100644 --- a/src/utils/ApiPathConst.js +++ b/src/utils/ApiPathConst.js @@ -75,6 +75,8 @@ export const CREATE_PROOF = apiPath+'/proof/create';//POST export const GET_PROOF = apiPath+'/proof/details';//GET export const REPLY_PROOF = apiPath+'/proof/reply';//GET export const PROOF_CHECK_PRICE = apiPath+'/proof/check-price';//GET +export const GET_PROOF_PAY = apiPath+'/proof/pay-details';//GET + //User Group export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save'; \ No newline at end of file