Merge pull request #225 from vtex-apps/feature/interface-track-event

Feature/Send events passed in track field of interfaces

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [8.14.0] - 2019-03-21
+### Added
+- `TrackEventsWrapper` to add event listener based in track field of interface
+
 ## [8.13.2] - 2019-03-20
 
 ### Changed

manifest.json

@@ -1,7 +1,7 @@
 {
   "vendor": "vtex",
   "name": "render-runtime",
-  "version": "8.13.2",
+  "version": "8.14.0",
   "title": "VTEX Render runtime",
   "description": "The VTEX Render framework runtime",
   "defaultLocale": "pt-BR",

react/components/ExtensionPoint.tsx

@@ -8,6 +8,7 @@ import { TreePathContext, TreePathProps, withTreePath } from '../utils/treePath'
 import ExtensionPointComponent from './ExtensionPointComponent'
 import Loading from './Loading'
 import { RenderContext } from './RenderContext'
+import TrackEventsWrapper from './TrackEventsWrapper'
 
 interface Props {
   id: string,
@@ -81,7 +82,7 @@ class ExtensionPoint extends Component<ExtendedProps, State> {
     const { newTreePath } = this.state
     const { children, params, query, id, treePath, ...parentProps } = this.props
     const extension = runtime.extensions && runtime.extensions[newTreePath]
-    const { component = null, after = [], around = [], before = [], content = {}, props: extensionProps = null } = extension || {}
+    const { component = null, after = [], around = [], before = [], content = {}, props: extensionProps = null, track = [] } = extension || {}
 
     this.component = component
 
@@ -113,9 +114,13 @@ class ExtensionPoint extends Component<ExtendedProps, State> {
           newTreePath,
           props,
           (
-            <TreePathContext.Provider value={{ treePath: newTreePath }}>
-              <ExtensionPointComponent component={component} props={props} runtime={runtime} treePath={newTreePath}>{children}</ExtensionPointComponent>
-            </TreePathContext.Provider>
+            <TrackEventsWrapper
+              events={track}
+              id={id}>
+              <TreePathContext.Provider value={{ treePath: newTreePath }}>
+                <ExtensionPointComponent component={component} props={props} runtime={runtime} treePath={newTreePath}>{children}</ExtensionPointComponent>
+              </TreePathContext.Provider>
+            </TrackEventsWrapper>
           )
         )
       : loading

react/components/TrackEventsWrapper.tsx

@@ -0,0 +1,57 @@
+import { forEach } from 'ramda'
+import { PureComponent } from 'react'
+import ReactDOM from 'react-dom'
+
+interface Props {
+  events?: string[]
+  id?: string
+}
+
+const sendEvent = (id: string, event: string) => {
+  window.postMessage({
+    pageComponentInteraction : {
+      blockId: id,
+      interactionType: event,
+      namespace: 'renderRuntime',
+    }
+  }, '*')
+}
+
+class TrackEventsWrapper extends PureComponent<Props> {
+
+  public eventsHandler: Record<string, () => void> = {}
+
+  public componentDidMount(){
+    const { id, events } = this.props
+    if(events && events.length && id){
+      const element = ReactDOM.findDOMNode(this)
+      if(element && element.addEventListener){
+        forEach(
+          event => {
+            this.eventsHandler[event] = () => sendEvent(id, event)
+            element.addEventListener(event, this.eventsHandler[event])
+          }
+        , events)
+      }
+    }
+  }
+
+  public componentWillUnmount(){
+    const { id, events } = this.props
+    if(events && events.length && id){
+      const element = ReactDOM.findDOMNode(this)
+      if(element && element.addEventListener){
+        forEach(
+          event => element.removeEventListener(event, this.eventsHandler[event])
+        , events)
+      }
+    }
+  }
+
+  public render(){
+    const { children } = this.props
+    return children
+  }
+}
+
+export default TrackEventsWrapper

react/typings/global.d.ts

@@ -57,6 +57,7 @@ declare global {
       props?: any
     }
     component: string
+    track?: string[]
     props?: any
     content?: Record<string, any>
     shouldRender?: boolean