Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Get recommended channels from API.

This commit is contained in:
Gan Eng Chin 2023-01-19 19:33:51 +08:00
parent 2d7c8db2e5
commit b708cc18ff
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
7 changed files with 124 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce-admin/client/marketing/data-multichannel/action-types.ts
View File

@ -1,4 +1,8 @@
export const TYPES = {
RECEIVE_CHANNELS_SUCCESS: 'RECEIVE_CHANNELS_SUCCESS' as const,
RECEIVE_CHANNELS_ERROR: 'RECEIVE_CHANNELS_ERROR' as const,
RECEIVE_RECOMMENDED_CHANNELS_SUCCESS:
'RECEIVE_RECOMMENDED_CHANNELS_SUCCESS' as const,
RECEIVE_RECOMMENDED_CHANNELS_ERROR:
'RECEIVE_RECOMMENDED_CHANNELS_ERROR' as const,
};

24
plugins/woocommerce-admin/client/marketing/data-multichannel/actions.ts
View File

@ -2,7 +2,7 @@
* Internal dependencies
*/
import { TYPES } from './action-types';
import { ApiFetchError, Channel } from './types';
import { ApiFetchError, Channel, RecommendedPlugin } from './types';
export const receiveChannelsSuccess = ( channels: Array< Channel > ) => {
return {
@ -19,6 +19,26 @@ export const receiveChannelsError = ( error: ApiFetchError ) => {
};
};
export const receiveRecommendedChannelsSuccess = (
channels: Array< RecommendedPlugin >
) => {
return {
type: TYPES.RECEIVE_RECOMMENDED_CHANNELS_SUCCESS,
payload: channels,
};
};
export const receiveRecommendedChannelsError = ( error: ApiFetchError ) => {
return {
type: TYPES.RECEIVE_RECOMMENDED_CHANNELS_ERROR,
payload: error,
error: true,
};
};
export type Action = ReturnType<
typeof receiveChannelsSuccess | typeof receiveChannelsError
| typeof receiveChannelsSuccess
| typeof receiveChannelsError
| typeof receiveRecommendedChannelsSuccess
| typeof receiveRecommendedChannelsError
>;

18
plugins/woocommerce-admin/client/marketing/data-multichannel/reducer.ts
View File

@ -16,6 +16,10 @@ const initialState = {
data: undefined,
error: undefined,
},
recommendedChannels: {
data: undefined,
error: undefined,
},
};
export const reducer: Reducer< State, Action > = (
@ -37,6 +41,20 @@ export const reducer: Reducer< State, Action > = (
error: action.payload,
},
};
case TYPES.RECEIVE_RECOMMENDED_CHANNELS_SUCCESS:
return {
...state,
recommendedChannels: {
data: action.payload,
},
};
case TYPES.RECEIVE_RECOMMENDED_CHANNELS_ERROR:
return {
...state,
recommendedChannels: {
error: action.payload,
},
};
default:
return state;
}

25
plugins/woocommerce-admin/client/marketing/data-multichannel/resolvers.ts
View File

@ -6,8 +6,13 @@ import { apiFetch } from '@wordpress/data-controls';
/**
* Internal dependencies
*/
import { receiveChannelsSuccess, receiveChannelsError } from './actions';
import { Channel } from './types';
import {
receiveChannelsSuccess,
receiveChannelsError,
receiveRecommendedChannelsSuccess,
receiveRecommendedChannelsError,
} from './actions';
import { Channel, RecommendedPlugin } from './types';
import { API_NAMESPACE } from './constants';
import { isApiFetchError } from './guards';
@ -26,3 +31,19 @@ export function* getChannels() {
throw error;
}
}
export function* getRecommendedChannels() {
try {
const data: RecommendedPlugin[] = yield apiFetch( {
path: `${ API_NAMESPACE }/recommendations?category=channels`,
} );
yield receiveRecommendedChannelsSuccess( data );
} catch ( error ) {
if ( isApiFetchError( error ) ) {
yield receiveRecommendedChannelsError( error );
}
throw error;
}
}

4
plugins/woocommerce-admin/client/marketing/data-multichannel/selectors.ts
View File

@ -6,3 +6,7 @@ import { State } from './types';
export const getChannels = ( state: State ) => {
return state.channels;
};
export const getRecommendedChannels = ( state: State ) => {
return state.recommendedChannels;
};

32
plugins/woocommerce-admin/client/marketing/data-multichannel/types.ts
View File

@ -22,6 +22,38 @@ export type Channels = {
error?: ApiFetchError;
};
// 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 RecommendedPlugin = {
title: string;
description: string;
url: string;
direct_install: boolean;
icon: string;
product: string;
plugin: string;
categories: Array< string >;
subcategories: Array< Subcategory >;
tags: Array< Tag >;
};
export type RecommendedChannels = {
data?: Array< RecommendedPlugin >;
error?: ApiFetchError;
};
export type State = {
channels: Channels;
recommendedChannels: RecommendedChannels;
};

153
plugins/woocommerce-admin/client/marketing/hooks/useRecommendedChannels.ts
View File

@ -1,144 +1,33 @@
/**
* External dependencies
*/
import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { STORE_KEY } from '~/marketing/data-multichannel/constants';
import { RecommendedChannel } from '~/marketing/types';
import { RecommendedChannels } from '~/marketing/data-multichannel/types';
type UseRecommendedChannels = {
loading: boolean;
data: Array< RecommendedChannel >;
};
// // TODO: to be removed. This is to test for loading state.
// export const useRecommendedChannels = (): UseRecommendedChannels => {
// // TODO: call API here to get data.
// // The following are just dummy data for testing now.
// return {
// loading: true,
// data: [],
// };
// };
// // TODO: to be removed. This is to test for empty data.
// export const useRecommendedChannels = (): UseRecommendedChannels => {
// TODO: call API here to get data.
// The following are just dummy data for testing now.
// return {
// loading: false,
// data: [],
// };
// };
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: '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.',
url: 'https://woocommerce.com/products/google-listings-and-ads/?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/google.svg',
product: 'google-listings-and-ads',
plugin: 'google-listings-and-ads/google-listings-and-ads.php',
categories: [ 'marketing' ],
subcategories: [
{
slug: 'sales-channels',
name: 'Sales channels',
},
],
tags: [
{
slug: 'built-by-woocommerce',
name: 'Built by WooCommerce',
},
],
},
{
title: 'Pinterest for WooCommerce',
description:
'Grow your business on Pinterest! Use this official plugin to allow shoppers to Pin products while browsing your store, track conversions, and advertise on Pinterest.',
url: 'https://woocommerce.com/products/pinterest-for-woocommerce/?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/pinterest.svg',
product: 'pinterest-for-woocommerce',
plugin: 'pinterest-for-woocommerce/pinterest-for-woocommerce.php',
categories: [ 'marketing' ],
subcategories: [
{
slug: 'sales-channels',
name: 'Sales channels',
},
],
tags: [
{
slug: 'built-by-woocommerce',
name: 'Built by WooCommerce',
},
],
},
{
title: 'TikTok for WooCommerce',
description:
'Create advertising campaigns and reach one billion global users with TikTok for WooCommerce.',
url: 'https://woocommerce.com/products/tiktok-for-woocommerce/?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/tiktok.jpg',
product: 'tiktok-for-business',
plugin: 'tiktok-for-business/tiktok-for-woocommerce.php',
categories: [ 'marketing' ],
subcategories: [
{
slug: 'sales-channels',
name: 'Sales channels',
},
],
tags: [],
},
{
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: [],
},
],
};
return useSelect( ( select ) => {
const { hasFinishedResolution, getRecommendedChannels } =
select( STORE_KEY );
const channels = getRecommendedChannels< RecommendedChannels >();
// TODO: filter recommended channels against installed plugins,
// using @woocommerce/data/plugins.
return {
loading: ! hasFinishedResolution( 'getChannels' ),
data: channels.data || [],
error: channels.error,
};
} );
};