From d815c631396ddf3b82603bc8fc16ec0b4c7e7316 Mon Sep 17 00:00:00 2001
From: Alex Cheung <alex.cheung@2fi-solutions.com.hk>
Date: Wed, 10 Jan 2024 18:17:43 +0800
Subject: [PATCH] fix select payment method bug

---
 src/pages/Payment/MultiPaymentWindow.js | 32 ++++++++++++++++++-------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/pages/Payment/MultiPaymentWindow.js b/src/pages/Payment/MultiPaymentWindow.js
index 46fdcfe..9525b53 100644
--- a/src/pages/Payment/MultiPaymentWindow.js
+++ b/src/pages/Payment/MultiPaymentWindow.js
@@ -40,6 +40,12 @@ const MultiPaymentWindow = (props) => {
   const [paymentMethod, setPaymentMethod] = useState("");
   const [transactionData, setTransactionData] = useState({});
   const [availableMethodData, setAvailableMethodData] = useState([]);
+  const [fpsClass, setFpsClass] = useState("");
+  const [visaClass, setVisaClass] = useState("");
+  const [mastercardClass, setMastercardClass] = useState("");
+  const [jCBClass, setJCBClass] = useState("");
+  const [unionPayClass, setUnionPayClass] = useState("");
+  const [pPSClass, setPPSlass] = useState("");
   // const [onReady, setOnReady] = useState(false);
 
   useEffect(() => {
@@ -82,6 +88,13 @@ const MultiPaymentWindow = (props) => {
 
   useEffect(() => {
     console.log(paymentMethod)
+    setFpsClass(paymentMethod == "FPS" || paymentMethod == "" ? "" : "grayscale")
+    setVisaClass(paymentMethod == "Visa" || paymentMethod == "" ? "" : "grayscale")
+    setMastercardClass(paymentMethod == "Mastercard" || paymentMethod == "" ? "" : "grayscale")
+    setJCBClass(paymentMethod == "JCB" || paymentMethod == "" ? "" : "grayscale")
+    setUnionPayClass(paymentMethod == "UnionPay" || paymentMethod == "" ? "" : "grayscale")
+    setPPSlass(paymentMethod == "PPS" || paymentMethod == "" ? "" : "grayscale")
+    // getMethodImgClass(paymentMethod)
   }, [paymentMethod]);
 
   const selectedPaymentMethodHandle = (method) => () =>{
@@ -93,9 +106,10 @@ const MultiPaymentWindow = (props) => {
       props.setConfirmPayment(true);
   };
 
-  const getMethodImgClass = (method) => {
-    return paymentMethod == method || paymentMethod == "" ? "" : "grayscale";
-  }
+  // const getMethodImgClass = (method) => () =>{
+  //   setPaymentMethodClass()
+  //   return paymentMethod == method || paymentMethod == "" ? "" : "grayscale";
+  // }
 
   useEffect(() => {
     if(props.selectedPaymentMethod === ""){
@@ -141,32 +155,32 @@ const MultiPaymentWindow = (props) => {
               </Grid>
               <Grid item>
                   <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active === "N"}>
-                      <img className={getMethodImgClass("FPS")} src={FpsIcon} width="80" height="80" alt="FPS"></img>
+                      <img className={fpsClass} 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={getMethodImgClass("Visa")} src={VisaIcon} width="80" height="80" alt="Visa"></img>
+                      <img className={visaClass} 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={getMethodImgClass("Mastercard")} src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
+                      <img className={mastercardClass} 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={getMethodImgClass("UnionPay")} src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
+                      <img className={unionPayClass} 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={getMethodImgClass("JCB")} src={JcbIcon} width="80" height="80" alt="JCB"></img>
+                      <img className={jCBClass} 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={getMethodImgClass("PPS")} src={PpsIcon} width="80" height="80" alt="PPS"></img>
+                      <img className={pPSClass} src={PpsIcon} width="80" height="80" alt="PPS"></img>
                   </Button>
               </Grid>
             </Grid>