Fix/refactor product button handling

modules/ppcp-button/resources/js/modules/ActionHandler/SingleProductActionHandler.js

@@ -9,31 +9,17 @@ class SingleProductActionHandler {
     constructor(
         config,
         updateCart,
-        showButtonCallback,
-        hideButtonCallback,
         formElement,
         errorHandler
     ) {
         this.config = config;
         this.updateCart = updateCart;
-        this.showButtonCallback = showButtonCallback;
-        this.hideButtonCallback = hideButtonCallback;
         this.formElement = formElement;
         this.errorHandler = errorHandler;
     }
 
     configuration()
     {
-
-        if ( this.hasVariations() ) {
-            const observer = new ButtonsToggleListener(
-                this.formElement.querySelector('.single_add_to_cart_button'),
-                this.showButtonCallback,
-                this.hideButtonCallback
-            );
-            observer.init();
-        }
-
         return {
             createOrder: this.createOrder(),
             onApprove: onApprove(this, this.errorHandler),

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

@@ -1,5 +1,7 @@
 import UpdateCart from "../Helper/UpdateCart";
 import SingleProductActionHandler from "../ActionHandler/SingleProductActionHandler";
+import {hide, show, setVisible} from "../Helper/Hiding";
+import ButtonsToggleListener from "../Helper/ButtonsToggleListener";
 
 class SingleProductBootstap {
     constructor(gateway, renderer, messages, errorHandler) {
@@ -12,10 +14,10 @@ class SingleProductBootstap {
 
 
     handleChange() {
-        if (!this.shouldRender()) {
+        const shouldRender = this.shouldRender();
-            this.renderer.hideButtons(this.gateway.hosted_fields.wrapper);
+        setVisible(this.gateway.button.wrapper, shouldRender);
-            this.renderer.hideButtons(this.gateway.button.wrapper);
+        setVisible(this.gateway.messages.wrapper, shouldRender);
-            this.messages.hideMessages();
+        if (!shouldRender) {
             return;
         }
 
@@ -23,7 +25,6 @@ class SingleProductBootstap {
     }
 
     init() {
-
         const form = document.querySelector('form.cart');
         if (!form) {
             return;
@@ -32,14 +33,27 @@ class SingleProductBootstap {
         form.addEventListener('change', this.handleChange.bind(this));
         this.mutationObserver.observe(form, {childList: true, subtree: true});
 
+        const buttonObserver = new ButtonsToggleListener(
+            form.querySelector('.single_add_to_cart_button'),
+            () => {
+                show(this.gateway.button.wrapper);
+                show(this.gateway.messages.wrapper);
+                this.messages.renderWithAmount(this.priceAmount())
+            },
+            () => {
+                hide(this.gateway.button.wrapper);
+                hide(this.gateway.messages.wrapper);
+            },
+        );
+        buttonObserver.init();
+
         if (!this.shouldRender()) {
-            this.renderer.hideButtons(this.gateway.hosted_fields.wrapper);
+            hide(this.gateway.button.wrapper);
-            this.messages.hideMessages();
+            hide(this.gateway.messages.wrapper);
             return;
         }
 
         this.render();
-
     }
 
     shouldRender() {
@@ -86,16 +100,6 @@ class SingleProductBootstap {
                 this.gateway.ajax.change_cart.endpoint,
                 this.gateway.ajax.change_cart.nonce,
             ),
-            () => {
-                this.renderer.showButtons(this.gateway.button.wrapper);
-                this.renderer.showButtons(this.gateway.hosted_fields.wrapper);
-                this.messages.renderWithAmount(this.priceAmount())
-            },
-            () => {
-                this.renderer.hideButtons(this.gateway.button.wrapper);
-                this.renderer.hideButtons(this.gateway.hosted_fields.wrapper);
-                this.messages.hideMessages();
-            },
             document.querySelector('form.cart'),
             this.errorHandler,
         );

modules/ppcp-button/resources/js/modules/Helper/ButtonsToggleListener.js

@@ -14,6 +14,9 @@ class ButtonsToggleListener {
 
     init()
     {
+        if (!this.element) {
+            return;
+        }
         const config = { attributes : true };
         const callback = () => {
             if (this.element.classList.contains('disabled')) {
@@ -33,4 +36,4 @@ class ButtonsToggleListener {
     }
 }
 
-export default ButtonsToggleListener;
+export default ButtonsToggleListener;

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

@@ -53,14 +53,5 @@ class MessageRenderer {
         }
         return true;
     }
-
-    hideMessages() {
-        const domElement = document.querySelector(this.config.wrapper);
-        if (! domElement ) {
-            return false;
-        }
-        domElement.style.display = 'none';
-        return true;
-    }
 }
 export default MessageRenderer;

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

@@ -99,24 +99,6 @@ class Renderer {
         return this.renderedSources.has(wrapper + fundingSource ?? '');
     }
 
-    hideButtons(element) {
-        const domElement = document.querySelector(element);
-        if (! domElement ) {
-            return false;
-        }
-        domElement.style.display = 'none';
-        return true;
-    }
-
-    showButtons(element) {
-        const domElement = document.querySelector(element);
-        if (! domElement ) {
-            return false;
-        }
-        domElement.style.display = 'block';
-        return true;
-    }
-
     disableCreditCardFields() {
         this.creditCardRenderer.disableFields();
     }