128 lines
3.0 KiB
JavaScript
128 lines
3.0 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { compose } from '@wordpress/compose';
|
|
import clsx from 'clsx';
|
|
import { withDispatch, withSelect } from '@wordpress/data';
|
|
import PropTypes from 'prop-types';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
import RecommendedExtensionsItem from './item';
|
|
import RecommendedExtensionsPlaceholder from './placeholder';
|
|
import { STORE_KEY } from '~/marketing/data/constants';
|
|
import Card from '../card';
|
|
|
|
const RecommendedExtensions = ( {
|
|
extensions,
|
|
isLoading,
|
|
title,
|
|
description,
|
|
category,
|
|
} ) => {
|
|
if ( extensions.length === 0 && ! isLoading ) {
|
|
return null;
|
|
}
|
|
|
|
const categoryClass = category
|
|
? `woocommerce-marketing-recommended-extensions-card__category-${ category }`
|
|
: '';
|
|
const placholdersCount = 5;
|
|
|
|
return (
|
|
<Card
|
|
title={ title }
|
|
description={ description }
|
|
className={ clsx(
|
|
'woocommerce-marketing-recommended-extensions-card',
|
|
categoryClass
|
|
) }
|
|
>
|
|
{ isLoading ? (
|
|
<div
|
|
className={ clsx(
|
|
'woocommerce-marketing-recommended-extensions-card__items',
|
|
`woocommerce-marketing-recommended-extensions-card__items--count-${ placholdersCount }`
|
|
) }
|
|
>
|
|
{ [ ...Array( placholdersCount ).keys() ].map( ( key ) => (
|
|
<RecommendedExtensionsPlaceholder key={ key } />
|
|
) ) }
|
|
</div>
|
|
) : (
|
|
<div
|
|
className={ clsx(
|
|
'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>
|
|
) }
|
|
</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' ),
|
|
description: __(
|
|
'Great marketing requires the right tools. Take your marketing to the next level with our recommended marketing extensions.',
|
|
'woocommerce'
|
|
),
|
|
};
|
|
|
|
export { RecommendedExtensions };
|
|
export { default as RecommendedExtensionsPlaceholder } from './placeholder';
|
|
|
|
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 );
|