@envive-ai/react-hooks 0.3.3 → 0.3.4

package/src/services/amplitudeService/amplitudeService.ts

@@ -0,0 +1,324 @@
+import { createInstance } from '@amplitude/analytics-browser';
+import { EventsDispatcher, SpiffyEvent } from 'src/events';
+import { LocalStorageKeys } from 'src/contexts/localStorageContext';
+import Logger from 'src/application/logging/logger';
+import type {
+  BrowserClient,
+  EnrichmentPlugin,
+  Event,
+  ServerZoneType,
+} from '@amplitude/analytics-types';
+import { FeatureFlagService } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
+
+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',
+}
+
+export interface TrackEventParams {
+  eventName: SpiffyMetricsEventName;
+  eventProps?: Record<string, unknown>;
+  eventGroups?: Record<string, unknown>;
+  alsoSendToGoogleAnalytics?: boolean;
+}
+
+export interface AmplitudeServiceConfig {
+  userId: string;
+  amplitudeApiKey: string;
+  dataResidency: string;
+  env: string;
+  contextSource: string;
+  orgShortName: string;
+  featureFlagService: FeatureFlagService;
+  orgGaConfig?: unknown;
+  show?: boolean;
+  getLocalStorageItem?: (key: string) => string | null;
+}
+
+export class AmplitudeService {
+  private amplitudeClient: BrowserClient | undefined;
+
+  private internalEventTrackingEnrichment: EnrichmentPlugin | undefined;
+
+  private supplementalDefaultProps: Record<string, unknown> = {};
+
+  private config: AmplitudeServiceConfig;
+
+  constructor(config: AmplitudeServiceConfig) {
+    this.config = config;
+    this.initialize();
+  }
+
+  get isReady(): boolean {
+    return Boolean(
+      this.config.userId &&
+      this.config.featureFlagService &&
+      this.config.amplitudeApiKey &&
+      this.amplitudeClient,
+    );
+  }
+
+  private getLocalStorageItem(key: string): string | null {
+    if (this.config.getLocalStorageItem) {
+      return this.config.getLocalStorageItem(key);
+    }
+    if (typeof window !== 'undefined' && window.localStorage) {
+      return window.localStorage.getItem(key);
+    }
+    return null;
+  }
+
+  private getDefaultTrackingProps(): Record<string, unknown> {
+    const featureGates = Object.entries(this.config.featureFlagService.getFeatureFlags());
+    const gatesProps =
+      featureGates.length > 0
+        ? featureGates.reduce<Record<string, boolean>>((acc, [name, value]) => {
+            if (name && value != null) {
+              return { ...acc, [`feature_gate.${name}`]: value };
+            }
+            return acc;
+          }, {})
+        : {};
+    const experimentProps = {}; // No direct equivalent for experiments in EnviveConfig yet
+
+    const orgLevelAmplitudeTrackingProps = {
+      ...gatesProps,
+      ...experimentProps,
+    };
+
+    return {
+      ...orgLevelAmplitudeTrackingProps,
+      ...this.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: this.getLocalStorageItem(LocalStorageKeys.ChatId),
+      env: this.config.env || 'unknown',
+      app_source: this.config.contextSource,
+      'org.short_name': this.config.orgShortName,
+      'user.id': this.config.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,
+    };
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  private eventPropsToPrefixedEventProps(
+    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>,
+    );
+  }
+
+  private getEventTrackingEnrichment(): EnrichmentPlugin {
+    if (this.internalEventTrackingEnrichment !== undefined) {
+      return this.internalEventTrackingEnrichment;
+    }
+
+    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 (this.config.show != null) {
+            globalProperties['globalProperties.show'] = String(this.config.show);
+          }
+
+          const enabledFeatures = this.config.featureFlagService.getFeatureFlags();
+          const enabledFeaturesProperties = Object.entries(enabledFeatures).reduce<
+            Record<string, string>
+          >(
+            (acc, [key, value]) => ({
+              ...acc,
+              [`enabledFeatures.${key}`]: `${value}`,
+            }),
+            {},
+          );
+
+          const timingProperties = {
+            'timing.enriched_at_ms':
+              typeof window !== 'undefined' ? window.performance?.now() : undefined,
+          };
+
+          enrichedEvent = {
+            ...event,
+            event_properties: {
+              ...event.event_properties,
+              ...this.getDefaultTrackingProps(),
+              ...globalProperties,
+              ...enabledFeaturesProperties,
+              ...timingProperties,
+            },
+          };
+        } else {
+          enrichedEvent = event;
+        }
+
+        EventsDispatcher.dispatch(SpiffyEvent.AMPLITUDE_EVENT, enrichedEvent);
+
+        return enrichedEvent;
+      },
+    };
+    this.internalEventTrackingEnrichment = enrichment;
+    return enrichment;
+  }
+
+  private initialize(): void {
+    const isReady = Boolean(
+      this.config.userId && this.config.featureFlagService && this.config.amplitudeApiKey,
+    );
+
+    if (!isReady) {
+      Logger.logDebug('AmplitudeService is not ready', {
+        isReady,
+        userId: this.config.userId,
+        hasFeatureFlagService: !!this.config.featureFlagService,
+        hasAmplitudeApiKey: !!this.config.amplitudeApiKey,
+      });
+      return;
+    }
+
+    if (!this.amplitudeClient) {
+      const currentAmplitudeInstance: BrowserClient = createInstance();
+
+      currentAmplitudeInstance.add(this.getEventTrackingEnrichment());
+      currentAmplitudeInstance.init(this.config.amplitudeApiKey, this.config.userId, {
+        serverZone: this.config.dataResidency as ServerZoneType,
+        trackingOptions: {
+          ipAddress: true,
+        },
+        autocapture: {
+          attribution: true,
+          pageViews: {
+            trackHistoryChanges: 'pathOnly',
+          },
+          sessions: false,
+          formInteractions: false,
+          fileDownloads: false,
+        },
+      });
+      this.amplitudeClient = currentAmplitudeInstance;
+    }
+  }
+
+  async trackEvent({
+    eventName,
+    eventProps,
+    eventGroups,
+    alsoSendToGoogleAnalytics = false,
+  }: TrackEventParams): Promise<void> {
+    Logger.logDebug('Submitting event', eventName);
+    try {
+      const decoratedEventName = `[Spiffy] ${eventName}`;
+
+      if (!this.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,
+      });
+
+      this.amplitudeClient.track(
+        decoratedEventName,
+        {
+          ...this.getDefaultTrackingProps(),
+          ...eventProps,
+          ...(eventProps ? this.eventPropsToPrefixedEventProps(eventName, eventProps) : {}),
+        },
+        {
+          ...eventGroups,
+          insert_id: currentInsertId,
+        },
+      );
+
+      if (alsoSendToGoogleAnalytics && this.config.orgGaConfig) {
+        // TODO: Add in windowDataLayerService or context alternative and hook it up here
+        Logger.logDebug('[spiffy-ai] GA tracking', decoratedEventName);
+        if (typeof window !== 'undefined' && window.dataLayer) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (window.dataLayer as any[]).push({
+            event: decoratedEventName,
+            eventProps,
+          });
+        }
+      }
+    } catch (err) {
+      Logger.logError('[spiffy-ai] Error tracking event', err, {
+        eventName,
+        eventProps,
+      });
+    }
+  }
+
+  setSupplementalDefaultProps(props: Record<string, unknown>): void {
+    this.supplementalDefaultProps = props;
+  }
+}

package/src/services/amplitudeService/index.ts

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

package/src/services/enviveConfigService/enviveConfigService.ts

@@ -0,0 +1,72 @@
+import { OrgConfigFeatureGate } from 'src/application/models';
+import { FeatureGates } from 'src/application/models/featureGates';
+
+type EnviveConfigServiceProps = {
+  baseUrl: string;
+  apiKey: string;
+  userId: string;
+  namespace: string;
+  source: string;
+};
+
+export type EnviveServiceConfig = {
+  org: {
+    org: {
+      id: string;
+      short_name: string;
+      display_name: string;
+      domain: string;
+      status: string;
+      created_at: string;
+      updated_at: string;
+    };
+  };
+  gates: OrgConfigFeatureGate[];
+};
+
+export class EnviveConfigService {
+  private readonly baseUrl: string;
+
+  private readonly apiKey: string;
+
+  private readonly userId: string;
+
+  private readonly namespace: string;
+
+  private readonly source: string;
+
+  private response: EnviveServiceConfig | null = null;
+
+  constructor({ baseUrl, apiKey, userId, namespace, source }: EnviveConfigServiceProps) {
+    this.baseUrl = baseUrl;
+    this.apiKey = apiKey;
+    this.userId = userId;
+    this.namespace = namespace;
+    this.source = source;
+  }
+
+  async getEnviveConfig(): Promise<EnviveServiceConfig> {
+    if (this.response !== null) {
+      return this.response;
+    }
+    const queryParams = new URLSearchParams({
+      namespace: this.namespace,
+      source: this.source,
+      user_id: this.userId,
+      include_experiments: 'default',
+      include_feature_gates: Object.values(FeatureGates)
+        .map(featureGate => featureGate.toString())
+        .join(','),
+    });
+    const response = await fetch(`${this.baseUrl}/v1/org/config?${queryParams.toString()}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.apiKey}`,
+      },
+    });
+    const data = (await response.json()) as EnviveServiceConfig;
+    this.response = data;
+    return data;
+  }
+}

package/src/services/enviveConfigService/index.ts

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

package/src/types/enviveConfig.ts

@@ -0,0 +1,27 @@
+import { FrontendConfigOverrides, VariantInfo } from 'src/application/models';
+
+export interface EnviveConfig {
+  publicKey?: string;
+  userID?: string;
+  env?: 'prod' | 'dev';
+  clientID?: string;
+  show?: boolean;
+  featureOverrides?: Record<string, boolean>;
+  variantInfoOverride?: VariantInfo;
+  variantUrlOverride?: string;
+  pageVariantIdOverride?: string;
+  selectedCustomizeOption?: string;
+  reducedMotionOverride?: boolean;
+  initialOpenSearchOverlay?: boolean;
+  WidgetMountingOverride?: Record<string, any>[];
+  configChanges?: FrontendConfigOverrides[];
+}
+
+declare global {
+  interface Window {
+    _spiffy?: EnviveConfig;
+    _envive?: EnviveConfig;
+  }
+}
+
+export {};

package/src/types/index.ts

@@ -3,3 +3,4 @@ export * from './search-filter-types';
 export * from './suggestionBarV2-types';
 export * from './test-types';
 export * from './OrgInfo';
+export * from './enviveConfig';