@envive-ai/react-hooks 0.1.0

package/src/hooks/useIntersection.ts

@@ -0,0 +1,28 @@
+import { RefObject, useEffect, useState } from 'react';
+
+// https://rasilbaidar.medium.com/trigger-event-when-element-enters-viewport-the-react-way-168509da2e23
+export const useIntersection = (element: RefObject<HTMLElement>, rootMargin: string) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const current = element?.current;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      { rootMargin },
+    );
+
+    if (current) {
+      observer?.observe(current);
+    }
+
+    return () => {
+      if (current) {
+        observer.unobserve(current);
+      }
+    };
+  }, []);
+
+  return isVisible;
+};

package/src/hooks/useIsSmallScreen.ts

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+export const useIsSmallScreen = () => {
+  const [isSmall, setIsSmall] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(max-width: 479px)');
+
+    // Set initial value
+    setIsSmall(mediaQuery.matches);
+
+    // Update state when viewport changes
+    const handleResize = (event: MediaQueryListEvent) => {
+      setIsSmall(event.matches);
+    };
+
+    mediaQuery.addEventListener('change', handleResize);
+
+    return () => mediaQuery.removeEventListener('change', handleResize);
+  }, []);
+
+  return isSmall;
+};

package/src/hooks/useMessageFilter.ts

@@ -0,0 +1,49 @@
+import { Message, MessageRole, MessageType } from 'src/application/models';
+
+type MessageFinder = {
+  msgs: Message[][];
+  type?: MessageType;
+  role?: MessageRole;
+};
+
+export const useMessageFilter = () => {
+  const findMessageIndex = ({ msgs, type, role }: MessageFinder) => {
+    let lastIndex = -1;
+    msgs.forEach((subArray, index) => {
+      subArray.forEach((obj) => {
+        if (obj.type === type || obj.role === role) lastIndex = index;
+      });
+    });
+    return lastIndex;
+  };
+
+  const removePreviousDiscussions = (msgs: Message[][], index: number) => {
+    if (index > -1) {
+      const lastMessages = msgs.slice(index);
+      return lastMessages.length > 0 ? lastMessages : msgs;
+    }
+    return msgs;
+  };
+
+  const getFilteredMessages = (msgs: Message[][], skipFilter?: boolean) => {
+    const messageMap = msgs.reduce(
+      (acc, msg) => {
+        acc[msg[0].id] = msg;
+        return acc;
+      },
+      {} as Record<string, Message[]>,
+    );
+    const deduplicatedMsgs = Object.values(messageMap);
+    if (!skipFilter) {
+      const idx = findMessageIndex({ msgs: deduplicatedMsgs, type: MessageType.Separator });
+      return removePreviousDiscussions(deduplicatedMsgs, idx);
+    }
+    return deduplicatedMsgs;
+  };
+
+  return {
+    findMessageIndex,
+    removePreviousDiscussions,
+    getFilteredMessages,
+  };
+};

package/src/hooks/useMessageScrollObserver.ts

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+
+export const useMessageScrollObserver = (
+    boxRef: React.RefObject<HTMLDivElement>, 
+    scrollRef: React.RefObject<HTMLDivElement>, 
+    onScrollChange: (position: number) => void
+) => {
+
+    const calculateScrollHeight = () => {
+      const boxHeight = boxRef?.current?.getBoundingClientRect().height || 0
+      const scrollHeight = scrollRef?.current?.getBoundingClientRect().height || 0
+      return boxHeight - scrollHeight
+    }
+
+    const updateState = () => {
+      const scrollHeight = calculateScrollHeight()
+      if (scrollHeight > 0) {
+        onScrollChange(scrollHeight)
+      }
+    }
+
+    useEffect(() => {
+      let boxRO = null;
+      let scrollRO = null;
+
+      if (scrollRef?.current) {
+        boxRO = new ResizeObserver(updateState);
+        boxRO.observe(scrollRef?.current);
+      }
+      
+      if (boxRef?.current) {
+        scrollRO = new ResizeObserver(updateState);
+        scrollRO.observe(boxRef?.current);
+      }
+
+      return () => {
+        if (scrollRef?.current && boxRO) {
+          boxRO.unobserve(scrollRef?.current);
+        }
+
+        if (scrollRO && boxRef?.current) {
+          scrollRO?.unobserve(boxRef?.current)
+        }
+      };
+    }, []);
+
+}

package/src/hooks/useReducedMotionWithOverride.ts

@@ -0,0 +1,15 @@
+import { useReducedMotionConfig } from 'framer-motion';
+import { useMemo } from 'react';
+
+export const useReducedMotionWithOverride = () => {
+  const reducedMotionConfig = useReducedMotionConfig();
+  const reducedMotion = useMemo(() => {
+    if (window?._spiffy?.reducedMotionOverride) {
+      return window?._spiffy?.reducedMotionOverride;
+    }
+
+    return reducedMotionConfig;
+  }, [reducedMotionConfig]);
+
+  return reducedMotion;
+};

package/src/hooks/useSearch.tsx

@@ -0,0 +1,433 @@
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useDebounce } from "src/hooks/useDebounce";
+import { useTrackComponentVisibleEvent } from "src/hooks";
+import {
+  addSearchFilterAtom,
+  clearSearchFiltersAtom,
+  createFilterOption,
+  filteredSearchProductsAtom,
+  orgUIConfigAtom,
+  performSearchAtom,
+  removeSearchFilterAtom,
+  searchAtom,
+  searchFiltersAtom,
+  searchParamsAtom,
+  searchProductSortingAtom,
+  searchSelectedFiltersAtom,
+  SelectedFilterOption,
+} from "src/atoms";
+import {
+  autocompleteStateAtom,
+  isFilterOpenAtom,
+} from "src/atoms/globalSearch";
+import { formatFilterDisplayName } from "src/atoms/search/utils";
+import { ProductSorting } from "src/atoms/search/types";
+import {
+  AmplitudeAdapter,
+  SpiffyMetricsEventName,
+} from "src/adapters/amplitude";
+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 {
+  SearchFilter,
+  SelectFilterItem,
+} from "src/types/search-filter-types.ts";
+import { getSearchResultsState, SearchResultsState } from "./utils";
+
+export interface SearchResultsHocProps {
+  // Data
+  searchData: SearchResult | null;
+  searchResponseId: string;
+  merchantShortName: string;
+  productCardConfig: ProductCardConfig;
+  productList: SearchResponseProduct[];
+  autocompleteResults: string[];
+  searchFilters: SearchFilter[];
+  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 orgUIConfig = useAtomValue(orgUIConfigAtom);
+  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);
+  const addFilter = useSetAtom(addSearchFilterAtom);
+  const removeFilter = useSetAtom(removeSearchFilterAtom);
+  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 || "");
+
+  // Refs
+  const searchResultsRef = useRef<HTMLDivElement>(null);
+
+  // Derived State
+  const debouncedSearchText = useDebounce(searchText, 200);
+  const searchResultsState = getSearchResultsState(isLoadingSearch, searchData);
+
+  const dynamicFilters = searchData?.filters || [];
+  const { productCardConfig, shortName: merchantShortName } = orgUIConfig || {};
+
+  const availableDynamicFilters = useMemo(() => {
+    return dynamicFilters
+      .filter(
+        (dynamicFilterName) =>
+          !selectedFilterOptions.some(
+            (option) => option.id === `dynamic:${dynamicFilterName}`
+          )
+      )
+      .map((dynamicFilterName) => ({
+        name: dynamicFilterName,
+        displayName: formatFilterDisplayName(dynamicFilterName),
+      }));
+  }, [dynamicFilters, selectedFilterOptions]);
+
+  const filters = useMemo(() => {
+    const sortOptions = [
+      {
+        filterItemId: String(ProductSorting.FEATURED),
+        displayName: "Relevance",
+        productCount: 0,
+        isSelected: productSorting === ProductSorting.FEATURED,
+      },
+      {
+        filterItemId: String(ProductSorting.PRICE_ASC),
+        displayName: "Price: Low to High",
+        productCount: 0,
+        isSelected: productSorting === ProductSorting.PRICE_ASC,
+      },
+      {
+        filterItemId: String(ProductSorting.PRICE_DESC),
+        displayName: "Price: High to Low",
+        productCount: 0,
+        isSelected: productSorting === ProductSorting.PRICE_DESC,
+      },
+    ];
+
+    return [
+      { filterId: "sort", displayName: "SORT", items: sortOptions },
+      ...searchFilters,
+    ] as SearchFilter[];
+  }, [productSorting, searchFilters]);
+
+  const filterButtonText = useMemo(() => {
+    const selectedCount = filters.reduce((acc: number, filter) => {
+      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 (${selectedCount})`;
+  }, [filters]);
+
+  // Callbacks
+  const handleToggleDynamicFilter = useCallback(
+    ({
+      filter,
+      dynamicFilterDisplayName,
+    }: {
+      filter: string;
+      dynamicFilterDisplayName: string;
+    }) => {
+      AmplitudeAdapter.trackEvent({
+        eventName: SpiffyMetricsEventName.SearchFilterClicked,
+        eventProps: {
+          filterType: "Dynamic",
+          filterValue: filter,
+          queryText: searchText,
+        },
+      });
+      addFilter(
+        createFilterOption("dynamic", filter, dynamicFilterDisplayName)
+      );
+    },
+    [addFilter, searchText]
+  );
+
+  const handleRemoveFilter = useCallback(
+    (filter: SelectedFilterOption) => {
+      removeFilter(filter.id);
+    },
+    [removeFilter]
+  );
+
+  const handleSubmitSearch = useCallback(async () => {
+    if (searchText.trim()) {
+      AmplitudeAdapter.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]);
+
+  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) {
+      AmplitudeAdapter.trackEvent({
+        eventName: SpiffyMetricsEventName.SearchInputStarted,
+        eventProps: {
+          searchOrigin: SpiffyWidgets.SearchResults,
+        },
+      });
+    }
+    setSearchText(newValue);
+    setIsDirty(true);
+  };
+
+  const handleSelectFilterItem: SelectFilterItem = useCallback(
+    ({
+      filterId,
+      filterItemId,
+      isSelected,
+      displayName,
+    }: {
+      filterId: string;
+      filterItemId: string;
+      isSelected: boolean;
+      displayName: string;
+    }) => {
+      if (filterId === "sort") {
+        const newSort = filterItemId as ProductSorting;
+        AmplitudeAdapter.trackEvent({
+          eventName: SpiffyMetricsEventName.SearchSortClicked,
+          eventProps: {
+            sortType: newSort,
+            queryText: searchText,
+          },
+        });
+        setProductSorting(newSort);
+      } else if (!isSelected) {
+        removeFilter(`${filterId}:${filterItemId}`);
+      } else {
+        AmplitudeAdapter.trackEvent({
+          eventName: SpiffyMetricsEventName.SearchFilterClicked,
+          eventProps: {
+            filterType: "Static",
+            filterCategory: filterId,
+            filterValue: filterItemId,
+            queryText: searchText,
+          },
+        });
+        addFilter(createFilterOption(filterId, filterItemId, displayName));
+      }
+    },
+    [addFilter, removeFilter, setProductSorting, searchText]
+  );
+
+  const handleClearAllFilters = useCallback(() => {
+    setProductSorting(ProductSorting.FEATURED);
+    clearFilters();
+  }, [setProductSorting, clearFilters]);
+
+  // Side Effects
+  useTrackComponentVisibleEvent(
+    SpiffyWidgets.SearchResults,
+    searchResultsRef,
+    {},
+    SpiffyMetricsEventName.SearchComponentVisible
+  );
+
+  useEffect(() => {
+    if (productList.length > 0) {
+      AmplitudeAdapter.trackEvent({
+        eventName: SpiffyMetricsEventName.SearchResultsViewed,
+        eventProps: {
+          queryText: searchText,
+          resultsCount: productList.length,
+        },
+      });
+    }
+  }, [productList.length, searchText]);
+
+  useEffect(() => {
+    if (query && query !== searchText) {
+      setSearchText(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]);
+
+  return {
+    searchData,
+    searchResponseId: searchData?.searchResponseId ?? "",
+    merchantShortName,
+    productCardConfig: productCardConfig || {
+      variant: "minimal",
+      hoverVariant: "none",
+      layoutVariant: "square",
+    },
+    productList,
+    autocompleteResults,
+    searchFilters: filters,
+    availableDynamicFilters,
+    selectedFilterOptions,
+    searchText,
+    searchResultsState,
+    isLoadingAutocomplete,
+    isLoadingSearch,
+    isFilterOpen,
+    isDirty,
+    focusedIndex,
+    focusedOptionId,
+    filterButtonText,
+    onSearchInputChange: handleSearchInputChange,
+    onSubmitSearch: handleSubmitSearch,
+    onAutocompleteSelect: handleAutocompleteSelect,
+    onKeyDown: handleKeyDown,
+    onToggleDynamicFilter: handleToggleDynamicFilter,
+    onSelectFilterItem: handleSelectFilterItem,
+    onRemoveFilter: handleRemoveFilter,
+    onClearAllFilters: handleClearAllFilters,
+    setIsFilterOpen,
+    searchResultsRef,
+  };
+};

package/src/hooks/useSnapCalculator.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+
+export type Unit = 'percent' | 'pixel';
+
+export const useSnapCalculator = (snaps: number[], maxHeight: number, unit: Unit) => {
+  const viewportHeightPx = document.documentElement.clientHeight;
+  const swipeviewHeightPx =
+    unit === 'percent' ? Math.floor(viewportHeightPx * (maxHeight / 100)) : maxHeight;
+
+  const snapsToPixels = useMemo(
+    () =>
+      snaps?.map((snap) =>
+        Math.abs(
+          (unit === 'percent' ? Math.floor(swipeviewHeightPx * (snap / 100)) : snap) -
+            swipeviewHeightPx,
+        ),
+      ),
+    [viewportHeightPx],
+  );
+
+  const getPixelToSnap = (pixels: number) => {
+    const snapIdx = snapsToPixels?.indexOf(pixels) || 0;
+    return snaps?.[snapIdx] || 0;
+  };
+
+  const getSnapToPixel = (snap: number) => {
+    const snapIdx = snaps?.indexOf(snap) || 0;
+    return snapsToPixels?.[snapIdx] || 0;
+  };
+
+  return {
+    viewportHeightPx,
+    snapsToPixels,
+    swipeviewHeightPx,
+    getPixelToSnap,
+    getSnapToPixel,
+  };
+};