From 63e9c8bf27729d0616f2f8249130d0c107adb274 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Fri, 16 Aug 2024 18:15:59 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20New=20ConsoleLogger=20`group`=20met?=
 =?UTF-8?q?hod?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Groups subsequent console.log output, for cleaner console output
---
 .../js/modules/Renderer/PaymentButton.js      |  9 ++++++
 .../resources/js/GooglepayButton.js           | 16 +++++-----
 .../resources/js/helper/ConsoleLogger.js      | 31 +++++++++++++++++++
 3 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js b/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js
index 11fe31f79..143265bfb 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js
+++ b/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js
@@ -599,6 +599,15 @@ export default class PaymentButton {
 		this.#logger.error( ...args );
 	}
 
+	/**
+	 * Open or close a log-group
+	 *
+	 * @param {?string} [label=null] Group label.
+	 */
+	logGroup( label = null ) {
+		this.#logger.group( label );
+	}
+
 	/**
 	 * Determines if the current button instance has valid and complete configuration details.
 	 * Used during initialization to decide if the button can be initialized or should be skipped.
diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
index a9bfd693e..cfd5d4b07 100644
--- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js
+++ b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
@@ -560,7 +560,7 @@ class GooglepayButton extends PaymentButton {
 	}
 
 	async processPayment( paymentData ) {
-		this.log( 'processPayment' );
+		this.logGroup( 'processPayment' );
 
 		const paymentError = ( reason ) => {
 			this.error( reason );
@@ -623,13 +623,13 @@ class GooglepayButton extends PaymentButton {
 				return;
 			}
 
-				const success = await approveOrderServerSide( id );
+			const success = await approveOrderServerSide( id );
 
-				if ( success ) {
-					resolve( this.processPaymentResponse( 'SUCCESS' ) );
-				} else {
-					resolve( paymentError( 'FAILED TO APPROVE' ) );
-				}
+			if ( success ) {
+				resolve( this.processPaymentResponse( 'SUCCESS' ) );
+			} else {
+				resolve( paymentError( 'FAILED TO APPROVE' ) );
+			}
 		};
 
 		const propagatePayerDataToForm = () => {
@@ -660,6 +660,8 @@ class GooglepayButton extends PaymentButton {
 			} catch ( err ) {
 				resolve( paymentError( err.message ) );
 			}
+
+			this.logGroup();
 		} );
 	}
 
diff --git a/modules/ppcp-wc-gateway/resources/js/helper/ConsoleLogger.js b/modules/ppcp-wc-gateway/resources/js/helper/ConsoleLogger.js
index c76aa8960..a7b61b32a 100644
--- a/modules/ppcp-wc-gateway/resources/js/helper/ConsoleLogger.js
+++ b/modules/ppcp-wc-gateway/resources/js/helper/ConsoleLogger.js
@@ -18,6 +18,13 @@ export default class ConsoleLogger {
 	 */
 	#enabled = false;
 
+	/**
+	 * Tracks the current log-group that was started using `this.group()`
+	 *
+	 * @type {?string}
+	 */
+	#openGroup = null;
+
 	constructor( ...prefixes ) {
 		if ( prefixes.length ) {
 			this.#prefix = `[${ prefixes.join( ' | ' ) }]`;
@@ -55,4 +62,28 @@ export default class ConsoleLogger {
 	error( ...args ) {
 		console.error( this.#prefix, ...args );
 	}
+
+	/**
+	 * Starts or ends a group in the browser console.
+	 *
+	 * @param {string} [label=null] - The group label. Omit to end the current group.
+	 */
+	group( label = null ) {
+		if ( ! this.#enabled ) {
+			return;
+		}
+
+		if ( ! label || this.#openGroup ) {
+			// eslint-disable-next-line
+            console.groupEnd();
+			this.#openGroup = null;
+		}
+
+		if ( label ) {
+			// eslint-disable-next-line
+            console.group( label );
+
+			this.#openGroup = label;
+		}
+	}
 }