diff --git a/src/pages/Payment/Details_Public/DataGrid.js b/src/pages/Payment/Details_Public/DataGrid.js index bbebc10..7b4816a 100644 --- a/src/pages/Payment/Details_Public/DataGrid.js +++ b/src/pages/Payment/Details_Public/DataGrid.js @@ -8,6 +8,8 @@ import { import * as React from 'react'; import * as FormatUtils from "utils/FormatUtils" import { FiDataGrid } from "components/FiDataGrid"; +import * as DateUtils from "utils/DateUtils" +import * as Utils from "utils/Utils" // ==============================|| EVENT TABLE ||============================== // export default function SearchPublicNoticeTable({ recordList }) { @@ -15,7 +17,8 @@ export default function SearchPublicNoticeTable({ recordList }) { const [total, setTotal] = React.useState(0); React.useEffect(() => { - setRows(recordList); + const indexedData = recordList.map((obj, index) => ({ index_number: index + 1, ...obj })); + setRows(indexedData); let countTotal = 0; recordList.forEach(item => { countTotal+=item.fee; @@ -25,20 +28,34 @@ export default function SearchPublicNoticeTable({ recordList }) { }, [recordList]); const columns = [ + { + field: "id", + headerName: "No.", + filterable: false, + renderCell: (params) => { + return (params.row.index_number); + + } + }, { id: 'appNo', field: 'appNo', - headerName: isORGLoggedIn()?'申請編號/Care Of/我的備註':'申請編號/我的備註', + headerName:'詳細', flex: 1, renderCell: (params) => { let appNo = params.row.appNo; - return
{appNo}
{isORGLoggedIn()?<>{params.row.careOf}
:null}{params.row.remarks}
+ // console.log(params) + return
憲報第6號副刊公告
+ {isORGLoggedIn()?<>Care Of: {params.row.careOf}
:null} + 申請編號: {appNo}
+ 憲報日期: {DateUtils.dateStr_Cht(params.row.issueDate)}
+ 長度: {Utils.gazetteLength(params.row.length, params.row.noOfPages)}
}, }, { id: 'fee', field: 'fee', - headerName: '費用 (HK$)', + headerName: '金額 ($)', width: 150, valueGetter: (params) => { return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : ""; @@ -50,7 +67,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
{ if(props.selectedPaymentMethod === ""){ setPaymentMethod("") } - setPaymentMethod - if(availableMethodData.length > 0){ setContent( @@ -130,43 +129,43 @@ const MultiPaymentWindow = (props) => { - - - - 付款方式: - - - + + + + 請選擇付款方式: + + + - - + + - - + + - - + + - - + + - - + + - + {paymentMethod !=""? @@ -186,15 +185,6 @@ const MultiPaymentWindow = (props) => { : null} ) - }else{ - setContent( - - - 付款功能現在不可用。 - - - ) - } }, [availableMethodData]); const formik = useFormik({ @@ -208,14 +198,14 @@ const MultiPaymentWindow = (props) => { return ( props.setOpen(false)} fullWidth={true} maxWidth={'xl'} > - + {windowTitle} @@ -227,17 +217,55 @@ const MultiPaymentWindow = (props) => {
- {!onReady ? - - :content - } + + + +
+ + + 交易參考號: {transactionData.transactionid} + + + + 支付金額: HK$ {FormatUtils.currencyFormat(props.totalAmount)} + + {availableMethodData > 0 ? + !onReady ? + + :content + : + + 付款功能現在不可用。 + + + } + + + + + + + 付款金額: + + + + + {"HK$ " + FormatUtils.currencyFormat(props.totalAmount)} + + + + +
+ + +
- diff --git a/src/pages/Payment/index.js b/src/pages/Payment/index.js index 2e7b4b6..5576a61 100644 --- a/src/pages/Payment/index.js +++ b/src/pages/Payment/index.js @@ -2,14 +2,14 @@ import * as React from "react"; import * as HttpUtils from "utils/HttpUtils"; import * as UrlUtils from "utils/ApiPathConst"; import Loadable from 'components/Loadable'; -// const MultiPaymentWindow = Loadable(React.lazy(() => import('./MultiPaymentWindow'))); +const MultiPaymentWindow = Loadable(React.lazy(() => import('./MultiPaymentWindow'))); const DataGrid = Loadable(React.lazy(() => import('./Details_Public/DataGrid'))); // const FPS = Loadable(React.lazy(() => import('./FPS'))); import { useEffect, useState } from "react"; import { useNavigate, useLocation } from "react-router-dom"; import { paymentPath } from "auth/utils"; -import * as FormatUtils from "utils/FormatUtils"; -const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); +// import * as FormatUtils from "utils/FormatUtils"; +// const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); import { Button, @@ -20,13 +20,13 @@ import { Dialog, DialogTitle, DialogContent, DialogActions, } from '@mui/material'; -//icon -import VisaIcon from "assets/images/icons/visacard.svg"; -import MasterIcon from "assets/images/icons/mastercard.svg"; -import JcbIcon from "assets/images/icons/jcb.svg"; -import UnionPayIcon from "assets/images/icons/unionpay.svg"; -import PpsIcon from "assets/images/icons/ppshk.svg"; -import FpsIcon from "assets/images/icons/fps.svg"; +// //icon +// import VisaIcon from "assets/images/icons/visacard.svg"; +// import MasterIcon from "assets/images/icons/mastercard.svg"; +// import JcbIcon from "assets/images/icons/jcb.svg"; +// import UnionPayIcon from "assets/images/icons/unionpay.svg"; +// import PpsIcon from "assets/images/icons/ppshk.svg"; +// import FpsIcon from "assets/images/icons/fps.svg"; import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' const BackgroundHead = { @@ -52,7 +52,7 @@ const Index = () => { //statusWindow - // const [open, setOpen] = useState(false); + const [open, setOpen] = useState(false); const [availableMethods, setAvailableMethods] = useState([]); const [transactionData, setTransactionData] = useState({}); const [fpsStatus, setFPSStatus] = useState({}); @@ -61,9 +61,10 @@ const Index = () => { const [ppsStatus, setPPSStatus] = useState({}); const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(""); const [confirmPayment, setConfirmPayment] = useState(false); + const [afterConfirmPayment, setAfterConfirmPayment] = useState(false); const [itemList, setItemList] = useState([]); - const [onReady, setOnReady] = useState(false); + // const [onReady, setOnReady] = useState(false); const [expiryDateErrText, setExpiryDateErrText] = React.useState(""); const [expiryDateErr, setExpiryDateErr] = React.useState(false); @@ -71,9 +72,8 @@ const Index = () => { useEffect(() => { setAppIds(location.state?.appIdList ?? []) setTotalAmount(location.state?.amount ?? 2000) - getAvailablePayment() - getTransactionId() - + // getAvailablePayment() + // getTransactionId() }, []); useEffect(() => { @@ -81,25 +81,26 @@ const Index = () => { getAppList(); }, [appIds]); - // const handleClose = () => { + // const handleClose = () => { // // handleReset() // setOpen(false); - // getTransactionId() - // getAvailablePayment() + // // getTransactionId() + // // getAvailablePayment() // }; - // const paymentClick = () => { - // setTotalAmount(totalAmount); - // setSelectedPaymentMethod("") - // setConfirmPayment(false) - // if (totalAmount > 0) { - // getTransactionId() - // // setOpen(true) - // } - // }; + const paymentClick = () => { + setTotalAmount(totalAmount); + setSelectedPaymentMethod("") + setConfirmPayment(false) + if (totalAmount > 0) { + getAvailablePayment() + getTransactionId() + setOpen(true) + } + }; useEffect(() => { - if (confirmPayment) { + if (afterConfirmPayment) { // setOpen(false); // let transactionid = ""; // let webtoken = ""; @@ -149,9 +150,9 @@ const Index = () => { }); } } - }, [confirmPayment]); + }, [afterConfirmPayment]); - const getAvailablePayment = () => { + const getAvailablePayment = () =>{ HttpUtils.post({ url: paymentPath + getAvailablePaymentUrl, params: { @@ -336,7 +337,7 @@ const Index = () => { setPPSStatus(method) } }); - setOnReady(true) + // setOnReady(true) } }, [availableMethods]); @@ -368,30 +369,33 @@ const Index = () => { }); } - const selectedPaymentMethodHandle = (method) => () => { - setSelectedPaymentMethod(method); - }; + // const selectedPaymentMethodHandle = (method) => () => { + // setSelectedPaymentMethod(method); + // }; - const confirmPaymentHandle = () => () => { - HttpUtils.post({ - url: UrlUtils.POST_CHECK_APP_EXPRITY_DATE, - params: { - ids: appIds - }, - onSuccess: (responData) => { - if (responData.success == true) { - setConfirmPayment(true); - return; + // const confirmPaymentHandle = () => () => { + useEffect(() => { + if (confirmPayment){ + HttpUtils.post({ + url: UrlUtils.POST_CHECK_APP_EXPRITY_DATE, + params: { + ids: appIds + }, + onSuccess: (responData) => { + if (responData.success == true) { + setAfterConfirmPayment(true); + return; + } + let str = ""; + responData.msg.forEach((item) => { + str += "App: " + item.appNo + ", 到期日: " + DateUtils.datetimeStr_Cht(item.expiryDate) + "\n"; + }); + setExpiryDateErrText(str.split('\n').map(str => <>{str}
)); + setExpiryDateErr(true); } - let str = ""; - responData.msg.forEach((item) => { - str += "App: " + item.appNo + ", 到期日: " + DateUtils.datetimeStr_Cht(item.expiryDate) + "\n"; - }); - setExpiryDateErrText(str.split('\n').map(str => <>{str}
)); - setExpiryDateErr(true); - } - }); - }; + }); + } + }, [confirmPayment]); const getMethodImgClass = (method) => { return selectedPaymentMethod == method || selectedPaymentMethod == "" ? "" : "grayscale"; @@ -409,140 +413,27 @@ const Index = () => { {/*row 1*/} - + - - - - -
- - - 交易參考號: {transactionData.transactionid} - - - - 支付金額: HK$ {FormatUtils.currencyFormat(totalAmount)} - - - {/* */} - - - - - - 付款金額: - - - - - {"HK$ " + FormatUtils.currencyFormat(totalAmount)} - - - - - - {availableMethods.length > 0 ? - !onReady ? - : - - - - - 請選擇付款方式: - - - - - - - - - - - - - - - - - - - - - - {selectedPaymentMethod != "" ? - - - - - 已選擇付款方式: - - - - - {selectedPaymentMethod} - - - - - : null} - - : - - - 付款功能現在不可用。 - - - } - -
- - {/* */} - - - - + + + + {/*row 2*/}
@@ -561,6 +452,20 @@ const Index = () => {
+ ); } diff --git a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js index 6e225bc..7f35bb0 100644 --- a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js +++ b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js @@ -40,10 +40,10 @@ export default function SubmittedTab({ rows }) { // console.log(rows) // console.log(careOfList) setRowList(rows) - const formattedData = rows.filter(obj => obj.careOf !== null).map((obj, index) => ({ + const formattedData = Array.from(new Set(rows.filter(obj => obj.careOf !== null).map(obj => obj.careOf))).map((careOf, index) => ({ key: index, - id: obj.id, - label: obj.careOf, + id: rows.find(obj => obj.careOf === careOf).id, + label: careOf })); // console.log(formattedData) setCareOfList(formattedData) @@ -57,7 +57,15 @@ export default function SubmittedTab({ rows }) { React.useEffect(() => { if (selectedCareOf != null) { const afteSelectedList = []; - afteSelectedList.push(rows.find(obj => obj.id === selectedCareOf.id)); + console.log(rows) + console.log(selectedCareOf) + rows.forEach((element) => { + if (element.careOf===selectedCareOf.label){ + afteSelectedList.push(element) + } + }); + // afteSelectedList.push(rows.find(obj => obj.careOf ===(selectedCareOf.label))); + console.log(afteSelectedList) setRowList(afteSelectedList) } else { setRowList(rows) diff --git a/src/utils/Utils.js b/src/utils/Utils.js index ad2629d..bb33e6f 100644 --- a/src/utils/Utils.js +++ b/src/utils/Utils.js @@ -120,3 +120,14 @@ export const minuteDiff = (nowDate, createdAtDate) => { diff /= 60 return Math.abs(Math.ceil(diff)) } + +export const gazetteLength = (length,noOfPages) => { + let countLength=0; + if (noOfPages!==null){ + let pages = noOfPages + countLength = pages*18 + }else{ + countLength = length + } + return countLength+" cm" +}