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

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -1,15 +1,22 @@
-import { ReactNode, Suspense, lazy, useEffect, useMemo, useRef, useState } from 'react';
+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 {
   FloatingChatConfig,
   LookAndFeelConfig,
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { useTrackComponentVisibleEvent } from '@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
 import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
-import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+  Collapse,
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import {
   FloatingButton,
   FloatingButtonBackgroundColor,
@@ -18,15 +25,15 @@ import {
   FloatingButtonShow,
   FloatingButtonVariant,
 } from '@envive-ai/react-toolkit-v3/FloatingButton';
-import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { ReactNode, Suspense, lazy, useEffect, useMemo, useRef, useState } from 'react';
 import { DebugBar } from 'src/debug/debugBar';
+import { useUnifiedCXButton } from '../../CXIntegration/hooks/useUnifiedCXButton';
+import { CustomerServiceType } from '../../CXIntegration/types';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
-import { FloatingChatOverlay } from './FloatingChatOverlay';
 import useGetWidgetStatus from '../hooks/useGetWidgetStatus';
-import { useUnifiedCXButton } from '../../CXIntegration/hooks/useUnifiedCXButton';
 import { FLOATING_BUTTON_ID } from './constants';
-import { CustomerServiceType } from '../../CXIntegration/types';
+import { FloatingChatOverlay } from './FloatingChatOverlay';
 import { useFloatingButtonVisibility } from './hooks/useFloatingButtonVisibility';
 import { useAutoPopup } from './hooks/useAutoPopup';
 
@@ -69,12 +76,13 @@ const CXButtonProvider = ({
 interface FloatingChatWidgetHandlerProps extends BaseWidgetProps {
   previewButtonOnly?: boolean;
   previewChatAlwaysOpen?: boolean;
+  previewCXButtonsEnabled?: boolean;
 }
 
 const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
-  const { previewButtonOnly, previewChatAlwaysOpen } = props;
+  const { previewButtonOnly, previewChatAlwaysOpen, previewCXButtonsEnabled } = props;
   const salesAgentData = useSalesAgent();
-
+  const { trackWidgetInteraction } = useWidgetInteraction();
   const { userHasInteractedValue } = useGetWidgetStatus();
 
   // TODO: Get hardcopy
@@ -86,15 +94,29 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
     CustomerServiceType.unsupported;
 
   // TODO: Get hardcopy content
-  const { isOpen, openChat, closeChat } = useChatToggle();
+  const { isOpen, openChat, closeChat, onHover } = useChatToggle();
 
   const [isCXOpen, setIsCXOpen] = useState(false);
+  const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
 
   // Reset CX open state when the envive widget is reopened
   useEffect(() => {
     if (isOpen) setIsCXOpen(false);
   }, [isOpen]);
 
+  const handleClose = (type: Collapse) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.FLOATING_CHAT,
+        widget_interaction: WidgetInteractionType.WIDGET_COLLAPSED,
+        widget_interaction_data: {
+          widget_collapsed: type,
+        },
+      },
+    });
+  };
+
   const { shouldShowFloatingButton } = useFloatingButtonVisibility({
     floatingButtonShowConfig: floatingButton?.showOption as FloatingButtonShow,
     isChatOpen: isOpen,
@@ -118,21 +140,17 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
 
   useAutoPopup({ autoPopupConfig: floatingChat?.autoPopupConfig });
 
-  const { trackEvent } = useAmplitude();
-  const hasTrackedEvent = useRef(false);
-  // When we add support for initially hidden floating buttons, we will need to update this to handle that case
-  useEffect(() => {
-    if (buttonShouldRender && !hasTrackedEvent.current) {
-      trackEvent({
-        eventName: SpiffyMetricsEventName.ChatComponentVisible,
-        eventProps: {
-          widget_config_id: 'floating-button',
-          widget_type: WidgetTypeV3.FloatingButtonV3,
-        },
-      });
-      hasTrackedEvent.current = true;
-    }
-  }, [trackEvent, buttonShouldRender]);
+  const { isReady } = useAmplitude();
+  const floatingButtonVisibilityRef = useRef<HTMLDivElement>(null);
+  useTrackComponentVisibleEvent(
+    floatingButtonVisibilityRef,
+    {
+      widget_config_id: 'floating-button',
+      widget_type: WidgetTypeV3.FloatingButtonV3,
+    },
+    '0px',
+    isReady && buttonShouldRender,
+  );
 
   return (
     <CXButtonProvider
@@ -146,31 +164,53 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
       {({ isSwitchEnabled, toggle }) => (
         <>
           {/* Render chat when always open preview OR when normally open */}
-          {(previewChatAlwaysOpen || effectiveIsOpen) && !previewButtonOnly && (
+          {!previewButtonOnly && (
             <FloatingChatOverlay
               isOpened={effectiveIsOpen}
+              isResultsModalOpen={isResultsModalOpen}
               onClose={
                 previewChatAlwaysOpen
                   ? () => {}
-                  : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY)
+                  : () => {
+                    closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY);
+                    handleClose({
+                      collapse_source: 'body_click',
+                    }); 1
+                  }
               }
               previewMode={!!previewChatAlwaysOpen}
             >
               <Suspense>
                 <FloatingChat
+                  setIsResultsModalOpen={setIsResultsModalOpen}
                   theme={theme}
                   salesAgentData={salesAgentData}
                   hardcopyContent={hardcopyContent}
                   floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
                   lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
-                  isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
+                  isCXButtonSwitchEnabled={previewCXButtonsEnabled ? true : !!isSwitchEnabled?.()}
                   isFloatingChatOpen={effectiveIsOpen}
                   onToggleCXButton={toggle}
                   debugBar={<DebugBar />}
+                  onSwipeClose={
+                    previewChatAlwaysOpen
+                      ? () => {}
+                      : () => {
+                        closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
+                        handleClose({
+                          collapse_source: 'swipe',
+                        });
+                      }
+                  }
                   onClose={
                     previewChatAlwaysOpen
                       ? () => {}
-                      : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
+                      : () => {
+                        closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
+                        handleClose({
+                          collapse_source: 'close_button',
+                        });
+                      }
                   }
                 />
               </Suspense>
@@ -179,23 +219,26 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
 
           {/* Render button when preview button only OR when chat is closed */}
           {buttonShouldRender && (
-            <FloatingButton
-              id={FLOATING_BUTTON_ID}
-              variant={floatingButton?.style as FloatingButtonVariant}
-              mode={floatingButton?.mode as FloatingButtonMode}
-              backgroundColor={floatingButton?.backgroundColor as FloatingButtonBackgroundColor}
-              onClick={
-                previewButtonOnly
-                  ? () => {}
-                  : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON)
-              }
-              customIcon={floatingButton?.iconSVGSrc}
-              show={floatingButton?.showOption as FloatingButtonShow}
-              location={floatingButton?.position as FloatingButtonLocation}
-              hasInteractionHappened={userHasInteractedValue}
-              ariaLabel="Open chat"
-              previewMode={!!previewButtonOnly}
-            />
+            <div ref={floatingButtonVisibilityRef}>
+              <FloatingButton
+                id={FLOATING_BUTTON_ID}
+                variant={floatingButton?.style as FloatingButtonVariant}
+                mode={floatingButton?.mode as FloatingButtonMode}
+                backgroundColor={floatingButton?.backgroundColor as FloatingButtonBackgroundColor}
+                onClick={
+                  previewButtonOnly
+                    ? () => {}
+                    : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON)
+                }
+                onMouseOver={onHover}
+                customIcon={floatingButton?.iconSVGSrc}
+                show={floatingButton?.showOption as FloatingButtonShow}
+                location={floatingButton?.position as FloatingButtonLocation}
+                hasInteractionHappened={userHasInteractedValue}
+                ariaLabel="Open chat"
+                previewMode={!!previewButtonOnly}
+              />
+            </div>
           )}
         </>
       )}
@@ -203,17 +246,21 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
   );
 };
 
-const FloatingChatWidgetWithBaseWidget =
-  withBaseWidget<FloatingChatWidgetHandlerProps>(FloatingChatWidgetHandler);
+const FloatingChatWidgetWithBaseWidget = withBaseWidget<FloatingChatWidgetHandlerProps>(
+  FloatingChatWidgetHandler,
+  { deferLoading: false },
+);
 
 export interface FloatingChatWidgetProps {
   previewButtonOnly?: boolean;
   previewChatAlwaysOpen?: boolean;
+  previewCXButtonsEnabled?: boolean;
 }
 
 export const FloatingChatWidget = ({
   previewButtonOnly,
   previewChatAlwaysOpen,
+  previewCXButtonsEnabled,
 }: FloatingChatWidgetProps = {}) => {
   return (
     <FloatingChatWidgetWithBaseWidget
@@ -221,6 +268,7 @@ export const FloatingChatWidget = ({
       widgetConfigId="fake-widget-config-id"
       previewButtonOnly={previewButtonOnly}
       previewChatAlwaysOpen={previewChatAlwaysOpen}
+      previewCXButtonsEnabled={previewCXButtonsEnabled}
     />
   );
 };

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

@@ -0,0 +1,125 @@
+import { render, waitFor } from '@testing-library/react';
+import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { FloatingChatWidget } from '../FloatingChatWidget';
+
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
+
+vi.mock('@envive-ai/react-toolkit-v3/FloatingButton', () => ({
+  FloatingButton: () => <div data-testid="floating-button">Floating Button</div>,
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
+  useAmplitude: () => ({
+    trackEvent: mockTrackEvent,
+    isReady: true,
+  }),
+  SpiffyMetricsEventName: {
+    ChatComponentVisible: 'Chat Component Visible',
+    SearchComponentVisible: 'Search Component Visible',
+  },
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
+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({
+      floatingButton: { showOption: 'always', position: 'bottom-right' },
+      floatingChat: {},
+      lookAndFeel: {},
+    }),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/salesAgentContext', () => ({
+  useSalesAgent: () => ({}),
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/ChatToggle', () => ({
+  useChatToggle: () => ({
+    isOpen: false,
+    openChat: vi.fn(),
+    closeChat: vi.fn(),
+  }),
+}));
+
+vi.mock('../hooks/useFloatingButtonVisibility', () => ({
+  useFloatingButtonVisibility: () => ({
+    shouldShowFloatingButton: true,
+  }),
+}));
+
+vi.mock('../hooks/useAutoPopup', () => ({
+  useAutoPopup: () => {},
+}));
+
+vi.mock('../../hooks/useGetWidgetStatus', () => ({
+  default: () => ({
+    userHasInteractedValue: false,
+  }),
+}));
+
+vi.mock('src/debug/debugBar', () => ({
+  DebugBar: () => null,
+}));
+
+vi.mock('../../CXIntegration/hooks/useUnifiedCXButton', () => ({
+  useUnifiedCXButton: () => ({
+    isSwitchEnabled: () => false,
+    toggle: vi.fn(),
+  }),
+}));
+
+describe('FloatingChatWidget analytics', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetHardcopy.mockResolvedValue({ language: 'en', values: {} });
+  });
+
+  it('should track ChatComponentVisible when floating button is shown', async () => {
+    render(<FloatingChatWidget previewButtonOnly />);
+
+    await waitFor(
+      () => {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
+            widget_config_id: 'floating-button',
+            widget_type: WidgetTypeV3.FloatingButtonV3,
+          },
+          '0px',
+          true,
+        );
+      },
+      { timeout: 3000 },
+    );
+  }, 5000);
+});

package/src/widgets/ProductCardWidget/ProductCardWidget.tsx

@@ -1,16 +1,23 @@
-import { ProductCardWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
-import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
-import { useCallback, useEffect } from 'react';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import {
-  SpiffyMetricsEventName,
+  EnviveMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { ProductCardWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import {
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import { ProductCard } from '@envive-ai/react-toolkit-v3/ProductCard';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useCallback } from 'react';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
+import { RawValues, getStringIdForText } from '../utils/functions';
 
 const mockPrompts = [
   'Loading prompt 1',
@@ -50,32 +57,52 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
   const imageSrc = productCardWidgetConfig?.imageSrc || '';
 
   const { trackEvent } = useAmplitude();
-
-  const { widgetConfigId } = props;
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.ProductCardV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const {
+    onClick: onSuggestionClick,
+    onDrag,
+    onHover,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(WidgetInteractionComponent.IMAGE_PROMPT_CARD, text => {
+    const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
+    return getStringIdForText(rawValues, text);
+  });
 
   const handleSelect = useCallback(
-    (prompt: string) => {
+    (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: prompt,
+        query: text,
         userTyped: false,
         displayLocation: ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON,
       });
       openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON);
+      onSuggestionClick(text);
     },
-    [onTypedMessageSubmitted, openChat],
+    [hardcopyContent, onTypedMessageSubmitted, openChat, trackEvent],
   );
 
   const handleInputClick = useCallback(() => {
     openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_TEXT_FIELD);
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+        widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+      },
+    });
   }, [openChat]);
 
   return (
@@ -93,6 +120,12 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
       textTypingDuration={800}
       textTransition={2000}
       onSelect={handleSelect}
+      onDrag={onDrag}
+      onHover={onHover}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
       onInputClick={handleInputClick}
     />
   );

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

@@ -0,0 +1,148 @@
+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 { ProductCardWidget } from '../ProductCardWidget';
+
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = 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/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
+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(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
+            widget_config_id: 'test-config-1',
+            widget_type: WidgetTypeV3.ProductCardV3,
+          },
+          '0px',
+          true,
+        );
+      },
+      { 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);
+});