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

package/app/pages/product-detail/index.test.js

@@ -28,6 +28,7 @@ import {
     bundleProductItemsForPDP
 } from '@salesforce/retail-react-app/app/mocks/product-bundle'
 import {mockStandardProductOrderable} from '@salesforce/retail-react-app/app/mocks/standard-product'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
 
 jest.setTimeout(60000)
 
@@ -79,27 +80,34 @@ jest.mock('@salesforce/retail-react-app/app/components/recommended-products', ()
     return MockedRecommendedProducts
 })
 
+// Mock getConfig to return test values
+jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => ({
+    getConfig: jest.fn(() => ({
+        ...mockConfig,
+        app: {
+            ...mockConfig.app,
+            storeLocatorEnabled: true,
+            multishipEnabled: false
+        }
+    }))
+}))
+
 jest.mock('@salesforce/retail-react-app/app/constants', () => {
     const originalModule = jest.requireActual('@salesforce/retail-react-app/app/constants')
     return {
         ...originalModule,
-        DEFAULT_DNT_STATE: false
+        DEFAULT_DNT_STATE: false,
+        STORE_LOCATOR_IS_ENABLED: true
     }
 })
 
-jest.mock('@salesforce/retail-react-app/app/components/store-locator', () => {
-    // eslint-disable-next-line react/prop-types
-    function MockStoreLocatorModal({isOpen, onClose}) {
-        return isOpen ? (
-            <div data-testid="store-locator-modal">
-                <button onClick={onClose}>Close Modal</button>
-            </div>
-        ) : null
-    }
-    return {
-        StoreLocatorModal: MockStoreLocatorModal
-    }
-})
+jest.mock('@salesforce/retail-react-app/app/hooks/use-store-locator', () => ({
+    useStoreLocatorModal: jest.fn(() => ({
+        isOpen: false,
+        onOpen: jest.fn(),
+        onClose: jest.fn()
+    }))
+}))
 
 // Mock useSelectedStore hook
 const mockUseSelectedStore = jest.fn()
@@ -107,6 +115,14 @@ jest.mock('@salesforce/retail-react-app/app/hooks/use-selected-store', () => ({
     useSelectedStore: () => mockUseSelectedStore()
 }))
 
+// Mock useMultiship hook
+const mockGetShipmentForItems = jest.fn()
+jest.mock('@salesforce/retail-react-app/app/hooks/use-multiship', () => ({
+    useMultiship: () => ({
+        getShipmentIdForItems: mockGetShipmentForItems
+    })
+}))
+
 const MockedComponent = () => {
     return (
         <Switch>
@@ -128,6 +144,7 @@ beforeEach(() => {
         error: null,
         hasSelectedStore: false
     }))
+    mockGetShipmentForItems.mockResolvedValue('me')
 
     global.server.use(
         // By default, the page will be rendered with a product set
@@ -330,6 +347,74 @@ describe('product set', () => {
             expect(heroImage.getAttribute('loading')).toBe('lazy')
         })
     })
+
+    test('pickup in store radio is enabled when all child products have inventory in selected store', async () => {
+        const inventoryId = 'inventory_m_store_store1'
+        const storeId = 'store-123'
+
+        // Mock useSelectedStore to return a store with inventoryId
+        mockUseSelectedStore.mockImplementation(() => ({
+            selectedStore: {
+                id: storeId,
+                name: 'Test Store',
+                inventoryId: inventoryId
+            },
+            isLoading: false,
+            error: null,
+            hasSelectedStore: true
+        }))
+
+        // Create product set with parent and child products that all have inventory in the selected store
+        const productSetWithInventory = {
+            ...mockedProductSet,
+            setProducts: mockedProductSet.setProducts.map((childProduct) => ({
+                ...childProduct,
+                inventories: [
+                    {
+                        id: inventoryId,
+                        orderable: true,
+                        ats: 10,
+                        stockLevel: 10
+                    }
+                ]
+            }))
+        }
+
+        global.server.use(
+            rest.get('*/products/:productId', (req, res, ctx) => {
+                return res(ctx.json(productSetWithInventory))
+            })
+        )
+
+        renderWithProviders(<MockedComponent />)
+
+        await waitFor(() => {
+            expect(screen.getByRole('link', {name: /mens/i})).toBeInTheDocument()
+        })
+
+        // Wait for child products to load
+        const childProducts = await screen.findAllByTestId('child-product')
+        expect(childProducts).toHaveLength(3) // 3 child products in the winter look set
+
+        // Check that each child product has pickup in store radio enabled
+        for (const childProduct of childProducts) {
+            await waitFor(() => {
+                const pickupRadio = within(childProduct).getByRole('radio', {
+                    name: /pick up in store/i
+                })
+                expect(pickupRadio).toBeEnabled()
+            })
+        }
+
+        // Check that the parent product pickup in store radio is also enabled
+        const allPickupRadios = await screen.findAllByRole('radio', {name: /pick up in store/i})
+        // Should have 4 pickup radios total: 1 parent + 3 children
+        expect(allPickupRadios).toHaveLength(4)
+
+        // The first pickup radio should be the parent product (rendered before child products)
+        const parentPickupRadio = allPickupRadios[0]
+        expect(parentPickupRadio).toBeEnabled()
+    })
 })
 
 describe('Recommended Products', () => {
@@ -657,8 +742,6 @@ describe('Delivery Options Restrictions', () => {
             hasSelectedStore: true
         }))
 
-        // Track if updatePickupShipment was called
-        let updatePickupShipmentCalled = false
         let shipmentUpdateRequest = null
 
         // Mock the product to be a simple master product with inventory
@@ -684,7 +767,6 @@ describe('Delivery Options Restrictions', () => {
             }),
             // Mock the shipment update call that updatePickupShipment makes
             rest.patch('*/baskets/:basketId/shipments/:shipmentId', async (req, res, ctx) => {
-                updatePickupShipmentCalled = true
                 shipmentUpdateRequest = await req.json()
 
                 // Verify the correct parameters are passed to updatePickupShipment
@@ -988,7 +1070,8 @@ describe('standard product', () => {
                 {
                     productId: mockStandardProductOrderable.id,
                     price: mockStandardProductOrderable.price,
-                    quantity: 1
+                    quantity: 1,
+                    shipmentId: 'me'
                 }
             ])
         })
@@ -1018,7 +1101,8 @@ describe('standard product', () => {
                 {
                     productId: mockStandardProductOrderable.id,
                     price: mockStandardProductOrderable.price,
-                    quantity: 3
+                    quantity: 3,
+                    shipmentId: 'me'
                 }
             ])
         })

package/app/pages/product-list/index.jsx

@@ -94,6 +94,7 @@ import {
     PRODUCT_LIST_SELECTABLE_ATTRIBUTE_ID,
     STORE_LOCATOR_IS_ENABLED
 } from '@salesforce/retail-react-app/app/constants'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
 import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
 import {useWishList} from '@salesforce/retail-react-app/app/hooks/use-wish-list'
@@ -126,6 +127,7 @@ const ProductList = (props) => {
     const {res} = useServerContext()
     const customerId = useCustomerId()
     const [searchParams, {stringify: stringifySearchParams}] = useSearchParams()
+    const storeLocatorEnabled = getConfig()?.app?.storeLocatorEnabled ?? STORE_LOCATOR_IS_ENABLED
 
     /**************** Page State ****************/
     const [filtersLoading, setFiltersLoading] = useState(false)
@@ -400,7 +402,7 @@ const ProductList = (props) => {
 
     // Helper function to create StoreInventoryFilter component
     const createStoreInventoryFilter = () => {
-        if (!STORE_LOCATOR_IS_ENABLED) return null
+        if (!storeLocatorEnabled) return null
         return (
             <StoreInventoryFilter
                 key="storeInventoryFilter"

package/app/pages/product-list/partials/inventory-filter.jsx

@@ -5,23 +5,18 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import React, {useEffect} from 'react'
+import React, {useEffect, useRef} from 'react'
 import {useIntl, FormattedMessage} from 'react-intl'
 import PropTypes from 'prop-types'
-import {
-    Heading,
-    Checkbox,
-    Stack,
-    Text,
-    useDisclosure
-} from '@salesforce/retail-react-app/app/components/shared/ui'
-import {StoreLocatorModal} from '@salesforce/retail-react-app/app/components/store-locator'
+import {Heading, Checkbox, Stack, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
+import {useStoreLocatorModal} from '@salesforce/retail-react-app/app/hooks/use-store-locator'
 import {useSelectedStore} from '@salesforce/retail-react-app/app/hooks/use-selected-store'
 
 const StoreInventoryFilter = ({toggleFilter, selectedFilters}) => {
-    const {isOpen, onOpen, onClose} = useDisclosure()
+    const {isOpen, onOpen} = useStoreLocatorModal()
     const {formatMessage} = useIntl()
     const {selectedStore} = useSelectedStore()
+    const storeLocatorModalRef = useRef(false)
 
     const isChecked = selectedFilters?.ilids !== undefined
 
@@ -32,10 +27,22 @@ const StoreInventoryFilter = ({toggleFilter, selectedFilters}) => {
         }
     }, [selectedStore])
 
+    // Handle when modal closes after being opened from this component
+    useEffect(() => {
+        // If modal was opened from here and is now closed, apply filter if store is selected
+        if (storeLocatorModalRef.current && !isOpen) {
+            storeLocatorModalRef.current = false
+            if (selectedStore?.inventoryId) {
+                toggleFilter({value: selectedStore.inventoryId}, 'ilids', false, false)
+            }
+        }
+    }, [isOpen, selectedStore, toggleFilter])
+
     const handleCheckboxChange = (e) => {
         // If no store is selected or no inventoryId, open store locator
         if (!selectedStore?.inventoryId) {
             e.preventDefault()
+            storeLocatorModalRef.current = true
             onOpen()
             return
         }
@@ -49,18 +56,10 @@ const StoreInventoryFilter = ({toggleFilter, selectedFilters}) => {
     const handleStoreNameClick = (e) => {
         e.stopPropagation()
         e.preventDefault()
+        storeLocatorModalRef.current = true
         onOpen()
     }
 
-    const handleStoreLocatorClose = () => {
-        // Apply the filter when a store is selected from the locator and the modal closes
-        if (selectedStore?.inventoryId) {
-            toggleFilter({value: selectedStore.inventoryId}, 'ilids', false, false)
-        }
-
-        onClose()
-    }
-
     const storeLinkText =
         selectedStore?.name ||
         formatMessage({
@@ -133,8 +132,6 @@ const StoreInventoryFilter = ({toggleFilter, selectedFilters}) => {
                     />
                 </Checkbox>
             </Stack>
-
-            <StoreLocatorModal isOpen={isOpen} onClose={handleStoreLocatorClose} />
         </>
     )
 }

package/app/pages/product-list/partials/inventory-filter.test.js

@@ -11,25 +11,15 @@ import userEvent from '@testing-library/user-event'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
 import StoreInventoryFilter from '@salesforce/retail-react-app/app/pages/product-list/partials/inventory-filter'
 import {useSelectedStore} from '@salesforce/retail-react-app/app/hooks/use-selected-store'
+import {useStoreLocatorModal} from '@salesforce/retail-react-app/app/hooks/use-store-locator'
 
 jest.mock('@salesforce/retail-react-app/app/hooks/use-selected-store', () => ({
     useSelectedStore: jest.fn()
 }))
 
-jest.mock('@salesforce/retail-react-app/app/components/store-locator', () => {
-    // eslint-disable-next-line react/prop-types
-    function MockStoreLocatorModal({isOpen, onClose}) {
-        return isOpen ? (
-            <div data-testid="store-locator-modal">
-                <button onClick={onClose}>Close Modal</button>
-            </div>
-        ) : null
-    }
-
-    return {
-        StoreLocatorModal: MockStoreLocatorModal
-    }
-})
+jest.mock('@salesforce/retail-react-app/app/hooks/use-store-locator', () => ({
+    useStoreLocatorModal: jest.fn()
+}))
 
 const mockToggleFilter = jest.fn()
 
@@ -50,6 +40,9 @@ const mockStoreData = {
 }
 
 describe('StoreInventoryFilter', () => {
+    const mockOnOpen = jest.fn()
+    const mockOnClose = jest.fn()
+
     beforeEach(() => {
         jest.clearAllMocks()
         localStorage.clear()
@@ -59,6 +52,11 @@ describe('StoreInventoryFilter', () => {
             error: null,
             hasSelectedStore: false
         })
+        useStoreLocatorModal.mockReturnValue({
+            isOpen: false,
+            onOpen: mockOnOpen,
+            onClose: mockOnClose
+        })
     })
 
     test('renders component with default state', async () => {
@@ -103,7 +101,7 @@ describe('StoreInventoryFilter', () => {
         const checkbox = screen.getByRole('checkbox')
         await user.click(checkbox)
 
-        expect(screen.getByTestId('store-locator-modal')).toBeInTheDocument()
+        expect(mockOnOpen).toHaveBeenCalled()
     })
 
     test('opens store locator modal when store name is clicked', async () => {
@@ -123,7 +121,7 @@ describe('StoreInventoryFilter', () => {
 
         await user.click(screen.getByText('Test Store Location'))
 
-        expect(screen.getByTestId('store-locator-modal')).toBeInTheDocument()
+        expect(mockOnOpen).toHaveBeenCalled()
     })
 
     test('calls toggleFilter when checkbox is changed with selected store', async () => {
@@ -201,7 +199,7 @@ describe('StoreInventoryFilter', () => {
         expect(mockToggleFilter).toHaveBeenCalledWith({value: 'inv-456'}, 'ilids', false, false)
 
         // Ensure no modal was opened
-        expect(screen.queryByTestId('store-locator-modal')).not.toBeInTheDocument()
+        expect(mockOnOpen).not.toHaveBeenCalled()
     })
 
     test('applies filter when selected store changes and checkbox is checked', async () => {

package/app/pages/product-list/partials/selected-refinements.jsx

@@ -13,10 +13,12 @@ import {CloseIcon} from '@salesforce/retail-react-app/app/components/icons'
 import {REMOVE_FILTER} from '@salesforce/retail-react-app/app/pages/product-list/partials/refinements-utils'
 import {useSelectedStore} from '@salesforce/retail-react-app/app/hooks/use-selected-store'
 import {STORE_LOCATOR_IS_ENABLED} from '@salesforce/retail-react-app/app/constants'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 
 const SelectedRefinements = ({toggleFilter, selectedFilterValues, filters, handleReset}) => {
     const {formatMessage} = useIntl()
     const {selectedStore} = useSelectedStore()
+    const storeLocatorEnabled = getConfig()?.app?.storeLocatorEnabled ?? STORE_LOCATOR_IS_ENABLED
     const priceFilterValues = filters?.find((filter) => filter.attributeId === 'price')
     let selectedFilters = []
     for (const key in selectedFilterValues) {
@@ -28,7 +30,7 @@ const SelectedRefinements = ({toggleFilter, selectedFilterValues, filters, handl
                 uiLabel =
                     priceFilterValues?.values?.find((priceFilter) => priceFilter.value === filter)
                         ?.label || filter
-            } else if (key === 'ilids' && STORE_LOCATOR_IS_ENABLED) {
+            } else if (key === 'ilids' && storeLocatorEnabled) {
                 // Fallback text for in stock selected filter
                 uiLabel = formatMessage({
                     id: 'selected_refinements.filter.in_stock',

package/app/ssr.js

@@ -329,7 +329,7 @@ const {handler} = runtime.createHandler(options, (app) => {
     )
 
     // Handle the redirect from SLAS as to avoid error
-    app.get('/callback?*', (req, res) => {
+    app.get('/callback', (req, res) => {
         // This endpoint does nothing and is not expected to change
         // Thus we cache it for a year to maximize performance
         res.set('Cache-Control', `max-age=31536000`)