@envive-ai/react-hooks 0.2.6-alpha-marlo.0 → 0.2.6-alpha-arthur-4

package/src/hooks/ChatToggle/useChatToggle.ts

@@ -1,20 +1,14 @@
-import { useAtomValue, useSetAtom } from "jotai";
-import { ChatElementDisplayLocation } from "src/application/models/chatElementDisplayLocation";
-import { chatAtom, chatOnToggleAtom } from "src/atoms/chat";
-import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from "src/contexts/amplitudeContext/amplitudeContext";
+import { ChatElementDisplayLocation, SpiffyMetricsEventName } from '@envive-ai/types';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { chatAtom, chatOnToggleAtom } from 'src/atoms/chat';
+import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
 
 export const useChatToggle = () => {
   const onToggle = useSetAtom(chatOnToggleAtom);
   const { isOpen } = useAtomValue(chatAtom);
   const { trackEvent } = useAmplitude();
 
-  const toggle = (
-    triggerLocation: ChatElementDisplayLocation,
-    triggerId?: string
-  ) => {
+  const toggle = (triggerLocation: ChatElementDisplayLocation, triggerId?: string) => {
     if (!isOpen) {
       trackEvent({
         eventName: SpiffyMetricsEventName.ChatComponentExpanded,
@@ -40,19 +34,13 @@ export const useChatToggle = () => {
     onToggle();
   };
 
-  const openChat = (
-    triggerLocation: ChatElementDisplayLocation,
-    triggerId?: string
-  ) => {
+  const openChat = (triggerLocation: ChatElementDisplayLocation, triggerId?: string) => {
     if (!isOpen) {
       toggle(triggerLocation, triggerId);
     }
   };
 
-  const closeChat = (
-    triggerLocation: ChatElementDisplayLocation,
-    triggerId?: string
-  ) => {
+  const closeChat = (triggerLocation: ChatElementDisplayLocation, triggerId?: string) => {
     if (isOpen) {
       toggle(triggerLocation, triggerId);
     }

package/src/hooks/ChatToggleAnalytics/useChatToggleAnalytics.ts

@@ -1,7 +1,7 @@
-import { useSetAtom } from "jotai";
-import { chatOnToggleAtom } from "src/atoms/chat/chatState";
-import { ChatElementDisplayLocation } from "src/application/models/chatElementDisplayLocation";
-import { useAmplitudeTracking } from "../AmplitudeOperations";
+import { useSetAtom } from 'jotai';
+import { chatOnToggleAtom } from 'src/atoms/chat/chatState';
+import { useAmplitudeTracking } from '../AmplitudeOperations';
+import { ChatElementDisplayLocation } from '@envive-ai/types';
 
 export const useChatToggleAnalytics = () => {
   const setChatOnToggle = useSetAtom(chatOnToggleAtom);

package/src/hooks/CustomerSupportHandoff/useCustomerSupportHandoff.ts

@@ -1,4 +1,4 @@
-import Logger from 'src/application/logging/logger';
+import Logger from '../../application/logging/logger';
 import { useCallback } from 'react';
 
 /**

package/src/hooks/ElementObserver/useElementObserver.ts

@@ -1,35 +1,18 @@
+import { ElementObserverUtility, MouseEventTypes } from '@envive-ai/types';
 import { ReactElement, useEffect, useRef, useState } from 'react';
 import { DOMObserver } from 'src/application/utils/domObserver';
 import { ElementObserver } from 'src/application/utils/elementObserver';
-import { MouseEventTypes } from 'src/application/utils/mouseEventTypes';
 import { NodeSelector } from 'src/application/utils/nodeSelector';
 
-export interface ElementObserverUtility {
-  onChange: (fn: (el: HTMLElement | null) => void) => void;
-  onAdd: (fn: (el: HTMLElement | null) => void) => void;
-  onRemove: (fn: (el: HTMLElement | null) => void) => void;
-  onClassChange: (fn: (classes?: DOMTokenList) => void) => void;
-  onClassAdded: (className: string, fn: () => void) => void;
-  onClassRemoved: (className: string, fn: () => void) => void;
-  onAddChild: (fn: (nodes?: DOMTokenList) => void) => void;
-  onRemoveChild: (fn: (nodes?: DOMTokenList) => void) => void;
-  onEvent: <K extends keyof HTMLElementEventMap>(
-    event: K,
-    fn: EventListenerOrEventListenerObject,
-  ) => void;
-  blockRendering: () => void;
-  unblockRendering: () => void;
-  exists: () => boolean;
-  isRendered: () => boolean;
-  render: (fn: () => ReactElement) => ReactElement | undefined;
-  fire: (event: MouseEventTypes) => void;
-  show: () => void;
-  hide: () => void;
-  applyStyle: (styles: React.CSSProperties) => void;
-  targetNode: HTMLElement | null;
-}
-
 /*
+>>>>
+<task_progress>
+- [ ] Identify all exported types across the codebase.
+- [x] Create individual type files in `/types` for each type.
+- [x] Move `ElementObserverUtility` to `src/types/ElementObserverUtility.ts`.
+- [ ] Update `src/hooks/ElementObserver/useElementObserver.ts` to import and use the new type.
+- [ ] Update `/types/index.ts` by adding export for `./ElementObserverUtility`.
+</task_progress>
  * This hook enables the connection between a `MutationObserver` and a React.js component.
  * It abstracts all the necessary validations and implementations to modify HTML elements,
  * monitor their changes, and interact with them. The only required input is the element's selector.
@@ -147,11 +130,8 @@ export const useElementObserver = (selector: NodeSelector): ElementObserverUtili
    * @param fn
    * @returns
    */
-  const render = (fn: () => ReactElement) => {
-    if (!renderBlocked) {
-      return eoRef.current.render(fn);
-    }
-  };
+  const render = (fn: () => ReactElement) =>
+    !renderBlocked ? eoRef.current.render(fn) : undefined;
 
   /**
    * Checks if the element exists in the DOM.
@@ -211,7 +191,9 @@ export const useElementObserver = (selector: NodeSelector): ElementObserverUtili
    */
   const applyStyle = (styles: React.CSSProperties) => {
     const node = eoRef?.current?.getNode();
-    node && Object.assign(node.style, styles);
+    if (node) {
+      Object.assign(node.style, styles);
+    }
   };
 
   useEffect(() => {

package/src/hooks/GrabAndScroll/useGrabAndScroll.ts

@@ -1,133 +1,134 @@
-import { useRef, useState } from "react";
-
-type ArrowPosition = 'lt' | 'ct' | 'rt'
-
-interface AnimationProps {
-    element: HTMLElement
-    targetScroll: number 
-    duration: number 
-    direction?: 'lt' | 'rt' 
-    multiply?: number 
-    offset?: number
-    callback?: (position: ArrowPosition) => void
-}
-
-const animateHorizontalScroll = ({ element, duration, targetScroll, multiply = 1, direction, callback, offset = 0 }: AnimationProps) => {
-    const start = element.scrollLeft
-    const distance = (targetScroll - start) * multiply;
-    const startTime = performance.now();
-
-    function easeOutSine(x: number): number {
-      return Math.sin((x * Math.PI) / 2);
+import { useRef, useState } from 'react';
+import { AnimationProps, ArrowPosition } from '@envive-ai/types';
+
+const animateHorizontalScroll = ({
+  element,
+  duration,
+  targetScroll,
+  multiply = 1,
+  direction,
+  callback,
+  offset = 0,
+}: AnimationProps) => {
+  const start = element.scrollLeft;
+  const distance = (targetScroll - start) * multiply;
+  const startTime = performance.now();
+
+  function easeOutSine(x: number): number {
+    return Math.sin((x * Math.PI) / 2);
+  }
+
+  function scrollStep(currentTime: number): void {
+    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);
     }
 
-    function scrollStep(currentTime: number): void {
-        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?.('rt')
-        } 
-        // Begin of scrolling container
-        else if (element.scrollLeft <= 1) {
-            callback?.('lt')
-        }
-        // Somewhere in the middle
-        else {
-            callback?.('ct')
-        }
-
+    if (timeElapsed < duration) {
+      requestAnimationFrame(scrollStep);
     }
 
-    requestAnimationFrame(scrollStep);
-}
-
-
-export const useGrabAndScroll = (enabled: boolean, chunkWidth: number, speed: number = 400, offset: number = 0) => {
-    const containerRef = useRef<HTMLDivElement>(null)
-    const [ leftArrow, setLeftArrow ] = useState(false)
-    const [ rightArrow, setRightArrow ] = useState(true)
-
-    const handleArrows = (position: ArrowPosition) => {
-        switch (position) {
-            case 'lt':
-                setLeftArrow(false)
-                setRightArrow(true)
-                break
-
-            case 'rt':
-                setLeftArrow(true)
-                setRightArrow(false)
-                break
-
-            default:
-                setLeftArrow(true)
-                setRightArrow(true)
-        }
+    // End of scrolling container
+    else if (element.scrollLeft + offset === element.scrollWidth) {
+      callback?.('rt');
     }
-
-    const animationTrigger = () => {
-        if (enabled && containerRef.current) {
-            const dist = (containerRef?.current?.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
-            })
-        }
+    // Begin of scrolling container
+    else if (element.scrollLeft <= 1) {
+      callback?.('lt');
     }
-
-    const onNext = (cardsToSlide: number) => {
-        if (containerRef.current) {
-            const targetScroll = containerRef.current.scrollLeft + chunkWidth
-            animateHorizontalScroll({
-                element: containerRef.current, 
-                targetScroll, 
-                duration: speed, 
-                direction: 'rt', 
-                multiply: cardsToSlide,
-                offset,
-                callback: handleArrows
-            })
-        }
+    // Somewhere in the middle
+    else {
+      callback?.('ct');
     }
-    
-    const onPrevious = (cardsToSlide: number) => {
-        if (containerRef.current) {
-            const targetScroll = containerRef.current.scrollLeft - chunkWidth
-            animateHorizontalScroll({
-                element: containerRef.current, 
-                targetScroll, 
-                duration: speed, 
-                direction: 'lt', 
-                multiply: cardsToSlide,
-                offset,
-                callback: handleArrows
-            })
-        }
+  }
+
+  requestAnimationFrame(scrollStep);
+};
+
+export const useGrabAndScroll = (
+  enabled: boolean,
+  chunkWidth: number,
+  speed: number = 400,
+  offset: number = 0,
+) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [leftArrow, setLeftArrow] = useState(false);
+  const [rightArrow, setRightArrow] = useState(true);
+
+  const handleArrows = (position: ArrowPosition) => {
+    switch (position) {
+      case 'lt':
+        setLeftArrow(false);
+        setRightArrow(true);
+        break;
+
+      case 'rt':
+        setLeftArrow(true);
+        setRightArrow(false);
+        break;
+
+      default:
+        setLeftArrow(true);
+        setRightArrow(true);
     }
-
-    return {
-        containerRef,
-        leftArrow,
-        rightArrow,
-        animationTrigger,
-        onNext,
-        onPrevious
+  };
+
+  const animationTrigger = () => {
+    if (enabled && containerRef.current) {
+      const dist = (containerRef?.current?.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: number) => {
+    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: number) => {
+    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/src/hooks/GraphQLConfig/useGraphQLConfig.ts

@@ -1,8 +1,6 @@
-import { useCallback, useEffect, useState } from "react";
-import {
-  GraphQlConfigValues,
-  useGraphQLClient,
-} from "src/contexts/graphqlContext/graphqlContext";
+import { GraphQlConfigValues } from '@envive-ai/types';
+import { useCallback, useEffect, useState } from 'react';
+import { useGraphQLClient } from 'src/contexts/graphqlContext/graphqlContext';
 
 export const useColorsAndFrontendConfig = () => {
   const { getColorsAndFrontendConfig, isReady } = useGraphQLClient();
@@ -20,7 +18,7 @@ export const useColorsAndFrontendConfig = () => {
       const result = await getColorsAndFrontendConfig();
       setData(result);
     } catch (err) {
-      setError(err instanceof Error ? err : new Error("Unknown error"));
+      setError(err instanceof Error ? err : new Error('Unknown error'));
     } finally {
       setLoading(false);
     }
@@ -50,7 +48,7 @@ export const useOrgId = () => {
         const id = await getOrgId();
         setOrgId(id);
       } catch (err) {
-        setError(err instanceof Error ? err : new Error("Unknown error"));
+        setError(err instanceof Error ? err : new Error('Unknown error'));
       } finally {
         setLoading(false);
       }

package/src/hooks/ImageResolver/useImageResolver.ts

@@ -1,33 +1,12 @@
-import { useAtomValue } from "jotai";
-import { OrgShortName } from "src/application/models";
-import { orgShortNameAtom } from "src/atoms/envive/enviveConfig";
+/* eslint-disable max-classes-per-file */
+import { OrgShortName } from '@envive-ai/types';
+import { useAtomValue } from 'jotai';
+import { orgShortNameAtom } from 'src/atoms/envive/enviveConfig';
+
 abstract class ImageResolver {
   abstract resolve(url: string, size: number): string;
 }
 
-class MerchantImageResolver {
-  private static imageResolverMap = new Map<string, ImageResolver>();
-
-  private 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: string) {
-    return this.loadMapping().get(name);
-  }
-}
-
 class ShopifyImageResolver extends ImageResolver {
   resolve(url: string, size: number): string {
     const pattern = /_\d+x\.jpg/;
@@ -36,7 +15,7 @@ class ShopifyImageResolver extends ImageResolver {
     if (urlHasPrefix) {
       return url.replace(pattern, newSizePrefix);
     }
-    return url.replace(".jpg", newSizePrefix);
+    return url.replace('.jpg', newSizePrefix);
   }
 }
 
@@ -44,10 +23,7 @@ export const useImageResolver = () => {
   const orgShortName = useAtomValue(orgShortNameAtom);
   const resolve = (image?: string, size?: number) => {
     if (image && size && orgShortName) {
-      const newImagePath = MerchantImageResolver.get(orgShortName)?.resolve(
-        image,
-        size
-      );
+      const newImagePath = MerchantImageResolver.get(orgShortName)?.resolve(image, size);
       return newImagePath || image;
     }
     return image;
@@ -57,3 +33,20 @@ export const useImageResolver = () => {
     resolve,
   };
 };
+
+class MerchantImageResolver {
+  private static imageResolverMap = new Map<string, ImageResolver>();
+
+  private 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: string) {
+    return this.loadMapping().get(name);
+  }
+}

package/src/hooks/LocalStorageOperations/useLocalStorageOperations.ts

@@ -1,14 +1,10 @@
-import { useState, useEffect, useCallback } from "react";
-import { LocalStorageEventListener } from "src/application/models/localStorageEventListener";
-import {
-  useLocalStorage,
-  LocalStorageKeys,
-} from "src/contexts/localStorageContext";
+import { LocalStorageEventListener, 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: string) => {
-  const { getItem, setItem, attachListener, detachListener } =
-    useLocalStorage();
+  const { getItem, setItem, attachListener, detachListener } = useLocalStorage();
   const [value, setValue] = useState<string | null>(() => getItem(key));
 
   useEffect(() => {
@@ -28,7 +24,7 @@ export const useLocalStorageValue = (key: string) => {
       setItem(key, newValue);
       setValue(newValue);
     },
-    [key, setItem]
+    [key, setItem],
   );
 
   return { value, setValue: updateValue };
@@ -43,11 +39,11 @@ export const useSpiffyFeatureFlag = () => {
     (flag: boolean | null) => {
       setSpiffyOnFeatureFlag(flag);
     },
-    [setSpiffyOnFeatureFlag]
+    [setSpiffyOnFeatureFlag],
   );
 
   return {
-    value: value === "true" ? true : value === "false" ? false : null,
+    value: value === 'true' ? true : value === 'false' ? false : null,
     setFlag,
   };
 };
@@ -60,25 +56,22 @@ export const useEnviveFeatureFlag = () => {
   const setFlag = useCallback(
     (flag: boolean | null) => {
       if (flag === true) {
-        setItem(LocalStorageKeys.EnviveOnOverride, "true");
+        setItem(LocalStorageKeys.EnviveOnOverride, 'true');
       } else if (flag === false) {
-        setItem(LocalStorageKeys.EnviveOnOverride, "false");
+        setItem(LocalStorageKeys.EnviveOnOverride, 'false');
       }
     },
-    [setItem]
+    [setItem],
   );
 
   return {
-    value: value === "true" ? true : value === "false" ? false : null,
+    value: value === 'true' ? true : value === 'false' ? false : null,
     setFlag,
   };
 };
 
 // Storage listener hook
-export const useLocalStorageListener = (
-  key: string,
-  callback: (event: StorageEvent) => void
-) => {
+export const useLocalStorageListener = (key: string, callback: (event: StorageEvent) => void) => {
   const { attachListener, detachListener } = useLocalStorage();
 
   useEffect(() => {

package/src/hooks/MessageFilter/useMessageFilter.ts

@@ -1,10 +1,4 @@
-import { Message, MessageRole, MessageType } from 'src/application/models';
-
-type MessageFinder = {
-  msgs: Message[][];
-  type?: MessageType;
-  role?: MessageRole;
-};
+import { MessageFinder, Message, MessageType } from '@envive-ai/types';
 
 export const useMessageFilter = () => {
   const findMessageIndex = ({ msgs, type, role }: MessageFinder) => {

package/src/hooks/Search/useRecommendedProducts.ts

@@ -0,0 +1,50 @@
+import {
+  SearchResponseProductAttributes,
+  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 =
+  (): SearchResponseProductAttributes["attributes"][] => {
+    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 : [];
+  };