alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add payment selection window

master
Alex Cheung 1 year ago
parent
510f509aa9
commit
1fb2e7da19
5 changed files with 200 additions and 231 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +22
    -5
      src/pages/Payment/Details_Public/DataGrid.js
  2. +71
    -43
      src/pages/Payment/MultiPaymentWindow.js
  3. +84
    -179
      src/pages/Payment/index.js
  4. +12
    -4
      src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
  5. +11
    -0
      src/utils/Utils.js

+ 22
- 5
src/pages/Payment/Details_Public/DataGrid.js View File

@@ -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 <div style={{ margin: 4 }}>{appNo}<br/>{isORGLoggedIn()?<>{params.row.careOf}<br /></>:null}{params.row.remarks}</div>
// console.log(params)
return <div style={{ margin: 4 }}>憲報第6號副刊公告<br/>
{isORGLoggedIn()?<>Care Of: {params.row.careOf}<br /></>:null}
申請編號: {appNo}<br/>
憲報日期: {DateUtils.dateStr_Cht(params.row.issueDate)}<br/>
長度: {Utils.gazetteLength(params.row.length, params.row.noOfPages)}</div>
},
},
{
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 }) {
<div style={{ minHeight:400, width: '100%' }}>

<FiDataGrid
rowHeight={80}
rowHeight={150}
rows={rows}
columns={columns}
initialState={{


+ 71
- 43
src/pages/Payment/MultiPaymentWindow.js View File

@@ -15,7 +15,8 @@ import {
DialogContent,
DialogContentText,
DialogTitle,
Grid
Grid,
Box
} from '@mui/material';
import { useFormik, FormikProvider } from 'formik';
import * as yup from 'yup';
@@ -97,8 +98,6 @@ const MultiPaymentWindow = (props) => {
if(props.selectedPaymentMethod === ""){
setPaymentMethod("")
}
setPaymentMethod
if(availableMethodData.length > 0){
setContent(
<Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">
<Grid item xs={12} md={12}>
@@ -130,43 +129,43 @@ const MultiPaymentWindow = (props) => {
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
付款方式:
</FormLabel>
</Grid>
<Grid item>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
請選擇付款方式:
</Typography>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active === "N"}>
<img src={FpsIcon} width="80" height="80" alt="FPS"></img>
<img className={props.getMethodImgClass("FPS")} src={FpsIcon} width="80" height="80" alt="FPS"></img>
</Button>
</Grid>
<Grid item>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active === "N"}>
<img src={VisaIcon} width="80" height="80" alt="Visa"></img>
<img className={props.getMethodImgClass("Visa")} src={VisaIcon} width="80" height="80" alt="Visa"></img>
</Button>
</Grid>
<Grid item>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={props.creditCardStatus.active === "N"}>
<img src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
<img className={props.getMethodImgClass("Mastercard")} src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
</Button>
</Grid>
<Grid item>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active === "N"}>
<img src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
<img className={props.getMethodImgClass("UnionPay")} src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
</Button>
</Grid>
<Grid item>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={props.unionPayStatus.active === "N"}>
<img src={JcbIcon} width="80" height="80" alt="JCB"></img>
<img className={props.getMethodImgClass("JCB")} src={JcbIcon} width="80" height="80" alt="JCB"></img>
</Button>
</Grid>
<Grid item>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N"}>
<img src={PpsIcon} width="80" height="80" alt="PPS"></img>
<img className={props.getMethodImgClass("PPS")} src={PpsIcon} width="80" height="80" alt="PPS"></img>
</Button>
</Grid>
</Grid>
</Grid>
</Grid>
{paymentMethod !=""?
<Grid item xs={12} md={12}>
@@ -186,15 +185,6 @@ const MultiPaymentWindow = (props) => {
: null}
</Grid>
)
}else{
setContent(
<Grid container direction="row" justifyContent="center" alignItems="center">
<FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
付款功能現在不可用。
</FormLabel>
</Grid>
)
}
}, [availableMethodData]);

const formik = useFormik({
@@ -208,14 +198,14 @@ const MultiPaymentWindow = (props) => {
return (
<Dialog
open={props.open}
onClose={props.handleClose}
onClose={() => props.setOpen(false)}
fullWidth={true}
maxWidth={'xl'}
>
<DialogTitle >
<Grid container>
<Grid item>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
<Stack direction="row" justifyContent="flex-start" alignItems="center">
<Typography variant="h4">
{windowTitle}
</Typography>
@@ -227,17 +217,55 @@ const MultiPaymentWindow = (props) => {
<form>
<DialogContent>
<DialogContentText>
{!onReady ?
<LoadingComponent />
:content
}
<Grid item xs={12} md={12} sx={{ pt: 2 }} style={{ height: '100%' }} width="100%">
<Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
<Grid container justifyContent="flex-start" alignItems="left" >
<center>
<Grid item xs={12} md={12} width="100%">
<Typography variant="h5" sx={{ textAlign: "left" }}>
交易參考號: {transactionData.transactionid}
</Typography>

<Typography variant="h5" sx={{ textAlign: "left" }}>
支付金額: HK$ {FormatUtils.currencyFormat(props.totalAmount)}
</Typography>
{availableMethodData > 0 ?
!onReady ?
<LoadingComponent />
:content
:<Grid container direction="row" justifyContent="center" alignItems="center">
<FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
付款功能現在不可用。
</FormLabel>
</Grid>
}
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
付款金額:
</Typography>
</Grid>
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
{"HK$ " + FormatUtils.currencyFormat(props.totalAmount)}
</Typography>
</Grid>
</Grid>
</Grid>
</center>
</Grid>
</Box>
</Grid>
</DialogContentText>
</DialogContent>
</form>
</FormikProvider>
<Stack direction="row" justifyContent="space-around">
<DialogActions>
<Button variant="contained" onClick={props.handleClose} autoFocus >
<Button variant="contained" onClick={() => props.setOpen(false)} autoFocus >
取消
</Button>
</DialogActions>


+ 84
- 179
src/pages/Payment/index.js View File

@@ -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}<br/></>));
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}<br/></>));
setExpiryDateErr(true);
}
});
};
});
}
}, [confirmPayment]);

const getMethodImgClass = (method) => {
return selectedPaymentMethod == method || selectedPaymentMethod == "" ? "" : "grayscale";
@@ -409,140 +413,27 @@ const Index = () => {
{/*row 1*/}
<Grid item xs={12} md={12} width="100%">
<Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
<Grid item xs={12} md={5} style={{ height: '100%' }}>
<Grid item xs={12} md={11} style={{ height: '100%' }}>
<Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
<DataGrid
recordList={itemList}
/>
</Box>
</Grid>
<Grid item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
<Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
<Grid container justifyContent="flex-start" alignItems="left" >

<center>
<Grid item xs={12} md={12} >
<Typography variant="h5" sx={{ textAlign: "left" }}>
交易參考號: {transactionData.transactionid}
</Typography>

<Typography variant="h5" sx={{ textAlign: "left" }}>
支付金額: HK$ {FormatUtils.currencyFormat(totalAmount)}
</Typography>

{/* <Button
component="span"
variant="contained"
size="large"
// color="error"
onClick={() => paymentClick()}
sx={{ mt: 4 }}
>選擇付款方式</Button> */}
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
付款金額:
</Typography>
</Grid>
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
{"HK$ " + FormatUtils.currencyFormat(totalAmount)}
</Typography>
</Grid>
</Grid>
</Grid>

{availableMethods.length > 0 ?
!onReady ?
<LoadingComponent /> :
<Grid item xs={12} md={12}>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
請選擇付款方式:
</Typography>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={fpsStatus.active === "N"}>
<img className={getMethodImgClass("FPS")} src={FpsIcon} width="80" height="80" alt="FPS"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={creditCardStatus.active === "N"}>
<img className={getMethodImgClass("Visa")} src={VisaIcon} width="80" height="80" alt="Visa"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={creditCardStatus.active === "N"}>
<img className={getMethodImgClass("Mastercard")} src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={unionPayStatus.active === "N"}>
<img className={getMethodImgClass("UnionPay")} src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={unionPayStatus.active === "N"}>
<img className={getMethodImgClass("JCB")} src={JcbIcon} width="80" height="80" alt="JCB"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={ppsStatus.active === "N"}>
<img className={getMethodImgClass("PPS")} src={PpsIcon} width="80" height="80" alt="PPS"></img>
</Button>
</Grid>
</Grid>
{selectedPaymentMethod != "" ?
<Grid item xs={12} md={12}>
<Grid container direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
已選擇付款方式:
</Typography>
</Grid>
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
{selectedPaymentMethod}
</Typography>
</Grid>
</Grid>
</Grid>
: null}
<Button variant="contained" size="large" color="success" onClick={confirmPaymentHandle()} disabled={selectedPaymentMethod === ""}>
確認
</Button>
</Grid> :
<Grid container direction="row" justifyContent="center" alignItems="center">
<Typography sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
付款功能現在不可用。
</Typography>
</Grid>
}

</center>
</Grid>
{/* <MultiPaymentWindow open={open}
handleCose={handleClose}
availableMethods={availableMethods}
transactionData={transactionData}
totalAmount={totalAmount}
fpsStatus={fpsStatus}
creditCardStatus={creditCardStatus}
unionPayStatus={unionPayStatus}
ppsStatus={ppsStatus}
setSelectedPaymentMethod={setSelectedPaymentMethod}
selectedPaymentMethod={selectedPaymentMethod}
setConfirmPayment={setConfirmPayment}
/> */}
</Box>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12} >

<Grid item xs={12} md={12} width="100%">
<Stack direction="row" justifyContent="flex-end" alignItems="flex-start" spacing={2} mr={12} >
<Button
component="span"
variant="contained"
size="large"
// color="error"
onClick={() => paymentClick()}
sx={{ mt: 4 }}
>付款
</Button>
</Stack>
</Grid>
{/*row 2*/}
<div>
@@ -561,6 +452,20 @@ const Index = () => {
</DialogActions>
</Dialog>
</div>
<MultiPaymentWindow open={open}
setOpen={setOpen}
availableMethods={availableMethods}
transactionData={transactionData}
totalAmount={totalAmount}
fpsStatus={fpsStatus}
creditCardStatus={creditCardStatus}
unionPayStatus={unionPayStatus}
ppsStatus={ppsStatus}
setSelectedPaymentMethod={setSelectedPaymentMethod}
selectedPaymentMethod={selectedPaymentMethod}
setConfirmPayment={setConfirmPayment}
getMethodImgClass = {getMethodImgClass}
/>
</Grid >
);
}


+ 12
- 4
src/pages/PublicNotice/ListPanel/PendingPaymentTab.js View File

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


+ 11
- 0
src/utils/Utils.js View File

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

Write Preview
Loading…
Cancel
Save