Merge pull request #2682 from woocommerce/PCP-3771-script-loader-update-apple-pay

Add a new namespaced script loader for ApplePay (3771)

modules/ppcp-applepay/resources/js/ApplepayManager.js

@@ -1,10 +1,9 @@
-/* global paypal */
-
 import buttonModuleWatcher from '../../../ppcp-button/resources/js/modules/ButtonModuleWatcher';
 import ApplePayButton from './ApplepayButton';
 
 class ApplePayManager {
-	constructor( buttonConfig, ppcpConfig ) {
+	constructor( namespace, buttonConfig, ppcpConfig ) {
+		this.namespace = namespace;
 		this.buttonConfig = buttonConfig;
 		this.ppcpConfig = ppcpConfig;
 		this.ApplePayConfig = null;
@@ -45,7 +44,10 @@ class ApplePayManager {
 	 * Gets Apple Pay configuration of the PayPal merchant.
 	 */
 	async config() {
-		this.ApplePayConfig = await paypal.Applepay().config();
+		this.ApplePayConfig = await window[ this.namespace ]
+			.Applepay()
+			.config();
+
 		return this.ApplePayConfig;
 	}
 }

modules/ppcp-applepay/resources/js/ApplepayManagerBlockEditor.js

@@ -1,23 +1,24 @@
-/* global paypal */
-
 import ApplePayButton from './ApplepayButton';
 
 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.ppcpConfig.context,

modules/ppcp-applepay/resources/js/boot-block.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from '@wordpress/element';
 import { registerExpressPaymentMethod } from '@woocommerce/blocks-registry';
-import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading';
+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,7 +12,7 @@ const ppcpConfig = ppcpData.scriptData;
 
 const buttonData = wc.wcSettings.getSetting( 'ppcp-applepay_data' );
 const buttonConfig = buttonData.scriptData;
-const dataNamespace = 'ppcpBlocksEditorPaypalApplepay';
+const namespace = 'ppcpBlocksPaypalApplepay';
 
 if ( typeof window.PayPalCommerceGateway === 'undefined' ) {
 	window.PayPalCommerceGateway = ppcpConfig;
@@ -27,7 +27,7 @@ const ApplePayComponent = ( props ) => {
 		const ManagerClass = props.isEditing
 			? ApplePayManagerBlockEditor
 			: ApplePayManager;
-		const manager = new ManagerClass( buttonConfig, ppcpConfig );
+		const manager = new ManagerClass( namespace, buttonConfig, ppcpConfig );
 		manager.init();
 	};
 
@@ -39,14 +39,14 @@ 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( () => {

modules/ppcp-applepay/resources/js/boot.js

@@ -1,13 +1,14 @@
 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, jQuery } ) {
+	const namespace = 'ppcpPaypalApplepay';
 	let manager;
 
 	const bootstrap = function () {
-		manager = new ApplePayManager( buttonConfig, ppcpConfig );
+		manager = new ApplePayManager( namespace, buttonConfig, ppcpConfig );
 		manager.init();
 	};
 
@@ -50,10 +51,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,

modules/ppcp-button/src/Endpoint/CartScriptParamsEndpoint.php

@@ -129,6 +129,14 @@ class CartScriptParamsEndpoint implements EndpointInterface {
 			WC()->cart->get_shipping_packages()
 		);
 
+		if ( ! count( $calculated_packages ) ) {
+			// Shipping disabled, or no shipping methods available.
+			$response['chosen_shipping_methods'] = array();
+			$response['shipping_packages']       = array();
+
+			return $response;
+		}
+
 		$shipping_packages = array();
 
 		foreach ( $calculated_packages[0]['rates'] as $rate ) {