Add introduction banner card into multichannel marketing page

plugins/woocommerce-admin/client/marketing/components/index.js

@@ -8,3 +8,4 @@ export { PluginCardBody, SmartPluginCardBody } from './PluginCardBody';
 export { CardHeaderTitle } from './CardHeaderTitle';
 export { CardHeaderDescription } from './CardHeaderDescription';
 export { CenteredSpinner } from './CenteredSpinner';
+export { CreateNewCampaignModal } from './CreateNewCampaignModal';

plugins/woocommerce-admin/client/marketing/hooks/index.ts

@@ -1,4 +1,6 @@
+export { useIntroductionBanner } from './useIntroductionBanner';
 export { useInstalledPlugins } from './useInstalledPlugins';
 export { useRegisteredChannels } from './useRegisteredChannels';
 export { useRecommendedChannels } from './useRecommendedChannels';
 export { useCampaignTypes } from './useCampaignTypes';
+export { useCampaigns } from './useCampaigns';

plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/useCampaigns.ts → plugins/woocommerce-admin/client/marketing/hooks/useCampaigns.ts

@@ -27,13 +27,10 @@ type UseCampaignsType = {
 /**
  * Custom hook to get campaigns.
  *
- * @param  page    Page number. First page is `1`.
- * @param  perPage Page size, i.e. number of records in one page.
+ * @param  page    Page number. Default is `1`.
+ * @param  perPage Page size, i.e. number of records in one page. Default is `5`.
  */
-export const useCampaigns = (
-	page: number,
-	perPage: number
-): UseCampaignsType => {
+export const useCampaigns = ( page = 1, perPage = 5 ): UseCampaignsType => {
 	const { data: channels } = useRegisteredChannels();
 
 	return useSelect(

plugins/woocommerce-admin/client/marketing/hooks/useIntroductionBanner.ts

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { OPTIONS_STORE_NAME } from '@woocommerce/data';
+import { recordEvent } from '@woocommerce/tracks';
+
+type UseIntroductionBanner = {
+	loading: boolean;
+	isIntroductionBannerDismissed: boolean;
+	dismissIntroductionBanner: () => void;
+};
+
+const OPTION_NAME_BANNER_DISMISSED =
+	'woocommerce_marketing_overview_multichannel_banner_dismissed';
+const OPTION_VALUE_YES = 'yes';
+
+export const useIntroductionBanner = (): UseIntroductionBanner => {
+	const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
+
+	const dismissIntroductionBanner = () => {
+		updateOptions( {
+			[ OPTION_NAME_BANNER_DISMISSED ]: OPTION_VALUE_YES,
+		} );
+		recordEvent( 'marketing_multichannel_banner_dismissed', {} );
+	};
+
+	const { loading, data } = useSelect( ( select ) => {
+		const { getOption, hasFinishedResolution } =
+			select( OPTIONS_STORE_NAME );
+
+		return {
+			loading: ! hasFinishedResolution( 'getOption', [
+				OPTION_NAME_BANNER_DISMISSED,
+			] ),
+			data: getOption( OPTION_NAME_BANNER_DISMISSED ),
+		};
+	}, [] );
+
+	return {
+		loading,
+		isIntroductionBannerDismissed: data === OPTION_VALUE_YES,
+		dismissIntroductionBanner,
+	};
+};

plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.test.tsx

@@ -7,21 +7,23 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import { useCampaigns } from './useCampaigns';
-import { useCampaignTypes } from '~/marketing/hooks';
+import { useCampaignTypes, useCampaigns } from '~/marketing/hooks';
 import { Campaigns } from './Campaigns';
 
-jest.mock( './useCampaigns', () => ( {
-	useCampaigns: jest.fn(),
-} ) );
-
 jest.mock( '~/marketing/hooks', () => ( {
+	useCampaigns: jest.fn(),
 	useCampaignTypes: jest.fn(),
 } ) );
 
-jest.mock( './CreateNewCampaignModal', () => ( {
-	CreateNewCampaignModal: () => <div>Mocked CreateNewCampaignModal</div>,
-} ) );
+jest.mock( '~/marketing/components', () => {
+	const originalModule = jest.requireActual( '~/marketing/components' );
+
+	return {
+		__esModule: true,
+		...originalModule,
+		CreateNewCampaignModal: () => <div>Mocked CreateNewCampaignModal</div>,
+	};
+} );
 
 /**
  * Create a test campaign data object.

plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx

@@ -24,9 +24,11 @@ import {
 /**
  * Internal dependencies
  */
-import { CardHeaderTitle } from '~/marketing/components';
-import { useCampaigns } from './useCampaigns';
-import { CreateNewCampaignModal } from './CreateNewCampaignModal';
+import {
+	CardHeaderTitle,
+	CreateNewCampaignModal,
+} from '~/marketing/components';
+import { useCampaigns } from '~/marketing/hooks';
 import './Campaigns.scss';
 
 const tableCaption = __( 'Campaigns', 'woocommerce' );

plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx

@@ -1,7 +1,13 @@
 /**
  * External dependencies
  */
-import { Fragment, useState } from '@wordpress/element';
+import {
+	Fragment,
+	useState,
+	forwardRef,
+	useImperativeHandle,
+	useRef,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	Card,
@@ -32,72 +38,97 @@ type ChannelsProps = {
 	onInstalledAndActivated?: () => void;
 };
 
-export const Channels: React.FC< ChannelsProps > = ( {
-	registeredChannels,
-	recommendedChannels,
-	onInstalledAndActivated,
-} ) => {
-	const hasRegisteredChannels = registeredChannels.length >= 1;
-
+export type ChannelsRef = {
 	/**
-	 * State to collapse / expand the recommended channels.
-	 * Initial state is expanded if there are no registered channels in first page load.
+	 * Scroll into the "Add channels" section in the card.
+	 * The section will be expanded, and the "Add channels" button will be in focus.
 	 */
-	const [ expanded, setExpanded ] = useState( ! hasRegisteredChannels );
+	scrollIntoAddChannels: () => void;
+};
 
-	return (
-		<Card className="woocommerce-marketing-channels-card">
-			<CardHeader>
-				<CardHeaderTitle>
-					{ __( 'Channels', 'woocommerce' ) }
-				</CardHeaderTitle>
-				{ ! hasRegisteredChannels && (
-					<CardHeaderDescription>
-						{ __(
-							'Start by adding a channel to your store',
-							'woocommerce'
-						) }
-					</CardHeaderDescription>
-				) }
-			</CardHeader>
+export const Channels = forwardRef< ChannelsRef, ChannelsProps >(
+	(
+		{ registeredChannels, recommendedChannels, onInstalledAndActivated },
+		ref
+	) => {
+		const hasRegisteredChannels = registeredChannels.length >= 1;
+
+		/**
+		 * State to collapse / expand the recommended channels.
+		 * Initial state is expanded if there are no registered channels in first page load.
+		 */
+		const [ expanded, setExpanded ] = useState( ! hasRegisteredChannels );
+		const addChannelsButtonRef = useRef< HTMLButtonElement >( null );
 
-			{ /* Registered channels section. */ }
-			{ registeredChannels.map( ( el, idx ) => {
-				return (
+		useImperativeHandle(
+			ref,
+			() => ( {
+				scrollIntoAddChannels: () => {
+					setExpanded( true );
+					addChannelsButtonRef.current?.focus();
+					addChannelsButtonRef.current?.scrollIntoView( {
+						block: 'center',
+					} );
+				},
+			} ),
+			[]
+		);
+
+		return (
+			<Card className="woocommerce-marketing-channels-card">
+				<CardHeader>
+					<CardHeaderTitle>
+						{ __( 'Channels', 'woocommerce' ) }
+					</CardHeaderTitle>
+					{ ! hasRegisteredChannels && (
+						<CardHeaderDescription>
+							{ __(
+								'Start by adding a channel to your store',
+								'woocommerce'
+							) }
+						</CardHeaderDescription>
+					) }
+				</CardHeader>
+
+				{ /* Registered channels section. */ }
+				{ registeredChannels.map( ( el, idx ) => (
 					<Fragment key={ el.slug }>
 						<RegisteredChannelCardBody registeredChannel={ el } />
 						{ idx !== registeredChannels.length - 1 && (
 							<CardDivider />
 						) }
 					</Fragment>
-				);
-			} ) }
+				) ) }
 
-			{ /* Recommended channels section. */ }
-			{ recommendedChannels.length >= 1 && (
-				<div>
-					{ !! hasRegisteredChannels && (
-						<>
-							<CardDivider />
-							<CardBody>
-								<Button
-									variant="link"
-									onClick={ () => setExpanded( ! expanded ) }
-								>
-									{ __( 'Add channels', 'woocommerce' ) }
-									<Icon
-										icon={
-											expanded ? chevronUp : chevronDown
+				{ /* Recommended channels section. */ }
+				{ recommendedChannels.length >= 1 && (
+					<div>
+						{ !! hasRegisteredChannels && (
+							<>
+								<CardDivider />
+								<CardBody>
+									<Button
+										ref={ addChannelsButtonRef }
+										variant="link"
+										onClick={ () =>
+											setExpanded( ! expanded )
 										}
-										size={ 24 }
-									/>
-								</Button>
-							</CardBody>
-						</>
-					) }
-					{ !! expanded &&
-						recommendedChannels.map( ( el, idx ) => {
-							return (
+									>
+										{ __( 'Add channels', 'woocommerce' ) }
+										<Icon
+											icon={
+												expanded
+													? chevronUp
+													: chevronDown
+											}
+											size={ 24 }
+										/>
+									</Button>
+								</CardBody>
+							</>
+						) }
+						{ !! expanded &&
+							recommendedChannels.map( ( el, idx ) => (
 								<Fragment key={ el.plugin }>
 									<SmartPluginCardBody
 										plugin={ el }
@@ -110,10 +141,10 @@ export const Channels: React.FC< ChannelsProps > = ( {
 										<CardDivider />
 									) }
 								</Fragment>
-							);
-						} ) }
-				</div>
-			) }
-		</Card>
-	);
-};
+							) ) }
+					</div>
+				) }
+			</Card>
+		);
+	}
+);

plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/index.ts

@@ -1 +1,2 @@
 export { Channels } from './Channels';
+export type { ChannelsRef } from './Channels';

plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.scss

@@ -0,0 +1,54 @@
+.woocommerce-marketing-introduction-banner {
+	& > div {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.woocommerce-marketing-introduction-banner-content {
+		flex: 1 0;
+		margin: 32px 20px 32px 40px;
+
+		.woocommerce-marketing-introduction-banner-title {
+			font-size: 20px;
+			line-height: 28px;
+			margin-bottom: $gap-smaller;
+		}
+
+		.woocommerce-marketing-introduction-banner-features {
+			color: $gray-700;
+
+			svg {
+				fill: $studio-woocommerce-purple-50;
+			}
+		}
+
+		.woocommerce-marketing-introduction-banner-buttons {
+			margin-top: $gap;
+		}
+	}
+
+	.woocommerce-marketing-introduction-banner-illustration {
+		flex: 0 0 270px;
+		background: linear-gradient(90deg, rgba(247, 237, 247, 0) 5.31%, rgba(196, 152, 217, 0.12) 77.75%),
+			linear-gradient(90deg, rgba(247, 237, 247, 0) 22%, rgba(196, 152, 217, 0.12) 84.6%);
+
+		.woocommerce-marketing-introduction-banner-image-placeholder {
+			width: 100%;
+			height: 100%;
+			background: center / contain no-repeat;
+		}
+
+		.woocommerce-marketing-introduction-banner-close-button {
+			position: absolute;
+			top: $gap-small;
+			right: $gap;
+			padding: 0;
+		}
+
+		img {
+			display: block;
+			width: 100%;
+			height: 100%;
+		}
+	}
+}