Add Channels card into Marketing page.

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

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { CardBody } from '@wordpress/components';
+import { Spinner } from '@woocommerce/components';
+
+/**
+ * Internal dependencies
+ */
+import { Card } from '~/marketing/components';
+import { useChannels } from './useChannels';
+
+export const Channels = () => {
+	const {
+		loading,
+		data: { registeredChannels, recommendedChannels },
+	} = useChannels();
+
+	if ( loading ) {
+		return (
+			<Card title={ __( 'Channels', 'woocommerce' ) }>
+				<CardBody>
+					<Spinner />
+				</CardBody>
+			</Card>
+		);
+	}
+
+	const description =
+		registeredChannels.length === 0 &&
+		recommendedChannels.length > 0 &&
+		__( 'Start by adding a channel to your store', 'woocommerce' );
+
+	return (
+		<Card
+			title={ __( 'Channels', 'woocommerce' ) }
+			description={ description }
+		>
+			{ /* TODO: */ }
+			Body
+		</Card>
+	);
+};

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

@@ -0,0 +1 @@
+export { Channels } from './Channels';

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

@@ -0,0 +1,25 @@
+// TODO: The following types are copied from plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/types.ts.
+// They are may be changed later, depending on the outcome of API development.
+
+type Subcategory = {
+	slug: string;
+	name: string;
+};
+
+type Tag = {
+	slug: string;
+	name: string;
+};
+
+export type RecommendedChannel = {
+	title: string;
+	description: string;
+	url: string;
+	direct_install: boolean;
+	icon: string;
+	product: string;
+	plugin: string;
+	categories: Array< string >;
+	subcategories: Array< Subcategory >;
+	tags: Array< Tag >;
+};

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

@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import { useRecommendedChannels } from './useRecommendedChannels';
+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/Channels/useRecommendedChannels.ts

@@ -0,0 +1,54 @@
+/**
+ * Internal dependencies
+ */
+import { RecommendedChannel } from './types';
+
+type UseRecommendedChannels = {
+	loading: boolean;
+	data: Array< RecommendedChannel >;
+};
+
+export const useRecommendedChannels = (): UseRecommendedChannels => {
+	// TODO: call API here to get data.
+	// The following are just dummy data for testing now.
+	return {
+		loading: false,
+		data: [
+			{
+				title: 'Facebook for WooCommerce',
+				description:
+					'List your products and create ads on Facebook and Instagram.',
+				url: 'https://woocommerce.com/products/facebook/?utm_source=marketingtab&utm_medium=product&utm_campaign=wcaddons',
+				direct_install: true,
+				icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/facebook.svg',
+				product: 'facebook-for-woocommerce',
+				plugin: 'facebook-for-woocommerce/facebook-for-woocommerce.php',
+				categories: [ 'marketing' ],
+				subcategories: [
+					{ slug: 'sales-channels', name: 'Sales channels' },
+				],
+				tags: [
+					{
+						slug: 'built-by-woocommerce',
+						name: 'Built by WooCommerce',
+					},
+				],
+			},
+			{
+				title: 'Amazon, eBay & Walmart Integration for WooCommerce',
+				description:
+					'Get the official Amazon, eBay and Walmart extension and create, sync and manage multichannel listings directly from WooCommerce.',
+				url: 'https://woocommerce.com/products/amazon-ebay-integration/?utm_source=marketingtab&utm_medium=product&utm_campaign=wcaddons',
+				direct_install: false,
+				icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/amazon-ebay.svg',
+				product: 'amazon-ebay-integration',
+				plugin: 'woocommerce-amazon-ebay-integration/woocommerce-amazon-ebay-integration.php',
+				categories: [ 'marketing' ],
+				subcategories: [
+					{ slug: 'sales-channels', name: 'Sales channels' },
+				],
+				tags: [],
+			},
+		],
+	};
+};

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

@@ -0,0 +1,18 @@
+export const useRegisteredChannels = () => {
+	// TODO: call API here to get data.
+	// The following are just dummy data for testing now.
+	return {
+		loading: false,
+		data: [
+			{
+				name: '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.',
+				icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
+				isSetupCompleted: true,
+				setupUrl: 'www.google.com/setup',
+				manageUrl: 'www.google.com/manage',
+			},
+		],
+	};
+};

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

@@ -7,6 +7,7 @@ import { useUser } from '@woocommerce/data';
  * Internal dependencies
  */
 import { getAdminSetting } from '~/utils/admin-settings';
+import { Channels } from './Channels';
 import { InstalledExtensions } from './InstalledExtensions';
 import { DiscoverTools } from './DiscoverTools';
 import { LearnMarketing } from './LearnMarketing';
@@ -22,6 +23,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
 
 	return (
 		<div className="woocommerce-marketing-overview-multichannel">
+			<Channels />
 			<InstalledExtensions />
 			{ shouldShowExtensions && <DiscoverTools /> }
 			<LearnMarketing />