@salesforce/retail-react-app 7.1.0-preview.0 → 8.0.0-dev

package/CHANGELOG.md

@@ -1,8 +1,13 @@
-## v7.1.0-preview.0 (Aug 01, 2025)
-
+## v8.0.0-dev (August 19, 2025)
 - Add support for environment level base paths on /mobify routes [#2892](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2892)
-
+- Fix private client endpoint prop name [#3177](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3177)
 - This feature introduces an AI-powered shopping assistant that integrates Salesforce Embedded Messaging Service with PWA Kit applications. The shopper agent provides real-time chat support, search assistance, and personalized shopping guidance directly within the e-commerce experience. [#2658](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2658)
+- Added support for Multi-Ship [#3056](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3056)
+- The feature toggle for partial hydration is now found in the config file (`config.app.partialHydrationEnabled`) [#3058](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3058)
+- Mask user not found messages to prevent user enumeration from passwordless login [#3113](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3113)
+- [Bugfix] Pin `@chakra-ui/react` version to 2.7.0 to avoid breaking changes from 2.10.9 [#2658](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2658)
+- Introduce optional prop `hybridAuthEnabled` to control Hybrid Auth specific behaviors in commerce-sdk-react [#3151](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3151)
+- Inject sfdc_user_agent request header into all SCAPI requests for debugging and metrics prupose [#3183](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3183)
 
 ## v7.0.0 (July 22, 2025)
 
@@ -28,7 +33,6 @@
 - Add Data Cloud partyIdentification events and improve error handling [#2811](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2811)
 - Introduce the cursor rules to assist project developers [#2820](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2820)
 
-
 ## v6.1.0 (May 22, 2025)
 
 - Fix hreflang alternate links [#2269](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2269)

package/app/components/_app/index.jsx

@@ -52,6 +52,7 @@ import Island from '@salesforce/retail-react-app/app/components/island'
 
 // Hooks
 import {AuthModal, useAuthModal} from '@salesforce/retail-react-app/app/hooks/use-auth-modal'
+import {useStoreLocatorModal} from '@salesforce/retail-react-app/app/hooks/use-store-locator'
 import {
     DntNotification,
     useDntNotification
@@ -140,15 +141,16 @@ const App = (props) => {
     const authModal = useAuthModal()
     const dntNotification = useDntNotification()
     const {site, locale, buildUrl} = useMultiSite()
+    const {
+        isOpen: isStoreLocatorOpen,
+        onOpen: onOpenStoreLocator,
+        onClose: onCloseStoreLocator
+    } = useStoreLocatorModal()
+    const storeLocatorEnabled = getConfig()?.app?.storeLocatorEnabled ?? STORE_LOCATOR_IS_ENABLED
 
     const [isOnline, setIsOnline] = useState(true)
     const styles = useStyleConfig('App')
     const {isOpen, onOpen, onClose} = useDisclosure()
-    const {
-        isOpen: isOpenStoreLocator,
-        onOpen: onOpenStoreLocator,
-        onClose: onCloseStoreLocator
-    } = useDisclosure()
 
     const targetLocale = getTargetLocale({
         getUserPreferredLocales: () => {
@@ -374,9 +376,9 @@ const App = (props) => {
 
                         <Box id="app" display="flex" flexDirection="column" flex={1}>
                             <SkipNavLink zIndex="skipLink">Skip to Content</SkipNavLink>
-                            {STORE_LOCATOR_IS_ENABLED && (
+                            {storeLocatorEnabled && (
                                 <StoreLocatorModal
-                                    isOpen={isOpenStoreLocator}
+                                    isOpen={isStoreLocatorOpen}
                                     onClose={onCloseStoreLocator}
                                 />
                             )}

package/app/components/_app/index.test.js

@@ -26,12 +26,12 @@ jest.mock('../../hooks/use-update-shopper-context', () => ({
 
 let windowSpy
 
-const mockUpdateDNT = jest.fn()
+const mockUpdateDnt = jest.fn()
 jest.mock('@salesforce/commerce-sdk-react', () => {
     const originalModule = jest.requireActual('@salesforce/commerce-sdk-react')
     return {
         ...originalModule,
-        useDNT: () => ({selectedDnt: undefined, updateDNT: mockUpdateDNT})
+        useDNT: () => ({selectedDnt: undefined, updateDnt: mockUpdateDnt})
     }
 })
 

package/app/components/_app-config/index.jsx

@@ -40,6 +40,7 @@ import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
 import {withReactQuery} from '@salesforce/pwa-kit-react-sdk/ssr/universal/components/with-react-query'
 import {useCorrelationId} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hooks'
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
+import {generateSfdcUserAgent} from '@salesforce/retail-react-app/app/utils/sfdc-user-agent-utils'
 import {
     DEFAULT_DNT_STATE,
     STORE_LOCATOR_RADIUS,
@@ -51,6 +52,8 @@ import {
     STORE_LOCATOR_SUPPORTED_COUNTRIES
 } from '@salesforce/retail-react-app/app/constants'
 
+const sfdcUserAgent = generateSfdcUserAgent()
+
 /**
  * Use the AppConfig component to inject extra arguments into the getProps
  * methods for all Route Components in the app – typically you'd want to do this
@@ -62,7 +65,8 @@ import {
 const AppConfig = ({children, locals = {}}) => {
     const {correlationId} = useCorrelationId()
     const headers = {
-        'correlation-id': correlationId
+        'correlation-id': correlationId,
+        sfdc_user_agent: sfdcUserAgent
     }
 
     const commerceApiConfig = locals.appConfig.commerceAPI
@@ -102,10 +106,12 @@ const AppConfig = ({children, locals = {}}) => {
             proxy={proxy}
             headers={headers}
             defaultDnt={DEFAULT_DNT_STATE}
-            // Uncomment 'enablePWAKitPrivateClient' to use SLAS private client login flows.
+            // Set 'enablePWAKitPrivateClient' to true to use SLAS private client login flows.
             // Make sure to also enable useSLASPrivateClient in ssr.js when enabling this setting.
             enablePWAKitPrivateClient={false}
-            slasPrivateClientProxyEndpoint={slasPrivateClientProxyEndpoint}
+            privateClientProxyEndpoint={slasPrivateClientProxyEndpoint}
+            // Uncomment 'hybridAuthEnabled' if the current site has Hybrid Auth enabled. Do NOT set this flag for hybrid storefronts using Plugin SLAS.
+            // hybridAuthEnabled={true}
             logger={createLogger({packageName: 'commerce-sdk-react'})}
         >
             <MultiSiteProvider site={locals.site} locale={locals.locale} buildUrl={locals.buildUrl}>

package/app/components/drawer-menu/drawer-menu.jsx

@@ -60,6 +60,7 @@ import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
 
 import {STORE_LOCATOR_IS_ENABLED} from '@salesforce/retail-react-app/app/constants'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 // The FONT_SIZES and FONT_WEIGHTS constants are used to control the styling for
 // the accordion buttons as their current depth. In the below definition we assign
 // values for depths 0 - 3, any depth deeper than that will use the default styling.
@@ -100,6 +101,7 @@ const DrawerMenu = ({
     const socialIconVariant = useBreakpointValue({base: 'flex', md: 'flex-start'})
     const {site, buildUrl} = useMultiSite()
     const {l10n} = site
+    const storeLocatorEnabled = getConfig()?.app?.storeLocatorEnabled ?? STORE_LOCATOR_IS_ENABLED
     const [showLoading, setShowLoading] = useState(false)
     const [ariaBusy, setAriaBusy] = useState('true')
     const logout = useAuthHelper(AuthHelpers.Logout)
@@ -274,7 +276,7 @@ const DrawerMenu = ({
                                     </Link>
                                 )}
                             </Box>
-                            {STORE_LOCATOR_IS_ENABLED && (
+                            {storeLocatorEnabled && (
                                 <Box {...styles.actionsItem}>
                                     <Link to={STORE_LOCATOR_HREF}>
                                         <HStack>

package/app/components/footer/index.jsx

@@ -31,6 +31,7 @@ import LocaleText from '@salesforce/retail-react-app/app/components/locale-text'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
 import styled from '@emotion/styled'
 import {STORE_LOCATOR_IS_ENABLED} from '@salesforce/retail-react-app/app/constants'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 
 const [StylesProvider, useStyles] = createStylesContext('Footer')
 const Footer = ({...otherProps}) => {
@@ -39,6 +40,7 @@ const Footer = ({...otherProps}) => {
     const [locale, setLocale] = useState(intl.locale)
     const {site, buildUrl} = useMultiSite()
     const {l10n} = site
+    const storeLocatorEnabled = getConfig()?.app?.storeLocatorEnabled ?? STORE_LOCATOR_IS_ENABLED
     const supportedLocaleIds = l10n?.supportedLocales.map((locale) => locale.id)
     const showLocaleSelector = supportedLocaleIds?.length > 1
 
@@ -51,7 +53,7 @@ const Footer = ({...otherProps}) => {
     })
     const makeOurCompanyLinks = () => {
         const links = []
-        if (STORE_LOCATOR_IS_ENABLED)
+        if (storeLocatorEnabled)
             links.push({
                 href: '/store-locator',
                 text: intl.formatMessage({

package/app/components/header/index.jsx

@@ -51,6 +51,7 @@ import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-
 import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/components/responsive'
 import {isHydrated, noop} from '@salesforce/retail-react-app/app/utils/utils'
 import {STORE_LOCATOR_IS_ENABLED} from '@salesforce/retail-react-app/app/constants'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 const IconButtonWithRegistration = withRegistration(IconButton)
 
 /**
@@ -117,6 +118,7 @@ const Header = ({
     const {isRegistered} = useCustomerType()
     const logout = useAuthHelper(AuthHelpers.Logout)
     const navigate = useNavigation()
+    const storeLocatorEnabled = getConfig()?.app?.storeLocatorEnabled ?? STORE_LOCATOR_IS_ENABLED
     const {
         getButtonProps: getAccountMenuButtonProps,
         getDisclosureProps: getAccountMenuDisclosureProps,
@@ -311,7 +313,7 @@ const Header = ({
                         {...styles.wishlistIcon}
                         onClick={onWishlistClick}
                     />
-                    {STORE_LOCATOR_IS_ENABLED && (
+                    {storeLocatorEnabled && (
                         <IconButton
                             aria-label={intl.formatMessage({
                                 defaultMessage: 'Store Locator',

package/app/components/header/index.test.js

@@ -240,7 +240,7 @@ test('shows loading spinner during sign out process', async () => {
 
 test('handles keyboard navigation with Tab+Shift in account menu', async () => {
     // Test keyboard navigation without requiring auth
-    const {user} = renderWithProviders(<Header />)
+    renderWithProviders(<Header />)
 
     // Just verify the component renders without errors when keyboard events occur on any element
     const accountIcon = screen.getByLabelText('My Account')
@@ -250,7 +250,7 @@ test('handles keyboard navigation with Tab+Shift in account menu', async () => {
 })
 
 test('handles mouse leave events without crashing', async () => {
-    const {user} = renderWithProviders(<Header />)
+    renderWithProviders(<Header />)
 
     const accountIcon = screen.getByLabelText('My Account')
 

package/app/components/island/README.md

@@ -45,7 +45,7 @@ This delay can be achieved using various `hydrateOn` strategies:
 3. `hydrateOn={'visible'}`: Useful for lower-priority UI elements that don’t need to be immediately interactive. Hydration occurs once the component has [entered the user’s viewport](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver). As a result, such an element doesn’t get hydrated at all if the user never sees it.
 4. `hydrateOn={'off'}`: Useful for non-interactive UI elements or lower-priority UI elements to completely suppress the hydration for. On the surface, this behavior overlaps in certain ways with Server Components. However, there are fundamental differences. While server components don’t contribute any JavaScript to what’s delivered to the client, islands are client-oriented constructs, and thus the JavaScript for a non-hydrated section is still fully transmitted. After all, `hydrateOn` can be dynamically updated at any time in case of using a binding property instead of a hard-coded value. An initial value of `off` therefore opens up the possibilities for completely custom hydration triggers. Furthermore, if Server Components aren’t supported by the runtime used, `hydrateOn={'off'}` offers a simple way to at least reduce the hydration overhead for certain non-interactive areas.
 
-> **🔀️ Important:** Partial hydration support is put behind a feature toggle that can be turned on by setting the constant `PARTIAL_HYDRATION_ENABLED` to `true` (see `@salesforce/retail-react-app/app/constants`).
+> **🔀️ Important:** Partial hydration support is put behind a feature toggle that can be turned on by setting `partialHydrationEnabled` to `true` (see `@salesforce/retail-react-app/config/default.js`).
 
 > **ℹ️️ Note:** `<Island/>` components only influence the hydration behavior of server-rendered content. Once an application bootstrapped on the client and returned to SPA mode, any subsequent client-side rendering is not impacted by the `<Island/>` components anymore.
 

package/app/components/island/index.jsx

@@ -19,6 +19,7 @@ import React, {
 import PropTypes from 'prop-types'
 import {isServer} from '@salesforce/retail-react-app/app/components/island/utils'
 import {PARTIAL_HYDRATION_ENABLED} from '@salesforce/retail-react-app/app/constants'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 
 const IslandContext = createContext(null)
 
@@ -84,7 +85,8 @@ function findChildren(children, componentType) {
  */
 function Island(props) {
     const {children} = props
-    if (!PARTIAL_HYDRATION_ENABLED) {
+    const isEnabled = getConfig()?.app?.partialHydrationEnabled ?? PARTIAL_HYDRATION_ENABLED // in a backward compatible way
+    if (!isEnabled) {
         return <>{children}</>
     }
 

package/app/components/island/index.test.js

@@ -6,17 +6,22 @@
  */
 /* eslint-disable no-import-assign */
 import React from 'react'
-import {act, render, screen} from '@testing-library/react'
+import {act, render, screen, cleanup} from '@testing-library/react'
 import {renderToString} from 'react-dom/server'
 import Island from '@salesforce/retail-react-app/app/components/island'
 import {isServer} from '@salesforce/retail-react-app/app/components/island/utils'
 import * as constants from '@salesforce/retail-react-app/app/constants'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 
 jest.mock('@salesforce/retail-react-app/app/components/island/utils', () => ({
     ...jest.requireActual('@salesforce/retail-react-app/app/components/island/utils'),
     isServer: jest.fn()
 }))
 
+jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => ({
+    getConfig: jest.fn()
+}))
+
 // Setup global mocks
 const mockRequestIdleCallback = jest.fn()
 const mockCancelIdleCallback = jest.fn()
@@ -54,6 +59,13 @@ describe('Island Component', () => {
 
     beforeEach(() => {
         jest.clearAllMocks()
+        // Set default config to enable partial hydration
+        getConfig.mockReturnValue({
+            app: {
+                partialHydrationEnabled: true
+            }
+        })
+        // Keep the constant as fallback for backward compatibility tests
         Reflect.set(constants, 'PARTIAL_HYDRATION_ENABLED', true)
         global.requestIdleCallback = mockRequestIdleCallback
         global.cancelIdleCallback = mockCancelIdleCallback
@@ -70,8 +82,12 @@ describe('Island Component', () => {
             isServer.mockReturnValue(true)
         })
 
-        test('should not render an island at all if constant "PARTIAL_HYDRATION_ENABLED" is false', () => {
-            Reflect.set(constants, 'PARTIAL_HYDRATION_ENABLED', false)
+        test('should not render an island at all if config "partialHydrationEnabled" is false', () => {
+            getConfig.mockReturnValue({
+                app: {
+                    partialHydrationEnabled: false
+                }
+            })
 
             const {container} = render(
                 <Island>
@@ -120,8 +136,12 @@ describe('Island Component', () => {
     })
 
     describe('Client-Side Rendering (CSR)', () => {
-        test('should not render an island at all if constant "PARTIAL_HYDRATION_ENABLED" is false', () => {
-            Reflect.set(constants, 'PARTIAL_HYDRATION_ENABLED', false)
+        test('should not render an island at all if config "partialHydrationEnabled" is false', () => {
+            getConfig.mockReturnValue({
+                app: {
+                    partialHydrationEnabled: false
+                }
+            })
 
             const {container} = render(
                 <Island>
@@ -911,4 +931,73 @@ describe('Island Component', () => {
             })
         })
     })
+
+    describe('Backward Compatibility', () => {
+        test('should fall back to PARTIAL_HYDRATION_ENABLED constant when config.app.partialHydrationEnabled is not available', () => {
+            // Mock getConfig to return config without partialHydrationEnabled property
+            getConfig.mockReturnValue({
+                app: {}
+            })
+            Reflect.set(constants, 'PARTIAL_HYDRATION_ENABLED', true)
+
+            // Test SSR behavior first
+            isServer.mockReturnValue(true)
+            const {container: serverContainer, getByTestId: getByTestIdServer} = render(
+                <Island>
+                    <div data-testid="server-content">Server Content</div>
+                </Island>
+            )
+            expect(serverContainer.firstElementChild?.dataset?.sfdcIslandOrigin).toBe('server')
+            expect(getByTestIdServer('server-content')).toBeInTheDocument()
+
+            // Clean up and test CSR behavior
+            cleanup()
+            isServer.mockReturnValue(false)
+            const {container: clientContainer, getByTestId: getByTestIdClient} = render(
+                <Island>
+                    <div data-testid="server-content">Server Content</div>
+                </Island>
+            )
+            expect(clientContainer.firstElementChild?.dataset?.sfdcIslandOrigin).toBe('client')
+            expect(getByTestIdClient('server-content')).toBeInTheDocument()
+        })
+
+        test('should disable islands when both config and constant are false', () => {
+            getConfig.mockReturnValue({
+                app: {
+                    partialHydrationEnabled: false
+                }
+            })
+            Reflect.set(constants, 'PARTIAL_HYDRATION_ENABLED', false)
+
+            const {container} = render(
+                <Island>
+                    <div data-testid="server-content">Server Content</div>
+                </Island>
+            )
+
+            // Should render children directly without island wrapper
+            expect(screen.getByTestId('server-content')).toBeInTheDocument()
+            expect(screen.getByTestId('server-content')).toBe(container.firstElementChild)
+        })
+
+        test('should disable islands when config is false even if constant is true', () => {
+            getConfig.mockReturnValue({
+                app: {
+                    partialHydrationEnabled: false
+                }
+            })
+            Reflect.set(constants, 'PARTIAL_HYDRATION_ENABLED', true)
+
+            const {container} = render(
+                <Island>
+                    <div data-testid="server-content">Server Content</div>
+                </Island>
+            )
+
+            // Config should take precedence over constant
+            expect(screen.getByTestId('server-content')).toBeInTheDocument()
+            expect(screen.getByTestId('server-content')).toBe(container.firstElementChild)
+        })
+    })
 })

package/app/components/item-variant/item-attributes.jsx

@@ -20,7 +20,13 @@ import {getDisplayVariationValues} from '@salesforce/retail-react-app/app/utils/
  * In the context of a cart product item variant, this component renders a styled
  * list of the selected variation values as well as any promos (w/ info popover).
  */
-const ItemAttributes = ({includeQuantity, currency, excludeBonusLabel, ...props}) => {
+const ItemAttributes = ({
+    includeQuantity,
+    currency,
+    excludeBonusLabel,
+    hideAttributeLabels = false,
+    ...props
+}) => {
     const variant = useItemVariant()
     const {data: basket} = useCurrentBasket()
     const {currency: activeCurrency} = useCurrency()
@@ -110,7 +116,9 @@ const ItemAttributes = ({includeQuantity, currency, excludeBonusLabel, ...props}
                         fontSize="sm"
                         key={`${key}: ${variationValues[key]}`}
                     >
-                        {key}: {variationValues[key]}
+                        {hideAttributeLabels
+                            ? variationValues[key]
+                            : `${key}: ${variationValues[key]}`}
                     </Text>
                 ))}
 
@@ -222,7 +230,8 @@ const ItemAttributes = ({includeQuantity, currency, excludeBonusLabel, ...props}
 ItemAttributes.propTypes = {
     includeQuantity: PropTypes.bool,
     currency: PropTypes.string,
-    excludeBonusLabel: PropTypes.bool
+    excludeBonusLabel: PropTypes.bool,
+    hideAttributeLabels: PropTypes.bool
 }
 
 export default ItemAttributes

package/app/components/multiship/multiship-order-summary.jsx

@@ -0,0 +1,137 @@
+/*
+ * Copyright (c) 2025, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import {defineMessages, FormattedMessage} from 'react-intl'
+import PropTypes from 'prop-types'
+import {
+    Box,
+    Stack,
+    Text,
+    Flex,
+    Divider
+} from '@salesforce/retail-react-app/app/components/shared/ui'
+import ItemVariantProvider from '@salesforce/retail-react-app/app/components/item-variant'
+import CartItemVariantImage from '@salesforce/retail-react-app/app/components/item-variant/item-image'
+import CartItemVariantName from '@salesforce/retail-react-app/app/components/item-variant/item-name'
+import CartItemVariantAttributes from '@salesforce/retail-react-app/app/components/item-variant/item-attributes'
+import CartItemVariantPrice from '@salesforce/retail-react-app/app/components/item-variant/item-price'
+import {STORE_LOCATOR_IS_ENABLED} from '@salesforce/retail-react-app/app/constants'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {isPickupShipment} from '@salesforce/retail-react-app/app/utils/shipment-utils'
+
+const MultiShipOrderSummary = ({order, productItemsMap, currency}) => {
+    const storeLocatorEnabled = getConfig()?.app?.storeLocatorEnabled ?? STORE_LOCATOR_IS_ENABLED
+    // Group shipments by type (pickup vs delivery)
+    const pickupShipments = []
+    const deliveryShipments = []
+
+    const messages = defineMessages({
+        pickupItems: {
+            id: 'order_summary.label.pickup_items',
+            defaultMessage: 'Pickup Items'
+        },
+        deliveryItems: {
+            id: 'order_summary.label.delivery_items',
+            defaultMessage: 'Delivery Items'
+        }
+    })
+
+    order.shipments.forEach((shipment) => {
+        const isPickup = storeLocatorEnabled && isPickupShipment(shipment)
+
+        if (isPickup) {
+            pickupShipments.push(shipment)
+        } else {
+            deliveryShipments.push(shipment)
+        }
+    })
+
+    // Group product items by shipment
+    const getItemsForShipment = (shipmentId) => {
+        return order.productItems.filter((item) => item.shipmentId === shipmentId)
+    }
+
+    const renderItemGroup = (shipments, title) => {
+        if (shipments.length === 0) return null
+
+        return (
+            <Box key={title.id}>
+                <Text fontSize="sm" fontWeight="semibold" mb={3}>
+                    <FormattedMessage {...title} />
+                </Text>
+                <Stack spacing={4}>
+                    {shipments.map((shipment) => {
+                        const items = getItemsForShipment(shipment.shipmentId)
+
+                        return (
+                            <Box key={shipment.shipmentId}>
+                                <Stack
+                                    spacing={3}
+                                    align="flex-start"
+                                    width="full"
+                                    divider={<Divider />}
+                                >
+                                    {items.map((product, idx) => {
+                                        const productDetail =
+                                            productItemsMap?.[product.productId] || {}
+                                        const variant = {
+                                            ...product,
+                                            ...productDetail,
+                                            price: product.price
+                                        }
+
+                                        return (
+                                            <ItemVariantProvider
+                                                key={product.productId}
+                                                index={idx}
+                                                variant={variant}
+                                            >
+                                                <Flex width="full" alignItems="flex-start">
+                                                    <CartItemVariantImage width="80px" mr={2} />
+                                                    <Stack spacing={1} marginTop="-3px" flex={1}>
+                                                        <CartItemVariantName />
+                                                        <Flex
+                                                            width="full"
+                                                            justifyContent="space-between"
+                                                            alignItems="flex-end"
+                                                        >
+                                                            <CartItemVariantAttributes
+                                                                includeQuantity
+                                                            />
+                                                            <CartItemVariantPrice
+                                                                currency={currency}
+                                                            />
+                                                        </Flex>
+                                                    </Stack>
+                                                </Flex>
+                                            </ItemVariantProvider>
+                                        )
+                                    })}
+                                </Stack>
+                            </Box>
+                        )
+                    })}
+                </Stack>
+            </Box>
+        )
+    }
+
+    return (
+        <Stack spacing={6} width="full">
+            {renderItemGroup(pickupShipments, messages.pickupItems)}
+            {renderItemGroup(deliveryShipments, messages.deliveryItems)}
+        </Stack>
+    )
+}
+
+MultiShipOrderSummary.propTypes = {
+    order: PropTypes.object.isRequired,
+    productItemsMap: PropTypes.object.isRequired,
+    currency: PropTypes.string.isRequired
+}
+
+export default MultiShipOrderSummary