| @@ -52,6 +52,7 @@ const Index = () => { | |||
| const [paymentHoldedErr, setPaymentHoldedErr] = React.useState(false); | |||
| const intl = useIntl(); | |||
| const { locale } = intl; | |||
| React.useEffect(() => { | |||
| loadForm(); | |||
| @@ -169,7 +170,7 @@ const Index = () => { | |||
| id: 'proofPaymentBody_online2' | |||
| }, | |||
| { | |||
| paymentDeadline: DateUtils.dateFormat(record?.closingDate, intl.formatMessage({id: "dateStrFormat"})), | |||
| paymentDeadline: DateUtils.formatDateForLocale(record?.expiryDate, intl, locale), | |||
| } | |||
| ) | |||
| }} /> | |||
| @@ -285,9 +285,9 @@ const ApplicationDetailCard = ({ formData, }) => { | |||
| <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> | |||
| <Typography variant="h5">  | |||
| {locale === 'en' ? | |||
| `${intl.formatMessage({ id: 'before' })} ${DateUtils.dateFormat(data?.proofPaymentDeadline, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")} ` | |||
| `${intl.formatMessage({ id: 'before' })} ${DateUtils.dateFormat(data?.expiryDate, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")} ` | |||
| : | |||
| `${DateUtils.dateFormat(data?.proofPaymentDeadline, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "上午")?.replace("pm", "下午")}${intl.formatMessage({ id: 'before' })}` | |||
| `${DateUtils.dateFormat(data?.expiryDate, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "上午")?.replace("pm", "下午")}${intl.formatMessage({ id: 'before' })}` | |||
| } | |||
| </Typography> | |||
| </Grid> | |||
| @@ -54,7 +54,7 @@ const FormPanel = ({ formData }) => { | |||
| const navigate = useNavigate() | |||
| const params = useParams(); | |||
| const dft = locale === 'en' ? "DD MMMM YYYY" : "YYYY年MM月DD日"; | |||
| // const dft = locale === 'en' ? "DD MMMM YYYY" : "YYYY年MM月DD日"; | |||
| const tabelStyle = { | |||
| border: "2px solid gray", | |||
| @@ -462,13 +462,13 @@ const FormPanel = ({ formData }) => { | |||
| }</td> | |||
| <td style={tabelStyle}>{ | |||
| locale === 'en' ? | |||
| `${DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}` | |||
| `${DateUtils.dateFormat(formData.expiryDate, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}` | |||
| : | |||
| `${DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}` | |||
| `${DateUtils.dateFormat(formData.expiryDate, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}` | |||
| }</td> | |||
| <td style={tabelStyle}> | |||
| <FormattedMessage id="payOnlineRemark" values={{ | |||
| date: DateUtils.dateFormat(formData.proofPaymentDeadline, dft) | |||
| <FormattedMessage id="payOnlineRemarkProof" values={{ | |||
| date: DateUtils.formatDateForLocale(formData.expiryDate, intl, locale) | |||
| }} /> | |||
| </td> | |||
| </tr> | |||
| @@ -350,68 +350,51 @@ const ApplicationDetailCard = ( | |||
| </Button> | |||
| </> | |||
| : | |||
| (currentApplicationDetailData.status == "confirmed" && currentApplicationDetailData.creditor == 0) ? | |||
| <> | |||
| <Button | |||
| // size="large" | |||
| variant="contained" | |||
| onClick={withdrawnClick()} | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end', | |||
| backgroundColor: '#ffa733' | |||
| }}> | |||
| <CloseIcon /> | |||
| <Typography ml={1} variant="h5">Withdraw</Typography> | |||
| </Button> | |||
| </> | |||
| : | |||
| ( | |||
| (currentApplicationDetailData.status == "paid" && currentApplicationDetailData.creditor == 0) ? | |||
| <> | |||
| <Button | |||
| // size="large" | |||
| variant="contained" | |||
| onClick={revokeClick()} | |||
| disabled={currentApplicationDetailData.paymentMethod == "online" || currentApplicationDetailData.paymentMethod == null} | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end', | |||
| backgroundColor: '#ffa733' | |||
| }}> | |||
| <ReplayIcon /> | |||
| <Typography ml={1} variant="h5">Revoke Payment</Typography> | |||
| </Button> | |||
| <Button | |||
| // size="large" | |||
| variant="contained" | |||
| onClick={complatedClick()} | |||
| disabled={setCompleteDisable()} | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end', | |||
| backgroundColor: '#52b202' | |||
| }}> | |||
| <DoneIcon /> | |||
| <Typography ml={1} variant="h5">Publish</Typography> | |||
| </Button> | |||
| <Button | |||
| // size="large" | |||
| variant="contained" | |||
| onClick={withdrawnClick()} | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end', | |||
| backgroundColor: '#ffa733' | |||
| }}> | |||
| <CloseIcon /> | |||
| <Typography ml={1} variant="h5">Withdraw</Typography> | |||
| </Button> | |||
| </> : null | |||
| ) | |||
| ( | |||
| (currentApplicationDetailData.status == "paid" && currentApplicationDetailData.creditor == 0) ? | |||
| <> | |||
| <Button | |||
| // size="large" | |||
| variant="contained" | |||
| onClick={revokeClick()} | |||
| disabled={currentApplicationDetailData.paymentMethod == "online" || currentApplicationDetailData.paymentMethod == null} | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end', | |||
| backgroundColor: '#ffa733' | |||
| }}> | |||
| <ReplayIcon /> | |||
| <Typography ml={1} variant="h5">Revoke Payment</Typography> | |||
| </Button> | |||
| <Button | |||
| // size="large" | |||
| variant="contained" | |||
| onClick={complatedClick()} | |||
| disabled={setCompleteDisable()} | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end', | |||
| backgroundColor: '#52b202' | |||
| }}> | |||
| <DoneIcon /> | |||
| <Typography ml={1} variant="h5">Publish</Typography> | |||
| </Button> | |||
| <Button | |||
| // size="large" | |||
| variant="contained" | |||
| onClick={withdrawnClick()} | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end', | |||
| backgroundColor: '#ffa733' | |||
| }}> | |||
| <CloseIcon /> | |||
| <Typography ml={1} variant="h5">Withdraw</Typography> | |||
| </Button> | |||
| </> : null | |||
| ) | |||
| } | |||
| </Stack> | |||
| </Grid> | |||
| @@ -238,21 +238,23 @@ export default function SubmittedTab({ setCount, url }) { | |||
| <div> | |||
| {/* {dateStr(params.row.closingDate)} */} | |||
| { | |||
| params.row.paymentMethod=="online"? | |||
| locale === 'en' ? | |||
| `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 14, 30)?.replace("am", "a.m.")?.replace("pm", "p.m.")}` | |||
| : | |||
| `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 14, 30)?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}` | |||
| :params.row.paymentMethod=="demandNote" ? | |||
| is18_00(params.row.expiryDate) ? | |||
| DateUtils.formatDateForLocale(params.row.expiryDate, intl, locale): | |||
| params.row.paymentMethod=="online"? | |||
| locale === 'en' ? | |||
| `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 12, 0)?.replace("am", "a.m.")?.replace("pm", "p.m.")}` | |||
| `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 14, 30)?.replace("am", "a.m.")?.replace("pm", "p.m.")}` | |||
| : | |||
| `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 12, 0)?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}` | |||
| : | |||
| `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 14, 30)?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}` | |||
| :params.row.paymentMethod=="demandNote" ? | |||
| locale === 'en' ? | |||
| `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 12, 30)?.replace("am", "a.m.")?.replace("pm", "p.m.")}` | |||
| : | |||
| `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 12, 30)?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}` | |||
| `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 12, 0)?.replace("am", "a.m.")?.replace("pm", "p.m.")}` | |||
| : | |||
| `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 12, 0)?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}` | |||
| : | |||
| locale === 'en' ? | |||
| `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 12, 30)?.replace("am", "a.m.")?.replace("pm", "p.m.")}` | |||
| : | |||
| `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 12, 30)?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}` | |||
| } | |||
| {/* { | |||
| locale === 'en' ? | |||
| @@ -135,7 +135,7 @@ | |||
| "proofPaymentHeader_online": "Public Notice: Proofreading Completed and Payment Means Selected", | |||
| "proofPaymentBody_online": "We have received the manuscript proofreading confirmation and printing instructions for application number: {appNo}", | |||
| "proofPaymentBody_online2": "Please select either to complete the payment now or make payment by {paymentDeadline} 2:30 p.m.", | |||
| "proofPaymentBody_online2": "Please select either to complete the payment now or make payment by {paymentDeadline}", | |||
| "proofPaymentBody_online3": "We will process the publication after receiving payment confirmation.", | |||
| @@ -491,6 +491,7 @@ | |||
| "payDnRemark": "Payment proof (e.g. ATM receipt, internet banking record) to be sent to [email protected] by {date} 12:30 p.m.", | |||
| "payNPGORemark" :"Payment to be completed at NPGO Collection Office by {date} 12:30 p.m.", | |||
| "payOnlineRemark" :"Payment to be completed via this system by {date} 2:30 p.m. ", | |||
| "payOnlineRemarkProof" :"Payment to be completed via this system by {date}", | |||
| "before": "Before", | |||
| "page": "Page", | |||
| @@ -84,6 +84,7 @@ | |||
| "payDnRemark": "在{date}下午12时30分前将付款证明(例如银行入数纸或网上银行付款记录)电邮至 [email protected]", | |||
| "payNPGORemark" :"在{date}下午12时30分前到北角政府合署收款处完成付款", | |||
| "payOnlineRemark" :"在{date}下午2时30分前透过此系统完成网上付款", | |||
| "payOnlineRemarkProof" :"在{date}前透过此系统完成网上付款", | |||
| "MSG.registerIAmSmart": "你可点击「智方便」按钮,系统会自动输入个人资料,或自行输入个人资料,以即时启动 公共启事提交及缴费系统 帐户。<br/>如欲使用「智方便」提供个人资料,请先下载「智方便」流动应用程式并登记成为「智方便」用户。", | |||
| "MSG.registerPersonal": "需上载身份证明文件数码档案以进行网上申请。 <br/>如:香港身份证; 护照; 中国内地身份证; 专业执业证书等", | |||
| @@ -84,6 +84,7 @@ | |||
| "payDnRemark": "在{date}下午12時30分前將付款證明(例如銀行入數紙或網上銀行付款記錄)電郵至 [email protected]", | |||
| "payNPGORemark" :"在{date}下午12時30分前到北角政府合署收款處完成付款", | |||
| "payOnlineRemark" :"在{date}下午2時30分前透過此系統完成網上付款", | |||
| "payOnlineRemarkProof" :"在{date}前透過此系統完成網上付款", | |||
| "MSG.registerIAmSmart": "你可點擊「智方便」按鈕,系統會自動輸入個人資料,或自行輸入個人資料,以即時啟動 公共啟事提交及繳費系統 帳戶。<br/>如欲使用「智方便」提供個人資料,請先下載「智方便」流動應用程式並登記成為「智方便」用戶。", | |||
| "MSG.registerPersonal": "需上載身份證明文件數碼檔案以進行網上申請。<br/>如:香港身份證; 護照; 中國內地身份證; 專業執業証書等", | |||
| @@ -172,7 +173,7 @@ | |||
| "proofPaymentHeader_online": "公共啟事: 已完成校對並已選擇付款方式", | |||
| "proofPaymentBody_online": "我們已收到以下申請編號的稿件校對確認及可付印指示:<br/>{appNo}", | |||
| "proofPaymentBody_online2": "請選擇即時完成付款,或在{paymentDeadline}下午2時30分前完成付款。", | |||
| "proofPaymentBody_online2": "請選擇即時完成付款,或在{paymentDeadline}前完成付款。", | |||
| "proofPaymentBody_online3": "我們將在收到付款確認通知後處理刊登事宜。", | |||
| @@ -59,6 +59,21 @@ export const convertToDate = (date)=>{ | |||
| return date; | |||
| } | |||
| export const formatDateForLocale = (date, intl, locale) => { | |||
| const fmt = intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }); | |||
| let s = dateFormat(date, fmt) || ""; | |||
| return locale === "en" | |||
| ? s.replace("am", "a.m.").replace("pm", "p.m.") | |||
| : s.replace("am", "上午").replace("pm", "下午").replace("00分", ""); | |||
| }; | |||
| export const is18_00 = (date) => { | |||
| const d = convertToDate(date); | |||
| if (!d) return false; | |||
| return d.getHours() === 18 && d.getMinutes() === 0; | |||
| }; | |||
| export const dateFormat = (date, format) =>{ | |||
| date = convertToDate(date); | |||
| if(date) return dayjs(date).format(format); | |||
| @@ -30,7 +30,7 @@ export function getStatusByText(status, creditor) { | |||
| case "cancelled": | |||
| return getStatusTag({ color: "#909497", text: "已取消" }) | |||
| case "withdrawn": | |||
| return getStatusTag({ color: "#909497", text: "已撤銷" }) | |||
| return getStatusTag({ color: "#09421aff", text: "已撤銷" }) | |||
| default: | |||
| return getStatusTag({ text: status }) | |||
| } | |||
| @@ -63,7 +63,7 @@ export function getStatusByTextEng(status, creditor) { | |||
| case "cancelled": | |||
| return getStatusTag({ color: "#8a8784", text: "Cancelled" }) | |||
| case "withdrawn": | |||
| return getStatusTag({ color: "#8a8784", text: "Withdrawn" }) | |||
| return getStatusTag({ color: "#09421aff", text: "Withdrawn" }) | |||
| default: | |||
| return getStatusTag({ text: status }) | |||
| } | |||
| @@ -97,7 +97,7 @@ export function getStatusByTextIntl(status, creditor, intl) { | |||
| case "cancelled": | |||
| return getStatusTag({ color: "#909497", text: intl.formatMessage({id: 'cancelled'}) }) | |||
| case "withdrawn": | |||
| return getStatusTag({ color: "#909497", text: intl.formatMessage({id: 'withdrawn'}) }) | |||
| return getStatusTag({ color: "#09421aff", text: intl.formatMessage({id: 'withdrawn'}) }) | |||
| default: | |||
| return getStatusTag({ text: status }) | |||
| } | |||