Display activate button for channels that are not yet activated.

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

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 };
+};