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

proof pay

master
Anna Ho 1 year ago
parent
e789f1b1bc
commit
406453589c
7 changed files with 294 additions and 518 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +82
    -237
      src/pages/Proof/Payment/Pay_DN.js
  2. +78
    -237
      src/pages/Proof/Payment/Pay_Office.js
  3. +42
    -28
      src/pages/Proof/Payment/Pay_Online.js
  4. +35
    -16
      src/pages/Proof/Payment/index.js
  5. +19
    -0
      src/translations/en.json
  6. +18
    -0
      src/translations/zh-CN.json
  7. +20
    -0
      src/translations/zh-HK.json

+ 82
- 237
src/pages/Proof/Payment/Pay_DN.js View File

@@ -4,20 +4,13 @@ import {
Typography,
Stack,
Button,
Dialog, DialogTitle, DialogContent, DialogActions
} 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 * as FormatUtils from "utils/FormatUtils";
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'
import { FormattedMessage, useIntl } from "react-intl";
const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`,
width: '100%',
@@ -28,250 +21,102 @@ const BackgroundHead = {
backgroundPosition: 'right'
}

import {
// useEffect,
useState
} from "react";
import { PNSPS_BUTTON_THEME, PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst";
import { ThemeProvider } from "@emotion/react";
import { FormattedMessage, useIntl } from "react-intl";
// ==============================|| DASHBOARD - DEFAULT ||============================== //

const Index = () => {
const params = useParams();
const Index = ({ record }) => {
const navigate = useNavigate()
const [fee, setFee] = useState(0);

const [record, setRecord] = React.useState({});
const [onReady, setOnReady] = React.useState(false);
const [isPopUp, setIsPopUp] = useState(false);
const [paymentHoldedErrText, setPaymentHoldedErrText] = React.useState("");
const [paymentHoldedErr, setPaymentHoldedErr] = React.useState(false);

const intl = useIntl();

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);
setFee(responseData.data.fee);
},
onError: () => {

}
});
}
}

function doPayment() {
setIsPopUp(false);
let appIdList = [record?.appId]
handlePaymentCheck(appIdList)
}

const handlePaymentCheck = (appIdList) => {
HttpUtils.post({
url: UrlUtils.PAYMENT_CHECK,
params: {
appIds: appIdList
},
onSuccess: (responseData) => {
const latestData = {};

responseData.forEach(item => {
const { appId, timeDiff } = item;
if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {
latestData[appId] = item;
}
});
const latestDataObjects = Object.values(latestData);
const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 || item.status !== "APPR");
const filteredAppIds = filteredData.map(item => item.appId);
const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));
const combinedAppIdsArray = [...appIdsNotInData, ...filteredAppIds];
const readyToPayment = appIdList.every(appId => combinedAppIdsArray.includes(appId));
if (readyToPayment){
navigate('/paymentPage', { state: { amount: fee, appIdList: appIdList } });
}else{
const appIdsInData = appIdList.filter(appId => !combinedAppIdsArray.some(item => item === appId));
const HoldingApplication = latestDataObjects.filter(item => appIdsInData.includes(item.appId));
const resultString = HoldingApplication.map(item => item.appNo).join(' , ');
setPaymentHoldedErrText(resultString);
// setPaymentHoldedErrText(intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: record.appNo }));
setPaymentHoldedErr(true);
}
}
});
};

return (
!onReady ?
<Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
<Grid item>
<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={{ display: { xs: 'none', sm: 'none', md: 'block' }, pt: 2 }} >
<FormattedMessage id="proofRecord" />
</Typography>
</Stack>
</div>
</Grid>
</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={{ display: { xs: 'none', sm: 'none', md: 'block' }, pt: 2 }}>
<FormattedMessage id="proofRecord" />
{/*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" }}>
<FormattedMessage id="proofPaymentHeader_demandNote" />
</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="h3" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
<FormattedMessage id="publicNoticePaymentProofDoneAndPaid" />
</Typography>

<Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
<div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.payMsg1' }, { appNo: record.appNo }) }} />
<br />
<FormattedMessage id="MSG.payMsg2_1" />
<span style={{ color: "red" }}>
{DateUtils.datetimeStr(record?.proofPaymentDeadline)}
</span>
<FormattedMessage id="MSG.payMsg2_2" />
<br />
<br />
<div dangerouslySetInnerHTML={{
__html: intl.formatMessage({ id: 'MSG.payMsg3' },
{
issueYear: record?.issueYear,
issueVolume: record?.issueVolume,
issueNo: record?.issueNo,
})
}} />
</Typography>

<Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
<FormattedMessage id="pleaseClickToPay" />：
</Typography>
<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
<div dangerouslySetInnerHTML={{
__html: intl.formatMessage(
{
id: 'proofPaymentBody_demandNote'
},
{
appNo: record?.appNo,
}
)
}} />
<br />
<div dangerouslySetInnerHTML={{
__html: intl.formatMessage(
{
id: 'proofPaymentBody_demandNote2'
},
{
beforeClosingDate: "{beforeClosingDate}",
email: record?.mail,
}
)
}} />
<br />
<div dangerouslySetInnerHTML={{
__html: intl.formatMessage(
{
id: 'proofPaymentBody_demandNote3'
},
{
paymentDeadline: DateUtils.dateStr(record?.closingDate),
}
)
}} />
<br />
<div dangerouslySetInnerHTML={{
__html: intl.formatMessage(
{
id: 'proofPaymentBody_demandNote4'
}
)
}} />

<Typography variant="h4" sx={{ ml: 8, textAlign: "left" }}>
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
<Button
component="span"
variant="contained"
sx={{ ml: { md: 4, lg: 4 }, mr: 4 }}
onClick={() => { setIsPopUp(true) }}
>
<FormattedMessage id="payInstantly" />
</Button>
</ThemeProvider>

<FormattedMessage id="or" />
</Typography>

<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
component="span"
variant="contained"
sx={{ ml: { sm: 4, md: 4, lg: 4 }, mr: 4, mt: { xs: 2, sm: 2 }, mb: { xs: 2, sm: 2 } }}
onClick={() => {
navigate("/publicNotice");
}}
>
<FormattedMessage id="payLater" />
</Button>
（<FormattedMessage id="backToNoticePage" />）
</ThemeProvider>
</Typography>
</Grid>
</center>
</Grid>
</Grid>
<div>
<Dialog
open={isPopUp}
onClose={() => setIsPopUp(false)}
PaperProps={{
sx: {
minWidth: '40vw',
maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' },
maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' }
}
}}
>
<DialogTitle>
<Typography variant="h3" >
<FormattedMessage id="payConfirm" />
<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");
}}
>
<FormattedMessage id="backToNoticePage" />
</Button>
</Typography>
</DialogTitle>
<DialogContent style={{ display: 'flex', }}>
<Stack direction="column" justifyContent="space-between">
<Typography variant="h4">
<FormattedMessage id="totalAmount" /> (HK$): {FormatUtils.currencyFormat(fee)}
</Typography>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setIsPopUp(false)}>
<Typography variant="h5">
<FormattedMessage id="close" />
</Typography></Button>
<Button onClick={() => doPayment()}><Typography variant="h5">
<FormattedMessage id="confirm" />
</Typography></Button>
</DialogActions>
</Dialog>
</div>
{/*row 2*/}
<div>
<Dialog
open={paymentHoldedErr}
onClose={() => setPaymentHoldedErr(false)}
PaperProps={{
sx: {
minWidth: '40vw',
maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
}
}}
>
<DialogTitle></DialogTitle>
<Typography variant="h4" style={{ paddingLeft: '24px' }}><FormattedMessage id="MSG.actionFail" /></Typography>
<DialogContent style={{ display: 'flex', }}>
<Stack direction="column" justifyContent="space-between">
<div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: paymentHoldedErrText }) }} />
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setPaymentHoldedErr(false)} aria-label={intl.formatMessage({ id: 'close' })}>
<Typography variant="h5">
<FormattedMessage id="close" />
</Typography></Button>
</DialogActions>
</Dialog>
</div>
</Grid >
</Grid>
</center>
</Grid>
</Grid>
{/*row 2*/}
</Grid >


)
)


);


+ 78
- 237
src/pages/Proof/Payment/Pay_Office.js View File

@@ -4,20 +4,13 @@ import {
Typography,
Stack,
Button,
Dialog, DialogTitle, DialogContent, DialogActions
} 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 * as FormatUtils from "utils/FormatUtils";
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'
import { FormattedMessage, useIntl } from "react-intl";
const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`,
width: '100%',
@@ -28,250 +21,98 @@ const BackgroundHead = {
backgroundPosition: 'right'
}

import {
// useEffect,
useState
} from "react";
import { PNSPS_BUTTON_THEME, PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst";
import { ThemeProvider } from "@emotion/react";
import { FormattedMessage, useIntl } from "react-intl";
// ==============================|| DASHBOARD - DEFAULT ||============================== //

const Index = () => {
const params = useParams();
const Index = ({ record }) => {
const navigate = useNavigate()
const [fee, setFee] = useState(0);

const [record, setRecord] = React.useState({});
const [onReady, setOnReady] = React.useState(false);
const [isPopUp, setIsPopUp] = useState(false);
const [paymentHoldedErrText, setPaymentHoldedErrText] = React.useState("");
const [paymentHoldedErr, setPaymentHoldedErr] = React.useState(false);

const intl = useIntl();

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);
setFee(responseData.data.fee);
},
onError: () => {

}
});
}
}

function doPayment() {
setIsPopUp(false);
let appIdList = [record?.appId]
handlePaymentCheck(appIdList)
}

const handlePaymentCheck = (appIdList) => {
HttpUtils.post({
url: UrlUtils.PAYMENT_CHECK,
params: {
appIds: appIdList
},
onSuccess: (responseData) => {
const latestData = {};

responseData.forEach(item => {
const { appId, timeDiff } = item;
if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {
latestData[appId] = item;
}
});
const latestDataObjects = Object.values(latestData);
const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 || item.status !== "APPR");
const filteredAppIds = filteredData.map(item => item.appId);
const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));
const combinedAppIdsArray = [...appIdsNotInData, ...filteredAppIds];
const readyToPayment = appIdList.every(appId => combinedAppIdsArray.includes(appId));
if (readyToPayment){
navigate('/paymentPage', { state: { amount: fee, appIdList: appIdList } });
}else{
const appIdsInData = appIdList.filter(appId => !combinedAppIdsArray.some(item => item === appId));
const HoldingApplication = latestDataObjects.filter(item => appIdsInData.includes(item.appId));
const resultString = HoldingApplication.map(item => item.appNo).join(' , ');
setPaymentHoldedErrText(resultString);
// setPaymentHoldedErrText(intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: record.appNo }));
setPaymentHoldedErr(true);
}
}
});
};

return (
!onReady ?
<Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
<Grid item>
<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={{ display: { xs: 'none', sm: 'none', md: 'block' }, pt: 2 }} >
<FormattedMessage id="proofRecord" />
</Typography>
</Stack>
</div>
</Grid>
</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={{ display: { xs: 'none', sm: 'none', md: 'block' }, pt: 2 }}>
<FormattedMessage id="proofRecord" />
{/*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" }}>
<FormattedMessage id="proofPaymentHeader_office" />
</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="h3" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
<FormattedMessage id="publicNoticePaymentProofDoneAndPaid" />
</Typography>

<Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
<div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.payMsg1' }, { appNo: record.appNo }) }} />
<br />
<FormattedMessage id="MSG.payMsg2_1" />
<span style={{ color: "red" }}>
{DateUtils.datetimeStr(record?.proofPaymentDeadline)}
</span>
<FormattedMessage id="MSG.payMsg2_2" />
<br />
<br />
<div dangerouslySetInnerHTML={{
__html: intl.formatMessage({ id: 'MSG.payMsg3' },
{
issueYear: record?.issueYear,
issueVolume: record?.issueVolume,
issueNo: record?.issueNo,
})
}} />
</Typography>

<Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
<FormattedMessage id="pleaseClickToPay" />：
</Typography>
<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
<div dangerouslySetInnerHTML={{
__html: intl.formatMessage(
{
id: 'proofPaymentBody_office'
},
{
appNo: record?.appNo,
}
)
}} />
<br />
<div dangerouslySetInnerHTML={{
__html: intl.formatMessage(
{
id: 'proofPaymentBody_office2'
},
)
}} />
<br />
<div dangerouslySetInnerHTML={{
__html: intl.formatMessage(
{
id: 'proofPaymentBody_office3'
},
{
paymentDeadline: DateUtils.dateStr(record?.closingDate),
}
)
}} />
<br />
<div dangerouslySetInnerHTML={{
__html: intl.formatMessage(
{
id: 'proofPaymentBody_office4'
}
)
}} />

<Typography variant="h4" sx={{ ml: 8, textAlign: "left" }}>
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
<Button
component="span"
variant="contained"
sx={{ ml: { md: 4, lg: 4 }, mr: 4 }}
onClick={() => { setIsPopUp(true) }}
>
<FormattedMessage id="payInstantly" />
</Button>
</ThemeProvider>

<FormattedMessage id="or" />
</Typography>

<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
component="span"
variant="contained"
sx={{ ml: { sm: 4, md: 4, lg: 4 }, mr: 4, mt: { xs: 2, sm: 2 }, mb: { xs: 2, sm: 2 } }}
onClick={() => {
navigate("/publicNotice");
}}
>
<FormattedMessage id="payLater" />
</Button>
（<FormattedMessage id="backToNoticePage" />）
</ThemeProvider>
</Typography>
</Grid>
</center>
</Grid>
</Grid>
<div>
<Dialog
open={isPopUp}
onClose={() => setIsPopUp(false)}
PaperProps={{
sx: {
minWidth: '40vw',
maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' },
maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' }
}
}}
>
<DialogTitle>
<Typography variant="h3" >
<FormattedMessage id="payConfirm" />
<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");
}}
>
<FormattedMessage id="backToNoticePage" />
</Button>
</Typography>
</DialogTitle>
<DialogContent style={{ display: 'flex', }}>
<Stack direction="column" justifyContent="space-between">
<Typography variant="h4">
<FormattedMessage id="totalAmount" /> (HK$): {FormatUtils.currencyFormat(fee)}
</Typography>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setIsPopUp(false)}>
<Typography variant="h5">
<FormattedMessage id="close" />
</Typography></Button>
<Button onClick={() => doPayment()}><Typography variant="h5">
<FormattedMessage id="confirm" />
</Typography></Button>
</DialogActions>
</Dialog>
</div>
{/*row 2*/}
<div>
<Dialog
open={paymentHoldedErr}
onClose={() => setPaymentHoldedErr(false)}
PaperProps={{
sx: {
minWidth: '40vw',
maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
}
}}
>
<DialogTitle></DialogTitle>
<Typography variant="h4" style={{ paddingLeft: '24px' }}><FormattedMessage id="MSG.actionFail" /></Typography>
<DialogContent style={{ display: 'flex', }}>
<Stack direction="column" justifyContent="space-between">
<div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: paymentHoldedErrText }) }} />
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setPaymentHoldedErr(false)} aria-label={intl.formatMessage({ id: 'close' })}>
<Typography variant="h5">
<FormattedMessage id="close" />
</Typography></Button>
</DialogActions>
</Dialog>
</div>
</Grid >
</Grid>
</center>
</Grid>
</Grid>
{/*row 2*/}
</Grid >


)
)


);


+ 42
- 28
src/pages/Proof/Payment/Pay_Online.js View File

@@ -93,23 +93,23 @@ const Index = () => {
const latestData = {};

responseData.forEach(item => {
const { appId, timeDiff } = item;
if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {
latestData[appId] = item;
}
const { appId, timeDiff } = item;
if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {
latestData[appId] = item;
}
});
const latestDataObjects = Object.values(latestData);
const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 || item.status !== "APPR");
const filteredAppIds = filteredData.map(item => item.appId);
const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));
const combinedAppIdsArray = [...appIdsNotInData, ...filteredAppIds];
const readyToPayment = appIdList.every(appId => combinedAppIdsArray.includes(appId));
if (readyToPayment){
if (readyToPayment) {
navigate('/paymentPage', { state: { amount: fee, appIdList: appIdList } });
}else{
} else {
const appIdsInData = appIdList.filter(appId => !combinedAppIdsArray.some(item => item === appId));
const HoldingApplication = latestDataObjects.filter(item => appIdsInData.includes(item.appId));
const resultString = HoldingApplication.map(item => item.appNo).join(' , ');
@@ -146,31 +146,32 @@ const Index = () => {
<center>
<Grid item xs={12} md={8} >
<Typography variant="h3" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
<FormattedMessage id="publicNoticePaymentProofDoneAndPaid" />
<FormattedMessage id="proofPaymentHeader_online" />
</Typography>

<Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
<div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.payMsg1' }, { appNo: record.appNo }) }} />
<br />
<FormattedMessage id="MSG.payMsg2_1" />
<span style={{ color: "red" }}>
{DateUtils.datetimeStr(record?.proofPaymentDeadline)}
</span>
<FormattedMessage id="MSG.payMsg2_2" />
<br />
<div dangerouslySetInnerHTML={{
__html: intl.formatMessage(
{
id: 'proofPaymentBody_online'
},
{
appNo: record?.appNo,
}
)
}} />
<br />
<div dangerouslySetInnerHTML={{
__html: intl.formatMessage({ id: 'MSG.payMsg3' },
__html: intl.formatMessage(
{
id: 'proofPaymentBody_online2'
},
{
issueYear: record?.issueYear,
issueVolume: record?.issueVolume,
issueNo: record?.issueNo,
})
paymentDeadline: DateUtils.dateStr(record?.closingDate),
}
)
}} />
</Typography>

<Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
<FormattedMessage id="pleaseClickToPay" />：
<br />
</Typography>

<Typography variant="h4" sx={{ ml: 8, textAlign: "left" }}>
@@ -178,7 +179,7 @@ const Index = () => {
<Button
component="span"
variant="contained"
sx={{ ml: { md: 4, lg: 4 }, mr: 4 }}
sx={{mr: 4 }}
onClick={() => { setIsPopUp(true) }}
>
<FormattedMessage id="payInstantly" />
@@ -201,6 +202,19 @@ const Index = () => {
（<FormattedMessage id="backToNoticePage" />）
</ThemeProvider>
</Typography>

<Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
<div dangerouslySetInnerHTML={{
__html: intl.formatMessage(
{
id: 'proofPaymentBody_online3'
}
)
}} />
<br />
</Typography>


</Grid>
</center>
</Grid>


+ 35
- 16
src/pages/Proof/Payment/index.js View File

@@ -1,25 +1,35 @@
import { Grid, } from '@mui/material';
import { useState, useEffect, lazy } from "react";
import { useNavigate } from "react-router-dom";

import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import Loadable from 'components/Loadable';
import { useParams } from "react-router-dom";
//const Pay = Loadable(lazy(() => import('./Pay')));
const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
const Pay_Creditor = Loadable(lazy(() => import('./Pay_Creditor')));
const Pay_Dn = Loadable(lazy(() => import('./Pay_DN')));
const Pay_Office = Loadable(lazy(() => import('./Pay_Office')));
const Pay_Online = Loadable(lazy(() => import('./Pay_Online')));



const Index = () => {
const params = useParams();
const [onReady, setOnReady] = useState(false);
const [record, setRecord] = useState({});
const navigate = useNavigate()

const [record, setRecord] = useState();
useEffect(() => {
setOnReady(true);
}, [record]);

useEffect(() => {
if (params.id > 0) {
HttpUtils.get({
url: UrlUtils.GET_PROOF_PAY + "/" + params.id,
onSuccess: (responseData) => {
if (!responseData.data?.id) {
if (!responseData?.data?.id) {
navigate("/proof/search");
}
setRecord(responseData.data);
@@ -33,24 +43,33 @@ const Index = () => {


return (
record.creditor ?
<Pay_Creditor
record={record}
/>
: (
record.paymentMethod == "demandNote" ?
<Pay_Dn
!onReady ?
<Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
<Grid item>
<LoadingComponent />
</Grid>
</Grid>
:
(
record.creditor ?
<Pay_Creditor
record={record}
/>
: (
record.paymentMethod == "online" ?
<Pay_Online
record={record}
/>
:
<Pay_Office
record.paymentMethod == "demandNote" ?
<Pay_Dn
record={record}
/>
: (
record.paymentMethod == "online" ?
<Pay_Online
record={record}
/>
:
<Pay_Office
record={record}
/>
)
)
)
);


+ 19
- 0
src/translations/en.json View File

@@ -105,6 +105,25 @@
"publicNoticePaymentProofDoneAndPaid": "Public Notice: Proofreading Completed and Payment",
"publicNoticePaymentProofComment": "Public Notice: Proofreading Reply",
"publicNoticePaymentProofInfo": "Public Notice: Proofreading Information",

"proofPaymentHeader_demandNote": "Public Notice: Proofreading Completed and Payment Means Selected",
"proofPaymentBody_demandNote": "We have received the manuscript proofreading confirmation and printing instructions for application number: {appNo}<br/><br/>You have selected to make payment by General Demand Note.",
"proofPaymentBody_demandNote2": "The General Demand Note will be sent to the following email address within one working day, but not later than {beforeClosingDate} 9:00 p.m. : <br/>{email}",
"proofPaymentBody_demandNote3": "Please make payment and return the payment proof (e.g. ATM receipt, internet banking record) to [email protected] by {paymentDeadline}.",
"proofPaymentBody_demandNote4": "We will process the publication after receiving payment confirmation.",

"proofPaymentHeader_office": "Public Notice: Proofreading Completed and Payment Means Selected",
"proofPaymentBody_office": "We have received the manuscript proofreading confirmation and printing instructions for application number: {appNo}",
"proofPaymentBody_office2": "You have selected to make payment at North Point Government Offices Collection Office:<center><br/>Collection Office at Accounts Section<br/>10/F North Point Government Offices<br/>333 Java Road North Point</center>",
"proofPaymentBody_office3": "Please print out this page or present your application details on screen at our Collection Office, and complete the payment by {paymentDeadline}.",
"proofPaymentBody_office4": "We will process the publication after receiving payment confirmation.",

"proofPaymentHeader_online": "Public Notice: Proofreading Completed and Payment Means Selected",
"proofPaymentBody_online": "We have received the manuscript proofreading confirmation and printing instructions for application number: {appNo}",
"proofPaymentBody_online2": "Please select either to complete the payment now or make payment by {paymentDeadline}.",
"proofPaymentBody_online3": "We will process the publication after receiving payment confirmation.",


"proofRecord": "Proof Records",
"onlinePaymentHistory": "Online Payment History",
"setting": "Settings",


+ 18
- 0
src/translations/zh-CN.json View File

@@ -126,6 +126,24 @@
"publicNoticePaymentProofDoneAndPaid": "公共启事：校对完成及付款",
"publicNoticePaymentProofComment": "公共启事：校对回复",
"publicNoticePaymentProofInfo": "公共启事：校对资料",

"proofPaymentHeader_demandNote": "Public Notice: Proofreading Completed and Payment Means Selected",
"proofPaymentBody_demandNote": "We have received the manuscript proofreading confirmation and printing instructions for application number: {appNo}<br/><br/>You have selected to make payment by General Demand Note.",
"proofPaymentBody_demandNote2": "The General Demand Note will be sent to the following email address within one working day, but not later than {beforeClosingDate} 9:00 p.m. : <br/>{email}",
"proofPaymentBody_demandNote3": "Please make payment and return the payment proof (e.g. ATM receipt, internet banking record) to [email protected] by {paymentDeadline}.",
"proofPaymentBody_demandNote4": "We will process the publication after receiving payment confirmation.",

"proofPaymentHeader_office": "Public Notice: Proofreading Completed and Payment Means Selected",
"proofPaymentBody_office": "We have received the manuscript proofreading confirmation and printing instructions for application number: {appNo}",
"proofPaymentBody_office2": "You have selected to make payment at North Point Government Offices Collection Office:<center><br/>Collection Office at Accounts Section<br/>10/F North Point Government Offices<br/>333 Java Road North Point</center>",
"proofPaymentBody_office3": "Please print out this page or present your application details on screen at our Collection Office, and complete the payment by {paymentDeadline}.",
"proofPaymentBody_office4": "We will process the publication after receiving payment confirmation.",

"proofPaymentHeader_online": "Public Notice: Proofreading Completed and Payment Means Selected",
"proofPaymentBody_online": "We have received the manuscript proofreading confirmation and printing instructions for application number: {appNo}",
"proofPaymentBody_online2": "Please select either to complete the payment now or make payment by {paymentDeadline}.",
"proofPaymentBody_online3": "We will process the publication after receiving payment confirmation.",

"proofRecord": "校对记录",
"onlinePaymentHistory": "网上付款记录",
"setting": "设置",


+ 20
- 0
src/translations/zh-HK.json View File

@@ -126,6 +126,26 @@
"publicNoticePaymentProofDoneAndPaid": "公共啟事：校對完成及付款",
"publicNoticePaymentProofComment": "公共啟事：校對回覆",
"publicNoticePaymentProofInfo": "公共啟事：校對資料",

"proofPaymentHeader_demandNote": "Public Notice: Proofreading Completed and Payment Means Selected",
"proofPaymentBody_demandNote": "We have received the manuscript proofreading confirmation and printing instructions for application number: {appNo}<br/><br/>You have selected to make payment by General Demand Note.",
"proofPaymentBody_demandNote2": "The General Demand Note will be sent to the following email address within one working day, but not later than {beforeClosingDate} 9:00 p.m. : <br/>{email}",
"proofPaymentBody_demandNote3": "Please make payment and return the payment proof (e.g. ATM receipt, internet banking record) to [email protected] by {paymentDeadline}.",
"proofPaymentBody_demandNote4": "We will process the publication after receiving payment confirmation.",

"proofPaymentHeader_office": "Public Notice: Proofreading Completed and Payment Means Selected",
"proofPaymentBody_office": "We have received the manuscript proofreading confirmation and printing instructions for application number: {appNo}",
"proofPaymentBody_office2": "You have selected to make payment at North Point Government Offices Collection Office:<center><br/>Collection Office at Accounts Section<br/>10/F North Point Government Offices<br/>333 Java Road North Point</center>",
"proofPaymentBody_office3": "Please print out this page or present your application details on screen at our Collection Office, and complete the payment by {paymentDeadline}.",
"proofPaymentBody_office4": "We will process the publication after receiving payment confirmation.",

"proofPaymentHeader_online": "Public Notice: Proofreading Completed and Payment Means Selected",
"proofPaymentBody_online": "We have received the manuscript proofreading confirmation and printing instructions for application number: {appNo}",
"proofPaymentBody_online2": "Please select either to complete the payment now or make payment by {paymentDeadline}.",
"proofPaymentBody_online3": "We will process the publication after receiving payment confirmation.",



"proofRecord": "校對記錄",
"onlinePaymentHistory": "網上付款記錄",
"setting": "設定",


Write Preview
Loading…
Cancel
Save