pay page

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 ?
+            <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 }}>校對記錄</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="h2" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
+                                        公共啟事：交對完成及付款
+                                    </Typography>
+
+                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                        我們已收到申請編號: {record?.appNo} 的稿件交對確定及可付印的指示。
+                                        <br /><br />
+                                        請於  <span style={{ color: "red" }}>{DateUtils.dateStr_Cht(record?.returnBeforeDate)} 下午 2:00 前</span>  完成繳費，我們將於收到繳費確認後處理刊出事宜。
+                                        <br /><br />
+                                        如你在憲報期數 {record?.issueYear} 年 {record?.issueVolume} 卷, 第 {record?.issueNo} 期內有多於一個公共啟事的申請，你可選擇完成所有此期所有稿件交對確定後，於繳費期限前在「我的公共啟事」內合併付款。
+                                    </Typography>
+
+                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                        請按以下完成繳費：
+                                        <Button
+                                            component="span"
+                                            variant="contained"
+                                            size="large"
+                                            sx={{ m: 4}}
+                                        >繼續：網上繳費</Button>
+
+                                        或
+
+                                        <Button
+                                            component="span"
+                                            variant="contained"
+                                            size="large"
+                                            sx={{ m: 4}}
+                                            onClick={()=>{
+                                                navigate("/publicNotice");
+                                            }}
+                                        >返回「我的公共啟事」</Button>
+                                    </Typography>
+                                </Grid>
+                            </center>
+                        </Grid>
+                    </Grid>
+                    {/*row 2*/}
+                </Grid >
+
+
+            )
+
+
+    );
+};
+
+export default Index;

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 ?
+            <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 }}>校對記錄</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="h2" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
+                                        公共啟事：交對完成
+                                    </Typography>
+
+
+                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                    我們已收到你已確定申請編號: {record?.appNo} 的稿件交對確定及可付印的指示，並將安排刊登於憲報
+                                    期數 {record?.appNo} 年 {record?.issueVolume} 卷 第 {record?.issueNo} 期內。
+                                    <br/><br/>
+                                    此公共啟事申請的費用將於下期發出的繳費發票時收取，請依時繳費。
+                                </Typography>
+
+                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                        <Button
+                                            component="span"
+                                            variant="contained"
+                                            size="large"
+                                            sx={{ m: 4}}
+                                            onClick={()=>{
+                                                navigate("/publicNotice");
+                                            }}
+                                        >返回「我的公共啟事」</Button>
+                                    </Typography>
+                                </Grid>
+                            </center>
+                        </Grid>
+                    </Grid>
+                    {/*row 2*/}
+                </Grid >
+
+
+            )
+
+
+    );
+};
+
+export default Index;

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?
+        <Pay_Creditor/>
+        :
+        <Pay/>
+    );
+}
+
+export default Index;

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);
                                             }}
                                         >
                                             <FormControlLabel value={true} control={<Radio />} label="可以付印（稿件正確）" />

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: <ProofSearch/>
         },
+        {
+          path: 'proof/pay/:id',
+          element: <ProofPayment/>
+        },
       ]
     },
   ]

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';