@envive-ai/react-hooks 0.3.18 → 0.3.19-alpha-marlo-0

package/src/contexts/enviveConfigContext/enviveConfigContext.tsx

@@ -1,11 +1,11 @@
-import React, { ReactNode, createContext, useEffect } from 'react';
-import { useAtomValue, useSetAtom } from 'jotai';
+import React, { ReactNode, useEffect, useMemo } from 'react';
+import { useSetAtom } 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';
 
-const EnviveConfigContext = createContext<EnviveConfig | undefined>(undefined);
+const logger = new Logger('enviveConfigContext');
 
 interface EnviveConfigProviderProps {
   children: ReactNode;
@@ -52,41 +52,56 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
 }) => {
   const setEnviveConfig = useSetAtom(enviveConfigAtom);
 
-  const config: EnviveConfig = {
-    amplitudeApiKey,
-    dataResidency,
-    env,
-    baseUrl,
-    reactAppName,
-    cdnUrl,
-    contextSource,
-    orgLevelApiKey,
-    orgShortName,
-    orgId,
-    identifyingPrefix,
-    featureOverrides,
-    variantUrlOverride,
-    variantInfoOverride,
-    show,
-    enviveOn,
-    publicKey,
-    featureGates, // Add to config
-  };
+  const config: EnviveConfig = useMemo(
+    () => ({
+      amplitudeApiKey,
+      dataResidency,
+      env,
+      baseUrl,
+      reactAppName,
+      cdnUrl,
+      contextSource,
+      orgLevelApiKey,
+      orgShortName,
+      orgId,
+      identifyingPrefix,
+      featureOverrides,
+      variantUrlOverride,
+      variantInfoOverride,
+      show,
+      enviveOn,
+      publicKey,
+      featureGates,
+    }),
+    [
+      amplitudeApiKey,
+      dataResidency,
+      env,
+      baseUrl,
+      reactAppName,
+      cdnUrl,
+      contextSource,
+      orgLevelApiKey,
+      orgShortName,
+      orgId,
+      identifyingPrefix,
+      featureOverrides,
+      variantUrlOverride,
+      variantInfoOverride,
+      show,
+      enviveOn,
+      publicKey,
+      featureGates,
+    ],
+  );
 
   useEffect(() => {
     setEnviveConfig(config);
-    Logger.logDebug('EnviveConfigProvider: Setting EnviveConfig', config);
+    logger.logDebug('EnviveConfigProvider: Setting EnviveConfig', config);
   }, [setEnviveConfig, config]);
 
-  return (
-    <EnviveConfigContext.Provider value={config}>
-      {config ? children : null}
-    </EnviveConfigContext.Provider>
-  );
-};
-
-export const useEnviveConfig = (): EnviveConfig => {
-  const config = useAtomValue(enviveConfigAtom);
-
-  return config || {};
+  if (!config) {
+    return null;
+  }
+  return children;
 };

package/src/contexts/enviveConfigContext/index.ts

@@ -1 +1,2 @@
 export * from './enviveConfigContext';
+export * from './useEnviveConfig';

package/src/contexts/enviveConfigContext/useEnviveConfig.ts

@@ -0,0 +1,9 @@
+import { useAtomValue } from 'jotai';
+import { enviveConfigAtom } from 'src/atoms/envive/enviveConfig';
+import { EnviveConfig } from '../types';
+
+export const useEnviveConfig = (): EnviveConfig => {
+  const config = useAtomValue(enviveConfigAtom);
+
+  return config || {};
+};

package/src/contexts/enviveContext/WindowChatToggleBinder.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useRef } from 'react';
 import { ChatElementDisplayLocationV3 } from 'src/application/models/chatElementDisplayLocationV3';
 import Logger from 'src/application/logging/logger';
-import { useEnviveConfig } from 'src/contexts/enviveConfigContext/enviveConfigContext';
+import { useEnviveConfig } from 'src/contexts/enviveConfigContext';
 import { useSalesAgent } from 'src/contexts/salesAgentContext/salesAgentContext';
 import { useChatToggle } from 'src/hooks/ChatToggle';
 
+const logger = new Logger('WindowChatToggleBinder');
+
 const attachedPrefixes = new Set<string>();
 
 export const WindowChatToggleBinder = () => {
@@ -58,11 +60,11 @@ export const WindowChatToggleBinder = () => {
         attachedPrefixes.add(spiffyAlias);
       }
 
-      Logger.logDebug(
-        `[envive-ai] Chat toggle attached at window["${identifyingPrefix}"] and window["${spiffyAlias}"]`,
+      logger.logDebug(
+        `Chat toggle attached at window["${identifyingPrefix}"] and window["${spiffyAlias}"]`,
       );
     } catch (e) {
-      Logger.logError('[envive-ai] Failed to attach Chat toggle functions', e);
+      logger.logError('Failed to attach Chat toggle functions', e);
     }
   }, [identifyingPrefix]);
 

package/src/contexts/enviveContext/enviveContext.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, createContext, useEffect, useMemo, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResults';
 import { EnviveConfigService, EnviveServiceConfig } from 'src/services/enviveConfigService';
@@ -21,16 +21,21 @@ import { HardcopyProvider, HardcopyResponse } from '../hardcopyContext';
 import { WidgetTypeV3 } from '../typesV3';
 import { WidgetConfigProvider } from '../widgetConfigContext';
 import { PageProvider } from '../pageContext';
-import { UiConfigProvider } from '../uiConfigContext';
 import { WindowChatToggleBinder } from './WindowChatToggleBinder';
 
-const EnviveContext = createContext<null>(null);
+const logger = new Logger('enviveContext');
 
 interface AgentWrapperProps {
   children: ReactNode;
   enabledAgents: EnviveAgent[];
 }
 
+export interface ExtensionStatusCallbacks {
+  onInjectionLoading?: () => Promise<unknown> | void;
+  onInjectionSuccess?: () => Promise<unknown> | void;
+  onInjectionError?: (error: Error) => Promise<unknown> | void;
+}
+
 interface EnviveProviderProps extends AgentWrapperProps {
   amplitudeApiKey?: string;
   dataResidency?: string;
@@ -59,6 +64,7 @@ interface EnviveProviderProps extends AgentWrapperProps {
   overrideConfig?: GraphQlConfigValues;
   mockSalesAgentData?: any;
   hardcopyOverride?: Partial<Record<WidgetTypeV3, HardcopyResponse>>;
+  extensionService?: ExtensionStatusCallbacks;
 }
 
 const SearchAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgents }) => {
@@ -109,9 +115,34 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
   requestV3Config = false,
   mockSalesAgentData,
   hardcopyOverride,
+  extensionService,
   ...config
 }) => {
   const [userId, setUserId] = useState<string>('');
+  const didReportSuccessRef = useRef(false);
+
+  const invokeExtensionCallback = useCallback((callback?: () => Promise<unknown> | void) => {
+    if (!callback) {
+      return;
+    }
+
+    Promise.resolve(callback()).catch(error => {
+      logger.logDebug('Extension status callback failed', error);
+    });
+  }, []);
+
+  const invokeExtensionErrorCallback = useCallback(
+    (error: Error) => {
+      if (!extensionService?.onInjectionError) {
+        return;
+      }
+
+      Promise.resolve(extensionService.onInjectionError(error)).catch(callbackError => {
+        logger.logDebug('Extension error callback failed', callbackError);
+      });
+    },
+    [extensionService],
+  );
 
   const userIdService = useMemo(
     () =>
@@ -134,6 +165,8 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
   const [enviveServiceConfig, setEnviveServiceConfig] = useState<EnviveServiceConfig | null>(null);
 
   useEffect(() => {
+    invokeExtensionCallback(extensionService?.onInjectionLoading);
+
     // 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 =
@@ -145,11 +178,38 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
         namespace: namespace || '',
         source: source || '',
       });
-    enviveConfigService.getEnviveConfig().then(newConfig => {
-      setEnviveServiceConfig(newConfig);
-      return newConfig;
-    });
-  }, [config, userId, namespace, source, inputEnviveConfigService]);
+    const fetchEnviveConfig = async () => {
+      try {
+        const newConfig = await enviveConfigService.getEnviveConfig();
+        setEnviveServiceConfig(newConfig);
+      } catch (error) {
+        const resolvedError =
+          error instanceof Error ? error : new Error('Failed to load envive config');
+        logger.logError('Failed to initialize EnviveProvider', resolvedError);
+        invokeExtensionErrorCallback(resolvedError);
+      }
+    };
+
+    fetchEnviveConfig();
+  }, [
+    config,
+    userId,
+    namespace,
+    source,
+    inputEnviveConfigService,
+    extensionService,
+    invokeExtensionCallback,
+    invokeExtensionErrorCallback,
+  ]);
+
+  useEffect(() => {
+    if (!enviveServiceConfig || didReportSuccessRef.current) {
+      return;
+    }
+
+    didReportSuccessRef.current = true;
+    invokeExtensionCallback(extensionService?.onInjectionSuccess);
+  }, [enviveServiceConfig, extensionService, invokeExtensionCallback]);
 
   const enviveConfig = useMemo(
     () => ({
@@ -160,8 +220,8 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
     }),
     [config, enviveServiceConfig],
   );
-  Logger.logDebug('enviveContext: enviveServiceConfig', enviveServiceConfig, config);
-  Logger.logDebug('enviveContext: enviveConfig', enviveConfig);
+  logger.logDebug('enviveContext: enviveServiceConfig', enviveServiceConfig, config);
+  logger.logDebug('enviveContext: enviveConfig', enviveConfig);
 
   const featureFlagService = useMemo(
     () => inputFeatureFlagService ?? new FeatureFlagService(enviveConfig.featureGates),
@@ -173,45 +233,44 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
   }
 
   return (
-    <EnviveContext.Provider value={null}>
-      <EnviveConfigProvider {...enviveConfig}>
-        <GraphQLProvider
-          mockV3ConfigToDeprecatedConfig={mockV3ConfigToDeprecatedConfig}
-          requestV3Config={requestV3Config}
-        >
-          <NewOrgConfigProvider overrideConfig={overrideConfig}>
-            <LocalStorageProvider>
-              <FeatureFlagServiceProvider featureFlagService={featureFlagService}>
-                <UserIdentityProvider userIdService={userIdService}>
-                  <AmplitudeProvider externalAmplitudeService={inputAmplitudeService}>
-                    <PageProvider previewMode={previewMode}>
-                      <UiConfigProvider>
-                        <WidgetConfigProvider>
-                          <HardcopyProvider hardcopyOverride={hardcopyOverride}>
-                            <EnviveCssProvider>
-                              <SearchAgentWrapper enabledAgents={enabledAgents}>
-                                <WindowChatToggleBinder />
-                                <SalesAgentWrapper
-                                  enabledAgents={enabledAgents}
-                                  showDebugBar={config.enviveOn || false}
-                                  previewMode={previewMode}
-                                  mockSalesAgentData={mockSalesAgentData}
-                                >
-                                  {children}
-                                </SalesAgentWrapper>
-                              </SearchAgentWrapper>
-                            </EnviveCssProvider>
-                          </HardcopyProvider>
-                        </WidgetConfigProvider>
-                      </UiConfigProvider>
-                    </PageProvider>
-                  </AmplitudeProvider>
-                </UserIdentityProvider>
-              </FeatureFlagServiceProvider>
-            </LocalStorageProvider>
-          </NewOrgConfigProvider>
-        </GraphQLProvider>
-      </EnviveConfigProvider>
-    </EnviveContext.Provider>
+    <EnviveConfigProvider {...enviveConfig}>
+      <GraphQLProvider
+        mockV3ConfigToDeprecatedConfig={mockV3ConfigToDeprecatedConfig}
+        requestV3Config={requestV3Config}
+      >
+        <NewOrgConfigProvider overrideConfig={overrideConfig}>
+          <LocalStorageProvider>
+            <FeatureFlagServiceProvider featureFlagService={featureFlagService}>
+              <UserIdentityProvider userIdService={userIdService}>
+                <AmplitudeProvider externalAmplitudeService={inputAmplitudeService}>
+                  <PageProvider
+                    previewMode={previewMode}
+                    onUrlResolverNotReady={extensionService?.onInjectionError}
+                  >
+                    <WidgetConfigProvider>
+                      <HardcopyProvider hardcopyOverride={hardcopyOverride}>
+                        <EnviveCssProvider>
+                          <SearchAgentWrapper enabledAgents={enabledAgents}>
+                            <WindowChatToggleBinder />
+                            <SalesAgentWrapper
+                              enabledAgents={enabledAgents}
+                              showDebugBar={config.enviveOn || false}
+                              previewMode={previewMode}
+                              mockSalesAgentData={mockSalesAgentData}
+                            >
+                              {children}
+                            </SalesAgentWrapper>
+                          </SearchAgentWrapper>
+                        </EnviveCssProvider>
+                      </HardcopyProvider>
+                    </WidgetConfigProvider>
+                  </PageProvider>
+                </AmplitudeProvider>
+              </UserIdentityProvider>
+            </FeatureFlagServiceProvider>
+          </LocalStorageProvider>
+        </NewOrgConfigProvider>
+      </GraphQLProvider>
+    </EnviveConfigProvider>
   );
 };

package/src/contexts/featureFlagServiceContext/featureFlagServiceContext.tsx

@@ -5,6 +5,8 @@ import Logger from 'src/application/logging/logger';
 
 const FEATURE_FLAGS_STORAGE_KEY = 'spiffy-feature-flags';
 
+const logger = new Logger('featureFlagServiceContext');
+
 export interface FullFlagValue {
   resolved: boolean;
   initial: boolean | undefined;
@@ -66,10 +68,7 @@ export class FeatureFlagService {
       const featureFlagsObj = JSON.parse(featureFlags) as Record<string, boolean>;
       return featureFlagsObj[featureGate];
     } catch (err) {
-      Logger.logError(
-        '[spiffy-ai] getStoredFeatureGateOverrides: error parsing feature flags',
-        err,
-      );
+      logger.logError('getStoredFeatureGateOverrides: error parsing feature flags', err);
       return undefined;
     }
   }
@@ -77,24 +76,24 @@ export class FeatureFlagService {
   static getFeatureFlagOverride(featureGate: FeatureGates): boolean | undefined {
     const queryOverride = FeatureFlagService.getQueryParamFeatureGateOverrides(featureGate);
     if (queryOverride != null) {
-      Logger.logDebug(
-        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by URL param. New value: ${queryOverride}`,
+      logger.logDebug(
+        `isFeatureGateEnabled featureGate:${featureGate} overridden by URL param. New value: ${queryOverride}`,
       );
       return queryOverride;
     }
 
     const windowOverride = FeatureFlagService.getWindowFeatureGateOverrides(featureGate);
     if (windowOverride != null) {
-      Logger.logDebug(
-        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by window param. New value: ${windowOverride}`,
+      logger.logDebug(
+        `isFeatureGateEnabled featureGate:${featureGate} overridden by window param. New value: ${windowOverride}`,
       );
       return windowOverride;
     }
 
     const storedOverride = FeatureFlagService.getStoredFeatureGateOverrides(featureGate);
     if (storedOverride != null) {
-      Logger.logDebug(
-        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by stored value. New value: ${storedOverride}`,
+      logger.logDebug(
+        `isFeatureGateEnabled featureGate:${featureGate} overridden by stored value. New value: ${storedOverride}`,
       );
       return storedOverride;
     }
@@ -111,8 +110,8 @@ export class FeatureFlagService {
     }
 
     if (gateValue == null || gateValue.value == null) {
-      Logger.logDebug(
-        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} value is undefined - returning false`,
+      logger.logDebug(
+        `isFeatureGateEnabled featureGate:${featureGate} value is undefined - returning false`,
       );
       return false;
     }

package/src/contexts/graphqlContext/__tests__/graphqlContext.test.tsx

@@ -8,9 +8,9 @@ import { getMerchantOrgIdQuery } from 'src/application/models/graphql/queries/ge
 import { GraphQLProvider, useGraphQLClient } from '../graphqlContext';
 
 // Mock the Logger to avoid console output in tests
-vi.spyOn(Logger, 'logDebug').mockImplementation(() => {});
-vi.spyOn(Logger, 'logWarn').mockImplementation(() => {});
-vi.spyOn(Logger, 'logError').mockImplementation(() => {});
+vi.spyOn(Logger.prototype, 'logDebug').mockImplementation(() => {});
+vi.spyOn(Logger.prototype, 'logWarn').mockImplementation(() => {});
+vi.spyOn(Logger.prototype, 'logError').mockImplementation(() => {});
 
 // Mock fetch globally
 global.fetch = vi.fn();
@@ -625,7 +625,7 @@ describe('GraphQLProvider', () => {
     });
 
     it('should handle errors and return undefined configs', async () => {
-      const logErrorSpy = vi.spyOn(Logger, 'logError');
+      const logErrorSpy = vi.spyOn(Logger.prototype, 'logError');
 
       (global.fetch as any).mockRejectedValueOnce(new Error('Network error'));
 

package/src/contexts/graphqlContext/graphqlContext.tsx

@@ -47,6 +47,8 @@ interface GraphQLContextValue {
 
 const GraphQLContext = createContext<GraphQLContextValue | null>(null);
 
+const logger = new Logger('graphqlContext');
+
 type GraphQLProviderProps = {
   children: ReactNode;
   requestV3Config?: boolean;
@@ -254,7 +256,7 @@ export const GraphQLProvider = ({
 
       // If the v3 root config is not found and we are configured to return the deprecated config, we will return the mocked config
       if ((!v3RootConfig && mockV3ConfigToDeprecatedConfig) || (isStorybook && isSemanticColors)) {
-        Logger.logInfo('GraphQLContext | Returning mock v3 config', {
+        logger.logDebug('GraphQLContext | Returning mock v3 config', {
           colorsConfig: mockV3ColorsConfig as ColorsConfigV3Response,
           frontendConfig: mockV3FrontendConfig as FrontendConfigV3Response,
         });
@@ -273,7 +275,7 @@ export const GraphQLProvider = ({
         };
       }
 
-      Logger.logInfo('GraphQLContext | Returning v3 config', {
+      logger.logDebug('GraphQLContext | Returning v3 config', {
         colorsConfig: v3ColorsConfig as ColorsConfigV3Response,
         frontendConfig: v3FrontendConfig as FrontendConfigV3Response,
         orgPageConfig: {
@@ -299,7 +301,7 @@ export const GraphQLProvider = ({
         // TODO: Add widgets and other config here
       };
     } catch (err) {
-      Logger.logError('Error fetching graphql colors and frontend config', err);
+      logger.logError('Error fetching graphql colors and frontend config', err);
       return { colorsConfig: undefined, frontendConfig: undefined };
     }
   }, [executeQuery, mockV3ConfigToDeprecatedConfig]);
@@ -340,17 +342,17 @@ export const GraphQLProvider = ({
         frontendConfig: frontendConfig as FrontendConfigV3Response,
       };
     } catch (err) {
-      Logger.logError('Error fetching graphql colors and frontend config', err);
+      logger.logError('Error fetching graphql colors and frontend config', err);
       return { colorsConfig: undefined, frontendConfig: undefined };
     }
   }, [executeQuery]);
 
   const getConfig = useCallback(async (): Promise<GraphQlConfigValues> => {
     if (requestV3Config) {
-      Logger.logInfo('GraphQLContext | Getting v3 config', requestV3Config);
+      logger.logDebug('GraphQLContext | Getting v3 config', requestV3Config);
       return getV3Config();
     }
-    Logger.logInfo('GraphQLContext | Getting colors and frontend config', requestV3Config);
+    logger.logDebug('GraphQLContext | Getting colors and frontend config', requestV3Config);
     return getColorsAndFrontendConfig();
   }, [getColorsAndFrontendConfig, getV3Config, requestV3Config]);
 

package/src/contexts/hardcopyContext/hardcopyContext.tsx

@@ -15,6 +15,8 @@ import { WidgetTypeV3 } from '../typesV3';
 import { useFeatureFlagService } from '../featureFlagServiceContext/featureFlagServiceContext';
 import { useAmplitude } from '../amplitudeContext';
 
+const logger = new Logger('hardcopyContext');
+
 interface HardcopyRequest {
   widgetType: WidgetTypeV3;
   userEvent: UserEvent;
@@ -218,7 +220,7 @@ export const HardcopyProvider: React.FC<HardcopyProviderProps> = ({
   const getHardcopyFromBackend = useCallback(
     async (request: HardcopyRequest): Promise<HardcopyResponse> => {
       if (hardcopyOverride?.[request.widgetType]) {
-        Logger.logInfo('hardcopyContext | using hardcopy override', request.widgetType);
+        logger.logDebug('using hardcopy override', request.widgetType);
         return hardcopyOverride[request.widgetType]!;
       }
       const overrideConfigVersion =
@@ -245,7 +247,7 @@ export const HardcopyProvider: React.FC<HardcopyProviderProps> = ({
         const response = await CommerceApiClient.getHardcopy(widgetTextRequest);
         if (response) {
           const convertedResponse = convertToHardcopyResponse(response);
-          Logger.logInfo('hardcopyContext | converted response', convertedResponse);
+          logger.logDebug('converted response', convertedResponse);
           trackEvent({
             eventName: EnviveMetricsEventName.WidgetTextResponse,
             eventProps: {
@@ -258,11 +260,11 @@ export const HardcopyProvider: React.FC<HardcopyProviderProps> = ({
           return convertedResponse;
         }
       } catch (error) {
-        Logger.logError('hardcopyContext | error getting hardcopy from backend', error);
+        logger.logError('error getting hardcopy from backend', error);
       }
       const mockResponse = MOCK_HARDCOPY_RESPONSE[request.widgetType];
       if (mockResponse) {
-        Logger.logInfo('hardcopyContext | no real response, using mock', mockResponse);
+        logger.logDebug('no real response, using mock', mockResponse);
         return mockResponse;
       }
       throw new Error(`No hardcopy response found for widget type: ${request.widgetType}`);
@@ -273,11 +275,11 @@ export const HardcopyProvider: React.FC<HardcopyProviderProps> = ({
   const getHardcopy = useCallback(
     async (request: HardcopyRequest): Promise<HardcopyResponse> => {
       setIsLoading(true);
-      Logger.logInfo('hardcopyContext | retrieving hardcopy', languages);
+      logger.logDebug('retrieving hardcopy', languages);
 
-      Logger.logInfo('hardcopyContext | request', request);
+      logger.logDebug('request', request);
       const response = await getHardcopyFromBackend(request);
-      Logger.logInfo('hardcopyContext | returning hardcopy response', response);
+      logger.logDebug('returning hardcopy response', response);
       if (!response) {
         setIsLoading(false);
         throw new Error(`No hardcopy response found for widget type: ${request.widgetType}`);

package/src/contexts/localStorageContext/__tests__/localStorageContext.test.tsx

@@ -5,9 +5,9 @@ import { LocalStorageEventListener } from 'src/application/models/localStorageEv
 import { LocalStorageKeys, LocalStorageProvider, useLocalStorage } from '../localStorageContext';
 
 // Mock the Logger to avoid console output in tests
-vi.spyOn(Logger, 'logDebug').mockImplementation(() => {});
-vi.spyOn(Logger, 'logWarn').mockImplementation(() => {});
-vi.spyOn(Logger, 'logError').mockImplementation(() => {});
+vi.spyOn(Logger.prototype, 'logDebug').mockImplementation(() => {});
+vi.spyOn(Logger.prototype, 'logWarn').mockImplementation(() => {});
+vi.spyOn(Logger.prototype, 'logError').mockImplementation(() => {});
 
 // Component that uses the useLocalStorage hook
 const MockLocalStorageComponent: React.FC = () => {
@@ -184,7 +184,7 @@ describe('LocalStorageProvider', () => {
     });
 
     it('should log error when localStorage is not available', async () => {
-      const logErrorSpy = vi.spyOn(Logger, 'logError');
+      const logErrorSpy = vi.spyOn(Logger.prototype, 'logError');
       const originalLocalStorage = window.localStorage;
       Object.defineProperty(window, 'localStorage', {
         value: undefined,
@@ -558,7 +558,7 @@ describe('LocalStorageProvider', () => {
     });
 
     it('should log debug message when storage event is received', async () => {
-      const logDebugSpy = vi.spyOn(Logger, 'logDebug');
+      const logDebugSpy = vi.spyOn(Logger.prototype, 'logDebug');
 
       const TestComponent: React.FC = () => {
         const { attachListener, setItem, detachListener } = useLocalStorage();
@@ -602,7 +602,7 @@ describe('LocalStorageProvider', () => {
       await waitFor(
         () => {
           expect(logDebugSpy).toHaveBeenCalledWith(
-            '[spiffy-ai] Storage event key=test-key, value=',
+            'Storage event key=test-key, value=',
             'test-value',
           );
         },

package/src/contexts/localStorageContext/localStorageContext.tsx

@@ -20,6 +20,8 @@ interface LocalStorageContextType {
 
 const LocalStorageContext = createContext<LocalStorageContextType | null>(null);
 
+const logger = new Logger('localStorageContext');
+
 export const LocalStorageProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const isAvailable = useMemo(() => {
     try {
@@ -31,7 +33,7 @@ export const LocalStorageProvider: React.FC<{ children: React.ReactNode }> = ({
 
   useEffect(() => {
     if (!isAvailable) {
-      Logger.logError('localStorage is not available', undefined);
+      logger.logError('localStorage is not available', undefined);
     }
   }, [isAvailable]);
 
@@ -78,7 +80,7 @@ export const LocalStorageProvider: React.FC<{ children: React.ReactNode }> = ({
           if (event.key !== listener.storageKey) {
             return;
           }
-          Logger.logDebug(`[spiffy-ai] Storage event key=${event.key}, value=`, event.newValue);
+          logger.logDebug(`Storage event key=${event.key}, value=`, event.newValue);
           listener.listener(event);
         };
         listenersCache.set(listener.storageKey, handler);