@envive-ai/react-hooks 0.1.3 → 0.1.5

package/src/contexts/orgConfigContext.tsx

@@ -0,0 +1,106 @@
+import React, {
+  createContext,
+  useContext,
+  ReactNode,
+  useState,
+  useEffect,
+} from "react";
+import { useAtomValue } from "jotai";
+import { OrgConfig as OrgConfigType } from "src/application/models/api/orgConfigResults";
+import { getAsyncOrgConfig } from "src/atoms/org/org";
+import { enviveConfigAtom } from "src/atoms/envive/enviveConfig";
+import Logger from "src/application/logging/logger";
+
+interface OrgConfigContextType {
+  orgConfig: OrgConfigType | undefined;
+  loading: boolean;
+  error: Error | undefined;
+}
+
+const OrgConfigContext = createContext<OrgConfigContextType | undefined>(
+  undefined
+);
+
+interface OrgConfigProviderProps {
+  children: ReactNode;
+}
+
+export const OrgConfigProvider: React.FC<OrgConfigProviderProps> = ({
+  children,
+}) => {
+  const [orgConfig, setOrgConfig] = useState<OrgConfigType | undefined>(
+    undefined
+  );
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | undefined>(undefined);
+
+  // Watch for EnviveConfig to be available
+  const enviveConfig = useAtomValue(enviveConfigAtom);
+
+  useEffect(() => {
+    const fetchOrgConfig = async () => {
+      try {
+        setLoading(true);
+        setError(undefined); // Clear any previous errors
+
+        // Check if we have the required dependencies from EnviveConfig
+        if (!enviveConfig) {
+          Logger.logDebug(
+            "OrgConfigProvider: Waiting for EnviveConfig to be available"
+          );
+          return; // Don't fetch yet, wait for EnviveConfig
+        }
+
+        // Check if we have either orgLevelApiKey or orgShortName
+        const hasApiKey = enviveConfig.orgLevelApiKey;
+        const hasOrgShortName = enviveConfig.orgShortName;
+
+        if (!hasApiKey && !hasOrgShortName) {
+          Logger.logWarn(
+            "OrgConfigProvider: Neither orgLevelApiKey nor orgShortName available in EnviveConfig",
+            enviveConfig
+          );
+          setError(
+            new Error(
+              "OrgConfigProvider requires either orgLevelApiKey or orgShortName to be provided in EnviveConfigProvider"
+            )
+          );
+          return;
+        }
+
+        Logger.logDebug(
+          "OrgConfigProvider: EnviveConfig available, fetching OrgConfig",
+          {
+            hasApiKey: !!hasApiKey,
+            hasOrgShortName: !!hasOrgShortName,
+          }
+        );
+
+        const fetchedConfig = await getAsyncOrgConfig();
+        setOrgConfig(fetchedConfig);
+        Logger.logDebug("OrgConfigProvider: Successfully fetched OrgConfig");
+      } catch (err) {
+        Logger.logError("OrgConfigProvider: Failed to fetch OrgConfig", err);
+        setError(err as Error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchOrgConfig();
+  }, [enviveConfig]); // Re-run when enviveConfig changes
+
+  return (
+    <OrgConfigContext.Provider value={{ orgConfig, loading, error }}>
+      {children}
+    </OrgConfigContext.Provider>
+  );
+};
+
+export const useOrgConfig = () => {
+  const context = useContext(OrgConfigContext);
+  if (context === undefined) {
+    throw new Error("useOrgConfig must be used within an OrgConfigProvider");
+  }
+  return context;
+};

package/src/contexts/systemSettingsContext.tsx

@@ -8,7 +8,7 @@ import {
   useState,
 } from "react";
 import { GenerationParams } from "src/application/models";
-import { endpointURLAtom } from "src/atoms/org/org";
+import { baseUrlAtom } from "src/atoms/envive/enviveConfig";
 
 // TODO: Refactor this to a common service that handles query params (and spiffy variables all together)
 const getChatModelName = () => {
@@ -49,7 +49,7 @@ const SystemSettingsContextProvider = ({
   const [params, setParams] = useState<GenerationParams | undefined>(
     () => generationParams ?? defaultGenerationParams
   );
-  const endpointURL = useAtomValue(endpointURLAtom);
+  const endpointURL = useAtomValue(baseUrlAtom);
   const settingsContextValues = useMemo(
     () => ({
       generationParams: params,

package/src/contexts/types.ts

@@ -963,6 +963,8 @@ interface OrgConfigContextType {
   orgUIConfig: OrgUIConfig;
 }
 
+export type OrgConfig = OrgUIConfig;
+
 export {
   CategoryExtractorType,
   ColorNames,
@@ -972,15 +974,16 @@ export {
 };
 
 export interface EnviveConfig {
-  amplitudeApiKey: string;
-  dataResidency: string;
-  env: string;
-  baseUrl: string;
-  reactAppName: string;
-  cdnUrl: string;
-  contextSource: string;
-  orgLevelApiKey: string;
-  orgShortName: string;
+  amplitudeApiKey?: string;
+  dataResidency?: string;
+  env?: string;
+  baseUrl?: string;
+  reactAppName?: string;
+  cdnUrl?: string;
+  contextSource?: string;
+  orgLevelApiKey?: string;
+  orgShortName?: string;
+  identifyingPrefix?: string;
 }
 
 export type {

package/src/hooks/index.ts

@@ -7,16 +7,15 @@ export * from "./useElementObserver";
 export * from "./useFileUpload";
 export * from "./useGrabAndScroll";
 export * from "./useHideElements";
-export * from "./useHorizontalScrollAnimation";
 export * from "./useImageResolver";
 export * from "./useIntersection";
 export * from "./useIsSmallScreen";
 export * from "./useMessageFilter";
 export * from "./useMessageScrollObserver";
-export * from "./useReducedMotionWithOverride";
 export * from "./useSearch";
 export * from "./useSnapCalculator";
-export * from "./useSnapControl";
 export * from "./useSystemSettingsContext";
 export * from "./useTrackComponentVisibleEvent";
 export * from "./useUpdateAnalyticsProps";
+export * from "./useNewOrgConfig";
+export * from "./utils";

package/src/hooks/useDynamicVariants.ts

@@ -1,16 +1,22 @@
-import Logger from 'src/application/logging/logger';
-import { useEffect, useRef, useCallback, useState } from 'react';
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { variantInfoAtom } from 'src/atoms/app';
-import { PageVariantService } from 'src/application/service/pageVariantService';
-import { orgPageConfigAtom } from 'src/atoms/org/orgPageConfig';
-import { hasParsedVariantInfoAtom, supportedEventAtom } from 'src/atoms/app/variant';
-import { SpiffyMetricsEventName, AmplitudeAdapter } from 'src/adapters/amplitude';
-import { orgUIConfigAtom } from 'src/atoms/org/orgUIConfig';
-import { createAppLoadedEvent, createVisitUserEvent } from 'src/hooks/utils';
-import { queueUserEventAtom } from 'src/atoms/chat/messageQueue';
-import { UserEvent } from 'src/application/models';
-import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import Logger from "src/application/logging/logger";
+import { useEffect, useRef, useCallback, useState } from "react";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { variantInfoAtom } from "src/atoms/app";
+import { PageVariantService } from "src/application/service/pageVariantService";
+import { orgPageConfigAtom } from "src/atoms/org/orgPageConfig";
+import {
+  hasParsedVariantInfoAtom,
+  supportedEventAtom,
+} from "src/atoms/app/variant";
+import {
+  SpiffyMetricsEventName,
+  AmplitudeAdapter,
+} from "src/adapters/amplitude";
+import { orgUIConfigAtom } from "src/atoms/org/orgUIConfig";
+import { createAppLoadedEvent, createVisitUserEvent } from "src/hooks/utils";
+import { queueUserEventAtom } from "src/atoms/chat/messageQueue";
+import { UserEvent } from "src/application/models";
+import { UserEventCategory } from "@spiffy-ai/commerce-api-client";
 
 // consider putting this in the org config
 const DEBOUNCE_DELAY_MS = 300;
@@ -26,7 +32,10 @@ const debounce = (func: () => void, delay: number): (() => void) => {
   };
 };
 
-const isUserEventEqual = (event1: UserEvent | null, event2: UserEvent | null) => {
+const isUserEventEqual = (
+  event1: UserEvent | null,
+  event2: UserEvent | null
+) => {
   if (!event1 || !event2) {
     return false;
   }
@@ -48,8 +57,8 @@ const isUserEventEqual = (event1: UserEvent | null, event2: UserEvent | null) =>
   if (
     event1.category === UserEventCategory.PlpVisit &&
     event2.category === UserEventCategory.PlpVisit &&
-    'id' in event1.attributes.attributes &&
-    'id' in event2.attributes.attributes
+    "id" in event1.attributes.attributes &&
+    "id" in event2.attributes.attributes
   ) {
     return event1.attributes.attributes.id === event2.attributes.attributes.id;
   }
@@ -68,14 +77,17 @@ export const useDynamicVariants = () => {
   const setVariantInfo = useSetAtom(variantInfoAtom);
   const setSupportedEvent = useSetAtom(supportedEventAtom);
   const queueUserEvent = useSetAtom(queueUserEventAtom);
-  const [mostRecentUserEvent, setMostRecentUserEvent] = useState<UserEvent | null>(null);
+  const [mostRecentUserEvent, setMostRecentUserEvent] =
+    useState<UserEvent | null>(null);
 
   const orgPageConfig = useAtomValue(orgPageConfigAtom);
   const debouncedFunc = useRef<(() => void) | null>(null);
   // we need to fetch org info before we can get the variant info. this prevents the rest of the application
   // logic from running before that happens. More specifically, we want to have all org and variant states
   // settled before mounting the ChatContextProvider which will start the session.
-  const [hasParsedVariantInfo, setHasParsedVariantInfo] = useAtom(hasParsedVariantInfoAtom);
+  const [hasParsedVariantInfo, setHasParsedVariantInfo] = useAtom(
+    hasParsedVariantInfoAtom
+  );
   const animationFrameRef = useRef<number | null>(null);
   const isBeforeUnload = useRef(false);
 
@@ -98,16 +110,17 @@ export const useDynamicVariants = () => {
 
     if (!orgPageConfig) {
       Logger.logWarn(
-        '[spiffy-ai] orgPageConfig not found. skipping page change handling',
-        undefined,
+        "[spiffy-ai] orgPageConfig not found. skipping page change handling",
+        undefined
       );
       return;
     }
 
-    const parsedVariantInfo = await PageVariantService.getVariantInfoWithPageConfig(orgPageConfig);
+    const parsedVariantInfo =
+      await PageVariantService.getVariantInfoWithPageConfig(orgPageConfig);
 
     if (parsedVariantInfo) {
-      Logger.logDebug('[spiffy-ai] variantInfo changed', parsedVariantInfo);
+      Logger.logDebug("[spiffy-ai] variantInfo changed", parsedVariantInfo);
       const [newVariantInfo, pageVariantConfig] = parsedVariantInfo;
 
       setVariantInfo(newVariantInfo);
@@ -120,8 +133,10 @@ export const useDynamicVariants = () => {
         queueUserEvent(visitEvent);
       }
 
-      const supportedEvent = await PageVariantService.checkSupportedEvent(pageVariantConfig);
-      console.log('useDynamicVariants - supportedEvent', supportedEvent);
+      const supportedEvent = await PageVariantService.checkSupportedEvent(
+        pageVariantConfig
+      );
+      console.log("useDynamicVariants - supportedEvent", supportedEvent);
       setSupportedEvent(supportedEvent);
       AmplitudeAdapter.trackEvent({
         eventName: SpiffyMetricsEventName.SupportedEvent,
@@ -164,14 +179,14 @@ export const useDynamicVariants = () => {
       isBeforeUnload.current = true;
     };
 
-    window.addEventListener('click', handleLocationChange);
-    window.addEventListener('popstate', handleLocationChange);
-    window.addEventListener('beforeunload', handleBeforeUnload);
+    window.addEventListener("click", handleLocationChange);
+    window.addEventListener("popstate", handleLocationChange);
+    window.addEventListener("beforeunload", handleBeforeUnload);
 
     return () => {
-      window.removeEventListener('click', handleLocationChange);
-      window.removeEventListener('popstate', handleLocationChange);
-      window.removeEventListener('beforeunload', handleBeforeUnload);
+      window.removeEventListener("click", handleLocationChange);
+      window.removeEventListener("popstate", handleLocationChange);
+      window.removeEventListener("beforeunload", handleBeforeUnload);
       // TODO: this is causing the supportedEvent to be undefined for Magento customers
       // Why is unclear however...
       // setSupportedEvent(undefined);
@@ -191,10 +206,11 @@ export const useDynamicVariants = () => {
 
   useEffect(() => {
     let windowInterval: number | null = null;
-    const { merchantVariantSettings } = orgUIConfig;
+    const merchantVariantSettings = orgUIConfig?.merchantVariantSettings;
 
     if (merchantVariantSettings?.dynamicVariants?.enabled) {
-      const refreshInterval = merchantVariantSettings?.dynamicVariants?.refreshInterval;
+      const refreshInterval =
+        merchantVariantSettings?.dynamicVariants?.refreshInterval;
       windowInterval = window.setInterval(() => {
         handleLocationChange();
       }, refreshInterval);

package/src/hooks/useFileUpload.ts

@@ -13,7 +13,7 @@ export const useFileUpload = () => {
   const [error, setError] = useState("");
 
   const isValidFile = (file?: File) => {
-    const maxSize = customerServiceImpl.maxfileUploadSize;
+    const maxSize = customerServiceImpl?.maxfileUploadSize;
     if (maxSize && (file?.size || 0) > maxSize) {
       const strFileSize = `${(maxSize / 1000000).toFixed(1)}MB`;
       setError(`Exceeded file size of ${strFileSize}`);

package/src/hooks/useHideElements.ts

@@ -1,18 +1,19 @@
-import Logger from 'src/application/logging/logger';
-import { SelectorFactory } from 'src/application/utils/nodeSelector';
-import { useEffect, useRef, useState } from 'react';
-import { useAtomValue } from 'jotai';
-import { SpiffyEventName } from 'src/application/models/events';
-import { ElementObserver } from 'src/application/utils/elementObserver';
-import { DOMObserver } from 'src/application/utils/domObserver';
-import { orgUIConfigAtom } from 'src/atoms/org/orgUIConfig';
+import Logger from "src/application/logging/logger";
+import { SelectorFactory } from "src/application/utils/nodeSelector";
+import { useEffect, useRef, useState } from "react";
+import { useAtomValue } from "jotai";
+import { SpiffyEventName } from "src/application/models/events";
+import { ElementObserver } from "src/application/utils/elementObserver";
+import { DOMObserver } from "src/application/utils/domObserver";
+import { orgUIConfigAtom } from "src/atoms/org/orgUIConfig";
 
 /**
  * This hook hides/shows elements that could overlap with the chat when the chat is opened/closed.
  */
 export const useHideElements = () => {
   const orgUIConfig = useAtomValue(orgUIConfigAtom);
-  const [hasRegisteredEventListeners, setHasRegisteredEventListeners] = useState(false);
+  const [hasRegisteredEventListeners, setHasRegisteredEventListeners] =
+    useState(false);
   const elementObservers = useRef<ElementObserver[]>([]);
 
   const hideElements = (elements: ElementObserver[]) => {
@@ -29,8 +30,10 @@ export const useHideElements = () => {
 
   useEffect(() => {
     elementObservers.current = [];
-    orgUIConfig.hiddenElementSelectors?.forEach((selector) => {
-      elementObservers.current.push(DOMObserver.add(SelectorFactory.query(selector)));
+    orgUIConfig?.hiddenElementSelectors?.forEach((selector) => {
+      elementObservers.current.push(
+        DOMObserver.add(SelectorFactory.query(selector))
+      );
     });
     // since we're not using useElementObserver, we need to manually start the observer
     elementObservers.current.forEach((element) => {
@@ -44,22 +47,22 @@ export const useHideElements = () => {
       });
       elementObservers.current = [];
     };
-  }, [orgUIConfig.hiddenElementSelectors]);
+  }, [orgUIConfig?.hiddenElementSelectors]);
 
   useEffect(() => {
     if (elementObservers.current.length > 0 && !hasRegisteredEventListeners) {
       Logger.logDebug(
-        `Registering ${SpiffyEventName.WidgetOpen} event for ${elementObservers.current.length} elements`,
+        `Registering ${SpiffyEventName.WidgetOpen} event for ${elementObservers.current.length} elements`
       );
       window.addEventListener(SpiffyEventName.WidgetOpen, () =>
-        hideElements(elementObservers.current),
+        hideElements(elementObservers.current)
       );
 
       Logger.logDebug(
-        `Registering ${SpiffyEventName.WidgetClose} event for ${elementObservers.current.length} elements`,
+        `Registering ${SpiffyEventName.WidgetClose} event for ${elementObservers.current.length} elements`
       );
       window.addEventListener(SpiffyEventName.WidgetClose, () =>
-        showElements(elementObservers.current),
+        showElements(elementObservers.current)
       );
 
       setHasRegisteredEventListeners(true);
@@ -68,11 +71,11 @@ export const useHideElements = () => {
     return () => {
       if (elementObservers.current.length > 0 && hasRegisteredEventListeners) {
         window.removeEventListener(SpiffyEventName.WidgetOpen, () =>
-          hideElements(elementObservers.current),
+          hideElements(elementObservers.current)
         );
 
         window.removeEventListener(SpiffyEventName.WidgetClose, () =>
-          showElements(elementObservers.current),
+          showElements(elementObservers.current)
         );
 
         setHasRegisteredEventListeners(false);

package/src/hooks/useImageResolver.ts

@@ -1,6 +1,6 @@
-import { useAtomValue } from 'jotai';
-import { OrgShortName } from 'src/application/models';
-import { orgUIConfigAtom } from 'src/atoms/org/orgUIConfig';
+import { useAtomValue } from "jotai";
+import { OrgShortName } from "src/application/models";
+import { orgUIConfigAtom } from "src/atoms/org/orgUIConfig";
 
 abstract class ImageResolver {
   abstract resolve(url: string, size: number): string;
@@ -12,8 +12,14 @@ class MerchantImageResolver {
   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());
+      this.imageResolverMap.set(
+        OrgShortName.SpanxStaging,
+        new ShopifyImageResolver()
+      );
+      this.imageResolverMap.set(
+        OrgShortName.UniqueVintage,
+        new ShopifyImageResolver()
+      );
     }
     return this.imageResolverMap;
   }
@@ -31,15 +37,17 @@ class ShopifyImageResolver extends ImageResolver {
     if (urlHasPrefix) {
       return url.replace(pattern, newSizePrefix);
     }
-    return url.replace('.jpg', newSizePrefix);
+    return url.replace(".jpg", newSizePrefix);
   }
 }
 
 export const useImageResolver = () => {
   const orgUIConfig = useAtomValue(orgUIConfigAtom);
   const resolve = (image?: string, size?: number) => {
-    if (image && size) {
-      const newImagePath = MerchantImageResolver.get(orgUIConfig.shortName)?.resolve(image, size);
+    if (image && size && orgUIConfig?.shortName) {
+      const newImagePath = MerchantImageResolver.get(
+        orgUIConfig.shortName
+      )?.resolve(image, size);
       return newImagePath || image;
     }
     return image;

package/src/hooks/useNewOrgConfig.ts

@@ -0,0 +1,80 @@
+import { GraphQLClient } from "src/adapters/spiffy/commerce/graphql";
+import Logger from "src/application/logging/logger";
+import { AtomStore, getAtomStore } from "../atoms/atomStore";
+import { ColorMapping } from "src/contexts";
+
+import { useAtomValue } from "jotai";
+import { useEffect, useState } from "react";
+import { orgShortNameAtom } from "../atoms/org/org";
+import {
+  BasicOrgInfoType,
+  getOrgInfo,
+} from "src/application/models/supportedOrgs";
+import { FrontendConfig } from "src/application/models";
+
+type newConfigResponse = {
+  colorsConfig: ColorMapping | undefined;
+  frontendConfig: FrontendConfig | undefined;
+};
+
+async function fetchGraphQLConfig(
+  atomStore: AtomStore
+): Promise<newConfigResponse> {
+  try {
+    Logger.logDebug("GraphQLConfigService: Starting GraphQL client fetch");
+
+    const { colorsConfig, frontendConfig } =
+      (await GraphQLClient.getColorsAndFrontendConfig()) ?? {};
+
+    Logger.logDebug("GraphQL config fetch completed", {
+      hasColorsConfig: !!colorsConfig,
+      hasFrontendConfig: !!frontendConfig,
+      frontendConfigKeys: frontendConfig ? Object.keys(frontendConfig) : [],
+    });
+
+    return {
+      colorsConfig,
+      frontendConfig,
+    };
+  } catch (error) {
+    Logger.logError(
+      "GraphQLConfigService: Error during GraphQL config fetch",
+      error
+    );
+    throw error; // Re-throw to be caught by the caller
+  }
+}
+
+export const useNewOrgConfig = () => {
+  const [oldConfig, setOldConfig] = useState<BasicOrgInfoType | undefined>();
+
+  const [newConfig, setNewConfig] = useState<newConfigResponse | undefined>();
+
+  const [combinedConfig, setCombinedConfig] = useState<
+    newConfigResponse & BasicOrgInfoType
+  >();
+  const orgShortName = useAtomValue(orgShortNameAtom);
+
+  useEffect(() => {
+    if (orgShortName) {
+      getOrgInfo(orgShortName).then((oldConfigData) => {
+        setOldConfig(oldConfigData);
+      });
+      fetchGraphQLConfig(getAtomStore()).then((newConfigData) => {
+        setNewConfig(newConfigData);
+      });
+    }
+  }, [orgShortName]);
+
+  useEffect(() => {
+    if (oldConfig && newConfig) {
+      setCombinedConfig;
+    }
+  }, [oldConfig, newConfig]);
+
+  if (!orgShortName || !combinedConfig) {
+    return null;
+  }
+
+  return combinedConfig;
+};

package/src/hooks/useSearch.tsx

@@ -122,6 +122,14 @@ export const useSearch = (): SearchResultsHocProps => {
   const dynamicFilters = searchData?.filters || [];
   const { productCardConfig, shortName: merchantShortName } = orgUIConfig || {};
 
+  // Provide fallback values when orgUIConfig is not yet available
+  const safeProductCardConfig = productCardConfig || {
+    variant: "minimal",
+    hoverVariant: "none",
+    layoutVariant: "square",
+  };
+  const safeMerchantShortName = merchantShortName || "";
+
   const availableDynamicFilters = useMemo(() => {
     return dynamicFilters
       .filter(
@@ -399,12 +407,8 @@ export const useSearch = (): SearchResultsHocProps => {
   return {
     searchData,
     searchResponseId: searchData?.searchResponseId ?? "",
-    merchantShortName,
-    productCardConfig: productCardConfig || {
-      variant: "minimal",
-      hoverVariant: "none",
-      layoutVariant: "square",
-    },
+    merchantShortName: safeMerchantShortName,
+    productCardConfig: safeProductCardConfig,
     productList,
     autocompleteResults,
     searchFilters: filters,

package/src/hooks/utils.ts

@@ -133,7 +133,7 @@ export const isWithinBusinessHours = (
   return now >= start && now <= end;
 };
 
-export const enum SearchResultsState {
+export enum SearchResultsState {
   Loading,
   Results,
   NoResults,

package/src/interceptors/useFormEscalation.ts

@@ -1,16 +1,17 @@
-import { FormType, ResponseCategory } from '@spiffy-ai/commerce-api-client';
-import { useAtomValue, useSetAtom } from 'jotai';
-import { Response } from 'src/application/models';
-import { handleFormSubmittedAtom } from 'src/atoms/chat';
-import { apiKeyAtom, endpointURLAtom } from 'src/atoms/org/org';
-import { orgCustomerServiceService } from 'src/atoms/org/orgUIConfig';
-import { MessageInterceptor } from './types';
+import { FormType, ResponseCategory } from "@spiffy-ai/commerce-api-client";
+import { useAtomValue, useSetAtom } from "jotai";
+import { Response } from "src/application/models";
+import { handleFormSubmittedAtom } from "src/atoms/chat";
+import { apiKeyAtom } from "src/atoms/org/org";
+import { orgCustomerServiceService } from "src/atoms/org/orgUIConfig";
+import { MessageInterceptor } from "./types";
+import { baseUrlAtom } from "src/atoms/envive/enviveConfig";
 
 export const useFormEscalation = (): MessageInterceptor => {
   const handleFormSubmitted = useSetAtom(handleFormSubmittedAtom);
   const customerServiceIntegration = useAtomValue(orgCustomerServiceService);
   const apiKey = useAtomValue(apiKeyAtom);
-  const apiEndpoint = useAtomValue(endpointURLAtom);
+  const apiEndpoint = useAtomValue(baseUrlAtom);
 
   const blockExecution = () => true;
 
@@ -19,8 +20,24 @@ export const useFormEscalation = (): MessageInterceptor => {
       response.category === ResponseCategory.Form &&
       response.attributes.formCategory?.formType === FormType.Escalation
     ) {
+      if (!customerServiceIntegration) {
+        // Handle case where customer service integration is not available
+        handleFormSubmitted({
+          formResponseId: response.id,
+          formType: FormType.Escalation,
+          filledSchema: {
+            is_in_business_hours: false,
+            is_integration_enabled: false,
+          },
+        });
+        return;
+      }
+
       const isEnabled = customerServiceIntegration.isEnabled();
-      const isBusinessHours = await customerServiceIntegration.isBusinessHours(apiKey, apiEndpoint);
+      const isBusinessHours = await customerServiceIntegration.isBusinessHours(
+        apiKey,
+        apiEndpoint
+      );
 
       handleFormSubmitted({
         formResponseId: response.id,

package/src/types.ts

@@ -3,7 +3,6 @@
 import { AmplitudeAdapter } from "./adapters/amplitude";
 import { VariantInfo } from "./application/models/variantInfo";
 import { OrgPageConfig } from "./contexts/types";
-import { ExtensionInfo } from "./extension";
 
 // Export the type for use in tests
 export type SpiffyInit = {
@@ -11,7 +10,6 @@ export type SpiffyInit = {
   getOrgInfo: (apiKey: string) => Promise<OrgInfo>;
   refresh: () => Promise<void>;
   isInitialized?: boolean;
-  extensionInfo: ExtensionInfo;
   setVariantInfoOverride: (variantInfo: VariantInfo) => void;
   // TODO: Other functions to invoke page loads, record checkout events etc
   _amplitudeAdapter?: AmplitudeAdapter;