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

Change namings and add docs in useRecommendedPlugins.

This commit is contained in:
Gan Eng Chin 2023-03-21 21:12:00 +08:00
parent c6bcf9fa67
commit b129dd5173
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
3 changed files with 77 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.test.tsx
View File

@ -7,7 +7,7 @@ import { render, screen } from '@testing-library/react';
* Internal dependencies
*/
import { useInstalledExtensions } from '~/marketing/hooks';
import { useRecommendedPlugins } from './useRecommendedPlugins';
import { useRecommendedPluginsWithoutChannels } from './useRecommendedPlugins';
import { DiscoverTools } from './DiscoverTools';
jest.mock( '@woocommerce/components', () => {
@ -21,7 +21,7 @@ jest.mock( '@woocommerce/components', () => {
} );
jest.mock( './useRecommendedPlugins', () => ( {
useRecommendedPlugins: jest.fn(),
useRecommendedPluginsWithoutChannels: jest.fn(),
} ) );
jest.mock( '~/marketing/hooks', () => ( {
@ -30,10 +30,10 @@ jest.mock( '~/marketing/hooks', () => ( {
describe( 'DiscoverTools component', () => {
it( 'should render a Spinner when loading is in progress', () => {
( useRecommendedPlugins as jest.Mock ).mockReturnValue( {
( useRecommendedPluginsWithoutChannels as jest.Mock ).mockReturnValue( {
isInitializing: true,
isLoading: true,
plugins: [],
data: [],
} );
( useInstalledExtensions as jest.Mock ).mockReturnValue( {
loadInstalledExtensionsAfterActivation: jest.fn(),
@ -44,10 +44,10 @@ describe( 'DiscoverTools component', () => {
} );
it( 'should render message and link when loading is finish and there are no plugins', () => {
( useRecommendedPlugins as jest.Mock ).mockReturnValue( {
( useRecommendedPluginsWithoutChannels as jest.Mock ).mockReturnValue( {
isInitializing: false,
isLoading: false,
plugins: [],
data: [],
} );
( useInstalledExtensions as jest.Mock ).mockReturnValue( {
loadInstalledExtensionsAfterActivation: jest.fn(),
@ -66,10 +66,12 @@ describe( 'DiscoverTools component', () => {
describe( 'With plugins loaded', () => {
it( 'should render `direct_install: true` plugins with "Install plugin" button', () => {
( useRecommendedPlugins as jest.Mock ).mockReturnValue( {
(
useRecommendedPluginsWithoutChannels as jest.Mock
).mockReturnValue( {
isInitializing: false,
isLoading: false,
plugins: [
data: [
{
title: 'Google Listings and Ads',
description:
@ -112,10 +114,12 @@ describe( 'DiscoverTools component', () => {
} );
it( 'should render `direct_install: false` plugins with "View details" button', () => {
( useRecommendedPlugins as jest.Mock ).mockReturnValue( {
(
useRecommendedPluginsWithoutChannels as jest.Mock
).mockReturnValue( {
isInitializing: false,
isLoading: false,
plugins: [
data: [
{
title: 'WooCommerce Zapier',
description:

10
plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.tsx
View File

@ -14,13 +14,13 @@ import {
CardBody,
CenteredSpinner,
} from '~/marketing/components';
import { useRecommendedPlugins } from './useRecommendedPlugins';
import { useRecommendedPluginsWithoutChannels } from './useRecommendedPlugins';
import { PluginsTabPanel } from './PluginsTabPanel';
import './DiscoverTools.scss';
export const DiscoverTools = () => {
const { isInitializing, isLoading, plugins, installAndActivate } =
useRecommendedPlugins();
const { isInitializing, isLoading, data, installAndActivate } =
useRecommendedPluginsWithoutChannels();
/**
* Renders card body.
@ -38,7 +38,7 @@ export const DiscoverTools = () => {
);
}
if ( plugins.length === 0 ) {
if ( data.length === 0 ) {
return (
<CardBody className="woocommerce-marketing-discover-tools-card-body-empty-content">
<Icon icon={ trendingUp } size={ 32 } />
@ -66,7 +66,7 @@ export const DiscoverTools = () => {
return (
<PluginsTabPanel
plugins={ plugins }
plugins={ data }
isLoading={ isLoading }
onInstallAndActivate={ installAndActivate }
/>

83
plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/useRecommendedPlugins.ts
View File

@ -11,24 +11,56 @@ import { STORE_KEY } from '~/marketing/data/constants';
import { useRecommendedChannels } from '~/marketing/hooks';
import { RecommendedPlugin } from '~/marketing/types';
type UseRecommendedPluginsWithoutChannels = {
/**
* Boolean indicating whether it is loading for the first time.
*/
isInitializing: boolean;
/**
* Boolean indicating whether it is loading.
*
* This will be true when data is being refetched
* after `invalidateResolution` is called in the `installAndActivate` method.
*/
isLoading: boolean;
/**
* An array of recommended marketing plugins without marketing channels.
*/
data: RecommendedPlugin[];
/**
* Install and activate a plugin.
*/
installAndActivate: ( slug: string ) => void;
};
const selector = 'getRecommendedPlugins';
const category = 'marketing';
export const useRecommendedPlugins = () => {
const {
loading: loadingRecommendedChannels,
data: dataRecommendedChannels,
} = useRecommendedChannels();
const { invalidateResolution, installAndActivateRecommendedPlugin } =
useDispatch( STORE_KEY );
/**
* A hook to return a list of recommended plugins without marketing channels,
* and related methods, to be used with the `DiscoverTools` component.
*/
export const useRecommendedPluginsWithoutChannels =
(): UseRecommendedPluginsWithoutChannels => {
const {
loading: loadingRecommendedChannels,
data: dataRecommendedChannels,
} = useRecommendedChannels();
const { invalidateResolution, installAndActivateRecommendedPlugin } =
useDispatch( STORE_KEY );
const installAndActivate = ( plugin: string ) => {
installAndActivateRecommendedPlugin( plugin, category );
invalidateResolution( selector, [ category ] );
};
const installAndActivate = ( slug: string ) => {
installAndActivateRecommendedPlugin( slug, category );
invalidateResolution( selector, [ category ] );
};
const { loading: loadingRecommendedPlugins, data: dataRecommendedPlugins } =
useSelect( ( select ) => {
const {
loading: loadingRecommendedPlugins,
data: dataRecommendedPlugins,
} = useSelect( ( select ) => {
const { getRecommendedPlugins, hasFinishedResolution } =
select( STORE_KEY );
@ -38,18 +70,19 @@ export const useRecommendedPlugins = () => {
};
}, [] );
const loading = loadingRecommendedPlugins || loadingRecommendedChannels;
const loading = loadingRecommendedPlugins || loadingRecommendedChannels;
const recommendedPluginsWithoutChannels = differenceWith(
dataRecommendedPlugins,
dataRecommendedChannels || [],
( a, b ) => a.product === b.product
);
const recommendedPluginsWithoutChannels = differenceWith(
dataRecommendedPlugins,
dataRecommendedChannels || [],
( a, b ) => a.product === b.product
);
return {
isInitializing: ! recommendedPluginsWithoutChannels.length && loading,
isLoading: loading,
plugins: recommendedPluginsWithoutChannels,
installAndActivate,
return {
isInitializing:
! recommendedPluginsWithoutChannels.length && loading,
isLoading: loading,
data: recommendedPluginsWithoutChannels,
installAndActivate,
};
};
};