Use SmartPluginCardBody in Channels component.

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

@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
+import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Card, CardHeader, CardBody } from '@wordpress/components';
+import { Card, CardHeader, CardBody, CardDivider } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -11,6 +12,7 @@ import {
 	CardHeaderTitle,
 	CardHeaderDescription,
 	CenteredSpinner,
+	SmartPluginCardBody,
 } from '~/marketing/components';
 import { useChannels } from './useChannels';
 import './Channels.scss';
@@ -21,6 +23,11 @@ export const Channels = () => {
 		data: { registeredChannels, recommendedChannels },
 	} = useChannels();
 
+	/**
+	 * TODO: we may need to filter the channels against
+	 * `@woocommerce/data` installed plugins.
+	 */
+
 	if ( loading ) {
 		return (
 			<Card>
@@ -36,21 +43,58 @@ export const Channels = () => {
 		);
 	}
 
-	const description =
-		registeredChannels.length === 0 &&
-		recommendedChannels.length > 0 &&
-		__( 'Start by adding a channel to your store', 'woocommerce' );
-
+	/*
+	 * If users have no registered channels,
+	 * we display recommended channels without collapsible list.
+	 */
+	if ( registeredChannels.length === 0 && recommendedChannels.length > 0 ) {
 		return (
 			<Card className="woocommerce-marketing-channels-card">
 				<CardHeader>
 					<CardHeaderTitle>
 						{ __( 'Channels', 'woocommerce' ) }
 					</CardHeaderTitle>
-				<CardHeaderDescription>{ description }</CardHeaderDescription>
+					<CardHeaderDescription>
+						{ __(
+							'Start by adding a channel to your store',
+							'woocommerce'
+						) }
+					</CardHeaderDescription>
 				</CardHeader>
-			{ /* TODO: */ }
-			<CardBody>Body</CardBody>
+				{ recommendedChannels.map( ( el, idx ) => {
+					return (
+						<Fragment key={ el.plugin }>
+							<SmartPluginCardBody plugin={ el } />
+							{ idx < recommendedChannels.length - 1 && (
+								<CardDivider />
+							) }
+						</Fragment>
+					);
+				} ) }
+			</Card>
+		);
+	}
+
+	/*
+	 * TODO: Users have registered channels,
+	 * display the registered channels.
+	 * If there are recommended channels,
+	 * display them in a collapsible list.
+	 */
+	return (
+		<Card className="woocommerce-marketing-channels-card">
+			<CardHeader>
+				<CardHeaderTitle>
+					{ __( 'Channels', 'woocommerce' ) }
+				</CardHeaderTitle>
+			</CardHeader>
+
+			{ /* TODO: registered channels here. */ }
+
+			{ /* TODO: recommended channels here. */ }
+			{ recommendedChannels.length > 0 && (
+				<CardBody>recommended</CardBody>
+			) }
 		</Card>
 	);
 };