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

package/src/widgets/TypingAnimationWidget/TypingAnimationWidget.tsx

@@ -2,7 +2,6 @@ import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application
 import { chatOnToggleAtom } from '@envive-ai/react-hooks/atoms/chat/chatState';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
@@ -23,7 +22,7 @@ import {
 import { TypingAnimation } from '@envive-ai/react-toolkit-v3/TypingAnimation';
 import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
 import { useSetAtom } from 'jotai';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { RawValues, getStringIdForText } from '../utils/functions';
 
@@ -86,16 +85,6 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
     return getStringIdForText(rawValues, text);
   });
 
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.TypingAnimationV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
-
   const handleButtonClick = useCallback(
     (text: string) => {
       const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;

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

@@ -1,14 +1,12 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { atom } from 'jotai';
-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 { TypingAnimationWidget } from '../TypingAnimationWidget';
 
 const mockTrackEvent = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
 vi.mock('@envive-ai/react-toolkit-v3/TypingAnimation', () => ({
   TypingAnimation: ({
@@ -50,6 +48,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,
@@ -124,13 +133,15 @@ describe('TypingAnimationWidget 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.TypingAnimationV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

package/src/widgets/__tests__/trackEventCanary.test.ts

@@ -7,7 +7,7 @@ const WIDGETS_SRC_DIR = join(process.cwd(), 'src');
  * Known count of trackEvent({ invocations in widget source files (excluding tests and stories).
  * Update this when adding new trackEvent calls - and add a test for the new event!
  */
-const EXPECTED_TRACK_EVENT_CALL_COUNT = 15;
+const EXPECTED_TRACK_EVENT_CALL_COUNT = 7;
 
 function getAllSourceFiles(dir: string, files: string[] = []): string[] {
   const entries = readdirSync(dir, { withFileTypes: true });