From e5154e380a6d4c02e6c62cc6c579657a163c6a85 Mon Sep 17 00:00:00 2001
From: Alex Cheung <alex.cheung@2fi-solutions.com.hk>
Date: Thu, 21 Dec 2023 17:50:49 +0800
Subject: [PATCH] fix pop up payment window

---
 src/pages/Payment/MultiPaymentWindow.js | 188 ++++++++++++------------
 src/pages/Payment/index.js              |   5 +-
 2 files changed, 98 insertions(+), 95 deletions(-)

diff --git a/src/pages/Payment/MultiPaymentWindow.js b/src/pages/Payment/MultiPaymentWindow.js
index decee26..8c94675 100644
--- a/src/pages/Payment/MultiPaymentWindow.js
+++ b/src/pages/Payment/MultiPaymentWindow.js
@@ -40,21 +40,21 @@ const MultiPaymentWindow = (props) => {
   const [paymentMethod, setPaymentMethod] = useState("");
   const [transactionData, setTransactionData] = useState({});
   const [availableMethodData, setAvailableMethodData] = useState([]);
-  const [onReady, setOnReady] = useState(false);
+  // const [onReady, setOnReady] = useState(false);
 
   useEffect(() => {
     console.log(props.transactionData)
     if(Object.keys(props.transactionData).length > 0){
       setLoadtTransactionData(props.transactionData)
     }
-  }, []);
+  }, [props.transactionData]);
 
-  // useEffect(() => {
-  //   console.log(props.availableMethods)
-  //   if(props.availableMethods.length > 0){
-  //     setLoadAvailableMethodData(props.availableMethods)
-  //   }
-  // }, [props.availableMethods]);
+  useEffect(() => {
+    console.log(props.availableMethods)
+    if(props.availableMethods.length > 0){
+      setLoadAvailableMethodData(props.availableMethods)
+    }
+  }, [props.availableMethods]);
 
   useEffect(() => {
     if(Object.keys(loadtTransactionData).length > 0){
@@ -74,11 +74,11 @@ const MultiPaymentWindow = (props) => {
     }
   }, [loadAvailableMethodData]);
 
-  useEffect(() => {
-    if(availableMethodData.length > 0 && Object.keys(transactionData).length > 0){
-        setOnReady(true)
-    }
-  }, [availableMethodData]);
+  // useEffect(() => {
+  //   if(availableMethodData.length > 0 && Object.keys(transactionData).length > 0){
+  //       setOnReady(true)
+  //   }
+  // }, [availableMethodData]);
 
   useEffect(() => {
     console.log(paymentMethod)
@@ -98,93 +98,101 @@ const MultiPaymentWindow = (props) => {
     if(props.selectedPaymentMethod === ""){
       setPaymentMethod("")
     }
-    setContent(
-      <Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">
-        <Grid item xs={12} md={12}>
-          <Grid container >
-            <Grid item>
-              <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
-                交易參考編號:
-              </FormLabel>
-            </Grid>
-            <Grid item>
-              <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
-                {transactionData.transactionid}
-              </FormLabel>
-            </Grid>
-          </Grid>
-        </Grid>
-        <Grid item xs={12} md={12}>
-          <Grid container >
-            <Grid item>
-              <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
-                付款金額:
-              </FormLabel>
-            </Grid>
-            <Grid item>
-              <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
-                  {"HK$ "+FormatUtils.currencyFormat(props.totalAmount)}
-              </FormLabel>
-            </Grid>
-          </Grid>
-        </Grid>
-        <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={props.fpsStatus.active === "N"}>
-                    <img className={props.getMethodImgClass("FPS")} src={FpsIcon} width="80" height="80" alt="FPS"></img>
-                </Button>
-            </Grid>
-            <Grid item>
-                <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active === "N"}>
-                    <img className={props.getMethodImgClass("Visa")} src={VisaIcon} width="80" height="80" alt="Visa"></img>
-                </Button>
-            </Grid>
-            <Grid item>
-                <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={props.creditCardStatus.active === "N"}>
-                    <img className={props.getMethodImgClass("Mastercard")} src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
-                </Button>
-            </Grid>
-            <Grid item>
-                <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active === "N"}>
-                    <img className={props.getMethodImgClass("UnionPay")} src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
-                </Button>
-            </Grid>
-            <Grid item>
-                <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={props.unionPayStatus.active === "N"}>
-                    <img className={props.getMethodImgClass("JCB")} src={JcbIcon} width="80" height="80" alt="JCB"></img>
-                </Button>
-            </Grid>
-            <Grid item>
-                <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N"}>
-                    <img className={props.getMethodImgClass("PPS")} src={PpsIcon} width="80" height="80" alt="PPS"></img>
-                </Button>
+    if (availableMethodData.length>0){
+      setContent(
+        <Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">
+          {/* <Grid item xs={12} md={12}>
+            <Grid container >
+              <Grid item>
+                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                  交易參考編號:
+                </FormLabel>
+              </Grid>
+              <Grid item>
+                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                  {props.transactionData.transactionid}
+                </FormLabel>
+              </Grid>
             </Grid>
           </Grid>
-        </Grid>
-        {paymentMethod !=""?
           <Grid item xs={12} md={12}>
-            <Grid container direction="row" justifyContent="flex-start" alignItems="center">
+            <Grid container >
               <Grid item>
                 <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
-                  已選擇付款方式:
+                  付款金額:
                 </FormLabel>
               </Grid>
               <Grid item>
                 <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
-                  {paymentMethod}
+                    {"HK$ "+FormatUtils.currencyFormat(props.totalAmount)}
                 </FormLabel>
               </Grid>
             </Grid>
+          </Grid> */}
+          <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={props.fpsStatus.active === "N"}>
+                      <img className={props.getMethodImgClass("FPS")} src={FpsIcon} width="80" height="80" alt="FPS"></img>
+                  </Button>
+              </Grid>
+              <Grid item>
+                  <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active === "N"}>
+                      <img className={props.getMethodImgClass("Visa")} src={VisaIcon} width="80" height="80" alt="Visa"></img>
+                  </Button>
+              </Grid>
+              <Grid item>
+                  <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={props.creditCardStatus.active === "N"}>
+                      <img className={props.getMethodImgClass("Mastercard")} src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
+                  </Button>
+              </Grid>
+              <Grid item>
+                  <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active === "N"}>
+                      <img className={props.getMethodImgClass("UnionPay")} src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
+                  </Button>
+              </Grid>
+              <Grid item>
+                  <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={props.unionPayStatus.active === "N"}>
+                      <img className={props.getMethodImgClass("JCB")} src={JcbIcon} width="80" height="80" alt="JCB"></img>
+                  </Button>
+              </Grid>
+              <Grid item>
+                  <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N"}>
+                      <img className={props.getMethodImgClass("PPS")} src={PpsIcon} width="80" height="80" alt="PPS"></img>
+                  </Button>
+              </Grid>
+            </Grid>
           </Grid>
-        : null}
+          {paymentMethod !=""?
+            <Grid item xs={12} md={12}>
+              <Grid container direction="row" justifyContent="flex-start" alignItems="center">
+                <Grid item>
+                  <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                    已選擇付款方式:
+                  </FormLabel>
+                </Grid>
+                <Grid item>
+                  <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                    {paymentMethod}
+                  </FormLabel>
+                </Grid>
+              </Grid>
+            </Grid>
+          : null}
+        </Grid>
+      )
+    }else{
+      <Grid container direction="row" justifyContent="center" alignItems="center">
+        <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
+          付款功能現在不可用。
+        </FormLabel>
       </Grid>
-    )
+    }
   }, [availableMethodData]);
 
   const formik = useFormik({
@@ -229,15 +237,9 @@ const MultiPaymentWindow = (props) => {
                               <Typography variant="h5" sx={{ textAlign: "left" }}>
                                   支付金額: HK$ {FormatUtils.currencyFormat(props.totalAmount)}
                               </Typography>
-                              {availableMethodData > 0 ?
-                                !onReady ?
+                              {!props.onReady ?
                                   <LoadingComponent />
                                   :content
-                                  :<Grid container direction="row" justifyContent="center" alignItems="center">
-                                    <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
-                                      付款功能現在不可用。
-                                    </FormLabel>
-                                  </Grid>
                               }
                               
                         </Grid>
diff --git a/src/pages/Payment/index.js b/src/pages/Payment/index.js
index 5576a61..3134492 100644
--- a/src/pages/Payment/index.js
+++ b/src/pages/Payment/index.js
@@ -64,7 +64,7 @@ const Index = () => {
     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);
@@ -337,7 +337,7 @@ const Index = () => {
                     setPPSStatus(method)
                 }
             });
-            // setOnReady(true)
+            setOnReady(true)
         }
     }, [availableMethods]);
 
@@ -465,6 +465,7 @@ const Index = () => {
                 selectedPaymentMethod={selectedPaymentMethod}
                 setConfirmPayment={setConfirmPayment}
                 getMethodImgClass = {getMethodImgClass}
+                onReady = {onReady}
             />
         </Grid >
     );