@envive-ai/react-hooks 0.3.3 → 0.3.4

package/src/contexts/enviveCssContext/enviveCssContext.tsx

@@ -1,5 +1,21 @@
 import React, { ReactNode } from 'react';
+import { FrontendConfigV3 } from 'src/application/models/frontendConfigV3';
 import { useNewOrgConfig } from 'src/hooks/NewOrgConfig';
+import { CamelCasedPropertiesDeep } from 'src/application/models/utilityTypes';
+import { ColorMapping } from '../types';
+import {
+  AspectRatioCSSVar,
+  BorderRadiusCSSVar,
+  ButtonColorsVars,
+  ColorsNamesVars,
+  ConfigVersionEnum,
+  FontFamilyCSSVar,
+  FontSizeCSSVar,
+  FontWeightCSSVar,
+  LetterSpacingCSSVar,
+  LineHeightCSSVar,
+  ThemeCSSVar,
+} from '../typesV3';
 
 interface EnviveCssProviderProps {
   children: ReactNode;
@@ -7,37 +23,120 @@ interface EnviveCssProviderProps {
 
 export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({ children }) => {
   const { colorsConfig, frontendConfig, loading } = useNewOrgConfig();
+
+  const configVersion = frontendConfig?.uiConfigs?.version;
+
   let merchantThemeCss = `* {}`;
-  if (colorsConfig && !loading) {
+  if (colorsConfig && !loading && configVersion !== ConfigVersionEnum.V3) {
+    const colorConfigV2 = colorsConfig as CamelCasedPropertiesDeep<ColorMapping>;
     merchantThemeCss = `
 * {
-  --spiffy-colors-text-primary: ${colorsConfig.textPrimary};
-  --spiffy-colors-text-secondary: ${colorsConfig.textSecondary};
-  --spiffy-colors-text-accent: ${colorsConfig.textAccent};
-  --spiffy-colors-text-link: ${colorsConfig.textLink};
-  --spiffy-colors-text-light: ${colorsConfig.textLight};
-  --spiffy-colors-background-primary: ${colorsConfig.backgroundPrimary};
-  --spiffy-colors-background-secondary: ${colorsConfig.backgroundSecondary};
-  --spiffy-colors-background-secondary-dark: ${colorsConfig.backgroundSecondaryDark};
-  --spiffy-colors-background-tertiary: ${colorsConfig.backgroundTertiary};
-  --spiffy-colors-background-dark: ${colorsConfig.backgroundDark};
-  --spiffy-colors-background-light: ${colorsConfig.backgroundLight};
-  --spiffy-colors-background-saturated: ${colorsConfig.backgroundSaturated};
-  --spiffy-colors-border-light: ${colorsConfig.borderLight};
-  --spiffy-colors-border-medium: ${colorsConfig.borderMedium};
-  --spiffy-colors-border-dark: ${colorsConfig.borderDark};
-  --spiffy-colors-border-outline: ${colorsConfig.borderOutline};
-  --spiffy-colors-accent-primary: ${colorsConfig.accentPrimary};
-  --spiffy-colors-accent-secondary: ${colorsConfig.accentSecondary};
+  --spiffy-colors-text-primary: ${colorConfigV2.textPrimary};
+  --spiffy-colors-text-secondary: ${colorConfigV2.textSecondary};
+  --spiffy-colors-text-accent: ${colorConfigV2.textAccent};
+  --spiffy-colors-text-link: ${colorConfigV2.textLink};
+  --spiffy-colors-text-light: ${colorConfigV2.textLight};
+  --spiffy-colors-background-primary: ${colorConfigV2.backgroundPrimary};
+  --spiffy-colors-background-secondary: ${colorConfigV2.backgroundSecondary};
+  --spiffy-colors-background-secondary-dark: ${colorConfigV2.backgroundSecondaryDark};
+  --spiffy-colors-background-tertiary: ${colorConfigV2.backgroundTertiary};
+  --spiffy-colors-background-dark: ${colorConfigV2.backgroundDark};
+  --spiffy-colors-background-light: ${colorConfigV2.backgroundLight};
+  --spiffy-colors-background-saturated: ${colorConfigV2.backgroundSaturated};
+  --spiffy-colors-border-light: ${colorConfigV2.borderLight};
+  --spiffy-colors-border-medium: ${colorConfigV2.borderMedium};
+  --spiffy-colors-border-dark: ${colorConfigV2.borderDark};
+  --spiffy-colors-border-outline: ${colorConfigV2.borderOutline};
+  --spiffy-colors-accent-primary: ${colorConfigV2.accentPrimary};
+  --spiffy-colors-accent-secondary: ${colorConfigV2.accentSecondary};
+}`;
+  } else if (colorsConfig && frontendConfig && !loading && configVersion === ConfigVersionEnum.V3) {
+    const configV3 = frontendConfig as FrontendConfigV3;
+    merchantThemeCss = `
+* {
+  --${ColorsNamesVars.TextPrimary}: ${colorsConfig.textPrimary};
+  --${ColorsNamesVars.TextSecondary}: ${colorsConfig.textSecondary};
+  --${ColorsNamesVars.TextAccent}: ${colorsConfig.textAccent};
+  --${ColorsNamesVars.TextLink}: ${colorsConfig.textLink};
+  --${ColorsNamesVars.TextLight}: ${colorsConfig.textLight};
+  --${ColorsNamesVars.BackgroundPrimary}: ${colorsConfig.backgroundPrimary};
+  --${ColorsNamesVars.BackgroundSecondary}: ${colorsConfig.backgroundSecondary};
+  --${ColorsNamesVars.BackgroundTertiary}: ${colorsConfig.backgroundTertiary};
+  --${ColorsNamesVars.BackgroundDark}: ${colorsConfig.backgroundDark};
+  --${ColorsNamesVars.BackgroundLight}: ${colorsConfig.backgroundLight};
+  --${ColorsNamesVars.BorderLight}: ${colorsConfig.borderLight};
+  --${ColorsNamesVars.BorderMedium}: ${colorsConfig.borderMedium};
+  --${ColorsNamesVars.BorderDark}: ${colorsConfig.borderDark};
+  --${ColorsNamesVars.AccentPrimary}: ${colorsConfig.accentPrimary};
+  --${ColorsNamesVars.AccentSecondary}: ${colorsConfig.accentSecondary};
+
+  --${ButtonColorsVars.LightButtonBackgroundColor}: ${configV3.uiConfigs?.lookAndFeel?.buttonColors?.lightButtonBackgroundColor};
+  --${ButtonColorsVars.LightButtonIconColor}: ${configV3.uiConfigs?.lookAndFeel?.buttonColors?.lightButtonIconColor};
+  --${ButtonColorsVars.DarkButtonBackgroundColor}: ${configV3.uiConfigs?.lookAndFeel?.buttonColors?.darkButtonBackgroundColor};
+  --${ButtonColorsVars.DarkButtonIconColor}: ${configV3.uiConfigs?.lookAndFeel?.buttonColors?.darkButtonIconColor};
+
+  --${FontFamilyCSSVar.Title}: ${configV3.uiConfigs?.lookAndFeel?.typography?.titleFontFamily};
+  --${FontFamilyCSSVar.Header}: ${configV3.uiConfigs?.lookAndFeel?.typography?.headerFontFamily};
+  --${FontFamilyCSSVar.Body}: ${configV3.uiConfigs?.lookAndFeel?.typography?.bodyFontFamily};
+
+  --${FontSizeCSSVar.T1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.t1};
+  --${FontSizeCSSVar.T2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.t2};
+  --${FontSizeCSSVar.T3}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.t3};
+  --${FontSizeCSSVar.H1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.h1};
+  --${FontSizeCSSVar.H2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.h2};
+  --${FontSizeCSSVar.H3}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.h3};
+  --${FontSizeCSSVar.B1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.b1};
+  --${FontSizeCSSVar.B2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.b2};
+  --${FontSizeCSSVar.B3}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.b3};
+  --${FontSizeCSSVar.B4}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.b4};
+  --${FontSizeCSSVar.B5}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.b5};
+  --${FontSizeCSSVar.L1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.l1};
+  --${FontSizeCSSVar.L2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.l2};
+
+  --${FontWeightCSSVar.RG}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontWeight?.rg};
+  --${FontWeightCSSVar.MD}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontWeight?.md};
+  --${FontWeightCSSVar.SB}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontWeight?.sb};
+
+  --${LetterSpacingCSSVar.Tight0}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.['0']};
+  --${LetterSpacingCSSVar.Wide1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.['wide-1']};
+
+  --${LineHeightCSSVar.LineHeight124}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[124]};
+  --${LineHeightCSSVar.LineHeight120}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[120]};
+  --${LineHeightCSSVar.LineHeight118}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[118]};
+  --${LineHeightCSSVar.LineHeight116}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[116]};
+  --${LineHeightCSSVar.LineHeight114}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[114]};
+  --${LineHeightCSSVar.LineHeight148}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[148]};
+  --${LineHeightCSSVar.LineHeight140}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[140]};
+  --${LineHeightCSSVar.LineHeight128}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[128]};
+  --${LineHeightCSSVar.LineHeight130}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[130]};
+  --${LineHeightCSSVar.LineHeight133}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[133]};
+
+  --${ThemeCSSVar.GlobalCustom}: ${configV3.uiConfigs?.lookAndFeel?.theme};
+
+  --${AspectRatioCSSVar.GlobalCustom}: ${configV3.uiConfigs?.lookAndFeel?.imageAspectRatio};
+
+  --${BorderRadiusCSSVar.GlobalCustom}: ${configV3.uiConfigs?.lookAndFeel?.elementRadius}px;
 }`;
   }
-  console.log(frontendConfig);
+
+  const hasV3ConfigEdited = document.getElementById('merchant-css-config-edited') !== null;
+
   return (
     <>
       {frontendConfig ? (
-        <style id="merchant-css-overrides">{`${frontendConfig.merchantOverrideCss}`}</style>
+        <style id="merchant-css-overrides">
+          {frontendConfig.merchantOverrideCss ? `${frontendConfig.merchantOverrideCss}` : ''}
+        </style>
+      ) : null}
+      {colorsConfig &&
+      ((!hasV3ConfigEdited && configVersion === ConfigVersionEnum.V3) ||
+        configVersion !== ConfigVersionEnum.V3) ? (
+        <style
+          id={
+            configVersion === ConfigVersionEnum.V3 ? 'merchant-css-config' : 'merchant-css-colors'
+          }
+        >{`${merchantThemeCss}`}</style>
       ) : null}
-      {colorsConfig ? <style id="merchant-css-colors">{`${merchantThemeCss}`}</style> : null}
 
       {children}
     </>

package/src/contexts/featureFlagServiceContext/featureFlagServiceContext.tsx

@@ -26,13 +26,9 @@ export class FeatureFlagService {
     return gateValue.value;
   };
 
-  isClientSessionEnabled = (): boolean => {
-    const isEnabled =
-      this.featureGates.filter(
-        gate => gate.name === FeatureGates.IsClientSessionEnabled && gate.value === true,
-      ).length > 0;
-    return isEnabled;
-  };
+  // Ensure that standard overrides work as expected
+  isClientSessionEnabled = (): boolean =>
+    this.isFeatureGateEnabled(FeatureGates.IsClientSessionEnabled);
 
   getFeatureFlags = (): Record<string, boolean> => {
     return Object.fromEntries(
@@ -51,18 +47,23 @@ export interface FeatureFlagContextType {
 const FeatureFlagServiceContext = createContext<FeatureFlagContextType | undefined>(undefined);
 
 interface FeatureFlagServiceProviderProps {
-  featureGates: OrgConfigFeatureGate[];
+  featureFlagService: FeatureFlagService;
   children: ReactNode;
 }
 
 export const FeatureFlagServiceProvider: React.FC<FeatureFlagServiceProviderProps> = ({
-  featureGates,
+  featureFlagService: inputService,
   children,
 }) => {
-  const featureFlagService = useMemo(() => new FeatureFlagService(featureGates), [featureGates]);
+  const contextValue = useMemo(
+    () => ({
+      featureFlagService: inputService,
+    }),
+    [inputService],
+  );
 
   return (
-    <FeatureFlagServiceContext.Provider value={{ featureFlagService }}>
+    <FeatureFlagServiceContext.Provider value={contextValue}>
       {children}
     </FeatureFlagServiceContext.Provider>
   );

package/src/contexts/graphqlContext/graphqlContext.tsx

@@ -11,7 +11,17 @@ import { ColorMapping } from 'src/application/models/colorsConfig';
 import { FrontendConfig } from 'src/application/models/frontendConfig';
 import Logger from 'src/application/logging/logger';
 import { configVersion } from 'src/types/config-versions';
-import { CamelCasedPropertiesDeep, transformSnakeToCamel } from 'src/application/models';
+import {
+  CamelCasedPropertiesDeep,
+  transformSnakeToCamel,
+  validateAndTransformMountingConfig,
+  validateAndTransformPageVariants,
+} from 'src/application/models';
+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';
 
 interface BaseMeConfigQueryResponse {
   me: {
@@ -28,16 +38,21 @@ interface BaseMeConfigQueryResponse {
 }
 export type ColorsConfigResponse = CamelCasedPropertiesDeep<ColorMapping>;
 export type FrontendConfigResponse = CamelCasedPropertiesDeep<FrontendConfig>;
+export type ColorsConfigV3Response = CamelCasedPropertiesDeep<ColorMappingV3>;
+export type FrontendConfigV3Response = CamelCasedPropertiesDeep<FrontendConfigV3>;
 
 export type GraphQlConfigValues = {
-  colorsConfig?: ColorsConfigResponse;
-  frontendConfig?: CamelCasedPropertiesDeep<FrontendConfig>;
+  colorsConfig?: ColorsConfigResponse | ColorsConfigV3Response;
+  frontendConfig?: CamelCasedPropertiesDeep<FrontendConfig | FrontendConfigV3>;
+  orgPageConfig?: OrgPageConfig;
 };
 
 interface GraphQLContextValue {
   executeQuery: <T>(query: string, variables?: Record<string, unknown>) => Promise<T>;
   getOrgId: () => Promise<string | undefined>;
   getColorsAndFrontendConfig: () => Promise<GraphQlConfigValues>;
+  getV3Config: () => Promise<GraphQlConfigValues>;
+  getConfig: () => Promise<GraphQlConfigValues>;
   isReady: boolean;
 }
 
@@ -56,13 +71,18 @@ const colorsAndFrontendConfigQuery = () => `
 
 type GraphQLProviderProps = {
   children: ReactNode;
+  requestV3Config?: boolean;
+  mockV3ConfigToDeprecatedConfig?: boolean;
 };
 
-export const GraphQLProvider = ({ children }: GraphQLProviderProps) => {
+export const GraphQLProvider = ({
+  children,
+  requestV3Config = false,
+  mockV3ConfigToDeprecatedConfig = false,
+}: GraphQLProviderProps) => {
   const apiKey = useAtomValue(orgLevelApiKeyAtom);
   const baseUrl = useAtomValue(baseUrlAtom);
-
-  const isReady = Boolean(apiKey && baseUrl);
+  const isReady = useMemo(() => Boolean(apiKey && baseUrl), [apiKey, baseUrl]);
 
   const executeQuery = useCallback(
     async (query: string, variables?: Record<string, unknown>) => {
@@ -98,6 +118,74 @@ export const GraphQLProvider = ({ children }: GraphQLProviderProps) => {
     return validateGraphQLOrgId(response.me.org?.id);
   }, [executeQuery]);
 
+  const getV3Config = useCallback(async (): Promise<GraphQlConfigValues> => {
+    try {
+      const query = await colorsAndFrontendConfigQuery();
+      if (!query) {
+        throw new Error('Colors and frontend config query is not defined');
+      }
+      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 v3FrontendConfig = transformSnakeToCamel(v3RootConfig) as FrontendConfigV3Response;
+
+      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 = v3RootConfig?.page_variants.map(
+        validateAndTransformPageVariants,
+      ) as PageVariantConfig[];
+
+      const v3ColorsConfig = transformSnakeToCamel(v3RootConfig?.colors?.values);
+
+      // 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');
+        const colorsConfig = mockV3ColorsConfig;
+        const frontendConfig = mockV3FrontendConfig;
+        return {
+          colorsConfig: isSemanticColors
+            ? (colorsConfig as ColorsConfigV3Response)
+            : (v3ColorsConfig as ColorsConfigV3Response),
+          frontendConfig: frontendConfig as FrontendConfigV3Response,
+        };
+      }
+
+      return {
+        colorsConfig: v3ColorsConfig as ColorsConfigV3Response,
+        frontendConfig: v3FrontendConfig as FrontendConfigV3Response,
+        orgPageConfig: {
+          pageVariants: v3pageVariants,
+          widgetConfigs: v3WidgetConfigs,
+          mountingConfigs: v3MountingConfigs,
+        },
+        // TODO: Add widgets and other config here
+      };
+    } catch (err) {
+      Logger.logError('Error fetching graphql colors and frontend config', err);
+      return { colorsConfig: undefined, frontendConfig: undefined };
+    }
+  }, [executeQuery, mockV3ConfigToDeprecatedConfig]);
+
   const getColorsAndFrontendConfig = useCallback(async (): Promise<GraphQlConfigValues> => {
     try {
       const query = await colorsAndFrontendConfigQuery();
@@ -105,13 +193,33 @@ export const GraphQLProvider = ({ children }: GraphQLProviderProps) => {
         throw new Error('Colors and frontend config query is not defined');
       }
       const response = await executeQuery(query);
-      const colorsConfig = response.me.getProductsConfigByVersion?.colors?.values;
-      const frontendConfig = response.me.getProductsConfigByVersion?.frontend?.values;
-      const transformedColorConfig = transformSnakeToCamel(colorsConfig);
-      const transformedFrontendConfig = transformSnakeToCamel(frontendConfig);
+      if (
+        response.me.getProductsConfigByVersion?.version !== ConfigVersionEnum.V3 &&
+        !mockV3ConfigToDeprecatedConfig
+      ) {
+        const colorsConfig = response.me.getProductsConfigByVersion?.colors?.values;
+        const frontendConfig = response.me.getProductsConfigByVersion?.frontend?.values;
+        const transformedColorConfig = transformSnakeToCamel(colorsConfig);
+        const transformedFrontendConfig = transformSnakeToCamel(frontendConfig);
+        return {
+          colorsConfig: transformedColorConfig as ColorsConfigResponse,
+          frontendConfig: transformedFrontendConfig as FrontendConfigResponse,
+        };
+      }
+      // TODO: REMOVE MOCKED CONFIG ONCE WE HAVE THE NEW CONFIG IMPLEMENTED ON BACKEND
+      const merchantColorsConfig = response.me.getProductsConfigByVersion?.colors?.values;
+      const transformedMerchantColorConfig = transformSnakeToCamel(merchantColorsConfig);
+
+      const isSemanticColors = !window.location.href.includes('globals=merchant');
+
+      const colorsConfig = mockV3ColorsConfig;
+      const frontendConfig = mockV3FrontendConfig;
+
       return {
-        colorsConfig: transformedColorConfig as ColorsConfigResponse,
-        frontendConfig: transformedFrontendConfig as FrontendConfigResponse,
+        colorsConfig: isSemanticColors
+          ? (colorsConfig as ColorsConfigV3Response)
+          : (transformedMerchantColorConfig as ColorsConfigV3Response),
+        frontendConfig: frontendConfig as FrontendConfigV3Response,
       };
     } catch (err) {
       Logger.logError('Error fetching graphql colors and frontend config', err);
@@ -119,14 +227,24 @@ export const GraphQLProvider = ({ children }: GraphQLProviderProps) => {
     }
   }, [executeQuery]);
 
+  const getConfig = useCallback(async (): Promise<GraphQlConfigValues> => {
+    console.log('GraphQLProvider: getConfig: requestV3Config', requestV3Config);
+    if (requestV3Config) {
+      return getV3Config();
+    }
+    return getColorsAndFrontendConfig();
+  }, [getColorsAndFrontendConfig, getV3Config, requestV3Config]);
+
   const value = useMemo(
     () => ({
       executeQuery,
       getOrgId,
       getColorsAndFrontendConfig,
+      getV3Config,
+      getConfig,
       isReady,
     }),
-    [executeQuery, getOrgId, getColorsAndFrontendConfig, isReady],
+    [executeQuery, getOrgId, getColorsAndFrontendConfig, getV3Config, getConfig, isReady],
   );
 
   return <GraphQLContext.Provider value={value}>{children}</GraphQLContext.Provider>;

package/src/contexts/graphqlContext/mockV3Config.ts

@@ -0,0 +1,209 @@
+import { FrontendConfigV3 } from 'src/application/models/frontendConfigV3';
+import { ColorMappingV3, ColorNames, colorVar } from 'src/application/models/colorsConfigV3';
+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 { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
+import { ConfigVersionEnum, SocialProofWidgetKind, WidgetTypeV3 } from '../typesV3';
+
+const mockImages = [
+  {
+    src: 'https://picsum.photos/400/600',
+    alt: 'Image 1',
+  },
+  {
+    src: 'https://picsum.photos/400/600',
+    alt: 'Image 2',
+  },
+  {
+    src: 'https://picsum.photos/400/600',
+    alt: 'Image 3',
+  },
+  {
+    src: 'https://picsum.photos/400/600',
+    alt: 'Image 4',
+  },
+];
+
+export const mockV3ColorsConfig: CamelCasedPropertiesDeep<ColorMappingV3> = {
+  textPrimary: '#021414',
+  textSecondary: '#666666',
+  textAccent: '#478D87',
+  textLink: '#042E2C',
+  textLight: '#FFFFFF',
+  backgroundPrimary: '#1F5F51',
+  backgroundSecondary: '#F9F6EA',
+  backgroundTertiary: '#EEECDD',
+  backgroundDark: '#021414',
+  backgroundLight: '#FFFFFF',
+  borderLight: '#E6E7E7',
+  borderMedium: '#B3B8B8',
+  borderDark: '#021414',
+  accentPrimary: '#1F5F51',
+  accentSecondary: '#AE8659',
+};
+
+export const mockV3FrontendConfig: FrontendConfigV3 = {
+  uiConfigs: {
+    version: ConfigVersionEnum.V3,
+    shortName: 'Envive AI',
+    lookAndFeel: {
+      theme: 'standard',
+      agentName: 'Envive AI',
+      chatHeaderLogoSrc: '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',
+      buttonColors: {
+        lightButtonBackgroundColor: colorVar(ColorNames.BackgroundSecondary),
+        lightButtonIconColor: colorVar(ColorNames.AccentPrimary),
+        darkButtonBackgroundColor: colorVar(ColorNames.BackgroundDark),
+        darkButtonIconColor: colorVar(ColorNames.AccentPrimary),
+      },
+      typography: {
+        titleFontFamily: 'Poppins',
+        headerFontFamily: 'Poppins',
+        bodyFontFamily: 'Inter Variable',
+        fontSize: {
+          t1: '32px',
+          t2: '28px',
+          t3: '24px',
+          h1: '20px',
+          h2: '16px',
+          h3: '14px',
+          b1: '20px',
+          b2: '16px',
+          b3: '14px',
+          b4: '12px',
+          b5: '10px',
+          l1: '14px',
+          l2: '12px',
+        },
+        fontWeight: {
+          rg: '400',
+          md: '500',
+          sb: '600',
+        },
+        letterSpacing: {
+          '0': '0em',
+          'wide-1': '1px',
+        },
+        lineHeight: {
+          '124': 1.24,
+          '120': 1.2,
+          '118': 1.18,
+          '116': 1.16,
+          '114': 1.14,
+          '148': 1.48,
+          '140': 1.4,
+          '128': 1.28,
+          '130': 1.3,
+          '133': 1.33,
+        },
+      },
+    },
+    floatingButton: {
+      position: 'bottom-right',
+      backgroundColor: colorVar(ColorNames.BackgroundPrimary),
+      mode: 'light',
+      showOption: 'always',
+      style: 'attached',
+      iconSVGSrc: '',
+    },
+    floatingChat: {
+      headerBackgroundColor: colorVar(ColorNames.BackgroundPrimary),
+      headerMode: 'dark',
+      welcomeMessageIconColor: colorVar(ColorNames.AccentPrimary),
+      showVerifiedBuyer: false,
+      userCanEditQueries: true,
+      showEnviveLogo: true,
+      ignoreFirstModelResponse: false,
+      neverShowSingleProductCards: false,
+    },
+  },
+  pageVariants: [],
+  mountingConfigs: {},
+  widgetConfigs: {
+    'prompt-carousel-test-light-widget': {
+      widgetConfigId: 'prompt-carousel-test-light-widget',
+      contentId: 'prompt-carousel-test-light-widget',
+      type: WidgetTypeV3.PromptCarouselV3,
+
+      promptButtonType: PromptButtonVariant.LIGHT,
+      boldFirstButton: false,
+      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
+      animationSpeed: AnimationSpeed.FAST,
+    },
+    'prompt-carousel-test-dark-widget': {
+      widgetConfigId: 'prompt-carousel-test-dark-widget',
+      contentId: 'prompt-carousel-test-dark-widget',
+      type: WidgetTypeV3.PromptCarouselV3,
+
+      promptButtonType: PromptButtonVariant.DARK,
+      boldFirstButton: false,
+      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
+      animationSpeed: AnimationSpeed.FAST,
+    },
+    'titled-prompt-carousel-test-light-widget': {
+      widgetConfigId: 'titled-prompt-carousel-test-light-widget',
+      contentId: 'titled-prompt-carousel-test-light-widget',
+      type: WidgetTypeV3.TitledPromptCarouselV3,
+
+      promptButtonType: PromptButtonVariant.LIGHT,
+      boldFirstButton: false,
+      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
+      animationSpeed: AnimationSpeed.FAST,
+    },
+    'titled-prompt-carousel-test-dark-widget': {
+      widgetConfigId: 'titled-prompt-carousel-test-dark-widget',
+      contentId: 'titled-prompt-carousel-test-dark-widget',
+      type: WidgetTypeV3.TitledPromptCarouselV3,
+
+      promptButtonType: PromptButtonVariant.DARK,
+      boldFirstButton: false,
+      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
+      animationSpeed: AnimationSpeed.FAST,
+    },
+    'social-proof-test-widget-four-grid': {
+      widgetConfigId: 'social-proof-test-widget-four-grid',
+      contentId: 'social-proof-test-widget-four-grid',
+      type: WidgetTypeV3.SocialProofV3,
+
+      imageGalleryLayout: ImageGalleryLayout.FOUR_GRID,
+      kind: SocialProofWidgetKind.STATIC,
+      variant: WidgetWrapperVariant.INLINE_WITH_BORDER,
+      promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
+      primaryButtonVariant: PromptButtonVariant.DARK,
+      secondaryButtonVariant: PromptButtonVariant.LIGHT,
+      images: mockImages,
+    },
+    'social-proof-test-widget-single': {
+      widgetConfigId: 'social-proof-test-widget-single',
+      contentId: 'social-proof-test-widget-single',
+      type: WidgetTypeV3.SocialProofV3,
+
+      imageGalleryLayout: ImageGalleryLayout.SINGLE,
+      kind: SocialProofWidgetKind.STATIC,
+      variant: WidgetWrapperVariant.CARD_NO_BORDER,
+      promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
+      primaryButtonVariant: PromptButtonVariant.DARK,
+      secondaryButtonVariant: PromptButtonVariant.LIGHT,
+      images: mockImages,
+    },
+    'social-proof-test-widget-four-horizontal': {
+      widgetConfigId: 'social-proof-test-widget-four-horizontal',
+      contentId: 'social-proof-test-widget-four-horizontal',
+      type: WidgetTypeV3.SocialProofV3,
+
+      imageGalleryLayout: ImageGalleryLayout.FOUR_HORIZONTAL,
+      kind: SocialProofWidgetKind.STATIC,
+      variant: WidgetWrapperVariant.CARD_WITH_BORDER,
+      promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
+      primaryButtonVariant: PromptButtonVariant.DARK,
+      secondaryButtonVariant: PromptButtonVariant.LIGHT,
+      images: mockImages,
+    },
+  },
+};