Split to bootstrap logic based on the button context

modules.local/ppcp-button/resources/js/button.js

@@ -1,115 +1,59 @@
-import Renderer from './modules/Renderer';
-import SingleProductConfig from './modules/SingleProductConfig';
-import UpdateCart from './modules/UpdateCart';
 import ErrorHandler from './modules/ErrorHandler';
 import CartConfig from './modules/CartConfig';
+import MiniCartBootstap from './modules/MiniCartBootstap';
+import SingleProductBootstap from './modules/SingleProductBootstap';
+import CartBootstrap from './modules/CartBootstap';
+import CheckoutBootstap from './modules/CheckoutBootstap';
 
-const bootstrap = ()=> {
+const bootstrap = () => {
     const context = PayPalCommerceGateway.context;
     const errorHandler = new ErrorHandler();
-    const defaultConfigurator = new CartConfig(
+    const defaultConfig = new CartConfig(
         PayPalCommerceGateway,
-        errorHandler
+        errorHandler,
     );
-    // Configure mini cart buttons
-    if (document.querySelector(PayPalCommerceGateway.button.mini_cart_wrapper)) {
 
-        const renderer = new Renderer(
+    if (context === 'mini-cart') {
-            PayPalCommerceGateway.button.mini_cart_wrapper
+        const miniCartBootstap = new MiniCartBootstap(defaultConfig);
-        );
+
-        renderer.render(defaultConfigurator.configuration())
+        miniCartBootstap.init();
     }
-    jQuery( document.body ).on( 'wc_fragments_loaded wc_fragments_refreshed', () => {
-        if (! document.querySelector(PayPalCommerceGateway.button.mini_cart_wrapper)) {
-            return;
-        }
-        const renderer = new Renderer(
-            PayPalCommerceGateway.button.mini_cart_wrapper
-        );
-        renderer.render(defaultConfigurator.configuration())
-    } );
 
-    // Configure checkout buttons
-    jQuery( document.body ).on( 'updated_checkout', () => {
-        if (document.querySelector(PayPalCommerceGateway.button.cancel_wrapper)) {
-            return;
-        }
-
-        const renderer = new Renderer(
-            PayPalCommerceGateway.button.wrapper
-        );
-        renderer.render(defaultConfigurator.configuration());
-
-        jQuery( document.body ).trigger( 'payment_method_selected' )
-    } );
-    jQuery( document.body ).on( 'payment_method_selected', () => {
-        // TODO: replace this dirty check, possible create a separate context config
-        const currentPaymentMethod = jQuery('input[name="payment_method"]:checked').val();
-
-        if (currentPaymentMethod !== 'ppcp-gateway') {
-            jQuery(PayPalCommerceGateway.button.wrapper).hide();
-            jQuery('#place_order').show();
-        } else {
-            jQuery(PayPalCommerceGateway.button.wrapper).show();
-            jQuery('#place_order').hide();
-        }
-    } );
-
-    // Configure context buttons
-    if (! document.querySelector(PayPalCommerceGateway.button.wrapper)) {
-        return;
-    }
-    const renderer = new Renderer(
-        PayPalCommerceGateway.button.wrapper
-    );
-    let configurator = null;
     if (context === 'product') {
-        if (! document.querySelector('form.cart')) {
+        const singleProductBootstap = new SingleProductBootstap();
-            return;
+        const miniCartBootstap = new MiniCartBootstap(defaultConfig);
-        }
+
-        const updateCart = new UpdateCart(
+        singleProductBootstap.init();
-            PayPalCommerceGateway.ajax.change_cart.endpoint,
+        miniCartBootstap.init();
-            PayPalCommerceGateway.ajax.change_cart.nonce
-        );
-        configurator = new SingleProductConfig(
-            PayPalCommerceGateway,
-            updateCart,
-            renderer.showButtons.bind(renderer),
-            renderer.hideButtons.bind(renderer),
-            document.querySelector('form.cart'),
-            errorHandler
-        );
     }
+
     if (context === 'cart') {
-        configurator = defaultConfigurator;
+        const cartBootstrap = new CartBootstrap(defaultConfig);
 
-        jQuery( document.body ).on( 'updated_cart_totals updated_checkout', () => {
+        cartBootstrap.init();
-            renderer.render(configurator.configuration())
-        });
-    }
-    if (! configurator) {
-        console.error('No context for button found.');
-        return;
     }
 
-    renderer.render(configurator.configuration());
+    if (context === 'checkout') {
-}
+        const checkoutBootstap = new CheckoutBootstap(defaultConfig);
+
+        checkoutBootstap.init();
+    }
+};
 document.addEventListener(
     'DOMContentLoaded',
     () => {
-
+        if (!typeof (PayPalCommerceGateway)) {
-        if (! typeof(PayPalCommerceGateway)) {
             console.error('PayPal button could not be configured.');
             return;
         }
 
         const script = document.createElement('script');
+
         script.setAttribute('src', PayPalCommerceGateway.button.url);
         script.addEventListener('load', (event) => {
             bootstrap();
-        })
+        });
+
         document.body.append(script);
-
+    },
-
-    }
 );

modules.local/ppcp-button/resources/js/modules/CartBootstap.js

@@ -0,0 +1,25 @@
+import Renderer from './Renderer';
+
+class CartBootstrap {
+    constructor(configurator) {
+        this.configurator = configurator;
+    }
+
+    init() {
+        const buttonWrapper = PayPalCommerceGateway.button.wrapper;
+
+        if (!document.querySelector(buttonWrapper)) {
+            return;
+        }
+
+        const renderer = new Renderer(buttonWrapper);
+
+        jQuery(document.body).on('updated_cart_totals updated_checkout', () => {
+            renderer.render(this.configurator.configuration());
+        });
+
+        renderer.render(this.configurator.configuration());
+    }
+}
+
+export default CartBootstrap;

modules.local/ppcp-button/resources/js/modules/CheckoutBootstap.js

@@ -0,0 +1,48 @@
+import Renderer from './Renderer';
+
+class CheckoutBootstap {
+    constructor(configurator) {
+        this.configurator = configurator;
+    }
+
+    init() {
+        const buttonWrapper = PayPalCommerceGateway.button.wrapper;
+        const cancelWrapper = PayPalCommerceGateway.button.cancel_wrapper;
+
+        if (!document.querySelector(buttonWrapper)) {
+            return;
+        }
+
+        const renderer = new Renderer(buttonWrapper);
+
+        jQuery(document.body).on('updated_checkout', () => {
+            if (document.querySelector(cancelWrapper)) {
+                return;
+            }
+
+            renderer.render(this.configurator.configuration());
+
+            jQuery(document.body).trigger('payment_method_selected');
+        });
+
+        jQuery(document.body).on('payment_method_selected', () => {
+            // TODO: replace this dirty check, possible create a separate
+            // context config
+            const currentPaymentMethod = jQuery(
+                'input[name="payment_method"]:checked').val();
+
+            if (currentPaymentMethod !== 'ppcp-gateway') {
+                jQuery(buttonWrapper).hide();
+                jQuery('#place_order').show();
+            }
+            else {
+                jQuery(buttonWrapper).show();
+                jQuery('#place_order').hide();
+            }
+        });
+
+        renderer.render(this.configurator.configuration());
+    }
+}
+
+export default CheckoutBootstap;

modules.local/ppcp-button/resources/js/modules/MiniCartBootstap.js

@@ -0,0 +1,26 @@
+import Renderer from './Renderer';
+
+class MiniCartBootstap {
+    constructor(configurator) {
+        this.configurator = configurator;
+    }
+
+    init() {
+        const miniCartWrapper = PayPalCommerceGateway.button.mini_cart_wrapper;
+
+        if (!document.querySelector(miniCartWrapper)) {
+            return;
+        }
+
+        const renderer = new Renderer(miniCartWrapper);
+
+        jQuery(document.body).
+            on('wc_fragments_loaded wc_fragments_refreshed', () => {
+                renderer.render(this.configurator.configuration());
+            });
+
+        renderer.render(this.configurator.configuration());
+    }
+}
+
+export default MiniCartBootstap;

modules.local/ppcp-button/resources/js/modules/SingleProductBootstap.js

@@ -0,0 +1,37 @@
+import ErrorHandler from './ErrorHandler';
+import Renderer from './Renderer';
+import UpdateCart from './UpdateCart';
+import SingleProductConfig from './SingleProductConfig';
+
+class SingleProductBootstap {
+    init() {
+        const buttonWrapper = PayPalCommerceGateway.button.wrapper;
+
+        if (!document.querySelector(buttonWrapper)) {
+            return;
+        }
+
+        if (!document.querySelector('form.cart')) {
+            return;
+        }
+
+        const renderer = new Renderer(buttonWrapper);
+        const errorHandler = new ErrorHandler();
+        const updateCart = new UpdateCart(
+            PayPalCommerceGateway.ajax.change_cart.endpoint,
+            PayPalCommerceGateway.ajax.change_cart.nonce,
+        );
+        const configurator = new SingleProductConfig(
+            PayPalCommerceGateway,
+            updateCart,
+            renderer.showButtons.bind(renderer),
+            renderer.hideButtons.bind(renderer),
+            document.querySelector('form.cart'),
+            errorHandler,
+        );
+
+        renderer.render(configurator.configuration());
+    }
+}
+
+export default SingleProductBootstap;