@envive-ai/react-hooks 0.2.5 → 0.2.6-alpha-2

package/src/hooks/ImageResolver/useImageResolver.ts

@@ -1,33 +1,12 @@
-import { useAtomValue } from "jotai";
-import { OrgShortName } from "src/application/models";
-import { orgShortNameAtom } from "src/atoms/envive/enviveConfig";
+/* eslint-disable max-classes-per-file */
+import { OrgShortName } from '@envive-ai/types';
+import { useAtomValue } from 'jotai';
+import { orgShortNameAtom } from 'src/atoms/envive/enviveConfig';
+
 abstract class ImageResolver {
   abstract resolve(url: string, size: number): string;
 }
 
-class MerchantImageResolver {
-  private static imageResolverMap = new Map<string, ImageResolver>();
-
-  private static loadMapping() {
-    if (this.imageResolverMap.size === 0) {
-      this.imageResolverMap.set(OrgShortName.Spanx, new ShopifyImageResolver());
-      this.imageResolverMap.set(
-        OrgShortName.SpanxStaging,
-        new ShopifyImageResolver()
-      );
-      this.imageResolverMap.set(
-        OrgShortName.UniqueVintage,
-        new ShopifyImageResolver()
-      );
-    }
-    return this.imageResolverMap;
-  }
-
-  static get(name: string) {
-    return this.loadMapping().get(name);
-  }
-}
-
 class ShopifyImageResolver extends ImageResolver {
   resolve(url: string, size: number): string {
     const pattern = /_\d+x\.jpg/;
@@ -36,7 +15,7 @@ class ShopifyImageResolver extends ImageResolver {
     if (urlHasPrefix) {
       return url.replace(pattern, newSizePrefix);
     }
-    return url.replace(".jpg", newSizePrefix);
+    return url.replace('.jpg', newSizePrefix);
   }
 }
 
@@ -44,10 +23,7 @@ export const useImageResolver = () => {
   const orgShortName = useAtomValue(orgShortNameAtom);
   const resolve = (image?: string, size?: number) => {
     if (image && size && orgShortName) {
-      const newImagePath = MerchantImageResolver.get(orgShortName)?.resolve(
-        image,
-        size
-      );
+      const newImagePath = MerchantImageResolver.get(orgShortName)?.resolve(image, size);
       return newImagePath || image;
     }
     return image;
@@ -57,3 +33,20 @@ export const useImageResolver = () => {
     resolve,
   };
 };
+
+class MerchantImageResolver {
+  private static imageResolverMap = new Map<string, ImageResolver>();
+
+  private static loadMapping() {
+    if (this.imageResolverMap.size === 0) {
+      this.imageResolverMap.set(OrgShortName.Spanx, new ShopifyImageResolver());
+      this.imageResolverMap.set(OrgShortName.SpanxStaging, new ShopifyImageResolver());
+      this.imageResolverMap.set(OrgShortName.UniqueVintage, new ShopifyImageResolver());
+    }
+    return this.imageResolverMap;
+  }
+
+  static get(name: string) {
+    return this.loadMapping().get(name);
+  }
+}

package/src/hooks/LocalStorageOperations/useLocalStorageOperations.ts

@@ -1,14 +1,10 @@
-import { useState, useEffect, useCallback } from "react";
-import { LocalStorageEventListener } from "src/application/models/localStorageEventListener";
-import {
-  useLocalStorage,
-  LocalStorageKeys,
-} from "src/contexts/localStorageContext";
+import { LocalStorageEventListener, LocalStorageKeys } from '@envive-ai/types';
+import { useState, useEffect, useCallback } from 'react';
+import { useLocalStorage } from 'src/contexts/localStorageContext';
 
 // Reactive localStorage value hook
 export const useLocalStorageValue = (key: string) => {
-  const { getItem, setItem, attachListener, detachListener } =
-    useLocalStorage();
+  const { getItem, setItem, attachListener, detachListener } = useLocalStorage();
   const [value, setValue] = useState<string | null>(() => getItem(key));
 
   useEffect(() => {
@@ -28,7 +24,7 @@ export const useLocalStorageValue = (key: string) => {
       setItem(key, newValue);
       setValue(newValue);
     },
-    [key, setItem]
+    [key, setItem],
   );
 
   return { value, setValue: updateValue };
@@ -43,11 +39,11 @@ export const useSpiffyFeatureFlag = () => {
     (flag: boolean | null) => {
       setSpiffyOnFeatureFlag(flag);
     },
-    [setSpiffyOnFeatureFlag]
+    [setSpiffyOnFeatureFlag],
   );
 
   return {
-    value: value === "true" ? true : value === "false" ? false : null,
+    value: value === 'true' ? true : value === 'false' ? false : null,
     setFlag,
   };
 };
@@ -60,25 +56,22 @@ export const useEnviveFeatureFlag = () => {
   const setFlag = useCallback(
     (flag: boolean | null) => {
       if (flag === true) {
-        setItem(LocalStorageKeys.EnviveOnOverride, "true");
+        setItem(LocalStorageKeys.EnviveOnOverride, 'true');
       } else if (flag === false) {
-        setItem(LocalStorageKeys.EnviveOnOverride, "false");
+        setItem(LocalStorageKeys.EnviveOnOverride, 'false');
       }
     },
-    [setItem]
+    [setItem],
   );
 
   return {
-    value: value === "true" ? true : value === "false" ? false : null,
+    value: value === 'true' ? true : value === 'false' ? false : null,
     setFlag,
   };
 };
 
 // Storage listener hook
-export const useLocalStorageListener = (
-  key: string,
-  callback: (event: StorageEvent) => void
-) => {
+export const useLocalStorageListener = (key: string, callback: (event: StorageEvent) => void) => {
   const { attachListener, detachListener } = useLocalStorage();
 
   useEffect(() => {

package/src/hooks/MessageFilter/useMessageFilter.ts

@@ -1,10 +1,4 @@
-import { Message, MessageRole, MessageType } from 'src/application/models';
-
-type MessageFinder = {
-  msgs: Message[][];
-  type?: MessageType;
-  role?: MessageRole;
-};
+import { MessageFinder, Message, MessageType } from '@envive-ai/types';
 
 export const useMessageFilter = () => {
   const findMessageIndex = ({ msgs, type, role }: MessageFinder) => {

package/src/hooks/Search/useRecommendedProducts.ts

@@ -0,0 +1,50 @@
+import {
+  SearchResponseProductAttributes,
+  FeatureGates,
+} from "@envive-ai/types";
+import { useAtomValue, useSetAtom } from "jotai";
+import { useEffect } from "react";
+import { useFeatureFlagService } from "src/contexts/featureFlagServiceContext/featureFlagServiceContext";
+import {
+  retrievedProductsAtom,
+  performProductRetrievalAtom,
+  productRetrievalAtom,
+} from "src/atoms/search/productRetrievalAPI";
+import { useNewOrgConfig } from "../NewOrgConfig";
+
+/**
+ * A hook to get recommended products.
+ * It checks the `IsRecommendedProductsEnabled` feature gate and triggers fetching if needed.
+ * If the gate is enabled, it returns the list of recommended products.
+ * If the gate is disabled, it returns an empty array.
+ *
+ * @returns The list of recommended products or an empty array.
+ */
+export const useRecommendedProducts =
+  (): SearchResponseProductAttributes["attributes"][] => {
+    const featureFlagService = useFeatureFlagService();
+    const isEnabled = featureFlagService.isFeatureGateEnabled(
+      FeatureGates.IsRecommendedProductsEnabled
+    );
+    const recommendedProducts = useAtomValue(retrievedProductsAtom);
+    const performProductRetrieval = useSetAtom(performProductRetrievalAtom);
+    const { lastProductIds } = useAtomValue(productRetrievalAtom);
+    const orgUIConfig = useNewOrgConfig();
+
+    useEffect(() => {
+      const recommendedProductIds = orgUIConfig.searchConfig
+        ? orgUIConfig.searchConfig.recommendedProducts
+        : [];
+      // Fetch only if the feature is enabled, there are IDs to fetch, and we haven't already fetched them.
+      if (
+        isEnabled &&
+        recommendedProductIds &&
+        recommendedProductIds.length > 0 &&
+        !lastProductIds
+      ) {
+        performProductRetrieval({ productIds: recommendedProductIds });
+      }
+    }, [isEnabled, performProductRetrieval, lastProductIds, orgUIConfig]);
+
+    return isEnabled ? recommendedProducts : [];
+  };

package/src/hooks/Search/useSearch.tsx

@@ -1,6 +1,14 @@
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useDebounce } from "src/hooks/Debounce/useDebounce";
+import {
+  SearchResultsHocProps,
+  ProductSorting,
+  SearchFilterDatum,
+  SpiffyMetricsEventName,
+  SelectedFilterOption,
+  SelectFilterItem,
+  SpiffyWidgets,
+} from "@envive-ai/types";
 import {
   addSearchFilterAtom,
   clearSearchFiltersAtom,
@@ -13,90 +21,26 @@ import {
   searchParamsAtom,
   searchProductSortingAtom,
   searchSelectedFiltersAtom,
-  SelectedFilterOption,
-} from "src/atoms/search";
-import {
-  autocompleteStateAtom,
-  isFilterOpenAtom,
-} from "src/atoms/globalSearch/globalSearch";
-import { formatFilterDisplayName } from "src/atoms/search/utils";
-import { ProductSorting } from "src/atoms/search/types";
-import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from "src/contexts/amplitudeContext/amplitudeContext";
-import { SpiffyWidgets } from "src/application/models/spiffyWidgets";
-import { ProductCardConfig } from "src/contexts/types";
-import Logger from "src/application/logging/logger";
-import { SearchResult } from "src/application/models/api/search";
-import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
-import {
-  SearchFilterDatum,
-  SelectFilterItem,
-} from "src/types/search-filter-types";
-import { getSearchResultsState, SearchResultsState } from "../utils";
-import { orgShortNameAtom } from "src/atoms/envive/enviveConfig";
+} from "../../atoms/search";
+import { isFilterOpenAtom } from "../../atoms/globalSearch/globalSearch";
+import { formatFilterDisplayName } from "../../atoms/search/utils";
+import { useAmplitude } from "../../contexts/amplitudeContext/amplitudeContext";
+import { orgShortNameAtom } from "../../atoms/envive/enviveConfig";
 import { useNewOrgConfig } from "../NewOrgConfig";
 import { useTrackComponentVisibleEvent } from "../TrackComponentVisibleEvent";
-
-export interface SearchResultsHocProps {
-  // Data
-  searchData: SearchResult | null;
-  searchResponseId: string;
-  merchantShortName: string;
-  productCardConfig: ProductCardConfig;
-  productList: SearchResponseProduct[];
-  autocompleteResults: string[];
-  searchFilters: SearchFilterDatum[];
-  availableDynamicFilters: { name: string; displayName: string }[];
-  selectedFilterOptions: SelectedFilterOption[];
-
-  // State
-  searchText: string;
-  searchResultsState: SearchResultsState;
-  isLoadingAutocomplete: boolean;
-  isLoadingSearch: boolean;
-  isFilterOpen: boolean;
-  isDirty: boolean;
-  focusedIndex: number;
-  focusedOptionId: string | undefined;
-
-  // UI
-  filterButtonText: string;
-
-  // Event Handlers
-  onSearchInputChange: (value: string) => void;
-  onSubmitSearch: () => void;
-  onAutocompleteSelect: (suggestion: string) => void;
-  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  onToggleDynamicFilter: ({
-    filter,
-    dynamicFilterDisplayName,
-  }: {
-    filter: string;
-    dynamicFilterDisplayName: string;
-  }) => void;
-  onSelectFilterItem: SelectFilterItem;
-  onRemoveFilter: (filter: SelectedFilterOption) => void;
-  onClearAllFilters: () => void;
-  setIsFilterOpen: (isFilterOpen: boolean) => void;
-
-  // Refs
-  searchResultsRef: React.RefObject<HTMLDivElement>;
-}
+import { getSearchResultsState } from "../utils";
+import { useRecommendedProducts } from "./useRecommendedProducts";
+import { useSearchInput } from "./useSearchInput";
 
 export const useSearch = (): SearchResultsHocProps => {
   // Atoms
+  const { trackEvent } = useAmplitude();
   const config = useNewOrgConfig();
   const orgShortName = useAtomValue(orgShortNameAtom);
   const { data: searchData, loading: isLoadingSearch } =
     useAtomValue(searchAtom);
   const productList = useAtomValue(filteredSearchProductsAtom);
   const performSearch = useSetAtom(performSearchAtom);
-  const [
-    { results: autocompleteResults, isLoading: isLoadingAutocomplete },
-    setAutocompleteState,
-  ] = useAtom(autocompleteStateAtom);
   const [{ query }] = useAtom(searchParamsAtom);
   const [isFilterOpen, setIsFilterOpen] = useAtom(isFilterOpenAtom);
   const [selectedFilterOptions] = useAtom(searchSelectedFiltersAtom);
@@ -105,25 +49,49 @@ export const useSearch = (): SearchResultsHocProps => {
   const [productSorting, setProductSorting] = useAtom(searchProductSortingAtom);
   const clearFilters = useSetAtom(clearSearchFiltersAtom);
   const searchFilters = useAtomValue(searchFiltersAtom);
-
-  // State
-  const [isDirty, setIsDirty] = useState(true);
-  const [focusedIndex, setFocusedIndex] = useState(-1);
-  const [focusedOptionId, setFocusedOptionId] = useState<string | undefined>(
-    undefined
-  );
-  const [searchText, setSearchText] = useState(query || "");
+  const recommendedProducts = useRecommendedProducts();
 
   // Refs
   const searchResultsRef = useRef<HTMLDivElement>(null);
 
-  // Derived State
-  const debouncedSearchText = useDebounce(searchText, 200);
+  // Utilities
+  const scrollToTop = useCallback(() => {
+    const container = searchResultsRef.current;
+    if (container) {
+      container.scrollTo({ top: 0, behavior: "smooth" });
+    } else {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  }, []);
+
+  // Search Input Hook
+  const searchInput = useSearchInput({
+    initialSearchText: query || "",
+    searchOrigin: SpiffyWidgets.SearchResults,
+    onSearchSubmit: (searchQuery) => {
+      performSearch({ query: searchQuery });
+    },
+  });
+
+  const {
+    searchText,
+    focusedIndex,
+    focusedOptionId,
+    autocompleteResults,
+    shouldShowAutocomplete,
+    handleSearchInputChange,
+    handleSearchInputFocus,
+    handleSearchInputBlur,
+    handleKeyDown,
+    handleAutocompleteSelect,
+    handleSubmitSearch,
+    setSearchText,
+  } = searchInput;
   const searchResultsState = getSearchResultsState(isLoadingSearch, searchData);
 
   const dynamicFilters = searchData?.filters || [];
 
-  // Provide fallback values when orgUIConfig is not yet available
+  // Provide fallback values when config is not yet available
   const safeProductCardConfig = config?.frontendConfig?.uiConfigs
     ?.productCardConfig || {
     variant: "minimal",
@@ -188,8 +156,6 @@ export const useSearch = (): SearchResultsHocProps => {
   }, [filters]);
 
   // Callbacks
-  const { trackEvent } = useAmplitude();
-
   const handleToggleDynamicFilter = useCallback(
     ({
       filter,
@@ -209,92 +175,19 @@ export const useSearch = (): SearchResultsHocProps => {
       addFilter(
         createFilterOption("dynamic", filter, dynamicFilterDisplayName)
       );
+      scrollToTop();
     },
-    [addFilter, searchText, trackEvent]
+    [addFilter, searchText, scrollToTop, trackEvent]
   );
 
   const handleRemoveFilter = useCallback(
     (filter: SelectedFilterOption) => {
       removeFilter(filter.id);
+      scrollToTop();
     },
-    [removeFilter]
+    [removeFilter, scrollToTop]
   );
 
-  const handleSubmitSearch = useCallback(async () => {
-    if (searchText.trim()) {
-      trackEvent({
-        eventName: SpiffyMetricsEventName.SearchQuerySubmitted,
-        eventProps: {
-          searchOrigin: SpiffyWidgets.SearchResults,
-          queryText: searchText.trim(),
-        },
-        alsoSendToGoogleAnalytics: true,
-      });
-      const url = new URL(window.location.href);
-      url.searchParams.set("esq", searchText.trim());
-      window.history.pushState({}, "", url);
-      performSearch({ query: searchText.trim() });
-    }
-  }, [performSearch, searchText, trackEvent]);
-
-  const handleAutocompleteSelect = useCallback(
-    (suggestion: string) => {
-      setSearchText(suggestion);
-      handleSubmitSearch();
-    },
-    [handleSubmitSearch, setSearchText]
-  );
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLInputElement>) => {
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        const newIndex = (focusedIndex + 1) % autocompleteResults.length;
-        setFocusedIndex(newIndex);
-        setFocusedOptionId(`option-${newIndex}`);
-      } else if (event.key === "ArrowUp") {
-        event.preventDefault();
-        const newIndex =
-          (focusedIndex - 1 + autocompleteResults.length) %
-          autocompleteResults.length;
-        setFocusedIndex(newIndex);
-        setFocusedOptionId(`option-${newIndex}`);
-      } else if (event.key === "Enter") {
-        if (focusedIndex === -1) {
-          event.preventDefault();
-          handleSubmitSearch();
-        } else {
-          event.preventDefault();
-          const suggestionText = autocompleteResults[focusedIndex];
-          handleAutocompleteSelect(suggestionText);
-        }
-      } else if (event.key === "Escape") {
-        event.preventDefault();
-        setFocusedIndex(-1);
-        setFocusedOptionId(undefined);
-      }
-    },
-    [
-      autocompleteResults,
-      focusedIndex,
-      handleAutocompleteSelect,
-      handleSubmitSearch,
-    ]
-  );
-
-  const handleSearchInputChange = (newValue: string) => {
-    if (newValue.length === 1) {
-      trackEvent({
-        eventName: SpiffyMetricsEventName.SearchInputStarted,
-        eventProps: {
-          searchOrigin: SpiffyWidgets.SearchResults,
-        },
-      });
-    }
-    setSearchText(newValue);
-    setIsDirty(true);
-  };
-
   const handleSelectFilterItem: SelectFilterItem = useCallback(
     ({
       filterId,
@@ -317,8 +210,10 @@ export const useSearch = (): SearchResultsHocProps => {
           },
         });
         setProductSorting(newSort);
+        scrollToTop();
       } else if (!isSelected) {
         removeFilter(`${filterId}:${filterItemId}`);
+        scrollToTop();
       } else {
         trackEvent({
           eventName: SpiffyMetricsEventName.SearchFilterClicked,
@@ -330,15 +225,24 @@ export const useSearch = (): SearchResultsHocProps => {
           },
         });
         addFilter(createFilterOption(filterId, filterItemId, displayName));
+        scrollToTop();
       }
     },
-    [addFilter, removeFilter, setProductSorting, searchText, trackEvent]
+    [
+      addFilter,
+      removeFilter,
+      setProductSorting,
+      searchText,
+      scrollToTop,
+      trackEvent,
+    ]
   );
 
   const handleClearAllFilters = useCallback(() => {
     setProductSorting(ProductSorting.FEATURED);
     clearFilters();
-  }, [setProductSorting, clearFilters]);
+    scrollToTop();
+  }, [setProductSorting, clearFilters, scrollToTop]);
 
   // Side Effects
   useTrackComponentVisibleEvent(
@@ -360,53 +264,15 @@ export const useSearch = (): SearchResultsHocProps => {
     }
   }, [productList.length, searchText, trackEvent]);
 
+  // This is the single source of truth for the search text triggering a search
   useEffect(() => {
     if (query && query !== searchText) {
+      const esq = new URLSearchParams(window.location.search).get("esq");
       setSearchText(query);
+      performSearch({ query: esq ?? query });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [query]);
-
-  useEffect(() => {
-    const esq = new URLSearchParams(window.location.search).get("esq");
-    if (esq) {
-      setSearchText(esq);
-      performSearch({ query: esq });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [performSearch]);
-
-  const fetchAutocompleteSuggestions = (_query: string) => {
-    // TODO: implement autocomplete suggestions
-    return Promise.resolve([]);
-  };
-
-  useEffect(() => {
-    if (fetchAutocompleteSuggestions === undefined) {
-      return;
-    }
-
-    if (!isDirty || debouncedSearchText.length <= 2) {
-      setAutocompleteState({ results: [], isLoading: false });
-      return;
-    }
-
-    setAutocompleteState((prev) => ({ ...prev, isLoading: true }));
-
-    const fetchData = async () => {
-      try {
-        const results = await fetchAutocompleteSuggestions?.(
-          debouncedSearchText
-        );
-        setAutocompleteState({ results: results ?? [], isLoading: false });
-      } catch (error) {
-        Logger.logError("Failed to fetch autocomplete suggestions:", error);
-        setAutocompleteState({ results: [], isLoading: false });
-      }
-    };
-
-    fetchData();
-  }, [debouncedSearchText, isDirty, setAutocompleteState]);
+  }, [performSearch, query, setSearchText]);
 
   return {
     searchData,
@@ -414,16 +280,18 @@ export const useSearch = (): SearchResultsHocProps => {
     merchantShortName: safeMerchantShortName,
     productCardConfig: safeProductCardConfig,
     productList,
+    recommendedProducts,
     autocompleteResults,
     searchFilters: filters,
     availableDynamicFilters,
     selectedFilterOptions,
     searchText,
+    query: query || "",
     searchResultsState,
-    isLoadingAutocomplete,
     isLoadingSearch,
+    isLoadingAutocomplete: false,
     isFilterOpen,
-    isDirty,
+    shouldShowAutocomplete,
     focusedIndex,
     focusedOptionId,
     filterButtonText,
@@ -431,6 +299,8 @@ export const useSearch = (): SearchResultsHocProps => {
     onSubmitSearch: handleSubmitSearch,
     onAutocompleteSelect: handleAutocompleteSelect,
     onKeyDown: handleKeyDown,
+    onSearchInputFocus: handleSearchInputFocus,
+    onSearchInputBlur: handleSearchInputBlur,
     onToggleDynamicFilter: handleToggleDynamicFilter,
     onSelectFilterItem: handleSelectFilterItem,
     onRemoveFilter: handleRemoveFilter,