From 406453589c309dda73f765a801ddbe64957c2724 Mon Sep 17 00:00:00 2001 From: anna Date: Wed, 8 May 2024 18:13:04 +0800 Subject: [PATCH] proof pay --- src/pages/Proof/Payment/Pay_DN.js | 319 +++++++------------------- src/pages/Proof/Payment/Pay_Office.js | 315 +++++++------------------ src/pages/Proof/Payment/Pay_Online.js | 70 +++--- src/pages/Proof/Payment/index.js | 51 ++-- src/translations/en.json | 19 ++ src/translations/zh-CN.json | 18 ++ src/translations/zh-HK.json | 20 ++ 7 files changed, 294 insertions(+), 518 deletions(-) diff --git a/src/pages/Proof/Payment/Pay_DN.js b/src/pages/Proof/Payment/Pay_DN.js index a01864d..f69f621 100644 --- a/src/pages/Proof/Payment/Pay_DN.js +++ b/src/pages/Proof/Payment/Pay_DN.js @@ -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 ? - - - + ( + + +
+ + + + + +
- - : - ( - - -
- - - + {/*row 1*/} + + +
+ + + - -
- - {/*row 1*/} - - -
- - - - - -
-
- - - {DateUtils.datetimeStr(record?.proofPaymentDeadline)} - - -
-
-
- - - ： - + +
+
+
+
+
+
+
- - - - - + - - - （） - - - -
- - -
- setIsPopUp(false)} - PaperProps={{ - sx: { - minWidth: '40vw', - maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' }, - maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' } - } - }} - > - - - + + - - - - - (HK$): {FormatUtils.currencyFormat(fee)} - - - - - - - - -
- {/*row 2*/} -
- setPaymentHoldedErr(false)} - PaperProps={{ - sx: { - minWidth: '40vw', - maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' }, - maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' } - } - }} - > - - - - -
- - - - - -
-
- + + + + + {/*row 2*/} + - ) + ) ); diff --git a/src/pages/Proof/Payment/Pay_Office.js b/src/pages/Proof/Payment/Pay_Office.js index a01864d..d1fd51d 100644 --- a/src/pages/Proof/Payment/Pay_Office.js +++ b/src/pages/Proof/Payment/Pay_Office.js @@ -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 ? - - - + ( + + +
+ + + + + +
- - : - ( - - -
- - - + {/*row 1*/} + + +
+ + + - -
- - {/*row 1*/} - - -
- - - - - -
-
- - - {DateUtils.datetimeStr(record?.proofPaymentDeadline)} - - -
-
-
- - - ： - + +
+
+
+
+
+
+
- - - - - + - - - （） - - - -
- - -
- setIsPopUp(false)} - PaperProps={{ - sx: { - minWidth: '40vw', - maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' }, - maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' } - } - }} - > - - - + + - - - - - (HK$): {FormatUtils.currencyFormat(fee)} - - - - - - - - -
- {/*row 2*/} -
- setPaymentHoldedErr(false)} - PaperProps={{ - sx: { - minWidth: '40vw', - maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' }, - maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' } - } - }} - > - - - - -
- - - - - -
-
- + + + + + {/*row 2*/} + - ) + ) ); diff --git a/src/pages/Proof/Payment/Pay_Online.js b/src/pages/Proof/Payment/Pay_Online.js index a01864d..8d1e2cd 100644 --- a/src/pages/Proof/Payment/Pay_Online.js +++ b/src/pages/Proof/Payment/Pay_Online.js @@ -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 = () => {
- + -
-
- - - {DateUtils.datetimeStr(record?.proofPaymentDeadline)} - - -
+

- - - - ： +
@@ -178,7 +179,7 @@ const Index = () => {
diff --git a/src/pages/Proof/Payment/index.js b/src/pages/Proof/Payment/index.js index 93107b4..57834d8 100644 --- a/src/pages/Proof/Payment/index.js +++ b/src/pages/Proof/Payment/index.js @@ -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 ? - - : ( - record.paymentMethod == "demandNote" ? - + + + + + : + ( + record.creditor ? + : ( - record.paymentMethod == "online" ? - - : - + : ( + record.paymentMethod == "online" ? + + : + + ) ) ) ); diff --git a/src/translations/en.json b/src/translations/en.json index 0b7bf19..bac01b1 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -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}

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. :
{email}", + "proofPaymentBody_demandNote3": "Please make payment and return the payment proof (e.g. ATM receipt, internet banking record) to gld_acct@gld.gov.hk 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:

Collection Office at Accounts Section
10/F North Point Government Offices
333 Java Road North Point
", + "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", diff --git a/src/translations/zh-CN.json b/src/translations/zh-CN.json index 40a98c2..2f251fc 100644 --- a/src/translations/zh-CN.json +++ b/src/translations/zh-CN.json @@ -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}

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. :
{email}", + "proofPaymentBody_demandNote3": "Please make payment and return the payment proof (e.g. ATM receipt, internet banking record) to gld_acct@gld.gov.hk 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:

Collection Office at Accounts Section
10/F North Point Government Offices
333 Java Road North Point
", + "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": "设置", diff --git a/src/translations/zh-HK.json b/src/translations/zh-HK.json index 437492f..5e51f13 100644 --- a/src/translations/zh-HK.json +++ b/src/translations/zh-HK.json @@ -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}

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. :
{email}", + "proofPaymentBody_demandNote3": "Please make payment and return the payment proof (e.g. ATM receipt, internet banking record) to gld_acct@gld.gov.hk 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:

Collection Office at Accounts Section
10/F North Point Government Offices
333 Java Road North Point
", + "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": "設定",