Merge branch 'feature/34903-multichannel-marketing-frontend/34905-campaigns-card' into feature/34903-multichannel-marketing-frontend/34909-create-campaign-modal

Conflicts:
	plugins/woocommerce-admin/client/marketing/hooks/index.ts
	plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
	plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx
	plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.tsx
	plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useChannels.ts

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

@@ -1,2 +1,3 @@
 export { useInstalledPlugins } from './useInstalledPlugins';
+export { useRegisteredChannels } from './useRegisteredChannels';
 export { useRecommendedChannels } from './useRecommendedChannels';

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

@@ -1,3 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import { InstalledChannel } from '~/marketing/types';
+
+type UseRegisteredChannels = {
+	loading: boolean;
+	data: Array< InstalledChannel >;
+};
+
 // // TODO: To be removed. This is for testing loading state.
 // export const useRegisteredChannels = () => {
 // 	// TODO: call API here to get data.
@@ -17,7 +27,6 @@
 // 		data: [
 // 			{
 // 				slug: 'google-listings-and-ads',
-// 				name: 'Google Listings and Ads',
 // 				title: 'Google Listings and Ads',
 // 				description:
 // 					'Get in front of shoppers and drive traffic so you can grow your business with Smart Shopping Campaigns and free listings.',
@@ -42,7 +51,6 @@
 // 		data: [
 // 			{
 // 				slug: 'google-listings-and-ads',
-// 				name: 'Google Listings and Ads',
 // 				title: 'Google Listings and Ads',
 // 				description:
 // 					'Get in front of shoppers and drive traffic so you can grow your business with Smart Shopping Campaigns and free listings.',
@@ -59,7 +67,7 @@
 // };
 
 // TODO: To be removed. This is for testing everything works okay.
-export const useRegisteredChannels = () => {
+export const useRegisteredChannels = (): UseRegisteredChannels => {
 	// TODO: call API here to get data.
 	// The following are just dummy data for testing now.
 	return {
@@ -67,7 +75,6 @@ export const useRegisteredChannels = () => {
 		data: [
 			{
 				slug: 'google-listings-and-ads',
-				name: 'Google Listings and Ads',
 				title: 'Google Listings and Ads',
 				description:
 					'Get in front of shoppers and drive traffic so you can grow your business with Smart Shopping Campaigns and free listings.',

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

@@ -4,8 +4,4 @@
 		align-items: flex-start;
 		gap: $gap-smallest;
 	}
-
-	.components-button.is-link {
-		text-decoration: none;
-	}
 }

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

@@ -3,7 +3,7 @@
  */
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Card, CardHeader, CardBody, CardDivider } from '@wordpress/components';
+import { Card, CardHeader, CardDivider } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -11,46 +11,28 @@ import { Card, CardHeader, CardBody, CardDivider } from '@wordpress/components';
 import {
 	CardHeaderTitle,
 	CardHeaderDescription,
-	CenteredSpinner,
 	RecommendedChannelsList,
 } from '~/marketing/components';
-import { useChannels } from './useChannels';
+import { InstalledChannel, RecommendedChannel } from '~/marketing/types';
-import './Channels.scss';
 import { InstalledChannelCardBody } from './InstalledChannelCardBody';
-import { CollapsibleRecommendedChannels } from './CollapsibleRecommendedChannels';
+import { RecommendedChannels } from './RecommendedChannels';
+import './Channels.scss';
 
-export const Channels = () => {
+type ChannelsProps = {
-	const {
+	registeredChannels: Array< InstalledChannel >;
-		loading,
+	recommendedChannels: Array< RecommendedChannel >;
-		data: { registeredChannels, recommendedChannels },
+};
-	} = useChannels();
-
-	/**
-	 * TODO: we may need to filter the channels against
-	 * `@woocommerce/data` installed plugins.
-	 */
-
-	if ( loading ) {
-		return (
-			<Card>
-				<CardHeader>
-					<CardHeaderTitle>
-						{ __( 'Channels', 'woocommerce' ) }
-					</CardHeaderTitle>
-				</CardHeader>
-				<CardBody>
-					<CenteredSpinner />
-				</CardBody>
-			</Card>
-		);
-	}
 
+export const Channels: React.FC< ChannelsProps > = ( {
+	registeredChannels,
+	recommendedChannels,
+} ) => {
 	/*
 	 * If users have no registered channels,
-	 * we display recommended channels without collapsible list
+	 * we should display recommended channels without collapsible list
 	 * and with a description in the card header.
 	 */
-	if ( registeredChannels.length === 0 && recommendedChannels.length > 0 ) {
+	if ( registeredChannels.length === 0 ) {
 		return (
 			<Card className="woocommerce-marketing-channels-card">
 				<CardHeader>
@@ -98,8 +80,8 @@ export const Channels = () => {
 			} ) }
 
 			{ /* Recommended channels section. */ }
-			{ recommendedChannels.length > 0 && (
+			{ recommendedChannels.length >= 1 && (
-				<CollapsibleRecommendedChannels
+				<RecommendedChannels
 					recommendedChannels={ recommendedChannels }
 				/>
 			) }

plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.scss

@@ -0,0 +1,8 @@
+.woocommerce-marketing-recommended-channels {
+	.components-button.is-link {
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 17px;
+		text-decoration: none;
+	}
+}

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

@@ -1,20 +0,0 @@
-/**
- * Internal dependencies
- */
-import { useRecommendedChannels } from '~/marketing/hooks';
-import { useRegisteredChannels } from './useRegisteredChannels';
-
-export const useChannels = () => {
-	const { loading: loadingRegistered, data: dataRegistered } =
-		useRegisteredChannels();
-	const { loading: loadingRecommended, data: dataRecommended } =
-		useRecommendedChannels();
-
-	return {
-		loading: loadingRegistered || loadingRecommended,
-		data: {
-			registeredChannels: dataRegistered,
-			recommendedChannels: dataRecommended,
-		},
-	};
-};

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

@@ -13,20 +13,37 @@ import { InstalledExtensions } from './InstalledExtensions';
 import { DiscoverTools } from './DiscoverTools';
 import { LearnMarketing } from './LearnMarketing';
 import '~/marketing/data';
+import {
+	useRegisteredChannels,
+	useRecommendedChannels,
+} from '~/marketing/hooks';
 import './MarketingOverviewMultichannel.scss';
+import { CenteredSpinner } from '../components';
 
 export const MarketingOverviewMultichannel: React.FC = () => {
+	const { loading: loadingRegistered, data: dataRegistered } =
+		useRegisteredChannels();
+	const { loading: loadingRecommended, data: dataRecommended } =
+		useRecommendedChannels();
 	const { currentUserCan } = useUser();
 
 	const shouldShowExtensions =
 		getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
 		currentUserCan( 'install_plugins' );
 
+	if ( loadingRegistered || loadingRecommended ) {
+		return <CenteredSpinner />;
+	}
+
 	return (
 		<div className="woocommerce-marketing-overview-multichannel">
-			{ /* TODO: show Campaigns card only when there is at least one registered channel. */ }
+			{ dataRegistered.length >= 1 && <Campaigns /> }
-			<Campaigns />
+			{ ( dataRegistered.length >= 1 || dataRecommended.length >= 1 ) && (
-			<Channels />
+				<Channels
+					registeredChannels={ dataRegistered }
+					recommendedChannels={ dataRecommended }
+				/>
+			) }
 			<InstalledExtensions />
 			{ shouldShowExtensions && <DiscoverTools /> }
 			<LearnMarketing />