From 3dfe086bebe04b6061b033c0c9434a2dec31e524 Mon Sep 17 00:00:00 2001 From: anna Date: Fri, 3 Nov 2023 17:50:30 +0800 Subject: [PATCH] load payment --- src/pages/Payment/Details_Public/DataGrid.js | 64 +++++++++ .../Payment/Details_Public/PaymentDetails.js | 135 ++++++++++++++++++ src/pages/Payment/Details_Public/index.js | 114 +++++++++++++++ src/pages/Payment/Search_Public/DataGrid.js | 39 +++-- src/pages/Payment/Search_Public/SearchForm.js | 6 +- src/pages/Payment/Search_Public/index.js | 2 +- src/routes/PublicUserRoutes.js | 5 + src/utils/ApiPathConst.js | 1 + src/utils/statusUtils/PaymentStatus.js | 25 ++++ 9 files changed, 363 insertions(+), 28 deletions(-) create mode 100644 src/pages/Payment/Details_Public/DataGrid.js create mode 100644 src/pages/Payment/Details_Public/PaymentDetails.js create mode 100644 src/pages/Payment/Details_Public/index.js create mode 100644 src/utils/statusUtils/PaymentStatus.js diff --git a/src/pages/Payment/Details_Public/DataGrid.js b/src/pages/Payment/Details_Public/DataGrid.js new file mode 100644 index 0000000..77b5469 --- /dev/null +++ b/src/pages/Payment/Details_Public/DataGrid.js @@ -0,0 +1,64 @@ +// material-ui +import { + Typography, +} from '@mui/material'; + +import * as React from 'react'; +import * as FormatUtils from "utils/FormatUtils" +import { FiDataGrid } from "components/FiDataGrid"; +// ==============================|| EVENT TABLE ||============================== // + +export default function SearchPublicNoticeTable({ recordList }) { + const [rows, setRows] = React.useState(recordList); + const [total, setTotal] = React.useState(0); + + React.useEffect(() => { + setRows(recordList); + let countTotal = 0; + recordList.forEach(item => { + countTotal+=item.fee; + }); + + setTotal(countTotal) + }, [recordList]); + + const columns = [ + { + id: 'appNo', + field: 'appNo', + headerName: '申請編號/我的備註', + flex: 1, + renderCell: (params) => { + let appNo = params.row.appNo; + return
{appNo}
{params.row.remarks}
+ }, + }, + { + id: 'fee', + field: 'fee', + headerName: '費用 (HK$)', + width: 150, + valueGetter: (params) => { + return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : ""; + } + }, + ]; + + return ( +
+ + + + 付款總額: HK$ {FormatUtils.currencyFormat(total)} +
+ ); +} diff --git a/src/pages/Payment/Details_Public/PaymentDetails.js b/src/pages/Payment/Details_Public/PaymentDetails.js new file mode 100644 index 0000000..666e32b --- /dev/null +++ b/src/pages/Payment/Details_Public/PaymentDetails.js @@ -0,0 +1,135 @@ +// material-ui +import { + Grid, + Typography, + FormLabel, +} from '@mui/material'; + +import * as React from "react"; +import * as FormatUtils from "utils/FormatUtils"; +import Loadable from 'components/Loadable'; +const MainCard = Loadable(React.lazy(() => import('components/MainCard'))); +const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); +// ==============================|| DASHBOARD - DEFAULT ||============================== // +const PaymentDetails = ({ formData, }) => { + + const [data, setData] = React.useState({}); + const [onReady, setOnReady] = React.useState(false); + + React.useEffect(() => { + if (formData != null && formData != undefined && Object.keys(formData).length > 0) { + setData(formData); + } + }, [formData]); + + React.useEffect(() => { + if (formData != null && formData != undefined && Object.keys(formData).length > 0) { + setOnReady(data != {}); + } + }, [data]); + + + return ( + !onReady ? + + : + + + 付款詳情 + +
+ + + + + + 交易號碼: + + + + + {data.payload?.transactionid} + + + + + + + + + 交易日期: + + + + + {data.transDateStr + " (DD/MM/YYYY)"} + + + + + + + + + 交易時間: + + + + + {data.transTimeStr + " (HH:MI:SS)"} + + + + + + + + + 付款參考號碼: + + + + + {data.egisRefNo} + + + + + + + + + 付款總額: + + + + + {"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)} + + + + + + + + + 付款方式: + + + + + {data.payload?.paymentdetail?.subtype ?? (data.payload.paymentdetail.paymentmethod === "01" ? "PPS" : "")} + + + + + +
+ + ); +}; + +export default PaymentDetails; diff --git a/src/pages/Payment/Details_Public/index.js b/src/pages/Payment/Details_Public/index.js new file mode 100644 index 0000000..d6d5dca --- /dev/null +++ b/src/pages/Payment/Details_Public/index.js @@ -0,0 +1,114 @@ +// material-ui +import { + Grid, + Typography, + Stack, + Box +} from '@mui/material'; +import * as UrlUtils from "utils/ApiPathConst"; +import * as React from "react"; +import * as HttpUtils from "utils/HttpUtils"; +import * as DateUtils from "utils/DateUtils"; +import { useParams } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; + +import Loadable from 'components/Loadable'; +const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); +const PaymentDetails = Loadable(React.lazy(() => import('./PaymentDetails'))); +const DataGrid = Loadable(React.lazy(() => import('./DataGrid'))); +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' +const BackgroundHead = { + backgroundImage: `url(${titleBackgroundImg})`, + width: '100%', + height: '100%', + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundColor: '#0C489E', + backgroundPosition: 'right' +} + +// ==============================|| DASHBOARD - DEFAULT ||============================== // + +const Index = () => { + const params = useParams(); + const navigate = useNavigate() + + const [record, setRecord] = React.useState(); + const [itemList, setItemList] = React.useState([]); + const [onReady, setOnReady] = React.useState(false); + + React.useEffect(() => { + loadForm(); + }, []); + + React.useEffect(() => { + setOnReady(true); + }, [record]); + + + const loadForm = () => { + if (params.id > 0) { + + HttpUtils.get({ + url: UrlUtils.PAYMENT_LOAD + "/" + params.id, + onSuccess: (responseData) => { + if (!responseData.data?.id) { + navigate("/paymentPage/search"); + } + responseData.data["transDateStr"] = DateUtils.dateFormat(responseData.data.transDateTime, "DD/MM/YYYY"); + responseData.data["transTimeStr"] = DateUtils.dateFormat(responseData.data.transDateTime, "HH:mm:ss"); + setItemList(responseData.paymentItemList) + setRecord(responseData.data); + } + }); + } + } + + return ( + !onReady ? + + : + ( + + +
+ + 付款詳情 + +
+ + {/*row 1*/} + + + + + + + + + + + + + + + {/*row 2*/} + + + + ) + + + ); +}; + +export default Index; diff --git a/src/pages/Payment/Search_Public/DataGrid.js b/src/pages/Payment/Search_Public/DataGrid.js index 5e81d49..9578ef0 100644 --- a/src/pages/Payment/Search_Public/DataGrid.js +++ b/src/pages/Payment/Search_Public/DataGrid.js @@ -5,6 +5,7 @@ import { } from '@mui/material'; import * as DateUtils from "utils/DateUtils"; import * as FormatUtils from "utils/FormatUtils" +import * as PaymentStatus from "utils/statusUtils/PaymentStatus" import { useNavigate } from "react-router-dom"; import { FiDataGrid } from "components/FiDataGrid"; // ==============================|| EVENT TABLE ||============================== // @@ -18,33 +19,32 @@ export default function SearchPublicNoticeTable({ recordList }) { }, [recordList]); const handleEditClick = (params) => () => { - navigate('/proof/reply/' + params.row.id); + navigate('/paymentPage/details/' + params.row.id); }; - const columns = [ { field: 'actions', headerName: '付款編號', - width: 150, + flex: 1, cellClassName: 'actions', renderCell: (params) => { - return ; + return ; }, }, { - id: 'appId', - field: 'appId', + id: 'appNos', + field: 'appNos', headerName: '申請編號', flex: 1, renderCell: (params) => { - let appNo = params.row.appNo; + let appNo = params.row.appNos; return
{appNo}
}, }, { - id: 'created', - field: 'created', + id: 'transDateTime', + field: 'transDateTime', headerName: '付款日期', flex: 1, valueGetter: (params) => { @@ -52,29 +52,24 @@ export default function SearchPublicNoticeTable({ recordList }) { } }, { - id: 'status', - field: 'status', + field: 'action', headerName: '付款狀況', - flex: 1, - valueGetter: (params) => { - return DateUtils.datetimeStr(params?.value); + width: 150, + renderCell: (params) => { + return PaymentStatus.getStatus_Cht(params); } }, { - id: 'fee', - field: 'fee', + id: 'payAmount', + field: 'payAmount', headerName: '費用', - flex: 1, + width: 150, valueGetter: (params) => { return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : ""; } }, ]; - function handleRowDoubleClick(params) { - navigate('/proof/reply/' + params.row.id); - } - return (
@@ -87,7 +82,7 @@ export default function SearchPublicNoticeTable({ recordList }) { paginationModel: { page: 0, pageSize: 5 }, }, }} - onRowDoubleClick={handleRowDoubleClick} + onRowDoubleClick={handleEditClick} />
); diff --git a/src/pages/Payment/Search_Public/SearchForm.js b/src/pages/Payment/Search_Public/SearchForm.js index 2f2af85..a3890bf 100644 --- a/src/pages/Payment/Search_Public/SearchForm.js +++ b/src/pages/Payment/Search_Public/SearchForm.js @@ -20,10 +20,6 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => { const { reset, register, handleSubmit } = useForm() const onSubmit = (data) => { - let typeArray = []; - for (let i = 0; i < type.length; i++) { - typeArray.push(type[i].label); - } const temp = { code: data.code, dateFrom: data.dateFrom, @@ -58,7 +54,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => { fullWidth {...register("code")} id='code' - label="申請編號:" + label="申請/付款編號:" defaultValue={searchCriteria.code} InputLabelProps={{ shrink: true diff --git a/src/pages/Payment/Search_Public/index.js b/src/pages/Payment/Search_Public/index.js index 50a1445..338e140 100644 --- a/src/pages/Payment/Search_Public/index.js +++ b/src/pages/Payment/Search_Public/index.js @@ -47,7 +47,7 @@ const Index = () => { function loadGrid(){ HttpUtils.get({ - url: UrlUtils.LIST_PROOF, + url: UrlUtils.PAYMENT_LIST, params: searchCriteria, onSuccess: function(responseData){ setRecord(responseData); diff --git a/src/routes/PublicUserRoutes.js b/src/routes/PublicUserRoutes.js index c30566f..9035b50 100644 --- a/src/routes/PublicUserRoutes.js +++ b/src/routes/PublicUserRoutes.js @@ -21,6 +21,7 @@ const Payment_FPS_Ackpage = Loadable(lazy(() => import('pages/Payment/FPS/AckPag const Payment_Card = Loadable(lazy(() => import('pages/Payment/Card'))); const Payment_Callback = Loadable(lazy(() => import('pages/Payment/PaymentCallback'))); const PaymentSearch_Public = Loadable(lazy(() => import('pages/Payment/Search_Public'))); +const PaymentDetails_Public = Loadable(lazy(() => import('pages/Payment/Details_Public'))); // ==============================|| MAIN ROUTING ||============================== // @@ -95,6 +96,10 @@ const PublicDashboard = { path: 'paymentPage/search', element: }, + { + path: 'paymentPage/details/:id', + element: + }, ] }, ] diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js index e31dd23..bc2f867 100644 --- a/src/utils/ApiPathConst.js +++ b/src/utils/ApiPathConst.js @@ -84,6 +84,7 @@ export const GET_PROOF_PAY = apiPath+'/proof/pay-details';//GET export const PAYMENT_CREATE = apiPath+'/payment/create';//POST export const PAYMENT_SAVE = apiPath+'/payment/save';//POST export const PAYMENT_LIST = apiPath+'/payment/list';//GET +export const PAYMENT_LOAD = apiPath+'/payment/load';//GET diff --git a/src/utils/statusUtils/PaymentStatus.js b/src/utils/statusUtils/PaymentStatus.js new file mode 100644 index 0000000..e177d8b --- /dev/null +++ b/src/utils/statusUtils/PaymentStatus.js @@ -0,0 +1,25 @@ +import {getStatusTag} from "utils/statusUtils/Base"; + +const APPR = {color:"#22a13f", eng:"Success", cht:"成功"} +const REJT = {color:"#d9372b", eng:"Reject", cht:"拒絕"} +const CANC = {color:"#8a8784", eng:"Cancelled", cht:"取消"} +const INPR = {color:"#f5a83d", eng:"In Progress", cht:"進行中"} + +export function getStatus_Cht(params) { + let status = getStatus(params); + return getStatusTag({color: status.color, text:status.cht }) +} + +export function getStatus_Eng(params) { + let status = getStatus(params); + return getStatusTag({color: status.color, text:status.eng }) +} + +function getStatus(params) { + let status = params.row?params.row.status:params; + if(status == "APPR") return APPR; + if(status == "REJT") return REJT; + if(status == "CANC") return CANC; + if(status == "INPR") return INPR; +} +