fix payment limit check

src/pages/Payment/MultiPaymentWindow.js

@@ -346,27 +346,27 @@ const MultiPaymentWindow = (props) => {
                                           </Grid>
                                           <Grid item sx={{display: { sm: 'block', md: 'none' }}}></Grid>
                                           <Grid item>
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active === "N" || isPaying}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active !== "Y" || isPaying}>
                                                   <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" || isPaying}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active !== "Y" || isPaying}>
                                                   <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" || isPaying}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("MasterCard")} disabled={props.creditCardStatus.active !== "Y" || isPaying}>
                                                   <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" || isPaying}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active !== "Y" || isPaying}>
                                                   <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" || isPaying}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={props.creditCardStatus.active !== "Y" || isPaying}>
                                                   <img className={jCBClass} src={JcbIcon} width="80" height="80" alt="JCB"></img>
                                               </Button>
                                           </Grid>
@@ -374,7 +374,7 @@ const MultiPaymentWindow = (props) => {
                                             {props.browserType==mobileBrowser?
                                               null
                                             :
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N" || isPaying}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active !== "Y" || isPaying}>
                                                   <img className={pPSClass} src={PpsIcon} width="80" height="80" alt="PPS"></img>
                                               </Button>
                                             }

src/pages/Payment/index.js

@@ -106,6 +106,12 @@ const Index = () => {
         setTotalAmount(totalAmount);
         setSelectedPaymentMethod("")
         setConfirmPayment(false)
+        setOnReady(false)
+        setAvailableMethods([])
+        setFPSStatus({})
+        setCreditCardStatus({})
+        setUnionPayStatus({})
+        setPPSStatus({})
         if (totalAmount > 0) {
             getAvailablePayment()
             getTransactionId()
@@ -190,48 +196,97 @@ const Index = () => {
         }
     }, [afterConfirmPayment]);
 
-    const getAvailablePayment = () =>{
+    const filterPreferPaymentMethodsByLimit = (methods, amount, limits) => {
+        if (!methods) {
+            return [];
+        }
+        if (!limits) {
+            return methods;
+        }
+        return methods.filter((method) => {
+            const key = (method || "").toLowerCase();
+            let maxLimit;
+            if (key === "fps") {
+                maxLimit = limits.fpsLimitRecord?.maxLimit;
+            } else if (key === "pps" || key === "ppsb") {
+                maxLimit = limits.ppsbLimitRecord?.maxLimit;
+            } else if (key === "unionpay") {
+                maxLimit = limits.unionPlayLimitRecord?.maxLimit;
+            } else if (key === "visa" || key === "mastercard" || key === "jcb" || key === "creditcard") {
+                maxLimit = limits.creditCardLimitRecord?.maxLimit;
+            } else {
+                return true;
+            }
+            return maxLimit == null || amount <= maxLimit;
+        });
+    };
+
+    const filterAvailableMethodsByLimit = (methods, amount, limits) => {
+        if (!methods) {
+            return [];
+        }
+        if (!limits) {
+            return methods;
+        }
+        return methods.filter((method) => {
+            if (method.subtype === "FPS") {
+                return limits.fpsLimitRecord?.maxLimit == null || amount <= limits.fpsLimitRecord.maxLimit;
+            }
+            if (method.subtype === "PPS") {
+                return limits.ppsbLimitRecord?.maxLimit == null || amount <= limits.ppsbLimitRecord.maxLimit;
+            }
+            if (method.subtype === "CreditCard") {
+                const isUnionPay = method.supportedcard?.some((card) => card === "UnionPay");
+                if (isUnionPay) {
+                    return limits.unionPlayLimitRecord?.maxLimit == null || amount <= limits.unionPlayLimitRecord.maxLimit;
+                }
+                return limits.creditCardLimitRecord?.maxLimit == null || amount <= limits.creditCardLimitRecord.maxLimit;
+            }
+            return true;
+        });
+    };
+
+    const requestPaymentAvailability = (methods, limits) => {
         HttpUtils.post({
             url: UrlUtils.PAYMENT_AVAILABLE_PAYMENT,
             params: {
                 "locale": locale === 'en' ?local.en:locale === 'zh-HK' ?local.zh:local.cn,
                 "amount": totalAmount,
-                // "eserviceids": [
-                //     "<eserviceid>", "<eserviceid>"
-                // ],
-                "preferpaymentmethods": preferpaymentmethods
+                "preferpaymentmethods": methods
             },
             onSuccess: (responseData) => {
-                let availableMethods = responseData.availablepaymentmethods;
+                let availableMethods = filterAvailableMethodsByLimit(
+                    responseData.availablepaymentmethods || [], totalAmount, limits
+                );
                 setAvailableMethods(availableMethods);
-                HttpUtils.get({
-                    url: UrlUtils.PAYMENT_LIMIT_SETTING_LIST,
-                    params: {},
-                    onSuccess: (responseData) => {
-                        // console.log(responseData)
-                        setPaymentLimit(responseData)
-        
-                    },
-                    onError: () =>{
-                        // setOnReady(true)
-                    }
-                });
+                if (availableMethods.length === 0) {
+                    setOnReady(true)
+                }
             },
             onError: () =>{
                 setOnReady(true)
             }
         });
-        
+    };
+
+    const getAvailablePayment = () =>{
         HttpUtils.get({
             url: UrlUtils.PAYMENT_LIMIT_SETTING_LIST,
             params: {},
             onSuccess: (responseData) => {
-                // console.log(responseData)
                 setPaymentLimit(responseData)
-
+                const methodsWithinLimit = filterPreferPaymentMethodsByLimit(
+                    preferpaymentmethods, totalAmount, responseData
+                );
+                if (methodsWithinLimit.length === 0) {
+                    setAvailableMethods([])
+                    setOnReady(true)
+                    return;
+                }
+                requestPaymentAvailability(methodsWithinLimit, responseData);
             },
             onError: () =>{
-                // setOnReady(true)
+                requestPaymentAvailability(preferpaymentmethods);
             }
         });
 
@@ -383,7 +438,7 @@ const Index = () => {
                         setFPSStatus(method)
                     }
                 } else if (method.subtype === "CreditCard") {
-                    method.supportedcard.forEach((supportedcard) => {
+                    (method.supportedcard || []).forEach((supportedcard) => {
                         if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa") {
                             setCreditCardStatus(method)
                         } else {