Merge 36a0fa2 into a615252

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 cart events to Pixel Manager when updating quantity of product.
 
 ## [2.21.0] - 2019-05-21
 ### Fixed

manifest.json

@@ -18,6 +18,7 @@
     "vtex.store-components": "3.x",
     "vtex.store-resources": "0.x",
     "vtex.product-review-interfaces": "1.x",
-    "vtex.styleguide": "9.x"
+    "vtex.styleguide": "9.x",
+    "vtex.pixel-manager": "0.x"
   }
 }

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={() => {}} />
+    }
+  }
+}

react/legacy/components/ProductQuantityStepper.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
+import { path } from 'ramda'
 import PropTypes from 'prop-types'
 import { NumericStepper, withToast } from 'vtex.styleguide'
+import { Pixel } from 'vtex.pixel-manager/PixelContext'
 import { debounce } from 'lodash'
 import { injectIntl, intlShape } from 'react-intl'
 import { compose, graphql } from 'react-apollo'
@@ -29,6 +31,28 @@ class ProductQuantityStepper extends Component {
     canIncrease: true,
   }
 
+  pushPixelCartEvents = ({ isAdditionOfProd, product }) => {
+    const updatedProduct = {
+      id: path(['sku', 'itemId'], product),
+      name: path(['productName'], product),
+      skuName: path(['sku', 'name'], product),
+      price: path(['assemblyOptions', 'parentPrice'], product),
+      quantity: path(['quantity'], product),
+    }
+    if (isAdditionOfProd) {
+      this.props.push({
+        event: 'addToCart',
+        items: [updatedProduct],
+      })
+    } else {
+      // removal of product
+      this.props.push({
+        event: 'removeFromCart',
+        items: [updatedProduct],
+      })
+    }
+  }
+
   componentDidUpdate = prevProps => {
     const {
       product: { quantity: prevQuantity },
@@ -39,6 +63,10 @@ class ProductQuantityStepper extends Component {
       intl,
     } = this.props
     if (prevQuantity !== quantity) {
+      this.pushPixelCartEvents({
+        isAdditionOfProd: prevQuantity < quantity,
+        product: this.props.product,
+      })
       const canIncrease = quantity === this.state.quantity
       this.setState({ quantity, canIncrease })
       if (!canIncrease) {
@@ -106,6 +134,7 @@ const withUpdateItemsMutation = graphql(UPDATE_ITEMS_MUTATION, {
 })
 
 export default compose(
+  Pixel,
   injectIntl,
   withToast,
   withUpdateItemsMutation