@envive-ai/react-hooks 0.3.12 → 0.3.13

package/src/contexts/typesV3.ts

@@ -201,6 +201,15 @@ export interface AutoPopupConfig {
   triggers: AutoPopupTrigger[];
 }
 
+type PartialViewConfig = {
+  /**
+   * When true, only full-screen mode is supported (no partial/draggable middle state).
+   * Useful when partial view causes usability issues on mobile.
+   * Default: false (undefined and false = partial view enabled).
+   */
+  disabled?: boolean;
+};
+
 type FloatingChatConfig = {
   headerBackgroundColor?: string;
   headerMode: Mode;
@@ -214,6 +223,7 @@ type FloatingChatConfig = {
   welcomeMessageText: string;
   chatFooterTextFieldPlaceholderText: string;
   autoPopupConfig?: AutoPopupConfig;
+  partialViewConfig?: PartialViewConfig;
 };
 
 type CustomerServiceIntegration = {

package/src/contexts/userIdentityContext/__tests__/userIdentityContext.test.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { Provider, useStore } from 'jotai';
 import { userIdAtom } from 'src/atoms/app';
 import { LocalStorageProvider } from 'src/contexts/localStorageContext';
 import Logger from 'src/application/logging/logger';
-import CommerceApiClient from 'src/application/commerce-api';
 import { UserIdentityService } from 'src/services/userIdentityService';
 import { UserIdentityProvider, useUserIdentity } from '../userIdentityContext';
 
@@ -13,13 +12,6 @@ vi.spyOn(Logger, 'logInfo').mockImplementation(() => {});
 vi.spyOn(Logger, 'logWarn').mockImplementation(() => {});
 vi.spyOn(Logger, 'logError').mockImplementation(() => {});
 
-// Mock CommerceApiClient
-vi.mock('src/application/commerce-api', () => ({
-  default: {
-    identifyUser: vi.fn().mockResolvedValue(undefined),
-  },
-}));
-
 // Mock uuid to have predictable values in tests
 vi.mock('uuid', () => ({
   v4: vi.fn(() => 'test-uuid-12345'),
@@ -97,31 +89,6 @@ const AtomReaderComponent: React.FC = () => {
   return <div data-testid="atom-reader">{userId}</div>;
 };
 
-// Component that uses the hook and triggers identifyUser
-const IdentifyUserComponent: React.FC = () => {
-  const context = useUserIdentity();
-  const [identifying, setIdentifying] = React.useState(false);
-
-  const handleIdentify = async () => {
-    setIdentifying(true);
-    await context.identifyUser();
-    setIdentifying(false);
-  };
-
-  return (
-    <div>
-      <button
-        type="button"
-        data-testid="identify-button"
-        onClick={handleIdentify}
-      >
-        Identify
-      </button>
-      {identifying && <div data-testid="identifying">Identifying...</div>}
-    </div>
-  );
-};
-
 describe('UserIdentityProvider', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -334,36 +301,4 @@ describe('UserIdentityProvider', () => {
       });
     });
   });
-
-  describe('identifyUser', () => {
-    it('should call CommerceApiClient.identifyUser with correct parameters', async () => {
-      const identifySpy = vi.spyOn(CommerceApiClient, 'identifyUser');
-
-      renderWithProviders(<IdentifyUserComponent />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId('identify-button')).toBeInTheDocument();
-      });
-
-      await act(async () => {
-        screen.getByTestId('identify-button').click();
-      });
-
-      await waitFor(
-        () => {
-          expect(identifySpy).toHaveBeenCalled();
-          const callArgs = identifySpy.mock.calls[0];
-          expect(callArgs[0]).toContain('spiffy-user-id-'); // spiffyUserId
-          expect(callArgs[1]).toBe('UNKNOWN_CDP_USER_ID'); // merchantUserId (cdpUserId)
-          // userAgentDetails - in test environment, some values may be undefined
-          expect(callArgs[2]).toBeDefined();
-          expect(typeof callArgs[2]).toBe('object');
-          // Verify it has the expected structure (values may be undefined in test env)
-          expect(callArgs[2]).toHaveProperty('os');
-          expect(callArgs[2]).toHaveProperty('browser');
-        },
-        { timeout: 3000 },
-      );
-    });
-  });
 });

package/src/contexts/userIdentityContext/userIdentityContext.tsx

@@ -7,34 +7,13 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import UAParser from 'ua-parser-js';
 import Logger from 'src/application/logging/logger';
-import CommerceApiClient from 'src/application/commerce-api';
-import { ClientDetails } from 'src/application/models/clientDetails';
 import { useLocalStorage } from 'src/contexts/localStorageContext';
 import { useSetAtom } from 'jotai';
 import { userIdAtom } from 'src/atoms/app';
 import { UserIdentityService } from 'src/services/userIdentityService';
 
-// Helper function from the original service
-const getUserAgentDetails = (): ClientDetails => {
-  const uaParser = new UAParser();
-  const result = uaParser.getResult();
-
-  return {
-    os: result?.os?.name,
-    osVersion: result?.os?.version,
-    deviceBrand: result?.device?.vendor,
-    deviceManufacturer: result?.device?.vendor,
-    deviceModel: result?.device?.model,
-    browser: result?.browser?.name,
-    browserVersion: result?.browser?.version,
-    userAgent: result?.ua,
-  };
-};
-
 export interface UserIdentityContextType {
-  identifyUser: () => Promise<void>;
   getUserIdOrDefault: () => Promise<string>;
   getUserIdOverrideFromLocalStorage: () => string | undefined;
   setUserIdOverrideInLocalStorage: (userId: string) => string;
@@ -113,33 +92,8 @@ export const UserIdentityProvider: React.FC<UserIdentityProviderProps> = ({
     }
   }, [getUserIdOverrideFromLocalStorage]);
 
-  const identifyUser = useCallback(async (): Promise<void> => {
-    if (!isReady) {
-      Logger.logWarn('[UserIdentityContext] Context not ready, skipping identifyUser', undefined);
-      return;
-    }
-
-    try {
-      // Temporarily commented out until WindowDataLayerService is resolved
-      // const cdpUserId = WindowDataLayerService.getGoogleAnalyticsClientId();
-      const cdpUserId = 'UNKNOWN_CDP_USER_ID'; // Placeholder
-      const userId = await getUserIdOrDefault();
-      const userAgentDetails = getUserAgentDetails();
-
-      if (!cdpUserId) {
-        Logger.logWarn('[spiffy-ai] No GA Client ID found, skipping identifyUser', undefined);
-        return;
-      }
-
-      await CommerceApiClient.identifyUser(userId, cdpUserId, userAgentDetails);
-    } catch (error) {
-      Logger.logError('[spiffy-ai] Error identifying user', error);
-    }
-  }, [isReady, getUserIdOrDefault]);
-
   const value = useMemo(
     () => ({
-      identifyUser,
       getUserIdOrDefault,
       getUserIdOverrideFromLocalStorage,
       setUserIdOverrideInLocalStorage,
@@ -147,7 +101,6 @@ export const UserIdentityProvider: React.FC<UserIdentityProviderProps> = ({
       isReady,
     }),
     [
-      identifyUser,
       getUserIdOrDefault,
       getUserIdOverrideFromLocalStorage,
       setUserIdOverrideInLocalStorage,

package/src/hooks/AmplitudeOperations/useAmplitudeOperations.ts

@@ -1,8 +1,6 @@
 import { useCallback, useState } from 'react';
-import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from 'src/contexts/amplitudeContext/amplitudeContext';
+import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
+import { SpiffyMetricsEventName } from 'src/services/amplitudeService/amplitudeService';
 
 export const useAmplitudeTracking = () => {
   const { trackEvent, isReady } = useAmplitude();

package/src/hooks/ChatToggle/useChatToggle.ts

@@ -1,10 +1,8 @@
 import { useAtomValue, useSetAtom } from 'jotai';
 import { ChatElementDisplayLocationV3 } from 'src/application/models';
 import { chatAtom, chatOnToggleAtom } from 'src/atoms/chat';
-import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from 'src/contexts/amplitudeContext/amplitudeContext';
+import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
+import { SpiffyMetricsEventName } from 'src/services/amplitudeService/amplitudeService';
 
 export const useChatToggle = () => {
   const onToggle = useSetAtom(chatOnToggleAtom);

package/src/hooks/Search/useSearch.tsx

@@ -18,10 +18,8 @@ import {
 import { isFilterOpenAtom } from 'src/atoms/globalSearch/globalSearch';
 import { formatFilterDisplayName } from 'src/atoms/search/utils';
 import { ProductSorting } from 'src/atoms/search/types';
-import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from 'src/contexts/amplitudeContext/amplitudeContext';
+import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
+import { SpiffyMetricsEventName } from 'src/services/amplitudeService/amplitudeService';
 import { SpiffyWidgets } from 'src/application/models/spiffyWidgets';
 import { ProductCardConfig } from 'src/contexts/types';
 import { SearchResult } from 'src/application/models/api/search';

package/src/hooks/Search/useSearchInput.ts

@@ -4,7 +4,7 @@ import Fuse from 'fuse.js';
 
 import { autocompleteStateAtom } from 'src/atoms/globalSearch';
 import { amplitudeTrackEventAtom } from 'src/atoms/amplitude/amplitudeTrackEventAtom';
-import { SpiffyMetricsEventName } from 'src/contexts/amplitudeContext';
+import { SpiffyMetricsEventName } from 'src/services/amplitudeService/amplitudeService';
 import { SpiffyWidgets } from 'src/application/models/spiffyWidgets';
 
 export interface UseSearchInputProps {

package/src/hooks/TrackComponentVisibleEvent/useTrackComponentVisibleEvent.ts

@@ -1,10 +1,8 @@
 import { RefObject, useEffect, useRef } from 'react';
 import { SpiffyWidgets } from 'src/application/models/spiffyWidgets';
 import { useIntersection } from 'src/hooks/Intersection/useIntersection';
-import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from 'src/contexts/amplitudeContext/amplitudeContext';
+import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
+import { SpiffyMetricsEventName } from 'src/services/amplitudeService/amplitudeService';
 
 /**
  * Tracks a component and logs an event to Amplitude when the component is visible.

package/src/hooks/UpdateAnalyticsProps/useUpdateAnalyticsProps.ts

@@ -1,9 +1,7 @@
 import { useAtomValue } from 'jotai';
 import { useEffect, useRef } from 'react';
-import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from 'src/contexts/amplitudeContext/amplitudeContext';
+import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
+import { SpiffyMetricsEventName } from 'src/services/amplitudeService/amplitudeService';
 import { hasParsedVariantInfoAtom, variantInfoAtom } from 'src/atoms/app/variant';
 
 /**

package/src/services/amplitudeService/amplitudeService.ts

@@ -11,52 +11,11 @@ import type {
 import { FeatureFlagService } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
 import { WidgetTypeV3 } from 'src/contexts/typesV3';
 import { ChatElementDisplayLocationV3 } from 'src/application/models/chatElementDisplayLocationV3';
+import { projectToGA4 } from '../ga4ProjectionService/ga4ProjectionService';
+import { EnviveMetricsEventName, SpiffyMetricsEventName } from './eventNames';
 
-export enum SpiffyMetricsEventName {
-  BundleLoaded = 'Bundle Loaded',
-  EnvironmentInitialized = 'Environment Initialized',
-  ChatLiveAgentBtnClick = 'Chat Live Agent Btn Click',
-  ChatFloatingButtonVisible = 'Chat Floating Button Visible',
-  ChatComponentVisible = 'Chat Component Visible',
-  ChatComponentExpanded = 'Chat Component Expanded',
-  ChatComponentCollapsed = 'Chat Component Collapsed',
-  ChatUserMessageInput = 'Chat User Message Input',
-  ChatSuggestionClicked = 'Chat Suggestion Clicked',
-  ChatAssistantResponse = 'Chat Assistant Response',
-  ProductCardClicked = 'Product Card Clicked',
-  ProductReviewCardClicked = 'Product Review Card Clicked',
-  AddToCartClicked = 'Add To Cart Clicked',
-  PromptCardClicked = 'Prompt Card Clicked',
-  SupportedEvent = 'Supported Event',
-  SearchBackToResponseClicked = 'Search Back to Response Clicked',
-  PerformanceMetrics = 'Performance Metrics',
-  SearchBarClicked = 'Search Bar Clicked',
-  OrderLookupStarted = 'Order Lookup Started',
-  OrderLookupFormSubmitted = 'Order Lookup Form Submitted',
-  SearchComponentVisible = 'Search Component Visible',
-  SearchZeroStateSuggestionClicked = 'Search Zero State Suggestion Clicked', // This is the scrolling list of suggestion buttons in global search
-  SearchInputStarted = 'Search Input Started',
-  SearchQuerySubmitted = 'Search Query Submitted',
-  // SearchAutocompleteViewed = 'Search Autocomplete Viewed', // TODO: add this when autocomplete is added
-  // SearchAutocompleteClicked = 'Search Autocomplete Clicked', // TODO: add this when autocomplete is added
-  SearchResultsViewed = 'Search Results Viewed',
-  SearchTimeToFirstClick = 'Search Time to First Click',
-  SearchZeroResultsRate = 'Search Zero Results Rate',
-  SearchFilterClicked = 'Search Filter Clicked',
-  SearchSortClicked = 'Search Sort Clicked',
-}
-
-export enum EnviveMetricsEventName {
-  WidgetRendered = 'Widget Rendered',
-  WidgetInteraction = 'Widget Interaction',
-  ChatRequest = 'Chat Request',
-  ChatResponse = 'Chat Response',
-  EnviveInitialized = 'Envive Initialized',
-  PageViewed = 'Page Viewed', // Will this be useful?
-  WidgetTextRequest = 'Widget Text Request',
-  WidgetTextResponse = 'Widget Text Response',
-  WidgetTextClicked = 'Widget Text Clicked',
-}
+// Re-export event names for convenience
+export { EnviveMetricsEventName, SpiffyMetricsEventName };
 
 export interface TrackEventParams {
   eventName: SpiffyMetricsEventName | EnviveMetricsEventName;
@@ -142,7 +101,7 @@ export class AmplitudeService {
       'environment.envive_enabled': this.config.enabledFeatures?.envive,
     };
 
-    const orgLevelAmplitudeTrackingProps = AmplitudeService.isEnviveEvent(eventName)
+    const orgLevelAmplitudeTrackingProps = AmplitudeService.isV3EnviveEvent(eventName)
       ? {
           ...this.config.featureFlagService.getFullFlagValues(),
           ...experimentProps,
@@ -375,12 +334,12 @@ export class AmplitudeService {
     return eventProps ?? {};
   }
 
-  static isEnviveEvent(eventName: SpiffyMetricsEventName | EnviveMetricsEventName): boolean {
+  static isV3EnviveEvent(eventName: SpiffyMetricsEventName | EnviveMetricsEventName): boolean {
     return Object.values(EnviveMetricsEventName).includes(eventName as EnviveMetricsEventName);
   }
 
   static decorateEventName(eventName: SpiffyMetricsEventName | EnviveMetricsEventName): string {
-    if (AmplitudeService.isEnviveEvent(eventName)) {
+    if (AmplitudeService.isV3EnviveEvent(eventName)) {
       return `[Envive] ${eventName}`;
     }
     return `[Spiffy] ${eventName}`;
@@ -438,8 +397,13 @@ export class AmplitudeService {
         },
       );
 
-      if (alsoSendToGoogleAnalytics && this.config.orgGaConfig) {
-        // TODO: Add in windowDataLayerService or context alternative and hook it up here
+      if (AmplitudeService.isV3EnviveEvent(eventName) && this.config.orgGaConfig) {
+        const mergedPropsForGA4 = {
+          ...this.getDefaultTrackingProps(eventName),
+          ...mappedEventProps,
+        };
+        projectToGA4(eventName as EnviveMetricsEventName, mergedPropsForGA4);
+      } else if (alsoSendToGoogleAnalytics && this.config.orgGaConfig) {
         Logger.logDebug('[spiffy-ai] GA tracking', decoratedEventName);
         if (typeof window !== 'undefined' && window.dataLayer) {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/services/amplitudeService/eventNames.ts

@@ -0,0 +1,52 @@
+/**
+ * Event name enums for Amplitude tracking.
+ *
+ * NOTE: This file exists separately to avoid circular dependency issues.
+ * The amplitudeService imports from ga4ProjectionService, which needs these enums.
+ * By keeping the enums in a separate file, ga4ProjectionService can import them
+ * without creating a circular dependency with amplitudeService.
+ */
+
+export enum SpiffyMetricsEventName {
+  BundleLoaded = 'Bundle Loaded',
+  EnvironmentInitialized = 'Environment Initialized',
+  ChatLiveAgentBtnClick = 'Chat Live Agent Btn Click',
+  ChatFloatingButtonVisible = 'Chat Floating Button Visible',
+  ChatComponentVisible = 'Chat Component Visible',
+  ChatComponentExpanded = 'Chat Component Expanded',
+  ChatComponentCollapsed = 'Chat Component Collapsed',
+  ChatUserMessageInput = 'Chat User Message Input',
+  ChatSuggestionClicked = 'Chat Suggestion Clicked',
+  ChatAssistantResponse = 'Chat Assistant Response',
+  ProductCardClicked = 'Product Card Clicked',
+  ProductReviewCardClicked = 'Product Review Card Clicked',
+  AddToCartClicked = 'Add To Cart Clicked',
+  PromptCardClicked = 'Prompt Card Clicked',
+  SupportedEvent = 'Supported Event',
+  SearchBackToResponseClicked = 'Search Back to Response Clicked',
+  PerformanceMetrics = 'Performance Metrics',
+  SearchBarClicked = 'Search Bar Clicked',
+  OrderLookupStarted = 'Order Lookup Started',
+  OrderLookupFormSubmitted = 'Order Lookup Form Submitted',
+  SearchComponentVisible = 'Search Component Visible',
+  SearchZeroStateSuggestionClicked = 'Search Zero State Suggestion Clicked',
+  SearchInputStarted = 'Search Input Started',
+  SearchQuerySubmitted = 'Search Query Submitted',
+  SearchResultsViewed = 'Search Results Viewed',
+  SearchTimeToFirstClick = 'Search Time to First Click',
+  SearchZeroResultsRate = 'Search Zero Results Rate',
+  SearchFilterClicked = 'Search Filter Clicked',
+  SearchSortClicked = 'Search Sort Clicked',
+}
+
+export enum EnviveMetricsEventName {
+  WidgetRendered = 'Widget Rendered',
+  WidgetInteraction = 'Widget Interaction',
+  ChatRequest = 'Chat Request',
+  ChatResponse = 'Chat Response',
+  EnviveInitialized = 'Envive Initialized',
+  PageViewed = 'Page Viewed',
+  WidgetTextRequest = 'Widget Text Request',
+  WidgetTextResponse = 'Widget Text Response',
+  WidgetTextClicked = 'Widget Text Clicked',
+}