fix(commerce): reset pagination on search box submit (#4065)

Pagination wasn't being reset because `deselectAllBreadcrumbs` wasn't handled in the pagination slice. Now it is, so it properly resets the pagination before executing the search. [CAPI-1023] [CAPI-1023]: https://coveord.atlassian.net/browse/CAPI-1023?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
coveo · Jun 7, 2024 · 35e1517 · 35e1517
1 parent a538557
commit 35e1517
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/packages/headless/src/features/commerce/pagination/pagination-slice.test.ts b/packages/headless/src/features/commerce/pagination/pagination-slice.test.ts
@@ -1,6 +1,7 @@
 import {buildSearchResponse} from '../../../test/mock-commerce-search';
 import {buildFetchProductListingV2Response} from '../../../test/mock-product-listing-v2';
 import {buildMockRecommendationsResponse} from '../../../test/mock-recommendations';
+import {deselectAllBreadcrumbs} from '../../breadcrumb/breadcrumb-actions';
 import {
   deselectAllFacetValues,
   toggleExcludeFacetValue,
@@ -243,6 +244,10 @@ describe('pagination slice', () => {
   });
 
   describe.each([
+    {
+      actionName: '#deselectAllBreadcrumbs',
+      action: deselectAllBreadcrumbs,
+    },
     {
       actionName: '#deselectAllFacetValues',
       action: deselectAllFacetValues,
@@ -279,8 +284,7 @@ describe('pagination slice', () => {
     it('resets principal pagination', () => {
       state.principal.page = 5;
 
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const finalState = paginationReducer(state, action({} as any));
+      const finalState = paginationReducer(state, action({} as never));
 
       expect(finalState.principal.page).toBe(0);
     });

diff --git a/packages/headless/src/features/commerce/pagination/pagination-slice.ts b/packages/headless/src/features/commerce/pagination/pagination-slice.ts
@@ -1,4 +1,5 @@
 import {createReducer} from '@reduxjs/toolkit';
+import {deselectAllBreadcrumbs} from '../../breadcrumb/breadcrumb-actions';
 import {
   deselectAllFacetValues,
   toggleExcludeFacetValue,
@@ -98,6 +99,7 @@ export const paginationReducer = createReducer(
       })
       .addCase(restoreSearchParameters, handleRestoreParameters)
       .addCase(restoreProductListingParameters, handleRestoreParameters)
+      .addCase(deselectAllBreadcrumbs, handlePaginationReset)
       .addCase(deselectAllFacetValues, handlePaginationReset)
       .addCase(toggleSelectFacetValue, handlePaginationReset)
       .addCase(toggleExcludeFacetValue, handlePaginationReset)

diff --git a/packages/headless/src/features/commerce/search/search-actions.ts b/packages/headless/src/features/commerce/search/search-actions.ts
@@ -11,9 +11,9 @@ import {
   deselectAllNonBreadcrumbs,
 } from '../../breadcrumb/breadcrumb-actions';
 import {updateFacetAutoSelection} from '../../facets/generic/facet-actions';
-import {updatePage} from '../../pagination/pagination-actions';
 import {logQueryError} from '../../search/search-analytics-actions';
 import {buildCommerceAPIRequest} from '../common/actions';
+import {selectPage} from '../pagination/pagination-actions';
 import {perPagePrincipalSelector} from '../pagination/pagination-selectors';
 import {
   UpdateQueryActionCreatorPayload,
@@ -139,7 +139,7 @@ export const prepareForSearchWithQuery = createAsyncThunk<
       query: payload.query,
     })
   );
-  dispatch(updatePage(1));
+  dispatch(selectPage({page: 0}));
 });
 
 export const fetchInstantProducts = createAsyncThunk<