@envive-ai/react-hooks 0.3.58 → 0.3.60

package/src/application/models/graphql/queries/getWidgetConfigQuery.ts

@@ -1,29 +1,50 @@
-// Statsig-experiment-aware unified config endpoint. Used when the
-// `use_unified_config` feature gate is on. Selects productsConfig plus
-// the resolution metadata pymono used to pick the version — the client
-// threads `resolution.base_version` into downstream inference requests
-// so they're scoped to the same version that produced the widgets the
-// user is rendering. Gates and experiment assignments still come from
-// REST /v1/org/config so AmplitudeService can read them synchronously
-// before this query resolves. Once the migration completes this query
-// will replace getColorsAndFrontendQuery entirely.
+// Statsig-experiment-aware unified config endpoint — the single source of
+// session config. Returns productsConfig, the resolution metadata pymono used
+// to pick the version (the client threads `resolution.baseVersion` into
+// downstream inference requests so they're scoped to the version that produced
+// the rendered widgets), AND the org identity + feature gates + experiment
+// assignments that used to come from REST `/v1/org/config`. Pulling all of it
+// here lets the client drop the separate org/config call.
 //
 // userId is required by the schema (String!) and feeds Statsig layer
-// resolution server-side.
+// resolution server-side. source feeds Statsig user properties.
+//
+// gateNames selects which feature gates to evaluate and return — pass the same
+// list the app checks (the `FeatureGates` enum values); the resolver returns an
+// empty `gates` list when none are requested.
 //
 // version is optional; when omitted (no `spiffy_config_version` /
 // `envive_config_version` URL param) the resolver uses Statsig bucketing.
-// When set, it bypasses Statsig and pins to that exact version — same
-// debug/rollback affordance the legacy getColorsAndFrontendQuery offered.
+// When set, it bypasses the merchant experiment and pins to that exact version
+// (empty experimentAssignments) — the QA / rollback affordance.
 export const getWidgetConfigQuery = () => `
-  query($userId: String!, $version: String) {
+  query($userId: String!, $version: String, $gateNames: [String!], $source: String) {
     me {
-      getWidgetConfig(userId: $userId, version: $version) {
+      org {
+        id
+        shortName
+        displayName
+        domain
+        createdAt
+        updatedAt
+      }
+      getWidgetConfig(userId: $userId, version: $version, gateNames: $gateNames, source: $source) {
         productsConfig {
           frontend { values }
           colors { values }
           v_three_config { values }
         }
+        gates {
+          name
+          value
+          groupName
+        }
+        experimentAssignments {
+          layerName
+          namespace
+          allocatedExperimentName
+          groupName
+        }
         resolution {
           baseVersion
           baseVersionSource

package/src/application/models/index.ts

@@ -35,7 +35,6 @@ export * from './api/userEvent';
 // graphql
 export * from './graphql';
 export * from './graphql/queries/getMerchantColorsQuery';
-export * from './graphql/queries/getMerchantFrontendConfigQuery';
 export * from './graphql/queries/getMerchantOrgIdQuery';
 
 // type guards

package/src/contexts/pageContext/__tests__/pageContext.test.tsx

@@ -4,14 +4,13 @@ import { Provider, useAtom } from 'jotai';
 import React from 'react';
 import CommerceApiClient from 'src/application/commerce-api';
 import Logger from 'src/application/logging/logger';
-import { VariantTypeEnum } from 'src/application/models';
+import { FeatureGates, VariantTypeEnum } from 'src/application/models';
 import {
   UrlResolverResponse,
   pageUserEventAtom,
   pageVariantInfoAtom,
   urlResolverAtom,
 } from 'src/atoms/app/variant';
-import { FeatureGates } from 'src/application/models';
 import {
   FeatureFlagService,
   FeatureFlagServiceProvider,

package/src/contexts/pageContext/pageContext.tsx

@@ -17,12 +17,11 @@ import {
   variantInfoAtom,
 } from 'src/atoms/app/variant';
 import { useAtom, useAtomValue } from 'jotai';
-import { FeatureGates } from 'src/application/models';
+import { FeatureGates, VariantTypeEnum } from 'src/application/models';
 import { FeatureFlagServiceContext } from 'src/contexts/featureFlagServiceContext';
 import CommerceApiClient from 'src/application/commerce-api';
 import Logger from 'src/application/logging/logger';
 import { PageVisitCategory, UserEventCategory } from '@spiffy-ai/commerce-api-client';
-import { VariantTypeEnum } from 'src/application/models';
 import { EnviveMetricsEventName, useAmplitude } from 'src/contexts/amplitudeContext';
 import { mapApiUserEventToUserEvent, mapUrlResolverResponseToVariantInfo } from './mapping';
 import { PageDetails } from './types';

package/src/contexts/typesV3.ts

@@ -407,6 +407,13 @@ interface FullPageSalesAgentWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3
   chatBackgroundColor?: string;
   suggestionButtonType?: PromptButtonVariant;
   productCarouselLayout?: ProductCarouselLayoutV3;
+  /**
+   * When true (or unset), asking a question opens the conversation in a
+   * partial-height sheet that keeps the welcome overlay's product grid
+   * visible above it. Set to false to fall back to the full-screen takeover.
+   * Default true (undefined and true = partial view enabled).
+   */
+  partialViewEnabled?: boolean;
 }
 
 type WidgetConfigV3 =

package/src/contexts/widgetConfigContext/__tests__/widgetConfigContext.test.tsx

@@ -315,6 +315,58 @@ describe('WidgetConfigProvider', () => {
   });
 
   describe('isLoading State', () => {
+    it('resets isLoading after the fake-widget-config-id path (FloatingChat sentinel)', async () => {
+      // FloatingChat calls getWidgetConfig with this sentinel id on every page. The early
+      // return used to skip resetting the shared loading flag, leaving every not-yet-settled
+      // widget on the page stuck in its loading state.
+      const TestComponent: React.FC = () => {
+        const { getWidgetConfig, isLoading } = useWidgetConfig();
+        const [done, setDone] = React.useState(false);
+
+        const handleGetConfig = async () => {
+          await getWidgetConfig({
+            widgetType: WidgetTypeV3.FloatingChatV3,
+            widgetConfigId: 'fake-widget-config-id',
+          });
+          setDone(true);
+        };
+
+        return (
+          <div>
+            <div data-testid="is-loading">{isLoading.toString()}</div>
+            <div data-testid="done">{done.toString()}</div>
+            <button
+              data-testid="get-config-btn"
+              type="button"
+              onClick={handleGetConfig}
+            >
+              Get Config
+            </button>
+          </div>
+        );
+      };
+
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: { widgetConfigs: {} },
+            loading: false,
+          }}
+        >
+          <TestComponent />
+        </TestWrapper>,
+      );
+
+      await act(async () => {
+        screen.getByTestId('get-config-btn').click();
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('done')).toHaveTextContent('true');
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+      });
+    });
+
     it('should be true when frontend config is loading', async () => {
       render(
         <TestWrapper

package/src/contexts/widgetConfigContext/widgetConfigContext.tsx

@@ -23,53 +23,56 @@ export const WidgetConfigProvider: React.FC<{ children: ReactNode }> = ({ childr
 
   const getWidgetConfig = useCallback(
     async (request: WidgetConfigRequest): Promise<WidgetConfigV3> => {
+      // `isLoadingWidgetConfig` is provider-level state shared by every widget on the page,
+      // so it must be reset on EVERY exit path — the finally guarantees that. A leaked
+      // `true` (the fake-widget-config-id return used to skip the reset) kept all
+      // not-yet-settled widgets stuck rendering their loading state.
       setIsLoadingWidgetConfig(true);
-      logger.logDebug('retrieving widget config', {
-        widgetConfigId: request.widgetConfigId,
-        widgetType: request.widgetType,
-      });
-      if (isFrontendConfigLoading) {
-        setIsLoadingWidgetConfig(false);
-        throw new Error('Frontend config is loading');
-      }
+      try {
+        logger.logDebug('retrieving widget config', {
+          widgetConfigId: request.widgetConfigId,
+          widgetType: request.widgetType,
+        });
+        if (isFrontendConfigLoading) {
+          throw new Error('Frontend config is loading');
+        }
 
-      const { widgetConfigId, widgetType } = request;
-      const response = frontendConfig?.widgetConfigs?.[widgetConfigId];
-      logger.logDebug('returning widget config response', response);
+        const { widgetConfigId, widgetType } = request;
+        const response = frontendConfig?.widgetConfigs?.[widgetConfigId];
+        logger.logDebug('returning widget config response', response);
 
-      if (widgetConfigId === 'fake-widget-config-id') {
-        return {} as WidgetConfigV3;
-      }
+        if (widgetConfigId === 'fake-widget-config-id') {
+          return {} as WidgetConfigV3;
+        }
 
-      if (
-        [
-          WidgetTypeV3.SocialProofV3,
-          WidgetTypeV3.ChatPreviewV3,
-          WidgetTypeV3.ChatPreviewComparisonV3,
-          WidgetTypeV3.ChatPreviewLoadingV3,
-        ].includes(widgetType)
-      ) {
-        if (response?.type !== WidgetTypeV3.SocialProofV3) {
-          setIsLoadingWidgetConfig(false);
+        if (
+          [
+            WidgetTypeV3.SocialProofV3,
+            WidgetTypeV3.ChatPreviewV3,
+            WidgetTypeV3.ChatPreviewComparisonV3,
+            WidgetTypeV3.ChatPreviewLoadingV3,
+          ].includes(widgetType)
+        ) {
+          if (response?.type !== WidgetTypeV3.SocialProofV3) {
+            throw new Error(
+              `Widget type: ${widgetType} does not match widget config type: ${response?.type}`,
+            );
+          }
+        } else if (response?.type !== widgetType) {
           throw new Error(
             `Widget type: ${widgetType} does not match widget config type: ${response?.type}`,
           );
         }
-      } else if (response?.type !== widgetType) {
-        setIsLoadingWidgetConfig(false);
-        throw new Error(
-          `Widget type: ${widgetType} does not match widget config type: ${response?.type}`,
-        );
-      }
 
-      if (!response) {
+        if (!response) {
+          throw new Error(
+            `No widget config response found for widget type: ${request.widgetType} and widget config id: ${request.widgetConfigId}`,
+          );
+        }
+        return response;
+      } finally {
         setIsLoadingWidgetConfig(false);
-        throw new Error(
-          `No widget config response found for widget type: ${request.widgetType} and widget config id: ${request.widgetConfigId}`,
-        );
       }
-      setIsLoadingWidgetConfig(false);
-      return response;
     },
     [frontendConfig, isFrontendConfigLoading],
   );

package/src/hooks/Intersection/__tests__/useIntersection.test.ts

@@ -0,0 +1,134 @@
+import { act, renderHook } from '@testing-library/react';
+import { RefObject } from 'react';
+import { useIntersection } from '../useIntersection';
+
+class MockIntersectionObserver {
+  static instances: MockIntersectionObserver[] = [];
+
+  observedTargets: Element[] = [];
+
+  disconnected = false;
+
+  private callback: IntersectionObserverCallback;
+
+  constructor(callback: IntersectionObserverCallback) {
+    this.callback = callback;
+    MockIntersectionObserver.instances.push(this);
+  }
+
+  observe(target: Element) {
+    this.observedTargets.push(target);
+  }
+
+  disconnect() {
+    this.disconnected = true;
+  }
+
+  unobserve() {}
+
+  fire(isIntersecting: boolean, target: Element) {
+    this.callback(
+      [
+        {
+          isIntersecting,
+          intersectionRatio: isIntersecting ? 1 : 0,
+          boundingClientRect: {} as DOMRectReadOnly,
+          target,
+        } as IntersectionObserverEntry,
+      ],
+      this as unknown as IntersectionObserver,
+    );
+  }
+}
+
+const lastObserver = () =>
+  MockIntersectionObserver.instances[MockIntersectionObserver.instances.length - 1];
+
+describe('useIntersection', () => {
+  beforeEach(() => {
+    MockIntersectionObserver.instances = [];
+    vi.stubGlobal('IntersectionObserver', MockIntersectionObserver);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('observes the node and reports visibility when the observer fires', () => {
+    const node = document.createElement('span');
+    const ref: RefObject<HTMLElement> = { current: node };
+
+    const { result } = renderHook(() => useIntersection(ref, '0px'));
+
+    expect(MockIntersectionObserver.instances).toHaveLength(1);
+    expect(lastObserver().observedTargets).toEqual([node]);
+    expect(result.current).toBe(false);
+
+    act(() => {
+      lastObserver().fire(true, node);
+    });
+    expect(result.current).toBe(true);
+  });
+
+  it('attaches late when the ref starts out null', () => {
+    const ref = { current: null as HTMLElement | null };
+
+    const { rerender } = renderHook(() => useIntersection(ref as RefObject<HTMLElement>, '0px'));
+    expect(MockIntersectionObserver.instances).toHaveLength(0);
+
+    const node = document.createElement('span');
+    ref.current = node;
+    rerender();
+
+    expect(MockIntersectionObserver.instances).toHaveLength(1);
+    expect(lastObserver().observedTargets).toEqual([node]);
+  });
+
+  it('does not re-attach across rerenders while the node is unchanged', () => {
+    const node = document.createElement('span');
+    const ref: RefObject<HTMLElement> = { current: node };
+
+    const { rerender } = renderHook(() => useIntersection(ref, '0px'));
+    rerender();
+    rerender();
+
+    expect(MockIntersectionObserver.instances).toHaveLength(1);
+    expect(lastObserver().observedTargets).toEqual([node]);
+  });
+
+  it('re-attaches to the new node when the node under the ref is replaced', () => {
+    // Mount churn (e.g. a portal re-creating the widget subtree) can swap the DOM node
+    // while the hook instance survives. The old implementation kept observing the detached
+    // node forever, so the widget read as permanently not-visible and never fetched.
+    const nodeA = document.createElement('span');
+    const ref: RefObject<HTMLElement> = { current: nodeA };
+
+    const { result, rerender } = renderHook(() => useIntersection(ref, '0px'));
+    const firstObserver = lastObserver();
+    expect(firstObserver.observedTargets).toEqual([nodeA]);
+
+    const nodeB = document.createElement('span');
+    (ref as { current: HTMLElement | null }).current = nodeB;
+    rerender();
+
+    expect(firstObserver.disconnected).toBe(true);
+    expect(MockIntersectionObserver.instances).toHaveLength(2);
+    expect(lastObserver().observedTargets).toEqual([nodeB]);
+
+    // Visibility of the replacement node is now detected
+    act(() => {
+      lastObserver().fire(true, nodeB);
+    });
+    expect(result.current).toBe(true);
+  });
+
+  it('disconnects the observer on unmount', () => {
+    const node = document.createElement('span');
+    const ref: RefObject<HTMLElement> = { current: node };
+
+    const { unmount } = renderHook(() => useIntersection(ref, '0px'));
+    unmount();
+
+    expect(lastObserver().disconnected).toBe(true);
+  });
+});

package/src/hooks/Intersection/useIntersection.ts

@@ -7,23 +7,37 @@ const logger = new Logger('useIntersection');
 export const useIntersection = (element: RefObject<HTMLElement>, rootMargin: string) => {
   const [isVisible, setIsVisible] = useState(false);
   const observerRef = useRef<IntersectionObserver | null>(null);
+  const observedNodeRef = useRef<HTMLElement | null>(null);
 
-  // Runs after every render so it catches when element.current transitions from null
-  // to a mounted DOM node (e.g. when a conditionally-rendered element first appears).
-  // Bails immediately once the observer is attached, keeping per-render cost O(1).
+  // Runs after every render so it catches when element.current transitions from null to a
+  // mounted DOM node, AND when the node under the ref is replaced. The replacement case is
+  // load-bearing: mount churn (e.g. the shadow-root portal re-creating the widget subtree)
+  // can swap the DOM node while this hook instance survives, and an observer left on the
+  // detached old node never fires again — the widget then reads as permanently not-visible
+  // and never starts loading. Bails once the current node is the one being observed,
+  // keeping per-render cost O(1).
   useEffect(() => {
     const current = element?.current;
     logger.logDebug('effect ran', {
       elementCurrent: current,
       rootMargin,
       alreadyObserving: !!observerRef.current,
+      observingCurrentNode: observedNodeRef.current === current,
     });
 
     if (!current) {
       logger.logDebug('element.current is null — observer NOT attached');
       return;
     }
-    if (observerRef.current) return; // already observing
+    if (observedNodeRef.current === current) return; // already observing this exact node
+
+    if (observerRef.current) {
+      logger.logDebug('observed node was replaced — re-attaching observer', {
+        previousNode: observedNodeRef.current,
+        newNode: current,
+      });
+      observerRef.current.disconnect();
+    }
 
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -40,6 +54,7 @@ export const useIntersection = (element: RefObject<HTMLElement>, rootMargin: str
 
     observer.observe(current);
     observerRef.current = observer;
+    observedNodeRef.current = current;
     logger.logDebug('observer attached to element', current);
   });
 
@@ -48,6 +63,7 @@ export const useIntersection = (element: RefObject<HTMLElement>, rootMargin: str
     return () => {
       observerRef.current?.disconnect();
       observerRef.current = null;
+      observedNodeRef.current = null;
     };
   }, []);