@envive-ai/react-hooks 0.1.4 → 0.1.6

package/src/atoms/chat/replies.ts

@@ -1,51 +1,59 @@
-import { atom } from 'jotai';
-import { Message, MessageType } from 'src/application/models';
+import { atom } from "jotai";
+import { Message, MessageType } from "src/application/models";
 import {
   userHasRepliedAtom,
   messagesAtom,
   userQueryAtom,
   replyEventCategoryAtom,
-} from 'src/atoms/chat';
-import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
-import { AmplitudeAdapter, SpiffyMetricsEventName } from 'src/adapters/amplitude';
-import { queueUserEventAtom } from './messageQueue';
+} from "src/atoms/chat";
+import { UserEventCategory } from "@spiffy-ai/commerce-api-client";
+import { queueUserEventAtom } from "./messageQueue";
+import { SpiffyMetricsEventName } from "src/contexts/amplitudeContext";
+import { amplitudeTrackEventAtom } from "src/atoms/amplitude/amplitudeTrackEventAtom";
 
 type HandleReplyParams = {
   message: Message;
   userTyped: boolean;
 };
 
-export const handleReplyAtom = atom(null, (get, set, { message, userTyped }: HandleReplyParams) => {
-  if (message.type !== MessageType.QueryTyped) {
-    return;
-  }
+export const handleReplyAtom = atom(
+  null,
+  (get, set, { message, userTyped }: HandleReplyParams) => {
+    if (message.type !== MessageType.QueryTyped) {
+      return;
+    }
 
-  const queryTyped = message.metadata.content;
+    const trackEvent = get(amplitudeTrackEventAtom);
+    const queryTyped = message.metadata.content;
 
-  set(replyEventCategoryAtom, UserEventCategory.QueryTyped);
-  set(userQueryAtom, queryTyped);
-  set(messagesAtom, [...get(messagesAtom), [message]]);
-  set(userHasRepliedAtom, true);
-  set(queueUserEventAtom, {
-    eventId: message.id,
-    createdAt: message.createdAt,
-    category: UserEventCategory.QueryTyped,
-    attributes: {
-      query: queryTyped,
-    },
-  });
-  AmplitudeAdapter.trackEvent({
-    eventName: SpiffyMetricsEventName.ChatUserMessageInput,
-    eventProps: {
-      message_id: message.id,
-      message_role: message.role,
-      message_type: message.type,
-      message_metadata: {
-        content: AmplitudeAdapter.amplitudeSafeString(message?.metadata?.content),
-        created_at: message.createdAt,
-        user_typed: userTyped,
+    set(replyEventCategoryAtom, UserEventCategory.QueryTyped);
+    set(userQueryAtom, queryTyped);
+    set(messagesAtom, [...get(messagesAtom), [message]]);
+    set(userHasRepliedAtom, true);
+    set(queueUserEventAtom, {
+      eventId: message.id,
+      createdAt: message.createdAt,
+      category: UserEventCategory.QueryTyped,
+      attributes: {
+        query: queryTyped,
       },
-    },
-    alsoSendToGoogleAnalytics: true,
-  });
-});
+    });
+
+    if (trackEvent) {
+      trackEvent({
+        eventName: SpiffyMetricsEventName.ChatUserMessageInput,
+        eventProps: {
+          message_id: message.id,
+          message_role: message.role,
+          message_type: message.type,
+          message_metadata: {
+            content: message?.metadata?.content, // Removed amplitudeSafeString
+            created_at: message.createdAt,
+            user_typed: userTyped,
+          },
+        },
+        alsoSendToGoogleAnalytics: true,
+      });
+    }
+  }
+);

package/src/atoms/envive/enviveConfig.ts

@@ -2,7 +2,7 @@ import Logger from "src/application/logging/logger";
 import { atom } from "jotai";
 import { EnviveConfig } from "src/contexts/types";
 import { ContextSourceEnum } from "@spiffy-ai/commerce-api-client";
-import { LocalStorageService } from "src/application/service";
+import { LocalStorageKeys } from "src/contexts/localStorageContext";
 
 const internalEnviveConfigAtom = atom<EnviveConfig | undefined>(undefined);
 
@@ -48,15 +48,13 @@ export const cdnUrlAtom = atom((get) => {
 export const contextSourceAtom = atom((get) => {
   const config = get(enviveConfigAtom);
 
-  if (window.IS_STORYBOOK) {
-    return ContextSourceEnum.Test;
-  }
-
   if (config?.contextSource) {
     return config.contextSource as ContextSourceEnum;
   }
 
-  const spiffyOnFeatureFlagSet = LocalStorageService.getSpiffyOnFeatureFlag();
+  const spiffyOnFeatureFlagSet = window.localStorage.getItem(
+    LocalStorageKeys.SpiffyOnOverride
+  );
   if (spiffyOnFeatureFlagSet === "true") {
     return ContextSourceEnum.Playground;
   }
@@ -79,3 +77,9 @@ export const identifyingPrefixAtom = atom((get) => {
   Logger.logDebug("enviveConfig.ts: Accessing identifyingPrefix", config);
   return config?.identifyingPrefix || "spiffy";
 });
+
+export const publicKeyAtom = atom((get) => {
+  const config = get(enviveConfigAtom);
+  Logger.logDebug("enviveConfig.ts: Accessing publicKey", config);
+  return config?.publicKey;
+});

package/src/atoms/org/graphqlConfig.ts

@@ -2,15 +2,21 @@ import { atom } from "jotai";
 import { ColorMapping } from "src/application/models/colorsConfig";
 import { FrontendConfig } from "src/application/models/frontendConfig";
 import { getOrgInfo } from "src/application/models/supportedOrgs";
-import { orgShortNameAtom } from "src/atoms/org/org";
+import { orgShortNameAtom } from "../envive/enviveConfig";
+import { FeatureFlagContextType } from "src/contexts/featureFlagServiceContext"; // Import FeatureFlagContextType from new context
 
-const internalGraphQLColorsConfigAtom = atom<ColorMapping | undefined>(
+export const internalGraphQLColorsConfigAtom = atom<ColorMapping | undefined>(
   undefined
 );
 const internalGraphQLFrontendConfigAtom = atom<FrontendConfig | undefined>(
   undefined
 );
 
+export const orgIdAtom = atom<string | undefined>(undefined); // New atom for orgId
+export const featureFlagServiceAtom = atom<FeatureFlagContextType | undefined>(
+  undefined
+); // New atom for FeatureFlagService
+
 export const colorsConfigAtom = atom(
   async (get) => {
     const colors = get(internalGraphQLColorsConfigAtom);
@@ -21,7 +27,7 @@ export const colorsConfigAtom = atom(
     const orgInfo = await getOrgInfo(orgShortName);
     const orgUIConfigColors = orgInfo.orgColors();
 
-    // Only merge if orgUIConfigColors is a proper ColorMapping, not an empty object
+    // If we have GraphQL colors, merge them with org colors (GraphQL takes priority)
     if (
       colors &&
       orgUIConfigColors &&
@@ -30,7 +36,18 @@ export const colorsConfigAtom = atom(
       return { ...orgUIConfigColors, ...colors } as ColorMapping;
     }
 
-    return colors;
+    // If we have GraphQL colors but no org colors, return GraphQL colors
+    if (colors) {
+      return colors;
+    }
+
+    // If we have org colors but no GraphQL colors, return org colors
+    if (orgUIConfigColors && Object.keys(orgUIConfigColors).length > 0) {
+      return orgUIConfigColors as ColorMapping;
+    }
+
+    // Fallback to undefined if neither are available
+    return undefined;
   },
   (_, set, value: ColorMapping | undefined) => {
     set(internalGraphQLColorsConfigAtom, value);

package/src/atoms/org/index.ts

@@ -1,7 +1,7 @@
-export * from './customerService';
-export * from './graphqlConfig';
-export * from './merchantCss';
-export * from './org';
-export * from './orgAnalyticsConfig';
-export * from './orgPageConfig';
-export * from './orgUIConfig';
+export * from "./customerService";
+export * from "./graphqlConfig";
+// export * from "./org";
+export * from "./orgAnalyticsConfig";
+export * from "./orgPageConfig";
+export * from "./newOrgConfigAtom";
+// export * from "./orgUIConfig";

package/src/atoms/org/newOrgConfigAtom.ts

@@ -0,0 +1,8 @@
+import { atom } from "jotai";
+import { BasicOrgInfoType } from "src/application/models";
+import { GraphQlConfigValues } from "src/contexts";
+import { NewOrgConfigContextType } from "src/contexts/newOrgConfigContext";
+
+export const newOrgConfigAtom = atom<
+  (GraphQlConfigValues & BasicOrgInfoType) | null
+>(null);

package/src/atoms/org/orgPageConfig.ts

@@ -1,18 +1,19 @@
 import { atom } from "jotai";
 import { getOrgInfo } from "src/application/models";
 import { frontendConfigAtom } from "src/atoms/org/graphqlConfig";
-import { orgConfigAtom } from "src/atoms/org/org";
+import { enviveConfigAtom } from "src/atoms/envive/enviveConfig";
 import { PageVariantConfig } from "src/contexts/types";
 
 const internalInjectedPageVariantsAtom = atom<PageVariantConfig[]>([]);
 
 export const orgPageConfigAtom = atom(
   async (get) => {
-    const orgConfig = get(orgConfigAtom);
-    if (!orgConfig) {
-      throw new Error("orgConfig is not available");
+    const enviveConfig = get(enviveConfigAtom);
+    const orgShortName = enviveConfig?.orgShortName;
+    if (!orgShortName) {
+      throw new Error("orgShortName is not available from enviveConfig");
     }
-    const orgInfo = await getOrgInfo(orgConfig.org.org.shortName);
+    const orgInfo = await getOrgInfo(orgShortName);
     const frontendConfig = get(frontendConfigAtom);
     const injectedPageVariants = get(internalInjectedPageVariantsAtom);
     const localOrgPageConfig = orgInfo.orgPageConfig();

package/src/atoms/search/chatSearch.ts

@@ -14,7 +14,7 @@ import {
   userQueryAtom,
 } from "src/atoms/chat";
 import { queueUserEventAtom } from "../chat/messageQueue";
-import { orgUIConfigAtom } from "../org";
+import { newOrgConfigAtom } from "../org";
 import { ProductFilters } from "./productFilters";
 import { ProductSorter } from "./productSorter";
 import { ChatSearchStateType, ProductSorting } from "./types";
@@ -75,8 +75,11 @@ const buildChatSearchTurn = (
 };
 
 const chatSearchFilterConfigAtom = atom((get) => {
-  const orgUIConfig = get(orgUIConfigAtom);
-  return orgUIConfig?.searchConfig?.searchFilterConfig || [];
+  const newOrgConfig = get(newOrgConfigAtom);
+  return (
+    newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig?.searchFilterConfig ||
+    []
+  );
 });
 
 const searchMapAtom = atom((get) => {
@@ -107,8 +110,11 @@ export const selectedFilterOptionsAtom = atom<SelectedChatSearchFilterOption[]>(
 );
 
 export const additiveDynamicFiltersAtom = atom((get) => {
-  const orgUIConfig = get(orgUIConfigAtom);
-  return orgUIConfig?.searchConfig?.additiveDynamicFilters ?? false;
+  const newOrgConfig = get(newOrgConfigAtom);
+  return (
+    newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig
+      ?.additiveDynamicFilters ?? false
+  );
 });
 
 export const createChatSearchFilterOption = (

package/src/atoms/search/searchAPI.ts

@@ -1,10 +1,10 @@
-import { atom } from 'jotai';
-import { SearchResult, SearchParams } from 'src/application/models/api/search';
-import SearchService from 'src/application/service/searchService';
-import { ProductSorting } from './types';
-import { ProductFilters } from './productFilters';
-import { ProductSorter } from './productSorter';
-import { orgUIConfigAtom } from '../org';
+import { atom } from "jotai";
+import { SearchResult, SearchParams } from "src/application/models/api/search";
+import { ProductSorting } from "./types";
+import { ProductFilters } from "./productFilters";
+import { ProductSorter } from "./productSorter";
+import { newOrgConfigAtom } from "../org";
+import { getSearchServiceFunction } from "./searchServiceAdapter";
 
 export type SelectedFilterOption = {
   id: string; // "filterId:filterItemId" - maintains backward compatibility for comparisons
@@ -27,13 +27,15 @@ export const searchAtom = atom<SearchState>({
   lastQuery: null,
 });
 
-export const searchProductSortingAtom = atom<ProductSorting>(ProductSorting.FEATURED);
+export const searchProductSortingAtom = atom<ProductSorting>(
+  ProductSorting.FEATURED
+);
 export const searchSelectedFiltersAtom = atom<SelectedFilterOption[]>([]);
 
 export const createFilterOption = (
   filterId: string,
   filterItemId: string,
-  displayName: string,
+  displayName: string
 ): SelectedFilterOption => ({
   id: `${filterId}:${filterItemId}`,
   displayName,
@@ -53,7 +55,7 @@ export const searchParamsAtom = atom(
   (get) => get(internalSearchParamsAtom),
   (_, set, value: { id: string | null; query: string | null }) => {
     set(internalSearchParamsAtom, value);
-  },
+  }
 );
 export const internalSearchSystemStateAtom = atom<boolean>(false);
 
@@ -65,9 +67,9 @@ export const searchSystemAtom = atom(
     }
     const stateChangeHandler = () => {
       const params = new URLSearchParams(window.location.search);
-      if (params.get('es') === 'true') {
-        const id = params.get('esi');
-        const query = params.get('esq');
+      if (params.get("es") === "true") {
+        const id = params.get("esi");
+        const query = params.get("esq");
         set(searchParamsAtom, { id, query });
       } else {
         set(searchParamsAtom, { id: null, query: null });
@@ -75,29 +77,33 @@ export const searchSystemAtom = atom(
     };
     if (value) {
       set(internalSearchSystemStateAtom, true);
-      window.addEventListener('popstate', stateChangeHandler);
+      window.addEventListener("popstate", stateChangeHandler);
       // Also trigger the hash change handler to set the initial state
       stateChangeHandler();
     } else {
       set(internalSearchSystemStateAtom, false);
-      window.removeEventListener('popstate', stateChangeHandler);
+      window.removeEventListener("popstate", stateChangeHandler);
     }
-  },
+  }
 );
 
 export const filteredSearchProductsAtom = atom((get) => {
   const searchData = get(searchAtom).data;
   const sorting = get(searchProductSortingAtom);
   const selectedFilters = get(searchSelectedFiltersAtom);
-  const orgConfig = get(orgUIConfigAtom);
+  const newOrgConfig = get(newOrgConfigAtom);
 
-  if (!searchData?.products) return [];
+  if (
+    !searchData?.products ||
+    !newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig
+  )
+    return [];
 
   const filteredProducts = ProductFilters.filterProducts(
     searchData.products,
-    orgConfig.searchConfig.searchFilterConfig,
+    newOrgConfig.frontendConfig.uiConfigs.searchConfig.searchFilterConfig,
     selectedFilters,
-    orgConfig.searchConfig.additiveDynamicFilters,
+    newOrgConfig.frontendConfig.uiConfigs.searchConfig.additiveDynamicFilters
   );
 
   return ProductSorter.sort(filteredProducts, sorting);
@@ -106,31 +112,41 @@ export const filteredSearchProductsAtom = atom((get) => {
 export const searchFiltersAtom = atom((get) => {
   const searchData = get(searchAtom).data;
   const selectedFilters = get(searchSelectedFiltersAtom);
-  const orgConfig = get(orgUIConfigAtom);
+  const newOrgConfig = get(newOrgConfigAtom);
 
-  if (!searchData?.products) return [];
+  if (
+    !searchData?.products ||
+    !newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig
+  )
+    return [];
 
   return ProductFilters.getFiltersForProducts(
     searchData.products,
-    orgConfig.searchConfig.searchFilterConfig,
-    selectedFilters,
+    newOrgConfig.frontendConfig.uiConfigs.searchConfig.searchFilterConfig,
+    selectedFilters
   );
 });
 
-export const addSearchFilterAtom = atom(null, (get, set, filter: SelectedFilterOption) => {
-  const current = get(searchSelectedFiltersAtom);
-  if (!current.some((f) => f.id === filter.id)) {
-    set(searchSelectedFiltersAtom, [...current, filter]);
+export const addSearchFilterAtom = atom(
+  null,
+  (get, set, filter: SelectedFilterOption) => {
+    const current = get(searchSelectedFiltersAtom);
+    if (!current.some((f) => f.id === filter.id)) {
+      set(searchSelectedFiltersAtom, [...current, filter]);
+    }
   }
-});
+);
 
-export const removeSearchFilterAtom = atom(null, (get, set, filterId: string) => {
-  const current = get(searchSelectedFiltersAtom);
-  set(
-    searchSelectedFiltersAtom,
-    current.filter((f) => f.id !== filterId),
-  );
-});
+export const removeSearchFilterAtom = atom(
+  null,
+  (get, set, filterId: string) => {
+    const current = get(searchSelectedFiltersAtom);
+    set(
+      searchSelectedFiltersAtom,
+      current.filter((f) => f.id !== filterId)
+    );
+  }
+);
 
 export const clearSearchFiltersAtom = atom(null, (_, set) => {
   set(searchSelectedFiltersAtom, []);
@@ -140,29 +156,31 @@ export const performSearchAtom = atom(
   null,
   async (get, set, params: SearchParams, allowRedirect = false) => {
     const currentState = get(searchAtom);
-    const orgUIConfig = get(orgUIConfigAtom);
-    const redirectSearchResultsUrl = orgUIConfig.searchConfig?.redirectSearchResultsUrl;
+    const newOrgConfig = get(newOrgConfigAtom);
+    const redirectSearchResultsUrl =
+      newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig
+        ?.redirectSearchResultsUrl;
 
     if (allowRedirect && redirectSearchResultsUrl) {
       const redirectUrl = new URL(redirectSearchResultsUrl);
-      redirectUrl.searchParams.set('es', 'true');
-      redirectUrl.searchParams.set('esq', params.query);
+      redirectUrl.searchParams.set("es", "true");
+      redirectUrl.searchParams.set("esq", params.query);
       window.location.href = redirectUrl.toString();
     } else {
       // Update URL and manually trigger state change (since pushState doesn't trigger popstate)
       const url = new URL(window.location.href);
-      url.searchParams.set('es', 'true');
-      url.searchParams.set('esq', params.query);
-      window.history.pushState({}, '', url);
+      url.searchParams.set("es", "true");
+      url.searchParams.set("esq", params.query);
+      window.history.pushState({}, "", url);
 
       // Manually trigger page variant re-evaluation by dispatching a popstate event
       // This ensures the page variant system detects the URL change and mounts search results
-      window.dispatchEvent(new PopStateEvent('popstate', { state: {} }));
+      window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
     }
 
     // Manually trigger page variant re-evaluation by dispatching a popstate event
     // This ensures the page variant system detects the URL change and mounts search results
-    window.dispatchEvent(new PopStateEvent('popstate', { state: {} }));
+    window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
     if (currentState.loading) {
       return; // Prevent concurrent searches
     }
@@ -174,7 +192,8 @@ export const performSearchAtom = atom(
       lastQuery: params.query,
     });
     try {
-      const result = await SearchService.searchProducts(params);
+      const searchServiceFunction = getSearchServiceFunction();
+      const result = await searchServiceFunction(params);
       set(searchAtom, {
         data: result,
         loading: false,
@@ -182,7 +201,8 @@ export const performSearchAtom = atom(
         lastQuery: params.query,
       });
     } catch (error: unknown) {
-      const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+      const errorMessage =
+        error instanceof Error ? error.message : "An unknown error occurred";
       set(searchAtom, {
         data: null,
         loading: false,
@@ -190,5 +210,5 @@ export const performSearchAtom = atom(
         lastQuery: params.query,
       });
     }
-  },
+  }
 );

package/src/atoms/search/searchServiceAdapter.ts

@@ -0,0 +1,25 @@
+import { SearchResult, SearchParams } from "src/application/models/api/search";
+
+// This will be set by the SearchProvider when it initializes
+let searchServiceFunction:
+  | ((params: SearchParams) => Promise<SearchResult>)
+  | null = null;
+
+export const setSearchServiceFunction = (
+  fn: (params: SearchParams) => Promise<SearchResult>
+) => {
+  searchServiceFunction = fn;
+};
+
+export const getSearchServiceFunction = () => {
+  if (!searchServiceFunction) {
+    throw new Error(
+      "Search service function not initialized. Make sure SearchProvider is mounted."
+    );
+  }
+  return searchServiceFunction;
+};
+
+export const clearSearchServiceFunction = () => {
+  searchServiceFunction = null;
+};