From 70676468b8ab15003f6a2d42c100e05e5ad0bfcd Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Thu, 26 Sep 2024 12:47:04 +0200 Subject: [PATCH] Axo Blocks: Migrate console logs to the Axo log function --- .../js/components/EmailButton/utils.js | 8 ++- .../resources/js/components/Shipping/utils.js | 4 -- .../js/components/Watermark/Watermark.js | 3 +- .../components/Watermark/WatermarkManager.js | 14 ---- .../js/components/Watermark/utils.js | 13 ---- .../resources/js/events/emailLookupManager.js | 17 ++--- .../resources/js/helpers/classnamesManager.js | 16 ++++- .../resources/js/helpers/fieldHelpers.js | 71 ++++++++++--------- .../resources/js/hooks/useAxoCleanup.js | 9 ++- .../resources/js/hooks/useAxoSetup.js | 5 -- .../resources/js/hooks/useCardChange.js | 3 +- .../resources/js/hooks/useFastlaneSdk.js | 2 +- .../resources/js/hooks/usePayPalScript.js | 5 +- .../resources/js/hooks/usePhoneSyncHandler.js | 3 +- modules/ppcp-axo/resources/js/Helper/Debug.js | 3 + 15 files changed, 82 insertions(+), 94 deletions(-) diff --git a/modules/ppcp-axo-block/resources/js/components/EmailButton/utils.js b/modules/ppcp-axo-block/resources/js/components/EmailButton/utils.js index c1a27f9c4..087e6537d 100644 --- a/modules/ppcp-axo-block/resources/js/components/EmailButton/utils.js +++ b/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( - 'Email input element not found. Functionality not added.' + log( + '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(); diff --git a/modules/ppcp-axo-block/resources/js/components/Shipping/utils.js b/modules/ppcp-axo-block/resources/js/components/Shipping/utils.js index 1fcb93d6c..1bce1ea3f 100644 --- a/modules/ppcp-axo-block/resources/js/components/Shipping/utils.js +++ b/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.' - ); } }; diff --git a/modules/ppcp-axo-block/resources/js/components/Watermark/Watermark.js b/modules/ppcp-axo-block/resources/js/components/Watermark/Watermark.js index bd7b7a15e..fcc098768 100644 --- a/modules/ppcp-axo-block/resources/js/components/Watermark/Watermark.js +++ b/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' ); } }; diff --git a/modules/ppcp-axo-block/resources/js/components/Watermark/WatermarkManager.js b/modules/ppcp-axo-block/resources/js/components/Watermark/WatermarkManager.js index 852c980da..41c078585 100644 --- a/modules/ppcp-axo-block/resources/js/components/Watermark/WatermarkManager.js +++ b/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(); } diff --git a/modules/ppcp-axo-block/resources/js/components/Watermark/utils.js b/modules/ppcp-axo-block/resources/js/components/Watermark/utils.js index 5e0cd990c..38f4a7582 100644 --- a/modules/ppcp-axo-block/resources/js/components/Watermark/utils.js +++ b/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 ); } }; diff --git a/modules/ppcp-axo-block/resources/js/events/emailLookupManager.js b/modules/ppcp-axo-block/resources/js/events/emailLookupManager.js index f9f2f8368..85efa0234 100644 --- a/modules/ppcp-axo-block/resources/js/events/emailLookupManager.js +++ b/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( - 'Error during email lookup or authentication:', - error + log( + `Error during email lookup or authentication: + ${ error }` ); throw error; } diff --git a/modules/ppcp-axo-block/resources/js/helpers/classnamesManager.js b/modules/ppcp-axo-block/resources/js/helpers/classnamesManager.js index bd6ea9bfc..2af96aea9 100644 --- a/modules/ppcp-axo-block/resources/js/helpers/classnamesManager.js +++ b/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; } diff --git a/modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js b/modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js index 9a9fa02a0..9c66d762d 100644 --- a/modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js +++ b/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:', { - shippingAddress, - billingAddress, - } ); + log( + `Shipping or billing address is missing: ${ JSON.stringify( { + 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( - 'Restoring billing address:', - parsedData.billingAddress + log( + `Restoring billing address: + ${ 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( - 'No data found in localStorage under axoOriginalCheckoutFields' + log( + 'No data found in localStorage under axoOriginalCheckoutFields', + 'warn' ); } }; @@ -78,9 +74,10 @@ export const populateWooFields = ( ) => { const CHECKOUT_STORE_KEY = 'wc/store/checkout'; - console.log( - 'Populating WooCommerce fields with profile data:', - profileData + log( + `Populating WooCommerce fields with profile data: ${ JSON.stringify( + 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. diff --git a/modules/ppcp-axo-block/resources/js/hooks/useAxoCleanup.js b/modules/ppcp-axo-block/resources/js/hooks/useAxoCleanup.js index d884e1c67..23175e31f 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useAxoCleanup.js +++ b/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(); } }; diff --git a/modules/ppcp-axo-block/resources/js/hooks/useAxoSetup.js b/modules/ppcp-axo-block/resources/js/hooks/useAxoSetup.js index 90df3f3fa..bdc615461 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useAxoSetup.js +++ b/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( diff --git a/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js b/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js index 8cb78260f..6d2482416 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js +++ b/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' ); } } }, [ diff --git a/modules/ppcp-axo-block/resources/js/hooks/useFastlaneSdk.js b/modules/ppcp-axo-block/resources/js/hooks/useFastlaneSdk.js index 1ac40e711..9bd9db8d5 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useFastlaneSdk.js +++ b/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; } diff --git a/modules/ppcp-axo-block/resources/js/hooks/usePayPalScript.js b/modules/ppcp-axo-block/resources/js/hooks/usePayPalScript.js index 0729b4909..8fc85829e 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/usePayPalScript.js +++ b/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 ); } ); } diff --git a/modules/ppcp-axo-block/resources/js/hooks/usePhoneSyncHandler.js b/modules/ppcp-axo-block/resources/js/hooks/usePhoneSyncHandler.js index 1113ddb3e..3e62f255c 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/usePhoneSyncHandler.js +++ b/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 } ); }; diff --git a/modules/ppcp-axo/resources/js/Helper/Debug.js b/modules/ppcp-axo/resources/js/Helper/Debug.js index 6345ee935..2ac4e7b2b 100644 --- a/modules/ppcp-axo/resources/js/Helper/Debug.js +++ b/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 }` ); }