From 9963fd07ab29c9197a532d5454b5c2004de7ccef Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Tue, 13 Dec 2022 23:23:13 +0800
Subject: [PATCH] Display description and button based on channel setup status
 in Channels card.

---
 .../Channels/InstalledChannelCardBody.tsx     | 48 ++++++++++++++-----
 1 file changed, 36 insertions(+), 12 deletions(-)

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 7a734c7669b..abd7f85dc5f 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx
@@ -104,6 +104,40 @@ const IssueStatus: React.FC< IssueStatusPropsType > = ( {
 export const InstalledChannelCardBody: React.FC<
 	InstalledChannelCardBodyProps
 > = ( { installedChannel } ) => {
+	/**
+	 * The description section in the channel card.
+	 *
+	 * If setup is not completed, this would be the channel description.
+	 *
+	 * If setup is completed, this would be an element with sync status and issue status.
+	 */
+	const description = ! installedChannel.isSetupCompleted ? (
+		installedChannel.description
+	) : (
+		<div className="woocommerce-marketing-installed-channel-description">
+			<SyncStatus status={ installedChannel.syncStatus } />
+			<div className="woocommerce-marketing-installed-channel-description__separator" />
+			<IssueStatus installedChannel={ installedChannel } />
+		</div>
+	);
+
+	/**
+	 * The action button in the channel card.
+	 *
+	 * If setup is not completed, this would be a "Finish setup" primary button.
+	 *
+	 * If setup is completed, this would be a "Manage" secondary button.
+	 */
+	const button = ! installedChannel.isSetupCompleted ? (
+		<Button variant="primary" href={ installedChannel.setupUrl }>
+			{ __( 'Finish setup', 'woocommerce' ) }
+		</Button>
+	) : (
+		<Button variant="secondary" href={ installedChannel.manageUrl }>
+			{ __( 'Manage', 'woocommerce' ) }
+		</Button>
+	);
+
 	return (
 		<PluginCardBody
 			className="woocommerce-marketing-installed-channel-card-body"
@@ -114,18 +148,8 @@ export const InstalledChannelCardBody: React.FC<
 				/>
 			}
 			name={ installedChannel.title }
-			description={
-				<div className="woocommerce-marketing-installed-channel-description">
-					<SyncStatus status={ installedChannel.syncStatus } />
-					<div className="woocommerce-marketing-installed-channel-description__separator" />
-					<IssueStatus installedChannel={ installedChannel } />
-				</div>
-			}
-			button={
-				<Button variant="secondary" href={ installedChannel.manageUrl }>
-					{ __( 'Manage', 'woocommerce' ) }
-				</Button>
-			}
+			description={ description }
+			button={ button }
 		/>
 	);
 };