51 lines
1.2 KiB
JavaScript
51 lines
1.2 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { Component } from '@wordpress/element';
|
|
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';
|
|
|
|
class RecommendedExtensionsItem extends Component {
|
|
|
|
onProductClick = () => {
|
|
const { title } = this.props;
|
|
recordEvent( 'marketing_recommended_extension', { name: title } );
|
|
}
|
|
|
|
render() {
|
|
const { title, description, icon, url } = this.props;
|
|
const classNameBase = 'woocommerce-marketing-recommended-extensions-item';
|
|
const connectURL = getInAppPurchaseUrl( url );
|
|
|
|
return (
|
|
<a href={ connectURL }
|
|
className={ classNameBase }
|
|
onClick={ this.onProductClick }
|
|
>
|
|
<ProductIcon src={ icon } />
|
|
|
|
<div className={ `${ classNameBase }__text` }>
|
|
<h4>{ title }</h4>
|
|
<p>{ description }</p>
|
|
</div>
|
|
</a>
|
|
)
|
|
}
|
|
}
|
|
|
|
RecommendedExtensionsItem.propTypes = {
|
|
title: PropTypes.string.isRequired,
|
|
description: PropTypes.string.isRequired,
|
|
icon: PropTypes.string.isRequired,
|
|
url: PropTypes.string.isRequired,
|
|
};
|
|
|
|
export default RecommendedExtensionsItem;
|