Add ProductClick EE component

Author: AnderRV

packages/enhanced-ecommerce/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lin3s-react-analytics-enhanced-ecommerce",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "author": "LIN3S",
   "license": "MIT",
   "description": "React components to help integrating Google Analytics and Google Tag Manager in a React application",

packages/enhanced-ecommerce/src/ProductClick.js

@@ -0,0 +1,33 @@
+import React, {PureComponent} from 'react';
+import {pushDataLayer} from 'lin3s-react-analytics';
+import PropTypes from 'prop-types';
+
+class ProductClick extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleProductClick = this.handleProductClick.bind(this);
+  }
+
+  handleProductClick() {
+    const {productTransform, product, ...rest} = this.props;
+
+    pushDataLayer(productTransform(product, {...rest}));
+  }
+
+  render() {
+    const {component: Component, ...rest} = this.props;
+
+    return (
+      <div onClick={this.handleProductClick}><Component {...rest}/></div>
+    );
+  }
+}
+
+ProductClick.propTypes = {
+  component: PropTypes.func.isRequired,
+  product: PropTypes.object.isRequired,
+  productTransform: PropTypes.func.isRequired,
+};
+
+export default ProductClick;

packages/enhanced-ecommerce/src/index.js

@@ -1,12 +1,14 @@
 import Checkout from './Checkout';
 import Page from './Page';
+import ProductClick from './ProductClick';
 import ProductDetail from './ProductDetail';
 import ProductImpressions from './ProductImpressions';
 import Purchase from './Purchase';
 
 export {
   Checkout,
   Page,
+  ProductClick,
   ProductDetail,
   ProductImpressions,
   Purchase,