Axo Blocks: Migrate console logs to the Axo log function

modules/ppcp-axo-block/resources/js/components/EmailButton/utils.js

@@ -1,4 +1,5 @@
 import { createElement, createRoot } from '@wordpress/element';
+import { log } from '../../../../../ppcp-axo/resources/js/Helper/Debug';
 import { STORE_NAME } from '../../stores/axoStore';
 import EmailButton from './EmailButton';
 
@@ -20,8 +21,9 @@ const getEmailInput = () => {
 export const setupEmailFunctionality = ( onEmailSubmit ) => {
 	const input = getEmailInput();
 	if ( ! input ) {
-		console.warn(
+		log(
-			'Email input element not found. Functionality not added.'
+			'Email input element not found. Functionality not added.',
+			'warn'
 		);
 		return;
 	}
@@ -41,7 +43,7 @@ export const setupEmailFunctionality = ( onEmailSubmit ) => {
 		try {
 			await onEmailSubmit( input.value );
 		} catch ( error ) {
-			console.error( 'Error during email submission:', error );
+			log( `Error during email submission: ${ error }`, 'error' );
 		} finally {
 			wp.data.dispatch( STORE_NAME ).setIsEmailSubmitted( false );
 			renderButton();

modules/ppcp-axo-block/resources/js/components/Shipping/utils.js

@@ -14,10 +14,6 @@ export const injectShippingChangeButton = ( onChangeShippingAddressClick ) => {
 				onChangeShippingAddressClick={ onChangeShippingAddressClick }
 			/>
 		);
-	} else {
-		console.log(
-			'Shipping change button already exists. Skipping injection.'
-		);
 	}
 };
 

modules/ppcp-axo-block/resources/js/components/Watermark/Watermark.js

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from '@wordpress/element';
+import { log } from '../../../../../ppcp-axo/resources/js/Helper/Debug';
 
 const Watermark = ( {
 	fastlaneSdk,
@@ -27,7 +28,7 @@ const Watermark = ( {
 				watermarkRef.current = watermark;
 				watermark.render( `#${ name }` );
 			} catch ( error ) {
-				console.error( 'Error rendering watermark:', error );
+				log( `Error rendering watermark: ${ error }`, 'error' );
 			}
 		};
 

modules/ppcp-axo-block/resources/js/components/Watermark/WatermarkManager.js

@@ -7,11 +7,7 @@ import {
 	updateWatermarkContent,
 } from './utils';
 
-console.log( 'WatermarkManager module loaded' );
-
 const WatermarkManager = ( { fastlaneSdk } ) => {
-	console.log( 'WatermarkManager rendering', { fastlaneSdk } );
-
 	const isGuest = useSelect( ( select ) =>
 		select( STORE_NAME ).getIsGuest()
 	);
@@ -22,17 +18,8 @@ const WatermarkManager = ( { fastlaneSdk } ) => {
 		select( STORE_NAME ).getIsAxoScriptLoaded()
 	);
 
-	console.log( 'WatermarkManager state', {
-		isGuest,
-		isAxoActive,
-		isAxoScriptLoaded,
-	} );
-
 	useEffect( () => {
-		console.log( 'WatermarkManager useEffect triggered' );
-
 		if ( isAxoActive || ( ! isAxoActive && ! isAxoScriptLoaded ) ) {
-			console.log( 'Conditions met, creating watermark' );
 			createWatermarkContainer();
 			updateWatermarkContent( {
 				isAxoActive,
@@ -41,7 +28,6 @@ const WatermarkManager = ( { fastlaneSdk } ) => {
 				isGuest,
 			} );
 		} else {
-			console.log( 'Conditions not met, removing watermark' );
 			removeWatermark();
 		}
 

modules/ppcp-axo-block/resources/js/components/Watermark/utils.js

@@ -7,20 +7,15 @@ const watermarkReference = {
 };
 
 export const createWatermarkContainer = () => {
-	console.log( 'Creating watermark container' );
 	const textInputContainer = document.querySelector(
 		'.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input'
 	);
 
 	if ( textInputContainer && ! watermarkReference.container ) {
-		console.log(
-			'Text input container found, creating watermark container'
-		);
 		const emailInput =
 			textInputContainer.querySelector( 'input[id="email"]' );
 
 		if ( emailInput ) {
-			console.log( 'Email input found, setting up watermark' );
 			watermarkReference.container = document.createElement( 'div' );
 			watermarkReference.container.setAttribute(
 				'class',
@@ -47,14 +42,12 @@ export const createWatermarkContainer = () => {
 };
 
 export const setupWatermark = ( fastlaneSdk ) => {
-	console.log( 'Setting up watermark', { fastlaneSdk } );
 	const container = document.createElement( 'div' );
 	document.body.appendChild( container );
 	const root = createRoot( container );
 	root.render( createElement( WatermarkManager, { fastlaneSdk } ) );
 
 	return () => {
-		console.log( 'Cleaning up watermark setup' );
 		root.unmount();
 		if ( container && container.parentNode ) {
 			container.parentNode.removeChild( container );
@@ -63,7 +56,6 @@ export const setupWatermark = ( fastlaneSdk ) => {
 };
 
 export const removeWatermark = () => {
-	console.log( 'Removing watermark' );
 	if ( watermarkReference.root ) {
 		watermarkReference.root.unmount();
 	}
@@ -82,12 +74,10 @@ export const removeWatermark = () => {
 		}
 	}
 	Object.assign( watermarkReference, { container: null, root: null } );
-	console.log( 'Watermark removed' );
 };
 
 export const renderWatermarkContent = ( content ) => {
 	if ( watermarkReference.root ) {
-		console.log( 'Rendering watermark content' );
 		watermarkReference.root.render( content );
 	}
 };
@@ -99,7 +89,6 @@ export const updateWatermarkContent = ( {
 	isGuest,
 } ) => {
 	if ( ! isAxoActive && ! isAxoScriptLoaded ) {
-		console.log( 'Rendering spinner' );
 		renderWatermarkContent(
 			createElement( 'span', {
 				className: 'wc-block-components-spinner',
@@ -107,7 +96,6 @@ export const updateWatermarkContent = ( {
 			} )
 		);
 	} else if ( isAxoActive ) {
-		console.log( 'Rendering FastlaneWatermark' );
 		renderWatermarkContent(
 			createElement( Watermark, {
 				fastlaneSdk,
@@ -116,7 +104,6 @@ export const updateWatermarkContent = ( {
 			} )
 		);
 	} else {
-		console.log( 'Rendering null content' );
 		renderWatermarkContent( null );
 	}
 };

modules/ppcp-axo-block/resources/js/events/emailLookupManager.js

@@ -1,3 +1,4 @@
+import { log } from '../../../../ppcp-axo/resources/js/Helper/Debug';
 import { populateWooFields } from '../helpers/fieldHelpers';
 import { injectShippingChangeButton } from '../components/Shipping';
 import { injectCardChangeButton } from '../components/Card';
@@ -17,7 +18,7 @@ export const createEmailLookupHandler = (
 ) => {
 	return async ( email ) => {
 		try {
-			console.log( 'Email value being looked up:', email );
+			log( `Email value being looked up: ${ email }` );
 
 			if ( ! fastlaneSdk ) {
 				throw new Error( 'FastlaneSDK is not initialized' );
@@ -32,7 +33,7 @@ export const createEmailLookupHandler = (
 			const lookup =
 				await fastlaneSdk.identity.lookupCustomerByEmail( email );
 
-			console.log( 'Lookup response:', lookup );
+			log( `Lookup response: ${ JSON.stringify( lookup ) }` );
 
 			// Gary flow
 			if ( lookup && lookup.customerContextId === '' ) {
@@ -40,7 +41,7 @@ export const createEmailLookupHandler = (
 			}
 
 			if ( ! lookup || ! lookup.customerContextId ) {
-				console.warn( 'No customerContextId found in the response' );
+				log( 'No customerContextId found in the response', 'warn' );
 				return;
 			}
 
@@ -71,7 +72,7 @@ export const createEmailLookupHandler = (
 					setCardDetails( profileData.card );
 				}
 
-				console.log( 'Profile Data:', profileData );
+				log( `Profile Data: ${ JSON.stringify( profileData ) }` );
 
 				populateWooFields(
 					profileData,
@@ -82,12 +83,12 @@ export const createEmailLookupHandler = (
 				injectShippingChangeButton( onChangeShippingAddressClick );
 				injectCardChangeButton( onChangeCardButtonClick );
 			} else {
-				console.warn( 'Authentication failed or did not succeed' );
+				log( 'Authentication failed or did not succeed', 'warn' );
 			}
 		} catch ( error ) {
-			console.error(
+			log(
-				'Error during email lookup or authentication:',
+				`Error during email lookup or authentication:
-				error
+				${ error }`
 			);
 			throw error;
 		}

modules/ppcp-axo-block/resources/js/helpers/classnamesManager.js

@@ -1,4 +1,5 @@
 import { select, subscribe } from '@wordpress/data';
+import { log } from '../../../../ppcp-axo/resources/js/Helper/Debug';
 import { STORE_NAME } from '../stores/axoStore';
 
 /**
@@ -13,7 +14,10 @@ export const setupAuthenticationClassToggle = () => {
 	const updateAuthenticationClass = () => {
 		const targetElement = document.querySelector( targetSelector );
 		if ( ! targetElement ) {
-			console.warn( `Target element not found: ${ targetSelector }` );
+			log(
+				`Authentication class target element not found: ${ targetSelector }`,
+				'warn'
+			);
 			return;
 		}
 
@@ -44,7 +48,10 @@ export const setupEmailLookupCompletedClassToggle = () => {
 	const updateEmailLookupCompletedClass = () => {
 		const targetElement = document.querySelector( targetSelector );
 		if ( ! targetElement ) {
-			console.warn( `Target element not found: ${ targetSelector }` );
+			log(
+				`Email lookup completed class target element not found: ${ targetSelector }`,
+				'warn'
+			);
 			return;
 		}
 
@@ -82,7 +89,10 @@ export const setupCheckoutBlockClassToggles = () => {
 	const updateCheckoutBlockClassToggles = () => {
 		const targetElement = document.querySelector( targetSelector );
 		if ( ! targetElement ) {
-			console.warn( `Target element not found: ${ targetSelector }` );
+			log(
+				`Checkout block class target element not found: ${ targetSelector }`,
+				'warn'
+			);
 			return;
 		}
 

modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js

@@ -1,24 +1,26 @@
 import { dispatch } from '@wordpress/data';
+import { log } from '../../../../ppcp-axo/resources/js/Helper/Debug';
 
 export const snapshotFields = ( shippingAddress, billingAddress ) => {
-	console.log( 'Attempting to snapshot fields' );
 	if ( ! shippingAddress || ! billingAddress ) {
-		console.warn( 'Shipping or billing address is missing:', {
+		log(
-			shippingAddress,
+			`Shipping or billing address is missing: ${ JSON.stringify( {
-			billingAddress,
+				shippingAddress,
-		} );
+				billingAddress,
+			} ) }`,
+			'warn'
+		);
 	}
 
 	const originalData = { shippingAddress, billingAddress };
-	console.log( 'Snapshot data:', originalData );
+	log( `Snapshot data: ${ JSON.stringify( originalData ) }` );
 	try {
 		localStorage.setItem(
 			'axoOriginalCheckoutFields',
 			JSON.stringify( originalData )
 		);
-		console.log( 'Original fields saved to localStorage', originalData );
 	} catch ( error ) {
-		console.error( 'Error saving to localStorage:', error );
+		log( `Error saving to localStorage: ${ error }`, 'error' );
 	}
 };
 
@@ -26,47 +28,41 @@ export const restoreOriginalFields = (
 	updateShippingAddress,
 	updateBillingAddress
 ) => {
-	console.log( 'Attempting to restore original fields' );
+	log( 'Attempting to restore original fields' );
 	let savedData;
 	try {
 		savedData = localStorage.getItem( 'axoOriginalCheckoutFields' );
-		console.log( 'Data retrieved from localStorage:', savedData );
+		log(
+			`Data retrieved from localStorage: ${ JSON.stringify( savedData ) }`
+		);
 	} catch ( error ) {
-		console.error( 'Error retrieving from localStorage:', error );
+		log( `Error retrieving from localStorage: ${ error }`, 'error' );
 	}
 
 	if ( savedData ) {
 		try {
 			const parsedData = JSON.parse( savedData );
-			console.log( 'Parsed data:', parsedData );
 			if ( parsedData.shippingAddress ) {
-				console.log(
-					'Restoring shipping address:',
-					parsedData.shippingAddress
-				);
 				updateShippingAddress( parsedData.shippingAddress );
 			} else {
-				console.warn( 'No shipping address found in saved data' );
+				log( `No shipping address found in saved data`, 'warn' );
 			}
 			if ( parsedData.billingAddress ) {
-				console.log(
+				log(
-					'Restoring billing address:',
+					`Restoring billing address:
-					parsedData.billingAddress
+					${ JSON.stringify( parsedData.billingAddress ) }`
 				);
 				updateBillingAddress( parsedData.billingAddress );
 			} else {
-				console.warn( 'No billing address found in saved data' );
+				log( 'No billing address found in saved data', 'warn' );
 			}
-			console.log(
-				'Original fields restored from localStorage',
-				parsedData
-			);
 		} catch ( error ) {
-			console.error( 'Error parsing saved data:', error );
+			log( `Error parsing saved data: ${ error }` );
 		}
 	} else {
-		console.warn(
+		log(
-			'No data found in localStorage under axoOriginalCheckoutFields'
+			'No data found in localStorage under axoOriginalCheckoutFields',
+			'warn'
 		);
 	}
 };
@@ -78,9 +74,10 @@ export const populateWooFields = (
 ) => {
 	const CHECKOUT_STORE_KEY = 'wc/store/checkout';
 
-	console.log(
+	log(
-		'Populating WooCommerce fields with profile data:',
+		`Populating WooCommerce fields with profile data: ${ JSON.stringify(
-		profileData
+			profileData
+		) }`
 	);
 
 	const checkoutDispatch = dispatch( CHECKOUT_STORE_KEY );
@@ -107,7 +104,11 @@ export const populateWooFields = (
 		phone: phoneNumber.nationalNumber,
 	};
 
-	console.log( 'Setting WooCommerce shipping address:', shippingAddress );
+	log(
+		`Setting WooCommerce shipping address: ${ JSON.stringify(
+			shippingAddress
+		) }`
+	);
 	setWooShippingAddress( shippingAddress );
 
 	// Save billing address.
@@ -124,7 +125,11 @@ export const populateWooFields = (
 		country: billingData.countryCode,
 	};
 
-	console.log( 'Setting WooCommerce billing address:', billingAddress );
+	log(
+		`Setting WooCommerce billing address: ${ JSON.stringify(
+			billingAddress
+		) }`
+	);
 	setWooBillingAddress( billingAddress );
 
 	// Collapse shipping address input fields into the card view.

modules/ppcp-axo-block/resources/js/hooks/useAxoCleanup.js

@@ -1,5 +1,6 @@
 import { useEffect } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { log } from '../../../../ppcp-axo/resources/js/Helper/Debug';
 import { STORE_NAME } from '../stores/axoStore';
 import { removeShippingChangeButton } from '../components/Shipping';
 import { removeCardChangeButton } from '../components/Card';
@@ -19,9 +20,8 @@ const useAxoCleanup = () => {
 	} = useCustomerData();
 
 	useEffect( () => {
-		console.log( 'Setting up cleanup for WooCommerce fields' );
 		return () => {
-			console.log( 'Cleaning up: Restoring WooCommerce fields' );
+			log( 'Cleaning up: Restoring WooCommerce fields' );
 			restoreOriginalFields(
 				updateWooShippingAddress,
 				updateWooBillingAddress
@@ -30,16 +30,15 @@ const useAxoCleanup = () => {
 	}, [ updateWooShippingAddress, updateWooBillingAddress ] );
 
 	useEffect( () => {
-		console.log( 'Setting up cleanup for Axo component' );
 		return () => {
-			console.log( 'Cleaning up Axo component' );
+			log( 'Cleaning up Axo component' );
 			setIsAxoActive( false );
 			setIsGuest( true );
 			removeShippingChangeButton();
 			removeCardChangeButton();
 			removeWatermark();
 			if ( isEmailFunctionalitySetup() ) {
-				console.log( 'Removing email functionality' );
+				log( 'Removing email functionality' );
 				removeEmailFunctionality();
 			}
 		};

modules/ppcp-axo-block/resources/js/hooks/useAxoSetup.js

@@ -36,17 +36,12 @@ const useAxoSetup = ( ppcpConfig, fastlaneSdk, paymentComponent ) => {
 	usePhoneSyncHandler( paymentComponent );
 
 	useEffect( () => {
-		console.log( 'Initializing class toggles' );
 		initializeClassToggles();
 	}, [] );
 
 	useEffect( () => {
-		console.log( 'Setting up Axo functionality' );
 		setupWatermark( fastlaneSdk );
 		if ( paypalLoaded && fastlaneSdk ) {
-			console.log(
-				'PayPal loaded and FastlaneSDK available, setting up email functionality'
-			);
 			setIsAxoScriptLoaded( true );
 			setIsAxoActive( true );
 			const emailLookupHandler = createEmailLookupHandler(

modules/ppcp-axo-block/resources/js/hooks/useCardChange.js

@@ -1,5 +1,6 @@
 import { useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { log } from '../../../../ppcp-axo/resources/js/Helper/Debug';
 import { useAddressEditing } from './useAddressEditing';
 import useCustomerData from './useCustomerData';
 import { STORE_NAME } from '../stores/axoStore';
@@ -60,7 +61,7 @@ export const useCardChange = ( fastlaneSdk ) => {
 					} ),
 				] );
 			} else {
-				console.error( 'Selected card or billing address is missing.' );
+				log( 'Selected card or billing address is missing.', 'error' );
 			}
 		}
 	}, [

modules/ppcp-axo-block/resources/js/hooks/useFastlaneSdk.js

@@ -38,7 +38,7 @@ const useFastlaneSdk = ( axoConfig, ppcpConfig ) => {
 
 				setFastlaneSdk( fastlane );
 			} catch ( error ) {
-				console.error( 'Failed to initialize Fastlane:', error );
+				log( `Failed to initialize Fastlane: ${ error }`, 'error' );
 			} finally {
 				initializingRef.current = false;
 			}

modules/ppcp-axo-block/resources/js/hooks/usePayPalScript.js

@@ -1,4 +1,5 @@
 import { useState, useEffect } from '@wordpress/element';
+import { log } from '../../../../ppcp-axo/resources/js/Helper/Debug';
 import { loadPaypalScript } from '../../../../ppcp-button/resources/js/modules/Helper/ScriptLoading';
 
 const usePayPalScript = ( ppcpConfig ) => {
@@ -6,9 +7,9 @@ const usePayPalScript = ( ppcpConfig ) => {
 
 	useEffect( () => {
 		if ( ! isLoaded ) {
-			console.log( 'Loading PayPal script' );
+			log( 'Loading PayPal script' );
 			loadPaypalScript( ppcpConfig, () => {
-				console.log( 'PayPal script loaded' );
+				log( 'PayPal script loaded' );
 				setIsLoaded( true );
 			} );
 		}

modules/ppcp-axo-block/resources/js/hooks/usePhoneSyncHandler.js

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { log } from '../../../../ppcp-axo/resources/js/Helper/Debug';
 import { debounce } from '../../../../ppcp-blocks/resources/js/Helper/debounce';
 import { STORE_NAME } from '../stores/axoStore';
 import useCustomerData from './useCustomerData';
@@ -26,7 +27,7 @@ const sanitizePhoneNumber = ( phoneNumber = '' ) => {
  * @param {string} phoneNumber      - The new phone number to prefill.
  */
 const updatePrefills = ( paymentComponent, phoneNumber ) => {
-	console.log( 'Update the phone prefill value', phoneNumber );
+	log( `Update the phone prefill value: ${ phoneNumber }` );
 	paymentComponent.updatePrefills( { phoneNumber } );
 };
 

modules/ppcp-axo/resources/js/Helper/Debug.js

@@ -8,6 +8,9 @@ export function log( message, level = 'info' ) {
 			case 'error':
 				console.error( `[AXO] ${ message }` );
 				break;
+			case 'warn':
+				console.warn( `[AXO] ${ message }` );
+				break;
 			default:
 				console.log( `[AXO] ${ message }` );
 		}