@envive-ai/react-hooks 0.3.32 → 0.3.33

package/src/services/enviveConfigService/fetchGraphQLConfig.ts

@@ -0,0 +1,225 @@
+import Logger from 'src/application/logging/logger';
+import {
+  CamelCasedPropertiesDeep,
+  transformSnakeToCamel,
+  validateAndTransformMountingConfig,
+  validateAndTransformPageVariants,
+} from 'src/application/models';
+import { FrontendConfigV3 } from 'src/application/models/frontendConfigV3';
+import { ColorMappingV3 } from 'src/application/models/colorsConfigV3';
+import { FloatingButtonLocation } from '@envive-ai/react-toolkit-v3/FloatingButton';
+import { getColorsAndFrontendQuery } from 'src/application/models/graphql/queries/getColorsAndFrontendQuery';
+import { mockV3ColorsConfig, mockV3FrontendConfig } from 'src/contexts/graphqlContext/mockV3Config';
+import { WidgetConfigV3 } from 'src/contexts/typesV3';
+import { PageVariantConfig, PageVariantTestType, WidgetMountingConfig } from 'src/contexts/types';
+import { GraphQlConfigValues } from 'src/contexts/graphqlContext';
+
+const logger = new Logger('fetchGraphQLConfig');
+
+type FrontendConfigV3Response = CamelCasedPropertiesDeep<FrontendConfigV3>;
+type ColorsConfigV3Response = CamelCasedPropertiesDeep<ColorMappingV3>;
+
+export 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): FloatingButtonLocation => {
+  if (position === 'bottom-left') return FloatingButtonLocation.BOTTOM_LEFT;
+  if (position === 'middle-left') return FloatingButtonLocation.MIDDLE_LEFT;
+  if (position === 'middle-right') return FloatingButtonLocation.MIDDLE_RIGHT;
+  if (position === 'bottom-right') return FloatingButtonLocation.BOTTOM_RIGHT;
+  throw new Error(`Invalid position: ${position}`);
+};
+
+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, letterSpacing } = 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: {
+            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,
+          },
+          letterSpacing: {
+            ...lookAndFeel.typography.letterSpacing,
+            b1: letterSpacing?.b1 || letterSpacing?.b_1,
+            b2: letterSpacing?.b2 || letterSpacing?.b_2,
+            b3: letterSpacing?.b3 || letterSpacing?.b_3,
+            b4: letterSpacing?.b4 || letterSpacing?.b_4,
+            b5: letterSpacing?.b5 || letterSpacing?.b_5,
+            h1: letterSpacing?.h1 || letterSpacing?.h_1,
+            h2: letterSpacing?.h2 || letterSpacing?.h_2,
+            h3: letterSpacing?.h3 || letterSpacing?.h_3,
+            l1: letterSpacing?.l1 || letterSpacing?.l_1,
+            l2: letterSpacing?.l2 || letterSpacing?.l_2,
+            t1: letterSpacing?.t1 || letterSpacing?.t_1,
+            t2: letterSpacing?.t2 || letterSpacing?.t_2,
+            t3: letterSpacing?.t3 || letterSpacing?.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],
+            b1: lineHeight?.b1 || lineHeight?.b_1,
+            b2: lineHeight?.b2 || lineHeight?.b_2,
+            b3: lineHeight?.b3 || lineHeight?.b_3,
+            b4: lineHeight?.b4 || lineHeight?.b_4,
+            b5: lineHeight?.b5 || lineHeight?.b_5,
+            h1: lineHeight?.h1 || lineHeight?.h_1,
+            h2: lineHeight?.h2 || lineHeight?.h_2,
+            h3: lineHeight?.h3 || lineHeight?.h_3,
+            l1: lineHeight?.l1 || lineHeight?.l_1,
+            l2: lineHeight?.l2 || lineHeight?.l_2,
+            t1: lineHeight?.t1 || lineHeight?.t_1,
+            t2: lineHeight?.t2 || lineHeight?.t_2,
+            t3: lineHeight?.t3 || lineHeight?.t_3,
+          },
+        },
+      },
+    },
+  };
+};
+
+export const fetchGraphQLConfig = async (
+  baseUrl: string,
+  apiKey: string,
+): Promise<GraphQlConfigValues> => {
+  try {
+    const query = getColorsAndFrontendQuery();
+    const response = await fetch(`${baseUrl}/v1/graphql`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({ query }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`GraphQL request failed: ${response.statusText}`);
+    }
+
+    const result = await response.json();
+    if (result.errors) {
+      throw new Error(`GraphQL errors: ${JSON.stringify(result.errors)}`);
+    }
+
+    const v3RootConfig = result.data.me.getProductsConfigByVersion?.v_three_config?.values;
+    const frontendValues = result.data.me.getProductsConfigByVersion?.frontend?.values;
+
+    if (!v3RootConfig?.colors) {
+      logger.logDebug('fetchGraphQLConfig | No colors found, returning mock config');
+      return {
+        colorsConfig: mockV3ColorsConfig,
+        frontendConfig: mockV3FrontendConfig as FrontendConfigV3Response,
+        orgPageConfig: {
+          pageVariants: DEFAULT_PAGE_VARIANTS,
+          widgetConfigs: {},
+          mountingConfigs: {},
+        },
+      };
+    }
+
+    const v3FrontendConfig = v3FrontendConfigCleanup(
+      transformSnakeToCamel(v3RootConfig) as FrontendConfigV3Response,
+    );
+
+    const merchantOverrideCss =
+      v3FrontendConfig.uiConfigs?.merchantOverrideCss || frontendValues?.merchant_override_css;
+
+    const v3MountingConfigsArray = (transformSnakeToCamel(v3RootConfig?.mounting_configs) ??
+      []) as unknown as { key: string; config: WidgetMountingConfig }[];
+    const v3MountingConfigs = v3MountingConfigsArray.reduce(
+      (acc, { key, config }) => {
+        acc[key] = validateAndTransformMountingConfig(config, key);
+        return acc;
+      },
+      {} as Record<string, WidgetMountingConfig>,
+    );
+
+    const v3widgetConfigsArray = (transformSnakeToCamel(v3RootConfig?.widget_configs) ??
+      []) as unknown as WidgetConfigV3[];
+    const v3WidgetConfigs = Object.fromEntries(
+      v3widgetConfigsArray?.map(({ widgetConfigId, ...rest }: WidgetConfigV3) => [
+        widgetConfigId,
+        { widgetConfigId, ...rest } as WidgetConfigV3,
+      ]),
+    ) as Record<string, WidgetConfigV3>;
+
+    const v3pageVariants: PageVariantConfig[] = Array.isArray(v3RootConfig?.page_variants)
+      ? v3RootConfig.page_variants.map(validateAndTransformPageVariants)
+      : DEFAULT_PAGE_VARIANTS;
+
+    const v3ColorsConfig = transformSnakeToCamel(v3RootConfig?.colors?.values);
+
+    logger.logDebug('fetchGraphQLConfig | Returning v3 config');
+
+    return {
+      colorsConfig: v3ColorsConfig as ColorsConfigV3Response,
+      frontendConfig: {
+        ...(v3FrontendConfig as FrontendConfigV3Response),
+        merchantOverrideCss,
+        widgetConfigs: v3WidgetConfigs,
+      },
+      orgPageConfig: {
+        pageVariants: v3pageVariants,
+        widgetConfigs: v3WidgetConfigs,
+        mountingConfigs: v3MountingConfigs,
+      },
+    };
+  } catch (err) {
+    logger.logError('fetchGraphQLConfig | Error fetching GraphQL config', err);
+    return { colorsConfig: undefined, frontendConfig: undefined };
+  }
+};

package/src/services/hardcopyService/__tests__/hardcopyService.test.ts

@@ -0,0 +1,367 @@
+import { HardcopyService, MockHardcopyService, MOCK_HARDCOPY_RESPONSE } from '../hardcopyService';
+import { WidgetTypeV3 } from 'src/contexts/typesV3';
+import type { WidgetText } from 'src/application/models/api/widgetText';
+import type { AppDetails } from 'src/atoms/app';
+import { EnviveMetricsEventName } from 'src/services/amplitudeService';
+
+const { MockLogger, mockGetHardcopy, mockGetQueryParam } = vi.hoisted(() => {
+  const MockLogger = vi.fn(function () {
+    return { logDebug: vi.fn(), logError: vi.fn() };
+  });
+  const mockGetHardcopy = vi.fn();
+  const mockGetQueryParam = vi.fn().mockReturnValue(null);
+  return { MockLogger, mockGetHardcopy, mockGetQueryParam };
+});
+
+vi.mock('src/application/logging/logger', () => ({ default: MockLogger }));
+vi.mock('src/application/commerce-api', () => ({
+  default: { getHardcopy: mockGetHardcopy },
+}));
+vi.mock('src/application/utils', () => ({ getQueryParam: mockGetQueryParam }));
+vi.mock('uuid', () => ({ v4: () => 'test-uuid' }));
+
+const mockAppDetails: AppDetails = {
+  orgId: 'org-1',
+  orgShortName: 'test-org',
+  chatId: 'chat-1',
+  userId: 'user-1',
+  source: 'app_block' as any,
+  env: 'dev' as any,
+  variantInfo: {} as any,
+};
+
+const makeService = (trackEvent = vi.fn()) =>
+  new HardcopyService({
+    getAppDetails: () => mockAppDetails,
+    getFeatureFlags: () => ({ flag_a: true }),
+    trackEvent,
+  });
+
+const makeWidgetTextResponse = (overrides: Partial<WidgetText> = {}): WidgetText => ({
+  responseId: 'resp-1',
+  requestId: 'req-1',
+  language: 'en',
+  values: {
+    title_label: [{ id: 'id1', value: 'Hello World' }],
+    prompt_button_texts: [
+      { id: 'id2', value: 'Prompt 1' },
+      { id: 'id3', value: 'Prompt 2' },
+    ],
+  },
+  ...overrides,
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockGetQueryParam.mockReturnValue(null);
+  Object.defineProperty(navigator, 'languages', {
+    value: ['en-US'],
+    configurable: true,
+  });
+});
+
+describe('HardcopyService', () => {
+  describe('successful API response', () => {
+    it('returns a converted HardcopyResponse with camelCased keys', async () => {
+      mockGetHardcopy.mockResolvedValueOnce(makeWidgetTextResponse());
+
+      const result = await makeService().getHardcopy({
+        widgetType: WidgetTypeV3.PromptCarouselV3,
+        userEvent: {} as any,
+      });
+
+      expect(result).toEqual({
+        responseId: 'resp-1',
+        language: 'en',
+        rawValues: {
+          title_label: [{ id: 'id1', value: 'Hello World' }],
+          prompt_button_texts: [
+            { id: 'id2', value: 'Prompt 1' },
+            { id: 'id3', value: 'Prompt 2' },
+          ],
+        },
+        values: {
+          titleLabel: 'Hello World',
+          promptButtonTexts: ['Prompt 1', 'Prompt 2'],
+        },
+      });
+    });
+
+    it('unwraps a single-element array to a scalar string', async () => {
+      mockGetHardcopy.mockResolvedValueOnce(
+        makeWidgetTextResponse({
+          values: { single_key: [{ id: 'x', value: 'only one' }] },
+        }),
+      );
+
+      const result = await makeService().getHardcopy({
+        widgetType: WidgetTypeV3.PromptCarouselV3,
+        userEvent: {} as any,
+      });
+
+      expect(result.values.singleKey).toBe('only one');
+    });
+
+    it('keeps a multi-element array as an array of strings', async () => {
+      mockGetHardcopy.mockResolvedValueOnce(
+        makeWidgetTextResponse({
+          values: {
+            items: [
+              { id: 'a', value: 'first' },
+              { id: 'b', value: 'second' },
+            ],
+          },
+        }),
+      );
+
+      const result = await makeService().getHardcopy({
+        widgetType: WidgetTypeV3.PromptCarouselV3,
+        userEvent: {} as any,
+      });
+
+      expect(result.values.items).toEqual(['first', 'second']);
+    });
+  });
+
+  describe('request construction', () => {
+    it('calls CommerceApiClient.getHardcopy with the expected request shape', async () => {
+      mockGetHardcopy.mockResolvedValueOnce(makeWidgetTextResponse());
+
+      await makeService().getHardcopy({
+        widgetType: WidgetTypeV3.ChatPreviewV3,
+        userEvent: {} as any,
+      });
+
+      expect(mockGetHardcopy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          requestId: 'test-uuid',
+          widgetType: WidgetTypeV3.ChatPreviewV3,
+          context: mockAppDetails,
+          featureFlags: { flag_a: true },
+          language: 'en-US',
+          url: globalThis.location.href,
+          overrideConfigVersion: undefined,
+        }),
+      );
+    });
+
+    it('reads overrideConfigVersion from the spiffy_config_version query param', async () => {
+      mockGetQueryParam.mockImplementation((key: string) =>
+        key === 'spiffy_config_version' ? 'v2' : null,
+      );
+      mockGetHardcopy.mockResolvedValueOnce(makeWidgetTextResponse());
+
+      await makeService().getHardcopy({
+        widgetType: WidgetTypeV3.PromptCarouselV3,
+        userEvent: {} as any,
+      });
+
+      expect(mockGetHardcopy).toHaveBeenCalledWith(
+        expect.objectContaining({ overrideConfigVersion: 'v2' }),
+      );
+    });
+
+    it('falls back to envive_config_version when spiffy_config_version is absent', async () => {
+      mockGetQueryParam.mockImplementation((key: string) =>
+        key === 'envive_config_version' ? 'v3' : null,
+      );
+      mockGetHardcopy.mockResolvedValueOnce(makeWidgetTextResponse());
+
+      await makeService().getHardcopy({
+        widgetType: WidgetTypeV3.PromptCarouselV3,
+        userEvent: {} as any,
+      });
+
+      expect(mockGetHardcopy).toHaveBeenCalledWith(
+        expect.objectContaining({ overrideConfigVersion: 'v3' }),
+      );
+    });
+
+    it('uses the first navigator language as the request language', async () => {
+      Object.defineProperty(navigator, 'languages', {
+        value: ['fr-FR', 'en-US'],
+        configurable: true,
+      });
+      mockGetHardcopy.mockResolvedValueOnce(makeWidgetTextResponse());
+
+      await makeService().getHardcopy({
+        widgetType: WidgetTypeV3.PromptCarouselV3,
+        userEvent: {} as any,
+      });
+
+      expect(mockGetHardcopy).toHaveBeenCalledWith(expect.objectContaining({ language: 'fr-FR' }));
+    });
+  });
+
+  describe('analytics events', () => {
+    it('fires WidgetTextRequest before calling the API', async () => {
+      const trackEvent = vi.fn();
+      mockGetHardcopy.mockResolvedValueOnce(makeWidgetTextResponse());
+
+      await makeService(trackEvent).getHardcopy({
+        widgetType: WidgetTypeV3.ChatPreviewV3,
+        userEvent: {} as any,
+      });
+
+      expect(trackEvent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          eventName: EnviveMetricsEventName.WidgetTextRequest,
+          eventProps: expect.objectContaining({
+            widget_type: WidgetTypeV3.ChatPreviewV3,
+            request_id: 'test-uuid',
+          }),
+        }),
+      );
+    });
+
+    it('fires WidgetTextResponse after a successful API call', async () => {
+      const trackEvent = vi.fn();
+      const response = makeWidgetTextResponse();
+      mockGetHardcopy.mockResolvedValueOnce(response);
+
+      await makeService(trackEvent).getHardcopy({
+        widgetType: WidgetTypeV3.ChatPreviewV3,
+        userEvent: {} as any,
+      });
+
+      expect(trackEvent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          eventName: EnviveMetricsEventName.WidgetTextResponse,
+          eventProps: expect.objectContaining({
+            widget_type: WidgetTypeV3.ChatPreviewV3,
+            response_id: 'resp-1',
+          }),
+        }),
+      );
+    });
+
+    it('does not crash when trackEvent is not provided', async () => {
+      const service = new HardcopyService({
+        getAppDetails: () => mockAppDetails,
+        getFeatureFlags: () => ({}),
+      });
+      mockGetHardcopy.mockResolvedValueOnce(makeWidgetTextResponse());
+
+      await expect(
+        service.getHardcopy({ widgetType: WidgetTypeV3.ChatPreviewV3, userEvent: {} as any }),
+      ).resolves.toBeDefined();
+    });
+  });
+
+  describe('fallback behaviour', () => {
+    it('returns the MOCK_HARDCOPY_RESPONSE entry when the API throws', async () => {
+      mockGetHardcopy.mockRejectedValueOnce(new Error('Network error'));
+
+      const result = await makeService().getHardcopy({
+        widgetType: WidgetTypeV3.PromptCarouselV3,
+        userEvent: {} as any,
+      });
+
+      expect(result).toBe(MOCK_HARDCOPY_RESPONSE[WidgetTypeV3.PromptCarouselV3]);
+    });
+
+    it('returns the MOCK_HARDCOPY_RESPONSE entry when the API returns falsy', async () => {
+      mockGetHardcopy.mockResolvedValueOnce(null);
+
+      const result = await makeService().getHardcopy({
+        widgetType: WidgetTypeV3.SocialProofV3,
+        userEvent: {} as any,
+      });
+
+      expect(result).toBe(MOCK_HARDCOPY_RESPONSE[WidgetTypeV3.SocialProofV3]);
+    });
+
+    it('does not fire WidgetTextResponse when falling back to mock', async () => {
+      const trackEvent = vi.fn();
+      mockGetHardcopy.mockRejectedValueOnce(new Error('fail'));
+
+      await makeService(trackEvent).getHardcopy({
+        widgetType: WidgetTypeV3.PromptCarouselV3,
+        userEvent: {} as any,
+      });
+
+      const responseEvents = trackEvent.mock.calls.filter(
+        ([p]: [{ eventName: string }]) => p.eventName === EnviveMetricsEventName.WidgetTextResponse,
+      );
+      expect(responseEvents).toHaveLength(0);
+    });
+
+    it('throws when the API fails and there is no mock entry for the widget type', async () => {
+      mockGetHardcopy.mockRejectedValueOnce(new Error('fail'));
+
+      await expect(
+        makeService().getHardcopy({
+          widgetType: 'UnknownWidget' as WidgetTypeV3,
+          userEvent: {} as any,
+        }),
+      ).rejects.toThrow('No hardcopy response found for widget type: UnknownWidget');
+    });
+  });
+});
+
+describe('MockHardcopyService', () => {
+  it('returns the override for the requested widget type', async () => {
+    const override = { responseId: 'override', language: 'fr', values: { label: 'Bonjour' } };
+    const service = new MockHardcopyService({
+      [WidgetTypeV3.ChatPreviewV3]: override,
+    });
+
+    const result = await service.getHardcopy({
+      widgetType: WidgetTypeV3.ChatPreviewV3,
+      userEvent: {} as any,
+    });
+
+    expect(result).toBe(override);
+  });
+
+  it('falls back to MOCK_HARDCOPY_RESPONSE when no override is set', async () => {
+    const service = new MockHardcopyService();
+
+    const result = await service.getHardcopy({
+      widgetType: WidgetTypeV3.SocialProofV3,
+      userEvent: {} as any,
+    });
+
+    expect(result).toBe(MOCK_HARDCOPY_RESPONSE[WidgetTypeV3.SocialProofV3]);
+  });
+
+  it('uses the ImagePromptCardV3 override as a fallback for ProductCardV3', async () => {
+    const fallback = {
+      responseId: 'fallback',
+      language: 'en',
+      values: { headline: 'fallback headline' },
+    };
+    const service = new MockHardcopyService({
+      [WidgetTypeV3.ImagePromptCardV3]: fallback,
+    });
+
+    const result = await service.getHardcopy({
+      widgetType: WidgetTypeV3.ProductCardV3,
+      userEvent: {} as any,
+    });
+
+    expect(result).toBe(fallback);
+  });
+
+  it('throws when neither override nor MOCK_HARDCOPY_RESPONSE has an entry', async () => {
+    const service = new MockHardcopyService();
+
+    await expect(
+      service.getHardcopy({
+        widgetType: 'UnknownWidget' as WidgetTypeV3,
+        userEvent: {} as any,
+      }),
+    ).rejects.toThrow('No hardcopy response found for widget type: UnknownWidget');
+  });
+
+  it('uses no overrides by default', async () => {
+    const service = new MockHardcopyService();
+
+    const result = await service.getHardcopy({
+      widgetType: WidgetTypeV3.TypingAnimationV3,
+      userEvent: {} as any,
+    });
+
+    expect(result).toBe(MOCK_HARDCOPY_RESPONSE[WidgetTypeV3.TypingAnimationV3]);
+  });
+});