🐛 Refresh all preview buttons on the screen

When multiple preview-button-blocks for the same button were present on the page, not all of them did update the button.
This commit is contained in:
Philipp Stracker 2024-06-13 14:01:47 +02:00
parent 238adedcad
commit f5e67c4810
No known key found for this signature in database

View file

@ -1,5 +1,6 @@
import { loadCustomScript } from '@paypal/paypal-js'; import { loadCustomScript } from '@paypal/paypal-js';
import widgetBuilder from './WidgetBuilder'; 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. * 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.bootstrap = this.bootstrap.bind(this);
this.renderPreview = this.renderPreview.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(); this.registerEventListeners();
} }
@ -175,7 +187,8 @@ class PreviewButtonManager {
if (!this.buttons[id]) { if (!this.buttons[id]) {
this.#addButton(id, ppcpConfig); this.#addButton(id, ppcpConfig);
} else { } else {
this.#configureButton(id, ppcpConfig); // This is a debounced method, that fires after 100ms.
this._configureAllButtons(ppcpConfig);
} }
} }
@ -189,6 +202,13 @@ class PreviewButtonManager {
.render(); .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. * Creates a new preview button, that is rendered once the bootstrapping Promise resolves.
*/ */