From 869a47f3cd508e57242f68a86255e3fb10f141b3 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Mon, 7 Oct 2024 15:30:27 +0200 Subject: [PATCH] Migrate Google Pay to the new script loader --- composer.lock | 2 +- .../resources/js/GooglepayManager.js | 7 ++- .../js/GooglepayManagerBlockEditor.js | 7 ++- .../ppcp-googlepay/resources/js/boot-block.js | 49 +++++++++++-------- modules/ppcp-googlepay/resources/js/boot.js | 30 ++++++++---- 5 files changed, 59 insertions(+), 36 deletions(-) diff --git a/composer.lock b/composer.lock index a18b56927..c88e1fb48 100644 --- a/composer.lock +++ b/composer.lock @@ -5554,5 +5554,5 @@ "platform-overrides": { "php": "7.4" }, - "plugin-api-version": "2.6.0" + "plugin-api-version": "2.3.0" } diff --git a/modules/ppcp-googlepay/resources/js/GooglepayManager.js b/modules/ppcp-googlepay/resources/js/GooglepayManager.js index aaf85a6b0..f9520d23a 100644 --- a/modules/ppcp-googlepay/resources/js/GooglepayManager.js +++ b/modules/ppcp-googlepay/resources/js/GooglepayManager.js @@ -3,7 +3,8 @@ import GooglepayButton from './GooglepayButton'; import ContextHandlerFactory from './Context/ContextHandlerFactory'; class GooglepayManager { - constructor( buttonConfig, ppcpConfig ) { + constructor( namespace, buttonConfig, ppcpConfig ) { + this.namespace = namespace; this.buttonConfig = buttonConfig; this.ppcpConfig = ppcpConfig; this.googlePayConfig = null; @@ -52,7 +53,9 @@ class GooglepayManager { try { if ( ! this.googlePayConfig ) { // Gets GooglePay configuration of the PayPal merchant. - this.googlePayConfig = await paypal.Googlepay().config(); + this.googlePayConfig = await window[ this.namespace ] + .Googlepay() + .config(); } if ( ! this.transactionInfo ) { diff --git a/modules/ppcp-googlepay/resources/js/GooglepayManagerBlockEditor.js b/modules/ppcp-googlepay/resources/js/GooglepayManagerBlockEditor.js index 0fbbfbd72..2bf5a55c3 100644 --- a/modules/ppcp-googlepay/resources/js/GooglepayManagerBlockEditor.js +++ b/modules/ppcp-googlepay/resources/js/GooglepayManagerBlockEditor.js @@ -2,7 +2,8 @@ import GooglepayButton from './GooglepayButton'; import ContextHandlerFactory from './Context/ContextHandlerFactory'; class GooglepayManagerBlockEditor { - constructor( buttonConfig, ppcpConfig ) { + constructor( namespace, buttonConfig, ppcpConfig ) { + this.namespace = namespace; this.buttonConfig = buttonConfig; this.ppcpConfig = ppcpConfig; this.googlePayConfig = null; @@ -19,7 +20,9 @@ class GooglepayManagerBlockEditor { async config() { try { // Gets GooglePay configuration of the PayPal merchant. - this.googlePayConfig = await ppcpBlocksEditorPaypalGooglepay.Googlepay().config(); + this.googlePayConfig = await window[ this.namespace ] + .Googlepay() + .config(); // Fetch transaction information. this.transactionInfo = await this.fetchTransactionInfo(); diff --git a/modules/ppcp-googlepay/resources/js/boot-block.js b/modules/ppcp-googlepay/resources/js/boot-block.js index 3d465ac93..acb5a310d 100644 --- a/modules/ppcp-googlepay/resources/js/boot-block.js +++ b/modules/ppcp-googlepay/resources/js/boot-block.js @@ -4,7 +4,7 @@ import { registerPaymentMethod, } from '@woocommerce/blocks-registry'; import { __ } from '@wordpress/i18n'; -import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading'; +import UnifiedScriptLoader from '../../../ppcp-button/resources/js/modules/Helper/UnifiedScriptLoader'; import GooglepayManager from './GooglepayManager'; import { loadCustomScript } from '@paypal/paypal-js'; import GooglepayManagerBlockEditor from './GooglepayManagerBlockEditor'; @@ -14,7 +14,7 @@ const ppcpConfig = ppcpData.scriptData; const buttonData = wc.wcSettings.getSetting( 'ppcp-googlepay_data' ); const buttonConfig = buttonData.scriptData; -const dataNamespace = 'ppcpBlocksEditorPaypalGooglepay'; +const namespace = 'ppcpBlocksPaypalGooglepay'; if ( typeof window.PayPalCommerceGateway === 'undefined' ) { window.PayPalCommerceGateway = ppcpConfig; @@ -24,14 +24,7 @@ const GooglePayComponent = ( props ) => { const [ bootstrapped, setBootstrapped ] = useState( false ); const [ paypalLoaded, setPaypalLoaded ] = useState( false ); const [ googlePayLoaded, setGooglePayLoaded ] = useState( false ); - - const bootstrap = function () { - const ManagerClass = props.isEditing - ? GooglepayManagerBlockEditor - : GooglepayManager; - const manager = new ManagerClass( buttonConfig, ppcpConfig ); - manager.init(); - }; + const [ manager, setManager ] = useState( null ); useEffect( () => { // Load GooglePay SDK @@ -41,22 +34,36 @@ const GooglePayComponent = ( props ) => { ppcpConfig.url_params.components += ',googlepay'; - if ( props.isEditing ) { - ppcpConfig.data_namespace = dataNamespace; - } - // Load PayPal - loadPaypalScript( ppcpConfig, () => { - setPaypalLoaded( true ); - } ); + UnifiedScriptLoader.loadPayPalScript( namespace, ppcpConfig ) + .then( () => { + setPaypalLoaded( true ); + } ) + .catch( ( error ) => { + console.error( 'Failed to load PayPal script: ', error ); + } ); }, [] ); useEffect( () => { - if ( ! bootstrapped && paypalLoaded && googlePayLoaded ) { - setBootstrapped( true ); - bootstrap(); + if ( paypalLoaded && googlePayLoaded && ! manager ) { + const ManagerClass = props.isEditing + ? GooglepayManagerBlockEditor + : GooglepayManager; + const newManager = new ManagerClass( + namespace, + buttonConfig, + ppcpConfig + ); + setManager( newManager ); } - }, [ paypalLoaded, googlePayLoaded ] ); + }, [ paypalLoaded, googlePayLoaded, props.isEditing ] ); + + useEffect( () => { + if ( manager && ! bootstrapped ) { + setBootstrapped( true ); + manager.init(); + } + }, [ manager, bootstrapped ] ); return (
{ - paypalLoaded = true; - tryToBoot(); - } ); + UnifiedScriptLoader.loadPayPalScript( namespace, ppcpConfig ) + .then( () => { + paypalLoaded = true; + tryToBoot(); + } ) + .catch( ( error ) => { + console.error( 'Failed to load PayPal script: ', error ); + } ); } ); } )( { buttonConfig: window.wc_ppcp_googlepay,