@salesforce/retail-react-app 10.3.0 → 10.4.0-nightly-20261012081912

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## v10.4.0-dev (Oct 09, 2026)
+- [Enhancement] Update inline agent widget UMD bundle: replace the text-prefix product-context hack with the proper SCRT2 v2 session-context API. Product context is now sent as a `commerce_agent_context` StructuredValue in the SessionContextSet envelope, leaving the shopper's message text unchanged. Default `capabilitiesVersion` bumped to `"65"`. Built from [inline-agent-widget#3](https://github.com/SalesforceCommerceCloud/inline-agent-widget/pull/3). [#4054](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/4054)
+- [Enhancement] Commerce Client shopper identity linking now retrieves the auth link key via the widget's `window.CimulateMessaging.getAuthLinkKey()` when the bundle exposes it, instead of calling SCRT2's `/iamessage/api/v2/authorization/authlink` endpoint directly with the Commerce Client JWT. Older bundles without the function fall back to the direct SCRT2 call (feature-detected, not version-checked). A `getAuthLinkKey()` rejection is surfaced as a linking failure rather than retried via the fallback, since both paths hit the same endpoint. [#4050](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/4050) (W-24076703)
+- [Feature] Add embedded Page Designer content-block support to the retail template, including an Announcement Banner content component, a preview-only Header layout, and a chrome-free `/preview/component` route for standalone component previews. [#4042](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/4042)
+
 ## v10.3.0 (Oct 08, 2026)
 - [Enhancement] Rename `INLINE_AGENT_WIDGET_COMMERCE_SETTINGS` environment variable to `EMBEDDED_AGENT_COMMERCE_SETTINGS` and config key `inlineAgentWidget` to `embeddedAgent` to align with updated product terminology. [#4041](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/4041)
 - [Feature] Add a configurable `cc_enableImageUpload` toggle for the Commerce Client (Embedded Messaging) shopper-agent widget, defaulting to `'false'` and forwarded to the bundle as `messagingConfig.enableImageUpload`. Set it to `'true'` via `COMMERCE_AGENT_SETTINGS` to let shoppers upload images in the chat; requires a Commerce Client bundle that supports image upload (`cc_cdnVersion` >= `1.44.0`) plus the backend file-upload prerequisites. Also adds `blob:` and `data:` to the `img-src` CSP directive in `app/ssr.js` so the widget can render the pre-send preview (a `blob:` URL) and the sent-image thumbnail (a `data:` URL); the widget renders images locally only, so no image host is added. [#4030](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/4030)
@@ -13,6 +18,7 @@
 - [Enhancement] Update inline agent widget UMD bundle: auto-restart session on expiry instead of showing an error. The widget silently resets to idle and the next message starts a fresh session transparently. [#4015](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/4015)
 - [Enhancement] Update inline agent widget UMD bundle: show user question bubble, add 4,000-character message limit, improve error handling with generic user-facing messages, fix 403 stale-conversation reset, and hide restored session Q&A on page reload. [#4032](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/4032)
 - [Enhancement] Update inline agent widget UMD bundle: suppress agent welcome message on conversation start, and clear stale question/answer when navigating between product pages via SPA routing.
+- [Feature] Add opener question pills to the inline agent widget on the PDP (@W-24333476). The Product Detail page parses SCAPI `c_pdpQuestions` (a JSON-encoded array of strings published by Commerce Content Studio) and forwards it to the widget via the new `pdp-questions` attribute. The widget renders up to 5 tappable pills above the input; tapping a pill sends it through the same message path as typed input, and pills auto-hide once the shopper engages. On SPA navigation between PDPs the pills re-appear for the new product's list. Malformed or absent `c_pdpQuestions` renders no pills.
 - [Feature] Add Guest Order Lookup (GLO): unauthenticated shoppers can look up an order by order number and email, verify ownership via a time-limited 6-digit access code (valid for 15 minutes, reusable within the window), and view a filtered order detail page (shipment tracking, items, payment summary, shipping address). Server-side endpoints (`/api/guestOrderLookup/{verify,order,oms-meta,cancel,return}`) read the SLAS access token from the HttpOnly `cc-at_*` cookie, call SCAPI with the shopper's bearer token, and filter the response to safe fields. The verify endpoint writes a `cc-goa_` HttpOnly cookie binding the order number to the verified access code; all subsequent order endpoints validate this cookie before proxying. [#3982](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3982)
 - [Feature] Forward two backend-gating signals on the Commerce Client shopper-agent widget's `routingAttributes`: `clientVersion` (sourced from `cc_cdnVersion`, so the runtime can gate rich components on the client's capability version; omitted when unset) and `isCartMgmtSupported` (string `'true'`/`'false'`, default `'false'`, read from `cc_routingAttributes`). Brings the PWA commerce-client path to parity with the SFRA cartridge.
 - [Feature] Enable shopper identity (customer context) for the Commerce Client (Cimulate) shopper-agent provider. Unlike MIAW, Commerce Client widgets do not expose `getAuthLinkKey`, so the browser extracts the Commerce Client JWT from the deployment-scoped `cim_af_ct_<orgId>_<embeddedServiceName>` key (`sessionStorage` is authoritative; `localStorage` is a compatibility fallback) and calls SCRT2's `/iamessage/api/v2/authorization/authlink` endpoint directly (`auth-link-client.js`) with an `Authorization: Bearer <jwt>` header to obtain an `auth_link_key`. The SCRT2 origin comes from `scrt2Url` in `COMMERCE_AGENT_SETTINGS` (a different host from Core's My Domain) and is strictly validated before the token is sent (HTTPS only; no credentials, port, path, query, or fragment) against the Salesforce SCRT2 domain allowlist, with the request hardened (`credentials: 'omit'`, `redirect: 'error'`, `referrerPolicy: 'no-referrer'`, `cache: 'no-store'`) and bounded by a 10s abort timeout. The `auth_link_key` is then forwarded to the existing Token Bridge to bind the conversation to the shopper's SLAS session. Linking is idempotent — deduped by `conversationId` + SLAS identity — and re-runs both on a new conversation (`onCimulateWidgetReady`) and on a SLAS identity transition (guest ↔ registered / account switch), gated on `my_domain` resolution. [#3943](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3943) [#3981](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3981)

package/app/components/_app/index.jsx

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import React, {useState, useEffect, useMemo} from 'react'
+import React, {useState, useEffect, useMemo, Suspense} from 'react'
 import PropTypes from 'prop-types'
 import loadable from '@loadable/component'
 import {useHistory, useLocation} from 'react-router-dom'
@@ -16,6 +16,7 @@ import {useQuery} from '@tanstack/react-query'
 import {
     useAccessToken,
     useCategory,
+    useComponent,
     useShopperBasketsMutation,
     useUsid
 } from '@salesforce/commerce-sdk-react'
@@ -71,8 +72,9 @@ import {useAttribution} from '@salesforce/retail-react-app/app/hooks/use-attribu
 // HOCs
 import {withCommerceSdkReact} from '@salesforce/retail-react-app/app/components/with-commerce-sdk-react/with-commerce-sdk-react'
 
-import {PageDesignerProvider} from '@salesforce/commerce-sdk-react/page-designer'
+import {PageDesignerProvider, Region} from '@salesforce/commerce-sdk-react/page-designer'
 import PageDesignerInit from '@salesforce/retail-react-app/app/components/page-designer-init'
+import {EmbeddedSubtreeProvider} from '@salesforce/storefront-next-runtime/design/react/core'
 
 // Localization
 import {IntlProvider} from 'react-intl'
@@ -150,12 +152,16 @@ const ListMenuContentWithData = withCommerceSdkReact(
     }
 )
 
-const App = (props) => {
+const StorefrontApp = (props) => {
     const {children} = props
     const {data: categoriesTree} = useCategory({
         parameters: {id: CAT_MENU_DEFAULT_ROOT_CATEGORY, levels: CAT_MENU_DEFAULT_NAV_SSR_DEPTH}
     })
     const categories = flatten(categoriesTree || {}, 'categories')
+    // Embedded content-block header: a singleton Page Designer component (instance id
+    // `header`) that exposes an `announcement` region rendered above the storefront header.
+    // `useComponent` is Page-Designer-mode aware (handles mode/pdToken internally).
+    const {data: embeddedHeader} = useComponent({parameters: {componentId: 'header'}})
     const {getTokenWhenReady} = useAccessToken()
     const {usid} = useUsid()
     const appOrigin = useAppOrigin()
@@ -428,6 +434,26 @@ const App = (props) => {
                                 <Box {...styles.headerWrapper}>
                                     {!isCheckout ? (
                                         <>
+                                            {embeddedHeader && (
+                                                // The announcement `<Region>` renders in
+                                                // *component mode*, which has no Suspense
+                                                // boundary of its own. In production the
+                                                // registry discovers components via lazy
+                                                // importers, so `<Component>` throws
+                                                // `registry.preload()`'s promise to suspend on
+                                                // first render. `renderToString` (SSR) rethrows
+                                                // an uncaught suspend, blanking the tree (a 500).
+                                                // Provide the boundary here so SSR streams the
+                                                // fallback instead of crashing.
+                                                <Suspense fallback={null}>
+                                                    <EmbeddedSubtreeProvider embedded>
+                                                        <Region
+                                                            component={embeddedHeader}
+                                                            regionId="announcement"
+                                                        />
+                                                    </EmbeddedSubtreeProvider>
+                                                </Suspense>
+                                            )}
                                             <AboveHeader />
                                             <Header
                                                 onMenuClick={onOpen}
@@ -522,6 +548,122 @@ const App = (props) => {
     )
 }
 
+StorefrontApp.propTypes = {
+    children: PropTypes.node
+}
+
+/**
+ * Path (without the `/:site/:locale` prefix) served chrome-free by the Page Designer
+ * component-preview iframe. See app/pages/component-preview and app/routes.jsx.
+ */
+const COMPONENT_PREVIEW_PATH_RE = /\/preview\/component$/
+
+/**
+ * Minimal app surface for the Page Designer component-preview iframe.
+ *
+ * It renders only the providers a single Page Designer component needs — i18n, currency,
+ * and the Page Designer context/init — and none of the storefront chrome (header, footer,
+ * menus) or shopper-state hooks (basket, customer, category, analytics, shopper agent).
+ * Those hooks mutate session state and fire analytics, which must not happen inside an
+ * authoring iframe; skipping them is the point of this split, not merely hiding the chrome.
+ * MRT StorefrontPreview is omitted here: the Content Block Editor iframe already owns the
+ * authoring postMessage bridge via PageDesignerProvider.
+ */
+const ComponentPreviewApp = (props) => {
+    const {children} = props
+    const {usid} = useUsid()
+    const appOrigin = useAppOrigin()
+    const location = useLocation()
+    const {site, locale} = useMultiSite()
+    const {req} = useServerContext()
+
+    // Determine Page Designer mode from URL - use req for server-side detection
+    const pageDesignerMode = useMemo(() => {
+        const queryParams = location?.search || ''
+        if (queryParams.includes('mode=EDIT')) return 'EDIT'
+        else if (queryParams.includes('mode=PREVIEW')) return 'PREVIEW'
+        return undefined
+    }, [req?.url])
+
+    const targetLocale = getTargetLocale({
+        getUserPreferredLocales: () => [locale?.id || DEFAULT_LOCALE],
+        l10nConfig: site.l10n
+    })
+
+    const {data: messages} = useQuery({
+        queryKey: ['app', 'translations', 'messages', targetLocale],
+        queryFn: () => fetchTranslations(targetLocale, appOrigin),
+        enabled: isServer
+    })
+
+    const currency = locale.preferredCurrency || site.l10n.defaultCurrency
+
+    return (
+        <Box className="sf-app">
+            <IntlProvider
+                onError={(err) => {
+                    if (!messages) {
+                        // During the ssr prepass phase the messages object has not loaded,
+                        // so we can suppress errors during this time.
+                        return
+                    }
+                    if (err.code === 'MISSING_TRANSLATION') {
+                        logger.warn('Missing translation', {
+                            namespace: 'ComponentPreviewApp.IntlProvider',
+                            additionalProperties: {errorMessage: err.message}
+                        })
+                        return
+                    }
+                    throw err
+                }}
+                locale={targetLocale}
+                messages={messages}
+                defaultLocale={DEFAULT_LOCALE}
+            >
+                <CurrencyProvider currency={currency}>
+                    <Box
+                        as="main"
+                        id="app-main"
+                        role="main"
+                        display="flex"
+                        flexDirection="column"
+                        flex="1"
+                    >
+                        <PageDesignerProvider
+                            clientId="pwa-kit-client"
+                            targetOrigin="*"
+                            usid={usid}
+                            mode={pageDesignerMode}
+                        >
+                            <PageDesignerInit />
+                            {children}
+                        </PageDesignerProvider>
+                    </Box>
+                </CurrencyProvider>
+            </IntlProvider>
+        </Box>
+    )
+}
+
+ComponentPreviewApp.propTypes = {
+    children: PropTypes.node
+}
+
+/**
+ * Selects the app shell by route: the Page Designer component-preview iframe gets a
+ * chrome-free surface, every other route gets the full storefront app. Uses `req.url`
+ * on the server and `location.pathname` on the client, matching the SSR-safe pattern
+ * already used for Page Designer mode detection.
+ */
+const App = (props) => {
+    const location = useLocation()
+    const {req} = useServerContext()
+    const pathname = req?.url ? req.url.split('?')[0] : location?.pathname || ''
+    const isComponentPreview = COMPONENT_PREVIEW_PATH_RE.test(pathname)
+
+    return isComponentPreview ? <ComponentPreviewApp {...props} /> : <StorefrontApp {...props} />
+}
+
 App.propTypes = {
     children: PropTypes.node
 }

package/app/components/_app/index.test.js

@@ -7,17 +7,33 @@
 
 import React from 'react'
 import {screen, waitFor} from '@testing-library/react'
+import {renderToString} from 'react-dom/server'
 import {Helmet} from 'react-helmet'
 import {rest} from 'msw'
 
 import App from '@salesforce/retail-react-app/app/components/_app/index.jsx'
-import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {renderWithProviders, TestProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
 import {DEFAULT_LOCALE} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {withReactQuery} from '@salesforce/pwa-kit-react-sdk/ssr/universal/components/with-react-query'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
 import messages from '@salesforce/retail-react-app/app/static/translations/compiled/en-GB.json'
 import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
 import {prependHandlersToServer} from '@salesforce/retail-react-app/jest-setup'
 import {mockCustomerBaskets} from '@salesforce/retail-react-app/app/mocks/mock-data'
+import {mockEmbeddedHeader} from '@salesforce/retail-react-app/app/mocks/page-designer'
+// `@salesforce/commerce-sdk-react/page-designer` is only stubbed for `PageDesignerProvider`
+// below — the `registry` export it re-exports is the real V2 singleton.
+import {registry} from '@salesforce/commerce-sdk-react/page-designer'
+import {StorefrontPreview} from '@salesforce/commerce-sdk-react/components'
+
+jest.mock('@salesforce/commerce-sdk-react/components', () => {
+    const actual = jest.requireActual('@salesforce/commerce-sdk-react/components')
+    return {
+        ...actual,
+        // eslint-disable-next-line react/prop-types
+        StorefrontPreview: jest.fn(({children}) => children)
+    }
+})
 
 jest.mock('../../hooks/use-multi-site', () => jest.fn())
 jest.mock('../../hooks/use-update-shopper-context', () => ({
@@ -26,6 +42,14 @@ jest.mock('../../hooks/use-update-shopper-context', () => ({
 jest.mock('../../page-designer/registry', () => ({
     initializeRegistry: jest.fn()
 }))
+// In EDIT/PREVIEW mode the real PageDesignerProvider lazy-loads the runtime design
+// machinery (React.lazy → DesignContext), which the jsdom test environment can't mount.
+// The SSR regression is about the announcement `<Region>`, not the design pipeline.
+jest.mock('@salesforce/commerce-sdk-react/page-designer', () => ({
+    ...jest.requireActual('@salesforce/commerce-sdk-react/page-designer'),
+    // eslint-disable-next-line react/prop-types
+    PageDesignerProvider: ({children}) => <>{children}</>
+}))
 
 let windowSpy
 
@@ -46,7 +70,8 @@ jest.mock('@salesforce/commerce-sdk-react', () => {
         useDNT: () => ({selectedDnt: undefined, updateDnt: mockUpdateDnt}),
         useUsid: () => ({usid: 'test-usid', getUsidWhenReady: () => Promise.resolve('test-usid')}),
         useGlobalAnchorBlock: jest.fn(),
-        registry: mockRegistry
+        registry: mockRegistry,
+        useComponent: jest.fn(() => ({data: undefined, isLoading: false, error: null}))
     }
 })
 
@@ -71,8 +96,11 @@ beforeEach(() => {
 
 afterEach(() => {
     windowSpy.mockRestore()
+    StorefrontPreview.mockClear()
     jest.restoreAllMocks()
     jest.resetModules()
+    // Reset the jsdom URL so a route-dependent test can't leak its location into the next.
+    window.history.pushState({}, '', '/')
 })
 describe('App', () => {
     const site = {
@@ -153,6 +181,76 @@ describe('App', () => {
         expect(hreflangLinks.some((link) => link.hrefLang === 'x-default')).toBe(true)
     })
 
+    test('renders the component-preview surface without StorefrontPreview or storefront chrome', async () => {
+        useMultiSite.mockImplementation(() => resultUseMultiSite)
+        // BrowserRouter reads window.location, so put the app on the preview route.
+        window.history.pushState({}, '', '/uk/en-GB/preview/component?mode=EDIT')
+        StorefrontPreview.mockClear()
+
+        renderWithProviders(
+            <App targetLocale={DEFAULT_LOCALE} defaultLocale={DEFAULT_LOCALE} messages={messages}>
+                <p>Preview child</p>
+            </App>
+        )
+
+        await waitFor(() => {
+            expect(screen.getByText('Preview child')).toBeInTheDocument()
+        })
+        // The chrome-free preview surface renders the main region but no storefront
+        // header navigation or footer, and does not mount MRT StorefrontPreview.
+        expect(screen.getByRole('main')).toBeInTheDocument()
+        expect(screen.queryByRole('navigation')).not.toBeInTheDocument()
+        expect(screen.queryByRole('contentinfo')).not.toBeInTheDocument()
+        expect(StorefrontPreview).not.toHaveBeenCalled()
+    })
+
+    test('SSR-renders the embedded header when its component is only lazily registered', () => {
+        // The production regression: `initializeRegistry()` registers *lazy importers*, not
+        // eager components, so during SSR `registry.getComponent()` returns null on first
+        // render and `<Component>` throws `registry.preload()`'s promise to suspend. The
+        // announcement `<Region>` renders in *component mode*, which has no Suspense boundary
+        // of its own, so `_app` must provide one — otherwise `renderToString` rethrows the
+        // uncaught suspend and blanks the whole tree (the 500 seen on the runtime homepage).
+        //
+        // This must use `renderToString`, not `renderWithProviders`: React 18's client
+        // renderer tolerates a boundary-less suspend (it commits once the promise resolves),
+        // so a client render passes even on the broken code — only synchronous SSR reproduces
+        // the crash. Restore `useComponent` and the production lazy-importer registry
+        // afterward so later tests are not order-dependent.
+        const {useComponent} = jest.requireMock('@salesforce/commerce-sdk-react')
+        const {initializeRegistry} = jest.requireActual('../../page-designer/registry')
+        useComponent.mockReturnValue({
+            data: mockEmbeddedHeader,
+            isLoading: false,
+            error: null
+        })
+        useMultiSite.mockImplementation(() => resultUseMultiSite)
+        const typeId = mockEmbeddedHeader.regions[0].components[0].typeId
+        const AppWithProviders = withReactQuery(TestProviders)
+        registry.clear()
+        registry.registerImporter(typeId, () =>
+            import('@salesforce/retail-react-app/app/page-designer/content/announcement-banner')
+        )
+
+        try {
+            expect(() =>
+                renderToString(
+                    <AppWithProviders locals={{}}>
+                        <App
+                            targetLocale={DEFAULT_LOCALE}
+                            defaultLocale={DEFAULT_LOCALE}
+                            messages={messages}
+                        />
+                    </AppWithProviders>
+                )
+            ).not.toThrow()
+        } finally {
+            useComponent.mockReturnValue({data: undefined, isLoading: false, error: null})
+            registry.clear()
+            initializeRegistry()
+        }
+    })
+
     test('App component updates the basket with correct currency and customer email', async () => {
         const customerEmail = 'email@test.com'
 

package/app/components/inline-agent-widget/index.jsx

@@ -12,8 +12,8 @@ import useInlineAgentWidget, {
     isConfigured
 } from '@salesforce/retail-react-app/app/hooks/use-inline-agent-widget'
 
-const InlineAgentWidget = ({config}) => {
-    const containerRef = useInlineAgentWidget(config)
+const InlineAgentWidget = ({config, pdpQuestions, productName}) => {
+    const containerRef = useInlineAgentWidget(config, {pdpQuestions, productName})
 
     if (!isConfigured(config)) return null
 
@@ -34,7 +34,21 @@ InlineAgentWidget.propTypes = {
         orgId: PropTypes.string,
         esDeveloperName: PropTypes.string,
         placeholder: PropTypes.string
-    })
+    }),
+    /**
+     * Opener questions for the current product — rendered as tappable pills
+     * above the widget input. Typically sourced from the SCAPI
+     * `c_pdpQuestions` custom attribute (parsed via `parsePdpQuestions`).
+     */
+    pdpQuestions: PropTypes.arrayOf(PropTypes.string),
+    /**
+     * Current product's display name. Templated into the InputBar
+     * placeholder — "Ask me anything about <productName>" — so the shopper
+     * sees product-grounded prompting on PDP load. Sourced from the SCAPI
+     * `name` standard field. When absent, the widget falls back to the
+     * generic "Ask me anything" string.
+     */
+    productName: PropTypes.string
 }
 
 export default InlineAgentWidget

package/app/components/shopper-agent/index.jsx

@@ -917,13 +917,20 @@ const CommerceClientAgentWindow = ({
                     : await getTokenWhenReadyRef.current()
                 if (generation !== authLinkGenerationRef.current) return
 
-                // Step 1: auth link key from SCRT. Called directly from the
-                // browser against the configured SCRT2 origin — the authlink
-                // endpoint authenticates with the Commerce Client JWT (Bearer)
-                // alone, needing neither the siteId nor the conversationId.
-                const authLinkResponse = await callAuthLink({commerceClientJWT, scrt2Url})
+                // Step 1: auth link key from SCRT. Use the widget's getAuthLinkKey()
+                // when present; older bundles lack it, so fall back to calling SCRT2
+                // directly. No fallback on rejection: both hit the same endpoint.
+                let authLinkResponse
+                if (typeof window.CimulateMessaging?.getAuthLinkKey === 'function') {
+                    authLinkResponse = await window.CimulateMessaging.getAuthLinkKey()
+                } else {
+                    authLinkResponse = await callAuthLink({commerceClientJWT, scrt2Url})
+                }
                 if (generation !== authLinkGenerationRef.current) return
-                const authLinkKey = authLinkResponse?.auth_link_key || authLinkResponse?.authLinkKey
+                const authLinkKey =
+                    typeof authLinkResponse === 'string'
+                        ? authLinkResponse
+                        : authLinkResponse?.auth_link_key || authLinkResponse?.authLinkKey
                 if (!authLinkKey || typeof authLinkKey !== 'string') {
                     console.error(
                         `[Commerce Client] performAuthLink(${reason}): no auth link key`,

package/app/components/shopper-agent/index.test.js

@@ -2460,6 +2460,65 @@ describe('ShopperAgent Component', () => {
                 })
             })
 
+            test('uses the widget getAuthLinkKey when the bundle exposes it', async () => {
+                seedAuthLinkStorage()
+                const getAuthLinkKey = jest.fn().mockResolvedValue('widget-auth-link-key')
+                window.CimulateMessaging = {injectMessagingWidget: jest.fn(), getAuthLinkKey}
+
+                renderCommerceClient()
+
+                await waitFor(() => expect(mockCallTokenBridge).toHaveBeenCalledTimes(1))
+                expect(getAuthLinkKey).toHaveBeenCalledTimes(1)
+                expect(mockCallAuthLink).not.toHaveBeenCalled()
+                expect(mockCallTokenBridge).toHaveBeenCalledWith({
+                    authLinkKey: 'widget-auth-link-key',
+                    slasAccessToken: 'test-slas-access-token',
+                    siteId: 'RefArchGlobal'
+                })
+            })
+
+            test('falls back to the direct SCRT2 call when getAuthLinkKey is not a function', async () => {
+                seedAuthLinkStorage()
+                window.CimulateMessaging = {
+                    injectMessagingWidget: jest.fn(),
+                    getAuthLinkKey: 'not-a-function'
+                }
+
+                renderCommerceClient()
+
+                await waitFor(() =>
+                    expect(mockCallAuthLink).toHaveBeenCalledWith({
+                        commerceClientJWT: 'commerce.jwt',
+                        scrt2Url: 'https://test.salesforce-scrt.com'
+                    })
+                )
+                await waitFor(() =>
+                    expect(mockCallTokenBridge).toHaveBeenCalledWith(
+                        expect.objectContaining({authLinkKey: 'commerce-auth-link-key'})
+                    )
+                )
+            })
+
+            test('does not fall back or bridge when the widget getAuthLinkKey rejects', async () => {
+                const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+                seedAuthLinkStorage()
+                const rejection = new Error('not ready')
+                const getAuthLinkKey = jest.fn().mockRejectedValue(rejection)
+                window.CimulateMessaging = {injectMessagingWidget: jest.fn(), getAuthLinkKey}
+
+                renderCommerceClient()
+
+                await waitFor(() =>
+                    expect(errorSpy).toHaveBeenCalledWith(
+                        '[Commerce Client] performAuthLink(resumed-conversation) threw',
+                        rejection
+                    )
+                )
+                expect(mockCallAuthLink).not.toHaveBeenCalled()
+                expect(mockCallTokenBridge).not.toHaveBeenCalled()
+                errorSpy.mockRestore()
+            })
+
             test('does not auth-link without my_domain', async () => {
                 const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
                 mockedUseConfigurations.mockReturnValue({data: {configurations: []}})

package/app/hooks/use-inline-agent-widget.js

@@ -42,10 +42,17 @@ const ensureWidget = () => {
 const isConfigured = (config) =>
     Boolean(config?.enabled && config?.scrt2Url && config?.orgId && config?.esDeveloperName)
 
-const useInlineAgentWidget = (config) => {
+// Stable string key for the pdpQuestions array so the sync effect's dependency
+// is by value, not identity. An empty/undefined list serializes to "" so it
+// compares equal across renders and doesn't churn.
+const pdpQuestionsKey = (pdpQuestions) =>
+    Array.isArray(pdpQuestions) && pdpQuestions.length > 0 ? JSON.stringify(pdpQuestions) : ''
+
+const useInlineAgentWidget = (config, {pdpQuestions, productName} = {}) => {
     const [ready, setReady] = useState(false)
     const containerRef = useRef(null)
     const configured = isConfigured(config)
+    const questionsKey = pdpQuestionsKey(pdpQuestions)
 
     useEffect(() => {
         if (typeof window === 'undefined') return
@@ -72,6 +79,15 @@ const useInlineAgentWidget = (config) => {
         if (config.placeholder) el.setAttribute('placeholder', config.placeholder)
         if (config.persistSession !== false) el.setAttribute('persist-session', '')
         if (config.enableLogging) el.setAttribute('enable-logging', '')
+        // Seed pdp-questions at create time when we already have them, so the
+        // pills paint in the same frame the widget mounts (no visible pop-in
+        // from the attribute-sync effect below).
+        if (questionsKey) el.setAttribute('pdp-questions', questionsKey)
+        // Seed product-name at create time so the InputBar placeholder reads
+        // "Ask me anything about <productName>" from first paint. The sync
+        // effect below handles variant switches / SPA PDP navigation without
+        // tearing down the widget.
+        if (productName) el.setAttribute('product-name', productName)
 
         containerRef.current.appendChild(el)
 
@@ -80,6 +96,38 @@ const useInlineAgentWidget = (config) => {
         }
     }, [configured, ready, config])
 
+    // Keep the pdp-questions attribute in sync with the current product. Runs
+    // separately from element creation so a variant switch / SPA nav to a new
+    // PDP updates the pills without tearing down the widget (which would drop
+    // the SCRT2 session).
+    useEffect(() => {
+        if (!configured || !ready) return
+        if (!containerRef.current) return
+        const el = containerRef.current.querySelector('inline-agent-widget')
+        if (!el) return
+        if (questionsKey) {
+            el.setAttribute('pdp-questions', questionsKey)
+        } else {
+            el.removeAttribute('pdp-questions')
+        }
+    }, [configured, ready, questionsKey])
+
+    // Keep the product-name attribute in sync. Same rationale as pdp-questions
+    // above: variant switch / SPA PDP nav re-templates the InputBar
+    // placeholder without a widget teardown. Removing the attribute when the
+    // name is absent lets the widget fall back to the generic placeholder.
+    useEffect(() => {
+        if (!configured || !ready) return
+        if (!containerRef.current) return
+        const el = containerRef.current.querySelector('inline-agent-widget')
+        if (!el) return
+        if (productName) {
+            el.setAttribute('product-name', productName)
+        } else {
+            el.removeAttribute('product-name')
+        }
+    }, [configured, ready, productName])
+
     return containerRef
 }
 

package/app/mocks/page-designer.js

@@ -23,3 +23,29 @@ export const mockImageWithText = {
         '<p><em>Text</em> <strong>Overlay</strong> <s>test</s> <u>Image</u> With Text <a href="https://zzrf-001.dx.commercecloud.salesforce.com/s/RefArchGlobal/mens/?lang=en_US" target="_self" data-link-type="category" data-link-label="Mens" data-category-id="mens" data-category-catalog-id="storefront-catalog-m-en">Component Link</a><img src="https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Library-Sites-RefArchSharedLibrary/default/dw2d9142bf/images/myaccount_registry.png" alt="alt text myaccount_registry image"></p>',
     alt: 'Alt Text test Image With Text Component'
 }
+
+export const mockAnnouncementBanner = {
+    message: 'Free standard shipping on orders over $50',
+    linkUrl: '/sale',
+    linkText: 'Shop the sale',
+    colorScheme: 'primary',
+    height: 'md',
+    alignment: 'center'
+}
+
+export const mockEmbeddedHeader = {
+    id: 'header',
+    typeId: 'commerce_layouts.header',
+    regions: [
+        {
+            id: 'announcement',
+            components: [
+                {
+                    id: 'announcement-banner-1',
+                    typeId: 'commerce_assets.announcementBanner',
+                    data: mockAnnouncementBanner
+                }
+            ]
+        }
+    ]
+}