@@ -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>
