@envive-ai/react-widgets-v3 0.3.67 → 0.3.69

package/src/CXIntegration/implementations/useGladlyUnifiedCXButton.ts

@@ -5,9 +5,24 @@ import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
 import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
 
 const GLADLY_CONTAINER_ID = 'gladlyChat_container';
-const GLADLY_BUTTON_SELECTOR = '[data-aid*="gladlyChatChatButton"]';
-const GLADLY_OPEN_SIZE_THRESHOLD = 200;
-const POLL_INTERVAL_MS = 400;
+const GLADLY_BUTTON_SELECTOR = '#custom-gladly-pill';
+const HIDE_STYLE_ID = 'envive-gladly-pill-hide';
+const ENVIVE_BUTTON_HIDE_STYLE_ID = 'envive-floating-button-hide';
+// Gladly renders its actual UI (launcher icon and chat panel alike) inside an
+// open shadow root attached to `#gladlyChat_container` — confirmed via live
+// inspection: the host's own attributes/size/display never change between
+// open and closed, and the host has zero light-DOM children, so nothing
+// outside the shadow root reflects open/closed state. The open chat panel is
+// comfortably larger than this in both dimensions; the closed-state launcher
+// icon and tooltips are not.
+const GLADLY_PANEL_OPEN_SIZE_THRESHOLD = 200;
+const SHADOW_ATTACH_RETRY_MS = 300;
+// MutationObserver only fires on DOM mutations (nodes/attributes added,
+// removed, or changed) — a size change driven purely by a CSS
+// animation/transition with no accompanying DOM change would never be seen,
+// leaving `hasConfirmedOpenRef` stuck false and the Envive button hidden
+// forever. This polls the shadow root as a safety net alongside it.
+const SHADOW_POLL_MS = 250;
 
 type GladlySdk = {
   show?: () => void;
@@ -25,6 +40,56 @@ const restoreContainer = (node: HTMLElement | null) => {
   node?.style.removeProperty('display');
 };
 
+/**
+ * Hide the merchant's floating pill with an injected CSS rule instead of
+ * toggling `display` on a specific element reference. Gladly can re-create
+ * the pill node after our reference is taken (re-renders, SDK re-init), so a
+ * rule keyed by selector keeps applying no matter how many times the node is
+ * swapped out, whereas a stale/detached node reference would silently no-op
+ * and let the merchant pill reappear next to ours.
+ */
+const hideMerchantButton = () => {
+  if (document.getElementById(HIDE_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = HIDE_STYLE_ID;
+  style.textContent = `${GLADLY_BUTTON_SELECTOR} { display: none !important; }`;
+  document.head.appendChild(style);
+};
+
+const showMerchantButton = () => {
+  document.getElementById(HIDE_STYLE_ID)?.remove();
+};
+
+/**
+ * Hide/show the Envive floating button via an injected CSS rule rather than
+ * `enviveFloatingButton.hide()/.show()`, which toggles inline `display` on a
+ * cached node reference. `FloatingChatWidget` unmounts and remounts that
+ * button in response to `isCXOpen` (see `buttonShouldRender`), so the cached
+ * reference can point at a node React has already removed — the toggle then
+ * silently no-ops and the button stays invisible after Gladly closes. A rule
+ * keyed by id keeps applying across remounts instead.
+ */
+const hideEnviveButton = () => {
+  if (document.getElementById(ENVIVE_BUTTON_HIDE_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = ENVIVE_BUTTON_HIDE_STYLE_ID;
+  style.textContent = `#${FLOATING_BUTTON_ID} { display: none !important; }`;
+  document.head.appendChild(style);
+};
+
+const showEnviveButton = () => {
+  document.getElementById(ENVIVE_BUTTON_HIDE_STYLE_ID)?.remove();
+};
+
+const isPanelOpenInShadowRoot = (shadowRoot: ShadowRoot): boolean =>
+  Array.from(shadowRoot.querySelectorAll('*')).some(el => {
+    const rect = el.getBoundingClientRect();
+    return (
+      rect.width > GLADLY_PANEL_OPEN_SIZE_THRESHOLD &&
+      rect.height > GLADLY_PANEL_OPEN_SIZE_THRESHOLD
+    );
+  });
+
 interface UseGladlyUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useGladlyUnifiedCXButton = ({
@@ -33,10 +98,53 @@ export const useGladlyUnifiedCXButton = ({
   suppressMerchantButton,
 }: UseGladlyUnifiedCXButtonProps): UnifiedCXButton => {
   const gladlyContainer = useElementObserver(SelectorFactory.id(GLADLY_CONTAINER_ID));
-  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
   const wasOpenRef = useRef(false);
+  // `toggle()` sets `wasOpenRef` optimistically before Gladly has actually
+  // opened the panel. Confirmed-open gates the close check below so a
+  // transient intermediate state during opening can't be misread as a close.
+  const hasConfirmedOpenRef = useRef(false);
+
+  const isSwitchEnabled = () => {
+    const gladly = getGladly();
+    const hasGladlySdk = !!gladly && typeof gladly.show === 'function';
+    const hasGladlyButton = !!document.querySelector(GLADLY_BUTTON_SELECTOR);
+    const hasGladlyContainer = !!document.getElementById(GLADLY_CONTAINER_ID);
+
+    return hasGladlySdk || hasGladlyButton || hasGladlyContainer;
+  };
 
-  const isSwitchEnabled = () => !!document.getElementById(GLADLY_CONTAINER_ID);
+  const handleOpen = () => {
+    wasOpenRef.current = true;
+    hideEnviveButton();
+  };
+
+  const handleClose = () => {
+    wasOpenRef.current = false;
+    hasConfirmedOpenRef.current = false;
+    onCXClose?.();
+    // The merchant-visible launcher Gladly falls back to on close lives
+    // inside the shadow root, out of reach of the `#custom-gladly-pill`
+    // document-level suppression rule below — hiding the whole host is the
+    // only way to keep it suppressed once the panel closes.
+    if (suppressMerchantButton) {
+      forceHideContainer(document.getElementById(GLADLY_CONTAINER_ID));
+    }
+    showEnviveButton();
+  };
+
+  // Keep the latest handleOpen/handleClose (and the suppressMerchantButton
+  // auto-open guard) reachable from the shadow-root MutationObserver set up
+  // once below, without re-subscribing that observer on every render.
+  const checkShadowOpenStateRef = useRef<(shadowRoot: ShadowRoot) => void>(() => {});
+  checkShadowOpenStateRef.current = (shadowRoot: ShadowRoot) => {
+    const open = isPanelOpenInShadowRoot(shadowRoot);
+    if (open) {
+      hasConfirmedOpenRef.current = true;
+      if (!wasOpenRef.current) handleOpen();
+    } else if (wasOpenRef.current && hasConfirmedOpenRef.current) {
+      handleClose();
+    }
+  };
 
   gladlyContainer.onAdd(el => {
     if (suppressMerchantButton && el && !wasOpenRef.current) {
@@ -51,55 +159,80 @@ export const useGladlyUnifiedCXButton = ({
     }
   });
 
+  // Defensive fallback in case Gladly unmounts the container in some
+  // configuration we haven't observed.
+  gladlyContainer.onRemove(() => {
+    if (wasOpenRef.current) handleClose();
+  });
+
   useEffect(() => {
-    if (!suppressMerchantButton) {
+    if (suppressMerchantButton) {
+      hideMerchantButton();
+    } else {
+      showMerchantButton();
       restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
     }
+    // `FloatingChatWidget` remounts this provider when the configured
+    // provider changes (`key={cxProvider}`), so without a cleanup, switching
+    // away from Gladly would leave the injected suppression rule (and
+    // potentially the host's forced display:none) behind even though this
+    // integration is no longer active.
+    return () => {
+      showMerchantButton();
+      restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
+    };
   }, [suppressMerchantButton]);
 
+  // `#gladlyChat_container` is an open shadow host — its own light-DOM
+  // attributes/size never change between Gladly's open and closed states, so
+  // open/close has to be read from inside the shadow tree instead. The
+  // shadow root may attach asynchronously after the host node itself exists,
+  // so this retries briefly until it's there, then observes it directly
+  // (regular MutationObserver subtree watching doesn't cross shadow
+  // boundaries, which is why nothing here used to fire on open/close).
   useEffect(() => {
-    const handleOpen = () => {
-      wasOpenRef.current = true;
-      enviveFloatingButton.hide();
-    };
-
-    const handleClose = () => {
-      wasOpenRef.current = false;
-      onCXClose?.();
-      const node = document.getElementById(GLADLY_CONTAINER_ID);
-      if (suppressMerchantButton) {
-        forceHideContainer(node);
+    let shadowObserver: MutationObserver | null = null;
+    let retryIntervalId: number | undefined;
+    let pollIntervalId: number | undefined;
+
+    const attach = () => {
+      const host = document.getElementById(GLADLY_CONTAINER_ID);
+      const shadowRoot = host?.shadowRoot;
+      if (!shadowRoot || shadowObserver) return;
+
+      shadowObserver = new MutationObserver(() => checkShadowOpenStateRef.current(shadowRoot));
+      shadowObserver.observe(shadowRoot, { childList: true, subtree: true, attributes: true });
+      checkShadowOpenStateRef.current(shadowRoot);
+      pollIntervalId = window.setInterval(
+        () => checkShadowOpenStateRef.current(shadowRoot),
+        SHADOW_POLL_MS,
+      );
+
+      if (retryIntervalId) {
+        window.clearInterval(retryIntervalId);
+        retryIntervalId = undefined;
       }
-      enviveFloatingButton.show();
     };
 
-    const checkState = () => {
-      const node = document.getElementById(GLADLY_CONTAINER_ID);
-      if (!node) return;
-
-      const styles = window.getComputedStyle(node);
-      const isHidden = styles.display === 'none' || styles.visibility === 'hidden';
-      if (isHidden) {
-        if (wasOpenRef.current) handleClose();
-        return;
-      }
-
-      const rect = node.getBoundingClientRect();
-      const isOpen =
-        rect.width > GLADLY_OPEN_SIZE_THRESHOLD && rect.height > GLADLY_OPEN_SIZE_THRESHOLD;
-
-      if (isOpen && !wasOpenRef.current) handleOpen();
-      else if (!isOpen && wasOpenRef.current) handleClose();
+    // Started before the synchronous attach() attempt so a successful
+    // same-tick attachment (shadow root already present) can clear it
+    // immediately, instead of leaving it running for the component's entire
+    // lifetime because it was created after attach() already returned.
+    retryIntervalId = window.setInterval(attach, SHADOW_ATTACH_RETRY_MS);
+    attach();
+
+    return () => {
+      shadowObserver?.disconnect();
+      if (retryIntervalId) window.clearInterval(retryIntervalId);
+      if (pollIntervalId) window.clearInterval(pollIntervalId);
     };
-
-    const intervalId = window.setInterval(checkState, POLL_INTERVAL_MS);
-    return () => window.clearInterval(intervalId);
-  }, [suppressMerchantButton, enviveFloatingButton, onCXClose]);
+  }, []);
 
   const toggle = () => {
     onSwitchToAgent();
-    enviveFloatingButton.hide();
+    hideEnviveButton();
     wasOpenRef.current = true;
+    hasConfirmedOpenRef.current = false;
 
     restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
 

package/src/debug/reportIssue.tsx

@@ -5,7 +5,8 @@ import {
   Suggestion,
   TurnInfo,
 } from '@spiffy-ai/commerce-api-client';
-import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useAtomValue } from 'jotai';
 
 import { Message, MessageType } from '@envive-ai/react-hooks/application/models';
@@ -418,18 +419,49 @@ interface DrawerProps {
   onClose: () => void;
   children: React.ReactNode;
   width?: string;
+  // An element inside the same root (shadow root, or document for tests/Storybook)
+  // the drawer should portal into — see the comment on getPortalTarget below.
+  anchorNode: Element | null;
 }
 
+// The drawer is `position: fixed`, but it's rendered wherever ReportIssue
+// happens to be mounted — currently inside the chat footer, which framer-motion
+// animates via `layoutId` (FullPageSalesAgent.tsx). That layout animation keeps
+// a `transform`/`will-change: transform` on the footer, which (per the CSS
+// spec) makes it the containing block for any `position: fixed` descendant,
+// trapping the drawer inside the footer's own bounds instead of the viewport.
+// Portaling to the root of the current shadow tree (or document.body outside
+// one, e.g. Storybook/tests) sidesteps that regardless of where ReportIssue
+// ends up nested in the future — CSS custom properties and the Tailwind
+// utility classes it relies on still apply, since both work off the whole
+// shadow tree rather than DOM-portal structure.
+const getPortalTarget = (node: Element | null): Element | ShadowRoot | null => {
+  const root = node?.getRootNode();
+  if (root instanceof ShadowRoot) {
+    return root;
+  }
+  if (root instanceof Document) {
+    return root.body;
+  }
+  return null;
+};
+
 const Drawer = ({
   isOpen,
   onClose,
   children,
   width = 'md:envive-tw-w-[80%] lg:envive-tw-w-[67%]',
+  anchorNode,
 }: DrawerProps) => {
   if (!isOpen) return null;
 
-  return (
-    <div className="envive-tw-fixed envive-tw-right-[0] envive-tw-top-[0] envive-tw-z-[9999] envive-tw-flex envive-tw-w-full envive-tw-flex-row envive-tw-justify-end">
+  const content = (
+    // Even portaled to the shadow root, this still competes for stacking order
+    // against the merchant's own page content (not just our widget tree) —
+    // some themes put their own chrome (nav, sticky headers) at the
+    // practical max z-index (2147483647, the largest value z-index accepts),
+    // which would otherwise still paint over a merely-high value like 9999.
+    <div className="envive-tw-fixed envive-tw-right-[0] envive-tw-top-[0] envive-tw-z-[2147483647] envive-tw-flex envive-tw-w-full envive-tw-flex-row envive-tw-justify-end">
       <div
         className="envive-tw-bg envive-tw-flex-grow envive-tw-bg-black/40"
         onClick={onClose}
@@ -441,9 +473,13 @@ const Drawer = ({
       </div>
     </div>
   );
+
+  const portalTarget = getPortalTarget(anchorNode);
+  return portalTarget ? createPortal(content, portalTarget) : content;
 };
 
 export const ReportIssue = () => {
+  const anchorRef = useRef<HTMLDivElement>(null);
   const { messages, suggestions, userEvents } = useAtomValue(chatAtom);
   const lastMessages = useAtomValue(lastAssistantMessageAtom);
   const [lastMessagesText, setLastMessagesText] = useState<string>('');
@@ -606,7 +642,10 @@ export const ReportIssue = () => {
   });
 
   return (
-    <div className="envive-tw-mx-[16px] envive-tw-block envive-tw-h-[24px] envive-tw-w-full">
+    <div
+      ref={anchorRef}
+      className="envive-tw-mx-[16px] envive-tw-block envive-tw-h-[24px] envive-tw-w-full"
+    >
       <button
         type="button"
         onClick={e => {
@@ -620,6 +659,7 @@ export const ReportIssue = () => {
       <Drawer
         isOpen={isOpen}
         onClose={onClose}
+        anchorNode={anchorRef.current}
       >
         <ReportHeader onClose={onClose} />
         <div className="envive-tw-min-h-0 envive-tw-p-0 envive-tw-flex envive-tw-flex-[1_1_auto] envive-tw-flex-col envive-tw-overflow-y-auto">

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -156,7 +156,20 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
       enabled={customerServiceIntegration?.enabled ?? false}
       suppressMerchantButton={customerServiceIntegration?.suppressMerchantButton ?? false}
       onSwitchToAgent={() => setIsCXOpen(true)}
-      onCXClose={() => setIsCXOpen(false)}
+      onCXClose={() => {
+        setIsCXOpen(false);
+        // Closing the CX provider's chat (e.g. Gladly) should collapse the
+        // whole widget back to the floating button, not just drop back to
+        // the Envive chat underneath — the floating button only renders
+        // when both `isCXOpen` and the overlay's own `isOpen` are false.
+        if (!previewChatAlwaysOpen) {
+          closeChat(
+            ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON,
+            undefined,
+            'close_button',
+          );
+        }
+      }}
     >
       {({ isSwitchEnabled, toggle }) => (
         <>

package/src/widgets/FloatingChatWidget/__tests__/FloatingChatWidget.cxClose.test.tsx

@@ -0,0 +1,138 @@
+import { useState } from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { FloatingChatWidget } from '../FloatingChatWidget';
+
+/**
+ * Reproduces, without a browser, the exact state composition behind "the
+ * Envive floating button doesn't come back after closing Gladly": the button
+ * only renders when BOTH `isCXOpen` (owned by this widget) AND the Envive
+ * chat overlay's own `isOpen` (owned by `useChatToggle`, a separate jotai
+ * atom) are false. `onCXClose` must flip both.
+ *
+ * `useChatToggle` is mocked here with the same shape as the real hook
+ * (including the `if (isOpen) toggle()` closure-captured gate in `closeChat`)
+ * so this also catches a stale-closure regression, not just a logic typo.
+ */
+let capturedOnSwitchToAgent: (() => void) | undefined;
+let capturedOnCXClose: (() => void) | undefined;
+
+vi.mock('../../../hocs/withBaseWidget', () => ({
+  withBaseWidget: (Widget: React.ComponentType<Record<string, unknown>>) => {
+    const Wrapped = (props: Record<string, unknown>) => (
+      <Widget
+        {...props}
+        uiConfig={{
+          customerServiceIntegration: {
+            enabled: true,
+            provider: 'gladly',
+            suppressMerchantButton: true,
+          },
+          floatingButton: { showOption: 'always' },
+          floatingChat: {},
+          lookAndFeel: {},
+        }}
+        isUiConfigLoading={false}
+        hardcopyContent={undefined}
+      />
+    );
+    return Wrapped;
+  },
+}));
+
+vi.mock('@envive-ai/react-toolkit-v3/FloatingButton', () => ({
+  FloatingButton: () => <div data-testid="floating-button">Floating Button</div>,
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
+  useAmplitude: () => ({ trackEvent: vi.fn(), isReady: true }),
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: () => ({ isVisible: true }),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/salesAgentContext', () => ({
+  useSalesAgent: () => ({}),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/featureFlagServiceContext', () => ({
+  useFeatureFlagService: () => ({
+    featureFlagService: { isFeatureGateEnabled: vi.fn().mockReturnValue(false) },
+  }),
+}));
+
+vi.mock('../../hooks/useGetWidgetStatus', () => ({
+  default: () => ({ userHasInteractedValue: false }),
+}));
+
+vi.mock('../hooks/useFloatingButtonVisibility', () => ({
+  useFloatingButtonVisibility: () => ({ shouldShowFloatingButton: true }),
+}));
+
+vi.mock('../hooks/useAutoPopup', () => ({
+  useAutoPopup: () => {},
+}));
+
+vi.mock('src/debug/debugBar', () => ({
+  DebugBar: () => null,
+}));
+
+vi.mock('../FloatingChatOverlay', () => ({
+  FloatingChatOverlay: () => null,
+}));
+
+// Mirrors the real `useChatToggle` (packages/hooks/src/hooks/ChatToggle/useChatToggle.ts):
+// `closeChat`/`openChat` only call `toggle` when the closure's own `isOpen` says it's
+// necessary, exactly like the real hook's `if (isOpen) toggle(...)` guards.
+vi.mock('@envive-ai/react-hooks/hooks/ChatToggle', () => ({
+  useChatToggle: () => {
+    const [isOpen, setIsOpen] = useState(true); // Envive chat starts open
+    const toggle = () => setIsOpen(prev => !prev);
+    return {
+      isOpen,
+      openChat: () => {
+        if (!isOpen) toggle();
+      },
+      closeChat: () => {
+        if (isOpen) toggle();
+      },
+      onHover: () => {},
+    };
+  },
+}));
+
+vi.mock('../../../CXIntegration/hooks/useUnifiedCXButton', () => ({
+  useUnifiedCXButton: (props: { onSwitchToAgent: () => void; onCXClose: () => void }) => {
+    capturedOnSwitchToAgent = props.onSwitchToAgent;
+    capturedOnCXClose = props.onCXClose;
+    return { isSwitchEnabled: () => true, toggle: () => {} };
+  },
+}));
+
+describe('FloatingChatWidget — CX close restores the floating button', () => {
+  beforeEach(() => {
+    capturedOnSwitchToAgent = undefined;
+    capturedOnCXClose = undefined;
+  });
+
+  it('does not render the floating button while the CX chat (Gladly) is open', () => {
+    render(<FloatingChatWidget />);
+
+    expect(capturedOnSwitchToAgent).toBeDefined();
+    act(() => capturedOnSwitchToAgent?.());
+
+    expect(screen.queryByTestId('floating-button')).toBeNull();
+  });
+
+  it('renders the floating button again once the CX chat closes, even though the Envive overlay was still open the whole time', () => {
+    render(<FloatingChatWidget />);
+
+    act(() => capturedOnSwitchToAgent?.());
+    expect(screen.queryByTestId('floating-button')).toBeNull();
+
+    expect(capturedOnCXClose).toBeDefined();
+    act(() => capturedOnCXClose?.());
+
+    expect(screen.getByTestId('floating-button')).toBeInTheDocument();
+  });
+});

package/src/widgets/ProductCardWidget/ProductCardWidget.tsx

@@ -50,6 +50,7 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
   const carouselId = productCardWidgetConfig?.contentId || '';
   const promptButtonType =
     (productCardWidgetConfig?.promptButtonType as PromptButtonVariant) || PromptButtonVariant.LIGHT;
+  const promptButtonLayout = productCardWidgetConfig?.promptButtonLayout;
   const italicizeHeadline = productCardWidgetConfig?.italicizeHeadline;
   const fallbackColor = productCardWidgetConfig?.fallbackColor;
   const imageSrc = productCardWidgetConfig?.imageSrc || '';
@@ -143,6 +144,7 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
       animatedText={animatedText}
       prompts={prompts}
       promptButtonType={promptButtonType}
+      promptButtonLayout={promptButtonLayout}
       carouselId={carouselId}
       placeholder={placeholder}
       voiceInputEnabled={isVoiceInputEnabled}

package/src/widgets/ProductCardWidget/__tests__/ProductCardWidget.test.tsx

@@ -6,6 +6,7 @@ import { ProductCardWidget } from '../ProductCardWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockGetWidgetConfig = vi.fn();
 const mockUseTrackComponentVisibleEvent = vi.fn(() => ({ isVisible: true }));
 
 vi.mock('@envive-ai/react-toolkit-v3/ProductCard', () => ({
@@ -16,14 +17,17 @@ vi.mock('@envive-ai/react-toolkit-v3/ProductCard', () => ({
     prompts,
     onSelect,
     isLoading,
+    promptButtonLayout,
   }: {
     prompts: string[];
     onSelect: (text: string) => void;
     isLoading?: boolean;
+    promptButtonLayout?: string;
   }) => (
     <div
       data-testid="product-card-mock"
       data-loading={String(Boolean(isLoading))}
+      data-prompt-button-layout={promptButtonLayout}
     >
       {prompts.map(text => (
         <button
@@ -84,7 +88,7 @@ vi.mock('@envive-ai/react-hooks/contexts/pageContext', () => ({
 
 vi.mock('@envive-ai/react-hooks/contexts/widgetConfigContext', () => ({
   useWidgetConfig: () => ({
-    getWidgetConfig: vi.fn().mockResolvedValue({}),
+    getWidgetConfig: mockGetWidgetConfig,
   }),
 }));
 
@@ -124,6 +128,24 @@ describe('ProductCardWidget analytics', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockGetHardcopy.mockResolvedValue(defaultHardcopy);
+    mockGetWidgetConfig.mockResolvedValue({});
+  });
+
+  it('passes promptButtonLayout from the widget config through to the ProductCard', async () => {
+    mockGetWidgetConfig.mockResolvedValue({
+      widgetConfigId: 'layout-1',
+      type: WidgetTypeV3.ProductCardV3,
+      promptButtonLayout: 'stacked',
+    });
+
+    render(<ProductCardWidget widgetConfigId="layout-1" />);
+
+    await waitFor(() =>
+      expect(screen.getByTestId('product-card-mock')).toHaveAttribute(
+        'data-prompt-button-layout',
+        'stacked',
+      ),
+    );
   });
 
   it('should track ChatComponentVisible when widget mounts', async () => {
@@ -174,6 +196,7 @@ describe('ProductCardWidget analytics', () => {
 describe('ProductCardWidget loading state', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mockGetWidgetConfig.mockResolvedValue({});
   });
 
   const hardcopy = {