merge conflicts

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Add `MicroData` component do `ProductPage`, so Google can have a detailed info on the Products.
 
 - Add the `SearchPage` GraphQL queries.
+- Data layer intergration in the `ProductPage`.
 
 ## [0.3.0] - 2018-6-25
 ### Added

react/ProductPage.js

@@ -1,42 +1,70 @@
 import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { graphql } from 'react-apollo'
+import { graphql, compose } from 'react-apollo'
 import { ExtensionPoint } from 'render'
 import MicroData from './components/MicroData'
+
+import withDataLayer, { dataLayerProps } from './components/withDataLayer'
 import productQuery from './queries/productQuery.gql'
 
 class ProductPage extends Component {
   static contextTypes = {
     prefetchPage: PropTypes.func,
   }
+
   static propTypes = {
     params: PropTypes.object,
     data: PropTypes.object,
+    ...dataLayerProps,
+  }
+
+  pushToDataLayer = product => {
+    this.props.pushToDataLayer({
+      event: 'productDetail',
+      ecommerce: {
+        detail: {
+          products: [{
+            name: product.productName,
+            brand: product.brand,
+            category: product.categories.length > 0 ? product.categories[0] : undefined,
+            id: product.productId,
+          }],
+        },
+      },
+    })
   }
 
   componentDidMount() {
     this.context.prefetchPage('store/home')
+
+    if (!this.props.data.loading) {
+      this.pushToDataLayer(this.props.data.product)
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.data.loading && !this.props.data.loading) {
+      this.pushToDataLayer(this.props.data.product)
+    }
   }
 
   render() {
     const { data } = this.props
     const { loading, variables, product } = data
 
     return (
-      <div>
-        <div className="vtex-product-details-container">
-          {!loading && (
-            <Fragment>
-              <MicroData product={product} />
-              <ExtensionPoint
-                id="container"
-                slug={variables.slug}
-                categories={product.categories}
-                product={product}
-              />
-            </Fragment>
-          )}
-        </div>
+      <div className="vtex-product-details-container">
+        {!loading && (
+          <Fragment>
+            <MicroData product={product} />
+            <ExtensionPoint
+              id="container"
+              slug={variables.slug}
+              categories={product.categories}
+              product={product}
+            />
+          </Fragment>
+        )}
       </div>
     )
   }
@@ -50,6 +78,7 @@ const options = {
   }),
 }
 
-export default graphql(productQuery, options)(
-  ProductPage
-)
+export default compose(
+  graphql(productQuery, options),
+  withDataLayer
+)(ProductPage)

react/StoreTemplate.js

@@ -1,20 +1,33 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { ExtensionPoint } from 'render'
 
+import { DataLayerProvider } from './components/withDataLayer'
+
 export default class StoreTemplate extends Component {
   static propTypes = {
     children: PropTypes.element,
   }
 
+  pushToDataLayer = obj => {
+    window.dataLayer.push(obj)
+  }
+
   render() {
+    window.dataLayer = window.dataLayer || []
+
     return (
-      <Fragment>
+      <DataLayerProvider
+        value={{
+          dataLayer: window.dataLayer,
+          pushToDataLayer: this.pushToDataLayer,
+        }}
+      >
         <ExtensionPoint id="theme" />
         <ExtensionPoint id="header" />
         <div className="vtex-store__template">{this.props.children}</div>
         <ExtensionPoint id="footer" />
-      </Fragment>
+      </DataLayerProvider>
     )
   }
 }

react/components/withDataLayer.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+const { Consumer, Provider } = React.createContext({
+  dataLayer: [],
+  pushToDataLayer: () => {},
+})
+
+export { Provider as DataLayerProvider }
+
+export default function withDataLayer(WrappedComponent) {
+  return class DataLayer extends Component {
+    static displayName =
+      `DataLayer(${WrappedComponent.displayName || WrappedComponent.name})`
+
+    render() {
+      return (
+        <Consumer>
+          {context => (
+            <WrappedComponent {...this.props} {...context} />
+          )}
+        </Consumer>
+      )
+    }
+  }
+}
+
+export const dataLayerProps = {
+  dataLayer: PropTypes.array.isRequired,
+  pushToDataLayer: PropTypes.func.isRequired,
+}
+