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

package/app/components/product-view/index.test.js

@@ -90,7 +90,7 @@ test('ProductView Component renders properly', async () => {
     expect(screen.getAllByText(/Black Single Pleat Athletic Fit Wool Suit/i)).toHaveLength(2)
     expect(screen.getAllByText(/299\.99/)).toHaveLength(4)
     expect(screen.getAllByText(/Add to cart/i)).toHaveLength(2)
-    expect(screen.getAllByRole('radiogroup')).toHaveLength(4)
+    expect(screen.getAllByRole('radiogroup')).toHaveLength(3)
     expect(screen.getAllByText(/add to cart/i)).toHaveLength(2)
 })
 
@@ -365,7 +365,7 @@ describe('Product Sets', () => {
             name: /add set to wishlist/i
         })[0]
         const variationAttributes = screen
-            .getAllByRole('radiogroup')
+            .queryAllByRole('radiogroup')
             .filter(
                 (rg) =>
                     !rg.textContent.includes('Ship to Address') &&
@@ -395,7 +395,7 @@ describe('Product Sets', () => {
         const addToCartButton = screen.getAllByRole('button', {name: /add to cart/i})[0]
         const addToWishlistButton = screen.getAllByRole('button', {name: /add to wishlist/i})[0]
         const variationAttributes = screen
-            .getAllByRole('radiogroup')
+            .queryAllByRole('radiogroup')
             .filter(
                 (rg) =>
                     !rg.textContent.includes('Ship to Address') &&
@@ -433,7 +433,7 @@ describe('Product Bundles', () => {
         })[0]
         const quantityPicker = screen.getByRole('spinbutton', {name: /quantity/i})
         const variationAttributes = screen
-            .getAllByRole('radiogroup')
+            .queryAllByRole('radiogroup')
             .filter(
                 (rg) =>
                     !rg.textContent.includes('Ship to Address') &&
@@ -464,7 +464,7 @@ describe('Product Bundles', () => {
         const addToCartButton = screen.queryByRole('button', {name: /add to cart/i})
         const addToWishlistButton = screen.queryByRole('button', {name: /add to wishlist/i})
         const variationAttributes = screen
-            .getAllByRole('radiogroup')
+            .queryAllByRole('radiogroup')
             .filter(
                 (rg) =>
                     !rg.textContent.includes('Ship to Address') &&
@@ -488,7 +488,7 @@ describe('Product Bundles', () => {
             inventories: [{id: mockStoreData.inventoryId, orderable: true, stockLevel: 10}]
         }
 
-        renderWithProviders(<MockComponent product={mockProduct} />)
+        renderWithProviders(<MockComponent product={mockProduct} showDeliveryOptions={true} />)
 
         // Assert: Radio is enabled
         const pickupRadio = await screen.findByRole('radio', {name: /pick up in store/i})
@@ -496,7 +496,9 @@ describe('Product Bundles', () => {
     })
 
     test('Pickup in store radio is disabled when inventoryId is NOT present in localStorage', async () => {
-        renderWithProviders(<MockComponent product={mockProductDetail} />)
+        renderWithProviders(
+            <MockComponent product={mockProductDetail} showDeliveryOptions={true} />
+        )
 
         // Assert: Radio is disabled
         const pickupRadio = await screen.findByRole('radio', {name: /pick up in store/i})
@@ -512,7 +514,7 @@ describe('Product Bundles', () => {
             inventories: [{id: mockStoreData.inventoryId, orderable: false}]
         }
 
-        renderWithProviders(<MockComponent product={mockProduct} />)
+        renderWithProviders(<MockComponent product={mockProduct} showDeliveryOptions={true} />)
 
         const pickupRadio = await screen.findByRole('radio', {name: /pick up in store/i})
         // Chakra UI does not set a semantic disabled attribute, so we test for unclickability
@@ -529,7 +531,9 @@ describe('Product Bundles', () => {
             hasSelectedStore: false
         })
 
-        renderWithProviders(<MockComponent product={mockProductDetail} />)
+        renderWithProviders(
+            <MockComponent product={mockProductDetail} showDeliveryOptions={true} />
+        )
 
         const label = await screen.findByTestId('pickup-select-store-msg')
         expect(label).toBeInTheDocument()
@@ -548,7 +552,7 @@ describe('Product Bundles', () => {
                 inventories: [{id: mockStoreData.inventoryId, orderable: true, stockLevel: 10}],
                 name: 'Test Product'
             }
-            renderWithProviders(<MockComponent product={mockProduct} />)
+            renderWithProviders(<MockComponent product={mockProduct} showDeliveryOptions={true} />)
             const msg = await screen.findByText(/In Stock at/i)
             expect(msg).toBeInTheDocument()
             expect(msg).toHaveTextContent(storeName)
@@ -564,7 +568,7 @@ describe('Product Bundles', () => {
                 inventories: [{id: mockStoreData.inventoryId, orderable: false}],
                 name: 'Test Product'
             }
-            renderWithProviders(<MockComponent product={mockProduct} />)
+            renderWithProviders(<MockComponent product={mockProduct} showDeliveryOptions={true} />)
             const msg = await screen.findByText(/Out of Stock at/i)
             expect(msg).toBeInTheDocument()
             expect(msg).toHaveTextContent(storeName)
@@ -600,13 +604,13 @@ describe('Product Bundles', () => {
             expect(screen.queryByTestId('pickup-select-store-msg')).not.toBeInTheDocument()
         })
 
-        test('shows delivery options when showDeliveryOptions is not provided (defaults to true)', async () => {
+        test('hides delivery options when showDeliveryOptions is not provided (defaults to false)', async () => {
             renderWithProviders(<MockComponent product={mockProductDetail} />)
 
-            // Delivery options should be visible by default
-            expect(screen.getByText(/Delivery:/i)).toBeInTheDocument()
-            expect(screen.getByRole('radio', {name: /ship to address/i})).toBeInTheDocument()
-            expect(screen.getByRole('radio', {name: /pick up in store/i})).toBeInTheDocument()
+            // Delivery options should not be visible by default
+            expect(screen.queryByText(/Delivery:/i)).not.toBeInTheDocument()
+            expect(screen.queryByRole('radio', {name: /ship to address/i})).not.toBeInTheDocument()
+            expect(screen.queryByRole('radio', {name: /pick up in store/i})).not.toBeInTheDocument()
         })
     })
 })
@@ -619,7 +623,7 @@ test('Pick up in store radio is enabled when selected store is set', async () =>
         inventories: [{id: mockStoreData.inventoryId, orderable: true, stockLevel: 10}]
     }
 
-    renderWithProviders(<MockComponent product={mockProduct} />)
+    renderWithProviders(<MockComponent product={mockProduct} showDeliveryOptions={true} />)
 
     // Assert: Radio is enabled
     const pickupRadio = await screen.findByRole('radio', {name: /pick up in store/i})
@@ -627,7 +631,7 @@ test('Pick up in store radio is enabled when selected store is set', async () =>
 })
 
 test('Pick up in store radio is disabled when inventoryId is NOT present in selected store', async () => {
-    renderWithProviders(<MockComponent product={mockProductDetail} />)
+    renderWithProviders(<MockComponent product={mockProductDetail} showDeliveryOptions={true} />)
 
     // Assert: Radio is disabled
     const pickupRadio = await screen.findByRole('radio', {name: /pick up in store/i})
@@ -643,7 +647,7 @@ test('Pick up in store radio is disabled when inventoryId is present but product
         inventories: [{id: mockStoreData.inventoryId, orderable: false}]
     }
 
-    renderWithProviders(<MockComponent product={mockProduct} />)
+    renderWithProviders(<MockComponent product={mockProduct} showDeliveryOptions={true} />)
 
     const pickupRadio = await screen.findByRole('radio', {name: /pick up in store/i})
     // Chakra UI does not set a semantic disabled attribute, so we test for unclickability
@@ -660,7 +664,7 @@ test('shows "Pick up in Select Store" label when pickup is disabled due to no st
         hasSelectedStore: false
     })
 
-    renderWithProviders(<MockComponent product={mockProductDetail} />)
+    renderWithProviders(<MockComponent product={mockProductDetail} showDeliveryOptions={true} />)
 
     const label = await screen.findByTestId('pickup-select-store-msg')
     expect(label).toBeInTheDocument()
@@ -676,7 +680,7 @@ test('shows "In stock at {storeName}" when store has inventory', async () => {
         inventories: [{id: mockStoreData.inventoryId, orderable: true, stockLevel: 10}]
     }
 
-    renderWithProviders(<MockComponent product={mockProduct} />)
+    renderWithProviders(<MockComponent product={mockProduct} showDeliveryOptions={true} />)
     const msg = await screen.findByText(/In stock at/i)
     expect(msg).toBeInTheDocument()
     expect(msg).toHaveTextContent('Test Store')

package/app/components/quantity-picker/index.test.jsx

@@ -21,36 +21,35 @@ describe('QuantityPicker', () => {
     test('clicking plus increments value', async () => {
         const user = userEvent.setup()
         renderWithProviders(<MockComponent />)
-        const input = screen.getByRole('spinbutton')
         const button = screen.getByText('+')
         await user.click(button)
+        const input = screen.getByRole('spinbutton')
         expect(input.value).toBe('6')
     })
     test('clicking minus decrements value', async () => {
         const user = userEvent.setup()
         renderWithProviders(<MockComponent />)
-        const input = screen.getByRole('spinbutton')
         const button = screen.getByText(MINUS)
         await user.click(button)
+        const input = screen.getByRole('spinbutton')
         expect(input.value).toBe('4')
     })
     test('typing enter/space on plus increments value', async () => {
         const user = userEvent.setup()
         renderWithProviders(<MockComponent />)
-        const input = screen.getByRole('spinbutton')
         const button = screen.getByText('+')
         await user.type(button, '{enter}')
+        const input = screen.getByRole('spinbutton')
         expect(input.value).toBe('6')
         await user.type(button, '{space}')
         expect(input.value).toBe('7')
     })
 
     test('keydown enter/space on plus increments value', async () => {
-        const user = userEvent.setup()
         renderWithProviders(<MockComponent />)
-        const input = screen.getByRole('spinbutton')
         const button = screen.getByText('+')
         fireEvent.keyDown(button, {key: 'Enter'})
+        const input = screen.getByRole('spinbutton')
         expect(input.value).toBe('6')
         fireEvent.keyDown(button, {key: ' '})
         expect(input.value).toBe('7')
@@ -59,20 +58,19 @@ describe('QuantityPicker', () => {
     test('typing space on minus decrements value', async () => {
         const user = userEvent.setup()
         renderWithProviders(<MockComponent />)
-        const input = screen.getByRole('spinbutton')
         const button = screen.getByText(MINUS)
         await user.type(button, '{enter}')
+        const input = screen.getByRole('spinbutton')
         expect(input.value).toBe('4')
         await user.type(button, '{space}')
         expect(input.value).toBe('3')
     })
 
     test('keydown enter/space on minus decrements value', async () => {
-        const user = userEvent.setup()
         renderWithProviders(<MockComponent />)
-        const input = screen.getByRole('spinbutton')
         const button = screen.getByText(MINUS)
         fireEvent.keyDown(button, {key: 'Enter'})
+        const input = screen.getByRole('spinbutton')
         expect(input.value).toBe('4')
         fireEvent.keyDown(button, {key: ' '})
         expect(input.value).toBe('3')
@@ -81,16 +79,18 @@ describe('QuantityPicker', () => {
     test('plus button is tabbable', async () => {
         const user = userEvent.setup()
         renderWithProviders(<MockComponent />)
-        const input = screen.getByRole('spinbutton')
-        await user.type(input, '{tab}')
+        await user.tab()
+        await user.tab() // Tab twice to get to the plus button
+        await user.tab() // Tab once more to get to the plus button
         const button = screen.getByText('+')
         expect(button).toHaveFocus()
     })
     test('minus button is tabbable', async () => {
         const user = userEvent.setup()
         renderWithProviders(<MockComponent />)
-        const input = screen.getByRole('spinbutton')
-        await user.type(input, '{shift>}{tab}') // > modifier in {shift>} means "keep key pressed"
+        await user.tab({shift: true})
+        await user.tab({shift: true}) // Shift+tab twice to get to the minus button
+        await user.tab({shift: true}) // Shift+tab once more to get to the minus button
         const button = screen.getByText(MINUS)
         expect(button).toHaveFocus()
     })

package/app/components/reset-password/index.test.js

@@ -49,7 +49,7 @@ const MockedErrorComponent = () => {
 }
 
 test('Allows customer to generate password token and see success message', async () => {
-    const mockSubmitForm = jest.fn(async (data) => ({
+    const mockSubmitForm = jest.fn(async () => ({
         password: jest.fn(async (passwordData) => {
             // Mock behavior inside the password function
             console.log('Password function called with:', passwordData)

package/app/components/shared/ui/AlertDescription/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {AlertDescription} from '@chakra-ui/react'

package/app/components/shared/ui/index.jsx

@@ -19,6 +19,7 @@ export {AlertDialogHeader} from './AlertDialogHeader'
 export {AlertDialogOverlay} from './AlertDialogOverlay'
 export {AlertIcon} from './AlertIcon'
 export {AlertTitle} from './AlertTitle'
+export {AlertDescription} from './AlertDescription'
 export {AspectRatio} from './AspectRatio'
 export {Badge} from './Badge'
 export {Box} from './Box'

package/app/components/store-display/index.jsx

@@ -6,9 +6,11 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {useIntl} from 'react-intl'
+import {useIntl, FormattedMessage} from 'react-intl'
 import {
     Box,
+    Button,
+    Flex,
     Accordion,
     AccordionItem,
     AccordionButton,
@@ -25,7 +27,8 @@ const StoreDisplay = ({
     nameStyle = {fontSize: 'md', fontWeight: 'bold'},
     textSize = 'sm',
     accordionButtonStyle = {},
-    accordionPanelStyle = {}
+    accordionPanelStyle = {},
+    onChangeStore
 }) => {
     const intl = useIntl()
 
@@ -35,7 +38,26 @@ const StoreDisplay = ({
 
     return (
         <Box id={`store-info-${store.id}`}>
-            {store.name && <Box {...nameStyle}>{store.name}</Box>}
+            {store.name && (
+                <Flex justify="space-between" align="flex-start" mb={1}>
+                    <Box {...nameStyle}>{store.name}</Box>
+                    {onChangeStore && (
+                        <Button
+                            variant="link"
+                            size="sm"
+                            fontWeight="normal"
+                            onClick={onChangeStore}
+                            data-testid="change-store-button"
+                            ml={2}
+                        >
+                            <FormattedMessage
+                                defaultMessage="Use Recent Store"
+                                id="store_display.button.use_recent_store"
+                            />
+                        </Button>
+                    )}
+                </Flex>
+            )}
             <Box fontSize={textSize} color="gray.600">
                 {store.address1}
             </Box>
@@ -161,7 +183,9 @@ StoreDisplay.propTypes = {
     /** Custom style props for accordion button */
     accordionButtonStyle: PropTypes.object,
     /** Custom style props for accordion panel */
-    accordionPanelStyle: PropTypes.object
+    accordionPanelStyle: PropTypes.object,
+    /** Callback function to handle change store action */
+    onChangeStore: PropTypes.func
 }
 
 export default StoreDisplay

package/app/components/store-display/index.test.js

@@ -266,4 +266,75 @@ describe('StoreDisplay component', () => {
         expect(screen.queryByText(/Phone:/)).not.toBeInTheDocument()
         expect(screen.queryByText(/Email:/)).not.toBeInTheDocument()
     })
+
+    describe('Change Store Button', () => {
+        test('renders Change Store button when onChangeStore is provided', () => {
+            const mockOnChangeStore = jest.fn()
+            renderWithProviders(
+                <StoreDisplay store={mockStore} onChangeStore={mockOnChangeStore} />
+            )
+
+            const changeStoreButton = screen.getByTestId('change-store-button')
+            expect(changeStoreButton).toBeInTheDocument()
+            expect(changeStoreButton).toHaveTextContent('Use Recent Store')
+        })
+
+        test('does not render Change Store button when onChangeStore is not provided', () => {
+            renderWithProviders(<StoreDisplay store={mockStore} />)
+
+            expect(screen.queryByTestId('change-store-button')).not.toBeInTheDocument()
+        })
+
+        test('calls onChangeStore when Change Store button is clicked', async () => {
+            const mockOnChangeStore = jest.fn()
+            const user = userEvent.setup()
+            renderWithProviders(
+                <StoreDisplay store={mockStore} onChangeStore={mockOnChangeStore} />
+            )
+
+            const changeStoreButton = screen.getByTestId('change-store-button')
+            await user.click(changeStoreButton)
+
+            expect(mockOnChangeStore).toHaveBeenCalledTimes(1)
+        })
+
+        test('does not render Change Store button when store has no name', () => {
+            const storeWithoutName = {
+                ...mockStore,
+                name: null
+            }
+            const mockOnChangeStore = jest.fn()
+            renderWithProviders(
+                <StoreDisplay store={storeWithoutName} onChangeStore={mockOnChangeStore} />
+            )
+
+            expect(screen.queryByTestId('change-store-button')).not.toBeInTheDocument()
+        })
+
+        test('renders Change Store button with correct styling', () => {
+            const mockOnChangeStore = jest.fn()
+            renderWithProviders(
+                <StoreDisplay store={mockStore} onChangeStore={mockOnChangeStore} />
+            )
+
+            const changeStoreButton = screen.getByTestId('change-store-button')
+            expect(changeStoreButton).toBeInTheDocument()
+
+            // Check that it's rendered as a button
+            expect(changeStoreButton.tagName).toBe('BUTTON')
+        })
+
+        test('positions Change Store button next to store name', () => {
+            const mockOnChangeStore = jest.fn()
+            renderWithProviders(
+                <StoreDisplay store={mockStore} onChangeStore={mockOnChangeStore} />
+            )
+
+            const storeName = screen.getByText('Downtown Store')
+            const changeStoreButton = screen.getByTestId('change-store-button')
+
+            // Both should be in the same parent container (Flex)
+            expect(storeName.parentElement).toBe(changeStoreButton.parentElement)
+        })
+    })
 })

package/app/components/store-locator/form.test.jsx

@@ -9,6 +9,7 @@ import React from 'react'
 import {render, screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {IntlProvider} from 'react-intl'
+import {MemoryRouter} from 'react-router-dom'
 import {StoreLocatorForm} from '@salesforce/retail-react-app/app/components/store-locator/form'
 import {useStoreLocator} from '@salesforce/retail-react-app/app/hooks/use-store-locator'
 import {useGeolocation} from '@salesforce/retail-react-app/app/hooks/use-geo-location'
@@ -75,7 +76,9 @@ describe('StoreLocatorForm', () => {
     const TestWrapper = ({children}) => (
         <IntlProvider locale="en" messages={messages}>
             <MultiSiteProvider site={mockSite}>
-                <StoreLocatorProvider config={mockConfig}>{children}</StoreLocatorProvider>
+                <MemoryRouter>
+                    <StoreLocatorProvider config={mockConfig}>{children}</StoreLocatorProvider>
+                </MemoryRouter>
             </MultiSiteProvider>
         </IntlProvider>
     )
@@ -92,7 +95,10 @@ describe('StoreLocatorForm', () => {
             config: mockConfig,
             formValues: {countryCode: '', postalCode: ''},
             setFormValues: mockSetFormValues,
-            setDeviceCoordinates: mockSetDeviceCoordinates
+            setDeviceCoordinates: mockSetDeviceCoordinates,
+            isOpen: false,
+            onOpen: jest.fn(),
+            onClose: jest.fn()
         }))
 
         useGeolocation.mockImplementation(() => ({
@@ -197,7 +203,10 @@ describe('StoreLocatorForm', () => {
             config: {...mockConfig, supportedCountries: []},
             formValues: {countryCode: '', postalCode: ''},
             setFormValues: mockSetFormValues,
-            setDeviceCoordinates: mockSetDeviceCoordinates
+            setDeviceCoordinates: mockSetDeviceCoordinates,
+            isOpen: false,
+            onOpen: jest.fn(),
+            onClose: jest.fn()
         }))
 
         renderWithProviders(<StoreLocatorForm />)
@@ -220,7 +229,10 @@ describe('StoreLocatorForm', () => {
             config: mockConfig,
             formValues: {countryCode: '', postalCode: ''},
             setFormValues: mockSetFormValues,
-            setDeviceCoordinates: mockSetDeviceCoordinates
+            setDeviceCoordinates: mockSetDeviceCoordinates,
+            isOpen: false,
+            onOpen: jest.fn(),
+            onClose: jest.fn()
         }))
 
         renderWithProviders(<StoreLocatorForm />)

package/app/components/store-locator/list.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2024, salesforce.com, inc.
+ * 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
@@ -12,6 +12,7 @@ import {StoreLocatorListItem} from '@salesforce/retail-react-app/app/components/
 import {useStoreLocator} from '@salesforce/retail-react-app/app/hooks/use-store-locator'
 import {useSelectedStore} from '@salesforce/retail-react-app/app/hooks/use-selected-store'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 
 export const StoreLocatorList = () => {
     const intl = useIntl()
@@ -22,7 +23,11 @@ export const StoreLocatorList = () => {
     const [page, setPage] = useState(1)
     const [initialSelectedStoreId, setInitialSelectedStoreId] = useState(selectedStoreId)
 
+    // with BOPIS enabled: store locator selector can't be changed unless basket is emty
+    // with BOPIS and MULTI_SHIP enabled, store locator can be changed any time
     const hasItemsInBasket = derivedData?.totalItems > 0
+    const multishipEnabled = getConfig()?.app?.multishipEnabled ?? true
+    const storeSelectionDisabled = multishipEnabled ? false : hasItemsInBasket
 
     useEffect(() => {
         setPage(1)
@@ -31,7 +36,7 @@ export const StoreLocatorList = () => {
     }, [data])
 
     const handleChange = (selectedStoreId) => {
-        if (!hasItemsInBasket) {
+        if (!storeSelectionDisabled) {
             setSelectedStoreId(selectedStoreId)
         }
     }
@@ -47,7 +52,7 @@ export const StoreLocatorList = () => {
                 id: 'store_locator.description.no_locations',
                 defaultMessage: 'Sorry, there are no locations in this area.'
             })
-        if (hasItemsInBasket) {
+        if (storeSelectionDisabled && hasItemsInBasket) {
             return intl.formatMessage({
                 id: 'store_locator.error.items_in_basket',
                 defaultMessage: 'To change your selected store, remove all items from your cart.'
@@ -145,7 +150,7 @@ export const StoreLocatorList = () => {
                                         value: store.id,
                                         isChecked: selectedStoreId === store.id,
                                         'aria-describedby': `store-info-${store.id}`,
-                                        isDisabled: !store.inventoryId || hasItemsInBasket
+                                        isDisabled: !store.inventoryId || storeSelectionDisabled
                                     }}
                                 />
                             ))}

package/app/components/toggle-card/index.jsx

@@ -31,8 +31,10 @@ export const ToggleCard = ({
     disableEdit,
     onEdit,
     editLabel,
+    editAction,
     isLoading,
     children,
+    onEditActionClick,
     ...props
 }) => {
     const titleRef = useRef()
@@ -79,6 +81,16 @@ export const ToggleCard = ({
                                 )}
                             </Button>
                         )}
+                        {editing && editAction && onEditActionClick && (
+                            <Button
+                                variant="link"
+                                size="sm"
+                                onClick={onEditActionClick}
+                                aria-label={editAction}
+                            >
+                                {editAction}
+                            </Button>
+                        )}
                     </Flex>
                     <Box data-testid={`sf-toggle-card-${id}-content`}>{children}</Box>
                 </Stack>
@@ -108,6 +120,8 @@ ToggleCard.propTypes = {
     disabled: PropTypes.bool,
     disableEdit: PropTypes.bool,
     onEdit: PropTypes.func,
+    editAction: PropTypes.string,
+    onEditActionClick: PropTypes.func,
     children: PropTypes.any
 }
 

package/app/components/unavailable-product-confirmation-modal/index.jsx

@@ -31,14 +31,24 @@ const UnavailableProductConfirmationModal = ({
 }) => {
     const unavailableProductIdsRef = useRef(null)
     const ids = productIds.length ? productIds : productItems.map((i) => i.productId)
+    const uniqueInventoryIds = [
+        ...new Set(productItems.map((i) => i.inventoryId).filter(Boolean))
+    ].join(',')
+
     useProducts(
-        {parameters: {ids: ids?.join(','), allImages: true}},
+        {
+            parameters: {
+                ids: ids?.join(','),
+                allImages: true,
+                ...(uniqueInventoryIds ? {inventoryIds: uniqueInventoryIds} : {})
+            }
+        },
         {
             enabled: ids?.length > 0,
             onSuccess: (result) => {
                 const resProductIds = []
                 const unOrderableIds = []
-                result.data?.forEach(({id, inventory}) => {
+                result.data?.forEach(({id, inventory, inventories}) => {
                     // when a product is unavailable, the getProducts will not return its product detail.
                     // we compare the response ids with the ones in basket to figure which product has become unavailable
                     resProductIds.push(id)
@@ -50,11 +60,15 @@ const UnavailableProductConfirmationModal = ({
                         const productItem = productItems.find((item) => item.productId === id)
                         // wishlist item will have the property type
                         const isWishlist = !!productItem?.type
+                        // inventory for the product's pickup store or the delivery inventory
+                        const productItemInventory =
+                            inventories?.find((entry) => entry.id === productItem.inventoryId) ||
+                            inventory
                         if (
                             !isWishlist &&
-                            (!inventory?.orderable ||
-                                (inventory?.orderable &&
-                                    productItem?.quantity > inventory.stockLevel))
+                            (!productItemInventory?.orderable ||
+                                (productItemInventory?.orderable &&
+                                    productItem?.quantity > productItemInventory.stockLevel))
                         ) {
                             unOrderableIds.push(id)
                         }