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

package/src/events/registerAnalyticsListeners.ts

@@ -1,12 +1,12 @@
-import { getAtomStore } from "src/atoms/atomStore/atomStore";
+import { getAtomStore } from 'src/atoms/atomStore/atomStore';
 import {
   pageLoadOffsetTimeAtom,
   performanceMetricsAtom,
   resetPerformanceMetricsAtom,
-} from "src/atoms/chat";
-import { SpiffyMetricsEventName } from "src/contexts/amplitudeContext/amplitudeContext";
-import { useAmplitudeTracking } from "src/hooks/AmplitudeOperations/useAmplitudeOperations";
-import { useEffect } from "react";
+} from 'src/atoms/chat';
+import { useAmplitudeTracking } from 'src/hooks/AmplitudeOperations/useAmplitudeOperations';
+import { useEffect } from 'react';
+import { SpiffyMetricsEventName } from '@envive-ai/types';
 
 export const useRegisterAnalyticsListeners = () => {
   const { track } = useAmplitudeTracking();
@@ -17,20 +17,17 @@ export const useRegisterAnalyticsListeners = () => {
     const pageLoadOffsetTime = atomStore.get(pageLoadOffsetTimeAtom);
 
     const handleVisibilityChange = () => {
-      if (
-        document.visibilityState === "hidden" &&
-        performanceMetrics.size > 0
-      ) {
+      if (document.visibilityState === 'hidden' && performanceMetrics.size > 0) {
         const perfMetricsProperties = Object.fromEntries(
           Array.from(performanceMetrics.entries()).map(([key, value]) => [
             `performanceMetrics.${key}`,
             value,
-          ])
+          ]),
         );
 
         track(SpiffyMetricsEventName.PerformanceMetrics, {
           ...perfMetricsProperties,
-          "performance_metrics.page_load_offset_ms": pageLoadOffsetTime,
+          'performance_metrics.page_load_offset_ms': pageLoadOffsetTime,
         });
         resetPerformanceMetricsAtom();
       }
@@ -38,10 +35,10 @@ export const useRegisterAnalyticsListeners = () => {
 
     // do not use anything other than visibilitychange to detect when a page or
     // session has ended as other events may not fire in all browsers/devices
-    window.addEventListener("visibilitychange", handleVisibilityChange);
+    window.addEventListener('visibilitychange', handleVisibilityChange);
 
     return () => {
-      window.removeEventListener("visibilitychange", handleVisibilityChange);
+      window.removeEventListener('visibilitychange', handleVisibilityChange);
     };
   }, [track]);
 };

package/src/exceptions/index.ts

@@ -0,0 +1,2 @@
+export { SessionRestartRequired } from './sessionExceptions';
+export { UnsupportedProductException } from './unsupportedProductExceptions';

package/src/{types/exceptions → exceptions}/unsupportedProductExceptions.ts

@@ -1,6 +1,6 @@
 export class UnsupportedProductException extends Error {
   constructor() {
     super('Unsupported product');
-    this.name = 'UnsupportedProduct';
+    this.name = 'UnsupportedProductException';
   }
-}
+}

package/src/global.d.ts

@@ -0,0 +1,8 @@
+declare global {
+  interface Window {
+    dataLayer: any;
+    gtag?: (...args: any[]) => void;
+  }
+}
+
+export {};

package/src/hooks/AmplitudeOperations/useAmplitudeOperations.ts

@@ -1,8 +1,6 @@
-import { useState, useCallback } from "react";
-import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from "src/contexts/amplitudeContext/amplitudeContext";
+import { SpiffyMetricsEventName } from '@envive-ai/types';
+import { useState, useCallback } from 'react';
+import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
 
 export const useAmplitudeTracking = () => {
   const { trackEvent, isReady } = useAmplitude();
@@ -10,10 +8,7 @@ export const useAmplitudeTracking = () => {
   const [error, setError] = useState<Error | null>(null);
 
   const track = useCallback(
-    async (
-      eventName: SpiffyMetricsEventName,
-      eventProps?: Record<string, unknown>
-    ) => {
+    async (eventName: SpiffyMetricsEventName, eventProps?: Record<string, unknown>) => {
       if (!isReady) return;
 
       setLoading(true);
@@ -22,13 +17,13 @@ export const useAmplitudeTracking = () => {
       try {
         await trackEvent({ eventName, eventProps });
       } catch (err) {
-        setError(err instanceof Error ? err : new Error("Tracking failed"));
+        setError(err instanceof Error ? err : new Error('Tracking failed'));
         throw err;
       } finally {
         setLoading(false);
       }
     },
-    [trackEvent, isReady]
+    [trackEvent, isReady],
   );
 
   return { track, loading, error, isReady };

package/src/hooks/AppDetails/useAppDetails.ts

@@ -1,38 +1,24 @@
-import { useAtomValue } from "jotai";
-import {
-  ContextEnvEnum,
-  ContextSourceEnum,
-} from "@spiffy-ai/commerce-api-client";
-import { VariantInfo } from "src/application/models";
-import { variantInfoAtom } from "src/atoms/app/variant";
+import { useAtomValue } from 'jotai';
+import { ContextEnvEnum, ContextSourceEnum } from '@spiffy-ai/commerce-api-client';
+import { variantInfoAtom } from 'src/atoms/app/variant';
 import {
   contextSourceAtom,
   envAtom as enviveEnvAtom,
   orgShortNameAtom as enviveOrgShortNameAtom,
-} from "src/atoms/envive/enviveConfig";
-import { chatIdAtom, userIdAtom } from "src/atoms/app/index";
-import { useOrgId } from "src/hooks/GraphQLConfig/useGraphQLConfig";
-
-export interface AppDetails {
-  orgId: string;
-  orgShortName: string;
-  chatId: string;
-  userId: string;
-  source: ContextSourceEnum;
-  env: ContextEnvEnum;
-  variantInfo: VariantInfo;
-}
+} from 'src/atoms/envive/enviveConfig';
+import { chatIdAtom, userIdAtom } from 'src/atoms/app/index';
+import { useOrgId } from 'src/hooks/GraphQLConfig/useGraphQLConfig';
+import { AppDetails } from '@envive-ai/types';
 
 export const useAppDetails = (): AppDetails => {
   const { orgId: fetchedOrgId } = useOrgId(); // Get orgId from useOrgId hook
-  const orgId = fetchedOrgId ?? ""; // Provide a default empty string if undefined
+  const orgId = fetchedOrgId ?? ''; // Provide a default empty string if undefined
 
-  const orgShortName = useAtomValue(enviveOrgShortNameAtom) ?? "spiffy-ai";
+  const orgShortName = useAtomValue(enviveOrgShortNameAtom) ?? 'spiffy-ai';
   const chatId = useAtomValue(chatIdAtom);
   const userId = useAtomValue(userIdAtom);
   const source = useAtomValue(contextSourceAtom) ?? ContextSourceEnum.App;
-  const env =
-    (useAtomValue(enviveEnvAtom) as ContextEnvEnum) ?? ContextEnvEnum.Dev; // Cast to ContextEnvEnum
+  const env = (useAtomValue(enviveEnvAtom) as ContextEnvEnum) ?? ContextEnvEnum.Dev; // Cast to ContextEnvEnum
   const variantInfo = useAtomValue(variantInfoAtom);
 
   return {

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);
       }