From 90aa261c8b28e42b7647c307dd9c28d950eb821a Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Fri, 13 Sep 2024 17:27:39 +0200 Subject: [PATCH] Refactor the change shipping address and change card buttons to a more modular structure --- .../ppcp-axo-block/resources/css/gateway.scss | 22 ++- .../js/components/{card => Card}/Card.js | 6 +- .../js/components/Card/CardChangeButton.js | 18 +++ .../Card/CardChangeButtonManager.js} | 35 +--- .../resources/js/components/Card/index.js | 4 + .../resources/js/components/Card/utils.js | 19 +++ .../EmailButton.js | 4 +- .../js/components/EmailButton/index.js | 6 + .../{email-button => EmailButton}/utils.js | 14 +- .../js/components/{ => Payment}/Payment.js | 4 +- .../ShippingChangeButton.js | 0 .../ShippingChangeButtonManager.js | 0 .../{shipping => Shipping}/index.js | 3 - .../resources/js/components/Shipping/utils.js | 32 ++++ .../{watermark => Watermark}/Watermark.js | 0 .../WatermarkManager.js | 0 .../{watermark => Watermark}/index.js | 0 .../{watermark => Watermark}/utils.js | 2 +- .../resources/js/components/card/index.js | 0 .../js/components/email-button/index.js | 15 -- .../resources/js/components/shipping/utils.js | 149 ------------------ .../resources/js/events/emailLookupManager.js | 4 +- .../resources/js/helpers/classnamesManager.js | 3 +- .../js/helpers/shippingChangeButtonManager.js | 81 ---------- .../resources/js/hooks/useCardChange.js | 1 - .../resources/js/hooks/useCustomerData.js | 1 - modules/ppcp-axo-block/resources/js/index.js | 10 +- 27 files changed, 118 insertions(+), 315 deletions(-) rename modules/ppcp-axo-block/resources/js/components/{card => Card}/Card.js (92%) create mode 100644 modules/ppcp-axo-block/resources/js/components/Card/CardChangeButton.js rename modules/ppcp-axo-block/resources/js/{helpers/cardChangeButtonManager.js => components/Card/CardChangeButtonManager.js} (50%) create mode 100644 modules/ppcp-axo-block/resources/js/components/Card/index.js create mode 100644 modules/ppcp-axo-block/resources/js/components/Card/utils.js rename modules/ppcp-axo-block/resources/js/components/{email-button => EmailButton}/EmailButton.js (93%) create mode 100644 modules/ppcp-axo-block/resources/js/components/EmailButton/index.js rename modules/ppcp-axo-block/resources/js/components/{email-button => EmailButton}/utils.js (90%) rename modules/ppcp-axo-block/resources/js/components/{ => Payment}/Payment.js (90%) rename modules/ppcp-axo-block/resources/js/components/{shipping => Shipping}/ShippingChangeButton.js (100%) rename modules/ppcp-axo-block/resources/js/components/{shipping => Shipping}/ShippingChangeButtonManager.js (100%) rename modules/ppcp-axo-block/resources/js/components/{shipping => Shipping}/index.js (80%) create mode 100644 modules/ppcp-axo-block/resources/js/components/Shipping/utils.js rename modules/ppcp-axo-block/resources/js/components/{watermark => Watermark}/Watermark.js (100%) rename modules/ppcp-axo-block/resources/js/components/{watermark => Watermark}/WatermarkManager.js (100%) rename modules/ppcp-axo-block/resources/js/components/{watermark => Watermark}/index.js (100%) rename modules/ppcp-axo-block/resources/js/components/{watermark => Watermark}/utils.js (98%) delete mode 100644 modules/ppcp-axo-block/resources/js/components/card/index.js delete mode 100644 modules/ppcp-axo-block/resources/js/components/email-button/index.js delete mode 100644 modules/ppcp-axo-block/resources/js/components/shipping/utils.js delete mode 100644 modules/ppcp-axo-block/resources/js/helpers/shippingChangeButtonManager.js diff --git a/modules/ppcp-axo-block/resources/css/gateway.scss b/modules/ppcp-axo-block/resources/css/gateway.scss index f7c3b8fe9..2c0cd9614 100644 --- a/modules/ppcp-axo-block/resources/css/gateway.scss +++ b/modules/ppcp-axo-block/resources/css/gateway.scss @@ -116,8 +116,20 @@ margin-left: 5px; } +//.wc-block-axo-is-loaded:not(.wc-block-axo-is-authenticated) { +// #shipping-fields, +// #shipping-option, +// #order-notes { +// display: none; +// } +//} + .wc-block-axo-is-loaded { - .wc-block-components-text-input { + &.wc-block-axo-is-authenticated .wc-block-components-text-input { + gap: 14px 0; + } + + .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input { display: grid; grid-template-areas: "input button" @@ -132,10 +144,6 @@ align-self: center; } - &.wc-block-axo-is-authenticated .wc-block-components-text-input { - gap: 14px 0; - } - .wc-block-components-text-input input[type="email"] { grid-area: input; width: 100%; @@ -186,7 +194,7 @@ a.wc-block-axo-change-link { height: 25px; } -.wp-block-woocommerce-checkout-contact-information-block:not( .wc-block-axo-is-loaded ) .wc-block-checkout-axo-block-watermark-container { +.wp-block-woocommerce-checkout-fields-block:not( .wc-block-axo-is-loaded ) .wc-block-checkout-axo-block-watermark-container { display: flex; justify-content: left; margin-left: 10px; @@ -204,7 +212,7 @@ a.wc-block-axo-change-link { } } -.wp-block-woocommerce-checkout-contact-information-block.wc-block-axo-is-loaded { +.wc-block-axo-is-loaded .wp-block-woocommerce-checkout-contact-information-block { .wc-block-checkout-axo-block-watermark-container .wc-block-components-spinner { display: none; visibility: hidden; diff --git a/modules/ppcp-axo-block/resources/js/components/card/Card.js b/modules/ppcp-axo-block/resources/js/components/Card/Card.js similarity index 92% rename from modules/ppcp-axo-block/resources/js/components/card/Card.js rename to modules/ppcp-axo-block/resources/js/components/Card/Card.js index c5827288a..c1046384e 100644 --- a/modules/ppcp-axo-block/resources/js/components/card/Card.js +++ b/modules/ppcp-axo-block/resources/js/components/Card/Card.js @@ -1,5 +1,5 @@ import { useMemo } from '@wordpress/element'; -import { Watermark } from '../watermark'; +import { Watermark } from '../Watermark'; const cardIcons = { VISA: 'visa-light.svg', @@ -11,7 +11,7 @@ const cardIcons = { UNIONPAY: 'unionpay-light.svg', }; -export const Card = ( { card, fastlaneSdk, showWatermark = true } ) => { +const Card = ( { card, fastlaneSdk, showWatermark = true } ) => { const { brand, lastDigits, expiry, name } = card?.paymentSource?.card ?? {}; const cardLogo = useMemo( () => { @@ -59,3 +59,5 @@ export const Card = ( { card, fastlaneSdk, showWatermark = true } ) => { ); }; + +export default Card; diff --git a/modules/ppcp-axo-block/resources/js/components/Card/CardChangeButton.js b/modules/ppcp-axo-block/resources/js/components/Card/CardChangeButton.js new file mode 100644 index 000000000..8286c809a --- /dev/null +++ b/modules/ppcp-axo-block/resources/js/components/Card/CardChangeButton.js @@ -0,0 +1,18 @@ +import { createElement } from '@wordpress/element'; + +const CardChangeButton = ( { onChangeButtonClick } ) => + createElement( + 'a', + { + className: + 'wc-block-checkout-axo-block-card__edit wc-block-axo-change-link', + role: 'button', + onClick: ( event ) => { + event.preventDefault(); + onChangeButtonClick(); + }, + }, + 'Choose a different card' + ); + +export default CardChangeButton; diff --git a/modules/ppcp-axo-block/resources/js/helpers/cardChangeButtonManager.js b/modules/ppcp-axo-block/resources/js/components/Card/CardChangeButtonManager.js similarity index 50% rename from modules/ppcp-axo-block/resources/js/helpers/cardChangeButtonManager.js rename to modules/ppcp-axo-block/resources/js/components/Card/CardChangeButtonManager.js index e3b5268b6..c38e6c0b6 100644 --- a/modules/ppcp-axo-block/resources/js/helpers/cardChangeButtonManager.js +++ b/modules/ppcp-axo-block/resources/js/components/Card/CardChangeButtonManager.js @@ -1,19 +1,5 @@ -import { createElement, useEffect, createRoot } from '@wordpress/element'; - -const CardChangeButton = ( { onChangeButtonClick } ) => - createElement( - 'a', - { - className: - 'wc-block-checkout-axo-block-card__edit wc-block-axo-change-link', - role: 'button', - onClick: ( event ) => { - event.preventDefault(); - onChangeButtonClick(); - }, - }, - 'Choose a different card' - ); +import { createElement, createRoot, useEffect } from '@wordpress/element'; +import CardChangeButton from './CardChangeButton'; const CardChangeButtonManager = ( { onChangeButtonClick } ) => { useEffect( () => { @@ -50,21 +36,4 @@ const CardChangeButtonManager = ( { onChangeButtonClick } ) => { return null; }; -export const injectCardChangeButton = ( onChangeButtonClick ) => { - const container = document.createElement( 'div' ); - document.body.appendChild( container ); - createRoot( container ).render( - createElement( CardChangeButtonManager, { onChangeButtonClick } ) - ); -}; - -export const removeCardChangeButton = () => { - const button = document.querySelector( - '.wc-block-checkout-axo-block-card__edit' - ); - if ( button && button.parentNode ) { - button.parentNode.remove(); - } -}; - export default CardChangeButtonManager; diff --git a/modules/ppcp-axo-block/resources/js/components/Card/index.js b/modules/ppcp-axo-block/resources/js/components/Card/index.js new file mode 100644 index 000000000..c9250078e --- /dev/null +++ b/modules/ppcp-axo-block/resources/js/components/Card/index.js @@ -0,0 +1,4 @@ +export { default as Card } from './Card'; +export { default as CardChangeButton } from './CardChangeButton'; +export { default as CardChangeButtonManager } from './CardChangeButtonManager'; +export { injectCardChangeButton, removeCardChangeButton } from './utils'; diff --git a/modules/ppcp-axo-block/resources/js/components/Card/utils.js b/modules/ppcp-axo-block/resources/js/components/Card/utils.js new file mode 100644 index 000000000..93f903142 --- /dev/null +++ b/modules/ppcp-axo-block/resources/js/components/Card/utils.js @@ -0,0 +1,19 @@ +import { createElement, createRoot } from '@wordpress/element'; +import CardChangeButtonManager from './CardChangeButtonManager'; + +export const injectCardChangeButton = ( onChangeButtonClick ) => { + const container = document.createElement( 'div' ); + document.body.appendChild( container ); + createRoot( container ).render( + createElement( CardChangeButtonManager, { onChangeButtonClick } ) + ); +}; + +export const removeCardChangeButton = () => { + const button = document.querySelector( + '.wc-block-checkout-axo-block-card__edit' + ); + if ( button && button.parentNode ) { + button.parentNode.remove(); + } +}; diff --git a/modules/ppcp-axo-block/resources/js/components/email-button/EmailButton.js b/modules/ppcp-axo-block/resources/js/components/EmailButton/EmailButton.js similarity index 93% rename from modules/ppcp-axo-block/resources/js/components/email-button/EmailButton.js rename to modules/ppcp-axo-block/resources/js/components/EmailButton/EmailButton.js index 27d5c0266..4fbb16f79 100644 --- a/modules/ppcp-axo-block/resources/js/components/email-button/EmailButton.js +++ b/modules/ppcp-axo-block/resources/js/components/EmailButton/EmailButton.js @@ -1,7 +1,7 @@ import { STORE_NAME } from '../../stores/axoStore'; import { useSelect } from '@wordpress/data'; -export const EmailButton = ( { handleSubmit } ) => { +const EmailButton = ( { handleSubmit } ) => { const { isGuest, isAxoActive, isEmailSubmitted } = useSelect( ( select ) => ( { isGuest: select( STORE_NAME ).getIsGuest(), @@ -46,3 +46,5 @@ export const EmailButton = ( { handleSubmit } ) => { ); }; + +export default EmailButton; diff --git a/modules/ppcp-axo-block/resources/js/components/EmailButton/index.js b/modules/ppcp-axo-block/resources/js/components/EmailButton/index.js new file mode 100644 index 000000000..8d7b4233c --- /dev/null +++ b/modules/ppcp-axo-block/resources/js/components/EmailButton/index.js @@ -0,0 +1,6 @@ +export { default as EmailButton } from './EmailButton'; +export { + setupEmailFunctionality, + removeEmailFunctionality, + isEmailFunctionalitySetup, +} from './utils'; diff --git a/modules/ppcp-axo-block/resources/js/components/email-button/utils.js b/modules/ppcp-axo-block/resources/js/components/EmailButton/utils.js similarity index 90% rename from modules/ppcp-axo-block/resources/js/components/email-button/utils.js rename to modules/ppcp-axo-block/resources/js/components/EmailButton/utils.js index 59308c4b1..32f354288 100644 --- a/modules/ppcp-axo-block/resources/js/components/email-button/utils.js +++ b/modules/ppcp-axo-block/resources/js/components/EmailButton/utils.js @@ -1,6 +1,6 @@ import { createElement, createRoot } from '@wordpress/element'; import { STORE_NAME } from '../../stores/axoStore'; -import { EmailButton } from './EmailButton'; +import EmailButton from './EmailButton'; let emailInput = null; let submitButtonReference = { @@ -17,7 +17,7 @@ const getEmailInput = () => { return emailInput; }; -const setupEmailFunctionality = ( onEmailSubmit ) => { +export const setupEmailFunctionality = ( onEmailSubmit ) => { const input = getEmailInput(); if ( ! input ) { console.warn( @@ -96,7 +96,7 @@ const setupEmailFunctionality = ( onEmailSubmit ) => { } ); }; -const removeEmailFunctionality = () => { +export const removeEmailFunctionality = () => { const input = getEmailInput(); if ( input && keydownHandler ) { input.removeEventListener( 'keydown', keydownHandler ); @@ -120,12 +120,6 @@ const removeEmailFunctionality = () => { keydownHandler = null; }; -const isEmailFunctionalitySetup = () => { +export const isEmailFunctionalitySetup = () => { return !! submitButtonReference.root; }; - -export { - setupEmailFunctionality, - removeEmailFunctionality, - isEmailFunctionalitySetup, -}; diff --git a/modules/ppcp-axo-block/resources/js/components/Payment.js b/modules/ppcp-axo-block/resources/js/components/Payment/Payment.js similarity index 90% rename from modules/ppcp-axo-block/resources/js/components/Payment.js rename to modules/ppcp-axo-block/resources/js/components/Payment/Payment.js index 49d396ee3..41738d881 100644 --- a/modules/ppcp-axo-block/resources/js/components/Payment.js +++ b/modules/ppcp-axo-block/resources/js/components/Payment/Payment.js @@ -1,7 +1,7 @@ import { useEffect, useCallback } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; -import { Card } from './card/Card'; -import { STORE_NAME } from '../stores/axoStore'; +import { Card } from '../Card'; +import { STORE_NAME } from '../../stores/axoStore'; export const Payment = ( { fastlaneSdk, card, onPaymentLoad } ) => { const isGuest = useSelect( ( select ) => diff --git a/modules/ppcp-axo-block/resources/js/components/shipping/ShippingChangeButton.js b/modules/ppcp-axo-block/resources/js/components/Shipping/ShippingChangeButton.js similarity index 100% rename from modules/ppcp-axo-block/resources/js/components/shipping/ShippingChangeButton.js rename to modules/ppcp-axo-block/resources/js/components/Shipping/ShippingChangeButton.js diff --git a/modules/ppcp-axo-block/resources/js/components/shipping/ShippingChangeButtonManager.js b/modules/ppcp-axo-block/resources/js/components/Shipping/ShippingChangeButtonManager.js similarity index 100% rename from modules/ppcp-axo-block/resources/js/components/shipping/ShippingChangeButtonManager.js rename to modules/ppcp-axo-block/resources/js/components/Shipping/ShippingChangeButtonManager.js diff --git a/modules/ppcp-axo-block/resources/js/components/shipping/index.js b/modules/ppcp-axo-block/resources/js/components/Shipping/index.js similarity index 80% rename from modules/ppcp-axo-block/resources/js/components/shipping/index.js rename to modules/ppcp-axo-block/resources/js/components/Shipping/index.js index 46f00b864..0938efca5 100644 --- a/modules/ppcp-axo-block/resources/js/components/shipping/index.js +++ b/modules/ppcp-axo-block/resources/js/components/Shipping/index.js @@ -1,9 +1,6 @@ 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..1fcb93d6c --- /dev/null +++ b/modules/ppcp-axo-block/resources/js/components/Shipping/utils.js @@ -0,0 +1,32 @@ +import { createRoot } from '@wordpress/element'; +import ShippingChangeButtonManager from './ShippingChangeButtonManager'; + +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/watermark/Watermark.js b/modules/ppcp-axo-block/resources/js/components/Watermark/Watermark.js similarity index 100% rename from modules/ppcp-axo-block/resources/js/components/watermark/Watermark.js rename to modules/ppcp-axo-block/resources/js/components/Watermark/Watermark.js diff --git a/modules/ppcp-axo-block/resources/js/components/watermark/WatermarkManager.js b/modules/ppcp-axo-block/resources/js/components/Watermark/WatermarkManager.js similarity index 100% rename from modules/ppcp-axo-block/resources/js/components/watermark/WatermarkManager.js rename to modules/ppcp-axo-block/resources/js/components/Watermark/WatermarkManager.js diff --git a/modules/ppcp-axo-block/resources/js/components/watermark/index.js b/modules/ppcp-axo-block/resources/js/components/Watermark/index.js similarity index 100% rename from modules/ppcp-axo-block/resources/js/components/watermark/index.js rename to modules/ppcp-axo-block/resources/js/components/Watermark/index.js diff --git a/modules/ppcp-axo-block/resources/js/components/watermark/utils.js b/modules/ppcp-axo-block/resources/js/components/Watermark/utils.js similarity index 98% rename from modules/ppcp-axo-block/resources/js/components/watermark/utils.js rename to modules/ppcp-axo-block/resources/js/components/Watermark/utils.js index e61de16ca..3b3bdc456 100644 --- a/modules/ppcp-axo-block/resources/js/components/watermark/utils.js +++ b/modules/ppcp-axo-block/resources/js/components/Watermark/utils.js @@ -1,5 +1,5 @@ import { createElement, createRoot } from '@wordpress/element'; -import { Watermark, WatermarkManager } from '../watermark'; +import { Watermark, WatermarkManager } from '../Watermark'; const watermarkReference = { container: null, diff --git a/modules/ppcp-axo-block/resources/js/components/card/index.js b/modules/ppcp-axo-block/resources/js/components/card/index.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/modules/ppcp-axo-block/resources/js/components/email-button/index.js b/modules/ppcp-axo-block/resources/js/components/email-button/index.js deleted file mode 100644 index 946750419..000000000 --- a/modules/ppcp-axo-block/resources/js/components/email-button/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import { EmailButton } from './EmailButton'; -import { - setupEmailFunctionality, - removeEmailFunctionality, - isEmailFunctionalitySetup, -} from './utils'; - -export { - EmailButton, - setupEmailFunctionality, - removeEmailFunctionality, - isEmailFunctionalitySetup, -}; - -export default EmailButton; diff --git a/modules/ppcp-axo-block/resources/js/components/shipping/utils.js b/modules/ppcp-axo-block/resources/js/components/shipping/utils.js deleted file mode 100644 index 80bbf2404..000000000 --- a/modules/ppcp-axo-block/resources/js/components/shipping/utils.js +++ /dev/null @@ -1,149 +0,0 @@ -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/events/emailLookupManager.js b/modules/ppcp-axo-block/resources/js/events/emailLookupManager.js index 0934f2ede..5cb1d148e 100644 --- a/modules/ppcp-axo-block/resources/js/events/emailLookupManager.js +++ b/modules/ppcp-axo-block/resources/js/events/emailLookupManager.js @@ -1,6 +1,6 @@ import { populateWooFields } from '../helpers/fieldHelpers'; -import { injectShippingChangeButton } from '../components/shipping'; -import { injectCardChangeButton } from '../helpers/cardChangeButtonManager'; +import { injectShippingChangeButton } from '../components/Shipping'; +import { injectCardChangeButton } from '../components/Card'; import { setIsGuest } from '../stores/axoStore'; export const createEmailLookupHandler = ( diff --git a/modules/ppcp-axo-block/resources/js/helpers/classnamesManager.js b/modules/ppcp-axo-block/resources/js/helpers/classnamesManager.js index a4f578e2b..1201d4a6b 100644 --- a/modules/ppcp-axo-block/resources/js/helpers/classnamesManager.js +++ b/modules/ppcp-axo-block/resources/js/helpers/classnamesManager.js @@ -42,8 +42,7 @@ export const setupAuthenticationClassToggle = () => { * @return {Function} Unsubscribe function for cleanup. */ export const setupContactInfoClassToggles = () => { - const targetSelector = - '.wp-block-woocommerce-checkout-contact-information-block'; + const targetSelector = '.wp-block-woocommerce-checkout-fields-block'; const axoLoadedClass = 'wc-block-axo-is-loaded'; const authClass = 'wc-block-axo-is-authenticated'; diff --git a/modules/ppcp-axo-block/resources/js/helpers/shippingChangeButtonManager.js b/modules/ppcp-axo-block/resources/js/helpers/shippingChangeButtonManager.js deleted file mode 100644 index 3ea9c41a7..000000000 --- a/modules/ppcp-axo-block/resources/js/helpers/shippingChangeButtonManager.js +++ /dev/null @@ -1,81 +0,0 @@ -import { useEffect, createRoot } from '@wordpress/element'; - -const ShippingChangeButton = ( { onChangeShippingAddressClick } ) => ( - { - event.preventDefault(); - onChangeShippingAddressClick(); - } } - > - Choose a different shipping address - -); - -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 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(); - } -}; - -export default ShippingChangeButtonManager; diff --git a/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js b/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js index 722fcc37a..f6c16f784 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js +++ b/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js @@ -1,5 +1,4 @@ import { useCallback } from '@wordpress/element'; -import useFastlaneSdk from "./useFastlaneSdk"; export const useCardChange = ( fastlaneSdk, setCard, setWooBillingAddress ) => { return useCallback( async () => { diff --git a/modules/ppcp-axo-block/resources/js/hooks/useCustomerData.js b/modules/ppcp-axo-block/resources/js/hooks/useCustomerData.js index 4da6466c6..6f7ffe537 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useCustomerData.js +++ b/modules/ppcp-axo-block/resources/js/hooks/useCustomerData.js @@ -1,6 +1,5 @@ import { useCallback, useMemo } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; -import useFastlaneSdk from "./useFastlaneSdk"; export const useCustomerData = () => { const customerData = useSelect( ( select ) => diff --git a/modules/ppcp-axo-block/resources/js/index.js b/modules/ppcp-axo-block/resources/js/index.js index 64974c1d2..87a5bbf6e 100644 --- a/modules/ppcp-axo-block/resources/js/index.js +++ b/modules/ppcp-axo-block/resources/js/index.js @@ -12,13 +12,13 @@ import useShippingAddressChange from './hooks/useShippingAddressChange'; import useCardChange from './hooks/useCardChange'; // Components -import { Payment } from './components/Payment'; +import { Payment } from './components/Payment/Payment'; // Helpers import { snapshotFields, restoreOriginalFields } from './helpers/fieldHelpers'; -import { removeWatermark, setupWatermark } from './components/watermark'; -import { removeCardChangeButton } from './helpers/cardChangeButtonManager'; -import { removeShippingChangeButton } from './components/shipping'; +import { removeWatermark, setupWatermark } from './components/Watermark'; +import { removeCardChangeButton } from './components/Card'; +import { removeShippingChangeButton } from './components/Shipping'; import { initializeClassToggles } from './helpers/classnamesManager'; // Stores @@ -30,7 +30,7 @@ import { setupEmailFunctionality, removeEmailFunctionality, isEmailFunctionalitySetup, -} from './components/email-button'; +} from './components/EmailButton'; const ppcpConfig = wc.wcSettings.getSetting( 'ppcp-credit-card-gateway_data' );