From bccfe4c4362d4cc393dbe4816a9d1b08522f30a7 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Tue, 10 Sep 2024 12:03:50 +0200 Subject: [PATCH] Add better state management utilizing Redux --- .../resources/js/components/CreditCard.js | 19 +- .../js/components/FastlaneWatermark.js | 51 +++-- .../resources/js/components/Payment.js | 8 +- ...eEmailManager.js => emailLookupManager.js} | 11 +- .../js/helpers/cardChangeButtonManager.js | 1 + .../resources/js/helpers/emailHelpers.js | 57 +++++ .../js/helpers/shippingChangeButtonManager.js | 23 ++- .../resources/js/helpers/watermarkHelpers.js | 133 ++++++------ .../resources/js/hooks/useUserInfoChange.js | 48 +++++ modules/ppcp-axo-block/resources/js/index.js | 194 +++++++++++------- .../resources/js/stores/axoStore.js | 59 ++++++ 11 files changed, 432 insertions(+), 172 deletions(-) rename modules/ppcp-axo-block/resources/js/events/{fastlaneEmailManager.js => emailLookupManager.js} (90%) create mode 100644 modules/ppcp-axo-block/resources/js/helpers/emailHelpers.js create mode 100644 modules/ppcp-axo-block/resources/js/hooks/useUserInfoChange.js create mode 100644 modules/ppcp-axo-block/resources/js/stores/axoStore.js 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 ); + } +};