allow passing event metadata to emitOnDisplay

empathyco · Jan 18, 2024 · 243fb87 · 243fb87
1 parent 8c95efc
commit 243fb87
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 17 deletions.
diff --git a/packages/x-components/src/components/display-emitter.vue b/packages/x-components/src/components/display-emitter.vue
@@ -9,6 +9,7 @@
   import { MaybeElement } from '@vueuse/core';
   import { TaggingRequest } from '@empathyco/x-types';
   import { useEmitDisplayEvent } from '../composables';
+  import { WireMetadata } from '../wiring';
   import { NoElement } from './no-element';
 
   /**
@@ -27,13 +28,22 @@
       payload: {
         type: Object as PropType<TaggingRequest>,
         required: true
+      },
+      /**
+       * Optional event metadata.
+       *
+       * @public
+       */
+      eventMetadata: {
+        type: Object as PropType<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>
       }
     },
     setup(props) {
       const root = ref(null);
       const { unwatchDisplay } = useEmitDisplayEvent({
         element: root as Ref<MaybeElement>,
-        taggingRequest: props.payload
+        taggingRequest: props.payload,
+        ...(props.eventMetadata && { eventMetadata: props.eventMetadata })
       });
 
       onUnmounted(unwatchDisplay);

diff --git a/packages/x-components/src/composables/__tests__/use-on-display.spec.ts b/packages/x-components/src/composables/__tests__/use-on-display.spec.ts
@@ -1,7 +1,9 @@
 import { ref, nextTick } from 'vue';
 import { useElementVisibility } from '@vueuse/core';
+import { TaggingRequest } from '@empathyco/x-types';
 import { useEmitDisplayEvent, useOnDisplay } from '../use-on-display';
 import { use$x } from '../use-$x';
+import { WireMetadata } from '../../wiring';
 
 jest.mock('@vueuse/core', () => ({
   useElementVisibility: jest.fn()
@@ -123,11 +125,13 @@ describe(`testing ${useEmitDisplayEvent.name} composable`, () => {
     taggingRequest = {
       url: '',
       params: {}
-    }
+    },
+    eventMetadata = {}
   }: RenderUseEmitDisplayEventOptions = {}): RenderUseEmitDisplayEventAPI {
     const { isElementVisible, unwatchDisplay } = useEmitDisplayEvent({
       element,
-      taggingRequest
+      taggingRequest,
+      eventMetadata
     });
 
     const toggleElementVisibility = async (): Promise<void> => {
@@ -154,21 +158,49 @@ describe(`testing ${useEmitDisplayEvent.name} composable`, () => {
   });
 
   // eslint-disable-next-line max-len
-  it('emits `TrackableElementDisplayed` when the element is visible with the provided tagging request', async () => {
+  it('emits `TrackableElementDisplayed` when the element is visible with the provided tagging request converted to display taggable', async () => {
+    const taggingRequest = {
+      url: 'test-url',
+      params: { test: 'param' }
+    };
+
     const { toggleElementVisibility } = renderUseEmitDisplayEvent({
-      taggingRequest: {
-        url: 'test-url',
-        params: { test: 'param' }
-      }
+      taggingRequest
     });
 
     await toggleElementVisibility();
 
     expect($xEmitSpy).toHaveBeenCalled();
-    expect($xEmitSpy).toHaveBeenCalledWith('TrackableElementDisplayed', {
-      params: { test: 'param' },
-      url: 'test-url'
+    expect($xEmitSpy).toHaveBeenCalledWith(
+      'TrackableElementDisplayed',
+      {
+        tagging: {
+          display: taggingRequest
+        }
+      },
+      expect.anything()
+    );
+  });
+
+  // eslint-disable-next-line max-len
+  it('emits `TrackableElementDisplayed` when the element is visible with the provided event metadata', async () => {
+    const eventMetadata = {
+      feature: 'test-feature',
+      location: 'test-location'
+    };
+
+    const { toggleElementVisibility } = renderUseEmitDisplayEvent({
+      eventMetadata
     });
+
+    await toggleElementVisibility();
+
+    expect($xEmitSpy).toHaveBeenCalled();
+    expect($xEmitSpy).toHaveBeenCalledWith(
+      'TrackableElementDisplayed',
+      expect.anything(),
+      eventMetadata
+    );
   });
 
   it('emits the event only once', async () => {
@@ -234,7 +266,9 @@ type RenderUseEmitDisplayEventOptions = {
   /** The element to watch. */
   element?: HTMLElement;
   /** The payload for the `TrackableElementDisplayed` event. */
-  taggingRequest?: any;
+  taggingRequest?: TaggingRequest;
+  /** The event metadata. */
+  eventMetadata?: Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>;
 };
 
 /**

diff --git a/packages/x-components/src/composables/use-on-display.ts b/packages/x-components/src/composables/use-on-display.ts
@@ -1,6 +1,7 @@
 import { Ref, watch, WatchStopHandle } from 'vue';
 import { MaybeElement, useElementVisibility } from '@vueuse/core';
 import { TaggingRequest } from '@empathyco/x-types';
+import { WireMetadata } from '../wiring';
 import { use$x } from './use-$x';
 
 /**
@@ -50,14 +51,15 @@ export function useOnDisplay({
  */
 export function useEmitDisplayEvent({
   element,
-  taggingRequest
+  taggingRequest,
+  eventMetadata = {}
 }: UseEmitDisplayEventOptions): UseOnDisplayReturn {
   const $x = use$x();
 
   const { isElementVisible, unwatchDisplay } = useOnDisplay({
     element,
     callback: () => {
-      $x.emit('TrackableElementDisplayed', taggingRequest);
+      $x.emit('TrackableElementDisplayed', { tagging: { display: taggingRequest } }, eventMetadata);
     }
   });
 
@@ -90,4 +92,5 @@ type UseOnDisplayReturn = {
 type UseEmitDisplayEventOptions = {
   element: UseOnDisplayOptions['element'];
   taggingRequest: TaggingRequest;
+  eventMetadata?: Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>;
 };
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
@@ -254,7 +254,10 @@
                   data-test="brand-recommendation"
                   :persistInCache="true"
                 >
-                  <DisplayEmitter :payload="displayTagging">
+                  <DisplayEmitter
+                    :payload="displayTagging"
+                    :eventMetadata="{ feature: 'customer' }"
+                  >
                     <div class="x-flex x-flex-col x-gap-8 x-mb-16">
                       <QueryPreviewButton
                         class="x-w-fit x-button-xl x-button-ghost"

diff --git a/packages/x-components/src/x-modules/tagging/events.types.ts b/packages/x-components/src/x-modules/tagging/events.types.ts
@@ -1,4 +1,4 @@
-import { TaggingRequest } from '@empathyco/x-types';
+import { Taggable, TaggingRequest } from '@empathyco/x-types';
 import { TaggingConfig } from './config.types';
 
 /**
@@ -38,7 +38,7 @@ export interface TaggingXEvents {
    * Display trackable element has appeared in the viewport.
    * Payload: The display tagging info.
    */
-  TrackableElementDisplayed: TaggingRequest;
+  TrackableElementDisplayed: Taggable;
   /**
    * The user has clicked on the add to cart button from PDP.
    * Payload: The id of the {@link @empathyco/x-types#Result | result} that the user clicked.