@envive-ai/react-widgets-v3 0.3.20 → 0.3.22

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

@@ -1,11 +1,11 @@
 import { render, waitFor } from '@testing-library/react';
-import { 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 { ChatPreviewWidget } from '../ChatPreviewWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
 vi.mock('@envive-ai/react-toolkit-v3/ChatPreview', () => ({
   ChatPreview: () => <div data-testid="chat-preview-mock">Chat Preview</div>,
@@ -22,6 +22,10 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   },
 }));
 
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
@@ -100,13 +104,15 @@ describe('ChatPreviewWidget analytics', () => {
 
     await waitFor(
       () => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
             widget_config_id: 'test-config-1',
             widget_type: WidgetTypeV3.ChatPreviewV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -1,7 +1,6 @@
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
@@ -11,6 +10,7 @@ import {
   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 {
   Collapse,
@@ -139,21 +139,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
@@ -222,24 +218,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)
-              }
-              onMouseOver={onHover}
-              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>
           )}
         </>
       )}
@@ -247,8 +245,10 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
   );
 };
 
-const FloatingChatWidgetWithBaseWidget =
-  withBaseWidget<FloatingChatWidgetHandlerProps>(FloatingChatWidgetHandler);
+const FloatingChatWidgetWithBaseWidget = withBaseWidget<FloatingChatWidgetHandlerProps>(
+  FloatingChatWidgetHandler,
+  { deferLoading: false },
+);
 
 export interface FloatingChatWidgetProps {
   previewButtonOnly?: boolean;

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

@@ -1,11 +1,11 @@
 import { render, waitFor } from '@testing-library/react';
-import { 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 { 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>,
@@ -22,6 +22,10 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   },
 }));
 
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
@@ -105,13 +109,15 @@ describe('FloatingChatWidget analytics', () => {
 
     await waitFor(
       () => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
             widget_config_id: 'floating-button',
             widget_type: WidgetTypeV3.FloatingButtonV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

package/src/widgets/ProductCardWidget/ProductCardWidget.tsx

@@ -1,7 +1,6 @@
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
@@ -16,7 +15,7 @@ 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, useEffect } from 'react';
+import { useCallback } from 'react';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { RawValues, getStringIdForText } from '../utils/functions';
 
@@ -72,17 +71,6 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
     return getStringIdForText(rawValues, text);
   });
 
-  const { widgetConfigId } = props;
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.ProductCardV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
-
   const handleSelect = useCallback(
     (text: string) => {
       const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;

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

@@ -1,14 +1,12 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import {
-  EnviveMetricsEventName,
-  SpiffyMetricsEventName,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+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 }) => (
@@ -40,6 +38,10 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   },
 }));
 
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
@@ -106,13 +108,15 @@ describe('ProductCardWidget analytics', () => {
 
     await waitFor(
       () => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
             widget_config_id: 'test-config-1',
             widget_type: WidgetTypeV3.ProductCardV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

package/src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx

@@ -13,7 +13,6 @@ import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
 import { lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
@@ -28,7 +27,7 @@ import {
 import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { useAtomValue } from 'jotai';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
 import { RawValues, getRecentProductImageUrls, getStringIdForText } from '../utils/functions';
@@ -65,16 +64,6 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
 
   const { trackEvent } = useAmplitude();
 
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.PromptButtonCarouselWithImageV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
-
   const handlePromptButtonClick = useCallback(
     (text: string) => {
       const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;

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

@@ -1,14 +1,12 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import {
-  EnviveMetricsEventName,
-  SpiffyMetricsEventName,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+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 { PromptButtonCarouselWithImageWidget } from '../PromptButtonCarouselWithImageWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
 vi.mock('@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage', () => ({
   PromptButtonCarouselWithImage: ({
@@ -46,6 +44,17 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   },
 }));
 
+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,
@@ -141,13 +150,15 @@ describe('PromptButtonCarouselWithImageWidget analytics', () => {
 
     await waitFor(
       () => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
             widget_config_id: 'test-config-1',
             widget_type: WidgetTypeV3.PromptButtonCarouselWithImageV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

package/src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx

@@ -1,7 +1,6 @@
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
@@ -10,7 +9,7 @@ import {
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { WidgetInteractionComponent } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
@@ -65,16 +64,6 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
 
   const { trackEvent } = useAmplitude();
 
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.PromptCarouselV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
-
   const handleButtonClick = useCallback(
     (text: string) => {
       const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;

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

@@ -1,14 +1,12 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import {
-  EnviveMetricsEventName,
-  SpiffyMetricsEventName,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+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 { PromptCarouselWidget } from '../PromptCarouselWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
 vi.mock('@envive-ai/react-toolkit-v3/PromptCarousel', () => ({
   PromptCarousel: ({
@@ -30,6 +28,15 @@ vi.mock('@envive-ai/react-toolkit-v3/PromptCarousel', () => ({
       ))}
     </div>
   ),
+  usePromptCarouselAnalytics: () => ({
+    onClick: vi.fn(),
+    onDrag: vi.fn(),
+    onHover: vi.fn(),
+    onMouseDown: vi.fn(),
+    onMouseUp: vi.fn(),
+    onTouchStart: vi.fn(),
+    onTouchEnd: vi.fn(),
+  }),
 }));
 
 vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
@@ -46,6 +53,10 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   },
 }));
 
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
@@ -112,13 +123,15 @@ describe('PromptCarouselWidget analytics', () => {
 
     await waitFor(
       () => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
             widget_config_id: 'test-config-1',
             widget_type: WidgetTypeV3.PromptCarouselV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

package/src/widgets/SocialProofWidget/SocialProofWidget.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'react';
+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';
@@ -18,7 +18,6 @@ import {
 import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
@@ -108,16 +107,6 @@ 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;

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

@@ -1,14 +1,12 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import {
-  EnviveMetricsEventName,
-  SpiffyMetricsEventName,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+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();
@@ -52,6 +50,17 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   },
 }));
 
+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,
@@ -146,13 +155,15 @@ describe('SocialProofWidget analytics', () => {
 
     await waitFor(
       () => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
             widget_config_id: 'test-config-1',
             widget_type: WidgetTypeV3.SocialProofV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

package/src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.tsx

@@ -1,7 +1,6 @@
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
@@ -10,7 +9,7 @@ import {
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { WidgetInteractionComponent } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
@@ -65,16 +64,6 @@ 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;

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

@@ -1,14 +1,12 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import {
-  EnviveMetricsEventName,
-  SpiffyMetricsEventName,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+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: ({
@@ -46,6 +44,17 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   },
 }));
 
+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,
@@ -112,13 +121,15 @@ describe('TitledPromptCarouselWidget analytics', () => {
 
     await waitFor(
       () => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
             widget_config_id: 'test-config-1',
             widget_type: WidgetTypeV3.TitledPromptCarouselV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );