✨ New ConsoleLogger group method

Groups subsequent console.log output, for cleaner console output

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.

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 );
@@ -660,6 +660,8 @@ class GooglepayButton extends PaymentButton {
 			} catch ( err ) {
 				resolve( paymentError( err.message ) );
 			}
+
+			this.logGroup();
 		} );
 	}
 

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;
+		}
+	}
 }