@envive-ai/react-hooks 0.1.0

package/src/atoms/org/orgUIConfig.ts

@@ -0,0 +1,122 @@
+import { atom } from 'jotai';
+import { FeatureGates, getOrgInfo } from 'src/application/models';
+import { findCustomerServiceImpl } from 'src/application/service/customerService';
+import { CustomerServiceIntegrationMode } from 'src/application/service/customerService/types';
+import { featureFlagServiceAtom, orgShortNameAtom } from 'src/atoms/org/org';
+import { OrgUIConfig } from 'src/contexts/types';
+import { getAtomStore } from 'src/atoms/atomStore';
+import Logger from 'src/application/logging/logger';
+
+const getCustomerServiceIntegrationMode = ({
+  integrationMode,
+  isNewFeatureEnabled,
+}: {
+  integrationMode: CustomerServiceIntegrationMode;
+  isNewFeatureEnabled: boolean;
+}): CustomerServiceIntegrationMode => {
+  if (integrationMode !== CustomerServiceIntegrationMode.full) {
+    return integrationMode;
+  }
+  // Only allow CustomerServiceIntegrationMode.full if `isNewFeatureEnabled` is also true
+  return isNewFeatureEnabled ? integrationMode : CustomerServiceIntegrationMode.simple;
+};
+
+const internalOrgUIConfigAtom = atom<OrgUIConfig | undefined>(undefined);
+
+export const orgUIConfigAtom = atom(
+  (get) => {
+    const orgUIConfig = get(internalOrgUIConfigAtom);
+    if (orgUIConfig) {
+      return orgUIConfig;
+    }
+
+    throw new Error('OrgUIConfig is referenced before it is set');
+  },
+  (_, set, value: OrgUIConfig) => {
+    set(internalOrgUIConfigAtom, value);
+  },
+);
+
+export const getOrgUIConfig = async (
+  graphqlOrgUIConfig?: Omit<OrgUIConfig, 'merchantOverrideCss'>,
+  graphqlMerchantOverrideCss?: string,
+) => {
+  const atomStore = getAtomStore();
+  const orgShortName = atomStore.get(orgShortNameAtom);
+  const orgInfo = await getOrgInfo(orgShortName);
+  const localOrgUIConfig = orgInfo.orgUIConfig() ?? {};
+  const featureFlagService = atomStore.get(featureFlagServiceAtom);
+  const isNewFeatureEnabled = featureFlagService.isFeatureGateEnabled(
+    FeatureGates.IsNewFeatureEnabled,
+  );
+  const enableWatermark = featureFlagService.isFeatureGateEnabled(FeatureGates.IsWatermarkEnabled);
+  const userQueryAwaysEnabled = featureFlagService.isFeatureGateEnabled(
+    FeatureGates.IsUserQueryAlwaysEnabled,
+  );
+  const isGraphQLUIConfigsEnabled = featureFlagService.isFeatureGateEnabled(
+    FeatureGates.IsGraphQLUIConfigsEnabled,
+  );
+  const isGraphQLComponentConfigsEnabled = featureFlagService.isFeatureGateEnabled(
+    FeatureGates.IsGraphQLComponentConfigsEnabled,
+  );
+
+  let orgUIConfig: Partial<OrgUIConfig> = { ...localOrgUIConfig };
+
+  if (isGraphQLUIConfigsEnabled && graphqlMerchantOverrideCss) {
+    orgUIConfig = {
+      ...orgUIConfig,
+      merchantOverrideCss: graphqlMerchantOverrideCss,
+    };
+  }
+
+  if (isGraphQLComponentConfigsEnabled && graphqlOrgUIConfig) {
+    orgUIConfig = {
+      ...orgUIConfig,
+      ...graphqlOrgUIConfig,
+    };
+  }
+
+  Logger.logInfo('[spiffy-ai] Feature gate enableWatermark check', {
+    enableWatermark,
+    floatingChatConfig: orgUIConfig.floatingChatConfig,
+  });
+
+  const updatedOrgUIConfig: OrgUIConfig = {
+    ...orgUIConfig,
+    conversationalSearch: orgUIConfig.conversationalSearch
+      ? {
+          ...orgUIConfig.conversationalSearch,
+          enabled: isNewFeatureEnabled,
+        }
+      : undefined,
+    customerServiceIntegration: {
+      ...orgUIConfig.customerServiceIntegration,
+      integrationMode: getCustomerServiceIntegrationMode({
+        isNewFeatureEnabled,
+        integrationMode:
+          orgUIConfig.customerServiceIntegration?.integrationMode ??
+          CustomerServiceIntegrationMode.none,
+      }),
+    },
+    floatingChatConfig: {
+      ...orgUIConfig.floatingChatConfig,
+      // Only enable the watermark if it is enabled in config and through featureFlag.
+      // This enables a quick "off-switch" in case a merchant tells us to turn it off
+      // quickly. This can be removed once the config is moved to the backend
+      enableWatermark: orgUIConfig.floatingChatConfig?.enableWatermark && enableWatermark,
+      userQueryInputEnabled:
+        orgUIConfig.floatingChatConfig?.userQueryInputEnabled || userQueryAwaysEnabled,
+    },
+  } as OrgUIConfig;
+
+  atomStore.set(orgUIConfigAtom, updatedOrgUIConfig);
+};
+
+export const orgCustomerServiceConfig = atom(
+  (get) => get(orgUIConfigAtom).customerServiceIntegration,
+);
+
+export const orgCustomerServiceService = atom((get) => {
+  const { provider } = get(orgCustomerServiceConfig);
+  return findCustomerServiceImpl(provider);
+});

package/src/atoms/search/chatSearch.ts

@@ -0,0 +1,293 @@
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { v4 as uuid } from 'uuid';
+import { atom } from 'jotai';
+import {
+  Message,
+  MessageRole,
+  MessageType,
+  ProductResponseAttributes,
+} from 'src/application/models';
+import {
+  messagesAtom,
+  replyEventCategoryAtom,
+  userHasRepliedAtom,
+  userQueryAtom,
+} from 'src/atoms/chat';
+import { queueUserEventAtom } from '../chat/messageQueue';
+import { orgUIConfigAtom } from '../org';
+import { ProductFilters } from './productFilters';
+import { ProductSorter } from './productSorter';
+import { ChatSearchStateType, ProductSorting } from './types';
+
+// NOTE:
+// This is a legacy version of search that needs to be decoupled and removed.
+// the new search.ts file in this directory is likely what you're looking for.
+
+export const chatSearchStateAtom = atom<ChatSearchStateType>('entrypoint');
+export const chatSearchHasProductsAtom = atom<boolean>(false);
+export const chatSearchProductSortingAtom = atom<ProductSorting>(ProductSorting.FEATURED);
+
+const filterProductList = (message: Message) =>
+  message.type === MessageType.Product && message.metadata.isForGrid === true;
+const filterFilterList = (message: Message) => message.type === MessageType.ProductSearchFilter;
+
+export type ChatSearchTurn = {
+  id: string;
+  generatedQuery?: string;
+  productCount: number;
+  productList: ProductResponseAttributes['attributes'][];
+  filterList: string[];
+  messages: Message[];
+};
+
+export const chatSearchIsLoadingAtom = atom(false);
+
+const buildChatSearchTurn = (messages: Message[]): [string, ChatSearchTurn] | null => {
+  const queryMessage = messages.find((message) => message.type === MessageType.ProductSearch);
+  if (!queryMessage) {
+    return null;
+  }
+  const { generatedQuery, productCount } = queryMessage.metadata ?? {};
+  // @ts-expect-error: product has metadata
+  const productList = messages.filter(filterProductList).map((message) => message.metadata);
+  const filterList = messages
+    .filter(filterFilterList)
+    .map((message) => message.metadata.filterName);
+  return [
+    queryMessage.id,
+    {
+      id: queryMessage.id,
+      generatedQuery,
+      productCount: productCount || productList.length,
+      productList,
+      filterList,
+      messages,
+    },
+  ];
+};
+
+const chatSearchFilterConfigAtom = atom((get) => {
+  const { searchConfig } = get(orgUIConfigAtom);
+  return searchConfig.searchFilterConfig;
+});
+
+const searchMapAtom = atom((get) => {
+  const messages = get(messagesAtom);
+  return Object.fromEntries(messages.map(buildChatSearchTurn).filter((v) => v !== null));
+});
+
+const internalChatSearchParamsAtom = atom<{
+  id: string | null;
+  query: string | null;
+}>({
+  id: null,
+  query: null,
+});
+
+// Selected filter options with compound objects for better type safety and display
+export type SelectedChatSearchFilterOption = {
+  id: string; // "filterId:filterItemId" - maintains backward compatibility for comparisons
+  displayName: string;
+  filterId: string; // Filter category
+  filterItemId: string; // Filter value
+};
+
+export const selectedFilterOptionsAtom = atom<SelectedChatSearchFilterOption[]>([]);
+
+export const additiveDynamicFiltersAtom = atom((get) => {
+  const { searchConfig } = get(orgUIConfigAtom);
+  return searchConfig.additiveDynamicFilters ?? false;
+});
+
+export const createChatSearchFilterOption = (
+  filterId: string,
+  filterItemId: string,
+  displayName: string,
+): SelectedChatSearchFilterOption => ({
+  id: `${filterId}:${filterItemId}`,
+  displayName,
+  filterId,
+  filterItemId,
+});
+
+const handleSearchAtom = atom(null, (get, set, message: Message) => {
+  if (message.type !== MessageType.Search) {
+    return;
+  }
+
+  const querySearch = message.metadata.searchTerm;
+
+  set(replyEventCategoryAtom, UserEventCategory.Search);
+  set(userQueryAtom, querySearch);
+  set(messagesAtom, [...get(messagesAtom), [message]]);
+  set(userHasRepliedAtom, true);
+
+  set(queueUserEventAtom, {
+    eventId: message.id,
+    category: UserEventCategory.Search,
+    createdAt: message.createdAt,
+    attributes: {
+      searchTerm: message.metadata.searchTerm,
+      selectedFilters: message.metadata.selectedFilters,
+    },
+  });
+});
+
+// This internal atom is used to store the search params
+export const chatSearchParamsAtom = atom(
+  (get) => get(internalChatSearchParamsAtom),
+  (_, set, value: { id: string | null; query: string | null }) => {
+    set(internalChatSearchParamsAtom, value);
+  },
+);
+
+export const chatSearchQueryAtom = atom(
+  (get) => get(chatSearchParamsAtom)?.query ?? null,
+  (get, set, value: string | null) => {
+    const searchParams = get(chatSearchParamsAtom);
+    set(chatSearchParamsAtom, { id: searchParams.id, query: value });
+  },
+);
+
+export const chatSearchIdAtom = atom(
+  (get) => get(chatSearchParamsAtom)?.id ?? null,
+  (get, set, value: string | null) => {
+    const searchParams = get(chatSearchParamsAtom);
+    set(chatSearchParamsAtom, { id: value, query: searchParams.query });
+  },
+);
+
+export const ChatSearchTurnAtom = atom((get) => {
+  const searchFilterConfig = get(chatSearchFilterConfigAtom);
+  const searchMap = get(searchMapAtom);
+  const chatSearchId = get(chatSearchIdAtom);
+  if (!chatSearchId) {
+    return null;
+  }
+  const ChatSearchTurn = searchMap[chatSearchId];
+  if (!ChatSearchTurn) {
+    return null;
+  }
+  const productSorting = get(chatSearchProductSortingAtom);
+  const selectedFilterOptions = get(selectedFilterOptionsAtom);
+  const additiveDynamicFilters = get(additiveDynamicFiltersAtom);
+  const filteredProducts = ProductFilters.filterProducts(
+    ChatSearchTurn.productList,
+    searchFilterConfig,
+    selectedFilterOptions,
+    additiveDynamicFilters,
+  );
+
+  const filteredAndSortedProducts = ProductSorter.sort(filteredProducts, productSorting);
+
+  return {
+    ...searchMap[chatSearchId],
+    productList: filteredAndSortedProducts,
+    productCount: filteredAndSortedProducts.length,
+  };
+});
+
+// TODO: Work on deprecating this atom in favor of using ChatSearchTurnAtom directly
+export const chatSearchProducts = atom((get) => {
+  const ChatSearchTurn = get(ChatSearchTurnAtom);
+  return ChatSearchTurn?.productList ?? [];
+});
+
+export const chatSearchFiltersAtom = atom((get) => {
+  const searchFilterConfig = get(chatSearchFilterConfigAtom);
+  const searchMap = get(searchMapAtom);
+  const chatSearchId = get(chatSearchIdAtom);
+
+  if (chatSearchId && searchMap[chatSearchId]) {
+    const products = searchMap[chatSearchId].productList;
+    const selectedFilterOptions = get(selectedFilterOptionsAtom);
+    return ProductFilters.getFiltersForProducts(
+      products,
+      searchFilterConfig,
+      selectedFilterOptions,
+    );
+  }
+  return [];
+});
+
+// For search we use the following query params:
+// es: true - this indicates that we are in a search state
+// esq: query - this is the current search query
+// esi: search id - this is the unique id for the search results that we are displaying. It is pulled from the message id from the turn that includes the search results
+
+export const setSearchParams = (query: string) => {
+  const url = new URL(window.location.href);
+  url.searchParams.set('es', 'true');
+  url.searchParams.set('esq', query);
+  window.history.pushState({}, '', url);
+};
+
+export const getSearchParamsAtom = atom(() => {
+  const params = new URLSearchParams(window.location.search);
+  return {
+    es: params.get('es'),
+    esq: params.get('esq'),
+  };
+});
+
+export const initiateChatSearchAtom = atom(null, (_, set, query: string) => {
+  set(chatSearchIsLoadingAtom, true);
+  // 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', 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: {} }));
+
+  set(chatSearchParamsAtom, { id: null, query });
+  set(handleSearchAtom, {
+    id: uuid(),
+    role: MessageRole.User,
+    type: MessageType.Search,
+    createdAt: new Date().toISOString(),
+    metadata: {
+      searchTerm: query,
+      // Enabling this will enable the new backend search
+      selectedFilters: [],
+    },
+  });
+});
+
+export const handleSearchResultsAtom = atom(null, (get, set, message: Message | undefined) => {
+  if (!message || message.type !== MessageType.ProductSearch) {
+    return;
+  }
+
+  const { productCount, generatedQuery } = message.metadata;
+  if (productCount !== 0) {
+    // Clear the filter options when we get new products
+    set(selectedFilterOptionsAtom, []);
+    // TODO: Should we still do any of these things?
+    set(chatSearchStateAtom, 'product-page');
+    const currentSearchParams = get(chatSearchParamsAtom);
+    const url = new URL(window.location.href);
+    url.searchParams.set('es', 'true');
+    url.searchParams.set('esq', generatedQuery);
+    url.searchParams.set('esi', message.id);
+    window.history.pushState({}, '', url);
+    if (currentSearchParams.id === null) {
+      // If the id is null, we need to replace the state
+      window.history.replaceState(null, '', url);
+    } else {
+      // If the query is different, we need to push a new state
+      window.history.pushState(null, '', url);
+    }
+    set(chatSearchParamsAtom, { id: message.id, query: generatedQuery });
+  }
+});
+
+export const setChatSearchParamsAtom = atom(null, (_, set, query: string) => {
+  const url = new URL(window.location.href);
+  url.searchParams.set('es', 'true');
+  url.searchParams.set('esq', query);
+  window.history.pushState({}, '', url);
+  set(chatSearchParamsAtom, { id: null, query });
+});

package/src/atoms/search/index.ts

@@ -0,0 +1,2 @@
+export * from './chatSearch';
+export * from './searchAPI';

package/src/atoms/search/productFilters.ts

@@ -0,0 +1,207 @@
+import { ProductResponseAttributes } from 'src/application/models';
+import { FilterAttribute } from 'src/contexts/types';
+import { SelectedFilterOption } from 'src/atoms/search/searchAPI';
+import { ChatSearchFilter, ChatSearchFilterItem } from './types';
+import { formatFilterDisplayName } from './utils';
+
+const getPriceBucket = (price: number, bucketSize: number) => {
+  const bucket = Math.floor(price / bucketSize);
+  return bucket * bucketSize;
+};
+
+const isStringArray = (value: unknown): value is string[] => {
+  if (!Array.isArray(value)) {
+    return false;
+  }
+  return value.every((item) => typeof item === 'string');
+};
+
+type FilterSortFunction = (a: ChatSearchFilterItem, b: ChatSearchFilterItem) => number;
+
+const sortFilter = (filterConfig: FilterAttribute): FilterSortFunction => {
+  if (filterConfig.type === 'price') {
+    return (a, b) => Number(a.filterItemId) - Number(b.filterItemId);
+  }
+  if (filterConfig.type === 'dynamic') {
+    if (filterConfig.sorting.type === 'alphabetic') {
+      return (a, b) => a.displayName.localeCompare(b.displayName);
+    }
+    // Sort by the number of products, if they match, sort by alphabetical
+    if (filterConfig.sorting.type === 'productCount') {
+      return (a, b) =>
+        a.productCount === b.productCount
+          ? a.displayName.localeCompare(b.displayName)
+          : b.productCount - a.productCount;
+    }
+    if (filterConfig.sorting.type === 'custom') {
+      const sortedKeys = filterConfig.sorting.map;
+      return (a, b) => {
+        if (sortedKeys[a.displayName] && sortedKeys[b.displayName]) {
+          // If both are in the sortedKeys, sort by the index
+          return sortedKeys[a.displayName] - sortedKeys[b.displayName];
+        }
+        // If only 'a' is in the sortedKeys, put it before the other
+        if (sortedKeys[a.displayName]) {
+          return -1;
+        }
+        // If only 'b' is in the sortedKeys, put it before the other
+        if (sortedKeys[b.displayName]) {
+          return 1;
+        }
+        // If neither are in the sortedKeys, sort by productCount
+        return b.productCount - a.productCount;
+      };
+    }
+  }
+  throw new Error('Invaalid search filter configuration');
+};
+
+export class ProductFilters {
+  static getFiltersForProducts(
+    products: ProductResponseAttributes['attributes'][],
+    filterConfigs: FilterAttribute[],
+    selectedFilterOptions: SelectedFilterOption[],
+  ): ChatSearchFilter[] {
+    if (!products || products.length === 0) {
+      return [];
+    }
+
+    const filters = filterConfigs.map((filterConfig) =>
+      products.reduce(
+        (acc, product) => {
+          // Price has special handling for the filters
+          if (filterConfig.type === 'price') {
+            const priceBucket = getPriceBucket(
+              product.salePrice ?? product.originalPrice ?? 0,
+              filterConfig.bucketSize,
+            );
+            const current = acc.map[priceBucket] ?? {
+              filterItemId: priceBucket,
+              displayName: `$${priceBucket}-$${priceBucket + filterConfig.bucketSize}`,
+              productCount: 0,
+            };
+            acc.map[priceBucket] = { ...current, productCount: current.productCount + 1 };
+            return acc;
+          }
+
+          // Assume that the "attribute" is an array of values
+          const attributeValues =
+            (product.filters && product.filters?.[filterConfig.attribute]) ?? [];
+          if (isStringArray(attributeValues)) {
+            attributeValues.forEach((val) => {
+              const normalizedVal = val.toLowerCase();
+              const current = acc.map[normalizedVal] ?? {
+                filterItemId: normalizedVal,
+                displayName: formatFilterDisplayName(val), // Keep original case for display
+                productCount: 0,
+              };
+              acc.map[normalizedVal] = { ...current, productCount: current.productCount + 1 };
+            });
+          }
+
+          return acc;
+        },
+        {
+          filterConfig,
+          map: {} as Record<string, ChatSearchFilterItem>,
+        },
+      ),
+    );
+
+    const transformedFilters: ChatSearchFilter[] = filters.map(({ filterConfig, map }) => ({
+      filterId: filterConfig.filterId,
+      displayName: filterConfig.displayName,
+      items: Object.values(map)
+        .map((filter) => ({
+          filterItemId: filter.filterItemId,
+          displayName: filter.displayName,
+          productCount: filter.productCount,
+          isSelected:
+            selectedFilterOptions.some(
+              (option) => option.id === `${filterConfig.filterId}:${filter.filterItemId}`,
+            ) ?? false,
+        }))
+        .sort(sortFilter(filterConfig)),
+    }));
+
+    return [...transformedFilters];
+  }
+
+  static filterProducts(
+    products: ProductResponseAttributes['attributes'][],
+    filterConfigs: FilterAttribute[],
+    selectedFilterOptions: SelectedFilterOption[],
+    additiveDynamicFilters = false, // Set this to true to restore the original behavior where stacking filters has OR logic.
+  ) {
+    const selectedFilters = filterConfigs
+      .map((filterConfig) => ({
+        filterConfig,
+        hasSelectedOptions: selectedFilterOptions.some(
+          (option) => option.filterId === filterConfig.filterId,
+        ),
+      }))
+      .filter(({ hasSelectedOptions }) => hasSelectedOptions);
+    return selectedFilterOptions.length === 0
+      ? products
+      : products.filter((product) =>
+          selectedFilters.reduce((acc, selectedFilter) => {
+            // Finding one false removes the product
+            if (!acc) {
+              return acc;
+            }
+            // Price is special
+            if (selectedFilter.filterConfig.type === 'price') {
+              const priceBucket = getPriceBucket(
+                product.salePrice ?? product.originalPrice ?? 0,
+                selectedFilter.filterConfig.bucketSize,
+              );
+              const matchesPriceFilter = selectedFilterOptions.some(
+                (option) => option.id === `price:${priceBucket}`,
+              );
+              if (!matchesPriceFilter) {
+                return false;
+              }
+            }
+
+            if (selectedFilter.filterConfig.type === 'dynamic') {
+              // dynamic is misleading here. Its not just dynamic filters, but static filters because the config counts static filters as type: dynamic.
+              const { filterId, attribute } = selectedFilter.filterConfig;
+              const attributeValues = product.filters?.[attribute];
+
+              if (!isStringArray(attributeValues)) {
+                return false;
+              }
+
+              const isDynamicFilter = selectedFilter.filterConfig.attribute === 'dynamic'; // True dynamic filters (the ones that appear beneath the search input)
+              const isSubtractiveLogic = isDynamicFilter && !additiveDynamicFilters;
+
+              if (isSubtractiveLogic) {
+                // AND logic for subtractive dynamic filters and between static filter categories
+                const selectedOptionsForThisFilter = selectedFilterOptions
+                  .filter((option) => option.filterId === filterId)
+                  .map((option) => option.filterItemId.toLowerCase());
+
+                const hasAllSelectedValues = selectedOptionsForThisFilter.every((selectedValue) =>
+                  attributeValues.some((val) => val.toLowerCase() === selectedValue),
+                );
+
+                if (!hasAllSelectedValues) {
+                  return false;
+                }
+              } else {
+                // OR logic for static filters in the sidebar within a category.
+                const matches = attributeValues.some((val) =>
+                  selectedFilterOptions.some(
+                    (option) => option.id === `${filterId}:${val.toLowerCase()}`,
+                  ),
+                );
+                if (!matches) {
+                  return false;
+                }
+              }
+            }
+            return true;
+          }, true),
+        );
+  }
+}

package/src/atoms/search/productSorter.ts

@@ -0,0 +1,23 @@
+import { ProductResponseAttributes } from 'src/application/models';
+import { ProductSorting } from './types';
+
+export class ProductSorter {
+  static sort(products: ProductResponseAttributes['attributes'][], sorting: ProductSorting) {
+    switch (sorting) {
+      case ProductSorting.PRICE_ASC:
+        return [...products].sort(
+          (p1, p2) =>
+            (p1.salePrice ?? p1.originalPrice ?? 0) - (p2.salePrice ?? p2.originalPrice ?? 0),
+        );
+
+      case ProductSorting.PRICE_DESC:
+        return [...products].sort(
+          (p1, p2) =>
+            (p2.salePrice ?? p2.originalPrice ?? 0) - (p1.salePrice ?? p1.originalPrice ?? 0),
+        );
+
+      default:
+        return products;
+    }
+  }
+}