diff --git a/modules/ppcp-axo-block/resources/js/components/Payment.js b/modules/ppcp-axo-block/resources/js/components/Payment.js index 5598e1da1..49d396ee3 100644 --- a/modules/ppcp-axo-block/resources/js/components/Payment.js +++ b/modules/ppcp-axo-block/resources/js/components/Payment.js @@ -1,13 +1,9 @@ import { useEffect, useCallback } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; -import { CreditCard } from './CreditCard'; +import { Card } from './card/Card'; import { STORE_NAME } from '../stores/axoStore'; -export const Payment = ( { - fastlaneSdk, - card, - onPaymentLoad, -} ) => { +export const Payment = ( { fastlaneSdk, card, onPaymentLoad } ) => { const isGuest = useSelect( ( select ) => select( STORE_NAME ).getIsGuest() ); @@ -30,7 +26,7 @@ export const Payment = ( { return isGuest ? (
) : ( - { +export const Card = ( { card, fastlaneSdk, showWatermark = true } ) => { const { brand, lastDigits, expiry, name } = card?.paymentSource?.card ?? {}; const cardLogo = useMemo( () => { @@ -48,7 +48,7 @@ export const CreditCard = ( { card, fastlaneSdk, showWatermark = true } ) => {
{ showWatermark && ( - { +export const EmailButton = ( { handleSubmit } ) => { const { isGuest, isAxoActive, isEmailSubmitted } = useSelect( ( select ) => ( { isGuest: select( STORE_NAME ).getIsGuest(), @@ -29,7 +29,7 @@ export const EmailSubmitButton = ( { handleSubmit } ) => { visibility: isEmailSubmitted ? 'hidden' : 'visible', } } > - Submit + Continue { isEmailSubmitted && ( { return emailInput; }; -export const setupEmailFunctionality = ( onEmailSubmit ) => { +const setupEmailFunctionality = ( onEmailSubmit ) => { const input = getEmailInput(); if ( ! input ) { console.warn( @@ -42,10 +42,9 @@ export const setupEmailFunctionality = ( onEmailSubmit ) => { await onEmailSubmit( input.value ); } catch ( error ) { console.error( 'Error during email submission:', error ); - // Here you might want to show an error message to the user } finally { wp.data.dispatch( STORE_NAME ).setIsEmailSubmitted( false ); - renderButton(); // Re-render button to remove loading state + renderButton(); } }; @@ -80,7 +79,7 @@ export const setupEmailFunctionality = ( onEmailSubmit ) => { const renderButton = () => { if ( submitButtonReference.root ) { submitButtonReference.root.render( - createElement( EmailSubmitButton, { + createElement( EmailButton, { handleSubmit: handleEmailSubmit, } ) ); @@ -89,7 +88,7 @@ export const setupEmailFunctionality = ( onEmailSubmit ) => { } }; - renderButton(); // Initial render + renderButton(); // Subscribe to state changes submitButtonReference.unsubscribe = wp.data.subscribe( () => { @@ -97,7 +96,7 @@ export const setupEmailFunctionality = ( onEmailSubmit ) => { } ); }; -export const removeEmailFunctionality = () => { +const removeEmailFunctionality = () => { const input = getEmailInput(); if ( input && keydownHandler ) { input.removeEventListener( 'keydown', keydownHandler ); @@ -121,8 +120,12 @@ export const removeEmailFunctionality = () => { keydownHandler = null; }; -export const isEmailFunctionalitySetup = () => { +const isEmailFunctionalitySetup = () => { return !! submitButtonReference.root; }; -export default EmailSubmitButton; +export { + setupEmailFunctionality, + removeEmailFunctionality, + isEmailFunctionalitySetup, +}; diff --git a/modules/ppcp-axo-block/resources/js/components/shipping/ShippingChangeButton.js b/modules/ppcp-axo-block/resources/js/components/shipping/ShippingChangeButton.js new file mode 100644 index 000000000..56f71a4d5 --- /dev/null +++ b/modules/ppcp-axo-block/resources/js/components/shipping/ShippingChangeButton.js @@ -0,0 +1,14 @@ +const ShippingChangeButton = ( { onChangeShippingAddressClick } ) => ( + { + event.preventDefault(); + onChangeShippingAddressClick(); + } } + > + Choose a different shipping address + +); + +export default ShippingChangeButton; diff --git a/modules/ppcp-axo-block/resources/js/components/shipping/ShippingChangeButtonManager.js b/modules/ppcp-axo-block/resources/js/components/shipping/ShippingChangeButtonManager.js new file mode 100644 index 000000000..e072f0193 --- /dev/null +++ b/modules/ppcp-axo-block/resources/js/components/shipping/ShippingChangeButtonManager.js @@ -0,0 +1,39 @@ +import { useEffect, createRoot } from '@wordpress/element'; +import ShippingChangeButton from './ShippingChangeButton'; + +const ShippingChangeButtonManager = ( { onChangeShippingAddressClick } ) => { + useEffect( () => { + const shippingHeading = document.querySelector( + '#shipping-fields .wc-block-components-checkout-step__heading' + ); + + 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( spanElement ); + root.render( + + ); + + return () => { + root.unmount(); + spanElement.remove(); + }; + } + }, [ onChangeShippingAddressClick ] ); + + return null; +}; + +export default ShippingChangeButtonManager; diff --git a/modules/ppcp-axo-block/resources/js/components/shipping/index.js b/modules/ppcp-axo-block/resources/js/components/shipping/index.js new file mode 100644 index 000000000..46f00b864 --- /dev/null +++ b/modules/ppcp-axo-block/resources/js/components/shipping/index.js @@ -0,0 +1,9 @@ +export { default as ShippingChangeButton } from './ShippingChangeButton'; +export { default as ShippingChangeButtonManager } from './ShippingChangeButtonManager'; +export { + snapshotFields, + restoreOriginalFields, + populateWooFields, + injectShippingChangeButton, + removeShippingChangeButton, +} from './utils'; diff --git a/modules/ppcp-axo-block/resources/js/components/shipping/utils.js b/modules/ppcp-axo-block/resources/js/components/shipping/utils.js new file mode 100644 index 000000000..80bbf2404 --- /dev/null +++ b/modules/ppcp-axo-block/resources/js/components/shipping/utils.js @@ -0,0 +1,149 @@ +import { createRoot } from '@wordpress/element'; +import ShippingChangeButtonManager from './ShippingChangeButtonManager'; + +export const snapshotFields = ( shippingAddress, billingAddress ) => { + console.log( 'Attempting to snapshot fields' ); + if ( ! shippingAddress || ! billingAddress ) { + console.warn( 'Shipping or billing address is missing:', { + shippingAddress, + billingAddress, + } ); + } + + const originalData = { shippingAddress, billingAddress }; + console.log( 'Snapshot data:', 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 +) => { + 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 ) { + 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 ); + } + } else { + console.warn( + 'No data found in localStorage under axoOriginalCheckoutFields' + ); + } +}; + +export const populateWooFields = ( + profileData, + setWooShippingAddress, + setWooBillingAddress +) => { + console.log( + 'Populating WooCommerce fields with profile data:', + profileData + ); + + // Save shipping address + const { address, name, phoneNumber } = profileData.shippingAddress; + + const shippingAddress = { + 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, + }; + + console.log( 'Setting WooCommerce shipping address:', shippingAddress ); + setWooShippingAddress( shippingAddress ); + + // Save billing address + const billingData = profileData.card.paymentSource.card.billingAddress; + + const billingAddress = { + first_name: profileData.name.firstName, + last_name: profileData.name.lastName, + address_1: billingData.addressLine1, + address_2: billingData.addressLine2 || '', + city: billingData.adminArea2, + state: billingData.adminArea1, + postcode: billingData.postalCode, + country: billingData.countryCode, + }; + + console.log( 'Setting WooCommerce billing address:', billingAddress ); + setWooBillingAddress( billingAddress ); +}; + +export const injectShippingChangeButton = ( onChangeShippingAddressClick ) => { + 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( + + ); + } else { + console.log( + 'Shipping change button already exists. Skipping injection.' + ); + } +}; + +export const removeShippingChangeButton = () => { + const span = document.querySelector( + '#shipping-fields .wc-block-checkout-axo-block-card__edit' + ); + if ( span ) { + createRoot( span ).unmount(); + span.remove(); + } +}; diff --git a/modules/ppcp-axo-block/resources/js/components/FastlaneWatermark.js b/modules/ppcp-axo-block/resources/js/components/watermark/Watermark.js similarity index 95% rename from modules/ppcp-axo-block/resources/js/components/FastlaneWatermark.js rename to modules/ppcp-axo-block/resources/js/components/watermark/Watermark.js index 700832047..bd7b7a15e 100644 --- a/modules/ppcp-axo-block/resources/js/components/FastlaneWatermark.js +++ b/modules/ppcp-axo-block/resources/js/components/watermark/Watermark.js @@ -1,6 +1,6 @@ import { useEffect, useRef } from '@wordpress/element'; -export const FastlaneWatermark = ( { +const Watermark = ( { fastlaneSdk, name = 'fastlane-watermark-container', includeAdditionalInfo = true, @@ -42,3 +42,5 @@ export const FastlaneWatermark = ( { return
; }; + +export default Watermark; diff --git a/modules/ppcp-axo-block/resources/js/components/watermark/WatermarkManager.js b/modules/ppcp-axo-block/resources/js/components/watermark/WatermarkManager.js new file mode 100644 index 000000000..ce9774eec --- /dev/null +++ b/modules/ppcp-axo-block/resources/js/components/watermark/WatermarkManager.js @@ -0,0 +1,54 @@ +import { useEffect } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; +import { STORE_NAME } from '../../stores/axoStore'; +import { + createWatermarkContainer, + removeWatermark, + updateWatermarkContent, +} from './utils'; + +console.log( 'WatermarkManager module loaded' ); + +const WatermarkManager = ( { fastlaneSdk } ) => { + console.log( 'WatermarkManager rendering', { fastlaneSdk } ); + + const isGuest = useSelect( ( select ) => + select( STORE_NAME ).getIsGuest() + ); + const isAxoActive = useSelect( ( select ) => + select( STORE_NAME ).getIsAxoActive() + ); + const isAxoScriptLoaded = useSelect( ( select ) => + select( STORE_NAME ).isAxoScriptLoaded() + ); + + console.log( 'WatermarkManager state', { + isGuest, + isAxoActive, + isAxoScriptLoaded, + } ); + + useEffect( () => { + console.log( 'WatermarkManager useEffect triggered' ); + + if ( isAxoActive || ( ! isAxoActive && ! isAxoScriptLoaded ) ) { + console.log( 'Conditions met, creating watermark' ); + createWatermarkContainer(); + updateWatermarkContent( { + isAxoActive, + isAxoScriptLoaded, + fastlaneSdk, + isGuest, + } ); + } else { + console.log( 'Conditions not met, removing watermark' ); + removeWatermark(); + } + + return removeWatermark; + }, [ fastlaneSdk, isGuest, isAxoActive, isAxoScriptLoaded ] ); + + return null; +}; + +export default WatermarkManager; diff --git a/modules/ppcp-axo-block/resources/js/components/watermark/index.js b/modules/ppcp-axo-block/resources/js/components/watermark/index.js new file mode 100644 index 000000000..25d5a2360 --- /dev/null +++ b/modules/ppcp-axo-block/resources/js/components/watermark/index.js @@ -0,0 +1,3 @@ +export { default as Watermark } from './Watermark'; +export { default as WatermarkManager } from './WatermarkManager'; +export { setupWatermark, removeWatermark } from './utils'; diff --git a/modules/ppcp-axo-block/resources/js/components/watermark/utils.js b/modules/ppcp-axo-block/resources/js/components/watermark/utils.js new file mode 100644 index 000000000..e61de16ca --- /dev/null +++ b/modules/ppcp-axo-block/resources/js/components/watermark/utils.js @@ -0,0 +1,115 @@ +import { createElement, createRoot } from '@wordpress/element'; +import { Watermark, WatermarkManager } from '../watermark'; + +const watermarkReference = { + container: null, + root: null, +}; + +export const createWatermarkContainer = () => { + console.log( 'Creating watermark container' ); + const textInputContainer = document.querySelector( + '.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input' + ); + + if ( textInputContainer && ! watermarkReference.container ) { + console.log( + 'Text input container found, creating watermark container' + ); + const emailInput = + textInputContainer.querySelector( 'input[id="email"]' ); + + if ( emailInput ) { + console.log( 'Email input found, setting up watermark' ); + watermarkReference.container = document.createElement( 'div' ); + watermarkReference.container.setAttribute( + 'class', + 'wc-block-checkout-axo-block-watermark-container' + ); + + emailInput.parentNode.insertBefore( + watermarkReference.container, + emailInput.nextSibling + ); + + watermarkReference.root = createRoot( + watermarkReference.container + ); + } + } +}; + +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 ); + } + }; +}; + +export const removeWatermark = () => { + console.log( 'Removing watermark' ); + if ( watermarkReference.root ) { + watermarkReference.root.unmount(); + } + if ( watermarkReference.container ) { + if ( watermarkReference.container.parentNode ) { + watermarkReference.container.parentNode.removeChild( + watermarkReference.container + ); + } else { + const detachedContainer = document.querySelector( + '.wc-block-checkout-axo-block-watermark-container' + ); + if ( detachedContainer ) { + detachedContainer.remove(); + } + } + } + Object.assign( watermarkReference, { container: null, root: null } ); + console.log( 'Watermark removed' ); +}; + +export const renderWatermarkContent = ( content ) => { + if ( watermarkReference.root ) { + console.log( 'Rendering watermark content' ); + watermarkReference.root.render( content ); + } +}; + +export const updateWatermarkContent = ( { + isAxoActive, + isAxoScriptLoaded, + fastlaneSdk, + isGuest, +} ) => { + if ( ! isAxoActive && ! isAxoScriptLoaded ) { + console.log( 'Rendering spinner' ); + renderWatermarkContent( + createElement( 'span', { + className: 'wc-block-components-spinner', + 'aria-hidden': 'true', + } ) + ); + } else if ( isAxoActive ) { + console.log( 'Rendering FastlaneWatermark' ); + renderWatermarkContent( + createElement( Watermark, { + fastlaneSdk, + name: 'fastlane-watermark-email', + includeAdditionalInfo: isGuest, + } ) + ); + } else { + console.log( 'Rendering null content' ); + renderWatermarkContent( null ); + } +}; diff --git a/modules/ppcp-axo-block/resources/js/events/emailLookupManager.js b/modules/ppcp-axo-block/resources/js/events/emailLookupManager.js index f74eb0c7a..0934f2ede 100644 --- a/modules/ppcp-axo-block/resources/js/events/emailLookupManager.js +++ b/modules/ppcp-axo-block/resources/js/events/emailLookupManager.js @@ -1,5 +1,5 @@ import { populateWooFields } from '../helpers/fieldHelpers'; -import { injectShippingChangeButton } from '../helpers/shippingChangeButtonManager'; +import { injectShippingChangeButton } from '../components/shipping'; import { injectCardChangeButton } from '../helpers/cardChangeButtonManager'; import { setIsGuest } from '../stores/axoStore'; diff --git a/modules/ppcp-axo-block/resources/js/helpers/buttonHelpers.js b/modules/ppcp-axo-block/resources/js/helpers/buttonHelpers.js deleted file mode 100644 index 4d529e266..000000000 --- a/modules/ppcp-axo-block/resources/js/helpers/buttonHelpers.js +++ /dev/null @@ -1,33 +0,0 @@ -export const injectShippingChangeButton = ( onChangeShippingAddressClick ) => { - const shippingTitle = document.querySelector( - '#shipping-fields h2.wc-block-components-title' - ); - if ( - shippingTitle && - ! shippingTitle.nextElementSibling?.classList?.contains( - 'wc-block-checkout-axo-block-card__edit' - ) - ) { - const buttonElement = document.createElement( 'button' ); - buttonElement.classList.add( 'wc-block-checkout-axo-block-card__edit' ); - buttonElement.setAttribute( 'aria-label', 'Change shipping details' ); - buttonElement.textContent = 'Change'; - buttonElement.onclick = ( event ) => { - event.preventDefault(); - onChangeShippingAddressClick(); - }; - shippingTitle.parentNode.insertBefore( - buttonElement, - shippingTitle.nextSibling - ); - } -}; - -export const removeShippingChangeButton = () => { - const existingButton = document.querySelector( - '#shipping-fields .wc-block-checkout-axo-block-card__edit' - ); - if ( existingButton ) { - existingButton.remove(); - } -}; diff --git a/modules/ppcp-axo-block/resources/js/helpers/classnamesManager.js b/modules/ppcp-axo-block/resources/js/helpers/classnamesManager.js index df2181164..a4f578e2b 100644 --- a/modules/ppcp-axo-block/resources/js/helpers/classnamesManager.js +++ b/modules/ppcp-axo-block/resources/js/helpers/classnamesManager.js @@ -34,7 +34,6 @@ export const setupAuthenticationClassToggle = () => { updateAuthenticationClass(); } ); - // Return the unsubscribe function for cleanup return unsubscribe; }; @@ -79,7 +78,6 @@ export const setupContactInfoClassToggles = () => { updateContactInfoClasses(); } ); - // Return the unsubscribe function for cleanup return unsubscribe; }; diff --git a/modules/ppcp-axo-block/resources/js/helpers/watermarkHelpers.js b/modules/ppcp-axo-block/resources/js/helpers/watermarkHelpers.js deleted file mode 100644 index 5a15a5d68..000000000 --- a/modules/ppcp-axo-block/resources/js/helpers/watermarkHelpers.js +++ /dev/null @@ -1,170 +0,0 @@ -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, -}; - -console.log( 'WatermarkManager module loaded' ); - -const WatermarkManager = ( { fastlaneSdk } ) => { - console.log( 'WatermarkManager rendering', { fastlaneSdk } ); - - const isGuest = useSelect( ( select ) => - select( STORE_NAME ).getIsGuest() - ); - const isAxoActive = useSelect( ( select ) => - select( STORE_NAME ).getIsAxoActive() - ); - const isAxoScriptLoaded = useSelect( ( select ) => - 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 ) { - console.log( - 'Text input container found, creating watermark container' - ); - const emailInput = - textInputContainer.querySelector( 'input[id="email"]' ); - - if ( emailInput ) { - console.log( 'Email input found, setting up watermark' ); - watermarkReference.container = - document.createElement( 'div' ); - watermarkReference.container.setAttribute( - 'class', - 'wc-block-checkout-axo-block-watermark-container' - ); - - emailInput.parentNode.insertBefore( - watermarkReference.container, - emailInput.nextSibling - ); - - watermarkReference.root = createRoot( - watermarkReference.container - ); - } - } - - 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', - 'aria-hidden': 'true', - } ) - ); - } else if ( isAxoActive ) { - console.log( 'Rendering FastlaneWatermark' ); - watermarkReference.root.render( - createElement( FastlaneWatermark, { - fastlaneSdk, - name: 'fastlane-watermark-email', - includeAdditionalInfo: isGuest, - } ) - ); - } else { - console.log( 'Rendering null content' ); - watermarkReference.root.render( null ); - } - } - }; - - const removeWatermark = () => { - console.log( 'Removing watermark' ); - if ( watermarkReference.root ) { - watermarkReference.root.unmount(); - } - if ( watermarkReference.container ) { - if ( watermarkReference.container.parentNode ) { - watermarkReference.container.parentNode.removeChild( - watermarkReference.container - ); - } else { - const detachedContainer = document.querySelector( - '.wc-block-checkout-axo-block-watermark-container' - ); - if ( detachedContainer ) { - detachedContainer.remove(); - } - } - } - 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, 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 ); - } - }; -}; - -export const removeWatermark = () => { - console.log( 'Removing watermark (external call)' ); - if ( watermarkReference.root ) { - watermarkReference.root.unmount(); - } - if ( watermarkReference.container ) { - if ( watermarkReference.container.parentNode ) { - watermarkReference.container.parentNode.removeChild( - watermarkReference.container - ); - } else { - const detachedContainer = document.querySelector( - '.wc-block-checkout-axo-block-watermark-container' - ); - if ( detachedContainer ) { - detachedContainer.remove(); - } - } - } - watermarkReference = { container: null, root: null }; - console.log( 'Watermark removed (external call)' ); -}; - -export default WatermarkManager; diff --git a/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js b/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js index 41ec22301..722fcc37a 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js +++ b/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js @@ -1,4 +1,5 @@ import { useCallback } from '@wordpress/element'; +import useFastlaneSdk from "./useFastlaneSdk"; export const useCardChange = ( fastlaneSdk, setCard, setWooBillingAddress ) => { return useCallback( async () => { @@ -33,3 +34,5 @@ export const useCardChange = ( fastlaneSdk, setCard, setWooBillingAddress ) => { } }, [ fastlaneSdk, setCard ] ); }; + +export default useCardChange; diff --git a/modules/ppcp-axo-block/resources/js/hooks/useCustomerData.js b/modules/ppcp-axo-block/resources/js/hooks/useCustomerData.js index 1d513f0d1..4da6466c6 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useCustomerData.js +++ b/modules/ppcp-axo-block/resources/js/hooks/useCustomerData.js @@ -1,5 +1,6 @@ import { useCallback, useMemo } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; +import useFastlaneSdk from "./useFastlaneSdk"; export const useCustomerData = () => { const customerData = useSelect( ( select ) => @@ -40,3 +41,5 @@ export const useCustomerData = () => { ] ); }; + +export default useCustomerData; diff --git a/modules/ppcp-axo-block/resources/js/hooks/useShippingAddressChange.js b/modules/ppcp-axo-block/resources/js/hooks/useShippingAddressChange.js index aed8e3aac..0f625da48 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useShippingAddressChange.js +++ b/modules/ppcp-axo-block/resources/js/hooks/useShippingAddressChange.js @@ -33,3 +33,5 @@ export const useShippingAddressChange = ( } }, [ fastlaneSdk, setShippingAddress, setWooShippingAddress ] ); }; + +export default useShippingAddressChange; diff --git a/modules/ppcp-axo-block/resources/js/index.js b/modules/ppcp-axo-block/resources/js/index.js index bf7c5a6d4..64974c1d2 100644 --- a/modules/ppcp-axo-block/resources/js/index.js +++ b/modules/ppcp-axo-block/resources/js/index.js @@ -7,18 +7,18 @@ import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Help // Hooks import useFastlaneSdk from './hooks/useFastlaneSdk'; -import { useCustomerData } from './hooks/useCustomerData'; -import { useShippingAddressChange } from './hooks/useShippingAddressChange'; -import { useCardChange } from './hooks/useCardChange'; +import useCustomerData from './hooks/useCustomerData'; +import useShippingAddressChange from './hooks/useShippingAddressChange'; +import useCardChange from './hooks/useCardChange'; // Components import { Payment } from './components/Payment'; // Helpers import { snapshotFields, restoreOriginalFields } from './helpers/fieldHelpers'; -import { removeWatermark, setupWatermark } from './helpers/watermarkHelpers'; +import { removeWatermark, setupWatermark } from './components/watermark'; import { removeCardChangeButton } from './helpers/cardChangeButtonManager'; -import { removeShippingChangeButton } from './helpers/shippingChangeButtonManager'; +import { removeShippingChangeButton } from './components/shipping'; import { initializeClassToggles } from './helpers/classnamesManager'; // Stores @@ -30,7 +30,7 @@ import { setupEmailFunctionality, removeEmailFunctionality, isEmailFunctionalitySetup, -} from './helpers/emailSubmissionManager'; +} from './components/email-button'; const ppcpConfig = wc.wcSettings.getSetting( 'ppcp-credit-card-gateway_data' ); @@ -221,7 +221,6 @@ registerPaymentMethod( { edit:

This is Axo Blocks in the editor

, ariaLabel: ppcpConfig.title, canMakePayment: () => { - console.log( 'Checking if payment can be made' ); return true; }, supports: {