@envive-ai/react-hooks 0.3.3 → 0.3.5

package/src/hooks/ElementObserver/useElementObserver.ts

@@ -138,7 +138,7 @@ export const useElementObserver = (selector: NodeSelector): ElementObserverUtili
     event: K,
     fn: EventListenerOrEventListenerObject,
   ) => {
-    eoRef.current.registerEvent(event, fn);
+    eoRef.current?.registerEvent(event, fn);
   };
 
   /**
@@ -149,7 +149,7 @@ export const useElementObserver = (selector: NodeSelector): ElementObserverUtili
    */
   const render = (fn: () => ReactElement) => {
     if (!renderBlocked) {
-      return eoRef.current.render(fn);
+      return eoRef.current?.render(fn);
     }
     return undefined;
   };
@@ -159,7 +159,7 @@ export const useElementObserver = (selector: NodeSelector): ElementObserverUtili
    *
    * @returns
    */
-  const exists = () => !!eoRef.current.getNode();
+  const exists = () => !!eoRef.current?.getNode();
 
   /**
    * Checks if rendering is unblocked.
@@ -174,7 +174,7 @@ export const useElementObserver = (selector: NodeSelector): ElementObserverUtili
    * @param event
    */
   const fire = (event: MouseEventTypes) => {
-    eoRef.current.fire(event);
+    eoRef.current?.fire(event);
   };
 
   /**
@@ -182,14 +182,14 @@ export const useElementObserver = (selector: NodeSelector): ElementObserverUtili
    *
    * @returns
    */
-  const show = () => eoRef.current.show();
+  const show = () => eoRef.current?.show();
 
   /**
    * Hides the HTML element.
    *
    * @returns
    */
-  const hide = () => eoRef.current.hide();
+  const hide = () => eoRef.current?.hide();
 
   /**
    * Blocks the rendering of elements.
@@ -216,14 +216,14 @@ export const useElementObserver = (selector: NodeSelector): ElementObserverUtili
   };
 
   useEffect(() => {
-    eoRef.current.init();
-    eoRef.current.registerOnReset(() => setRenderBlocked(INITIAL_RENDER_STATE));
+    eoRef.current?.init();
+    eoRef.current?.registerOnReset(() => setRenderBlocked(INITIAL_RENDER_STATE));
     DOMObserver.observe();
     return () => DOMObserver.remove(selector);
   }, [selector.getPattern()]);
 
   return {
-    targetNode: eoRef.current.getNode(),
+    targetNode: eoRef.current?.getNode(),
     onChange,
     onAdd,
     onRemove,

package/src/hooks/GraphQLConfig/useGraphQLConfig.ts

@@ -1,6 +1,4 @@
-import { useAtom } from 'jotai';
 import { useCallback, useEffect, useState } from 'react';
-import { orgIdAtom } from 'src/atoms/org/graphqlConfig';
 import { GraphQlConfigValues, useGraphQLClient } from 'src/contexts/graphqlContext/graphqlContext';
 
 export const useColorsAndFrontendConfig = () => {
@@ -32,31 +30,34 @@ export const useColorsAndFrontendConfig = () => {
   return { data, loading, error, refetch: fetchConfig };
 };
 
-export const useOrgId = () => {
-  const { getOrgId, isReady } = useGraphQLClient();
-  const [orgId, setOrgId] = useAtom(orgIdAtom);
+export const useUIConfig = () => {
+  const { getConfig, isReady } = useGraphQLClient();
+  const [data, setData] = useState<GraphQlConfigValues>({});
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
-  useEffect(() => {
+  const fetchConfig = useCallback(async () => {
     if (!isReady) return;
+    if (loading) return;
+    if (Object.keys(data).length > 0) return;
 
-    const fetchOrgId = async () => {
-      setLoading(true);
-      setError(null);
+    setLoading(true);
+    setError(null);
 
-      try {
-        const id = await getOrgId();
-        setOrgId(id);
-      } catch (err) {
-        setError(err instanceof Error ? err : new Error('Unknown error'));
-      } finally {
-        setLoading(false);
-      }
-    };
+    try {
+      const result = await getConfig();
+      setData(result);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Unknown error'));
+    } finally {
+      setLoading(false);
+    }
+  }, [data, getConfig, isReady, loading]);
 
-    fetchOrgId();
-  }, [getOrgId, isReady, setOrgId]);
+  console.log('====== useUIConfig hook ======', isReady, loading, data, error);
+  useEffect(() => {
+    fetchConfig();
+  }, [fetchConfig]);
 
-  return { orgId, loading, error };
+  return { data, loading, error, refetch: fetchConfig };
 };

package/src/hooks/Search/__tests__/useSearch.test.tsx

@@ -7,7 +7,10 @@ import { EnviveConfigProvider } from 'src/contexts/enviveConfigContext/enviveCon
 import { LocalStorageProvider } from 'src/contexts/localStorageContext/localStorageContext';
 import { GraphQLProvider } from 'src/contexts/graphqlContext/graphqlContext';
 import { UserIdentityProvider } from 'src/contexts/userIdentityContext/userIdentityContext';
-import { FeatureFlagServiceProvider } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
+import {
+  FeatureFlagService,
+  FeatureFlagServiceProvider,
+} from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
 import { NewOrgConfigProvider } from 'src/contexts/newOrgConfigContext/newOrgConfigContext';
 import { SearchProvider } from 'src/contexts/searchContext/searchContext';
 import {
@@ -74,7 +77,7 @@ vi.mock('src/contexts/enviveConfigContext/enviveConfigContext', async () => {
 
 // Mock useColorsAndFrontendConfig
 vi.mock('src/hooks/GraphQLConfig/useGraphQLConfig', () => ({
-  useColorsAndFrontendConfig: vi.fn(() => ({
+  useUIConfig: vi.fn(() => ({
     data: {
       colorsConfig: { accentPrimary: '#FF0000' },
       frontendConfig: {
@@ -168,6 +171,9 @@ vi.mock('src/events', () => ({
   },
 }));
 
+// FeatureFlagService
+const testFeatureFlagService = new FeatureFlagService([]);
+
 const mockSearchData: SearchResult = {
   products: [
     {
@@ -393,7 +399,7 @@ const TestWrapper: React.FC<{
         <LocalStorageProvider>
           <GraphQLProvider>
             <UserIdentityProvider>
-              <FeatureFlagServiceProvider featureGates={[]}>
+              <FeatureFlagServiceProvider featureFlagService={testFeatureFlagService}>
                 <AmplitudeProvider>
                   <NewOrgConfigProvider>
                     <SearchProvider>
@@ -405,9 +411,12 @@ const TestWrapper: React.FC<{
                         sorting={sorting}
                         isFilterOpen={isFilterOpen}
                       />
-                      {React.cloneElement(children as React.ReactElement, {
-                        allowRedirect,
-                      })}
+                      {React.cloneElement(
+                        children as React.ReactElement<{ allowRedirect?: boolean }>,
+                        {
+                          allowRedirect,
+                        },
+                      )}
                     </SearchProvider>
                   </NewOrgConfigProvider>
                 </AmplitudeProvider>

package/src/hooks/Search/useSearch.tsx

@@ -1,5 +1,5 @@
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import {
   SelectedFilterOption,
@@ -28,7 +28,7 @@ import { SearchResult } from 'src/application/models/api/search';
 import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
 import { SearchFilterDatum, SelectFilterItem } from 'src/types/search-filter-types';
 import { orgShortNameAtom } from 'src/atoms/envive/enviveConfig';
-import { SearchResponseProductAttributes } from 'src/application/models';
+import { FrontendConfig, SearchResponseProductAttributes } from 'src/application/models';
 import { SearchResultsState, getSearchResultsState } from '../utils';
 import { useTrackComponentVisibleEvent } from '../TrackComponentVisibleEvent';
 import { useSearchInput } from './useSearchInput';
@@ -147,7 +147,8 @@ export const useSearch = ({
   const dynamicFilters = searchData?.filters || [];
 
   // Provide fallback values when orgUIConfig is not yet available
-  const safeProductCardConfig = config?.frontendConfig?.uiConfigs?.productCardConfig || {
+  const safeProductCardConfig = (config?.frontendConfig as FrontendConfig)?.uiConfigs
+    ?.productCardConfig || {
     variant: 'minimal',
     hoverVariant: 'none',
     layoutVariant: 'square',
@@ -296,7 +297,7 @@ export const useSearch = ({
   // Side Effects
   useTrackComponentVisibleEvent(
     SpiffyWidgets.SearchResults,
-    searchResultsRef,
+    searchResultsRef as RefObject<HTMLElement>,
     {},
     SpiffyMetricsEventName.SearchComponentVisible,
   );
@@ -360,6 +361,6 @@ export const useSearch = ({
     onClearAllFilters: handleClearAllFilters,
     setIsFilterOpen,
     resetSearch,
-    searchResultsRef,
+    searchResultsRef: searchResultsRef as RefObject<HTMLDivElement>,
   };
 };

package/src/merchants/domInsertion.ts

@@ -9,20 +9,4 @@ enum DOMInsertionType {
   NONE = 'none',
 }
 
-export const DOMInsertionTypeToInsertPosition = (type: DOMInsertionType): InsertPosition => {
-  switch (type) {
-    case DOMInsertionType.ADJACENT_AFTER_BEGIN:
-      return 'afterbegin';
-    case DOMInsertionType.BEFORE:
-    case DOMInsertionType.ADJACENT_BEFORE_BEGIN:
-      return 'beforebegin';
-    case DOMInsertionType.ADJACENT_BEFORE_END:
-      return 'beforeend';
-    case DOMInsertionType.AFTER:
-    case DOMInsertionType.ADJACENT_AFTER_END:
-    default:
-      return 'afterend';
-  }
-};
-
 export { DOMInsertionType };