@envive-ai/react-hooks 0.1.2 → 0.1.4

package/src/contexts/enviveConfigContext.tsx

@@ -1,19 +1,23 @@
-import React, { createContext, useContext, ReactNode } from "react";
+import React, { createContext, useContext, ReactNode, useEffect } from "react";
+import { useSetAtom, useAtomValue } from "jotai";
 import type { EnviveConfig } from "./types";
+import { enviveConfigAtom } from "src/atoms/envive/enviveConfig";
+import Logger from "src/application/logging/logger";
 
 const EnviveConfigContext = createContext<EnviveConfig | undefined>(undefined);
 
 interface EnviveConfigProviderProps {
   children: ReactNode;
-  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 const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
@@ -27,7 +31,9 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
   contextSource,
   orgLevelApiKey,
   orgShortName,
+  identifyingPrefix,
 }) => {
+  const setEnviveConfig = useSetAtom(enviveConfigAtom);
   const config: EnviveConfig = {
     amplitudeApiKey,
     dataResidency,
@@ -38,19 +44,13 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
     contextSource,
     orgLevelApiKey,
     orgShortName,
+    identifyingPrefix,
   };
 
-  // Validate config values
-  for (const key in config) {
-    if (config.hasOwnProperty(key)) {
-      const value = config[key as keyof EnviveConfig];
-      if (value === undefined || value === null || value === "") {
-        throw new Error(
-          `EnviveConfigProvider: Missing required configuration value for '${key}'`
-        );
-      }
-    }
-  }
+  useEffect(() => {
+    setEnviveConfig(config);
+    Logger.logDebug("EnviveConfigProvider: Setting EnviveConfig", config);
+  }, [setEnviveConfig, config]);
 
   return (
     <EnviveConfigContext.Provider value={config}>
@@ -60,11 +60,22 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
 };
 
 export const useEnviveConfig = (): EnviveConfig => {
-  const context = useContext(EnviveConfigContext);
-  if (context === undefined) {
-    throw new Error(
-      "useEnviveConfig must be used within an EnviveConfigProvider"
+  const config = useAtomValue(enviveConfigAtom);
+  Logger.logDebug("useEnviveConfig: Accessing EnviveConfig", config);
+
+  // During initial render, the atom might not be set yet, so we need to be more patient
+  // The EnviveConfigProvider will set it in its useEffect
+  if (!config) {
+    // Instead of throwing immediately, let's return a default/empty config
+    // This prevents the error during initial render
+    Logger.logWarn(
+      "EnviveConfig not yet available, returning default config",
+      undefined
     );
+    return {
+      identifyingPrefix: "spiffy", // This is required, so provide a default
+    } as EnviveConfig;
   }
-  return context;
+
+  return config;
 };

package/src/contexts/enviveCssContext.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+import { useAtomValue } from "jotai";
+import { orgMerchantCssAtom } from "src/atoms/org/merchantCss";
+
+interface EnviveCssProviderProps {
+  children: ReactNode;
+}
+
+export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({
+  children,
+}) => {
+  const enviveCss = useAtomValue(orgMerchantCssAtom);
+
+  return (
+    <>
+      {enviveCss && <style id="merchant-css-styles">{enviveCss}</style>}
+      {children}
+    </>
+  );
+};

package/src/contexts/index.ts

@@ -2,3 +2,5 @@ export * from "./chatContext";
 export * from "./systemSettingsContext";
 export * from "./enviveConfigContext";
 export * from "./types";
+export * from "./orgConfigContext";
+export * from "./enviveCssContext";

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

@@ -1,7 +1,14 @@
-import { useAtomValue } from 'jotai';
-import { Dispatch, ReactNode, SetStateAction, createContext, useMemo, useState } from 'react';
-import { GenerationParams } from 'src/application/models';
-import { endpointURLAtom } from 'src/atoms/org/org';
+import { useAtomValue } from "jotai";
+import {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  createContext,
+  useMemo,
+  useState,
+} from "react";
+import { GenerationParams } from "src/application/models";
+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 = () => {
@@ -30,7 +37,9 @@ interface SystemSettingsContextProviderProps {
   showDebugBar?: boolean;
 }
 
-const SystemSettingsContext = createContext<SystemSettingsContextParams | undefined>(undefined);
+const SystemSettingsContext = createContext<
+  SystemSettingsContextParams | undefined
+>(undefined);
 
 const SystemSettingsContextProvider = ({
   children,
@@ -38,9 +47,9 @@ const SystemSettingsContextProvider = ({
   showDebugBar,
 }: SystemSettingsContextProviderProps) => {
   const [params, setParams] = useState<GenerationParams | undefined>(
-    () => generationParams ?? defaultGenerationParams,
+    () => generationParams ?? defaultGenerationParams
   );
-  const endpointURL = useAtomValue(endpointURLAtom);
+  const endpointURL = useAtomValue(baseUrlAtom);
   const settingsContextValues = useMemo(
     () => ({
       generationParams: params,
@@ -48,7 +57,7 @@ const SystemSettingsContextProvider = ({
       setGenerationParams: setParams,
       endpointURL,
     }),
-    [generationParams, endpointURL, showDebugBar],
+    [generationParams, endpointURL, showDebugBar]
   );
 
   return (
@@ -58,4 +67,8 @@ const SystemSettingsContextProvider = ({
   );
 };
 
-export { SystemSettingsContextProvider, SystemSettingsContext, defaultGenerationParams };
+export {
+  SystemSettingsContextProvider,
+  SystemSettingsContext,
+  defaultGenerationParams,
+};

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

@@ -20,3 +20,4 @@ export * from "./useSnapControl";
 export * from "./useSystemSettingsContext";
 export * from "./useTrackComponentVisibleEvent";
 export * from "./useUpdateAnalyticsProps";
+export * from "./utils";

package/src/hooks/useSearch.tsx

@@ -31,7 +31,10 @@ import { ProductCardConfig } from "src/contexts/types";
 import Logger from "src/application/logging/logger";
 import { SearchResult } from "src/application/models/api/search";
 import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
-import { SearchFilter, SelectFilterItem } from "src/types/search-filter-types";
+import {
+  SearchFilterDatum,
+  SelectFilterItem,
+} from "src/types/search-filter-types";
 import { getSearchResultsState, SearchResultsState } from "./utils";
 import { orgUIConfigAtom } from "src/atoms/org";
 
@@ -43,7 +46,7 @@ export interface SearchResultsHocProps {
   productCardConfig: ProductCardConfig;
   productList: SearchResponseProduct[];
   autocompleteResults: string[];
-  searchFilters: SearchFilter[];
+  searchFilters: SearchFilterDatum[];
   availableDynamicFilters: { name: string; displayName: string }[];
   selectedFilterOptions: SelectedFilterOption[];
 
@@ -119,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(
@@ -158,7 +169,7 @@ export const useSearch = (): SearchResultsHocProps => {
     return [
       { filterId: "sort", displayName: "SORT", items: sortOptions },
       ...searchFilters,
-    ] as SearchFilter[];
+    ] as SearchFilterDatum[];
   }, [productSorting, searchFilters]);
 
   const filterButtonText = useMemo(() => {
@@ -396,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/search-filter-types.ts

@@ -32,7 +32,7 @@ export type ModalSheetCloseIconProps = {
 };
 
 export type SearchFilterProps = {
-  filters: SearchFilter[];
+  filters: SearchFilterDatum[];
   selectFilterItem: SelectFilterItem;
   clearAllFilters: () => void;
   productCount: number;
@@ -62,18 +62,18 @@ export type SelectFilterItem = ({
   displayName: string;
 }) => void;
 
-export type SelectedFilterItem = {
+export type SelectedFilterItemDatum = {
   filterId: string;
   filterItemId: string;
 };
 
-export type SearchFilter = {
+export type SearchFilterDatum = {
   filterId: string;
   displayName: string;
-  items: SearchFilterItem[];
+  items: SearchFilterItemDatum[];
 };
 
-export type SearchFilterItem = {
+export type SearchFilterItemDatum = {
   filterItemId: string;
   displayName: string;
   productCount: number;
@@ -88,7 +88,7 @@ export type SearchFilterHeaderProps = {
 };
 
 export type FilterProps = {
-  filter: SearchFilter;
+  filter: SearchFilterDatum;
   selectFilterItem: SelectFilterItem;
   radioButtonFillColor?: string;
   radioButtonHoverColor?: string;
@@ -97,7 +97,7 @@ export type FilterProps = {
 
 export type FilterItemProps = {
   filterId: string;
-  filterItem: SearchFilterItem;
+  filterItem: SearchFilterItemDatum;
   selectFilterItem: SelectFilterItem;
 };
 

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;