fix: localize url for checkout button (#3355)

Author: mmccullom-sf

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

@@ -259,6 +259,11 @@ const ShopperAgentWindow = ({commerceAgentConfiguration, domainUrl}) => {
                             conversationContext
                         })
                     }
+                } else if (event.data.type === 'lwc.getDomainUrl') {
+                    // Handle domain URL request
+                    sendConversationContext('conversational.domainUrl', {
+                        domainUrl
+                    })
                 }
             } catch (error) {
                 console.error('Error handling Miaw event:', error)
@@ -421,15 +426,14 @@ const ShopperAgent = ({commerceAgentConfiguration, basketDoneLoading}) => {
     const {enabled} = commerceAgentConfiguration
 
     // Get current location and app origin for domain URL
-    const location = useLocation()
     const appOrigin = useAppOrigin()
     const {buildUrl} = useMultiSite()
 
     // Check if agent is enabled and running on client side
     const isShopperAgentEnabled = isEnabled(enabled)
 
     // Build the current domain URL
-    const domainUrl = `${appOrigin}${buildUrl(location.pathname)}`
+    const domainUrl = `${appOrigin}${buildUrl('')}`
 
     // Conditional rendering: only render when all conditions are met
     // 1. Agent is enabled and running on client

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

@@ -139,7 +139,7 @@ describe('ShopperAgent Component', () => {
         // Mock useMultiSite hook with proper structure
         mockedUseMultiSite.mockReturnValue({
             locale: {id: 'en-US', preferredCurrency: 'USD'},
-            buildUrl: jest.fn((path) => path)
+            buildUrl: jest.fn(() => '/us/en-US')
         })
 
         // Mock useTheme hook
@@ -239,7 +239,7 @@ describe('ShopperAgent Component', () => {
             RefreshToken: 'test-refresh-token',
             Currency: 'USD',
             Language: 'en_US',
-            DomainUrl: 'https://example.com/current-page'
+            DomainUrl: 'https://example.com/us/en-US'
         })
     })
 
@@ -263,7 +263,7 @@ describe('ShopperAgent Component', () => {
             RefreshToken: 'initial-token',
             Currency: 'USD',
             Language: 'en_US',
-            DomainUrl: 'https://example.com/current-page'
+            DomainUrl: 'https://example.com/us/en-US'
         })
 
         // Clear mock and change refresh token
@@ -287,7 +287,7 @@ describe('ShopperAgent Component', () => {
             RefreshToken: 'updated-token',
             Currency: 'USD',
             Language: 'en_US',
-            DomainUrl: 'https://example.com/current-page'
+            DomainUrl: 'https://example.com/us/en-US'
         })
     })
 
@@ -310,15 +310,15 @@ describe('ShopperAgent Component', () => {
             RefreshToken: null,
             Currency: 'USD',
             Language: 'en_US',
-            DomainUrl: 'https://example.com/current-page'
+            DomainUrl: 'https://example.com/us/en-US'
         })
     })
 
     test('should update prechat fields when currency changes', async () => {
         // Mock useMultiSite to return different currency values
         mockedUseMultiSite.mockReturnValue({
             locale: {id: 'en-US', preferredCurrency: 'USD'},
-            buildUrl: jest.fn((path) => path)
+            buildUrl: jest.fn(() => '/us/en-US')
         })
 
         render(<ShopperAgent {...defaultProps} />)
@@ -337,14 +337,14 @@ describe('ShopperAgent Component', () => {
             RefreshToken: 'test-refresh-token',
             Currency: 'USD',
             Language: 'en_US',
-            DomainUrl: 'https://example.com/current-page'
+            DomainUrl: 'https://example.com/us/en-US'
         })
 
         // Clear mock and change currency to EUR
         mockEmbeddedService.prechatAPI.setHiddenPrechatFields.mockClear()
         mockedUseMultiSite.mockReturnValue({
             locale: {id: 'en-US', preferredCurrency: 'EUR'},
-            buildUrl: jest.fn((path) => path)
+            buildUrl: jest.fn(() => '/us/en-US')
         })
 
         // Re-render with new currency
@@ -364,15 +364,15 @@ describe('ShopperAgent Component', () => {
             RefreshToken: 'test-refresh-token',
             Currency: 'EUR',
             Language: 'en_US',
-            DomainUrl: 'https://example.com/current-page'
+            DomainUrl: 'https://example.com/us/en-US'
         })
     })
 
     test('should update prechat fields when locale changes', async () => {
         // Mock useMultiSite to return different locale values
         mockedUseMultiSite.mockReturnValue({
             locale: {id: 'en-US', preferredCurrency: 'USD'},
-            buildUrl: jest.fn((path) => path)
+            buildUrl: jest.fn(() => '/us/en-US')
         })
 
         render(<ShopperAgent {...defaultProps} />)
@@ -391,14 +391,14 @@ describe('ShopperAgent Component', () => {
             RefreshToken: 'test-refresh-token',
             Currency: 'USD',
             Language: 'en_US',
-            DomainUrl: 'https://example.com/current-page'
+            DomainUrl: 'https://example.com/us/en-US'
         })
 
         // Clear mock and change locale to en-GB
         mockEmbeddedService.prechatAPI.setHiddenPrechatFields.mockClear()
         mockedUseMultiSite.mockReturnValue({
             locale: {id: 'en-GB', preferredCurrency: 'GBP'},
-            buildUrl: jest.fn((path) => path)
+            buildUrl: jest.fn(() => '/us/en-US')
         })
 
         // Re-render with new locale
@@ -418,7 +418,7 @@ describe('ShopperAgent Component', () => {
             RefreshToken: 'test-refresh-token',
             Currency: 'GBP',
             Language: 'en_GB',
-            DomainUrl: 'https://example.com/current-page'
+            DomainUrl: 'https://example.com/us/en-US'
         })
     })
 
@@ -449,7 +449,7 @@ describe('ShopperAgent Component', () => {
             RefreshToken: 'test-refresh-token',
             Currency: 'USD',
             Language: 'en_US',
-            DomainUrl: 'https://example.com/current-page'
+            DomainUrl: 'https://example.com/us/en-US'
         })
     })
 
@@ -560,7 +560,7 @@ describe('ShopperAgent Component', () => {
                 RefreshToken: 'test-refresh-token',
                 Currency: 'USD',
                 Language: 'en_US',
-                DomainUrl: 'https://example.com/current-page'
+                DomainUrl: 'https://example.com/us/en-US'
             })
         })
 
@@ -585,7 +585,7 @@ describe('ShopperAgent Component', () => {
                 RefreshToken: 'test-refresh-token',
                 Currency: 'USD',
                 Language: 'en_US',
-                DomainUrl: 'https://example.com/current-page'
+                DomainUrl: 'https://example.com/us/en-US'
             })
         })
 
@@ -597,39 +597,6 @@ describe('ShopperAgent Component', () => {
             render(<ShopperAgent {...props} />)
             expect(screen.queryByTestId('shopper-agent')).toBeInTheDocument()
         })
-
-        test('should handle complex domainUrl with query parameters and fragments', async () => {
-            // Mock complex location data
-            mockUseLocation.mockReturnValue({
-                pathname: '/products/shoes',
-                search: '?color=red&size=10',
-                hash: '#reviews'
-            })
-            mockUseAppOrigin.mockReturnValue('https://test-store.com')
-
-            const props = {
-                ...defaultProps
-            }
-
-            render(<ShopperAgent {...props} />)
-
-            // Trigger the onEmbeddedMessagingReady event
-            await act(async () => {
-                window.dispatchEvent(new Event('onEmbeddedMessagingReady'))
-            })
-
-            expect(mockEmbeddedService.prechatAPI.setHiddenPrechatFields).toHaveBeenCalledWith({
-                SiteId: 'RefArchGlobal',
-                Locale: 'en-US',
-                OrganizationId: 'test-commerce-org-id',
-                UsId: 'test-usid',
-                IsCartMgmtSupported: 'true',
-                RefreshToken: 'test-refresh-token',
-                Currency: 'USD',
-                Language: 'en_US',
-                DomainUrl: 'https://test-store.com/products/shoes'
-            })
-        })
     })
 
     describe('Conversation Context Functionality', () => {
@@ -987,4 +954,78 @@ describe('ShopperAgent Component', () => {
             expect(() => render(<ShopperAgent {...props} />)).not.toThrow()
         })
     })
+
+    describe('Domain URL Event Functionality', () => {
+        beforeEach(() => {
+            // Mock postMessage for iframe communication
+            global.postMessage = jest.fn()
+
+            // Mock document.querySelector for iframe
+            const mockIframe = {
+                src: 'https://test.salesforce.com/iframe',
+                contentWindow: {
+                    postMessage: jest.fn()
+                }
+            }
+            jest.spyOn(document, 'querySelector').mockReturnValue(mockIframe)
+        })
+
+        afterEach(() => {
+            jest.restoreAllMocks()
+        })
+
+        test('should handle lwc.getDomainUrl event and send domain URL', async () => {
+            render(<ShopperAgent {...defaultProps} />)
+
+            // Mock iframe for postMessage
+            const mockIframe = {
+                src: 'https://test.salesforce.com/iframe',
+                contentWindow: {
+                    postMessage: jest.fn()
+                }
+            }
+            jest.spyOn(document, 'querySelector').mockReturnValue(mockIframe)
+
+            // Simulate MIAW event requesting domain URL
+            const mockEvent = {
+                source: {postMessage: jest.fn()},
+                data: {type: 'lwc.getDomainUrl'}
+            }
+
+            await act(async () => {
+                window.dispatchEvent(new MessageEvent('message', mockEvent))
+            })
+
+            // Verify postMessage was called with domain URL
+            expect(mockIframe.contentWindow.postMessage).toHaveBeenCalledWith(
+                {
+                    type: 'conversational.domainUrl',
+                    payload: {
+                        domainUrl: 'https://example.com/us/en-US'
+                    }
+                },
+                'https://test.salesforce.com'
+            )
+        })
+
+        test('should handle lwc.getDomainUrl event properly when iframe not found', async () => {
+            render(<ShopperAgent {...defaultProps} />)
+
+            // Mock querySelector to return null (iframe not found)
+            jest.spyOn(document, 'querySelector').mockReturnValue(null)
+
+            // Simulate MIAW event
+            const mockEvent = {
+                source: {postMessage: jest.fn()},
+                data: {type: 'lwc.getDomainUrl'}
+            }
+
+            await act(async () => {
+                window.dispatchEvent(new MessageEvent('message', mockEvent))
+            })
+
+            // Should handle missing iframe gracefully without throwing
+            expect(() => render(<ShopperAgent {...defaultProps} />)).not.toThrow()
+        })
+    })
 })