From a9010ffd68b009e9c51de82e845e3af4ff0dc88c Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Sat, 10 Dec 2022 01:37:21 +0800
Subject: [PATCH] Add InstalledChannelCardBody to Channels.

---
 .../Channels/Channels.tsx                     | 16 ++++++++++++-
 .../Channels/InstalledChannelCardBody.scss    |  2 ++
 .../Channels/InstalledChannelCardBody.tsx     | 24 +++++++++++++++++++
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss
 create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx

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 c9f33c4c3eb..3b7b62b1670 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx
@@ -16,6 +16,7 @@ import {
 } from '~/marketing/components';
 import { useChannels } from './useChannels';
 import './Channels.scss';
+import { InstalledChannelCardBody } from './InstalledChannelCardBody';
 
 export const Channels = () => {
 	const {
@@ -90,10 +91,23 @@ export const Channels = () => {
 			</CardHeader>
 
 			{ /* TODO: registered channels here. */ }
+			{ registeredChannels.map( ( el, idx ) => {
+				return (
+					<Fragment key={ el.slug }>
+						<InstalledChannelCardBody installedChannel={ el } />
+						{ idx < registeredChannels.length - 1 && (
+							<CardDivider />
+						) }
+					</Fragment>
+				);
+			} ) }
 
 			{ /* TODO: recommended channels here. */ }
 			{ recommendedChannels.length > 0 && (
-				<CardBody>recommended</CardBody>
+				<>
+					<CardDivider />
+					<CardBody>recommended</CardBody>
+				</>
 			) }
 		</Card>
 	);
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss
new file mode 100644
index 00000000000..2f710f93e97
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss
@@ -0,0 +1,2 @@
+.woocommerce-marketing-installed-channel-card-body {
+}
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx
new file mode 100644
index 00000000000..03daeed32ff
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { CardBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { InstalledChannel } from '~/marketing/types';
+import './InstalledChannelCardBody.scss';
+
+type InstalledChannelCardBodyProps = {
+	installedChannel: InstalledChannel;
+};
+
+export const InstalledChannelCardBody: React.FC<
+	InstalledChannelCardBodyProps
+> = ( { installedChannel } ) => {
+	return (
+		<CardBody className="woocommerce-marketing-installed-channel-card-body">
+			InstalledChannelCardBody
+		</CardBody>
+	);
+};