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

package/app/pages/cart/partials/order-type-display.test.js

@@ -0,0 +1,241 @@
+/*
+ * Copyright (c) 2025, Salesforce, 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 {screen} from '@testing-library/react'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import OrderTypeDisplay from '@salesforce/retail-react-app/app/pages/cart/partials/order-type-display'
+
+const mockStore = {
+    id: 'store-123',
+    name: 'Downtown Store',
+    address1: '123 Main Street',
+    city: 'San Francisco',
+    stateCode: 'CA',
+    postalCode: '94105',
+    phone: '(555) 123-4567',
+    c_customerServiceEmail: 'store@example.com',
+    storeHours:
+        'Monday - Friday: 9:00 AM - 8:00 PM\nSaturday: 10:00 AM - 6:00 PM\nSunday: 12:00 PM - 5:00 PM',
+    distance: 2.5,
+    distanceUnit: 'miles'
+}
+
+describe('OrderTypeDisplay', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    describe('Pickup Order', () => {
+        test('renders pickup order display with store information', () => {
+            renderWithProviders(
+                <OrderTypeDisplay
+                    isPickupOrder={true}
+                    store={mockStore}
+                    itemsInShipment={3}
+                    totalItemsInCart={5}
+                />
+            )
+
+            // Check pickup message with item counts
+            expect(screen.getByText('Pick Up in Store - 3 out of 5 items')).toBeInTheDocument()
+
+            // Check store information is displayed
+            expect(screen.getByText('Downtown Store')).toBeInTheDocument()
+            expect(screen.getByText('123 Main Street')).toBeInTheDocument()
+            expect(screen.getByText('San Francisco, CA 94105')).toBeInTheDocument()
+            expect(screen.getByText('2.5 miles away')).toBeInTheDocument()
+        })
+
+        test('renders pickup order with single item', () => {
+            renderWithProviders(
+                <OrderTypeDisplay
+                    isPickupOrder={true}
+                    store={mockStore}
+                    itemsInShipment={1}
+                    totalItemsInCart={1}
+                />
+            )
+
+            expect(screen.getByText('Pick Up in Store - 1 out of 1 items')).toBeInTheDocument()
+        })
+
+        test('renders pickup order with zero items in shipment', () => {
+            renderWithProviders(
+                <OrderTypeDisplay
+                    isPickupOrder={true}
+                    store={mockStore}
+                    itemsInShipment={0}
+                    totalItemsInCart={3}
+                />
+            )
+
+            expect(screen.getByText('Pick Up in Store - 0 out of 3 items')).toBeInTheDocument()
+        })
+
+        test('renders pickup order without store (null store)', () => {
+            renderWithProviders(
+                <OrderTypeDisplay
+                    isPickupOrder={true}
+                    store={null}
+                    itemsInShipment={2}
+                    totalItemsInCart={4}
+                />
+            )
+
+            expect(screen.getByText('Pick Up in Store - 2 out of 4 items')).toBeInTheDocument()
+            // Store display should not crash with null store
+            expect(screen.queryByText('Downtown Store')).not.toBeInTheDocument()
+        })
+
+        test('renders pickup order without store (undefined store)', () => {
+            renderWithProviders(
+                <OrderTypeDisplay
+                    isPickupOrder={true}
+                    store={undefined}
+                    itemsInShipment={2}
+                    totalItemsInCart={4}
+                />
+            )
+
+            expect(screen.getByText('Pick Up in Store - 2 out of 4 items')).toBeInTheDocument()
+            // Store display should not crash with undefined store
+            expect(screen.queryByText('Downtown Store')).not.toBeInTheDocument()
+        })
+    })
+
+    describe('Delivery Order', () => {
+        test('renders delivery order display', () => {
+            renderWithProviders(
+                <OrderTypeDisplay
+                    isPickupOrder={false}
+                    store={mockStore}
+                    itemsInShipment={4}
+                    totalItemsInCart={7}
+                />
+            )
+
+            // Check delivery message with item counts
+            expect(screen.getByText('Delivery - 4 out of 7 items')).toBeInTheDocument()
+
+            // Store information should not be displayed for delivery
+            expect(screen.queryByText('Downtown Store')).not.toBeInTheDocument()
+            expect(screen.queryByText('123 Main Street')).not.toBeInTheDocument()
+        })
+
+        test('renders delivery order with single item', () => {
+            renderWithProviders(
+                <OrderTypeDisplay
+                    isPickupOrder={false}
+                    store={mockStore}
+                    itemsInShipment={1}
+                    totalItemsInCart={1}
+                />
+            )
+
+            expect(screen.getByText('Delivery - 1 out of 1 items')).toBeInTheDocument()
+        })
+
+        test('renders delivery order with zero items in shipment', () => {
+            renderWithProviders(
+                <OrderTypeDisplay
+                    isPickupOrder={false}
+                    store={mockStore}
+                    itemsInShipment={0}
+                    totalItemsInCart={2}
+                />
+            )
+
+            expect(screen.getByText('Delivery - 0 out of 2 items')).toBeInTheDocument()
+        })
+
+        test('renders delivery order without store prop', () => {
+            renderWithProviders(
+                <OrderTypeDisplay
+                    isPickupOrder={false}
+                    store={null}
+                    itemsInShipment={3}
+                    totalItemsInCart={5}
+                />
+            )
+
+            expect(screen.getByText('Delivery - 3 out of 5 items')).toBeInTheDocument()
+            // Store information should not be displayed for delivery regardless of store prop
+            expect(screen.queryByText('Downtown Store')).not.toBeInTheDocument()
+        })
+    })
+
+    describe('Component Structure', () => {
+        test('renders with proper card styling', () => {
+            const {container} = renderWithProviders(
+                <OrderTypeDisplay
+                    isPickupOrder={false}
+                    store={mockStore}
+                    itemsInShipment={2}
+                    totalItemsInCart={4}
+                />
+            )
+
+            // Check for Box component with layerStyle and padding
+            const cardBox = container.querySelector('[data-testid], div')
+            expect(cardBox).toBeInTheDocument()
+        })
+
+        test('renders pickup text message', () => {
+            renderWithProviders(
+                <OrderTypeDisplay
+                    isPickupOrder={true}
+                    store={mockStore}
+                    itemsInShipment={2}
+                    totalItemsInCart={4}
+                />
+            )
+
+            expect(screen.getByText('Pick Up in Store - 2 out of 4 items')).toBeInTheDocument()
+        })
+
+        test('renders delivery text message', () => {
+            renderWithProviders(
+                <OrderTypeDisplay
+                    isPickupOrder={false}
+                    store={mockStore}
+                    itemsInShipment={2}
+                    totalItemsInCart={4}
+                />
+            )
+
+            expect(screen.getByText('Delivery - 2 out of 4 items')).toBeInTheDocument()
+        })
+    })
+
+    describe('Large Numbers', () => {
+        test('handles large item counts correctly', () => {
+            renderWithProviders(
+                <OrderTypeDisplay
+                    isPickupOrder={true}
+                    store={mockStore}
+                    itemsInShipment={999}
+                    totalItemsInCart={1000}
+                />
+            )
+
+            expect(screen.getByText('Pick Up in Store - 999 out of 1000 items')).toBeInTheDocument()
+        })
+
+        test('handles edge case where items in shipment equals total items', () => {
+            renderWithProviders(
+                <OrderTypeDisplay
+                    isPickupOrder={false}
+                    store={mockStore}
+                    itemsInShipment={5}
+                    totalItemsInCart={5}
+                />
+            )
+
+            expect(screen.getByText('Delivery - 5 out of 5 items')).toBeInTheDocument()
+        })
+    })
+})

package/app/pages/checkout/confirmation.jsx

@@ -22,19 +22,19 @@ import {
 } from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useForm} from 'react-hook-form'
 import {useParams} from 'react-router-dom'
+import {nanoid} from 'nanoid'
 import {
     useOrder,
     useProducts,
     useAuthHelper,
     AuthHelpers,
-    useStores,
     useShopperCustomersMutation
 } from '@salesforce/commerce-sdk-react'
 import {getCreditCardIcon} from '@salesforce/retail-react-app/app/utils/cc-utils'
-import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+
+// Components
 import Link from '@salesforce/retail-react-app/app/components/link'
 import AddressDisplay from '@salesforce/retail-react-app/app/components/address-display'
-import StoreDisplay from '@salesforce/retail-react-app/app/components/store-display'
 import PostCheckoutRegistrationFields from '@salesforce/retail-react-app/app/components/forms/post-checkout-registration-fields'
 import PromoPopover from '@salesforce/retail-react-app/app/components/promo-popover'
 import ItemVariantProvider from '@salesforce/retail-react-app/app/components/item-variant'
@@ -42,13 +42,16 @@ import CartItemVariantImage from '@salesforce/retail-react-app/app/components/it
 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 MultiShipOrderSummary from '@salesforce/retail-react-app/app/components/multiship/multiship-order-summary'
+import ShipmentDetails from '@salesforce/retail-react-app/app/pages/checkout/partials/shipment-details'
+
+// Hooks
+import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
-import {
-    API_ERROR_MESSAGE,
-    STORE_LOCATOR_IS_ENABLED
-} from '@salesforce/retail-react-app/app/constants'
 import {useCurrency} from '@salesforce/retail-react-app/app/hooks'
-import {nanoid} from 'nanoid'
+
+// Constants
+import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
 
 const onClient = typeof window !== 'undefined'
 
@@ -69,25 +72,13 @@ const CheckoutConfirmation = () => {
     const {currency} = useCurrency()
     const itemIds = order?.productItems.map((item) => item.productId)
     const {data: products} = useProducts({parameters: {ids: itemIds?.join(',')}})
-    const productItemsMap = products?.data.reduce((map, item) => ({...map, [item.id]: item}), {})
+    const productItemsMap = (products?.data || []).reduce(
+        (map, item) => ({...map, [item.id]: item}),
+        {}
+    )
     const form = useForm()
 
-    // Check if this is a pickup order and get store details
-    const isPickupOrder = STORE_LOCATOR_IS_ENABLED
-        ? order?.shipments?.[0]?.shippingMethod?.c_storePickupEnabled === true
-        : false
-    const storeId = order?.shipments?.[0]?.c_fromStoreId
-    const {data: storeData} = useStores(
-        {
-            parameters: {
-                ids: storeId
-            }
-        },
-        {
-            enabled: !!storeId && isPickupOrder && onClient
-        }
-    )
-    const store = storeData?.data?.[0]
+    const hasMultipleShipments = order?.shipments && order.shipments.length > 1
 
     useEffect(() => {
         form.reset({
@@ -108,7 +99,8 @@ const CheckoutConfirmation = () => {
         const saveShippingAddress = async (customerId) => {
             try {
                 const shippingAddress = order.shipments[0].shippingAddress
-                let {id, ...shippingAddressWithoutId} = shippingAddress
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const {id, ...shippingAddressWithoutId} = shippingAddress
                 const bodyShippingAddress = {
                     addressId: nanoid(),
                     ...shippingAddressWithoutId
@@ -269,90 +261,8 @@ const CheckoutConfirmation = () => {
                         </Box>
                     )}
 
-                    <Box layerStyle="card" rounded={[0, 0, 'base']} px={[4, 4, 6]} py={[6, 6, 8]}>
-                        <Container variant="form">
-                            <Stack spacing={6}>
-                                {isPickupOrder ? (
-                                    <>
-                                        <Heading fontSize="lg">
-                                            <FormattedMessage
-                                                defaultMessage="Pickup Details"
-                                                id="checkout_confirmation.heading.pickup_details"
-                                            />
-                                        </Heading>
-
-                                        <Stack spacing={2}>
-                                            <Heading as="h3" fontSize="md">
-                                                <FormattedMessage
-                                                    defaultMessage="Pickup Address"
-                                                    id="checkout_confirmation.heading.pickup_address"
-                                                />
-                                            </Heading>
-                                            {store ? (
-                                                <StoreDisplay
-                                                    store={store}
-                                                    showDistance={false}
-                                                    showEmail={true}
-                                                    showPhone={true}
-                                                    showStoreHours={true}
-                                                />
-                                            ) : (
-                                                <Text>
-                                                    <FormattedMessage
-                                                        defaultMessage="Store information isn't available"
-                                                        id="checkout_confirmation.message.store_info_unavailable"
-                                                    />
-                                                </Text>
-                                            )}
-                                        </Stack>
-                                    </>
-                                ) : (
-                                    <>
-                                        <Heading fontSize="lg">
-                                            <FormattedMessage
-                                                defaultMessage="Delivery Details"
-                                                id="checkout_confirmation.heading.delivery_details"
-                                            />
-                                        </Heading>
-
-                                        <SimpleGrid columns={[1, 1, 2]} spacing={6}>
-                                            <Stack spacing={1}>
-                                                <Heading as="h3" fontSize="sm">
-                                                    <FormattedMessage
-                                                        defaultMessage="Shipping Address"
-                                                        id="checkout_confirmation.heading.shipping_address"
-                                                    />
-                                                </Heading>
-                                                <AddressDisplay
-                                                    address={order.shipments[0].shippingAddress}
-                                                />
-                                            </Stack>
-
-                                            <Stack spacing={1}>
-                                                <Heading as="h3" fontSize="sm">
-                                                    <FormattedMessage
-                                                        defaultMessage="Shipping Method"
-                                                        id="checkout_confirmation.heading.shipping_method"
-                                                    />
-                                                </Heading>
-                                                <Box>
-                                                    <Text>
-                                                        {order.shipments[0].shippingMethod.name}
-                                                    </Text>
-                                                    <Text>
-                                                        {
-                                                            order.shipments[0].shippingMethod
-                                                                .description
-                                                        }
-                                                    </Text>
-                                                </Box>
-                                            </Stack>
-                                        </SimpleGrid>
-                                    </>
-                                )}
-                            </Stack>
-                        </Container>
-                    </Box>
+                    {/* Shipment Details */}
+                    <ShipmentDetails shipments={order.shipments} />
 
                     <Box layerStyle="card" rounded={[0, 0, 'base']} px={[4, 4, 6]} py={[6, 6, 8]}>
                         <Container variant="form">
@@ -380,56 +290,67 @@ const CheckoutConfirmation = () => {
                                     </Text>
 
                                     <Stack spacing={5} align="flex-start">
-                                        <Stack
-                                            spacing={5}
-                                            align="flex-start"
-                                            width="full"
-                                            divider={<Divider />}
-                                        >
-                                            {order.productItems?.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}
+                                        {hasMultipleShipments ? (
+                                            <MultiShipOrderSummary
+                                                order={order}
+                                                productItemsMap={productItemsMap}
+                                                currency={currency}
+                                            />
+                                        ) : (
+                                            <Stack
+                                                spacing={5}
+                                                align="flex-start"
+                                                width="full"
+                                                divider={<Divider />}
+                                            >
+                                                {order.productItems?.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"
                                                             >
-                                                                <CartItemVariantName />
-                                                                <Flex
-                                                                    width="full"
-                                                                    justifyContent="space-between"
-                                                                    alignItems="flex-end"
+                                                                <CartItemVariantImage
+                                                                    width="80px"
+                                                                    mr={2}
+                                                                />
+                                                                <Stack
+                                                                    spacing={1}
+                                                                    marginTop="-3px"
+                                                                    flex={1}
                                                                 >
-                                                                    <CartItemVariantAttributes
-                                                                        includeQuantity
-                                                                    />
-                                                                    <CartItemVariantPrice
-                                                                        currency={currency}
-                                                                    />
-                                                                </Flex>
-                                                            </Stack>
-                                                        </Flex>
-                                                    </ItemVariantProvider>
-                                                )
-                                            })}
-                                        </Stack>
+                                                                    <CartItemVariantName />
+                                                                    <Flex
+                                                                        width="full"
+                                                                        justifyContent="space-between"
+                                                                        alignItems="flex-end"
+                                                                    >
+                                                                        <CartItemVariantAttributes
+                                                                            includeQuantity
+                                                                        />
+                                                                        <CartItemVariantPrice
+                                                                            currency={currency}
+                                                                        />
+                                                                    </Flex>
+                                                                </Stack>
+                                                            </Flex>
+                                                        </ItemVariantProvider>
+                                                    )
+                                                })}
+                                            </Stack>
+                                        )}
 
                                         <Stack w="full" py={4} borderY="1px" borderColor="gray.200">
                                             <Flex justify="space-between">

package/app/pages/checkout/index.jsx

@@ -24,7 +24,7 @@ import {
 import ContactInfo from '@salesforce/retail-react-app/app/pages/checkout/partials/contact-info'
 import PickupAddress from '@salesforce/retail-react-app/app/pages/checkout/partials/pickup-address'
 import ShippingAddress from '@salesforce/retail-react-app/app/pages/checkout/partials/shipping-address'
-import ShippingOptions from '@salesforce/retail-react-app/app/pages/checkout/partials/shipping-options'
+import ShippingMethods from '@salesforce/retail-react-app/app/pages/checkout/partials/shipping-methods'
 import Payment from '@salesforce/retail-react-app/app/pages/checkout/partials/payment'
 import OrderSummary from '@salesforce/retail-react-app/app/components/order-summary'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
@@ -34,30 +34,39 @@ import {useShopperOrdersMutation, useShopperBasketsMutation} from '@salesforce/c
 import UnavailableProductConfirmationModal from '@salesforce/retail-react-app/app/components/unavailable-product-confirmation-modal'
 import {
     API_ERROR_MESSAGE,
-    TOAST_MESSAGE_REMOVED_ITEM_FROM_CART,
-    STORE_LOCATOR_IS_ENABLED
+    TOAST_MESSAGE_REMOVED_ITEM_FROM_CART
 } from '@salesforce/retail-react-app/app/constants'
 import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
 import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {useMultiship} from '@salesforce/retail-react-app/app/hooks/use-multiship'
 
 const Checkout = () => {
     const {formatMessage} = useIntl()
     const navigate = useNavigation()
     const {step} = useCheckout()
     const [error, setError] = useState()
-    const {data: basket} = useCurrentBasket()
+    const {data: basket, derivedData} = useCurrentBasket()
     const [isLoading, setIsLoading] = useState(false)
     const {mutateAsync: createOrder} = useShopperOrdersMutation('createOrder')
     const {passwordless = {}, social = {}} = getConfig().app.login || {}
     const idps = social?.idps
     const isSocialEnabled = !!social?.enabled
     const isPasswordlessEnabled = !!passwordless?.enabled
+    const {removeEmptyShipments} = useMultiship(basket)
+    const multishipEnabled = getConfig()?.app?.multishipEnabled ?? true
+
+    // cart has both pickup and delivery orders
+    const isDeliveryAndPickupOrder =
+        multishipEnabled &&
+        derivedData?.totalPickupShipments > 0 &&
+        derivedData?.totalDeliveryShipments > 0
+
+    // Check if there are pickup shipments
+    const hasPickupShipments = derivedData?.totalPickupShipments > 0
 
     // Only enable BOPIS functionality if the feature toggle is on
-    const isPickupOrder = STORE_LOCATOR_IS_ENABLED
-        ? basket?.shipments[0]?.shippingMethod?.c_storePickupEnabled === true
-        : false
+    const isPickupOrderOnly = !isDeliveryAndPickupOrder && hasPickupShipments
 
     useEffect(() => {
         if (error || step === 4) {
@@ -65,6 +74,14 @@ const Checkout = () => {
         }
     }, [error, step])
 
+    // Remove any empty shipments whenever navigating to the checkout page
+    // Using basketId ensures that the basket is in a valid state before removing empty shipments
+    useEffect(() => {
+        if (basket?.shipments?.length > 1) {
+            removeEmptyShipments(basket)
+        }
+    }, [basket?.basketId])
+
     const submitOrder = async () => {
         setIsLoading(true)
         try {
@@ -106,8 +123,16 @@ const Checkout = () => {
                                 isPasswordlessEnabled={isPasswordlessEnabled}
                                 idps={idps}
                             />
-                            {isPickupOrder ? <PickupAddress /> : <ShippingAddress />}
-                            {!isPickupOrder && <ShippingOptions />}
+
+                            {isPickupOrderOnly ? (
+                                <PickupAddress />
+                            ) : (
+                                <>
+                                    {hasPickupShipments && <PickupAddress />}
+                                    <ShippingAddress />
+                                    <ShippingMethods />
+                                </>
+                            )}
                             <Payment />
 
                             {step === 5 && (