feat(commerce): add breadcrumbs and parameters support for location facets

packages/headless/src/api/commerce/facet-search/base/base-facet-search-request.ts

@@ -0,0 +1,5 @@
+export interface FacetSearchType<
+  T extends 'specific' | 'location' | 'hierarchical',
+> {
+  type: T;
+}

packages/headless/src/api/commerce/facet-search/location-facet-search/location-facet-search-request.ts

@@ -0,0 +1,8 @@
+import {BaseFacetSearchRequest} from '../../../search/facet-search/base/base-facet-search-request.js';
+import {FacetSearchType} from '../base/base-facet-search-request.js';
+
+export interface LocationFacetSearchRequest
+  extends BaseFacetSearchRequest,
+    FacetSearchType<'location'> {
+  ignoreValues: string[];
+}

packages/headless/src/api/commerce/facet-search/location-facet-search/location-facet-search-response.ts

@@ -0,0 +1,8 @@
+import {
+  BaseFacetSearchResponse,
+  BaseFacetSearchResult,
+} from '../../../search/facet-search/base/base-facet-search-response.js';
+
+export type LocationFacetSearchResult = BaseFacetSearchResult;
+export type LocationFacetSearchResponse =
+  BaseFacetSearchResponse<LocationFacetSearchResult>;

packages/headless/src/commerce.index.ts

@@ -51,6 +51,7 @@ export * from './features/commerce/sort/sort-actions-loader.js';
 export * from './features/commerce/facets/core-facet/core-facet-actions-loader.js';
 export * from './features/commerce/facets/category-facet/category-facet-actions-loader.js';
 export * from './features/commerce/facets/regular-facet/regular-facet-actions-loader.js';
+// TODO COMHUB-247 export location facets actions loader
 export * from './features/commerce/facets/date-facet/date-facet-actions-loader.js';
 export * from './features/commerce/facets/numeric-facet/numeric-facet-actions-loader.js';
 export * from './features/commerce/query-set/query-set-actions-loader.js';
@@ -164,6 +165,10 @@ export type {
   RegularFacet,
   RegularFacetState,
 } from './controllers/commerce/core/facets/regular/headless-commerce-regular-facet.js';
+export type {
+  LocationFacet,
+  LocationFacetState,
+} from './controllers/commerce/core/facets/location/headless-commerce-location-facet.js';
 export type {
   NumericFacet,
   NumericFacetState,
@@ -178,6 +183,8 @@ export type {
   FacetType,
   FacetValueRequest,
   RegularFacetValue,
+  LocationFacetValueRequest,
+  LocationFacetValue,
   NumericRangeRequest,
   NumericFacetValue,
   DateRangeRequest,
@@ -194,6 +201,11 @@ export type {
   RegularFacetSearchState,
 } from './controllers/commerce/core/facets/regular/headless-commerce-regular-facet-search.js';
 export type {SpecificFacetSearchResult as RegularFacetSearchResult} from './api/search/facet-search/specific-facet-search/specific-facet-search-response.js';
+export type {
+  LocationFacetSearch,
+  LocationFacetSearchState,
+} from './controllers/commerce/core/facets/location/headless-commerce-location-facet-search.js';
+export type {LocationFacetSearchResult} from './api/commerce/facet-search/location-facet-search/location-facet-search-response.js';
 export type {
   CategoryFacetSearch,
   CategoryFacetSearchState,

packages/headless/src/controllers/commerce/core/breadcrumb-manager/headless-core-breadcrumb-manager.test.ts

@@ -14,9 +14,14 @@ import {
   AnyFacetValueResponse,
   CategoryFacetValue,
   DateFacetValue,
+  LocationFacetValue,
   NumericFacetValue,
   RegularFacetValue,
 } from '../../../../features/commerce/facets/facet-set/interfaces/response.js';
+import {
+  toggleExcludeLocationFacetValue,
+  toggleSelectLocationFacetValue,
+} from '../../../../features/commerce/facets/location-facet/location-facet-actions.js';
 import {
   toggleExcludeNumericFacetValue,
   toggleSelectNumericFacetValue,
@@ -32,6 +37,7 @@ import {buildMockCommerceFacetRequest} from '../../../../test/mock-commerce-face
 import {
   buildMockCategoryFacetResponse,
   buildMockCommerceDateFacetResponse,
+  buildMockCommerceLocationFacetResponse,
   buildMockCommerceNumericFacetResponse,
   buildMockCommerceRegularFacetResponse,
 } from '../../../../test/mock-commerce-facet-response.js';
@@ -55,10 +61,12 @@ vi.mock(
   '../../../../features/commerce/facets/numeric-facet/numeric-facet-actions'
 );
 vi.mock('../../../../features/commerce/facets/date-facet/date-facet-actions');
-
 vi.mock(
   '../../../../features/commerce/facets/regular-facet/regular-facet-actions'
 );
+vi.mock(
+  '../../../../features/commerce/facets/location-facet/location-facet-actions'
+);
 
 describe('core breadcrumb manager', () => {
   let engine: MockedCommerceEngine;
@@ -240,6 +248,34 @@ describe('core breadcrumb manager', () => {
     ])('#deselect when facet is %s', generateDeselectionTestCases(breadcrumb));
   });
 
+  describe('location facet breadcrumbs', () => {
+    const breadcrumb = {
+      value: 'Corp Corp Quarters',
+      state: 'selected',
+    } as LocationFacetValue;
+
+    beforeEach(() => {
+      setFacetsState(
+        buildMockCommerceLocationFacetResponse({
+          facetId,
+          values: [
+            {value: 'Acme', state: 'idle'},
+            breadcrumb,
+          ] as LocationFacetValue[],
+        })
+      );
+    });
+
+    it('generates breadcrumbs', () => {
+      expectBreadcrumbToBePresentInState(breadcrumb);
+    });
+
+    describe.each([
+      ['selected', toggleSelectLocationFacetValue],
+      ['excluded', toggleExcludeLocationFacetValue],
+    ])('#deselect when facet is %s', generateDeselectionTestCases(breadcrumb));
+  });
+
   describe('numeric facet breadcrumbs', () => {
     const breadcrumb = {
       start: 100,

packages/headless/src/controllers/commerce/core/breadcrumb-manager/headless-core-breadcrumb-manager.ts

@@ -21,9 +21,14 @@ import {
   BaseFacetValue,
   CategoryFacetResponse,
   DateFacetResponse,
+  LocationFacetResponse,
   NumericFacetResponse,
   RegularFacetResponse,
 } from '../../../../features/commerce/facets/facet-set/interfaces/response.js';
+import {
+  toggleExcludeLocationFacetValue,
+  toggleSelectLocationFacetValue,
+} from '../../../../features/commerce/facets/location-facet/location-facet-actions.js';
 import {
   toggleExcludeNumericFacetValue,
   toggleSelectNumericFacetValue,
@@ -121,6 +126,10 @@ const actions: Record<FacetType, ActionCreators> = {
     toggleSelectActionCreator: toggleSelectFacetValue,
     toggleExcludeActionCreator: toggleExcludeFacetValue,
   },
+  location: {
+    toggleSelectActionCreator: toggleSelectLocationFacetValue,
+    toggleExcludeActionCreator: toggleExcludeLocationFacetValue,
+  },
   numericalRange: {
     toggleSelectActionCreator: toggleSelectNumericFacetValue,
     toggleExcludeActionCreator: toggleExcludeNumericFacetValue,
@@ -165,7 +174,11 @@ export function buildCoreBreadcrumbManager(
   });
 
   const getValuesForNonCategoryFacet = (
-    facet: RegularFacetResponse | NumericFacetResponse | DateFacetResponse
+    facet:
+      | RegularFacetResponse
+      | NumericFacetResponse
+      | DateFacetResponse
+      | LocationFacetResponse
   ) => {
     return facet.values
       .filter((value) => value.state !== 'idle')
@@ -253,6 +266,7 @@ export function buildCoreBreadcrumbManager(
     (facetOrder): BreadcrumbManagerState => {
       const breadcrumbs = facetOrder.flatMap((facetId) => {
         const facet = options.facetResponseSelector(engine[stateKey], facetId);
+
         if (hasActiveValue(facet)) {
           return [createBreadcrumb(facet)];
         }

packages/headless/src/controllers/commerce/core/facets/generator/headless-commerce-facet-generator.ssr.test.ts

@@ -8,6 +8,7 @@ import {
   buildMockCommerceDateFacetResponse,
   buildMockCommerceNumericFacetResponse,
   buildMockCommerceRegularFacetResponse,
+  buildMockCommerceLocationFacetResponse,
 } from '../../../../../test/mock-commerce-facet-response.js';
 import {buildMockCommerceState} from '../../../../../test/mock-commerce-state.js';
 import {
@@ -55,6 +56,9 @@ describe('SSR FacetGenerator', () => {
         case 'numericalRange':
           response = buildMockCommerceNumericFacetResponse({facetId, type});
           break;
+        case 'location':
+          response = buildMockCommerceLocationFacetResponse({facetId, type});
+          break;
         case 'regular':
         default:
           response = buildMockCommerceRegularFacetResponse({facetId, type});
@@ -71,7 +75,7 @@ describe('SSR FacetGenerator', () => {
           type: facet.type,
         }),
       };
-      if (type === 'regular') {
+      if (type === 'regular' || type === 'location') {
         state.facetSearchSet[facet.facetId] = buildMockFacetSearch();
       } else if (type === 'hierarchical') {
         state.categoryFacetSearchSet[facet.facetId] =
@@ -117,6 +121,10 @@ describe('SSR FacetGenerator', () => {
             facetId: 'regular-facet',
             type: 'regular',
           },
+          {
+            facetId: 'location-facet',
+            type: 'location',
+          },
         ];
         state = buildMockCommerceState();
         setFacetState(facetsInEngineState);
@@ -131,7 +139,7 @@ describe('SSR FacetGenerator', () => {
         expect(facetGenerator).toBeTruthy();
       });
       it('#state is an array containing the state of each facet', () => {
-        expect(facetGenerator.state.length).toBe(4);
+        expect(facetGenerator.state.length).toBe(5);
         expect(
           facetGenerator.state.map((facet) => ({
             facetId: facet.facetId,

packages/headless/src/controllers/commerce/core/facets/generator/headless-commerce-facet-generator.ssr.ts

@@ -11,11 +11,13 @@ import {stateKey} from '../../../../../app/state-key.js';
 import {facetRequestSelector} from '../../../../../features/commerce/facets/facet-set/facet-set-selector.js';
 import {
   AnyFacetResponse,
+  LocationFacetValue,
   RegularFacetValue,
 } from '../../../../../features/commerce/facets/facet-set/interfaces/response.js';
 import {manualNumericFacetSelector} from '../../../../../features/commerce/facets/numeric-facet/manual-numeric-facet-selectors.js';
 import {manualNumericFacetReducer as manualNumericFacetSet} from '../../../../../features/commerce/facets/numeric-facet/manual-numeric-facet-slice.js';
 import {categoryFacetSearchStateSelector} from '../../../../../features/facets/facet-search-set/category/category-facet-search-state-selector.js';
+import {locationFacetSearchStateSelector} from '../../../../../features/facets/facet-search-set/location/location-facet-search-state-selector.js';
 import {specificFacetSearchStateSelector} from '../../../../../features/facets/facet-search-set/specific/specific-facet-search-state-selector.js';
 import {ManualRangeSection} from '../../../../../state/state-sections.js';
 import {loadReducerError} from '../../../../../utils/errors.js';
@@ -44,6 +46,11 @@ import {
   FacetType,
   getCoreFacetState,
 } from '../headless-core-commerce-facet.js';
+import {
+  getLocationFacetState,
+  LocationFacet,
+  LocationFacetState,
+} from '../location/headless-commerce-location-facet.js';
 import {
   getNumericFacetState,
   NumericFacet,
@@ -72,6 +79,9 @@ export type {
   RegularFacet,
   RegularFacetState,
   RegularFacetValue,
+  LocationFacet,
+  LocationFacetState,
+  LocationFacetValue,
 };
 
 export type FacetGeneratorState = MappedFacetStates;
@@ -87,7 +97,9 @@ type MappedFacetState = {
         ? DateFacetState
         : T extends 'hierarchical'
           ? CategoryFacetState
-          : never;
+          : T extends 'location'
+            ? LocationFacetState
+            : never;
 };
 
 export function defineFacetGenerator<
@@ -235,6 +247,11 @@ export function buildFacetGenerator(
               createFacetState(facetResponseSelector) as RegularFacetState,
               specificFacetSearchStateSelector(getEngineState(), facetId)
             );
+          case 'location':
+            return getLocationFacetState(
+              createFacetState(facetResponseSelector) as LocationFacetState,
+              locationFacetSearchStateSelector(getEngineState(), facetId)
+            );
         }
       });
     },

packages/headless/src/controllers/commerce/core/facets/generator/headless-commerce-facet-generator.test.ts

@@ -28,6 +28,7 @@ describe('CSR FacetGenerator', () => {
   let facetGenerator: FacetGenerator;
   const mockBuildNumericFacet = vi.fn();
   const mockBuildRegularFacet = vi.fn();
+  const mockBuildLocationFacet = vi.fn();
   const mockBuildDateFacet = vi.fn();
   const mockBuildCategoryFacet = vi.fn();
   const mockFetchProductsActionCreator = vi.fn();
@@ -61,6 +62,7 @@ describe('CSR FacetGenerator', () => {
     options = {
       buildNumericFacet: mockBuildNumericFacet,
       buildRegularFacet: mockBuildRegularFacet,
+      buildLocationFacet: mockBuildLocationFacet,
       buildDateFacet: mockBuildDateFacet,
       buildCategoryFacet: mockBuildCategoryFacet,
       fetchProductsActionCreator: mockFetchProductsActionCreator,
@@ -97,6 +99,14 @@ describe('CSR FacetGenerator', () => {
       expect(mockBuildRegularFacet).toHaveBeenCalledWith(engine, {facetId});
     });
 
+    it('when engine facet state contains a location facet, generates a location facet controller', () => {
+      const facetId = 'location_facet_id';
+      setFacetState([{facetId, type: 'location'}]);
+
+      expect(facetGenerator.facets.length).toEqual(1);
+      expect(mockBuildLocationFacet).toHaveBeenCalledWith(engine, {facetId});
+    });
+
     it('when engine facet state contains a numeric facet, generates a numeric facet controller', () => {
       const facetId = 'numeric_facet_id';
       setFacetState([{facetId, type: 'numericalRange'}]);
@@ -127,6 +137,10 @@ describe('CSR FacetGenerator', () => {
           facetId: 'regular_facet_id',
           type: 'regular',
         },
+        {
+          facetId: 'location_facet_id',
+          type: 'location',
+        },
         {
           facetId: 'numeric_facet_id',
           type: 'numericalRange',
@@ -142,24 +156,29 @@ describe('CSR FacetGenerator', () => {
       ];
       setFacetState(facets);
 
+      let index = 0;
       mockBuildRegularFacet.mockReturnValue({
-        state: {facetId: facets[0].facetId},
+        state: {facetId: facets[index++].facetId},
+      });
+      mockBuildLocationFacet.mockReturnValue({
+        state: {facetId: facets[index++].facetId},
       });
       mockBuildNumericFacet.mockReturnValue({
-        state: {facetId: facets[1].facetId},
+        state: {facetId: facets[index++].facetId},
+      });
+      mockBuildDateFacet.mockReturnValue({
+        state: {facetId: facets[index++].facetId},
       });
-      mockBuildDateFacet.mockReturnValue({state: {facetId: facets[2].facetId}});
       mockBuildCategoryFacet.mockReturnValue({
-        state: {facetId: facets[3].facetId},
+        state: {facetId: facets[index++].facetId},
       });
 
       const facetState = facetGenerator.facets;
 
-      expect(facetState.length).toEqual(4);
-      expect(facetState[0].state.facetId).toEqual(facets[0].facetId);
-      expect(facetState[1].state.facetId).toEqual(facets[1].facetId);
-      expect(facetState[2].state.facetId).toEqual(facets[2].facetId);
-      expect(facetState[3].state.facetId).toEqual(facets[3].facetId);
+      expect(facetState.length).toEqual(5);
+      expect(facetState.map((f) => f.state.facetId)).toEqual(
+        facets.map((f) => f.facetId)
+      );
     });
   });