@envive-ai/react-hooks 0.2.6 → 0.2.7-arthur-2

package/src/hooks/Search/useSearch.tsx

@@ -1,6 +1,6 @@
 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 {
   addSearchFilterAtom,
   clearSearchFiltersAtom,
@@ -16,7 +16,6 @@ import {
   SelectedFilterOption,
 } from "src/atoms/search";
 import {
-  autocompleteStateAtom,
   isFilterOpenAtom,
 } from "src/atoms/globalSearch/globalSearch";
 import { formatFilterDisplayName } from "src/atoms/search/utils";
@@ -27,7 +26,6 @@ import {
 } 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 {
@@ -36,8 +34,14 @@ import {
 } from "src/types/search-filter-types";
 import { getSearchResultsState, SearchResultsState } from "../utils";
 import { orgShortNameAtom } from "src/atoms/envive/enviveConfig";
-import { useNewOrgConfig } from "../NewOrgConfig";
 import { useTrackComponentVisibleEvent } from "../TrackComponentVisibleEvent";
+import { amplitudeTrackEventAtom } from "src/atoms/amplitude/amplitudeTrackEventAtom";
+import { newOrgConfigAtom } from "src/atoms/org";
+import { retrievedProductsAtom } from "src/atoms/search/productRetrievalAPI";
+import { useSearchInput } from "./useSearchInput";
+import { SearchResponseProductAttributes } from "src/application/models";
+import { useNewOrgConfig } from "../NewOrgConfig";
+import { useRecommendedProducts } from "./useRecommendedProducts";
 
 export interface SearchResultsHocProps {
   // Data
@@ -50,14 +54,15 @@ export interface SearchResultsHocProps {
   searchFilters: SearchFilterDatum[];
   availableDynamicFilters: { name: string; displayName: string }[];
   selectedFilterOptions: SelectedFilterOption[];
+  recommendedProducts: SearchResponseProductAttributes['attributes'][];
 
   // State
   searchText: string;
+  query: string;
   searchResultsState: SearchResultsState;
-  isLoadingAutocomplete: boolean;
   isLoadingSearch: boolean;
   isFilterOpen: boolean;
-  isDirty: boolean;
+  shouldShowAutocomplete: boolean;
   focusedIndex: number;
   focusedOptionId: string | undefined;
 
@@ -69,13 +74,9 @@ export interface SearchResultsHocProps {
   onSubmitSearch: () => void;
   onAutocompleteSelect: (suggestion: string) => void;
   onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  onToggleDynamicFilter: ({
-    filter,
-    dynamicFilterDisplayName,
-  }: {
-    filter: string;
-    dynamicFilterDisplayName: string;
-  }) => void;
+  onSearchInputFocus: () => void;
+  onSearchInputBlur: () => void;
+  onToggleDynamicFilter: ({ filter, dynamicFilterDisplayName }: { filter: string; dynamicFilterDisplayName: string }) => void;
   onSelectFilterItem: SelectFilterItem;
   onRemoveFilter: (filter: SelectedFilterOption) => void;
   onClearAllFilters: () => void;
@@ -93,10 +94,6 @@ export const useSearch = (): SearchResultsHocProps => {
     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,20 +102,44 @@ 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 || [];
@@ -136,9 +157,7 @@ export const useSearch = (): SearchResultsHocProps => {
     return dynamicFilters
       .filter(
         (dynamicFilterName) =>
-          !selectedFilterOptions.some(
-            (option) => option.id === `dynamic:${dynamicFilterName}`
-          )
+          !selectedFilterOptions.some((option) => option.id === `dynamic:${dynamicFilterName}`),
       )
       .map((dynamicFilterName) => ({
         name: dynamicFilterName,
@@ -150,39 +169,36 @@ export const useSearch = (): SearchResultsHocProps => {
     const sortOptions = [
       {
         filterItemId: String(ProductSorting.FEATURED),
-        displayName: "Relevance",
+        displayName: 'Relevance',
         productCount: 0,
         isSelected: productSorting === ProductSorting.FEATURED,
       },
       {
         filterItemId: String(ProductSorting.PRICE_ASC),
-        displayName: "Price: Low to High",
+        displayName: 'Price: Low to High',
         productCount: 0,
         isSelected: productSorting === ProductSorting.PRICE_ASC,
       },
       {
         filterItemId: String(ProductSorting.PRICE_DESC),
-        displayName: "Price: High to Low",
+        displayName: 'Price: High to Low',
         productCount: 0,
         isSelected: productSorting === ProductSorting.PRICE_DESC,
       },
     ];
 
-    return [
-      { filterId: "sort", displayName: "SORT", items: sortOptions },
-      ...searchFilters,
-    ] as SearchFilterDatum[];
+    return [{ filterId: 'sort', displayName: 'SORT', items: sortOptions }, ...searchFilters] as SearchFilterDatum[];
   }, [productSorting, searchFilters]);
 
   const filterButtonText = useMemo(() => {
     const selectedCount = filters.reduce((acc: number, filter) => {
-      if (filter.filterId === "sort") {
+      if (filter.filterId === 'sort') {
         return acc;
       }
       return acc + filter.items.filter((item) => item.isSelected).length;
     }, 0);
     if (selectedCount === 0) {
-      return "Filter & Sort";
+      return 'Filter & Sort';
     }
     return `Filter & Sort (${selectedCount})`;
   }, [filters]);
@@ -190,110 +206,31 @@ export const useSearch = (): SearchResultsHocProps => {
   // Callbacks
   const { trackEvent } = useAmplitude();
 
+
   const handleToggleDynamicFilter = useCallback(
-    ({
-      filter,
-      dynamicFilterDisplayName,
-    }: {
-      filter: string;
-      dynamicFilterDisplayName: string;
-    }) => {
+    ({ filter, dynamicFilterDisplayName }: { filter: string; dynamicFilterDisplayName: string }) => {
       trackEvent({
         eventName: SpiffyMetricsEventName.SearchFilterClicked,
         eventProps: {
-          filterType: "Dynamic",
+          filterType: 'Dynamic',
           filterValue: filter,
           queryText: searchText,
         },
       });
-      addFilter(
-        createFilterOption("dynamic", filter, dynamicFilterDisplayName)
-      );
+      addFilter(createFilterOption('dynamic', filter, dynamicFilterDisplayName));
+      scrollToTop();
     },
-    [addFilter, searchText, trackEvent]
+    [addFilter, searchText, scrollToTop],
   );
 
   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(
     ({
@@ -307,7 +244,7 @@ export const useSearch = (): SearchResultsHocProps => {
       isSelected: boolean;
       displayName: string;
     }) => {
-      if (filterId === "sort") {
+      if (filterId === 'sort') {
         const newSort = filterItemId as ProductSorting;
         trackEvent({
           eventName: SpiffyMetricsEventName.SearchSortClicked,
@@ -317,39 +254,44 @@ export const useSearch = (): SearchResultsHocProps => {
           },
         });
         setProductSorting(newSort);
+        scrollToTop();
       } else if (!isSelected) {
         removeFilter(`${filterId}:${filterItemId}`);
+        scrollToTop();
       } else {
         trackEvent({
           eventName: SpiffyMetricsEventName.SearchFilterClicked,
           eventProps: {
-            filterType: "Static",
+            filterType: 'Static',
             filterCategory: filterId,
             filterValue: filterItemId,
             queryText: searchText,
           },
         });
         addFilter(createFilterOption(filterId, filterItemId, displayName));
+        scrollToTop();
       }
     },
-    [addFilter, removeFilter, setProductSorting, searchText, trackEvent]
+    [addFilter, removeFilter, setProductSorting, searchText, scrollToTop],
   );
 
+
   const handleClearAllFilters = useCallback(() => {
     setProductSorting(ProductSorting.FEATURED);
     clearFilters();
-  }, [setProductSorting, clearFilters]);
+    scrollToTop();
+  }, [setProductSorting, clearFilters, scrollToTop]);
 
   // Side Effects
   useTrackComponentVisibleEvent(
     SpiffyWidgets.SearchResults,
     searchResultsRef,
     {},
-    SpiffyMetricsEventName.SearchComponentVisible
+    SpiffyMetricsEventName.SearchComponentVisible,
   );
 
   useEffect(() => {
-    if (searchResultsState === SearchResultsState.NoResults || searchResultsState === SearchResultsState.Results) {
+    if (searchResultsState === SearchResultsState.Results || searchResultsState === SearchResultsState.NoResults) {
       trackEvent({
         eventName: SpiffyMetricsEventName.SearchResultsViewed,
         eventProps: {
@@ -358,72 +300,35 @@ export const useSearch = (): SearchResultsHocProps => {
         },
       });
     }
-  }, [productList.length, searchResultsState, trackEvent]);
+  }, [productList.length, searchResultsState]);
 
+  // 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]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [performSearch, query, setSearchText]);
 
   return {
     searchData,
-    searchResponseId: searchData?.searchResponseId ?? "",
+    searchResponseId: searchData?.searchResponseId ?? '',
     merchantShortName: safeMerchantShortName,
     productCardConfig: safeProductCardConfig,
     productList,
+    recommendedProducts,
     autocompleteResults,
     searchFilters: filters,
     availableDynamicFilters,
     selectedFilterOptions,
     searchText,
+    query: query || '',
     searchResultsState,
-    isLoadingAutocomplete,
     isLoadingSearch,
     isFilterOpen,
-    isDirty,
+    shouldShowAutocomplete,
     focusedIndex,
     focusedOptionId,
     filterButtonText,
@@ -431,6 +336,8 @@ export const useSearch = (): SearchResultsHocProps => {
     onSubmitSearch: handleSubmitSearch,
     onAutocompleteSelect: handleAutocompleteSelect,
     onKeyDown: handleKeyDown,
+    onSearchInputFocus: handleSearchInputFocus,
+    onSearchInputBlur: handleSearchInputBlur,
     onToggleDynamicFilter: handleToggleDynamicFilter,
     onSelectFilterItem: handleSelectFilterItem,
     onRemoveFilter: handleRemoveFilter,
@@ -438,4 +345,4 @@ export const useSearch = (): SearchResultsHocProps => {
     setIsFilterOpen,
     searchResultsRef,
   };
-};
+};