From 75bf98c1748459ba821884b68b1627743aa68766 Mon Sep 17 00:00:00 2001
From: Pedro Silva <p.silva@inpsyde.com>
Date: Fri, 23 Jun 2023 15:49:08 +0100
Subject: [PATCH] Add hide / show conditions on SingleProduct Buttons for when
 they shouldn't be rendered. Refactor MessageRenderer not to reload when it
 has no changes.

---
 .../ContextBootstrap/SingleProductBootstap.js |  7 +++
 .../js/modules/Renderer/MessageRenderer.js    | 52 +++++++++++++------
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js
index c6b86657c..8d6f61cb1 100644
--- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js
+++ b/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();
     }
 
diff --git a/modules/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js b/modules/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js
index a07e81d21..82c10769f 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js
+++ b/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({
-                amount: this.config.amount,
-                placement: this.config.placement,
-                style: this.config.style
-            }).render(this.config.wrapper);
+            paypal.Messages(options).render(this.config.wrapper);
         });
     }
 
@@ -30,17 +33,36 @@ class MessageRenderer {
             return;
         }
 
-        const newWrapper = document.createElement('div');
-        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({
+        const options = {
             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() {