woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-07 19:54:15 +08:00
Code Issues Projects Packages Wiki Activity Actions

Refactor the Change buttons and the Watermark

Browse source
This commit is contained in:
Daniel Dudzic 2024-09-06 11:33:01 +02:00
parent c2831c2ab0
commit 522b27aea0
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
7 changed files with 207 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,62 +1,96 @@
import ReactDOM from 'react-dom/client';
import { createElement, useEffect, createRoot } from '@wordpress/element';
import { FastlaneWatermark } from '../components/FastlaneWatermark';
export const setupWatermark = ( fastlaneSdk, shouldIncludeAdditionalInfo ) => {
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
);
} else {
emailInput.parentNode.appendChild( watermarkContainer );
}
const watermarkElement = document.createElement( 'div' );
watermarkContainer.appendChild( watermarkElement );
watermarkRoot = ReactDOM.createRoot( watermarkElement );
watermarkRoot.render(
<FastlaneWatermark
fastlaneSdk={ fastlaneSdk }
name="fastlane-watermark-email"
includeAdditionalInfo={ shouldIncludeAdditionalInfo }
/>
);
}
return { watermarkRoot, watermarkContainer, emailInput };
};
export const cleanupWatermark = ( {
watermarkRoot,
watermarkContainer,
emailInput,
const WatermarkManager = ( {
fastlaneSdk,
shouldIncludeAdditionalInfo,
onEmailSubmit,
} ) => {
if ( watermarkRoot && watermarkContainer ) {
watermarkRoot.unmount();
watermarkContainer.parentNode.removeChild( watermarkContainer );
console.log( 'Fastlane watermark removed' );
}
if ( emailInput ) {
emailInput.removeEventListener( 'keyup', async ( event ) => {
const email = event.target.value;
if ( email ) {
await onEmailSubmit( email );
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
);
} 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
);
}
if ( emailInput ) {
emailInput.removeEventListener( 'keyup', handleEmailInput );
}
console.log( 'Fastlane watermark removed' );
};
}
}, [ fastlaneSdk, shouldIncludeAdditionalInfo, onEmailSubmit ] );
return null;
};
export const setupWatermark = (
fastlaneSdk,
shouldIncludeAdditionalInfo,
onEmailSubmit
) => {
const container = document.createElement( 'div' );
document.body.appendChild( container );
createRoot( container ).render(
createElement( WatermarkManager, {
fastlaneSdk,
shouldIncludeAdditionalInfo,
onEmailSubmit,
} )
);
};
export const removeWatermark = () => {
const watermarkContainer = document.querySelector(
'.ppcp-axo-block-watermark-container'
);
if ( watermarkContainer && watermarkContainer.parentNode ) {
watermarkContainer.parentNode.removeChild( watermarkContainer );
}
};
export default WatermarkManager;