Feature: In-Product Placements

js/src/meta-boxes/channel-visibility/channel-visibility-settings.js

@@ -0,0 +1,129 @@
+/**
+ * External dependencies
+ */
+import {
+	Flex,
+	FlexBlock,
+	FlexItem,
+	Notice,
+	SelectControl,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { glaData } from '~/constants';
+import googleLogoURL from '~/images/logo/google-g-logo.svg';
+
+const {
+	channelVisibility: {
+		field_id: fieldId,
+		channel_visibility: channelVisibility,
+		product_is_visible: productIsVisible,
+		issues = [],
+		options = [],
+	} = {},
+} = glaData || {};
+
+/**
+ * Channel Visibility Settings component.
+ *
+ * The component will allow the user to select the channel visibility for the product and
+ * will be displayed when the ads setup is complete.
+ *
+ * @return {JSX.Element} The Channel Visibility Settings component
+ */
+const ChannelVisibilitySettings = () => {
+	const [ channelVisibilityValue, setChannelVisibilityValue ] = useState(
+		productIsVisible ? channelVisibility : 'dont-sync-and-show'
+	);
+	let productIssues = issues;
+
+	// Adds warning message if the product is not visible
+	if ( ! productIsVisible ) {
+		productIssues = [
+			...issues,
+			__(
+				'This product cannot be shown on any channel because it is hidden from your store catalog.',
+				'google-listings-and-ads'
+			),
+		];
+	}
+
+	/**
+	 * Parse the options object into an array of options.
+	 * Options is an object with the following structure:
+	 * {
+	 *   'sync-and-show': 'Sync and show',
+	 *   'dont-sync-and-show': "Don't sync and show",
+	 * }
+	 *
+	 * @return {Array<{label: string, value: string}>}
+	 */
+	const selectOptions = Object.entries( options ).map(
+		( [ value, label ] ) => ( { label, value } )
+	);
+
+	return (
+		<Flex direction="column" gap={ 4 } className="gla-channel-visibility">
+			<FlexBlock>
+				<Flex gap={ 2 } align="center" justify="flex-start">
+					<FlexItem>
+						<Flex gap={ 2 } align="center">
+							<FlexItem>
+								<img
+									className="gla-channel-visibility__logo"
+									src={ googleLogoURL }
+									alt={ __(
+										'Google Logo',
+										'google-listings-and-ads'
+									) }
+									width={ 16 }
+									height={ 16 }
+								/>
+							</FlexItem>
+							<FlexItem>
+								{ __( 'Google', 'google-listings-and-ads' ) }
+							</FlexItem>
+						</Flex>
+					</FlexItem>
+					{ selectOptions.length > 0 && (
+						<FlexBlock>
+							<SelectControl
+								name={ fieldId }
+								options={ selectOptions }
+								value={ channelVisibilityValue }
+								onChange={ ( value ) =>
+									setChannelVisibilityValue( value )
+								}
+								disabled={ ! productIsVisible }
+								__nextHasNoMarginBottom
+							/>
+						</FlexBlock>
+					) }
+				</Flex>
+			</FlexBlock>
+
+			{ productIssues.length > 0 && (
+				<FlexBlock>
+					<Notice status="warning" isDismissible={ false }>
+						<p>
+							<strong>
+								{ __( 'Issues', 'google-listings-and-ads' ) }
+							</strong>
+						</p>
+						<ul>
+							{ productIssues.map( ( issue ) => (
+								<li key={ issue }>{ issue }</li>
+							) ) }
+						</ul>
+					</Notice>
+				</FlexBlock>
+			) }
+		</Flex>
+	);
+};
+
+export default ChannelVisibilitySettings;

js/src/meta-boxes/channel-visibility/constants.js

@@ -0,0 +1,2 @@
+export const CHANNEL_VISIBILITY_CONTEXT = 'channel-visibility-meta-box';
+export const CHANNEL_VISIBILITY_PROMO_KEY = 'gla_google_ads_promo_dismissed';

js/src/meta-boxes/channel-visibility/get-started-cta.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AppButton from '~/components/app-button';
+import { getGetStartedUrl } from '~/utils/urls';
+import { CHANNEL_VISIBILITY_CONTEXT } from './constants';
+
+/**
+ * Google Ads Promo "Get started" button is clicked.
+ *
+ * @event gla_google_ads_promo_get_started_click
+ * @property {string} context Context of the Google Ads Promo.
+ * @property {string} href URL of the "Get started" button.
+ */
+
+/**
+ * Get Started CTA component.
+ *
+ * @fires gla_google_ads_promo_get_started_click with `{ context: channel-visibility-meta-box, href: 'admin.php?page=wc-admin&path=%2Fgoogle%2Fstart' }`.
+ *
+ * @return {JSX.Element} The Get Started CTA component.
+ */
+const GetStartedCTA = () => {
+	const getStartedUrl = getGetStartedUrl();
+
+	return (
+		<AppButton
+			href={ getStartedUrl }
+			eventName="gla_google_ads_promo_get_started_click"
+			eventProps={ {
+				href: getStartedUrl,
+				context: CHANNEL_VISIBILITY_CONTEXT,
+			} }
+			isSecondary
+		>
+			{ __( 'Get started', 'google-listings-and-ads' ) }
+		</AppButton>
+	);
+};
+
+export default GetStartedCTA;

js/src/meta-boxes/channel-visibility/google-ads-promo.js

@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import { Flex, FlexBlock, FlexItem } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { PREFERENCES_STORE_NAMESPACE, glaData } from '~/constants';
+import usePreference from '~/hooks/usePreference';
+import googleLogoURL from '~/images/logo/google-g-logo.svg';
+import { recordGlaEvent } from '~/utils/tracks';
+import {
+	CHANNEL_VISIBILITY_PROMO_KEY,
+	CHANNEL_VISIBILITY_CONTEXT,
+} from './constants';
+import GetStartedCTA from './get-started-cta';
+import PromoCTA from './promo-cta';
+import ChannelVisibilitySettings from './channel-visibility-settings';
+import './google-ads-promo.scss';
+
+const { adsSetupComplete } = glaData;
+
+/**
+ * Google Ads Promo banner is shown.
+ *
+ * @event gla_google_ads_promo_shown
+ * @property {string} context Context of the Google Ads Promo.
+ */
+
+/**
+ * Google Ads Promo component.
+ *
+ * @fires gla_google_ads_promo_shown with `{ context: channel-visibility-meta-box }`.
+ *
+ * @return {JSX.Element} The Google Ads Promo component
+ */
+const GoogleAdsPromo = () => {
+	const { set } = useDispatch( preferencesStore );
+	const isDismissed = usePreference( CHANNEL_VISIBILITY_PROMO_KEY );
+	const hasTrackedRef = useRef( false );
+
+	useEffect( () => {
+		if ( ! hasTrackedRef.current ) {
+			recordGlaEvent( 'gla_google_ads_promo_shown', {
+				context: CHANNEL_VISIBILITY_CONTEXT,
+			} );
+			hasTrackedRef.current = true;
+		}
+	}, [] );
+
+	const handleDismiss = () => {
+		set( PREFERENCES_STORE_NAMESPACE, CHANNEL_VISIBILITY_PROMO_KEY, true );
+	};
+
+	if ( adsSetupComplete ) {
+		return <ChannelVisibilitySettings />;
+	}
+
+	return (
+		<Flex className="gla-channel-visibility" direction="column" gap={ 4 }>
+			<FlexBlock>
+				<Flex gap={ 2 } align="center" justify="flex-start">
+					<FlexItem>
+						<img
+							className="gla-channel-visibility__logo"
+							src={ googleLogoURL }
+							alt={ __(
+								'Google Logo',
+								'google-listings-and-ads'
+							) }
+							width={ 16 }
+							height={ 16 }
+						/>
+					</FlexItem>
+					<FlexItem>
+						{ __( 'Google', 'google-listings-and-ads' ) }
+					</FlexItem>
+					{ isDismissed && (
+						<FlexItem className="gla-channel-visibility__get-started--is-dismissed">
+							<GetStartedCTA />
+						</FlexItem>
+					) }
+				</Flex>
+			</FlexBlock>
+
+			{ ! isDismissed && (
+				<Flex
+					className="gla-channel-visibility__content"
+					direction="column"
+					gap={ 3 }
+				>
+					<FlexBlock>
+						<h3 className="gla-channel-visibility__title">
+							{ __(
+								'Get your products on Google',
+								'google-listings-and-ads'
+							) }
+						</h3>
+					</FlexBlock>
+					<FlexBlock>
+						<p>
+							{ __(
+								'Sync your products to reach customers when they’re searching for products like yours across Google',
+								'google-listings-and-ads'
+							) }
+						</p>
+					</FlexBlock>
+
+					<FlexBlock>
+						<PromoCTA onDismiss={ handleDismiss } />
+					</FlexBlock>
+				</Flex>
+			) }
+		</Flex>
+	);
+};
+
+export default GoogleAdsPromo;

js/src/meta-boxes/channel-visibility/google-ads-promo.scss

@@ -0,0 +1,31 @@
+.gla-channel-visibility {
+	padding: $grid-unit-05;
+}
+
+.gla-channel-visibility__logo {
+	display: block;
+}
+
+.gla-channel-visibility__title {
+	font-size: $gla-font-base;
+	font-weight: 600;
+	line-height: $gla-line-height-medium;
+	letter-spacing: 0;
+	margin: 0;
+}
+
+
+.gla-channel-visibility__content {
+	background-color: rgb(56 88 233 / 0.03);
+	border: 1px solid rgb(56 88 233 / 0.16);
+	border-radius: $grid-unit-05;
+	padding: $grid-unit-20;
+
+	p:last-child {
+		margin: 0;
+	}
+}
+
+.gla-channel-visibility__get-started--is-dismissed {
+	margin-left: auto;
+}

js/src/meta-boxes/channel-visibility/index.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { createRoot, lazy, Suspense } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { glaData } from '~/constants';
+
+const GoogleAdsPromo = lazy( () =>
+	import(
+		/* webpackChunkName: "channel-visibility-google-ads-promo" */ './google-ads-promo'
+	)
+);
+
+document.addEventListener( 'DOMContentLoaded', () => {
+	// Only render the component if the channel visibility is set
+	if ( glaData?.channelVisibility?.length === 0 ) {
+		return;
+	}
+
+	const channelVisibilityBox = document.querySelector(
+		'#gla-channel-visibility-box'
+	);
+
+	if ( ! channelVisibilityBox ) {
+		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>
+	);
+
+	channelVisibilityBox.prepend( glaElement );
+} );