@envive-ai/react-hooks 0.2.4 → 0.2.6-alpha

package/dist/src/hooks/Search/useSearch.js

@@ -0,0 +1,224 @@
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { ProductSorting, SpiffyMetricsEventName, SpiffyWidgets, } from "@envive-ai/types";
+import { addSearchFilterAtom, clearSearchFiltersAtom, createFilterOption, filteredSearchProductsAtom, performSearchAtom, removeSearchFilterAtom, searchAtom, searchFiltersAtom, searchParamsAtom, searchProductSortingAtom, searchSelectedFiltersAtom, } 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";
+import { getSearchResultsState } from "../utils";
+import { useRecommendedProducts } from "./useRecommendedProducts";
+import { useSearchInput } from "./useSearchInput";
+export const useSearch = () => {
+    var _a, _b, _c;
+    // 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 [{ 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);
+    const recommendedProducts = useRecommendedProducts();
+    // Refs
+    const searchResultsRef = useRef(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;
+    const searchResultsState = getSearchResultsState(isLoadingSearch, searchData);
+    const dynamicFilters = (searchData === null || searchData === void 0 ? void 0 : searchData.filters) || [];
+    // Provide fallback values when config is not yet available
+    const safeProductCardConfig = ((_b = (_a = config === null || config === void 0 ? void 0 : config.frontendConfig) === null || _a === void 0 ? void 0 : _a.uiConfigs) === null || _b === void 0 ? void 0 : _b.productCardConfig) || {
+        variant: "minimal",
+        hoverVariant: "none",
+        layoutVariant: "square",
+    };
+    const safeMerchantShortName = orgShortName || "";
+    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,
+        ];
+    }, [productSorting, searchFilters]);
+    const filterButtonText = useMemo(() => {
+        const selectedCount = filters.reduce((acc, 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, }) => {
+        trackEvent({
+            eventName: SpiffyMetricsEventName.SearchFilterClicked,
+            eventProps: {
+                filterType: "Dynamic",
+                filterValue: filter,
+                queryText: searchText,
+            },
+        });
+        addFilter(createFilterOption("dynamic", filter, dynamicFilterDisplayName));
+        scrollToTop();
+    }, [addFilter, searchText, scrollToTop, trackEvent]);
+    const handleRemoveFilter = useCallback((filter) => {
+        removeFilter(filter.id);
+        scrollToTop();
+    }, [removeFilter, scrollToTop]);
+    const handleSelectFilterItem = useCallback(({ filterId, filterItemId, isSelected, displayName, }) => {
+        if (filterId === "sort") {
+            const newSort = filterItemId;
+            trackEvent({
+                eventName: SpiffyMetricsEventName.SearchSortClicked,
+                eventProps: {
+                    sortType: newSort,
+                    queryText: searchText,
+                },
+            });
+            setProductSorting(newSort);
+            scrollToTop();
+        }
+        else if (!isSelected) {
+            removeFilter(`${filterId}:${filterItemId}`);
+            scrollToTop();
+        }
+        else {
+            trackEvent({
+                eventName: SpiffyMetricsEventName.SearchFilterClicked,
+                eventProps: {
+                    filterType: "Static",
+                    filterCategory: filterId,
+                    filterValue: filterItemId,
+                    queryText: searchText,
+                },
+            });
+            addFilter(createFilterOption(filterId, filterItemId, displayName));
+            scrollToTop();
+        }
+    }, [
+        addFilter,
+        removeFilter,
+        setProductSorting,
+        searchText,
+        scrollToTop,
+        trackEvent,
+    ]);
+    const handleClearAllFilters = useCallback(() => {
+        setProductSorting(ProductSorting.FEATURED);
+        clearFilters();
+        scrollToTop();
+    }, [setProductSorting, clearFilters, scrollToTop]);
+    // Side Effects
+    useTrackComponentVisibleEvent(SpiffyWidgets.SearchResults, searchResultsRef, {}, SpiffyMetricsEventName.SearchComponentVisible);
+    useEffect(() => {
+        if (productList.length > 0) {
+            trackEvent({
+                eventName: SpiffyMetricsEventName.SearchResultsViewed,
+                eventProps: {
+                    queryText: searchText,
+                    resultsCount: productList.length,
+                },
+            });
+        }
+    }, [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 !== null && esq !== void 0 ? esq : query });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [performSearch, query, setSearchText]);
+    return {
+        searchData,
+        searchResponseId: (_c = searchData === null || searchData === void 0 ? void 0 : searchData.searchResponseId) !== null && _c !== void 0 ? _c : "",
+        merchantShortName: safeMerchantShortName,
+        productCardConfig: safeProductCardConfig,
+        productList,
+        recommendedProducts,
+        autocompleteResults,
+        searchFilters: filters,
+        availableDynamicFilters,
+        selectedFilterOptions,
+        searchText,
+        query: query || "",
+        searchResultsState,
+        isLoadingSearch,
+        isLoadingAutocomplete: false,
+        isFilterOpen,
+        shouldShowAutocomplete,
+        focusedIndex,
+        focusedOptionId,
+        filterButtonText,
+        onSearchInputChange: handleSearchInputChange,
+        onSubmitSearch: handleSubmitSearch,
+        onAutocompleteSelect: handleAutocompleteSelect,
+        onKeyDown: handleKeyDown,
+        onSearchInputFocus: handleSearchInputFocus,
+        onSearchInputBlur: handleSearchInputBlur,
+        onToggleDynamicFilter: handleToggleDynamicFilter,
+        onSelectFilterItem: handleSelectFilterItem,
+        onRemoveFilter: handleRemoveFilter,
+        onClearAllFilters: handleClearAllFilters,
+        setIsFilterOpen,
+        searchResultsRef,
+    };
+};

package/dist/src/hooks/Search/useSearchInput.js

@@ -0,0 +1,183 @@
+import { useState, useCallback, useRef, useMemo } from "react";
+import { useAtomValue } from "jotai";
+import Fuse from "fuse.js";
+import { SpiffyMetricsEventName, } from "@envive-ai/types";
+import { useAmplitudeTracking } from "../AmplitudeOperations";
+import { autocompleteStateAtom } from "src/atoms/globalSearch";
+export const useSearchInput = ({ initialSearchText = "", searchOrigin, onSearchSubmit, }) => {
+    const { track } = useAmplitudeTracking();
+    // 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(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) => {
+        // 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(SpiffyMetricsEventName.SearchInputStarted, {
+                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(SpiffyMetricsEventName.SearchQuerySubmitted, {
+                searchOrigin,
+                queryText: searchText.trim(),
+            });
+            onSearchSubmit(searchText.trim());
+        }
+    }, [searchText, onSearchSubmit, searchOrigin, track]);
+    const handleAutocompleteSelect = useCallback((suggestion, rankPosition) => {
+        isSelectingAutocomplete.current = true;
+        setSearchText(suggestion);
+        setHasText(suggestion.trim().length > 0);
+        setIsFocused(false);
+        track(SpiffyMetricsEventName.SearchQuerySubmitted, {
+            searchOrigin,
+            queryText: suggestion.trim(),
+        });
+        if (onSearchSubmit) {
+            onSearchSubmit(suggestion.trim());
+        }
+        setTimeout(() => {
+            isSelectingAutocomplete.current = false;
+        }, 100);
+    }, [onSearchSubmit, searchOrigin, track]);
+    const handleKeyDown = useCallback((event) => {
+        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) => {
+        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,
+    };
+};

package/dist/src/hooks/SearchOperations/index.js

@@ -0,0 +1 @@
+export * from "./useSearchOperations";

package/dist/src/hooks/SearchOperations/useSearchOperations.js

@@ -0,0 +1,78 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useSearchService } from 'src/contexts/searchContext';
+export const useProductSearch = () => {
+    const { searchProducts, isReady } = useSearchService();
+    const [data, setData] = useState();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const search = useCallback(async (params) => {
+        if (!isReady) {
+            setError(new Error('Search service not ready - missing dependencies'));
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await searchProducts(params);
+            setData(result);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error('Unknown search error'));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [searchProducts, isReady]);
+    const reset = useCallback(() => {
+        setData(undefined);
+        setError(null);
+        setLoading(false);
+    }, []);
+    return {
+        data,
+        loading,
+        error,
+        search,
+        reset,
+        isReady,
+    };
+};
+export const useSearchWithQuery = (params) => {
+    const { searchProducts, isReady } = useSearchService();
+    const [data, setData] = useState();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const executeSearch = useCallback(async (searchParams) => {
+        if (!isReady)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await searchProducts(searchParams);
+            setData(result);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error('Unknown search error'));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [searchProducts, isReady]);
+    useEffect(() => {
+        if (params && isReady) {
+            executeSearch(params);
+        }
+    }, [params, isReady, executeSearch]);
+    const refetch = useCallback(() => {
+        if (params) {
+            executeSearch(params);
+        }
+    }, [params, executeSearch]);
+    return {
+        data,
+        loading,
+        error,
+        refetch,
+        isReady,
+    };
+};

package/dist/src/hooks/SessionStorageOperations/index.js

@@ -0,0 +1 @@
+export * from "./useSessionStorageOperations";

package/dist/src/hooks/SessionStorageOperations/useSessionStorageOperations.js

@@ -0,0 +1,20 @@
+import { useState, useEffect, useCallback } from "react";
+import { useSessionStorage } from "src/contexts/sessionStorageContext";
+export const useSessionStorageValue = (key) => {
+    const { getItem, setItem } = useSessionStorage();
+    const [value, setValue] = useState(() => getItem(key));
+    useEffect(() => {
+        const handleStorageChange = (event) => {
+            if (event.key === key) {
+                setValue(event.newValue);
+            }
+        };
+        window.addEventListener("storage", handleStorageChange);
+        return () => window.removeEventListener("storage", handleStorageChange);
+    }, [key, getItem]);
+    const updateValue = useCallback((newValue) => {
+        setItem(key, newValue);
+        setValue(newValue);
+    }, [key, setItem]);
+    return { value, setValue: updateValue };
+};

package/dist/src/hooks/ShopifyUrlOperations/index.js

@@ -0,0 +1 @@
+export * from "./useShopifyUrlOperations";

package/dist/src/hooks/ShopifyUrlOperations/useShopifyUrlOperations.js

@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { useShopifyUrl } from 'src/contexts/shopifyUrlContext/shopifyUrlContext';
+export const useShopifyUrlOperations = () => {
+    const { getTrimmedPathName, getPlpOrPdpId, isOnPdpPage, isOnPlpPage, isReady } = useShopifyUrl();
+    return {
+        getTrimmedPathName,
+        getPlpOrPdpId,
+        isOnPdpPage,
+        isOnPlpPage,
+        isReady,
+    };
+};
+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';
+    }, [isReady, isOnPdpPage, isOnPlpPage]);
+    return { getPageType, isReady };
+};
+export const useProductId = (extractor) => {
+    const { getPlpOrPdpId, isReady } = useShopifyUrl();
+    const productId = useCallback(() => {
+        if (!isReady)
+            return null;
+        return getPlpOrPdpId(extractor);
+    }, [isReady, getPlpOrPdpId, extractor]);
+    return { productId, isReady };
+};

package/dist/src/hooks/SnapCalculator/index.js

@@ -0,0 +1 @@
+export * from "./useSnapCalculator";

package/dist/src/hooks/SnapCalculator/useSnapCalculator.js

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

package/dist/src/hooks/SystemSettingsContext/index.js

@@ -0,0 +1 @@
+export * from "./useSystemSettingsContext";

package/dist/src/hooks/SystemSettingsContext/useSystemSettingsContext.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { SystemSettingsContext } from "src/contexts/systemSettingsContext";
+export const useSystemSettingsContext = () => {
+    const context = useContext(SystemSettingsContext);
+    if (!context) {
+        throw new Error("useSystemSettingsContext must be used within a SystemSettingsContextProvider");
+    }
+    return { ...context };
+};

package/dist/src/hooks/TrackComponentVisibleEvent/index.js

@@ -0,0 +1 @@
+export * from "./useTrackComponentVisibleEvent";

package/dist/src/hooks/TrackComponentVisibleEvent/useTrackComponentVisibleEvent.js

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react';
+import { useIntersection } from 'src/hooks/Intersection/useIntersection';
+import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
+import { SpiffyMetricsEventName } from '@envive-ai/types';
+/**
+ * Tracks a component and logs an event to Amplitude when the component is visible.
+ *
+ * @param component - The component to track.
+ * @param element - The element to track visibility of.
+ * @param eventProps - Additional properties to include with the event.
+ * @param eventName - The Amplitude event name to track (defaults to ChatComponentVisible).
+ */
+export const useTrackComponentVisibleEvent = (component, element, eventProps, eventName = SpiffyMetricsEventName.ChatComponentVisible) => {
+    const isVisible = useIntersection(element, '0px');
+    const hasTrackedEvent = useRef(false);
+    const { trackEvent } = useAmplitude();
+    const componentProps = (() => {
+        if (eventName === SpiffyMetricsEventName.ChatComponentVisible) {
+            return {
+                chat_component: component,
+                ...eventProps,
+            };
+        }
+        if (eventName === SpiffyMetricsEventName.SearchComponentVisible) {
+            return {
+                search_component: component,
+                ...eventProps,
+            };
+        }
+        // Default case for other event types
+        return {
+            component,
+            ...eventProps,
+        };
+    })();
+    useEffect(() => {
+        if (isVisible && !hasTrackedEvent.current) {
+            trackEvent({
+                eventName,
+                eventProps: componentProps,
+            });
+            hasTrackedEvent.current = true;
+        }
+    }, [isVisible, component, eventProps, eventName, componentProps, trackEvent]);
+};

package/dist/src/hooks/UpdateAnalyticsProps/index.js

@@ -0,0 +1 @@
+export * from "./useUpdateAnalyticsProps";