/** * External dependencies */ import { Fragment } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { TabPanel, Button } from '@wordpress/components'; import { Icon, trendingUp } from '@wordpress/icons'; import { recordEvent } from '@woocommerce/tracks'; import { Pill, Spinner } from '@woocommerce/components'; import { flatMapDeep, uniqBy } from 'lodash'; /** * Internal dependencies */ import { CollapsibleCard, CardDivider, CardBody, PluginCardBody, } from '~/marketing/components'; import { getInAppPurchaseUrl } from '~/lib/in-app-purchase'; import { Plugin } from './types'; import { useRecommendedPlugins } from './useRecommendedPlugins'; import './DiscoverTools.scss'; /** * Return tabs (`{ name, title }`) for the TabPanel. * * Subcategories that have no plugins * will not be displayed as a tab in the UI. * This is done by doing the following: * * 1. Get an array of unique subcategories from the list of plugins. * 2. Map the subcategories schema into tabs schema. */ const getTabs = ( plugins: Plugin[] ) => { const pluginSubcategories = uniqBy( flatMapDeep( plugins, ( p ) => p.subcategories ), ( subcategory ) => subcategory.slug ); return pluginSubcategories.map( ( subcategory ) => ( { name: subcategory.slug, title: subcategory.name, } ) ); }; const renderPluginCardBodies = ( plugins: Plugin[] ) => { return plugins.map( ( el, idx ) => { return ( } name={ el.title } pills={ el.tags.map( ( tag ) => ( { tag.name } ) ) } description={ el.description } button={ } /> { idx !== plugins.length - 1 && } ); } ); }; export const DiscoverTools = () => { const { isLoading, plugins } = 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 a TabPanel. Each tab is a subcategory displaying the plugins. */ const renderCardContent = () => { if ( isLoading ) { return ( ); } if ( plugins.length === 0 ) { return (
{ __( 'Continue to reach the right audiences and promote your products in ways that matter to them with our range of marketing solutions.', 'woocommerce' ) }
); } return ( { ( tab ) => { const subcategoryPlugins = plugins.filter( ( el ) => el.subcategories.some( ( subcategory ) => subcategory.slug === tab.name ) ); return ( <> { renderPluginCardBodies( subcategoryPlugins ) } ); } } ); }; return ( { renderCardContent() } ); };