@envive-ai/react-hooks 0.3.7 → 0.3.9

package/src/atoms/chat/replies.ts

@@ -0,0 +1,56 @@
+import { atom } from 'jotai';
+import { Message, MessageType } from 'src/application/models';
+import {
+  messagesAtom,
+  replyEventCategoryAtom,
+  userHasRepliedAtom,
+  userQueryAtom,
+} from 'src/atoms/chat';
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { SpiffyMetricsEventName } from 'src/contexts/amplitudeContext/amplitudeContext';
+import { amplitudeTrackEventAtom } from 'src/atoms/amplitude/amplitudeTrackEventAtom';
+import { queueUserEventAtom } from './messageQueue';
+
+type HandleReplyParams = {
+  message: Message;
+  userTyped: boolean;
+};
+
+export const handleReplyAtom = atom(null, (get, set, { message, userTyped }: HandleReplyParams) => {
+  if (message.type !== MessageType.QueryTyped) {
+    return;
+  }
+
+  const trackEvent = get(amplitudeTrackEventAtom);
+  const queryTyped = message.metadata.content;
+
+  set(replyEventCategoryAtom, UserEventCategory.QueryTyped);
+  set(userQueryAtom, queryTyped);
+  set(messagesAtom, [...get(messagesAtom), [message]]);
+  set(userHasRepliedAtom, true);
+  set(queueUserEventAtom, {
+    eventId: message.id,
+    createdAt: message.createdAt,
+    category: UserEventCategory.QueryTyped,
+    attributes: {
+      query: queryTyped,
+    },
+  });
+
+  if (trackEvent) {
+    trackEvent({
+      eventName: SpiffyMetricsEventName.ChatUserMessageInput,
+      eventProps: {
+        message_id: message.id,
+        message_role: message.role,
+        message_type: message.type,
+        message_metadata: {
+          content: message?.metadata?.content, // Removed amplitudeSafeString
+          created_at: message.createdAt,
+          user_typed: userTyped,
+        },
+      },
+      alsoSendToGoogleAnalytics: true,
+    });
+  }
+});

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

@@ -5,7 +5,7 @@ import {
   UserIdentityProvider,
   useUserIdentity,
 } from 'src/contexts/userIdentityContext/userIdentityContext';
-import { LocalStorageProvider } from 'src/contexts/localStorageContext';
+import { LocalStorageKeys, LocalStorageProvider } from 'src/contexts/localStorageContext';
 import { EnviveConfigProvider } from 'src/contexts/enviveConfigContext/enviveConfigContext';
 import {
   FeatureFlagService,
@@ -13,6 +13,7 @@ import {
 } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
 import { userIdAtom } from 'src/atoms/app';
 import { AmplitudeService } from 'src/services/amplitudeService/amplitudeService';
+import { UserIdentityService } from 'src/services/userIdentityService';
 import { AmplitudeProvider, SpiffyMetricsEventName, useAmplitude } from '../amplitudeContext';
 
 // Mock AmplitudeService
@@ -111,10 +112,20 @@ const AtomReaderComponent: React.FC = () => {
 const CombinedContextComponent: React.FC = () => {
   const userIdentity = useUserIdentity();
   const amplitude = useAmplitude();
+  const [userId, setUserId] = React.useState<string>('');
+
+  React.useEffect(() => {
+    const fetchUserId = async () => {
+      const id = await userIdentity.getUserIdOrDefault();
+      setUserId(id);
+    };
+
+    fetchUserId();
+  }, [userIdentity]);
 
   return (
     <div data-testid="combined-component">
-      <div data-testid="user-id-from-identity">{userIdentity.getUserIdOrDefault()}</div>
+      <div data-testid="user-id-from-identity">{userId}</div>
       <div data-testid="amplitude-ready">{amplitude.isReady.toString()}</div>
     </div>
   );
@@ -123,18 +134,33 @@ const CombinedContextComponent: React.FC = () => {
 // FeatureFlagService
 const testFeatureFlagService = new FeatureFlagService([]);
 
+// userID service
+const mockInitializeUser = vi.fn().mockResolvedValue(undefined);
+const mockGetUserId = vi.fn().mockImplementation(async () => {
+  // Check for override first
+  const override = localStorage.getItem('v1-spiffy-user-id-override');
+  if (override) return override;
+  return 'test-user-id';
+});
+
+const testUserIdService = {
+  getUserIdOrDefault: mockGetUserId,
+  initializeUser: mockInitializeUser,
+  getUserIdOverrideFromLocalStorage: vi.fn().mockImplementation(() => {
+    return localStorage.getItem('v1-spiffy-user-id-override') || undefined;
+  }),
+} as unknown as UserIdentityService;
+
 // Wrapper component with all required providers
 const TestWrapper: React.FC<{
   children: React.ReactNode;
   amplitudeApiKey?: string;
   userIdOverride?: string;
-  userIdDefault?: string;
   externalAmplitudeService?: AmplitudeService;
 }> = ({
   children,
   amplitudeApiKey = 'test-amplitude-key',
   userIdOverride,
-  userIdDefault,
   externalAmplitudeService,
 }) => {
   // Set up localStorage with user IDs if provided
@@ -142,10 +168,7 @@ const TestWrapper: React.FC<{
     if (userIdOverride) {
       localStorage.setItem('v1-spiffy-user-id-override', userIdOverride);
     }
-    if (userIdDefault) {
-      localStorage.setItem('v1-spiffy-user-id-default', userIdDefault);
-    }
-  }, [userIdOverride, userIdDefault]);
+  }, [userIdOverride]);
 
   return (
     <Provider>
@@ -159,7 +182,7 @@ const TestWrapper: React.FC<{
         featureGates={[]}
       >
         <LocalStorageProvider>
-          <UserIdentityProvider>
+          <UserIdentityProvider userIdService={testUserIdService}>
             <FeatureFlagServiceProvider featureFlagService={testFeatureFlagService}>
               <AmplitudeProvider externalAmplitudeService={externalAmplitudeService}>
                 {children}
@@ -173,8 +196,16 @@ const TestWrapper: React.FC<{
 };
 
 describe('AmplitudeProvider - React Context Integration', () => {
+  let mockGetLocalStorageItem: (key: string) => string | null;
   beforeEach(() => {
     vi.clearAllMocks();
+    vi.clearAllMocks();
+    mockGetLocalStorageItem = vi.fn((key: string) => {
+      if (key === LocalStorageKeys.ChatId) {
+        return 'test-chat-id';
+      }
+      return null;
+    });
     if (typeof localStorage !== 'undefined') {
       localStorage.clear();
     }
@@ -227,62 +258,6 @@ describe('AmplitudeProvider - React Context Integration', () => {
       });
     });
 
-    it('should use default userId from UserIdentityContext when override is not set', async () => {
-      const testUserId = 'default-user-id-456';
-      render(
-        <TestWrapper userIdDefault={testUserId}>
-          <MockAmplitudeComponent />
-        </TestWrapper>,
-      );
-
-      await waitFor(() => {
-        expect(screen.getByTestId('is-ready').textContent).toBe('true');
-      });
-
-      await act(async () => {
-        screen.getByTestId('track-event-button').click();
-      });
-
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalled();
-        const callArgs = mockTrackEvent.mock.calls[0];
-        expect(callArgs[0]).toEqual({
-          eventName: SpiffyMetricsEventName.ChatUserMessageInput,
-          eventProps: { message: 'test message' },
-        });
-      });
-    });
-
-    it('should prioritize override userId over default userId', async () => {
-      const overrideUserId = 'override-user-id-789';
-      const defaultUserId = 'default-user-id-012';
-      render(
-        <TestWrapper
-          userIdOverride={overrideUserId}
-          userIdDefault={defaultUserId}
-        >
-          <MockAmplitudeComponent />
-        </TestWrapper>,
-      );
-
-      await waitFor(() => {
-        expect(screen.getByTestId('is-ready').textContent).toBe('true');
-      });
-
-      await act(async () => {
-        screen.getByTestId('track-event-button').click();
-      });
-
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalled();
-        const callArgs = mockTrackEvent.mock.calls[0];
-        expect(callArgs[0]).toEqual({
-          eventName: SpiffyMetricsEventName.ChatUserMessageInput,
-          eventProps: { message: 'test message' },
-        });
-      });
-    });
-
     it('should initialize AmplitudeService with userId from UserIdentityContext', async () => {
       const testUserId = 'init-user-id-345';
       render(
@@ -369,7 +344,7 @@ describe('AmplitudeProvider - React Context Integration', () => {
               featureGates={[]}
             >
               <LocalStorageProvider>
-                <UserIdentityProvider>
+                <UserIdentityProvider userIdService={testUserIdService}>
                   <FeatureFlagServiceProvider featureFlagService={testFeatureFlagService}>
                     <AmplitudeProvider>{children}</AmplitudeProvider>
                   </FeatureFlagServiceProvider>
@@ -399,6 +374,9 @@ describe('AmplitudeProvider - React Context Integration', () => {
         userId: 'external-user-id',
         amplitudeApiKey: 'external-api-key',
         dataResidency: 'EU',
+        orgId: 'test-org-id',
+        show: true,
+        getLocalStorageItem: mockGetLocalStorageItem,
         featureFlagService: new FeatureFlagService([]),
         env: 'test', // Provide required fields to match AmplitudeServiceConfig
         contextSource: 'test-source',
@@ -435,6 +413,9 @@ describe('AmplitudeProvider - React Context Integration', () => {
         userId: 'external-user-id',
         amplitudeApiKey: 'external-api-key',
         dataResidency: 'EU',
+        orgId: 'test-org-id',
+        show: true,
+        getLocalStorageItem: mockGetLocalStorageItem,
         featureFlagService: new FeatureFlagService([]),
         env: 'test',
         contextSource: 'test-source',

package/src/contexts/amplitudeContext/amplitudeContext.tsx

@@ -43,6 +43,7 @@ export const AmplitudeProvider: React.FC<{
     variantUrlOverride,
     variantInfoOverride,
     show,
+    orgId,
     orgShortName,
     featureGates,
   } = useEnviveConfig();
@@ -67,9 +68,10 @@ export const AmplitudeProvider: React.FC<{
         env: env || '',
         contextSource: contextSource || '',
         orgShortName: orgShortName || '',
+        orgId: orgId || '',
         featureFlagService,
         orgGaConfig,
-        show,
+        show: show ?? false,
         getLocalStorageItem: getItem,
       });
       setService(amplitudeService);
@@ -92,6 +94,7 @@ export const AmplitudeProvider: React.FC<{
     featureGates,
     getItem,
     externalAmplitudeService,
+    orgId,
   ]);
 
   const value = useMemo(

package/src/contexts/enviveContext/WindowChatToggleBinder.tsx

@@ -0,0 +1,66 @@
+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 { useSalesAgent } from 'src/contexts/salesAgentContext/salesAgentContext';
+import { useChatToggle } from 'src/hooks/ChatToggle';
+
+const attachedPrefixes = new Set<string>();
+
+export const WindowChatToggleBinder = () => {
+  const triggerLocation = ChatElementDisplayLocationV3.WINDOW_API_CALL;
+  const hook = useChatToggle();
+  const { onTypedMessageSubmitted } = useSalesAgent();
+  const { identifyingPrefix } = useEnviveConfig();
+
+  const openChatRef = useRef<(triggerId?: string) => void>(() => {});
+  const closeChatRef = useRef<(triggerId?: string) => void>(() => {});
+  const toggleChatRef = useRef<(triggerId?: string) => void>(() => {});
+  const isOpenRef = useRef<boolean>(hook.isOpen);
+  const openChatWithPromptRef = useRef<(prompt: string, triggerId?: string) => void>(() => {});
+
+  useEffect(() => {
+    openChatRef.current = (triggerId?: string) => hook.openChat(triggerLocation, triggerId);
+    closeChatRef.current = (triggerId?: string) => hook.closeChat(triggerLocation, triggerId);
+    toggleChatRef.current = (triggerId?: string) => hook.toggle(triggerLocation, triggerId);
+    isOpenRef.current = hook.isOpen;
+    openChatWithPromptRef.current = (prompt: string, triggerId?: string) => {
+      onTypedMessageSubmitted({ query: prompt, userTyped: false });
+      hook.openChat(triggerLocation, triggerId);
+    };
+  }, [hook, onTypedMessageSubmitted, triggerLocation]);
+
+  useEffect(() => {
+    if (!identifyingPrefix || attachedPrefixes.has(identifyingPrefix)) return;
+    try {
+      const win = window as unknown as Window & Record<string, unknown>;
+      if (!win[identifyingPrefix]) {
+        win[identifyingPrefix] = {} as Record<string, unknown>;
+      }
+      const api = win[identifyingPrefix] as Record<string, unknown>;
+      api.openChat = (triggerId?: string) => openChatRef.current?.(triggerId);
+      api.closeChat = (triggerId?: string) => closeChatRef.current?.(triggerId);
+      api.toggleChat = (triggerId?: string) => toggleChatRef.current?.(triggerId);
+      api.getChatIsOpen = () => !!isOpenRef.current;
+      api.openChatWithPrompt = (prompt: string, triggerId?: string) =>
+        openChatWithPromptRef.current?.(prompt, triggerId);
+
+      attachedPrefixes.add(identifyingPrefix);
+
+      // Always expose the same API at window["spiffy"] so both work (e.g. injection-bundle + spiffy)
+      const spiffyAlias = 'spiffy';
+      if (!attachedPrefixes.has(spiffyAlias)) {
+        win[spiffyAlias] = api;
+        attachedPrefixes.add(spiffyAlias);
+      }
+
+      Logger.logDebug(
+        `[envive-ai] Chat toggle attached at window["${identifyingPrefix}"] and window["${spiffyAlias}"]`,
+      );
+    } catch (e) {
+      Logger.logError('[envive-ai] Failed to attach Chat toggle functions', e);
+    }
+  }, [identifyingPrefix]);
+
+  return null;
+};

package/src/contexts/enviveContext/enviveContext.tsx

@@ -4,11 +4,12 @@ import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResult
 import { EnviveConfigService, EnviveServiceConfig } from 'src/services/enviveConfigService';
 import { AmplitudeService } from 'src/services/amplitudeService/amplitudeService';
 import Logger from 'src/application/logging/logger';
+import { UserIdentityService } from 'src/services/userIdentityService';
 import { AmplitudeProvider } from '../amplitudeContext';
 import { EnviveConfigProvider } from '../enviveConfigContext';
 import { EnviveCssProvider } from '../enviveCssContext';
 import { FeatureFlagService, FeatureFlagServiceProvider } from '../featureFlagServiceContext';
-import { GraphQlConfigValues, GraphQLProvider } from '../graphqlContext';
+import { GraphQLProvider, GraphQlConfigValues } from '../graphqlContext';
 import { LocalStorageProvider } from '../localStorageContext';
 import { NewOrgConfigProvider } from '../newOrgConfigContext';
 import { UserIdentityProvider } from '../userIdentityContext';
@@ -20,6 +21,7 @@ import { HardcopyProvider } from '../hardcopyContext';
 import { WidgetConfigProvider } from '../widgetConfigContext';
 import { PageProvider } from '../pageContext';
 import { UiConfigProvider } from '../uiConfigContext';
+import { WindowChatToggleBinder } from './WindowChatToggleBinder';
 
 const EnviveContext = createContext<null>(null);
 
@@ -50,8 +52,10 @@ interface EnviveProviderProps extends AgentWrapperProps {
   amplitudeService?: AmplitudeService;
   mockV3ConfigToDeprecatedConfig?: boolean;
   requestV3Config?: boolean;
+  userIdentityService?: UserIdentityService;
   previewMode?: boolean;
   overrideConfig?: GraphQlConfigValues;
+  mockSalesAgentData?: any;
 }
 
 const SearchAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgents }) => {
@@ -61,13 +65,28 @@ const SearchAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgen
   return <SearchProvider>{children}</SearchProvider>;
 };
 
-const SalesAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgents }) => {
+interface SalesAgentWrapperProps extends AgentWrapperProps {
+  previewMode?: boolean;
+  mockSalesAgentData?: any;
+}
+
+const SalesAgentWrapper: React.FC<SalesAgentWrapperProps> = ({
+  children,
+  enabledAgents,
+  previewMode,
+  mockSalesAgentData,
+}) => {
   if (!enabledAgents.includes(EnviveAgent.SalesAgent)) {
     return children;
   }
   return (
     <SystemSettingsContextProvider>
-      <SalesAgentProvider>{children}</SalesAgentProvider>
+      <SalesAgentProvider
+        previewMode={previewMode}
+        mockData={mockSalesAgentData}
+      >
+        {children}
+      </SalesAgentProvider>
     </SystemSettingsContextProvider>
   );
 };
@@ -80,11 +99,30 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
   enviveConfigService: inputEnviveConfigService,
   featureFlagService: inputFeatureFlagService,
   amplitudeService: inputAmplitudeService,
+  userIdentityService: inputUserIdentityService,
   mockV3ConfigToDeprecatedConfig = false,
   requestV3Config = false,
+  mockSalesAgentData,
   ...config
 }) => {
-  const userId = 'spiffy-user-id-0b64d781-e1c2-4b6d-9cf5-32b4f7c1e3f2'; // TODO: How should this be derived?
+  const [userId, setUserId] = useState<string>('');
+
+  const userIdService = useMemo(
+    () =>
+      inputUserIdentityService ??
+      new UserIdentityService({ apiKey: config?.amplitudeApiKey || '' }),
+    [config?.amplitudeApiKey, inputUserIdentityService],
+  );
+
+  useEffect(() => {
+    const fetchUserId = async () => {
+      const id = await userIdService.getUserIdOrDefault();
+      setUserId(id);
+    };
+
+    fetchUserId();
+  }, [config.amplitudeApiKey, inputUserIdentityService, userIdService]);
+
   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);
@@ -97,7 +135,7 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
       new EnviveConfigService({
         baseUrl: config?.baseUrl || '',
         apiKey: config?.orgLevelApiKey || '',
-        userId: userId || '',
+        userId,
         namespace: namespace || '',
         source: source || '',
       });
@@ -138,7 +176,7 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
           <NewOrgConfigProvider overrideConfig={overrideConfig}>
             <LocalStorageProvider>
               <FeatureFlagServiceProvider featureFlagService={featureFlagService}>
-                <UserIdentityProvider>
+                <UserIdentityProvider userIdService={userIdService}>
                   <AmplitudeProvider externalAmplitudeService={inputAmplitudeService}>
                     <PageProvider previewMode={previewMode}>
                       <UiConfigProvider>
@@ -146,7 +184,12 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
                           <HardcopyProvider>
                             <EnviveCssProvider>
                               <SearchAgentWrapper enabledAgents={enabledAgents}>
-                                <SalesAgentWrapper enabledAgents={enabledAgents}>
+                                <WindowChatToggleBinder />
+                                <SalesAgentWrapper
+                                  enabledAgents={enabledAgents}
+                                  previewMode={previewMode}
+                                  mockSalesAgentData={mockSalesAgentData}
+                                >
                                   {children}
                                 </SalesAgentWrapper>
                               </SearchAgentWrapper>

package/src/contexts/featureFlagServiceContext/featureFlagServiceContext.tsx

@@ -3,6 +3,8 @@ import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResult
 import { FeatureGates } from 'src/application/models/featureGates';
 import Logger from 'src/application/logging/logger';
 
+const FEATURE_FLAGS_STORAGE_KEY = 'spiffy-feature-flags';
+
 // This is the class that was previously implicitly used or defined elsewhere
 export class FeatureFlagService {
   private featureGates: OrgConfigFeatureGate[];
@@ -11,11 +13,94 @@ export class FeatureFlagService {
     this.featureGates = featureGates;
   }
 
+  static getQueryParamFeatureGateOverrides(featureGate: FeatureGates): boolean | undefined {
+    const url = window.location?.href ?? '';
+    if (url.includes('?')) {
+      const urlObj = new URL(url);
+      const params = new URLSearchParams(urlObj.search);
+      const paramsObj = Object.fromEntries(params.entries());
+      const value = paramsObj[featureGate];
+
+      if (value != null) {
+        return value === 'true';
+      }
+    }
+
+    return undefined;
+  }
+
+  static getWindowFeatureGateOverrides(featureGate: FeatureGates): boolean | undefined {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    const windowOverride = window as Window & {
+      _envive?: { featureOverrides?: Record<string, boolean> };
+      _spiffy?: { featureOverrides?: Record<string, boolean> };
+    };
+    const featureOverrides =
+      windowOverride?._envive?.featureOverrides ?? windowOverride?._spiffy?.featureOverrides;
+    const value = featureOverrides?.[String(featureGate)];
+    if (value != null) {
+      return value;
+    }
+    return undefined;
+  }
+
+  static getStoredFeatureGateOverrides(featureGate: FeatureGates): boolean | undefined {
+    if (typeof window === 'undefined' || typeof window.localStorage === 'undefined') {
+      return undefined;
+    }
+    try {
+      const featureFlags = window.localStorage.getItem(FEATURE_FLAGS_STORAGE_KEY);
+      if (!featureFlags) {
+        return undefined;
+      }
+      const featureFlagsObj = JSON.parse(featureFlags) as Record<string, boolean>;
+      return featureFlagsObj[featureGate];
+    } catch (err) {
+      Logger.logError(
+        '[spiffy-ai] getStoredFeatureGateOverrides: error parsing feature flags',
+        err,
+      );
+      return undefined;
+    }
+  }
+
+  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}`,
+      );
+      return queryOverride;
+    }
+
+    const windowOverride = FeatureFlagService.getWindowFeatureGateOverrides(featureGate);
+    if (windowOverride != null) {
+      Logger.logDebug(
+        `[spiffy-ai] 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}`,
+      );
+      return storedOverride;
+    }
+
+    return undefined;
+  }
+
   isFeatureGateEnabled = (featureGate: FeatureGates): boolean => {
     const gateValue = this.featureGates.find(gate => gate.name === featureGate);
 
-    // TODO: Add logic for overrides (query params, window, stored) if needed, similar to the old FeatureFlagContext.tsx
-    // For now, direct value from config is used.
+    const featureFlagOverride = FeatureFlagService.getFeatureFlagOverride(featureGate);
+    if (featureFlagOverride !== undefined) {
+      return featureFlagOverride;
+    }
 
     if (gateValue == null || gateValue.value == null) {
       Logger.logDebug(
@@ -38,6 +123,20 @@ export class FeatureFlagService {
       ]),
     );
   };
+
+  static persistFeatureGateOverrides(): void {
+    if (typeof window === 'undefined' || typeof window.localStorage === 'undefined') {
+      return;
+    }
+    const overrides = Object.values(FeatureGates)
+      .map(
+        featureGate =>
+          [featureGate, FeatureFlagService.getFeatureFlagOverride(featureGate)] as const,
+      )
+      .filter(([, value]) => value !== undefined)
+      .reduce<Record<string, boolean>>((acc, [key, value]) => ({ ...acc, [key]: value! }), {});
+    window.localStorage.setItem(FEATURE_FLAGS_STORAGE_KEY, JSON.stringify(overrides));
+  }
 }
 
 export interface FeatureFlagContextType {

package/src/contexts/graphqlContext/graphqlContext.tsx

@@ -214,11 +214,17 @@ export const GraphQLProvider = ({
 
       // We may update this root config location in the future
       const v3RootConfig = response.me.getProductsConfigByVersion?.v_three_config?.values;
+      const frontendValues = response.me.getProductsConfigByVersion?.frontend?.values;
 
       const v3FrontendConfig = v3FrontendConfigCleanup(
         transformSnakeToCamel(v3RootConfig) as FrontendConfigV3Response,
       );
 
+      // Get merchant_override_css from frontend.values if v3RootConfig is not available
+      const frontendMerchantOverrideCss = frontendValues?.merchant_override_css;
+      const v3MerchantOverrideCss = v3FrontendConfig.uiConfigs?.merchantOverrideCss;
+      const merchantOverrideCss = v3MerchantOverrideCss || frontendMerchantOverrideCss;
+
       const v3MountingConfigsArray = (transformSnakeToCamel(v3RootConfig?.mounting_configs) ??
         []) as unknown as { key: string; config: WidgetMountingConfig }[];
 
@@ -243,9 +249,11 @@ export const GraphQLProvider = ({
         : DEFAULT_PAGE_VARIANTS;
 
       const v3ColorsConfig = transformSnakeToCamel(v3RootConfig?.colors?.values);
+      const isSemanticColors = !window.location.href.includes('globals=merchant');
+      const isStorybook = window.top?.location.href.includes('?path=');
+
       // 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) {
-        const isSemanticColors = !window.location.href.includes('globals=merchant');
+      if ((!v3RootConfig && mockV3ConfigToDeprecatedConfig) || (isStorybook && isSemanticColors)) {
         Logger.logInfo('GraphQLContext | Returning mock v3 config', {
           colorsConfig: mockV3ColorsConfig as ColorsConfigV3Response,
           frontendConfig: mockV3FrontendConfig as FrontendConfigV3Response,
@@ -279,6 +287,7 @@ export const GraphQLProvider = ({
         colorsConfig: v3ColorsConfig as ColorsConfigV3Response,
         frontendConfig: {
           ...(v3FrontendConfig as FrontendConfigV3Response),
+          merchantOverrideCss,
           // Need to replace the automatic widget configs with the object based ones
           widgetConfigs: v3WidgetConfigs,
         },