Merge pull request #3300 from SalesforceCommerceCloud/develop

update the feature branch with latest changes in `develop` branch

Author: sf-shikhar-prasoon

packages/template-retail-react-app/CHANGELOG.md

@@ -1,5 +1,6 @@
 ## v8.1.0-dev (Sep 04, 2025)
 - Updated the UI for StoreDisplay component which displays pickup in-store information on different pages. [#3248](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3248)
+- Added warning modal for guest users when toggling between multi ship and ship to one address. [3280] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3280)
 
 ## v8.0.0 (Sep 04, 2025)
 - Add support for environment level base paths on /mobify routes [#2892](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2892)

packages/template-retail-react-app/app/components/single-address-toggle-modal/index.jsx

@@ -0,0 +1,99 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import {useIntl, defineMessage} from 'react-intl'
+import {
+    Button,
+    AlertDialog,
+    AlertDialogBody,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogContent,
+    AlertDialogOverlay,
+    Text
+} from '@salesforce/retail-react-app/app/components/shared/ui'
+
+const dialogTitle = defineMessage({
+    defaultMessage: 'Switch to one address?',
+    id: 'multi_ship_warning_modal.title.switch_to_one_address'
+})
+
+const confirmationMessage = defineMessage({
+    defaultMessage:
+        'If you switch to one address, the shipping addresses you added for the items will be removed.',
+    id: 'multi_ship_warning_modal.message.addresses_will_be_removed'
+})
+
+const continueButtonLabel = defineMessage({
+    defaultMessage: 'Switch to one address',
+    id: 'multi_ship_warning_modal.action.switch_to_one_address'
+})
+
+const cancelButtonLabel = defineMessage({
+    defaultMessage: 'Cancel',
+    id: 'multi_ship_warning_modal.action.cancel'
+})
+
+const SingleAddressToggleModal = ({isOpen, onClose, onConfirm, onCancel}) => {
+    const {formatMessage} = useIntl()
+
+    const handleConfirm = () => {
+        onConfirm()
+        onClose()
+    }
+
+    const handleCancel = () => {
+        onCancel()
+        onClose()
+    }
+
+    return (
+        <AlertDialog
+            isOpen={isOpen}
+            isCentered
+            onClose={handleCancel}
+            closeOnEsc={true}
+            closeOnOverlayClick={true}
+        >
+            <AlertDialogOverlay />
+            <AlertDialogContent maxW="448px" w="448px" minH="196px" borderRadius="6px">
+                <AlertDialogHeader>{formatMessage(dialogTitle)}</AlertDialogHeader>
+                <AlertDialogBody>
+                    <Text>{formatMessage(confirmationMessage)}</Text>
+                </AlertDialogBody>
+                <AlertDialogFooter>
+                    <Button
+                        variant="ghost"
+                        mr={3}
+                        onClick={handleCancel}
+                        aria-label={formatMessage(cancelButtonLabel)}
+                    >
+                        {formatMessage(cancelButtonLabel)}
+                    </Button>
+                    <Button
+                        variant="solid"
+                        onClick={handleConfirm}
+                        aria-label={formatMessage(continueButtonLabel)}
+                    >
+                        {formatMessage(continueButtonLabel)}
+                    </Button>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    )
+}
+
+SingleAddressToggleModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired
+}
+
+export default SingleAddressToggleModal

packages/template-retail-react-app/app/components/single-address-toggle-modal/index.test.jsx

@@ -0,0 +1,71 @@
+/*
+ * 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, fireEvent} from '@testing-library/react'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import SingleAddressToggleModal from '@salesforce/retail-react-app/app/components/single-address-toggle-modal'
+
+describe('SingleAddressToggleModal', () => {
+    const mockProps = {
+        isOpen: true,
+        onClose: jest.fn(),
+        onConfirm: jest.fn(),
+        onCancel: jest.fn()
+    }
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    it('renders modal when open', () => {
+        renderWithProviders(<SingleAddressToggleModal {...mockProps} />)
+        expect(screen.getByRole('alertdialog')).toBeInTheDocument()
+        expect(screen.getByText('Switch to one address?')).toBeInTheDocument()
+        expect(
+            screen.getByText(
+                /If you switch to one address, the shipping addresses you added for the items will be removed/
+            )
+        ).toBeInTheDocument()
+    })
+
+    it('does not render when closed', () => {
+        renderWithProviders(<SingleAddressToggleModal {...mockProps} isOpen={false} />)
+        expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+        expect(screen.queryByText('Switch to one address?')).not.toBeInTheDocument()
+    })
+
+    it('calls onConfirm when Switch to one address button is clicked', () => {
+        renderWithProviders(<SingleAddressToggleModal {...mockProps} />)
+        const continueButton = screen.getByRole('button', {name: /switch to one address/i})
+        fireEvent.click(continueButton)
+        expect(mockProps.onConfirm).toHaveBeenCalledTimes(1)
+    })
+
+    it('calls onCancel when Cancel button is clicked', () => {
+        renderWithProviders(<SingleAddressToggleModal {...mockProps} />)
+        const cancelButton = screen.getByRole('button', {name: /cancel/i})
+        fireEvent.click(cancelButton)
+        expect(mockProps.onCancel).toHaveBeenCalledTimes(1)
+    })
+
+    it('has proper accessibility attributes', () => {
+        renderWithProviders(<SingleAddressToggleModal {...mockProps} />)
+        const dialog = screen.getByRole('alertdialog')
+        expect(dialog).toHaveAttribute('aria-labelledby')
+        expect(dialog).toHaveAttribute('aria-describedby')
+    })
+
+    it('handles keyboard navigation', () => {
+        renderWithProviders(<SingleAddressToggleModal {...mockProps} />)
+        const continueButton = screen.getByRole('button', {name: /switch to one address/i})
+        const cancelButton = screen.getByRole('button', {name: /cancel/i})
+        continueButton.focus()
+        expect(document.activeElement).toBe(continueButton)
+        cancelButton.focus()
+        expect(document.activeElement).toBe(cancelButton)
+    })
+})

packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx

@@ -13,7 +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 {Text, useDisclosure} 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 {
@@ -36,6 +36,7 @@ import {
     findExistingDeliveryShipment,
     isPickupShipment
 } from '@salesforce/retail-react-app/app/utils/shipment-utils'
+import SingleAddressToggleModal from '@salesforce/retail-react-app/app/components/single-address-toggle-modal'
 
 const submitButtonMessage = defineMessage({
     defaultMessage: 'Continue to Shipping Method',
@@ -77,6 +78,12 @@ export default function ShippingAddress() {
 
     // Initialize multi-shipping state based on existing basket shipments
     const [isMultiShipping, setIsMultiShipping] = useState(hasMultipleDeliveryShipments)
+    const {
+        isOpen: showWarningModal,
+        onOpen: openWarningModal,
+        onClose: closeWarningModal
+    } = useDisclosure()
+    const [hasUnpersistedGuestAddresses, sethasUnpersistedGuestAddresses] = useState(false)
     const {step, STEPS, goToStep} = useCheckout()
     const createCustomerAddress = useShopperCustomersMutation('createCustomerAddress')
     const updateCustomerAddress = useShopperCustomersMutation('updateCustomerAddress')
@@ -90,6 +97,30 @@ export default function ShippingAddress() {
         setIsMultiShipping(hasMultipleDeliveryShipments)
     }, [hasMultipleDeliveryShipments])
 
+    // handle unpersisted address status from ShippingMultiAddress
+    const handleUnsavedGuestAddressesToggleWarning = (hasUnsaved) => {
+        sethasUnpersistedGuestAddresses(hasUnsaved)
+    }
+
+    // Handle toggle between single and multi-shipping
+    const handleToggleShippingMode = () => {
+        if (isMultiShipping && customer?.isGuest && hasUnpersistedGuestAddresses) {
+            openWarningModal()
+        } else {
+            setIsMultiShipping(!isMultiShipping)
+        }
+    }
+
+    // handle confirmation to single address
+    const handleConfirmSwitchToSingle = () => {
+        setIsMultiShipping(false)
+        closeWarningModal()
+    }
+
+    const handleCancelSwitch = () => {
+        closeWarningModal()
+    }
+
     const submitAndContinue = async (address) => {
         setIsLoading(true)
         try {
@@ -162,72 +193,79 @@ export default function ShippingAddress() {
     const isEditingShippingAddress = step === STEPS.SHIPPING_ADDRESS
 
     return (
-        <ToggleCard
-            id="step-1"
-            title={formatMessage({
-                defaultMessage: 'Shipping Address',
-                id: 'shipping_address.title.shipping_address'
-            })}
-            editing={isEditingShippingAddress}
-            isLoading={isLoading}
-            disabled={step === STEPS.CONTACT_INFO && !selectedShippingAddress}
-            onEdit={() => goToStep(STEPS.SHIPPING_ADDRESS)}
-            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>
-                {!isMultiShipping ? (
-                    <ShippingAddressSelection
-                        selectedAddress={selectedShippingAddress}
-                        submitButtonLabel={submitButtonMessage}
-                        onSubmit={submitAndContinue}
-                        formTitleAriaLabel={shippingAddressAriaLabel}
-                    />
-                ) : (
-                    <ShippingMultiAddress
-                        basket={basket}
-                        submitButtonLabel={submitButtonMessage}
-                        noItemsInBasketMessage={noItemsInBasketMessage}
-                    />
-                )}
-            </ToggleCardEdit>
-            {isAddressFilled && (
-                <ToggleCardSummary>
-                    {hasMultipleDeliveryShipments ? (
-                        <Text>
-                            {formatMessage({
-                                defaultMessage: 'Your items will be shipped to multiple addresses.',
-                                id: 'shipping_address.summary.multiple_addresses'
-                            })}
-                        </Text>
+        <>
+            <ToggleCard
+                id="step-1"
+                title={formatMessage({
+                    defaultMessage: 'Shipping Address',
+                    id: 'shipping_address.title.shipping_address'
+                })}
+                editing={isEditingShippingAddress}
+                isLoading={isLoading}
+                disabled={step === STEPS.CONTACT_INFO && !selectedShippingAddress}
+                onEdit={() => goToStep(STEPS.SHIPPING_ADDRESS)}
+                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 ? handleToggleShippingMode : null}
+            >
+                <ToggleCardEdit>
+                    {!isMultiShipping ? (
+                        <ShippingAddressSelection
+                            selectedAddress={selectedShippingAddress}
+                            submitButtonLabel={submitButtonMessage}
+                            onSubmit={submitAndContinue}
+                            formTitleAriaLabel={shippingAddressAriaLabel}
+                        />
                     ) : (
-                        <AddressDisplay address={selectedShippingAddress} />
+                        <ShippingMultiAddress
+                            basket={basket}
+                            submitButtonLabel={submitButtonMessage}
+                            noItemsInBasketMessage={noItemsInBasketMessage}
+                            onUnsavedGuestAddressesToggleWarning={
+                                handleUnsavedGuestAddressesToggleWarning
+                            }
+                        />
                     )}
-                </ToggleCardSummary>
-            )}
-        </ToggleCard>
+                </ToggleCardEdit>
+                {isAddressFilled && (
+                    <ToggleCardSummary>
+                        {hasMultipleDeliveryShipments ? (
+                            <Text>
+                                {formatMessage({
+                                    defaultMessage:
+                                        'Your items will be shipped to multiple addresses.',
+                                    id: 'shipping_address.summary.multiple_addresses'
+                                })}
+                            </Text>
+                        ) : (
+                            <AddressDisplay address={selectedShippingAddress} />
+                        )}
+                    </ToggleCardSummary>
+                )}
+            </ToggleCard>
+
+            <SingleAddressToggleModal
+                isOpen={showWarningModal}
+                onClose={closeWarningModal}
+                onConfirm={handleConfirmSwitchToSingle}
+                onCancel={handleCancelSwitch}
+            />
+        </>
     )
 }