Merge 751f07d into 1bbbe78

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Send productClick events to Pixel Manager.
 
 ## [1.13.0] - 2019-05-07
 

manifest.json

@@ -22,6 +22,7 @@
     "vtex.product-summary": "2.x",
     "vtex.styleguide": "9.x",
     "vtex.slider": "0.x",
-    "vtex.store-icons": "0.x"
+    "vtex.store-icons": "0.x",
+    "vtex.pixel-manager": "0.x"
   }
-}
+}

react/ProductList.js

@@ -10,7 +10,7 @@ import GapPaddingTypes, {
   getGapPaddingValues,
 } from './paddingEnum'
 import ShelfContent from './ShelfContent'
-import ShelfItem from './ShelfItem'
+import { shelfItemPropTypes } from './propTypes'
 
 import shelf from './shelf.css'
 
@@ -167,7 +167,7 @@ ProductList.propTypes = {
   /** Loading status */
   loading: PropTypes.bool,
   /** Graphql data response. */
-  products: PropTypes.arrayOf(ShelfItem.propTypes.item),
+  products: PropTypes.arrayOf(shelfItemPropTypes.item),
   /** Verifies if is a mobile device. */
   isMobile: PropTypes.bool,
   ...productListSchemaPropTypes,

react/RelatedProducts.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react'
 
 import ProductList from './ProductList'
 import { productListSchemaPropTypes } from './propTypes'
-import ShelfItem from './ShelfItem'
+import { shelfItemPropTypes } from './propTypes'
 import shelf from './shelf.css'
 
 /**
@@ -21,11 +21,11 @@ export default class RelatedProducts extends Component {
         /** Recommendations property */
         recommendations: PropTypes.shape({
           /** View recommendations (who saw this product, also saw...) */
-          view: PropTypes.arrayOf(ShelfItem.propTypes.item),
+          view: PropTypes.arrayOf(shelfItemPropTypes.item),
           /** Buy recommendations (who bought this product, also bought...) */
-          buy: PropTypes.arrayOf(ShelfItem.propTypes.item),
+          buy: PropTypes.arrayOf(shelfItemPropTypes.item),
           /** Similar products */
-          similars: PropTypes.arrayOf(ShelfItem.propTypes.item),
+          similars: PropTypes.arrayOf(shelfItemPropTypes.item),
         }),
       }),
     }),

react/ShelfContent.js

@@ -15,6 +15,7 @@ import {
 import { getGapPaddingValues } from './paddingEnum'
 import ScrollTypes from './ScrollTypes'
 import ShelfItem from './ShelfItem'
+import { shelfItemPropTypes } from './propTypes'
 
 import shelf from './shelf.css'
 
@@ -158,7 +159,7 @@ ShelfContent.defaultProps = {
 
 ShelfContent.propTypes = {
   /** List of products */
-  products: PropTypes.arrayOf(ShelfItem.propTypes.item),
+  products: PropTypes.arrayOf(shelfItemPropTypes.item),
   /** Max Items per page */
   itemsPerPage: PropTypes.number.isRequired,
   /** Max items in shelf */

react/ShelfItem.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { path, assocPath } from 'ramda'
 
 import { ExtensionPoint } from 'vtex.render-runtime'
+import { Pixel } from 'vtex.pixel-manager/PixelContext'
 
 import { shelfItemPropTypes } from './propTypes'
 import { changeImageUrlSize, toHttps } from './utils/urlHelpers'
@@ -10,9 +11,16 @@ import { changeImageUrlSize, toHttps } from './utils/urlHelpers'
  * ShelfItem Component. Normalizes the item received in the props
  * to adapt to the extension point prop.
  */
-export default class ShelfItem extends Component {
+class ShelfItem extends Component {
   static propTypes = shelfItemPropTypes
 
+  sendProductClickEvent = product => {
+    this.props.push({
+      event: 'productClick',
+      product: product,
+    })
+  }
+
   findAvailableProduct = item =>
     item.sellers.find(
       ({ commertialOffer = {} }) => commertialOffer.AvailableQuantity > 0
@@ -47,8 +55,11 @@ export default class ShelfItem extends Component {
       <ExtensionPoint
         id="product-summary"
         product={this.normalizeProduct(item)}
+        actionOnClick={() => this.sendProductClickEvent(item)}
         {...newSummary}
       />
     )
   }
 }
+
+export default Pixel(ShelfItem)

react/__mocks__/vtex.pixel-manager/PixelContext.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export function Pixel(Comp) {
+  return class extends React.Component {
+    render() {
+      return <Comp {...this.props} push={() => {}} subscribe={() => {}} />
+    }
+  }
+}