add paymentMethod to reply proof

src/pages/Proof/Reply_Public/ApplicationDetails.js

@@ -10,20 +10,20 @@ import {
 
 import { useFormik } from 'formik';
 import * as React from "react";
-import * as DateUtils from "utils/DateUtils"
+//import * as DateUtils from "utils/DateUtils"
 import * as FormatUtils from "utils/FormatUtils"
 import { useParams } from "react-router-dom";
 import Loadable from 'components/Loadable';
 const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import FileList from "components/FileList"
-import {FormattedMessage, useIntl} from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = ({ formData, }) => {
 
     const params = useParams();
     const intl = useIntl();
-    const { locale } = intl;
+    //const { locale } = intl;
 
     const [data, setData] = React.useState({});
     //const [proofId, setProofId] = React.useState();
@@ -68,7 +68,7 @@ const ApplicationDetailCard = ({ formData, }) => {
             content={false}
         >
             <Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
-                <FormattedMessage id="publicNoticePaymentProofInfo"/>
+                <FormattedMessage id="publicNoticePaymentProofInfo" />
             </Typography>
             <form>
                 <Grid container direction="column">
@@ -80,7 +80,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel><Typography variant="pnspsFormParagraph">
-                                            <FormattedMessage id="applicationId"/>:
+                                            <FormattedMessage id="applicationId" />:
                                         </Typography></FormLabel>
                                     </Grid>
 
@@ -89,12 +89,12 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1}}>
+                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"left"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel><Typography variant="pnspsFormParagraph">
-                                            <FormattedMessage id="applyStatus"/>:
+                                            <FormattedMessage id="applyStatus" />:
                                         </Typography></FormLabel>
                                     </Grid>
 
@@ -113,7 +113,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel><Typography variant="pnspsFormParagraph">
-                                            <FormattedMessage id="applyPerson"/>:
+                                            <FormattedMessage id="applyPerson" />:
                                         </Typography></FormLabel>
                                     </Grid>
 
@@ -128,12 +128,12 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: {xs:0, sm:0, md:1, lg:1} }}>
+                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: { xs: 0, sm: 0, md: 1, lg: 1 } }}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel><Typography variant="pnspsFormParagraph">
-                                            <FormattedMessage id="gazetteCount"/>:
+                                            <FormattedMessage id="gazetteCount" />:
                                         </Typography></FormLabel>
                                     </Grid>
 
@@ -150,7 +150,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel><Typography variant="pnspsFormParagraph">
-                                            <FormattedMessage id="contactPerson"/>:
+                                            <FormattedMessage id="contactPerson" />:
                                         </Typography></FormLabel>
                                     </Grid>
 
@@ -160,7 +160,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: {xs:0, sm:0, md:1, lg:1} }}>
+                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: { xs: 0, sm: 0, md: 1, lg: 1 } }}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
@@ -182,7 +182,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel><Typography variant="pnspsFormParagraph">
-                                            <FormattedMessage id="myRemarks"/>:
+                                            <FormattedMessage id="myRemarks" />:
                                         </Typography></FormLabel>
                                     </Grid>
 
@@ -196,20 +196,20 @@ const ApplicationDetailCard = ({ formData, }) => {
                         </Grid>
 
                         <Grid container
-                              direction="row"
-                              justifyContent="space-between"
-                              alignItems="center"
-                              width="auto"
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            width="auto"
                         >
 
-                            <Grid item xs={12} sm={12} md={6} lg={6} sx={{mb: 1}}>
+                            <Grid item xs={12} sm={12} md={6} lg={6} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} sm={12} md={12} lg={12} sx={{ alignItems: 'center',wordBreak: 'break-word' }}>
+                                    <Grid item xs={12} sm={12} md={12} lg={12} sx={{ alignItems: 'center', wordBreak: 'break-word' }}>
                                         <Typography><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="pleaseCheckReminder" />：
                                         </Typography></Typography>
                                     </Grid>
-                                    <Grid item xs={12} sm={12} md={12} lg={12} sx={{ width:'95%', maxWidth: {xs:'70vw', sm:'72vw', md:'75vw',lg:'80vw'}}}>
+                                    <Grid item xs={12} sm={12} md={12} lg={12} sx={{ width: '95%', maxWidth: { xs: '70vw', sm: '72vw', md: '75vw', lg: '80vw' } }}>
                                         <FileList
                                             lang="ch"
                                             refId={params.id}
@@ -228,25 +228,23 @@ const ApplicationDetailCard = ({ formData, }) => {
 
                             <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={12} lg={12}
+                                    {/* <Grid item xs={12} md={12} lg={12}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5" display="inline">
-                                            {/* <Typography variant="h5" style={{color:'red'}} display="inline">
-                                                <FormattedMessage id="payAnd" />
-                                            </Typography> */}
+                                    
                                             <FormattedMessage id="commentDeadline" />：
                                         </Typography>
                                     </Grid>
                                     <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5">&emsp;
                                             {locale === 'en' ?
-                                            `${intl.formatMessage({id: 'before'})} ${DateUtils.datetimeStr(data.reviseDeadline)} `
-                                            :
-                                            `${DateUtils.datetimeStr_Cht(data.reviseDeadline)} ${intl.formatMessage({id: 'before'})}`
-                                        }
+                                                `${intl.formatMessage({ id: 'before' })} ${DateUtils.datetimeStr(data.reviseDeadline)} `
+                                                :
+                                                `${DateUtils.datetimeStr_Cht(data.reviseDeadline)} ${intl.formatMessage({ id: 'before' })}`
+                                            }
                                         </Typography>
-                                    </Grid>
-
+                                    </Grid> */}
+{/* 
                                     <Grid item xs={12} md={12} lg={12}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5" display="inline">
@@ -256,17 +254,17 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5">&emsp;
                                             {locale === 'en' ?
-                                            `${intl.formatMessage({id: 'before'})} ${DateUtils.datetimeStr(data.proofPaymentDeadline)} `
-                                            :
-                                            `${DateUtils.datetimeStr_Cht(data.proofPaymentDeadline)} ${intl.formatMessage({id: 'before'})}`
-                                        }
+                                                `${intl.formatMessage({ id: 'before' })} ${DateUtils.datetimeStr(data.proofPaymentDeadline)} `
+                                                :
+                                                `${DateUtils.datetimeStr_Cht(data.proofPaymentDeadline)} ${intl.formatMessage({ id: 'before' })}`
+                                            }
                                         </Typography>
-                                    </Grid>
+                                    </Grid> */}
 
                                     <Grid item xs={12} sm={3} md={3} lg={3}
                                         sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="pnspsFormParagraph">
-                                            <FormattedMessage id="payFeeFor"/>:
+                                            <FormattedMessage id="payFeeFor" />:
                                         </Typography>
                                     </Grid>
                                     <Grid item xs={12} sm={9} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
@@ -276,17 +274,16 @@ const ApplicationDetailCard = ({ formData, }) => {
                                         {
                                             formik.values.groupType === "Private Bill"
                                                 ?
-                                                <Typography variant="pnspsFormParagraph">( {data.noOfPages} {intl.formatMessage({id: 'page'})} x $6,552 )</Typography>
+                                                <Typography variant="pnspsFormParagraph">( {data.noOfPages} {intl.formatMessage({ id: 'page' })} x $6,552 )</Typography>
                                                 :
                                                 <Typography variant="pnspsFormParagraph">( {data.length} cm x {data.colCount === 2 ?
-                                                     "$364 "+intl.formatMessage({id: 'doubleCol'}) :
-                                                     "$182 "+intl.formatMessage({id: 'singleCol'})} )</Typography>
+                                                    "$364 " + intl.formatMessage({ id: 'doubleCol' }) :
+                                                    "$182 " + intl.formatMessage({ id: 'singleCol' })} )</Typography>
                                         }
                                     </Grid>
                                 </Grid>
                             </Grid>
                         </Grid>
-
                     </Grid>
                 </Grid>
             </form>

src/pages/Proof/Reply_Public/ProofForm.js

@@ -7,6 +7,7 @@ import {
     TextField,
     FormLabel,
     Button,
+    Checkbox,
     RadioGroup, Radio,
     FormControlLabel
 } from '@mui/material';
@@ -25,6 +26,7 @@ import { notifyActionSuccess } from 'utils/CommonFunction';
 import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
 import { ThemeProvider } from "@emotion/react";
 import { FormattedMessage, useIntl } from "react-intl";
+
 const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable')));
 //import * as ProofStatus from "utils/statusUtils/ProofStatus";
 
@@ -35,6 +37,7 @@ const FormPanel = ({ formData }) => {
     const intl = useIntl();
     const { locale } = intl;
     const [data, setData] = React.useState({});
+    const [paymentMethod, set_paymentMethod] = React.useState("");
     const [attachments, setAttachments] = React.useState([]);
 
     const [actionValue, setActionValue] = React.useState(true);
@@ -45,6 +48,13 @@ const FormPanel = ({ formData }) => {
     const navigate = useNavigate()
     const params = useParams();
 
+    const tabelStyle = {
+        border: "2px solid gray",
+        borderCollapse: "collapse",
+        padding: "right"
+    }
+
+
     React.useEffect(() => {
         if (formData) {
             setData(formData);
@@ -84,6 +94,7 @@ const FormPanel = ({ formData }) => {
                     id: data.id,
                     action: actionValue,
                     vaild: values.vaild,
+                    paymentMethod: paymentMethod
                 },
                 files: attachments ? attachments : [],
                 onSuccess: function (responseData) {
@@ -145,7 +156,27 @@ const FormPanel = ({ formData }) => {
     }
 
     const isOverReviseDeadline = () => {
+        if (paymentMethod == "dn") return isOverDnReviseDeadline();
+        if (paymentMethod == "npgo") return isOverNpgoReviseDeadline();
+        //online payment
         let reviseDeadline = DateUtils.convertToDate(formik.values?.reviseDeadline);
+        reviseDeadline?.setTime(reviseDeadline?.getTime() + (14 * 60 * 60 * 1000));// 14:00
+        if (!reviseDeadline) return true;
+        let current = new Date();
+        return current.getTime() > reviseDeadline;
+    }
+
+    const isOverDnReviseDeadline = () => {
+        let reviseDeadline = DateUtils.convertToDate(formData.beforeClosingDate);
+        reviseDeadline?.setTime(reviseDeadline?.getTime() + (17 * 60 * 60 * 1000));// 17:00
+        if (!reviseDeadline) return true;
+        let current = new Date();
+        return current.getTime() > reviseDeadline;
+    }
+
+    const isOverNpgoReviseDeadline = () => {
+        let reviseDeadline = DateUtils.convertToDate(formik.values?.reviseDeadline);
+        reviseDeadline?.setTime(reviseDeadline?.getTime() + (12 * 60 * 60 * 1000));// 12:00
         if (!reviseDeadline) return true;
         let current = new Date();
         return current.getTime() > reviseDeadline;
@@ -153,6 +184,7 @@ const FormPanel = ({ formData }) => {
 
 
 
+
     return (
         <MainCard xs={12} sm={12} md={12} lg={12}
             border={false}
@@ -252,11 +284,104 @@ const FormPanel = ({ formData }) => {
 
                                     {
                                         actionValue ?
-                                            null
+                                            <Grid item xs={12} sx={{ mb: 1, }}>
+                                                <table style={tabelStyle}>
+                                                    <tr style={tabelStyle}>
+                                                        <th style={tabelStyle} width="50" align="left"></th>
+                                                        <th style={tabelStyle} width="400" align="left"><FormattedMessage id="paymentMeans" /></th>
+                                                        <th style={tabelStyle} width="400" align="left"><FormattedMessage id="paymentMethodMeans" /></th>
+                                                        <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
+                                                        <th style={tabelStyle} width="300" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
+                                                    </tr>
+                                                    <tr>
+                                                        <td style={tabelStyle}>
+                                                            <Checkbox
+                                                                checked={paymentMethod == "online"}
+                                                                onChange={() => {
+                                                                    set_paymentMethod("online")
+                                                                }}
+                                                            />
+                                                        </td>
+                                                        <td style={tabelStyle}><FormattedMessage id="payOnline" /></td>
+                                                        <td style={tabelStyle}>
+                                                            <ul>
+                                                                <li><FormattedMessage id="fps" /></li>
+                                                                <li><FormattedMessage id="card" /></li>
+                                                                <li><FormattedMessage id="pps" /></li>
+                                                            </ul>
+                                                        </td>
+                                                        <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, "YYYY年MM月DD日")} 2:00 p.m.</td>
+                                                        <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, "YYYY年MM月DD日")} 2:30 p.m.</td>
+                                                    </tr>
+                                                    {
+                                                        isOverDnReviseDeadline() ?
+                                                            <></> :
+                                                            <tr>
+                                                                <td style={tabelStyle}>
+                                                                    <Checkbox
+                                                                        checked={paymentMethod == "dn"}
+                                                                        onChange={() => {
+                                                                            set_paymentMethod("dn")
+                                                                        }}
+                                                                    />
+                                                                </td>
+                                                                <td style={tabelStyle}><FormattedMessage id="payDn" /></td>
+                                                                <td style={tabelStyle}>
+                                                                    <ul>
+                                                                        <li><FormattedMessage id="atm" /></li>
+                                                                        <li><FormattedMessage id="pps" /></li>
+                                                                        <li><FormattedMessage id="eBank" /></li>
+                                                                        <li><FormattedMessage id="phoneBank" /></li>
+                                                                        <li><FormattedMessage id="eCheque" /></li>
+                                                                        <li><FormattedMessage id="fps" /></li>
+                                                                        <li><FormattedMessage id="hkpo" /></li>
+                                                                        <li><FormattedMessage id="store" /></li>
+                                                                        <li><FormattedMessage id="post" /></li>
+                                                                    </ul>
+                                                                </td>
+                                                                <td style={tabelStyle}>{DateUtils.dateFormat(formData.beforeClosingDate, "YYYY年MM月DD日")} 5:00 p.m.</td>
+                                                                <td style={tabelStyle}>
+                                                                    <FormattedMessage id="payDnRemark" values={{
+                                                                        date: DateUtils.dateFormat(formData.closingDate, "YYYY年MM月DD日") + " 12:30 p.m."
+                                                                    }} />
+                                                                </td>
+                                                            </tr>
+                                                    }
+                                                    {
+                                                        isOverNpgoReviseDeadline() ?
+                                                            <></> :
+                                                            <tr>
+                                                                <td style={tabelStyle}>
+                                                                    <Checkbox
+                                                                        checked={paymentMethod == "npgo"}
+                                                                        onChange={() => {
+                                                                            set_paymentMethod("npgo")
+                                                                        }}
+                                                                    />
+                                                                </td>
+                                                                <td style={tabelStyle}><FormattedMessage id="payNPGO" /></td>
+                                                                <td style={tabelStyle}>
+                                                                    <ul>
+                                                                        <li><FormattedMessage id="cheque" /></li>
+                                                                        <li><FormattedMessage id="cash" /></li>
+                                                                    </ul>
+                                                                </td>
+                                                                <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, "YYYY年MM月DD日")} 12:00 p.m.</td>
+                                                                <td style={tabelStyle}>
+                                                                    <FormattedMessage id="payNPGORemark" values={{
+                                                                        date: DateUtils.dateFormat(formData.closingDate, "YYYY年MM月DD日") + " 12:30 p.m."
+                                                                    }} />
+                                                                </td>
+                                                            </tr>
+                                                    }
+
+                                                </table>
+                                            </Grid>
+
                                             :
                                             isOverReviseDeadline() ?
                                                 <Grid item xs={12} md={12} textAlign="left">
-                                                    <Typography variant="h5" style={{color:"red"}}>
+                                                    <Typography variant="h5" style={{ color: "red" }}>
                                                         <FormattedMessage id="MSG.overReviseDeadline" />
                                                     </Typography>
                                                 </Grid>
@@ -332,7 +457,6 @@ const FormPanel = ({ formData }) => {
                                         </Stack>
                                     </Grid>
 
-
                                     <Grid item xs={12} md={12} textAlign="left">
                                         <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -58,6 +58,12 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
         backgroundPosition: 'right'
     }
 
+    const tabelStyle = {
+        border: "2px solid gray", 
+        borderCollapse: "collapse", 
+        padding: "right"
+    }
+
     function getMaxErrStr(num, fieldname) {
         return intl.formatMessage({ id: 'noMoreThenNWords' }, { num: num, fieldname: fieldname ? intl.formatMessage({ id: fieldname }) + ": " : "" });
     }
@@ -276,26 +282,26 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
                                     </Grid>
 
                                     <Grid item xs={12} alignItems={"center"} sx={{ p: 2}}>
-                                        <table style={{border: "2px solid gray", padding: "right"}}>
-                                            <tr style={{border: "2px solid gray"}}>
-                                                <th width="300" align="left"><FormattedMessage id="paymentMeans"/></th>
-                                                <th width="250" align="left"><FormattedMessage id="confirmingDealine" /></th>
-                                                <th width="250" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
+                                        <table style={tabelStyle}>
+                                            <tr style={tabelStyle}>
+                                                <th style={tabelStyle} width="400" align="left"><FormattedMessage id="paymentMeans"/></th>
+                                                <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
+                                                <th style={tabelStyle} width="300" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
                                             </tr>
                                             <tr>
-                                                <td><FormattedMessage id="payOnline" /></td>
-                                                <td>{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 2:00 p.m.</td>
-                                                <td>{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 2:30 p.m.</td>
+                                                <td style={tabelStyle}><FormattedMessage id="payOnline" /></td>
+                                                <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 2:00 p.m.</td>
+                                                <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 2:30 p.m.</td>
                                             </tr>
                                             <tr>
-                                                <td><FormattedMessage id="payDn" /></td>
-                                                <td>{DateUtils.dateFormat(beforeClosingDate, "YYYY年MM月DD日")} 5:00 p.m.</td>
-                                                <td>{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 12:30 p.m.</td>
+                                                <td style={tabelStyle}><FormattedMessage id="payDn" /></td>
+                                                <td style={tabelStyle}>{DateUtils.dateFormat(beforeClosingDate, "YYYY年MM月DD日")} 5:00 p.m.</td>
+                                                <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 12:30 p.m.</td>
                                             </tr>
                                             <tr>
-                                                <td><FormattedMessage id="payNPGO" /></td>
-                                                <td>{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 12:00 p.m.</td>
-                                                <td>{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 12:30 p.m.</td>
+                                                <td style={tabelStyle}><FormattedMessage id="payNPGO" /></td>
+                                                <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 12:00 p.m.</td>
+                                                <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 12:30 p.m.</td>
                                             </tr>
                                         </table>
 

src/translations/en.json

@@ -384,10 +384,26 @@
   "paymentDeadline": "Deadline for confirm proof and payment",
   "confirmingDealine": "Deadline for Confirming Proof",
   "PaymentCoonpletDealine": "Deadline for Payment Completeion",
-  "payOnline":"Pay online via this system GPNSPS",
-  "payDn":"Pay by issuance of General Demand Note",
+  "payOnline":"Pay online via this system PNSPS",
+  "payDn":"Pay by issuance of General Demand Note (Note)",
   "payNPGO":"Pay at NPGO Collection Office",
   "paymentMeans":"Payment Means",
+  "paymentMethodMeans":"Payment Methods Available Under the Payment Means",
+  "fps":"Faster Payment System (FPS)",
+  "card":"Credit Card (Visa, Master, UnionPay, JCB)",
+  "pps":"PPS",
+  "atm":"Bank Automated Teller Machine (ATM)",
+  "eBank":"Internet Banking",
+  "phoneBank":"Phone Banking (for selected banks only)",
+  "eCheque":"E-Cheque",
+  "hkpo":"At Post Office",
+  "store":"At Convenience Store",
+  "post":"By Post",
+  "cheque":"Cheque",
+  "cash":"Cash",
+
+  "payDnRemark": "Payment proof (e.g. ATM receipt, internet banking record) to be sent to [email protected] by {date}",
+  "payNPGORemark" :"Payment to be completed at Collection Office by {date}",
 
   "before": "Before",
   "page": "Page",

src/translations/zh-CN.json

@@ -40,6 +40,22 @@
   "payDn":"透过发出一般缴款单付款",
   "payNPGO":"在 NPGO 收款办公室付款",
   "paymentMeans":"付款方式",
+  "paymentMethodMeans":"可用的付款方式",
+  "fps":"转数快 (FPS)",
+  "card":"信用卡 (Visa, Master, UnionPay, JCB)",
+  "pps":"PPS",
+  "atm":"银行自动柜员机 (ATM)",
+  "eBank":"网上银行",
+  "phoneBank":"电话银行 (仅限指定银行)",
+  "eCheque":"电子支票",
+  "hkpo":"在邮局",
+  "store":"在便利店",
+  "post":"通过邮寄",
+  "cheque":"支票",
+  "cash":"现金",
+
+  "payDnRemark": "在{date}之前将付款证明（如自动柜员机收据、网路银行记录）寄至 [email protected] ",
+  "payNPGORemark" :"在{date}之前在收款办公室完成付款",
 
   "MSG.registerIAmSmart": "你可点击「智方便」按钮，系统会自动输入个人资料，或自行输入个人资料，以即时启动 公共启事提交及缴费系统 帐户。<br/>如欲使用「智方便」提供个人资料，请先下载「智方便」流动应用程式并登记成为「智方便」用户。",
   "MSG.registerPersonal": "需上载身份证明文件数码档案以进行网上申请。 <br/>如：香港身份证; 护照; 中国内地身份证; 专业执业证书等",

src/translations/zh-HK.json

@@ -40,6 +40,22 @@
   "payDn":"透過發出一般繳款單付款",
   "payNPGO":"在 NPGO 收款辦公室付款",
   "paymentMeans":"付款方式",
+  "paymentMethodMeans":"可用的付款方式",
+  "fps":"轉數快 (FPS)",
+  "card":"信用卡 (Visa, Master, UnionPay, JCB)",
+  "pps":"PPS",
+  "atm":"銀行自動櫃員機 (ATM)",
+  "eBank":"網上銀行",
+  "phoneBank":"電話銀行 (僅限指定銀行)",
+  "eCheque":"電子支票",
+  "hkpo":"在郵局",
+  "store":"在便利商店",
+  "post":"透過郵寄",
+  "cheque":"支票",
+  "cash":"現金",
+
+  "payDnRemark": "在{date}之前將付款證明（如自動櫃員機收據、網路銀行記錄）寄至 [email protected] ",
+  "payNPGORemark" :"在{date}之前在收款辦公室完成付款",
 
   "MSG.registerIAmSmart": "你可點擊「智方便」按鈕，系統會自動輸入個人資料，或自行輸入個人資料，以即時啟動 公共啟事提交及繳費系統 帳戶。<br/>如欲使用「智方便」提供個人資料，請先下載「智方便」流動應用程式並登記成為「智方便」用戶。",
   "MSG.registerPersonal": "需上載身份證明文件數碼檔案以進行網上申請。<br/>如：香港身份證; 護照; 中國內地身份證; 專業執業証書等",