@envive-ai/react-hooks 0.1.5 → 0.1.7

package/src/contexts/localStorageContext/localStorageContext.tsx

@@ -0,0 +1,159 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  useMemo,
+  useEffect,
+} from "react";
+import Logger from "src/application/logging/logger";
+import { LocalStorageEventListener } from "src/application/models/localStorageEventListener";
+
+export enum LocalStorageKeys {
+  ChatId = "v1-spiffy-chat-session-id",
+  SpiffyOnOverride = "spiffy_on",
+  EnviveOnOverride = "envive_on",
+}
+
+interface LocalStorageContextType {
+  setItem: (key: string, value: string) => void;
+  getItem: (key: string) => string | null;
+  setSpiffyOnFeatureFlag: (value: boolean | null) => void;
+  getSpiffyOnFeatureFlag: () => string | null;
+  attachListener: (listener: LocalStorageEventListener) => void;
+  detachListener: (listener: LocalStorageEventListener) => void;
+  isAvailable: boolean;
+}
+
+const LocalStorageContext = createContext<LocalStorageContextType | null>(null);
+
+export const LocalStorageProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const isAvailable = useMemo(() => {
+    try {
+      return typeof window !== "undefined" && !!window.localStorage;
+    } catch {
+      return false;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isAvailable) {
+      Logger.logError("localStorage is not available", undefined);
+    }
+  }, [isAvailable]);
+
+  const setItem = useCallback(
+    (key: string, value: string) => {
+      if (!isAvailable) return;
+      localStorage.setItem(key, value);
+      window.dispatchEvent(
+        new StorageEvent("storage", { key, newValue: value })
+      );
+    },
+    [isAvailable]
+  );
+
+  const getItem = useCallback(
+    (key: string) => {
+      if (!isAvailable) return null;
+      return localStorage.getItem(key);
+    },
+    [isAvailable]
+  );
+
+  const setSpiffyOnFeatureFlag = useCallback(
+    (value: boolean | null): void => {
+      if (!isAvailable) return;
+      if (value === true) {
+        localStorage.setItem(LocalStorageKeys.SpiffyOnOverride, "true");
+      } else if (value === false) {
+        localStorage.setItem(LocalStorageKeys.SpiffyOnOverride, "false");
+      }
+    },
+    [isAvailable]
+  );
+
+  const getSpiffyOnFeatureFlag = useCallback((): string | null => {
+    if (!isAvailable) return null;
+    return localStorage.getItem(LocalStorageKeys.SpiffyOnOverride);
+  }, [isAvailable]);
+
+  const listenersCache = useMemo(
+    () => new Map<string, (event: StorageEvent) => void>(),
+    []
+  );
+
+  const listenerForKey = useCallback(
+    (listener: LocalStorageEventListener): ((event: StorageEvent) => void) => {
+      if (!listenersCache.has(listener.storageKey)) {
+        const handler = (event: StorageEvent) => {
+          if (event.key !== listener.storageKey) {
+            return;
+          }
+          Logger.logDebug(
+            `[spiffy-ai] Storage event key=${event.key}, value=`,
+            event.newValue
+          );
+          listener.listener(event);
+        };
+        listenersCache.set(listener.storageKey, handler);
+      }
+      return listenersCache.get(listener.storageKey)!;
+    },
+    [listenersCache]
+  );
+
+  const attachListener = useCallback(
+    (listener: LocalStorageEventListener): void => {
+      if (!isAvailable) return;
+      window.addEventListener("storage", listenerForKey(listener));
+    },
+    [isAvailable, listenerForKey]
+  );
+
+  const detachListener = useCallback(
+    (listener: LocalStorageEventListener): void => {
+      if (!isAvailable) return;
+      window.removeEventListener("storage", listenerForKey(listener));
+    },
+    [isAvailable, listenerForKey]
+  );
+
+  const value = useMemo(
+    () => ({
+      setItem,
+      getItem,
+      setSpiffyOnFeatureFlag,
+      getSpiffyOnFeatureFlag,
+      attachListener,
+      detachListener,
+      isAvailable,
+    }),
+    [
+      setItem,
+      getItem,
+      setSpiffyOnFeatureFlag,
+      getSpiffyOnFeatureFlag,
+      attachListener,
+      detachListener,
+      isAvailable,
+    ]
+  );
+
+  return (
+    <LocalStorageContext.Provider value={value}>
+      {children}
+    </LocalStorageContext.Provider>
+  );
+};
+
+export const useLocalStorage = () => {
+  const context = useContext(LocalStorageContext);
+  if (!context) {
+    throw new Error(
+      "useLocalStorage must be used within a LocalStorageProvider"
+    );
+  }
+  return context;
+};

package/src/contexts/newOrgConfigContext/index.ts

@@ -0,0 +1 @@
+export * from "./newOrgConfigContext";

package/src/contexts/newOrgConfigContext/newOrgConfigContext.tsx

@@ -0,0 +1,70 @@
+import React, { createContext, useContext, ReactNode, useMemo } from "react";
+import { useAtomValue, useSetAtom } from "jotai";
+import { useColorsAndFrontendConfig } from "src/hooks/GraphQLConfig/useGraphQLConfig";
+import { orgShortNameAtom } from "src/atoms/envive/enviveConfig";
+import { newOrgConfigAtom } from "src/atoms/org/newOrgConfigAtom"; // Import newOrgConfigAtom
+import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults"; // Import OrgConfigFeatureGate
+import { FeatureFlagServiceProvider } from "src/contexts/featureFlagServiceContext/featureFlagServiceContext"; // Import FeatureFlagServiceProvider
+import {
+  ColorsConfigResponse,
+  FrontendConfigResponse,
+} from "../graphqlContext";
+
+export interface NewOrgConfigContextType {
+  combinedConfig?: {
+    colorsConfig?: ColorsConfigResponse;
+    frontendConfig?: FrontendConfigResponse;
+  } | null;
+  loading: boolean;
+  error: Error | null;
+}
+
+const NewOrgConfigContext = createContext<NewOrgConfigContextType | undefined>(
+  undefined
+);
+
+interface NewOrgConfigProviderProps {
+  children: ReactNode;
+}
+
+export const NewOrgConfigProvider: React.FC<NewOrgConfigProviderProps> = ({
+  children,
+}) => {
+  const orgShortName = useAtomValue(orgShortNameAtom);
+  const setNewOrgConfig = useSetAtom(newOrgConfigAtom);
+
+  const { data: newConfig, loading, error } = useColorsAndFrontendConfig();
+
+  const contextValue = useMemo(() => {
+    if (!orgShortName || loading) {
+      return { newConfig, loading: true, error: null };
+    }
+
+    if (error) {
+      return { newConfig, loading: false, error };
+    }
+    setNewOrgConfig(newConfig);
+    return { newConfig, loading: false, error: null };
+  }, [orgShortName, loading, error]);
+
+  // TODO: Provide actual featureGates when available in combinedConfig
+  const featureGates: OrgConfigFeatureGate[] = [];
+
+  return (
+    <NewOrgConfigContext.Provider value={contextValue}>
+      <FeatureFlagServiceProvider featureGates={featureGates}>
+        {children}
+      </FeatureFlagServiceProvider>
+    </NewOrgConfigContext.Provider>
+  );
+};
+
+export const useNewOrgConfigContext = () => {
+  const context = useContext(NewOrgConfigContext);
+  if (context === undefined) {
+    throw new Error(
+      "useNewOrgConfigContext must be used within a NewOrgConfigProvider"
+    );
+  }
+  return context;
+};

package/src/contexts/searchContext/index.ts

@@ -0,0 +1 @@
+export * from "./searchContext";

package/src/contexts/searchContext/searchContext.tsx

@@ -0,0 +1,187 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  useMemo,
+  useEffect,
+} from "react";
+import { useAtomValue } from "jotai";
+import {
+  Configuration,
+  ResponseCategory,
+  ResponseError,
+  SearchApi,
+} from "@spiffy-ai/commerce-api-client";
+import { baseUrlAtom } from "src/atoms/envive/enviveConfig";
+import Logger from "src/application/logging/logger";
+import { useAppDetails } from "src/hooks/AppDetails/useAppDetails";
+import { useEnviveConfig } from "src/contexts/enviveConfigContext/enviveConfigContext";
+import { SessionRestartRequired } from "src/types/exceptions/sessionExceptions";
+import { UnsupportedProductException } from "src/types/exceptions/unsupportedProductExceptions";
+import { SearchParams, SearchResult } from "src/application/models/api/search";
+import {
+  clearSearchServiceFunction,
+  setSearchServiceFunction,
+} from "src/atoms/search/searchServiceAdapter";
+
+const transformProductResponses = (products: SearchResult["products"]) =>
+  products.map((data) => ({
+    id: data.id,
+    responseId: data.response_id,
+    category: ResponseCategory.Product,
+    description: data.description,
+    imageUrl: data.image_url,
+    imageUrls: data.image_urls,
+    title: data.title,
+    url: data.url,
+    originalPrice: data.original_price,
+    salePrice: data.sale_price,
+    averageRating: data.average_rating,
+    numberReviews: data.number_reviews,
+    metadata: data.metadata,
+    isForGrid: data.is_for_grid,
+    colors: data.colors,
+    sizes: data.sizes,
+    filters: data.filters,
+  }));
+
+async function errorResponseBody(error: ResponseError) {
+  try {
+    return await error.response.json();
+  } catch {
+    return {};
+  }
+}
+
+async function throwSessionRestartRequiredIf(errorMsg: string, error: unknown) {
+  if (!(error instanceof ResponseError)) {
+    Logger.logInfo(errorMsg, error);
+    throw error;
+  }
+
+  const errorResponse = await errorResponseBody(error);
+  if (
+    errorResponse?.message?.toLowerCase() === "unsupported product" ||
+    errorResponse?.app_code?.toUpperCase() === "PRODUCT_NOT_FOUND"
+  ) {
+    throw new UnsupportedProductException();
+  } else if (
+    errorResponse?.app_code?.toUpperCase() === "RESTART_SESSION" ||
+    errorResponse?.sub_code?.toUpperCase() === "NOT_FOUND"
+  ) {
+    Logger.logInfo(
+      "Session does not exist. Re-start session",
+      error,
+      error.response,
+      errorResponse
+    );
+    throw new SessionRestartRequired();
+  }
+
+  Logger.logInfo(errorMsg, error);
+  throw error;
+}
+
+interface SearchContextValue {
+  searchProducts: (params: SearchParams) => Promise<SearchResult>;
+  isReady: boolean;
+}
+
+const SearchContext = createContext<SearchContextValue | undefined>(undefined);
+
+export const SearchProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const { orgLevelApiKey, publicKey } = useEnviveConfig();
+  const apiKey = orgLevelApiKey || publicKey; // Replicate apiKeyAtom logic
+  const appDetails = useAppDetails();
+  const baseUrl = useAtomValue(baseUrlAtom);
+
+  const isReady = Boolean(apiKey && appDetails && baseUrl);
+
+  const searchApi = useMemo(() => {
+    if (!isReady) return null;
+
+    const config: Configuration = new Configuration({
+      accessToken: apiKey,
+      basePath: baseUrl,
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+    });
+    return new SearchApi(config);
+  }, [apiKey, baseUrl, isReady]);
+
+  const searchProducts = useCallback(
+    async (params: SearchParams): Promise<SearchResult> => {
+      if (!isReady || !searchApi) {
+        throw new Error("SearchService not ready - missing dependencies");
+      }
+
+      try {
+        const response = await searchApi.v1SearchQueryGet({
+          query: params.query,
+          limit: params.limit,
+          org_id: appDetails.orgId,
+          user_id: appDetails.userId,
+        });
+        const {
+          products,
+          filters,
+          search_response_id: searchResponseId,
+        } = response;
+
+        return {
+          products: transformProductResponses(products) || [],
+          filters: filters || [],
+          totalProductCount: products?.length || 0,
+          searchResponseId: searchResponseId || "",
+        };
+      } catch (error) {
+        await throwSessionRestartRequiredIf("Failed to search products", error);
+        // This part will not be reached if an exception is thrown, but it's required for type safety
+        return {
+          products: [],
+          filters: [],
+          totalProductCount: 0,
+          searchResponseId: "",
+        };
+      }
+    },
+    [searchApi, isReady, appDetails]
+  );
+
+  // Register the search function with the adapter for use in atoms
+  useEffect(() => {
+    if (isReady) {
+      setSearchServiceFunction(searchProducts);
+    } else {
+      clearSearchServiceFunction();
+    }
+
+    return () => {
+      clearSearchServiceFunction();
+    };
+  }, [searchProducts, isReady]);
+
+  const value = useMemo(
+    () => ({
+      searchProducts,
+      isReady,
+    }),
+    [searchProducts, isReady]
+  );
+
+  return (
+    <SearchContext.Provider value={value}>{children}</SearchContext.Provider>
+  );
+};
+
+export const useSearchService = () => {
+  const context = useContext(SearchContext);
+  if (!context) {
+    throw new Error("useSearchService must be used within a SearchProvider");
+  }
+  return context;
+};

package/src/contexts/sessionStorageContext/index.ts

@@ -0,0 +1 @@
+export * from "./sessionStorageContext";

package/src/contexts/sessionStorageContext/sessionStorageContext.tsx

@@ -0,0 +1,80 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  useMemo,
+  useEffect,
+} from "react";
+import Logger from "../../application/logging/logger";
+
+interface SessionStorageContextType {
+  setItem: (key: string, value: string) => void;
+  getItem: (key: string) => string | null;
+  isAvailable: boolean;
+}
+
+const SessionStorageContext = createContext<SessionStorageContextType | null>(
+  null
+);
+
+export const SessionStorageProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const isAvailable = useMemo(() => {
+    try {
+      return typeof window !== "undefined" && !!window.sessionStorage;
+    } catch {
+      return false;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isAvailable) {
+      Logger.logError("sessionStorage is not available", undefined);
+    }
+  }, [isAvailable]);
+
+  const setItem = useCallback(
+    (key: string, value: string) => {
+      if (!isAvailable) return;
+      sessionStorage.setItem(key, value);
+      window.dispatchEvent(
+        new StorageEvent("storage", { key, newValue: value })
+      );
+    },
+    [isAvailable]
+  );
+
+  const getItem = useCallback(
+    (key: string) => {
+      if (!isAvailable) return null;
+      return sessionStorage.getItem(key);
+    },
+    [isAvailable]
+  );
+
+  const value = useMemo(
+    () => ({
+      setItem,
+      getItem,
+      isAvailable,
+    }),
+    [setItem, getItem, isAvailable]
+  );
+
+  return (
+    <SessionStorageContext.Provider value={value}>
+      {children}
+    </SessionStorageContext.Provider>
+  );
+};
+
+export const useSessionStorage = () => {
+  const context = useContext(SessionStorageContext);
+  if (!context) {
+    throw new Error(
+      "useSessionStorage must be used within a SessionStorageProvider"
+    );
+  }
+  return context;
+};

package/src/contexts/shopifyUrlContext/index.ts

@@ -0,0 +1 @@
+export * from "./shopifyUrlContext";

package/src/contexts/shopifyUrlContext/shopifyUrlContext.tsx

@@ -0,0 +1,97 @@
+import React, { createContext, useCallback, useContext, useMemo } from "react";
+import { IdExtractor } from "src/contexts/types";
+import { parseHref } from "src/application/utils/urlsParser";
+
+interface ShopifyUrlContextType {
+  getTrimmedPathName: () => string | null;
+  getPlpOrPdpId: (extractor: IdExtractor) => string | null;
+  isOnPdpPage: () => boolean;
+  isOnPlpPage: () => boolean;
+  isReady: boolean;
+}
+
+const ShopifyUrlContext = createContext<ShopifyUrlContextType | undefined>(
+  undefined
+);
+
+export const ShopifyUrlProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const isReady = true; // No external dependencies, so always ready
+
+  const getTrimmedPathName = useCallback((): string | null => {
+    let { pathname } = window.location;
+    // strip out the proxy path so local dev still works
+    pathname = pathname.replace("/proxy", "");
+    // remove trailing hash if it exists
+    pathname = pathname.replace(/#.*$/, "");
+    // remove trailing /, ie. some URLs can end with '/' like /collections/cast-iron/
+    pathname = pathname.replace(/\/$/, "");
+
+    if (pathname === undefined || pathname === null || pathname.length === 0) {
+      return null;
+    }
+
+    return pathname;
+  }, []);
+
+  const getPlpOrPdpId = useCallback(
+    (extractor: IdExtractor): string | null => {
+      if (extractor === "shopify-product-variant-id") {
+        const parsedHref = parseHref(window.location.href);
+        const variantId = parsedHref?.urlSearchParams?.get("variant");
+        if (!variantId) {
+          return getPlpOrPdpId("shopify-product-id");
+        }
+        return variantId;
+      }
+
+      const pathSegment =
+        extractor === "shopify-product-id" ? "products" : "collections";
+      const tokens = getTrimmedPathName()?.split("/");
+      const idIndex = tokens?.findIndex((token) => token === pathSegment);
+      if (idIndex !== undefined && idIndex >= 0 && tokens) {
+        return decodeURIComponent(tokens[idIndex + 1]);
+      }
+      return null;
+    },
+    [getTrimmedPathName]
+  );
+
+  const isOnPdpPage = useCallback((): boolean => {
+    return getTrimmedPathName()?.includes("/products") ?? false;
+  }, [getTrimmedPathName]);
+
+  const isOnPlpPage = useCallback((): boolean => {
+    return (
+      (getTrimmedPathName()?.includes("/collections") &&
+        !getTrimmedPathName()?.includes("/products")) ??
+      false
+    );
+  }, [getTrimmedPathName]);
+
+  const value = useMemo(
+    () => ({
+      getTrimmedPathName,
+      getPlpOrPdpId,
+      isOnPdpPage,
+      isOnPlpPage,
+      isReady,
+    }),
+    [getTrimmedPathName, getPlpOrPdpId, isOnPdpPage, isOnPlpPage, isReady]
+  );
+
+  return (
+    <ShopifyUrlContext.Provider value={value}>
+      {children}
+    </ShopifyUrlContext.Provider>
+  );
+};
+
+export const useShopifyUrl = () => {
+  const context = useContext(ShopifyUrlContext);
+  if (!context) {
+    throw new Error("useShopifyUrl must be used within a ShopifyUrlProvider");
+  }
+  return context;
+};

package/src/contexts/systemSettingsContext/index.ts

@@ -0,0 +1 @@
+export * from "./systemSettingsContext";

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/index.ts

@@ -0,0 +1 @@
+export * from "./userIdentityContext";