From 0226d12b0fd690060f5d7d368687b1f9624a84d2 Mon Sep 17 00:00:00 2001 From: anna Date: Mon, 6 May 2024 12:01:52 +0800 Subject: [PATCH] apply application enhancement --- .../ApplyForm/PublicNoticeApplyForm.js | 92 +++++++++++++++---- src/pages/PublicNotice/ApplyForm/index.js | 1 + src/translations/en.json | 8 ++ src/translations/zh-CN.json | 7 ++ src/translations/zh-HK.json | 7 ++ 5 files changed, 98 insertions(+), 17 deletions(-) diff --git a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js index 04805c5..c1ea876 100644 --- a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js +++ b/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 }) => { + + + + + + + + + + + + + + + + + + + + + + + +
{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 2:00 p.m.{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 2:30 p.m.
{DateUtils.dateFormat(beforeClosingDate, "YYYY年MM月DD日")} 5:00 p.m.{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 12:30 p.m.
{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 12:00 p.m.{DateUtils.dateFormat(closeDate, "YYYY年MM月DD日")} 12:30 p.m.
+ + + { + + + { + setTickAccept(event.target.checked) + }} + name="tickAccept" + color="primary" + size="small" + /> + +
+ + + +
@@ -356,6 +413,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => { aria-label={intl.formatMessage({ id: 'applyPublicNotice' })} variant="contained" type="submit" + disabled = {!tickAccept} > @@ -364,7 +422,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => { - + diff --git a/src/pages/PublicNotice/ApplyForm/index.js b/src/pages/PublicNotice/ApplyForm/index.js index 4428c06..74cf7fd 100644 --- a/src/pages/PublicNotice/ApplyForm/index.js +++ b/src/pages/PublicNotice/ApplyForm/index.js @@ -111,6 +111,7 @@ const ApplyForm = () => { ); }; diff --git a/src/translations/en.json b/src/translations/en.json index 0db83b9..ac8f9a4 100644 --- a/src/translations/en.json +++ b/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.
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.
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", diff --git a/src/translations/zh-CN.json b/src/translations/zh-CN.json index 16b23e3..c805b83 100644 --- a/src/translations/zh-CN.json +++ b/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": "你可点击「智方便」按钮，系统会自动输入个人资料，或自行输入个人资料，以即时启动 公共启事提交及缴费系统 帐户。
如欲使用「智方便」提供个人资料，请先下载「智方便」流动应用程式并登记成为「智方便」用户。", "MSG.registerPersonal": "需上载身份证明文件数码档案以进行网上申请。
如：香港身份证; 护照; 中国内地身份证; 专业执业证书等", diff --git a/src/translations/zh-HK.json b/src/translations/zh-HK.json index b09e8bf..1fee017 100644 --- a/src/translations/zh-HK.json +++ b/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": "你可點擊「智方便」按鈕，系統會自動輸入個人資料，或自行輸入個人資料，以即時啟動 公共啟事提交及繳費系統 帳戶。
如欲使用「智方便」提供個人資料，請先下載「智方便」流動應用程式並登記成為「智方便」用戶。", "MSG.registerPersonal": "需上載身份證明文件數碼檔案以進行網上申請。
如：香港身份證; 護照; 中國內地身份證; 專業執業証書等",