@envive-ai/react-hooks 0.3.3 → 0.3.4

package/src/contexts/typesV3.ts

@@ -0,0 +1,316 @@
+import { AnimationSpeed, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { ImageGalleryImage, ImageGalleryLayout } from '@envive-ai/react-toolkit-v3/ImageGallery';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton';
+import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
+import { DynamicLayout } from '@envive-ai/react-toolkit-v3/SocialProof';
+import {
+  ColorNames,
+  CustomerServiceIntegration,
+  MerchantVariantSettings,
+  SearchConfig,
+} from './types';
+
+export enum LetterSpacingCSSVar {
+  Tight0 = 'envive-typography-letter-spacing-tight-0',
+  Wide1 = 'envive-typography-letter-spacing-wide-1',
+}
+
+export enum LineHeightCSSVar {
+  LineHeight124 = 'envive-typography-line-height-124',
+  LineHeight120 = 'envive-typography-line-height-120',
+  LineHeight118 = 'envive-typography-line-height-118',
+  LineHeight116 = 'envive-typography-line-height-116',
+  LineHeight114 = 'envive-typography-line-height-114',
+  LineHeight148 = 'envive-typography-line-height-148',
+  LineHeight140 = 'envive-typography-line-height-140',
+  LineHeight128 = 'envive-typography-line-height-128',
+  LineHeight130 = 'envive-typography-line-height-130',
+  LineHeight133 = 'envive-typography-line-height-133',
+}
+
+export enum FontWeightCSSVar {
+  RG = 'envive-typography-font-weight-rg',
+  MD = 'envive-typography-font-weight-md',
+  SB = 'envive-typography-font-weight-sb',
+}
+
+export enum FontSizeCSSVar {
+  T1 = 'envive-typography-font-size-t1',
+  T2 = 'envive-typography-font-size-t2',
+  T3 = 'envive-typography-font-size-t3',
+  H1 = 'envive-typography-font-size-h1',
+  H2 = 'envive-typography-font-size-h2',
+  H3 = 'envive-typography-font-size-h3',
+  B1 = 'envive-typography-font-size-b1',
+  B2 = 'envive-typography-font-size-b2',
+  B3 = 'envive-typography-font-size-b3',
+  B4 = 'envive-typography-font-size-b4',
+  B5 = 'envive-typography-font-size-b5',
+  L1 = 'envive-typography-font-size-l1',
+  L2 = 'envive-typography-font-size-l2',
+}
+
+export enum FontFamilyCSSVar {
+  Title = 'envive-typography-font-family-title',
+  Header = 'envive-typography-font-family-header',
+  Body = 'envive-typography-font-family-body',
+}
+
+export enum ThemeCSSVar {
+  GlobalCustom = 'envive-global-custom-theme',
+}
+
+export enum AspectRatioCSSVar {
+  GlobalCustom = 'envive-global-custom-aspect-ratio',
+}
+
+export enum BorderRadiusCSSVar {
+  GlobalCustom = 'envive-global-custom-border-radius',
+}
+
+export const enum ColorsNamesVars {
+  TextPrimary = `envive-colors-${ColorNames.TextPrimary}`,
+  TextSecondary = `envive-colors-${ColorNames.TextSecondary}`,
+  TextAccent = `envive-colors-${ColorNames.TextAccent}`,
+  TextLink = `envive-colors-${ColorNames.TextLink}`,
+  TextLight = `envive-colors-${ColorNames.TextLight}`,
+  BackgroundPrimary = `envive-colors-${ColorNames.BackgroundPrimary}`,
+  BackgroundSecondary = `envive-colors-${ColorNames.BackgroundSecondary}`,
+  BackgroundTertiary = `envive-colors-${ColorNames.BackgroundTertiary}`,
+  BackgroundDark = `envive-colors-${ColorNames.BackgroundDark}`,
+  BackgroundLight = `envive-colors-${ColorNames.BackgroundLight}`,
+  BorderLight = `envive-colors-${ColorNames.BorderLight}`,
+  BorderMedium = `envive-colors-${ColorNames.BorderMedium}`,
+  BorderDark = `envive-colors-${ColorNames.BorderDark}`,
+  AccentPrimary = `envive-colors-${ColorNames.AccentPrimary}`,
+  AccentSecondary = `envive-colors-${ColorNames.AccentSecondary}`,
+}
+
+export const enum ButtonColorsVars {
+  LightButtonBackgroundColor = 'envive-colors-button-light-background-color',
+  LightButtonIconColor = 'envive-colors-button-light-icon-color',
+  DarkButtonBackgroundColor = 'envive-colors-button-dark-background-color',
+  DarkButtonIconColor = 'envive-colors-button-dark-icon-color',
+}
+
+type Theme = 'standard' | 'modern' | 'minimal';
+
+type ImageAspectRatio = '1/1' | '3/4';
+
+type ButtonColors = {
+  lightButtonBackgroundColor: string;
+  lightButtonIconColor: string;
+  darkButtonBackgroundColor: string;
+  darkButtonIconColor: string;
+};
+
+// TODO: Set default values for the typography configs
+type Typography = {
+  titleFontFamily: string;
+  headerFontFamily: string;
+  bodyFontFamily: string;
+
+  fontSize?: {
+    t1: string;
+    t2: string;
+    t3: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    b1: string;
+    b2: string;
+    b3: string;
+    b4: string;
+    b5: string;
+    l1: string;
+    l2: string;
+  };
+
+  fontWeight?: {
+    rg: string;
+    md: string;
+    sb: string;
+  };
+
+  letterSpacing?: {
+    '0': string;
+    'wide-1': string;
+  };
+
+  lineHeight?: {
+    '124': number;
+    '120': number;
+    '118': number;
+    '116': number;
+    '114': number;
+    '148': number;
+    '140': number;
+    '128': number;
+    '130': number;
+    '133': number;
+  };
+};
+
+type LookAndFeelConfig = {
+  theme: Theme;
+  agentName: string;
+  chatHeaderLogoSrc: string;
+  widgetLogoSrc: string;
+  hideWidgetLogo: boolean;
+  elementRadius: number;
+  imageAspectRatio: ImageAspectRatio;
+  buttonColors: ButtonColors;
+  typography: Typography;
+};
+
+export enum ConfigVersionEnum {
+  V3 = 'v3',
+  Deprecated = 'deprecated',
+}
+
+type ConfigVersion = ConfigVersionEnum.V3 | ConfigVersionEnum.Deprecated | undefined;
+
+type Mode = 'dark' | 'light';
+
+type Position = 'bottom-left' | 'middle-left' | 'middle-right' | 'bottom-right';
+
+type ShowOptions =
+  | 'always'
+  | 'after-interaction-on-mobile-always-desktop'
+  | 'after-interaction-anywhere'
+  | 'never';
+
+type Style = 'attached' | 'detached';
+
+type FloatingButtonConfig = {
+  position: Position;
+  backgroundColor: string;
+  mode: Mode;
+  showOption: ShowOptions;
+  iconSVGSrc?: string;
+  style: Style;
+};
+
+type FloatingChatConfig = {
+  headerBackgroundColor: string;
+  headerMode: Mode;
+  welcomeMessageIconColor: string;
+  showVerifiedBuyer: boolean;
+  userCanEditQueries: boolean;
+  showEnviveLogo: boolean;
+  ignoreFirstModelResponse?: boolean;
+  neverShowSingleProductCards?: boolean;
+};
+
+type OrgUIConfigV3 = {
+  id?: string;
+
+  version: ConfigVersion;
+
+  shortName: string;
+
+  lookAndFeel: LookAndFeelConfig;
+
+  floatingButton: FloatingButtonConfig;
+
+  floatingChat: FloatingChatConfig;
+
+  merchantOverrideCss?: string;
+
+  customerServiceIntegration?: CustomerServiceIntegration;
+
+  merchantVariantSettings?: MerchantVariantSettings;
+
+  searchConfig?: SearchConfig;
+};
+
+export enum WidgetTypeV3 {
+  PromptCarouselV3 = 'PromptCarouselV3',
+  TitledPromptCarouselV3 = 'TitledPromptCarouselV3',
+  SocialProofV3 = 'SocialProofV3',
+  TypingAnimationV3 = 'TypingAnimationV3',
+  ChatPreviewV3 = 'ChatPreviewV3',
+  ChatPreviewComparisonV3 = 'ChatPreviewComparisonV3',
+  ChatPreviewLoadingV3 = 'ChatPreviewLoadingV3',
+  ImagePromptCardV3 = 'ImagePromptCardV3',
+  ImageBannerV3 = 'ImageBannerV3',
+  SingleImagePromptV3 = 'SingleImagePromptV3',
+}
+
+interface BaseWidgetConfig<T extends WidgetTypeV3> {
+  widgetConfigId: string;
+  type: T;
+  contentId?: string; // Widget ID
+}
+
+interface PromptCarouselWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.PromptCarouselV3> {
+  promptButtonType?: PromptButtonVariant;
+  boldFirstButton?: boolean;
+  promptCarouselRows?: PromptCarouselRows;
+  animationSpeed?: AnimationSpeed;
+}
+
+interface TitledPromptCarouselWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.TitledPromptCarouselV3> {
+  promptButtonType?: PromptButtonVariant;
+  boldFirstButton?: boolean;
+  promptCarouselRows?: PromptCarouselRows;
+  animationSpeed?: AnimationSpeed;
+}
+
+enum SocialProofWidgetKind {
+  STATIC = 'static',
+  DYNAMIC = 'dynamic',
+}
+interface SocialProofWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.SocialProofV3> {
+  kind: SocialProofWidgetKind;
+  variant: WidgetWrapperVariant;
+  hexCardColor?: string;
+  promptCarouselRows: PromptCarouselRows;
+  hideImage?: boolean;
+  imageGalleryLayout: Exclude<ImageGalleryLayout, 'TWO_SIDE'>;
+  hideTextField?: boolean;
+  primaryButtonVariant: Exclude<PromptButtonVariant, 'suggestedResponse' | 'ghost'>;
+  secondaryButtonVariant: Exclude<PromptButtonVariant, 'suggestedResponse' | 'ghost'>;
+  dynamicLayout?: DynamicLayout;
+  images?: ImageGalleryImage[];
+}
+
+interface ChatPreviewComparisonWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.ChatPreviewComparisonV3> {
+  variant: WidgetWrapperVariant;
+  hexCardColor?: string;
+  hideImage?: boolean;
+  hideTextField?: boolean;
+}
+
+interface ChatPreviewLoadingWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.ChatPreviewLoadingV3> {
+  variant: WidgetWrapperVariant;
+  hexCardColor?: string;
+  hideTextField?: boolean;
+}
+
+interface ChatPreviewWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.ChatPreviewV3> {
+  variant: WidgetWrapperVariant;
+  hexCardColor?: string;
+  hideTextField?: boolean;
+}
+
+type WidgetConfigV3 =
+  | PromptCarouselWidgetV3Config
+  | SocialProofWidgetV3Config
+  | ChatPreviewComparisonWidgetV3Config
+  | ChatPreviewLoadingWidgetV3Config
+  | ChatPreviewWidgetV3Config
+  | TitledPromptCarouselWidgetV3Config;
+
+export type {
+  OrgUIConfigV3,
+  WidgetConfigV3,
+  SocialProofWidgetV3Config,
+  PromptCarouselWidgetV3Config,
+  ChatPreviewComparisonWidgetV3Config,
+  ChatPreviewLoadingWidgetV3Config,
+  ChatPreviewWidgetV3Config,
+  TitledPromptCarouselWidgetV3Config,
+};
+
+export { SocialProofWidgetKind };

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

@@ -0,0 +1,321 @@
+import React from 'react';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import Logger from 'src/application/logging/logger';
+import { useNewOrgConfig } from 'src/hooks/NewOrgConfig';
+import { UiConfigProvider, useUiConfig } from '../uiConfigContext';
+import { ConfigVersionEnum, OrgUIConfigV3 } from '../../typesV3';
+
+// Mock the Logger to avoid console output in tests
+vi.spyOn(Logger, 'logInfo').mockImplementation(() => {});
+vi.spyOn(Logger, 'logWarn').mockImplementation(() => {});
+vi.spyOn(Logger, 'logError').mockImplementation(() => {});
+
+// Mock the useNewOrgConfig hook
+vi.mock('src/hooks/NewOrgConfig', () => ({
+  useNewOrgConfig: vi.fn(),
+}));
+
+// Component that uses the useUiConfig hook
+const MockUiConfigComponent: React.FC = () => {
+  const { getUiConfig, isLoading } = useUiConfig();
+  const [uiConfig, setUiConfig] = React.useState<OrgUIConfigV3 | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+  const [isLoadingState, setIsLoadingState] = React.useState(false);
+
+  const handleGetConfig = async () => {
+    setIsLoadingState(true);
+    try {
+      const config = await getUiConfig();
+      setUiConfig(config);
+      setError(null);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+      setUiConfig(null);
+    } finally {
+      setIsLoadingState(false);
+    }
+  };
+
+  return (
+    <div data-testid="ui-config-component">
+      <div data-testid="is-loading">{isLoading.toString()}</div>
+      <div data-testid="is-loading-state">{isLoadingState.toString()}</div>
+      <div data-testid="has-ui-config">{uiConfig ? 'true' : 'false'}</div>
+      <div data-testid="ui-config-short-name">{uiConfig?.shortName || 'not-set'}</div>
+      {error && <div data-testid="error-message">{error}</div>}
+      <button
+        data-testid="get-config-btn"
+        type="button"
+        onClick={handleGetConfig}
+      >
+        Get Config
+      </button>
+    </div>
+  );
+};
+
+// Wrapper component for testing
+const TestWrapper: React.FC<{
+  children: React.ReactNode;
+  mockNewOrgConfig?: {
+    frontendConfig?: {
+      uiConfigs?: OrgUIConfigV3;
+    } | null;
+    loading?: boolean;
+  };
+}> = ({ children, mockNewOrgConfig = {} }) => {
+  const mockUseNewOrgConfig = useNewOrgConfig as ReturnType<typeof vi.fn>;
+  mockUseNewOrgConfig.mockReturnValue({
+    frontendConfig: mockNewOrgConfig.frontendConfig ?? null,
+    loading: mockNewOrgConfig.loading ?? false,
+  });
+
+  return <UiConfigProvider>{children}</UiConfigProvider>;
+};
+
+describe('UiConfigProvider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Helper function to create a mock UI config
+  const createMockUiConfig = (): OrgUIConfigV3 => ({
+    version: ConfigVersionEnum.V3,
+    shortName: 'test-merchant',
+    lookAndFeel: {
+      theme: 'standard',
+      agentName: 'Test Agent',
+      chatHeaderLogoSrc: '',
+      widgetLogoSrc: '',
+      hideWidgetLogo: false,
+      elementRadius: 8,
+      imageAspectRatio: '1/1',
+      buttonColors: {
+        lightButtonBackgroundColor: '#ffffff',
+        lightButtonIconColor: '#000000',
+        darkButtonBackgroundColor: '#000000',
+        darkButtonIconColor: '#ffffff',
+      },
+      typography: {
+        titleFontFamily: 'Arial',
+        headerFontFamily: 'Arial',
+        bodyFontFamily: 'Arial',
+      },
+    },
+    floatingButton: {
+      position: 'bottom-right',
+      backgroundColor: '#000000',
+      mode: 'light',
+      showOption: 'always',
+      style: 'attached',
+    },
+    floatingChat: {
+      headerBackgroundColor: '#ffffff',
+      headerMode: 'light',
+      welcomeMessageIconColor: '#000000',
+      showVerifiedBuyer: true,
+      userCanEditQueries: true,
+      showEnviveLogo: false,
+    },
+  });
+
+  describe('useUiConfig Hook Integration', () => {
+    it('should provide context through useUiConfig hook', async () => {
+      const mockUiConfig = createMockUiConfig();
+
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              uiConfigs: mockUiConfig,
+            },
+            loading: false,
+          }}
+        >
+          <MockUiConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('ui-config-component')).toBeInTheDocument();
+      });
+
+      expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+    });
+
+    it('should throw error when used outside of UiConfigProvider', () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      const TestComponent: React.FC = () => {
+        try {
+          useUiConfig();
+          return <div data-testid="no-error">No Error</div>;
+        } catch (error: unknown) {
+          return (
+            <div data-testid="error">
+              {error instanceof Error ? error.message : 'Unknown error'}
+            </div>
+          );
+        }
+      };
+
+      render(<TestComponent />);
+
+      expect(screen.getByTestId('error')).toHaveTextContent(
+        'useUiConfig must be used within a UiConfigProvider',
+      );
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('getUiConfig', () => {
+    it('should successfully retrieve ui config when config exists', async () => {
+      const mockUiConfig = createMockUiConfig();
+
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              uiConfigs: mockUiConfig,
+            },
+            loading: false,
+          }}
+        >
+          <MockUiConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('ui-config-component')).toBeInTheDocument();
+      });
+
+      const getConfigButton = screen.getByTestId('get-config-btn');
+      await act(async () => {
+        getConfigButton.click();
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('has-ui-config')).toHaveTextContent('true');
+        expect(screen.getByTestId('ui-config-short-name')).toHaveTextContent('test-merchant');
+      });
+
+      expect(screen.queryByTestId('error-message')).not.toBeInTheDocument();
+    });
+
+    it('should throw error when frontend config is loading', async () => {
+      const mockUiConfig = createMockUiConfig();
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              uiConfigs: mockUiConfig,
+            },
+            loading: true,
+          }}
+        >
+          <MockUiConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('ui-config-component')).toBeInTheDocument();
+      });
+
+      const getConfigButton = screen.getByTestId('get-config-btn');
+      await act(async () => {
+        getConfigButton.click();
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('error-message')).toHaveTextContent('Frontend config is loading');
+      });
+    });
+
+    it('should return undefined when frontend config is null', async () => {
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: null,
+            loading: false,
+          }}
+        >
+          <MockUiConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('ui-config-component')).toBeInTheDocument();
+      });
+
+      const getConfigButton = screen.getByTestId('get-config-btn');
+      await act(async () => {
+        getConfigButton.click();
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('has-ui-config')).toHaveTextContent('false');
+      });
+
+      expect(screen.queryByTestId('error-message')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('isLoading state', () => {
+    it('should show loading state when frontend config is loading', async () => {
+      const mockUiConfig = createMockUiConfig();
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              uiConfigs: mockUiConfig,
+            },
+            loading: true,
+          }}
+        >
+          <MockUiConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('true');
+      });
+    });
+
+    it('should show loading state when getUiConfig is called', async () => {
+      const mockUiConfig = createMockUiConfig();
+
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              uiConfigs: mockUiConfig,
+            },
+            loading: false,
+          }}
+        >
+          <MockUiConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('ui-config-component')).toBeInTheDocument();
+      });
+
+      expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+
+      const getConfigButton = screen.getByTestId('get-config-btn');
+
+      await act(async () => {
+        getConfigButton.click();
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('has-ui-config')).toHaveTextContent('true');
+        expect(screen.getByTestId('is-loading-state')).toHaveTextContent('false');
+      });
+
+      expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+    });
+  });
+});

package/src/contexts/uiConfigContext/index.ts

@@ -0,0 +1 @@
+export * from './uiConfigContext';

package/src/contexts/uiConfigContext/uiConfigContext.tsx

@@ -0,0 +1,44 @@
+import { ReactNode, createContext, useCallback, useContext, useMemo, useState } from 'react';
+import Logger from 'src/application/logging/logger';
+import { useNewOrgConfig } from 'src/hooks/NewOrgConfig';
+import { OrgUIConfigV3 } from '../typesV3';
+
+interface UiConfigContextType {
+  getUiConfig: () => Promise<OrgUIConfigV3>;
+  isLoading: boolean;
+}
+
+const UiConfigContext = createContext<UiConfigContextType | undefined>(undefined);
+
+export const UiConfigProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const { frontendConfig, loading: isFrontendConfigLoading } = useNewOrgConfig();
+  const [isLoadingUiConfig, setIsLoadingUiConfig] = useState(false);
+
+  const getUiConfig = useCallback(async (): Promise<OrgUIConfigV3> => {
+    setIsLoadingUiConfig(true);
+    Logger.logInfo('uiConfigContext | retrieving ui config');
+    if (isFrontendConfigLoading) {
+      setIsLoadingUiConfig(false);
+      throw new Error('Frontend config is loading');
+    }
+
+    const response = frontendConfig?.uiConfigs as OrgUIConfigV3;
+    Logger.logInfo('uiConfigContext | returning ui config response', response);
+    setIsLoadingUiConfig(false);
+    return response;
+  }, [frontendConfig, isFrontendConfigLoading]);
+
+  const isLoading = isFrontendConfigLoading || isLoadingUiConfig;
+
+  const value = useMemo(() => ({ getUiConfig, isLoading }), [getUiConfig, isLoading]);
+
+  return <UiConfigContext.Provider value={value}>{children}</UiConfigContext.Provider>;
+};
+
+export const useUiConfig = () => {
+  const context = useContext(UiConfigContext);
+  if (!context) {
+    throw new Error('useUiConfig must be used within a UiConfigProvider');
+  }
+  return context;
+};