@envive-ai/react-hooks 0.2.6-alpha-marlo.0 → 0.2.6-alpha-arthur-4

package/src/contexts/amplitudeContext/amplitudeContext.tsx

@@ -7,21 +7,23 @@ import React, {
 } 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 {
+  FeatureGates,
+  OrgShortName,
+  LocalStorageKeys,
+  SpiffyEvent,
+  AmplitudeContextType,
+  SpiffyMetricsEventName,
+  TrackEventParams,
+} from "@envive-ai/types";
 import {
   amplitudeApiKeyAtom,
   contextSourceAtom,
   dataResidencyAtom,
   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 { envAtom } from "src/atoms/envive/enviveConfig";
 import Logger from "src/application/logging/logger";
 import type {
@@ -30,64 +32,24 @@ import type {
   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";
-
-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",
-}
+import { EnviveConfigContext, useEnviveConfig } from "src/contexts/enviveConfigContext/enviveConfigContext";
+import { useFeatureFlagService } from "src/contexts/featureFlagServiceContext/featureFlagServiceContext";
+import { EventsDispatcher } from "src/events";
 
-interface TrackEventParams {
-  eventName: SpiffyMetricsEventName;
-  eventProps?: Record<string, unknown>;
-  eventGroups?: Record<string, unknown>;
-  alsoSendToGoogleAnalytics?: boolean;
-}
+const AmplitudeContext = createContext<AmplitudeContextType | null>(null);
 
-interface AmplitudeContextType {
-  trackEvent: (params: TrackEventParams) => Promise<void>;
-  isReady: boolean;
-  setSupplementalDefaultProps: (props: Record<string, unknown>) => void;
+if (typeof window !== 'undefined') {
+  Logger.logInfo('AmplitudeContext: window is defined');
+  (window as any).AmplitudeReact = React;
+} else {
+  Logger.logInfo('AmplitudeContext: window is not defined');
 }
 
-const AmplitudeContext = createContext<AmplitudeContextType | null>(null);
-
 export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const userId = useAtomValue(userIdAtom);
+  const { getUserIdOrDefault } = useUserIdentity();
+  const userId = getUserIdOrDefault();
   const amplitudeApiKey = useAtomValue(amplitudeApiKeyAtom);
   const dataResidency = useAtomValue(dataResidencyAtom);
   const orgGaConfig = useAtomValue(orgAnalyticsGoogleAnalyticsConfigAtom);
@@ -95,15 +57,15 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
   const contextSource = useAtomValue(contextSourceAtom);
   const identifyingPrefix = useAtomValue(identifyingPrefixAtom);
   const { getItem } = useLocalStorage();
-  const {
-    publicKey,
+  console.log('AmplitudeProvider: getting envive config');
+
+  const {publicKey,
     featureOverrides,
     variantUrlOverride,
     variantInfoOverride,
     show,
     orgShortName,
-    featureGates,
-  } = useEnviveConfig();
+    featureGates } = useContext(EnviveConfigContext) || {};
 
   const { featureFlagService } = useFeatureFlagService();
 
@@ -353,7 +315,7 @@ 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 hashArray = Array.from(new Uint8Array(hashBuffer));

package/src/contexts/atomProvider/atomProvider.tsx

@@ -0,0 +1,6 @@
+import { Provider, getDefaultStore } from "jotai";
+
+export const AtomProvider = ({ children }: { children: React.ReactNode }) => {
+  const store = getDefaultStore();
+  return <Provider store={store}>{children}</Provider>;
+}

package/src/contexts/atomProvider/index.ts

@@ -0,0 +1 @@
+export * from "./atomProvider";

package/src/contexts/cdnContext/cdnContext.tsx

@@ -1,12 +1,7 @@
 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 { CdnContextType } from "@envive-ai/types";
 
 const CdnContext = createContext<CdnContextType | null>(null);
 

package/src/contexts/chatContext/chatContext.tsx

@@ -21,7 +21,7 @@ import {
 } from "src/application/models";
 import { SpiffyMetricsEventName } from "src/contexts/amplitudeContext/amplitudeContext";
 import { messageFromResponse } from "src/application/utils";
-import { chatIdAtom, userIdAtom, variantInfoAtom } from "src/atoms/app";
+import { chatIdAtom, variantInfoAtom } from "src/atoms/app";
 import {
   messagesAtom,
   requestFailureAtom,
@@ -54,6 +54,7 @@ import {
 } from "src/atoms/chat/messageQueue";
 import { useAmplitudeTracking } from "src/hooks/AmplitudeOperations/useAmplitudeOperations";
 import { useSystemSettingsContext } from "src/hooks/SystemSettingsContext";
+import { useUserIdentity } from "../userIdentityContext";
 
 /**
  * Record the chat assistant response in Amplitude
@@ -249,7 +250,9 @@ const ChatContextProvider = ({ children }: { children: ReactNode }) => {
   const userQueueEventCount = useAtomValue(userQueueEventCountAtom);
   const markUserEventsProcessed = useSetAtom(processUserEventAtom);
   const clearUserEventQueue = useSetAtom(clearUserEventAtom);
-  const userId = useAtomValue(userIdAtom);
+  const { getUserIdOrDefault } = useUserIdentity();
+  const userId = getUserIdOrDefault();
+  
   const chatId = useAtomValue(chatIdAtom);
   const supportedEvent = useAtomValue(supportedEventAtom);
   // TODO: Replace with actual orgId from useEnviveConfig or NewOrgConfigContext when available

package/src/contexts/enviveConfigContext/enviveConfigContext.tsx

@@ -1,31 +1,10 @@
-import React, { createContext, useContext, ReactNode, useEffect } from "react";
+import React, { createContext, useContext, useEffect, useMemo } 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 { 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 EnviveConfigContext = createContext<EnviveConfig | undefined>(undefined);
 
 export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
   children,
@@ -46,7 +25,6 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
   publicKey,
   featureGates, // Destructure new prop
 }) => {
-  const setEnviveConfig = useSetAtom(enviveConfigAtom);
 
   const config: EnviveConfig = {
     amplitudeApiKey,
@@ -67,11 +45,6 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
     featureGates, // Add to config
   };
 
-  useEffect(() => {
-    setEnviveConfig(config);
-    Logger.logDebug("EnviveConfigProvider: Setting EnviveConfig", config);
-  }, [setEnviveConfig, config]);
-
   return (
     <EnviveConfigContext.Provider value={config}>
       {config ? children : null}
@@ -80,7 +53,23 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
 };
 
 export const useEnviveConfig = (): EnviveConfig => {
-  const config = useAtomValue(enviveConfigAtom);
+  const context = useContext(EnviveConfigContext);
+  const setEnviveConfig = useSetAtom(enviveConfigAtom);
+
+  console.log('EnviveConfigProvider: setting up useEffect to setEnviveConfig', context);
+  useEffect(() => {
+    console.log('EnviveConfigProvider: useEffect to setEnviveConfig', context, setEnviveConfig);
+    if (context) {
+      setEnviveConfig(context);
+    }
+    Logger.logDebug("EnviveConfigProvider: Setting EnviveConfig", context);
+  }, [setEnviveConfig, context]);
+
+  if (!context) {
+    throw new Error(
+      "useEnviveConfig must be used within an EnviveConfigProvider"
+    );
+  }
 
-  return config ? config : {};
+  return context;
 };

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}
     </>

package/src/contexts/featureFlagContext/featureFlagContext.tsx

@@ -1,23 +1,13 @@
-import React, { createContext, useContext, useCallback, useMemo } from "react";
-import Logger from "src/application/logging/logger";
-import { StatsigFeatureGate } from "@spiffy-ai/commerce-api-client";
-import { FeatureGates } from "src/application/models/featureGates";
-import { useSessionStorage } from "src/contexts/sessionStorageContext";
-import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults";
-import { useEnviveConfig } from "src/contexts/enviveConfigContext/enviveConfigContext";
-
-const FEATURE_FLAGS_STORAGE_KEY = "spiffy-feature-flags";
-
-export interface FeatureFlagContextType {
-  isFeatureGateEnabled: (featureGate: FeatureGates) => boolean;
-  isClientSessionEnabled: () => boolean;
-  getFeatureFlags: () => Record<string, boolean>;
-  persistFeatureGateOverrides: () => void;
-}
-
-const FeatureFlagContext = createContext<FeatureFlagContextType | undefined>(
-  undefined
-);
+import React, { createContext, useContext, useCallback, useMemo } from 'react';
+import Logger from '../../application/logging/logger';
+import { StatsigFeatureGate } from '@spiffy-ai/commerce-api-client';
+import { useSessionStorage } from '../../contexts/sessionStorageContext';
+import { useEnviveConfig } from '../../contexts/enviveConfigContext/enviveConfigContext';
+import { FeatureFlagContextType, FeatureGates, OrgConfigFeatureGate } from '@envive-ai/types';
+
+const FEATURE_FLAGS_STORAGE_KEY = 'spiffy-feature-flags';
+
+const FeatureFlagContext = createContext<FeatureFlagContextType | undefined>(undefined);
 
 export const FeatureFlagProvider: React.FC<{
   featureGates: OrgConfigFeatureGate[];
@@ -34,12 +24,12 @@ export const FeatureFlagProvider: React.FC<{
       const value = paramsObj[featureGate];
 
       if (value != null) {
-        return value === "true";
+        return value === 'true';
       }
 
       return undefined;
     },
-    []
+    [],
   );
 
   const getWindowFeatureGateOverrides = useCallback(
@@ -51,7 +41,7 @@ export const FeatureFlagProvider: React.FC<{
 
       return undefined;
     },
-    [featureOverrides]
+    [featureOverrides],
   );
 
   const getStoredFeatureGateOverrides = useCallback(
@@ -64,15 +54,15 @@ export const FeatureFlagProvider: React.FC<{
           return featureFlagsObj[featureGate];
         } catch (err) {
           Logger.logError(
-            "[spiffy-ai] getStoredFeatureGateOverrides: error parsing feature flags",
-            err
+            '[spiffy-ai] getStoredFeatureGateOverrides: error parsing feature flags',
+            err,
           );
         }
       }
 
       return undefined;
     },
-    []
+    [],
   );
 
   const getFeatureFlagOverride = useCallback(
@@ -80,7 +70,7 @@ export const FeatureFlagProvider: React.FC<{
       const queryOverride = getQueryParamFeatureGateOverrides(featureGate);
       if (queryOverride != null) {
         Logger.logDebug(
-          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by URL param. New value: ${queryOverride}`
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by URL param. New value: ${queryOverride}`,
         );
         return queryOverride;
       }
@@ -88,7 +78,7 @@ export const FeatureFlagProvider: React.FC<{
       const windowOverride = getWindowFeatureGateOverrides(featureGate);
       if (windowOverride != null) {
         Logger.logDebug(
-          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by window param. New value: ${windowOverride}`
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by window param. New value: ${windowOverride}`,
         );
         return windowOverride;
       }
@@ -96,7 +86,7 @@ export const FeatureFlagProvider: React.FC<{
       const storedOverride = getStoredFeatureGateOverrides(featureGate);
       if (storedOverride != null) {
         Logger.logDebug(
-          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by stored value. New value: ${storedOverride}`
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by stored value. New value: ${storedOverride}`,
         );
         return storedOverride;
       }
@@ -107,7 +97,7 @@ export const FeatureFlagProvider: React.FC<{
       getQueryParamFeatureGateOverrides,
       getWindowFeatureGateOverrides,
       getStoredFeatureGateOverrides,
-    ]
+    ],
   );
 
   const isFeatureGateEnabled = useCallback(
@@ -121,7 +111,7 @@ export const FeatureFlagProvider: React.FC<{
 
       if (gateValue == null || gateValue.value == null) {
         Logger.logDebug(
-          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} value is undefined - returning false`
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} value is undefined - returning false`,
         );
 
         return false;
@@ -129,7 +119,7 @@ export const FeatureFlagProvider: React.FC<{
 
       return gateValue.value;
     },
-    [featureGates, getFeatureFlagOverride]
+    [featureGates, getFeatureFlagOverride],
   );
 
   const isClientSessionEnabled = useCallback((): boolean => {
@@ -137,9 +127,7 @@ export const FeatureFlagProvider: React.FC<{
     const isEnabled =
       gates == null ||
       gates?.filter(
-        (gate) =>
-          gate.name === FeatureGates.IsClientSessionEnabled &&
-          gate.value === true
+        (gate) => gate.name === FeatureGates.IsClientSessionEnabled && gate.value === true,
       ).length > 0;
 
     return isEnabled;
@@ -150,7 +138,7 @@ export const FeatureFlagProvider: React.FC<{
       Object.values(FeatureGates).map((featureGate: FeatureGates) => [
         featureGate,
         isFeatureGateEnabled(featureGate),
-      ])
+      ]),
     );
   }, [isFeatureGateEnabled]);
 
@@ -169,25 +157,16 @@ export const FeatureFlagProvider: React.FC<{
       getFeatureFlags,
       persistFeatureGateOverrides,
     }),
-    [
-      isFeatureGateEnabled,
-      isClientSessionEnabled,
-      getFeatureFlags,
-      persistFeatureGateOverrides,
-    ]
+    [isFeatureGateEnabled, isClientSessionEnabled, getFeatureFlags, persistFeatureGateOverrides],
   );
 
-  return (
-    <FeatureFlagContext.Provider value={value}>
-      {children}
-    </FeatureFlagContext.Provider>
-  );
+  return <FeatureFlagContext.Provider value={value}>{children}</FeatureFlagContext.Provider>;
 };
 
 export const useFeatureFlag = () => {
   const context = useContext(FeatureFlagContext);
   if (context === undefined) {
-    throw new Error("useFeatureFlag must be used within a FeatureFlagProvider");
+    throw new Error('useFeatureFlag must be used within a FeatureFlagProvider');
   }
   return context;
 };

package/src/contexts/featureFlagServiceContext/featureFlagServiceContext.tsx

@@ -1,6 +1,5 @@
 import React, { createContext, useContext, useMemo, ReactNode } from "react";
-import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults";
-import { FeatureGates } from "src/application/models/featureGates";
+import { OrgConfigFeatureGate, FeatureGates } from "@envive-ai/types";
 import Logger from "src/application/logging/logger";
 
 // This is the class that was previously implicitly used or defined elsewhere
@@ -49,6 +48,7 @@ export class FeatureFlagService {
 }
 
 export interface FeatureFlagContextType {
+  isFeatureGateEnabled(IsRecommendedProductsEnabled: FeatureGates): unknown;
   featureFlagService: FeatureFlagService | undefined;
 }
 
@@ -69,8 +69,16 @@ export const FeatureFlagServiceProvider: React.FC<
     [featureGates]
   );
 
+  const contextValue = useMemo(
+    () => ({
+      featureFlagService,
+      isFeatureGateEnabled: featureFlagService.isFeatureGateEnabled,
+    }),
+    [featureFlagService]
+  );
+
   return (
-    <FeatureFlagServiceContext.Provider value={{ featureFlagService }}>
+    <FeatureFlagServiceContext.Provider value={contextValue}>
       {children}
     </FeatureFlagServiceContext.Provider>
   );