From 9514e3091aaad52cef14d0466fddb2a882e28001 Mon Sep 17 00:00:00 2001
From: Dmitri Voronianski <dmitri.voronianskyi@sumup.com>
Date: Wed, 1 Dec 2021 15:50:27 +0100
Subject: [PATCH] feat(usepageviewtrigger): add support for custom parameters
 in page view event (#209)

---
 README.md                                     |  3 ++
 .../usePageViewTrigger.spec.tsx               | 44 ++++++++++++++-----
 .../usePageViewTrigger/usePageViewTrigger.ts  | 13 ++++--
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 66ac3c5..2353294 100644
--- a/README.md
+++ b/README.md
@@ -359,6 +359,9 @@ The `pageView` event will be dispatched with:
 interface Event {
   app: string;
   view: string;
+  customParameters?: {
+    [key: string]: any
+  };
   event: 'page-view'; // Added internally by the hook
   timestamp: number; // Added internally by the library when the dispatch function is called
 }
diff --git a/src/hooks/usePageViewTrigger/usePageViewTrigger.spec.tsx b/src/hooks/usePageViewTrigger/usePageViewTrigger.spec.tsx
index 680ee92..4fce937 100644
--- a/src/hooks/usePageViewTrigger/usePageViewTrigger.spec.tsx
+++ b/src/hooks/usePageViewTrigger/usePageViewTrigger.spec.tsx
@@ -14,28 +14,28 @@
  */
 
 import * as React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 import { TrackingRoot } from '../../components/TrackingRoot';
 import { Events } from '../../types';
 
 import { usePageViewTrigger } from './usePageViewTrigger';
 
-const DispatchButton = () => {
-  const dispatch = usePageViewTrigger();
+const DispatchPage = ({ mockDispatchData = {} }) => {
+  const dispatchPageView = usePageViewTrigger();
 
-  return (
-    <button data-testid="dispatch-btn" onClick={() => dispatch()}>
-      Dispatch button
-    </button>
-  );
+  React.useEffect(() => {
+    dispatchPageView(mockDispatchData);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return <div>Dispatch page</div>;
 };
 
 describe('usePageViewTrigger', () => {
   it('should provide a dispatch function that contains the pageView event', () => {
     const dispatch = jest.fn();
     const app = 'test-app-hook';
-    const btn = 'dispatch-btn';
 
     const expected = {
       app,
@@ -46,11 +46,33 @@ describe('usePageViewTrigger', () => {
 
     render(
       <TrackingRoot name={app} onDispatch={dispatch}>
-        <DispatchButton />
+        <DispatchPage />
       </TrackingRoot>,
     );
 
-    fireEvent.click(screen.getByTestId(btn));
+    expect(dispatch).toHaveBeenCalledWith(expected);
+  });
+
+  it('should provide a dispatch function that contains the pageView event with optional custom parameters', () => {
+    const dispatch = jest.fn();
+    const app = 'test-app-hook';
+    const customParameters = {
+      isConsentUpdate: true,
+    };
+
+    const expected = {
+      app,
+      event: Events.pageView,
+      elementTree: [],
+      timestamp: expect.any(Number),
+      customParameters,
+    };
+
+    render(
+      <TrackingRoot name={app} onDispatch={dispatch}>
+        <DispatchPage mockDispatchData={{ customParameters }} />
+      </TrackingRoot>,
+    );
 
     expect(dispatch).toHaveBeenCalledWith(expected);
   });
diff --git a/src/hooks/usePageViewTrigger/usePageViewTrigger.ts b/src/hooks/usePageViewTrigger/usePageViewTrigger.ts
index 36525cf..6b62956 100644
--- a/src/hooks/usePageViewTrigger/usePageViewTrigger.ts
+++ b/src/hooks/usePageViewTrigger/usePageViewTrigger.ts
@@ -16,12 +16,19 @@
 import * as React from 'react';
 
 import { useBaseTrigger } from '../useBaseTrigger';
-import { Events } from '../../types';
+import { Events, Dispatch, DispatchFn } from '../../types';
 
-export const usePageViewTrigger = (): (() => void) => {
+export const usePageViewTrigger = (): DispatchFn => {
   const dispatch = useBaseTrigger(Events.pageView);
 
-  const handleTrigger = React.useCallback(() => dispatch({}), [dispatch]);
+  const handleTrigger = React.useCallback(
+    (dispatchParams?: Dispatch) => {
+      const { customParameters } = dispatchParams || {};
+
+      return dispatch({ customParameters });
+    },
+    [dispatch],
+  );
 
   return handleTrigger;
 };