Load registered and recommended channels in MarketingOverviewMultichannel.

The data will be used to conditionally display Campaigns card later.

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

@@ -3,65 +3,33 @@
  */
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Card, CardHeader, CardBody, CardDivider } from '@wordpress/components';
+import { Card, CardHeader, CardDivider } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import {
-	CardHeaderTitle,
-	CardHeaderDescription,
-	CenteredSpinner,
-} from '~/marketing/components';
-import {
-	useRegisteredChannels,
-	useRecommendedChannels,
-} from '~/marketing/hooks';
+import { CardHeaderTitle, CardHeaderDescription } from '~/marketing/components';
+import { InstalledChannel, RecommendedChannel } from '~/marketing/types';
 import { InstalledChannelCardBody } from './InstalledChannelCardBody';
 import { RecommendedChannels } from './RecommendedChannels';
 import { RecommendedChannelsList } from './RecommendedChannelsList';
 import './Channels.scss';
 
-export const Channels = () => {
-	const { loading: loadingRegistered, data: dataRegistered } =
-		useRegisteredChannels();
-	const { loading: loadingRecommended, data: dataRecommended } =
-		useRecommendedChannels();
-
-	/**
-	 * TODO: we may need to filter the channels against
-	 * `@woocommerce/data` installed plugins.
-	 */
-
-	if ( loadingRegistered || loadingRecommended ) {
-		return (
-			<Card>
-				<CardHeader>
-					<CardHeaderTitle>
-						{ __( 'Channels', 'woocommerce' ) }
-					</CardHeaderTitle>
-				</CardHeader>
-				<CardBody>
-					<CenteredSpinner />
-				</CardBody>
-			</Card>
-		);
-	}
+type ChannelsProps = {
+	registeredChannels: Array< InstalledChannel >;
+	recommendedChannels: Array< RecommendedChannel >;
+};
 
+export const Channels: React.FC< ChannelsProps > = ( {
+	registeredChannels,
+	recommendedChannels,
+} ) => {
 	/*
 	 * If users have no registered channels,
 	 * we should display recommended channels without collapsible list
 	 * and with a description in the card header.
 	 */
-	if ( dataRegistered.length === 0 ) {
-		/**
-		 * If for some reasons we don't have recommended channels,
-		 * then we should not show the Channels card at all.
-		 */
-		if ( dataRecommended.length === 0 ) {
-			return null;
-		}
-
+	if ( registeredChannels.length === 0 ) {
 		return (
 			<Card className="woocommerce-marketing-channels-card">
 				<CardHeader>
@@ -76,7 +44,7 @@ export const Channels = () => {
 					</CardHeaderDescription>
 				</CardHeader>
 				<RecommendedChannelsList
-					recommendedChannels={ dataRecommended }
+					recommendedChannels={ recommendedChannels }
 				/>
 			</Card>
 		);
@@ -97,18 +65,22 @@ export const Channels = () => {
 			</CardHeader>
 
 			{ /* Registered channels section. */ }
-			{ dataRegistered.map( ( el, idx ) => {
+			{ registeredChannels.map( ( el, idx ) => {
 				return (
 					<Fragment key={ el.slug }>
 						<InstalledChannelCardBody installedChannel={ el } />
-						{ idx < dataRegistered.length - 1 && <CardDivider /> }
+						{ idx < registeredChannels.length - 1 && (
+							<CardDivider />
+						) }
 					</Fragment>
 				);
 			} ) }
 
 			{ /* Recommended channels section. */ }
-			{ dataRecommended.length > 0 && (
-				<RecommendedChannels recommendedChannels={ dataRecommended } />
+			{ recommendedChannels.length >= 1 && (
+				<RecommendedChannels
+					recommendedChannels={ recommendedChannels }
+				/>
 			) }
 		</Card>
 	);

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

@@ -12,18 +12,36 @@ import { InstalledExtensions } from './InstalledExtensions';
 import { DiscoverTools } from './DiscoverTools';
 import { LearnMarketing } from './LearnMarketing';
 import '~/marketing/data';
+import {
+	useRegisteredChannels,
+	useRecommendedChannels,
+} from '~/marketing/hooks';
 import './MarketingOverviewMultichannel.scss';
+import { CenteredSpinner } from '../components';
 
 export const MarketingOverviewMultichannel: React.FC = () => {
+	const { loading: loadingRegistered, data: dataRegistered } =
+		useRegisteredChannels();
+	const { loading: loadingRecommended, data: dataRecommended } =
+		useRecommendedChannels();
 	const { currentUserCan } = useUser();
 
 	const shouldShowExtensions =
 		getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
 		currentUserCan( 'install_plugins' );
 
+	if ( loadingRegistered || loadingRecommended ) {
+		return <CenteredSpinner />;
+	}
+
 	return (
 		<div className="woocommerce-marketing-overview-multichannel">
-			<Channels />
+			{ ( dataRegistered.length >= 1 || dataRecommended.length >= 1 ) && (
+				<Channels
+					registeredChannels={ dataRegistered }
+					recommendedChannels={ dataRecommended }
+				/>
+			) }
 			<InstalledExtensions />
 			{ shouldShowExtensions && <DiscoverTools /> }
 			<LearnMarketing />