@envive-ai/react-hooks 0.1.5 → 0.1.6

package/src/hooks/useLocalStorageOperations.ts

@@ -0,0 +1,92 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  useLocalStorage,
+  LocalStorageKeys,
+} from "../contexts/localStorageContext";
+import { LocalStorageEventListener } from "../application/models/localStorageEventListener";
+
+// Reactive localStorage value hook
+export const useLocalStorageValue = (key: string) => {
+  const { getItem, setItem, attachListener, detachListener } =
+    useLocalStorage();
+  const [value, setValue] = useState<string | null>(() => getItem(key));
+
+  useEffect(() => {
+    const listener: LocalStorageEventListener = {
+      storageKey: key,
+      listener: (event: StorageEvent) => {
+        setValue(event.newValue);
+      },
+    };
+
+    attachListener(listener);
+    return () => detachListener(listener);
+  }, [key, attachListener, detachListener]);
+
+  const updateValue = useCallback(
+    (newValue: string) => {
+      setItem(key, newValue);
+      setValue(newValue);
+    },
+    [key, setItem]
+  );
+
+  return { value, setValue: updateValue };
+};
+
+// Feature flag hook for Spiffy
+export const useSpiffyFeatureFlag = () => {
+  const { setSpiffyOnFeatureFlag } = useLocalStorage();
+  const { value } = useLocalStorageValue(LocalStorageKeys.SpiffyOnOverride);
+
+  const setFlag = useCallback(
+    (flag: boolean | null) => {
+      setSpiffyOnFeatureFlag(flag);
+    },
+    [setSpiffyOnFeatureFlag]
+  );
+
+  return {
+    value: value === "true" ? true : value === "false" ? false : null,
+    setFlag,
+  };
+};
+
+// Feature flag hook for Envive
+export const useEnviveFeatureFlag = () => {
+  const { setItem, getItem } = useLocalStorage();
+  const { value } = useLocalStorageValue(LocalStorageKeys.EnviveOnOverride);
+
+  const setFlag = useCallback(
+    (flag: boolean | null) => {
+      if (flag === true) {
+        setItem(LocalStorageKeys.EnviveOnOverride, "true");
+      } else if (flag === false) {
+        setItem(LocalStorageKeys.EnviveOnOverride, "false");
+      }
+    },
+    [setItem]
+  );
+
+  return {
+    value: value === "true" ? true : value === "false" ? false : null,
+    setFlag,
+  };
+};
+
+// Storage listener hook
+export const useLocalStorageListener = (
+  key: string,
+  callback: (event: StorageEvent) => void
+) => {
+  const { attachListener, detachListener } = useLocalStorage();
+
+  useEffect(() => {
+    const listener: LocalStorageEventListener = {
+      storageKey: key,
+      listener: callback,
+    };
+    attachListener(listener);
+    return () => detachListener(listener);
+  }, [key, callback, attachListener, detachListener]);
+};

package/src/hooks/useNewOrgConfig.ts

@@ -1,80 +1,7 @@
-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
-  }
-}
+import { useNewOrgConfigContext } from "src/contexts/newOrgConfigContext";
 
 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;
-  }
+  const { combinedConfig, loading, error } = useNewOrgConfigContext();
 
-  return combinedConfig;
+  return { ...combinedConfig, loading, error };
 };

package/src/hooks/useSearch.tsx

@@ -1,7 +1,7 @@
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDebounce } from "src/hooks/useDebounce";
-import { useTrackComponentVisibleEvent } from "src/hooks";
+import { useNewOrgConfig, useTrackComponentVisibleEvent } from "src/hooks";
 import {
   addSearchFilterAtom,
   clearSearchFiltersAtom,
@@ -23,9 +23,9 @@ import {
 import { formatFilterDisplayName } from "src/atoms/search/utils";
 import { ProductSorting } from "src/atoms/search/types";
 import {
-  AmplitudeAdapter,
   SpiffyMetricsEventName,
-} from "src/adapters/amplitude";
+  useAmplitude,
+} from "src/contexts/amplitudeContext";
 import { SpiffyWidgets } from "src/application/models/spiffyWidgets";
 import { ProductCardConfig } from "src/contexts/types";
 import Logger from "src/application/logging/logger";
@@ -36,7 +36,7 @@ import {
   SelectFilterItem,
 } from "src/types/search-filter-types";
 import { getSearchResultsState, SearchResultsState } from "./utils";
-import { orgUIConfigAtom } from "src/atoms/org";
+import { orgShortNameAtom } from "src/atoms/envive/enviveConfig";
 
 export interface SearchResultsHocProps {
   // Data
@@ -86,7 +86,8 @@ export interface SearchResultsHocProps {
 
 export const useSearch = (): SearchResultsHocProps => {
   // Atoms
-  const orgUIConfig = useAtomValue(orgUIConfigAtom);
+  const config = useNewOrgConfig();
+  const orgShortName = useAtomValue(orgShortNameAtom);
   const { data: searchData, loading: isLoadingSearch } =
     useAtomValue(searchAtom);
   const productList = useAtomValue(filteredSearchProductsAtom);
@@ -120,15 +121,15 @@ export const useSearch = (): SearchResultsHocProps => {
   const searchResultsState = getSearchResultsState(isLoadingSearch, searchData);
 
   const dynamicFilters = searchData?.filters || [];
-  const { productCardConfig, shortName: merchantShortName } = orgUIConfig || {};
 
   // Provide fallback values when orgUIConfig is not yet available
-  const safeProductCardConfig = productCardConfig || {
+  const safeProductCardConfig = config?.frontendConfig?.uiConfigs
+    ?.productCardConfig || {
     variant: "minimal",
     hoverVariant: "none",
     layoutVariant: "square",
   };
-  const safeMerchantShortName = merchantShortName || "";
+  const safeMerchantShortName = orgShortName || "";
 
   const availableDynamicFilters = useMemo(() => {
     return dynamicFilters
@@ -186,6 +187,8 @@ export const useSearch = (): SearchResultsHocProps => {
   }, [filters]);
 
   // Callbacks
+  const { trackEvent } = useAmplitude();
+
   const handleToggleDynamicFilter = useCallback(
     ({
       filter,
@@ -194,7 +197,7 @@ export const useSearch = (): SearchResultsHocProps => {
       filter: string;
       dynamicFilterDisplayName: string;
     }) => {
-      AmplitudeAdapter.trackEvent({
+      trackEvent({
         eventName: SpiffyMetricsEventName.SearchFilterClicked,
         eventProps: {
           filterType: "Dynamic",
@@ -206,7 +209,7 @@ export const useSearch = (): SearchResultsHocProps => {
         createFilterOption("dynamic", filter, dynamicFilterDisplayName)
       );
     },
-    [addFilter, searchText]
+    [addFilter, searchText, trackEvent]
   );
 
   const handleRemoveFilter = useCallback(
@@ -218,7 +221,7 @@ export const useSearch = (): SearchResultsHocProps => {
 
   const handleSubmitSearch = useCallback(async () => {
     if (searchText.trim()) {
-      AmplitudeAdapter.trackEvent({
+      trackEvent({
         eventName: SpiffyMetricsEventName.SearchQuerySubmitted,
         eventProps: {
           searchOrigin: SpiffyWidgets.SearchResults,
@@ -231,7 +234,7 @@ export const useSearch = (): SearchResultsHocProps => {
       window.history.pushState({}, "", url);
       performSearch({ query: searchText.trim() });
     }
-  }, [performSearch, searchText]);
+  }, [performSearch, searchText, trackEvent]);
 
   const handleAutocompleteSelect = useCallback(
     (suggestion: string) => {
@@ -280,7 +283,7 @@ export const useSearch = (): SearchResultsHocProps => {
 
   const handleSearchInputChange = (newValue: string) => {
     if (newValue.length === 1) {
-      AmplitudeAdapter.trackEvent({
+      trackEvent({
         eventName: SpiffyMetricsEventName.SearchInputStarted,
         eventProps: {
           searchOrigin: SpiffyWidgets.SearchResults,
@@ -305,7 +308,7 @@ export const useSearch = (): SearchResultsHocProps => {
     }) => {
       if (filterId === "sort") {
         const newSort = filterItemId as ProductSorting;
-        AmplitudeAdapter.trackEvent({
+        trackEvent({
           eventName: SpiffyMetricsEventName.SearchSortClicked,
           eventProps: {
             sortType: newSort,
@@ -316,7 +319,7 @@ export const useSearch = (): SearchResultsHocProps => {
       } else if (!isSelected) {
         removeFilter(`${filterId}:${filterItemId}`);
       } else {
-        AmplitudeAdapter.trackEvent({
+        trackEvent({
           eventName: SpiffyMetricsEventName.SearchFilterClicked,
           eventProps: {
             filterType: "Static",
@@ -328,7 +331,7 @@ export const useSearch = (): SearchResultsHocProps => {
         addFilter(createFilterOption(filterId, filterItemId, displayName));
       }
     },
-    [addFilter, removeFilter, setProductSorting, searchText]
+    [addFilter, removeFilter, setProductSorting, searchText, trackEvent]
   );
 
   const handleClearAllFilters = useCallback(() => {
@@ -346,7 +349,7 @@ export const useSearch = (): SearchResultsHocProps => {
 
   useEffect(() => {
     if (productList.length > 0) {
-      AmplitudeAdapter.trackEvent({
+      trackEvent({
         eventName: SpiffyMetricsEventName.SearchResultsViewed,
         eventProps: {
           queryText: searchText,
@@ -354,7 +357,7 @@ export const useSearch = (): SearchResultsHocProps => {
         },
       });
     }
-  }, [productList.length, searchText]);
+  }, [productList.length, searchText, trackEvent]);
 
   useEffect(() => {
     if (query && query !== searchText) {

package/src/hooks/useSearchOperations.ts

@@ -0,0 +1,97 @@
+import { useState, useCallback, useEffect } from "react";
+import { useSearchService } from "src/contexts/searchContext";
+import { SearchResult, SearchParams } from "src/application/models/api/search";
+
+export const useProductSearch = () => {
+  const { searchProducts, isReady } = useSearchService();
+  const [data, setData] = useState<SearchResult | undefined>();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const search = useCallback(
+    async (params: SearchParams) => {
+      if (!isReady) {
+        setError(new Error("Search service not ready - missing dependencies"));
+        return;
+      }
+
+      setLoading(true);
+      setError(null);
+
+      try {
+        const result = await searchProducts(params);
+        setData(result);
+      } catch (err) {
+        setError(
+          err instanceof Error ? err : new Error("Unknown search error")
+        );
+      } finally {
+        setLoading(false);
+      }
+    },
+    [searchProducts, isReady]
+  );
+
+  const reset = useCallback(() => {
+    setData(undefined);
+    setError(null);
+    setLoading(false);
+  }, []);
+
+  return {
+    data,
+    loading,
+    error,
+    search,
+    reset,
+    isReady,
+  };
+};
+
+export const useSearchWithQuery = (params: SearchParams | null) => {
+  const { searchProducts, isReady } = useSearchService();
+  const [data, setData] = useState<SearchResult | undefined>();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const executeSearch = useCallback(
+    async (searchParams: SearchParams) => {
+      if (!isReady) return;
+
+      setLoading(true);
+      setError(null);
+
+      try {
+        const result = await searchProducts(searchParams);
+        setData(result);
+      } catch (err) {
+        setError(
+          err instanceof Error ? err : new Error("Unknown search error")
+        );
+      } finally {
+        setLoading(false);
+      }
+    },
+    [searchProducts, isReady]
+  );
+
+  useEffect(() => {
+    if (params && isReady) {
+      executeSearch(params);
+    }
+  }, [params, isReady, executeSearch]);
+
+  const refetch = useCallback(() => {
+    if (params) {
+      executeSearch(params);
+    }
+  }, [params, executeSearch]);
+
+  return {
+    data,
+    loading,
+    error,
+    refetch,
+    isReady,
+  };
+};

package/src/hooks/useSessionStorageOperations.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect, useCallback } from "react";
+import { useSessionStorage } from "../contexts/sessionStorageContext";
+
+export const useSessionStorageValue = (key: string) => {
+  const { getItem, setItem } = useSessionStorage();
+  const [value, setValue] = useState<string | null>(() => getItem(key));
+
+  useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === key) {
+        setValue(event.newValue);
+      }
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+    return () => window.removeEventListener("storage", handleStorageChange);
+  }, [key, getItem]);
+
+  const updateValue = useCallback(
+    (newValue: string) => {
+      setItem(key, newValue);
+      setValue(newValue);
+    },
+    [key, setItem]
+  );
+
+  return { value, setValue: updateValue };
+};

package/src/hooks/useShopifyUrlOperations.ts

@@ -0,0 +1,45 @@
+import { useCallback } from "react";
+import { useShopifyUrl } from "src/contexts/shopifyUrlContext";
+import { IdExtractor } from "src/contexts/types";
+
+export const useShopifyUrlOperations = () => {
+  const {
+    getTrimmedPathName,
+    getPlpOrPdpId,
+    isOnPdpPage,
+    isOnPlpPage,
+    isReady,
+  } = useShopifyUrl();
+
+  return {
+    getTrimmedPathName,
+    getPlpOrPdpId,
+    isOnPdpPage,
+    isOnPlpPage,
+    isReady,
+  };
+};
+
+export const useCurrentPageType = () => {
+  const { isOnPdpPage, isOnPlpPage, isReady } = useShopifyUrl();
+
+  const getPageType = useCallback(() => {
+    if (!isReady) return "unknown";
+    if (isOnPdpPage()) return "pdp";
+    if (isOnPlpPage()) return "plp";
+    return "other";
+  }, [isReady, isOnPdpPage, isOnPlpPage]);
+
+  return { getPageType, isReady };
+};
+
+export const useProductId = (extractor: IdExtractor) => {
+  const { getPlpOrPdpId, isReady } = useShopifyUrl();
+
+  const productId = useCallback(() => {
+    if (!isReady) return null;
+    return getPlpOrPdpId(extractor);
+  }, [isReady, getPlpOrPdpId, extractor]);
+
+  return { productId, isReady };
+};

package/src/hooks/useTrackComponentVisibleEvent.ts

@@ -1,7 +1,10 @@
-import { RefObject, useEffect, useRef } from 'react';
-import { SpiffyWidgets } from 'src/application/models/spiffyWidgets';
-import { useIntersection } from 'src/hooks/useIntersection';
-import { AmplitudeAdapter, SpiffyMetricsEventName } from 'src/adapters/amplitude';
+import { RefObject, useEffect, useRef } from "react";
+import { SpiffyWidgets } from "src/application/models/spiffyWidgets";
+import { useIntersection } from "src/hooks/useIntersection";
+import {
+  SpiffyMetricsEventName,
+  useAmplitude,
+} from "src/contexts/amplitudeContext";
 
 /**
  * Tracks a component and logs an event to Amplitude when the component is visible.
@@ -15,10 +18,11 @@ export const useTrackComponentVisibleEvent = (
   component: SpiffyWidgets,
   element: RefObject<HTMLElement>,
   eventProps?: Record<string, unknown>,
-  eventName: SpiffyMetricsEventName = SpiffyMetricsEventName.ChatComponentVisible,
+  eventName: SpiffyMetricsEventName = SpiffyMetricsEventName.ChatComponentVisible
 ) => {
-  const isVisible = useIntersection(element, '0px');
+  const isVisible = useIntersection(element, "0px");
   const hasTrackedEvent = useRef(false);
+  const { trackEvent } = useAmplitude();
 
   const componentProps = (() => {
     if (eventName === SpiffyMetricsEventName.ChatComponentVisible) {
@@ -42,11 +46,11 @@ export const useTrackComponentVisibleEvent = (
 
   useEffect(() => {
     if (isVisible && !hasTrackedEvent.current) {
-      AmplitudeAdapter.trackEvent({
+      trackEvent({
         eventName: eventName,
         eventProps: componentProps,
       });
       hasTrackedEvent.current = true;
     }
-  }, [isVisible, component, eventProps, eventName, componentProps]);
+  }, [isVisible, component, eventProps, eventName, componentProps, trackEvent]);
 };

package/src/hooks/useUpdateAnalyticsProps.ts

@@ -1,7 +1,13 @@
-import { useAtomValue } from 'jotai';
-import { useEffect, useRef } from 'react';
-import { AmplitudeAdapter, SpiffyMetricsEventName } from 'src/adapters/amplitude';
-import { hasParsedVariantInfoAtom, variantInfoAtom } from 'src/atoms/app/variant';
+import { useAtomValue } from "jotai";
+import { useEffect, useRef } from "react";
+import {
+  SpiffyMetricsEventName,
+  useAmplitude,
+} from "src/contexts/amplitudeContext";
+import {
+  hasParsedVariantInfoAtom,
+  variantInfoAtom,
+} from "src/atoms/app/variant";
 
 /**
  * Updates the default analytics properties whenever the variant info changes. This hook also
@@ -9,17 +15,16 @@ import { hasParsedVariantInfoAtom, variantInfoAtom } from 'src/atoms/app/variant
  */
 export const useUpdateAnalyticsProps = () => {
   const variantInfo = useAtomValue(variantInfoAtom);
-  const amplitudeAdapterRef = useRef<AmplitudeAdapter | null>(null);
   const hasInitialized = useRef(false);
   const hasParsedVariantInfo = useAtomValue(hasParsedVariantInfoAtom);
+  const { trackEvent, setSupplementalDefaultProps } = useAmplitude();
 
   useEffect(() => {
-    if (!amplitudeAdapterRef.current) {
-      amplitudeAdapterRef.current = AmplitudeAdapter.getSingletonInstanceOf();
-    }
-
     const variantInfoWithPrefix = Object.fromEntries(
-      Object.entries(variantInfo).map(([key, value]) => [`variantInfo.${key}`, value]),
+      Object.entries(variantInfo).map(([key, value]) => [
+        `variantInfo.${key}`,
+        value,
+      ])
     );
 
     const defaultEventProperties: Record<string, unknown> = {
@@ -28,29 +33,35 @@ export const useUpdateAnalyticsProps = () => {
     };
 
     // TODO: should be removed over time, after migration
-    if (variantInfo.variant === 'pdp') {
+    if (variantInfo.variant === "pdp") {
       defaultEventProperties.product_id = variantInfo.productId;
     }
 
     // TODO: should be removed over time, after migration
-    if (variantInfo.variant === 'plp') {
+    if (variantInfo.variant === "plp") {
       defaultEventProperties.plp_id = variantInfo.plpId;
     }
 
     // TODO: should be removed over time, after migration
-    if (variantInfo.variant === 'page_visit') {
-      defaultEventProperties.page_visit_category = variantInfo.pageVisitCategory;
+    if (variantInfo.variant === "page_visit") {
+      defaultEventProperties.page_visit_category =
+        variantInfo.pageVisitCategory;
       defaultEventProperties.page_visit_url = variantInfo.url;
     }
 
-    amplitudeAdapterRef.current?.setSupplementalDefaultProps(defaultEventProperties);
+    setSupplementalDefaultProps(defaultEventProperties);
 
     // put any events that should be sent once per page visit here
     if (!hasInitialized.current && hasParsedVariantInfo) {
-      AmplitudeAdapter.trackEvent({
+      trackEvent({
         eventName: SpiffyMetricsEventName.BundleLoaded,
       });
       hasInitialized.current = true;
     }
-  }, [variantInfo, hasParsedVariantInfo]);
+  }, [
+    variantInfo,
+    hasParsedVariantInfo,
+    trackEvent,
+    setSupplementalDefaultProps,
+  ]);
 };

package/src/interceptors/index.ts

@@ -1,3 +1,2 @@
 export * from "./types";
-export * from "./useFormEscalation";
 export * from "./useMessageInterceptor";

package/src/interceptors/useMessageInterceptor.ts

@@ -1,15 +1,12 @@
-import { FormType, ResponseCategory } from '@spiffy-ai/commerce-api-client';
-import { useMemo } from 'react';
-import { Response } from 'src/application/models';
-import { useFormEscalation } from './useFormEscalation';
-import { MessageInterceptor } from './types';
+import { FormType, ResponseCategory } from "@spiffy-ai/commerce-api-client";
+import { useMemo } from "react";
+import { Response } from "src/application/models";
+import { MessageInterceptor } from "./types";
 
 export const useMessageInterceptor = () => {
-  const formEscalation = useFormEscalation();
-
   const interceptorMap = useMemo(() => {
     const interceptors = new Map<FormType, MessageInterceptor>();
-    interceptors.set(FormType.Escalation, formEscalation);
+    // Form escalation interceptor removed as per user instruction
     return interceptors;
   }, []);