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

84 lines
2.0 KiB
TypeScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { Icon, trendingUp } from '@wordpress/icons';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import {
CollapsibleCard,
CardBody,
CenteredSpinner,
} from '~/marketing/components';
import { useRecommendedPlugins } from './useRecommendedPlugins';
import { PluginsTabPanel } from './PluginsTabPanel';
import './DiscoverTools.scss';
export const DiscoverTools = () => {
const { isInitializing, isLoading, plugins, installAndActivate } =
useRecommendedPlugins();
/**
* Renders card body.
*
* - If loading is in progress, it renders a loading indicator.
* - If there are zero plugins, it renders an empty content.
* - Otherwise, it renders PluginsTabPanel.
*/
const renderCardContent = () => {
if ( isInitializing ) {
return (
<CardBody>
<CenteredSpinner />
</CardBody>
);
}
if ( plugins.length === 0 ) {
return (
<CardBody className="woocommerce-marketing-discover-tools-card-body-empty-content">
<Icon icon={ trendingUp } size={ 32 } />
<div>
{ __(
'Continue to reach the right audiences and promote your products in ways that matter to them with our range of marketing solutions.',
'woocommerce'
) }
</div>
<Button
variant="tertiary"
href="https://woocommerce.com/product-category/woocommerce-extensions/marketing-extensions/"
onClick={ () => {
recordEvent( 'marketing_explore_more_extensions' );
} }
>
{ __(
'Explore more marketing extensions',
'woocommerce'
) }
</Button>
</CardBody>
);
}
return (
<PluginsTabPanel
plugins={ plugins }
isLoading={ isLoading }
onInstallAndActivate={ installAndActivate }
/>
);
};
return (
<CollapsibleCard
header={ __( 'Discover more marketing tools', 'woocommerce' ) }
>
{ renderCardContent() }
</CollapsibleCard>
);
};