Merge pull request #34 from vtex-apps/feature/custom-events

Add 'customPixelEventId' prop

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
+- `customPixelEventId` prop.
 
 ## [0.13.0] - 2020-08-10
 ### Added

docs/README.md

@@ -118,40 +118,49 @@ const Menu = () => (
 
 ## Configuration
 
-The Drawer component accepts a few props that allow you to customize it.
+The `drawer` block accepts a few props that allow you to customize it.
 
-| Prop name        | Type                                                                       | Description                                                                    | Default value  |
-| ---------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -------------- |
-| `maxWidth`       | `number` or `string`                                                       | Define the open Drawer's maximum width.                                        | `450`          |
-| `isFullWidth`    | `Boolean`                                                                  | Control whether or not the open Drawer should occupy the full available width. | `false`        |
-| `slideDirection` | `'horizontal'`|`'vertical'`|`'rightToLeft'`|`'leftToRight'` | Controls the opening animation's direction.                                    | `'horizontal'` |
-| `backdropMode` | `'default'`|`'none'` | Controls if it should display the backdrop when the Drawer is open |
+| Prop name            | Type                                                                       | Description                                                                           | Default value  |
+| -------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -------------- |
+| `maxWidth`           | `number` or `string`                                                       | Define the open Drawer's maximum width.                                               | `450`          |
+| `isFullWidth`        | `Boolean`                                                                  | Control whether or not the open Drawer should occupy the full available width.        | `false`        |
+| `slideDirection`     | `'horizontal'`|`'vertical'`|`'rightToLeft'`|`'leftToRight'` | Controls the opening animation's direction.                                           | `'horizontal'` |
+| `backdropMode`       | `'default'`|`'none'`                                                  | Controls if it should display the backdrop when the Drawer is open                    |
+| `customPixelEventId` | `string`   | Store event ID responsible for triggering the `drawer` to automatically open itself on the interface. | `undefined`    |
+| `customPixelEventName` | `string`                                                                   | Store event name responsible for triggering the `drawer` to automatically open itself on the interface. Some examples are: `'addToCart'` and `'removeFromCart'` events. Notice that using this prop will make the drawer open in **every** event with the specified name if no `customPixelEventId` is specified. | `undefined`    |
 
-The `DrawerCloseButton` accepts the following props to customize it:
+The `drawer-close-button` block accepts the following props to customize it:
 
 | Prop name | Type                     | Description                                   | Default value |
 | --------- | ------------------------ | --------------------------------------------- | ------------- |
 | `size`    | `Number`                 | Define the size of the icon inside the button | `30`          |
 | `type`    | `'filled'`|`'line'` | Define the type of the icon                   | `'line'`      |
 
+The `drawer-trigger` block accepts the following prop to customize it:
+
+| Prop name            | Type     | Description                                                           | Default value |
+| -------------------- | -------- | --------------------------------------------------------------------- | ------------- |
+| `customPixelEventId` | `string` | Defines the event ID to be sent whenever users interact with the Drawer component. | `undefined`   |
+
 ## Customization
 
 In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).
 
-| CSS Handles          |
-| -------------------- |
-| `drawer`             |
-| `opened`             |
-| `overlay`            |
-| `overlay--visible`   |
-| `closed`             |
-| `moving`             |
-| `drawerContent`      |
-| `drawerHeader`       |
-| `openIconContainer`  |
-| `closeIconContainer` |
-| `closeIconButton`    |
-| `childrenContainer`  |
+| CSS Handles              |
+| ------------------------ |
+| `drawer`                 |
+| `opened`                 |
+| `overlay`                |
+| `overlay--visible`       |
+| `closed`                 |
+| `moving`                 |
+| `drawerContent`          |
+| `drawerHeader`           |
+| `drawerTriggerContainer` |
+| `openIconContainer`      |
+| `closeIconContainer`     |
+| `closeIconButton`        |
+| `childrenContainer`      |
 
 ## Contributors ✨
 

manifest.json

@@ -13,11 +13,10 @@
   "dependencies": {
     "vtex.store-icons": "0.x",
     "vtex.css-handles": "0.x",
-    "vtex.responsive-values": "0.x"
+    "vtex.responsive-values": "0.x",
+    "vtex.pixel-manager": "1.x"
   },
   "mustUpdateAt": "2020-03-28",
-  "registries": [
-    "smartcheckout"
-  ],
+  "registries": ["smartcheckout"],
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

react/Drawer.tsx

@@ -9,6 +9,8 @@ import { defineMessages } from 'react-intl'
 import { IconMenu } from 'vtex.store-icons'
 import { useCssHandles } from 'vtex.css-handles'
 import { useChildBlock, ExtensionPoint } from 'vtex.render-runtime'
+import { usePixelEventCallback } from 'vtex.pixel-manager'
+import { PixelData } from 'vtex.pixel-manager/react/PixelContext'
 import {
   MaybeResponsiveValue,
   useResponsiveValue,
@@ -44,18 +46,20 @@ type Width = '100%' | 'auto'
 type BackdropMode = 'visible' | 'none'
 
 interface Props {
-  actionIconId: string
-  dismissIconId: string
+  actionIconId?: string
+  dismissIconId?: string
   position: Position
   width?: Width
-  height: Height
+  height?: Height
   slideDirection?: SlideDirection
-  isFullWidth: boolean
+  isFullWidth?: boolean
   maxWidth?: number | string
   children: React.ReactNode
-  customIcon: React.ReactElement
-  header: React.ReactElement
+  customIcon?: React.ReactElement
+  header?: React.ReactElement
   backdropMode?: MaybeResponsiveValue<BackdropMode>
+  customPixelEventId?: PixelData['id']
+  customPixelEventName?: PixelData['event']
 }
 
 function menuReducer(state: MenuState, action: MenuAction) {
@@ -116,6 +120,8 @@ function Drawer(props: Props) {
     maxWidth = 450,
     slideDirection = 'horizontal',
     backdropMode: backdropModeProp = 'visible',
+    customPixelEventId,
+    customPixelEventName,
   } = props
   const handles = useCssHandles(CSS_HANDLES)
   const backdropMode = useResponsiveValue(backdropModeProp)
@@ -125,6 +131,20 @@ function Drawer(props: Props) {
   const { isOpen: isMenuOpen, hasBeenOpened: hasMenuBeenOpened } = menuState
   const [isMoving, setIsMoving] = useState(false)
 
+  // Always add the listener for 'openDrawer' events, since they're sent by
+  // the drawer-trigger block.
+  usePixelEventCallback({
+    eventId: customPixelEventId,
+    handler: openMenu,
+    eventName: 'openDrawer',
+  })
+
+  usePixelEventCallback({
+    eventId: customPixelEventId,
+    handler: openMenu,
+    eventName: customPixelEventName,
+  })
+
   const handleContainerClick: MouseEventHandler<HTMLElement> = event => {
     // target is the clicked element
     // currentTarget is the element which was attached the event (e.g. the container)

react/DrawerTrigger.tsx

@@ -1,5 +1,42 @@
-import React, { Fragment, FC } from 'react'
+import React, { FC } from 'react'
+import { usePixel } from 'vtex.pixel-manager'
+import { PixelData } from 'vtex.pixel-manager/react/PixelContext'
+import { useCssHandles } from 'vtex.css-handles'
 
-const DrawerTrigger: FC = ({ children }) => <Fragment>{children}</Fragment>
+interface Props {
+  customPixelEventId?: string
+}
+
+const CSS_HANDLES = ['drawerTriggerContainer'] as const
+
+const DrawerTrigger: FC<Props> = ({ children, customPixelEventId }) => {
+  const { push } = usePixel()
+  const handles = useCssHandles(CSS_HANDLES)
+
+  const handleInteraction = () => {
+    if (!customPixelEventId) {
+      return
+    }
+
+    const pixelEvent: PixelData = {
+      id: customPixelEventId,
+      event: 'openDrawer',
+    }
+
+    push(pixelEvent)
+  }
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className={handles.drawerTriggerContainer}
+      onClick={handleInteraction}
+      onKeyDown={handleInteraction}
+    >
+      {children}
+    </div>
+  )
+}
 
 export default DrawerTrigger

react/package.json

@@ -15,8 +15,9 @@
     "@types/react-dom": "^16.8.4",
     "@vtex/test-tools": "^3.0.0",
     "typescript": "3.8.3",
-    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.css-handles",
-    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime",
+    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.css-handles",
+    "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager",
+    "vtex.responsive-values": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react",
     "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-icons"
   },
   "version": "0.13.0"

react/typings/vtex.render-runtime.d.ts

@@ -1,7 +1,4 @@
-/* eslint-disable import/order */
-
-import 'vtex.render-runtime'
-
 declare module 'vtex.render-runtime' {
   export const useChildBlock: (opts: { id: string }) => {} | null
+  export const ExtensionPoint: any
 }

react/yarn.lock

@@ -4805,13 +4805,17 @@ [email protected]:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-"vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.css-handles":
-  version "0.4.2"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.css-handles#62ee61d1bb9efdc919e5cf4bb44fabcf9050d255"
+"vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.css-handles":
+  version "0.4.4"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.css-handles#8c45c6decf9acd2b944e07261686decff93d6422"
+
+"vtex.pixel-manager@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager":
+  version "1.3.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager#84e731e138aa3aaf98dd519e5cff929cdf3745d8"
 
-"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.[email protected]/public/@types/vtex.render-runtime":
-  version "8.95.1"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.[email protected]/public/@types/vtex.render-runtime#3aae291d0cd239d3059ea8ae8c3c2800ce36d22f"
+"vtex.responsive-values@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.[email protected]/public/_types/react":
+  version "0.0.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.[email protected]/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
 
 "vtex.store-icons@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-icons":
   version "0.17.0"