@envive-ai/react-hooks 0.2.6-alpha-5 → 0.2.6-alpha-7

package/dist/src/hooks/GrabAndScroll/useGrabAndScroll.js

@@ -0,0 +1,105 @@
+import { useRef, useState } from 'react';
+const animateHorizontalScroll = ({ element, duration, targetScroll, multiply = 1, direction, callback, offset = 0, }) => {
+    const start = element.scrollLeft;
+    const distance = (targetScroll - start) * multiply;
+    const startTime = performance.now();
+    function easeOutSine(x) {
+        return Math.sin((x * Math.PI) / 2);
+    }
+    function scrollStep(currentTime) {
+        const timeElapsed = currentTime - startTime;
+        const progress = Math.min(timeElapsed / duration, 1);
+        const easing = easeOutSine(progress);
+        const step = start + distance * easing;
+        const canScroll = (direction === 'rt' ? element.scrollLeft < step : element.scrollLeft > step) || !direction;
+        if (step > 0 && canScroll) {
+            element.scrollTo(step, 0);
+        }
+        if (timeElapsed < duration) {
+            requestAnimationFrame(scrollStep);
+        }
+        // End of scrolling container
+        else if (element.scrollLeft + offset === element.scrollWidth) {
+            callback === null || callback === void 0 ? void 0 : callback('rt');
+        }
+        // Begin of scrolling container
+        else if (element.scrollLeft <= 1) {
+            callback === null || callback === void 0 ? void 0 : callback('lt');
+        }
+        // Somewhere in the middle
+        else {
+            callback === null || callback === void 0 ? void 0 : callback('ct');
+        }
+    }
+    requestAnimationFrame(scrollStep);
+};
+export const useGrabAndScroll = (enabled, chunkWidth, speed = 400, offset = 0) => {
+    const containerRef = useRef(null);
+    const [leftArrow, setLeftArrow] = useState(false);
+    const [rightArrow, setRightArrow] = useState(true);
+    const handleArrows = (position) => {
+        switch (position) {
+            case 'lt':
+                setLeftArrow(false);
+                setRightArrow(true);
+                break;
+            case 'rt':
+                setLeftArrow(true);
+                setRightArrow(false);
+                break;
+            default:
+                setLeftArrow(true);
+                setRightArrow(true);
+        }
+    };
+    const animationTrigger = () => {
+        var _a;
+        if (enabled && containerRef.current) {
+            const dist = (((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) || 0) / chunkWidth;
+            const targetScroll = chunkWidth * (Math.floor(dist) + (dist % 1 > 0.5 ? 1 : 0));
+            animateHorizontalScroll({
+                element: containerRef.current,
+                targetScroll,
+                duration: speed,
+                offset,
+                callback: handleArrows,
+            });
+        }
+    };
+    const onNext = (cardsToSlide) => {
+        if (containerRef.current) {
+            const targetScroll = containerRef.current.scrollLeft + chunkWidth;
+            animateHorizontalScroll({
+                element: containerRef.current,
+                targetScroll,
+                duration: speed,
+                direction: 'rt',
+                multiply: cardsToSlide,
+                offset,
+                callback: handleArrows,
+            });
+        }
+    };
+    const onPrevious = (cardsToSlide) => {
+        if (containerRef.current) {
+            const targetScroll = containerRef.current.scrollLeft - chunkWidth;
+            animateHorizontalScroll({
+                element: containerRef.current,
+                targetScroll,
+                duration: speed,
+                direction: 'lt',
+                multiply: cardsToSlide,
+                offset,
+                callback: handleArrows,
+            });
+        }
+    };
+    return {
+        containerRef,
+        leftArrow,
+        rightArrow,
+        animationTrigger,
+        onNext,
+        onPrevious,
+    };
+};

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

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

package/dist/src/hooks/GraphQLConfig/useGraphQLConfig.js

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useGraphQLClient } from 'src/contexts/graphqlContext/graphqlContext';
+export const useColorsAndFrontendConfig = () => {
+    const { getColorsAndFrontendConfig, isReady } = useGraphQLClient();
+    const [data, setData] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const fetchConfig = useCallback(async () => {
+        if (!isReady)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await getColorsAndFrontendConfig();
+            setData(result);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error('Unknown error'));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [getColorsAndFrontendConfig, isReady]);
+    useEffect(() => {
+        fetchConfig();
+    }, [fetchConfig]);
+    return { data, loading, error, refetch: fetchConfig };
+};
+export const useOrgId = () => {
+    const { getOrgId, isReady } = useGraphQLClient();
+    const [orgId, setOrgId] = useState();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (!isReady)
+            return;
+        const fetchOrgId = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                const id = await getOrgId();
+                setOrgId(id);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err : new Error('Unknown error'));
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchOrgId();
+    }, [getOrgId, isReady]);
+    return { orgId, loading, error };
+};

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

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

package/dist/src/hooks/IdentifyUser/useIdentifyUser.js

@@ -0,0 +1,28 @@
+import { useState, useCallback } from "react";
+import { useUserIdentity } from "src/contexts/userIdentityContext/userIdentityContext";
+export const useIdentifyUser = () => {
+    const { identifyUser, isReady } = useUserIdentity();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const executeIdentifyUser = useCallback(async () => {
+        if (!isReady) {
+            setError(new Error("UserIdentityContext not ready."));
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            await identifyUser();
+        }
+        catch (err) {
+            setError(err instanceof Error
+                ? err
+                : new Error("Unknown error during user identification."));
+            throw err;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [identifyUser, isReady]);
+    return { loading, error, executeIdentifyUser, isReady };
+};

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

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

package/dist/src/hooks/ImageResolver/useImageResolver.js

@@ -0,0 +1,45 @@
+/* eslint-disable max-classes-per-file */
+import { OrgShortName } from '@envive-ai/types';
+import { useAtomValue } from 'jotai';
+import { orgShortNameAtom } from 'src/atoms/envive/enviveConfig';
+class ImageResolver {
+}
+class ShopifyImageResolver extends ImageResolver {
+    resolve(url, size) {
+        const pattern = /_\d+x\.jpg/;
+        const urlHasPrefix = pattern.test(url);
+        const newSizePrefix = `_${size}x.jpg`;
+        if (urlHasPrefix) {
+            return url.replace(pattern, newSizePrefix);
+        }
+        return url.replace('.jpg', newSizePrefix);
+    }
+}
+export const useImageResolver = () => {
+    const orgShortName = useAtomValue(orgShortNameAtom);
+    const resolve = (image, size) => {
+        var _a;
+        if (image && size && orgShortName) {
+            const newImagePath = (_a = MerchantImageResolver.get(orgShortName)) === null || _a === void 0 ? void 0 : _a.resolve(image, size);
+            return newImagePath || image;
+        }
+        return image;
+    };
+    return {
+        resolve,
+    };
+};
+class MerchantImageResolver {
+    static loadMapping() {
+        if (this.imageResolverMap.size === 0) {
+            this.imageResolverMap.set(OrgShortName.Spanx, new ShopifyImageResolver());
+            this.imageResolverMap.set(OrgShortName.SpanxStaging, new ShopifyImageResolver());
+            this.imageResolverMap.set(OrgShortName.UniqueVintage, new ShopifyImageResolver());
+        }
+        return this.imageResolverMap;
+    }
+    static get(name) {
+        return this.loadMapping().get(name);
+    }
+}
+MerchantImageResolver.imageResolverMap = new Map();

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

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

package/dist/src/hooks/Intersection/useIntersection.js

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

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

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

package/dist/src/hooks/IsSmallScreen/useIsSmallScreen.js

@@ -0,0 +1,16 @@
+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) => {
+            setIsSmall(event.matches);
+        };
+        mediaQuery.addEventListener('change', handleResize);
+        return () => mediaQuery.removeEventListener('change', handleResize);
+    }, []);
+    return isSmall;
+};

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

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

package/dist/src/hooks/LocalStorageOperations/useLocalStorageOperations.js

@@ -0,0 +1,64 @@
+import { LocalStorageKeys } from '@envive-ai/types';
+import { useState, useEffect, useCallback } from 'react';
+import { useLocalStorage } from 'src/contexts/localStorageContext';
+// Reactive localStorage value hook
+export const useLocalStorageValue = (key) => {
+    const { getItem, setItem, attachListener, detachListener } = useLocalStorage();
+    const [value, setValue] = useState(() => getItem(key));
+    useEffect(() => {
+        const listener = {
+            storageKey: key,
+            listener: (event) => {
+                setValue(event.newValue);
+            },
+        };
+        attachListener(listener);
+        return () => detachListener(listener);
+    }, [key, attachListener, detachListener]);
+    const updateValue = useCallback((newValue) => {
+        setItem(key, newValue);
+        setValue(newValue);
+    }, [key, setItem]);
+    return { value, setValue: updateValue };
+};
+// Feature flag hook for Spiffy
+export const useSpiffyFeatureFlag = () => {
+    const { setSpiffyOnFeatureFlag } = useLocalStorage();
+    const { value } = useLocalStorageValue(LocalStorageKeys.SpiffyOnOverride);
+    const setFlag = useCallback((flag) => {
+        setSpiffyOnFeatureFlag(flag);
+    }, [setSpiffyOnFeatureFlag]);
+    return {
+        value: value === 'true' ? true : value === 'false' ? false : null,
+        setFlag,
+    };
+};
+// Feature flag hook for Envive
+export const useEnviveFeatureFlag = () => {
+    const { setItem, getItem } = useLocalStorage();
+    const { value } = useLocalStorageValue(LocalStorageKeys.EnviveOnOverride);
+    const setFlag = useCallback((flag) => {
+        if (flag === true) {
+            setItem(LocalStorageKeys.EnviveOnOverride, 'true');
+        }
+        else if (flag === false) {
+            setItem(LocalStorageKeys.EnviveOnOverride, 'false');
+        }
+    }, [setItem]);
+    return {
+        value: value === 'true' ? true : value === 'false' ? false : null,
+        setFlag,
+    };
+};
+// Storage listener hook
+export const useLocalStorageListener = (key, callback) => {
+    const { attachListener, detachListener } = useLocalStorage();
+    useEffect(() => {
+        const listener = {
+            storageKey: key,
+            listener: callback,
+        };
+        attachListener(listener);
+        return () => detachListener(listener);
+    }, [key, callback, attachListener, detachListener]);
+};

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

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

package/dist/src/hooks/MessageFilter/useMessageFilter.js

@@ -0,0 +1,37 @@
+import { MessageType } from '@envive-ai/types';
+export const useMessageFilter = () => {
+    const findMessageIndex = ({ msgs, type, role }) => {
+        let lastIndex = -1;
+        msgs.forEach((subArray, index) => {
+            subArray.forEach((obj) => {
+                if (obj.type === type || obj.role === role)
+                    lastIndex = index;
+            });
+        });
+        return lastIndex;
+    };
+    const removePreviousDiscussions = (msgs, index) => {
+        if (index > -1) {
+            const lastMessages = msgs.slice(index);
+            return lastMessages.length > 0 ? lastMessages : msgs;
+        }
+        return msgs;
+    };
+    const getFilteredMessages = (msgs, skipFilter) => {
+        const messageMap = msgs.reduce((acc, msg) => {
+            acc[msg[0].id] = msg;
+            return acc;
+        }, {});
+        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/dist/src/hooks/MessageScrollObserver/index.js

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

package/dist/src/hooks/MessageScrollObserver/useMessageScrollObserver.js

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+export const useMessageScrollObserver = (boxRef, scrollRef, onScrollChange) => {
+    const calculateScrollHeight = () => {
+        var _a, _b;
+        const boxHeight = ((_a = boxRef === null || boxRef === void 0 ? void 0 : boxRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
+        const scrollHeight = ((_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.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 === null || scrollRef === void 0 ? void 0 : scrollRef.current) {
+            boxRO = new ResizeObserver(updateState);
+            boxRO.observe(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current);
+        }
+        if (boxRef === null || boxRef === void 0 ? void 0 : boxRef.current) {
+            scrollRO = new ResizeObserver(updateState);
+            scrollRO.observe(boxRef === null || boxRef === void 0 ? void 0 : boxRef.current);
+        }
+        return () => {
+            if ((scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) && boxRO) {
+                boxRO.unobserve(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current);
+            }
+            if (scrollRO && (boxRef === null || boxRef === void 0 ? void 0 : boxRef.current)) {
+                scrollRO === null || scrollRO === void 0 ? void 0 : scrollRO.unobserve(boxRef === null || boxRef === void 0 ? void 0 : boxRef.current);
+            }
+        };
+    }, []);
+};

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

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

package/dist/src/hooks/NewOrgConfig/useNewOrgConfig.js

@@ -0,0 +1,5 @@
+import { useNewOrgConfigContext } from "src/contexts/newOrgConfigContext/newOrgConfigContext";
+export const useNewOrgConfig = () => {
+    const config = useNewOrgConfigContext();
+    return config;
+};

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

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

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

@@ -0,0 +1,35 @@
+import { FeatureGates, } from "@envive-ai/types";
+import { useAtomValue, useSetAtom } from "jotai";
+import { useEffect } from "react";
+import { useFeatureFlagService } from "src/contexts/featureFlagServiceContext/featureFlagServiceContext";
+import { retrievedProductsAtom, performProductRetrievalAtom, productRetrievalAtom, } from "src/atoms/search/productRetrievalAPI";
+import { useNewOrgConfig } from "../NewOrgConfig";
+/**
+ * A hook to get recommended products.
+ * It checks the `IsRecommendedProductsEnabled` feature gate and triggers fetching if needed.
+ * If the gate is enabled, it returns the list of recommended products.
+ * If the gate is disabled, it returns an empty array.
+ *
+ * @returns The list of recommended products or an empty array.
+ */
+export const useRecommendedProducts = () => {
+    const featureFlagService = useFeatureFlagService();
+    const isEnabled = featureFlagService.isFeatureGateEnabled(FeatureGates.IsRecommendedProductsEnabled);
+    const recommendedProducts = useAtomValue(retrievedProductsAtom);
+    const performProductRetrieval = useSetAtom(performProductRetrievalAtom);
+    const { lastProductIds } = useAtomValue(productRetrievalAtom);
+    const orgUIConfig = useNewOrgConfig();
+    useEffect(() => {
+        const recommendedProductIds = orgUIConfig.searchConfig
+            ? orgUIConfig.searchConfig.recommendedProducts
+            : [];
+        // Fetch only if the feature is enabled, there are IDs to fetch, and we haven't already fetched them.
+        if (isEnabled &&
+            recommendedProductIds &&
+            recommendedProductIds.length > 0 &&
+            !lastProductIds) {
+            performProductRetrieval({ productIds: recommendedProductIds });
+        }
+    }, [isEnabled, performProductRetrieval, lastProductIds, orgUIConfig]);
+    return isEnabled ? recommendedProducts : [];
+};