From 9fa6ea4a25ae393a033d7d469ce84f365eafb0ed Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Fri, 20 Jan 2023 00:36:34 +0800
Subject: [PATCH] Display activate button for channels that are not yet
 activated.

---
 .../PluginCardBody/SmartPluginCardBody.tsx    | 15 +++++++++++
 .../PluginCardBody/useIsPluginInstalled.ts    | 25 +++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 plugins/woocommerce-admin/client/marketing/components/PluginCardBody/useIsPluginInstalled.ts

diff --git a/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/SmartPluginCardBody.tsx b/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/SmartPluginCardBody.tsx
index f3272e48f78..b6375d82109 100644
--- a/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/SmartPluginCardBody.tsx
+++ b/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/SmartPluginCardBody.tsx
@@ -16,6 +16,7 @@ import { PluginCardBody } from '~/marketing/components';
 import { RecommendedPlugin } from '~/marketing/types';
 import { getInAppPurchaseUrl } from '~/lib/in-app-purchase';
 import { createNoticesFromResponse } from '~/lib/notices';
+import { useIsPluginInstalled } from './useIsPluginInstalled';
 import './PluginCardBody.scss';
 
 type SmartPluginCardBodyProps = {
@@ -38,6 +39,7 @@ export const SmartPluginCardBody = ( {
 		null
 	);
 	const { installAndActivatePlugins } = useDispatch( PLUGINS_STORE_NAME );
+	const { isPluginInstalled } = useIsPluginInstalled();
 
 	/**
 	 * Install and activate a plugin.
@@ -71,6 +73,19 @@ export const SmartPluginCardBody = ( {
 	const renderButton = () => {
 		const buttonDisabled = !! currentPlugin;
 
+		if ( isPluginInstalled( plugin.product ) ) {
+			return (
+				<Button
+					variant="secondary"
+					isBusy={ currentPlugin === plugin.product }
+					disabled={ buttonDisabled }
+					onClick={ installAndActivate }
+				>
+					{ __( 'Activate', 'woocommerce' ) }
+				</Button>
+			);
+		}
+
 		if ( plugin.direct_install ) {
 			return (
 				<Button
diff --git a/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/useIsPluginInstalled.ts b/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/useIsPluginInstalled.ts
new file mode 100644
index 00000000000..3ddd905d2fa
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/useIsPluginInstalled.ts
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { PLUGINS_STORE_NAME } from '@woocommerce/data';
+
+export const useIsPluginInstalled = () => {
+	const { installedPlugins } = useSelect( ( select ) => {
+		const { getInstalledPlugins } = select( PLUGINS_STORE_NAME );
+
+		return {
+			installedPlugins: getInstalledPlugins(),
+		};
+	} );
+
+	const isPluginInstalled = useCallback(
+		( slug: string ) => {
+			return installedPlugins.includes( slug );
+		},
+		[ installedPlugins ]
+	);
+
+	return { isPluginInstalled };
+};