Add hide / show conditions on SingleProduct Buttons for when they shouldn't be rendered.

Refactor MessageRenderer not to reload when it has no changes.

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

@@ -1,5 +1,6 @@
 import UpdateCart from "../Helper/UpdateCart";
 import SingleProductActionHandler from "../ActionHandler/SingleProductActionHandler";
+import {hide, show} from "../Helper/Hiding";
 import {disable, enable} from "../Helper/ButtonDisabler";
 
 class SingleProductBootstap {
@@ -18,10 +19,16 @@ class SingleProductBootstap {
 
     handleChange() {
         if (!this.shouldRender()) {
+            hide(this.gateway.button.wrapper, this.formSelector);
+            hide(this.gateway.messages.wrapper);
             return;
         }
 
         this.render();
+
+        show(this.gateway.button.wrapper, this.formSelector);
+        show(this.gateway.messages.wrapper);
+
         this.handleButtonStatus();
     }
 

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

@@ -2,6 +2,7 @@ class MessageRenderer {
 
     constructor(config) {
         this.config = config;
+        this.optionsFingerprint = null;
     }
 
     render() {
@@ -9,18 +10,20 @@ class MessageRenderer {
             return;
         }
 
-        paypal.Messages({
+        const options = {
             amount: this.config.amount,
             placement: this.config.placement,
             style: this.config.style
-        }).render(this.config.wrapper);
+        };
+
+        if (this.isOptionsFingerprintEqual(options)) {
+            return;
+        }
+
+        paypal.Messages(options).render(this.config.wrapper);
 
         jQuery(document.body).on('updated_cart_totals', () => {
-            paypal.Messages({
+            paypal.Messages(options).render(this.config.wrapper);
-                amount: this.config.amount,
-                placement: this.config.placement,
-                style: this.config.style
-            }).render(this.config.wrapper);
         });
     }
 
@@ -30,17 +33,36 @@ class MessageRenderer {
             return;
         }
 
-        const newWrapper = document.createElement('div');
+        const options = {
-        newWrapper.setAttribute('id', this.config.wrapper.replace('#', ''));
-
-        const sibling = document.querySelector(this.config.wrapper).nextSibling;
-        document.querySelector(this.config.wrapper).parentElement.removeChild(document.querySelector(this.config.wrapper));
-        sibling.parentElement.insertBefore(newWrapper, sibling);
-        paypal.Messages({
             amount,
             placement: this.config.placement,
             style: this.config.style
-        }).render(this.config.wrapper);
+        };
+
+        if (this.isOptionsFingerprintEqual(options)) {
+            return;
+        }
+
+        const newWrapper = document.createElement('div');
+        newWrapper.setAttribute('id', this.config.wrapper.replace('#', ''));
+
+        const oldWrapper = document.querySelector(this.config.wrapper);
+        const sibling = oldWrapper.nextSibling;
+        oldWrapper.parentElement.removeChild(oldWrapper);
+        sibling.parentElement.insertBefore(newWrapper, sibling);
+
+        paypal.Messages(options).render(this.config.wrapper);
+    }
+
+    isOptionsFingerprintEqual(options) {
+        const fingerprint = JSON.stringify(options);
+
+        if (this.optionsFingerprint === fingerprint) {
+            return true;
+        }
+
+        this.optionsFingerprint = fingerprint;
+        return false;
     }
 
     shouldRender() {