link to payment page

src/pages/Payment/index.js

@@ -4,7 +4,7 @@ import Loadable from 'components/Loadable';
 const MultiPaymentWindow = Loadable(React.lazy(() => import('./MultiPaymentWindow')));
 // const FPS = Loadable(React.lazy(() => import('./FPS')));
 import {useEffect, useState} from "react";
-import {useNavigate} from "react-router-dom";
+import {useNavigate, useLocation } from "react-router-dom";
 import {paymentPath} from "auth/utils";
 
 import {
@@ -29,6 +29,7 @@ const Index = () => {
     const getAvailablePaymentUrl = "/api/payment/availability";
     const getTransactionIdUrl = "/api/payment/transaction";
     const navigate = useNavigate()
+    const location = useLocation();
 
     // const local = {en:"en-us", zh:"zh-hk", cn:"zh-cn"};
     const preferpaymentmethods = ['visa','mastercard','pps','creditcard','fps'];
@@ -48,11 +49,15 @@ const Index = () => {
     const [confirmPayment, setConfirmPayment] = useState(false);
 
     useEffect(() => {
-        if(id > 0 ){
+        if(id<0)return;
+        if(location.state.amount > 0 ){
+            setTotalAmount(location.state.amount)
+        }else{
+            //fake
             setTotalAmount(2000)
-            getAvailablePayment()
-            getTransactionId()
         }
+        getAvailablePayment()
+        getTransactionId()
     }, []);
 
     const handleClose = () => {

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -6,19 +6,20 @@ import {
     Button,
     Dialog, DialogTitle, DialogContent, DialogActions
 } from '@mui/material';
-import {FiDataGrid} from "components/FiDataGrid";
+import { FiDataGrid } from "components/FiDataGrid";
 import * as DateUtils from "utils/DateUtils"
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SubmittedTab({ rows }) {
     const [selectedRowItems, setSelectedRowItems] = React.useState([]);
     const [isPopUp, setIsPopUp] = React.useState(false);
+    //const [amount, setAmount] = React.useState(0);
     const navigate = useNavigate()
 
     const handleDetailClick = (params) => () => {
-        navigate('/publicNotice/'+ params.id);
+        navigate('/publicNotice/' + params.id);
     };
 
     const columns = [
@@ -93,6 +94,7 @@ export default function SubmittedTab({ rows }) {
 
     const getWindowContent = () => {
         var content = [];
+        let totalAmount = 0;
         const datas = rows?.filter((row) =>
             selectedRowItems.includes(row.id)
         );
@@ -102,12 +104,30 @@ export default function SubmittedTab({ rows }) {
                 備註: {datas[i].remarks}
                 <br /><br />
             </>);
+
+            totalAmount += datas[i].fee;
         }
+        content.push(<>
+            總計金額: {totalAmount} <br /><br />
+        </>);
+        //setAmount(totalAmount);
         return content;
     }
 
     function handleRowDoubleClick(params) {
-        navigate('/publicNotice/'+ params.id);
+        navigate('/publicNotice/' + params.id);
+    }
+
+    function doPayment() {
+        setIsPopUp(false);
+        let totalAmount = 0;
+        const datas = rows?.filter((row) =>
+            selectedRowItems.includes(row.id)
+        );
+        for (var i = 0; i < datas?.length; i++) {
+            totalAmount += datas[i].fee;
+        }
+        navigate('/payment', { state: { amount: totalAmount } });
     }
 
     return (
@@ -142,7 +162,7 @@ export default function SubmittedTab({ rows }) {
                     </DialogContent>
                     <DialogActions>
                         <Button onClick={() => setIsPopUp(false)}>Close</Button>
-                         <Button onClick={() => setIsPopUp(false)}>確認</Button>
+                        <Button onClick={() => doPayment()}>確認</Button>
                     </DialogActions>
                 </Dialog>
             </div>