diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js index dd201cffe..9d077af40 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js +++ b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js @@ -34,6 +34,7 @@ class PreviewButtonManager { this.isEnabled = true; this.buttons = {}; this.apiConfig = null; + this.apiError = ''; this.#onInit = new Promise(resolve => { this.#onInitResolver = resolve; @@ -79,6 +80,33 @@ class PreviewButtonManager { throw new Error('The "createButtonInstance" method must be implemented by the derived class'); } + /** + * In case the button SDK could not be loaded from PayPal, we display this dummy button + * instead of keeping the preview box empty. + * + * This dummy is only visible on the admin side, and not rendered on the front-end. + * + * @todo Consider refactoring this into a new class that extends the PreviewButton class. + * @param wrapperId + * @return {any} + */ + createDummy(wrapperId) { + const elButton = document.createElement('div'); + elButton.classList.add('ppcp-button-apm', 'ppcp-button-dummy'); + elButton.innerHTML = `${this.apiError ?? 'Not Available'}`; + + document.querySelector(wrapperId).appendChild(elButton); + + const instDummy = { + setDynamic: () => instDummy, + setPpcpConfig: () => instDummy, + render: () => {}, + remove: () => {}, + }; + + return instDummy; + } + registerEventListeners() { jQuery(document).one('DOMContentLoaded', this.bootstrap); @@ -116,7 +144,7 @@ class PreviewButtonManager { const MAX_WAIT_TIME = 10000; // Fail, if PayPal SDK is unavailable after 10 seconds. const RESOLVE_INTERVAL = 200; - if (!this.buttonConfig || !widgetBuilder) { + if (!this.buttonConfig?.sdk_url || !widgetBuilder) { this.error('Button could not be configured.'); return; } @@ -164,7 +192,13 @@ class PreviewButtonManager { (a) the SDK custom-script (b) the `widgetBuilder.paypal` object */ - this.apiConfig = await this.fetchConfig(widgetBuilder.paypal); + try { + this.apiConfig = await this.fetchConfig(widgetBuilder.paypal); + } catch (error) { + this.apiConfig = null; + } + + // Avoid errors when there was a problem with loading the SDK. await this.#onInitResolver(); this.#onInit = null; @@ -246,7 +280,14 @@ class PreviewButtonManager { _addButton(id, ppcpConfig) { const createButton = () => { if (!this.buttons[id]) { - this.buttons[id] = this.createButtonInstance(id).setButtonConfig(this.buttonConfig); + let newInst; + if (this.apiConfig && 'object' === typeof this.apiConfig) { + newInst = this.createButtonInstance(id).setButtonConfig(this.buttonConfig); + } else { + newInst = this.createDummy(id); + } + + this.buttons[id] = newInst; } this._configureButton(id, ppcpConfig); diff --git a/modules/ppcp-googlepay/resources/js/boot-admin.js b/modules/ppcp-googlepay/resources/js/boot-admin.js index 6010cec4c..3e561e6e4 100644 --- a/modules/ppcp-googlepay/resources/js/boot-admin.js +++ b/modules/ppcp-googlepay/resources/js/boot-admin.js @@ -42,7 +42,14 @@ class GooglePayPreviewButtonManager extends PreviewButtonManager { return {}; } - return await apiMethod(); + try { + return await apiMethod(); + } catch (error) { + if (error.message.includes('Not Eligible')) { + this.apiError = 'Not Eligible'; + } + return null; + } } /** diff --git a/modules/ppcp-wc-gateway/resources/css/common.scss b/modules/ppcp-wc-gateway/resources/css/common.scss index edc9b4689..b694547c8 100644 --- a/modules/ppcp-wc-gateway/resources/css/common.scss +++ b/modules/ppcp-wc-gateway/resources/css/common.scss @@ -28,6 +28,13 @@ $background-ident-color: #fbfbfb; .ppcp-button-apm { @include apm-button.button; + + &.ppcp-button-dummy { + display: flex; + align-items: center; + justify-content: center; + background: #0001; + } } .ppcp-status-text { diff --git a/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss b/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss index 64d4d2fab..23e642c8f 100644 --- a/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss +++ b/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss @@ -1,7 +1,8 @@ .ppcp-settings-field-preview { position: relative; - td { + > td { + position: relative; padding-left: 0; padding-right: 0; }