Pass the Renderer as a dependency

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

@@ -4,9 +4,11 @@ import MiniCartBootstap from './modules/MiniCartBootstap';
 import SingleProductBootstap from './modules/SingleProductBootstap';
 import CartBootstrap from './modules/CartBootstap';
 import CheckoutBootstap from './modules/CheckoutBootstap';
+import Renderer from './modules/Renderer';
 
 const bootstrap = () => {
     const context = PayPalCommerceGateway.context;
+    const renderer = new Renderer;
     const errorHandler = new ErrorHandler();
     const defaultConfig = new CartConfig(
         PayPalCommerceGateway,
@@ -14,27 +16,27 @@ const bootstrap = () => {
     );
 
     if (context === 'mini-cart') {
-        const miniCartBootstap = new MiniCartBootstap(defaultConfig);
+        const miniCartBootstap = new MiniCartBootstap(renderer, defaultConfig);
 
         miniCartBootstap.init();
     }
 
     if (context === 'product') {
-        const singleProductBootstap = new SingleProductBootstap();
+        const singleProductBootstap = new SingleProductBootstap(renderer);
-        const miniCartBootstap = new MiniCartBootstap(defaultConfig);
+        const miniCartBootstap = new MiniCartBootstap(renderer, defaultConfig);
 
         singleProductBootstap.init();
         miniCartBootstap.init();
     }
 
     if (context === 'cart') {
-        const cartBootstrap = new CartBootstrap(defaultConfig);
+        const cartBootstrap = new CartBootstrap(renderer, defaultConfig);
 
         cartBootstrap.init();
     }
 
     if (context === 'checkout') {
-        const checkoutBootstap = new CheckoutBootstap(defaultConfig);
+        const checkoutBootstap = new CheckoutBootstap(renderer, defaultConfig);
 
         checkoutBootstap.init();
     }

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

@@ -1,7 +1,6 @@
-import Renderer from './Renderer';
-
 class CartBootstrap {
-    constructor(configurator) {
+    constructor(renderer, configurator) {
+        this.renderer = renderer;
         this.configurator = configurator;
     }
 
@@ -10,13 +9,14 @@ class CartBootstrap {
             return;
         }
 
-        const renderer = new Renderer(PayPalCommerceGateway.button.wrapper);
-
         jQuery(document.body).on('updated_cart_totals updated_checkout', () => {
-            renderer.render(this.configurator.configuration());
+            this.renderer.render(this.configurator.configuration());
         });
 
-        renderer.render(this.configurator.configuration());
+        this.renderer.render(
+            PayPalCommerceGateway.button.wrapper,
+            this.configurator.configuration(),
+        );
     }
 
     shouldRender() {

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

@@ -1,7 +1,6 @@
-import Renderer from './Renderer';
-
 class CheckoutBootstap {
-    constructor(configurator) {
+    constructor(renderer, configurator) {
+        this.renderer = renderer;
         this.configurator = configurator;
     }
 
@@ -10,23 +9,25 @@ class CheckoutBootstap {
             return;
         }
 
-        const renderer = new Renderer(PayPalCommerceGateway.button.wrapper);
         const toggleButtons = () => {
             const currentPaymentMethod = jQuery(
                 'input[name="payment_method"]:checked').val();
 
             if (currentPaymentMethod !== 'ppcp-gateway') {
-                renderer.hideButtons();
+                this.renderer.hideButtons(PayPalCommerceGateway.button.wrapper);
                 jQuery('#place_order').show();
             }
             else {
-                renderer.showButtons();
+                this.renderer.showButtons(PayPalCommerceGateway.button.wrapper);
                 jQuery('#place_order').hide();
             }
         };
 
         jQuery(document.body).on('updated_checkout', () => {
-            renderer.render(this.configurator.configuration());
+            this.renderer.render(
+                PayPalCommerceGateway.button.wrapper,
+                this.configurator.configuration(),
+            );
             toggleButtons();
         });
 
@@ -34,7 +35,10 @@ class CheckoutBootstap {
             toggleButtons();
         });
 
-        renderer.render(this.configurator.configuration());
+        this.renderer.render(
+            PayPalCommerceGateway.button.wrapper,
+            this.configurator.configuration(),
+        );
     }
 
     shouldRender() {

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

@@ -1,7 +1,6 @@
-import Renderer from './Renderer';
-
 class MiniCartBootstap {
-    constructor(configurator) {
+    constructor(renderer, configurator) {
+        this.renderer = renderer;
         this.configurator = configurator;
     }
 
@@ -10,18 +9,19 @@ class MiniCartBootstap {
             return;
         }
 
-        const renderer = new Renderer(PayPalCommerceGateway.button.mini_cart_wrapper);
-
         jQuery(document.body).
             on('wc_fragments_loaded wc_fragments_refreshed', () => {
                 renderer.render(this.configurator.configuration());
             });
 
-        renderer.render(this.configurator.configuration());
+        this.renderer.render(
+            PayPalCommerceGateway.button.mini_cart_wrapper,
+            this.configurator.configuration(),
+        );
     }
 
     shouldRender() {
-        return document.querySelector(PayPalCommerceGateway.button.mini_cart_wrapper)
+        return document.querySelector(PayPalCommerceGateway.button.mini_cart_wrapper);
     }
 }
 

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

@@ -1,26 +1,16 @@
 class Renderer {
-
+    render(wrapper, buttonConfig) {
-    constructor(wrapper)
-    {
-        this.wrapper = wrapper;
-    }
-
-    render(buttonConfig)
-    {
-
         paypal.Buttons(
-            buttonConfig
+            buttonConfig,
-        ).render(this.wrapper);
+        ).render(wrapper);
     }
 
-    hideButtons()
+    hideButtons(element) {
-    {
+        document.querySelector(element).style.display = 'none';
-        document.querySelector(this.wrapper).style.display = 'none';
     }
 
-    showButtons()
+    showButtons(element) {
-    {
+        document.querySelector(element).style.display = 'block';
-        document.querySelector(this.wrapper).style.display = 'block';
     }
 }
 

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

@@ -1,15 +1,17 @@
 import ErrorHandler from './ErrorHandler';
-import Renderer from './Renderer';
 import UpdateCart from './UpdateCart';
 import SingleProductConfig from './SingleProductConfig';
 
 class SingleProductBootstap {
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+
     init() {
         if (!this.shouldRender()) {
             return;
         }
 
-        const renderer = new Renderer(PayPalCommerceGateway.button.wrapper);
         const errorHandler = new ErrorHandler();
         const updateCart = new UpdateCart(
             PayPalCommerceGateway.ajax.change_cart.endpoint,
@@ -18,13 +20,20 @@ class SingleProductBootstap {
         const configurator = new SingleProductConfig(
             PayPalCommerceGateway,
             updateCart,
-            renderer.showButtons.bind(renderer),
+            () => {
-            renderer.hideButtons.bind(renderer),
+                this.renderer.showButtons(PayPalCommerceGateway.button.wrapper);
+            },
+            () => {
+                this.renderer.hideButtons(PayPalCommerceGateway.button.wrapper);
+            },
             document.querySelector('form.cart'),
             errorHandler,
         );
 
-        renderer.render(configurator.configuration());
+        this.renderer.render(
+            PayPalCommerceGateway.button.wrapper,
+            configurator.configuration(),
+        );
     }
 
     shouldRender() {