From f1f243505ce3fe2bcf2f21ebb7bf42523f987e9c Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Fri, 2 Aug 2024 16:32:27 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Introduce=20a=20new=20ConsoleLogger?=
 =?UTF-8?q?=20JS=20class?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extract debug logic to separate component
---
 .../js/modules/Helper/ConsoleLogger.js        | 42 ++++++++++++++++++
 .../resources/js/GooglepayButton.js           | 43 ++++++-------------
 2 files changed, 56 insertions(+), 29 deletions(-)
 create mode 100644 modules/ppcp-button/resources/js/modules/Helper/ConsoleLogger.js

diff --git a/modules/ppcp-button/resources/js/modules/Helper/ConsoleLogger.js b/modules/ppcp-button/resources/js/modules/Helper/ConsoleLogger.js
new file mode 100644
index 000000000..689f07c0a
--- /dev/null
+++ b/modules/ppcp-button/resources/js/modules/Helper/ConsoleLogger.js
@@ -0,0 +1,42 @@
+/**
+ * Logs debug details to the console.
+ *
+ * A utility class that is used by payment buttons on the front-end, like the GooglePayButton.
+ */
+export default class ConsoleLogger {
+	/**
+	 * The prefix to display before every log output.
+	 *
+	 * @type {string}
+	 */
+	#prefix = '';
+
+	/**
+	 * Whether logging is enabled, disabled by default.
+	 *
+	 * @type {boolean}
+	 */
+	#enabled = false;
+
+	constructor( ...prefixes ) {
+		if ( prefixes.length ) {
+			this.#prefix = `[${ prefixes.join( ' | ' ) }]`;
+		}
+	}
+
+	set enabled( state ) {
+		this.#enabled = state;
+	}
+
+	log( ...args ) {
+		if ( this.#enabled ) {
+			console.log( this.#prefix, ...args );
+		}
+	}
+
+	error( ...args ) {
+		if ( this.#enabled ) {
+			console.error( this.#prefix, ...args );
+		}
+	}
+}
diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
index 0ec6d494f..a21f803a4 100644
--- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js
+++ b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
@@ -1,5 +1,6 @@
 /* global google */
 
+import ConsoleLogger from '../../../ppcp-button/resources/js/modules/Helper/ConsoleLogger';
 import widgetBuilder from '../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder';
 import UpdatePaymentData from './Helper/UpdatePaymentData';
 import { apmButtonsInit } from '../../../ppcp-button/resources/js/modules/Helper/ApmButtons';
@@ -28,6 +29,11 @@ import {
  */
 
 class GooglepayButton {
+	/**
+	 * @type {ConsoleLogger}
+	 */
+	#logger;
+
 	#wrapperId = '';
 	#ppcpButtonWrapperId = '';
 
@@ -66,7 +72,8 @@ class GooglepayButton {
 		ppcpConfig,
 		contextHandler
 	) {
-		this._initDebug( !! buttonConfig?.is_debug, context );
+		this.#logger = new ConsoleLogger( 'GooglePayButton', context );
+		this.#logger.enabled = !! buttonConfig?.is_debug;
 
 		apmButtonsInit( ppcpConfig );
 
@@ -81,34 +88,12 @@ class GooglepayButton {
 		this.log( 'Create instance' );
 	}
 
-	/**
-	 * NOOP log function to avoid errors when debugging is disabled.
-	 */
-	log() {}
+	log( ...args ) {
+		this.#logger.log( ...args );
+	}
 
-	/**
-	 * Enables debugging tools, when the button's is_debug flag is set.
-	 *
-	 * @param {boolean} enableDebugging If debugging features should be enabled for this instance.
-	 * @param {string}  context         Used to make the instance accessible via the global debug
-	 *                                  object.
-	 * @private
-	 */
-	_initDebug( enableDebugging, context ) {
-		if ( ! enableDebugging || this.#isInitialized ) {
-			return;
-		}
-
-		document.ppcpGooglepayButtons = document.ppcpGooglepayButtons || {};
-		document.ppcpGooglepayButtons[ context ] = this;
-
-		this.log = ( ...args ) => {
-			console.log( `[GooglePayButton | ${ context }]`, ...args );
-		};
-
-		document.addEventListener( 'ppcp-googlepay-debug', () => {
-			this.log( this );
-		} );
+	error( ...args ) {
+		this.#logger.error( ...args );
 	}
 
 	/**
@@ -550,7 +535,7 @@ class GooglepayButton {
 
 			if ( timeElapsed > timeout ) {
 				stop();
-				this.log( '!! Wrapper not found:', this.wrapperId );
+				this.error( 'Wrapper not found:', this.wrapperId );
 			}
 		};