fix(commerce): namespace field suggestions to prevent clash with facet search

packages/headless/src/controllers/commerce/field-suggestions/headless-category-field-suggestions.test.ts

@@ -4,6 +4,7 @@ import {CategoryFacetRequest} from '../../../features/commerce/facets/facet-set/
 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 {namespaceCommerceFieldSuggestionFacet} 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';
@@ -33,15 +34,17 @@ describe('categoryFieldSuggestions', () => {
   let fieldSuggestions: CategoryFieldSuggestions;
   let options: CategoryFacetOptions;
 
-  function initFacet() {
+  function initFieldSuggestions() {
     engine = buildMockCommerceEngine(state);
     fieldSuggestions = buildCategoryFieldSuggestions(engine, options);
   }
 
   function setFacetRequest(config: Partial<CategoryFacetRequest> = {}) {
     const request = buildMockCommerceFacetRequest({facetId, ...config});
     state.commerceFacetSet[facetId] = buildMockCommerceFacetSlice({request});
-    state.categoryFacetSearchSet[facetId] = buildMockCategoryFacetSearch({
+    state.categoryFacetSearchSet[
+      namespaceCommerceFieldSuggestionFacet(facetId)
+    ] = buildMockCategoryFacetSearch({
       initialNumberOfValues: 5,
     });
   }
@@ -58,7 +61,7 @@ describe('categoryFieldSuggestions', () => {
     state = buildMockCommerceState();
     setFacetRequest();
 
-    initFacet();
+    initFieldSuggestions();
   });
 
   it('adds correct reducers to engine', () => {
@@ -72,7 +75,7 @@ describe('categoryFieldSuggestions', () => {
   it('should dispatch an #updateFacetSearch and #executeFieldSuggest action on #updateText', () => {
     fieldSuggestions.updateText('foo');
     expect(updateFacetSearch).toHaveBeenCalledWith({
-      facetId,
+      facetId: namespaceCommerceFieldSuggestionFacet(facetId),
       query: 'foo',
       numberOfValues: 5,
     });

packages/headless/src/controllers/commerce/field-suggestions/headless-category-field-suggestions.ts

@@ -8,6 +8,7 @@ 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 {namespaceCommerceFieldSuggestionFacet} from '../../../features/facets/facet-search-set/specific/specific-facet-search-set-slice';
 import {
   CategoryFacetSearchSection,
   CommerceFacetSetSection,
@@ -83,7 +84,7 @@ export function buildCategoryFieldSuggestions(
 
   const facetSearch = buildCategoryFacetSearch(engine, {
     options: {
-      facetId: options.facetId,
+      facetId: namespaceCommerceFieldSuggestionFacet(options.facetId),
       ...options.facetSearch,
       numberOfValues: 10,
     },
@@ -105,7 +106,9 @@ export function buildCategoryFieldSuggestions(
 
   const facetSearchStateSelector = createSelector(
     (state: CommerceEngineState) =>
-      state.categoryFacetSearchSet[options.facetId],
+      state.categoryFacetSearchSet[
+        namespaceCommerceFieldSuggestionFacet(options.facetId)
+      ],
     (facetSearch) => ({
       isLoading: facetSearch.isLoading,
       moreValuesAvailable: facetSearch.response.moreValuesAvailable,

packages/headless/src/controllers/commerce/field-suggestions/headless-field-suggestions-generator.test.ts

@@ -1,6 +1,7 @@
 import {FacetSearchType} from '../../../api/commerce/facet-search/facet-search-request';
 import {FieldSuggestionsFacet} from '../../../api/commerce/search/query-suggest/query-suggest-response';
 import {fieldSuggestionsOrderReducer as fieldSuggestionsOrder} from '../../../features/commerce/facets/field-suggestions-order/field-suggestions-order-slice';
+import {namespaceCommerceFieldSuggestionFacet} 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';
@@ -38,16 +39,22 @@ describe('fieldSuggestionsGenerator', () => {
 
   function setFacetState(config: FieldSuggestionsFacet[] = []) {
     for (const facet of config) {
+      const namespacedFacetId = namespaceCommerceFieldSuggestionFacet(
+        facet.facetId
+      );
       state.fieldSuggestionsOrder.push(facet);
-      state.commerceFacetSet[facet.facetId] = {
-        request: buildMockCommerceFacetRequest({
-          facetId: facet.facetId,
-          type: facet.type,
-        }),
-      };
-      state.facetSearchSet[facet.facetId] = buildMockFacetSearch();
-      state.categoryFacetSearchSet[facet.facetId] =
-        buildMockCategoryFacetSearch();
+      if (facet.type === 'regular') {
+        state.facetSearchSet[namespacedFacetId] = buildMockFacetSearch();
+      } else {
+        state.commerceFacetSet[facet.facetId] = {
+          request: buildMockCommerceFacetRequest({
+            facetId: facet.facetId,
+            type: facet.type,
+          }),
+        };
+        state.categoryFacetSearchSet[namespacedFacetId] =
+          buildMockCategoryFacetSearch();
+      }
     }
   }
 

packages/headless/src/controllers/commerce/field-suggestions/headless-field-suggestions.test.ts

@@ -1,12 +1,12 @@
 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 {
+  namespaceCommerceFieldSuggestionFacet,
+  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';
 import {buildMockCommerceState} from '../../../test/mock-commerce-state';
 import {
   buildMockCommerceEngine,
@@ -33,18 +33,16 @@ describe('fieldSuggestions', () => {
   let fieldSuggestions: FieldSuggestions;
   let options: RegularFacetOptions;
 
-  function initFacet() {
+  function initFieldSuggestions() {
     engine = buildMockCommerceEngine(state);
     fieldSuggestions = buildFieldSuggestions(engine, options);
   }
 
-  function setFacetRequest(config: Partial<RegularFacetRequest> = {}) {
-    state.commerceFacetSet[facetId] = buildMockCommerceFacetSlice({
-      request: buildMockCommerceFacetRequest({facetId, ...config}),
-    });
-    state.facetSearchSet[facetId] = buildMockFacetSearch({
-      initialNumberOfValues: 5,
-    });
+  function setFacetSearchRequest() {
+    state.facetSearchSet[namespaceCommerceFieldSuggestionFacet(facetId)] =
+      buildMockFacetSearch({
+        initialNumberOfValues: 5,
+      });
   }
 
   beforeEach(() => {
@@ -58,9 +56,9 @@ describe('fieldSuggestions', () => {
     };
 
     state = buildMockCommerceState();
-    setFacetRequest();
+    setFacetSearchRequest();
 
-    initFacet();
+    initFieldSuggestions();
   });
 
   it('adds correct reducers to engine', () => {

packages/headless/src/controllers/commerce/field-suggestions/headless-field-suggestions.ts

@@ -8,7 +8,10 @@ import {
 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 {
+  namespaceCommerceFieldSuggestionFacet,
+  specificFacetSearchSetReducer as facetSearchSet,
+} from '../../../features/facets/facet-search-set/specific/specific-facet-search-set-slice';
 import {
   CommerceFacetSetSection,
   FacetSearchSection,
@@ -99,8 +102,11 @@ export function buildFieldSuggestions(
 
   const {dispatch} = engine;
 
+  const namespacedFacetId = namespaceCommerceFieldSuggestionFacet(
+    options.facetId
+  );
   const facetSearch = buildRegularFacetSearch(engine, {
-    options: {facetId: options.facetId, ...options.facetSearch},
+    options: {facetId: namespacedFacetId, ...options.facetSearch},
     select: () => {
       dispatch(options.fetchProductsActionCreator());
     },
@@ -121,7 +127,7 @@ export function buildFieldSuggestions(
   const controller = buildController(engine);
 
   const facetSearchStateSelector = createSelector(
-    (state: CommerceEngineState) => state.facetSearchSet[options.facetId],
+    (state: CommerceEngineState) => state.facetSearchSet[namespacedFacetId],
     (facetSearch) => ({
       isLoading: facetSearch.isLoading,
       moreValuesAvailable: facetSearch.response.moreValuesAvailable,

packages/headless/src/features/commerce/facets/facet-search-set/category/commerce-category-facet-search-request-builder.test.ts

@@ -8,22 +8,24 @@ import {buildMockCategoryFacetValue} from '../../../../../test/mock-commerce-fac
 import {buildMockCommerceState} from '../../../../../test/mock-commerce-state';
 import {buildMockFacetSearchRequestOptions} from '../../../../../test/mock-facet-search-request-options';
 import {buildMockNavigatorContextProvider} from '../../../../../test/mock-navigator-context-provider';
+import {namespaceCommerceFieldSuggestionFacet} from '../../../../facets/facet-search-set/specific/specific-facet-search-set-slice';
 import {CategoryFacetValueRequest} from '../../facet-set/interfaces/request';
+import {removeCommerceFieldSuggestionNamespace} from '../regular/commerce-regular-facet-search-request-builder';
 import {buildCategoryFacetSearchRequest} from './commerce-category-facet-search-request-builder';
 
 describe('#buildCategoryFacetSearchRequest', () => {
   let state: CommerceAppState;
   let navigatorContext: NavigatorContext;
-  let facetId: string;
+  const facetId = '1';
   let query: string;
   let buildCommerceAPIRequestMock: jest.SpyInstance;
 
   beforeEach(() => {
     jest.clearAllMocks();
 
-    facetId = '1';
     query = 'test';
     state = buildMockCommerceState();
+
     state.categoryFacetSearchSet[facetId] = buildMockCategoryFacetSearch({
       options: {...buildMockFacetSearchRequestOptions(), query},
     });
@@ -64,7 +66,25 @@ describe('#buildCategoryFacetSearchRequest', () => {
     );
   });
 
-  describe('returned object #ignorePaths property', () => {
+  describe.each([
+    {
+      facetId: 'a_non_namespaced_facet_id',
+    },
+    {
+      facetId: namespaceCommerceFieldSuggestionFacet('a_namespaced_facet_id'),
+    },
+  ])('returned object #ignorePaths property', ({facetId}) => {
+    beforeEach(() => {
+      state.categoryFacetSearchSet[facetId] = buildMockCategoryFacetSearch({
+        options: {...buildMockFacetSearchRequestOptions(), query},
+      });
+
+      state.commerceFacetSet[removeCommerceFieldSuggestionNamespace(facetId)] =
+        buildMockCommerceFacetSlice({
+          request: buildMockCommerceFacetRequest({type: 'hierarchical'}),
+        });
+    });
+
     it('when the facet request has no selected value, is an empty array', () => {
       const request = buildCategoryFacetSearchRequest(
         facetId,
@@ -77,8 +97,12 @@ describe('#buildCategoryFacetSearchRequest', () => {
     });
 
     it('when the facet request has a selected value with no ancestry, is an array with a single array containing the selected value', () => {
-      state.commerceFacetSet[facetId].request.values[0] =
-        buildMockCategoryFacetValue({state: 'selected', value: 'test'});
+      state.commerceFacetSet[
+        removeCommerceFieldSuggestionNamespace(facetId)
+      ].request.values[0] = buildMockCategoryFacetValue({
+        state: 'selected',
+        value: 'test',
+      });
       const request = buildCategoryFacetSearchRequest(
         facetId,
         state,
@@ -89,15 +113,17 @@ describe('#buildCategoryFacetSearchRequest', () => {
       expect(request.ignorePaths).toStrictEqual([
         [
           (
-            state.commerceFacetSet[facetId].request
-              .values[0] as CategoryFacetValueRequest
+            state.commerceFacetSet[
+              removeCommerceFieldSuggestionNamespace(facetId)
+            ].request.values[0] as CategoryFacetValueRequest
           ).value,
         ],
       ]);
     });
 
     it('when the facet request has a selected value with ancestry, is an array with a single array containing the selected value and its ancestors', () => {
-      state.commerceFacetSet[facetId].request.values[0] =
+      const nonNamespacedId = removeCommerceFieldSuggestionNamespace(facetId);
+      state.commerceFacetSet[nonNamespacedId].request.values[0] =
         buildMockCategoryFacetValue({
           value: 'test',
           children: [
@@ -122,15 +148,15 @@ describe('#buildCategoryFacetSearchRequest', () => {
       expect(request.ignorePaths).toStrictEqual([
         [
           (
-            state.commerceFacetSet[facetId].request
+            state.commerceFacetSet[nonNamespacedId].request
               .values[0] as CategoryFacetValueRequest
           ).value,
           (
-            state.commerceFacetSet[facetId].request
+            state.commerceFacetSet[nonNamespacedId].request
               .values[0] as CategoryFacetValueRequest
           ).children[0].value,
           (
-            state.commerceFacetSet[facetId].request
+            state.commerceFacetSet[nonNamespacedId].request
               .values[0] as CategoryFacetValueRequest
           ).children[0].children[0].value,
         ],

packages/headless/src/features/commerce/facets/facet-search-set/category/commerce-category-facet-search-request-builder.ts

@@ -5,6 +5,7 @@ import {
   AnyFacetRequest,
   CategoryFacetRequest,
 } from '../../facet-set/interfaces/request';
+import {removeCommerceFieldSuggestionNamespace} from '../regular/commerce-regular-facet-search-request-builder';
 import {StateNeededForCategoryFacetSearch} from './commerce-category-facet-search-state';
 
 export const buildCategoryFacetSearchRequest = (
@@ -15,7 +16,9 @@ export const buildCategoryFacetSearchRequest = (
 ): CategoryFacetSearchRequest => {
   const baseFacetQuery = state.categoryFacetSearchSet[facetId]!.options.query;
   const facetQuery = `*${baseFacetQuery}*`;
-  const categoryFacet = state.commerceFacetSet[facetId]?.request;
+  const categoryFacet =
+    state.commerceFacetSet[removeCommerceFieldSuggestionNamespace(facetId)]
+      ?.request;
   const path =
     categoryFacet && isCategoryFacetRequest(categoryFacet)
       ? categoryFacet && getPathToSelectedCategoryFacetItem(categoryFacet)
@@ -40,7 +43,7 @@ export const buildCategoryFacetSearchRequest = (
     url,
     accessToken,
     organizationId,
-    facetId,
+    facetId: removeCommerceFieldSuggestionNamespace(facetId),
     facetQuery,
     ignorePaths,
     trackingId,

packages/headless/src/features/commerce/facets/facet-search-set/regular/commerce-regular-facet-search-request-builder.ts

@@ -30,7 +30,7 @@ export const buildFacetSearchRequest = (
     url,
     accessToken,
     organizationId,
-    facetId,
+    facetId: removeCommerceFieldSuggestionNamespace(facetId),
     facetQuery,
     trackingId,
     language,
@@ -42,3 +42,9 @@ export const buildFacetSearchRequest = (
     ...(!isFieldSuggestionsRequest && {...restOfCommerceAPIRequest, query: ''}),
   };
 };
+
+export function removeCommerceFieldSuggestionNamespace(facetId: string) {
+  return facetId.startsWith('field_suggestion:')
+    ? facetId.split(':')[1]
+    : facetId;
+}

packages/headless/src/features/commerce/facets/facet-set/facet-set-slice.test.ts

@@ -33,6 +33,7 @@ import {
   excludeFacetSearchResult,
   selectFacetSearchResult,
 } from '../../../facets/facet-search-set/specific/specific-facet-search-actions';
+import {namespaceCommerceFieldSuggestionFacet} from '../../../facets/facet-search-set/specific/specific-facet-search-set-slice';
 import {convertFacetValueToRequest} from '../../../facets/facet-set/facet-set-slice';
 import * as FacetReducers from '../../../facets/generic/facet-reducer-helpers';
 import {convertToDateRangeRequests} from '../../../facets/range-facets/date-facet-set/date-facet-set-slice';
@@ -688,12 +689,12 @@ describe('commerceFacetSetReducer', () => {
         )
       );
       expect(finalState).toEqual({
-        regular_field: {
+        [namespaceCommerceFieldSuggestionFacet('regular_field')]: {
           request: {
             initialNumberOfValues: 10,
           },
         },
-        hierarchical_field: {
+        [namespaceCommerceFieldSuggestionFacet('hierarchical_field')]: {
           request: {
             initialNumberOfValues: 10,
           },