Change namings and add docs in useRecommendedPlugins.

plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.test.tsx

@@ -7,7 +7,7 @@ import { render, screen } from '@testing-library/react';
  * Internal dependencies
  */
 import { useInstalledExtensions } from '~/marketing/hooks';
-import { useRecommendedPlugins } from './useRecommendedPlugins';
+import { useRecommendedPluginsWithoutChannels } from './useRecommendedPlugins';
 import { DiscoverTools } from './DiscoverTools';
 
 jest.mock( '@woocommerce/components', () => {
@@ -21,7 +21,7 @@ jest.mock( '@woocommerce/components', () => {
 } );
 
 jest.mock( './useRecommendedPlugins', () => ( {
-	useRecommendedPlugins: jest.fn(),
+	useRecommendedPluginsWithoutChannels: jest.fn(),
 } ) );
 
 jest.mock( '~/marketing/hooks', () => ( {
@@ -30,10 +30,10 @@ jest.mock( '~/marketing/hooks', () => ( {
 
 describe( 'DiscoverTools component', () => {
 	it( 'should render a Spinner when loading is in progress', () => {
-		( useRecommendedPlugins as jest.Mock ).mockReturnValue( {
+		( useRecommendedPluginsWithoutChannels as jest.Mock ).mockReturnValue( {
 			isInitializing: true,
 			isLoading: true,
-			plugins: [],
+			data: [],
 		} );
 		( useInstalledExtensions as jest.Mock ).mockReturnValue( {
 			loadInstalledExtensionsAfterActivation: jest.fn(),
@@ -44,10 +44,10 @@ describe( 'DiscoverTools component', () => {
 	} );
 
 	it( 'should render message and link when loading is finish and there are no plugins', () => {
-		( useRecommendedPlugins as jest.Mock ).mockReturnValue( {
+		( useRecommendedPluginsWithoutChannels as jest.Mock ).mockReturnValue( {
 			isInitializing: false,
 			isLoading: false,
-			plugins: [],
+			data: [],
 		} );
 		( useInstalledExtensions as jest.Mock ).mockReturnValue( {
 			loadInstalledExtensionsAfterActivation: jest.fn(),
@@ -66,10 +66,12 @@ describe( 'DiscoverTools component', () => {
 
 	describe( 'With plugins loaded', () => {
 		it( 'should render `direct_install: true` plugins with "Install plugin" button', () => {
-			( useRecommendedPlugins as jest.Mock ).mockReturnValue( {
+			(
+				useRecommendedPluginsWithoutChannels as jest.Mock
+			 ).mockReturnValue( {
 				isInitializing: false,
 				isLoading: false,
-				plugins: [
+				data: [
 					{
 						title: 'Google Listings and Ads',
 						description:
@@ -112,10 +114,12 @@ describe( 'DiscoverTools component', () => {
 		} );
 
 		it( 'should render `direct_install: false` plugins with "View details" button', () => {
-			( useRecommendedPlugins as jest.Mock ).mockReturnValue( {
+			(
+				useRecommendedPluginsWithoutChannels as jest.Mock
+			 ).mockReturnValue( {
 				isInitializing: false,
 				isLoading: false,
-				plugins: [
+				data: [
 					{
 						title: 'WooCommerce Zapier',
 						description:

plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.tsx

@@ -14,13 +14,13 @@ import {
 	CardBody,
 	CenteredSpinner,
 } from '~/marketing/components';
-import { useRecommendedPlugins } from './useRecommendedPlugins';
+import { useRecommendedPluginsWithoutChannels } from './useRecommendedPlugins';
 import { PluginsTabPanel } from './PluginsTabPanel';
 import './DiscoverTools.scss';
 
 export const DiscoverTools = () => {
-	const { isInitializing, isLoading, plugins, installAndActivate } =
+	const { isInitializing, isLoading, data, installAndActivate } =
-		useRecommendedPlugins();
+		useRecommendedPluginsWithoutChannels();
 
 	/**
 	 * Renders card body.
@@ -38,7 +38,7 @@ export const DiscoverTools = () => {
 			);
 		}
 
-		if ( plugins.length === 0 ) {
+		if ( data.length === 0 ) {
 			return (
 				<CardBody className="woocommerce-marketing-discover-tools-card-body-empty-content">
 					<Icon icon={ trendingUp } size={ 32 } />
@@ -66,7 +66,7 @@ export const DiscoverTools = () => {
 
 		return (
 			<PluginsTabPanel
-				plugins={ plugins }
+				plugins={ data }
 				isLoading={ isLoading }
 				onInstallAndActivate={ installAndActivate }
 			/>

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

@@ -11,10 +11,40 @@ import { STORE_KEY } from '~/marketing/data/constants';
 import { useRecommendedChannels } from '~/marketing/hooks';
 import { RecommendedPlugin } from '~/marketing/types';
 
+type UseRecommendedPluginsWithoutChannels = {
+	/**
+	 * Boolean indicating whether it is loading for the first time.
+	 */
+	isInitializing: boolean;
+
+	/**
+	 * Boolean indicating whether it is loading.
+	 *
+	 * This will be true when data is being refetched
+	 * after `invalidateResolution` is called in the `installAndActivate` method.
+	 */
+	isLoading: boolean;
+
+	/**
+	 * An array of recommended marketing plugins without marketing channels.
+	 */
+	data: RecommendedPlugin[];
+
+	/**
+	 * Install and activate a plugin.
+	 */
+	installAndActivate: ( slug: string ) => void;
+};
+
 const selector = 'getRecommendedPlugins';
 const category = 'marketing';
 
-export const useRecommendedPlugins = () => {
+/**
+ * A hook to return a list of recommended plugins without marketing channels,
+ * and related methods, to be used with the `DiscoverTools` component.
+ */
+export const useRecommendedPluginsWithoutChannels =
+	(): UseRecommendedPluginsWithoutChannels => {
 		const {
 			loading: loadingRecommendedChannels,
 			data: dataRecommendedChannels,
@@ -22,13 +52,15 @@ export const useRecommendedPlugins = () => {
 		const { invalidateResolution, installAndActivateRecommendedPlugin } =
 			useDispatch( STORE_KEY );
 
-	const installAndActivate = ( plugin: string ) => {
+		const installAndActivate = ( slug: string ) => {
-		installAndActivateRecommendedPlugin( plugin, category );
+			installAndActivateRecommendedPlugin( slug, category );
 			invalidateResolution( selector, [ category ] );
 		};
 
-	const { loading: loadingRecommendedPlugins, data: dataRecommendedPlugins } =
+		const {
-		useSelect( ( select ) => {
+			loading: loadingRecommendedPlugins,
+			data: dataRecommendedPlugins,
+		} = useSelect( ( select ) => {
 			const { getRecommendedPlugins, hasFinishedResolution } =
 				select( STORE_KEY );
 
@@ -47,9 +79,10 @@ export const useRecommendedPlugins = () => {
 		);
 
 		return {
-		isInitializing: ! recommendedPluginsWithoutChannels.length && loading,
+			isInitializing:
+				! recommendedPluginsWithoutChannels.length && loading,
 			isLoading: loading,
-		plugins: recommendedPluginsWithoutChannels,
+			data: recommendedPluginsWithoutChannels,
 			installAndActivate,
 		};
 	};