From 844cafd9cb00d2f0f10f18294fbda0489abfc345 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Thu, 8 Aug 2024 14:08:20 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A1=20Use=20ConsoleLogger=20for=20Prev?= =?UTF-8?q?iewButtonManager?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Also add some comments and additional log output --- .../modules/Renderer/PreviewButtonManager.js | 58 ++++++++++++++++--- 1 file changed, 51 insertions(+), 7 deletions(-) diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js index 42e715904..cc785abc0 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js +++ b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js @@ -1,11 +1,17 @@ import { loadCustomScript } from '@paypal/paypal-js'; import widgetBuilder from './WidgetBuilder'; import { debounce } from '../../../../../ppcp-blocks/resources/js/Helper/debounce'; +import ConsoleLogger from '../../../../../ppcp-wc-gateway/resources/js/helper/ConsoleLogger'; /** * Manages all PreviewButton instances of a certain payment method on the page. */ class PreviewButtonManager { + /** + * @type {ConsoleLogger} + */ + #logger; + /** * Resolves the promise. * Used by `this.boostrap()` to process enqueued initialization logic. @@ -32,6 +38,9 @@ class PreviewButtonManager { this.apiConfig = null; this.apiError = ''; + this.#logger = new ConsoleLogger( this.methodName, 'preview' ); + this.#logger.enabled = true; // Manually set this to true for development. + this.#onInit = new Promise( ( resolve ) => { this.#onInitResolver = resolve; } ); @@ -61,9 +70,11 @@ class PreviewButtonManager { * Responsible for fetching and returning the PayPal configuration object for this payment * method. * + * @abstract * @param {{}} payPal - The PayPal SDK object provided by WidgetBuilder. * @return {Promise<{}>} */ + // eslint-disable-next-line no-unused-vars async fetchConfig( payPal ) { throw new Error( 'The "fetchConfig" method must be implemented by the derived class' @@ -74,9 +85,11 @@ class PreviewButtonManager { * Protected method that needs to be implemented by the derived class. * This method is responsible for creating a new PreviewButton instance and returning it. * + * @abstract * @param {string} wrapperId - CSS ID of the wrapper element. * @return {PreviewButton} */ + // eslint-disable-next-line no-unused-vars createButtonInstance( wrapperId ) { throw new Error( 'The "createButtonInstance" method must be implemented by the derived class' @@ -90,7 +103,7 @@ class PreviewButtonManager { * 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 + * @param {string} wrapperId * @return {any} */ createDummy( wrapperId ) { @@ -128,13 +141,24 @@ class PreviewButtonManager { ); } + /** + * Output a debug message to the console, with a module-specific prefix. + * + * @param {string} message - Log message. + * @param {...any} args - Optional. Additional args to output. + */ + log( message, ...args ) { + this.#logger.log( message, ...args ); + } + /** * Output an error message to the console, with a module-specific prefix. - * @param message - * @param {...any} args + * + * @param {string} message - Log message. + * @param {...any} args - Optional. Additional args to output. */ error( message, ...args ) { - console.error( `${ this.methodName } ${ message }`, ...args ); + this.#logger.error( message, ...args ); } /** @@ -242,6 +266,7 @@ class PreviewButtonManager { } if ( ! this.shouldInsertPreviewButton( id ) ) { + this.log( 'Skip preview rendering for this preview-box', id ); return; } @@ -256,6 +281,10 @@ class PreviewButtonManager { /** * Determines if the preview box supports the current button. * + * A preview-box contains the preview of one or more payment buttons. Typical configurations are + * either the "Smart Button" preview box, that contains all payment buttons of the PayPal + * gateway, or a single payment method specific preview, like the Google Pay button preview. + * * When this function returns false, this manager instance does not create a new preview button. * * @param {string} previewId - ID of the inner preview box container. @@ -271,10 +300,14 @@ class PreviewButtonManager { /** * Applies a new configuration to an existing preview button. + * + * @private * @param id * @param ppcpConfig */ _configureButton( id, ppcpConfig ) { + this.log( 'configureButton', id, ppcpConfig ); + this.buttons[ id ] .setDynamic( this.isDynamic() ) .setPpcpConfig( ppcpConfig ) @@ -283,9 +316,13 @@ class PreviewButtonManager { /** * Apples the provided configuration to all existing preview buttons. - * @param ppcpConfig + * + * @private + * @param ppcpConfig - The new styling to use for the preview buttons. */ _configureAllButtons( ppcpConfig ) { + this.log( 'configureAllButtons', ppcpConfig ); + Object.entries( this.buttons ).forEach( ( [ id, button ] ) => { this._configureButton( id, { ...ppcpConfig, @@ -302,13 +339,20 @@ class PreviewButtonManager { /** * Creates a new preview button, that is rendered once the bootstrapping Promise resolves. - * @param id - * @param ppcpConfig + * + * @private + * @param id - The button to add. + * @param ppcpConfig - The styling to apply to the preview button. */ _addButton( id, ppcpConfig ) { + this.log( 'addButton', id, ppcpConfig ); + const createButton = () => { if ( ! this.buttons[ id ] ) { + this.log( 'createButton.new', id ); + let newInst; + if ( this.apiConfig && 'object' === typeof this.apiConfig ) { newInst = this.createButtonInstance( id ).setButtonConfig( this.buttonConfig