fix for miaw mobile ui bug

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

@@ -9,6 +9,7 @@ import React, {useEffect, useState} from 'react'
 import useScript from '@salesforce/retail-react-app/app/hooks/use-script'
 import {useUsid} from '@salesforce/commerce-sdk-react'
 import PropTypes from 'prop-types'
+import theme from '../shared/theme'
 
 const onClient = typeof window !== 'undefined'
 
@@ -105,16 +106,12 @@ function ShopperAgentWindow({commerceAgent, locale, domainUrl, basketId}) {
             })
         })
 
-        window.addEventListener('onEmbeddedMessagingConversationClosed', (e) => {
-            console.error('Error initializing Embedded Messaging: ', e)
-        })
-
-        window.addEventListener('onEmbeddedMessagingConversationOpened', (e) => {
-            console.log('Conversation opened', e)
-        })
-
-        window.addEventListener('onEmbeddedMessagingConversationEnded', (e) => {
-            console.log('Conversation ended', e)
+        window.addEventListener('onEmbeddedMessagingWindowMaximized', (e) => {
+            const zIndex = theme.zIndices.sticky + 1;
+            const embeddedMessagingFrame = document.body.querySelector('div.embedded-messaging iframe');
+            if (embeddedMessagingFrame) {
+                embeddedMessagingFrame.style.zIndex = zIndex
+            }
         })
     }, [commerceAgent])
 

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

@@ -19,6 +19,7 @@ const mockEmbeddedService = {
 }
 
 jest.mock('../../hooks/use-script', () => jest.fn().mockReturnValue({loaded: false, error: false}))
+
 jest.mock('@salesforce/commerce-sdk-react', () => {
     const originalModule = jest.requireActual('@salesforce/commerce-sdk-react')
     return {
@@ -27,6 +28,15 @@ jest.mock('@salesforce/commerce-sdk-react', () => {
     }
 })
 
+// Mock the theme
+jest.mock('../shared/theme', () => {
+    return {
+        zIndices: {
+            sticky: 1100
+        }
+    }
+})
+
 const commerceAgentSettings = {
     enabled: 'true',
     embeddedServiceName: 'MIAW_Guided_Shopper_production',
@@ -170,4 +180,34 @@ describe('ShopperAgent Component', () => {
         // Component should not render anything when there's an error
         expect(useScript).not.toHaveBeenCalled()
     })
+
+    test('should set the z-index of the embedded messaging frame to the sticky z-index + 1 when the window is maximized', async () => {
+        const mockFrame = document.createElement('div')
+        mockFrame.id = 'embeddedMessaging'
+        mockFrame.style.zIndex = '0'
+
+        // Store original querySelector
+        const originalQuerySelector = document.querySelector
+
+        // Mock querySelector to return our mock frame
+        document.body.querySelector = jest.fn().mockImplementation((selector) => {
+            if (selector === 'div.embedded-messaging iframe') {
+                return mockFrame
+            }
+            return originalQuerySelector.call(document, selector)
+        })
+
+        render(<ShopperAgent {...defaultProps} />)
+
+        // Simulate window maximize
+        await act(async () => {
+            window.dispatchEvent(new Event('onEmbeddedMessagingWindowMaximized'))
+        })
+
+        // Verify z-index was updated
+        expect(mockFrame.style.zIndex).toBe('1101') // sticky (1100) + 1
+
+        // Restore original querySelector
+        document.body.querySelector = originalQuerySelector
+    })
 })