@envive-ai/react-hooks 0.1.5 → 0.1.7

package/src/contexts/{chatContext.tsx → chatContext/chatContext.tsx}

@@ -8,9 +8,9 @@ import {
   useCallback,
   useMemo,
 } from "react";
-import CommerceApiClient from "src/adapters/spiffy/commerce/api";
+import CommerceApiClient from "src/application/commerce-api";
 import { v4 as uuid } from "uuid";
-import { SessionRestartRequired } from "src/adapters/spiffy/commerce/exceptions/sessionExceptions";
+import { SessionRestartRequired } from "src/types/exceptions/sessionExceptions";
 import Logger from "src/application/logging/logger";
 import {
   Message,
@@ -19,10 +19,7 @@ import {
   NextMessageRequest,
   Response,
 } from "src/application/models";
-import {
-  AmplitudeAdapter,
-  SpiffyMetricsEventName,
-} from "src/adapters/amplitude";
+import { SpiffyMetricsEventName } from "src/contexts/amplitudeContext/amplitudeContext";
 import { messageFromResponse } from "src/application/utils";
 import { chatIdAtom, userIdAtom, variantInfoAtom } from "src/atoms/app";
 import {
@@ -43,8 +40,6 @@ import {
   handleSearchResultsAtom,
   chatSearchIsLoadingAtom,
 } from "src/atoms/search/chatSearch";
-import { orgIdAtom } from "src/atoms/org/org";
-import { useSystemSettingsContext } from "src/hooks";
 import { createAppLoadedEvent, createVisitUserEvent } from "src/hooks/utils";
 import { useMessageInterceptor } from "src/interceptors/useMessageInterceptor";
 import { supportedEventAtom } from "src/atoms/app/variant";
@@ -57,6 +52,8 @@ import {
   userEventQueueAtom,
   userQueueEventCountAtom,
 } from "src/atoms/chat/messageQueue";
+import { useAmplitudeTracking } from "src/hooks/AmplitudeOperations/useAmplitudeOperations";
+import { useSystemSettingsContext } from "src/hooks/SystemSettingsContext";
 
 /**
  * Record the chat assistant response in Amplitude
@@ -66,7 +63,11 @@ import {
  */
 const recordAssistantResponse = (
   startTimeMs: number,
-  payload: NextMessageRequest
+  payload: NextMessageRequest,
+  track: (
+    eventName: SpiffyMetricsEventName,
+    eventProps?: Record<string, unknown>
+  ) => void
 ) => {
   const atomStore = getAtomStore();
   const chatState = atomStore.get(chatAtom);
@@ -115,8 +116,7 @@ const recordAssistantResponse = (
     eventProps.search_products_sort_type = searchProductsSort;
   }
 
-  AmplitudeAdapter.trackEvent({
-    eventName: SpiffyMetricsEventName.ChatAssistantResponse,
+  track(SpiffyMetricsEventName.ChatAssistantResponse, {
     eventProps,
   });
 };
@@ -252,13 +252,15 @@ const ChatContextProvider = ({ children }: { children: ReactNode }) => {
   const userId = useAtomValue(userIdAtom);
   const chatId = useAtomValue(chatIdAtom);
   const supportedEvent = useAtomValue(supportedEventAtom);
-  const orgId = useAtomValue(orgIdAtom);
+  // TODO: Replace with actual orgId from useEnviveConfig or NewOrgConfigContext when available
+  const orgId = "mock-org-id";
 
   const variantInfo = useAtomValue(variantInfoAtom);
   const settingsContext = useSystemSettingsContext();
   const messageInterceptor = useMessageInterceptor();
   const handleSearchResults = useSetAtom(handleSearchResultsAtom);
   const setSearchIsLoading = useSetAtom(chatSearchIsLoadingAtom);
+  const { track } = useAmplitudeTracking();
 
   const getStreamingResponses = useCallback(
     async (
@@ -340,7 +342,7 @@ const ChatContextProvider = ({ children }: { children: ReactNode }) => {
 
         await getStreamingResponses(requestPayload);
 
-        recordAssistantResponse(startTimeMs, requestPayload);
+        recordAssistantResponse(startTimeMs, requestPayload, track);
         await getSuggestions();
       } catch (error) {
         Logger.logError("[spiffy-ai] getResponses error", error);
@@ -361,6 +363,7 @@ const ChatContextProvider = ({ children }: { children: ReactNode }) => {
       markUserEventsProcessed,
       getSuggestions,
       setUserHasReplied,
+      track,
     ]
   );
 

package/src/contexts/chatContext/index.ts

@@ -0,0 +1 @@
+export * from "./chatContext";

package/src/contexts/{enviveConfigContext.tsx → enviveConfigContext/enviveConfigContext.tsx}

@@ -1,8 +1,9 @@
 import React, { createContext, useContext, ReactNode, useEffect } from "react";
 import { useSetAtom, useAtomValue } from "jotai";
-import type { EnviveConfig } from "./types";
 import { enviveConfigAtom } from "src/atoms/envive/enviveConfig";
 import Logger from "src/application/logging/logger";
+import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults";
+import { EnviveConfig } from "../types";
 
 const EnviveConfigContext = createContext<EnviveConfig | undefined>(undefined);
 
@@ -18,6 +19,12 @@ interface EnviveConfigProviderProps {
   orgLevelApiKey?: string;
   orgShortName?: string;
   identifyingPrefix: string;
+  featureOverrides?: Record<string, boolean>;
+  variantUrlOverride?: string;
+  variantInfoOverride?: any;
+  show?: boolean;
+  publicKey?: string;
+  featureGates?: OrgConfigFeatureGate[]; // New prop for feature gates
 }
 
 export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
@@ -32,8 +39,15 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
   orgLevelApiKey,
   orgShortName,
   identifyingPrefix,
+  featureOverrides,
+  variantUrlOverride,
+  variantInfoOverride,
+  show,
+  publicKey,
+  featureGates, // Destructure new prop
 }) => {
   const setEnviveConfig = useSetAtom(enviveConfigAtom);
+
   const config: EnviveConfig = {
     amplitudeApiKey,
     dataResidency,
@@ -45,6 +59,12 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
     orgLevelApiKey,
     orgShortName,
     identifyingPrefix,
+    featureOverrides,
+    variantUrlOverride,
+    variantInfoOverride,
+    show,
+    publicKey,
+    featureGates, // Add to config
   };
 
   useEffect(() => {
@@ -54,28 +74,13 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
 
   return (
     <EnviveConfigContext.Provider value={config}>
-      {children}
+      {config ? children : null}
     </EnviveConfigContext.Provider>
   );
 };
 
 export const useEnviveConfig = (): EnviveConfig => {
   const config = useAtomValue(enviveConfigAtom);
-  Logger.logDebug("useEnviveConfig: Accessing EnviveConfig", config);
-
-  // During initial render, the atom might not be set yet, so we need to be more patient
-  // The EnviveConfigProvider will set it in its useEffect
-  if (!config) {
-    // Instead of throwing immediately, let's return a default/empty config
-    // This prevents the error during initial render
-    Logger.logWarn(
-      "EnviveConfig not yet available, returning default config",
-      undefined
-    );
-    return {
-      identifyingPrefix: "spiffy", // This is required, so provide a default
-    } as EnviveConfig;
-  }
 
-  return config;
+  return config ? config : {};
 };

package/src/contexts/enviveConfigContext/index.ts

@@ -0,0 +1 @@
+export * from "./enviveConfigContext";

package/src/contexts/enviveCssContext/enviveCssContext.tsx

@@ -0,0 +1,49 @@
+import React, { ReactNode } from "react";
+import { useNewOrgConfig } from "src/hooks/NewOrgConfig";
+
+interface EnviveCssProviderProps {
+  children: ReactNode;
+}
+
+export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({
+  children,
+}) => {
+  const { colorsConfig, frontendConfig, loading } = useNewOrgConfig();
+  let merchantThemeCss = `* {}`;
+  if (colorsConfig && !loading) {
+    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};
+}`;
+  }
+  console.log(frontendConfig);
+  return (
+    <>
+      {frontendConfig ? (
+        <style id="merchant-css-overrides">{`${frontendConfig.merchantOverrideCss}`}</style>
+      ) : null}
+      {colorsConfig ? (
+        <style id="merchant-css-colors">{`${merchantThemeCss}`}</style>
+      ) : null}
+
+      {children}
+    </>
+  );
+};

package/src/contexts/enviveCssContext/index.ts

@@ -0,0 +1 @@
+export * from "./enviveCssContext";

package/src/contexts/featureFlagContext/featureFlagContext.tsx

@@ -0,0 +1,193 @@
+import React, { createContext, useContext, useCallback, useMemo } from "react";
+import Logger from "src/application/logging/logger";
+import { StatsigFeatureGate } from "@spiffy-ai/commerce-api-client";
+import { FeatureGates } from "src/application/models/featureGates";
+import { useSessionStorage } from "src/contexts/sessionStorageContext";
+import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults";
+import { useEnviveConfig } from "src/contexts/enviveConfigContext/enviveConfigContext";
+
+const FEATURE_FLAGS_STORAGE_KEY = "spiffy-feature-flags";
+
+export interface FeatureFlagContextType {
+  isFeatureGateEnabled: (featureGate: FeatureGates) => boolean;
+  isClientSessionEnabled: () => boolean;
+  getFeatureFlags: () => Record<string, boolean>;
+  persistFeatureGateOverrides: () => void;
+}
+
+const FeatureFlagContext = createContext<FeatureFlagContextType | undefined>(
+  undefined
+);
+
+export const FeatureFlagProvider: React.FC<{
+  featureGates: OrgConfigFeatureGate[];
+  children: React.ReactNode;
+}> = ({ featureGates, children }) => {
+  const { getItem, setItem } = useSessionStorage();
+  const { featureOverrides } = useEnviveConfig();
+
+  const getQueryParamFeatureGateOverrides = useCallback(
+    (featureGate: FeatureGates): boolean | undefined => {
+      const urlObj = new URL(window.location.href);
+      const params = new URLSearchParams(urlObj.search);
+      const paramsObj = Object.fromEntries(params.entries());
+      const value = paramsObj[featureGate];
+
+      if (value != null) {
+        return value === "true";
+      }
+
+      return undefined;
+    },
+    []
+  );
+
+  const getWindowFeatureGateOverrides = useCallback(
+    (featureGate: FeatureGates): boolean | undefined => {
+      const value = featureOverrides?.[String(featureGate)];
+      if (value != null) {
+        return value;
+      }
+
+      return undefined;
+    },
+    [featureOverrides]
+  );
+
+  const getStoredFeatureGateOverrides = useCallback(
+    (featureGate: FeatureGates): boolean | undefined => {
+      const featureFlags = getItem(FEATURE_FLAGS_STORAGE_KEY);
+
+      if (featureFlags) {
+        try {
+          const featureFlagsObj = JSON.parse(featureFlags);
+          return featureFlagsObj[featureGate];
+        } catch (err) {
+          Logger.logError(
+            "[spiffy-ai] getStoredFeatureGateOverrides: error parsing feature flags",
+            err
+          );
+        }
+      }
+
+      return undefined;
+    },
+    []
+  );
+
+  const getFeatureFlagOverride = useCallback(
+    (featureGate: FeatureGates): boolean | undefined => {
+      const queryOverride = getQueryParamFeatureGateOverrides(featureGate);
+      if (queryOverride != null) {
+        Logger.logDebug(
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by URL param. New value: ${queryOverride}`
+        );
+        return queryOverride;
+      }
+
+      const windowOverride = getWindowFeatureGateOverrides(featureGate);
+      if (windowOverride != null) {
+        Logger.logDebug(
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by window param. New value: ${windowOverride}`
+        );
+        return windowOverride;
+      }
+
+      const storedOverride = getStoredFeatureGateOverrides(featureGate);
+      if (storedOverride != null) {
+        Logger.logDebug(
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by stored value. New value: ${storedOverride}`
+        );
+        return storedOverride;
+      }
+
+      return undefined;
+    },
+    [
+      getQueryParamFeatureGateOverrides,
+      getWindowFeatureGateOverrides,
+      getStoredFeatureGateOverrides,
+    ]
+  );
+
+  const isFeatureGateEnabled = useCallback(
+    (featureGate: FeatureGates): boolean => {
+      const gateValue = featureGates.find((gate) => gate.name === featureGate);
+
+      const featureFlagOverride = getFeatureFlagOverride(featureGate);
+      if (featureFlagOverride !== undefined) {
+        return featureFlagOverride;
+      }
+
+      if (gateValue == null || gateValue.value == null) {
+        Logger.logDebug(
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} value is undefined - returning false`
+        );
+
+        return false;
+      }
+
+      return gateValue.value;
+    },
+    [featureGates, getFeatureFlagOverride]
+  );
+
+  const isClientSessionEnabled = useCallback((): boolean => {
+    const gates: Array<StatsigFeatureGate> | undefined = featureGates;
+    const isEnabled =
+      gates == null ||
+      gates?.filter(
+        (gate) =>
+          gate.name === FeatureGates.IsClientSessionEnabled &&
+          gate.value === true
+      ).length > 0;
+
+    return isEnabled;
+  }, [featureGates]);
+
+  const getFeatureFlags = useCallback((): Record<string, boolean> => {
+    return Object.fromEntries(
+      Object.values(FeatureGates).map((featureGate: FeatureGates) => [
+        featureGate,
+        isFeatureGateEnabled(featureGate),
+      ])
+    );
+  }, [isFeatureGateEnabled]);
+
+  const persistFeatureGateOverrides = useCallback(() => {
+    const featureFlags = Object.values(FeatureGates)
+      .map((featureGate) => [featureGate, getFeatureFlagOverride(featureGate)])
+      .filter(([, val]) => val !== undefined)
+      .reduce((acc, [key, val]) => ({ ...acc, [key as string]: val }), {});
+    setItem(FEATURE_FLAGS_STORAGE_KEY, JSON.stringify(featureFlags));
+  }, [getFeatureFlagOverride, setItem]);
+
+  const value = useMemo(
+    () => ({
+      isFeatureGateEnabled,
+      isClientSessionEnabled,
+      getFeatureFlags,
+      persistFeatureGateOverrides,
+    }),
+    [
+      isFeatureGateEnabled,
+      isClientSessionEnabled,
+      getFeatureFlags,
+      persistFeatureGateOverrides,
+    ]
+  );
+
+  return (
+    <FeatureFlagContext.Provider value={value}>
+      {children}
+    </FeatureFlagContext.Provider>
+  );
+};
+
+export const useFeatureFlag = () => {
+  const context = useContext(FeatureFlagContext);
+  if (context === undefined) {
+    throw new Error("useFeatureFlag must be used within a FeatureFlagProvider");
+  }
+  return context;
+};

package/src/contexts/featureFlagContext/index.ts

@@ -0,0 +1 @@
+export * from "./featureFlagContext";

package/src/contexts/featureFlagServiceContext/featureFlagServiceContext.tsx

@@ -0,0 +1,87 @@
+import React, { createContext, useContext, useMemo, ReactNode } from "react";
+import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults";
+import { FeatureGates } from "src/application/models/featureGates";
+import Logger from "src/application/logging/logger";
+
+// This is the class that was previously implicitly used or defined elsewhere
+class FeatureFlagService {
+  private featureGates: OrgConfigFeatureGate[];
+
+  constructor(featureGates: OrgConfigFeatureGate[]) {
+    this.featureGates = featureGates;
+  }
+
+  isFeatureGateEnabled = (featureGate: FeatureGates): boolean => {
+    const gateValue = this.featureGates.find(
+      (gate) => gate.name === featureGate
+    );
+
+    // TODO: Add logic for overrides (query params, window, stored) if needed, similar to the old FeatureFlagContext.tsx
+    // For now, direct value from config is used.
+
+    if (gateValue == null || gateValue.value == null) {
+      Logger.logDebug(
+        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} value is undefined - returning false`
+      );
+      return false;
+    }
+    return gateValue.value;
+  };
+
+  isClientSessionEnabled = (): boolean => {
+    const isEnabled =
+      this.featureGates.filter(
+        (gate) =>
+          gate.name === FeatureGates.IsClientSessionEnabled &&
+          gate.value === true
+      ).length > 0;
+    return isEnabled;
+  };
+
+  getFeatureFlags = (): Record<string, boolean> => {
+    return Object.fromEntries(
+      Object.values(FeatureGates).map((featureGate: FeatureGates) => [
+        featureGate,
+        this.isFeatureGateEnabled(featureGate),
+      ])
+    );
+  };
+}
+
+export interface FeatureFlagContextType {
+  featureFlagService: FeatureFlagService | undefined;
+}
+
+const FeatureFlagServiceContext = createContext<
+  FeatureFlagContextType | undefined
+>(undefined);
+
+interface FeatureFlagServiceProviderProps {
+  featureGates: OrgConfigFeatureGate[];
+  children: ReactNode;
+}
+
+export const FeatureFlagServiceProvider: React.FC<
+  FeatureFlagServiceProviderProps
+> = ({ featureGates, children }) => {
+  const featureFlagService = useMemo(
+    () => new FeatureFlagService(featureGates),
+    [featureGates]
+  );
+
+  return (
+    <FeatureFlagServiceContext.Provider value={{ featureFlagService }}>
+      {children}
+    </FeatureFlagServiceContext.Provider>
+  );
+};
+
+export const useFeatureFlagService = () => {
+  const context = useContext(FeatureFlagServiceContext);
+  if (context === undefined) {
+    throw new Error(
+      "useFeatureFlagService must be used within a FeatureFlagServiceProvider"
+    );
+  }
+  return context;
+};

package/src/contexts/featureFlagServiceContext/index.ts

@@ -0,0 +1 @@
+export * from "./featureFlagServiceContext";

package/src/contexts/graphqlContext/graphqlContext.tsx

@@ -0,0 +1,165 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  useMemo,
+  ReactNode,
+} from "react";
+import { useAtomValue } from "jotai";
+import { baseUrlAtom, orgLevelApiKeyAtom } from "src/atoms/envive/enviveConfig";
+import { getMerchantOrgIdQuery } from "src/application/models/graphql/queries/getMerchantOrgIdQuery";
+import { validateGraphQLOrgId } from "src/application/models/validators/validateGraphQLOrgId";
+import {
+  getMerchantColorsQuery,
+  GetMerchantColorsQueryData,
+  getMerchantFrontendConfigQuery,
+  GetMerchantFrontendConfigQueryData,
+} from "src/application/models/graphql";
+import { validateGraphQLColorsConfig } from "src/application/models/validators/validateGraphQLColorsConfig";
+import { validateGraphQLFrontendConfig } from "src/application/models/validators/validateGraphQLFrontendConfig";
+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";
+
+interface BaseMeConfigQueryResponse {
+  me: {
+    org?: {
+      id: string;
+    };
+    getProductsConfigByVersion?: {
+      frontend?: {
+        values: CamelCasedPropertiesDeep<GetMerchantFrontendConfigQueryData>;
+      };
+      colors?: { values: CamelCasedPropertiesDeep<GetMerchantColorsQueryData> };
+    };
+  };
+}
+export type ColorsConfigResponse = CamelCasedPropertiesDeep<ColorMapping>;
+export type FrontendConfigResponse = CamelCasedPropertiesDeep<FrontendConfig>;
+
+export type GraphQlConfigValues = {
+  colorsConfig?: ColorsConfigResponse;
+  frontendConfig?: CamelCasedPropertiesDeep<FrontendConfig>;
+};
+
+interface GraphQLContextValue {
+  executeQuery: <T>(
+    query: string,
+    variables?: Record<string, unknown>
+  ) => Promise<T>;
+  getOrgId: () => Promise<string | undefined>;
+  getColorsAndFrontendConfig: () => Promise<GraphQlConfigValues>;
+  isReady: boolean;
+}
+
+const GraphQLContext = createContext<GraphQLContextValue | null>(null);
+
+const colorsAndFrontendConfigQuery = () => `
+  query ($version: String = "${configVersion()}") {
+    me {
+      getProductsConfigByVersion(version: $version) {
+        frontend { values }
+        colors { values }
+      }
+    }
+  }
+`;
+
+type GraphQLProviderProps = {
+  children: ReactNode;
+};
+
+export const GraphQLProvider = ({ children }: GraphQLProviderProps) => {
+  const apiKey = useAtomValue(orgLevelApiKeyAtom);
+  const baseUrl = useAtomValue(baseUrlAtom);
+
+  const isReady = Boolean(apiKey && baseUrl);
+
+  const executeQuery = useCallback(
+    async (query: string, variables?: Record<string, unknown>) => {
+      if (!isReady) {
+        throw new Error("GraphQL client not ready - missing apiKey or baseUrl");
+      }
+
+      const response = await fetch(`${baseUrl}/v1/graphql`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${apiKey}`,
+        },
+        body: JSON.stringify({ query, variables }),
+      });
+
+      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)}`);
+      }
+
+      return result.data;
+    },
+    [apiKey, baseUrl, isReady]
+  );
+
+  const getOrgId = useCallback(async () => {
+    const response = await executeQuery(getMerchantOrgIdQuery);
+    return validateGraphQLOrgId(response.me.org?.id);
+  }, [executeQuery]);
+
+  const getColorsAndFrontendConfig =
+    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);
+        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,
+        };
+      } catch (err) {
+        Logger.logError(
+          "Error fetching graphql colors and frontend config",
+          err
+        );
+        return { colorsConfig: undefined, frontendConfig: undefined };
+      }
+    }, [executeQuery]);
+
+  const value = useMemo(
+    () => ({
+      executeQuery,
+      getOrgId,
+      getColorsAndFrontendConfig,
+      isReady,
+    }),
+    [executeQuery, getOrgId, getColorsAndFrontendConfig, isReady]
+  );
+
+  return (
+    <GraphQLContext.Provider value={value}>{children}</GraphQLContext.Provider>
+  );
+};
+
+export const useGraphQLClient = () => {
+  const context = useContext(GraphQLContext);
+  if (!context) {
+    throw new Error("useGraphQLClient must be used within a GraphQLProvider");
+  }
+  return context;
+};

package/src/contexts/graphqlContext/index.ts

@@ -0,0 +1 @@
+export * from "./graphqlContext";

package/src/contexts/localStorageContext/index.ts

@@ -0,0 +1 @@
+export * from "./localStorageContext";