apply application enhancement

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -4,15 +4,16 @@ import {
     Typography,
     Button,
     RadioGroup,
+    Checkbox,
     Dialog, DialogTitle, DialogContent, DialogActions,
     Stack, Box
 } from '@mui/material';
 import { useFormik } from 'formik';
 import * as yup from 'yup';
-import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
 import * as UrlUtils from "utils/ApiPathConst";
 import * as FieldUtils from "utils/FieldUtils";
+import * as DateUtils from "utils/DateUtils";
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import ForwardIcon from '@mui/icons-material/Forward';
 import {
@@ -25,23 +26,26 @@ import { PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst";
 import { ThemeProvider } from "@emotion/react";
 import { FormattedMessage, useIntl } from "react-intl";
 import Loadable from 'components/Loadable';
-import { lazy } from 'react';
+import { useState, useEffect, lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
-    const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
-    const [warningText, setWarningText] = React.useState("");
-    const [attachment, setAttachment] = React.useState({});
-    const [selections, setsSelections] = React.useState(<></>);
+const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) => {
+    const [isWarningPopUp, setIsWarningPopUp] = useState(false);
+    const [warningText, setWarningText] = useState("");
+    const [attachment, setAttachment] = useState({});
+    const [selections, setsSelections] = useState(<></>);
     const intl = useIntl();
 
-    const [val, setVal] = React.useState({});
-    const [reloadPage, setReloadPage] = React.useState(false);
-    const [isSubmitting, setSubmitting] = React.useState(false);
+    const [val, setVal] = useState({});
+    const [reloadPage, setReloadPage] = useState(false);
+    const [isSubmitting, setSubmitting] = useState(false);
+    const [tickAccept, setTickAccept] = useState(false);
 
-    const [issueId, setIssueId] = React.useState(loadedData.issueId);
+    const [issueId, setIssueId] = useState(loadedData.issueId);
+    const [closeDate, setCloseDate] = useState(null);
+    const [beforeClosingDate, setBeforeClosingDate] = useState(null);
     const navigate = useNavigate();
 
     const BackgroundHead = {
@@ -54,18 +58,27 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
         backgroundPosition: 'right'
     }
 
-    // React.useEffect(()=>{
-    //     loadedData.careOf = loadedData.contactPerson
-    // },[]);
-
     function getMaxErrStr(num, fieldname) {
         return intl.formatMessage({ id: 'noMoreThenNWords' }, { num: num, fieldname: fieldname ? intl.formatMessage({ id: fieldname }) + ": " : "" });
     }
 
-    React.useEffect(() => {
+    useEffect(() => {
         setsSelections(_selections)
     }, [_selections]);
 
+    useEffect(() => {
+        for (var i = 0; i < gazetteIssueList?.length; i++) {
+            let data = gazetteIssueList[i];
+            if(data.id == issueId){
+                setCloseDate(data.closingDate)
+                setBeforeClosingDate(data.beforeClosingDate)
+                break;
+            }
+        }
+        
+    }, [issueId]);
+
+
     const formik = useFormik({
         enableReinitialize: true,
         initialValues: loadedData,
@@ -261,6 +274,33 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
                                             </Grid>
                                         </Grid>
                                     </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>
+                                            </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>
+                                            </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>
+                                            </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>
+                                            </tr>
+                                        </table>
+
+                                    </Grid>
+
                                     <Grid item xs={12} md={12} lg={12}>
                                         <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                                             <Grid item xs={12} md={3} lg={3}
@@ -349,6 +389,23 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
                                     </Grid>
 
 
+                                    <Grid item xs={12}>
+                                        <Stack direction="row">
+                                            <Checkbox
+                                                checked={tickAccept}
+                                                onChange={(event)=>{
+                                                    setTickAccept(event.target.checked)
+                                                }}
+                                                name="tickAccept"
+                                                color="primary"
+                                                size="small"
+                                            />
+                                            <Typography variant="h6" height="100%" >
+                                                <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickStr" }) }} />
+                                            </Typography>
+                                        </Stack>
+                                    </Grid>
+
                                     <Grid item xs={12}>
                                         <center>
                                             <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
@@ -356,6 +413,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
                                                     aria-label={intl.formatMessage({ id: 'applyPublicNotice' })}
                                                     variant="contained"
                                                     type="submit"
+                                                    disabled = {!tickAccept}
                                                 >
                                                     <FormattedMessage id="applyPublicNotice" />
                                                 </Button>
@@ -364,7 +422,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
                                     </Grid>
 
 
-                                    
+
 
                                 </Grid>
                             </form>

src/pages/PublicNotice/ApplyForm/index.js

@@ -111,6 +111,7 @@ const ApplyForm = () => {
             <PublicNoticeApplyForm
                 loadedData={userData}
                 _selections={selections}
+                gazetteIssueList = {gazetteIssueList}
             />
     );
 };

src/translations/en.json

@@ -33,6 +33,7 @@
   "noMoreThen255Words": "Must not exceed 255 characters",
   "noMoreThenNWords": "{fieldname} Must not exceed {num} characters",
   "atLeastNCharAccount": "{fieldname} Please enter at least {num} digits",
+  "applyTickStr":"I acknowledge the deadlines mentioned above.",
 
   "MSG.registerIAmSmart": "You may click the \"iAM Smart\" button to fill the personal information automatically or enter the information manually to activate the PNSPS account now.<br/>If you want to use \"iAM Smart\" to fill the personal information, please download the \"iAM Smart\" mobile app and register as an \"iAM Smart\" user first.",
   "MSG.registerPersonal": "To complete the online application, you need to upload digital copies of identification documents.<br/>e.g. Hong Kong Identity Card, Passport, Mainland China Identity Card, Professional Practicing Certificate, etc.",
@@ -381,6 +382,13 @@
   "payAnd": "Pay and ",
   "commentDeadline": "Deadline for proof with revison",
   "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",
+  "payNPGO":"Pay at NPGO Collection Office",
+  "paymentMeans":"Payment Means",
+
   "before": "Before",
   "page": "Page",
   "proofReplyDate": "Proof Reply Date",

src/translations/zh-CN.json

@@ -33,6 +33,13 @@
   "noMoreThen255Words": "不得超过 255 个字符",
   "noMoreThenNWords": "{fieldname}不得超过 {num} 个字符",
   "atLeastNCharAccount": "{fieldname}最少{num}个字符",
+  "applyTickStr":"我确认上述提到的截止日期。",
+    "confirmingDealine": "确认校对的截止日期",
+  "PaymentCoonpletDealine": "付款截止日期",
+  "payOnline":"透过此系统 GPNSPS 线上支付",
+  "payDn":"透过发出一般缴款单付款",
+  "payNPGO":"在 NPGO 收款办公室付款",
+  "paymentMeans":"付款方式",
 
   "MSG.registerIAmSmart": "你可点击「智方便」按钮，系统会自动输入个人资料，或自行输入个人资料，以即时启动 公共启事提交及缴费系统 帐户。<br/>如欲使用「智方便」提供个人资料，请先下载「智方便」流动应用程式并登记成为「智方便」用户。",
   "MSG.registerPersonal": "需上载身份证明文件数码档案以进行网上申请。 <br/>如：香港身份证; 护照; 中国内地身份证; 专业执业证书等",

src/translations/zh-HK.json

@@ -33,6 +33,13 @@
   "noMoreThen255Words": "不得超過 255 個字符",
   "noMoreThenNWords": "{fieldname}不得超過 {num} 個字符",
   "atLeastNCharAccount": "{fieldname}最少{num}個字符",
+  "applyTickStr":"我確認上述提到的日期。",
+  "confirmingDealine": "確認校對的截止日期",
+  "PaymentCoonpletDealine": "付款截止日期",
+  "payOnline":"透過此系統 GPNSPS 線上支付",
+  "payDn":"透過發出一般繳款單付款",
+  "payNPGO":"在 NPGO 收款辦公室付款",
+  "paymentMeans":"付款方式",
 
   "MSG.registerIAmSmart": "你可點擊「智方便」按鈕，系統會自動輸入個人資料，或自行輸入個人資料，以即時啟動 公共啟事提交及繳費系統 帳戶。<br/>如欲使用「智方便」提供個人資料，請先下載「智方便」流動應用程式並登記成為「智方便」用戶。",
   "MSG.registerPersonal": "需上載身份證明文件數碼檔案以進行網上申請。<br/>如：香港身份證; 護照; 中國內地身份證; 專業執業証書等",