diff --git a/modules/ppcp-axo-block/resources/js/components/CreditCard.js b/modules/ppcp-axo-block/resources/js/components/CreditCard.js
index f3e0ce802..dddd19f00 100644
--- a/modules/ppcp-axo-block/resources/js/components/CreditCard.js
+++ b/modules/ppcp-axo-block/resources/js/components/CreditCard.js
@@ -11,7 +11,12 @@ const cardIcons = {
UNIONPAY: 'unionpay-light.svg',
};
-export const CreditCard = ( { card, shippingAddress, fastlaneSdk } ) => {
+export const CreditCard = ( {
+ card,
+ shippingAddress,
+ fastlaneSdk,
+ showWatermark = true,
+} ) => {
const { brand, lastDigits, expiry } = card?.paymentSource?.card ?? {};
const { fullName } = shippingAddress?.name ?? {};
@@ -48,11 +53,13 @@ export const CreditCard = ( { card, shippingAddress, fastlaneSdk } ) => {
-
+ { showWatermark && (
+
+ ) }
diff --git a/modules/ppcp-axo-block/resources/js/components/FastlaneWatermark.js b/modules/ppcp-axo-block/resources/js/components/FastlaneWatermark.js
index 441902547..8adaeb193 100644
--- a/modules/ppcp-axo-block/resources/js/components/FastlaneWatermark.js
+++ b/modules/ppcp-axo-block/resources/js/components/FastlaneWatermark.js
@@ -1,21 +1,46 @@
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
export const FastlaneWatermark = ( {
fastlaneSdk,
name = 'fastlane-watermark-container',
includeAdditionalInfo = true,
} ) => {
- // This web component can be instantiated inside of a useEffect.
- useEffect( () => {
- ( async () => {
- const watermark = await fastlaneSdk.FastlaneWatermarkComponent( {
- includeAdditionalInfo,
- } );
- // The ID can be a react element
- watermark.render( `#${ name }` );
- } )();
- }, [] );
+ const containerRef = useRef( null );
+ const watermarkRef = useRef( null );
- // Give the react element the ID that you will render the watermark component into.
- return ;
+ useEffect( () => {
+ const renderWatermark = async () => {
+ if ( ! containerRef.current ) {
+ return;
+ }
+
+ // Clear the container
+ containerRef.current.innerHTML = '';
+
+ try {
+ const watermark = await fastlaneSdk.FastlaneWatermarkComponent(
+ {
+ includeAdditionalInfo,
+ }
+ );
+
+ watermarkRef.current = watermark;
+ watermark.render( `#${ name }` );
+
+ console.log( 'Watermark rendered successfully' );
+ } catch ( error ) {
+ console.error( 'Error rendering watermark:', error );
+ }
+ };
+
+ renderWatermark();
+
+ return () => {
+ if ( containerRef.current ) {
+ containerRef.current.innerHTML = '';
+ }
+ };
+ }, [ fastlaneSdk, name, includeAdditionalInfo ] );
+
+ return ;
};
diff --git a/modules/ppcp-axo-block/resources/js/components/Payment.js b/modules/ppcp-axo-block/resources/js/components/Payment.js
index a243c9e20..2ee826f09 100644
--- a/modules/ppcp-axo-block/resources/js/components/Payment.js
+++ b/modules/ppcp-axo-block/resources/js/components/Payment.js
@@ -1,13 +1,18 @@
import { useEffect, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
import { CreditCard } from './CreditCard';
+import { STORE_NAME } from '../stores/axoStore';
export const Payment = ( {
fastlaneSdk,
card,
shippingAddress,
- isGuest,
onPaymentLoad,
} ) => {
+ const isGuest = useSelect( ( select ) =>
+ select( STORE_NAME ).getIsGuest()
+ );
+
// Memoized Fastlane card rendering
const loadPaymentComponent = useCallback( async () => {
if ( isGuest ) {
@@ -31,6 +36,7 @@ export const Payment = ( {
card={ card }
shippingAddress={ shippingAddress }
fastlaneSdk={ fastlaneSdk }
+ showWatermark={ ! isGuest }
/>
);
};
diff --git a/modules/ppcp-axo-block/resources/js/events/fastlaneEmailManager.js b/modules/ppcp-axo-block/resources/js/events/emailLookupManager.js
similarity index 90%
rename from modules/ppcp-axo-block/resources/js/events/fastlaneEmailManager.js
rename to modules/ppcp-axo-block/resources/js/events/emailLookupManager.js
index 940e817c0..cd63ceeb0 100644
--- a/modules/ppcp-axo-block/resources/js/events/fastlaneEmailManager.js
+++ b/modules/ppcp-axo-block/resources/js/events/emailLookupManager.js
@@ -1,12 +1,12 @@
import { populateWooFields } from '../helpers/fieldHelpers';
import { injectShippingChangeButton } from '../helpers/shippingChangeButtonManager';
import { injectCardChangeButton } from '../helpers/cardChangeButtonManager';
+import { setIsGuest } from '../stores/axoStore';
+// Handle the logic for email submission and customer data retrieval
export const onEmailSubmit = async (
email,
fastlaneSdk,
- setIsGuest,
- isGuest,
setShippingAddress,
setCard,
snapshotFields,
@@ -15,9 +15,7 @@ export const onEmailSubmit = async (
setWooShippingAddress,
setWooBillingAddress,
onChangeShippingAddressClick,
- onChangeButtonClick,
- shouldIncludeAdditionalInfo,
- setShouldIncludeAdditionalInfo
+ onChangeButtonClick
) => {
try {
console.log( 'Email value being looked up:', email );
@@ -42,10 +40,11 @@ export const onEmailSubmit = async (
// Capture the existing WooCommerce data before updating it
snapshotFields( wooShippingAddress, wooBillingAddress );
+ console.log( 'Setting isGuest to false' );
setIsGuest( false );
+
setShippingAddress( profileData.shippingAddress );
setCard( profileData.card );
- setShouldIncludeAdditionalInfo( false );
console.log( 'Profile Data:', profileData );
diff --git a/modules/ppcp-axo-block/resources/js/helpers/cardChangeButtonManager.js b/modules/ppcp-axo-block/resources/js/helpers/cardChangeButtonManager.js
index 382bee669..2e0b85361 100644
--- a/modules/ppcp-axo-block/resources/js/helpers/cardChangeButtonManager.js
+++ b/modules/ppcp-axo-block/resources/js/helpers/cardChangeButtonManager.js
@@ -56,6 +56,7 @@ export const injectCardChangeButton = ( onChangeButtonClick ) => {
};
export const removeCardChangeButton = () => {
+ console.log('removeCardChangeButton running');
const button = document.querySelector(
'.wc-block-checkout-axo-block-card__edit'
);
diff --git a/modules/ppcp-axo-block/resources/js/helpers/emailHelpers.js b/modules/ppcp-axo-block/resources/js/helpers/emailHelpers.js
new file mode 100644
index 000000000..40e818410
--- /dev/null
+++ b/modules/ppcp-axo-block/resources/js/helpers/emailHelpers.js
@@ -0,0 +1,57 @@
+let emailInput = null;
+let currentHandler = null;
+
+const getEmailInput = () => {
+ if ( ! emailInput ) {
+ emailInput = document.getElementById( 'email' );
+ }
+ return emailInput;
+};
+
+export const setupEmailEvent = ( onEmailSubmit ) => {
+ const input = getEmailInput();
+ if ( ! input ) {
+ console.warn(
+ 'Email input element not found. Event listener not added.'
+ );
+ return;
+ }
+
+ if ( currentHandler ) {
+ console.warn(
+ 'Email event listener already exists. Removing old listener before adding new one.'
+ );
+ removeEmailEvent();
+ }
+
+ const handleEmailInput = async ( event ) => {
+ const email = event.target.value;
+ if ( email ) {
+ await onEmailSubmit( email );
+ }
+ };
+
+ input.addEventListener( 'keyup', handleEmailInput );
+ currentHandler = handleEmailInput;
+ console.log( 'Email event listener added' );
+};
+
+export const removeEmailEvent = () => {
+ const input = getEmailInput();
+ if ( input && currentHandler ) {
+ input.removeEventListener( 'keyup', currentHandler );
+ currentHandler = null;
+ console.log( 'Email event listener removed' );
+ } else {
+ console.log(
+ 'Could not remove email event listener. Input:',
+ input,
+ 'Handler:',
+ currentHandler
+ );
+ }
+};
+
+export const isEmailEventSetup = () => {
+ return !! currentHandler;
+};
diff --git a/modules/ppcp-axo-block/resources/js/helpers/shippingChangeButtonManager.js b/modules/ppcp-axo-block/resources/js/helpers/shippingChangeButtonManager.js
index a10b3baa5..26301189d 100644
--- a/modules/ppcp-axo-block/resources/js/helpers/shippingChangeButtonManager.js
+++ b/modules/ppcp-axo-block/resources/js/helpers/shippingChangeButtonManager.js
@@ -56,13 +56,24 @@ const ShippingChangeButtonManager = ( { onChangeShippingAddressClick } ) => {
};
export const injectShippingChangeButton = ( onChangeShippingAddressClick ) => {
- const container = document.createElement( 'div' );
- document.body.appendChild( container );
- createRoot( container ).render(
- createElement( ShippingChangeButtonManager, {
- onChangeShippingAddressClick,
- } )
+ // Check if the button already exists
+ const existingButton = document.querySelector(
+ '#shipping-fields .wc-block-checkout-axo-block-card__edit'
);
+
+ if ( ! existingButton ) {
+ const container = document.createElement( 'div' );
+ document.body.appendChild( container );
+ createRoot( container ).render(
+ createElement( ShippingChangeButtonManager, {
+ onChangeShippingAddressClick,
+ } )
+ );
+ } else {
+ console.log(
+ 'Shipping change button already exists. Skipping injection.'
+ );
+ }
};
export const removeShippingChangeButton = () => {
diff --git a/modules/ppcp-axo-block/resources/js/helpers/watermarkHelpers.js b/modules/ppcp-axo-block/resources/js/helpers/watermarkHelpers.js
index aaa2ae655..4059b094e 100644
--- a/modules/ppcp-axo-block/resources/js/helpers/watermarkHelpers.js
+++ b/modules/ppcp-axo-block/resources/js/helpers/watermarkHelpers.js
@@ -1,96 +1,91 @@
import { createElement, useEffect, createRoot } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
import { FastlaneWatermark } from '../components/FastlaneWatermark';
+import { STORE_NAME } from '../stores/axoStore';
+
+let watermarkReference = {
+ container: null,
+ root: null,
+};
+
+const WatermarkManager = ( { fastlaneSdk } ) => {
+ const isGuest = useSelect( ( select ) =>
+ select( STORE_NAME ).getIsGuest()
+ );
+ const isAxoActive = useSelect( ( select ) =>
+ select( STORE_NAME ).getIsAxoActive()
+ );
-const WatermarkManager = ( {
- fastlaneSdk,
- shouldIncludeAdditionalInfo,
- onEmailSubmit,
-} ) => {
useEffect( () => {
const emailInput = document.getElementById( 'email' );
- let watermarkRoot = null;
- let watermarkContainer = null;
if ( emailInput ) {
- const emailLabel =
- emailInput.parentNode.querySelector( 'label[for="email"]' );
- watermarkContainer = document.createElement( 'div' );
- watermarkContainer.setAttribute(
- 'class',
- 'ppcp-axo-block-watermark-container'
- );
-
- if ( emailLabel ) {
- emailLabel.parentNode.insertBefore(
- watermarkContainer,
- emailLabel.nextSibling
+ if ( ! watermarkReference.container ) {
+ watermarkReference.container = document.createElement( 'div' );
+ watermarkReference.container.setAttribute(
+ 'class',
+ 'ppcp-axo-block-watermark-container'
);
- } else {
- emailInput.parentNode.appendChild( watermarkContainer );
- }
- watermarkRoot = createRoot( watermarkContainer );
- watermarkRoot.render(
- createElement( FastlaneWatermark, {
- fastlaneSdk,
- name: 'fastlane-watermark-email',
- includeAdditionalInfo: shouldIncludeAdditionalInfo,
- } )
- );
-
- const handleEmailInput = async ( event ) => {
- const email = event.target.value;
- if ( email ) {
- await onEmailSubmit( email );
- }
- };
-
- emailInput.addEventListener( 'keyup', handleEmailInput );
-
- // Cleanup function
- return () => {
- if ( watermarkRoot ) {
- watermarkRoot.unmount();
- }
- if ( watermarkContainer && watermarkContainer.parentNode ) {
- watermarkContainer.parentNode.removeChild(
- watermarkContainer
+ const emailLabel =
+ emailInput.parentNode.querySelector( 'label[for="email"]' );
+ if ( emailLabel ) {
+ emailLabel.parentNode.insertBefore(
+ watermarkReference.container,
+ emailLabel.nextSibling
+ );
+ } else {
+ emailInput.parentNode.insertBefore(
+ watermarkReference.container,
+ emailInput.nextSibling
);
}
- if ( emailInput ) {
- emailInput.removeEventListener( 'keyup', handleEmailInput );
- }
- console.log( 'Fastlane watermark removed' );
- };
+
+ watermarkReference.root = createRoot(
+ watermarkReference.container
+ );
+ }
+
+ if ( watermarkReference.root && isAxoActive ) {
+ watermarkReference.root.render(
+ createElement( FastlaneWatermark, {
+ fastlaneSdk,
+ name: 'fastlane-watermark-email',
+ includeAdditionalInfo: isGuest,
+ } )
+ );
+ } else {
+ console.warn( 'Watermark root not found' );
+ }
+ } else {
+ console.warn( 'Email input not found' );
}
- }, [ fastlaneSdk, shouldIncludeAdditionalInfo, onEmailSubmit ] );
+ }, [ fastlaneSdk, isGuest ] );
return null;
};
-export const setupWatermark = (
- fastlaneSdk,
- shouldIncludeAdditionalInfo,
- onEmailSubmit
-) => {
+export const setupWatermark = ( fastlaneSdk ) => {
const container = document.createElement( 'div' );
document.body.appendChild( container );
createRoot( container ).render(
- createElement( WatermarkManager, {
- fastlaneSdk,
- shouldIncludeAdditionalInfo,
- onEmailSubmit,
- } )
+ createElement( WatermarkManager, { fastlaneSdk } )
);
};
export const removeWatermark = () => {
- const watermarkContainer = document.querySelector(
- '.ppcp-axo-block-watermark-container'
- );
- if ( watermarkContainer && watermarkContainer.parentNode ) {
- watermarkContainer.parentNode.removeChild( watermarkContainer );
+ if ( watermarkReference.root ) {
+ watermarkReference.root.unmount();
}
+ if (
+ watermarkReference.container &&
+ watermarkReference.container.parentNode
+ ) {
+ watermarkReference.container.parentNode.removeChild(
+ watermarkReference.container
+ );
+ }
+ watermarkReference = { container: null, root: null };
};
export default WatermarkManager;
diff --git a/modules/ppcp-axo-block/resources/js/hooks/useUserInfoChange.js b/modules/ppcp-axo-block/resources/js/hooks/useUserInfoChange.js
new file mode 100644
index 000000000..f5ddc1571
--- /dev/null
+++ b/modules/ppcp-axo-block/resources/js/hooks/useUserInfoChange.js
@@ -0,0 +1,48 @@
+import { useCallback } from '@wordpress/element';
+
+export const useShippingAddressChange = (
+ fastlaneSdk,
+ setShippingAddress,
+ setWooShippingAddress
+) => {
+ return useCallback( async () => {
+ if ( fastlaneSdk ) {
+ const { selectionChanged, selectedAddress } =
+ await fastlaneSdk.profile.showShippingAddressSelector();
+ if ( selectionChanged ) {
+ setShippingAddress( selectedAddress );
+ console.log(
+ 'Selected shipping address changed:',
+ selectedAddress
+ );
+
+ const { address, name, phoneNumber } = selectedAddress;
+
+ setWooShippingAddress( {
+ first_name: name.firstName,
+ last_name: name.lastName,
+ address_1: address.addressLine1,
+ address_2: address.addressLine2 || '',
+ city: address.adminArea2,
+ state: address.adminArea1,
+ postcode: address.postalCode,
+ country: address.countryCode,
+ phone: phoneNumber.nationalNumber,
+ } );
+ }
+ }
+ }, [ fastlaneSdk, setShippingAddress, setWooShippingAddress ] );
+};
+
+export const useCardChange = ( fastlaneSdk, setCard ) => {
+ return useCallback( async () => {
+ if ( fastlaneSdk ) {
+ const { selectionChanged, selectedCard } =
+ await fastlaneSdk.profile.showCardSelector();
+ if ( selectionChanged ) {
+ setCard( selectedCard );
+ console.log( 'Selected card changed:', selectedCard );
+ }
+ }
+ }, [ fastlaneSdk, setCard ] );
+};
diff --git a/modules/ppcp-axo-block/resources/js/index.js b/modules/ppcp-axo-block/resources/js/index.js
index d39bb1ded..8c8359391 100644
--- a/modules/ppcp-axo-block/resources/js/index.js
+++ b/modules/ppcp-axo-block/resources/js/index.js
@@ -1,4 +1,6 @@
-import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
import { registerPaymentMethod } from '@woocommerce/blocks-registry';
import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading';
@@ -6,18 +8,30 @@ import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Help
// Hooks
import useAxoBlockManager from './hooks/useAxoBlockManager';
import { useCustomerData } from './hooks/useCustomerData';
+import {
+ useShippingAddressChange,
+ useCardChange,
+} from './hooks/useUserInfoChange';
// Components
import { Payment } from './components/Payment';
// Helpers
import { snapshotFields, restoreOriginalFields } from './helpers/fieldHelpers';
-import { setupWatermark, removeWatermark } from './helpers/watermarkHelpers';
+import { removeWatermark, setupWatermark } from './helpers/watermarkHelpers';
import { removeCardChangeButton } from './helpers/cardChangeButtonManager';
import { removeShippingChangeButton } from './helpers/shippingChangeButtonManager';
+// Stores
+import { STORE_NAME } from './stores/axoStore';
+
// Event handlers
-import { onEmailSubmit } from './events/fastlaneEmailManager';
+import { onEmailSubmit } from './events/emailLookupManager';
+import {
+ setupEmailEvent,
+ removeEmailEvent,
+ isEmailEventSetup,
+} from './helpers/emailHelpers';
const ppcpConfig = wc.wcSettings.getSetting( 'ppcp-credit-card-gateway_data' );
@@ -29,13 +43,17 @@ const axoConfig = window.wc_ppcp_axo;
const Axo = () => {
const [ paypalLoaded, setPaypalLoaded ] = useState( false );
- const [ isGuest, setIsGuest ] = useState( true );
const [ shippingAddress, setShippingAddress ] = useState( null );
const [ card, setCard ] = useState( null );
- const [ shouldIncludeAdditionalInfo, setShouldIncludeAdditionalInfo ] =
- useState( true );
const fastlaneSdk = useAxoBlockManager( axoConfig, ppcpConfig );
+ const isAxoActive = useSelect( ( select ) =>
+ select( STORE_NAME ).getIsAxoActive()
+ );
+ const { setIsAxoActive, setIsGuest } = useDispatch( STORE_NAME );
+
+ const handleEmailInputRef = useRef( null );
+
// Access WooCommerce customer data
const {
shippingAddress: wooShippingAddress,
@@ -44,13 +62,12 @@ const Axo = () => {
setBillingAddress: updateWooBillingAddress,
} = useCustomerData();
- // Cleanup logic for Change buttons
+ useEffect( () => {
+ console.log( 'isAxoActive updated:', isAxoActive );
+ }, [ isAxoActive ] );
+
useEffect( () => {
return () => {
- removeShippingChangeButton();
- removeCardChangeButton();
- removeWatermark();
-
// Restore WooCommerce fields
restoreOriginalFields(
updateWooShippingAddress,
@@ -74,75 +91,111 @@ const Axo = () => {
}
}, [ paypalLoaded, ppcpConfig ] );
+ const onChangeShippingAddressClick = useShippingAddressChange(
+ fastlaneSdk,
+ setShippingAddress,
+ updateWooShippingAddress
+ );
+
+ const onChangeCardButtonClick = useCardChange( fastlaneSdk, setCard );
+
+ const handleEmailInput = useCallback(
+ async ( email ) => {
+ if ( fastlaneSdk ) {
+ await onEmailSubmit(
+ email,
+ fastlaneSdk,
+ setShippingAddress,
+ setCard,
+ snapshotFields,
+ wooShippingAddress,
+ wooBillingAddress,
+ setWooShippingAddress,
+ setWooBillingAddress,
+ onChangeShippingAddressClick,
+ onChangeCardButtonClick
+ );
+ } else {
+ console.warn( 'FastLane SDK is not available' );
+ }
+ },
+ [
+ fastlaneSdk,
+ setShippingAddress,
+ setCard,
+ wooShippingAddress,
+ wooBillingAddress,
+ setWooShippingAddress,
+ setWooBillingAddress,
+ onChangeShippingAddressClick,
+ onChangeCardButtonClick,
+ ]
+ );
+
+ useEffect( () => {
+ handleEmailInputRef.current = handleEmailInput;
+ }, [ handleEmailInput ] );
+
useEffect( () => {
if ( paypalLoaded && fastlaneSdk ) {
- console.log( 'Fastlane SDK and PayPal loaded' );
- setupWatermark(
- fastlaneSdk,
- shouldIncludeAdditionalInfo,
- async ( email ) => {
- await onEmailSubmit(
- email,
- fastlaneSdk,
- setIsGuest,
- isGuest,
- setShippingAddress,
- setCard,
- snapshotFields,
- wooShippingAddress,
- wooBillingAddress,
- setWooShippingAddress,
- setWooBillingAddress,
- onChangeShippingAddressClick,
- onChangeButtonClick,
- shouldIncludeAdditionalInfo,
- setShouldIncludeAdditionalInfo
- );
- }
- );
+ console.log( 'Enabling Axo' );
+ setIsAxoActive( true );
+ setupWatermark( fastlaneSdk );
+ setupEmailEvent( handleEmailInputRef.current );
}
+ }, [ paypalLoaded, fastlaneSdk, setIsAxoActive ] );
+ useEffect( () => {
return () => {
+ console.log( 'Disabling Axo' );
+ console.log( 'Axo component unmounting' );
+ setIsAxoActive( false );
+ setIsGuest( true );
+
+ console.log( 'isAxoActive', isAxoActive );
+
+ console.log( 'isEmailEventSetup', isEmailEventSetup() );
+
+ removeShippingChangeButton();
+ removeCardChangeButton();
removeWatermark();
- };
- }, [ paypalLoaded, fastlaneSdk, shouldIncludeAdditionalInfo ] );
- const onChangeShippingAddressClick = useCallback( async () => {
- // Updated
- if ( fastlaneSdk ) {
- const { selectionChanged, selectedAddress } =
- await fastlaneSdk.profile.showShippingAddressSelector();
- if ( selectionChanged ) {
- setShippingAddress( selectedAddress );
+ if ( isEmailEventSetup() ) {
console.log(
- 'Selected shipping address changed:',
- selectedAddress
+ 'Axo became inactive, removing email event listener'
);
-
- const { address, name, phoneNumber } = selectedAddress;
-
- setWooShippingAddress( {
- first_name: name.firstName,
- last_name: name.lastName,
- address_1: address.addressLine1,
- address_2: address.addressLine2 || '',
- city: address.adminArea2,
- state: address.adminArea1,
- postcode: address.postalCode,
- country: address.countryCode,
- phone: phoneNumber.nationalNumber,
- } );
+ removeEmailEvent( handleEmailInputRef.current );
}
- }
- }, [ fastlaneSdk, setWooShippingAddress ] );
+ };
+ }, [
+ setIsAxoActive,
+ setIsGuest,
+ updateWooShippingAddress,
+ updateWooBillingAddress,
+ ] );
- const onChangeButtonClick = useCallback( async () => {
- const { selectionChanged, selectedCard } =
- await fastlaneSdk.profile.showCardSelector();
- if ( selectionChanged ) {
- setCard( selectedCard );
- }
- }, [ fastlaneSdk ] );
+ useEffect( () => {
+ return () => {
+ console.log( 'Disabling Axo' );
+ setIsAxoActive( false );
+ setIsGuest( true );
+
+ console.log( 'isAxoActive', isAxoActive );
+
+ console.log( 'isEmailEventSetup', isEmailEventSetup() );
+
+ removeShippingChangeButton();
+ removeCardChangeButton();
+ removeWatermark();
+
+ if ( isEmailEventSetup() ) {
+ console.log(
+ 'Axo became inactive, removing email event listener'
+ );
+ removeEmailEvent( handleEmailInputRef.current );
+ }
+ };
+ }, [] );
const handlePaymentLoad = useCallback(
( paymentComponent ) => {
@@ -162,9 +215,8 @@ const Axo = () => {
card={ card }
shippingAddress={ shippingAddress }
onChange={ handleChange }
- isGuest={ isGuest }
onPaymentLoad={ handlePaymentLoad }
- onChangeButtonClick={ onChangeButtonClick }
+ onChangeButtonClick={ onChangeCardButtonClick }
/>
) : (
Loading Fastlane...
diff --git a/modules/ppcp-axo-block/resources/js/stores/axoStore.js b/modules/ppcp-axo-block/resources/js/stores/axoStore.js
new file mode 100644
index 000000000..a405b54f2
--- /dev/null
+++ b/modules/ppcp-axo-block/resources/js/stores/axoStore.js
@@ -0,0 +1,59 @@
+// File: axoStore.js
+
+import { createReduxStore, register, dispatch } from '@wordpress/data';
+
+export const STORE_NAME = 'woocommerce-paypal-payments/axo-block';
+
+// Initial state
+const DEFAULT_STATE = {
+ isGuest: true,
+ isAxoActive: false,
+};
+
+// Actions
+const actions = {
+ setIsGuest: ( isGuest ) => ( {
+ type: 'SET_IS_GUEST',
+ payload: isGuest,
+ } ),
+ setIsAxoActive: ( isAxoActive ) => ( {
+ type: 'SET_IS_AXO_ACTIVE',
+ payload: isAxoActive,
+ } ),
+};
+
+// Reducer
+const reducer = ( state = DEFAULT_STATE, action ) => {
+ switch ( action.type ) {
+ case 'SET_IS_GUEST':
+ return { ...state, isGuest: action.payload };
+ case 'SET_IS_AXO_ACTIVE':
+ return { ...state, isAxoActive: action.payload };
+ default:
+ return state;
+ }
+};
+
+// Selectors
+const selectors = {
+ getIsGuest: ( state ) => state.isGuest,
+ getIsAxoActive: ( state ) => state.isAxoActive,
+};
+
+// Create and register the store
+const store = createReduxStore( STORE_NAME, {
+ reducer,
+ actions,
+ selectors,
+} );
+
+register( store );
+
+// Utility functions
+export const setIsGuest = ( isGuest ) => {
+ try {
+ dispatch( STORE_NAME ).setIsGuest( isGuest );
+ } catch ( error ) {
+ console.error( 'Error updating isGuest state:', error );
+ }
+};