woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 10:55:00 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Add better state management utilizing Redux

Browse source
This commit is contained in:
Daniel Dudzic 2024-09-10 12:03:50 +02:00
parent db449b5d70
commit bccfe4c436
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
11 changed files with 432 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

1
modules/ppcp-axo-block/resources/js/helpers/cardChangeButtonManager.js
View file

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

57
modules/ppcp-axo-block/resources/js/helpers/emailHelpers.js Normal file
View file

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

23
modules/ppcp-axo-block/resources/js/helpers/shippingChangeButtonManager.js
View file

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

133
modules/ppcp-axo-block/resources/js/helpers/watermarkHelpers.js
View file

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