Extract country check to module

mollie · Dec 10, 2024 · 4bc5aa3 · 4bc5aa3
1 parent 2397fc1
commit 4bc5aa3
Showing 1 changed file with 69 additions and 51 deletions.
diff --git a/resources/js/blocks/molliePaymentMethod.js b/resources/js/blocks/molliePaymentMethod.js
@@ -1,12 +1,58 @@
+let cachedAvailableGateways = {};
+
+function useMollieAvailableGateways(billing, filters, ajaxUrl, jQuery, item) {
+    const { billingData: { country }, cartTotal: { value }, currency: { code } } = billing;
+    const [localGateways, setLocalGateways] = wp.element.useState(cachedAvailableGateways);
+
+    wp.element.useEffect(() => {
+        if (!country) return;
+        const currencyCode = code;
+        const cartTotal = value;
+        const currentFilterKey = currencyCode + "-" + filters.paymentLocale + "-" + country;
+        if (cachedAvailableGateways.hasOwnProperty(currentFilterKey)) {
+            console.log('Using cached available gateways:', cachedAvailableGateways);
+            setLocalGateways(cachedAvailableGateways);
+            return;
+        }
+        jQuery.ajax({
+            url: ajaxUrl,
+            method: 'POST',
+            data: {
+                action: 'mollie_checkout_blocks_canmakepayment',
+                currentGateway: item,
+                currency: currencyCode,
+                billingCountry: country,
+                cartTotal: cartTotal,
+                paymentLocale: filters.paymentLocale
+            },
+            success: (response) => {
+                cachedAvailableGateways = { ...cachedAvailableGateways, ...response.data };
+                setLocalGateways(cachedAvailableGateways);
+                console.log('Fetched available gateways:', cachedAvailableGateways);
+            },
+            error: (jqXHR, textStatus, errorThrown) => {
+                console.warn('Failed to fetch available gateways:', textStatus, errorThrown);
+            },
+        });
+    }, [billing, filters.paymentLocale, ajaxUrl, jQuery, item]);
+
+    return localGateways;
+}
 
 let onSubmitLocal
 let activePaymentMethodLocal
-let cachedAvailableGateways
 let creditCardSelected = new Event("mollie_creditcard_component_selected", {bubbles: true});
 const MollieComponent = (props) => {
-    let {onSubmit, activePaymentMethod, billing, item, useEffect, ajaxUrl, jQuery, emitResponse, eventRegistration, requiredFields, shippingData, isCompanyFieldVisible, isPhoneFieldVisible} = props
+    let {onSubmit, activePaymentMethod, billing, item, useEffect, ajaxUrl, jQuery, emitResponse, eventRegistration, requiredFields, shippingData, isCompanyFieldVisible, isPhoneFieldVisible, filters} = props
     const {  responseTypes } = emitResponse;
     const {onPaymentSetup, onCheckoutValidation} = eventRegistration;
+    const availableGateways = useMollieAvailableGateways(
+        billing,
+        filters,
+        ajaxUrl,
+        jQuery,
+        item
+    );
     const [ selectedIssuer, selectIssuer ] = wp.element.useState('');
     const [ inputPhone, selectPhone ] = wp.element.useState('');
     const [ inputBirthdate, selectBirthdate ] = wp.element.useState('');
@@ -272,17 +318,28 @@ const MollieComponent = (props) => {
 }
 
 const molliePaymentMethod = (useEffect, ajaxUrl, filters, gatewayData, availableGateways, item, jQuery, requiredFields, isCompanyFieldVisible, isPhoneFieldVisible) =>{
-    let billingCountry = filters.billingCountry
-    let cartTotal = filters.cartTotal
     cachedAvailableGateways = availableGateways
-    let changedBillingCountry = filters.billingCountry
+
     document.addEventListener('mollie_components_ready_to_submit', function () {
         onSubmitLocal()
     })
+    function creditcardSelectedEvent() {
+        if (item.name === "mollie_wc_gateway_creditcard") {
+            document.documentElement.dispatchEvent(creditCardSelected);
+        }
+    }
     return {
         name: item.name,
         label: <div dangerouslySetInnerHTML={{__html: item.label}}/>,
-        content: <MollieComponent item={item} useEffect={useEffect} ajaxUrl={ajaxUrl} jQuery={jQuery} requiredFields={requiredFields} isCompanyFieldVisible={isCompanyFieldVisible} isPhoneFieldVisible={isPhoneFieldVisible}/>,
+        content: <MollieComponent
+            item={item}
+            useEffect={useEffect}
+            ajaxUrl={ajaxUrl}
+            jQuery={jQuery}
+            requiredFields={requiredFields}
+            isCompanyFieldVisible={isCompanyFieldVisible}
+            isPhoneFieldVisible={isPhoneFieldVisible}
+            filters={filters}/>,
         edit: <div>{item.edit}</div>,
         paymentMethodId: item.paymentMethodId,
         canMakePayment: ({cartTotals, billingData}) => {
@@ -293,55 +350,16 @@ const molliePaymentMethod = (useEffect, ajaxUrl, filters, gatewayData, available
                 return true
             }
 
-            cartTotal = cartTotals?.total_price
-            if(billingData?.country && billingData.country !== ''){
-                billingCountry = billingData?.country
-            }
-            let currencyCode = cartTotals?.currency_code
-            let currentFilterKey = currencyCode + "-" + filters.paymentLocale + "-" + billingCountry
-
-            function creditcardSelectedEvent() {
-                if (item.name === "mollie_wc_gateway_creditcard") {
-                    document.documentElement.dispatchEvent(creditCardSelected);
-                }
-            }
-
-            if (billingCountry !== changedBillingCountry) {
-                changedBillingCountry = billingCountry
-                if (!cachedAvailableGateways.hasOwnProperty(currentFilterKey)) {
-                    jQuery.ajax({
-                        url: ajaxUrl,
-                        method: 'POST',
-                        data: {
-                            action: 'mollie_checkout_blocks_canmakepayment',
-                            currentGateway: item,
-                            currency: currencyCode,
-                            billingCountry: billingCountry,
-                            cartTotal: cartTotal,
-                            paymentLocale: filters.paymentLocale
-                        },
-                        complete: (jqXHR, textStatus) => {
-                        },
-                        success: (response, textStatus, jqXHR) => {
-                            cachedAvailableGateways = {...cachedAvailableGateways, ...response.data}
-                            if (!cachedAvailableGateways.hasOwnProperty(currentFilterKey)) {
-                                return false
-                            }
-                            return cachedAvailableGateways[currentFilterKey].hasOwnProperty(item.name)
-                        },
-                        error: (jqXHR, textStatus, errorThrown) => {
-                            console.warn(textStatus, errorThrown)
-                        },
-                    })
-                }
-            }
+            const currencyCode = cartTotals?.currency_code;
+            const country = billingData?.country;
+            const currentFilterKey = currencyCode + "-" + filters.paymentLocale + "-" + country;
 
+            creditcardSelectedEvent();
             if (!cachedAvailableGateways.hasOwnProperty(currentFilterKey)) {
-                return false
+                return false;
             }
-            creditcardSelectedEvent();
 
-            return cachedAvailableGateways[currentFilterKey].hasOwnProperty(item.name)
+            return cachedAvailableGateways[currentFilterKey].hasOwnProperty(item.name);
         },
         ariaLabel: item.ariaLabel,
         supports: {