Drop ?mode= URL override; add 'hybrid' as reserved mode value (W-24604411)

The ?mode= URL hack was a demo-only aid; .env + local restart cover the
same demo flow without shipping an escape hatch into production. Keep the
mode router but drive it off config.mode alone.

Expand VALID_MODES to accept 'hybrid' so merchants can be onboarded
against the final enum today. Shilpi lands the shim-side hybrid routing
(PDP questions inline, discovery/comparison to main drawer) in a follow-up;
'hybrid' falls back to the inline UMD renderer until then.

Author: sf-samarth-urs

packages/template-retail-react-app/app/components/inline-agent-widget/index.jsx

@@ -13,21 +13,10 @@ import useInlineAgentWidget, {
 } from '@salesforce/retail-react-app/app/hooks/use-inline-agent-widget'
 import InlineAgentRedirectShim from '@salesforce/retail-react-app/app/components/inline-agent-widget/InlineAgentRedirectShim'
 
-const VALID_MODES = ['inline', 'agent-redirect']
-
-// Demo override: ?mode=inline / ?mode=agent-redirect flips the behavior for
-// the current tab without a rebuild. Returns undefined on SSR and for any
-// value outside VALID_MODES so the server-rendered default always wins.
-const readUrlModeOverride = () => {
-    if (typeof window === 'undefined') return undefined
-    const override = new URLSearchParams(window.location.search).get('mode')
-    return VALID_MODES.includes(override) ? override : undefined
-}
+const VALID_MODES = ['inline', 'agent-redirect', 'hybrid']
 
 const InlineAgentWidget = ({config, pdpQuestions, productName, productId}) => {
-    const effectiveMode = readUrlModeOverride() || config.mode
-    const effectiveConfig = effectiveMode === config.mode ? config : {...config, mode: effectiveMode}
-    const containerRef = useInlineAgentWidget(effectiveConfig, {pdpQuestions, productName})
+    const containerRef = useInlineAgentWidget(config, {pdpQuestions, productName})
 
     useEffect(() => {
         if (config.mode !== undefined && !VALID_MODES.includes(config.mode)) {
@@ -37,11 +26,11 @@ const InlineAgentWidget = ({config, pdpQuestions, productName, productId}) => {
         }
     }, [config.mode])
 
-    if (!isConfigured(effectiveConfig)) return null
+    if (!isConfigured(config)) return null
 
-    // Agent-redirect mode: no local SCRT2 session. The shim hands the question
+    // Agent-redirect: no local SCRT2 session — the shim hands the question
     // (pill or typed) off to the main Shopper Agent drawer.
-    if (effectiveMode === 'agent-redirect') {
+    if (config.mode === 'agent-redirect') {
         return (
             <InlineAgentRedirectShim
                 pdpQuestions={pdpQuestions}
@@ -51,6 +40,8 @@ const InlineAgentWidget = ({config, pdpQuestions, productName, productId}) => {
         )
     }
 
+    // 'hybrid' is reserved — PDP-scoped questions stay inline, non-PDP routes
+    // to the main drawer. Until that split lands, hybrid renders the inline UMD.
     return (
         <>
             <Helmet>
@@ -72,8 +63,10 @@ InlineAgentWidget.propTypes = {
          * `'inline'` (default) runs the UMD custom element with its own SCRT2 session.
          * `'agent-redirect'` renders a non-conversational shim that hands shopper
          * questions off to the main Shopper Agent drawer.
+         * `'hybrid'` is reserved for future per-pill routing (PDP questions inline,
+         * discovery/comparison to the main drawer); currently falls back to inline.
          */
-        mode: PropTypes.oneOf(['inline', 'agent-redirect'])
+        mode: PropTypes.oneOf(['inline', 'agent-redirect', 'hybrid'])
     }),
     /**
      * Opener questions for the current product — rendered as tappable pills

packages/template-retail-react-app/app/components/inline-agent-widget/index.test.jsx

@@ -9,7 +9,6 @@ import {screen} from '@testing-library/react'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
 import InlineAgentWidget from '@salesforce/retail-react-app/app/components/inline-agent-widget'
 
-// The UMD-loading hook is irrelevant to the branch test — stub it.
 jest.mock('@salesforce/retail-react-app/app/hooks/use-inline-agent-widget', () => {
     const React = require('react')
     return {
@@ -30,7 +29,6 @@ const BASE_CONFIG = {
 describe('InlineAgentWidget', () => {
     test('renders nothing meaningful when config is not configured', () => {
         renderWithProviders(<InlineAgentWidget config={{enabled: false}} />)
-        // isConfigured→false short-circuits to null; the shim and the UMD mount should not render.
         expect(screen.queryByTestId('inline-agent-redirect-shim')).not.toBeInTheDocument()
     })
 
@@ -53,43 +51,11 @@ describe('InlineAgentWidget', () => {
         expect(screen.getByRole('button', {name: 'B?'})).toBeInTheDocument()
     })
 
-    test('?mode=agent-redirect in URL overrides inline config for the current tab', () => {
-        const originalSearch = window.location.search
-        window.history.replaceState({}, '', '/product/500400?mode=agent-redirect')
-        try {
-            renderWithProviders(
-                <InlineAgentWidget config={{...BASE_CONFIG, mode: 'inline'}} />
-            )
-            expect(screen.getByTestId('inline-agent-redirect-shim')).toBeInTheDocument()
-        } finally {
-            window.history.replaceState({}, '', `/${originalSearch}`)
-        }
-    })
-
-    test('?mode=inline in URL overrides agent-redirect config for the current tab', () => {
-        const originalSearch = window.location.search
-        window.history.replaceState({}, '', '/product/500400?mode=inline')
-        try {
-            renderWithProviders(
-                <InlineAgentWidget config={{...BASE_CONFIG, mode: 'agent-redirect'}} />
-            )
-            expect(screen.queryByTestId('inline-agent-redirect-shim')).not.toBeInTheDocument()
-        } finally {
-            window.history.replaceState({}, '', `/${originalSearch}`)
-        }
-    })
-
-    test('?mode=bogus is ignored and config.mode wins', () => {
-        const originalSearch = window.location.search
-        window.history.replaceState({}, '', '/product/500400?mode=bogus')
-        try {
-            renderWithProviders(
-                <InlineAgentWidget config={{...BASE_CONFIG, mode: 'agent-redirect'}} />
-            )
-            expect(screen.getByTestId('inline-agent-redirect-shim')).toBeInTheDocument()
-        } finally {
-            window.history.replaceState({}, '', `/${originalSearch}`)
-        }
+    test('mode === "hybrid" falls back to the inline UMD (reserved — no shim yet)', () => {
+        renderWithProviders(
+            <InlineAgentWidget config={{...BASE_CONFIG, mode: 'hybrid'}} />
+        )
+        expect(screen.queryByTestId('inline-agent-redirect-shim')).not.toBeInTheDocument()
     })
 
     test('warns in the console when config.mode is an unknown value', () => {

packages/template-retail-react-app/config/default.js

@@ -255,10 +255,12 @@ module.exports = {
             placeholder: '',
             persistSession: true,
             enableLogging: false,
-            // 'inline' renders the UMD custom element with its own SCRT2 session.
+            // 'inline' (default) renders the UMD custom element with its own SCRT2 session.
             // 'agent-redirect' renders a non-conversational shim that hands shopper
-            // questions off to the main Shopper Agent drawer. Merchants override via
-            // EMBEDDED_AGENT_COMMERCE_SETTINGS JSON on MRT without a code change.
+            // questions off to the main Shopper Agent drawer. 'hybrid' is reserved —
+            // PDP-scoped questions stay inline, non-PDP routes to the main drawer;
+            // currently falls back to inline until the per-pill routing lands.
+            // Override via EMBEDDED_AGENT_COMMERCE_SETTINGS JSON on MRT.
             mode: 'inline',
             ...(parseSettings(process.env.EMBEDDED_AGENT_COMMERCE_SETTINGS) || {})
         },