cancel using window selecting payment method

src/pages/Payment/FPS/FPS.js

@@ -104,6 +104,11 @@ const Index = () => {
         // setFpsmerchanttimeoutdatetime(convertedDateString)
         // setPaymentid("C202310268000681")
         // setPaymentstatuscode("APPR")
+        localStorage.removeItem("transactionid")
+        localStorage.removeItem("webtoken")
+        localStorage.setItem("transactionid", paymentData.transactionid)
+        localStorage.setItem("webtoken", paymentData.webtoken)
+        
         HttpUtils.post({
             url: paymentPath+loadPaymentUrl,
             params:{

src/pages/Payment/index.js

@@ -2,13 +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 {
     Button,
@@ -42,7 +43,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({});
@@ -53,6 +54,7 @@ const Index = () => {
     const [confirmPayment, setConfirmPayment] = useState(false);
 
     const [itemList, setItemList] = useState([]);
+    const [onReady, setOnReady] = useState(false);
 
     useEffect(() => {
         setAppIds(location.state?.appIdList ?? [])
@@ -67,26 +69,26 @@ const Index = () => {
             getAppList();
     },[appIds]);
 
-    const handleClose = () => {
-        // handleReset()
-        setOpen(false);
-        getTransactionId()
-        getAvailablePayment()
-    };
+    // const handleClose = () => {
+    //     // handleReset()
+    //     setOpen(false);
+    //     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) {
+    //         getTransactionId()
+    //         // setOpen(true)
+    //     }
+    // };
 
     useEffect(() => {
         if (confirmPayment) {
-            setOpen(false);
+            // setOpen(false);
             // let transactionid = "";
             // let webtoken = "";
 
@@ -336,6 +338,12 @@ const Index = () => {
         });
     }
 
+    useEffect(() => {
+        if(availableMethods.length > 0 && Object.keys(transactionData).length > 0){
+            setOnReady(true)
+        }
+    }, [transactionData,availableMethods]);
+
     const getAppList = () => {
         HttpUtils.post({
             url: UrlUtils.PAYMENT_APP_LIST,
@@ -347,7 +355,14 @@ const Index = () => {
             }
         });
     }
+
+    const selectedPaymentMethodHandle = (method) => () =>{
+        setSelectedPaymentMethod(method);
+    };
     
+    const confirmPaymentHandle = () => () =>{
+        setConfirmPayment(true);    
+    };
 
     return (
         <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
@@ -382,18 +397,100 @@ const Index = () => {
                                             支付金額: HK$ {FormatUtils.currencyFormat(totalAmount)}
                                         </Typography>
 
-                                        <Button
+                                        {/* <Button
                                                 component="span"
                                                 variant="contained"
                                                 size="large"
                                                 // color="error"
                                                 onClick={() => paymentClick()}
                                                 sx={{ mt: 4 }}
-                                            >選擇付款方式</Button>
+                                            >選擇付款方式</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>
+                                    {availableMethodData.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 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 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 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 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 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 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}
+                            {/* <MultiPaymentWindow open={open}
                                 handleCose={handleClose}
                                 availableMethods={availableMethods}
                                 transactionData={transactionData}
@@ -405,7 +502,7 @@ const Index = () => {
                                 setSelectedPaymentMethod={setSelectedPaymentMethod}
                                 selectedPaymentMethod={selectedPaymentMethod}
                                 setConfirmPayment={setConfirmPayment}
-                            />
+                            /> */}
                         </Box>
                     </Grid>
                 </Grid>