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
Unified 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 React from 'react';
import * as FormatUtils from "utils/FormatUtils" import * as FormatUtils from "utils/FormatUtils"
import { FiDataGrid } from "components/FiDataGrid"; import { FiDataGrid } from "components/FiDataGrid";
import * as DateUtils from "utils/DateUtils"
import * as Utils from "utils/Utils"
// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


export default function SearchPublicNoticeTable({ recordList }) { export default function SearchPublicNoticeTable({ recordList }) {
@@ -15,7 +17,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
const [total, setTotal] = React.useState(0); const [total, setTotal] = React.useState(0);


React.useEffect(() => { React.useEffect(() => {
setRows(recordList);
const indexedData = recordList.map((obj, index) => ({ index_number: index + 1, ...obj }));
setRows(indexedData);
let countTotal = 0; let countTotal = 0;
recordList.forEach(item => { recordList.forEach(item => {
countTotal+=item.fee; countTotal+=item.fee;
@@ -25,20 +28,34 @@ export default function SearchPublicNoticeTable({ recordList }) {
}, [recordList]); }, [recordList]);


const columns = [ const columns = [
{
field: "id",
headerName: "No.",
filterable: false,
renderCell: (params) => {
return (params.row.index_number);

}
},
{ {
id: 'appNo', id: 'appNo',
field: 'appNo', field: 'appNo',
headerName: isORGLoggedIn()?'申請編號/Care Of/我的備註':'申請編號/我的備註',
headerName:'詳細',
flex: 1, flex: 1,
renderCell: (params) => { renderCell: (params) => {
let appNo = params.row.appNo; 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', id: 'fee',
field: 'fee', field: 'fee',
headerName: '費用 (HK$)',
headerName: '金額 ($)',
width: 150, width: 150,
valueGetter: (params) => { valueGetter: (params) => {
return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : ""; return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
@@ -50,7 +67,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
<div style={{ minHeight:400, width: '100%' }}> <div style={{ minHeight:400, width: '100%' }}>


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


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

@@ -15,7 +15,8 @@ import {
DialogContent, DialogContent,
DialogContentText, DialogContentText,
DialogTitle, DialogTitle,
Grid
Grid,
Box
} from '@mui/material'; } from '@mui/material';
import { useFormik, FormikProvider } from 'formik'; import { useFormik, FormikProvider } from 'formik';
import * as yup from 'yup'; import * as yup from 'yup';
@@ -97,8 +98,6 @@ const MultiPaymentWindow = (props) => {
if(props.selectedPaymentMethod === ""){ if(props.selectedPaymentMethod === ""){
setPaymentMethod("") setPaymentMethod("")
} }
setPaymentMethod
if(availableMethodData.length > 0){
setContent( setContent(
<Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start"> <Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
@@ -130,43 +129,43 @@ const MultiPaymentWindow = (props) => {
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={12}> <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"}> <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> </Button>
</Grid>
<Grid item>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active === "N"}> <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> </Button>
</Grid>
<Grid item>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={props.creditCardStatus.active === "N"}> <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> </Button>
</Grid>
<Grid item>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active === "N"}> <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> </Button>
</Grid>
<Grid item>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={props.unionPayStatus.active === "N"}> <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> </Button>
</Grid>
<Grid item>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N"}> <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> </Button>
</Grid>
</Grid> </Grid>
</Grid>
</Grid> </Grid>
{paymentMethod !=""? {paymentMethod !=""?
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
@@ -186,15 +185,6 @@ const MultiPaymentWindow = (props) => {
: null} : null}
</Grid> </Grid>
) )
}else{
setContent(
<Grid container direction="row" justifyContent="center" alignItems="center">
<FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
付款功能現在不可用。
</FormLabel>
</Grid>
)
}
}, [availableMethodData]); }, [availableMethodData]);


const formik = useFormik({ const formik = useFormik({
@@ -208,14 +198,14 @@ const MultiPaymentWindow = (props) => {
return ( return (
<Dialog <Dialog
open={props.open} open={props.open}
onClose={props.handleClose}
onClose={() => props.setOpen(false)}
fullWidth={true} fullWidth={true}
maxWidth={'xl'} maxWidth={'xl'}
> >
<DialogTitle > <DialogTitle >
<Grid container> <Grid container>
<Grid item> <Grid item>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
<Stack direction="row" justifyContent="flex-start" alignItems="center">
<Typography variant="h4"> <Typography variant="h4">
{windowTitle} {windowTitle}
</Typography> </Typography>
@@ -227,17 +217,55 @@ const MultiPaymentWindow = (props) => {
<form> <form>
<DialogContent> <DialogContent>
<DialogContentText> <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> </DialogContentText>
</DialogContent> </DialogContent>
</form> </form>
</FormikProvider> </FormikProvider>
<Stack direction="row" justifyContent="space-around"> <Stack direction="row" justifyContent="space-around">
<DialogActions> <DialogActions>
<Button variant="contained" onClick={props.handleClose} autoFocus >
<Button variant="contained" onClick={() => props.setOpen(false)} autoFocus >
取消 取消
</Button> </Button>
</DialogActions> </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 HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst"; import * as UrlUtils from "utils/ApiPathConst";
import Loadable from 'components/Loadable'; 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 DataGrid = Loadable(React.lazy(() => import('./Details_Public/DataGrid')));
// const FPS = Loadable(React.lazy(() => import('./FPS'))); // const FPS = Loadable(React.lazy(() => import('./FPS')));
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom"; import { useNavigate, useLocation } from "react-router-dom";
import { paymentPath } from "auth/utils"; 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 { import {
Button, Button,
@@ -20,13 +20,13 @@ import {
Dialog, DialogTitle, DialogContent, DialogActions, Dialog, DialogTitle, DialogContent, DialogActions,
} from '@mui/material'; } 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' import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
const BackgroundHead = { const BackgroundHead = {
@@ -52,7 +52,7 @@ const Index = () => {




//statusWindow //statusWindow
// const [open, setOpen] = useState(false);
const [open, setOpen] = useState(false);
const [availableMethods, setAvailableMethods] = useState([]); const [availableMethods, setAvailableMethods] = useState([]);
const [transactionData, setTransactionData] = useState({}); const [transactionData, setTransactionData] = useState({});
const [fpsStatus, setFPSStatus] = useState({}); const [fpsStatus, setFPSStatus] = useState({});
@@ -61,9 +61,10 @@ const Index = () => {
const [ppsStatus, setPPSStatus] = useState({}); const [ppsStatus, setPPSStatus] = useState({});
const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(""); const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("");
const [confirmPayment, setConfirmPayment] = useState(false); const [confirmPayment, setConfirmPayment] = useState(false);
const [afterConfirmPayment, setAfterConfirmPayment] = useState(false);


const [itemList, setItemList] = useState([]); const [itemList, setItemList] = useState([]);
const [onReady, setOnReady] = useState(false);
// const [onReady, setOnReady] = useState(false);


const [expiryDateErrText, setExpiryDateErrText] = React.useState(""); const [expiryDateErrText, setExpiryDateErrText] = React.useState("");
const [expiryDateErr, setExpiryDateErr] = React.useState(false); const [expiryDateErr, setExpiryDateErr] = React.useState(false);
@@ -71,9 +72,8 @@ const Index = () => {
useEffect(() => { useEffect(() => {
setAppIds(location.state?.appIdList ?? []) setAppIds(location.state?.appIdList ?? [])
setTotalAmount(location.state?.amount ?? 2000) setTotalAmount(location.state?.amount ?? 2000)
getAvailablePayment()
getTransactionId()

// getAvailablePayment()
// getTransactionId()
}, []); }, []);


useEffect(() => { useEffect(() => {
@@ -81,25 +81,26 @@ const Index = () => {
getAppList(); getAppList();
}, [appIds]); }, [appIds]);


// const handleClose = () => {
// const handleClose = () => {
// // handleReset() // // handleReset()
// setOpen(false); // 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(() => { useEffect(() => {
if (confirmPayment) {
if (afterConfirmPayment) {
// setOpen(false); // setOpen(false);
// let transactionid = ""; // let transactionid = "";
// let webtoken = ""; // let webtoken = "";
@@ -149,9 +150,9 @@ const Index = () => {
}); });
} }
} }
}, [confirmPayment]);
}, [afterConfirmPayment]);


const getAvailablePayment = () => {
const getAvailablePayment = () =>{
HttpUtils.post({ HttpUtils.post({
url: paymentPath + getAvailablePaymentUrl, url: paymentPath + getAvailablePaymentUrl,
params: { params: {
@@ -336,7 +337,7 @@ const Index = () => {
setPPSStatus(method) setPPSStatus(method)
} }
}); });
setOnReady(true)
// setOnReady(true)
} }
}, [availableMethods]); }, [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) => { const getMethodImgClass = (method) => {
return selectedPaymentMethod == method || selectedPaymentMethod == "" ? "" : "grayscale"; return selectedPaymentMethod == method || selectedPaymentMethod == "" ? "" : "grayscale";
@@ -409,140 +413,27 @@ const Index = () => {
{/*row 1*/} {/*row 1*/}
<Grid item xs={12} md={12} width="100%"> <Grid item xs={12} md={12} width="100%">
<Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" > <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' }} > <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
<DataGrid <DataGrid
recordList={itemList} recordList={itemList}
/> />
</Box> </Box>
</Grid> </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> </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> </Grid>
{/*row 2*/} {/*row 2*/}
<div> <div>
@@ -561,6 +452,20 @@ const Index = () => {
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</div> </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 > </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(rows)
// console.log(careOfList) // console.log(careOfList)
setRowList(rows) 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, key: index,
id: obj.id,
label: obj.careOf,
id: rows.find(obj => obj.careOf === careOf).id,
label: careOf
})); }));
// console.log(formattedData) // console.log(formattedData)
setCareOfList(formattedData) setCareOfList(formattedData)
@@ -57,7 +57,15 @@ export default function SubmittedTab({ rows }) {
React.useEffect(() => { React.useEffect(() => {
if (selectedCareOf != null) { if (selectedCareOf != null) {
const afteSelectedList = []; 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) setRowList(afteSelectedList)
} else { } else {
setRowList(rows) setRowList(rows)


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

@@ -120,3 +120,14 @@ export const minuteDiff = (nowDate, createdAtDate) => {
diff /= 60 diff /= 60
return Math.abs(Math.ceil(diff)) 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