diff --git a/plugins/woocommerce-admin/client/marketing/hooks/index.ts b/plugins/woocommerce-admin/client/marketing/hooks/index.ts index 701de724c26..0a80d7f7f22 100644 --- a/plugins/woocommerce-admin/client/marketing/hooks/index.ts +++ b/plugins/woocommerce-admin/client/marketing/hooks/index.ts @@ -1,2 +1,3 @@ export { useInstalledPlugins } from './useInstalledPlugins'; +export { useRegisteredChannels } from './useRegisteredChannels'; export { useRecommendedChannels } from './useRecommendedChannels'; diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useRegisteredChannels.ts b/plugins/woocommerce-admin/client/marketing/hooks/useRegisteredChannels.ts similarity index 92% rename from plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useRegisteredChannels.ts rename to plugins/woocommerce-admin/client/marketing/hooks/useRegisteredChannels.ts index d02667433e9..d512f1d4d32 100644 --- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useRegisteredChannels.ts +++ b/plugins/woocommerce-admin/client/marketing/hooks/useRegisteredChannels.ts @@ -1,3 +1,13 @@ +/** + * Internal dependencies + */ +import { InstalledChannel } from '~/marketing/types'; + +type UseRegisteredChannels = { + loading: boolean; + data: Array< InstalledChannel >; +}; + // // TODO: To be removed. This is for testing loading state. // export const useRegisteredChannels = () => { // // TODO: call API here to get data. @@ -17,7 +27,6 @@ // data: [ // { // slug: 'google-listings-and-ads', -// name: 'Google Listings and Ads', // title: 'Google Listings and Ads', // description: // 'Get in front of shoppers and drive traffic so you can grow your business with Smart Shopping Campaigns and free listings.', @@ -42,7 +51,6 @@ // data: [ // { // slug: 'google-listings-and-ads', -// name: 'Google Listings and Ads', // title: 'Google Listings and Ads', // description: // 'Get in front of shoppers and drive traffic so you can grow your business with Smart Shopping Campaigns and free listings.', @@ -59,7 +67,7 @@ // }; // TODO: To be removed. This is for testing everything works okay. -export const useRegisteredChannels = () => { +export const useRegisteredChannels = (): UseRegisteredChannels => { // TODO: call API here to get data. // The following are just dummy data for testing now. return { @@ -67,7 +75,6 @@ export const useRegisteredChannels = () => { data: [ { slug: 'google-listings-and-ads', - name: 'Google Listings and Ads', title: 'Google Listings and Ads', description: 'Get in front of shoppers and drive traffic so you can grow your business with Smart Shopping Campaigns and free listings.', diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.scss b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.scss index a9d5343d54a..aff331de94f 100644 --- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.scss +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.scss @@ -4,8 +4,4 @@ align-items: flex-start; gap: $gap-smallest; } - - .components-button.is-link { - text-decoration: none; - } } diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx index d4157af1bfe..4a1d4e855cf 100644 --- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx @@ -3,7 +3,7 @@ */ 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 @@ -11,46 +11,28 @@ import { Card, CardHeader, CardBody, CardDivider } from '@wordpress/components'; import { CardHeaderTitle, CardHeaderDescription, - CenteredSpinner, RecommendedChannelsList, } from '~/marketing/components'; -import { useChannels } from './useChannels'; -import './Channels.scss'; +import { InstalledChannel, RecommendedChannel } from '~/marketing/types'; import { InstalledChannelCardBody } from './InstalledChannelCardBody'; -import { CollapsibleRecommendedChannels } from './CollapsibleRecommendedChannels'; +import { RecommendedChannels } from './RecommendedChannels'; +import './Channels.scss'; -export const Channels = () => { - const { - loading, - data: { registeredChannels, recommendedChannels }, - } = useChannels(); - - /** - * TODO: we may need to filter the channels against - * `@woocommerce/data` installed plugins. - */ - - if ( loading ) { - return ( - - - - { __( 'Channels', 'woocommerce' ) } - - - - - - - ); - } +type ChannelsProps = { + registeredChannels: Array< InstalledChannel >; + recommendedChannels: Array< RecommendedChannel >; +}; +export const Channels: React.FC< ChannelsProps > = ( { + registeredChannels, + recommendedChannels, +} ) => { /* * If users have no registered channels, - * we display recommended channels without collapsible list + * we should display recommended channels without collapsible list * and with a description in the card header. */ - if ( registeredChannels.length === 0 && recommendedChannels.length > 0 ) { + if ( registeredChannels.length === 0 ) { return ( @@ -98,8 +80,8 @@ export const Channels = () => { } ) } { /* Recommended channels section. */ } - { recommendedChannels.length > 0 && ( - = 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 && }