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

package/src/widgets/SocialProofWidget/SocialProofWidget.tsx

@@ -1,8 +1,8 @@
+import { useCallback, useMemo } from 'react';
 import { SocialProofWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
-import { lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
 import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
 import {
   PageVariant,
@@ -15,25 +15,41 @@ import {
   ChatElementDisplayLocationV3,
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
-import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget';
 import {
-  SpiffyMetricsEventName,
+  EnviveMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { useCallback, useEffect, useMemo } from 'react';
-import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import {
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
+import { useProductImageUrl } from '@envive-ai/react-hooks/hooks/ProductImageUrl';
 import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
-import { getProductImageUrl } from '../utils/functions';
+import { RawValues, getStringIdForText } from '../utils/functions';
 
 const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
   const setChatPreviewLoadingData = useSetAtom(chatPreviewLoadingDataAtom);
 
   const { onTypedMessageSubmitted } = useSalesAgent();
   const { openChat } = useChatToggle();
-  const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
   const variantInfo = useAtomValue(variantInfoAtom);
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const {
+    onClick: onSuggestionClick,
+    onHover,
+    onDrag,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(WidgetInteractionComponent.SOCIAL_PROOF, text => text);
 
   const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
 
@@ -81,7 +97,8 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
 
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 
-  const dynamicImageUrl = getProductImageUrl(lastAssistantMessage);
+  const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : undefined;
+  const dynamicImageUrl = useProductImageUrl(productId);
 
   const images =
     socialProofWidgetConfig?.kind !== WidgetKind.DYNAMIC
@@ -90,42 +107,88 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
 
   const { trackEvent } = useAmplitude();
 
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.SocialProofV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
-
   const handlePrimaryButtonClick = useCallback(
     (text: string) => {
+      const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
+      const stringId = getStringIdForText(rawValues, text);
+      trackEvent({
+        eventName: EnviveMetricsEventName.WidgetTextClicked,
+        eventProps: {
+          response_id: hardcopyContent?.responseId,
+          string_id: stringId,
+          text,
+        },
+      });
       onTypedMessageSubmitted({
         query: text,
         userTyped: false,
         displayLocation: ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON,
       });
       openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
+
+      trackWidgetInteraction({
+        eventName: EnviveMetricsEventName.WidgetInteraction,
+        trigger: {
+          widget: WidgetInteractionComponent.SOCIAL_PROOF,
+          widget_interaction: WidgetInteractionType.SUGGESTION_CLICKED,
+          widget_interaction_data: {
+            suggestion_clicked: {
+              suggestion_id: text,
+            },
+          },
+        },
+      });
     },
     [onTypedMessageSubmitted, openChat],
   );
 
+  const handlePrimaryButtonHover = useCallback((text: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SOCIAL_PROOF,
+        widget_interaction: WidgetInteractionType.WIDGET_HOVERED,
+        widget_interaction_data: {
+          suggestion_hovered: {
+            suggestion_id: text,
+          },
+        },
+      },
+    });
+  }, []);
+
   const handleSecondaryButtonClick = useCallback(
     (text: string) => {
+      const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
+      const stringId = getStringIdForText(rawValues, text);
+      trackEvent({
+        eventName: EnviveMetricsEventName.WidgetTextClicked,
+        eventProps: {
+          response_id: hardcopyContent?.responseId,
+          string_id: stringId,
+          text,
+        },
+      });
       onTypedMessageSubmitted({
         query: text,
         userTyped: false,
         displayLocation: ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON,
       });
       openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON);
+      onSuggestionClick(text);
     },
     [onTypedMessageSubmitted, openChat],
   );
 
   const handleTextFieldClick = useCallback(() => {
     openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_TEXT_FIELD);
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SOCIAL_PROOF,
+        widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+      },
+    });
   }, [openChat]);
 
   if (isLoading) {
@@ -174,7 +237,14 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
 
   const widgetEventProps: SocialProofProps['widgetEventProps'] = {
     handlePrimaryButtonClick,
+    handlePrimaryButtonHover,
     handleSecondaryButtonClick,
+    handleSecondaryButtonHover: onHover,
+    handleSecondaryButtonDrag: onDrag,
+    handleSecondaryButtonMouseDown: onMouseDown,
+    handleSecondaryButtonMouseUp: onMouseUp,
+    handleSecondaryButtonTouchStart: onTouchStart,
+    handleSecondaryButtonTouchEnd: onTouchEnd,
     handleTextFieldClick,
   };
 

package/src/widgets/SocialProofWidget/__tests__/SocialProofWidget.test.tsx

@@ -0,0 +1,195 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { SocialProofWidget } from '../SocialProofWidget';
+
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
+
+vi.mock('@envive-ai/react-toolkit-v3/SocialProof', async importOriginal => {
+  const actual = await importOriginal();
+  const MockSocialProof = ({
+    widgetContentProps,
+    widgetEventProps,
+  }: {
+    widgetContentProps: { primaryButtonText?: string };
+    widgetEventProps: { handlePrimaryButtonClick: (text: string) => void };
+  }) => (
+    <div data-testid="social-proof-mock">
+      <button
+        type="button"
+        onClick={() =>
+          widgetEventProps.handlePrimaryButtonClick(
+            widgetContentProps.primaryButtonText || 'Primary',
+          )
+        }
+      >
+        {widgetContentProps.primaryButtonText || 'Primary'}
+      </button>
+    </div>
+  );
+  return {
+    ...actual,
+    SocialProof: MockSocialProof,
+  };
+});
+
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
+  useAmplitude: () => ({
+    trackEvent: mockTrackEvent,
+    isReady: true,
+  }),
+  SpiffyMetricsEventName: {
+    ChatComponentVisible: 'Chat Component Visible',
+    SearchComponentVisible: 'Search Component Visible',
+  },
+  EnviveMetricsEventName: {
+    WidgetTextClicked: 'Widget Text Clicked',
+  },
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/WidgetInteraction', () => ({
+  useWidgetInteraction: () => ({
+    trackWidgetInteraction: vi.fn(),
+    getInteractionId: vi.fn(),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
+  useHardcopy: () => ({
+    getHardcopy: mockGetHardcopy,
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/pageContext', () => ({
+  usePage: () => ({
+    userEvent: {
+      id: 'test-user-event-id',
+      category: UserEventCategory.PageVisit,
+      created_at: '2025-01-01T00:00:00Z',
+      event_id: 'test-event-id',
+    } as UserEvent,
+  }),
+}));
+
+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/contexts/salesAgentContext', () => ({
+  useSalesAgent: () => ({
+    onTypedMessageSubmitted: vi.fn(),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/ChatToggle', () => ({
+  useChatToggle: () => ({
+    openChat: vi.fn(),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/atoms/chat', () => ({
+  lastAssistantMessageAtom: {},
+}));
+
+vi.mock('@envive-ai/react-hooks/atoms/app', () => ({
+  variantInfoAtom: {},
+}));
+
+vi.mock('@envive-ai/react-hooks/atoms/widget', () => ({
+  chatPreviewLoadingDataAtom: {},
+}));
+
+vi.mock('jotai', async importOriginal => {
+  const actual = await importOriginal();
+  const variantInfo = {
+    variant: 'PageVisit',
+    productId: undefined,
+    plpId: undefined,
+    url: '',
+    pageVisitCategory: '',
+  };
+  const useAtomValueMock = vi.fn();
+  useAtomValueMock.mockReturnValueOnce([]).mockReturnValueOnce(variantInfo).mockReturnValue([]);
+  return {
+    ...actual,
+    useAtomValue: useAtomValueMock,
+    useSetAtom: vi.fn(() => vi.fn()),
+  };
+});
+
+describe('SocialProofWidget analytics', () => {
+  const defaultHardcopy = {
+    responseId: 'test-response-id',
+    language: 'en',
+    values: {
+      primaryButtonText: 'Primary Button',
+      titleLabel: 'Title',
+    },
+    rawValues: {
+      primaryButtonText: { id: 'id-1', value: 'Primary Button' },
+    },
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetHardcopy.mockResolvedValue(defaultHardcopy);
+  });
+
+  it('should track ChatComponentVisible when widget mounts', async () => {
+    render(<SocialProofWidget widgetConfigId="test-config-1" />);
+
+    await waitFor(
+      () => {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
+            widget_config_id: 'test-config-1',
+            widget_type: WidgetTypeV3.SocialProofV3,
+          },
+          '0px',
+          true,
+        );
+      },
+      { timeout: 3000 },
+    );
+  }, 5000);
+
+  it('should track WidgetTextClicked when primary button is clicked', async () => {
+    render(<SocialProofWidget widgetConfigId="test-config-2" />);
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('Primary Button')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    mockTrackEvent.mockClear();
+
+    screen.getByText('Primary Button').click();
+
+    expect(mockTrackEvent).toHaveBeenCalledWith({
+      eventName: EnviveMetricsEventName.WidgetTextClicked,
+      eventProps: {
+        response_id: 'test-response-id',
+        string_id: 'id-1',
+        text: 'Primary Button',
+      },
+    });
+  }, 5000);
+});

package/src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.tsx

@@ -1,20 +1,26 @@
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  EnviveMetricsEventName,
+  useAmplitude,
+} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import {
   TitledPromptCarouselWidgetV3Config,
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
-import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
-import { useCallback, useEffect } from 'react';
-import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useCallback } from 'react';
 
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { WidgetInteractionComponent } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
+import {
+  AnimationSpeed,
+  PromptCarouselRows,
+  usePromptCarouselAnalytics,
+} from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { TitledPromptCarousel } from '@envive-ai/react-toolkit-v3/TitledPromptCarousel';
-import { AnimationSpeed, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
+import { RawValues, getStringIdForText } from '../utils/functions';
 
 const mockButtonTexts = [
   'Loading button 1',
@@ -31,6 +37,9 @@ const TitledPromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
   const { openChat } = useChatToggle();
   const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 
+  const { onClick, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } =
+    usePromptCarouselAnalytics(WidgetInteractionComponent.EMBEDDED_WIDGET, text => text);
+
   const hardCopyTitleLabel = hardcopyContent?.values?.titleLabel as string | undefined;
   const titleLabel = isLoading ? mockTitleLabel : hardCopyTitleLabel;
 
@@ -55,24 +64,25 @@ const TitledPromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
 
   const { trackEvent } = useAmplitude();
 
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.TitledPromptCarouselV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
-
   const handleButtonClick = useCallback(
     (text: string) => {
+      const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
+      const stringId = getStringIdForText(rawValues, text);
+      trackEvent({
+        eventName: EnviveMetricsEventName.WidgetTextClicked,
+        eventProps: {
+          response_id: hardcopyContent?.responseId,
+          string_id: stringId,
+          text,
+        },
+      });
       onTypedMessageSubmitted({
         query: text,
         userTyped: false,
         displayLocation: ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL,
       });
       openChat(ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL);
+      onClick(text);
     },
     [onTypedMessageSubmitted, openChat],
   );
@@ -88,6 +98,12 @@ const TitledPromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
       promptCarouselRows={promptCarouselRows as PromptCarouselRows}
       animationSpeed={animationSpeed as AnimationSpeed}
       handleButtonClick={handleButtonClick}
+      handleButtonDrag={onDrag}
+      handleButtonHover={onHover}
+      handleButtonMouseDown={onMouseDown}
+      handleButtonMouseUp={onMouseUp}
+      handleButtonTouchStart={onTouchStart}
+      handleButtonTouchEnd={onTouchEnd}
       promptButtonTexts={buttonTexts}
       promptCarouselAriaLabel={promptCarouselAriaLabel}
     />

package/src/widgets/TitledPromptCarouselWidget/__tests__/TitledPromptCarouselWidget.test.tsx

@@ -0,0 +1,161 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { TitledPromptCarouselWidget } from '../TitledPromptCarouselWidget';
+
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
+
+vi.mock('@envive-ai/react-toolkit-v3/TitledPromptCarousel', () => ({
+  TitledPromptCarousel: ({
+    promptButtonTexts,
+    handleButtonClick,
+  }: {
+    promptButtonTexts: string[];
+    handleButtonClick: (text: string) => void;
+  }) => (
+    <div data-testid="titled-prompt-carousel-mock">
+      {promptButtonTexts.map(text => (
+        <button
+          key={text}
+          type="button"
+          onClick={() => handleButtonClick(text)}
+        >
+          {text}
+        </button>
+      ))}
+    </div>
+  ),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
+  useAmplitude: () => ({
+    trackEvent: mockTrackEvent,
+    isReady: true,
+  }),
+  SpiffyMetricsEventName: {
+    ChatComponentVisible: 'Chat Component Visible',
+    SearchComponentVisible: 'Search Component Visible',
+  },
+  EnviveMetricsEventName: {
+    WidgetTextClicked: 'Widget Text Clicked',
+  },
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/WidgetInteraction', () => ({
+  useWidgetInteraction: () => ({
+    trackWidgetInteraction: vi.fn(),
+    getInteractionId: vi.fn(),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
+  useHardcopy: () => ({
+    getHardcopy: mockGetHardcopy,
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/pageContext', () => ({
+  usePage: () => ({
+    userEvent: {
+      id: 'test-user-event-id',
+      category: UserEventCategory.PageVisit,
+      created_at: '2025-01-01T00:00:00Z',
+      event_id: 'test-event-id',
+    } as UserEvent,
+  }),
+}));
+
+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/contexts/salesAgentContext', () => ({
+  useSalesAgent: () => ({
+    onTypedMessageSubmitted: vi.fn(),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/ChatToggle', () => ({
+  useChatToggle: () => ({
+    openChat: vi.fn(),
+  }),
+}));
+
+describe('TitledPromptCarouselWidget analytics', () => {
+  const defaultHardcopy = {
+    responseId: 'test-response-id',
+    language: 'en',
+    values: {
+      promptButtonTexts: ['Button 1', 'Button 2', 'Button 3'],
+    },
+    rawValues: {
+      promptButtonTexts: [
+        { id: 'id-1', value: 'Button 1' },
+        { id: 'id-2', value: 'Button 2' },
+      ],
+    },
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetHardcopy.mockResolvedValue(defaultHardcopy);
+  });
+
+  it('should track ChatComponentVisible when widget mounts', async () => {
+    render(<TitledPromptCarouselWidget widgetConfigId="test-config-1" />);
+
+    await waitFor(
+      () => {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
+            widget_config_id: 'test-config-1',
+            widget_type: WidgetTypeV3.TitledPromptCarouselV3,
+          },
+          '0px',
+          true,
+        );
+      },
+      { timeout: 3000 },
+    );
+  }, 5000);
+
+  it('should track WidgetTextClicked when button is clicked', async () => {
+    render(<TitledPromptCarouselWidget widgetConfigId="test-config-2" />);
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('Button 1')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    mockTrackEvent.mockClear();
+
+    screen.getByText('Button 1').click();
+
+    expect(mockTrackEvent).toHaveBeenCalledWith({
+      eventName: EnviveMetricsEventName.WidgetTextClicked,
+      eventProps: {
+        response_id: 'test-response-id',
+        string_id: 'id-1',
+        text: 'Button 1',
+      },
+    });
+  }, 5000);
+});