woocommerce/plugins/woocommerce-admin/client/marketing/components/recommended-extensions/index.js

/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { Spinner } from '@wordpress/components';
import classnames from 'classnames';
import { withDispatch, withSelect } from '@wordpress/data';
import PropTypes from 'prop-types';

/**
 * WooCommerce dependencies
 */
import { Card } from '@woocommerce/components';

/**
 * Internal dependencies
 */
import './style.scss'
import RecommendedExtensionsItem from './item';
import { STORE_KEY } from '../../data/constants';

const RecommendedExtensions = ( {
	extensions,
	isLoading,
	title,
	description,
	category,
} ) => {

	if ( extensions.length === 0 && ! isLoading ) {
		return null;
	}

	const categoryClass = ( category ) ? `woocommerce-marketing-recommended-extensions-card__category-${category}` : '';

	return (
		<Card
			title={ title }
			description={ description }
			className={ classnames(
				'woocommerce-marketing-recommended-extensions-card',
				categoryClass,
			) }
		>
			<Fragment>
				{ isLoading ? <Spinner /> : (
					<div className={ classnames(
						'woocommerce-marketing-recommended-extensions-card__items',
						`woocommerce-marketing-recommended-extensions-card__items--count-${extensions.length}`,
					) }>
						{ extensions.map( ( extension ) => (
							<RecommendedExtensionsItem
								key={ extension.product }
								category={ category }
								{ ...extension }
							/>
						) ) }
					</div>
				) }
			</Fragment>
		</Card>
	)
}

RecommendedExtensions.propTypes = {
	/**
	 * Array of recommended extensions.
	 */
	extensions: PropTypes.arrayOf( PropTypes.object ).isRequired,
	/**
	 * Whether the card is loading.
	 */
	isLoading: PropTypes.bool.isRequired,
	/**
	 * Cart title.
	 */
	title: PropTypes.string,
	/**
	 * Card description.
	 */
	description: PropTypes.string,
	/**
	 * Category of extensions to display.
	 */
	category: PropTypes.string,
};

RecommendedExtensions.defaultProps = {
	title: __( 'Recommended extensions', 'woocommerce-admin' ),
	description: __( 'Great marketing requires the right tools. Take your marketing to the next level with our recommended marketing extensions.', 'woocommerce-admin' ),
};

export { RecommendedExtensions }

export default compose(
	withSelect( ( select, props ) => {
		const { getRecommendedPlugins, isResolving } = select( STORE_KEY );

		return {
			extensions: getRecommendedPlugins( props.category ),
			isLoading: isResolving( 'getRecommendedPlugins', [ props.category ] ),
		};
	} ),
	withDispatch( ( dispatch ) => {
		const { createNotice } = dispatch( 'core/notices' );

		return {
			createNotice,
		};
	} )
)( RecommendedExtensions );