Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI

src/pages/Payment/Card/index.js

@@ -40,7 +40,6 @@ const Index = () => {
 
     const [paymentData, setPaymentData] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
-    const [redirecturl, setRedirectUrl] = React.useState("");
     // const [paymentstatuscode, setPaymentstatuscode] = React.useState("");
     // const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState("");
     // const pasgPath = 'https://fps.payapps.hkicl.com.hk'; //PRD
@@ -59,15 +58,11 @@ const Index = () => {
 
     React.useEffect(() => {
         if (Object.keys(paymentData).length > 0){
+            setOnReady(true);
             loadForm();
         }
     }, [paymentData]);
 
-    React.useEffect(() => {
-        setOnReady(true);
-    }, [redirecturl]);
-
-
     const loadForm = () => {
         // const timeoutdatetime = "2023-10-26T09:04:30Z[UTC]"
         // const convertedDateString = timeoutdatetime.replace("[UTC]", "");
@@ -95,7 +90,7 @@ const Index = () => {
                 },
                 // "locale":"<locale>",
                 // "eserviceid":"<eserviceid>",
-                 "returnurl": window.location.hostname+"/payment/success"
+                 "returnurl": window.location.hostname+"/paymentPage/success"
             },
             onSuccess: function(responseData){
                 /*
@@ -104,8 +99,7 @@ const Index = () => {
                          "redirecturl": "<redirecturl>"
                     }
                 */
-               setRedirectUrl(responseData.redirecturl);
-               window.open(redirecturl);
+               window.open(responseData.redirecturl);
             }
         });
     }

src/pages/Payment/FPS/FPS.js

@@ -163,10 +163,10 @@ const Index = () => {
                 if (paymentstatuscode != "" && paymentstatuscode != "INPR" ){
                     if (paymentstatuscode === 'APPR') {
                         const timestamp = Date.now();
-                        navigate('/payment/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:paymentData.transactionid,webtoken:paymentData.webtoken, paymentid:responseData.paymentdetail.paymentid} });
+                        navigate('/paymentPage/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:paymentData.transactionid,webtoken:paymentData.webtoken, paymentid:responseData.paymentdetail.paymentid} });
                     } else if (paymentstatuscode === 'CANC') {
                         // window.top.location.href = paymentPath + payment.config.indexPagePath;
-                        navigate('/payment');
+                        navigate('/paymentPage');
                     } else {
                         // window.top.location.href = paymentPath + payment.config.errPagePath;
                         alert("ERROR")

src/pages/Payment/PaymentSuccess.js

@@ -65,7 +65,7 @@ const Index = () => {
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事： 付款</Typography>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：完成付款</Typography>
                             </Stack>
                         </div>
                     </Grid>
@@ -73,10 +73,7 @@ const Index = () => {
                     <Grid item xs={12} md={12} >
                         <Grid container justifyContent="flex-start" alignItems="center" >
                             <center>
-                                <Grid item xs={12} md={8} >
-                                    <Typography variant="h2" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
-                                        公共啟事：完成付款
-                                    </Typography>
+                                <Grid item xs={12} md={12} >
 
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
                                         付款成功

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,12 @@ const Index = () => {
     const [confirmPayment, setConfirmPayment] = useState(false);
 
     useEffect(() => {
-        if(id > 0 ){
-            setTotalAmount(2000)
-            getAvailablePayment()
-            getTransactionId()
-        }
+        if(id<0)return;
+        let amount = location.state?.amount??2000;
+      
+        setTotalAmount(amount)
+        getAvailablePayment()
+        getTransactionId()
     }, []);
 
     const handleClose = () => {
@@ -78,18 +80,18 @@ const Index = () => {
             // let webtoken = "";
 
             if(selectedPaymentMethod === "FPS"){
-                navigate('/payment/fps', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken} });
+                navigate('/paymentPage/fps', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken} });
                 // navigate('/payment/fps', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken} });
             }else if(selectedPaymentMethod ==="Visa"){
-                navigate('/payment/card', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"Visa", paymentMethod:"02,BCMP,CreditCard"} });
+                navigate('/paymentPage/card', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"Visa", paymentMethod:"02,BCMP,CreditCard"} });
             }else if(selectedPaymentMethod ==="Mastercard"){
-                navigate('/payment/card', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"Mastercard", paymentMethod:"02,BCMP,CreditCard"} });
+                navigate('/paymentPage/card', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"Mastercard", paymentMethod:"02,BCMP,CreditCard"} });
             }else if(selectedPaymentMethod ==="UnionPay" ){
-                navigate('/payment/card', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"UnionPay", paymentMethod:"03,BCMP,CreditCard"} });
+                navigate('/paymentPage/card', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"UnionPay", paymentMethod:"03,BCMP,CreditCard"} });
             }else if(selectedPaymentMethod ==="JCB"){
-                navigate('/payment/card', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"JCB", paymentMethod:"03,BCMP,CreditCard"} });
+                navigate('/paymentPage/card', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"JCB", paymentMethod:"03,BCMP,CreditCard"} });
             }else if(selectedPaymentMethod ==="PPS"){
-                navigate('/payment/card', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"PPS", paymentMethod:"01,PPSB,PPS"} });
+                navigate('/paymentPage/card', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken, type:"PPS", paymentMethod:"01,PPSB,PPS"} });
             }
             
         }

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('/paymentPage', { 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>

src/routes/PublicUserRoutes.js

@@ -67,27 +67,27 @@ const PublicDashboard = {
           element: <ProofPayment/>
         },
         {
-          path: 'payment',
+          path: 'paymentPage',
           element: <Payment_Multi/>
         },
         {
-          path: 'payment/fps',
+          path: 'paymentPage/fps',
           element: <Payment_FPS/>
         },
         {
-          path: 'payment/card',
+          path: 'paymentPage/card',
           element: <Payment_Card/>
         },
         {
-          path: 'payment/success',
+          path: 'paymentPage/success',
           element: <Payment_Success/>
         },
         {
-          path: 'payment/fps/fpscallback',
+          path: 'paymentPage/fps/fpscallback',
           element: <Payment_FPS_CallBack/>
         },
         {
-          path: 'payment/fps/ackpage',
+          path: 'paymentPage/fps/ackpage',
           element: <Payment_FPS_Ackpage/>
         },
       ]