From f5e67c4810a1c4467af655935c4b37410b9aa796 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Thu, 13 Jun 2024 14:01:47 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Refresh=20all=20preview=20button?=
 =?UTF-8?q?s=20on=20the=20screen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When multiple preview-button-blocks for the same button were present on the page, not all of them did update the button.
---
 .../modules/Renderer/PreviewButtonManager.js  | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js
index fd4540d24..2952f25b5 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js
+++ b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js
@@ -1,5 +1,6 @@
 import { loadCustomScript } from '@paypal/paypal-js';
 import widgetBuilder from './WidgetBuilder';
+import { debounce } from '../../../../../ppcp-blocks/resources/js/Helper/debounce';
 
 /**
  * Manages all PreviewButton instances of a certain payment method on the page.
@@ -41,6 +42,17 @@ class PreviewButtonManager {
         this.bootstrap = this.bootstrap.bind(this);
         this.renderPreview = this.renderPreview.bind(this);
 
+        /**
+         * The "configureAllButtons" method applies ppcpConfig to all buttons that were created
+         * by this PreviewButtonManager instance. We debounce this method, as it should invoke
+         * only once, even if called multiple times in a row.
+         *
+         * This is required, as the `ppcp_paypal_render_preview` event does not fire for all
+         * buttons, but only a single time, passing in a random button's wrapper-ID; however,
+         * that event should always refresh all preview buttons, not only that single button.
+         */
+        this._configureAllButtons = debounce(this._configureAllButtons.bind(this), 100);
+
         this.registerEventListeners();
     }
 
@@ -175,7 +187,8 @@ class PreviewButtonManager {
         if (!this.buttons[id]) {
             this.#addButton(id, ppcpConfig);
         } else {
-            this.#configureButton(id, ppcpConfig);
+            // This is a debounced method, that fires after 100ms.
+            this._configureAllButtons(ppcpConfig);
         }
     }
 
@@ -189,6 +202,13 @@ class PreviewButtonManager {
             .render();
     }
 
+    /**
+     * Apples the provided configuration to all existing preview buttons.
+     */
+    _configureAllButtons(ppcpConfig) {
+        Object.keys(this.buttons).forEach(id => this.#configureButton(id, ppcpConfig));
+    }
+
     /**
      * Creates a new preview button, that is rendered once the bootstrapping Promise resolves.
      */