@envive-ai/react-hooks 0.1.5 → 0.1.6

package/src/contexts/newOrgConfigContext.tsx

@@ -0,0 +1,104 @@
+import React, {
+  createContext,
+  useContext,
+  ReactNode,
+  useState,
+  useEffect,
+  useMemo,
+} from "react";
+import { useAtomValue, useSetAtom } from "jotai";
+import {
+  BasicOrgInfoType,
+  getOrgInfo,
+} from "src/application/models/supportedOrgs";
+import { useColorsAndFrontendConfig } from "src/hooks/useGraphQLConfig";
+import { orgShortNameAtom } from "src/atoms/envive/enviveConfig";
+import { getAtomStore } from "src/atoms/atomStore/atomStore"; // Import getAtomStore
+import { orgIdAtom } from "src/atoms/org/graphqlConfig"; // Import new atoms
+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"; // Import FeatureFlagServiceProvider
+import { ColorsConfigResponse, FrontendConfigResponse } from "./graphqlContext";
+
+export interface NewOrgConfigContextType {
+  combinedConfig?:
+    | (BasicOrgInfoType & {
+        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 [oldConfig, setOldConfig] = useState<BasicOrgInfoType | undefined>();
+  const orgShortName = useAtomValue(orgShortNameAtom);
+  const setNewOrgConfig = useSetAtom(newOrgConfigAtom);
+
+  const { data: newConfig, loading, error } = useColorsAndFrontendConfig();
+
+  useEffect(() => {
+    if (orgShortName) {
+      getOrgInfo(orgShortName).then(setOldConfig);
+    }
+  }, [orgShortName]);
+
+  const combinedConfig = useMemo(() => {
+    if (!oldConfig || !newConfig) return null;
+    return { ...oldConfig, ...newConfig };
+  }, [oldConfig, newConfig]);
+
+  useEffect(() => {
+    const atomStore = getAtomStore();
+    if (combinedConfig) {
+      // TODO: Replace with actual orgId when available in combinedConfig
+      atomStore.set(orgIdAtom, "mock-org-id");
+
+      setNewOrgConfig(combinedConfig);
+    }
+  }, [combinedConfig, setNewOrgConfig]);
+
+  const contextValue = useMemo(() => {
+    if (!orgShortName || (loading && !oldConfig)) {
+      return { combinedConfig: null, loading: true, error: null };
+    }
+
+    if (error) {
+      return { combinedConfig: null, loading: false, error };
+    }
+
+    return { combinedConfig, loading: false, error: null };
+  }, [orgShortName, loading, error, oldConfig, combinedConfig]);
+
+  // 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/orgConfigContext.tsx

@@ -1,106 +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";
+// 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;
-}
+// interface OrgConfigContextType {
+//   orgConfig: OrgConfigType | undefined;
+//   loading: boolean;
+//   error: Error | undefined;
+// }
 
-const OrgConfigContext = createContext<OrgConfigContextType | undefined>(
-  undefined
-);
+// const OrgConfigContext = createContext<OrgConfigContextType | undefined>(
+//   undefined
+// );
 
-interface OrgConfigProviderProps {
-  children: ReactNode;
-}
+// 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);
+// 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);
+//   // Watch for EnviveConfig to be available
+//   const enviveConfig = useAtomValue(enviveConfigAtom);
 
-  useEffect(() => {
-    const fetchOrgConfig = async () => {
-      try {
-        setLoading(true);
-        setError(undefined); // Clear any previous errors
+//   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 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;
+//         // 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;
-        }
+//         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,
-          }
-        );
+//         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);
-      }
-    };
+//         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
+//     fetchOrgConfig();
+//   }, [enviveConfig]); // Re-run when enviveConfig changes
 
-  return (
-    <OrgConfigContext.Provider value={{ orgConfig, loading, error }}>
-      {children}
-    </OrgConfigContext.Provider>
-  );
-};
+//   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;
-};
+// 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/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/useAppDetails";
+import { useEnviveConfig } from "src/contexts/enviveConfigContext";
+import { SessionRestartRequired } from "src/types/exceptions/sessionExceptions";
+import { UnsupportedProductException } from "src/types/exceptions/unsupportedProductExceptions";
+import { SearchResult, SearchParams } from "../application/models/api/search";
+import {
+  setSearchServiceFunction,
+  clearSearchServiceFunction,
+} from "../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.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.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;
+};