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

package/app/pages/checkout/partials/shipment-details.test.js

@@ -0,0 +1,246 @@
+/*
+ * 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 {screen} from '@testing-library/react'
+import ShipmentDetails from '@salesforce/retail-react-app/app/pages/checkout/partials/shipment-details'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+// Mock the useStores hook
+jest.mock('@salesforce/commerce-sdk-react', () => ({
+    ...jest.requireActual('@salesforce/commerce-sdk-react'),
+    useStores: jest.fn()
+}))
+
+import {useStores} from '@salesforce/commerce-sdk-react'
+
+describe('ShipmentDetails', () => {
+    const mockStoresData = {
+        data: [
+            {
+                id: 'store-001',
+                name: 'Downtown Store',
+                address1: '123 Main Street',
+                city: 'San Francisco',
+                stateCode: 'CA',
+                postalCode: '94105',
+                countryCode: 'US',
+                phone: '(555) 123-4567',
+                c_customerServiceEmail: 'downtown@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',
+                storeType: 'retail'
+            },
+            {
+                id: 'store-002',
+                name: 'Uptown Store',
+                address1: '456 Oak Avenue',
+                city: 'San Francisco',
+                stateCode: 'CA',
+                postalCode: '94102',
+                countryCode: 'US',
+                phone: '(555) 987-6543',
+                c_customerServiceEmail: 'uptown@example.com',
+                storeHours:
+                    'Monday - Friday: 10:00 AM - 9:00 PM\nSaturday: 11:00 AM - 7:00 PM\nSunday: 1:00 PM - 6:00 PM',
+                storeType: 'retail'
+            }
+        ]
+    }
+
+    const mockPickupShipment = {
+        shipmentId: 'pickup-1',
+        c_fromStoreId: 'store-001',
+        shippingMethod: {
+            c_storePickupEnabled: true,
+            name: 'Store Pickup',
+            description: 'Pick up at store location'
+        }
+    }
+
+    const mockDeliveryShipment = {
+        shipmentId: 'delivery-1',
+        shippingMethod: {
+            c_storePickupEnabled: false,
+            name: 'Standard Shipping',
+            description: '3-5 business days'
+        },
+        shippingAddress: {
+            address1: '123 Delivery Street',
+            city: 'San Francisco',
+            stateCode: 'CA',
+            postalCode: '94105',
+            countryCode: 'US'
+        }
+    }
+
+    const defaultProps = {
+        shipments: [mockPickupShipment, mockDeliveryShipment]
+    }
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+        // Default mock implementation for useStores
+        useStores.mockReturnValue({
+            data: mockStoresData,
+            isLoading: false,
+            error: null
+        })
+    })
+
+    test('renders component with pickup and delivery sections', () => {
+        renderWithProviders(<ShipmentDetails {...defaultProps} />)
+
+        expect(screen.getByText('Pickup Details')).toBeInTheDocument()
+        expect(screen.getByText('Delivery Details')).toBeInTheDocument()
+    })
+
+    test('renders pickup location information when store data is available', () => {
+        renderWithProviders(<ShipmentDetails {...defaultProps} />)
+
+        expect(screen.getByText('Pickup Address')).toBeInTheDocument()
+        expect(screen.getByText('Downtown Store')).toBeInTheDocument()
+        expect(screen.getByText('123 Main Street')).toBeInTheDocument()
+    })
+
+    test('renders delivery address and shipping method information', () => {
+        renderWithProviders(<ShipmentDetails {...defaultProps} />)
+
+        expect(screen.getByText('Shipping Address')).toBeInTheDocument()
+        expect(screen.getByText('Shipping Method')).toBeInTheDocument()
+        expect(screen.getByText('123 Delivery Street')).toBeInTheDocument()
+        expect(screen.getByText('Standard Shipping')).toBeInTheDocument()
+        expect(screen.getByText('3-5 business days')).toBeInTheDocument()
+    })
+
+    test('renders pickup location numbers when multiple pickup shipments exist', () => {
+        const multiplePickupShipments = [
+            {
+                ...mockPickupShipment,
+                c_fromStoreId: 'store-001'
+            },
+            {
+                ...mockPickupShipment,
+                shipmentId: 'pickup-2',
+                c_fromStoreId: 'store-002'
+            }
+        ]
+
+        renderWithProviders(<ShipmentDetails shipments={multiplePickupShipments} />)
+
+        expect(screen.getByText('Pickup Location 1')).toBeInTheDocument()
+        expect(screen.getByText('Pickup Location 2')).toBeInTheDocument()
+    })
+
+    test('renders delivery numbers when multiple delivery shipments exist', () => {
+        const multipleDeliveryShipments = [
+            mockDeliveryShipment,
+            {
+                ...mockDeliveryShipment,
+                shipmentId: 'delivery-2',
+                shippingAddress: {
+                    address1: '456 Second Street',
+                    city: 'Los Angeles',
+                    stateCode: 'CA',
+                    postalCode: '90210',
+                    countryCode: 'US'
+                }
+            }
+        ]
+
+        renderWithProviders(<ShipmentDetails shipments={multipleDeliveryShipments} />)
+
+        expect(screen.getByText('Delivery 1')).toBeInTheDocument()
+        expect(screen.getByText('Delivery 2')).toBeInTheDocument()
+    })
+
+    test('shows store information unavailable message when store data is not available', () => {
+        useStores.mockReturnValue({
+            data: null,
+            isLoading: false,
+            error: null
+        })
+
+        renderWithProviders(<ShipmentDetails shipments={[mockPickupShipment]} />)
+
+        expect(screen.getByText("Store information isn't available")).toBeInTheDocument()
+    })
+
+    test('does not render pickup section when no pickup shipments exist', () => {
+        const deliveryOnlyShipments = [mockDeliveryShipment]
+
+        renderWithProviders(<ShipmentDetails shipments={deliveryOnlyShipments} />)
+
+        expect(screen.queryByText('Pickup Details')).not.toBeInTheDocument()
+        expect(screen.getByText('Delivery Details')).toBeInTheDocument()
+    })
+
+    test('does not render delivery section when no delivery shipments exist', () => {
+        const pickupOnlyShipments = [mockPickupShipment]
+
+        renderWithProviders(<ShipmentDetails shipments={pickupOnlyShipments} />)
+
+        expect(screen.getByText('Pickup Details')).toBeInTheDocument()
+        expect(screen.queryByText('Delivery Details')).not.toBeInTheDocument()
+    })
+
+    test('handles shipments without store IDs gracefully', () => {
+        const shipmentWithoutStoreId = {
+            ...mockPickupShipment,
+            c_fromStoreId: null
+        }
+
+        renderWithProviders(<ShipmentDetails shipments={[shipmentWithoutStoreId]} />)
+
+        expect(screen.getByText('Pickup Details')).toBeInTheDocument()
+        expect(screen.getByText("Store information isn't available")).toBeInTheDocument()
+    })
+
+    test('calls useStores with correct parameters for pickup shipments', () => {
+        const pickupShipments = [
+            {
+                ...mockPickupShipment,
+                c_fromStoreId: 'store-001'
+            },
+            {
+                ...mockPickupShipment,
+                shipmentId: 'pickup-2',
+                c_fromStoreId: 'store-002'
+            }
+        ]
+
+        renderWithProviders(<ShipmentDetails shipments={pickupShipments} />)
+
+        expect(useStores).toHaveBeenCalledWith(
+            {
+                parameters: {
+                    ids: 'store-001,store-002'
+                }
+            },
+            {
+                enabled: true
+            }
+        )
+    })
+
+    test('does not call useStores when no pickup shipments exist', () => {
+        const deliveryOnlyShipments = [mockDeliveryShipment]
+
+        renderWithProviders(<ShipmentDetails shipments={deliveryOnlyShipments} />)
+
+        expect(useStores).toHaveBeenCalledWith(
+            {
+                parameters: {
+                    ids: ''
+                }
+            },
+            {
+                enabled: false
+            }
+        )
+    })
+})

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

@@ -4,7 +4,7 @@
  * 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, {useState} from 'react'
+import React, {useState, useEffect} from 'react'
 import {nanoid} from 'nanoid'
 import {defineMessage, useIntl} from 'react-intl'
 import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
@@ -13,6 +13,7 @@ import {
     ToggleCardEdit,
     ToggleCardSummary
 } from '@salesforce/retail-react-app/app/components/toggle-card'
+import {Text} from '@salesforce/retail-react-app/app/components/shared/ui'
 import ShippingAddressSelection from '@salesforce/retail-react-app/app/pages/checkout/partials/shipping-address-selection'
 import AddressDisplay from '@salesforce/retail-react-app/app/components/address-display'
 import {
@@ -21,6 +22,19 @@ import {
 } from '@salesforce/commerce-sdk-react'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
+import ShippingMultiAddress from '@salesforce/retail-react-app/app/pages/checkout/partials/shipping-multi-address'
+import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
+import {useMultiship} from '@salesforce/retail-react-app/app/hooks/use-multiship'
+import {DEFAULT_SHIPMENT_ID} from '@salesforce/retail-react-app/app/constants'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {
+    sanitizedCustomerAddress,
+    cleanAddressForOrder
+} from '@salesforce/retail-react-app/app/utils/address-utils'
+import {
+    findExistingDeliveryShipment,
+    isPickupShipment
+} from '@salesforce/retail-react-app/app/utils/shipment-utils'
 
 const submitButtonMessage = defineMessage({
     defaultMessage: 'Continue to Shipping Method',
@@ -30,84 +44,120 @@ const shippingAddressAriaLabel = defineMessage({
     defaultMessage: 'Shipping Address Form',
     id: 'shipping_address.label.shipping_address_form'
 })
+const noItemsInBasketMessage = defineMessage({
+    defaultMessage: 'No items in basket.',
+    id: 'shipping_address.message.no_items_in_basket'
+})
+const shipToOneAddressLabel = defineMessage({
+    defaultMessage: 'Ship to Single Address',
+    id: 'shipping_address.action.ship_to_single_address'
+})
+const deliverToMultipleAddressesLabel = defineMessage({
+    defaultMessage: 'Ship to Multiple Addresses',
+    id: 'shipping_address.action.ship_to_multiple_addresses'
+})
 
 export default function ShippingAddress() {
     const {formatMessage} = useIntl()
     const [isLoading, setIsLoading] = useState()
     const {data: customer} = useCurrentCustomer()
     const {data: basket} = useCurrentBasket()
-    const selectedShippingAddress = basket?.shipments && basket?.shipments[0]?.shippingAddress
+    const multishipEnabled = getConfig()?.app?.multishipEnabled ?? true
+    const {moveItemsToDeliveryShipment, removeEmptyShipments} = useMultiship(basket)
+    const selectedShipment = findExistingDeliveryShipment(basket)
+    const selectedShippingAddress = selectedShipment?.shippingAddress
     const isAddressFilled = selectedShippingAddress?.address1 && selectedShippingAddress?.city
-    const {step, STEPS, goToStep, goToNextStep} = useCheckout()
+
+    // Check if there are multiple delivery shipments (multi-shipping was used)
+    const deliveryShipments =
+        basket?.shipments?.filter((shipment) => !isPickupShipment(shipment)) || []
+    const hasMultipleDeliveryShipments = deliveryShipments.length > 1
+
+    // Initialize multi-shipping state based on existing basket shipments
+    const [isMultiShipping, setIsMultiShipping] = useState(hasMultipleDeliveryShipments)
+    const {step, STEPS, goToStep} = useCheckout()
     const createCustomerAddress = useShopperCustomersMutation('createCustomerAddress')
     const updateCustomerAddress = useShopperCustomersMutation('updateCustomerAddress')
     const updateShippingAddressForShipment = useShopperBasketsMutation(
         'updateShippingAddressForShipment'
     )
+    const showToast = useToast()
+
+    // Keep multi-shipping state in sync with basket shipments
+    useEffect(() => {
+        setIsMultiShipping(hasMultipleDeliveryShipments)
+    }, [hasMultipleDeliveryShipments])
 
     const submitAndContinue = async (address) => {
         setIsLoading(true)
-        const {
-            addressId,
-            address1,
-            city,
-            countryCode,
-            firstName,
-            lastName,
-            phone,
-            postalCode,
-            stateCode
-        } = address
-        await updateShippingAddressForShipment.mutateAsync({
-            parameters: {
-                basketId: basket.basketId,
-                shipmentId: 'me',
-                useAsBilling: false
-            },
-            body: {
-                address1,
-                city,
-                countryCode,
-                firstName,
-                lastName,
-                phone,
-                postalCode,
-                stateCode
-            }
-        })
+        try {
+            const {addressId} = address
+            const targetShipment = findExistingDeliveryShipment(basket)
+            const targetShipmentId = targetShipment?.shipmentId || DEFAULT_SHIPMENT_ID
+            let basketAfterItemMoves = null
 
-        if (customer.isRegistered && !addressId) {
-            const body = {
-                address1,
-                city,
-                countryCode,
-                firstName,
-                lastName,
-                phone,
-                postalCode,
-                stateCode,
-                addressId: nanoid()
-            }
-            await createCustomerAddress.mutateAsync({
-                body,
-                parameters: {customerId: customer.customerId}
+            await updateShippingAddressForShipment.mutateAsync({
+                parameters: {
+                    basketId: basket.basketId,
+                    shipmentId: targetShipmentId,
+                    useAsBilling: false
+                },
+                body: cleanAddressForOrder(address)
             })
-        }
 
-        if (customer.isRegistered && addressId) {
-            await updateCustomerAddress.mutateAsync({
-                body: address,
-                parameters: {
-                    customerId: customer.customerId,
-                    addressName: addressId
+            if (customer.isRegistered && !addressId) {
+                const body = {
+                    ...sanitizedCustomerAddress(address),
+                    addressId: nanoid()
                 }
+                await createCustomerAddress.mutateAsync({
+                    body,
+                    parameters: {customerId: customer.customerId}
+                })
+            }
+
+            if (customer.isRegistered && addressId) {
+                await updateCustomerAddress.mutateAsync({
+                    body: address,
+                    parameters: {
+                        customerId: customer.customerId,
+                        addressName: addressId
+                    }
+                })
+            }
+            // Move all items to the single target delivery shipment.
+            const deliveryItems =
+                basket?.productItems?.filter((item) =>
+                    deliveryShipments.some((shipment) => shipment.shipmentId === item.shipmentId)
+                ) || []
+            const itemsToMove = deliveryItems.filter((item) => item.shipmentId !== targetShipmentId)
+            if (itemsToMove.length > 0) {
+                basketAfterItemMoves = await moveItemsToDeliveryShipment(
+                    itemsToMove,
+                    targetShipmentId
+                )
+            }
+            // Remove any empty shipments.
+            await removeEmptyShipments(basketAfterItemMoves || basket)
+
+            goToStep(STEPS.SHIPPING_OPTIONS)
+        } catch (e) {
+            showToast({
+                title: formatMessage({
+                    defaultMessage:
+                        'Something went wrong while updating the shipping address. Try again.',
+                    id: 'shipping_address.error.update_failed'
+                }),
+                status: 'error'
             })
+        } finally {
+            setIsLoading(false)
         }
-
-        goToNextStep()
-        setIsLoading(false)
     }
 
+    // Determine if multi-shipping should be available
+    const isEditingShippingAddress = step === STEPS.SHIPPING_ADDRESS
+
     return (
         <ToggleCard
             id="step-1"
@@ -115,26 +165,64 @@ export default function ShippingAddress() {
                 defaultMessage: 'Shipping Address',
                 id: 'shipping_address.title.shipping_address'
             })}
-            editing={step === STEPS.SHIPPING_ADDRESS}
+            editing={isEditingShippingAddress}
             isLoading={isLoading}
             disabled={step === STEPS.CONTACT_INFO && !selectedShippingAddress}
             onEdit={() => goToStep(STEPS.SHIPPING_ADDRESS)}
-            editLabel={formatMessage({
-                defaultMessage: 'Edit Shipping Address',
-                id: 'toggle_card.action.editShippingAddress'
-            })}
+            editLabel={
+                isMultiShipping
+                    ? formatMessage({
+                          defaultMessage: 'Edit Shipping Addresses',
+                          id: 'toggle_card.action.editShippingAddresses'
+                      })
+                    : formatMessage({
+                          defaultMessage: 'Edit Shipping Address',
+                          id: 'toggle_card.action.editShippingAddress'
+                      })
+            }
+            editAction={
+                multishipEnabled
+                    ? isMultiShipping
+                        ? formatMessage(shipToOneAddressLabel)
+                        : formatMessage(deliverToMultipleAddressesLabel)
+                    : null
+            }
+            onEditActionClick={
+                multishipEnabled
+                    ? async () => {
+                          setIsMultiShipping(!isMultiShipping)
+                      }
+                    : null
+            }
         >
             <ToggleCardEdit>
-                <ShippingAddressSelection
-                    selectedAddress={selectedShippingAddress}
-                    submitButtonLabel={submitButtonMessage}
-                    onSubmit={submitAndContinue}
-                    formTitleAriaLabel={shippingAddressAriaLabel}
-                />
+                {!isMultiShipping ? (
+                    <ShippingAddressSelection
+                        selectedAddress={selectedShippingAddress}
+                        submitButtonLabel={submitButtonMessage}
+                        onSubmit={submitAndContinue}
+                        formTitleAriaLabel={shippingAddressAriaLabel}
+                    />
+                ) : (
+                    <ShippingMultiAddress
+                        basket={basket}
+                        submitButtonLabel={submitButtonMessage}
+                        noItemsInBasketMessage={noItemsInBasketMessage}
+                    />
+                )}
             </ToggleCardEdit>
             {isAddressFilled && (
                 <ToggleCardSummary>
-                    <AddressDisplay address={selectedShippingAddress} />
+                    {hasMultipleDeliveryShipments ? (
+                        <Text>
+                            {formatMessage({
+                                defaultMessage: 'Your items will be shipped to multiple addresses.',
+                                id: 'shipping_address.summary.multiple_addresses'
+                            })}
+                        </Text>
+                    ) : (
+                        <AddressDisplay address={selectedShippingAddress} />
+                    )}
                 </ToggleCardSummary>
             )}
         </ToggleCard>