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

package/src/contexts/userIdentityContext/userIdentityContext.tsx

@@ -1,17 +1,10 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-  useEffect,
-} from "react";
-import UAParser from "ua-parser-js";
-import Logger from "src/application/logging/logger";
-import CommerceApiClient from "src/application/commerce-api";
-import { v4 as uuid } from "uuid";
-import { ClientDetails } from "src/application/models/clientDetails";
-import { useLocalStorage } from "src/contexts/localStorageContext";
+import React, { createContext, useCallback, useContext, useMemo, useState, useEffect } from 'react';
+import UAParser from 'ua-parser-js';
+import { ClientDetails, UserIdentityContextType } from '@envive-ai/types';
+import Logger from '../../application/logging/logger';
+import CommerceApiClient from '../../application/commerce-api';
+import { useLocalStorage } from '../localStorageContext';
+import { v4 as uuid } from 'uuid';
 
 // Helper function from the original service
 const getUserAgentDetails = (): ClientDetails => {
@@ -30,29 +23,10 @@ const getUserAgentDetails = (): ClientDetails => {
   };
 };
 
-export interface UserIdentityContextType {
-  identifyUser: () => Promise<void>;
-  getUserIdOrDefault: () => string;
-  getUserIdOverrideFromLocalStorage: () => string | undefined;
-  getUserIdDefaultFromLocalStorage: () => string | undefined;
-  setUserIdDefaultInLocalStorage: (userId: string) => string;
-  setUserIdOverrideInLocalStorage: (userId: string) => string;
-  clearUserIdOverrideInLocalStorage: () => void;
-  isReady: boolean;
-}
-
-const UserIdentityContext = createContext<UserIdentityContextType | undefined>(
-  undefined
-);
-
-export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const {
-    getItem,
-    setItem,
-    isAvailable: localStorageIsReady,
-  } = useLocalStorage();
+const UserIdentityContext = createContext<UserIdentityContextType | undefined>(undefined);
+
+export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { getItem, setItem, isAvailable: localStorageIsReady } = useLocalStorage();
 
   const [isReady, setIsReady] = useState(false);
 
@@ -62,50 +36,44 @@ export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({
     setIsReady(localStorageIsReady);
   }, [localStorageIsReady]);
 
-  const USER_ID_OVERRIDE_KEY = "v1-spiffy-user-id-override";
-  const USER_ID_DEFAULT_KEY = "v1-spiffy-user-id-default";
+  const USER_ID_OVERRIDE_KEY = 'v1-spiffy-user-id-override';
+  const USER_ID_DEFAULT_KEY = 'v1-spiffy-user-id-default';
 
-  const getUserIdOverrideFromLocalStorage = useCallback(():
-    | string
-    | undefined => {
-    return getItem(USER_ID_OVERRIDE_KEY) ?? undefined;
-  }, [getItem]);
+  const getUserIdOverrideFromLocalStorage = useCallback(
+    (): string | undefined => getItem(USER_ID_OVERRIDE_KEY) ?? undefined,
+    [getItem],
+  );
 
-  const getUserIdDefaultFromLocalStorage = useCallback(():
-    | string
-    | undefined => {
-    return getItem(USER_ID_DEFAULT_KEY) ?? undefined;
-  }, [getItem]);
+  const getUserIdDefaultFromLocalStorage = useCallback(
+    (): string | undefined => getItem(USER_ID_DEFAULT_KEY) ?? undefined,
+    [getItem],
+  );
 
   const setUserIdDefaultInLocalStorage = useCallback(
     (userId: string): string => {
-      Logger.logInfo(
-        `setUserIdDefaultInLocalStorage - Setting user_id=${userId}`
-      );
+      Logger.logInfo(`setUserIdDefaultInLocalStorage - Setting user_id=${userId}`);
       setItem(USER_ID_DEFAULT_KEY, userId);
       // window.dispatchEvent is handled by useLocalStorage now
       return userId;
     },
-    [setItem, USER_ID_DEFAULT_KEY]
+    [setItem, USER_ID_DEFAULT_KEY],
   );
 
   const setUserIdOverrideInLocalStorage = useCallback(
     (userId: string): string => {
-      Logger.logInfo(
-        `setUserIdOverrideInLocalStorage - Setting user_id=${userId}`
-      );
+      Logger.logInfo(`setUserIdOverrideInLocalStorage - Setting user_id=${userId}`);
       setItem(USER_ID_OVERRIDE_KEY, userId);
       // window.dispatchEvent is handled by useLocalStorage now
       return userId;
     },
-    [setItem, USER_ID_OVERRIDE_KEY]
+    [setItem, USER_ID_OVERRIDE_KEY],
   );
 
   const clearUserIdOverrideInLocalStorage = useCallback(() => {
     Logger.logInfo(`clearUserIdOverrideInLocalStorage - Clearing user_id`);
     // LocalStorageService.getLocalStorage()?.removeItem(USER_ID_OVERRIDE_KEY);
     // window.dispatchEvent is handled by useLocalStorage now
-    setItem(USER_ID_OVERRIDE_KEY, ""); // Set to empty string to clear
+    setItem(USER_ID_OVERRIDE_KEY, ''); // Set to empty string to clear
   }, [setItem, USER_ID_OVERRIDE_KEY]);
 
   const getUserIdOrDefault = useCallback((): string => {
@@ -128,31 +96,25 @@ export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({
 
   const identifyUser = useCallback(async (): Promise<void> => {
     if (!isReady) {
-      Logger.logWarn(
-        "[UserIdentityContext] Context not ready, skipping identifyUser",
-        undefined
-      );
+      Logger.logWarn('[UserIdentityContext] Context not ready, skipping identifyUser', undefined);
       return;
     }
 
     try {
       // Temporarily commented out until WindowDataLayerService is resolved
       // const cdpUserId = WindowDataLayerService.getGoogleAnalyticsClientId();
-      const cdpUserId = "UNKNOWN_CDP_USER_ID"; // Placeholder
+      const cdpUserId = 'UNKNOWN_CDP_USER_ID'; // Placeholder
       const userId = getUserIdOrDefault();
       const userAgentDetails = getUserAgentDetails();
 
       if (!cdpUserId) {
-        Logger.logWarn(
-          "[spiffy-ai] No GA Client ID found, skipping identifyUser",
-          undefined
-        );
+        Logger.logWarn('[spiffy-ai] No GA Client ID found, skipping identifyUser', undefined);
         return;
       }
 
       await CommerceApiClient.identifyUser(userId, cdpUserId, userAgentDetails);
     } catch (error) {
-      Logger.logError("[spiffy-ai] Error identifying user", error);
+      Logger.logError('[spiffy-ai] Error identifying user', error);
     }
   }, [isReady, getUserIdOrDefault]);
 
@@ -176,22 +138,16 @@ export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({
       setUserIdOverrideInLocalStorage,
       clearUserIdOverrideInLocalStorage,
       isReady,
-    ]
+    ],
   );
 
-  return (
-    <UserIdentityContext.Provider value={value}>
-      {children}
-    </UserIdentityContext.Provider>
-  );
+  return <UserIdentityContext.Provider value={value}>{children}</UserIdentityContext.Provider>;
 };
 
 export const useUserIdentity = () => {
   const context = useContext(UserIdentityContext);
   if (!context) {
-    throw new Error(
-      "useUserIdentity must be used within a UserIdentityProvider"
-    );
+    throw new Error('useUserIdentity must be used within a UserIdentityProvider');
   }
   return context;
 };

package/src/events/index.ts

@@ -1,15 +1,13 @@
-export { SpiffyEvent } from './event-types';
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * A singleton class for dispatching Spiffy events to the document object.
  * Provides functionality for adding default event data, managing listeners,
  * and dispatching events.
- * 
+ *
  * TODO: could add observability to the listeners, would need to track listeners
  * internally.
  */
 export class EventsDispatcher {
-
   static eventData: Record<string, any> = {};
 
   /**
@@ -38,7 +36,12 @@ export class EventsDispatcher {
       includeDefault = true;
     }
     const eventData = includeDefault ? { ...this.eventData, ...detail } : detail;
-    const event = new CustomEvent(eventName, { detail: eventData, bubbles: true, composed: true, cancelable: false });
+    const event = new CustomEvent(eventName, {
+      detail: eventData,
+      bubbles: true,
+      composed: true,
+      cancelable: false,
+    });
     window.dispatchEvent(event);
   }
 

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(() => {