@envive-ai/react-hooks 0.1.5 → 0.1.6

package/src/contexts/types.ts

@@ -8,9 +8,9 @@ import { FeatureGates } from "src/application/models/featureGates";
 import {
   CustomerServiceIntegrationMode,
   CustomerServiceType,
-} from "src/application/service/customerService/types";
-import { GridInsertionType } from "src/application/service/domMutations/GridInsertionService";
-import { DOMInsertionType } from "src/application/service/domMutations/domInsertionService";
+} from "src/types/customerService";
+import { GridInsertionType } from "src/merchants/gridInsertion";
+import { DOMInsertionType } from "src/merchants/domInsertion";
 
 import type {
   PageVisitCategory,
@@ -19,6 +19,7 @@ import type {
 import { ChatState } from "src/types/custservice-types";
 import { SuggestionBarLocationForMetrics } from "src/types/suggestionBarV2-types";
 import { TestProps } from "src/types/test-types";
+import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults";
 
 type ShowFloatingButtonOptions =
   | "always"
@@ -174,6 +175,7 @@ type SimpleCustomerServiceIntegration = {
   integrationMode: CustomerServiceIntegrationMode;
   provider: CustomerServiceType;
   useUnifiedButton?: boolean;
+  maxfileUploadSize?: number;
 };
 
 type FullCustomerServiceIntegration = {
@@ -196,6 +198,7 @@ type FullCustomerServiceIntegration = {
   outsideBusinessHoursFormMessage?: string;
   suggestedAIQuestions?: string[];
   businessHoursPolling?: number;
+  maxfileUploadSize?: number;
 
   /**
    * @deprecated This is handled by the BE.
@@ -959,10 +962,6 @@ export type OrgPageConfig = {
   mountingConfigs: Record<string, WidgetMountingConfig>;
 };
 
-interface OrgConfigContextType {
-  orgUIConfig: OrgUIConfig;
-}
-
 export type OrgConfig = OrgUIConfig;
 
 export {
@@ -984,6 +983,12 @@ export interface EnviveConfig {
   orgLevelApiKey?: string;
   orgShortName?: string;
   identifyingPrefix?: string;
+  featureOverrides?: Record<string, boolean>;
+  variantUrlOverride?: string;
+  variantInfoOverride?: any;
+  show?: boolean;
+  publicKey?: string;
+  featureGates?: OrgConfigFeatureGate[];
 }
 
 export type {
@@ -1011,7 +1016,6 @@ export type {
   ImagePromptWidgetConfig,
   InsertionPoint,
   MultiImageConfig,
-  OrgConfigContextType,
   OrgUIConfig,
   PageCardConfig,
   PageCardVariant,

package/src/contexts/userIdentityContext.tsx

@@ -0,0 +1,197 @@
+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";
+
+// Helper function from the original service
+const getUserAgentDetails = (): ClientDetails => {
+  const uaParser = new UAParser();
+  const result = uaParser.getResult();
+
+  return {
+    os: result?.os?.name,
+    osVersion: result?.os?.version,
+    deviceBrand: result?.device?.vendor,
+    deviceManufacturer: result?.device?.vendor,
+    deviceModel: result?.device?.model,
+    browser: result?.browser?.name,
+    browserVersion: result?.browser?.version,
+    userAgent: result?.ua,
+  };
+};
+
+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 [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    // Assuming CommerceApiClient and other dependencies are ready if localStorage is.
+    // In a more complex scenario, you might have more checks here.
+    setIsReady(localStorageIsReady);
+  }, [localStorageIsReady]);
+
+  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 getUserIdDefaultFromLocalStorage = useCallback(():
+    | string
+    | undefined => {
+    return getItem(USER_ID_DEFAULT_KEY) ?? undefined;
+  }, [getItem]);
+
+  const setUserIdDefaultInLocalStorage = useCallback(
+    (userId: string): string => {
+      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]
+  );
+
+  const setUserIdOverrideInLocalStorage = useCallback(
+    (userId: string): string => {
+      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]
+  );
+
+  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]);
+
+  const getUserIdOrDefault = useCallback((): string => {
+    const userIdOverride = getUserIdOverrideFromLocalStorage();
+    if (userIdOverride) {
+      return userIdOverride;
+    }
+
+    const defaultUserId = getUserIdDefaultFromLocalStorage();
+    if (defaultUserId) {
+      return defaultUserId;
+    }
+
+    return setUserIdDefaultInLocalStorage(`spiffy-user-id-${uuid()}`);
+  }, [
+    getUserIdOverrideFromLocalStorage,
+    getUserIdDefaultFromLocalStorage,
+    setUserIdDefaultInLocalStorage,
+  ]);
+
+  const identifyUser = useCallback(async (): Promise<void> => {
+    if (!isReady) {
+      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 userId = getUserIdOrDefault();
+      const userAgentDetails = getUserAgentDetails();
+
+      if (!cdpUserId) {
+        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);
+    }
+  }, [isReady, getUserIdOrDefault]);
+
+  const value = useMemo(
+    () => ({
+      identifyUser,
+      getUserIdOrDefault,
+      getUserIdOverrideFromLocalStorage,
+      getUserIdDefaultFromLocalStorage,
+      setUserIdDefaultInLocalStorage,
+      setUserIdOverrideInLocalStorage,
+      clearUserIdOverrideInLocalStorage,
+      isReady,
+    }),
+    [
+      identifyUser,
+      getUserIdOrDefault,
+      getUserIdOverrideFromLocalStorage,
+      getUserIdDefaultFromLocalStorage,
+      setUserIdDefaultInLocalStorage,
+      setUserIdOverrideInLocalStorage,
+      clearUserIdOverrideInLocalStorage,
+      isReady,
+    ]
+  );
+
+  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"
+    );
+  }
+  return context;
+};

package/src/events/registerAnalyticsListeners.ts

@@ -1,53 +1,47 @@
-import {
-  AmplitudeAdapter,
-  SpiffyMetricsEventName,
-} from "src/adapters/amplitude";
 import { getAtomStore } from "src/atoms/atomStore/atomStore";
 import {
   pageLoadOffsetTimeAtom,
   performanceMetricsAtom,
   resetPerformanceMetricsAtom,
 } from "src/atoms/chat";
+import { SpiffyMetricsEventName } from "src/contexts/amplitudeContext";
+import { useAmplitudeTracking } from "src/hooks/useAmplitudeOperations";
+import { useEffect } from "react";
 
-const registerPerformanceMetricsListener = () => {
+export const useRegisterAnalyticsListeners = () => {
+  const { track } = useAmplitudeTracking();
   const atomStore = getAtomStore();
-  const performanceMetrics = atomStore.get(performanceMetricsAtom);
-  const pageLoadOffsetTime = atomStore.get(pageLoadOffsetTimeAtom);
 
-  const handleVisibilityChange = () => {
-    if (document.visibilityState === "hidden" && performanceMetrics.size > 0) {
-      const perfMetricsProperties = Object.fromEntries(
-        Array.from(performanceMetrics.entries()).map(([key, value]) => [
-          `performanceMetrics.${key}`,
-          value,
-        ])
-      );
+  useEffect(() => {
+    const performanceMetrics = atomStore.get(performanceMetricsAtom);
+    const pageLoadOffsetTime = atomStore.get(pageLoadOffsetTimeAtom);
+
+    const handleVisibilityChange = () => {
+      if (
+        document.visibilityState === "hidden" &&
+        performanceMetrics.size > 0
+      ) {
+        const perfMetricsProperties = Object.fromEntries(
+          Array.from(performanceMetrics.entries()).map(([key, value]) => [
+            `performanceMetrics.${key}`,
+            value,
+          ])
+        );
 
-      AmplitudeAdapter.trackEvent({
-        eventName: SpiffyMetricsEventName.PerformanceMetrics,
-        eventProps: {
+        track(SpiffyMetricsEventName.PerformanceMetrics, {
           ...perfMetricsProperties,
           "performance_metrics.page_load_offset_ms": pageLoadOffsetTime,
-        },
-      });
-      resetPerformanceMetricsAtom();
-    }
-  };
-
-  // 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);
-
-  return () => {
-    window.removeEventListener("visibilitychange", handleVisibilityChange);
-  };
-};
+        });
+        resetPerformanceMetricsAtom();
+      }
+    };
 
-export const registerAnalyticsListeners = () => {
-  const cleanupPerformanceMetricsListener =
-    registerPerformanceMetricsListener();
+    // 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);
 
-  return () => {
-    cleanupPerformanceMetricsListener();
-  };
+    return () => {
+      window.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [track]);
 };

package/src/hooks/index.ts

@@ -1,21 +1,27 @@
+export * from "./useAmplitudeOperations";
 export * from "./useBlockBackButton";
+export * from "./useCdnOperations";
 export * from "./useChatToggle";
+export * from "./useChatToggleAnalytics";
 export * from "./useCustomerSupportHandoff";
 export * from "./useDebounce";
-export * from "./useDynamicVariants";
 export * from "./useElementObserver";
-export * from "./useFileUpload";
 export * from "./useGrabAndScroll";
-export * from "./useHideElements";
+export * from "./useGraphQLConfig";
+export * from "./useIdentifyUser";
 export * from "./useImageResolver";
 export * from "./useIntersection";
 export * from "./useIsSmallScreen";
+export * from "./useLocalStorageOperations";
 export * from "./useMessageFilter";
 export * from "./useMessageScrollObserver";
+export * from "./useNewOrgConfig";
 export * from "./useSearch";
+export * from "./useSearchOperations";
+export * from "./useSessionStorageOperations";
+export * from "./useShopifyUrlOperations";
 export * from "./useSnapCalculator";
 export * from "./useSystemSettingsContext";
 export * from "./useTrackComponentVisibleEvent";
 export * from "./useUpdateAnalyticsProps";
-export * from "./useNewOrgConfig";
 export * from "./utils";

package/src/hooks/useAmplitudeOperations.ts

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

package/src/hooks/useAppDetails.ts

@@ -0,0 +1,49 @@
+import { useAtomValue } from "jotai";
+import {
+  ContextEnvEnum,
+  ContextSourceEnum,
+} from "@spiffy-ai/commerce-api-client";
+import { VariantInfo } from "src/application/models";
+import { UserIdentityContextType } from "src/contexts/userIdentityContext";
+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 { useNewOrgConfigContext } from "src/contexts/newOrgConfigContext";
+import { useOrgId } from "src/hooks/useGraphQLConfig"; // Import useOrgId
+
+export interface AppDetails {
+  orgId: string;
+  orgShortName: string;
+  chatId: string;
+  userId: string;
+  source: ContextSourceEnum;
+  env: ContextEnvEnum;
+  variantInfo: VariantInfo;
+}
+
+export const useAppDetails = (): AppDetails => {
+  const { orgId: fetchedOrgId } = useOrgId(); // Get orgId from useOrgId hook
+  const orgId = fetchedOrgId ?? ""; // Provide a default empty string if undefined
+
+  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 variantInfo = useAtomValue(variantInfoAtom);
+
+  return {
+    orgId,
+    orgShortName,
+    chatId,
+    userId,
+    source,
+    env,
+    variantInfo,
+  };
+};

package/src/hooks/useCdnOperations.ts

@@ -0,0 +1,16 @@
+import { useCdn } from "../contexts/cdnContext";
+
+export const useCdnUrl = () => {
+  const { cdnUrl } = useCdn();
+  return cdnUrl;
+};
+
+export const useCdnBasePath = () => {
+  const { getCdnBasePath } = useCdn();
+  return getCdnBasePath();
+};
+
+export const useAssetUrl = (assetName: string, orgShortName: string) => {
+  const { getAssetURL } = useCdn();
+  return getAssetURL(assetName, orgShortName);
+};

package/src/hooks/useChatToggle.ts

@@ -2,20 +2,21 @@ import { useAtomValue, useSetAtom } from "jotai";
 import { ChatElementDisplayLocation } from "src/application/models/chatElementDisplayLocation";
 import { chatAtom, chatOnToggleAtom } from "src/atoms/chat";
 import {
-  AmplitudeAdapter,
   SpiffyMetricsEventName,
-} from "src/adapters/amplitude";
+  useAmplitude,
+} from "src/contexts/amplitudeContext";
 
 export const useChatToggle = () => {
   const onToggle = useSetAtom(chatOnToggleAtom);
   const { isOpen } = useAtomValue(chatAtom);
+  const { trackEvent } = useAmplitude();
 
   const toggle = (
     triggerLocation: ChatElementDisplayLocation,
     triggerId?: string
   ) => {
     if (!isOpen) {
-      AmplitudeAdapter.trackEvent({
+      trackEvent({
         eventName: SpiffyMetricsEventName.ChatComponentExpanded,
         eventProps: {
           message_metadata: {
@@ -25,7 +26,7 @@ export const useChatToggle = () => {
         },
       });
     } else {
-      AmplitudeAdapter.trackEvent({
+      trackEvent({
         eventName: SpiffyMetricsEventName.ChatComponentCollapsed,
         eventProps: {
           message_metadata: {

package/src/hooks/useChatToggleAnalytics.ts

@@ -0,0 +1,15 @@
+import { useSetAtom } from "jotai";
+import { chatOnToggleAtom } from "src/atoms/chat/chatState";
+import { ChatElementDisplayLocation } from "src/application/models/chatElementDisplayLocation";
+import { useAmplitudeTracking } from "./useAmplitudeOperations";
+
+export const useChatToggleAnalytics = () => {
+  const setChatOnToggle = useSetAtom(chatOnToggleAtom);
+  const { track } = useAmplitudeTracking();
+
+  const toggleChat = (triggerLocation?: ChatElementDisplayLocation) => {
+    setChatOnToggle(triggerLocation, track);
+  };
+
+  return { toggleChat };
+};

package/src/hooks/useGraphQLConfig.ts

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useState } from "react";
+import { useGraphQLClient } from "src/contexts/graphqlContext";
+import { ColorMapping } from "src/application/models/colorsConfig";
+import { FrontendConfig } from "src/application/models/frontendConfig";
+import { transformSnakeToCamel } from "src/application/models";
+
+export const useColorsAndFrontendConfig = () => {
+  const { getColorsAndFrontendConfig, isReady } = useGraphQLClient();
+  const [data, setData] = useState({});
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(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<string | undefined>();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(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/src/hooks/useIdentifyUser.ts

@@ -0,0 +1,33 @@
+import { useState, useCallback } from "react";
+import { useUserIdentity } from "src/contexts/userIdentityContext";
+
+export const useIdentifyUser = () => {
+  const { identifyUser, isReady } = useUserIdentity();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(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/src/hooks/useImageResolver.ts

@@ -1,7 +1,6 @@
 import { useAtomValue } from "jotai";
 import { OrgShortName } from "src/application/models";
-import { orgUIConfigAtom } from "src/atoms/org/orgUIConfig";
-
+import { orgShortNameAtom } from "src/atoms/envive/enviveConfig";
 abstract class ImageResolver {
   abstract resolve(url: string, size: number): string;
 }
@@ -42,12 +41,13 @@ class ShopifyImageResolver extends ImageResolver {
 }
 
 export const useImageResolver = () => {
-  const orgUIConfig = useAtomValue(orgUIConfigAtom);
+  const orgShortName = useAtomValue(orgShortNameAtom);
   const resolve = (image?: string, size?: number) => {
-    if (image && size && orgUIConfig?.shortName) {
-      const newImagePath = MerchantImageResolver.get(
-        orgUIConfig.shortName
-      )?.resolve(image, size);
+    if (image && size && orgShortName) {
+      const newImagePath = MerchantImageResolver.get(orgShortName)?.resolve(
+        image,
+        size
+      );
       return newImagePath || image;
     }
     return image;