@envive-ai/react-widgets-v3 0.3.13 → 0.3.14

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

@@ -0,0 +1,144 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import {
+  EnviveMetricsEventName,
+  SpiffyMetricsEventName,
+} 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 { ProductCardWidget } from '../ProductCardWidget';
+
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+
+vi.mock('@envive-ai/react-toolkit-v3/ProductCard', () => ({
+  ProductCard: ({ prompts, onSelect }: { prompts: string[]; onSelect: (text: string) => void }) => (
+    <div data-testid="product-card-mock">
+      {prompts.map(text => (
+        <button
+          key={text}
+          type="button"
+          onClick={() => onSelect(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/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('ProductCardWidget analytics', () => {
+  const defaultHardcopy = {
+    responseId: 'test-response-id',
+    language: 'en',
+    values: {
+      prompts: ['Prompt 1', 'Prompt 2', 'Prompt 3'],
+    },
+    rawValues: {
+      prompts: [
+        { id: 'id-1', value: 'Prompt 1' },
+        { id: 'id-2', value: 'Prompt 2' },
+      ],
+    },
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetHardcopy.mockResolvedValue(defaultHardcopy);
+  });
+
+  it('should track ChatComponentVisible when widget mounts', async () => {
+    render(<ProductCardWidget widgetConfigId="test-config-1" />);
+
+    await waitFor(
+      () => {
+        expect(mockTrackEvent).toHaveBeenCalledWith({
+          eventName: SpiffyMetricsEventName.ChatComponentVisible,
+          eventProps: {
+            widget_config_id: 'test-config-1',
+            widget_type: WidgetTypeV3.ProductCardV3,
+          },
+        });
+      },
+      { timeout: 3000 },
+    );
+  }, 5000);
+
+  it('should track WidgetTextClicked when prompt is selected', async () => {
+    render(<ProductCardWidget widgetConfigId="test-config-2" />);
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    mockTrackEvent.mockClear();
+
+    screen.getByText('Prompt 1').click();
+
+    expect(mockTrackEvent).toHaveBeenCalledWith({
+      eventName: EnviveMetricsEventName.WidgetTextClicked,
+      eventProps: {
+        response_id: 'test-response-id',
+        string_id: 'id-1',
+        text: 'Prompt 1',
+      },
+    });
+  }, 5000);
+});

package/src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx

@@ -8,6 +8,7 @@ import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { useCallback, useEffect, useMemo } from 'react';
 import {
+  EnviveMetricsEventName,
   SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
@@ -24,7 +25,7 @@ import { useAtomValue } from 'jotai';
 import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
-import { getRecentProductImageUrls } from '../utils/functions';
+import { RawValues, getRecentProductImageUrls, getStringIdForText } from '../utils/functions';
 
 const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
   const { onTypedMessageSubmitted } = useSalesAgent();
@@ -60,6 +61,16 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
 
   const handlePromptButtonClick = 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,

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

@@ -0,0 +1,179 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import {
+  EnviveMetricsEventName,
+  SpiffyMetricsEventName,
+} 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 { PromptButtonCarouselWithImageWidget } from '../PromptButtonCarouselWithImageWidget';
+
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+
+vi.mock('@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage', () => ({
+  PromptButtonCarouselWithImage: ({
+    promptButtonsTexts = [],
+    handlePromptButtonClick,
+  }: {
+    promptButtonsTexts?: string[];
+    handlePromptButtonClick: (text: string) => void;
+  }) => (
+    <div data-testid="prompt-button-carousel-mock">
+      {(promptButtonsTexts ?? []).map(text => (
+        <button
+          key={text}
+          type="button"
+          onClick={() => handlePromptButtonClick(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/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('jotai', async importOriginal => {
+  const actual = await importOriginal();
+  const variantInfo = {
+    variant: 'PageVisit',
+    productId: undefined,
+    plpId: undefined,
+    url: '',
+    pageVisitCategory: '',
+  };
+  const useAtomValueMock = vi.fn();
+  let callCount = 0;
+  useAtomValueMock.mockImplementation(() => {
+    callCount += 1;
+    return callCount % 2 === 0 ? [] : variantInfo;
+  });
+  return {
+    ...actual,
+    useAtomValue: useAtomValueMock,
+  };
+});
+
+describe('PromptButtonCarouselWithImageWidget analytics', () => {
+  const defaultHardcopy = {
+    responseId: 'test-response-id',
+    language: 'en',
+    values: {
+      promptButtonsTexts: ['Button 1', 'Button 2', 'Button 3'],
+    },
+    rawValues: {
+      promptButtonsTexts: [
+        { 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(<PromptButtonCarouselWithImageWidget widgetConfigId="test-config-1" />);
+
+    await waitFor(
+      () => {
+        expect(mockTrackEvent).toHaveBeenCalledWith({
+          eventName: SpiffyMetricsEventName.ChatComponentVisible,
+          eventProps: {
+            widget_config_id: 'test-config-1',
+            widget_type: WidgetTypeV3.PromptButtonCarouselWithImageV3,
+          },
+        });
+      },
+      { timeout: 3000 },
+    );
+  }, 5000);
+
+  it('should track WidgetTextClicked when button is clicked', async () => {
+    render(<PromptButtonCarouselWithImageWidget 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);
+});

package/src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx

@@ -17,20 +17,7 @@ import { AnimationSpeed } from '@envive-ai/react-toolkit-v3/PromptCarousel/types
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { PromptCarousel } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
-
-type RawWidgetString = { id: string; value: string };
-type RawValues = Record<string, RawWidgetString | RawWidgetString[]>;
-
-/** Finds the string_id (id) from raw widget text values for the given display text */
-function getStringIdForText(rawValues: RawValues | undefined, text: string): string | undefined {
-  if (!rawValues) return undefined;
-  for (const raw of Object.values(rawValues)) {
-    const list = Array.isArray(raw) ? raw : [raw];
-    const found = list.find((s: RawWidgetString) => s.value === text);
-    if (found) return found.id;
-  }
-  return undefined;
-}
+import { RawValues, getStringIdForText } from '../utils/functions';
 
 const mockButtonTexts = [
   'Loading button 1',

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

@@ -0,0 +1,150 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import {
+  EnviveMetricsEventName,
+  SpiffyMetricsEventName,
+} 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 { PromptCarouselWidget } from '../PromptCarouselWidget';
+
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+
+vi.mock('@envive-ai/react-toolkit-v3/PromptCarousel', () => ({
+  PromptCarousel: ({
+    promptButtonTexts,
+    handleButtonClick,
+  }: {
+    promptButtonTexts: string[];
+    handleButtonClick: (text: string) => void;
+  }) => (
+    <div data-testid="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/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('PromptCarouselWidget 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(<PromptCarouselWidget widgetConfigId="test-config-1" />);
+
+    await waitFor(
+      () => {
+        expect(mockTrackEvent).toHaveBeenCalledWith({
+          eventName: SpiffyMetricsEventName.ChatComponentVisible,
+          eventProps: {
+            widget_config_id: 'test-config-1',
+            widget_type: WidgetTypeV3.PromptCarouselV3,
+          },
+        });
+      },
+      { timeout: 3000 },
+    );
+  }, 5000);
+
+  it('should track WidgetTextClicked when button is clicked', async () => {
+    render(<PromptCarouselWidget 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);
+});

package/src/widgets/SocialProofWidget/SocialProofWidget.tsx

@@ -17,6 +17,7 @@ import {
 } from '@envive-ai/react-hooks/application/models';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import {
+  EnviveMetricsEventName,
   SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
@@ -25,7 +26,7 @@ import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget'
 import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
-import { getProductImageUrl } from '../utils/functions';
+import { RawValues, getProductImageUrl, getStringIdForText } from '../utils/functions';
 
 const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
   const setChatPreviewLoadingData = useSetAtom(chatPreviewLoadingDataAtom);
@@ -102,6 +103,16 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
 
   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,