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

pay page

master
Anna Ho 2 years ago
parent
9a86bc4e89
commit
d6d303b984
6 changed files with 272 additions and 4 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +126
    -0
      src/pages/ProofPayment/Pay.js
  2. +115
    -0
      src/pages/ProofPayment/Pay_Creditor.js
  3. +16
    -0
      src/pages/ProofPayment/index.js
  4. +8
    -4
      src/pages/ProofReply_Public/ProofForm.js
  5. +5
    -0
      src/routes/PublicUserRoutes.js
  6. +2
    -0
      src/utils/ApiPathConst.js

+ 126
- 0
src/pages/ProofPayment/Pay.js View File

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

+ 115
- 0
src/pages/ProofPayment/Pay_Creditor.js View File

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

+ 16
- 0
src/pages/ProofPayment/index.js View File

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

+ 8
- 4
src/pages/ProofReply_Public/ProofForm.js View File

@@ -60,7 +60,7 @@ const FormPanel = ({ formData }) => {
} }
} }


if(isOverTime()){
if (isOverTime()) {
setWarningText("回覆逾時，請重新申請。"); setWarningText("回覆逾時，請重新申請。");
setIsWarningPopUp(true); setIsWarningPopUp(true);
return; return;
@@ -75,7 +75,11 @@ const FormPanel = ({ formData }) => {
}, },
files: attachments ? attachments : [], files: attachments ? attachments : [],
onSuccess: function () { onSuccess: function () {
navigate("/proof/search");
if (actionValue) {
navigate("/proof/pay/"+params.id);
} else {
navigate("/proof/search");
}
}, },
onFail: function (response) { onFail: function (response) {
setWarningText("行動失敗: 請檢查內容並再次提交回覆"); setWarningText("行動失敗: 請檢查內容並再次提交回覆");
@@ -183,8 +187,8 @@ const FormPanel = ({ formData }) => {
id="action" id="action"
name="action" name="action"
defaultValue={true} 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="可以付印（稿件正確）" /> <FormControlLabel value={true} control={<Radio />} label="可以付印（稿件正確）" />


+ 5
- 0
src/routes/PublicUserRoutes.js View File

@@ -13,6 +13,7 @@ const PublicNoticeApplyForm = Loadable(lazy(() => import('pages/PublicNotice/App
const PublicNoticeDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail'))); const PublicNoticeDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail')));
const ProofReply = Loadable(lazy(() => import('pages/ProofReply_Public'))); const ProofReply = Loadable(lazy(() => import('pages/ProofReply_Public')));
const ProofSearch = Loadable(lazy(() => import('pages/ProofSearch_Public'))); const ProofSearch = Loadable(lazy(() => import('pages/ProofSearch_Public')));
const ProofPayment = Loadable(lazy(() => import('pages/ProofPayment')));


// ==============================|| MAIN ROUTING ||============================== // // ==============================|| MAIN ROUTING ||============================== //


@@ -55,6 +56,10 @@ const PublicDashboard = {
path: 'proof/search', path: 'proof/search',
element: <ProofSearch/> element: <ProofSearch/>
}, },
{
path: 'proof/pay/:id',
element: <ProofPayment/>
},
] ]
}, },
] ]


+ 2
- 0
src/utils/ApiPathConst.js View File

@@ -75,6 +75,8 @@ export const CREATE_PROOF = apiPath+'/proof/create';//POST
export const GET_PROOF = apiPath+'/proof/details';//GET export const GET_PROOF = apiPath+'/proof/details';//GET
export const REPLY_PROOF = apiPath+'/proof/reply';//GET export const REPLY_PROOF = apiPath+'/proof/reply';//GET
export const PROOF_CHECK_PRICE = apiPath+'/proof/check-price';//GET export const PROOF_CHECK_PRICE = apiPath+'/proof/check-price';//GET
export const GET_PROOF_PAY = apiPath+'/proof/pay-details';//GET



//User Group //User Group
export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save'; export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save';

Write Preview
Loading…
Cancel
Save