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

58 lines
1.3 KiB
JavaScript

/**
* External dependencies
*/
import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
import './style.scss';
import { ProductIcon } from '../../components/';
import { recordEvent } from 'lib/tracks';
import { getInAppPurchaseUrl } from 'lib/in-app-purchase';
const RecommendedExtensionsItem = ( {
title,
description,
url,
product,
category,
} ) => {
const onProductClick = () => {
recordEvent( 'marketing_recommended_extension', { name: title } );
};
const classNameBase = 'woocommerce-marketing-recommended-extensions-item';
const connectURL = getInAppPurchaseUrl( url );
// Temporary fix to account for different styles between marketing & coupons
if ( category === 'coupons' && product === 'automatewoo' ) {
product = `automatewoo-alt`;
}
return (
<a
href={ connectURL }
className={ classNameBase }
onClick={ onProductClick }
>
<ProductIcon product={ product } />
<div className={ `${ classNameBase }__text` }>
<h4>{ title }</h4>
<p>{ description }</p>
</div>
</a>
);
};
RecommendedExtensionsItem.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
product: PropTypes.string.isRequired,
category: PropTypes.string.isRequired,
};
export default RecommendedExtensionsItem;