show buttons on mini-cart and cart

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

@@ -2,6 +2,7 @@ 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";
 
 document.addEventListener(
     'DOMContentLoaded',
@@ -10,38 +11,66 @@ document.addEventListener(
             console.error('PayPal button could not be configured.');
             return;
         }
-        if (! document.querySelector(PayPalCommerceGateway.button.wrapper)) {
-            console.error('No wrapper for PayPal button found.');
-            return;
-        }
         const context = PayPalCommerceGateway.context;
-        if (context === 'product' && ! document.querySelector('form.cart') ) {
-            return;
-        }
         const errorHandler = new ErrorHandler();
-        const renderer = new Renderer({
+        const defaultConfigurator = new CartConfig(
-            url: PayPalCommerceGateway.button.url,
-            wrapper:PayPalCommerceGateway.button.wrapper
-        });
-    const updateCart = new UpdateCart(
-        PayPalCommerceGateway.ajax.change_cart.endpoint,
-        PayPalCommerceGateway.ajax.change_cart.nonce
-    );
-    let configurator = null;
-    if (context === 'product') {
-        configurator = new SingleProductConfig(
             PayPalCommerceGateway,
-            updateCart,
-            renderer.showButtons.bind(renderer),
-            renderer.hideButtons.bind(renderer),
-            document.querySelector('form.cart'),
             errorHandler
         );
-    }
+        // Configure mini cart buttons
-    if (! configurator) {
+        if (document.querySelector(PayPalCommerceGateway.button.mini_cart_wrapper)) {
-        console.error('No context for button found.');
+
-        return;
+            const renderer = new Renderer(
-    }
+                PayPalCommerceGateway.button.url,
-    renderer.render(configurator.configuration());
+                PayPalCommerceGateway.button.mini_cart_wrapper
+            );
+            renderer.render(defaultConfigurator.configuration())
+        }
+        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.url,
+                PayPalCommerceGateway.button.mini_cart_wrapper
+            );
+            renderer.render(defaultConfigurator.configuration())
+        } );
+
+        // Configure context buttons
+        if (! document.querySelector(PayPalCommerceGateway.button.wrapper)) {
+            return;
+        }
+        let configurator = null;
+        if (context === 'product') {
+            if (! document.querySelector('form.cart')) {
+                return;
+            }
+            const updateCart = new UpdateCart(
+                PayPalCommerceGateway.ajax.change_cart.endpoint,
+                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;
+        }
+        if (! configurator) {
+            console.error('No context for button found.');
+            return;
+        }
+
+        const renderer = new Renderer(
+            PayPalCommerceGateway.button.url,
+            PayPalCommerceGateway.button.wrapper
+        );
+        renderer.render(configurator.configuration());
     }
 );

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

@@ -0,0 +1,42 @@
+
+
+class CartConfig {
+
+    constructor(config, errorHandler) {
+        this.config = config;
+        this.errorHandler = errorHandler;
+    }
+
+    configuration() {
+
+        const createOrder = (data, actions) => {
+            return fetch(this.config.ajax.create_order.endpoint, {
+                method: 'POST',
+                body: JSON.stringify({
+                    nonce: this.config.ajax.create_order.nonce,
+                    purchase_units:[]
+                })
+            }).then(function (res) {
+                return res.json();
+            }).then(function (data) {
+                if (!data.success) {
+                    //Todo: Error handling
+                    return;
+                }
+                return data.data.id;
+            });
+        }
+        const onApprove = (data, actions) => {
+            return actions.redirect(this.config.redirect);
+        }
+        return {
+            createOrder,
+            onApprove,
+            onError: (error) => {
+                this.errorHandler.message(error);
+            }
+        }
+    }
+}
+
+export default CartConfig;

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

@@ -1,8 +1,9 @@
 class Renderer {
 
-    constructor(config)
+    constructor(url, wrapper)
     {
-        this.config = config;
+        this.url = url;
+        this.wrapper = wrapper;
     }
 
     render(buttonConfig)
@@ -11,7 +12,7 @@ class Renderer {
         const script = document.createElement('script');
 
         if (typeof paypal !== 'object') {
-            script.setAttribute('src', this.config.url);
+            script.setAttribute('src', this.url);
             script.addEventListener('load', (event) => {
                 this.renderButtons(buttonConfig);
             })
@@ -27,17 +28,17 @@ class Renderer {
 
         paypal.Buttons(
             buttonConfig
-        ).render(this.config.wrapper);
+        ).render(this.wrapper);
     }
 
     hideButtons()
     {
-        document.querySelector(this.config.wrapper).style.display = 'none';
+        document.querySelector(this.wrapper).style.display = 'none';
     }
 
     showButtons()
     {
-        document.querySelector(this.config.wrapper).style.display = 'block';
+        document.querySelector(this.wrapper).style.display = 'block';
     }
 }
 

modules.local/ppcp-button/src/Assets/SmartButton.php

@@ -25,13 +25,19 @@ class SmartButton
         $renderer = function () {
             echo '<div id="ppc-button"></div>';
         };
+        if (is_cart()) {
+            add_action(
+                'woocommerce_after_cart_totals',
+                $renderer,
+                20
+            );
+        }
         if (is_product()) {
             add_action(
                 'woocommerce_single_product_summary',
                 $renderer,
                 31
             );
-            return true;
         }
         if (is_checkout()) {
             add_action(
@@ -39,9 +45,16 @@ class SmartButton
                 $renderer,
                 31
             );
-            return true;
         }
-        return false;
+
+        add_action(
+            'woocommerce_widget_shopping_cart_buttons',
+            function() {
+                echo '<span id="ppc-button-minicart"></span>';
+            },
+            30
+        );
+        return true;
     }
 
     public function enqueue() : bool
@@ -72,6 +85,7 @@ class SmartButton
             ],
             'button' => [
                 'wrapper' => '#ppc-button',
+                'mini_cart_wrapper' => '#ppc-button-minicart',
                 'url' =>$smartButtonUrl,
             ],
         ];