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

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;
 };

package/src/contexts/localStorageContext/localStorageContext.tsx

@@ -1,37 +1,17 @@
-import React, {
-  createContext,
-  useContext,
-  useCallback,
-  useMemo,
-  useEffect,
-} from "react";
-import Logger from "src/application/logging/logger";
-import { LocalStorageEventListener } from "src/application/models/localStorageEventListener";
-
-export enum LocalStorageKeys {
-  ChatId = "v1-spiffy-chat-session-id",
-  SpiffyOnOverride = "spiffy_on",
-  EnviveOnOverride = "envive_on",
-}
-
-interface LocalStorageContextType {
-  setItem: (key: string, value: string) => void;
-  getItem: (key: string) => string | null;
-  setSpiffyOnFeatureFlag: (value: boolean | null) => void;
-  getSpiffyOnFeatureFlag: () => string | null;
-  attachListener: (listener: LocalStorageEventListener) => void;
-  detachListener: (listener: LocalStorageEventListener) => void;
-  isAvailable: boolean;
-}
+import React, { createContext, useContext, useCallback, useMemo, useEffect } from 'react';
+import Logger from '../../application/logging/logger';
+import {
+  LocalStorageContextType,
+  LocalStorageEventListener,
+  LocalStorageKeys,
+} from '@envive-ai/types';
 
 const LocalStorageContext = createContext<LocalStorageContextType | null>(null);
 
-export const LocalStorageProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
+export const LocalStorageProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const isAvailable = useMemo(() => {
     try {
-      return typeof window !== "undefined" && !!window.localStorage;
+      return typeof window !== 'undefined' && !!window.localStorage;
     } catch {
       return false;
     }
@@ -39,7 +19,7 @@ export const LocalStorageProvider: React.FC<{ children: React.ReactNode }> = ({
 
   useEffect(() => {
     if (!isAvailable) {
-      Logger.logError("localStorage is not available", undefined);
+      Logger.logError('localStorage is not available', undefined);
     }
   }, [isAvailable]);
 
@@ -47,11 +27,9 @@ export const LocalStorageProvider: React.FC<{ children: React.ReactNode }> = ({
     (key: string, value: string) => {
       if (!isAvailable) return;
       localStorage.setItem(key, value);
-      window.dispatchEvent(
-        new StorageEvent("storage", { key, newValue: value })
-      );
+      window.dispatchEvent(new StorageEvent('storage', { key, newValue: value }));
     },
-    [isAvailable]
+    [isAvailable],
   );
 
   const getItem = useCallback(
@@ -59,19 +37,19 @@ export const LocalStorageProvider: React.FC<{ children: React.ReactNode }> = ({
       if (!isAvailable) return null;
       return localStorage.getItem(key);
     },
-    [isAvailable]
+    [isAvailable],
   );
 
   const setSpiffyOnFeatureFlag = useCallback(
     (value: boolean | null): void => {
       if (!isAvailable) return;
       if (value === true) {
-        localStorage.setItem(LocalStorageKeys.SpiffyOnOverride, "true");
+        localStorage.setItem(LocalStorageKeys.SpiffyOnOverride, 'true');
       } else if (value === false) {
-        localStorage.setItem(LocalStorageKeys.SpiffyOnOverride, "false");
+        localStorage.setItem(LocalStorageKeys.SpiffyOnOverride, 'false');
       }
     },
-    [isAvailable]
+    [isAvailable],
   );
 
   const getSpiffyOnFeatureFlag = useCallback((): string | null => {
@@ -79,10 +57,7 @@ export const LocalStorageProvider: React.FC<{ children: React.ReactNode }> = ({
     return localStorage.getItem(LocalStorageKeys.SpiffyOnOverride);
   }, [isAvailable]);
 
-  const listenersCache = useMemo(
-    () => new Map<string, (event: StorageEvent) => void>(),
-    []
-  );
+  const listenersCache = useMemo(() => new Map<string, (event: StorageEvent) => void>(), []);
 
   const listenerForKey = useCallback(
     (listener: LocalStorageEventListener): ((event: StorageEvent) => void) => {
@@ -91,33 +66,30 @@ export const LocalStorageProvider: React.FC<{ children: React.ReactNode }> = ({
           if (event.key !== listener.storageKey) {
             return;
           }
-          Logger.logDebug(
-            `[spiffy-ai] Storage event key=${event.key}, value=`,
-            event.newValue
-          );
+          Logger.logDebug(`[spiffy-ai] Storage event key=${event.key}, value=`, event.newValue);
           listener.listener(event);
         };
         listenersCache.set(listener.storageKey, handler);
       }
       return listenersCache.get(listener.storageKey)!;
     },
-    [listenersCache]
+    [listenersCache],
   );
 
   const attachListener = useCallback(
     (listener: LocalStorageEventListener): void => {
       if (!isAvailable) return;
-      window.addEventListener("storage", listenerForKey(listener));
+      window.addEventListener('storage', listenerForKey(listener));
     },
-    [isAvailable, listenerForKey]
+    [isAvailable, listenerForKey],
   );
 
   const detachListener = useCallback(
     (listener: LocalStorageEventListener): void => {
       if (!isAvailable) return;
-      window.removeEventListener("storage", listenerForKey(listener));
+      window.removeEventListener('storage', listenerForKey(listener));
     },
-    [isAvailable, listenerForKey]
+    [isAvailable, listenerForKey],
   );
 
   const value = useMemo(
@@ -138,22 +110,16 @@ export const LocalStorageProvider: React.FC<{ children: React.ReactNode }> = ({
       attachListener,
       detachListener,
       isAvailable,
-    ]
+    ],
   );
 
-  return (
-    <LocalStorageContext.Provider value={value}>
-      {children}
-    </LocalStorageContext.Provider>
-  );
+  return <LocalStorageContext.Provider value={value}>{children}</LocalStorageContext.Provider>;
 };
 
 export const useLocalStorage = () => {
   const context = useContext(LocalStorageContext);
   if (!context) {
-    throw new Error(
-      "useLocalStorage must be used within a LocalStorageProvider"
-    );
+    throw new Error('useLocalStorage must be used within a LocalStorageProvider');
   }
   return context;
 };

package/src/contexts/newOrgConfigContext/newOrgConfigContext.tsx

@@ -1,30 +1,21 @@
-import React, { createContext, useContext, ReactNode, useMemo } from "react";
-import { useAtomValue, useSetAtom } from "jotai";
-import { useColorsAndFrontendConfig } from "src/hooks/GraphQLConfig/useGraphQLConfig";
-import { orgShortNameAtom } from "src/atoms/envive/enviveConfig";
-import { newOrgConfigAtom } from "src/atoms/org/newOrgConfigAtom"; // Import newOrgConfigAtom
-import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults"; // Import OrgConfigFeatureGate
-import { FeatureFlagServiceProvider } from "src/contexts/featureFlagServiceContext/featureFlagServiceContext"; // Import FeatureFlagServiceProvider
-import { GraphQlConfigValues } from "../graphqlContext";
-
-export type NewOrgConfigContextType = GraphQlConfigValues & {
-  loading: boolean;
-  error: Error | null;
-};
+import React, { createContext, useContext, ReactNode, useMemo, useEffect } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useColorsAndFrontendConfig } from 'src/hooks/GraphQLConfig/useGraphQLConfig';
+import { orgShortNameAtom } from 'src/atoms/envive/enviveConfig';
+import { newOrgConfigAtom } from 'src/atoms/org/newOrgConfigAtom';
+import { EnviveConfig, NewOrgConfigContextType, OrgConfigFeatureGate } from '@envive-ai/types';
+import { FeatureFlagServiceProvider } from '../featureFlagServiceContext';
+import { EnviveConfigContext } from '../enviveConfigContext';
 
-const NewOrgConfigContext = createContext<NewOrgConfigContextType | undefined>(
-  undefined
-);
+const NewOrgConfigContext = createContext<NewOrgConfigContextType | undefined>(undefined);
 
 interface NewOrgConfigProviderProps {
   children: ReactNode;
 }
 
-export const NewOrgConfigProvider: React.FC<NewOrgConfigProviderProps> = ({
-  children,
-}) => {
-  const orgShortName = useAtomValue(orgShortNameAtom);
-  const setNewOrgConfig = useSetAtom(newOrgConfigAtom);
+export const NewOrgConfigProvider: React.FC<NewOrgConfigProviderProps> = ({ children }) => {
+  
+  const { orgShortName } = useContext(EnviveConfigContext) as EnviveConfig;
 
   const { data: newConfig, loading, error } = useColorsAndFrontendConfig();
 
@@ -36,7 +27,7 @@ export const NewOrgConfigProvider: React.FC<NewOrgConfigProviderProps> = ({
     if (error) {
       return { ...newConfig, loading: false, error };
     }
-    setNewOrgConfig(newConfig);
+    
     return { ...newConfig, loading: false, error: null };
   }, [orgShortName, loading, error]);
 
@@ -54,10 +45,15 @@ export const NewOrgConfigProvider: React.FC<NewOrgConfigProviderProps> = ({
 
 export const useNewOrgConfigContext = () => {
   const context = useContext(NewOrgConfigContext);
+
+  const setNewOrgConfig = useSetAtom(newOrgConfigAtom);
+  useEffect(() => {
+    if (context) {
+      setNewOrgConfig(context);
+    }
+  }, [context, setNewOrgConfig]);
   if (context === undefined) {
-    throw new Error(
-      "useNewOrgConfigContext must be used within a NewOrgConfigProvider"
-    );
+    throw new Error('useNewOrgConfigContext must be used within a NewOrgConfigProvider');
   }
   return context;
 };

package/src/contexts/searchContext/searchContext.tsx

@@ -1,30 +1,23 @@
-import React, {
-  createContext,
-  useContext,
-  useCallback,
-  useMemo,
-  useEffect,
-} from "react";
-import { useAtomValue } from "jotai";
+import React, { createContext, useContext, useCallback, useMemo, useEffect } from 'react';
+import { useAtomValue } from 'jotai';
 import {
   Configuration,
   ResponseCategory,
   ResponseError,
   SearchApi,
-} from "@spiffy-ai/commerce-api-client";
-import { baseUrlAtom } from "src/atoms/envive/enviveConfig";
-import Logger from "src/application/logging/logger";
-import { useAppDetails } from "src/hooks/AppDetails/useAppDetails";
-import { useEnviveConfig } from "src/contexts/enviveConfigContext/enviveConfigContext";
-import { SessionRestartRequired } from "src/types/exceptions/sessionExceptions";
-import { UnsupportedProductException } from "src/types/exceptions/unsupportedProductExceptions";
-import { SearchParams, SearchResult } from "src/application/models/api/search";
+} from '@spiffy-ai/commerce-api-client';
+import { baseUrlAtom } from '../../atoms/envive/enviveConfig';
+import Logger from '../../application/logging/logger';
+import { SessionRestartRequired, UnsupportedProductException } from '../../exceptions';
+import { useAppDetails } from '../../hooks/AppDetails/useAppDetails';
+import { useEnviveConfig } from '../../contexts/enviveConfigContext/enviveConfigContext';
 import {
   clearSearchServiceFunction,
   setSearchServiceFunction,
-} from "src/atoms/search/searchServiceAdapter";
+} from '../../atoms/search/searchServiceAdapter';
+import { SearchContextValue, SearchParams, SearchResult } from '@envive-ai/types';
 
-const transformProductResponses = (products: SearchResult["products"]) =>
+const transformProductResponses = (products: SearchResult['products']) =>
   products.map((data) => ({
     id: data.id,
     responseId: data.response_id,
@@ -61,19 +54,19 @@ async function throwSessionRestartRequiredIf(errorMsg: string, error: unknown) {
 
   const errorResponse = await errorResponseBody(error);
   if (
-    errorResponse?.message?.toLowerCase() === "unsupported product" ||
-    errorResponse?.app_code?.toUpperCase() === "PRODUCT_NOT_FOUND"
+    errorResponse?.message?.toLowerCase() === 'unsupported product' ||
+    errorResponse?.app_code?.toUpperCase() === 'PRODUCT_NOT_FOUND'
   ) {
     throw new UnsupportedProductException();
   } else if (
-    errorResponse?.app_code?.toUpperCase() === "RESTART_SESSION" ||
-    errorResponse?.sub_code?.toUpperCase() === "NOT_FOUND"
+    errorResponse?.app_code?.toUpperCase() === 'RESTART_SESSION' ||
+    errorResponse?.sub_code?.toUpperCase() === 'NOT_FOUND'
   ) {
     Logger.logInfo(
-      "Session does not exist. Re-start session",
+      'Session does not exist. Re-start session',
       error,
       error.response,
-      errorResponse
+      errorResponse,
     );
     throw new SessionRestartRequired();
   }
@@ -82,20 +75,14 @@ async function throwSessionRestartRequiredIf(errorMsg: string, error: unknown) {
   throw error;
 }
 
-interface SearchContextValue {
-  searchProducts: (params: SearchParams) => Promise<SearchResult>;
-  isReady: boolean;
-}
-
 const SearchContext = createContext<SearchContextValue | undefined>(undefined);
 
-export const SearchProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
+export const SearchProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const { orgLevelApiKey, publicKey } = useEnviveConfig();
   const apiKey = orgLevelApiKey || publicKey; // Replicate apiKeyAtom logic
   const appDetails = useAppDetails();
   const baseUrl = useAtomValue(baseUrlAtom);
+  console.log('SearchProvider: inside SearchProvider');
 
   const isReady = Boolean(apiKey && appDetails && baseUrl);
 
@@ -106,8 +93,8 @@ export const SearchProvider: React.FC<{ children: React.ReactNode }> = ({
       accessToken: apiKey,
       basePath: baseUrl,
       headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
       },
     });
     return new SearchApi(config);
@@ -116,7 +103,7 @@ export const SearchProvider: React.FC<{ children: React.ReactNode }> = ({
   const searchProducts = useCallback(
     async (params: SearchParams): Promise<SearchResult> => {
       if (!isReady || !searchApi) {
-        throw new Error("SearchService not ready - missing dependencies");
+        throw new Error('SearchService not ready - missing dependencies');
       }
 
       try {
@@ -126,30 +113,26 @@ export const SearchProvider: React.FC<{ children: React.ReactNode }> = ({
           org_id: appDetails.orgId,
           user_id: appDetails.userId,
         });
-        const {
-          products,
-          filters,
-          search_response_id: searchResponseId,
-        } = response;
+        const { products, filters, search_response_id: searchResponseId } = response;
 
         return {
           products: transformProductResponses(products) || [],
           filters: filters || [],
           totalProductCount: products?.length || 0,
-          searchResponseId: searchResponseId || "",
+          searchResponseId: searchResponseId || '',
         };
       } catch (error) {
-        await throwSessionRestartRequiredIf("Failed to search products", error);
+        await throwSessionRestartRequiredIf('Failed to search products', error);
         // This part will not be reached if an exception is thrown, but it's required for type safety
         return {
           products: [],
           filters: [],
           totalProductCount: 0,
-          searchResponseId: "",
+          searchResponseId: '',
         };
       }
     },
-    [searchApi, isReady, appDetails]
+    [searchApi, isReady, appDetails],
   );
 
   // Register the search function with the adapter for use in atoms
@@ -170,18 +153,16 @@ export const SearchProvider: React.FC<{ children: React.ReactNode }> = ({
       searchProducts,
       isReady,
     }),
-    [searchProducts, isReady]
+    [searchProducts, isReady],
   );
 
-  return (
-    <SearchContext.Provider value={value}>{children}</SearchContext.Provider>
-  );
+  return <SearchContext.Provider value={value}>{children}</SearchContext.Provider>;
 };
 
 export const useSearchService = () => {
   const context = useContext(SearchContext);
   if (!context) {
-    throw new Error("useSearchService must be used within a SearchProvider");
+    throw new Error('useSearchService must be used within a SearchProvider');
   }
   return context;
 };