mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-31 06:52:50 +08:00
Add Billing Details updating when a new card gets selected
This commit is contained in:
Daniel Dudzic
parent
861034855e
commit
24a481bdeb
12 changed files with 399 additions and 152 deletions
|
|
@ -128,6 +128,10 @@
|
|||
align-items: start;
|
||||
}
|
||||
|
||||
#email {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&.wc-block-axo-is-authenticated .wc-block-components-text-input {
|
||||
gap: 14px 0;
|
||||
}
|
||||
|
|
@ -139,7 +143,7 @@
|
|||
|
||||
.wc-block-axo-email-submit-button-container {
|
||||
grid-area: button;
|
||||
align-self: start;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.wc-block-checkout-axo-block-watermark-container {
|
||||
|
|
@ -221,4 +225,6 @@ a.wc-block-axo-change-link{
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
#shipping-fields .wc-block-components-checkout-step__heading {
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
const AddressCard = ( { address, onEdit, isExpanded } ) => {
|
||||
const formatAddress = ( addressData ) => {
|
||||
const {
|
||||
first_name,
|
||||
last_name,
|
||||
company,
|
||||
address_1,
|
||||
address_2,
|
||||
city,
|
||||
state,
|
||||
postcode,
|
||||
country,
|
||||
} = addressData;
|
||||
const formattedAddress = [
|
||||
`${ first_name } ${ last_name }`,
|
||||
company,
|
||||
address_1,
|
||||
address_2,
|
||||
city,
|
||||
state,
|
||||
postcode,
|
||||
country,
|
||||
].filter( Boolean );
|
||||
|
||||
return formattedAddress;
|
||||
};
|
||||
|
||||
const formattedAddress = formatAddress( address );
|
||||
|
||||
return (
|
||||
<div className="wc-block-components-axo-address-card">
|
||||
<address>
|
||||
{ formattedAddress.map( ( line, index ) => (
|
||||
<span
|
||||
key={ index }
|
||||
className="wc-block-components-axo-address-card__address-section"
|
||||
>
|
||||
{ line }
|
||||
</span>
|
||||
) ) }
|
||||
{ address.phone && (
|
||||
<div className="wc-block-components-axo-address-card__address-section">
|
||||
{ address.phone }
|
||||
</div>
|
||||
) }
|
||||
</address>
|
||||
{ onEdit && (
|
||||
<button
|
||||
className="wc-block-components-axo-address-card__edit"
|
||||
aria-controls="shipping"
|
||||
aria-expanded={ isExpanded }
|
||||
aria-label={ __( 'Edit shipping address', 'woocommerce' ) }
|
||||
onClick={ ( e ) => {
|
||||
e.preventDefault();
|
||||
onEdit();
|
||||
} }
|
||||
type="button"
|
||||
>
|
||||
{ __( 'Edit', 'woocommerce' ) }
|
||||
</button>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddressCard;
|
||||
|
|
@ -11,14 +11,8 @@ const cardIcons = {
|
|||
UNIONPAY: 'unionpay-light.svg',
|
||||
};
|
||||
|
||||
export const CreditCard = ( {
|
||||
card,
|
||||
shippingAddress,
|
||||
fastlaneSdk,
|
||||
showWatermark = true,
|
||||
} ) => {
|
||||
const { brand, lastDigits, expiry } = card?.paymentSource?.card ?? {};
|
||||
const { fullName } = shippingAddress?.name ?? {};
|
||||
export const CreditCard = ( { card, fastlaneSdk, showWatermark = true } ) => {
|
||||
const { brand, lastDigits, expiry, name } = card?.paymentSource?.card ?? {};
|
||||
|
||||
const cardLogo = useMemo( () => {
|
||||
return cardIcons[ brand ] ? (
|
||||
|
|
@ -48,7 +42,7 @@ export const CreditCard = ( {
|
|||
{ cardLogo }
|
||||
</div>
|
||||
<div className="wc-block-checkout-axo-block-card__meta">
|
||||
<span>{ fullName }</span>
|
||||
<span>{ name }</span>
|
||||
<span>{ formattedExpiry }</span>{ ' ' }
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { STORE_NAME } from '../stores/axoStore';
|
|||
export const Payment = ( {
|
||||
fastlaneSdk,
|
||||
card,
|
||||
shippingAddress,
|
||||
onPaymentLoad,
|
||||
} ) => {
|
||||
const isGuest = useSelect( ( select ) =>
|
||||
|
|
@ -32,9 +31,7 @@ export const Payment = ( {
|
|||
<div id="fastlane-card" key="fastlane-card" />
|
||||
) : (
|
||||
<CreditCard
|
||||
key="custom-card"
|
||||
card={ card }
|
||||
shippingAddress={ shippingAddress }
|
||||
fastlaneSdk={ fastlaneSdk }
|
||||
showWatermark={ ! isGuest }
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
import { useState, useEffect, createRoot } from '@wordpress/element';
|
||||
import AddressCard from '../components/AddressCard';
|
||||
import { useCustomerData } from '../hooks/useCustomerData';
|
||||
|
||||
const AddressManager = ( { onChangeShippingAddressClick } ) => {
|
||||
const [ isEditing, setIsEditing ] = useState( false );
|
||||
const { shippingAddress } = useCustomerData();
|
||||
|
||||
useEffect( () => {
|
||||
const injectAddressCard = () => {
|
||||
const shippingForm = document.querySelector(
|
||||
'#shipping.wc-block-components-address-form'
|
||||
);
|
||||
if (
|
||||
shippingForm &&
|
||||
! document.querySelector(
|
||||
'.wc-block-components-axo-address-card'
|
||||
)
|
||||
) {
|
||||
const cardWrapper = document.createElement( 'div' );
|
||||
cardWrapper.className = 'wc-block-components-axo-address-card';
|
||||
shippingForm.parentNode.insertBefore(
|
||||
cardWrapper,
|
||||
shippingForm
|
||||
);
|
||||
|
||||
const root = createRoot( cardWrapper );
|
||||
root.render(
|
||||
<AddressCard
|
||||
address={ shippingAddress }
|
||||
onEdit={ () => {
|
||||
setIsEditing( ! isEditing );
|
||||
onChangeShippingAddressClick();
|
||||
} }
|
||||
isExpanded={ isEditing }
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
if ( shippingAddress ) {
|
||||
injectAddressCard();
|
||||
}
|
||||
|
||||
return () => {
|
||||
const cardWrapper = document.querySelector(
|
||||
'.wc-block-components-axo-address-card'
|
||||
);
|
||||
if ( cardWrapper ) {
|
||||
cardWrapper.remove();
|
||||
}
|
||||
};
|
||||
}, [ shippingAddress, isEditing, onChangeShippingAddressClick ] );
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default AddressManager;
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
export const snapshotFields = ( shippingAddress, billingAddress ) => {
|
||||
console.log( 'Attempting to snapshot fields' );
|
||||
if ( ! shippingAddress || ! billingAddress ) {
|
||||
console.warn( 'Shipping or billing address is missing:', {
|
||||
shippingAddress,
|
||||
|
|
@ -8,29 +9,59 @@ export const snapshotFields = ( shippingAddress, billingAddress ) => {
|
|||
|
||||
const originalData = { shippingAddress, billingAddress };
|
||||
console.log( 'Snapshot data:', originalData );
|
||||
localStorage.setItem(
|
||||
'axoOriginalCheckoutFields',
|
||||
JSON.stringify( originalData )
|
||||
);
|
||||
console.log( 'Original fields saved to localStorage', 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
|
||||
) => {
|
||||
const savedData = localStorage.getItem( 'axoOriginalCheckoutFields' );
|
||||
console.log( 'Data retrieved from localStorage:', savedData );
|
||||
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 ) {
|
||||
const parsedData = JSON.parse( savedData );
|
||||
if ( parsedData.shippingAddress ) {
|
||||
updateShippingAddress( parsedData.shippingAddress );
|
||||
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 );
|
||||
}
|
||||
if ( parsedData.billingAddress ) {
|
||||
updateBillingAddress( parsedData.billingAddress );
|
||||
}
|
||||
console.log( 'Original fields restored from localStorage', parsedData );
|
||||
} else {
|
||||
console.warn(
|
||||
'No data found in localStorage under axoOriginalCheckoutFields'
|
||||
|
|
@ -43,10 +74,15 @@ export const populateWooFields = (
|
|||
setWooShippingAddress,
|
||||
setWooBillingAddress
|
||||
) => {
|
||||
console.log(
|
||||
'Populating WooCommerce fields with profile data:',
|
||||
profileData
|
||||
);
|
||||
|
||||
// Save shipping address
|
||||
const { address, name, phoneNumber } = profileData.shippingAddress;
|
||||
|
||||
setWooShippingAddress( {
|
||||
const shippingAddress = {
|
||||
first_name: name.firstName,
|
||||
last_name: name.lastName,
|
||||
address_1: address.addressLine1,
|
||||
|
|
@ -56,12 +92,15 @@ export const populateWooFields = (
|
|||
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;
|
||||
|
||||
setWooBillingAddress( {
|
||||
const billingAddress = {
|
||||
first_name: profileData.name.firstName,
|
||||
last_name: profileData.name.lastName,
|
||||
address_1: billingData.addressLine1,
|
||||
|
|
@ -70,5 +109,8 @@ export const populateWooFields = (
|
|||
state: billingData.adminArea1,
|
||||
postcode: billingData.postalCode,
|
||||
country: billingData.countryCode,
|
||||
} );
|
||||
};
|
||||
|
||||
console.log( 'Setting WooCommerce billing address:', billingAddress );
|
||||
setWooBillingAddress( billingAddress );
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,62 +1,54 @@
|
|||
import { createElement, useEffect, createRoot } from '@wordpress/element';
|
||||
import { useEffect, createRoot } from '@wordpress/element';
|
||||
|
||||
const ShippingChangeButton = ( { onChangeShippingAddressClick } ) =>
|
||||
createElement(
|
||||
'a',
|
||||
{
|
||||
className:
|
||||
'wc-block-checkout-axo-block-card__edit wc-block-axo-change-link',
|
||||
role: 'button',
|
||||
onClick: ( event ) => {
|
||||
event.preventDefault();
|
||||
onChangeShippingAddressClick();
|
||||
},
|
||||
},
|
||||
'Choose a different shipping address'
|
||||
);
|
||||
const ShippingChangeButton = ( { onChangeShippingAddressClick } ) => (
|
||||
<a
|
||||
className="wc-block-axo-change-link"
|
||||
role="button"
|
||||
onClick={ ( event ) => {
|
||||
event.preventDefault();
|
||||
onChangeShippingAddressClick();
|
||||
} }
|
||||
>
|
||||
Choose a different shipping address
|
||||
</a>
|
||||
);
|
||||
|
||||
const ShippingChangeButtonManager = ( { onChangeShippingAddressClick } ) => {
|
||||
useEffect( () => {
|
||||
const shippingTitle = document.querySelector(
|
||||
'#shipping-fields h2.wc-block-components-title'
|
||||
const shippingHeading = document.querySelector(
|
||||
'#shipping-fields .wc-block-components-checkout-step__heading'
|
||||
);
|
||||
|
||||
if ( shippingTitle ) {
|
||||
if (
|
||||
! shippingTitle.nextElementSibling?.classList?.contains(
|
||||
'wc-block-checkout-axo-block-card__edit'
|
||||
)
|
||||
) {
|
||||
const buttonContainer = document.createElement( 'span' );
|
||||
shippingTitle.parentNode.insertBefore(
|
||||
buttonContainer,
|
||||
shippingTitle.nextSibling
|
||||
);
|
||||
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( buttonContainer );
|
||||
root.render(
|
||||
createElement( ShippingChangeButton, {
|
||||
onChangeShippingAddressClick,
|
||||
} )
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
const button = document.querySelector(
|
||||
'#shipping-fields .wc-block-checkout-axo-block-card__edit'
|
||||
const root = createRoot( spanElement );
|
||||
root.render(
|
||||
<ShippingChangeButton
|
||||
onChangeShippingAddressClick={
|
||||
onChangeShippingAddressClick
|
||||
}
|
||||
/>
|
||||
);
|
||||
if ( button && button.parentNode ) {
|
||||
button.parentNode.remove();
|
||||
}
|
||||
};
|
||||
|
||||
return () => {
|
||||
root.unmount();
|
||||
spanElement.remove();
|
||||
};
|
||||
}
|
||||
}, [ onChangeShippingAddressClick ] );
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export const injectShippingChangeButton = ( onChangeShippingAddressClick ) => {
|
||||
// Check if the button already exists
|
||||
const existingButton = document.querySelector(
|
||||
'#shipping-fields .wc-block-checkout-axo-block-card__edit'
|
||||
);
|
||||
|
|
@ -65,9 +57,9 @@ export const injectShippingChangeButton = ( onChangeShippingAddressClick ) => {
|
|||
const container = document.createElement( 'div' );
|
||||
document.body.appendChild( container );
|
||||
createRoot( container ).render(
|
||||
createElement( ShippingChangeButtonManager, {
|
||||
onChangeShippingAddressClick,
|
||||
} )
|
||||
<ShippingChangeButtonManager
|
||||
onChangeShippingAddressClick={ onChangeShippingAddressClick }
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
console.log(
|
||||
|
|
@ -77,11 +69,12 @@ export const injectShippingChangeButton = ( onChangeShippingAddressClick ) => {
|
|||
};
|
||||
|
||||
export const removeShippingChangeButton = () => {
|
||||
const button = document.querySelector(
|
||||
const span = document.querySelector(
|
||||
'#shipping-fields .wc-block-checkout-axo-block-card__edit'
|
||||
);
|
||||
if ( button && button.parentNode ) {
|
||||
button.parentNode.remove();
|
||||
if ( span ) {
|
||||
createRoot( span ).unmount();
|
||||
span.remove();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@ let watermarkReference = {
|
|||
root: null,
|
||||
};
|
||||
|
||||
const WatermarkManager = ( { fastlaneSdk, isLoaded } ) => {
|
||||
console.log( 'WatermarkManager module loaded' );
|
||||
|
||||
const WatermarkManager = ( { fastlaneSdk } ) => {
|
||||
console.log( 'WatermarkManager rendering', { fastlaneSdk } );
|
||||
|
||||
const isGuest = useSelect( ( select ) =>
|
||||
select( STORE_NAME ).getIsGuest()
|
||||
);
|
||||
|
|
@ -19,18 +23,30 @@ const WatermarkManager = ( { fastlaneSdk, isLoaded } ) => {
|
|||
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 ) {
|
||||
const emailInput = textInputContainer.querySelector(
|
||||
'input[type="email"]'
|
||||
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(
|
||||
|
|
@ -50,7 +66,9 @@ const WatermarkManager = ( { fastlaneSdk, isLoaded } ) => {
|
|||
}
|
||||
|
||||
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',
|
||||
|
|
@ -58,6 +76,7 @@ const WatermarkManager = ( { fastlaneSdk, isLoaded } ) => {
|
|||
} )
|
||||
);
|
||||
} else if ( isAxoActive ) {
|
||||
console.log( 'Rendering FastlaneWatermark' );
|
||||
watermarkReference.root.render(
|
||||
createElement( FastlaneWatermark, {
|
||||
fastlaneSdk,
|
||||
|
|
@ -66,12 +85,14 @@ const WatermarkManager = ( { fastlaneSdk, isLoaded } ) => {
|
|||
} )
|
||||
);
|
||||
} else {
|
||||
console.log( 'Rendering null content' );
|
||||
watermarkReference.root.render( null );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const removeWatermark = () => {
|
||||
console.log( 'Removing watermark' );
|
||||
if ( watermarkReference.root ) {
|
||||
watermarkReference.root.unmount();
|
||||
}
|
||||
|
|
@ -90,27 +111,32 @@ const WatermarkManager = ( { fastlaneSdk, isLoaded } ) => {
|
|||
}
|
||||
}
|
||||
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, isLoaded, isAxoScriptLoaded ] );
|
||||
}, [ 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 );
|
||||
|
|
@ -119,6 +145,7 @@ export const setupWatermark = ( fastlaneSdk ) => {
|
|||
};
|
||||
|
||||
export const removeWatermark = () => {
|
||||
console.log( 'Removing watermark (external call)' );
|
||||
if ( watermarkReference.root ) {
|
||||
watermarkReference.root.unmount();
|
||||
}
|
||||
|
|
@ -137,6 +164,7 @@ export const removeWatermark = () => {
|
|||
}
|
||||
}
|
||||
watermarkReference = { container: null, root: null };
|
||||
console.log( 'Watermark removed (external call)' );
|
||||
};
|
||||
|
||||
export default WatermarkManager;
|
||||
|
|
|
|||
|
|
@ -1,39 +1,49 @@
|
|||
import { useEffect, useState } from '@wordpress/element';
|
||||
import { useEffect, useRef, useState } from '@wordpress/element';
|
||||
import Fastlane from '../../../../ppcp-axo/resources/js/Connection/Fastlane';
|
||||
import { log } from '../../../../ppcp-axo/resources/js/Helper/Debug';
|
||||
|
||||
const useAxoBlockManager = ( axoConfig, ppcpConfig ) => {
|
||||
const [ fastlaneSdk, setFastlaneSdk ] = useState( null );
|
||||
const [ initialized, setInitialized ] = useState( false );
|
||||
const initializingRef = useRef( false );
|
||||
const configRef = useRef( { axoConfig, ppcpConfig } );
|
||||
|
||||
useEffect( () => {
|
||||
const initFastlane = async () => {
|
||||
log( 'Init Fastlane' );
|
||||
|
||||
if ( initialized ) {
|
||||
if ( initializingRef.current || fastlaneSdk ) {
|
||||
return;
|
||||
}
|
||||
|
||||
setInitialized( true );
|
||||
initializingRef.current = true;
|
||||
log( 'Init Fastlane' );
|
||||
|
||||
const fastlane = new Fastlane();
|
||||
try {
|
||||
const fastlane = new Fastlane();
|
||||
|
||||
if ( axoConfig.environment.is_sandbox ) {
|
||||
window.localStorage.setItem( 'axoEnv', 'sandbox' );
|
||||
if ( configRef.current.axoConfig.environment.is_sandbox ) {
|
||||
window.localStorage.setItem( 'axoEnv', 'sandbox' );
|
||||
}
|
||||
|
||||
await fastlane.connect( {
|
||||
locale: configRef.current.ppcpConfig.locale,
|
||||
styles: configRef.current.ppcpConfig.styles,
|
||||
} );
|
||||
|
||||
fastlane.setLocale( 'en_us' );
|
||||
|
||||
setFastlaneSdk( fastlane );
|
||||
} catch ( error ) {
|
||||
console.error( 'Failed to initialize Fastlane:', error );
|
||||
} finally {
|
||||
initializingRef.current = false;
|
||||
}
|
||||
|
||||
await fastlane.connect( {
|
||||
locale: ppcpConfig.locale,
|
||||
styles: ppcpConfig.styles,
|
||||
} );
|
||||
|
||||
fastlane.setLocale( 'en_us' );
|
||||
|
||||
setFastlaneSdk( fastlane );
|
||||
};
|
||||
|
||||
initFastlane();
|
||||
}, [ axoConfig, ppcpConfig, initialized ] );
|
||||
}, [] );
|
||||
|
||||
useEffect( () => {
|
||||
configRef.current = { axoConfig, ppcpConfig };
|
||||
}, [ axoConfig, ppcpConfig ] );
|
||||
|
||||
return fastlaneSdk;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,16 +1,42 @@
|
|||
import { useCallback, useMemo } from '@wordpress/element';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
|
||||
export const useCustomerData = () => {
|
||||
const customerData = useSelect( ( select ) =>
|
||||
select( 'wc/store/cart' ).getCustomerData()
|
||||
);
|
||||
const { setShippingAddress, setBillingAddress } =
|
||||
useDispatch( 'wc/store/cart' );
|
||||
|
||||
return {
|
||||
shippingAddress: customerData.shippingAddress,
|
||||
billingAddress: customerData.billingAddress,
|
||||
setShippingAddress,
|
||||
setBillingAddress,
|
||||
};
|
||||
const {
|
||||
setShippingAddress: setShippingAddressDispatch,
|
||||
setBillingAddress: setBillingAddressDispatch,
|
||||
} = useDispatch( 'wc/store/cart' );
|
||||
|
||||
const setShippingAddress = useCallback(
|
||||
( address ) => {
|
||||
setShippingAddressDispatch( address );
|
||||
},
|
||||
[ setShippingAddressDispatch ]
|
||||
);
|
||||
|
||||
const setBillingAddress = useCallback(
|
||||
( address ) => {
|
||||
setBillingAddressDispatch( address );
|
||||
},
|
||||
[ setBillingAddressDispatch ]
|
||||
);
|
||||
|
||||
return useMemo(
|
||||
() => ( {
|
||||
shippingAddress: customerData.shippingAddress,
|
||||
billingAddress: customerData.billingAddress,
|
||||
setShippingAddress,
|
||||
setBillingAddress,
|
||||
} ),
|
||||
[
|
||||
customerData.shippingAddress,
|
||||
customerData.billingAddress,
|
||||
setShippingAddress,
|
||||
setBillingAddress,
|
||||
]
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export const useShippingAddressChange = (
|
|||
}, [ fastlaneSdk, setShippingAddress, setWooShippingAddress ] );
|
||||
};
|
||||
|
||||
export const useCardChange = ( fastlaneSdk, setCard ) => {
|
||||
export const useCardChange = ( fastlaneSdk, setCard, setWooBillingAddress ) => {
|
||||
return useCallback( async () => {
|
||||
if ( fastlaneSdk ) {
|
||||
const { selectionChanged, selectedCard } =
|
||||
|
|
@ -42,6 +42,27 @@ export const useCardChange = ( fastlaneSdk, setCard ) => {
|
|||
if ( selectionChanged ) {
|
||||
setCard( selectedCard );
|
||||
console.log( 'Selected card changed:', selectedCard );
|
||||
console.log( 'Setting new billing details:', selectedCard );
|
||||
const { name, billingAddress } =
|
||||
selectedCard.paymentSource.card;
|
||||
|
||||
// Split the full name into first and last name
|
||||
const nameParts = name.split( ' ' );
|
||||
const firstName = nameParts[ 0 ];
|
||||
const lastName = nameParts.slice( 1 ).join( ' ' );
|
||||
|
||||
setWooBillingAddress( {
|
||||
first_name: firstName,
|
||||
last_name: lastName,
|
||||
address_1: billingAddress.addressLine1,
|
||||
address_2: billingAddress.addressLine2 || '',
|
||||
city: billingAddress.adminArea2,
|
||||
state: billingAddress.adminArea1,
|
||||
postcode: billingAddress.postalCode,
|
||||
country: billingAddress.countryCode,
|
||||
} );
|
||||
|
||||
console.log( 'Billing address updated:', billingAddress );
|
||||
}
|
||||
}
|
||||
}, [ fastlaneSdk, setCard ] );
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
import { useCallback, useEffect, useState } from '@wordpress/element';
|
||||
import { useDispatch } from '@wordpress/data';
|
||||
|
||||
import { registerPaymentMethod } from '@woocommerce/blocks-registry';
|
||||
|
||||
|
|
@ -43,6 +43,7 @@ if ( typeof window.PayPalCommerceGateway === 'undefined' ) {
|
|||
const axoConfig = window.wc_ppcp_axo;
|
||||
|
||||
const Axo = () => {
|
||||
console.log( 'Axo component rendering' );
|
||||
const [ paypalLoaded, setPaypalLoaded ] = useState( false );
|
||||
const [ shippingAddress, setShippingAddress ] = useState( null );
|
||||
const [ card, setCard ] = useState( null );
|
||||
|
|
@ -51,7 +52,6 @@ const Axo = () => {
|
|||
const { setIsAxoActive, setIsGuest, setIsAxoScriptLoaded } =
|
||||
useDispatch( STORE_NAME );
|
||||
|
||||
// Access WooCommerce customer data
|
||||
const {
|
||||
shippingAddress: wooShippingAddress,
|
||||
billingAddress: wooBillingAddress,
|
||||
|
|
@ -60,12 +60,14 @@ const Axo = () => {
|
|||
} = useCustomerData();
|
||||
|
||||
useEffect( () => {
|
||||
console.log( 'Initializing class toggles' );
|
||||
initializeClassToggles();
|
||||
}, [] );
|
||||
|
||||
useEffect( () => {
|
||||
console.log( 'Setting up cleanup for WooCommerce fields' );
|
||||
return () => {
|
||||
// Restore WooCommerce fields
|
||||
console.log( 'Cleaning up: Restoring WooCommerce fields' );
|
||||
restoreOriginalFields(
|
||||
updateWooShippingAddress,
|
||||
updateWooBillingAddress
|
||||
|
|
@ -73,30 +75,39 @@ const Axo = () => {
|
|||
};
|
||||
}, [ updateWooShippingAddress, updateWooBillingAddress ] );
|
||||
|
||||
const {
|
||||
setShippingAddress: setWooShippingAddress,
|
||||
setBillingAddress: setWooBillingAddress,
|
||||
} = useCustomerData();
|
||||
|
||||
useEffect( () => {
|
||||
if ( ! paypalLoaded ) {
|
||||
console.log( 'Loading PayPal script' );
|
||||
loadPaypalScript( ppcpConfig, () => {
|
||||
console.log( 'PayPal script loaded' );
|
||||
setPaypalLoaded( true );
|
||||
} );
|
||||
}
|
||||
}, [ paypalLoaded, ppcpConfig ] );
|
||||
|
||||
const {
|
||||
setShippingAddress: setWooShippingAddress,
|
||||
setBillingAddress: setWooBillingAddress,
|
||||
} = useCustomerData();
|
||||
|
||||
const onChangeShippingAddressClick = useShippingAddressChange(
|
||||
fastlaneSdk,
|
||||
setShippingAddress,
|
||||
updateWooShippingAddress
|
||||
);
|
||||
|
||||
const onChangeCardButtonClick = useCardChange( fastlaneSdk, setCard );
|
||||
const onChangeCardButtonClick = useCardChange(
|
||||
fastlaneSdk,
|
||||
setCard,
|
||||
updateWooBillingAddress
|
||||
);
|
||||
|
||||
useEffect( () => {
|
||||
console.log( 'Setting up Axo functionality' );
|
||||
setupWatermark( fastlaneSdk );
|
||||
if ( paypalLoaded && fastlaneSdk ) {
|
||||
console.log(
|
||||
'PayPal loaded and FastlaneSDK available, setting up email functionality'
|
||||
);
|
||||
setIsAxoScriptLoaded( true );
|
||||
setIsAxoActive( true );
|
||||
const emailLookupHandler = createEmailLookupHandler(
|
||||
|
|
@ -127,52 +138,40 @@ const Axo = () => {
|
|||
] );
|
||||
|
||||
useEffect( () => {
|
||||
console.log( 'Setting up cleanup for Axo component' );
|
||||
return () => {
|
||||
console.log( 'Cleaning up Axo component' );
|
||||
setIsAxoActive( false );
|
||||
setIsGuest( true );
|
||||
|
||||
removeShippingChangeButton();
|
||||
removeCardChangeButton();
|
||||
removeWatermark();
|
||||
};
|
||||
}, [
|
||||
setIsAxoActive,
|
||||
setIsGuest,
|
||||
updateWooShippingAddress,
|
||||
updateWooBillingAddress,
|
||||
] );
|
||||
|
||||
useEffect( () => {
|
||||
return () => {
|
||||
setIsAxoActive( false );
|
||||
setIsGuest( true );
|
||||
|
||||
removeShippingChangeButton();
|
||||
removeCardChangeButton();
|
||||
removeWatermark();
|
||||
|
||||
if ( isEmailFunctionalitySetup() ) {
|
||||
console.log( 'Removing email functionality' );
|
||||
removeEmailFunctionality();
|
||||
}
|
||||
};
|
||||
}, [] );
|
||||
|
||||
const handlePaymentLoad = useCallback(
|
||||
( paymentComponent ) => {
|
||||
console.log( 'Payment component loaded', paymentComponent );
|
||||
},
|
||||
[] // Empty dependency array to avoid re-creating the function on every render
|
||||
);
|
||||
const handlePaymentLoad = useCallback( ( paymentComponent ) => {
|
||||
console.log( 'Payment component loaded', paymentComponent );
|
||||
}, [] );
|
||||
|
||||
const handleChange = ( selectedCard ) => {
|
||||
console.log( 'Card selection changed', selectedCard );
|
||||
setCard( selectedCard );
|
||||
};
|
||||
|
||||
console.log( 'Rendering Axo component', {
|
||||
fastlaneSdk,
|
||||
card,
|
||||
shippingAddress,
|
||||
} );
|
||||
|
||||
return fastlaneSdk ? (
|
||||
<Payment
|
||||
fastlaneSdk={ fastlaneSdk }
|
||||
card={ card }
|
||||
shippingAddress={ shippingAddress }
|
||||
onChange={ handleChange }
|
||||
onPaymentLoad={ handlePaymentLoad }
|
||||
onChangeButtonClick={ onChangeCardButtonClick }
|
||||
|
|
@ -194,11 +193,16 @@ registerPaymentMethod( {
|
|||
content: <Axo />,
|
||||
edit: <h1>This is Axo Blocks in the editor</h1>,
|
||||
ariaLabel: ppcpConfig.title,
|
||||
canMakePayment: () => true,
|
||||
canMakePayment: () => {
|
||||
console.log( 'Checking if payment can be made' );
|
||||
return true;
|
||||
},
|
||||
supports: {
|
||||
showSavedCards: true,
|
||||
features: ppcpConfig.supports,
|
||||
},
|
||||
} );
|
||||
|
||||
console.log( 'Axo module loaded' );
|
||||
|
||||
export default Axo;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
