@envive-ai/react-hooks 0.3.7 → 0.3.8

package/src/contexts/userIdentityContext/userIdentityContext.tsx

@@ -1,12 +1,20 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  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 { v4 as uuid } from 'uuid';
 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 => {
@@ -27,10 +35,8 @@ const getUserAgentDetails = (): ClientDetails => {
 
 export interface UserIdentityContextType {
   identifyUser: () => Promise<void>;
-  getUserIdOrDefault: () => string;
+  getUserIdOrDefault: () => Promise<string>;
   getUserIdOverrideFromLocalStorage: () => string | undefined;
-  getUserIdDefaultFromLocalStorage: () => string | undefined;
-  setUserIdDefaultInLocalStorage: (userId: string) => string;
   setUserIdOverrideInLocalStorage: (userId: string) => string;
   clearUserIdOverrideInLocalStorage: () => void;
   isReady: boolean;
@@ -38,7 +44,15 @@ export interface UserIdentityContextType {
 
 const UserIdentityContext = createContext<UserIdentityContextType | undefined>(undefined);
 
-export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+interface UserIdentityProviderProps {
+  userIdService: UserIdentityService;
+  children: ReactNode;
+}
+
+export const UserIdentityProvider: React.FC<UserIdentityProviderProps> = ({
+  userIdService: inputService,
+  children,
+}) => {
   const [localUserId, setLocalUserId] = useState<string | undefined>(undefined);
   const setUserId = useSetAtom(userIdAtom);
   const { getItem, setItem, isAvailable: localStorageIsReady } = useLocalStorage();
@@ -52,26 +66,12 @@ export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({
   }, [localStorageIsReady]);
 
   const USER_ID_OVERRIDE_KEY = 'v1-spiffy-user-id-override';
-  const USER_ID_DEFAULT_KEY = 'v1-spiffy-user-id-default';
 
+  // @deprecated
   const getUserIdOverrideFromLocalStorage = useCallback((): string | undefined => {
     return getItem(USER_ID_OVERRIDE_KEY) ?? undefined;
   }, [getItem]);
 
-  const getUserIdDefaultFromLocalStorage = useCallback((): string | undefined => {
-    return getItem(USER_ID_DEFAULT_KEY) ?? undefined;
-  }, [getItem]);
-
-  const setUserIdDefaultInLocalStorage = useCallback(
-    (userId: string): string => {
-      Logger.logInfo(`setUserIdDefaultInLocalStorage - Setting user_id=${userId}`);
-      setItem(USER_ID_DEFAULT_KEY, userId);
-      // window.dispatchEvent is handled by useLocalStorage now
-      return userId;
-    },
-    [setItem, USER_ID_DEFAULT_KEY],
-  );
-
   const setUserIdOverrideInLocalStorage = useCallback(
     (userId: string): string => {
       Logger.logInfo(`setUserIdOverrideInLocalStorage - Setting user_id=${userId}`);
@@ -89,23 +89,29 @@ export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({
     setItem(USER_ID_OVERRIDE_KEY, ''); // Set to empty string to clear
   }, [setItem, USER_ID_OVERRIDE_KEY]);
 
-  const getUserIdOrDefault = useCallback((): string => {
+  const getUserIdOrDefault = useCallback(async (): Promise<string> => {
     const userIdOverride = getUserIdOverrideFromLocalStorage();
     if (userIdOverride) {
       return userIdOverride;
     }
 
-    const defaultUserId = getUserIdDefaultFromLocalStorage();
-    if (defaultUserId) {
-      return defaultUserId;
-    }
+    try {
+      // NOTE: This uses EnviveAnalytics under the hood to determine the userID
+      const enviveUserId = await inputService.getUserIdOrDefault();
 
-    return setUserIdDefaultInLocalStorage(`spiffy-user-id-${uuid()}`);
-  }, [
-    getUserIdOverrideFromLocalStorage,
-    getUserIdDefaultFromLocalStorage,
-    setUserIdDefaultInLocalStorage,
-  ]);
+      if (!enviveUserId) {
+        throw new Error(
+          '[spiffy-ai] EnviveAnalytics.resolveEnviveUserId() returned null/undefined - this should never happen',
+        );
+      }
+
+      return enviveUserId;
+    } catch (error: unknown) {
+      Logger.logError('[spiffy-ai] CRITICAL: Failed to get user ID from EnviveAnalytics', error);
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      throw new Error(`[spiffy-ai] CRITICAL: User ID resolution failed: ${errorMessage}`);
+    }
+  }, [getUserIdOverrideFromLocalStorage]);
 
   const identifyUser = useCallback(async (): Promise<void> => {
     if (!isReady) {
@@ -117,7 +123,7 @@ export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({
       // Temporarily commented out until WindowDataLayerService is resolved
       // const cdpUserId = WindowDataLayerService.getGoogleAnalyticsClientId();
       const cdpUserId = 'UNKNOWN_CDP_USER_ID'; // Placeholder
-      const userId = getUserIdOrDefault();
+      const userId = await getUserIdOrDefault();
       const userAgentDetails = getUserAgentDetails();
 
       if (!cdpUserId) {
@@ -136,8 +142,6 @@ export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({
       identifyUser,
       getUserIdOrDefault,
       getUserIdOverrideFromLocalStorage,
-      getUserIdDefaultFromLocalStorage,
-      setUserIdDefaultInLocalStorage,
       setUserIdOverrideInLocalStorage,
       clearUserIdOverrideInLocalStorage,
       isReady,
@@ -146,8 +150,6 @@ export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({
       identifyUser,
       getUserIdOrDefault,
       getUserIdOverrideFromLocalStorage,
-      getUserIdDefaultFromLocalStorage,
-      setUserIdDefaultInLocalStorage,
       setUserIdOverrideInLocalStorage,
       clearUserIdOverrideInLocalStorage,
       isReady,
@@ -155,11 +157,15 @@ export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({
   );
   useEffect(() => {
     if (isReady && !localUserId) {
-      const newUserId = getUserIdOrDefault();
-      setLocalUserId(newUserId);
-      setUserId(newUserId);
+      const setUserIdStates = async () => {
+        const newUserId = await getUserIdOrDefault();
+        console.log('useUserIdentity useEffect - setting localUserId', newUserId);
+        setLocalUserId(newUserId);
+        setUserId(newUserId);
+      };
+      setUserIdStates();
     }
-  }, [isReady, localUserId, setUserId]);
+  }, [getUserIdOrDefault, isReady, localUserId, setUserId]);
 
   if (!localUserId) {
     return null;

package/src/hooks/ElementObserver/useElementObserver.ts

@@ -51,8 +51,9 @@ export interface ElementObserverUtility {
  */
 export const useElementObserver = (selector: NodeSelector): ElementObserverUtility => {
   const INITIAL_RENDER_STATE = true;
-  const eoRef = useRef<ElementObserver>(DOMObserver.add(selector));
+  const eoRef = useRef<ElementObserver | null>(null);
   const [renderBlocked, setRenderBlocked] = useState(INITIAL_RENDER_STATE);
+  eoRef.current = DOMObserver.add(selector);
 
   /**
    * Fired every time the HTML element changes.

package/src/hooks/Search/__tests__/useSearch.test.tsx

@@ -25,6 +25,7 @@ import { ProductSorting } from 'src/atoms/search/types';
 import { SearchResult } from 'src/application/models/api/search';
 import { SearchResultsState } from 'src/hooks/utils';
 import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
+import { UserIdentityService } from 'src/services/userIdentityService';
 import { useSearch } from '../useSearch';
 
 // Mock dependencies
@@ -171,6 +172,15 @@ vi.mock('src/events', () => ({
   },
 }));
 
+const mockGetUserId = vi.fn().mockResolvedValue('test-user-id');
+const mockInitializeUser = vi.fn().mockResolvedValue(undefined);
+
+const testUserIdService = {
+  getUserIdOrDefault: mockGetUserId,
+  initializeUser: mockInitializeUser,
+  getUserIdOverrideFromLocalStorage: vi.fn().mockReturnValue(undefined),
+} as unknown as UserIdentityService;
+
 // FeatureFlagService
 const testFeatureFlagService = new FeatureFlagService([]);
 
@@ -398,7 +408,7 @@ const TestWrapper: React.FC<{
       >
         <LocalStorageProvider>
           <GraphQLProvider>
-            <UserIdentityProvider>
+            <UserIdentityProvider userIdService={testUserIdService}>
               <FeatureFlagServiceProvider featureFlagService={testFeatureFlagService}>
                 <AmplitudeProvider>
                   <NewOrgConfigProvider>

package/src/mocks/index.ts

@@ -0,0 +1 @@
+export * from './salesAgentMockData';

package/src/mocks/salesAgentMockData.ts

@@ -0,0 +1,247 @@
+import { SuggestionCategory } from '@spiffy-ai/commerce-api-client';
+import { Message, MessageRole, MessageType, Suggestion } from 'src/application/models';
+import { MockSalesAgentData } from 'src/contexts/salesAgentContext/salesAgentContext';
+
+export const mockMessages: Message[][] = [
+  // Welcome message
+  [
+    {
+      id: 'welcome-msg-1',
+      role: MessageRole.Assistant,
+      type: MessageType.Text,
+      createdAt: new Date(Date.now() - 310000).toISOString(),
+      metadata: {
+        content: 'Hello! How can I assist you today?',
+      },
+    },
+  ],
+  // User message
+  [
+    {
+      id: 'user-msg-1',
+      role: MessageRole.User,
+      type: MessageType.QueryTyped,
+      createdAt: new Date(Date.now() - 300000).toISOString(),
+      metadata: {
+        content: 'What are your best products?',
+      },
+    },
+  ],
+
+  // Assistant text response
+  [
+    {
+      id: 'agent-msg-1',
+      role: MessageRole.Assistant,
+      type: MessageType.Text,
+      createdAt: new Date(Date.now() - 290000).toISOString(),
+      metadata: {
+        content: 'Here are some of our best-selling products that customers love!',
+      },
+    },
+  ],
+  // Product carousel
+  [
+    {
+      id: 'product-1',
+      role: MessageRole.Assistant,
+      type: MessageType.Product,
+      createdAt: new Date(Date.now() - 280000).toISOString(),
+      metadata: {
+        id: 'product-1',
+        title: 'Leather Tote Bag',
+        salePrice: 89.99,
+        originalPrice: 129.99,
+        averageRating: 4.7,
+        numberReviews: 127,
+        url: 'https://example.com/product/leather-tote',
+        imageUrl: 'https://picsum.photos/400/400?random=1',
+        isForGrid: false,
+      },
+    },
+    {
+      id: 'product-2',
+      role: MessageRole.Assistant,
+      type: MessageType.Product,
+      createdAt: new Date(Date.now() - 280000).toISOString(),
+      metadata: {
+        id: 'product-2',
+        title: 'Designer Handbag',
+        salePrice: 199.99,
+        originalPrice: 249.99,
+        averageRating: 4.5,
+        numberReviews: 89,
+        url: 'https://example.com/product/designer-handbag',
+        imageUrl: 'https://picsum.photos/400/400?random=2',
+        isForGrid: false,
+      },
+    },
+    {
+      id: 'product-3',
+      role: MessageRole.Assistant,
+      type: MessageType.Product,
+      createdAt: new Date(Date.now() - 280000).toISOString(),
+      metadata: {
+        id: 'product-3',
+        title: 'Classic Shoulder Bag',
+        salePrice: 125.0,
+        originalPrice: 150.0,
+        averageRating: 4.8,
+        numberReviews: 203,
+        url: 'https://example.com/product/shoulder-bag',
+        imageUrl: 'https://picsum.photos/400/400?random=3',
+        isForGrid: false,
+      },
+    },
+  ],
+  // User message asking about reviews
+  [
+    {
+      id: 'user-msg-2',
+      role: MessageRole.User,
+      type: MessageType.QueryTyped,
+      createdAt: new Date(Date.now() - 200000).toISOString(),
+      metadata: {
+        content: 'What do customers say about these products?',
+      },
+    },
+  ],
+  // Assistant text response
+  [
+    {
+      id: 'agent-msg-2',
+      role: MessageRole.Assistant,
+      type: MessageType.Text,
+      createdAt: new Date(Date.now() - 190000).toISOString(),
+      metadata: {
+        content: 'Here are some recent customer reviews:',
+      },
+    },
+  ],
+  // Review carousel
+  [
+    {
+      id: 'review-1',
+      role: MessageRole.Assistant,
+      type: MessageType.Review,
+      createdAt: new Date(Date.now() - 180000).toISOString(),
+      metadata: {
+        id: 'review-1',
+        productId: 'product-1',
+        reviewer: 'Sarah M.',
+        review:
+          'Absolutely love this bag! The quality is outstanding and it fits everything I need. Highly recommend!',
+        stars: 5,
+      },
+    },
+    {
+      id: 'review-2',
+      role: MessageRole.Assistant,
+      type: MessageType.Review,
+      createdAt: new Date(Date.now() - 180000).toISOString(),
+      metadata: {
+        id: 'review-2',
+        productId: 'product-2',
+        reviewer: 'Jessica K.',
+        review:
+          'Beautiful design and great craftsmanship. The leather feels premium and the bag is very spacious.',
+        stars: 5,
+      },
+    },
+    {
+      id: 'review-3',
+      role: MessageRole.Assistant,
+      type: MessageType.Review,
+      createdAt: new Date(Date.now() - 180000).toISOString(),
+      metadata: {
+        id: 'review-3',
+        productId: 'product-3',
+        reviewer: 'Emily R.',
+        review: 'Perfect size and style. I get compliments every time I use it. Worth every penny!',
+        stars: 5,
+      },
+    },
+  ],
+  // User message asking about help pages
+  [
+    {
+      id: 'user-msg-3',
+      role: MessageRole.User,
+      type: MessageType.QueryTyped,
+      createdAt: new Date(Date.now() - 100000).toISOString(),
+      metadata: {
+        content: 'How do I return an item?',
+      },
+    },
+  ],
+  // Assistant text response with link
+  [
+    {
+      id: 'agent-msg-3',
+      role: MessageRole.Assistant,
+      type: MessageType.Text,
+      createdAt: new Date(Date.now() - 90000).toISOString(),
+      metadata: {
+        content:
+          'You can return items within 30 days of purchase. Visit our returns page at [returns](https://example.com/returns) for more information.',
+      },
+    },
+  ],
+  // Page/document carousel
+  [
+    {
+      id: 'page-1',
+      role: MessageRole.Assistant,
+      type: MessageType.Page,
+      createdAt: new Date(Date.now() - 80000).toISOString(),
+      metadata: {
+        id: 'page-1',
+        title: 'Return Policy',
+        description:
+          'Learn about our return policy, including timeframes, conditions, and how to initiate a return.',
+        url: 'https://example.com/returns',
+      },
+    },
+    {
+      id: 'page-2',
+      role: MessageRole.Assistant,
+      type: MessageType.Page,
+      createdAt: new Date(Date.now() - 80000).toISOString(),
+      metadata: {
+        id: 'page-2',
+        title: 'Shipping Information',
+        description: 'Find out about shipping options, delivery times, and tracking your order.',
+        url: 'https://example.com/shipping',
+      },
+    },
+  ],
+];
+
+export const mockSuggestions: Suggestion[] = [
+  {
+    id: 'suggestion-1',
+    category: SuggestionCategory.ProductBased,
+    content: 'What are the best products for gifting?',
+    createdAt: new Date().toISOString(),
+    isAnswer: false,
+  },
+  {
+    id: 'suggestion-2',
+    category: SuggestionCategory.ProductBased,
+    content: 'Show me summer dresses',
+    createdAt: new Date().toISOString(),
+    isAnswer: false,
+  },
+  {
+    id: 'suggestion-3',
+    category: SuggestionCategory.ProductBased,
+    content: 'Do you have free shipping?',
+    createdAt: new Date().toISOString(),
+    isAnswer: false,
+  },
+];
+
+export const mockSalesAgentData: MockSalesAgentData = {
+  messages: mockMessages,
+  suggestions: mockSuggestions,
+};

package/src/services/amplitudeService/__tests__/amplitudeService.test.ts

@@ -74,6 +74,8 @@ describe('AmplitudeService', () => {
       amplitudeApiKey: 'test-api-key',
       dataResidency: 'US',
       env: 'test',
+      orgId: 'test-org-id',
+      show: true,
       contextSource: 'app',
       orgShortName: 'test-org',
       featureFlagService,
@@ -104,6 +106,9 @@ describe('AmplitudeService', () => {
         amplitudeApiKey: 'test-api-key',
         dataResidency: 'US',
         env: 'test',
+        orgId: 'test-org-id',
+        show: true,
+        getLocalStorageItem: mockGetLocalStorageItem,
         contextSource: 'app',
         orgShortName: 'test-org',
         featureFlagService,
@@ -118,6 +123,9 @@ describe('AmplitudeService', () => {
         amplitudeApiKey: '',
         dataResidency: 'US',
         env: 'test',
+        orgId: 'test-org-id',
+        show: true,
+        getLocalStorageItem: mockGetLocalStorageItem,
         contextSource: 'app',
         orgShortName: 'test-org',
         featureFlagService,
@@ -132,6 +140,9 @@ describe('AmplitudeService', () => {
         amplitudeApiKey: 'test-api-key',
         dataResidency: 'US',
         env: 'test',
+        orgId: 'test-org-id',
+        show: true,
+        getLocalStorageItem: mockGetLocalStorageItem,
         contextSource: 'app',
         orgShortName: 'test-org',
         featureFlagService: null as any,
@@ -238,6 +249,9 @@ describe('AmplitudeService', () => {
         amplitudeApiKey: 'test-api-key',
         dataResidency: 'US',
         env: 'test',
+        orgId: 'test-org-id',
+        show: true,
+        getLocalStorageItem: mockGetLocalStorageItem,
         contextSource: 'app',
         orgShortName: 'test-org',
         featureFlagService,
@@ -375,6 +389,9 @@ describe('AmplitudeService', () => {
         amplitudeApiKey: 'test-api-key',
         dataResidency: 'US',
         env: 'test',
+        orgId: 'test-org-id',
+        show: true,
+        getLocalStorageItem: null,
         contextSource: 'app',
         orgShortName: 'test-org',
         featureFlagService,

package/src/services/amplitudeService/amplitudeService.ts

@@ -9,9 +9,11 @@ import type {
   ServerZoneType,
 } from '@amplitude/analytics-types';
 import { FeatureFlagService } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
+import { WidgetTypeV3 } from 'src/contexts/typesV3';
 
 export enum SpiffyMetricsEventName {
   BundleLoaded = 'Bundle Loaded',
+  EnvironmentInitialized = 'Environment Initialized',
   ChatLiveAgentBtnClick = 'Chat Live Agent Btn Click',
   ChatFloatingButtonVisible = 'Chat Floating Button Visible',
   ChatComponentVisible = 'Chat Component Visible',
@@ -57,10 +59,12 @@ export interface AmplitudeServiceConfig {
   env: string;
   contextSource: string;
   orgShortName: string;
+  orgId: string;
   featureFlagService: FeatureFlagService;
   orgGaConfig?: unknown;
-  show?: boolean;
-  getLocalStorageItem?: (key: string) => string | null;
+  show: boolean;
+  enabledFeatures?: Record<string, boolean>;
+  getLocalStorageItem: null | ((key: string) => string | null);
 }
 
 export class AmplitudeService {
@@ -123,6 +127,7 @@ export class AmplitudeService {
       chat_id: this.getLocalStorageItem(LocalStorageKeys.ChatId),
       env: this.config.env || 'unknown',
       app_source: this.config.contextSource,
+      org_id: this.config.orgId,
       'org.short_name': this.config.orgShortName,
       'user.id': this.config.userId,
       'cdp.user_id': null,
@@ -173,11 +178,11 @@ export class AmplitudeService {
           if (this.config.show != null) {
             globalProperties['globalProperties.show'] = String(this.config.show);
           }
+          globalProperties['globalProperties.env'] = String(this.config.env);
 
-          const enabledFeatures = this.config.featureFlagService.getFeatureFlags();
-          const enabledFeaturesProperties = Object.entries(enabledFeatures).reduce<
-            Record<string, string>
-          >(
+          const enabledFeaturesProperties = Object.entries(
+            this.config?.enabledFeatures ?? ({} as Record<string, boolean>),
+          ).reduce<Record<string, string>>(
             (acc, [key, value]) => ({
               ...acc,
               [`enabledFeatures.${key}`]: `${value}`,
@@ -251,6 +256,36 @@ export class AmplitudeService {
     }
   }
 
+  static mapWidgetTypeToChatComponent(widgetType: unknown): string {
+    switch (widgetType) {
+      case WidgetTypeV3.FloatingButtonV3:
+        return 'floating_button';
+      case WidgetTypeV3.ChatPreviewV3:
+      case WidgetTypeV3.SocialProofV3:
+        return 'embedded_widget';
+      case WidgetTypeV3.TitledPromptCarouselV3:
+      case WidgetTypeV3.PromptCarouselV3:
+        return 'suggestion_bar';
+      default:
+        return 'unknown';
+    }
+  }
+
+  // This allows us to map the event props to the correct format for the legacy amplitude events
+  static mapEventProps({ eventName, eventProps }: TrackEventParams): Record<string, unknown> {
+    if (eventName === SpiffyMetricsEventName.ChatComponentVisible) {
+      const mappedWidgetType = AmplitudeService.mapWidgetTypeToChatComponent(
+        eventProps?.widget_type,
+      );
+      return {
+        ...eventProps,
+        chat_component: mappedWidgetType,
+        'chat.component_visible': true,
+      };
+    }
+    return eventProps ?? {};
+  }
+
   async trackEvent({
     eventName,
     eventProps,
@@ -268,9 +303,11 @@ export class AmplitudeService {
         return;
       }
 
+      const mappedEventProps = AmplitudeService.mapEventProps({ eventName, eventProps });
+
       const eventData = JSON.stringify({
         eventName,
-        eventProps,
+        eventProps: mappedEventProps,
         created_at: new Date().toISOString(),
       });
       const encoder = new TextEncoder();
@@ -283,15 +320,17 @@ export class AmplitudeService {
 
       Logger.logDebug(`amplitude tracking ${decoratedEventName}`, null, {
         event_name: decoratedEventName,
-        props: eventProps,
+        props: mappedEventProps,
       });
 
       this.amplitudeClient.track(
         decoratedEventName,
         {
           ...this.getDefaultTrackingProps(),
-          ...eventProps,
-          ...(eventProps ? this.eventPropsToPrefixedEventProps(eventName, eventProps) : {}),
+          ...mappedEventProps,
+          ...(mappedEventProps
+            ? this.eventPropsToPrefixedEventProps(eventName, mappedEventProps)
+            : {}),
         },
         {
           ...eventGroups,
@@ -320,6 +359,6 @@ export class AmplitudeService {
 
   // Ensure that supplemental default props are merged with the existing props
   setSupplementalDefaultProps(props: Record<string, unknown>): void {
-    this.supplementalDefaultProps = { ...this.supplementalDefaultProps, ...props };
+    this.supplementalDefaultProps = props;
   }
 }

package/src/services/userIdentityService/index.ts

@@ -0,0 +1 @@
+export * from './userIdentityService';