@W-18902360 @W-18902533 BOPIS less content switch with store selection

Author: patricksullivansf

packages/template-retail-react-app/app/components/store-locator/form.jsx

@@ -19,18 +19,14 @@ import {useForm, Controller} from 'react-hook-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'
 import {useSelectedStore} from '@salesforce/retail-react-app/app/hooks/use-selected-store'
-import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
 
 export const StoreLocatorForm = () => {
     const {config, formValues, setFormValues, setDeviceCoordinates} = useStoreLocator()
     const {coordinates, error, refresh} = useGeolocation()
     const {store: selectedStore} = useSelectedStore()
-    const {derivedData} = useCurrentBasket()
     const initialLoadDone = useRef(false)
     const shouldUseLocation = useRef(false)
 
-    const hasItemsInBasket = derivedData?.totalItems > 0
-
     const form = useForm({
         mode: 'onChange',
         reValidateMode: 'onChange',
@@ -88,7 +84,7 @@ export const StoreLocatorForm = () => {
                 void form.handleSubmit(submitForm)(e)
             }}
         >
-            <Box as="fieldset" disabled={hasItemsInBasket} opacity={hasItemsInBasket ? 0.5 : 1}>
+            <Box as="fieldset">
                 <InputGroup>
                     {showCountrySelector && (
                         <Controller

packages/template-retail-react-app/app/components/store-locator/list.jsx

@@ -18,11 +18,14 @@ export const StoreLocatorList = () => {
     const {store: selectedStore} = useSelectedStore()
     const {derivedData} = useCurrentBasket()
     const [page, setPage] = useState(1)
+    const [initialSelectedStoreId, setInitialSelectedStoreId] = useState(selectedStoreId)
 
     const hasItemsInBasket = derivedData?.totalItems > 0
 
     useEffect(() => {
         setPage(1)
+        // Capture the selected store on each page load
+        setInitialSelectedStoreId(selectedStoreId)
     }, [data])
 
     const handleChange = (selectedStoreId) => {
@@ -36,7 +39,7 @@ export const StoreLocatorList = () => {
         if (!data?.data?.length && !selectedStore)
             return 'Sorry, there are no locations in this area'
         if (hasItemsInBasket) {
-            return 'Sorry, you have items in your basket. Please remove them to continue.'
+            return 'Sorry, you have items in your basket. Please remove them change the selected store.'
         }
 
         if (mode === 'input') {
@@ -58,25 +61,32 @@ export const StoreLocatorList = () => {
 
     const sortedStores = useMemo(() => {
         const stores = []
+        const storeIds = new Set()
 
-        if (selectedStore && (!data?.data || !data.data.find((s) => s.id === selectedStore.id))) {
-            stores.push(selectedStore)
+        // Add all stores from search results first
+        if (data?.data) {
+            data.data.forEach((store) => {
+                stores.push(store)
+                storeIds.add(store.id)
+            })
         }
 
-        if (data?.data) {
-            stores.push(...data.data)
+        // Add selected store that isn't already in search results
+        if (selectedStore && !storeIds.has(selectedStore.id)) {
+            stores.push(selectedStore)
+            storeIds.add(selectedStore.id)
         }
 
         return stores.sort((a, b) => {
-            if (a.id === selectedStoreId) return -1
-            if (b.id === selectedStoreId) return 1
+            if (a.id === initialSelectedStoreId) return -1
+            if (b.id === initialSelectedStoreId) return 1
 
             if (a.distance && b.distance) {
                 return a.distance - b.distance
             }
             return 0
         })
-    }, [data?.data, selectedStoreId, selectedStore])
+    }, [data?.data, selectedStore, initialSelectedStoreId])
 
     const showNumberOfStores = page * config.defaultPageSize
     const showLoadMoreButton = sortedStores.length > showNumberOfStores
@@ -98,7 +108,7 @@ export const StoreLocatorList = () => {
                 {displayStoreLocatorStatusMessage()}
             </Box>
 
-            <Box as="fieldset" disabled={hasItemsInBasket} opacity={hasItemsInBasket ? 0.5 : 1}>
+            <Box as="fieldset">
                 <Accordion allowMultiple flex={[1, 1, 1, 5]}>
                     <AccordionItem>
                         <RadioGroup onChange={handleChange} value={selectedStoreId} width="100%">
@@ -109,7 +119,8 @@ export const StoreLocatorList = () => {
                                     radioProps={{
                                         value: store.id,
                                         isChecked: selectedStoreId === store.id,
-                                        'aria-describedby': `store-info-${store.id}`
+                                        'aria-describedby': `store-info-${store.id}`,
+                                        isDisabled: !store.inventoryId || hasItemsInBasket
                                     }}
                                 />
                             ))}

packages/template-retail-react-app/app/contexts/store-locator-provider.jsx

@@ -22,8 +22,8 @@ export const StoreLocatorProvider = ({config, children}) => {
     // remember the shopper's preferred store for the current site
     // TODO: Change this to `useLocalStorage` hook when localStorage detection is more robust
     const {site} = useMultiSite()
-    const siteId = `selectedStore_${site?.id}`
-    const selectedStoreId = readValue(siteId)
+    const selectedStoreBySiteId = `selectedStore_${site?.id}`
+    const selectedStoreId = readValue(selectedStoreBySiteId)
 
     const [state, setState] = useState({
         mode: 'input',
@@ -36,13 +36,12 @@ export const StoreLocatorProvider = ({config, children}) => {
             longitude: null
         },
         selectedStoreId,
-        isSeSelection: false,
         config
     })
 
     useEffect(() => {
         if (typeof window !== 'undefined' && state.selectedStoreId) {
-            window.localStorage.setItem(siteId, state.selectedStoreId)
+            window.localStorage.setItem(selectedStoreBySiteId, state.selectedStoreId)
         }
     }, [state.selectedStoreId])
 

packages/template-retail-react-app/app/contexts/store-locator-provider.test.jsx

@@ -13,6 +13,22 @@ import {
 } from '@salesforce/retail-react-app/app/contexts/store-locator-provider'
 import {MultiSiteProvider} from '@salesforce/retail-react-app/app/contexts'
 
+// Mock useMultiSite hook
+jest.mock('@salesforce/retail-react-app/app/hooks/use-multi-site', () => ({
+    __esModule: true,
+    default: () => ({
+        site: {
+            id: 'RefArch',
+            alias: 'us'
+        },
+        locale: {
+            id: 'en-US',
+            preferredCurrency: 'USD'
+        },
+        buildUrl: (path) => path
+    })
+}))
+
 describe('StoreLocatorProvider', () => {
     const mockConfig = {
         defaultCountryCode: 'US',
@@ -24,6 +40,11 @@ describe('StoreLocatorProvider', () => {
         alias: 'us'
     }
 
+    beforeEach(() => {
+        // Clear localStorage before each test
+        window.localStorage.clear()
+    })
+
     const TestWrapper = ({children}) => (
         <MultiSiteProvider site={mockSite}>
             <StoreLocatorProvider config={mockConfig}>{children}</StoreLocatorProvider>
@@ -59,12 +80,30 @@ describe('StoreLocatorProvider', () => {
                 longitude: null
             },
             selectedStoreId: null,
-            isSeSelection: false,
             config: mockConfig
         })
         expect(typeof contextValue?.setState).toBe('function')
     })
 
+    it('initializes with stored selectedStoreId from localStorage', () => {
+        // Set a value in localStorage before rendering
+        window.localStorage.setItem('selectedStore_RefArch', 'store123')
+
+        let contextValue
+        const TestComponent = () => {
+            contextValue = React.useContext(StoreLocatorContext)
+            return null
+        }
+
+        render(
+            <TestWrapper>
+                <TestComponent />
+            </TestWrapper>
+        )
+
+        expect(contextValue?.state.selectedStoreId).toBe('store123')
+    })
+
     it('updates state correctly when setState is called', () => {
         let contextValue
         const TestComponent = () => {
@@ -96,6 +135,29 @@ describe('StoreLocatorProvider', () => {
         })
     })
 
+    it('updates localStorage when selectedStoreId changes', () => {
+        let contextValue
+        const TestComponent = () => {
+            contextValue = React.useContext(StoreLocatorContext)
+            return null
+        }
+
+        render(
+            <TestWrapper>
+                <TestComponent />
+            </TestWrapper>
+        )
+
+        act(() => {
+            contextValue?.setState((prev) => ({
+                ...prev,
+                selectedStoreId: 'store456'
+            }))
+        })
+
+        expect(window.localStorage.getItem('selectedStore_RefArch')).toBe('store456')
+    })
+
     it('renders children correctly', () => {
         const TestChild = () => <div data-testid="test-child">Test Child</div>
 

packages/template-retail-react-app/app/hooks/use-store-locator.js

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import {useContext, useEffect} from 'react'
+import {useContext} from 'react'
 import {useSearchStores} from '@salesforce/commerce-sdk-react'
 import {StoreLocatorContext} from '@salesforce/retail-react-app/app/contexts/store-locator-provider'
 import {STORE_LOCATOR_NUM_STORES_PER_REQUEST_API_MAX} from '@salesforce/retail-react-app/app/constants'
@@ -55,23 +55,11 @@ export const useStoreLocator = () => {
     const {state, setState} = context
     const {data, isLoading} = useStores(state)
 
-    useEffect(() => {
-        if (data?.data?.length > 0 && !state.isSeSelection) {
-            const nearestStore = data.data[0]
-            setState((prev) => ({
-                ...prev,
-                selectedStoreId: nearestStore.id,
-                isSeSelection: true
-            }))
-        }
-    }, [data?.data, state.isSeSelection])
-
     const setFormValues = (formValues) => {
         setState((prev) => ({
             ...prev,
             formValues,
-            mode: 'input',
-            isSeSelection: false
+            mode: 'input'
         }))
     }
 
@@ -80,16 +68,14 @@ export const useStoreLocator = () => {
             ...prev,
             deviceCoordinates: coordinates,
             mode: 'device',
-            formValues: {countryCode: '', postalCode: ''},
-            isSeSelection: false
+            formValues: {countryCode: '', postalCode: ''}
         }))
     }
 
     const setSelectedStoreId = (selectedStoreId) => {
         setState((prev) => ({
             ...prev,
-            selectedStoreId,
-            isSeSelection: true // Mark manual store selection as SE selection
+            selectedStoreId
         }))
     }
 

packages/template-retail-react-app/app/hooks/use-store-locator.test.jsx

@@ -71,7 +71,6 @@ describe('useStoreLocator', () => {
                 longitude: null
             },
             selectedStoreId: null,
-            isSeSelection: false,
             config
         })
     })
@@ -89,7 +88,6 @@ describe('useStoreLocator', () => {
             countryCode: 'US',
             postalCode: '94105'
         })
-        expect(result.current.isSeSelection).toBe(false)
     })
 
     it('updates device coordinates and switches to device mode', () => {
@@ -109,7 +107,6 @@ describe('useStoreLocator', () => {
             countryCode: '',
             postalCode: ''
         })
-        expect(result.current.isSeSelection).toBe(false)
     })
 
     it('calls useSearchStores with correct parameters in input mode', () => {
@@ -160,13 +157,11 @@ describe('useStoreLocator', () => {
         )
     })
 
-    it('automatically selects nearest store when data is received in input mode', () => {
-        const mockStores = {
-            data: [
-                {id: 'store1', name: 'Store 1'},
-                {id: 'store2', name: 'Store 2'}
-            ]
-        }
+    it('receives store data when form values are set in input mode', () => {
+        const mockStores = [
+            {id: 'store1', name: 'Store 1'},
+            {id: 'store2', name: 'Store 2'}
+        ]
         useSearchStores.mockReturnValue({
             data: mockStores,
             isLoading: false
@@ -180,8 +175,8 @@ describe('useStoreLocator', () => {
             })
         })
 
-        expect(result.current.selectedStoreId).toBe('store1')
-        expect(result.current.isSeSelection).toBe(true)
+        expect(result.current.data).toEqual(mockStores)
+        expect(result.current.selectedStoreId).toBeNull()
     })
 
     it('allows manual store selection', () => {
@@ -190,7 +185,6 @@ describe('useStoreLocator', () => {
             result.current.setSelectedStoreId('store123')
         })
         expect(result.current.selectedStoreId).toBe('store123')
-        expect(result.current.isSeSelection).toBe(true)
     })
 
     it('handles loading state', () => {