Merge branch 'develop' into fileOwnership_stretch

Author: kumaravinashcommercecloud

packages/pwa-kit-create-app/assets/bootstrap/js/config/default.js.hbs

@@ -34,7 +34,9 @@ module.exports = {
             commerceOrgId: '',
             siteId: '',
             enableConversationContext: 'false',
-            conversationContext: []
+            conversationContext: [],
+            enableAgentFromHeader: 'false',
+            enableAgentFromFloatingButton: 'false'
         },
         // Customize how your 'site' and 'locale' are displayed in the url.
         url: {

packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/config/default.js.hbs

@@ -34,7 +34,9 @@ module.exports = {
             commerceOrgId: '',
             siteId: '',
             enableConversationContext: 'false',
-            conversationContext: []
+            conversationContext: [],
+            enableAgentFromHeader: 'false',
+            enableAgentFromFloatingButton: 'false'
         },
         // Customize settings for your url
         url: {

packages/template-mrt-reference-app/app/ssr.js

@@ -65,6 +65,7 @@ const ENVS_TO_EXPOSE = [
     'aws_lambda_log_stream_name',
     'aws_region',
     'bundle_id',
+    'mrt_env_base_path',
     // These "customer" defined environment variables are set by the Manager
     // and expected by the MRT smoke test suite
     'customer_*',
@@ -360,6 +361,19 @@ const loggingMiddleware = (req, res, next) => {
     return next()
 }
 
+const envBasePathMiddleware = (req, res, next) => {
+    const basePath = process.env.MRT_ENV_BASE_PATH
+    console.debug(`Base path: Base path: ${basePath}`)
+    console.debug(`Request path: Request path: ${req.url}`)
+    if (basePath && (req.path.startsWith(`${basePath}/`) || req.path === basePath)) {
+        req.url = req.url.slice(basePath.length) || '/'
+        console.debug(
+            `Base path: Rewrote ${basePath} -> Original url: ${req.originalUrl} -> New url: ${req.url}`
+        )
+    }
+    return next()
+}
+
 const options = {
     // The build directory (an absolute path)
     buildDir: path.resolve(process.cwd(), 'build'),
@@ -394,7 +408,8 @@ const {handler, app, server} = runtime.createHandler(options, (app) => {
 
     // Add middleware to log request and response headers
     app.use(loggingMiddleware)
-
+    // Add a middleware to consume the base path from the request path if one is set
+    app.use(envBasePathMiddleware)
     // Configure routes
     app.all('/exception', exception)
     app.get('/tls', tlsVersionTest)

packages/template-mrt-reference-app/app/ssr.test.js

@@ -17,6 +17,25 @@ const {
 const {mockClient} = require('aws-sdk-client-mock')
 const {ServiceException} = require('@smithy/smithy-client')
 
+const pathsToCheck = [
+    ['/', 200, 'application/json; charset=utf-8'],
+    ['/tls', 200, 'application/json; charset=utf-8'],
+    ['/exception', 500, 'text/html; charset=utf-8'],
+    ['/cache', 200, 'application/json; charset=utf-8'],
+    ['/cookie', 200, 'application/json; charset=utf-8'],
+    ['/set-response-headers', 200, 'application/json; charset=utf-8'],
+    ['/isolation', 200, 'application/json; charset=utf-8'],
+    ['/memtest', 200, 'application/json; charset=utf-8'],
+    ['/streaming-large', 200, 'application/json; charset=utf-8']
+]
+const pathsToCheckWithBasePath = (basePath) => {
+    return pathsToCheck.map((pathStatusContentType) => [
+        basePath + pathStatusContentType[0],
+        pathStatusContentType[1],
+        pathStatusContentType[2]
+    ])
+}
+
 class AccessDenied extends ServiceException {
     constructor(options) {
         super({...options, name: 'AccessDenied'})
@@ -53,22 +72,39 @@ describe('server', () => {
         process.env = originalEnv
         jest.restoreAllMocks()
     })
-    test.each([
-        ['/', 200, 'application/json; charset=utf-8'],
-        ['/tls', 200, 'application/json; charset=utf-8'],
-        ['/exception', 500, 'text/html; charset=utf-8'],
-        ['/cache', 200, 'application/json; charset=utf-8'],
-        ['/cookie', 200, 'application/json; charset=utf-8'],
-        ['/multi-cookies', 200, 'application/json; charset=utf-8'],
-        ['/set-response-headers', 200, 'application/json; charset=utf-8'],
-        ['/isolation', 200, 'application/json; charset=utf-8'],
-        ['/memtest', 200, 'application/json; charset=utf-8'],
-        ['/streaming-large', 200, 'application/json; charset=utf-8']
-    ])('Path %p should render correctly', (path, expectedStatus, expectedContentType) => {
-        return request(app)
-            .get(path)
-            .expect(expectedStatus)
-            .expect('Content-Type', expectedContentType)
+    test.each(pathsToCheck)(
+        'Path %p should render correctly',
+        (path, expectedStatus, expectedContentType) => {
+            return request(app)
+                .get(path)
+                .expect(expectedStatus)
+                .expect('Content-Type', expectedContentType)
+        }
+    )
+
+    test.each(pathsToCheckWithBasePath('/test-base-path'))(
+        'Path %p should render correctly',
+        (path, expectedStatus, expectedContentType) => {
+            process.env.MRT_ENV_BASE_PATH = '/test-base-path'
+            return request(app)
+                .get(path)
+                .expect(expectedStatus)
+                .expect('Content-Type', expectedContentType)
+        }
+    )
+
+    test('Path /echo should work with base path', async () => {
+        const basePath = '/test-base-path'
+        process.env.MRT_ENV_BASE_PATH = basePath
+        const response = await request(app).get(`${basePath}/echo?x=foo&y=bar`)
+        expect(response.status).toBe(200)
+        // preserves query parameters
+        expect(response.body.query.x).toBe('foo')
+        expect(response.body.query.y).toBe('bar')
+        // path is the path after the base path
+        expect(response.body.path).toBe('/echo')
+        // base path env var present in response body
+        expect(response.body.env.MRT_ENV_BASE_PATH).toBe(basePath)
     })
 
     test('Path "/cache" has Cache-Control set', () => {

packages/template-retail-react-app/app/components/otp-auth/index.jsx

@@ -12,6 +12,7 @@ import {
     Button,
     Input,
     SimpleGrid,
+    Spinner,
     Stack,
     Text,
     HStack,
@@ -271,6 +272,17 @@ const OtpAuth = ({
                                 ))}
                             </SimpleGrid>
 
+                            {/* Loading spinner during verification */}
+                            {isVerifying && (
+                                <Spinner
+                                    size="sm"
+                                    color="blue.500"
+                                    role="status"
+                                    aria-live="polite"
+                                    data-testid="otp-verifying-spinner"
+                                />
+                            )}
+
                             {/* Error message */}
                             {error && (
                                 <Text fontSize="sm" color="red.500" textAlign="center">
@@ -290,7 +302,7 @@ const OtpAuth = ({
                             )}
 
                             {/* Buttons */}
-                            <HStack spacing={4} width="100%" justifyContent="flex-end">
+                            <HStack spacing={4} width="100%" justifyContent="center">
                                 {!hideCheckoutAsGuestButton && (
                                     <Button
                                         onClick={handleCheckoutAsGuest}

packages/template-retail-react-app/app/components/otp-auth/index.test.js

@@ -246,6 +246,41 @@ describe('OtpAuth', () => {
             await user.type(otpInputs[7], '8')
             expect(otpInputs[7]).toHaveFocus()
         })
+
+        test('shows spinner while OTP is being verified', async () => {
+            const deferred = {}
+            const verifyingPromise = new Promise((resolve) => {
+                deferred.resolve = resolve
+            })
+            const mockVerify = jest.fn().mockReturnValue(verifyingPromise)
+
+            const user = userEvent.setup()
+            renderWithProviders(
+                <OtpAuth
+                    isOpen={true}
+                    onClose={mockOnClose}
+                    form={mockForm}
+                    handleOtpVerification={mockVerify}
+                    handleSendEmailOtp={mockHandleSendEmailOtp}
+                />
+            )
+
+            expect(screen.queryByTestId('otp-verifying-spinner')).not.toBeInTheDocument()
+
+            const otpInputs = screen.getAllByRole('textbox')
+            fireEvent.paste(otpInputs[0], {
+                clipboardData: {getData: () => '12345678'}
+            })
+
+            await waitFor(() => {
+                expect(screen.getByTestId('otp-verifying-spinner')).toBeInTheDocument()
+            })
+
+            deferred.resolve({success: true})
+            await waitFor(() => {
+                expect(screen.queryByTestId('otp-verifying-spinner')).not.toBeInTheDocument()
+            })
+        })
     })
 
     describe('Keyboard Navigation', () => {

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

@@ -175,7 +175,8 @@ const ShopperAgentWindow = ({commerceAgentConfiguration, domainUrl}) => {
         commerceOrgId,
         siteId,
         enableConversationContext = 'false',
-        conversationContext = []
+        conversationContext = [],
+        enableAgentFromFloatingButton = 'true'
     } = commerceAgentConfiguration
 
     // User session identifier hook
@@ -352,7 +353,8 @@ const ShopperAgentWindow = ({commerceAgentConfiguration, domainUrl}) => {
         embeddedServiceEndpoint,
         scrt2Url,
         locale.id,
-        refreshToken
+        refreshToken,
+        enableAgentFromFloatingButton
     )
 
     // This component doesn't render visible UI, only manages the messaging service

packages/template-retail-react-app/app/components/shopper-agent/index.test.js

@@ -509,7 +509,31 @@ describe('ShopperAgent Component', () => {
             'https://test.salesforce.com', // embeddedServiceEndpoint
             'https://test.salesforce.com/scrt2.js', // scrt2Url
             'en-US', // locale.id
-            'test-refresh-token' // refreshToken
+            'test-refresh-token', // refreshToken
+            'true' // enableAgentFromFloatingButton (default)
+        )
+    })
+
+    test('should call useMiaw with enableAgentFromFloatingButton false when configured', () => {
+        const props = {
+            ...defaultProps,
+            commerceAgentConfiguration: {
+                ...commerceAgentSettings,
+                enableAgentFromFloatingButton: 'false'
+            }
+        }
+
+        render(<ShopperAgent {...props} />)
+
+        expect(mockedUseMiaw).toHaveBeenCalledWith(
+            {loaded: true, error: false},
+            'test-org-id',
+            'test-service',
+            'https://test.salesforce.com',
+            'https://test.salesforce.com/scrt2.js',
+            'en-US',
+            'test-refresh-token',
+            'false' // enableAgentFromFloatingButton
         )
     })
 

packages/template-retail-react-app/app/hooks/use-miaw.js

@@ -73,13 +73,15 @@ const normalizeLocaleToSalesforce = (locale) => {
  * @param {string} embeddedServiceDeploymentUrl - URL of the embedded service deployment
  * @param {string} scrt2Url - SCRT2 URL for the embedded messaging service
  * @param {string} locale - BCP-47 locale for the embedded messaging service
+ * @param {string} [enableAgentFromFloatingButton='true'] - When 'false', hides the floating chat button on load
  */
 const initEmbeddedMessaging = (
     salesforceOrgId,
     embeddedServiceDeploymentName,
     embeddedServiceDeploymentUrl,
     scrt2Url,
-    locale
+    locale,
+    enableAgentFromFloatingButton = 'true'
 ) => {
     try {
         if (
@@ -93,6 +95,9 @@ const initEmbeddedMessaging = (
             window.embeddedservice_bootstrap.settings.language = salesforceLanguage
             window.embeddedservice_bootstrap.settings.disableStreamingResponses = true
             window.embeddedservice_bootstrap.settings.enableUserInputForConversationWithBot = false
+            // Hide floating chat button when enableAgentFromFloatingButton is 'false'
+            window.embeddedservice_bootstrap.settings.hideChatButtonOnLoad =
+                enableAgentFromFloatingButton !== 'true'
             window.embeddedservice_bootstrap.init(
                 salesforceOrgId,
                 embeddedServiceDeploymentName,
@@ -117,6 +122,7 @@ const initEmbeddedMessaging = (
  * @param {string} scrt2Url - SCRT2 URL for the embedded messaging service
  * @param {string} locale - BCP-47 locale for the embedded messaging service
  * @param {string} refreshToken - Refresh token for the embedded messaging service
+ * @param {string} [enableAgentFromFloatingButton='true'] - When 'false', hides the floating chat button on load
  */
 const useMiaw = (
     scriptLoadStatus,
@@ -125,7 +131,8 @@ const useMiaw = (
     embeddedServiceDeploymentUrl,
     scrt2Url,
     locale,
-    refreshToken
+    refreshToken,
+    enableAgentFromFloatingButton = 'true'
 ) => {
     useEffect(() => {
         if (scriptLoadStatus.loaded && !scriptLoadStatus.error) {
@@ -135,7 +142,7 @@ const useMiaw = (
                 embeddedServiceDeploymentUrl,
                 scrt2Url,
                 locale,
-                refreshToken
+                enableAgentFromFloatingButton
             )
         }
     }, [
@@ -145,7 +152,8 @@ const useMiaw = (
         embeddedServiceDeploymentUrl,
         scrt2Url,
         locale,
-        refreshToken
+        refreshToken,
+        enableAgentFromFloatingButton
     ])
 }
 

packages/template-retail-react-app/app/hooks/use-miaw.test.js

@@ -141,6 +141,7 @@ describe('useMiaw hook', () => {
         expect(
             window.embeddedservice_bootstrap.settings.enableUserInputForConversationWithBot
         ).toBe(false)
+        expect(window.embeddedservice_bootstrap.settings.hideChatButtonOnLoad).toBe(false)
         expect(window.embeddedservice_bootstrap.init).toHaveBeenCalledWith(
             'test-org-id',
             'test-deployment',
@@ -167,6 +168,18 @@ describe('useMiaw hook', () => {
         expect(window.embeddedservice_bootstrap.init).not.toHaveBeenCalled()
     })
 
+    test('should hide floating chat button when enableAgentFromFloatingButton is false', () => {
+        renderHook(() =>
+            useMiaw(
+                mockScriptLoadStatus,
+                ...Object.values(mockParams),
+                'false' // enableAgentFromFloatingButton
+            )
+        )
+
+        expect(window.embeddedservice_bootstrap.settings.hideChatButtonOnLoad).toBe(true)
+    })
+
     test('should handle different locale mappings', () => {
         const testCases = [
             {locale: 'en-US', expected: 'en_US'},