Display recommended channels in a collapsible list in Channels card.

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

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

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

@@ -17,6 +17,7 @@ import {
 import { useChannels } from './useChannels';
 import './Channels.scss';
 import { InstalledChannelCardBody } from './InstalledChannelCardBody';
+import { CollapsibleRecommendedChannels } from './CollapsibleRecommendedChannels';
 
 export const Channels = () => {
 	const {
@@ -46,7 +47,8 @@ export const Channels = () => {
 
 	/*
 	 * If users have no registered channels,
-	 * we display recommended channels without collapsible list.
+	 * we display recommended channels without collapsible list
+	 * and with a description in the card header.
 	 */
 	if ( registeredChannels.length === 0 && recommendedChannels.length > 0 ) {
 		return (
@@ -77,10 +79,10 @@ export const Channels = () => {
 	}
 
 	/*
-	 * TODO: Users have registered channels,
+	 * Users have registered channels,
-	 * display the registered channels.
+	 * so here we display the registered channels first.
 	 * If there are recommended channels,
-	 * display them in a collapsible list.
+	 * we display them next in a collapsible list.
 	 */
 	return (
 		<Card className="woocommerce-marketing-channels-card">
@@ -90,7 +92,7 @@ export const Channels = () => {
 				</CardHeaderTitle>
 			</CardHeader>
 
-			{ /* TODO: registered channels here. */ }
+			{ /* Registered channels section. */ }
 			{ registeredChannels.map( ( el, idx ) => {
 				return (
 					<Fragment key={ el.slug }>
@@ -102,12 +104,11 @@ export const Channels = () => {
 				);
 			} ) }
 
-			{ /* TODO: recommended channels here. */ }
+			{ /* Recommended channels section. */ }
 			{ recommendedChannels.length > 0 && (
-				<>
+				<CollapsibleRecommendedChannels
-					<CardDivider />
+					recommendedChannels={ recommendedChannels }
-					<CardBody>recommended</CardBody>
+				/>
-				</>
 			) }
 		</Card>
 	);

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

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { Fragment, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { CardBody, CardDivider, Button, Icon } from '@wordpress/components';
+import { chevronUp, chevronDown } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { SmartPluginCardBody } from '~/marketing/components';
+import { RecommendedChannel } from './types';
+import './Channels.scss';
+
+type RecommendedChannelsType = {
+	recommendedChannels: Array< RecommendedChannel >;
+};
+
+export const CollapsibleRecommendedChannels: React.FC<
+	RecommendedChannelsType
+> = ( { recommendedChannels } ) => {
+	const [ collapsed, setCollapsed ] = useState( true );
+
+	return (
+		<>
+			<CardDivider />
+			<CardBody>
+				<Button
+					variant="link"
+					onClick={ () => setCollapsed( ! collapsed ) }
+				>
+					{ __( 'Add channels', 'woocommerce' ) }
+					<Icon
+						icon={ collapsed ? chevronDown : chevronUp }
+						size={ 24 }
+					/>
+				</Button>
+			</CardBody>
+			{ ! collapsed &&
+				recommendedChannels.map( ( el, idx ) => {
+					return (
+						<Fragment key={ el.plugin }>
+							<SmartPluginCardBody plugin={ el } />
+							{ idx < recommendedChannels.length - 1 && (
+								<CardDivider />
+							) }
+						</Fragment>
+					);
+				} ) }
+		</>
+	);
+};