@salesforce/retail-react-app 8.1.0 → 8.2.0-nightly-20250930080219

package/CHANGELOG.md

@@ -1,3 +1,5 @@
+## v8.2.0-dev (Sep 26, 2025)
+
 ## v8.1.0 (Sep 25, 2025)
 - Updated search UX - prices, images, suggestions new layout [#3271](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3271)
 - Updated the UI for StoreDisplay component which displays pickup in-store information on different pages. [#3248](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3248)

package/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,7 +426,6 @@ 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()
 
@@ -429,7 +433,7 @@ const ShopperAgent = ({commerceAgentConfiguration, basketDoneLoading}) => {
     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

package/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,7 +310,7 @@ describe('ShopperAgent Component', () => {
             RefreshToken: null,
             Currency: 'USD',
             Language: 'en_US',
-            DomainUrl: 'https://example.com/current-page'
+            DomainUrl: 'https://example.com/us/en-US'
         })
     })
 
@@ -318,7 +318,7 @@ describe('ShopperAgent Component', () => {
         // 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,7 +364,7 @@ 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'
         })
     })
 
@@ -372,7 +372,7 @@ describe('ShopperAgent Component', () => {
         // 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()
+        })
+    })
 })

package/app/pages/cart/index.jsx

@@ -1146,7 +1146,6 @@ const Cart = () => {
                                                             />
                                                         )
                                                     )}
-
                                                     {/* Render grouped bonus products from this shipment */}
                                                     {shipmentInfo.categorizedProducts.bonusProducts
                                                         ?.filter(
@@ -1191,7 +1190,6 @@ const Cart = () => {
                                                                 }}
                                                             />
                                                         ))}
-
                                                     {/* Render SelectBonusProductsCard for each bonusDiscountLineItem */}
                                                     {basket.bonusDiscountLineItems?.map(
                                                         (bonusDiscountLineItem) => {
@@ -1241,7 +1239,6 @@ const Cart = () => {
                                                             )
                                                         }
                                                     )}
-
                                                     {/* Render orphaned bonus products (bonus products without bonusDiscountLineItemId) */}
                                                     {(() => {
                                                         const orphanedBonusProducts =

package/app/pages/checkout/index.test.js

@@ -552,7 +552,8 @@ test('Can edit address during checkout as a registered customer', async () => {
         expect(screen.getByTestId('sf-toggle-card-step-2-content')).not.toBeEmptyDOMElement()
     })
 
-    expect(screen.getByText('369 Main Street')).toBeInTheDocument()
+    const shippingAddressCard = screen.getByTestId('sf-toggle-card-step-1-content')
+    expect(within(shippingAddressCard).getByText('369 Main Street')).toBeInTheDocument()
 })
 
 test('Can add address during checkout as a registered customer', async () => {

package/app/pages/checkout/partials/shipping-methods.jsx

@@ -192,6 +192,34 @@ export default function ShippingMethods() {
         )
         if (hasNewFields) {
             form.reset(newDefaults)
+            deliveryShipments.forEach(async (shipment) => {
+                const methodId = newDefaults[`shippingMethodId_${shipment.shipmentId}`]
+                const hasMethodInBasket = shipment.shippingMethod && shipment.shippingMethod.id
+
+                // auto-submit if;
+                // - default method to submit present
+                // - the shipment doesn't already have a method in basket
+                // - user hasn't manually selected
+                if (
+                    methodId &&
+                    !hasMethodInBasket &&
+                    methodId === shippingMethods?.defaultShippingMethodId
+                ) {
+                    try {
+                        await updateShippingMethod.mutateAsync({
+                            parameters: {
+                                basketId: basket.basketId,
+                                shipmentId: shipment.shipmentId
+                            },
+                            body: {
+                                id: methodId
+                            }
+                        })
+                    } catch (error) {
+                        console.warn(error)
+                    }
+                }
+            })
         }
     }, [deliveryShipments.length, shippingMethods?.defaultShippingMethodId])
 

package/app/pages/checkout/partials/shipping-methods.test.js

@@ -12,7 +12,11 @@ import ShippingMethods from '@salesforce/retail-react-app/app/pages/checkout/par
 import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
 import {useCurrency} from '@salesforce/retail-react-app/app/hooks'
-import {useShippingMethodsForShipment, useProducts} from '@salesforce/commerce-sdk-react'
+import {
+    useShippingMethodsForShipment,
+    useProducts,
+    useShopperBasketsMutation
+} from '@salesforce/commerce-sdk-react'
 
 // Mock the hooks
 jest.mock('@salesforce/retail-react-app/app/pages/checkout/util/checkout-context')
@@ -25,6 +29,7 @@ const mockUseCurrentBasket = useCurrentBasket
 const mockUseCurrency = useCurrency
 const mockUseShippingMethodsForShipment = useShippingMethodsForShipment
 const mockUseProducts = useProducts
+const mockUseShopperBasketsMutation = useShopperBasketsMutation
 
 // Mock data
 const mockBasket = {
@@ -169,6 +174,7 @@ describe('ShippingMethods', () => {
             data: mockProductsMap,
             isLoading: false
         })
+        mockUseShopperBasketsMutation.mockReturnValue(jest.fn().mockResolvedValue({}))
     })
 
     afterEach(() => {
@@ -538,4 +544,160 @@ describe('ShippingMethods', () => {
             expect(screen.getByText('Standard Shipping')).toBeInTheDocument()
         })
     })
+
+    describe('auto-submit functionality', () => {
+        test('should auto-submit default shipping method when available', async () => {
+            const basketWithoutMethods = {
+                ...mockBasket,
+                shipments: [
+                    {
+                        ...mockBasket.shipments[0],
+                        shippingMethod: null
+                    }
+                ]
+            }
+
+            const mockShippingMethods = {
+                defaultShippingMethodId: 'default-shipping-method',
+                applicableShippingMethods: [
+                    {
+                        id: 'default-shipping-method',
+                        name: 'Default Shipping'
+                    }
+                ]
+            }
+
+            const mockMutateAsync = jest.fn().mockResolvedValue({})
+            mockUseShopperBasketsMutation.mockReturnValue({
+                updateShippingMethod: {mutateAsync: mockMutateAsync}
+            })
+
+            // after auto-submit, step should advance to PAYMENT (summary mode)
+            mockUseCheckout.mockReturnValue({
+                step: 'PAYMENT',
+                STEPS: {SHIPPING_OPTIONS: 'SHIPPING_OPTIONS', PAYMENT: 'PAYMENT'},
+                goToStep: jest.fn(),
+                goToNextStep: jest.fn()
+            })
+
+            mockUseCurrentBasket.mockReturnValue({
+                data: basketWithoutMethods,
+                derivedData: {
+                    totalShippingCost: 5.99,
+                    isMissingShippingMethod: false
+                },
+                isLoading: false
+            })
+
+            mockUseShippingMethodsForShipment.mockReturnValue({
+                data: mockShippingMethods,
+                isLoading: false
+            })
+
+            renderWithIntl(<ShippingMethods />)
+
+            // component is in SUMMARY mode (collapsed) after auto-submit
+            expect(screen.getByRole('button', {name: 'Edit Shipping Options'})).toBeInTheDocument()
+            expect(
+                screen.queryByRole('radio', {name: 'Default Shipping $5.99'})
+            ).not.toBeInTheDocument()
+            expect(
+                screen.queryByRole('button', {name: 'Continue to Payment'})
+            ).not.toBeInTheDocument()
+        })
+
+        test('should not auto-submit if shipment already has a method', async () => {
+            // Mock basket that already has a shipping method
+            const basketWithMethod = {
+                ...mockBasket,
+                shipments: [
+                    {
+                        ...mockBasket.shipments[0],
+                        shippingMethod: {
+                            id: 'existing-method',
+                            name: 'Existing Shipping'
+                        }
+                    }
+                ]
+            }
+
+            const mockUpdateShippingMethod = jest.fn().mockResolvedValue({})
+            mockUpdateShippingMethod.mutateAsync = jest.fn().mockResolvedValue({})
+
+            // Mock the mutation hook
+            mockUseShopperBasketsMutation.mockReturnValue(mockUpdateShippingMethod)
+
+            mockUseCurrentBasket.mockReturnValue({
+                data: basketWithMethod,
+                derivedData: {totalShippingCost: 0},
+                isLoading: false
+            })
+
+            mockUseShippingMethodsForShipment.mockReturnValue({
+                data: {
+                    defaultShippingMethodId: 'default-method',
+                    applicableShippingMethods: []
+                },
+                isLoading: false
+            })
+
+            renderWithIntl(<ShippingMethods />)
+
+            // no auto-submit happens
+            await waitFor(() => {
+                expect(mockUpdateShippingMethod).not.toHaveBeenCalled()
+            })
+        })
+
+        test('should not auto-submit if user has manually selected a different method', async () => {
+            const basketWithoutMethods = {
+                ...mockBasket,
+                shipments: [
+                    {
+                        ...mockBasket.shipments[0],
+                        shippingMethod: null
+                    }
+                ]
+            }
+
+            // Mock shipping methods with default
+            const mockShippingMethods = {
+                defaultShippingMethodId: 'default-method',
+                applicableShippingMethods: [
+                    {
+                        id: 'default-method',
+                        name: 'Default Shipping'
+                    },
+                    {
+                        id: 'user-selected-method',
+                        name: 'User Selected Shipping'
+                    }
+                ]
+            }
+
+            const mockUpdateShippingMethod = jest.fn().mockResolvedValue({})
+            mockUpdateShippingMethod.mutateAsync = jest.fn().mockResolvedValue({})
+
+            // Mock the mutation hook
+            mockUseShopperBasketsMutation.mockReturnValue(mockUpdateShippingMethod)
+
+            mockUseCurrentBasket.mockReturnValue({
+                data: basketWithoutMethods,
+                derivedData: {totalShippingCost: 0},
+                isLoading: false
+            })
+
+            mockUseShippingMethodsForShipment.mockReturnValue({
+                data: mockShippingMethods,
+                isLoading: false
+            })
+
+            renderWithIntl(<ShippingMethods />)
+
+            // no auto-submit happens because the form would have user-selected-method, not default-method)
+            await waitFor(() => {
+                expect(mockUpdateShippingMethod).not.toHaveBeenCalled()
+            })
+        })
+    })
 })

package/app/utils/bonus-product/cart.test.js

@@ -58,7 +58,6 @@ describe('Bonus Product Cart Utilities', () => {
             expect(result[0].quantity).toBe(2)
         })
     })
-
     describe('getBonusProductsForSpecificCartItem', () => {
         const extendedBasket = {
             bonusDiscountLineItems: [
@@ -1543,7 +1542,6 @@ describe('Bonus Product Cart Utilities', () => {
             })
         })
     })
-
     describe('findAllBonusProductItemsToRemove', () => {
         test('finds all bonus products with same productId and promotionId', () => {
             const targetBonusProduct = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/retail-react-app",
-  "version": "8.1.0",
+  "version": "8.2.0-nightly-20250930080219",
   "license": "See license in LICENSE",
   "author": "cc-pwa-kit@salesforce.com",
   "ccExtensibility": {
@@ -46,10 +46,10 @@
     "@loadable/component": "^5.15.3",
     "@peculiar/webcrypto": "^1.4.2",
     "@salesforce/cc-datacloud-typescript": "1.1.2",
-    "@salesforce/commerce-sdk-react": "4.1.0",
-    "@salesforce/pwa-kit-dev": "3.13.0",
-    "@salesforce/pwa-kit-react-sdk": "3.13.0",
-    "@salesforce/pwa-kit-runtime": "3.13.0",
+    "@salesforce/commerce-sdk-react": "4.2.0-nightly-20250930080219",
+    "@salesforce/pwa-kit-dev": "3.14.0-nightly-20250930080219",
+    "@salesforce/pwa-kit-react-sdk": "3.14.0-nightly-20250930080219",
+    "@salesforce/pwa-kit-runtime": "3.14.0-nightly-20250930080219",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.29.1",
     "@testing-library/dom": "^9.0.1",
@@ -107,5 +107,5 @@
       "maxSize": "335 kB"
     }
   ],
-  "gitHead": "aec99418a128126c0cc4bbee70086d2c83112018"
+  "gitHead": "390c30614d4655289dfe4380c0e26e8b0e5cc9ef"
 }