fix(commerce): fix field suggestions state update (#4245)

Field suggestion values weren't updating when the query changed. To fix this, we fetch the facet search state using a selector, just like we do for facets (thanks @fbeaudoincoveo!). I've also fixed a few other things: - Load the proper reducers in field suggestions controllers - Add the reducer to the commerce engine - Type the reducer loaders - Replace the `Subscribable` type to `Controller` on field suggestions controllers - Adjusted the field suggestions integration test to rely on controllers instead of engine state updates. This was actually a clue that the current behavior was broken, as it was not possible to await state changes on the field suggestions controllers 😅 [CAPI-1201] [CAPI-1201]: https://coveord.atlassian.net/browse/CAPI-1201?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
coveo · Aug 1, 2024 · e8ebb09 · e8ebb09
1 parent c26ce47
commit e8ebb09
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 37 deletions.
diff --git a/packages/headless/src/app/commerce-engine/commerce-engine.ts b/packages/headless/src/app/commerce-engine/commerce-engine.ts
@@ -9,6 +9,7 @@ import {setContext} from '../../features/commerce/context/context-actions';
 import {contextReducer} from '../../features/commerce/context/context-slice';
 import {didYouMeanReducer} from '../../features/commerce/did-you-mean/did-you-mean-slice';
 import {commerceFacetSetReducer} from '../../features/commerce/facets/facet-set/facet-set-slice';
+import {fieldSuggestionsOrderReducer} from '../../features/commerce/facets/field-suggestions-order/field-suggestions-order-slice';
 import {manualNumericFacetReducer} from '../../features/commerce/facets/numeric-facet/manual-numeric-facet-slice';
 import {paginationReducer} from '../../features/commerce/pagination/pagination-slice';
 import {productListingReducer} from '../../features/commerce/product-listing/product-listing-slice';
@@ -45,6 +46,7 @@ const commerceEngineReducers = {
   commercePagination: paginationReducer,
   commerceSort: sortReducer,
   facetOrder: facetOrderReducer,
+  fieldSuggestionsOrder: fieldSuggestionsOrderReducer,
   facetSearchSet: specificFacetSearchSetReducer,
   categoryFacetSearchSet: categoryFacetSearchSetReducer,
   commerceFacetSet: commerceFacetSetReducer,

diff --git a/packages/headless/src/commerce.index.ts b/packages/headless/src/commerce.index.ts
@@ -298,7 +298,10 @@ export type {
   CategoryFieldSuggestions,
   CategoryFieldSuggestionsState,
 } from './controllers/commerce/field-suggestions/headless-category-field-suggestions';
-export type {FieldSuggestionsGenerator} from './controllers/commerce/field-suggestions/headless-field-suggestions-generator';
+export type {
+  FieldSuggestionsGenerator,
+  GeneratedFieldSuggestionsControllers,
+} from './controllers/commerce/field-suggestions/headless-field-suggestions-generator';
 export type {FieldSuggestionsFacet} from './features/commerce/facets/field-suggestions-order/field-suggestions-order-state.ts';
 export {buildFieldSuggestionsGenerator} from './controllers/commerce/field-suggestions/headless-field-suggestions-generator';
 

diff --git a/...ss/src/controllers/commerce/field-suggestions/headless-category-field-suggestions.test.ts b/...ss/src/controllers/commerce/field-suggestions/headless-category-field-suggestions.test.ts
@@ -1,5 +1,8 @@
 import {executeCommerceFieldSuggest} from '../../../features/commerce/facets/facet-search-set/commerce-facet-search-actions';
+import {commerceFacetSetReducer as commerceFacetSet} from '../../../features/commerce/facets/facet-set/facet-set-slice';
 import {CategoryFacetRequest} from '../../../features/commerce/facets/facet-set/interfaces/request';
+import {fieldSuggestionsOrderReducer as fieldSuggestionsOrder} from '../../../features/commerce/facets/field-suggestions-order/field-suggestions-order-slice';
+import {categoryFacetSearchSetReducer as categoryFacetSearchSet} from '../../../features/facets/facet-search-set/category/category-facet-search-set-slice';
 import {updateFacetSearch} from '../../../features/facets/facet-search-set/specific/specific-facet-search-actions';
 import {CommerceAppState} from '../../../state/commerce-app-state';
 import {buildMockCategoryFacetSearch} from '../../../test/mock-category-facet-search';
@@ -58,6 +61,14 @@ describe('categoryFieldSuggestions', () => {
     initFacet();
   });
 
+  it('adds correct reducers to engine', () => {
+    expect(engine.addReducers).toHaveBeenCalledWith({
+      fieldSuggestionsOrder,
+      categoryFacetSearchSet,
+      commerceFacetSet,
+    });
+  });
+
   it('should dispatch an #updateFacetSearch and #executeFieldSuggest action on #updateText', () => {
     fieldSuggestions.updateText('foo');
     expect(updateFacetSearch).toHaveBeenCalledWith({

diff --git a/...eadless/src/controllers/commerce/field-suggestions/headless-category-field-suggestions.ts b/...eadless/src/controllers/commerce/field-suggestions/headless-category-field-suggestions.ts
@@ -1,11 +1,23 @@
+import {createSelector} from '@reduxjs/toolkit';
 import {FieldSuggestionsFacet} from '../../../api/commerce/search/query-suggest/query-suggest-response';
-import {CommerceEngine} from '../../../app/commerce-engine/commerce-engine';
+import {
+  CommerceEngine,
+  CommerceEngineState,
+} from '../../../app/commerce-engine/commerce-engine';
 import {stateKey} from '../../../app/state-key';
 import {commerceFacetSetReducer as commerceFacetSet} from '../../../features/commerce/facets/facet-set/facet-set-slice';
+import {fieldSuggestionsOrderReducer as fieldSuggestionsOrder} from '../../../features/commerce/facets/field-suggestions-order/field-suggestions-order-slice';
+import {categoryFacetSearchSetReducer as categoryFacetSearchSet} from '../../../features/facets/facet-search-set/category/category-facet-search-set-slice';
+import {
+  CategoryFacetSearchSection,
+  CommerceFacetSetSection,
+  FacetSearchSection,
+  FieldSuggestionsOrderSection,
+} from '../../../state/state-sections';
 import {loadReducerError} from '../../../utils/errors';
 import {
   buildController,
-  Subscribable,
+  Controller,
 } from '../../controller/headless-controller';
 import {
   CategoryFieldSuggestionsState as CoreCategoryFieldSuggestionsState,
@@ -28,7 +40,7 @@ export type CategoryFieldSuggestionsState = CoreCategoryFieldSuggestionsState &
  * This controller is a wrapper around the basic category facet controller search functionality, and thus exposes similar options and properties.
  */
 export interface CategoryFieldSuggestions
-  extends Subscribable,
+  extends Controller,
     FacetControllerType<'hierarchical'> {
   /**
    * Requests field suggestions based on a query.
@@ -81,13 +93,26 @@ export function buildCategoryFieldSuggestions(
     isForFieldSuggestions: true,
   });
 
+  const getState = () => engine[stateKey];
+
   const getFacetForFieldSuggestions = (facetId: string) => {
-    return engine[stateKey].fieldSuggestionsOrder!.find(
+    return getState().fieldSuggestionsOrder.find(
       (facet) => facet.facetId === facetId
     )!;
   };
 
   const controller = buildController(engine);
+
+  const facetSearchStateSelector = createSelector(
+    (state: CommerceEngineState) =>
+      state.categoryFacetSearchSet[options.facetId],
+    (facetSearch) => ({
+      isLoading: facetSearch.isLoading,
+      moreValuesAvailable: facetSearch.response.moreValuesAvailable,
+      query: facetSearch.options.query,
+      values: facetSearch.response.values,
+    })
+  );
   return {
     ...controller,
     ...facetSearch,
@@ -103,7 +128,7 @@ export function buildCategoryFieldSuggestions(
         displayName: facet.displayName,
         field: facet.field,
         facetId: facet.facetId,
-        ...facetSearch.state,
+        ...facetSearchStateSelector(getState()),
       };
     },
 
@@ -113,7 +138,16 @@ export function buildCategoryFieldSuggestions(
 
 function loadFieldSuggestionsReducers(
   engine: CommerceEngine
-): engine is CommerceEngine {
-  engine.addReducers({commerceFacetSet});
+): engine is CommerceEngine<
+  FieldSuggestionsOrderSection &
+    CommerceFacetSetSection &
+    CategoryFacetSearchSection &
+    FacetSearchSection
+> {
+  engine.addReducers({
+    fieldSuggestionsOrder,
+    categoryFacetSearchSet,
+    commerceFacetSet,
+  });
   return true;
 }
diff --git a/...s/src/controllers/commerce/field-suggestions/headless-field-suggestions-generator.test.ts b/...s/src/controllers/commerce/field-suggestions/headless-field-suggestions-generator.test.ts
@@ -1,9 +1,6 @@
 import {FacetSearchType} from '../../../api/commerce/facet-search/facet-search-request';
 import {FieldSuggestionsFacet} from '../../../api/commerce/search/query-suggest/query-suggest-response';
-import {commerceFacetSetReducer as commerceFacetSet} from '../../../features/commerce/facets/facet-set/facet-set-slice';
 import {fieldSuggestionsOrderReducer as fieldSuggestionsOrder} from '../../../features/commerce/facets/field-suggestions-order/field-suggestions-order-slice';
-import {categoryFacetSearchSetReducer as categoryFacetSearchSet} from '../../../features/facets/facet-search-set/category/category-facet-search-set-slice';
-import {specificFacetSearchSetReducer as facetSearchSet} from '../../../features/facets/facet-search-set/specific/specific-facet-search-set-slice';
 import {CommerceAppState} from '../../../state/commerce-app-state';
 import {buildMockCategoryFacetSearch} from '../../../test/mock-category-facet-search';
 import {buildMockCommerceFacetRequest} from '../../../test/mock-commerce-facet-request';
@@ -71,9 +68,6 @@ describe('fieldSuggestionsGenerator', () => {
   it('adds correct reducers to engine', () => {
     expect(engine.addReducers).toHaveBeenCalledWith({
       fieldSuggestionsOrder,
-      commerceFacetSet,
-      facetSearchSet,
-      categoryFacetSearchSet,
     });
   });
 

diff --git a/...adless/src/controllers/commerce/field-suggestions/headless-field-suggestions-generator.ts b/...adless/src/controllers/commerce/field-suggestions/headless-field-suggestions-generator.ts
@@ -5,12 +5,10 @@ import {
   CommerceEngineState,
 } from '../../../app/commerce-engine/commerce-engine';
 import {stateKey} from '../../../app/state-key';
-import {commerceFacetSetReducer as commerceFacetSet} from '../../../features/commerce/facets/facet-set/facet-set-slice';
 import {fieldSuggestionsOrderReducer as fieldSuggestionsOrder} from '../../../features/commerce/facets/field-suggestions-order/field-suggestions-order-slice';
 import {FieldSuggestionsFacet} from '../../../features/commerce/facets/field-suggestions-order/field-suggestions-order-state';
 import {executeSearch} from '../../../features/commerce/search/search-actions';
-import {categoryFacetSearchSetReducer as categoryFacetSearchSet} from '../../../features/facets/facet-search-set/category/category-facet-search-set-slice';
-import {specificFacetSearchSetReducer as facetSearchSet} from '../../../features/facets/facet-search-set/specific/specific-facet-search-set-slice';
+import {FieldSuggestionsOrderSection} from '../../../state/state-sections';
 import {loadReducerError} from '../../../utils/errors';
 import {
   buildController,
@@ -67,11 +65,8 @@ export function buildFieldSuggestionsGenerator(
   const controller = buildController(engine);
 
   const createFieldSuggestionsControllers = createSelector(
-    (state: CommerceEngineState) => state.fieldSuggestionsOrder!,
-    (state: CommerceEngineState) => state.commerceFacetSet,
-    (state: CommerceEngineState) => state.facetSearchSet,
-    (state: CommerceEngineState) => state.categoryFacetSearchSet,
-    (facetOrder, _commerceFacetSet, _facetSearchSet, _categoryFacetSearchSet) =>
+    (state: CommerceEngineState) => state.fieldSuggestionsOrder,
+    (facetOrder) =>
       facetOrder.map(({type, facetId}) => {
         switch (type) {
           case 'hierarchical':
@@ -94,19 +89,16 @@ export function buildFieldSuggestionsGenerator(
     },
 
     get state() {
-      return engine[stateKey].fieldSuggestionsOrder!;
+      return engine[stateKey].fieldSuggestionsOrder;
     },
   };
 }
 
 function loadFieldSuggestionsGeneratorReducers(
   engine: CommerceEngine
-): engine is CommerceEngine {
+): engine is CommerceEngine<FieldSuggestionsOrderSection> {
   engine.addReducers({
     fieldSuggestionsOrder,
-    commerceFacetSet,
-    facetSearchSet,
-    categoryFacetSearchSet,
   });
   return true;
 }
diff --git a/...es/headless/src/controllers/commerce/field-suggestions/headless-field-suggestions.test.ts b/...es/headless/src/controllers/commerce/field-suggestions/headless-field-suggestions.test.ts
@@ -1,6 +1,9 @@
 import {executeCommerceFieldSuggest} from '../../../features/commerce/facets/facet-search-set/commerce-facet-search-actions';
+import {commerceFacetSetReducer as commerceFacetSet} from '../../../features/commerce/facets/facet-set/facet-set-slice';
 import {RegularFacetRequest} from '../../../features/commerce/facets/facet-set/interfaces/request';
+import {fieldSuggestionsOrderReducer as fieldSuggestionsOrder} from '../../../features/commerce/facets/field-suggestions-order/field-suggestions-order-slice';
 import {updateFacetSearch} from '../../../features/facets/facet-search-set/specific/specific-facet-search-actions';
+import {specificFacetSearchSetReducer as facetSearchSet} from '../../../features/facets/facet-search-set/specific/specific-facet-search-set-slice';
 import {CommerceAppState} from '../../../state/commerce-app-state';
 import {buildMockCommerceFacetRequest} from '../../../test/mock-commerce-facet-request';
 import {buildMockCommerceFacetSlice} from '../../../test/mock-commerce-facet-slice';
@@ -60,6 +63,14 @@ describe('fieldSuggestions', () => {
     initFacet();
   });
 
+  it('adds correct reducers to engine', () => {
+    expect(engine.addReducers).toHaveBeenCalledWith({
+      fieldSuggestionsOrder,
+      commerceFacetSet,
+      facetSearchSet,
+    });
+  });
+
   it('should dispatch an #updateFacetSearch and #executeFieldSuggest action on #updateText', () => {
     fieldSuggestions.updateText('foo');
     expect(updateFacetSearch).toHaveBeenCalled();

diff --git a/packages/headless/src/controllers/commerce/field-suggestions/headless-field-suggestions.ts b/packages/headless/src/controllers/commerce/field-suggestions/headless-field-suggestions.ts
@@ -1,12 +1,23 @@
+import {createSelector} from '@reduxjs/toolkit';
 import {FieldSuggestionsFacet} from '../../../api/commerce/search/query-suggest/query-suggest-response';
 import {SpecificFacetSearchResult} from '../../../api/search/facet-search/specific-facet-search/specific-facet-search-response';
-import {CommerceEngine} from '../../../app/commerce-engine/commerce-engine';
+import {
+  CommerceEngine,
+  CommerceEngineState,
+} from '../../../app/commerce-engine/commerce-engine';
 import {stateKey} from '../../../app/state-key';
 import {commerceFacetSetReducer as commerceFacetSet} from '../../../features/commerce/facets/facet-set/facet-set-slice';
+import {fieldSuggestionsOrderReducer as fieldSuggestionsOrder} from '../../../features/commerce/facets/field-suggestions-order/field-suggestions-order-slice';
+import {specificFacetSearchSetReducer as facetSearchSet} from '../../../features/facets/facet-search-set/specific/specific-facet-search-set-slice';
+import {
+  CommerceFacetSetSection,
+  FacetSearchSection,
+  FieldSuggestionsOrderSection,
+} from '../../../state/state-sections';
 import {loadReducerError} from '../../../utils/errors';
 import {
   buildController,
-  Subscribable,
+  Controller,
 } from '../../controller/headless-controller';
 import {FacetControllerType} from '../core/facets/headless-core-commerce-facet';
 import {RegularFacetOptions} from '../core/facets/regular/headless-commerce-regular-facet';
@@ -28,7 +39,7 @@ export type FieldSuggestionsState = RegularFacetSearchState &
  * This controller is a wrapper around the basic facet controller search functionality, and thus exposes similar options and properties.
  */
 export interface FieldSuggestions
-  extends Subscribable,
+  extends Controller,
     FacetControllerType<'regular'> {
   /**
    * Requests field suggestions based on a query.
@@ -99,13 +110,26 @@ export function buildFieldSuggestions(
     isForFieldSuggestions: true,
   });
 
+  const getState = () => engine[stateKey];
+
   const getFacetForFieldSuggestions = (facetId: string) => {
-    return engine[stateKey].fieldSuggestionsOrder!.find(
+    return getState().fieldSuggestionsOrder.find(
       (facet) => facet.facetId === facetId
     )!;
   };
 
   const controller = buildController(engine);
+
+  const facetSearchStateSelector = createSelector(
+    (state: CommerceEngineState) => state.facetSearchSet[options.facetId],
+    (facetSearch) => ({
+      isLoading: facetSearch.isLoading,
+      moreValuesAvailable: facetSearch.response.moreValuesAvailable,
+      query: facetSearch.options.query,
+      values: facetSearch.response.values,
+    })
+  );
+
   return {
     ...controller,
     ...facetSearch,
@@ -121,7 +145,7 @@ export function buildFieldSuggestions(
         displayName: facet.displayName,
         field: facet.field,
         facetId: facet.facetId,
-        ...facetSearch.state,
+        ...facetSearchStateSelector(getState()),
       };
     },
 
@@ -131,7 +155,9 @@ export function buildFieldSuggestions(
 
 function loadFieldSuggestionsReducers(
   engine: CommerceEngine
-): engine is CommerceEngine {
-  engine.addReducers({commerceFacetSet});
+): engine is CommerceEngine<
+  FieldSuggestionsOrderSection & CommerceFacetSetSection & FacetSearchSection
+> {
+  engine.addReducers({fieldSuggestionsOrder, commerceFacetSet, facetSearchSet});
   return true;
 }
diff --git a/packages/headless/src/integration-tests/commerce.test.ts b/packages/headless/src/integration-tests/commerce.test.ts
@@ -154,9 +154,9 @@ describe.skip('commerce', () => {
     expect(generator.fieldSuggestions).toHaveLength(3);
 
     for (const controller of generator.fieldSuggestions) {
-      await waitForNextStateChange(engine, {
+      await waitForNextStateChange(controller, {
         action: () => controller.updateText('can'),
-        expectedSubscriberCalls: 3,
+        expectedSubscriberCalls: 2,
       });
     }
 
@@ -169,7 +169,7 @@ describe.skip('commerce', () => {
     await search(box, 'acc');
 
     for (const controller of generator.fieldSuggestions) {
-      await waitForNextStateChange(engine, {
+      await waitForNextStateChange(controller, {
         action: () => controller.updateText('acc'),
         expectedSubscriberCalls: 3,
       });