87 lines
2.2 KiB
JavaScript
87 lines
2.2 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { Component, 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';
|
|
|
|
class RecommendedExtensions extends Component {
|
|
render() {
|
|
const { isLoading, extensions } = this.props;
|
|
|
|
if ( extensions.length === 0 && ! isLoading ) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Card
|
|
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' ) }
|
|
className="woocommerce-marketing-recommended-extensions-card"
|
|
>
|
|
<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 }
|
|
{ ...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,
|
|
};
|
|
|
|
export default compose(
|
|
withSelect( ( select ) => {
|
|
const { getRecommendedPlugins, isResolving } = select( STORE_KEY );
|
|
|
|
return {
|
|
extensions: getRecommendedPlugins(),
|
|
isLoading: isResolving( 'getRecommendedPlugins' ),
|
|
};
|
|
} ),
|
|
withDispatch( ( dispatch ) => {
|
|
const { createNotice } = dispatch( 'core/notices' );
|
|
|
|
return {
|
|
createNotice,
|
|
};
|
|
} )
|
|
)( RecommendedExtensions );
|
|
|