Filter out marketing channels in useRecommendedPlugins.

plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/useRecommendedPlugins.ts

@@ -2,17 +2,20 @@
  * External dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
+import { differenceWith } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import { STORE_KEY } from '~/marketing/data/constants';
+import { useRecommendedChannels } from '~/marketing/hooks';
 import { RecommendedPlugin } from '~/marketing/types';
 
 const selector = 'getRecommendedPlugins';
 const category = 'marketing';
 
 export const useRecommendedPlugins = () => {
+	const { data: dataRecommendedChannels } = useRecommendedChannels();
 	const { invalidateResolution, installAndActivateRecommendedPlugin } =
 		useDispatch( STORE_KEY );
 
@@ -21,18 +24,26 @@ export const useRecommendedPlugins = () => {
 		invalidateResolution( selector, [ category ] );
 	};
 
-	return useSelect( ( select ) => {
+	const { isLoading, plugins } = useSelect( ( select ) => {
 		const { getRecommendedPlugins, hasFinishedResolution } =
 			select( STORE_KEY );
-		const plugins =
-			getRecommendedPlugins< RecommendedPlugin[] >( category );
-		const isLoading = ! hasFinishedResolution( selector, [ category ] );
 
 		return {
-			isInitializing: ! plugins.length && isLoading,
-			isLoading,
-			plugins,
-			installAndActivate,
+			isLoading: ! hasFinishedResolution( selector, [ category ] ),
+			plugins: getRecommendedPlugins< RecommendedPlugin[] >( category ),
 		};
 	}, [] );
+
+	const recommendedPluginsWithoutChannels = differenceWith(
+		plugins,
+		dataRecommendedChannels || [],
+		( a, b ) => a.product === b.product
+	);
+
+	return {
+		isInitializing: ! recommendedPluginsWithoutChannels.length && isLoading,
+		isLoading,
+		plugins: recommendedPluginsWithoutChannels,
+		installAndActivate,
+	};
 };