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

package/app/components/unavailable-product-confirmation-modal/index.test.js

@@ -43,6 +43,53 @@ const mockProductsWithUnavailableProducts = {
     ]
 }
 
+const mockProductsWithBopisInventories = {
+    limit: 0,
+    total: 1,
+    data: [
+        {
+            currency: 'GBP',
+            id: '701642889830M',
+            imageGroups: [],
+            inventories: [
+                {
+                    id: 'bopis-store-1',
+                    orderable: true,
+                    stockLevel: 10
+                }
+            ]
+        }
+    ]
+}
+
+const mockProductWithBopisUnavailableInOneStore = {
+    limit: 0,
+    total: 1,
+    data: [
+        {
+            currency: 'GBP',
+            id: 'product-a',
+            imageGroups: [],
+            inventories: [
+                {
+                    id: 'store-1',
+                    orderable: true,
+                    stockLevel: 10
+                },
+                {
+                    id: 'store-2',
+                    orderable: false, // Not orderable from store-2
+                    stockLevel: 0
+                }
+            ],
+            inventory: {
+                orderable: true,
+                stockLevel: 100
+            }
+        }
+    ]
+}
+
 describe('UnavailableProductConfirmationModal', () => {
     test('renders without crashing', () => {
         prependHandlersToServer([
@@ -103,7 +150,6 @@ describe('UnavailableProductConfirmationModal', () => {
     })
 
     test('opens confirmation modal when unavailable products are found with defined productIds prop', async () => {
-        const mockProductIds = ['701642889899M', '701642889830M']
         prependHandlersToServer([
             {
                 path: '*/products',
@@ -147,3 +193,78 @@ describe('UnavailableProductConfirmationModal', () => {
         expect(removeBtn).not.toBeInTheDocument()
     })
 })
+
+test('does not open confirmation modal with sufficient bopis inventory', async () => {
+    prependHandlersToServer([
+        {
+            path: '*/products',
+            res: () => {
+                return mockProductsWithBopisInventories
+            }
+        }
+    ])
+    const mockFunc = jest.fn()
+    const basket = {
+        productItems: [
+            {
+                productId: '701642889830M',
+                quantity: 2,
+                inventoryId: 'bopis-store-1' // available
+            }
+        ]
+    }
+    const {queryByText} = renderWithProviders(
+        <UnavailableProductConfirmationModal
+            productItems={basket.productItems}
+            handleUnavailableProducts={mockFunc}
+        />
+    )
+
+    await waitFor(() => {
+        expect(queryByText(/Items Unavailable/i)).not.toBeInTheDocument()
+    })
+    expect(mockFunc).not.toHaveBeenCalled()
+})
+
+test('opens confirmation modal for bopis item unavailable in selected store', async () => {
+    prependHandlersToServer([
+        {
+            path: '*/products',
+            res: () => {
+                return mockProductWithBopisUnavailableInOneStore
+            }
+        }
+    ])
+    const mockFunc = jest.fn()
+    const basket = {
+        productItems: [
+            {
+                productId: 'product-a',
+                quantity: 1,
+                inventoryId: 'store-2' // unavailable in this store
+            }
+        ]
+    }
+    const {getByText, queryByText, queryByRole, user} = renderWithProviders(
+        <UnavailableProductConfirmationModal
+            productItems={basket.productItems}
+            handleUnavailableProducts={mockFunc}
+        />
+    )
+
+    await waitFor(async () => {
+        expect(getByText(/^Items Unavailable$/i)).toBeInTheDocument()
+    })
+    const removeBtn = queryByRole('button')
+
+    expect(removeBtn).toBeInTheDocument()
+    await user.click(removeBtn)
+    await waitFor(async () => {
+        expect(mockFunc).toHaveBeenCalledWith(['product-a'])
+    })
+
+    await waitFor(async () => {
+        expect(queryByText(/Items Unavailable/i)).not.toBeInTheDocument()
+    })
+    expect(removeBtn).not.toBeInTheDocument()
+})

package/app/constants.js

@@ -42,6 +42,9 @@ export const HOME_SHOP_PRODUCTS_LIMIT = 10
 export const CAT_MENU_DEFAULT_NAV_SSR_DEPTH = 1
 export const CAT_MENU_DEFAULT_ROOT_CATEGORY = 'root'
 
+// Constants for shipments
+export const DEFAULT_SHIPMENT_ID = 'me'
+
 // Default details of badge labels and the corresponding product custom properties that enable badges.
 export const PRODUCT_BADGE_DETAILS = [
     {
@@ -99,11 +102,6 @@ export const FEATURE_UNAVAILABLE_ERROR_MESSAGE = defineMessage({
     defaultMessage: 'This feature is not currently available.',
     id: 'global.error.feature_unavailable'
 })
-export const CREATE_ACCOUNT_FIRST_ERROR_MESSAGE = defineMessage({
-    defaultMessage:
-        'This feature is not currently available. You must create an account to access this feature.',
-    id: 'global.error.create_account'
-})
 
 export const HOME_HREF = '/'
 
@@ -144,6 +142,11 @@ export const TOAST_MESSAGE_REMOVED_FROM_WISHLIST = defineMessage({
     defaultMessage: 'Item removed from wishlist'
 })
 
+export const TOAST_MESSAGE_STORE_INSUFFICIENT_INVENTORY = defineMessage({
+    id: 'global.info.store_insufficient_inventory',
+    defaultMessage: "Some items aren't available for pickup at this store."
+})
+
 // Einstein recommender constants used in <RecommendedProducts/>
 export const EINSTEIN_RECOMMENDERS = {
     ADD_TO_CART_MODAL: 'pdp-similar-items',
@@ -184,6 +187,10 @@ export const REMOVE_UNAVAILABLE_CART_ITEM_DIALOG_CONFIG = {
     }),
     onPrimaryAction: noop
 }
+/**
+ * Constant to enable the store locator and shop the store feature.
+ * @deprecated Use `storeLocatorEnabled` in the config file instead
+ */
 export const STORE_LOCATOR_IS_ENABLED = true
 export const STORE_LOCATOR_SUPPORTED_COUNTRIES = [
     {
@@ -255,7 +262,14 @@ export const PASSWORDLESS_ERROR_MESSAGES = [
 
 export const INVALID_TOKEN_ERROR = /invalid token/i
 
+/**
+ * @deprecated The SLAS private client proxy will mask user not found errors
+ * so this variable should not be used as the app will not see these errors.
+ */
 export const USER_NOT_FOUND_ERROR = /user not found/i
 
-// Constant to enable partial hydration capabilities, i.e. `<Island/>` components
+/**
+ * Constant to enable partial hydration capabilities, i.e. `<Island/>` components
+ * @deprecated Use `partialHydrationEnabled` in the config file instead
+ */
 export const PARTIAL_HYDRATION_ENABLED = false

package/app/contexts/store-locator-provider.jsx

@@ -8,6 +8,7 @@
 import React, {useState, useEffect, createContext} from 'react'
 import PropTypes from 'prop-types'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+import {useDisclosure} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 const onClient = typeof window !== 'undefined'
 
@@ -26,6 +27,7 @@ export const StoreLocatorProvider = ({config, children}) => {
     const {site} = useMultiSite()
     const selectedStoreBySiteId = `selectedStore_${site?.id}`
     const selectedStoreId = readValue(selectedStoreBySiteId)
+    const {isOpen, onOpen, onClose} = useDisclosure()
 
     const [state, setState] = useState({
         mode: 'input',
@@ -49,7 +51,11 @@ export const StoreLocatorProvider = ({config, children}) => {
 
     const value = {
         state,
-        setState
+        setState,
+        // Modal actions
+        isOpen,
+        onOpen,
+        onClose
     }
 
     return <StoreLocatorContext.Provider value={value}>{children}</StoreLocatorContext.Provider>

package/app/contexts/store-locator-provider.test.jsx

@@ -7,6 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {render, act} from '@testing-library/react'
+import {MemoryRouter} from 'react-router-dom'
 import {
     StoreLocatorProvider,
     StoreLocatorContext
@@ -47,7 +48,9 @@ describe('StoreLocatorProvider', () => {
 
     const TestWrapper = ({children}) => (
         <MultiSiteProvider site={mockSite}>
-            <StoreLocatorProvider config={mockConfig}>{children}</StoreLocatorProvider>
+            <MemoryRouter>
+                <StoreLocatorProvider config={mockConfig}>{children}</StoreLocatorProvider>
+            </MemoryRouter>
         </MultiSiteProvider>
     )
 
@@ -83,6 +86,9 @@ describe('StoreLocatorProvider', () => {
             config: mockConfig
         })
         expect(typeof contextValue?.setState).toBe('function')
+        expect(typeof contextValue?.isOpen).toBe('boolean')
+        expect(typeof contextValue?.onOpen).toBe('function')
+        expect(typeof contextValue?.onClose).toBe('function')
     })
 
     it('initializes with stored selectedStoreId from localStorage', () => {
@@ -169,4 +175,33 @@ describe('StoreLocatorProvider', () => {
 
         expect(getByText('Test Child')).toBeTruthy()
     })
+
+    it('handles modal state correctly', () => {
+        let contextValue
+        const TestComponent = () => {
+            contextValue = React.useContext(StoreLocatorContext)
+            return null
+        }
+
+        render(
+            <TestWrapper>
+                <TestComponent />
+            </TestWrapper>
+        )
+
+        // Initially modal should be closed
+        expect(contextValue?.isOpen).toBe(false)
+
+        // Open modal
+        act(() => {
+            contextValue?.onOpen()
+        })
+        expect(contextValue?.isOpen).toBe(true)
+
+        // Close modal
+        act(() => {
+            contextValue?.onClose()
+        })
+        expect(contextValue?.isOpen).toBe(false)
+    })
 })

package/app/hooks/use-address-form.js

@@ -0,0 +1,155 @@
+/*
+ * 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 {useState, useCallback, useMemo} from 'react'
+import {useForm} from 'react-hook-form'
+import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
+import {useIntl} from 'react-intl'
+import {useShopperCustomersMutation} from '@salesforce/commerce-sdk-react'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+import {
+    areAddressesEqual,
+    sanitizedCustomerAddress
+} from '@salesforce/retail-react-app/app/utils/address-utils'
+import {nanoid} from 'nanoid'
+
+export const useAddressForm = (
+    addGuestAddress,
+    isGuest,
+    setAddressesForItems,
+    availableAddresses,
+    deliveryItems
+) => {
+    const {formatMessage} = useIntl()
+    const showToast = useToast()
+    const {data: customer, refetch: refetchCustomer} = useCurrentCustomer()
+    const [formStateByItemId, setFormStateByItemId] = useState({})
+
+    const createCustomerAddress = useShopperCustomersMutation('createCustomerAddress')
+
+    const form = useForm({
+        mode: 'onSubmit',
+        defaultValues: {
+            firstName: '',
+            lastName: '',
+            phone: '',
+            countryCode: 'US',
+            address1: '',
+            city: '',
+            stateCode: '',
+            postalCode: '',
+            preferred: false
+        }
+    })
+
+    const isAddressFormOpen = useMemo(() => {
+        return Object.keys(formStateByItemId).filter((key) => formStateByItemId[key])?.length > 0
+    }, [formStateByItemId])
+
+    const handleCreateAddress = useCallback(
+        async (addressData, itemId) => {
+            try {
+                const isDuplicate = availableAddresses.some((existingAddr) =>
+                    areAddressesEqual(addressData, existingAddr)
+                )
+
+                if (isDuplicate) {
+                    showToast({
+                        title: formatMessage({
+                            id: 'shipping_multi_address.error.duplicate_address',
+                            defaultMessage: 'The address you entered already exists.'
+                        }),
+                        status: 'info'
+                    })
+                    setFormStateByItemId((prev) => ({...prev, [itemId]: false}))
+                    form.reset()
+                    form.clearErrors()
+                    return null
+                }
+
+                let newAddress
+
+                if (isGuest) {
+                    newAddress = addGuestAddress(addressData)
+                } else {
+                    const apiAddressData = {
+                        ...sanitizedCustomerAddress(addressData),
+                        addressId: `addr_${nanoid()}`
+                    }
+
+                    const createdAddress = await createCustomerAddress.mutateAsync({
+                        body: apiAddressData,
+                        parameters: {customerId: customer.customerId}
+                    })
+                    await refetchCustomer()
+                    newAddress = createdAddress
+                }
+
+                showToast({
+                    title: formatMessage({
+                        id: 'shipping_multi_address.success.address_saved',
+                        defaultMessage: 'Address saved successfully'
+                    }),
+                    status: 'success'
+                })
+
+                // Assign the address to items
+                if (availableAddresses.length === 0) {
+                    // If first address, apply it to all items
+                    const itemIds = deliveryItems.map((item) => item.itemId)
+                    setAddressesForItems(itemIds, newAddress.addressId)
+                } else {
+                    setAddressesForItems(itemId, newAddress.addressId)
+                }
+
+                setFormStateByItemId((prev) => ({...prev, [itemId]: false}))
+                form.reset()
+                form.clearErrors()
+
+                return newAddress
+            } catch (error) {
+                showToast({
+                    title: formatMessage({
+                        id: 'shipping_multi_address.error.save_failed',
+                        defaultMessage: "Couldn't save the address."
+                    }),
+                    status: 'error'
+                })
+            }
+        },
+        [
+            isGuest,
+            addGuestAddress,
+            customer?.customerId,
+            setAddressesForItems,
+            availableAddresses,
+            deliveryItems
+        ]
+    )
+
+    const openForm = useCallback((itemId) => {
+        setFormStateByItemId((prev) => ({...prev, [itemId]: true}))
+    }, [])
+
+    const closeForm = useCallback(
+        (itemId) => {
+            setFormStateByItemId((prev) => ({...prev, [itemId]: false}))
+            form.clearErrors()
+        },
+        [form]
+    )
+
+    return {
+        form,
+        formStateByItemId,
+        isSubmitting: form.formState.isSubmitting,
+        openForm,
+        closeForm,
+        handleCreateAddress,
+        isAddressFormOpen,
+        formErrors: form.formState.errors
+    }
+}