@envive-ai/react-widgets-v3 0.3.13 → 0.3.15-alpha.1

package/src/hocs/withBaseWidget/__tests__/withBaseWidget.test.tsx

@@ -1,72 +1,17 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { RefObject } from 'react';
-import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { HardcopyResponse } from '@envive-ai/react-hooks/contexts/hardcopyContext';
 import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
 import { BaseWidgetProps } from '../types';
 import { withBaseWidget } from '../withBaseWidget';
 
-// Mock IntersectionObserver
-class MockIntersectionObserver implements IntersectionObserver {
-  observe = vi.fn();
-
-  disconnect = vi.fn();
-
-  unobserve = vi.fn();
-
-  root: Element | null = null;
-
-  rootMargin: string = '';
-
-  thresholds: ReadonlyArray<number> = [];
-
-  private callback: (entries: IntersectionObserverEntry[]) => void;
-
-  private options?: IntersectionObserverInit;
-
-  constructor(
-    callback: (entries: IntersectionObserverEntry[]) => void,
-    options?: IntersectionObserverInit,
-  ) {
-    this.callback = callback;
-    this.options = options;
-    if (options) {
-      this.rootMargin = options.rootMargin || '';
-    }
-  }
-
-  // Helper method to trigger intersection
-  triggerIntersection(isIntersecting: boolean, target?: Element) {
-    const entry = {
-      isIntersecting,
-      intersectionRatio: isIntersecting ? 1 : 0,
-      boundingClientRect: {} as DOMRectReadOnly,
-      rootBounds: {} as DOMRectReadOnly,
-      target: target || ({} as Element),
-      time: Date.now(),
-    } as IntersectionObserverEntry;
-
-    this.callback([entry]);
-  }
-
-  // Helper method to get options
-  getOptions() {
-    return this.options;
-  }
-
-  // Required by IntersectionObserver interface but not used in tests
-  // eslint-disable-next-line class-methods-use-this
-  takeRecords(): IntersectionObserverEntry[] {
-    return [];
-  }
-}
-
 // Mock the contexts
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
-vi.mock('src/contexts/amplitudeContext/amplitudeContext', () => ({
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   useAmplitude: () => ({
     trackEvent: mockTrackEvent,
     isReady: true,
@@ -77,13 +22,13 @@ vi.mock('src/contexts/amplitudeContext/amplitudeContext', () => ({
   },
 }));
 
-vi.mock('src/contexts/hardcopyContext', () => ({
+vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
   }),
 }));
 
-vi.mock('src/contexts/pageContext', () => ({
+vi.mock('@envive-ai/react-hooks/contexts/pageContext', () => ({
   usePage: () => ({
     userEvent: {
       id: 'test-user-event-id',
@@ -94,6 +39,22 @@ vi.mock('src/contexts/pageContext', () => ({
   }),
 }));
 
+vi.mock('@envive-ai/react-hooks/contexts/widgetConfigContext', () => ({
+  useWidgetConfig: () => ({
+    getWidgetConfig: vi.fn().mockResolvedValue({}),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/uiConfigContext', () => ({
+  useUiConfig: () => ({
+    getUiConfig: vi.fn().mockResolvedValue({}),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
 // Test widget component
 interface TestWidgetProps extends BaseWidgetProps {
   testId?: string;
@@ -133,44 +94,18 @@ const TestWidget: React.FC<TestWidgetProps> = ({
 };
 
 describe('withBaseWidget', () => {
-  let mockObserver: MockIntersectionObserver;
-  let mockObservers: MockIntersectionObserver[];
-  let originalIntersectionObserver: typeof IntersectionObserver;
-
   beforeEach(() => {
     vi.clearAllMocks();
-    mockObservers = [];
 
     // Set default mock for getHardcopy to return a resolved promise
     mockGetHardcopy.mockResolvedValue({
       language: 'en',
       values: {},
     });
-
-    // Store original IntersectionObserver
-    originalIntersectionObserver = global.IntersectionObserver;
-
-    // Replace IntersectionObserver with mock class
-    global.IntersectionObserver = class extends MockIntersectionObserver {
-      constructor(
-        callback: (entries: IntersectionObserverEntry[]) => void,
-        options?: IntersectionObserverInit,
-      ) {
-        super(callback, options);
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        mockObserver = this;
-        mockObservers.push(this);
-      }
-    } as unknown as typeof IntersectionObserver;
-  });
-
-  afterEach(() => {
-    // Restore original IntersectionObserver
-    global.IntersectionObserver = originalIntersectionObserver;
   });
 
-  describe('IntersectionObserver setup', () => {
-    it('should create an IntersectionObserver with default rootMargin', () => {
+  describe('Visibility tracking', () => {
+    it('should call useTrackComponentVisibleEvent with default event', () => {
       const WrappedWidget = withBaseWidget(TestWidget);
       render(
         <WrappedWidget
@@ -179,14 +114,19 @@ describe('withBaseWidget', () => {
         />,
       );
 
-      expect(mockObserver).toBeDefined();
-      expect(mockObserver.rootMargin).toBe('0px');
+      expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+        expect.any(Object),
+        {
+          widget_config_id: 'test-config-1',
+          widget_type: WidgetTypeV3.PromptCarouselV3,
+        },
+        '0px',
+        true,
+      );
     });
 
-    it('should create an IntersectionObserver with custom rootMargin', () => {
-      const WrappedWidget = withBaseWidget(TestWidget, {
-        rootMargin: '100px',
-      });
+    it('should pass custom rootMargin to useTrackComponentVisibleEvent', () => {
+      const WrappedWidget = withBaseWidget(TestWidget, { rootMargin: '100px' });
       render(
         <WrappedWidget
           widgetConfigId="test-config-2"
@@ -194,168 +134,42 @@ describe('withBaseWidget', () => {
         />,
       );
 
-      expect(mockObserver).toBeDefined();
-      expect(mockObserver.rootMargin).toBe('100px');
-    });
-
-    it('should observe the widget element', () => {
-      const WrappedWidget = withBaseWidget(TestWidget);
-      render(
-        <WrappedWidget
-          widgetConfigId="test-config-3"
-          widgetType={WidgetTypeV3.PromptCarouselV3}
-        />,
-      );
-
-      expect(mockObserver.observe).toHaveBeenCalled();
-    });
-  });
-
-  describe('Amplitude event tracking', () => {
-    it('should track default event when widget becomes visible', async () => {
-      const WrappedWidget = withBaseWidget(TestWidget);
-      const { container } = render(
-        <WrappedWidget
-          widgetConfigId="test-config-4"
-          widgetType={WidgetTypeV3.PromptCarouselV3}
-        />,
-      );
-
-      const widgetElement = container.querySelector('[data-testid="test-widget"]');
-
-      // Trigger intersection with the actual element
-      mockObserver.triggerIntersection(true, widgetElement as Element);
-
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
-            widget_config_id: 'test-config-4',
-            widget_type: WidgetTypeV3.PromptCarouselV3,
-          },
-        });
-      });
-    });
-
-    it('should track custom event when widget becomes visible', async () => {
-      const WrappedWidget = withBaseWidget(TestWidget, {
-        visibilityEventName: SpiffyMetricsEventName.SearchComponentVisible,
-      });
-      const { container } = render(
-        <WrappedWidget
-          widgetConfigId="test-config-5"
-          widgetType={WidgetTypeV3.ChatPreviewV3}
-        />,
+      expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+        expect.any(Object),
+        {
+          widget_config_id: 'test-config-2',
+          widget_type: WidgetTypeV3.ChatPreviewV3,
+        },
+        '100px',
+        true,
       );
-
-      const widgetElement = container.querySelector('[data-testid="test-widget"]');
-
-      // Trigger intersection
-      mockObserver.triggerIntersection(true, widgetElement as Element);
-
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.SearchComponentVisible,
-          eventProps: {
-            widget_config_id: 'test-config-5',
-            widget_type: WidgetTypeV3.ChatPreviewV3,
-          },
-        });
-      });
     });
 
-    it('should include custom event props when tracking', async () => {
+    it('should include custom event props', () => {
       const WrappedWidget = withBaseWidget(TestWidget, {
         visibilityEventProps: {
           custom_prop: 'custom_value',
           another_prop: 123,
         },
       });
-      const { container } = render(
+      render(
         <WrappedWidget
-          widgetConfigId="test-config-6"
+          widgetConfigId="test-config-4"
           widgetType={WidgetTypeV3.SocialProofV3}
         />,
       );
 
-      const widgetElement = container.querySelector('[data-testid="test-widget"]');
-
-      // Trigger intersection
-      mockObserver.triggerIntersection(true, widgetElement as Element);
-
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
-            widget_config_id: 'test-config-6',
-            widget_type: WidgetTypeV3.SocialProofV3,
-            custom_prop: 'custom_value',
-            another_prop: 123,
-          },
-        });
-      });
-    });
-
-    it('should only track event once even if intersection happens multiple times', async () => {
-      const WrappedWidget = withBaseWidget(TestWidget);
-      const { container } = render(
-        <WrappedWidget
-          widgetConfigId="test-config-7"
-          widgetType={WidgetTypeV3.PromptCarouselV3}
-        />,
-      );
-
-      const widgetElement = container.querySelector('[data-testid="test-widget"]');
-
-      // Trigger intersection multiple times
-      mockObserver.triggerIntersection(true, widgetElement as Element);
-      mockObserver.triggerIntersection(false, widgetElement as Element);
-      mockObserver.triggerIntersection(true, widgetElement as Element);
-
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalledTimes(1);
-      });
-    });
-
-    it('should disconnect observer after tracking event', async () => {
-      const WrappedWidget = withBaseWidget(TestWidget);
-      const { container } = render(
-        <WrappedWidget
-          widgetConfigId="test-config-8"
-          widgetType={WidgetTypeV3.PromptCarouselV3}
-        />,
-      );
-
-      const widgetElement = container.querySelector('[data-testid="test-widget"]');
-
-      // Trigger intersection
-      mockObserver.triggerIntersection(true, widgetElement as Element);
-
-      await waitFor(() => {
-        expect(mockObserver.disconnect).toHaveBeenCalled();
-      });
-    });
-
-    it('should not track event if widget is not intersecting', async () => {
-      const WrappedWidget = withBaseWidget(TestWidget);
-      const { container } = render(
-        <WrappedWidget
-          widgetConfigId="test-config-9"
-          widgetType={WidgetTypeV3.PromptCarouselV3}
-        />,
+      expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+        expect.any(Object),
+        {
+          widget_config_id: 'test-config-4',
+          widget_type: WidgetTypeV3.SocialProofV3,
+          custom_prop: 'custom_value',
+          another_prop: 123,
+        },
+        '0px',
+        true,
       );
-
-      const widgetElement = container.querySelector('[data-testid="test-widget"]');
-
-      // Trigger non-intersection
-      mockObserver.triggerIntersection(false, widgetElement as Element);
-
-      // Wait a bit to ensure no event is tracked
-      await new Promise(resolve => {
-        setTimeout(resolve, 100);
-      });
-
-      expect(mockTrackEvent).not.toHaveBeenCalled();
     });
   });
 
@@ -541,7 +355,6 @@ describe('withBaseWidget', () => {
       mockGetHardcopy.mockResolvedValue(mockHardcopy);
 
       const WrappedWidget = withBaseWidget(TestWidget, {
-        visibilityEventName: SpiffyMetricsEventName.SearchComponentVisible,
         visibilityEventProps: {
           test_integration: true,
         },
@@ -561,20 +374,17 @@ describe('withBaseWidget', () => {
 
       const widgetElement = screen.getByTestId('test-widget');
 
-      // Trigger intersection to track event
-      mockObserver.triggerIntersection(true, widgetElement);
-
-      // Verify both hardcopy and event tracking worked
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.SearchComponentVisible,
-          eventProps: {
-            widget_config_id: 'test-config-integration',
-            widget_type: WidgetTypeV3.PromptCarouselV3,
-            test_integration: true,
-          },
-        });
-      });
+      expect(widgetElement).toBeInTheDocument();
+      expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+        expect.any(Object),
+        {
+          widget_config_id: 'test-config-integration',
+          widget_type: WidgetTypeV3.PromptCarouselV3,
+          test_integration: true,
+        },
+        '0px',
+        true,
+      );
 
       expect(screen.getByTestId('hardcopy-language')).toHaveTextContent('en');
       expect(screen.getByTestId('hardcopy-values')).toHaveTextContent(
@@ -640,56 +450,24 @@ describe('withBaseWidget', () => {
         userEvent: expect.any(Object),
       });
 
-      // Verify first widget can trigger intersection and track event
-      // When multiple widgets are rendered, each creates its own IntersectionObserver
-      // We need to find the observer that's observing widget-1's element
-      const widget1Element = screen.getByTestId('widget-1');
-      const widget2Element = screen.getByTestId('widget-2');
-
-      // Clear any previous calls to isolate this test
-      mockTrackEvent.mockClear();
-
-      // Find which observer is observing widget-1 by checking which one was called with widget1Element
-      // In our mock setup, the first observer should be for widget-1, second for widget-2
-      const widget1Observer = mockObservers[0];
-      const widget2Observer = mockObservers[1];
-
-      // Verify we have both observers
-      expect(widget1Observer).toBeDefined();
-      expect(widget2Observer).toBeDefined();
-
-      // Trigger intersection for widget-1 using its observer
-      widget1Observer.triggerIntersection(true, widget1Element);
-
-      await waitFor(() => {
-        // Verify that an event was tracked for widget-1
-        expect(mockTrackEvent).toHaveBeenCalled();
-        const { calls } = mockTrackEvent.mock;
-        // Find any call that matches widget-1's properties
-        const widget1Call = calls.find(
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (call: any) =>
-            call[0]?.eventProps?.widget_config_id === 'widget-1' &&
-            call[0]?.eventProps?.widget_type === WidgetTypeV3.PromptCarouselV3,
-        );
-        expect(widget1Call).toBeDefined();
-      });
-
-      // Verify widget-2 can also track independently
-      mockTrackEvent.mockClear();
-      widget2Observer.triggerIntersection(true, widget2Element);
-
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalled();
-        const { calls } = mockTrackEvent.mock;
-        const widget2Call = calls.find(
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (call: any) =>
-            call[0]?.eventProps?.widget_config_id === 'widget-2' &&
-            call[0]?.eventProps?.widget_type === WidgetTypeV3.ChatPreviewV3,
-        );
-        expect(widget2Call).toBeDefined();
-      });
+      expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+        expect.any(Object),
+        {
+          widget_config_id: 'widget-1',
+          widget_type: WidgetTypeV3.PromptCarouselV3,
+        },
+        '0px',
+        true,
+      );
+      expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+        expect.any(Object),
+        {
+          widget_config_id: 'widget-2',
+          widget_type: WidgetTypeV3.ChatPreviewV3,
+        },
+        '0px',
+        true,
+      );
     });
   });
 });

package/src/hocs/withBaseWidget/types.ts

@@ -1,5 +1,4 @@
 import { RefObject } from 'react';
-import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { HardcopyResponse } from '@envive-ai/react-hooks/contexts/hardcopyContext';
 import {
   OrgUIConfigV3,
@@ -22,11 +21,6 @@ export interface BaseWidgetProps {
 }
 
 export interface WithBaseWidgetOptions {
-  /**
-   * The Amplitude event name to track when the widget becomes visible.
-   * Defaults to a generic component visible event if not provided.
-   */
-  visibilityEventName?: SpiffyMetricsEventName;
   /**
    * Additional properties to include with the visibility event.
    */
@@ -36,4 +30,10 @@ export interface WithBaseWidgetOptions {
    * Defaults to '0px'.
    */
   rootMargin?: string;
+
+  /**
+   * Whether to defer loading of the widget until it is visible.
+   * Defaults to true
+   */
+  deferLoading?: boolean;
 }

package/src/hocs/withBaseWidget/withBaseWidget.tsx

@@ -1,15 +1,12 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
-import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useAmplitude } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useTrackComponentVisibleEvent } from '@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent';
 import { HardcopyResponse, useHardcopy } from '@envive-ai/react-hooks/contexts/hardcopyContext';
 import { usePage } from '@envive-ai/react-hooks/contexts/pageContext';
 import { useWidgetConfig } from '@envive-ai/react-hooks/contexts/widgetConfigContext';
 import { OrgUIConfigV3, WidgetConfigV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useUiConfig } from '@envive-ai/react-hooks/contexts/uiConfigContext';
-
 import { BaseWidgetProps, WithBaseWidgetOptions } from './types';
 
 export function withBaseWidget<P extends BaseWidgetProps>(
@@ -19,10 +16,10 @@ export function withBaseWidget<P extends BaseWidgetProps>(
   const WrappedWidget = (props: P) => {
     const { widgetConfigId, widgetType } = props;
     const widgetRef = useRef<HTMLDivElement>(null);
-    const hasTrackedEvent = useRef(false);
-    const { trackEvent, isReady } = useAmplitude();
+    const { isReady } = useAmplitude();
 
     const [hardcopyContent, setHardcopyContent] = useState<HardcopyResponse | undefined>(undefined);
+    const hardcopyFetchedRef = useRef(false);
     const { getHardcopy, isLoading: isHardcopyLoading } = useHardcopy();
 
     const { userEvent, isLoading: isPageLoading } = usePage();
@@ -36,87 +33,75 @@ export function withBaseWidget<P extends BaseWidgetProps>(
     const isLoading =
       isHardcopyLoading || isPageLoading || isWidgetConfigLoading || isUiConfigLoading;
 
-    useEffect(() => {
-      if (!isReady || hasTrackedEvent.current || !widgetRef.current) {
-        return undefined;
+    const visibilityEventProps = {
+      widget_config_id: widgetConfigId,
+      widget_type: widgetType,
+      ...options?.visibilityEventProps,
+    };
+    const { isVisible } = useTrackComponentVisibleEvent(
+      widgetRef,
+      visibilityEventProps,
+      options?.rootMargin || '0px',
+      isReady,
+    );
+    const startLoading: boolean = useMemo(() => {
+      if (options?.deferLoading === false) {
+        return true;
       }
-
-      const observer = new IntersectionObserver(
-        ([entry]) => {
-          if (entry.isIntersecting && !hasTrackedEvent.current) {
-            const eventName =
-              options?.visibilityEventName || SpiffyMetricsEventName.ChatComponentVisible;
-
-            trackEvent({
-              eventName,
-              eventProps: {
-                widget_config_id: widgetConfigId,
-                widget_type: widgetType,
-                ...options?.visibilityEventProps,
-              },
-            });
-
-            hasTrackedEvent.current = true;
-            observer.disconnect();
-          }
-        },
-        {
-          rootMargin: options?.rootMargin || '0px',
-        },
-      );
-
-      observer.observe(widgetRef.current);
-
-      return () => {
-        observer.disconnect();
-      };
-    }, [isReady, widgetConfigId, widgetType, trackEvent]);
+      // Defer loading by default until the widget is visible
+      return isVisible && !!widgetConfigId && !!widgetType;
+    }, [isVisible, widgetConfigId, widgetType]);
 
     useEffect(() => {
-      if (!widgetType || !userEvent) {
+      if (!startLoading || hardcopyFetchedRef.current) {
         return;
       }
+      hardcopyFetchedRef.current = true;
       getHardcopy({ widgetType, userEvent })
         .then(setHardcopyContent)
         .catch(() => {
           // Silently handle errors - widget will render without hardcopy content
         });
-    }, [widgetConfigId, widgetType, getHardcopy, userEvent]);
+    }, [startLoading, widgetType, getHardcopy, userEvent, widgetConfigId]);
 
     useEffect(() => {
+      if (!startLoading) {
+        return;
+      }
       getUiConfig()
         .then(setUiConfig)
         .catch(() => {
           // Silently handle errors - widget will render without ui config
         });
-    }, [getUiConfig, widgetConfigId, widgetType]);
+    }, [startLoading, getUiConfig, widgetConfigId, widgetType]);
 
     useEffect(() => {
-      if (!widgetConfigId || !widgetType) {
+      if (!startLoading) {
         return;
       }
 
       getWidgetConfig({ widgetConfigId, widgetType })
         .then(setWidgetConfig)
-        .catch(e => {
-          console.error('Error getting widget config', widgetConfigId, widgetType, e);
+        .catch(() => {
           // Silently handle errors - widget will render without widget config
         });
-    }, [widgetConfigId, widgetType, getWidgetConfig]);
+    }, [startLoading, widgetConfigId, widgetType, getWidgetConfig]);
 
     return (
-      <Widget
-        {...props}
-        isLoading={isLoading}
-        isHardcopyLoading={isHardcopyLoading}
-        isPageLoading={isPageLoading}
-        isWidgetConfigLoading={isWidgetConfigLoading}
-        isUiConfigLoading={isUiConfigLoading}
-        uiConfig={uiConfig}
-        widgetConfig={widgetConfig}
-        hardcopyContent={hardcopyContent}
-        observedWidget={widgetRef}
-      />
+      <span ref={widgetRef}>
+        <Widget
+          {...props}
+          isLoading={isLoading}
+          isHardcopyLoading={isHardcopyLoading}
+          isPageLoading={isPageLoading}
+          isWidgetConfigLoading={isWidgetConfigLoading}
+          isUiConfigLoading={isUiConfigLoading}
+          uiConfig={uiConfig}
+          widgetConfig={widgetConfig}
+          hardcopyContent={hardcopyContent}
+          observedWidget={widgetRef}
+        />
+      </span>
     );
   };