From 4a2205bcd1707625d9f968a5e572b3fec526775f Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Wed, 14 Dec 2022 01:13:00 +0800
Subject: [PATCH] Display recommended channels in a collapsible list in
 Channels card.

---
 .../Channels/Channels.scss                    |  4 ++
 .../Channels/Channels.tsx                     | 21 ++++----
 .../CollapsibleRecommendedChannels.tsx        | 53 +++++++++++++++++++
 3 files changed, 68 insertions(+), 10 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/CollapsibleRecommendedChannels.tsx

diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.scss b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.scss
index aff331de94f..a9d5343d54a 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.scss
+++ b/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;
+	}
 }
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx
index 3b7b62b1670..7013bc34143 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx
+++ b/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,
-	 * display the registered channels.
+	 * Users have 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 && (
-				<>
-					<CardDivider />
-					<CardBody>recommended</CardBody>
-				</>
+				<CollapsibleRecommendedChannels
+					recommendedChannels={ recommendedChannels }
+				/>
 			) }
 		</Card>
 	);
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/CollapsibleRecommendedChannels.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/CollapsibleRecommendedChannels.tsx
new file mode 100644
index 00000000000..99308d4c4db
--- /dev/null
+++ b/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>
+					);
+				} ) }
+		</>
+	);
+};