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

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 { useCallback, useEffect, useMemo, useRef } from "react";
+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";
-import { useNewOrgConfig } from "../NewOrgConfig";
+} from "../../atoms/search";
+import { isFilterOpenAtom } from "../../atoms/globalSearch/globalSearch";
+import { formatFilterDisplayName } from "../../atoms/search/utils";
+import { amplitudeTrackEventAtom } from "../../atoms/amplitude/amplitudeTrackEventAtom";
+import { orgShortNameAtom } from "../../atoms/envive/enviveConfig";
+import { newOrgConfigAtom } from "../../atoms/org/newOrgConfigAtom";
+import { retrievedProductsAtom } from "../../atoms/search/productRetrievalAPI";
 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 { useSearchInput } from "./useSearchInput";
 
 export const useSearch = (): SearchResultsHocProps => {
   // Atoms
-  const config = useNewOrgConfig();
+  const trackEvent = useAtomValue(amplitudeTrackEventAtom);
+  const config = useAtomValue(newOrgConfigAtom);
   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 = useAtomValue(retrievedProductsAtom);
 
   // 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,
@@ -198,7 +164,7 @@ export const useSearch = (): SearchResultsHocProps => {
       filter: string;
       dynamicFilterDisplayName: string;
     }) => {
-      trackEvent({
+      trackEvent?.({
         eventName: SpiffyMetricsEventName.SearchFilterClicked,
         eventProps: {
           filterType: "Dynamic",
@@ -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,
@@ -309,7 +202,7 @@ export const useSearch = (): SearchResultsHocProps => {
     }) => {
       if (filterId === "sort") {
         const newSort = filterItemId as ProductSorting;
-        trackEvent({
+        trackEvent?.({
           eventName: SpiffyMetricsEventName.SearchSortClicked,
           eventProps: {
             sortType: newSort,
@@ -317,10 +210,12 @@ export const useSearch = (): SearchResultsHocProps => {
           },
         });
         setProductSorting(newSort);
+        scrollToTop();
       } else if (!isSelected) {
         removeFilter(`${filterId}:${filterItemId}`);
+        scrollToTop();
       } else {
-        trackEvent({
+        trackEvent?.({
           eventName: SpiffyMetricsEventName.SearchFilterClicked,
           eventProps: {
             filterType: "Static",
@@ -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(
@@ -350,7 +254,7 @@ export const useSearch = (): SearchResultsHocProps => {
 
   useEffect(() => {
     if (productList.length > 0) {
-      trackEvent({
+      trackEvent?.({
         eventName: SpiffyMetricsEventName.SearchResultsViewed,
         eventProps: {
           queryText: searchText,
@@ -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,

package/src/hooks/Search/useSearchInput.ts

@@ -0,0 +1,237 @@
+import { useState, useCallback, useRef, useMemo } from "react";
+import { useAtomValue } from "jotai";
+import Fuse from "fuse.js";
+import {
+  SpiffyMetricsEventName,
+  UseSearchInputProps,
+  UseSearchInputReturn,
+} from "@envive-ai/types";
+import { useAmplitudeTracking } from "../AmplitudeOperations";
+import { autocompleteStateAtom } from "src/atoms/globalSearch";
+import { amplitudeTrackEventAtom } from "src/atoms/amplitude/amplitudeTrackEventAtom";
+
+export const useSearchInput = ({
+  initialSearchText = "",
+  searchOrigin,
+  onSearchSubmit,
+}: UseSearchInputProps): UseSearchInputReturn => {
+  const track = useAtomValue(amplitudeTrackEventAtom);
+
+  // State
+  const [searchText, setSearchText] = useState(initialSearchText);
+  const [hasText, setHasText] = useState(initialSearchText.trim().length > 0);
+  const [isFocused, setIsFocused] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [focusedOptionId, setFocusedOptionId] = useState<string | undefined>(
+    undefined
+  );
+  const autocompleteState = useAtomValue(autocompleteStateAtom);
+  const globalAutocompleteResults = autocompleteState.results;
+  const isAutocompleteEnabled = globalAutocompleteResults.length > 0;
+
+  // Refs
+  const isSelectingAutocomplete = useRef(false);
+
+  // Computed
+  const shouldShowAutocomplete = hasText && isFocused && isAutocompleteEnabled;
+
+  const autocompleteResultsLimit = 5;
+
+  // Configure Fuse.js for fuzzy search with custom scoring
+  const fuseOptions = useMemo(
+    () => ({
+      includeScore: true,
+      includeMatches: true,
+      // Fuzzy matching threshold (0.0 = perfect match, 1.0 = match anything)
+      threshold: 0.3,
+      // Location where match is expected (0 = beginning)
+      location: 0,
+      // Distance from location where match can be found - smaller for prefix preference
+      distance: 4,
+      // Minimum character length before fuzzy matching starts
+      minMatchCharLength: 1,
+      // Keys to search (we're searching strings directly, so no keys needed)
+      keys: [],
+      // Use extended search for exact matches and prefix matching
+      useExtendedSearch: false,
+      // Don't ignore location - this helps prioritize matches at the beginning
+      ignoreLocation: false,
+    }),
+    []
+  );
+
+  const fuse = useMemo(() => {
+    if (!globalAutocompleteResults.length) return null;
+    return new Fuse(globalAutocompleteResults, fuseOptions);
+  }, [globalAutocompleteResults, fuseOptions]);
+
+  // Autocomplete fuzzy search using Fuse.js
+  const autocompleteResults = useMemo(() => {
+    if (!isAutocompleteEnabled || !fuse) {
+      return [];
+    }
+
+    if (!searchText.trim()) {
+      return [];
+    }
+
+    const fuseResults = fuse.search(searchText);
+
+    // Use only Fuse.js scoring (results are already sorted by relevance)
+    return fuseResults
+      .slice(0, autocompleteResultsLimit)
+      .map((result) => result.item);
+  }, [isAutocompleteEnabled, fuse, searchText, autocompleteResultsLimit]);
+
+  // Handlers
+  const handleSearchInputChange = useCallback(
+    (newValue: string) => {
+      // If the user is changing text, they must be interacting with the input
+      // So we can safely assume they're focused
+      if (newValue !== searchText) {
+        setIsFocused(true);
+      }
+
+      if (newValue.length === 1) {
+        track?.({
+          eventName: SpiffyMetricsEventName.SearchInputStarted,
+          eventProps: {
+            searchOrigin,
+          },
+        });
+      }
+      setSearchText(newValue);
+      setHasText(newValue.trim().length > 0);
+      setFocusedIndex(-1);
+      setFocusedOptionId(undefined);
+    },
+    [searchOrigin, searchText, track]
+  );
+
+  const handleSearchInputFocus = useCallback(() => {
+    setIsFocused(true);
+  }, []);
+
+  const handleSearchInputBlur = useCallback(() => {
+    setTimeout(() => {
+      if (!isSelectingAutocomplete.current) {
+        setIsFocused(false);
+        setFocusedIndex(-1);
+        setFocusedOptionId(undefined);
+      }
+    }, 150);
+  }, []);
+
+  const handleSubmitSearch = useCallback(() => {
+    setIsFocused(false);
+    if (searchText.trim() && onSearchSubmit) {
+      track?.({
+        eventName: SpiffyMetricsEventName.SearchQuerySubmitted,
+        eventProps: {
+          searchOrigin,
+          queryText: searchText.trim(),
+        },
+        alsoSendToGoogleAnalytics: true,
+      });
+      onSearchSubmit(searchText.trim());
+    }
+  }, [searchText, onSearchSubmit, searchOrigin, track]);
+
+  const handleAutocompleteSelect = useCallback(
+    (suggestion: string, rankPosition?: number) => {
+      isSelectingAutocomplete.current = true;
+      setSearchText(suggestion);
+      setHasText(suggestion.trim().length > 0);
+      setIsFocused(false);
+
+      track?.({
+        eventName: SpiffyMetricsEventName.SearchInputStarted,
+        eventProps: {
+          searchOrigin,
+        },
+      });
+
+      if (onSearchSubmit) {
+        onSearchSubmit(suggestion.trim());
+      }
+
+      setTimeout(() => {
+        isSelectingAutocomplete.current = false;
+      }, 100);
+    },
+    [onSearchSubmit, searchOrigin, track]
+  );
+
+  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, focusedIndex);
+        }
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        setFocusedIndex(-1);
+        setFocusedOptionId(undefined);
+      }
+    },
+    [
+      autocompleteResults,
+      focusedIndex,
+      handleAutocompleteSelect,
+      handleSubmitSearch,
+    ]
+  );
+
+  const setSearchTextUtility = useCallback((text: string) => {
+    setSearchText(text);
+    setHasText(text.trim().length > 0);
+  }, []);
+
+  const resetSearch = useCallback(() => {
+    setSearchText("");
+    setHasText(false);
+    setIsFocused(false);
+    setFocusedIndex(-1);
+    setFocusedOptionId(undefined);
+  }, []);
+
+  return {
+    // State
+    searchText,
+    hasText,
+    isFocused,
+    focusedIndex,
+    focusedOptionId,
+    autocompleteResults,
+    shouldShowAutocomplete,
+
+    // Handlers
+    handleSearchInputChange,
+    handleSearchInputFocus,
+    handleSearchInputBlur,
+    handleKeyDown,
+    handleAutocompleteSelect,
+    handleSubmitSearch,
+
+    // Utilities
+    setSearchText: setSearchTextUtility,
+    resetSearch,
+  };
+};