Refactor script loading to allow for adding custom namespaces

modules/ppcp-googlepay/resources/js/GooglepayManagerBlockEditor.js

@@ -0,0 +1,59 @@
+import GooglepayButton from './GooglepayButton';
+import ContextHandlerFactory from './Context/ContextHandlerFactory';
+
+class GooglepayManagerBlockEditor {
+	constructor( buttonConfig, ppcpConfig ) {
+		this.buttonConfig = buttonConfig;
+		this.ppcpConfig = ppcpConfig;
+		this.googlePayConfig = null;
+		this.transactionInfo = null;
+		this.contextHandler = null;
+	}
+
+	init() {
+		( async () => {
+			await this.config();
+		} )();
+	}
+
+	async config() {
+		try {
+			// Gets GooglePay configuration of the PayPal merchant.
+			this.googlePayConfig = await ppcpBlocksEditorPaypalGooglepay.Googlepay().config();
+
+			// Fetch transaction information.
+			this.transactionInfo = await this.fetchTransactionInfo();
+
+			const button = new GooglepayButton(
+				this.ppcpConfig.context,
+				null,
+				this.buttonConfig,
+				this.ppcpConfig,
+				this.contextHandler
+			);
+
+			button.init( this.googlePayConfig, this.transactionInfo );
+		} catch ( error ) {
+			console.error( 'Failed to initialize Google Pay:', error );
+		}
+	}
+
+	async fetchTransactionInfo() {
+		try {
+			if ( ! this.contextHandler ) {
+				this.contextHandler = ContextHandlerFactory.create(
+					this.ppcpConfig.context,
+					this.buttonConfig,
+					this.ppcpConfig,
+					null
+				);
+			}
+			return null;
+		} catch ( error ) {
+			console.error( 'Error fetching transaction info:', error );
+			throw error;
+		}
+	}
+}
+
+export default GooglepayManagerBlockEditor;

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

@@ -6,24 +6,29 @@ import {
 import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading';
 import GooglepayManager from './GooglepayManager';
 import { loadCustomScript } from '@paypal/paypal-js';
+import GooglepayManagerBlockEditor from './GooglepayManagerBlockEditor';
 
 const ppcpData = wc.wcSettings.getSetting( 'ppcp-gateway_data' );
 const ppcpConfig = ppcpData.scriptData;
 
 const buttonData = wc.wcSettings.getSetting( 'ppcp-googlepay_data' );
 const buttonConfig = buttonData.scriptData;
+const dataNamespace = 'ppcpBlocksEditorPaypalGooglepay';
 
 if ( typeof window.PayPalCommerceGateway === 'undefined' ) {
 	window.PayPalCommerceGateway = ppcpConfig;
 }
 
-const GooglePayComponent = () => {
+const GooglePayComponent = ( props ) => {
 	const [ bootstrapped, setBootstrapped ] = useState( false );
 	const [ paypalLoaded, setPaypalLoaded ] = useState( false );
 	const [ googlePayLoaded, setGooglePayLoaded ] = useState( false );
 
 	const bootstrap = function () {
-		const manager = new GooglepayManager( buttonConfig, ppcpConfig );
+		const ManagerClass = props.isEditing
+			? GooglepayManagerBlockEditor
+			: GooglepayManager;
+		const manager = new ManagerClass( buttonConfig, ppcpConfig );
 		manager.init();
 	};
 
@@ -33,6 +38,12 @@ const GooglePayComponent = () => {
 			setGooglePayLoaded( true );
 		} );
 
+		ppcpConfig.url_params.components += ',googlepay';
+
+		if ( props.isEditing ) {
+			ppcpConfig.data_namespace = dataNamespace;
+		}
+
 		// Load PayPal
 		loadPaypalScript( ppcpConfig, () => {
 			setPaypalLoaded( true );

modules/ppcp-googlepay/src/Assets/Button.php

@@ -409,7 +409,7 @@ class Button implements ButtonInterface {
 	 */
 	public function script_data(): array {
 		$shipping = array(
-			'enabled' => $this->settings->has( 'googlepay_button_shipping_enabled' )
+			'enabled'    => $this->settings->has( 'googlepay_button_shipping_enabled' )
 				? boolval( $this->settings->get( 'googlepay_button_shipping_enabled' ) )
 				: false,
 			'configured' => wc_shipping_enabled() && wc_get_shipping_method_count( false, true ) > 0,