From 0d72641ded1c02ff10e2ed145fbbb77b65a92e79 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 8 Oct 2024 14:25:43 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Apply=20new=20namespaced=20script?= =?UTF-8?q?=20loading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/js/ApplepayManager.js | 15 +++--- .../js/ApplepayManagerBlockEditor.js | 41 +++++++++------ .../ppcp-applepay/resources/js/boot-block.js | 52 +++++++++++-------- modules/ppcp-applepay/resources/js/boot.js | 22 +++++--- 4 files changed, 79 insertions(+), 51 deletions(-) diff --git a/modules/ppcp-applepay/resources/js/ApplepayManager.js b/modules/ppcp-applepay/resources/js/ApplepayManager.js index 270ba3e7a..5dcb0cf7b 100644 --- a/modules/ppcp-applepay/resources/js/ApplepayManager.js +++ b/modules/ppcp-applepay/resources/js/ApplepayManager.js @@ -1,11 +1,10 @@ -/* global paypal */ - import buttonModuleWatcher from '../../../ppcp-button/resources/js/modules/ButtonModuleWatcher'; import ApplePayButton from './ApplepayButton'; import ContextHandlerFactory from './Context/ContextHandlerFactory'; class ApplePayManager { - constructor( buttonConfig, ppcpConfig ) { + constructor( namespace, buttonConfig, ppcpConfig ) { + this.namespace = namespace; this.buttonConfig = buttonConfig; this.ppcpConfig = ppcpConfig; this.ApplePayConfig = null; @@ -36,16 +35,18 @@ class ApplePayManager { // Ensure ApplePayConfig is loaded before proceeding. await this.init(); - button.configure( this.ApplePayConfig ); + button.configure( this.applePayConfig ); button.init(); } async init() { try { - if ( ! this.ApplePayConfig ) { - this.ApplePayConfig = await paypal.Applepay().config(); + if ( ! this.applePayConfig ) { + this.applePayConfig = await window[ this.namespace ] + .Applepay() + .config(); - if ( ! this.ApplePayConfig ) { + if ( ! this.applePayConfig ) { console.error( 'No ApplePayConfig received during init' ); } } diff --git a/modules/ppcp-applepay/resources/js/ApplepayManagerBlockEditor.js b/modules/ppcp-applepay/resources/js/ApplepayManagerBlockEditor.js index 7276abbb7..a8fa9d7c9 100644 --- a/modules/ppcp-applepay/resources/js/ApplepayManagerBlockEditor.js +++ b/modules/ppcp-applepay/resources/js/ApplepayManagerBlockEditor.js @@ -1,32 +1,43 @@ -/* global paypal */ - import ApplePayButton from './ApplepayButton'; +import ContextHandlerFactory from './Context/ContextHandlerFactory'; class ApplePayManagerBlockEditor { - constructor( buttonConfig, ppcpConfig ) { + constructor( namespace, buttonConfig, ppcpConfig ) { + this.namespace = namespace; this.buttonConfig = buttonConfig; this.ppcpConfig = ppcpConfig; - this.applePayConfig = null; + + /* + * On the front-end, the init method is called when a new button context was detected + * via `buttonModuleWatcher`. In the block editor, we do not need to wait for the + * context, but can initialize the button in the next event loop. + */ + setTimeout( () => this.init() ); } - init() { - ( async () => { - await this.config(); - } )(); - } - - async config() { + async init() { try { - this.applePayConfig = await ppcpBlocksEditorPaypalApplepay.Applepay().config(); + this.applePayConfig = await window[ this.namespace ] + .Applepay() + .config(); - const button = new ApplePayButton( + this.contextHandler = ContextHandlerFactory.create( + this.ppcpConfig.context, + this.buttonConfig, + this.ppcpConfig, + null + ); + + const button = ApplePayButton.createButton( this.ppcpConfig.context, null, this.buttonConfig, - this.ppcpConfig + this.ppcpConfig, + this.contextHandler ); - button.init( this.applePayConfig ); + button.configure( this.applePayConfig ); + button.init(); } catch ( error ) { console.error( 'Failed to initialize Apple Pay:', error ); } diff --git a/modules/ppcp-applepay/resources/js/boot-block.js b/modules/ppcp-applepay/resources/js/boot-block.js index ea15477b0..72e3a84db 100644 --- a/modules/ppcp-applepay/resources/js/boot-block.js +++ b/modules/ppcp-applepay/resources/js/boot-block.js @@ -1,6 +1,7 @@ -import { useEffect, useState } from '@wordpress/element'; +import { useEffect, useRef, useState } from '@wordpress/element'; import { registerExpressPaymentMethod } from '@woocommerce/blocks-registry'; -import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading'; +import { __ } from '@wordpress/i18n'; +import { loadPayPalScript } from '../../../ppcp-button/resources/js/modules/Helper/PayPalScriptLoading'; import { cartHasSubscriptionProducts } from '../../../ppcp-blocks/resources/js/Helper/Subscription'; import { loadCustomScript } from '@paypal/paypal-js'; import CheckoutHandler from './Context/CheckoutHandler'; @@ -12,24 +13,16 @@ const ppcpConfig = ppcpData.scriptData; const buttonData = wc.wcSettings.getSetting( 'ppcp-applepay_data' ); const buttonConfig = buttonData.scriptData; -const dataNamespace = 'ppcpBlocksEditorPaypalApplepay'; +const namespace = 'ppcpBlocksPaypalAppglepay'; if ( typeof window.PayPalCommerceGateway === 'undefined' ) { window.PayPalCommerceGateway = ppcpConfig; } const ApplePayComponent = ( props ) => { - const [ bootstrapped, setBootstrapped ] = useState( false ); const [ paypalLoaded, setPaypalLoaded ] = useState( false ); const [ applePayLoaded, setApplePayLoaded ] = useState( false ); - - const bootstrap = function () { - const ManagerClass = props.isEditing - ? ApplePayManagerBlockEditor - : ApplePayManager; - const manager = new ManagerClass( buttonConfig, ppcpConfig ); - manager.init(); - }; + const wrapperRef = useRef( null ); useEffect( () => { // Load ApplePay SDK @@ -39,25 +32,33 @@ const ApplePayComponent = ( props ) => { ppcpConfig.url_params.components += ',applepay'; - if ( props.isEditing ) { - ppcpConfig.data_namespace = dataNamespace; - } - // Load PayPal - loadPaypalScript( ppcpConfig, () => { - setPaypalLoaded( true ); - } ); + loadPayPalScript( namespace, ppcpConfig ) + .then( () => { + setPaypalLoaded( true ); + } ) + .catch( ( error ) => { + console.error( 'Failed to load PayPal script: ', error ); + } ); }, [] ); useEffect( () => { - if ( ! bootstrapped && paypalLoaded && applePayLoaded ) { - setBootstrapped( true ); - bootstrap(); + if ( ! paypalLoaded || ! applePayLoaded ) { + return; } - }, [ paypalLoaded, applePayLoaded ] ); + + const ManagerClass = props.isEditing + ? ApplePayManagerBlockEditor + : ApplePayManager; + + buttonConfig.reactWrapper = wrapperRef.current; + + new ManagerClass( namespace, buttonConfig, ppcpConfig ); + }, [ paypalLoaded, applePayLoaded, props.isEditing ] ); return (
@@ -75,6 +76,11 @@ if ( registerExpressPaymentMethod( { name: buttonData.id, + title: `PayPal - ${ buttonData.title }`, + description: __( + 'Eligible users will see the PayPal button.', + 'woocommerce-paypal-payments' + ), label:
, content: , edit: , diff --git a/modules/ppcp-applepay/resources/js/boot.js b/modules/ppcp-applepay/resources/js/boot.js index c76635378..95b4381e4 100644 --- a/modules/ppcp-applepay/resources/js/boot.js +++ b/modules/ppcp-applepay/resources/js/boot.js @@ -1,15 +1,21 @@ import { loadCustomScript } from '@paypal/paypal-js'; -import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading'; +import { loadPayPalScript } from '../../../ppcp-button/resources/js/modules/Helper/PayPalScriptLoading'; import ApplePayManager from './ApplepayManager'; import { setupButtonEvents } from '../../../ppcp-button/resources/js/modules/Helper/ButtonRefreshHelper'; ( function ( { buttonConfig, ppcpConfig } ) { + const namespace = 'ppcpPaypalApplepay'; + function bootstrapPayButton() { if ( ! buttonConfig || ! ppcpConfig ) { return; } - const manager = new ApplePayManager( buttonConfig, ppcpConfig ); + const manager = new ApplePayManager( + namespace, + buttonConfig, + ppcpConfig + ); setupButtonEvents( function () { manager.reinit(); @@ -61,10 +67,14 @@ import { setupButtonEvents } from '../../../ppcp-button/resources/js/modules/Hel } ); // Load PayPal - loadPaypalScript( ppcpConfig, () => { - paypalLoaded = true; - tryToBoot(); - } ); + loadPayPalScript( namespace, ppcpConfig ) + .then( () => { + paypalLoaded = true; + tryToBoot(); + } ) + .catch( ( error ) => { + console.error( 'Failed to load PayPal script: ', error ); + } ); } ); } )( { buttonConfig: window.wc_ppcp_applepay,