@envive-ai/react-hooks 0.2.6-alpha-arthur-2 → 0.2.6-alpha.11

package/src/hooks/Search/useSearch.tsx

@@ -1,14 +1,6 @@
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import {
-  SearchResultsHocProps,
-  ProductSorting,
-  SearchFilterDatum,
-  SpiffyMetricsEventName,
-  SelectedFilterOption,
-  SelectFilterItem,
-  SpiffyWidgets,
-} from "@envive-ai/types";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useDebounce } from "src/hooks/Debounce/useDebounce";
 import {
   addSearchFilterAtom,
   clearSearchFiltersAtom,
@@ -21,26 +13,90 @@ import {
   searchParamsAtom,
   searchProductSortingAtom,
   searchSelectedFiltersAtom,
-} 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";
+  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";
 import { useTrackComponentVisibleEvent } from "../TrackComponentVisibleEvent";
-import { getSearchResultsState } from "../utils";
-import { useSearchInput } from "./useSearchInput";
+
+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>;
+}
 
 export const useSearch = (): SearchResultsHocProps => {
   // Atoms
-  const trackEvent = useAtomValue(amplitudeTrackEventAtom);
-  const config = useAtomValue(newOrgConfigAtom);
+  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);
@@ -49,49 +105,25 @@ export const useSearch = (): SearchResultsHocProps => {
   const [productSorting, setProductSorting] = useAtom(searchProductSortingAtom);
   const clearFilters = useSetAtom(clearSearchFiltersAtom);
   const searchFilters = useAtomValue(searchFiltersAtom);
-  const recommendedProducts = useAtomValue(retrievedProductsAtom);
+
+  // State
+  const [isDirty, setIsDirty] = useState(true);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [focusedOptionId, setFocusedOptionId] = useState<string | undefined>(
+    undefined
+  );
+  const [searchText, setSearchText] = useState(query || "");
 
   // Refs
   const searchResultsRef = useRef<HTMLDivElement>(null);
 
-  // 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;
+  // Derived State
+  const debouncedSearchText = useDebounce(searchText, 200);
   const searchResultsState = getSearchResultsState(isLoadingSearch, searchData);
 
   const dynamicFilters = searchData?.filters || [];
 
-  // Provide fallback values when config is not yet available
+  // Provide fallback values when orgUIConfig is not yet available
   const safeProductCardConfig = config?.frontendConfig?.uiConfigs
     ?.productCardConfig || {
     variant: "minimal",
@@ -156,6 +188,8 @@ export const useSearch = (): SearchResultsHocProps => {
   }, [filters]);
 
   // Callbacks
+  const { trackEvent } = useAmplitude();
+
   const handleToggleDynamicFilter = useCallback(
     ({
       filter,
@@ -164,7 +198,7 @@ export const useSearch = (): SearchResultsHocProps => {
       filter: string;
       dynamicFilterDisplayName: string;
     }) => {
-      trackEvent?.({
+      trackEvent({
         eventName: SpiffyMetricsEventName.SearchFilterClicked,
         eventProps: {
           filterType: "Dynamic",
@@ -175,19 +209,92 @@ export const useSearch = (): SearchResultsHocProps => {
       addFilter(
         createFilterOption("dynamic", filter, dynamicFilterDisplayName)
       );
-      scrollToTop();
     },
-    [addFilter, searchText, scrollToTop, trackEvent]
+    [addFilter, searchText, trackEvent]
   );
 
   const handleRemoveFilter = useCallback(
     (filter: SelectedFilterOption) => {
       removeFilter(filter.id);
-      scrollToTop();
     },
-    [removeFilter, scrollToTop]
+    [removeFilter]
   );
 
+  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,
@@ -202,7 +309,7 @@ export const useSearch = (): SearchResultsHocProps => {
     }) => {
       if (filterId === "sort") {
         const newSort = filterItemId as ProductSorting;
-        trackEvent?.({
+        trackEvent({
           eventName: SpiffyMetricsEventName.SearchSortClicked,
           eventProps: {
             sortType: newSort,
@@ -210,12 +317,10 @@ export const useSearch = (): SearchResultsHocProps => {
           },
         });
         setProductSorting(newSort);
-        scrollToTop();
       } else if (!isSelected) {
         removeFilter(`${filterId}:${filterItemId}`);
-        scrollToTop();
       } else {
-        trackEvent?.({
+        trackEvent({
           eventName: SpiffyMetricsEventName.SearchFilterClicked,
           eventProps: {
             filterType: "Static",
@@ -225,24 +330,15 @@ export const useSearch = (): SearchResultsHocProps => {
           },
         });
         addFilter(createFilterOption(filterId, filterItemId, displayName));
-        scrollToTop();
       }
     },
-    [
-      addFilter,
-      removeFilter,
-      setProductSorting,
-      searchText,
-      scrollToTop,
-      trackEvent,
-    ]
+    [addFilter, removeFilter, setProductSorting, searchText, trackEvent]
   );
 
   const handleClearAllFilters = useCallback(() => {
     setProductSorting(ProductSorting.FEATURED);
     clearFilters();
-    scrollToTop();
-  }, [setProductSorting, clearFilters, scrollToTop]);
+  }, [setProductSorting, clearFilters]);
 
   // Side Effects
   useTrackComponentVisibleEvent(
@@ -254,7 +350,7 @@ export const useSearch = (): SearchResultsHocProps => {
 
   useEffect(() => {
     if (productList.length > 0) {
-      trackEvent?.({
+      trackEvent({
         eventName: SpiffyMetricsEventName.SearchResultsViewed,
         eventProps: {
           queryText: searchText,
@@ -264,15 +360,53 @@ 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
-  }, [performSearch, query, setSearchText]);
+  }, [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]);
 
   return {
     searchData,
@@ -280,18 +414,16 @@ export const useSearch = (): SearchResultsHocProps => {
     merchantShortName: safeMerchantShortName,
     productCardConfig: safeProductCardConfig,
     productList,
-    recommendedProducts,
     autocompleteResults,
     searchFilters: filters,
     availableDynamicFilters,
     selectedFilterOptions,
     searchText,
-    query: query || "",
     searchResultsState,
+    isLoadingAutocomplete,
     isLoadingSearch,
-    isLoadingAutocomplete: false,
     isFilterOpen,
-    shouldShowAutocomplete,
+    isDirty,
     focusedIndex,
     focusedOptionId,
     filterButtonText,
@@ -299,8 +431,6 @@ export const useSearch = (): SearchResultsHocProps => {
     onSubmitSearch: handleSubmitSearch,
     onAutocompleteSelect: handleAutocompleteSelect,
     onKeyDown: handleKeyDown,
-    onSearchInputFocus: handleSearchInputFocus,
-    onSearchInputBlur: handleSearchInputBlur,
     onToggleDynamicFilter: handleToggleDynamicFilter,
     onSelectFilterItem: handleSelectFilterItem,
     onRemoveFilter: handleRemoveFilter,

package/src/hooks/SearchOperations/useSearchOperations.ts

@@ -1,6 +1,6 @@
-import { SearchParams, SearchResult } from '@envive-ai/types';
-import { useState, useCallback, useEffect } from 'react';
-import { useSearchService } from 'src/contexts/searchContext';
+import { useState, useCallback, useEffect } from "react";
+import { useSearchService } from "src/contexts/searchContext";
+import { SearchResult, SearchParams } from "src/application/models/api/search";
 
 export const useProductSearch = () => {
   const { searchProducts, isReady } = useSearchService();
@@ -11,7 +11,7 @@ export const useProductSearch = () => {
   const search = useCallback(
     async (params: SearchParams) => {
       if (!isReady) {
-        setError(new Error('Search service not ready - missing dependencies'));
+        setError(new Error("Search service not ready - missing dependencies"));
         return;
       }
 
@@ -22,12 +22,14 @@ export const useProductSearch = () => {
         const result = await searchProducts(params);
         setData(result);
       } catch (err) {
-        setError(err instanceof Error ? err : new Error('Unknown search error'));
+        setError(
+          err instanceof Error ? err : new Error("Unknown search error")
+        );
       } finally {
         setLoading(false);
       }
     },
-    [searchProducts, isReady],
+    [searchProducts, isReady]
   );
 
   const reset = useCallback(() => {
@@ -63,12 +65,14 @@ export const useSearchWithQuery = (params: SearchParams | null) => {
         const result = await searchProducts(searchParams);
         setData(result);
       } catch (err) {
-        setError(err instanceof Error ? err : new Error('Unknown search error'));
+        setError(
+          err instanceof Error ? err : new Error("Unknown search error")
+        );
       } finally {
         setLoading(false);
       }
     },
-    [searchProducts, isReady],
+    [searchProducts, isReady]
   );
 
   useEffect(() => {

package/src/hooks/ShopifyUrlOperations/useShopifyUrlOperations.ts

@@ -1,9 +1,15 @@
-import { IdExtractor } from '@envive-ai/types';
-import { useCallback } from 'react';
-import { useShopifyUrl } from 'src/contexts/shopifyUrlContext/shopifyUrlContext';
+import { useCallback } from "react";
+import { useShopifyUrl } from "src/contexts/shopifyUrlContext/shopifyUrlContext";
+import { IdExtractor } from "src/contexts/types";
 
 export const useShopifyUrlOperations = () => {
-  const { getTrimmedPathName, getPlpOrPdpId, isOnPdpPage, isOnPlpPage, isReady } = useShopifyUrl();
+  const {
+    getTrimmedPathName,
+    getPlpOrPdpId,
+    isOnPdpPage,
+    isOnPlpPage,
+    isReady,
+  } = useShopifyUrl();
 
   return {
     getTrimmedPathName,
@@ -18,10 +24,10 @@ export const useCurrentPageType = () => {
   const { isOnPdpPage, isOnPlpPage, isReady } = useShopifyUrl();
 
   const getPageType = useCallback(() => {
-    if (!isReady) return 'unknown';
-    if (isOnPdpPage()) return 'pdp';
-    if (isOnPlpPage()) return 'plp';
-    return 'other';
+    if (!isReady) return "unknown";
+    if (isOnPdpPage()) return "pdp";
+    if (isOnPlpPage()) return "plp";
+    return "other";
   }, [isReady, isOnPdpPage, isOnPlpPage]);
 
   return { getPageType, isReady };

package/src/hooks/SnapCalculator/useSnapCalculator.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Unit } from '@envive-ai/types';
+
+export type Unit = 'percent' | 'pixel';
 
 export const useSnapCalculator = (snaps: number[], maxHeight: number, unit: Unit) => {
   const viewportHeightPx = document.documentElement.clientHeight;

package/src/hooks/TrackComponentVisibleEvent/useTrackComponentVisibleEvent.ts

@@ -1,7 +1,10 @@
-import { RefObject, useEffect, useRef } from 'react';
-import { useIntersection } from 'src/hooks/Intersection/useIntersection';
-import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
-import { SpiffyMetricsEventName, SpiffyWidgets } from '@envive-ai/types';
+import { RefObject, useEffect, useRef } from "react";
+import { SpiffyWidgets } from "src/application/models/spiffyWidgets";
+import { useIntersection } from "src/hooks/Intersection/useIntersection";
+import {
+  SpiffyMetricsEventName,
+  useAmplitude,
+} from "src/contexts/amplitudeContext/amplitudeContext";
 
 /**
  * Tracks a component and logs an event to Amplitude when the component is visible.
@@ -15,9 +18,9 @@ export const useTrackComponentVisibleEvent = (
   component: SpiffyWidgets,
   element: RefObject<HTMLElement>,
   eventProps?: Record<string, unknown>,
-  eventName: SpiffyMetricsEventName = SpiffyMetricsEventName.ChatComponentVisible,
+  eventName: SpiffyMetricsEventName = SpiffyMetricsEventName.ChatComponentVisible
 ) => {
-  const isVisible = useIntersection(element, '0px');
+  const isVisible = useIntersection(element, "0px");
   const hasTrackedEvent = useRef(false);
   const { trackEvent } = useAmplitude();
 
@@ -36,7 +39,7 @@ export const useTrackComponentVisibleEvent = (
     }
     // Default case for other event types
     return {
-      component,
+      component: component,
       ...eventProps,
     };
   })();
@@ -44,7 +47,7 @@ export const useTrackComponentVisibleEvent = (
   useEffect(() => {
     if (isVisible && !hasTrackedEvent.current) {
       trackEvent({
-        eventName,
+        eventName: eventName,
         eventProps: componentProps,
       });
       hasTrackedEvent.current = true;

package/src/hooks/UpdateAnalyticsProps/useUpdateAnalyticsProps.ts

@@ -1,8 +1,13 @@
-import { useAtomValue } from 'jotai';
-import { useEffect, useRef } from 'react';
-import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
-import { hasParsedVariantInfoAtom, variantInfoAtom } from 'src/atoms/app/variant';
-import { SpiffyMetricsEventName } from '@envive-ai/types';
+import { useAtomValue } from "jotai";
+import { useEffect, useRef } from "react";
+import {
+  SpiffyMetricsEventName,
+  useAmplitude,
+} from "src/contexts/amplitudeContext/amplitudeContext";
+import {
+  hasParsedVariantInfoAtom,
+  variantInfoAtom,
+} from "src/atoms/app/variant";
 
 /**
  * Updates the default analytics properties whenever the variant info changes. This hook also
@@ -16,7 +21,10 @@ export const useUpdateAnalyticsProps = () => {
 
   useEffect(() => {
     const variantInfoWithPrefix = Object.fromEntries(
-      Object.entries(variantInfo).map(([key, value]) => [`variantInfo.${key}`, value]),
+      Object.entries(variantInfo).map(([key, value]) => [
+        `variantInfo.${key}`,
+        value,
+      ])
     );
 
     const defaultEventProperties: Record<string, unknown> = {
@@ -25,18 +33,19 @@ export const useUpdateAnalyticsProps = () => {
     };
 
     // TODO: should be removed over time, after migration
-    if (variantInfo.variant === 'pdp') {
+    if (variantInfo.variant === "pdp") {
       defaultEventProperties.product_id = variantInfo.productId;
     }
 
     // TODO: should be removed over time, after migration
-    if (variantInfo.variant === 'plp') {
+    if (variantInfo.variant === "plp") {
       defaultEventProperties.plp_id = variantInfo.plpId;
     }
 
     // TODO: should be removed over time, after migration
-    if (variantInfo.variant === 'page_visit') {
-      defaultEventProperties.page_visit_category = variantInfo.pageVisitCategory;
+    if (variantInfo.variant === "page_visit") {
+      defaultEventProperties.page_visit_category =
+        variantInfo.pageVisitCategory;
       defaultEventProperties.page_visit_url = variantInfo.url;
     }
 
@@ -49,5 +58,10 @@ export const useUpdateAnalyticsProps = () => {
       });
       hasInitialized.current = true;
     }
-  }, [variantInfo, hasParsedVariantInfo, trackEvent, setSupplementalDefaultProps]);
+  }, [
+    variantInfo,
+    hasParsedVariantInfo,
+    trackEvent,
+    setSupplementalDefaultProps,
+  ]);
 };