hide payment method when over limit

src/pages/Payment/MultiPaymentWindow.js

@@ -73,10 +73,7 @@ const MultiPaymentWindow = (props) => {
   }, [props.transactionData]);
 
   useEffect(() => {
-    // console.log(props.availableMethods)
-    if(props.availableMethods.length > 0){
-      setLoadAvailableMethodData(props.availableMethods)
-    }
+    setLoadAvailableMethodData(props.availableMethods || [])
   }, [props.availableMethods]);
 
   useEffect(() => {
@@ -92,9 +89,7 @@ const MultiPaymentWindow = (props) => {
   }, [transactionData]);
 
   useEffect(() => {
-    if(loadAvailableMethodData.length > 0){
-        setAvailableMethodData(loadAvailableMethodData)
-    }
+    setAvailableMethodData(loadAvailableMethodData || [])
   }, [loadAvailableMethodData]);
 
   useEffect(() => {
@@ -298,6 +293,12 @@ const MultiPaymentWindow = (props) => {
     }),
   });
 
+  const showFps = props.fpsStatus?.active === "Y";
+  const showCreditCard = props.creditCardStatus?.active === "Y";
+  const showUnionPay = props.unionPayStatus?.active === "Y";
+  const showPps = props.ppsStatus?.active === "Y" && props.browserType !== mobileBrowser;
+  const hasVisiblePaymentMethod = showFps || showCreditCard || showUnionPay || showPps;
+
   return (
     <Dialog
       open={props.open}
@@ -336,7 +337,7 @@ const MultiPaymentWindow = (props) => {
                               </Typography> */}
                               {!props.onReady ?
                                   <LoadingComponent />
-                                  :availableMethodData.length>0?
+                                  :hasVisiblePaymentMethod?
                                     <Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">
                                       <Grid item xs={12} md={12}>
                                         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
@@ -346,40 +347,48 @@ const MultiPaymentWindow = (props) => {
                                               </Typography>
                                           </Grid>
                                           <Grid item sx={{display: { sm: 'block', md: 'none' }}}></Grid>
+                                          {showFps ?
                                           <Grid item>
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active !== "Y" || isPaying}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={isPaying}>
                                                   <img className={fpsClass} src={FpsIcon} width="80" height="80" alt="FPS"></img>
                                               </Button>
                                           </Grid>
+                                          : null}
+                                          {showCreditCard ?
                                           <Grid item>
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active !== "Y" || isPaying}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={isPaying}>
                                                   <img className={visaClass} src={VisaIcon} width="80" height="80" alt="Visa"></img>
                                               </Button>
                                           </Grid>
+                                          : null}
+                                          {showCreditCard ?
                                           <Grid item>
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("MasterCard")} disabled={props.creditCardStatus.active !== "Y" || isPaying}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("MasterCard")} disabled={isPaying}>
                                                   <img className={mastercardClass} src={MasterIcon} width="80" height="80" alt="MasterCard"></img>
                                               </Button>
                                           </Grid>
+                                          : null}
+                                          {showUnionPay ?
                                           <Grid item>
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active !== "Y" || isPaying}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={isPaying}>
                                                   <img className={unionPayClass} src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
                                               </Button>
                                           </Grid>
+                                          : null}
+                                          {showCreditCard ?
                                           <Grid item>
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={props.creditCardStatus.active !== "Y" || isPaying}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={isPaying}>
                                                   <img className={jCBClass} src={JcbIcon} width="80" height="80" alt="JCB"></img>
                                               </Button>
                                           </Grid>
+                                          : null}
+                                          {showPps ?
                                           <Grid item>
-                                            {props.browserType==mobileBrowser?
-                                              null
-                                            :
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active !== "Y" || isPaying}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={isPaying}>
                                                   <img className={pPSClass} src={PpsIcon} width="80" height="80" alt="PPS"></img>
                                               </Button>
-                                            }
                                           </Grid>
+                                          : null}
                                         </Grid>
                                       </Grid>
                                       {paymentMethod !=""?