Add mount point for attribution order meta box

Co-authored-by: asvinb <asvin.balloo@gmail.com> based on #3245 PoC

Author: AlejandroPerezMartin

js/src/meta-boxes/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+import './order-attribution';

js/src/meta-boxes/order-attribution/google-ads-promo.js

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import './google-ads-promo.scss';
+import useAdsCampaigns from '~/hooks/useAdsCampaigns';
+
+/**
+ * Google Ads Promo component.
+ *
+ * @return {JSX.Element|null} The Google Ads Promo component or null.
+ */
+const GoogleAdsPromo = () => {
+	const { data: campaigns, loading } = useAdsCampaigns();
+
+	if ( loading || ! Array.isArray( campaigns ) ) {
+		return null;
+	}
+
+	return <div className="gla-google-ads-promo"></div>;
+};
+
+export default GoogleAdsPromo;

js/src/meta-boxes/order-attribution/google-ads-promo.scss

@@ -0,0 +1,5 @@
+.gla-google-ads-promo {
+	/*
+	 * Styles go here.
+	 */
+}

js/src/meta-boxes/order-attribution/index.js

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { createRoot, lazy, Suspense } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { glaData } from '~/constants';
+
+const GoogleAdsPromo = lazy( () =>
+	import( /* webpackChunkName: "google-ads-promo" */ './google-ads-promo' )
+);
+
+document.addEventListener( 'DOMContentLoaded', () => {
+	// Only render the component if the order attribution source is Google
+	if ( glaData?.orderAttributionSource !== 'google' ) {
+		return;
+	}
+
+	const orderAttributionBox = document.querySelector(
+		'#woocommerce-order-source-data .inside'
+	);
+
+	if ( ! orderAttributionBox ) {
+		return;
+	}
+
+	// Create empty div to serve as mount point for React components
+	const glaElement = document.createElement( 'div' );
+
+	const root = createRoot( glaElement );
+
+	root.render(
+		<Suspense>
+			<GoogleAdsPromo />
+		</Suspense>
+	);
+
+	orderAttributionBox.prepend( glaElement );
+} );

src/Admin/Admin.php

@@ -199,6 +199,40 @@ protected function get_assets(): array {
 			$product_condition
 		) );
 
+		$wc_edit_order_page_condition = function () {
+			$screen = get_current_screen();
+
+			if ( ! $screen || 'woocommerce_page_wc-orders' !== $screen->id ) {
+				return false;
+			}
+
+			return isset( $_GET['action'] ) && 'edit' === $_GET['action']; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+		};
+
+		$assets[] = ( new AdminScriptWithBuiltDependenciesAsset(
+			'gla-wc-orders',
+			'js/build/meta-boxes',
+			"{$this->get_root_dir()}/js/build/meta-boxes.asset.php",
+			new BuiltScriptDependencyArray(
+				[
+					'dependencies' => [],
+					'version'      => (string) filemtime( "{$this->get_root_dir()}/js/build/meta-boxes.js" ),
+				]
+			),
+			$wc_edit_order_page_condition
+		) )->add_inline_script(
+			'glaData',
+			[
+				'slug'                   => $this->get_slug(),
+				'adsSetupComplete'       => $this->ads->is_setup_complete(),
+				'initialWpData'          => [
+					'version' => $this->get_version(),
+					'mcId'    => $this->options->get_merchant_id() ?: null,
+					'adsId'   => $this->options->get_ads_id() ?: null,
+				],
+			]
+		);
+
 		return $assets;
 	}
 

webpack.config.js

@@ -96,6 +96,7 @@ const webpackConfig = {
 			'index.js'
 		),
 		blocks: path.join( __dirname, 'js/src/blocks/index.js' ),
+		'meta-boxes': path.join( __dirname, 'js/src/meta-boxes/index.js' ),
 		'gtag-events': path.resolve(
 			process.cwd(),
 			'js/src/gtag-events',