@envive-ai/react-hooks 0.2.5 → 0.2.6-alpha

package/src/contexts/amplitudeContext/amplitudeContext.tsx

@@ -1,72 +1,59 @@
-import React, {
-  createContext,
-  useContext,
-  useCallback,
-  useMemo,
-  useEffect,
-} 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 React, { createContext, useContext, useCallback, useMemo, useEffect } from 'react';
+import { useAtomValue } from 'jotai';
+import { createInstance } from '@amplitude/analytics-browser';
+import { FeatureGates, OrgShortName, LocalStorageKeys, SpiffyEvent } from '@envive-ai/types';
 import {
   amplitudeApiKeyAtom,
   contextSourceAtom,
   dataResidencyAtom,
   identifyingPrefixAtom,
-} from "src/atoms/envive/enviveConfig";
-import {
-  LocalStorageKeys,
-  useLocalStorage,
-} from "src/contexts/localStorageContext";
-import { orgAnalyticsGoogleAnalyticsConfigAtom } from "src/atoms/org/orgAnalyticsConfig";
-import { userIdAtom } from "src/atoms/app";
-import { envAtom } from "src/atoms/envive/enviveConfig";
-import Logger from "src/application/logging/logger";
+} from 'src/atoms/envive/enviveConfig';
+import { useLocalStorage } from 'src/contexts/localStorageContext';
+import { orgAnalyticsGoogleAnalyticsConfigAtom } from 'src/atoms/org/orgAnalyticsConfig';
+import { userIdAtom } from 'src/atoms/app';
+import { envAtom } from 'src/atoms/envive/enviveConfig';
+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 { useUserIdentity } from "src/contexts/userIdentityContext/userIdentityContext";
+} from '@amplitude/analytics-types';
+import { useEnviveConfig } from 'src/contexts/enviveConfigContext/enviveConfigContext';
+import { useFeatureFlagService } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
+import { EventsDispatcher } from 'src/events';
 
 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",
+  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",
+  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 {
@@ -84,9 +71,7 @@ interface AmplitudeContextType {
 
 const AmplitudeContext = createContext<AmplitudeContextType | null>(null);
 
-export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
+export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const userId = useAtomValue(userIdAtom);
   const amplitudeApiKey = useAtomValue(amplitudeApiKeyAtom);
   const dataResidency = useAtomValue(dataResidencyAtom);
@@ -107,17 +92,17 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
 
   const { featureFlagService } = useFeatureFlagService();
 
-  const [amplitudeClient, setAmplitudeClient] = React.useState<
-    BrowserClient | undefined
+  const [amplitudeClient, setAmplitudeClient] = React.useState<BrowserClient | undefined>(
+    undefined,
+  );
+  const [internalEventTrackingEnrichment, setInternalEventTrackingEnrichment] = React.useState<
+    EnrichmentPlugin | undefined
   >(undefined);
-  const [internalEventTrackingEnrichment, setInternalEventTrackingEnrichment] =
-    React.useState<EnrichmentPlugin | undefined>(undefined);
-  const [supplementalDefaultProps, setSupplementalDefaultProps] =
-    React.useState<Record<string, unknown>>({});
+  const [supplementalDefaultProps, setSupplementalDefaultProps] = React.useState<
+    Record<string, unknown>
+  >({});
 
-  const isReady = Boolean(
-    userId && featureFlagService && amplitudeApiKey && userId
-  );
+  const isReady = Boolean(userId && featureFlagService && amplitudeApiKey && userId);
 
   const getDefaultTrackingProps = useCallback((): Record<string, unknown> => {
     const gatesProps = featureGates
@@ -140,56 +125,50 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
       ...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",
+      app_id: 'commerce-chat-react-component',
       chat_id: getItem(LocalStorageKeys.ChatId),
-      env: env || "unknown",
+      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,
+      '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,
-  ]);
+  }, [featureGates, supplementalDefaultProps, env, contextSource, orgShortName, userId]);
 
   const eventPropsToPrefixedEventProps = useCallback(
     (
       eventName: SpiffyMetricsEventName,
-      eventProps: Record<string, unknown>
+      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 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
-        )
+        featureFlagService?.isFeatureGateEnabled(FeatureGates.IsNewFeatureEnabled),
     );
     const sampleRate = 1;
 
     try {
       Logger.logDebug(
-        `[spiffy-ai] amplitude session-replay initializing isEnabled=${isEnabled} sampleRate=${sampleRate}`
+        `[spiffy-ai] amplitude session-replay initializing isEnabled=${isEnabled} sampleRate=${sampleRate}`,
       );
 
       if (!isEnabled) {
@@ -200,10 +179,7 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
 
       return isEnabled;
     } catch (e) {
-      Logger.logError(
-        "[spiffy-ai] Error initializing amplitude session-replay",
-        e
-      );
+      Logger.logError('[spiffy-ai] Error initializing amplitude session-replay', e);
       return false;
     }
   }, [orgShortName, featureFlagService]);
@@ -214,14 +190,14 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
     }
 
     const enrichment: EnrichmentPlugin = {
-      name: "page-view-tracking-enrichment",
-      type: "enrichment",
+      name: 'page-view-tracking-enrichment',
+      type: 'enrichment',
       setup: async () => undefined,
       execute: async (event: Event): Promise<Event> => {
         let enrichedEvent: Event;
 
         const eventsToEnrich = [
-          "[Amplitude] Page Viewed",
+          '[Amplitude] Page Viewed',
           `[Spiffy] ${SpiffyMetricsEventName.BundleLoaded}`,
         ];
 
@@ -229,39 +205,37 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
           const globalProperties: Record<string, string> = {};
 
           if (publicKey) {
-            globalProperties["globalProperties.publicKey"] = publicKey;
+            globalProperties['globalProperties.publicKey'] = publicKey;
           }
           if (featureOverrides) {
             Object.entries(featureOverrides).forEach(([key, value]) => {
-              globalProperties[`globalProperties.featureOverrides.${key}`] =
-                String(value);
+              globalProperties[`globalProperties.featureOverrides.${key}`] = String(value);
             });
           }
           if (variantUrlOverride) {
-            globalProperties["globalProperties.variantUrlOverride"] =
-              variantUrlOverride;
+            globalProperties['globalProperties.variantUrlOverride'] = variantUrlOverride;
           }
           if (variantInfoOverride) {
-            globalProperties["globalProperties.variantInfoOverride"] =
+            globalProperties['globalProperties.variantInfoOverride'] =
               JSON.stringify(variantInfoOverride);
           }
           if (show != null) {
-            globalProperties["globalProperties.show"] = String(show);
+            globalProperties['globalProperties.show'] = String(show);
           }
 
           const enabledFeatures = featureFlagService!.getFeatureFlags();
-          const enabledFeaturesProperties = Object.entries(
-            enabledFeatures
-          ).reduce<Record<string, string>>(
+          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(),
+            'timing.enriched_at_ms': window.performance?.now(),
           };
 
           enrichedEvent = {
@@ -309,7 +283,7 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
         autocapture: {
           attribution: true,
           pageViews: {
-            trackHistoryChanges: "pathOnly",
+            trackHistoryChanges: 'pathOnly',
           },
           sessions: isSessionsEnabled,
           formInteractions: false,
@@ -335,12 +309,12 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
       eventGroups,
       alsoSendToGoogleAnalytics = false,
     }: TrackEventParams): Promise<void> => {
-      Logger.logDebug("Submitting event", eventName);
+      Logger.logDebug('Submitting event', eventName);
       try {
         const decoratedEventName = `[Spiffy] ${eventName}`;
 
         if (!amplitudeClient) {
-          Logger.logWarn("amplitude client undefined", undefined, {
+          Logger.logWarn('amplitude client undefined', undefined, {
             event_name: decoratedEventName,
           });
           return;
@@ -353,13 +327,11 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
         });
         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
+        // 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 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("");
+        const currentInsertId = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
 
         Logger.logDebug(`amplitude tracking ${decoratedEventName}`, null, {
           event_name: decoratedEventName,
@@ -371,19 +343,17 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
           {
             ...getDefaultTrackingProps(),
             ...eventProps,
-            ...(eventProps
-              ? eventPropsToPrefixedEventProps(eventName, 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);
+          Logger.logDebug('[spiffy-ai] GA tracking', decoratedEventName);
           if (window.dataLayer) {
             (window.dataLayer as any[]).push({
               event: decoratedEventName,
@@ -392,18 +362,13 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
           }
         }
       } catch (err) {
-        Logger.logError("[spiffy-ai] Error tracking event", err, {
+        Logger.logError('[spiffy-ai] Error tracking event', err, {
           eventName,
           eventProps,
         });
       }
     },
-    [
-      amplitudeClient,
-      getDefaultTrackingProps,
-      eventPropsToPrefixedEventProps,
-      orgGaConfig,
-    ]
+    [amplitudeClient, getDefaultTrackingProps, eventPropsToPrefixedEventProps, orgGaConfig],
   );
 
   const value = useMemo(
@@ -413,20 +378,16 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
       setSupplementalDefaultProps: (props: Record<string, unknown>) =>
         setSupplementalDefaultProps(props),
     }),
-    [trackEvent, isReady, setSupplementalDefaultProps]
+    [trackEvent, isReady, setSupplementalDefaultProps],
   );
 
-  return (
-    <AmplitudeContext.Provider value={value}>
-      {children}
-    </AmplitudeContext.Provider>
-  );
+  return <AmplitudeContext.Provider value={value}>{children}</AmplitudeContext.Provider>;
 };
 
 export const useAmplitude = () => {
   const context = useContext(AmplitudeContext);
   if (!context) {
-    throw new Error("useAmplitude must be used within AmplitudeProvider");
+    throw new Error('useAmplitude must be used within AmplitudeProvider');
   }
   return context;
 };

package/src/contexts/cdnContext/cdnContext.tsx

@@ -1,20 +1,13 @@
-import React, { createContext, useContext, useCallback, useMemo } from "react";
-import { useAtomValue } from "jotai";
-import { cdnUrlAtom } from "../../atoms/envive/enviveConfig";
-
-interface CdnContextType {
-  cdnUrl: string;
-  getCdnBasePath: () => string;
-  getAssetURL: (assetName: string, orgShortName: string) => string;
-}
+import React, { createContext, useContext, useCallback, useMemo } from 'react';
+import { useAtomValue } from 'jotai';
+import { cdnUrlAtom } from '../../atoms/envive/enviveConfig';
+import { CdnContextType } from '@envive-ai/types';
 
 const CdnContext = createContext<CdnContextType | null>(null);
 
-export const CdnProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
+export const CdnProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const cdnUrlAtomValue = useAtomValue(cdnUrlAtom);
-  const cdnUrl = cdnUrlAtomValue || "https://cdn.spiffy.ai/other";
+  const cdnUrl = cdnUrlAtomValue || 'https://cdn.spiffy.ai/other';
 
   const getCdnBasePath = useCallback(() => {
     return cdnUrl;
@@ -24,7 +17,7 @@ export const CdnProvider: React.FC<{ children: React.ReactNode }> = ({
     (assetName: string, orgShortName: string) => {
       return `${getCdnBasePath()}/assets/${orgShortName}/${assetName}`;
     },
-    [getCdnBasePath]
+    [getCdnBasePath],
   );
 
   const value = useMemo(
@@ -33,7 +26,7 @@ export const CdnProvider: React.FC<{ children: React.ReactNode }> = ({
       getCdnBasePath,
       getAssetURL,
     }),
-    [cdnUrl, getCdnBasePath, getAssetURL]
+    [cdnUrl, getCdnBasePath, getAssetURL],
   );
 
   return <CdnContext.Provider value={value}>{children}</CdnContext.Provider>;
@@ -42,7 +35,7 @@ export const CdnProvider: React.FC<{ children: React.ReactNode }> = ({
 export const useCdn = () => {
   const context = useContext(CdnContext);
   if (!context) {
-    throw new Error("useCdn must be used within a CdnProvider");
+    throw new Error('useCdn must be used within a CdnProvider');
   }
   return context;
 };

package/src/contexts/enviveConfigContext/enviveConfigContext.tsx

@@ -1,32 +1,11 @@
-import React, { createContext, useContext, ReactNode, useEffect } from "react";
-import { useSetAtom, useAtomValue } from "jotai";
-import { enviveConfigAtom } from "src/atoms/envive/enviveConfig";
-import Logger from "src/application/logging/logger";
-import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults";
-import { EnviveConfig } from "../types";
+import React, { createContext, useEffect } from 'react';
+import { useSetAtom, useAtomValue } from 'jotai';
+import { enviveConfigAtom } from '../../atoms/envive/enviveConfig';
+import Logger from '../../application/logging/logger';
+import { EnviveConfig, EnviveConfigProviderProps } from '@envive-ai/types';
 
 const EnviveConfigContext = createContext<EnviveConfig | undefined>(undefined);
 
-interface EnviveConfigProviderProps {
-  children: ReactNode;
-  amplitudeApiKey?: string;
-  dataResidency?: string;
-  env?: string;
-  baseUrl?: string;
-  reactAppName?: string;
-  cdnUrl?: string;
-  contextSource?: string;
-  orgLevelApiKey?: string;
-  orgShortName?: string;
-  identifyingPrefix: string;
-  featureOverrides?: Record<string, boolean>;
-  variantUrlOverride?: string;
-  variantInfoOverride?: any;
-  show?: boolean;
-  publicKey?: string;
-  featureGates?: OrgConfigFeatureGate[]; // New prop for feature gates
-}
-
 export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
   children,
   amplitudeApiKey,
@@ -69,7 +48,7 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
 
   useEffect(() => {
     setEnviveConfig(config);
-    Logger.logDebug("EnviveConfigProvider: Setting EnviveConfig", config);
+    Logger.logDebug('EnviveConfigProvider: Setting EnviveConfig', config);
   }, [setEnviveConfig, config]);
 
   return (

package/src/contexts/enviveCssContext/enviveCssContext.tsx

@@ -1,13 +1,8 @@
-import React, { ReactNode } from "react";
-import { useNewOrgConfig } from "src/hooks/NewOrgConfig";
+import React from 'react';
+import { useNewOrgConfig } from '../../hooks/NewOrgConfig';
+import { EnviveCssProviderProps } from '@envive-ai/types';
 
-interface EnviveCssProviderProps {
-  children: ReactNode;
-}
-
-export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({
-  children,
-}) => {
+export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({ children }) => {
   const { colorsConfig, frontendConfig, loading } = useNewOrgConfig();
   let merchantThemeCss = `* {}`;
   if (colorsConfig && !loading) {
@@ -39,9 +34,7 @@ export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({
       {frontendConfig ? (
         <style id="merchant-css-overrides">{`${frontendConfig.merchantOverrideCss}`}</style>
       ) : null}
-      {colorsConfig ? (
-        <style id="merchant-css-colors">{`${merchantThemeCss}`}</style>
-      ) : null}
+      {colorsConfig ? <style id="merchant-css-colors">{`${merchantThemeCss}`}</style> : null}
 
       {children}
     </>