= 1 && (
+
) }
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.scss b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.scss
new file mode 100644
index 00000000000..9a02c3861dc
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.scss
@@ -0,0 +1,8 @@
+.woocommerce-marketing-recommended-channels {
+ .components-button.is-link {
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 17px;
+ text-decoration: none;
+ }
+}
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/CollapsibleRecommendedChannels.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.tsx
similarity index 100%
rename from plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/CollapsibleRecommendedChannels.tsx
rename to plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.tsx
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useChannels.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useChannels.ts
deleted file mode 100644
index 61d91d55388..00000000000
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useChannels.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Internal dependencies
- */
-import { useRecommendedChannels } from '~/marketing/hooks';
-import { useRegisteredChannels } from './useRegisteredChannels';
-
-export const useChannels = () => {
- const { loading: loadingRegistered, data: dataRegistered } =
- useRegisteredChannels();
- const { loading: loadingRecommended, data: dataRecommended } =
- useRecommendedChannels();
-
- return {
- loading: loadingRegistered || loadingRecommended,
- data: {
- registeredChannels: dataRegistered,
- recommendedChannels: dataRecommended,
- },
- };
-};
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
index 780445ffebd..e7858c2c01a 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
@@ -13,20 +13,37 @@ 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 ;
+ }
+
return (
- { /* TODO: show Campaigns card only when there is at least one registered channel. */ }
-
-
+ { dataRegistered.length >= 1 && }
+ { ( dataRegistered.length >= 1 || dataRecommended.length >= 1 ) && (
+
+ ) }
{ shouldShowExtensions && }