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 (
@@ -90,7 +92,7 @@ export const Channels = () => {
- { /* TODO: registered channels here. */ }
+ { /* Registered channels section. */ }
{ registeredChannels.map( ( el, idx ) => {
return (
@@ -102,12 +104,11 @@ export const Channels = () => {
);
} ) }
- { /* TODO: recommended channels here. */ }
+ { /* Recommended channels section. */ }
{ recommendedChannels.length > 0 && (
- <>
-
- recommended
- >
+
) }
);
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 (
+ <>
+
+
+
+
+ { ! collapsed &&
+ recommendedChannels.map( ( el, idx ) => {
+ return (
+
+
+ { idx < recommendedChannels.length - 1 && (
+
+ ) }
+
+ );
+ } ) }
+ >
+ );
+};