@envive-ai/react-hooks 0.3.32 → 0.3.33

package/src/services/enviveConfigService/__tests__/fetchGraphQLConfig.test.ts

@@ -0,0 +1,425 @@
+import { fetchGraphQLConfig, DEFAULT_PAGE_VARIANTS } from '../fetchGraphQLConfig';
+import { mockV3ColorsConfig, mockV3FrontendConfig } from 'src/contexts/graphqlContext/mockV3Config';
+import { FloatingButtonLocation } from '@envive-ai/react-toolkit-v3/FloatingButton';
+
+const { MockLogger } = vi.hoisted(() => {
+  const MockLogger = vi.fn(function () {
+    return { logDebug: vi.fn(), logError: vi.fn() };
+  });
+  return { MockLogger };
+});
+
+vi.mock('src/application/logging/logger', () => ({ default: MockLogger }));
+
+const mockFetch = vi.fn();
+globalThis.fetch = mockFetch;
+
+function makeOkFetch(v3RootConfigValues: unknown, frontendValues?: unknown) {
+  mockFetch.mockResolvedValueOnce({
+    ok: true,
+    json: () =>
+      Promise.resolve({
+        data: {
+          me: {
+            getProductsConfigByVersion: {
+              v_three_config: { values: v3RootConfigValues },
+              frontend: frontendValues == null ? undefined : { values: frontendValues },
+            },
+          },
+        },
+      }),
+  });
+}
+
+// Minimal valid raw v3 config with all fields present
+const baseV3Config = {
+  colors: { values: { text_primary: '#000000' } },
+  ui_configs: {
+    floating_button: { position: 'bottom-right' },
+    look_and_feel: {
+      typography: {
+        font_size: { b1: '16px', h1: '24px' },
+        line_height: { lh_114: '1.14', lh_120: '1.20' },
+      },
+      chat_header_logo_src: 'logo.png',
+      chat_header_logo_dark_src: 'logo-dark.png',
+      chat_header_logo_light_src: 'logo-light.png',
+    },
+  },
+  mounting_configs: [],
+  widget_configs: [],
+  page_variants: [],
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('fetchGraphQLConfig', () => {
+  describe('error handling', () => {
+    it('returns empty config when the HTTP response is not ok', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: false, statusText: 'Unauthorized' });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect(result).toEqual({ colorsConfig: undefined, frontendConfig: undefined });
+    });
+
+    it('returns empty config when the response contains GraphQL errors', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ errors: [{ message: 'Not authorized' }], data: null }),
+      });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect(result).toEqual({ colorsConfig: undefined, frontendConfig: undefined });
+    });
+
+    it('returns empty config when fetch throws', async () => {
+      mockFetch.mockRejectedValueOnce(new Error('Network failure'));
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect(result).toEqual({ colorsConfig: undefined, frontendConfig: undefined });
+    });
+  });
+
+  describe('no colors fallback', () => {
+    it('returns mock config when v3RootConfig has no colors field', async () => {
+      makeOkFetch({ ui_configs: {} });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect(result).toEqual({
+        colorsConfig: mockV3ColorsConfig,
+        frontendConfig: mockV3FrontendConfig,
+        orgPageConfig: {
+          pageVariants: DEFAULT_PAGE_VARIANTS,
+          widgetConfigs: {},
+          mountingConfigs: {},
+        },
+      });
+    });
+
+    it('returns mock config when v3RootConfig is absent entirely', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            data: { me: { getProductsConfigByVersion: {} } },
+          }),
+      });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect(result).toEqual({
+        colorsConfig: mockV3ColorsConfig,
+        frontendConfig: mockV3FrontendConfig,
+        orgPageConfig: {
+          pageVariants: DEFAULT_PAGE_VARIANTS,
+          widgetConfigs: {},
+          mountingConfigs: {},
+        },
+      });
+    });
+  });
+
+  describe('position mapping', () => {
+    it.each([
+      ['bottom-left', FloatingButtonLocation.BOTTOM_LEFT],
+      ['middle-left', FloatingButtonLocation.MIDDLE_LEFT],
+      ['middle-right', FloatingButtonLocation.MIDDLE_RIGHT],
+      ['bottom-right', FloatingButtonLocation.BOTTOM_RIGHT],
+    ])('maps position "%s" to the correct enum value', async (position, expected) => {
+      makeOkFetch({
+        ...baseV3Config,
+        ui_configs: { ...baseV3Config.ui_configs, floating_button: { position } },
+      });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect((result.frontendConfig as any)?.uiConfigs?.floatingButton?.position).toBe(expected);
+    });
+
+    it('returns empty config for an unrecognised position string', async () => {
+      makeOkFetch({
+        ...baseV3Config,
+        ui_configs: { ...baseV3Config.ui_configs, floating_button: { position: 'top-center' } },
+      });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect(result).toEqual({ colorsConfig: undefined, frontendConfig: undefined });
+    });
+  });
+
+  describe('typography normalization', () => {
+    it('uses underscore-separated font size keys (b_1) when camelCase keys are absent', async () => {
+      makeOkFetch({
+        ...baseV3Config,
+        ui_configs: {
+          ...baseV3Config.ui_configs,
+          look_and_feel: {
+            ...baseV3Config.ui_configs.look_and_feel,
+            typography: {
+              ...baseV3Config.ui_configs.look_and_feel.typography,
+              font_size: { b_1: '14px', h_1: '20px' },
+            },
+          },
+        },
+      });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+      const fontSize = (result.frontendConfig as any)?.uiConfigs?.lookAndFeel?.typography?.fontSize;
+
+      expect(fontSize?.b1).toBe('14px');
+      expect(fontSize?.h1).toBe('20px');
+    });
+
+    it('normalises lh_N line height keys to numeric string keys', async () => {
+      makeOkFetch({
+        ...baseV3Config,
+        ui_configs: {
+          ...baseV3Config.ui_configs,
+          look_and_feel: {
+            ...baseV3Config.ui_configs.look_and_feel,
+            typography: {
+              ...baseV3Config.ui_configs.look_and_feel.typography,
+              line_height: { lh_114: '1.14', lh_128: '1.28' },
+            },
+          },
+        },
+      });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+      const lineHeight = (result.frontendConfig as any)?.uiConfigs?.lookAndFeel?.typography
+        ?.lineHeight;
+
+      expect(lineHeight?.['114']).toBe('1.14');
+      expect(lineHeight?.['128']).toBe('1.28');
+    });
+  });
+
+  describe('chat header logo fallback', () => {
+    it('falls back chatHeaderLogoDarkSrc to chatHeaderLogoSrc when not set', async () => {
+      makeOkFetch({
+        ...baseV3Config,
+        ui_configs: {
+          ...baseV3Config.ui_configs,
+          look_and_feel: {
+            ...baseV3Config.ui_configs.look_and_feel,
+            chat_header_logo_src: 'logo.png',
+            chat_header_logo_dark_src: null,
+            chat_header_logo_light_src: 'logo-light.png',
+          },
+        },
+      });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+      const lookAndFeel = (result.frontendConfig as any)?.uiConfigs?.lookAndFeel;
+
+      expect(lookAndFeel?.chatHeaderLogoDarkSrc).toBe('logo.png');
+    });
+
+    it('falls back chatHeaderLogoLightSrc to chatHeaderLogoSrc when not set', async () => {
+      makeOkFetch({
+        ...baseV3Config,
+        ui_configs: {
+          ...baseV3Config.ui_configs,
+          look_and_feel: {
+            ...baseV3Config.ui_configs.look_and_feel,
+            chat_header_logo_src: 'logo.png',
+            chat_header_logo_dark_src: 'logo-dark.png',
+            chat_header_logo_light_src: null,
+          },
+        },
+      });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+      const lookAndFeel = (result.frontendConfig as any)?.uiConfigs?.lookAndFeel;
+
+      expect(lookAndFeel?.chatHeaderLogoLightSrc).toBe('logo.png');
+    });
+
+    it('uses explicit dark/light src when both are set', async () => {
+      makeOkFetch(baseV3Config);
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+      const lookAndFeel = (result.frontendConfig as any)?.uiConfigs?.lookAndFeel;
+
+      expect(lookAndFeel?.chatHeaderLogoDarkSrc).toBe('logo-dark.png');
+      expect(lookAndFeel?.chatHeaderLogoLightSrc).toBe('logo-light.png');
+    });
+  });
+
+  describe('merchantOverrideCss', () => {
+    it('uses merchantOverrideCss from the v3 frontend config when present', async () => {
+      makeOkFetch({
+        ...baseV3Config,
+        ui_configs: {
+          ...baseV3Config.ui_configs,
+          merchant_override_css: 'body { color: red; }',
+        },
+      });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect((result.frontendConfig as any)?.merchantOverrideCss).toBe('body { color: red; }');
+    });
+
+    it('falls back to frontendValues.merchant_override_css when absent from v3 config', async () => {
+      makeOkFetch(baseV3Config, { merchant_override_css: 'body { color: blue; }' });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect((result.frontendConfig as any)?.merchantOverrideCss).toBe('body { color: blue; }');
+    });
+  });
+
+  describe('page variants', () => {
+    it('uses DEFAULT_PAGE_VARIANTS when page_variants is not an array', async () => {
+      makeOkFetch({ ...baseV3Config, page_variants: null });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect(result.orgPageConfig?.pageVariants).toEqual(DEFAULT_PAGE_VARIANTS);
+    });
+
+    it('transforms each page variant entry from the API response', async () => {
+      const rawVariant = {
+        variant_id: 'plp',
+        variant_type: 'plp',
+        plp_id_extractor: 'url-resolver-plp-id',
+        variant_checks: [{ check_type: 'UrlResolver' }],
+        widget_mounting: [],
+      };
+      makeOkFetch({ ...baseV3Config, page_variants: [rawVariant] });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect(result.orgPageConfig?.pageVariants).toHaveLength(1);
+      expect(result.orgPageConfig?.pageVariants[0].variantId).toBe('plp');
+      expect(result.orgPageConfig?.pageVariants[0].variantTests?.[0].testType).toBe('UrlResolver');
+    });
+  });
+
+  describe('widget configs', () => {
+    it('keys widget configs by widgetConfigId', async () => {
+      const rawWidgets = [
+        { widget_config_id: 'widget-1', widget_type: 'floating_button' },
+        { widget_config_id: 'widget-2', widget_type: 'search_bar' },
+      ];
+      makeOkFetch({ ...baseV3Config, widget_configs: rawWidgets });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect(Object.keys(result.orgPageConfig?.widgetConfigs ?? {})).toEqual([
+        'widget-1',
+        'widget-2',
+      ]);
+      expect((result.orgPageConfig?.widgetConfigs as any)?.['widget-1']?.widgetConfigId).toBe(
+        'widget-1',
+      );
+    });
+
+    it('also exposes widget configs on frontendConfig', async () => {
+      const rawWidgets = [{ widget_config_id: 'widget-1', widget_type: 'floating_button' }];
+      makeOkFetch({ ...baseV3Config, widget_configs: rawWidgets });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect((result.frontendConfig as any)?.widgetConfigs?.['widget-1']).toBeDefined();
+    });
+  });
+
+  describe('mounting configs', () => {
+    it('keys mounting configs by their key field', async () => {
+      const rawMountingConfigs = [
+        {
+          key: 'plp-mount',
+          config: {
+            mounting_config_id: 'mc-1',
+            container_id: 'container-1',
+            test_id: 'test-1',
+            insertion_point: { selector: '.grid', insertion_type: 'after' },
+          },
+        },
+      ];
+      makeOkFetch({ ...baseV3Config, mounting_configs: rawMountingConfigs });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect(result.orgPageConfig?.mountingConfigs?.['plp-mount']).toBeDefined();
+      expect(result.orgPageConfig?.mountingConfigs?.['plp-mount']?.mountingConfigId).toBe('mc-1');
+    });
+  });
+
+  describe('colors config', () => {
+    it('camelCases the colors values from the API response', async () => {
+      makeOkFetch({
+        ...baseV3Config,
+        colors: { values: { text_primary: '#111', background_primary: '#fff' } },
+      });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect((result.colorsConfig as any)?.textPrimary).toBe('#111');
+      expect((result.colorsConfig as any)?.backgroundPrimary).toBe('#fff');
+    });
+  });
+
+  describe('v3FrontendConfigCleanup edge cases', () => {
+    it('returns config as-is when uiConfigs is absent', async () => {
+      makeOkFetch({ ...baseV3Config, ui_configs: undefined });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect(result.frontendConfig).toBeDefined();
+      expect(result.colorsConfig).toBeDefined();
+    });
+
+    it('returns config as-is when floatingButton is absent', async () => {
+      makeOkFetch({
+        ...baseV3Config,
+        ui_configs: {
+          look_and_feel: baseV3Config.ui_configs.look_and_feel,
+        },
+      });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect(result.frontendConfig).toBeDefined();
+    });
+
+    it('returns config as-is when lookAndFeel is absent', async () => {
+      makeOkFetch({
+        ...baseV3Config,
+        ui_configs: {
+          floating_button: baseV3Config.ui_configs.floating_button,
+        },
+      });
+
+      const result = await fetchGraphQLConfig('https://api.example.com', 'key');
+
+      expect(result.frontendConfig).toBeDefined();
+    });
+  });
+
+  describe('fetch call', () => {
+    it('sends a POST to the correct GraphQL endpoint with the API key', async () => {
+      makeOkFetch(null);
+
+      await fetchGraphQLConfig('https://api.example.com', 'test-key');
+
+      expect(mockFetch).toHaveBeenCalledWith('https://api.example.com/v1/graphql', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: 'Bearer test-key',
+        },
+        body: expect.any(String),
+      });
+    });
+  });
+});

package/src/services/enviveConfigService/enviveConfigService.ts

@@ -1,5 +1,7 @@
 import { OrgConfigFeatureGate } from 'src/application/models';
 import { FeatureGates } from 'src/application/models/featureGates';
+import { GraphQlConfigValues } from 'src/contexts/graphqlContext';
+import { fetchGraphQLConfig } from './fetchGraphQLConfig';
 
 type EnviveConfigServiceProps = {
   baseUrl: string;
@@ -22,12 +24,19 @@ export type EnviveServiceConfig = {
     };
   };
   gates: OrgConfigFeatureGate[];
+  orgConfig?: GraphQlConfigValues;
 };
 
-export class EnviveConfigService {
-  private readonly baseUrl: string;
+export interface IEnviveConfigService {
+  readonly baseUrl: string;
+  readonly apiKey: string;
+  getEnviveConfig(): Promise<EnviveServiceConfig>;
+}
+
+export class EnviveConfigService implements IEnviveConfigService {
+  public readonly baseUrl: string;
 
-  private readonly apiKey: string;
+  public readonly apiKey: string;
 
   private readonly userId: string;
 
@@ -58,15 +67,34 @@ export class EnviveConfigService {
         .map(featureGate => featureGate.toString())
         .join(','),
     });
-    const response = await fetch(`${this.baseUrl}/v1/org/config?${queryParams.toString()}`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${this.apiKey}`,
-      },
-    });
-    const data = (await response.json()) as EnviveServiceConfig;
-    this.response = data;
-    return data;
+    const [orgConfigResponse, orgConfig] = await Promise.all([
+      fetch(`${this.baseUrl}/v1/org/config?${queryParams.toString()}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${this.apiKey}`,
+        },
+      }).then(r => r.json() as Promise<EnviveServiceConfig>),
+      fetchGraphQLConfig(this.baseUrl, this.apiKey),
+    ]);
+    this.response = { ...orgConfigResponse, orgConfig };
+    return this.response;
+  }
+}
+
+/**
+ * Returns static mock data from its constructor arguments. Passes empty baseUrl/apiKey
+ * so any code checking isReady does not fire real network requests. The orgConfig field
+ * covers colors, frontendConfig, and page/widget/mounting configs without any network calls.
+ */
+export class MockEnviveConfigService implements IEnviveConfigService {
+  public readonly baseUrl: string = '';
+
+  public readonly apiKey: string = '';
+
+  constructor(private readonly mockConfig: EnviveServiceConfig) {}
+
+  async getEnviveConfig(): Promise<EnviveServiceConfig> {
+    return this.mockConfig;
   }
 }