From 437ebb20a8ea566d8b37033a11afb87f3793f2ca Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Tue, 13 Dec 2022 21:36:09 +0800
Subject: [PATCH] Display sync status in Channels card.

---
 .../Channels/InstalledChannelCardBody.scss    | 20 ++++++
 .../Channels/InstalledChannelCardBody.tsx     | 71 +++++++++++++++++--
 2 files changed, 86 insertions(+), 5 deletions(-)

diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss
index 2f710f93e97..16eff2f99db 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss
@@ -1,2 +1,22 @@
 .woocommerce-marketing-installed-channel-card-body {
+	.woocommerce-marketing-sync-status {
+		display: flex;
+		align-items: center;
+		gap: $gap-smallest;
+
+		&__failed {
+			color: $alert-red;
+			fill: $alert-red;
+		}
+
+		&__syncing {
+			color: #008a20;
+			fill: #008a20;
+		}
+
+		&__synced {
+			color: #008a20;
+			fill: #008a20;
+		}
+	}
 }
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx
index 03daeed32ff..5552e7601a5 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx
@@ -1,24 +1,85 @@
 /**
  * External dependencies
  */
-import { CardBody } from '@wordpress/components';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle';
+import GridiconSync from 'gridicons/dist/sync';
+import GridiconNotice from 'gridicons/dist/notice';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
  */
-import { InstalledChannel } from '~/marketing/types';
+import { PluginCardBody } from '~/marketing/components';
+import { InstalledChannel, SyncStatusType } from '~/marketing/types';
 import './InstalledChannelCardBody.scss';
 
 type InstalledChannelCardBodyProps = {
 	installedChannel: InstalledChannel;
 };
 
+type SyncStatusPropsType = {
+	status: SyncStatusType;
+};
+
+const iconSize = 18;
+const className = 'woocommerce-marketing-sync-status';
+
+const SyncStatus: React.FC< SyncStatusPropsType > = ( { status } ) => {
+	if ( status === 'failed' ) {
+		return (
+			<div
+				className={ classnames( className, `${ className }__failed` ) }
+			>
+				<GridiconNotice size={ iconSize } />
+				{ __( 'Sync failed', 'woocommerce' ) }
+			</div>
+		);
+	}
+
+	if ( status === 'syncing' ) {
+		return (
+			<div
+				className={ classnames( className, `${ className }__syncing` ) }
+			>
+				<GridiconSync size={ iconSize } />
+				{ __( 'Syncing', 'woocommerce' ) }
+			</div>
+		);
+	}
+
+	return (
+		<div className={ classnames( className, `${ className }__synced` ) }>
+			<GridiconCheckmarkCircle size={ iconSize } />
+			{ __( 'Synced', 'woocommerce' ) }
+		</div>
+	);
+};
+
 export const InstalledChannelCardBody: React.FC<
 	InstalledChannelCardBodyProps
 > = ( { installedChannel } ) => {
 	return (
-		<CardBody className="woocommerce-marketing-installed-channel-card-body">
-			InstalledChannelCardBody
-		</CardBody>
+		<PluginCardBody
+			className="woocommerce-marketing-installed-channel-card-body"
+			icon={
+				<img
+					src={ installedChannel.icon }
+					alt={ installedChannel.title }
+				/>
+			}
+			name={ installedChannel.title }
+			description={
+				<div>
+					<SyncStatus status={ installedChannel.syncStatus } />
+				</div>
+			}
+			button={
+				<Button variant="secondary" href={ installedChannel.manageUrl }>
+					{ __( 'Manage', 'woocommerce' ) }
+				</Button>
+			}
+		/>
 	);
 };