@envive-ai/react-hooks 0.3.4 → 0.3.6

package/src/atoms/search/productRetrievalAdapter.ts

@@ -1,25 +1,21 @@
 import { ProductRetrievalParams, ProductRetrievalResult } from './types';
 
 // This will be set by the ProductRetrievalProvider when it initializes
-let productRetrievalFunction:
-  | ((params: ProductRetrievalParams) => Promise<ProductRetrievalResult>)
-  | null = null;
+const productRetrievalAdapter: {
+  fn: ((params: ProductRetrievalParams) => Promise<ProductRetrievalResult>) | null;
+} = { fn: null };
 
 export const setProductRetrievalFunction = (
   fn: (params: ProductRetrievalParams) => Promise<ProductRetrievalResult>,
 ) => {
-  productRetrievalFunction = fn;
+  productRetrievalAdapter.fn = fn;
 };
 
 export const getProductRetrievalFunction = () => {
-  if (!productRetrievalFunction) {
+  if (!productRetrievalAdapter.fn) {
     throw new Error(
       'Product retrieval function not initialized. Make sure ProductRetrievalProvider is mounted.',
     );
   }
-  return productRetrievalFunction;
-};
-
-export const clearProductRetrievalFunction = () => {
-  productRetrievalFunction = null;
+  return productRetrievalAdapter.fn;
 };

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

@@ -31,7 +31,6 @@ vi.mock('src/services/amplitudeService/amplitudeService', async () => {
     setSupplementalDefaultProps = mockSetSupplementalDefaultProps;
 
     get isReady(): boolean {
-      // eslint-disable-next-line class-methods-use-this
       return mockIsReady();
     }
   }

package/src/contexts/enviveContext/enviveContext.tsx

@@ -8,7 +8,7 @@ import { AmplitudeProvider } from '../amplitudeContext';
 import { EnviveConfigProvider } from '../enviveConfigContext';
 import { EnviveCssProvider } from '../enviveCssContext';
 import { FeatureFlagService, FeatureFlagServiceProvider } from '../featureFlagServiceContext';
-import { GraphQLProvider } from '../graphqlContext';
+import { GraphQlConfigValues, GraphQLProvider } from '../graphqlContext';
 import { LocalStorageProvider } from '../localStorageContext';
 import { NewOrgConfigProvider } from '../newOrgConfigContext';
 import { UserIdentityProvider } from '../userIdentityContext';
@@ -50,6 +50,8 @@ interface EnviveProviderProps extends AgentWrapperProps {
   amplitudeService?: AmplitudeService;
   mockV3ConfigToDeprecatedConfig?: boolean;
   requestV3Config?: boolean;
+  previewMode?: boolean;
+  overrideConfig?: GraphQlConfigValues;
 }
 
 const SearchAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgents }) => {
@@ -72,6 +74,8 @@ const SalesAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgent
 
 export const EnviveProvider: React.FC<EnviveProviderProps> = ({
   children,
+  previewMode = false,
+  overrideConfig,
   enabledAgents,
   enviveConfigService: inputEnviveConfigService,
   featureFlagService: inputFeatureFlagService,
@@ -107,8 +111,8 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
     () => ({
       ...config,
       featureGates: enviveServiceConfig?.gates || [],
-      orgShortName: enviveServiceConfig?.org.org.short_name || '',
-      orgId: enviveServiceConfig?.org.org.id || '',
+      orgShortName: enviveServiceConfig?.org?.org?.short_name || '',
+      orgId: enviveServiceConfig?.org?.org?.id || '',
     }),
     [config, enviveServiceConfig],
   );
@@ -131,12 +135,12 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
           mockV3ConfigToDeprecatedConfig={mockV3ConfigToDeprecatedConfig}
           requestV3Config={requestV3Config}
         >
-          <NewOrgConfigProvider>
+          <NewOrgConfigProvider overrideConfig={overrideConfig}>
             <LocalStorageProvider>
               <FeatureFlagServiceProvider featureFlagService={featureFlagService}>
                 <UserIdentityProvider>
                   <AmplitudeProvider externalAmplitudeService={inputAmplitudeService}>
-                    <PageProvider>
+                    <PageProvider previewMode={previewMode}>
                       <UiConfigProvider>
                         <WidgetConfigProvider>
                           <HardcopyProvider>

package/src/contexts/graphqlContext/graphqlContext.tsx

@@ -20,8 +20,13 @@ import {
 import { FrontendConfigV3 } from 'src/application/models/frontendConfigV3';
 import { ColorMappingV3 } from 'src/application/models/colorsConfigV3';
 import { mockV3ColorsConfig, mockV3FrontendConfig } from './mockV3Config';
-import { ConfigVersionEnum, WidgetConfigV3 } from '../typesV3';
-import { OrgPageConfig, PageVariantConfig, WidgetMountingConfig } from '../types';
+import { ConfigVersionEnum, Position, WidgetConfigV3 } from '../typesV3';
+import {
+  OrgPageConfig,
+  PageVariantConfig,
+  PageVariantTestType,
+  WidgetMountingConfig,
+} from '../types';
 
 interface BaseMeConfigQueryResponse {
   me: {
@@ -64,6 +69,7 @@ const colorsAndFrontendConfigQuery = () => `
       getProductsConfigByVersion(version: $version) {
         frontend { values }
         colors { values }
+        v_three_config { values }
       }
     }
   }
@@ -75,6 +81,114 @@ type GraphQLProviderProps = {
   mockV3ConfigToDeprecatedConfig?: boolean;
 };
 
+const DEFAULT_PAGE_VARIANTS: PageVariantConfig[] = [
+  {
+    variantId: 'plp',
+    variantType: 'plp',
+    plpIdExtractor: 'url-resolver-plp-id',
+    widgetMounting: [],
+    variantTests: [
+      {
+        testType: PageVariantTestType.UrlResolver,
+      },
+    ],
+  },
+  {
+    variantId: 'pdp',
+    variantType: 'pdp',
+    productIdExtractor: 'url-resolver-product-id',
+    widgetMounting: [],
+    variantTests: [
+      {
+        testType: PageVariantTestType.UrlResolver,
+      },
+    ],
+  },
+];
+
+const mapPositionToCamelCase = (position: string): Position => {
+  if (position === 'bottom-left') {
+    return 'bottomLeft';
+  }
+  if (position === 'middle-left') {
+    return 'middleLeft';
+  }
+  if (position === 'middle-right') {
+    return 'middleRight';
+  }
+  if (position === 'bottom-right') {
+    return 'bottomRight';
+  }
+  throw new Error(`Invalid position: ${position}`);
+};
+
+/**
+ * This function is used to do some additional cleanup of the v3 frontend config to ensure that the config is in the correct format.
+ */
+const v3FrontendConfigCleanup = (
+  v3RootConfig: FrontendConfigV3Response,
+): FrontendConfigV3Response => {
+  const { uiConfigs } = v3RootConfig;
+  if (!uiConfigs) {
+    return v3RootConfig;
+  }
+  const { floatingButton, lookAndFeel } = uiConfigs as any;
+  if (!floatingButton || !lookAndFeel) {
+    return v3RootConfig;
+  }
+  const { fontSize, lineHeight } = lookAndFeel.typography as any;
+  return {
+    ...v3RootConfig,
+    uiConfigs: {
+      ...uiConfigs,
+      floatingButton: {
+        ...floatingButton,
+        position: mapPositionToCamelCase(
+          v3RootConfig.uiConfigs?.floatingButton?.position as string,
+        ),
+      },
+      lookAndFeel: {
+        ...lookAndFeel,
+        chatHeaderLogoDarkSrc: lookAndFeel.chatHeaderLogoDarkSrc || lookAndFeel.chatHeaderLogoSrc,
+        chatHeaderLogoLightSrc: lookAndFeel.chatHeaderLogoLightSrc || lookAndFeel.chatHeaderLogoSrc,
+        typography: {
+          ...lookAndFeel.typography,
+          fontSize: {
+            // The fonts sizes are defined differently in the backend config
+            // so we need to map the values to the correct camel case keys
+            b1: fontSize?.b1 || fontSize?.b_1,
+            b2: fontSize?.b2 || fontSize?.b_2,
+            b3: fontSize?.b3 || fontSize?.b_3,
+            b4: fontSize?.b4 || fontSize?.b_4,
+            b5: fontSize?.b5 || fontSize?.b_5,
+            h1: fontSize?.h1 || fontSize?.h_1,
+            h2: fontSize?.h2 || fontSize?.h_2,
+            h3: fontSize?.h3 || fontSize?.h_3,
+            l1: fontSize?.l1 || fontSize?.l_1,
+            l2: fontSize?.l2 || fontSize?.l_2,
+            t1: fontSize?.t1 || fontSize?.t_1,
+            t2: fontSize?.t2 || fontSize?.t_2,
+            t3: fontSize?.t3 || fontSize?.t_3,
+          },
+          lineHeight: {
+            ...lookAndFeel.typography.lineHeight,
+            '114': lineHeight?.lh_114 || lineHeight?.[114],
+            '116': lineHeight?.lh_116 || lineHeight?.[116],
+            '118': lineHeight?.lh_118 || lineHeight?.[118],
+            '120': lineHeight?.lh_120 || lineHeight?.[120],
+            '124': lineHeight?.lh_124 || lineHeight?.[124],
+            '128': lineHeight?.lh_128 || lineHeight?.[128],
+            '130': lineHeight?.lh_130 || lineHeight?.[130],
+            '133': lineHeight?.lh_133 || lineHeight?.[133],
+            '140': lineHeight?.lh_140 || lineHeight?.[140],
+            '148': lineHeight?.lh_148 || lineHeight?.[148],
+          },
+        },
+      },
+    },
+  };
+};
+
 export const GraphQLProvider = ({
   children,
   requestV3Config = false,
@@ -127,10 +241,11 @@ export const GraphQLProvider = ({
       const response = await executeQuery(query);
 
       // We may update this root config location in the future
-      const v3RootConfig =
-        response.me.getProductsConfigByVersion?.frontend?.values?.ui_configs?.v_three_config;
+      const v3RootConfig = response.me.getProductsConfigByVersion?.v_three_config?.values;
 
-      const v3FrontendConfig = transformSnakeToCamel(v3RootConfig) as FrontendConfigV3Response;
+      const v3FrontendConfig = v3FrontendConfigCleanup(
+        transformSnakeToCamel(v3RootConfig) as FrontendConfigV3Response,
+      );
 
       const v3MountingConfigsArray = (transformSnakeToCamel(v3RootConfig?.mounting_configs) ??
         []) as unknown as { key: string; config: WidgetMountingConfig }[];
@@ -151,9 +266,9 @@ export const GraphQLProvider = ({
           { widgetConfigId, ...rest } as WidgetConfigV3,
         ]),
       ) as Record<string, WidgetConfigV3>;
-      const v3pageVariants = v3RootConfig?.page_variants.map(
-        validateAndTransformPageVariants,
-      ) as PageVariantConfig[];
+      const v3pageVariants: PageVariantConfig[] = Array.isArray(v3RootConfig?.page_variants)
+        ? v3RootConfig?.page_variants.map(validateAndTransformPageVariants)
+        : DEFAULT_PAGE_VARIANTS;
 
       const v3ColorsConfig = transformSnakeToCamel(v3RootConfig?.colors?.values);
 
@@ -172,7 +287,11 @@ export const GraphQLProvider = ({
 
       return {
         colorsConfig: v3ColorsConfig as ColorsConfigV3Response,
-        frontendConfig: v3FrontendConfig as FrontendConfigV3Response,
+        frontendConfig: {
+          ...(v3FrontendConfig as FrontendConfigV3Response),
+          // Need to replace the automatic widget configs with the object based ones
+          widgetConfigs: v3WidgetConfigs,
+        },
         orgPageConfig: {
           pageVariants: v3pageVariants,
           widgetConfigs: v3WidgetConfigs,

package/src/contexts/graphqlContext/mockV3Config.ts

@@ -3,8 +3,13 @@ import { ColorMappingV3, ColorNames, colorVar } from 'src/application/models/col
 import { CamelCasedPropertiesDeep } from 'src/application/models';
 import { ImageGalleryLayout } from '@envive-ai/react-toolkit-v3/ImageGallery';
 import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton';
-import { PromptCarouselRows, AnimationSpeed } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { AnimationSpeed, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { ChatHeaderVariant } from '@envive-ai/react-toolkit-v3/ChatHeader';
+import { SparkleIconColor } from '@envive-ai/react-toolkit-v3/WelcomeMessage';
+
+import { CustomerServiceType } from 'src/types/customerService';
 import { ConfigVersionEnum, SocialProofWidgetKind, WidgetTypeV3 } from '../typesV3';
 
 const mockImages = [
@@ -49,13 +54,14 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
     version: ConfigVersionEnum.V3,
     shortName: 'Envive AI',
     lookAndFeel: {
-      theme: 'standard',
+      theme: Theme.STANDARD,
       agentName: 'Envive AI',
-      chatHeaderLogoSrc: 'https://cdn.spiffy.ai/other/assets/envive-ai/Envive_Logo_Lt.svg',
+      chatHeaderLogoDarkSrc: 'https://cdn.spiffy.ai/other/assets/envive-ai/Envive_Logo_DK.svg',
+      chatHeaderLogoLightSrc: 'https://cdn.spiffy.ai/other/assets/envive-ai/Envive_Logo_Lt.svg',
       widgetLogoSrc: 'https://cdn.spiffy.ai/other/assets/envive-ai/Envive_Logo_DK.svg',
       hideWidgetLogo: false,
       elementRadius: 8,
-      imageAspectRatio: '3/4',
+      imageAspectRatio: '1/1',
       buttonColors: {
         lightButtonBackgroundColor: colorVar(ColorNames.BackgroundSecondary),
         lightButtonIconColor: colorVar(ColorNames.AccentPrimary),
@@ -105,22 +111,31 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       },
     },
     floatingButton: {
-      position: 'bottom-right',
-      backgroundColor: colorVar(ColorNames.BackgroundPrimary),
-      mode: 'light',
+      position: 'bottomRight',
+      backgroundColor: ColorNames.BackgroundPrimary,
+      mode: 'dark',
       showOption: 'always',
       style: 'attached',
       iconSVGSrc: '',
     },
     floatingChat: {
-      headerBackgroundColor: colorVar(ColorNames.BackgroundPrimary),
-      headerMode: 'dark',
-      welcomeMessageIconColor: colorVar(ColorNames.AccentPrimary),
-      showVerifiedBuyer: false,
-      userCanEditQueries: true,
+      headerBackgroundColor: undefined,
+      headerMode: ChatHeaderVariant.DARK,
+      welcomeMessageIconColor: SparkleIconColor.ACCENT_PRIMARY,
+      showVerifiedBuyer: true,
+      userQueryInputEnabled: true,
       showEnviveLogo: true,
       ignoreFirstModelResponse: false,
       neverShowSingleProductCards: false,
+      welcomeMessageTitle: 'Welcome to Envive AI',
+      welcomeMessageText:
+        'Your personal shopper trained on the collective knowledge of thousands of real experts!',
+      chatFooterTextFieldPlaceholderText: 'Ask me anything...',
+    },
+    customerServiceIntegration: {
+      provider: CustomerServiceType.unsupported,
+      enabled: false,
+      suppressMerchantButton: false,
     },
   },
   pageVariants: [],
@@ -205,5 +220,31 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       secondaryButtonVariant: PromptButtonVariant.LIGHT,
       images: mockImages,
     },
+    'typing-animation-test-light-widget': {
+      widgetConfigId: 'typing-animation-test-light-widget',
+      contentId: 'typing-animation-test-light-widget',
+      type: WidgetTypeV3.TypingAnimationV3,
+      widgetVariant: WidgetWrapperVariant.CARD_WITH_BORDER,
+      promptButtonType: PromptButtonVariant.LIGHT,
+      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
+      showTextField: true,
+    },
+    'typing-animation-test-dark-widget': {
+      widgetConfigId: 'typing-animation-test-dark-widget',
+      contentId: 'typing-animation-test-dark-widget',
+      type: WidgetTypeV3.TypingAnimationV3,
+      widgetVariant: WidgetWrapperVariant.CARD_WITH_BORDER,
+      promptButtonType: PromptButtonVariant.DARK,
+      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
+      showTextField: true,
+    },
+    'prompt-button-carousel-with-image-test-widget': {
+      widgetConfigId: 'prompt-button-carousel-with-image-test-widget',
+      contentId: 'prompt-button-carousel-with-image-test-widget',
+      type: WidgetTypeV3.PromptButtonCarouselWithImageV3,
+      promptButtonType: PromptButtonVariant.LIGHT,
+      image: mockImages[0],
+      hideTextField: false,
+    },
   },
 };

package/src/contexts/hardcopyContext/hardcopyContext.tsx

@@ -1,4 +1,3 @@
-import { UserEvent } from '@spiffy-ai/commerce-api-client';
 import { ReactNode, createContext, useCallback, useContext, useMemo, useState } from 'react';
 import Logger from 'src/application/logging/logger';
 
@@ -9,6 +8,7 @@ import { WidgetTextRequest } from 'src/application/models/api/widgetTextRequest'
 import { useAtomValue } from 'jotai';
 import { appDetailsAtom } from 'src/atoms/app';
 import { toCamelCase } from 'src/application/models/utils/snakeToCamelTransformer';
+import { UserEvent } from 'src/application/models';
 import { WidgetTypeV3 } from '../typesV3';
 import { useFeatureFlagService } from '../featureFlagServiceContext/featureFlagServiceContext';
 
@@ -69,18 +69,6 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
       ],
     },
   },
-  [WidgetTypeV3.TypingAnimationV3]: {
-    language: 'en',
-    values: {
-      chatPreviewTitle: 'Chat Preview Title',
-      typewriterTextPrefix: 'Want to know',
-      typewriterTexts: ['more about this product?', 'what others are saying?', 'how to use it?'],
-      suggestionButtons: ['Button 1', 'Button 2', 'Button 3'],
-      footerText: 'Ask me anything...',
-
-      chatPreviewDescription: 'Chat Preview Description',
-    },
-  },
   [WidgetTypeV3.SocialProofV3]: {
     language: 'en',
     values: {
@@ -99,6 +87,26 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
       textFieldPlaceholderText: 'Ask me anything...',
     },
   },
+  [WidgetTypeV3.TypingAnimationV3]: {
+    language: 'en',
+    values: {
+      titleLabel: 'Shopping Assistant',
+      headlineText: 'Need help finding',
+      animatedTextSequence: [
+        'the perfect gift for your loved ones?',
+        'something special for the holidays?',
+        'the ideal present for someone special?',
+      ],
+      hintText: 'Ask me anything',
+      promptButtonTexts: [
+        'What are your best sellers?',
+        'Show me summer dresses',
+        'Do you have free shipping?',
+        'What sizes are available?',
+      ],
+      textFieldAriaLabel: 'Ask me anything',
+    },
+  },
   [WidgetTypeV3.ChatPreviewComparisonV3]: {
     language: 'en',
     values: {
@@ -121,6 +129,14 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
       textFieldPlaceholderText: 'Ask me anything...',
     },
   },
+  [WidgetTypeV3.PromptButtonCarouselWithImageV3]: {
+    language: 'en',
+    values: {
+      titleLabel: 'Need some help?',
+      promptButtonsTexts: ['Help me find a product', "What's on your mind?", 'Talk to a human'],
+      textFieldPlaceholderText: 'Ask me anything...',
+    },
+  },
 };
 
 const HardcopyContext = createContext<HardcopyContextType | undefined>(undefined);

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

@@ -457,4 +457,238 @@ describe('NewOrgConfigProvider', () => {
       });
     });
   });
+  describe('Override Config', () => {
+    it('should use overrideConfig when provided instead of fetched config', async () => {
+      const fetchedData = {
+        colorsConfig: { accentPrimary: '#FF0000' },
+        frontendConfig: { merchantOverrideCss: 'fetched-css' },
+      };
+
+      const overrideData = {
+        colorsConfig: { accentPrimary: '#0000FF' },
+        frontendConfig: { merchantOverrideCss: 'override-css' },
+        orgPageConfig: { pageVariants: [] },
+      };
+
+      // Updated TestWrapper to accept overrideConfig
+      const TestWrapperWithOverride: React.FC<{
+        children: React.ReactNode;
+        orgShortName?: string;
+        mockHookData?: any;
+        overrideConfig?: any;
+      }> = ({ children, orgShortName, mockHookData = {}, overrideConfig }) => {
+        const mockUseUIConfig = useUIConfig as any;
+        mockUseUIConfig.mockReturnValue({
+          data: mockHookData.data || {},
+          loading: mockHookData.loading ?? false,
+          error: mockHookData.error || null,
+          refetch: vi.fn(),
+        });
+
+        return (
+          <Provider>
+            <EnviveConfigProvider
+              identifyingPrefix="test"
+              orgShortName={orgShortName}
+              baseUrl="https://test-api.example.com"
+              orgLevelApiKey="test-key"
+            >
+              <LocalStorageProvider>
+                <GraphQLProvider>
+                  <NewOrgConfigProvider overrideConfig={overrideConfig}>
+                    {children}
+                  </NewOrgConfigProvider>
+                </GraphQLProvider>
+              </LocalStorageProvider>
+            </EnviveConfigProvider>
+          </Provider>
+        );
+      };
+
+      const ConfigChecker: React.FC = () => {
+        const config = useNewOrgConfigContext();
+        return (
+          <div data-testid="config-checker">
+            <div data-testid="accent-color">{config.colorsConfig?.accentPrimary || 'none'}</div>
+            <div data-testid="css-value">
+              {config.frontendConfig?.merchantOverrideCss || 'none'}
+            </div>
+          </div>
+        );
+      };
+
+      render(
+        <TestWrapperWithOverride
+          orgShortName="test-org"
+          mockHookData={{ data: fetchedData, loading: false }}
+          overrideConfig={overrideData}
+        >
+          <ConfigChecker />
+        </TestWrapperWithOverride>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('accent-color')).toHaveTextContent('#0000FF');
+      });
+
+      // Should use override config, not fetched config
+      expect(screen.getByTestId('css-value')).toHaveTextContent('override-css');
+    });
+
+    it('should fall back to fetched config when overrideConfig is not provided', async () => {
+      const fetchedData = {
+        colorsConfig: { accentPrimary: '#FF0000' },
+        frontendConfig: { merchantOverrideCss: 'fetched-css' },
+      };
+
+      const ConfigChecker: React.FC = () => {
+        const config = useNewOrgConfigContext();
+        return (
+          <div data-testid="config-checker">
+            <div data-testid="accent-color">{config.colorsConfig?.accentPrimary || 'none'}</div>
+            <div data-testid="css-value">
+              {config.frontendConfig?.merchantOverrideCss || 'none'}
+            </div>
+          </div>
+        );
+      };
+
+      render(
+        <TestWrapper
+          orgShortName="test-org"
+          mockHookData={{ data: fetchedData, loading: false }}
+        >
+          <ConfigChecker />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('accent-color')).toHaveTextContent('#FF0000');
+      });
+
+      expect(screen.getByTestId('css-value')).toHaveTextContent('fetched-css');
+    });
+
+    it('should set newOrgConfigAtom with overrideConfig when provided', async () => {
+      const fetchedData = {
+        colorsConfig: { accentPrimary: '#FF0000' },
+      };
+
+      const overrideData = {
+        colorsConfig: { accentPrimary: '#00FF00' },
+        frontendConfig: { merchantOverrideCss: 'override-css' },
+      };
+
+      const TestWrapperWithOverride: React.FC<{
+        children: React.ReactNode;
+        orgShortName?: string;
+        mockHookData?: any;
+        overrideConfig?: any;
+      }> = ({ children, orgShortName, mockHookData = {}, overrideConfig }) => {
+        const mockUseUIConfig = useUIConfig as any;
+        mockUseUIConfig.mockReturnValue({
+          data: mockHookData.data || {},
+          loading: mockHookData.loading ?? false,
+          error: mockHookData.error || null,
+          refetch: vi.fn(),
+        });
+
+        return (
+          <Provider>
+            <EnviveConfigProvider
+              identifyingPrefix="test"
+              orgShortName={orgShortName}
+              baseUrl="https://test-api.example.com"
+              orgLevelApiKey="test-key"
+            >
+              <LocalStorageProvider>
+                <GraphQLProvider>
+                  <NewOrgConfigProvider overrideConfig={overrideConfig}>
+                    {children}
+                  </NewOrgConfigProvider>
+                </GraphQLProvider>
+              </LocalStorageProvider>
+            </EnviveConfigProvider>
+          </Provider>
+        );
+      };
+
+      render(
+        <TestWrapperWithOverride
+          orgShortName="test-org"
+          mockHookData={{ data: fetchedData, loading: false }}
+          overrideConfig={overrideData}
+        >
+          <AtomReaderComponent />
+        </TestWrapperWithOverride>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('atom-has-config')).toHaveTextContent('has-config');
+      });
+
+      // Atom should have the override config values
+      expect(screen.getByTestId('atom-has-colors')).toHaveTextContent('true');
+      expect(screen.getByTestId('atom-has-frontend')).toHaveTextContent('true');
+    });
+
+    it('should handle undefined overrideConfig gracefully', async () => {
+      const fetchedData = {
+        colorsConfig: { accentPrimary: '#FF0000' },
+        frontendConfig: { merchantOverrideCss: 'fetched-css' },
+      };
+
+      const TestWrapperWithOverride: React.FC<{
+        children: React.ReactNode;
+        orgShortName?: string;
+        mockHookData?: any;
+        overrideConfig?: any;
+      }> = ({ children, orgShortName, mockHookData = {}, overrideConfig }) => {
+        const mockUseUIConfig = useUIConfig as any;
+        mockUseUIConfig.mockReturnValue({
+          data: mockHookData.data || {},
+          loading: mockHookData.loading ?? false,
+          error: mockHookData.error || null,
+          refetch: vi.fn(),
+        });
+
+        return (
+          <Provider>
+            <EnviveConfigProvider
+              identifyingPrefix="test"
+              orgShortName={orgShortName}
+              baseUrl="https://test-api.example.com"
+              orgLevelApiKey="test-key"
+            >
+              <LocalStorageProvider>
+                <GraphQLProvider>
+                  <NewOrgConfigProvider overrideConfig={overrideConfig}>
+                    {children}
+                  </NewOrgConfigProvider>
+                </GraphQLProvider>
+              </LocalStorageProvider>
+            </EnviveConfigProvider>
+          </Provider>
+        );
+      };
+
+      render(
+        <TestWrapperWithOverride
+          orgShortName="test-org"
+          mockHookData={{ data: fetchedData, loading: false }}
+          overrideConfig={undefined}
+        >
+          <MockNewOrgConfigComponent />
+        </TestWrapperWithOverride>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+
+      // Should fall back to fetched data
+      expect(screen.getByTestId('has-colors-config')).toHaveTextContent('true');
+      expect(screen.getByTestId('has-frontend-config')).toHaveTextContent('true');
+    });
+  });
 });