@envive-ai/react-hooks 0.3.39 → 0.3.41

package/src/hooks/FocusTrap/__tests__/useFocusTrap.test.tsx

@@ -0,0 +1,236 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { useFocusTrap } from '../useFocusTrap';
+
+const TestDialog = ({ enabled }: { enabled: boolean }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useFocusTrap(ref, enabled);
+  return enabled ? (
+    <div
+      ref={ref}
+      data-testid="dialog"
+      role="dialog"
+    >
+      <button
+        type="button"
+        data-testid="close"
+      >
+        Close
+      </button>
+      <input data-testid="input" />
+      <button
+        type="button"
+        data-testid="action"
+      >
+        Action
+      </button>
+    </div>
+  ) : null;
+};
+
+const LazyContentDialog = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [loaded, setLoaded] = useState(false);
+  useFocusTrap(ref, true);
+  return (
+    <div>
+      <button
+        type="button"
+        data-testid="load"
+        onClick={() => setLoaded(true)}
+      >
+        Load
+      </button>
+      <div
+        ref={ref}
+        data-testid="dialog"
+        role="dialog"
+      >
+        {loaded && (
+          <>
+            <button
+              type="button"
+              data-testid="close"
+            >
+              Close
+            </button>
+            <button
+              type="button"
+              data-testid="action"
+            >
+              Action
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+describe('useFocusTrap', () => {
+  it('moves focus to the first focusable element inside the container when enabled', () => {
+    render(<TestDialog enabled />);
+    expect(screen.getByTestId('close')).toHaveFocus();
+  });
+
+  it('does nothing while disabled', () => {
+    const { container } = render(
+      <>
+        <button
+          type="button"
+          data-testid="outside"
+        >
+          Outside
+        </button>
+        <TestDialog enabled={false} />
+      </>,
+    );
+    const outside = screen.getByTestId('outside');
+    outside.focus();
+    expect(outside).toHaveFocus();
+    expect(container.querySelector('[data-testid="dialog"]')).toBeNull();
+  });
+
+  it('wraps Tab from the last focusable back to the first', async () => {
+    const user = userEvent.setup();
+    render(<TestDialog enabled />);
+    const close = screen.getByTestId('close');
+    const action = screen.getByTestId('action');
+
+    expect(close).toHaveFocus();
+    action.focus();
+    expect(action).toHaveFocus();
+
+    await user.tab();
+    expect(close).toHaveFocus();
+  });
+
+  it('wraps Shift+Tab from the first focusable back to the last', async () => {
+    const user = userEvent.setup();
+    render(<TestDialog enabled />);
+    const close = screen.getByTestId('close');
+    const action = screen.getByTestId('action');
+
+    expect(close).toHaveFocus();
+
+    await user.tab({ shift: true });
+    expect(action).toHaveFocus();
+  });
+
+  it('restores focus to the previously focused element on disable', () => {
+    const Wrapper = () => {
+      const [open, setOpen] = useState(false);
+      return (
+        <div>
+          <button
+            type="button"
+            data-testid="trigger"
+            onClick={() => setOpen(true)}
+          >
+            Open
+          </button>
+          {open && (
+            <button
+              type="button"
+              data-testid="programmatic-close"
+              onClick={() => setOpen(false)}
+            >
+              Programmatic close
+            </button>
+          )}
+          <TestDialog enabled={open} />
+        </div>
+      );
+    };
+    render(<Wrapper />);
+    const trigger = screen.getByTestId('trigger');
+    trigger.focus();
+    expect(trigger).toHaveFocus();
+
+    act(() => {
+      trigger.click();
+    });
+    expect(screen.getByTestId('close')).toHaveFocus();
+
+    act(() => {
+      screen.getByTestId('programmatic-close').click();
+    });
+    expect(trigger).toHaveFocus();
+  });
+
+  it('waits for lazy content and focuses the first focusable when it appears', async () => {
+    render(<LazyContentDialog />);
+    const load = screen.getByTestId('load');
+    expect(load).not.toHaveFocus();
+
+    await act(async () => {
+      load.click();
+    });
+
+    expect(screen.getByTestId('close')).toHaveFocus();
+  });
+
+  it('keeps focus moving freely inside the trap when the container lives in a shadow root', () => {
+    // Build the host + shadow root manually so we can mount our React tree inside it.
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const shadow = host.attachShadow({ mode: 'open' });
+    const mountPoint = document.createElement('div');
+    shadow.appendChild(mountPoint);
+
+    const ShadowDialog = () => {
+      const ref = useRef<HTMLDivElement>(null);
+      useFocusTrap(ref, true);
+      return (
+        <div
+          ref={ref}
+          data-testid="shadow-dialog"
+        >
+          <button
+            type="button"
+            data-testid="shadow-close"
+          >
+            Close
+          </button>
+          <button
+            type="button"
+            data-testid="shadow-action"
+          >
+            Action
+          </button>
+        </div>
+      );
+    };
+
+    // Render React into the shadow root mount point via createRoot to make sure
+    // we are exercising the shadow-DOM-aware code paths.
+    const reactRoot = createRoot(mountPoint);
+    act(() => {
+      reactRoot.render(<ShadowDialog />);
+    });
+
+    const close = shadow.querySelector('[data-testid="shadow-close"]') as HTMLButtonElement;
+    const action = shadow.querySelector('[data-testid="shadow-action"]') as HTMLButtonElement;
+    expect(shadow.activeElement).toBe(close);
+
+    // Manually move focus to the action button (mimicking a Tab away from first)
+    // and dispatch a non-shift Tab. The handler should NOT preventDefault because
+    // the active element is inside the container (verified via shadow root).
+    action.focus();
+    expect(shadow.activeElement).toBe(action);
+
+    const evt = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true });
+    act(() => {
+      action.dispatchEvent(evt);
+    });
+    // Since action is `last`, the trap wraps focus back to `close`.
+    expect(shadow.activeElement).toBe(close);
+
+    act(() => {
+      reactRoot.unmount();
+    });
+    host.remove();
+  });
+});

package/src/hooks/FocusTrap/index.ts

@@ -0,0 +1 @@
+export * from './useFocusTrap';

package/src/hooks/FocusTrap/useFocusTrap.ts

@@ -0,0 +1,125 @@
+import { RefObject, useEffect } from 'react';
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'textarea:not([disabled])',
+  'select:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+const isElementVisible = (el: HTMLElement): boolean => {
+  if (el.hasAttribute('hidden')) return false;
+  if (typeof window === 'undefined') return true;
+  const style = window.getComputedStyle(el);
+  return style.display !== 'none' && style.visibility !== 'hidden';
+};
+
+const getFocusableElements = (container: HTMLElement): HTMLElement[] =>
+  Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(isElementVisible);
+
+/**
+ * Returns the deepest active element across (possibly nested) shadow roots,
+ * starting from the document. Plain `document.activeElement` returns the shadow
+ * host when focus is inside an open shadow root, so we recurse into shadowRoot
+ * to find the truly focused element.
+ */
+const getDeepActiveElement = (): HTMLElement | null => {
+  if (typeof document === 'undefined') return null;
+  let active = document.activeElement as HTMLElement | null;
+  while (active && active.shadowRoot && active.shadowRoot.activeElement) {
+    active = active.shadowRoot.activeElement as HTMLElement;
+  }
+  return active;
+};
+
+/**
+ * Trap keyboard focus inside `containerRef` while `enabled` is true.
+ *
+ * On enable: moves focus to the first focusable element inside the container.
+ * If the container is empty (e.g. lazy-loaded content), waits for DOM mutations
+ * and focuses the first focusable as soon as it appears.
+ *
+ * While enabled: Tab and Shift+Tab wrap around so focus stays inside.
+ *
+ * On disable: restores focus to the previously focused element if it is still
+ * present in the document.
+ */
+export const useFocusTrap = (containerRef: RefObject<HTMLElement | null>, enabled: boolean) => {
+  useEffect(() => {
+    if (!enabled || typeof document === 'undefined') return undefined;
+
+    const container = containerRef.current;
+    if (!container) return undefined;
+
+    // The container may live inside a Shadow DOM (the injection bundle hosts
+    // the chat that way). Use the container's root so containment checks and
+    // active-element lookups work both in the light DOM and inside shadow roots.
+    const root = container.getRootNode() as Document | ShadowRoot;
+    const previouslyFocused = getDeepActiveElement();
+
+    const getActiveElement = (): HTMLElement | null => root.activeElement as HTMLElement | null;
+
+    const focusFirst = (): boolean => {
+      const focusables = getFocusableElements(container);
+      const first = focusables[0];
+      if (first) {
+        first.focus();
+        return true;
+      }
+      return false;
+    };
+
+    let observer: MutationObserver | null = null;
+    if (!focusFirst()) {
+      observer = new MutationObserver(() => {
+        if (focusFirst()) {
+          observer?.disconnect();
+          observer = null;
+        }
+      });
+      observer.observe(container, { childList: true, subtree: true });
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return;
+
+      const focusables = getFocusableElements(container);
+      if (focusables.length === 0) {
+        e.preventDefault();
+        return;
+      }
+
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = getActiveElement();
+      const isInsideContainer = active ? container.contains(active) : false;
+
+      if (e.shiftKey) {
+        if (active === first || !isInsideContainer) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (active === last || !isInsideContainer) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+
+    container.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      observer?.disconnect();
+      container.removeEventListener('keydown', handleKeyDown);
+
+      if (
+        previouslyFocused &&
+        typeof previouslyFocused.focus === 'function' &&
+        previouslyFocused.isConnected
+      ) {
+        previouslyFocused.focus();
+      }
+    };
+  }, [enabled, containerRef]);
+};

package/src/services/amplitudeService/__tests__/amplitudeService.test.ts

@@ -698,4 +698,99 @@ describe('AmplitudeService', () => {
       });
     });
   });
+
+  describe('Experiment-assignment props', () => {
+    it('emits experiment.{ns}.* keys as null when no assignments are configured', async () => {
+      const service = createService();
+      await service.trackEvent({
+        eventName: SpiffyMetricsEventName.ChatUserMessageInput,
+        eventProps: {},
+      });
+      const props = mockTrack.mock.calls[0]?.[1] ?? {};
+      expect(props['experiment.ml.layer_name']).toBeNull();
+      expect(props['experiment.ml.experiment_name']).toBeNull();
+      expect(props['experiment.ml.group_name']).toBeNull();
+      expect(props['experiment.ml.rule_id']).toBeNull();
+      expect(props['experiment.merchant.layer_name']).toBeNull();
+      expect(props['experiment.merchant.experiment_name']).toBeNull();
+      expect(props['experiment.merchant.group_name']).toBeNull();
+      expect(props['experiment.merchant.rule_id']).toBeNull();
+    });
+
+    it('populates experiment.{ns}.* keys when assignments are passed at construction', async () => {
+      const service = createService({
+        experimentAssignments: [
+          {
+            layer_name: 'ml_test_store',
+            namespace: 'ml',
+            allocated_experiment_name: 'automated_testing_ml_experiment',
+            group_name: 'ML Config Variation',
+          },
+          {
+            layer_name: 'merchant_test_store',
+            namespace: 'merchant',
+            allocated_experiment_name: 'automated_testing_merchant_experiment',
+            group_name: 'Merchant Config Variation',
+          },
+        ],
+      });
+      await service.trackEvent({
+        eventName: SpiffyMetricsEventName.ChatUserMessageInput,
+        eventProps: {},
+      });
+      const props = mockTrack.mock.calls[0]?.[1] ?? {};
+      expect(props['experiment.ml.layer_name']).toBe('ml_test_store');
+      expect(props['experiment.ml.experiment_name']).toBe('automated_testing_ml_experiment');
+      expect(props['experiment.ml.group_name']).toBe('ML Config Variation');
+      expect(props['experiment.merchant.layer_name']).toBe('merchant_test_store');
+      expect(props['experiment.merchant.experiment_name']).toBe(
+        'automated_testing_merchant_experiment',
+      );
+      expect(props['experiment.merchant.group_name']).toBe('Merchant Config Variation');
+      // rule_id reserved — backend doesn't surface it.
+      expect(props['experiment.ml.rule_id']).toBeNull();
+      expect(props['experiment.merchant.rule_id']).toBeNull();
+    });
+
+    it('emits the unassigned namespace as null when only one is assigned', async () => {
+      const service = createService({
+        experimentAssignments: [
+          {
+            layer_name: 'ml_test_store',
+            namespace: 'ml',
+            allocated_experiment_name: 'ml_only',
+            group_name: 'ML Only',
+          },
+        ],
+      });
+      await service.trackEvent({
+        eventName: SpiffyMetricsEventName.ChatUserMessageInput,
+        eventProps: {},
+      });
+      const props = mockTrack.mock.calls[0]?.[1] ?? {};
+      expect(props['experiment.ml.layer_name']).toBe('ml_test_store');
+      expect(props['experiment.merchant.layer_name']).toBeNull();
+    });
+
+    it('drops malformed assignments missing layer_name or namespace', async () => {
+      const service = createService({
+        experimentAssignments: [
+          // Missing layer_name → dropped silently. (Belt-and-braces: pymono's
+          // tests enforce the wire shape, but if a field ever goes null we'd
+          // rather emit `null` props than crash.)
+          {
+            namespace: 'ml',
+            allocated_experiment_name: 'orphan',
+          },
+        ],
+      });
+      await service.trackEvent({
+        eventName: SpiffyMetricsEventName.ChatUserMessageInput,
+        eventProps: {},
+      });
+      const props = mockTrack.mock.calls[0]?.[1] ?? {};
+      expect(props['experiment.ml.layer_name']).toBeNull();
+      expect(props['experiment.ml.experiment_name']).toBeNull();
+    });
+  });
 });

package/src/services/amplitudeService/amplitudeService.ts

@@ -11,6 +11,7 @@ import type {
 import { FeatureFlagService } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
 import { WidgetTypeV3 } from 'src/contexts/typesV3';
 import { ChatElementDisplayLocationV3 } from 'src/application/models/chatElementDisplayLocationV3';
+import { ExperimentNamespace, OrgConfigExperimentAssignment } from 'src/application/models';
 import { projectToGA4 } from '../ga4ProjectionService/ga4ProjectionService';
 import { EnviveMetricsEventName, SpiffyMetricsEventName } from './eventNames';
 
@@ -39,8 +40,37 @@ export interface AmplitudeServiceConfig {
   enviveOn: boolean;
   enabledFeatures?: Record<string, boolean>;
   getLocalStorageItem: null | ((key: string) => string | null);
+  // Captured at construction. Drives `experiment.{ns}.*` event-property
+  // enrichment. Sourced from /v1/org/config when the `use_unified_config`
+  // gate is on; otherwise omitted (props emit as null).
+  experimentAssignments?: OrgConfigExperimentAssignment[];
 }
 
+// Namespaces emitted on every event with constant keys, so the BigQuery
+// schema is stable regardless of which (if any) experiment is running.
+// Currently `ml` + `merchant`; matches `ExperimentNamespace`.
+const EXPERIMENT_NAMESPACES: ExperimentNamespace[] = ['ml', 'merchant'];
+
+const buildExperimentProps = (
+  assignments: OrgConfigExperimentAssignment[] | undefined,
+): Record<string, unknown> => {
+  const byNamespace = new Map<ExperimentNamespace, OrgConfigExperimentAssignment>();
+  (assignments ?? []).forEach(a => {
+    if (a.layer_name != null && a.namespace != null) {
+      byNamespace.set(a.namespace, a);
+    }
+  });
+  return EXPERIMENT_NAMESPACES.reduce<Record<string, unknown>>((acc, ns) => {
+    const a = byNamespace.get(ns);
+    acc[`experiment.${ns}.layer_name`] = a?.layer_name ?? null;
+    acc[`experiment.${ns}.experiment_name`] = a?.allocated_experiment_name ?? null;
+    acc[`experiment.${ns}.group_name`] = a?.group_name ?? null;
+    // `rule_id` reserved — backend doesn't currently surface it.
+    acc[`experiment.${ns}.rule_id`] = null;
+    return acc;
+  }, {});
+};
+
 export class AmplitudeService {
   private amplitudeClient: BrowserClient | undefined;
 
@@ -91,7 +121,7 @@ export class AmplitudeService {
             return acc;
           }, {})
         : {};
-    const experimentProps = {}; // No direct equivalent for experiments in EnviveConfig yet
+    const experimentProps = buildExperimentProps(this.config.experimentAssignments);
 
     const environmentProps = {
       'environment.execution_context': 'bundle',

package/src/services/enviveConfigService/__tests__/fetchGraphQLConfig.test.ts

@@ -1,6 +1,10 @@
-import { fetchGraphQLConfig, DEFAULT_PAGE_VARIANTS } from '../fetchGraphQLConfig';
 import { mockV3ColorsConfig, mockV3FrontendConfig } from 'src/contexts/graphqlContext/mockV3Config';
 import { FloatingButtonLocation } from '@envive-ai/react-toolkit-v3/FloatingButton';
+import {
+  DEFAULT_PAGE_VARIANTS,
+  fetchGraphQLConfig,
+  fetchUnifiedGraphQLConfig,
+} from '../fetchGraphQLConfig';
 
 const { MockLogger } = vi.hoisted(() => {
   const MockLogger = vi.fn(function () {
@@ -423,3 +427,105 @@ describe('fetchGraphQLConfig', () => {
     });
   });
 });
+
+describe('fetchUnifiedGraphQLConfig', () => {
+  function makeUnifiedOkFetch(v3RootConfigValues: unknown, resolution?: unknown) {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          data: {
+            me: {
+              getWidgetConfig: {
+                productsConfig: {
+                  v_three_config: { values: v3RootConfigValues },
+                },
+                resolution,
+              },
+            },
+          },
+        }),
+    });
+  }
+
+  it('issues a getWidgetConfig query (not getProductsConfigByVersion) and forwards userId', async () => {
+    makeUnifiedOkFetch(null);
+
+    await fetchUnifiedGraphQLConfig('https://api.example.com', 'key', 'user_1');
+
+    const body = JSON.parse(mockFetch.mock.calls[0][1].body);
+    expect(body.query).toContain('getWidgetConfig');
+    expect(body.query).not.toContain('getProductsConfigByVersion');
+    // userId is required by the schema; omitting it 400s. Regression guard.
+    // version is absent without a URL-param override so the resolver uses
+    // Statsig bucketing (passing 'deployed' here would bypass Statsig).
+    expect(body.variables).toEqual({ userId: 'user_1' });
+  });
+
+  it('threads a spiffy_config_version URL param through as the version variable', async () => {
+    window.history.replaceState({}, '', '/?spiffy_config_version=1.2.3');
+    try {
+      makeUnifiedOkFetch(null);
+
+      await fetchUnifiedGraphQLConfig('https://api.example.com', 'key', 'user_1');
+
+      const body = JSON.parse(mockFetch.mock.calls[0][1].body);
+      expect(body.variables).toEqual({ userId: 'user_1', version: '1.2.3' });
+    } finally {
+      window.history.replaceState({}, '', '/');
+    }
+  });
+
+  it('parses productsConfig into the same shape as fetchGraphQLConfig', async () => {
+    makeUnifiedOkFetch(baseV3Config);
+
+    const result = await fetchUnifiedGraphQLConfig('https://api.example.com', 'key', 'user_1');
+
+    expect(result.colorsConfig).toBeDefined();
+    expect(result.frontendConfig).toBeDefined();
+    expect(result.orgPageConfig).toBeDefined();
+  });
+
+  it('returns resolution metadata alongside the config so callers can thread baseVersion into inference', async () => {
+    makeUnifiedOkFetch(baseV3Config, {
+      baseVersion: '1.0.670',
+      baseVersionSource: 'merchant_layer',
+    });
+
+    const result = await fetchUnifiedGraphQLConfig('https://api.example.com', 'key', 'user_1');
+
+    expect(result.resolution).toEqual({
+      baseVersion: '1.0.670',
+      baseVersionSource: 'merchant_layer',
+    });
+  });
+
+  it('selects resolution fields in the query so the server can fill them', async () => {
+    makeUnifiedOkFetch(null);
+
+    await fetchUnifiedGraphQLConfig('https://api.example.com', 'key', 'user_1');
+
+    const body = JSON.parse(mockFetch.mock.calls[0][1].body);
+    expect(body.query).toContain('resolution');
+    expect(body.query).toContain('baseVersion');
+    expect(body.query).toContain('baseVersionSource');
+  });
+
+  it('falls back to DEFAULT_PAGE_VARIANTS when productsConfig has no page_variants array', async () => {
+    // Reuses the no-colors fallback path: when productsConfig is missing
+    // colors, DEFAULT_PAGE_VARIANTS is returned as the orgPageConfig.
+    makeUnifiedOkFetch(null);
+
+    const result = await fetchUnifiedGraphQLConfig('https://api.example.com', 'key', 'user_1');
+
+    expect(result.orgPageConfig?.pageVariants).toEqual(DEFAULT_PAGE_VARIANTS);
+  });
+
+  it('returns empty config on network failure', async () => {
+    mockFetch.mockRejectedValueOnce(new Error('boom'));
+
+    const result = await fetchUnifiedGraphQLConfig('https://api.example.com', 'key', 'user_1');
+
+    expect(result).toEqual({ colorsConfig: undefined, frontendConfig: undefined });
+  });
+});