Browse Source

add viewDetail for payment method

master
Anna Ho 1 year ago
parent
commit
a3639166d0
3 changed files with 205 additions and 76 deletions
  1. +22
    -0
      src/assets/style/styles.css
  2. +99
    -50
      src/pages/Proof/Reply_Public/ProofForm.js
  3. +84
    -26
      src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

+ 22
- 0
src/assets/style/styles.css View File

@@ -48,4 +48,26 @@ img


img:hover{-webkit-filter:none;} img:hover{-webkit-filter:none;}



a:link {
color: #1890ff;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #1890ff;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #1890ff;
background-color: transparent;
text-decoration: none;
}
a:active {
color: #1890ff;
background-color: transparent;
text-decoration: none;
}

/* iframe#webpack-dev-server-client-overlay{display:none!important} */ /* iframe#webpack-dev-server-client-overlay{display:none!important} */

+ 99
- 50
src/pages/Proof/Reply_Public/ProofForm.js View File

@@ -43,6 +43,7 @@ const FormPanel = ({ formData }) => {


const [actionValue, setActionValue] = React.useState(true); const [actionValue, setActionValue] = React.useState(true);


const [warningTitle, setWarningTitle] = React.useState("");
const [isWarningPopUp, setIsWarningPopUp] = React.useState(false); const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
const [warningText, setWarningText] = React.useState(""); const [warningText, setWarningText] = React.useState("");


@@ -72,13 +73,14 @@ const FormPanel = ({ formData }) => {
vaild: yup.string().max(255, intl.formatMessage({ id: 'requireLoginPassword' })).required(intl.formatMessage({ id: 'requireLoginPassword' })), vaild: yup.string().max(255, intl.formatMessage({ id: 'requireLoginPassword' })).required(intl.formatMessage({ id: 'requireLoginPassword' })),
}), }),
onSubmit: values => { onSubmit: values => {
if (isOverTime()&&!isDummyLoggedIn()) {
if (isOverTime() && !isDummyLoggedIn()) {
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: 'MSG.proofOutOfTime' })); setWarningText(intl.formatMessage({ id: 'MSG.proofOutOfTime' }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
return; return;
} }
let pm = paymentMethod; let pm = paymentMethod;
if (!isDummyLoggedIn()){
if (!isDummyLoggedIn()) {
if (pm == "demandNote") { if (pm == "demandNote") {
pm = isOverDnReviseDeadline() ? "" : pm; pm = isOverDnReviseDeadline() ? "" : pm;
} else if (pm == "office") { } else if (pm == "office") {
@@ -86,12 +88,14 @@ const FormPanel = ({ formData }) => {
} }
} }


if (actionValue == false && isOverReviseDeadline() &&!isDummyLoggedIn()) {
if (actionValue == false && isOverReviseDeadline() && !isDummyLoggedIn()) {
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: 'MSG.overReviseDeadline' })); setWarningText(intl.formatMessage({ id: 'MSG.overReviseDeadline' }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
return; return;
} }
else if (formData.creditor == false && pm == "") { else if (formData.creditor == false && pm == "") {
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: 'MSG.plzSelectPaymentMethod' })); setWarningText(intl.formatMessage({ id: 'MSG.plzSelectPaymentMethod' }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
return; return;
@@ -99,6 +103,7 @@ const FormPanel = ({ formData }) => {


if (!actionValue) { if (!actionValue) {
if (!attachments || attachments.length <= 0) { if (!attachments || attachments.length <= 0) {
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: 'requireFile' })); setWarningText(intl.formatMessage({ id: 'requireFile' }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
return; return;
@@ -116,6 +121,7 @@ const FormPanel = ({ formData }) => {
files: attachments ? attachments : [], files: attachments ? attachments : [],
onSuccess: function (responseData) { onSuccess: function (responseData) {
if (responseData.msg) { if (responseData.msg) {
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: responseData.msg })); setWarningText(intl.formatMessage({ id: responseData.msg }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
return; return;
@@ -128,11 +134,13 @@ const FormPanel = ({ formData }) => {
} }
}, },
onFail: function (response) { onFail: function (response) {
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: 'actionFail' })); setWarningText(intl.formatMessage({ id: 'actionFail' }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
console.log(response); console.log(response);
}, },
onError: function (error) { onError: function (error) {
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: 'actionFail' })); setWarningText(intl.formatMessage({ id: 'actionFail' }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
console.log(error); console.log(error);
@@ -145,12 +153,14 @@ const FormPanel = ({ formData }) => {
let file = event.target.files[0]; let file = event.target.files[0];
if (file) { if (file) {
if (!file.name.toLowerCase().substr(file.name.length - 4).includes(".pdf")) { if (!file.name.toLowerCase().substr(file.name.length - 4).includes(".pdf")) {
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: 'requireValidFileWithPdfFormat' })); setWarningText(intl.formatMessage({ id: 'requireValidFileWithPdfFormat' }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
document.getElementById("uploadFileBtn").value = ""; document.getElementById("uploadFileBtn").value = "";
return; return;
} }
if (file.size >= (10 * 1024 * 1034)) { if (file.size >= (10 * 1024 * 1034)) {
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: 'fileSizeWarning' })); setWarningText(intl.formatMessage({ id: 'fileSizeWarning' }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
return; return;
@@ -306,10 +316,9 @@ const FormPanel = ({ formData }) => {
<table style={tabelStyle}> <table style={tabelStyle}>
<tr style={tabelStyle}> <tr style={tabelStyle}>
<th style={tabelStyle} width="50" align="left"></th> <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="paymentMeans" /></th>
<th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th> <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
<th style={tabelStyle} width="300" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
<th style={tabelStyle} width="400" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
</tr> </tr>
<tr> <tr>
<td style={tabelStyle}> <td style={tabelStyle}>
@@ -320,19 +329,27 @@ const FormPanel = ({ formData }) => {
}} }}
/> />
</td> </td>
<td style={tabelStyle}><FormattedMessage id="payDn" /></td>
<td style={tabelStyle}> <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>
<FormattedMessage id="payDn" />
<br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
setWarningTitle(intl.formatMessage({ id: "payDn" }))
setWarningText(
<><FormattedMessage id="paymentMethodMeans" />
<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>
</>
);
setIsWarningPopUp(true);
}}><FormattedMessage id="viewDetail" /></a>
</td> </td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td> <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>
<td style={tabelStyle}> <td style={tabelStyle}>
@@ -350,12 +367,20 @@ const FormPanel = ({ formData }) => {
}} }}
/> />
</td> </td>
<td style={tabelStyle}><FormattedMessage id="payNPGO" /></td>
<td style={tabelStyle}> <td style={tabelStyle}>
<ul>
<li><FormattedMessage id="cheque" /></li>
<li><FormattedMessage id="cash" /></li>
</ul>
<FormattedMessage id="payNPGO" />
<br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
setWarningTitle(intl.formatMessage({ id: "payNPGO" }))
setWarningText(
<><FormattedMessage id="paymentMethodMeans" />
<ul>
<li><FormattedMessage id="cheque" /></li>
<li><FormattedMessage id="cash" /></li>
</ul>
</>
);
setIsWarningPopUp(true);
}}><FormattedMessage id="viewDetail" /></a>
</td> </td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 12:00 p.m.</td> <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 12:00 p.m.</td>
<td style={tabelStyle}> <td style={tabelStyle}>
@@ -370,10 +395,9 @@ const FormPanel = ({ formData }) => {
<table style={tabelStyle}> <table style={tabelStyle}>
<tr style={tabelStyle}> <tr style={tabelStyle}>
<th style={tabelStyle} width="50" align="left"></th> <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="paymentMeans" /></th>
<th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th> <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
<th style={tabelStyle} width="300" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
<th style={tabelStyle} width="400" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
</tr> </tr>
<tr> <tr>
<td style={tabelStyle}> <td style={tabelStyle}>
@@ -384,13 +408,21 @@ const FormPanel = ({ formData }) => {
}} }}
/> />
</td> </td>
<td style={tabelStyle}><FormattedMessage id="payOnline" /></td>
<td style={tabelStyle}> <td style={tabelStyle}>
<ul>
<li><FormattedMessage id="fps" /></li>
<li><FormattedMessage id="card" /></li>
<li><FormattedMessage id="pps" /></li>
</ul>
<FormattedMessage id="payOnline" />
<br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
setWarningTitle(intl.formatMessage({ id: "payOnline" }))
setWarningText(
<><FormattedMessage id="paymentMethodMeans" />
<ul>
<li><FormattedMessage id="fps" /></li>
<li><FormattedMessage id="card" /></li>
<li><FormattedMessage id="pps" /></li>
</ul>
</>
);
setIsWarningPopUp(true);
}}><FormattedMessage id="viewDetail" /></a>
</td> </td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 2:00 p.m.</td> <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 2:00 p.m.</td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 2:30 p.m.</td> <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 2:30 p.m.</td>
@@ -407,20 +439,29 @@ const FormPanel = ({ formData }) => {
/> />
} }
</td> </td>
<td style={tabelStyle}><FormattedMessage id="payDn" /></td>
<td style={tabelStyle}> <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>
<FormattedMessage id="payDn" />
<br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
setWarningTitle(intl.formatMessage({ id: "payDn" }))
setWarningText(
<><FormattedMessage id="paymentMethodMeans" />
<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>
</>
);
setIsWarningPopUp(true);
}}><FormattedMessage id="viewDetail" /></a>
</td> </td>

<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td> <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>
<td style={tabelStyle}> <td style={tabelStyle}>
<FormattedMessage id="payDnRemark" values={{ <FormattedMessage id="payDnRemark" values={{
@@ -442,12 +483,20 @@ const FormPanel = ({ formData }) => {
/> />
} }
</td> </td>
<td style={tabelStyle}><FormattedMessage id="payNPGO" /></td>
<td style={tabelStyle}> <td style={tabelStyle}>
<ul>
<li><FormattedMessage id="cheque" /></li>
<li><FormattedMessage id="cash" /></li>
</ul>
<FormattedMessage id="payNPGO" />
<br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
setWarningTitle(intl.formatMessage({ id: "payDn" }))
setWarningText(
<><FormattedMessage id="paymentMethodMeans" />
<ul>
<li><FormattedMessage id="cheque" /></li>
<li><FormattedMessage id="cash" /></li>
</ul>
</>
);
setIsWarningPopUp(true);
}}><FormattedMessage id="viewDetail" /></a>
</td> </td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 12:00 p.m.</td> <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 12:00 p.m.</td>
<td style={tabelStyle}> <td style={tabelStyle}>
@@ -589,7 +638,7 @@ const FormPanel = ({ formData }) => {
}} }}
> >
<DialogTitle> <DialogTitle>
<FormattedMessage id="attention" />
{warningTitle}
</DialogTitle> </DialogTitle>
<DialogContent style={{ display: 'flex', }}> <DialogContent style={{ display: 'flex', }}>
<Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography> <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>


+ 84
- 26
src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js View File

@@ -32,14 +32,15 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo


// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //


const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) => {
const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) => {
const [isWarningPopUp, setIsWarningPopUp] = useState(false); const [isWarningPopUp, setIsWarningPopUp] = useState(false);
const [warningTitle, setWarningTitle] = useState("");
const [warningText, setWarningText] = useState(""); const [warningText, setWarningText] = useState("");
const [attachment, setAttachment] = useState({}); const [attachment, setAttachment] = useState({});
const [selections, setsSelections] = useState(<></>); const [selections, setsSelections] = useState(<></>);
const intl = useIntl(); const intl = useIntl();
const { locale } = intl; const { locale } = intl;
const dft = locale === 'en' ?"DD MMM YYYY":"YYYY年MM月DD日";
const dft = locale === 'en' ? "DD MMM YYYY" : "YYYY年MM月DD日";


const [val, setVal] = useState({}); const [val, setVal] = useState({});
const [reloadPage, setReloadPage] = useState(false); const [reloadPage, setReloadPage] = useState(false);
@@ -62,8 +63,8 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
} }


const tabelStyle = { const tabelStyle = {
border: "2px solid gray",
borderCollapse: "collapse",
border: "2px solid gray",
borderCollapse: "collapse",
padding: "right" padding: "right"
} }


@@ -78,13 +79,13 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
useEffect(() => { useEffect(() => {
for (var i = 0; i < gazetteIssueList?.length; i++) { for (var i = 0; i < gazetteIssueList?.length; i++) {
let data = gazetteIssueList[i]; let data = gazetteIssueList[i];
if(data.id == issueId){
if (data.id == issueId) {
setCloseDate(data.closingDate) setCloseDate(data.closingDate)
setClosingDateOff(data.closingDateOff) setClosingDateOff(data.closingDateOff)
break; break;
} }
} }
}, [issueId]); }, [issueId]);


// function displayErrorMsg(errorMsg) { // function displayErrorMsg(errorMsg) {
@@ -109,37 +110,41 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
} else { } else {
return false return false
} }
}else{
} else {
return true return true
} }
}), }),
careOfDum: yup.string().max(60, getMaxErrStr(60)).test('checkCareOfDumFormat',intl.formatMessage({ id: 'requireCareOf' }), function (value) {
careOfDum: yup.string().max(60, getMaxErrStr(60)).test('checkCareOfDumFormat', intl.formatMessage({ id: 'requireCareOf' }), function (value) {
if (isDummyLoggedIn()) { if (isDummyLoggedIn()) {
if (value !== undefined) { if (value !== undefined) {
return true return true
} else { } else {
return false return false
} }
}else{
} else {
return true return true
} }
}), }),
}), }),
onSubmit: values => { onSubmit: values => {
if (!values.issueId) { if (!values.issueId) {
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: 'requireTargetVol' })); setWarningText(intl.formatMessage({ id: 'requireTargetVol' }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
return; return;
} }
if (!attachment) { if (!attachment) {
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: 'requireFile' })); setWarningText(intl.formatMessage({ id: 'requireFile' }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
return; return;
} else if (!attachment.size || attachment.size <= 0) { } else if (!attachment.size || attachment.size <= 0) {
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: 'requireValidFile' })); setWarningText(intl.formatMessage({ id: 'requireValidFile' }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
return; return;
} else if (attachment.size >= (10 * 1024 * 1034)) { } else if (attachment.size >= (10 * 1024 * 1034)) {
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: 'fileSizeWarning' })); setWarningText(intl.formatMessage({ id: 'fileSizeWarning' }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
return; return;
@@ -150,6 +155,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
onSuccess: (responData) => { onSuccess: (responData) => {
if (responData.haveOverdue) { if (responData.haveOverdue) {
setVal(values); setVal(values);
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: 'dnOverdueWarning' })); setWarningText(intl.formatMessage({ id: 'dnOverdueWarning' }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
} else { } else {
@@ -167,11 +173,11 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
const apply = (values) => { const apply = (values) => {
setSubmitting(true) setSubmitting(true)
let careOf = values.careOf ?? ""; let careOf = values.careOf ?? "";
let remarks = values.remarks ??"";
if (isDummyLoggedIn()){
let remarks = values.remarks ?? "";
if (isDummyLoggedIn()) {
careOf = values.careOfDum careOf = values.careOfDum
} }
if (isDummyLoggedIn()){
if (isDummyLoggedIn()) {
remarks = values.emailAddress remarks = values.emailAddress
} }
HttpUtils.postWithFiles({ HttpUtils.postWithFiles({
@@ -196,6 +202,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
if (responData.msg) { if (responData.msg) {
setVal({}); setVal({});
setReloadPage(true); setReloadPage(true);
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: responData.msg })); setWarningText(intl.formatMessage({ id: responData.msg }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
return; return;
@@ -218,6 +225,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
) { ) {
setAttachment(event.target.files[0]); setAttachment(event.target.files[0]);
} else { } else {
setWarningTitle(intl.formatMessage({ id: "attention" }))
setWarningText(intl.formatMessage({ id: 'requireValidFileWithFormat' })); setWarningText(intl.formatMessage({ id: 'requireValidFileWithFormat' }));
setIsWarningPopUp(true); setIsWarningPopUp(true);
setAttachment({}); setAttachment({});
@@ -318,25 +326,73 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
</Grid> </Grid>
</Grid> </Grid>


<Grid item xs={12} alignItems={"center"} sx={{ p: 2}}>
<Grid item xs={12} alignItems={"center"} sx={{ p: 2 }}>
<table style={tabelStyle}> <table style={tabelStyle}>
<tr style={tabelStyle}> <tr style={tabelStyle}>
<th style={tabelStyle} width="400" align="left"><FormattedMessage id="paymentMeans"/></th>
<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="confirmingDealine" /></th>
<th style={tabelStyle} width="300" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th> <th style={tabelStyle} width="300" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
</tr> </tr>
<tr> <tr>
<td style={tabelStyle}><FormattedMessage id="payOnline" /></td>
<td style={tabelStyle}>
<FormattedMessage id="payOnline" />
<br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
setWarningTitle(intl.formatMessage({ id: "payOnline" }))
setWarningText(
<><FormattedMessage id="paymentMethodMeans" />
<ul>
<li><FormattedMessage id="fps" /></li>
<li><FormattedMessage id="card" /></li>
<li><FormattedMessage id="pps" /></li>
</ul>
</>
);
setIsWarningPopUp(true);
}}><FormattedMessage id="viewDetail" /></a>
</td>
<td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 2:00 p.m.</td> <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 2:00 p.m.</td>
<td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 2:30 p.m.</td> <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 2:30 p.m.</td>
</tr> </tr>
<tr> <tr>
<td style={tabelStyle}><FormattedMessage id="payDn" /></td>
<td style={tabelStyle}><FormattedMessage id="payDn" />
<br /><a href="#payDnDetails" onClick={() => {
setWarningTitle(intl.formatMessage({ id: "payDn" }))
setWarningText(
<><FormattedMessage id="paymentMethodMeans" />
<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>
</>
);
setIsWarningPopUp(true);
}}><FormattedMessage id="viewDetail" /></a>
</td>
<td style={tabelStyle}>{DateUtils.dateFormat(closingDateOff, dft)} 5:00 p.m.</td> <td style={tabelStyle}>{DateUtils.dateFormat(closingDateOff, dft)} 5:00 p.m.</td>
<td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 12:00 p.m.</td> <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 12:00 p.m.</td>
</tr> </tr>
<tr> <tr>
<td style={tabelStyle}><FormattedMessage id="payNPGO" /></td>
<td style={tabelStyle}><FormattedMessage id="payNPGO" />
<br /><a href="#payNPGODetails" onClick={() => {
setWarningTitle(intl.formatMessage({ id: "payNPGO" }))
setWarningText(
<><FormattedMessage id="paymentMethodMeans" />
<ul>
<li><FormattedMessage id="cheque" /></li>
<li><FormattedMessage id="cash" /></li>
</ul>
</>
);
setIsWarningPopUp(true);
}}><FormattedMessage id="viewDetail" /></a>
</td>
<td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 12:00 p.m.</td> <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 12:00 p.m.</td>
<td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 12:30 p.m.</td> <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 12:30 p.m.</td>
</tr> </tr>
@@ -398,7 +454,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
</Grid> </Grid>
{isORGLoggedIn() ? {isORGLoggedIn() ?
<> <>
{isDummyLoggedIn()?
{isDummyLoggedIn() ?
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
{FieldUtils.getCarOfField({ {FieldUtils.getCarOfField({
label: intl.formatMessage({ id: 'careOf' }) + ":", label: intl.formatMessage({ id: 'careOf' }) + ":",
@@ -407,7 +463,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
// disabled: true // disabled: true
})} })}
</Grid> </Grid>
:
:
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
{FieldUtils.getCarOfField({ {FieldUtils.getCarOfField({
label: intl.formatMessage({ id: 'careOf' }) + ":", label: intl.formatMessage({ id: 'careOf' }) + ":",
@@ -416,7 +472,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
// disabled: true // disabled: true
})} })}
</Grid> </Grid>
} }
<Grid item xs={12} md={12} lg={12} sx={{ mb: 3 }}> <Grid item xs={12} md={12} lg={12} sx={{ mb: 3 }}>
<Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}> <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
@@ -430,7 +486,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
} }


{ {
isDummyLoggedIn()?
isDummyLoggedIn() ?
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: intl.formatMessage({ id: 'userContactEmail' }), label: intl.formatMessage({ id: 'userContactEmail' }),
@@ -438,7 +494,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
form: formik form: formik
})} })}
</Grid> </Grid>
:
:
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
{FieldUtils.getTextArea({ {FieldUtils.getTextArea({
label: intl.formatMessage({ id: 'extraMark' }) + ":", label: intl.formatMessage({ id: 'extraMark' }) + ":",
@@ -460,7 +516,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
<Stack direction="row"> <Stack direction="row">
<Checkbox <Checkbox
checked={tickAccept} checked={tickAccept}
onChange={(event)=>{
onChange={(event) => {
setTickAccept(event.target.checked) setTickAccept(event.target.checked)
}} }}
name="tickAccept" name="tickAccept"
@@ -480,7 +536,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
aria-label={intl.formatMessage({ id: 'applyPublicNotice' })} aria-label={intl.formatMessage({ id: 'applyPublicNotice' })}
variant="contained" variant="contained"
type="submit" type="submit"
disabled = {!tickAccept}
disabled={!tickAccept}
> >
<FormattedMessage id="applyPublicNotice" /> <FormattedMessage id="applyPublicNotice" />
</Button> </Button>
@@ -509,10 +565,12 @@ const PublicNoticeApplyForm = ({ loadedData, _selections , gazetteIssueList}) =>
}} }}
> >
<DialogTitle> <DialogTitle>
<FormattedMessage id="attention" />
{warningTitle}
</DialogTitle> </DialogTitle>
<DialogContent style={{ display: 'flex', }}> <DialogContent style={{ display: 'flex', }}>
<Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
<Typography variant="h3" style={{ padding: '16px' }}>
{warningText}
</Typography>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button <Button


Loading…
Cancel
Save