From dc7a233cb15a79e883fea6aea634e13765183020 Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Thu, 8 Dec 2022 23:53:36 +0800 Subject: [PATCH] Add Channels card into Marketing page. --- .../Channels/Channels.tsx | 44 +++++++++++++++ .../overview-multichannel/Channels/index.ts | 1 + .../overview-multichannel/Channels/types.ts | 25 +++++++++ .../Channels/useChannels.ts | 20 +++++++ .../Channels/useRecommendedChannels.ts | 54 +++++++++++++++++++ .../Channels/useRegisteredChannels.ts | 18 +++++++ .../MarketingOverviewMultichannel.tsx | 2 + 7 files changed, 164 insertions(+) create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/index.ts create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/types.ts create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useChannels.ts create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useRecommendedChannels.ts create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useRegisteredChannels.ts diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx new file mode 100644 index 00000000000..d1bb669719f --- /dev/null +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx @@ -0,0 +1,44 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { CardBody } from '@wordpress/components'; +import { Spinner } from '@woocommerce/components'; + +/** + * Internal dependencies + */ +import { Card } from '~/marketing/components'; +import { useChannels } from './useChannels'; + +export const Channels = () => { + const { + loading, + data: { registeredChannels, recommendedChannels }, + } = useChannels(); + + if ( loading ) { + return ( + + + + + + ); + } + + const description = + registeredChannels.length === 0 && + recommendedChannels.length > 0 && + __( 'Start by adding a channel to your store', 'woocommerce' ); + + return ( + + { /* TODO: */ } + Body + + ); +}; diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/index.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/index.ts new file mode 100644 index 00000000000..da0d9c56072 --- /dev/null +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/index.ts @@ -0,0 +1 @@ +export { Channels } from './Channels'; diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/types.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/types.ts new file mode 100644 index 00000000000..b0af93dd395 --- /dev/null +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/types.ts @@ -0,0 +1,25 @@ +// TODO: The following types are copied from plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/types.ts. +// They are may be changed later, depending on the outcome of API development. + +type Subcategory = { + slug: string; + name: string; +}; + +type Tag = { + slug: string; + name: string; +}; + +export type RecommendedChannel = { + title: string; + description: string; + url: string; + direct_install: boolean; + icon: string; + product: string; + plugin: string; + categories: Array< string >; + subcategories: Array< Subcategory >; + tags: Array< Tag >; +}; diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useChannels.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useChannels.ts new file mode 100644 index 00000000000..122b466ddf7 --- /dev/null +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useChannels.ts @@ -0,0 +1,20 @@ +/** + * Internal dependencies + */ +import { useRecommendedChannels } from './useRecommendedChannels'; +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/Channels/useRecommendedChannels.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useRecommendedChannels.ts new file mode 100644 index 00000000000..a7bf23df8d5 --- /dev/null +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useRecommendedChannels.ts @@ -0,0 +1,54 @@ +/** + * Internal dependencies + */ +import { RecommendedChannel } from './types'; + +type UseRecommendedChannels = { + loading: boolean; + data: Array< RecommendedChannel >; +}; + +export const useRecommendedChannels = (): UseRecommendedChannels => { + // TODO: call API here to get data. + // The following are just dummy data for testing now. + return { + loading: false, + data: [ + { + title: 'Facebook for WooCommerce', + description: + 'List your products and create ads on Facebook and Instagram.', + url: 'https://woocommerce.com/products/facebook/?utm_source=marketingtab&utm_medium=product&utm_campaign=wcaddons', + direct_install: true, + icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/facebook.svg', + product: 'facebook-for-woocommerce', + plugin: 'facebook-for-woocommerce/facebook-for-woocommerce.php', + categories: [ 'marketing' ], + subcategories: [ + { slug: 'sales-channels', name: 'Sales channels' }, + ], + tags: [ + { + slug: 'built-by-woocommerce', + name: 'Built by WooCommerce', + }, + ], + }, + { + title: 'Amazon, eBay & Walmart Integration for WooCommerce', + description: + 'Get the official Amazon, eBay and Walmart extension and create, sync and manage multichannel listings directly from WooCommerce.', + url: 'https://woocommerce.com/products/amazon-ebay-integration/?utm_source=marketingtab&utm_medium=product&utm_campaign=wcaddons', + direct_install: false, + icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/amazon-ebay.svg', + product: 'amazon-ebay-integration', + plugin: 'woocommerce-amazon-ebay-integration/woocommerce-amazon-ebay-integration.php', + categories: [ 'marketing' ], + subcategories: [ + { slug: 'sales-channels', name: 'Sales channels' }, + ], + tags: [], + }, + ], + }; +}; diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useRegisteredChannels.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useRegisteredChannels.ts new file mode 100644 index 00000000000..ee7849e8f70 --- /dev/null +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useRegisteredChannels.ts @@ -0,0 +1,18 @@ +export const useRegisteredChannels = () => { + // TODO: call API here to get data. + // The following are just dummy data for testing now. + return { + loading: false, + data: [ + { + name: '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.', + icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg', + isSetupCompleted: true, + setupUrl: 'www.google.com/setup', + manageUrl: 'www.google.com/manage', + }, + ], + }; +}; diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx index 3afe9c3295a..cffa5655873 100644 --- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx @@ -7,6 +7,7 @@ import { useUser } from '@woocommerce/data'; * Internal dependencies */ import { getAdminSetting } from '~/utils/admin-settings'; +import { Channels } from './Channels'; import { InstalledExtensions } from './InstalledExtensions'; import { DiscoverTools } from './DiscoverTools'; import { LearnMarketing } from './LearnMarketing'; @@ -22,6 +23,7 @@ export const MarketingOverviewMultichannel: React.FC = () => { return (
+ { shouldShowExtensions && }