@envive-ai/react-hooks 0.3.3 → 0.3.5

package/src/contexts/amplitudeContext/amplitudeContext.tsx

@@ -1,68 +1,23 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { useAtomValue } from 'jotai';
-import { createInstance } from '@amplitude/analytics-browser';
-import { FeatureGates } from 'src/application/models/featureGates';
-import { OrgShortName } from 'src/application/models';
-import { EventsDispatcher, SpiffyEvent } from 'src/events';
 import {
   amplitudeApiKeyAtom,
   contextSourceAtom,
   dataResidencyAtom,
   envAtom,
-  identifyingPrefixAtom,
 } from 'src/atoms/envive/enviveConfig';
-import { LocalStorageKeys, useLocalStorage } from 'src/contexts/localStorageContext';
+import { useLocalStorage } from 'src/contexts/localStorageContext';
 import { orgAnalyticsGoogleAnalyticsConfigAtom } from 'src/atoms/org/orgAnalyticsConfig';
 import { userIdAtom } from 'src/atoms/app';
-import Logger from 'src/application/logging/logger';
-import type {
-  BrowserClient,
-  EnrichmentPlugin,
-  Event,
-  ServerZoneType,
-} from '@amplitude/analytics-types';
 import { useEnviveConfig } from 'src/contexts/enviveConfigContext/enviveConfigContext';
 import { useFeatureFlagService } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
+import {
+  AmplitudeService,
+  SpiffyMetricsEventName,
+  TrackEventParams,
+} from 'src/services/amplitudeService/amplitudeService';
 
-export enum SpiffyMetricsEventName {
-  BundleLoaded = 'Bundle Loaded',
-  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',
-}
-
-interface TrackEventParams {
-  eventName: SpiffyMetricsEventName;
-  eventProps?: Record<string, unknown>;
-  eventGroups?: Record<string, unknown>;
-  alsoSendToGoogleAnalytics?: boolean;
-}
+export { SpiffyMetricsEventName };
 
 interface AmplitudeContextType {
   trackEvent: (params: TrackEventParams) => Promise<void>;
@@ -72,17 +27,18 @@ interface AmplitudeContextType {
 
 const AmplitudeContext = createContext<AmplitudeContextType | null>(null);
 
-export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const AmplitudeProvider: React.FC<{
+  externalAmplitudeService?: AmplitudeService;
+  children: React.ReactNode;
+}> = ({ externalAmplitudeService, children }) => {
   const userId = useAtomValue(userIdAtom);
   const amplitudeApiKey = useAtomValue(amplitudeApiKeyAtom);
   const dataResidency = useAtomValue(dataResidencyAtom);
   const orgGaConfig = useAtomValue(orgAnalyticsGoogleAnalyticsConfigAtom);
   const env = useAtomValue(envAtom);
   const contextSource = useAtomValue(contextSourceAtom);
-  const identifyingPrefix = useAtomValue(identifyingPrefixAtom);
   const { getItem } = useLocalStorage();
   const {
-    publicKey,
     featureOverrides,
     variantUrlOverride,
     variantInfoOverride,
@@ -93,303 +49,69 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({ chi
 
   const { featureFlagService } = useFeatureFlagService();
 
-  const [amplitudeClient, setAmplitudeClient] = React.useState<BrowserClient | undefined>(
-    undefined,
-  );
-  const [internalEventTrackingEnrichment, setInternalEventTrackingEnrichment] = React.useState<
-    EnrichmentPlugin | undefined
-  >(undefined);
-  const [supplementalDefaultProps, setSupplementalDefaultProps] = React.useState<
-    Record<string, unknown>
-  >({});
-
-  const isReady = Boolean(userId && featureFlagService && amplitudeApiKey);
-
-  const getDefaultTrackingProps = useCallback((): Record<string, unknown> => {
-    const gatesProps = featureGates
-      ? featureGates.reduce<Record<string, boolean>>((acc, curr) => {
-          if (curr.name && curr.value != null) {
-            return { ...acc, [`feature_gate.${curr.name}`]: curr.value };
-          }
-          return acc;
-        }, {})
-      : {};
-    const experimentProps = {}; // No direct equivalent for experiments in EnviveConfig yet
-
-    const orgLevelAmplitudeTrackingProps = {
-      ...gatesProps,
-      ...experimentProps,
-    };
-
-    return {
-      ...orgLevelAmplitudeTrackingProps,
-      ...supplementalDefaultProps,
-      // TODO: org_id is not directly available in EnviveConfig. Need to find a new source or derive it.
-      // org_id: orgConfig?.org?.org?.id,
-      app_id: 'commerce-chat-react-component',
-      chat_id: getItem(LocalStorageKeys.ChatId),
-      env: env || 'unknown',
-      app_source: contextSource,
-      'org.short_name': orgShortName,
-      'user.id': userId,
-      'cdp.user_id': null,
-      'cdp.provider': null,
-      'event.source': 'web-browser',
-      'event.type': 'user-activity',
-      'event.id': null,
-      'event.channel': 'web',
-      'event.timestamp': null,
-    };
-  }, [featureGates, supplementalDefaultProps, env, contextSource, orgShortName, userId]);
-
-  const eventPropsToPrefixedEventProps = useCallback(
-    (
-      eventName: SpiffyMetricsEventName,
-      eventProps: Record<string, unknown>,
-    ): Record<string, unknown> => {
-      const prefix = eventName.toLowerCase().replace(/\s+/g, '_');
-      return Object.entries(eventProps).reduce(
-        (acc, [key, value]) => {
-          acc[`${prefix}.${key}`] = value;
-          return acc;
-        },
-        {} as Record<string, unknown>,
-      );
-    },
-    [],
-  );
-
-  const amplitudeSessionReplayInit = useCallback((): boolean => {
-    const isEnabled = Boolean(
-      orgShortName === OrgShortName.UniqueVintage &&
-      featureFlagService?.isClientSessionEnabled() &&
-      featureFlagService?.isFeatureGateEnabled(FeatureGates.IsNewFeatureEnabled),
-    );
-    const sampleRate = 1;
-
-    try {
-      Logger.logDebug(
-        `[spiffy-ai] amplitude session-replay initializing isEnabled=${isEnabled} sampleRate=${sampleRate}`,
-      );
-
-      if (!isEnabled) {
-        return isEnabled;
-      }
+  const [service, setService] = useState<AmplitudeService | null>(null);
 
-      // amplitudeInstance.add(sessionReplayPlugin({ sampleRate }));
+  const isReady = Boolean(userId && service && service.isReady);
 
-      return isEnabled;
-    } catch (e) {
-      Logger.logError('[spiffy-ai] Error initializing amplitude session-replay', e);
-      return false;
+  // Create service instance when dependencies are ready
+  useEffect(() => {
+    if (externalAmplitudeService !== undefined) {
+      setService(externalAmplitudeService);
+      return;
     }
-  }, [orgShortName, featureFlagService]);
-
-  const getEventTrackingEnrichment = useCallback((): EnrichmentPlugin => {
-    if (internalEventTrackingEnrichment !== undefined) {
-      return internalEventTrackingEnrichment;
+    if (userId && amplitudeApiKey && dataResidency && featureFlagService) {
+      const amplitudeService = new AmplitudeService({
+        userId,
+        amplitudeApiKey,
+        dataResidency,
+        env: env || '',
+        contextSource: contextSource || '',
+        orgShortName: orgShortName || '',
+        featureFlagService,
+        orgGaConfig,
+        show,
+        getLocalStorageItem: getItem,
+      });
+      setService(amplitudeService);
+    } else {
+      setService(null);
     }
-
-    const enrichment: EnrichmentPlugin = {
-      name: 'page-view-tracking-enrichment',
-      type: 'enrichment',
-      setup: async () => undefined,
-      execute: async (event: Event): Promise<Event> => {
-        let enrichedEvent: Event;
-
-        const eventsToEnrich = [
-          '[Amplitude] Page Viewed',
-          `[Spiffy] ${SpiffyMetricsEventName.BundleLoaded}`,
-        ];
-
-        if (eventsToEnrich.includes(event.event_type)) {
-          const globalProperties: Record<string, string> = {};
-
-          if (publicKey) {
-            globalProperties['globalProperties.publicKey'] = publicKey;
-          }
-          if (featureOverrides) {
-            Object.entries(featureOverrides).forEach(([key, value]) => {
-              globalProperties[`globalProperties.featureOverrides.${key}`] = String(value);
-            });
-          }
-          if (variantUrlOverride) {
-            globalProperties['globalProperties.variantUrlOverride'] = variantUrlOverride;
-          }
-          if (variantInfoOverride) {
-            globalProperties['globalProperties.variantInfoOverride'] =
-              JSON.stringify(variantInfoOverride);
-          }
-          if (show != null) {
-            globalProperties['globalProperties.show'] = String(show);
-          }
-
-          const enabledFeatures = featureFlagService!.getFeatureFlags();
-          const enabledFeaturesProperties = Object.entries(enabledFeatures).reduce<
-            Record<string, string>
-          >(
-            (acc, [key, value]) => ({
-              ...acc,
-              [`enabledFeatures.${key}`]: `${value}`,
-            }),
-            {},
-          );
-
-          const timingProperties = {
-            'timing.enriched_at_ms': window.performance?.now(),
-          };
-
-          enrichedEvent = {
-            ...event,
-            event_properties: {
-              ...event.event_properties,
-              ...getDefaultTrackingProps(),
-              ...globalProperties,
-              ...enabledFeaturesProperties,
-              ...timingProperties,
-            },
-          };
-        } else {
-          enrichedEvent = event;
-        }
-
-        EventsDispatcher.dispatch(SpiffyEvent.AMPLITUDE_EVENT, enrichedEvent);
-
-        return enrichedEvent;
-      },
-    };
-    setInternalEventTrackingEnrichment(enrichment);
-    return enrichment;
   }, [
-    internalEventTrackingEnrichment,
-    getDefaultTrackingProps,
+    userId,
+    amplitudeApiKey,
+    dataResidency,
+    env,
+    contextSource,
+    orgShortName,
     featureFlagService,
-    publicKey,
+    orgGaConfig,
     featureOverrides,
     variantUrlOverride,
     variantInfoOverride,
     show,
+    featureGates,
+    getItem,
+    externalAmplitudeService,
   ]);
 
-  useEffect(() => {
-    if (isReady && !amplitudeClient) {
-      const currentAmplitudeInstance: BrowserClient = createInstance();
-      const isSessionsEnabled = amplitudeSessionReplayInit();
-      currentAmplitudeInstance.add(getEventTrackingEnrichment());
-      currentAmplitudeInstance.init(amplitudeApiKey!, userId!, {
-        serverZone: dataResidency as ServerZoneType,
-        trackingOptions: {
-          ipAddress: true,
-        },
-        autocapture: {
-          attribution: true,
-          pageViews: {
-            trackHistoryChanges: 'pathOnly',
-          },
-          sessions: isSessionsEnabled,
-          formInteractions: false,
-          fileDownloads: false,
-        },
-      });
-      setAmplitudeClient(currentAmplitudeInstance);
-    }
-  }, [
-    isReady,
-    amplitudeClient,
-    amplitudeApiKey,
-    userId,
-    dataResidency,
-    amplitudeSessionReplayInit,
-    getEventTrackingEnrichment,
-  ]);
-
-  const trackEvent = useCallback(
-    async ({
-      eventName,
-      eventProps,
-      eventGroups,
-      alsoSendToGoogleAnalytics = false,
-    }: TrackEventParams): Promise<void> => {
-      Logger.logDebug('Submitting event', eventName);
-      try {
-        const decoratedEventName = `[Spiffy] ${eventName}`;
-
-        if (!amplitudeClient) {
-          Logger.logWarn('amplitude client undefined', undefined, {
-            event_name: decoratedEventName,
-          });
-          return;
-        }
-
-        const eventData = JSON.stringify({
-          eventName,
-          eventProps,
-          created_at: new Date().toISOString(),
-        });
-        const encoder = new TextEncoder();
-        const data = encoder.encode(eventData);
-        // calculate a hash of the event properties to use as the insert_id so that duplicate events
-        // are automatically dropped by Amplitude
-        const hashBuffer = await crypto.subtle.digest('SHA-256', data);
-        const hashArray = Array.from(new Uint8Array(hashBuffer));
-        const currentInsertId = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
-
-        Logger.logDebug(`amplitude tracking ${decoratedEventName}`, null, {
-          event_name: decoratedEventName,
-          props: eventProps,
-        });
-
-        amplitudeClient.track(
-          decoratedEventName,
-          {
-            ...getDefaultTrackingProps(),
-            ...eventProps,
-            ...(eventProps ? eventPropsToPrefixedEventProps(eventName, eventProps) : {}),
-          },
-          {
-            ...eventGroups,
-            insert_id: currentInsertId,
-          },
-        );
-
-        if (alsoSendToGoogleAnalytics && orgGaConfig) {
-          // TODO: Add in windowDataLayerService or context alternative and hook it up here
-          Logger.logDebug('[spiffy-ai] GA tracking', decoratedEventName);
-          if (window.dataLayer) {
-            (window.dataLayer as any[]).push({
-              event: decoratedEventName,
-              eventProps,
-            });
-          }
-        }
-      } catch (err) {
-        Logger.logError('[spiffy-ai] Error tracking event', err, {
-          eventName,
-          eventProps,
-        });
-      }
-    },
-    [amplitudeClient, getDefaultTrackingProps, eventPropsToPrefixedEventProps, orgGaConfig],
-  );
-
   const value = useMemo(
     () => ({
-      trackEvent,
+      trackEvent: async (params: TrackEventParams): Promise<void> => {
+        if (service) {
+          await service.trackEvent(params);
+        }
+      },
       isReady,
-      setSupplementalDefaultProps: (props: Record<string, unknown>) =>
-        setSupplementalDefaultProps(props),
+      setSupplementalDefaultProps: (props: Record<string, unknown>) => {
+        if (service) {
+          service.setSupplementalDefaultProps(props);
+        }
+      },
     }),
-    [trackEvent, isReady, setSupplementalDefaultProps],
+    [service, isReady],
   );
 
   if (!isReady) {
-    console.log(
-      'AmplitudeProvider is not ready',
-      isReady,
-      userId,
-      featureFlagService,
-      amplitudeApiKey,
-    );
     return null;
   }
 

package/src/contexts/enviveConfigContext/enviveConfigContext.tsx

@@ -17,6 +17,7 @@ interface EnviveConfigProviderProps {
   cdnUrl?: string;
   contextSource?: string;
   orgLevelApiKey?: string;
+  orgId?: string;
   orgShortName?: string;
   identifyingPrefix: string;
   featureOverrides?: Record<string, boolean>;
@@ -38,6 +39,7 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
   contextSource,
   orgLevelApiKey,
   orgShortName,
+  orgId,
   identifyingPrefix,
   featureOverrides,
   variantUrlOverride,
@@ -58,6 +60,7 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
     contextSource,
     orgLevelApiKey,
     orgShortName,
+    orgId,
     identifyingPrefix,
     featureOverrides,
     variantUrlOverride,

package/src/contexts/enviveContext/enviveContext.tsx

@@ -1,10 +1,13 @@
-import { ReactNode, createContext } from 'react';
+import { ReactNode, createContext, useEffect, useMemo, useState } from 'react';
 
 import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResults';
+import { EnviveConfigService, EnviveServiceConfig } from 'src/services/enviveConfigService';
+import { AmplitudeService } from 'src/services/amplitudeService/amplitudeService';
+import Logger from 'src/application/logging/logger';
 import { AmplitudeProvider } from '../amplitudeContext';
 import { EnviveConfigProvider } from '../enviveConfigContext';
 import { EnviveCssProvider } from '../enviveCssContext';
-import { FeatureFlagServiceProvider } from '../featureFlagServiceContext';
+import { FeatureFlagService, FeatureFlagServiceProvider } from '../featureFlagServiceContext';
 import { GraphQLProvider } from '../graphqlContext';
 import { LocalStorageProvider } from '../localStorageContext';
 import { NewOrgConfigProvider } from '../newOrgConfigContext';
@@ -13,6 +16,10 @@ import { EnviveAgent } from './types';
 import { SearchProvider } from '../searchContext';
 import { SalesAgentProvider } from '../salesAgentContext/salesAgentContext';
 import { SystemSettingsContextProvider } from '../systemSettingsContext';
+import { HardcopyProvider } from '../hardcopyContext';
+import { WidgetConfigProvider } from '../widgetConfigContext';
+import { PageProvider } from '../pageContext';
+import { UiConfigProvider } from '../uiConfigContext';
 
 const EnviveContext = createContext<null>(null);
 
@@ -38,6 +45,12 @@ interface EnviveProviderProps extends AgentWrapperProps {
   show?: boolean;
   publicKey?: string;
   featureGates?: OrgConfigFeatureGate[]; // New prop for feature gates
+  featureFlagService?: FeatureFlagService;
+  enviveConfigService?: EnviveConfigService;
+  amplitudeService?: AmplitudeService;
+  mockV3ConfigToDeprecatedConfig?: boolean;
+  requestV3Config?: boolean;
+  previewMode?: boolean;
 }
 
 const SearchAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgents }) => {
@@ -60,30 +73,93 @@ const SalesAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgent
 
 export const EnviveProvider: React.FC<EnviveProviderProps> = ({
   children,
+  previewMode = false,
   enabledAgents,
+  enviveConfigService: inputEnviveConfigService,
+  featureFlagService: inputFeatureFlagService,
+  amplitudeService: inputAmplitudeService,
+  mockV3ConfigToDeprecatedConfig = false,
+  requestV3Config = false,
   ...config
-}) => (
-  <EnviveContext.Provider value={null}>
-    <EnviveConfigProvider {...config}>
-      <GraphQLProvider>
-        <NewOrgConfigProvider>
-          <LocalStorageProvider>
-            <FeatureFlagServiceProvider featureGates={[]}>
-              <UserIdentityProvider>
-                <AmplitudeProvider>
-                  <EnviveCssProvider>
-                    <SearchAgentWrapper enabledAgents={enabledAgents}>
-                      <SalesAgentWrapper enabledAgents={enabledAgents}>
-                        {children}
-                      </SalesAgentWrapper>
-                    </SearchAgentWrapper>
-                  </EnviveCssProvider>
-                </AmplitudeProvider>
-              </UserIdentityProvider>
-            </FeatureFlagServiceProvider>
-          </LocalStorageProvider>
-        </NewOrgConfigProvider>
-      </GraphQLProvider>
-    </EnviveConfigProvider>
-  </EnviveContext.Provider>
-);
+}) => {
+  const userId = 'spiffy-user-id-0b64d781-e1c2-4b6d-9cf5-32b4f7c1e3f2'; // TODO: How should this be derived?
+  const namespace = 'spiffy-react-components'; // TODO: Should this be different from the current namespace?
+  const source = 'app'; // TODO: Make this dependent upon the "spiffy_on" query param
+  const [enviveServiceConfig, setEnviveServiceConfig] = useState<EnviveServiceConfig | null>(null);
+
+  useEffect(() => {
+    // Really not happy with this approach, but I'm seeing 429 errors in the tests
+    // because of the rate limiting on the API.
+    const enviveConfigService =
+      inputEnviveConfigService ??
+      new EnviveConfigService({
+        baseUrl: config?.baseUrl || '',
+        apiKey: config?.orgLevelApiKey || '',
+        userId: userId || '',
+        namespace: namespace || '',
+        source: source || '',
+      });
+    enviveConfigService.getEnviveConfig().then(newConfig => {
+      setEnviveServiceConfig(newConfig);
+      return newConfig;
+    });
+  }, [config, userId, namespace, source, inputEnviveConfigService]);
+
+  const enviveConfig = useMemo(
+    () => ({
+      ...config,
+      featureGates: enviveServiceConfig?.gates || [],
+      orgShortName: enviveServiceConfig?.org?.org?.short_name || '',
+      orgId: enviveServiceConfig?.org?.org?.id || '',
+    }),
+    [config, enviveServiceConfig],
+  );
+  Logger.logDebug('enviveContext: enviveServiceConfig', enviveServiceConfig, config);
+  Logger.logDebug('enviveContext: enviveConfig', enviveConfig);
+
+  const featureFlagService = useMemo(
+    () => inputFeatureFlagService ?? new FeatureFlagService(enviveConfig.featureGates),
+    [enviveConfig.featureGates, inputFeatureFlagService],
+  );
+
+  if (enviveServiceConfig === null || enviveConfig === null) {
+    return null;
+  }
+
+  return (
+    <EnviveContext.Provider value={null}>
+      <EnviveConfigProvider {...enviveConfig}>
+        <GraphQLProvider
+          mockV3ConfigToDeprecatedConfig={mockV3ConfigToDeprecatedConfig}
+          requestV3Config={requestV3Config}
+        >
+          <NewOrgConfigProvider>
+            <LocalStorageProvider>
+              <FeatureFlagServiceProvider featureFlagService={featureFlagService}>
+                <UserIdentityProvider>
+                  <AmplitudeProvider externalAmplitudeService={inputAmplitudeService}>
+                    <PageProvider previewMode={previewMode}>
+                      <UiConfigProvider>
+                        <WidgetConfigProvider>
+                          <HardcopyProvider>
+                            <EnviveCssProvider>
+                              <SearchAgentWrapper enabledAgents={enabledAgents}>
+                                <SalesAgentWrapper enabledAgents={enabledAgents}>
+                                  {children}
+                                </SalesAgentWrapper>
+                              </SearchAgentWrapper>
+                            </EnviveCssProvider>
+                          </HardcopyProvider>
+                        </WidgetConfigProvider>
+                      </UiConfigProvider>
+                    </PageProvider>
+                  </AmplitudeProvider>
+                </UserIdentityProvider>
+              </FeatureFlagServiceProvider>
+            </LocalStorageProvider>
+          </NewOrgConfigProvider>
+        </GraphQLProvider>
+      </EnviveConfigProvider>
+    </EnviveContext.Provider>
+  );
+};