W-17908517 - Fix basket loading after logging out (#2323)

* fix basket loading after logging out

Author: alexvuong

packages/commerce-sdk-react/CHANGELOG.md

@@ -1,4 +1,5 @@
 ## v3.3.0-dev (Feb 18, 2025)
+- Invalidate cache instead of removing cache when triggering logout [#2323](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2323)
 
 ## v3.2.1 (Mar 05, 2025)
 - Update PWA-Kit SDKs to v3.9.1 [#2301](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2301)

packages/commerce-sdk-react/src/hooks/useAuthHelper.ts

@@ -107,7 +107,7 @@ const cacheUpdateMatrix: CacheUpdateMatrix = {
     loginGuestUser: noop,
     logout() {
         return {
-            remove: [{queryKey: ['/commerce-sdk-react']}]
+            invalidate: [{queryKey: ['/commerce-sdk-react']}]
         }
     },
     register: noop,

packages/template-retail-react-app/app/components/links-list/index.test.js

@@ -60,7 +60,5 @@ test('renders LinksList with horizontal variant', () => {
             <LinksList links={links} variant="horizontal" />
         </FooterStylesProvider>
     )
-    screen.logTestingPlaygroundURL()
-
     expect(container.querySelector(horizontalVariantSelector)).toBeInTheDocument()
 })

packages/template-retail-react-app/app/components/product-view-modal/bundle.test.js

@@ -63,6 +63,11 @@ beforeEach(() => {
     )
 })
 
+afterEach(() => {
+    jest.resetModules()
+    jest.restoreAllMocks()
+})
+
 test('renders bundle product view modal', async () => {
     renderWithProviders(<MockComponent />)
     await waitFor(() => {
@@ -165,9 +170,9 @@ test('bundle product view modal disables update button when quantity exceeds chi
     })
 
     // Set product bundle quantity selection to 4
-    quantityInput.focus()
     fireEvent.change(quantityInput, {target: {value: '4'}})
     fireEvent.keyDown(quantityInput, {key: 'Enter', code: 'Enter', charCode: 13})
+
     fireEvent.click(sizeSelectBtn)
 
     await waitFor(() => {

packages/template-retail-react-app/app/components/store-locator-modal/store-locator-content.test.jsx

@@ -354,7 +354,6 @@ describe('StoreLocatorContent', () => {
                 )
             })
         )
-        screen.debug()
 
         renderWithProviders(
             <WrapperComponent

packages/template-retail-react-app/app/pages/account/index.test.js

@@ -20,11 +20,12 @@ import {
     mockOrderProducts,
     mockPasswordUpdateFalure
 } from '@salesforce/retail-react-app/app/mocks/mock-data'
+import {useCustomerType} from '@salesforce/commerce-sdk-react'
 import Account from '@salesforce/retail-react-app/app/pages/account/index'
 import Login from '@salesforce/retail-react-app/app/pages/login'
 import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
-import * as sdk from '@salesforce/commerce-sdk-react'
 
+jest.setTimeout(60000)
 jest.mock('@salesforce/commerce-sdk-react', () => ({
     ...jest.requireActual('@salesforce/commerce-sdk-react'),
     useCustomerType: jest.fn()
@@ -73,7 +74,7 @@ beforeEach(() => {
 })
 afterEach(() => {
     jest.resetModules()
-    localStorage.clear()
+    jest.restoreAllMocks()
 })
 
 const expectedBasePath = '/uk/en-GB'
@@ -86,50 +87,45 @@ describe('Test redirects', function () {
         )
     })
     test('Redirects to login page if the customer is not logged in', async () => {
-        sdk.useCustomerType.mockReturnValue({isRegistered: false, isGuest: true})
-        const Component = () => {
-            return (
-                <Switch>
-                    <Route
-                        path={createPathWithDefaults('/account')}
-                        render={(props) => <Account {...props} />}
-                    />
-                </Switch>
-            )
-        }
-        renderWithProviders(<Component />, {
+        useCustomerType.mockReturnValue({isRegistered: false, isGuest: true})
+        renderWithProviders(<MockedComponent />, {
             wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app, isGuest: true}
         })
         await waitFor(() => expect(window.location.pathname).toBe(`${expectedBasePath}/login`))
     })
 })
-
-test('Provides navigation for subpages', async () => {
-    sdk.useCustomerType.mockReturnValue({isRegistered: true, isGuest: false})
-    global.server.use(
-        rest.get('*/products', (req, res, ctx) => {
-            return res(ctx.delay(0), ctx.json(mockOrderProducts))
-        }),
-        rest.get('*/customers/:customerId/orders', (req, res, ctx) => {
-            return res(ctx.delay(0), ctx.json(mockOrderHistory))
+describe('Page Navigation', () => {
+    test('works for subpages', async () => {
+        useCustomerType.mockReturnValue({isRegistered: true, isGuest: false})
+        global.server.use(
+            rest.get('*/products', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.json(mockOrderProducts))
+            }),
+            rest.get('*/customers/:customerId/orders', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.json(mockOrderHistory))
+            })
+        )
+        const {user} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
         })
-    )
-    const {user} = renderWithProviders(<MockedComponent />, {
-        wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
-    })
-    expect(await screen.findByTestId('account-page')).toBeInTheDocument()
+        expect(await screen.findByTestId('account-page')).toBeInTheDocument()
 
-    const nav = within(screen.getByTestId('account-detail-nav'))
-    await user.click(nav.getByText('Addresses'))
-    await waitFor(() =>
-        expect(window.location.pathname).toBe(`${expectedBasePath}/account/addresses`)
-    )
-    await user.click(nav.getByText('Order History'))
-    await waitFor(() => expect(window.location.pathname).toBe(`${expectedBasePath}/account/orders`))
+        const nav = within(screen.getByTestId('account-detail-nav'))
+        await user.click(nav.getByText('Addresses'))
+        await waitFor(() =>
+            expect(window.location.pathname).toBe(`${expectedBasePath}/account/addresses`)
+        )
+        await user.click(nav.getByText('Order History'))
+        await waitFor(() =>
+            expect(window.location.pathname).toBe(`${expectedBasePath}/account/orders`)
+        )
+    })
 })
 
 describe('Render and logs out', function () {
     test('Renders account detail page by default for logged-in customer, and can log out', async () => {
+        useCustomerType.mockReturnValue({isRegistered: true, isGuest: false})
+
         const {user} = renderWithProviders(<MockedComponent />)
 
         // Render user profile page
@@ -145,7 +141,10 @@ describe('Render and logs out', function () {
         })
 
         await user.click(screen.getAllByText(/Log Out/)[0])
+        useCustomerType.mockReturnValue({isRegistered: false, isGuest: true})
+
         await waitFor(() => {
+            expect(window.location.pathname).toBe(`${expectedBasePath}/login`)
             expect(screen.getByTestId('login-page')).toBeInTheDocument()
         })
     })
@@ -166,7 +165,7 @@ describe('updating profile', function () {
         )
     })
     test('Allows customer to edit profile details', async () => {
-        sdk.useCustomerType.mockReturnValue({isRegistered: true, isExternal: false})
+        useCustomerType.mockReturnValue({isRegistered: true, isExternal: false})
         const {user} = renderWithProviders(<MockedComponent />)
         expect(await screen.findByTestId('account-page')).toBeInTheDocument()
         expect(await screen.findByTestId('account-detail-page')).toBeInTheDocument()
@@ -190,6 +189,7 @@ describe('updating profile', function () {
 
 describe('updating password', function () {
     beforeEach(() => {
+        useCustomerType.mockReturnValue({isRegistered: true, isExternal: false})
         global.server.use(
             rest.post('*/oauth2/token', (req, res, ctx) =>
                 res(

packages/template-retail-react-app/jest-setup.js

@@ -50,6 +50,12 @@ export const setupMockServer = () => {
         rest.get('*/customers/:customerId/baskets', (req, res, ctx) =>
             res(ctx.delay(0), ctx.status(200), ctx.json(mockCustomerBaskets))
         ),
+        rest.get('*/shopper-context/:usid', (req, res, ctx) =>
+            res(ctx.delay(0), ctx.status(200), ctx.json({}))
+        ),
+        rest.get('*/shopper-experience/*', (req, res, ctx) =>
+            res(ctx.delay(0), ctx.status(200), ctx.json({}))
+        ),
         rest.post('*/sessions', (req, res, ctx) => res(ctx.delay(0), ctx.status(200))),
         rest.post('*/oauth2/token', (req, res, ctx) =>
             res(