diff --git a/modules/ppcp-axo-block/resources/css/gateway.scss b/modules/ppcp-axo-block/resources/css/gateway.scss
index 543217bc1..f7c3b8fe9 100644
--- a/modules/ppcp-axo-block/resources/css/gateway.scss
+++ b/modules/ppcp-axo-block/resources/css/gateway.scss
@@ -128,6 +128,10 @@
align-items: start;
}
+ #email {
+ align-self: center;
+ }
+
&.wc-block-axo-is-authenticated .wc-block-components-text-input {
gap: 14px 0;
}
@@ -139,7 +143,7 @@
.wc-block-axo-email-submit-button-container {
grid-area: button;
- align-self: start;
+ align-self: center;
}
.wc-block-checkout-axo-block-watermark-container {
@@ -221,4 +225,6 @@ a.wc-block-axo-change-link{
}
}
-
+#shipping-fields .wc-block-components-checkout-step__heading {
+ display: flex;
+}
diff --git a/modules/ppcp-axo-block/resources/js/components/AddressCard.js b/modules/ppcp-axo-block/resources/js/components/AddressCard.js
new file mode 100644
index 000000000..e91c3defe
--- /dev/null
+++ b/modules/ppcp-axo-block/resources/js/components/AddressCard.js
@@ -0,0 +1,68 @@
+import { __ } from '@wordpress/i18n';
+
+const AddressCard = ( { address, onEdit, isExpanded } ) => {
+ const formatAddress = ( addressData ) => {
+ const {
+ first_name,
+ last_name,
+ company,
+ address_1,
+ address_2,
+ city,
+ state,
+ postcode,
+ country,
+ } = addressData;
+ const formattedAddress = [
+ `${ first_name } ${ last_name }`,
+ company,
+ address_1,
+ address_2,
+ city,
+ state,
+ postcode,
+ country,
+ ].filter( Boolean );
+
+ return formattedAddress;
+ };
+
+ const formattedAddress = formatAddress( address );
+
+ return (
+
+
+ { formattedAddress.map( ( line, index ) => (
+
+ { line }
+
+ ) ) }
+ { address.phone && (
+
+ { address.phone }
+
+ ) }
+
+ { onEdit && (
+
+ ) }
+
- { fullName }
+ { name }
{ formattedExpiry }{ ' ' }
diff --git a/modules/ppcp-axo-block/resources/js/components/Payment.js b/modules/ppcp-axo-block/resources/js/components/Payment.js
index 2ee826f09..5598e1da1 100644
--- a/modules/ppcp-axo-block/resources/js/components/Payment.js
+++ b/modules/ppcp-axo-block/resources/js/components/Payment.js
@@ -6,7 +6,6 @@ import { STORE_NAME } from '../stores/axoStore';
export const Payment = ( {
fastlaneSdk,
card,
- shippingAddress,
onPaymentLoad,
} ) => {
const isGuest = useSelect( ( select ) =>
@@ -32,9 +31,7 @@ export const Payment = ( {
) : (
diff --git a/modules/ppcp-axo-block/resources/js/helpers/addressManager.js b/modules/ppcp-axo-block/resources/js/helpers/addressManager.js
new file mode 100644
index 000000000..351f7ab88
--- /dev/null
+++ b/modules/ppcp-axo-block/resources/js/helpers/addressManager.js
@@ -0,0 +1,58 @@
+import { useState, useEffect, createRoot } from '@wordpress/element';
+import AddressCard from '../components/AddressCard';
+import { useCustomerData } from '../hooks/useCustomerData';
+
+const AddressManager = ( { onChangeShippingAddressClick } ) => {
+ const [ isEditing, setIsEditing ] = useState( false );
+ const { shippingAddress } = useCustomerData();
+
+ useEffect( () => {
+ const injectAddressCard = () => {
+ const shippingForm = document.querySelector(
+ '#shipping.wc-block-components-address-form'
+ );
+ if (
+ shippingForm &&
+ ! document.querySelector(
+ '.wc-block-components-axo-address-card'
+ )
+ ) {
+ const cardWrapper = document.createElement( 'div' );
+ cardWrapper.className = 'wc-block-components-axo-address-card';
+ shippingForm.parentNode.insertBefore(
+ cardWrapper,
+ shippingForm
+ );
+
+ const root = createRoot( cardWrapper );
+ root.render(
+ {
+ setIsEditing( ! isEditing );
+ onChangeShippingAddressClick();
+ } }
+ isExpanded={ isEditing }
+ />
+ );
+ }
+ };
+
+ if ( shippingAddress ) {
+ injectAddressCard();
+ }
+
+ return () => {
+ const cardWrapper = document.querySelector(
+ '.wc-block-components-axo-address-card'
+ );
+ if ( cardWrapper ) {
+ cardWrapper.remove();
+ }
+ };
+ }, [ shippingAddress, isEditing, onChangeShippingAddressClick ] );
+
+ return null;
+};
+
+export default AddressManager;
diff --git a/modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js b/modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js
index aa6c36e62..04b2ce2a9 100644
--- a/modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js
+++ b/modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js
@@ -1,4 +1,5 @@
export const snapshotFields = ( shippingAddress, billingAddress ) => {
+ console.log( 'Attempting to snapshot fields' );
if ( ! shippingAddress || ! billingAddress ) {
console.warn( 'Shipping or billing address is missing:', {
shippingAddress,
@@ -8,29 +9,59 @@ export const snapshotFields = ( shippingAddress, billingAddress ) => {
const originalData = { shippingAddress, billingAddress };
console.log( 'Snapshot data:', originalData );
- localStorage.setItem(
- 'axoOriginalCheckoutFields',
- JSON.stringify( originalData )
- );
- console.log( 'Original fields saved to localStorage', 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 );
+ }
};
export const restoreOriginalFields = (
updateShippingAddress,
updateBillingAddress
) => {
- const savedData = localStorage.getItem( 'axoOriginalCheckoutFields' );
- console.log( 'Data retrieved from localStorage:', savedData );
+ console.log( 'Attempting to restore original fields' );
+ let savedData;
+ try {
+ savedData = localStorage.getItem( 'axoOriginalCheckoutFields' );
+ console.log( 'Data retrieved from localStorage:', savedData );
+ } catch ( error ) {
+ console.error( 'Error retrieving from localStorage:', error );
+ }
if ( savedData ) {
- const parsedData = JSON.parse( savedData );
- if ( parsedData.shippingAddress ) {
- updateShippingAddress( parsedData.shippingAddress );
+ 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' );
+ }
+ if ( parsedData.billingAddress ) {
+ console.log(
+ 'Restoring billing address:',
+ parsedData.billingAddress
+ );
+ updateBillingAddress( parsedData.billingAddress );
+ } else {
+ console.warn( 'No billing address found in saved data' );
+ }
+ console.log(
+ 'Original fields restored from localStorage',
+ parsedData
+ );
+ } catch ( error ) {
+ console.error( 'Error parsing saved data:', error );
}
- if ( parsedData.billingAddress ) {
- updateBillingAddress( parsedData.billingAddress );
- }
- console.log( 'Original fields restored from localStorage', parsedData );
} else {
console.warn(
'No data found in localStorage under axoOriginalCheckoutFields'
@@ -43,10 +74,15 @@ export const populateWooFields = (
setWooShippingAddress,
setWooBillingAddress
) => {
+ console.log(
+ 'Populating WooCommerce fields with profile data:',
+ profileData
+ );
+
// Save shipping address
const { address, name, phoneNumber } = profileData.shippingAddress;
- setWooShippingAddress( {
+ const shippingAddress = {
first_name: name.firstName,
last_name: name.lastName,
address_1: address.addressLine1,
@@ -56,12 +92,15 @@ export const populateWooFields = (
postcode: address.postalCode,
country: address.countryCode,
phone: phoneNumber.nationalNumber,
- } );
+ };
+
+ console.log( 'Setting WooCommerce shipping address:', shippingAddress );
+ setWooShippingAddress( shippingAddress );
// Save billing address
const billingData = profileData.card.paymentSource.card.billingAddress;
- setWooBillingAddress( {
+ const billingAddress = {
first_name: profileData.name.firstName,
last_name: profileData.name.lastName,
address_1: billingData.addressLine1,
@@ -70,5 +109,8 @@ export const populateWooFields = (
state: billingData.adminArea1,
postcode: billingData.postalCode,
country: billingData.countryCode,
- } );
+ };
+
+ console.log( 'Setting WooCommerce billing address:', billingAddress );
+ setWooBillingAddress( billingAddress );
};
diff --git a/modules/ppcp-axo-block/resources/js/helpers/shippingChangeButtonManager.js b/modules/ppcp-axo-block/resources/js/helpers/shippingChangeButtonManager.js
index fc93bd675..3ea9c41a7 100644
--- a/modules/ppcp-axo-block/resources/js/helpers/shippingChangeButtonManager.js
+++ b/modules/ppcp-axo-block/resources/js/helpers/shippingChangeButtonManager.js
@@ -1,62 +1,54 @@
-import { createElement, useEffect, createRoot } from '@wordpress/element';
+import { useEffect, createRoot } from '@wordpress/element';
-const ShippingChangeButton = ( { onChangeShippingAddressClick } ) =>
- createElement(
- 'a',
- {
- className:
- 'wc-block-checkout-axo-block-card__edit wc-block-axo-change-link',
- role: 'button',
- onClick: ( event ) => {
- event.preventDefault();
- onChangeShippingAddressClick();
- },
- },
- 'Choose a different shipping address'
- );
+const ShippingChangeButton = ( { onChangeShippingAddressClick } ) => (
+ {
+ event.preventDefault();
+ onChangeShippingAddressClick();
+ } }
+ >
+ Choose a different shipping address
+
+);
const ShippingChangeButtonManager = ( { onChangeShippingAddressClick } ) => {
useEffect( () => {
- const shippingTitle = document.querySelector(
- '#shipping-fields h2.wc-block-components-title'
+ const shippingHeading = document.querySelector(
+ '#shipping-fields .wc-block-components-checkout-step__heading'
);
- if ( shippingTitle ) {
- if (
- ! shippingTitle.nextElementSibling?.classList?.contains(
- 'wc-block-checkout-axo-block-card__edit'
- )
- ) {
- const buttonContainer = document.createElement( 'span' );
- shippingTitle.parentNode.insertBefore(
- buttonContainer,
- shippingTitle.nextSibling
- );
+ if (
+ shippingHeading &&
+ ! shippingHeading.querySelector(
+ '.wc-block-checkout-axo-block-card__edit'
+ )
+ ) {
+ const spanElement = document.createElement( 'span' );
+ spanElement.className = 'wc-block-checkout-axo-block-card__edit';
+ shippingHeading.appendChild( spanElement );
- const root = createRoot( buttonContainer );
- root.render(
- createElement( ShippingChangeButton, {
- onChangeShippingAddressClick,
- } )
- );
- }
- }
-
- return () => {
- const button = document.querySelector(
- '#shipping-fields .wc-block-checkout-axo-block-card__edit'
+ const root = createRoot( spanElement );
+ root.render(
+
);
- if ( button && button.parentNode ) {
- button.parentNode.remove();
- }
- };
+
+ return () => {
+ root.unmount();
+ spanElement.remove();
+ };
+ }
}, [ onChangeShippingAddressClick ] );
return null;
};
export const injectShippingChangeButton = ( onChangeShippingAddressClick ) => {
- // Check if the button already exists
const existingButton = document.querySelector(
'#shipping-fields .wc-block-checkout-axo-block-card__edit'
);
@@ -65,9 +57,9 @@ export const injectShippingChangeButton = ( onChangeShippingAddressClick ) => {
const container = document.createElement( 'div' );
document.body.appendChild( container );
createRoot( container ).render(
- createElement( ShippingChangeButtonManager, {
- onChangeShippingAddressClick,
- } )
+
);
} else {
console.log(
@@ -77,11 +69,12 @@ export const injectShippingChangeButton = ( onChangeShippingAddressClick ) => {
};
export const removeShippingChangeButton = () => {
- const button = document.querySelector(
+ const span = document.querySelector(
'#shipping-fields .wc-block-checkout-axo-block-card__edit'
);
- if ( button && button.parentNode ) {
- button.parentNode.remove();
+ if ( span ) {
+ createRoot( span ).unmount();
+ span.remove();
}
};
diff --git a/modules/ppcp-axo-block/resources/js/helpers/watermarkHelpers.js b/modules/ppcp-axo-block/resources/js/helpers/watermarkHelpers.js
index 6a59ffbc9..5a15a5d68 100644
--- a/modules/ppcp-axo-block/resources/js/helpers/watermarkHelpers.js
+++ b/modules/ppcp-axo-block/resources/js/helpers/watermarkHelpers.js
@@ -8,7 +8,11 @@ let watermarkReference = {
root: null,
};
-const WatermarkManager = ( { fastlaneSdk, isLoaded } ) => {
+console.log( 'WatermarkManager module loaded' );
+
+const WatermarkManager = ( { fastlaneSdk } ) => {
+ console.log( 'WatermarkManager rendering', { fastlaneSdk } );
+
const isGuest = useSelect( ( select ) =>
select( STORE_NAME ).getIsGuest()
);
@@ -19,18 +23,30 @@ const WatermarkManager = ( { fastlaneSdk, isLoaded } ) => {
select( STORE_NAME ).isAxoScriptLoaded()
);
+ console.log( 'WatermarkManager state', {
+ isGuest,
+ isAxoActive,
+ isAxoScriptLoaded,
+ } );
+
useEffect( () => {
+ console.log( 'WatermarkManager useEffect triggered' );
+
const createWatermark = () => {
+ console.log( 'Creating watermark' );
const textInputContainer = document.querySelector(
'.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input'
);
if ( textInputContainer && ! watermarkReference.container ) {
- const emailInput = textInputContainer.querySelector(
- 'input[type="email"]'
+ 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(
@@ -50,7 +66,9 @@ const WatermarkManager = ( { fastlaneSdk, isLoaded } ) => {
}
if ( watermarkReference.root ) {
+ console.log( 'Rendering watermark content' );
if ( ! isAxoActive && ! isAxoScriptLoaded ) {
+ console.log( 'Rendering spinner' );
watermarkReference.root.render(
createElement( 'span', {
className: 'wc-block-components-spinner',
@@ -58,6 +76,7 @@ const WatermarkManager = ( { fastlaneSdk, isLoaded } ) => {
} )
);
} else if ( isAxoActive ) {
+ console.log( 'Rendering FastlaneWatermark' );
watermarkReference.root.render(
createElement( FastlaneWatermark, {
fastlaneSdk,
@@ -66,12 +85,14 @@ const WatermarkManager = ( { fastlaneSdk, isLoaded } ) => {
} )
);
} else {
+ console.log( 'Rendering null content' );
watermarkReference.root.render( null );
}
}
};
const removeWatermark = () => {
+ console.log( 'Removing watermark' );
if ( watermarkReference.root ) {
watermarkReference.root.unmount();
}
@@ -90,27 +111,32 @@ const WatermarkManager = ( { fastlaneSdk, isLoaded } ) => {
}
}
watermarkReference = { container: null, root: null };
+ console.log( 'Watermark removed' );
};
if ( isAxoActive || ( ! isAxoActive && ! isAxoScriptLoaded ) ) {
+ console.log( 'Conditions met, creating watermark' );
createWatermark();
} else {
+ console.log( 'Conditions not met, removing watermark' );
removeWatermark();
}
return removeWatermark;
- }, [ fastlaneSdk, isGuest, isAxoActive, isLoaded, isAxoScriptLoaded ] );
+ }, [ fastlaneSdk, isGuest, isAxoActive, isAxoScriptLoaded ] );
return null;
};
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 );
@@ -119,6 +145,7 @@ export const setupWatermark = ( fastlaneSdk ) => {
};
export const removeWatermark = () => {
+ console.log( 'Removing watermark (external call)' );
if ( watermarkReference.root ) {
watermarkReference.root.unmount();
}
@@ -137,6 +164,7 @@ export const removeWatermark = () => {
}
}
watermarkReference = { container: null, root: null };
+ console.log( 'Watermark removed (external call)' );
};
export default WatermarkManager;
diff --git a/modules/ppcp-axo-block/resources/js/hooks/useAxoBlockManager.js b/modules/ppcp-axo-block/resources/js/hooks/useAxoBlockManager.js
index e8c002d43..815470898 100644
--- a/modules/ppcp-axo-block/resources/js/hooks/useAxoBlockManager.js
+++ b/modules/ppcp-axo-block/resources/js/hooks/useAxoBlockManager.js
@@ -1,39 +1,49 @@
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
import Fastlane from '../../../../ppcp-axo/resources/js/Connection/Fastlane';
import { log } from '../../../../ppcp-axo/resources/js/Helper/Debug';
const useAxoBlockManager = ( axoConfig, ppcpConfig ) => {
const [ fastlaneSdk, setFastlaneSdk ] = useState( null );
- const [ initialized, setInitialized ] = useState( false );
+ const initializingRef = useRef( false );
+ const configRef = useRef( { axoConfig, ppcpConfig } );
useEffect( () => {
const initFastlane = async () => {
- log( 'Init Fastlane' );
-
- if ( initialized ) {
+ if ( initializingRef.current || fastlaneSdk ) {
return;
}
- setInitialized( true );
+ initializingRef.current = true;
+ log( 'Init Fastlane' );
- const fastlane = new Fastlane();
+ try {
+ const fastlane = new Fastlane();
- if ( axoConfig.environment.is_sandbox ) {
- window.localStorage.setItem( 'axoEnv', 'sandbox' );
+ if ( configRef.current.axoConfig.environment.is_sandbox ) {
+ window.localStorage.setItem( 'axoEnv', 'sandbox' );
+ }
+
+ await fastlane.connect( {
+ locale: configRef.current.ppcpConfig.locale,
+ styles: configRef.current.ppcpConfig.styles,
+ } );
+
+ fastlane.setLocale( 'en_us' );
+
+ setFastlaneSdk( fastlane );
+ } catch ( error ) {
+ console.error( 'Failed to initialize Fastlane:', error );
+ } finally {
+ initializingRef.current = false;
}
-
- await fastlane.connect( {
- locale: ppcpConfig.locale,
- styles: ppcpConfig.styles,
- } );
-
- fastlane.setLocale( 'en_us' );
-
- setFastlaneSdk( fastlane );
};
initFastlane();
- }, [ axoConfig, ppcpConfig, initialized ] );
+ }, [] );
+
+ useEffect( () => {
+ configRef.current = { axoConfig, ppcpConfig };
+ }, [ axoConfig, ppcpConfig ] );
return fastlaneSdk;
};
diff --git a/modules/ppcp-axo-block/resources/js/hooks/useCustomerData.js b/modules/ppcp-axo-block/resources/js/hooks/useCustomerData.js
index b1e43389b..1d513f0d1 100644
--- a/modules/ppcp-axo-block/resources/js/hooks/useCustomerData.js
+++ b/modules/ppcp-axo-block/resources/js/hooks/useCustomerData.js
@@ -1,16 +1,42 @@
+import { useCallback, useMemo } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
export const useCustomerData = () => {
const customerData = useSelect( ( select ) =>
select( 'wc/store/cart' ).getCustomerData()
);
- const { setShippingAddress, setBillingAddress } =
- useDispatch( 'wc/store/cart' );
- return {
- shippingAddress: customerData.shippingAddress,
- billingAddress: customerData.billingAddress,
- setShippingAddress,
- setBillingAddress,
- };
+ const {
+ setShippingAddress: setShippingAddressDispatch,
+ setBillingAddress: setBillingAddressDispatch,
+ } = useDispatch( 'wc/store/cart' );
+
+ const setShippingAddress = useCallback(
+ ( address ) => {
+ setShippingAddressDispatch( address );
+ },
+ [ setShippingAddressDispatch ]
+ );
+
+ const setBillingAddress = useCallback(
+ ( address ) => {
+ setBillingAddressDispatch( address );
+ },
+ [ setBillingAddressDispatch ]
+ );
+
+ return useMemo(
+ () => ( {
+ shippingAddress: customerData.shippingAddress,
+ billingAddress: customerData.billingAddress,
+ setShippingAddress,
+ setBillingAddress,
+ } ),
+ [
+ customerData.shippingAddress,
+ customerData.billingAddress,
+ setShippingAddress,
+ setBillingAddress,
+ ]
+ );
};
diff --git a/modules/ppcp-axo-block/resources/js/hooks/useUserInfoChange.js b/modules/ppcp-axo-block/resources/js/hooks/useUserInfoChange.js
index f5ddc1571..6592884b8 100644
--- a/modules/ppcp-axo-block/resources/js/hooks/useUserInfoChange.js
+++ b/modules/ppcp-axo-block/resources/js/hooks/useUserInfoChange.js
@@ -34,7 +34,7 @@ export const useShippingAddressChange = (
}, [ fastlaneSdk, setShippingAddress, setWooShippingAddress ] );
};
-export const useCardChange = ( fastlaneSdk, setCard ) => {
+export const useCardChange = ( fastlaneSdk, setCard, setWooBillingAddress ) => {
return useCallback( async () => {
if ( fastlaneSdk ) {
const { selectionChanged, selectedCard } =
@@ -42,6 +42,27 @@ export const useCardChange = ( fastlaneSdk, setCard ) => {
if ( selectionChanged ) {
setCard( selectedCard );
console.log( 'Selected card changed:', selectedCard );
+ console.log( 'Setting new billing details:', selectedCard );
+ const { name, billingAddress } =
+ selectedCard.paymentSource.card;
+
+ // Split the full name into first and last name
+ const nameParts = name.split( ' ' );
+ const firstName = nameParts[ 0 ];
+ const lastName = nameParts.slice( 1 ).join( ' ' );
+
+ setWooBillingAddress( {
+ first_name: firstName,
+ last_name: lastName,
+ address_1: billingAddress.addressLine1,
+ address_2: billingAddress.addressLine2 || '',
+ city: billingAddress.adminArea2,
+ state: billingAddress.adminArea1,
+ postcode: billingAddress.postalCode,
+ country: billingAddress.countryCode,
+ } );
+
+ console.log( 'Billing address updated:', billingAddress );
}
}
}, [ fastlaneSdk, setCard ] );
diff --git a/modules/ppcp-axo-block/resources/js/index.js b/modules/ppcp-axo-block/resources/js/index.js
index b94d74763..34e556d65 100644
--- a/modules/ppcp-axo-block/resources/js/index.js
+++ b/modules/ppcp-axo-block/resources/js/index.js
@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
import { registerPaymentMethod } from '@woocommerce/blocks-registry';
@@ -43,6 +43,7 @@ if ( typeof window.PayPalCommerceGateway === 'undefined' ) {
const axoConfig = window.wc_ppcp_axo;
const Axo = () => {
+ console.log( 'Axo component rendering' );
const [ paypalLoaded, setPaypalLoaded ] = useState( false );
const [ shippingAddress, setShippingAddress ] = useState( null );
const [ card, setCard ] = useState( null );
@@ -51,7 +52,6 @@ const Axo = () => {
const { setIsAxoActive, setIsGuest, setIsAxoScriptLoaded } =
useDispatch( STORE_NAME );
- // Access WooCommerce customer data
const {
shippingAddress: wooShippingAddress,
billingAddress: wooBillingAddress,
@@ -60,12 +60,14 @@ const Axo = () => {
} = useCustomerData();
useEffect( () => {
+ console.log( 'Initializing class toggles' );
initializeClassToggles();
}, [] );
useEffect( () => {
+ console.log( 'Setting up cleanup for WooCommerce fields' );
return () => {
- // Restore WooCommerce fields
+ console.log( 'Cleaning up: Restoring WooCommerce fields' );
restoreOriginalFields(
updateWooShippingAddress,
updateWooBillingAddress
@@ -73,30 +75,39 @@ const Axo = () => {
};
}, [ updateWooShippingAddress, updateWooBillingAddress ] );
- const {
- setShippingAddress: setWooShippingAddress,
- setBillingAddress: setWooBillingAddress,
- } = useCustomerData();
-
useEffect( () => {
if ( ! paypalLoaded ) {
+ console.log( 'Loading PayPal script' );
loadPaypalScript( ppcpConfig, () => {
+ console.log( 'PayPal script loaded' );
setPaypalLoaded( true );
} );
}
}, [ paypalLoaded, ppcpConfig ] );
+ const {
+ setShippingAddress: setWooShippingAddress,
+ setBillingAddress: setWooBillingAddress,
+ } = useCustomerData();
+
const onChangeShippingAddressClick = useShippingAddressChange(
fastlaneSdk,
setShippingAddress,
updateWooShippingAddress
);
-
- const onChangeCardButtonClick = useCardChange( fastlaneSdk, setCard );
+ const onChangeCardButtonClick = useCardChange(
+ fastlaneSdk,
+ setCard,
+ updateWooBillingAddress
+ );
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(
@@ -127,52 +138,40 @@ const Axo = () => {
] );
useEffect( () => {
+ console.log( 'Setting up cleanup for Axo component' );
return () => {
+ console.log( 'Cleaning up Axo component' );
setIsAxoActive( false );
setIsGuest( true );
-
removeShippingChangeButton();
removeCardChangeButton();
removeWatermark();
- };
- }, [
- setIsAxoActive,
- setIsGuest,
- updateWooShippingAddress,
- updateWooBillingAddress,
- ] );
-
- useEffect( () => {
- return () => {
- setIsAxoActive( false );
- setIsGuest( true );
-
- removeShippingChangeButton();
- removeCardChangeButton();
- removeWatermark();
-
if ( isEmailFunctionalitySetup() ) {
+ console.log( 'Removing email functionality' );
removeEmailFunctionality();
}
};
}, [] );
- const handlePaymentLoad = useCallback(
- ( paymentComponent ) => {
- console.log( 'Payment component loaded', paymentComponent );
- },
- [] // Empty dependency array to avoid re-creating the function on every render
- );
+ const handlePaymentLoad = useCallback( ( paymentComponent ) => {
+ console.log( 'Payment component loaded', paymentComponent );
+ }, [] );
const handleChange = ( selectedCard ) => {
+ console.log( 'Card selection changed', selectedCard );
setCard( selectedCard );
};
+ console.log( 'Rendering Axo component', {
+ fastlaneSdk,
+ card,
+ shippingAddress,
+ } );
+
return fastlaneSdk ? (
,
edit: This is Axo Blocks in the editor
,
ariaLabel: ppcpConfig.title,
- canMakePayment: () => true,
+ canMakePayment: () => {
+ console.log( 'Checking if payment can be made' );
+ return true;
+ },
supports: {
showSavedCards: true,
features: ppcpConfig.supports,
},
} );
+console.log( 'Axo module loaded' );
+
export default Axo;