@envive-ai/react-hooks 0.3.3 → 0.3.5

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,22 @@ 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, Position, WidgetConfigV3 } from '../typesV3';
+import {
+  OrgPageConfig,
+  PageVariantConfig,
+  PageVariantTestType,
+  WidgetMountingConfig,
+} from '../types';
 
 interface BaseMeConfigQueryResponse {
   me: {
@@ -28,16 +43,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;
 }
 
@@ -49,6 +69,7 @@ const colorsAndFrontendConfigQuery = () => `
       getProductsConfigByVersion(version: $version) {
         frontend { values }
         colors { values }
+        v_three_config { values }
       }
     }
   }
@@ -56,13 +77,126 @@ const colorsAndFrontendConfigQuery = () => `
 
 type GraphQLProviderProps = {
   children: ReactNode;
+  requestV3Config?: boolean;
+  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 }: 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 +232,79 @@ 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?.v_three_config?.values;
+
+      const v3FrontendConfig = v3FrontendConfigCleanup(
+        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: PageVariantConfig[] = Array.isArray(v3RootConfig?.page_variants)
+        ? v3RootConfig?.page_variants.map(validateAndTransformPageVariants)
+        : DEFAULT_PAGE_VARIANTS;
+
+      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),
+          // Need to replace the automatic widget configs with the object based ones
+          widgetConfigs: v3WidgetConfigs,
+        },
+        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 +312,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 +346,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>;