@envive-ai/react-hooks 0.2.6-alpha-marlo.0 → 0.2.6-alpha-arthur-3

package/src/contexts/amplitudeContext/amplitudeContext.tsx

@@ -7,19 +7,22 @@ import React, {
 } from "react";
 import { useAtomValue } from "jotai";
 import { createInstance } from "@amplitude/analytics-browser";
-import { FeatureGates } from "src/application/models/featureGates";
-import { OrgShortName } from "src/application/models";
-import { EventsDispatcher, SpiffyEvent } from "src/events";
+import {
+  FeatureGates,
+  OrgShortName,
+  LocalStorageKeys,
+  SpiffyEvent,
+  AmplitudeContextType,
+  SpiffyMetricsEventName,
+  TrackEventParams,
+} from "@envive-ai/types";
 import {
   amplitudeApiKeyAtom,
   contextSourceAtom,
   dataResidencyAtom,
   identifyingPrefixAtom,
 } from "src/atoms/envive/enviveConfig";
-import {
-  LocalStorageKeys,
-  useLocalStorage,
-} from "src/contexts/localStorageContext";
+import { useLocalStorage } from "src/contexts/localStorageContext";
 import { orgAnalyticsGoogleAnalyticsConfigAtom } from "src/atoms/org/orgAnalyticsConfig";
 import { userIdAtom } from "src/atoms/app";
 import { envAtom } from "src/atoms/envive/enviveConfig";
@@ -30,60 +33,19 @@ import type {
   Event,
   ServerZoneType,
 } from "@amplitude/analytics-types";
-import { useEnviveConfig } from "src/contexts/enviveConfigContext/enviveConfigContext";
-import {
-  useFeatureFlagService,
-} from "src/contexts/featureFlagServiceContext/featureFlagServiceContext";
-import { useUserIdentity } from "src/contexts/userIdentityContext/userIdentityContext";
-
-export enum SpiffyMetricsEventName {
-  BundleLoaded = "Bundle Loaded",
-  ChatLiveAgentBtnClick = "Chat Live Agent Btn Click",
-  ChatFloatingButtonVisible = "Chat Floating Button Visible",
-  ChatComponentVisible = "Chat Component Visible",
-  ChatComponentExpanded = "Chat Component Expanded",
-  ChatComponentCollapsed = "Chat Component Collapsed",
-  ChatUserMessageInput = "Chat User Message Input",
-  ChatSuggestionClicked = "Chat Suggestion Clicked",
-  ChatAssistantResponse = "Chat Assistant Response",
-  ProductCardClicked = "Product Card Clicked",
-  ProductReviewCardClicked = "Product Review Card Clicked",
-  AddToCartClicked = "Add to Cart Clicked",
-  PromptCardClicked = "Prompt Card Clicked",
-  SupportedEvent = "Supported Event",
-  SearchBackToResponseClicked = "Search Back to Response Clicked",
-  PerformanceMetrics = "Performance Metrics",
-  SearchBarClicked = "Search Bar Clicked",
-  OrderLookupStarted = "Order Lookup Started",
-  OrderLookupFormSubmitted = "Order Lookup Form Submitted",
-  SearchComponentVisible = "Search Component Visible",
-  SearchZeroStateSuggestionClicked = "Search Zero State Suggestion Clicked", // This is the scrolling list of suggestion buttons in global search
-  SearchInputStarted = "Search Input Started",
-  SearchQuerySubmitted = "Search Query Submitted",
-  // SearchAutocompleteViewed = 'Search Autocomplete Viewed', // TODO: add this when autocomplete is added
-  // SearchAutocompleteClicked = 'Search Autocomplete Clicked', // TODO: add this when autocomplete is added
-  SearchResultsViewed = "Search Results Viewed",
-  SearchTimeToFirstClick = "Search Time to First Click",
-  SearchZeroResultsRate = "Search Zero Results Rate",
-  SearchFilterClicked = "Search Filter Clicked",
-  SearchSortClicked = "Search Sort Clicked",
-}
+import { EnviveConfigContext, useEnviveConfig } from "src/contexts/enviveConfigContext/enviveConfigContext";
+import { useFeatureFlagService } from "src/contexts/featureFlagServiceContext/featureFlagServiceContext";
+import { EventsDispatcher } from "src/events";
 
-interface TrackEventParams {
-  eventName: SpiffyMetricsEventName;
-  eventProps?: Record<string, unknown>;
-  eventGroups?: Record<string, unknown>;
-  alsoSendToGoogleAnalytics?: boolean;
-}
+const AmplitudeContext = createContext<AmplitudeContextType | null>(null);
 
-interface AmplitudeContextType {
-  trackEvent: (params: TrackEventParams) => Promise<void>;
-  isReady: boolean;
-  setSupplementalDefaultProps: (props: Record<string, unknown>) => void;
+if (typeof window !== 'undefined') {
+  Logger.logInfo('AmplitudeContext: window is defined');
+  (window as any).AmplitudeReact = React;
+} else {
+  Logger.logInfo('AmplitudeContext: window is not defined');
 }
 
-const AmplitudeContext = createContext<AmplitudeContextType | null>(null);
-
 export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
@@ -95,15 +57,15 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
   const contextSource = useAtomValue(contextSourceAtom);
   const identifyingPrefix = useAtomValue(identifyingPrefixAtom);
   const { getItem } = useLocalStorage();
-  const {
-    publicKey,
+  console.log('AmplitudeProvider: getting envive config');
+
+  const {publicKey,
     featureOverrides,
     variantUrlOverride,
     variantInfoOverride,
     show,
     orgShortName,
-    featureGates,
-  } = useEnviveConfig();
+    featureGates } = useContext(EnviveConfigContext) || {};
 
   const { featureFlagService } = useFeatureFlagService();
 
@@ -353,7 +315,7 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
         });
         const encoder = new TextEncoder();
         const data = encoder.encode(eventData);
-         // calculate a hash of the event properties to use as the insert_id so that duplicate events
+        // calculate a hash of the event properties to use as the insert_id so that duplicate events
         // are automatically dropped by Amplitude
         const hashBuffer = await crypto.subtle.digest("SHA-256", data);
         const hashArray = Array.from(new Uint8Array(hashBuffer));

package/src/contexts/atomProvider/atomProvider.tsx

@@ -0,0 +1,6 @@
+import { Provider, getDefaultStore } from "jotai";
+
+export const AtomProvider = ({ children }: { children: React.ReactNode }) => {
+  const store = getDefaultStore();
+  return <Provider store={store}>{children}</Provider>;
+}

package/src/contexts/atomProvider/index.ts

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

package/src/contexts/cdnContext/cdnContext.tsx

@@ -1,12 +1,7 @@
 import React, { createContext, useContext, useCallback, useMemo } from "react";
 import { useAtomValue } from "jotai";
 import { cdnUrlAtom } from "../../atoms/envive/enviveConfig";
-
-interface CdnContextType {
-  cdnUrl: string;
-  getCdnBasePath: () => string;
-  getAssetURL: (assetName: string, orgShortName: string) => string;
-}
+import { CdnContextType } from "@envive-ai/types";
 
 const CdnContext = createContext<CdnContextType | null>(null);
 

package/src/contexts/enviveConfigContext/enviveConfigContext.tsx

@@ -1,31 +1,10 @@
-import React, { createContext, useContext, ReactNode, useEffect } from "react";
+import React, { createContext, useContext, useEffect, useMemo } from "react";
 import { useSetAtom, useAtomValue } from "jotai";
-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";
+import { enviveConfigAtom } from "../../atoms/envive/enviveConfig";
+import Logger from "../../application/logging/logger";
+import { EnviveConfig, EnviveConfigProviderProps } from "@envive-ai/types";
 
-const EnviveConfigContext = createContext<EnviveConfig | undefined>(undefined);
-
-interface EnviveConfigProviderProps {
-  children: ReactNode;
-  amplitudeApiKey?: string;
-  dataResidency?: string;
-  env?: string;
-  baseUrl?: string;
-  reactAppName?: string;
-  cdnUrl?: string;
-  contextSource?: string;
-  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 EnviveConfigContext = createContext<EnviveConfig | undefined>(undefined);
 
 export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
   children,
@@ -46,7 +25,6 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
   publicKey,
   featureGates, // Destructure new prop
 }) => {
-  const setEnviveConfig = useSetAtom(enviveConfigAtom);
 
   const config: EnviveConfig = {
     amplitudeApiKey,
@@ -67,11 +45,6 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
     featureGates, // Add to config
   };
 
-  useEffect(() => {
-    setEnviveConfig(config);
-    Logger.logDebug("EnviveConfigProvider: Setting EnviveConfig", config);
-  }, [setEnviveConfig, config]);
-
   return (
     <EnviveConfigContext.Provider value={config}>
       {config ? children : null}
@@ -80,7 +53,23 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
 };
 
 export const useEnviveConfig = (): EnviveConfig => {
-  const config = useAtomValue(enviveConfigAtom);
+  const context = useContext(EnviveConfigContext);
+  const setEnviveConfig = useSetAtom(enviveConfigAtom);
+
+  console.log('EnviveConfigProvider: setting up useEffect to setEnviveConfig', context);
+  useEffect(() => {
+    console.log('EnviveConfigProvider: useEffect to setEnviveConfig', context, setEnviveConfig);
+    if (context) {
+      setEnviveConfig(context);
+    }
+    Logger.logDebug("EnviveConfigProvider: Setting EnviveConfig", context);
+  }, [setEnviveConfig, context]);
+
+  if (!context) {
+    throw new Error(
+      "useEnviveConfig must be used within an EnviveConfigProvider"
+    );
+  }
 
-  return config ? config : {};
+  return context;
 };

package/src/contexts/enviveCssContext/enviveCssContext.tsx

@@ -1,13 +1,8 @@
-import React, { ReactNode } from "react";
-import { useNewOrgConfig } from "src/hooks/NewOrgConfig";
+import React from 'react';
+import { useNewOrgConfig } from '../../hooks/NewOrgConfig';
+import { EnviveCssProviderProps } from '@envive-ai/types';
 
-interface EnviveCssProviderProps {
-  children: ReactNode;
-}
-
-export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({
-  children,
-}) => {
+export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({ children }) => {
   const { colorsConfig, frontendConfig, loading } = useNewOrgConfig();
   let merchantThemeCss = `* {}`;
   if (colorsConfig && !loading) {
@@ -39,9 +34,7 @@ export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({
       {frontendConfig ? (
         <style id="merchant-css-overrides">{`${frontendConfig.merchantOverrideCss}`}</style>
       ) : null}
-      {colorsConfig ? (
-        <style id="merchant-css-colors">{`${merchantThemeCss}`}</style>
-      ) : null}
+      {colorsConfig ? <style id="merchant-css-colors">{`${merchantThemeCss}`}</style> : null}
 
       {children}
     </>

package/src/contexts/featureFlagContext/featureFlagContext.tsx

@@ -1,23 +1,13 @@
-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
-);
+import React, { createContext, useContext, useCallback, useMemo } from 'react';
+import Logger from '../../application/logging/logger';
+import { StatsigFeatureGate } from '@spiffy-ai/commerce-api-client';
+import { useSessionStorage } from '../../contexts/sessionStorageContext';
+import { useEnviveConfig } from '../../contexts/enviveConfigContext/enviveConfigContext';
+import { FeatureFlagContextType, FeatureGates, OrgConfigFeatureGate } from '@envive-ai/types';
+
+const FEATURE_FLAGS_STORAGE_KEY = 'spiffy-feature-flags';
+
+const FeatureFlagContext = createContext<FeatureFlagContextType | undefined>(undefined);
 
 export const FeatureFlagProvider: React.FC<{
   featureGates: OrgConfigFeatureGate[];
@@ -34,12 +24,12 @@ export const FeatureFlagProvider: React.FC<{
       const value = paramsObj[featureGate];
 
       if (value != null) {
-        return value === "true";
+        return value === 'true';
       }
 
       return undefined;
     },
-    []
+    [],
   );
 
   const getWindowFeatureGateOverrides = useCallback(
@@ -51,7 +41,7 @@ export const FeatureFlagProvider: React.FC<{
 
       return undefined;
     },
-    [featureOverrides]
+    [featureOverrides],
   );
 
   const getStoredFeatureGateOverrides = useCallback(
@@ -64,15 +54,15 @@ export const FeatureFlagProvider: React.FC<{
           return featureFlagsObj[featureGate];
         } catch (err) {
           Logger.logError(
-            "[spiffy-ai] getStoredFeatureGateOverrides: error parsing feature flags",
-            err
+            '[spiffy-ai] getStoredFeatureGateOverrides: error parsing feature flags',
+            err,
           );
         }
       }
 
       return undefined;
     },
-    []
+    [],
   );
 
   const getFeatureFlagOverride = useCallback(
@@ -80,7 +70,7 @@ export const FeatureFlagProvider: React.FC<{
       const queryOverride = getQueryParamFeatureGateOverrides(featureGate);
       if (queryOverride != null) {
         Logger.logDebug(
-          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by URL param. New value: ${queryOverride}`
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by URL param. New value: ${queryOverride}`,
         );
         return queryOverride;
       }
@@ -88,7 +78,7 @@ export const FeatureFlagProvider: React.FC<{
       const windowOverride = getWindowFeatureGateOverrides(featureGate);
       if (windowOverride != null) {
         Logger.logDebug(
-          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by window param. New value: ${windowOverride}`
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by window param. New value: ${windowOverride}`,
         );
         return windowOverride;
       }
@@ -96,7 +86,7 @@ export const FeatureFlagProvider: React.FC<{
       const storedOverride = getStoredFeatureGateOverrides(featureGate);
       if (storedOverride != null) {
         Logger.logDebug(
-          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by stored value. New value: ${storedOverride}`
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by stored value. New value: ${storedOverride}`,
         );
         return storedOverride;
       }
@@ -107,7 +97,7 @@ export const FeatureFlagProvider: React.FC<{
       getQueryParamFeatureGateOverrides,
       getWindowFeatureGateOverrides,
       getStoredFeatureGateOverrides,
-    ]
+    ],
   );
 
   const isFeatureGateEnabled = useCallback(
@@ -121,7 +111,7 @@ export const FeatureFlagProvider: React.FC<{
 
       if (gateValue == null || gateValue.value == null) {
         Logger.logDebug(
-          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} value is undefined - returning false`
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} value is undefined - returning false`,
         );
 
         return false;
@@ -129,7 +119,7 @@ export const FeatureFlagProvider: React.FC<{
 
       return gateValue.value;
     },
-    [featureGates, getFeatureFlagOverride]
+    [featureGates, getFeatureFlagOverride],
   );
 
   const isClientSessionEnabled = useCallback((): boolean => {
@@ -137,9 +127,7 @@ export const FeatureFlagProvider: React.FC<{
     const isEnabled =
       gates == null ||
       gates?.filter(
-        (gate) =>
-          gate.name === FeatureGates.IsClientSessionEnabled &&
-          gate.value === true
+        (gate) => gate.name === FeatureGates.IsClientSessionEnabled && gate.value === true,
       ).length > 0;
 
     return isEnabled;
@@ -150,7 +138,7 @@ export const FeatureFlagProvider: React.FC<{
       Object.values(FeatureGates).map((featureGate: FeatureGates) => [
         featureGate,
         isFeatureGateEnabled(featureGate),
-      ])
+      ]),
     );
   }, [isFeatureGateEnabled]);
 
@@ -169,25 +157,16 @@ export const FeatureFlagProvider: React.FC<{
       getFeatureFlags,
       persistFeatureGateOverrides,
     }),
-    [
-      isFeatureGateEnabled,
-      isClientSessionEnabled,
-      getFeatureFlags,
-      persistFeatureGateOverrides,
-    ]
+    [isFeatureGateEnabled, isClientSessionEnabled, getFeatureFlags, persistFeatureGateOverrides],
   );
 
-  return (
-    <FeatureFlagContext.Provider value={value}>
-      {children}
-    </FeatureFlagContext.Provider>
-  );
+  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");
+    throw new Error('useFeatureFlag must be used within a FeatureFlagProvider');
   }
   return context;
 };

package/src/contexts/featureFlagServiceContext/featureFlagServiceContext.tsx

@@ -1,6 +1,5 @@
 import React, { createContext, useContext, useMemo, ReactNode } from "react";
-import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults";
-import { FeatureGates } from "src/application/models/featureGates";
+import { OrgConfigFeatureGate, FeatureGates } from "@envive-ai/types";
 import Logger from "src/application/logging/logger";
 
 // This is the class that was previously implicitly used or defined elsewhere
@@ -49,6 +48,7 @@ export class FeatureFlagService {
 }
 
 export interface FeatureFlagContextType {
+  isFeatureGateEnabled(IsRecommendedProductsEnabled: FeatureGates): unknown;
   featureFlagService: FeatureFlagService | undefined;
 }
 
@@ -69,8 +69,16 @@ export const FeatureFlagServiceProvider: React.FC<
     [featureGates]
   );
 
+  const contextValue = useMemo(
+    () => ({
+      featureFlagService,
+      isFeatureGateEnabled: featureFlagService.isFeatureGateEnabled,
+    }),
+    [featureFlagService]
+  );
+
   return (
-    <FeatureFlagServiceContext.Provider value={{ featureFlagService }}>
+    <FeatureFlagServiceContext.Provider value={contextValue}>
       {children}
     </FeatureFlagServiceContext.Provider>
   );

package/src/contexts/graphqlContext/graphqlContext.tsx

@@ -1,61 +1,20 @@
-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 { createContext, useContext, useCallback, useMemo } from 'react';
+import { useAtomValue } from 'jotai';
+import { baseUrlAtom, orgLevelApiKeyAtom } from '../../atoms/envive/enviveConfig';
+import { getMerchantOrgIdQuery } from '../../application/models/graphql/queries/getMerchantOrgIdQuery';
+import { validateGraphQLOrgId } from '../../application/models/validators/validateGraphQLOrgId';
+import Logger from '../../application/logging/logger';
+import { transformSnakeToCamel } from '../../application/models';
+import { configVersion } from '../../util/configVersion';
 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;
-}
+  GraphQLContextValue,
+  GraphQLProviderProps,
+  GraphQlConfigValues,
+  ColorsConfigResponse,
+  FrontendConfigResponse,
+  EnviveConfig,
+} from '@envive-ai/types';
+import { EnviveConfigContext, useEnviveConfig } from '../enviveConfigContext';
 
 const GraphQLContext = createContext<GraphQLContextValue | null>(null);
 
@@ -70,26 +29,23 @@ const colorsAndFrontendConfigQuery = () => `
   }
 `;
 
-type GraphQLProviderProps = {
-  children: ReactNode;
-};
-
 export const GraphQLProvider = ({ children }: GraphQLProviderProps) => {
-  const apiKey = useAtomValue(orgLevelApiKeyAtom);
-  const baseUrl = useAtomValue(baseUrlAtom);
+  const { orgLevelApiKey: apiKey, baseUrl } = useContext(EnviveConfigContext) as EnviveConfig;
+  // 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");
+        throw new Error('GraphQL client not ready - missing apiKey or baseUrl');
       }
 
       const response = await fetch(`${baseUrl}/v1/graphql`, {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
           Authorization: `Bearer ${apiKey}`,
         },
         body: JSON.stringify({ query, variables }),
@@ -106,7 +62,7 @@ export const GraphQLProvider = ({ children }: GraphQLProviderProps) => {
 
       return result.data;
     },
-    [apiKey, baseUrl, isReady]
+    [apiKey, baseUrl, isReady],
   );
 
   const getOrgId = useCallback(async () => {
@@ -114,32 +70,26 @@ export const GraphQLProvider = ({ children }: GraphQLProviderProps) => {
     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 };
+  const getColorsAndFrontendConfig = useCallback(async (): Promise<GraphQlConfigValues> => {
+    try {
+      const query = await colorsAndFrontendConfigQuery();
+      if (!query) {
+        throw new Error('Colors and frontend config query is not defined');
       }
-    }, [executeQuery]);
+      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(
     () => ({
@@ -148,18 +98,16 @@ export const GraphQLProvider = ({ children }: GraphQLProviderProps) => {
       getColorsAndFrontendConfig,
       isReady,
     }),
-    [executeQuery, getOrgId, getColorsAndFrontendConfig, isReady]
+    [executeQuery, getOrgId, getColorsAndFrontendConfig, isReady],
   );
 
-  return (
-    <GraphQLContext.Provider value={value}>{children}</GraphQLContext.Provider>
-  );
+  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");
+    throw new Error('useGraphQLClient must be used within a GraphQLProvider');
   }
   return context;
 };