Add better state management utilizing Redux

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 } ) => {
 					</div>
 				</div>
 				<div className="wc-block-checkout-axo-block-card__watermark">
-					<FastlaneWatermark
-						fastlaneSdk={ fastlaneSdk }
-						name="wc-block-checkout-axo-card-watermark"
-						includeAdditionalInfo={ false }
-					/>
+					{ showWatermark && (
+						<FastlaneWatermark
+							fastlaneSdk={ fastlaneSdk }
+							name="wc-block-checkout-axo-card-watermark"
+							includeAdditionalInfo={ false }
+						/>
+					) }
 				</div>
 			</div>
 		</div>

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 <div id={ name } />;
+	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 <div id={ name } ref={ containerRef } />;
 };

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 }
 		/>
 	);
 };

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 );
 

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'
 	);

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

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 = () => {

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;

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

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 }
 		/>
 	) : (
 		<div>Loading Fastlane...</div>

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