feat(headless commerce ssr): merge controller props and ControllerDefinitionOption

.cspell.json

@@ -20,6 +20,7 @@
     "bloup",
     "bpsb",
     "btoashim",
+    "CAPI",
     "cfcomment",
     "cfpage",
     "cfspace",

packages/atomic/src/components/commerce/facets/atomic-commerce-facets/atomic-commerce-facets.tsx

@@ -133,9 +133,7 @@ export class AtomicCommerceFacets implements InitializableComponent<Bindings> {
                 ></atomic-commerce-category-facet>
               );
             default: {
-              this.bindings.engine.logger.warn(
-                `Unexpected facet type ${facet.state.type}.`
-              );
+              this.bindings.engine.logger.warn('Unexpected facet type.');
               return;
             }
           }

packages/headless/src/controllers/commerce/core/facets/category/headless-commerce-category-facet-search.ts

@@ -28,9 +28,7 @@ export type CategoryFacetSearchState =
 export type CategoryFacetSearch = Omit<
   ReturnType<typeof buildCoreCategoryFacetSearch>,
   'showMoreResults' | 'updateCaptions' | 'state'
-> & {
-  state: CategoryFacetSearchState;
-};
+>;
 
 export function buildCategoryFacetSearch(
   engine: CommerceEngine,
@@ -40,7 +38,7 @@ export function buildCategoryFacetSearch(
     throw loadReducerError;
   }
 
-  const {showMoreResults, updateCaptions, ...restOfFacetSearch} =
+  const {showMoreResults, state, updateCaptions, ...restOfFacetSearch} =
     buildCoreCategoryFacetSearch(engine, {
       ...props,
       executeFacetSearchActionCreator: (facetId: string) =>

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

@@ -1,8 +1,4 @@
-import {createSelector} from '@reduxjs/toolkit';
-import {
-  CommerceEngine,
-  CommerceEngineState,
-} from '../../../../../app/commerce-engine/commerce-engine';
+import {CommerceEngine} from '../../../../../app/commerce-engine/commerce-engine';
 import {stateKey} from '../../../../../app/state-key';
 import {
   toggleSelectCategoryFacetValue,
@@ -11,6 +7,7 @@ import {
 import {CategoryFacetValueRequest} from '../../../../../features/commerce/facets/facet-set/interfaces/request';
 import {defaultNumberOfValuesIncrement} from '../../../../../features/facets/category-facet-set/category-facet-set-actions';
 import {findActiveValueAncestry} from '../../../../../features/facets/category-facet-set/category-facet-utils';
+import {categoryFacetSearchStateSelector} from '../../../../../features/facets/facet-search-set/category/category-facet-search-state-selector';
 import {
   CategoryFacetValue,
   CoreCommerceFacet,
@@ -32,13 +29,17 @@ export type CategoryFacetOptions = Omit<
 > &
   SearchableFacetOptions;
 
-export type CategoryFacetState = CoreCommerceFacetState<CategoryFacetValue> & {
+export type CategoryFacetState = Omit<
+  CoreCommerceFacetState<CategoryFacetValue>,
+  'type'
+> & {
   activeValue?: CategoryFacetValue;
   canShowLessValues: boolean;
   canShowMoreValues: boolean;
   hasActiveValues: boolean;
   selectedValueAncestry?: CategoryFacetValue[];
   facetSearch: CategoryFacetSearchState;
+  type: 'hierarchical';
 };
 
 /**
@@ -85,27 +86,13 @@ export function buildCategoryFacet(
     coreController;
   const {dispatch} = engine;
   const getFacetId = () => coreController.state.facetId;
-  const createFacetSearch = () => {
-    return buildCategoryFacetSearch(engine, {
-      options: {facetId: getFacetId(), ...options.facetSearch},
-      select: () => {
-        dispatch(options.fetchProductsActionCreator());
-      },
-      isForFieldSuggestions: false,
-    });
-  };
-
-  const facetSearch = createFacetSearch();
-  const {state, ...restOfFacetSearch} = facetSearch;
-  const facetSearchStateSelector = createSelector(
-    (state: CommerceEngineState) => state.categoryFacetSearchSet[getFacetId()],
-    (facetSearch) => ({
-      isLoading: facetSearch.isLoading,
-      moreValuesAvailable: facetSearch.response.moreValuesAvailable,
-      query: facetSearch.options.query,
-      values: facetSearch.response.values,
-    })
-  );
+  const facetSearch = buildCategoryFacetSearch(engine, {
+    options: {facetId: getFacetId(), ...options.facetSearch},
+    select: () => {
+      dispatch(options.fetchProductsActionCreator());
+    },
+    isForFieldSuggestions: false,
+  });
 
   return {
     deselectAll,
@@ -136,35 +123,49 @@ export function buildCategoryFacet(
       dispatch(options.fetchProductsActionCreator());
     },
 
-    facetSearch: restOfFacetSearch,
+    facetSearch,
 
     get state() {
-      const selectedValueAncestry = findActiveValueAncestry(
-        coreController.state.values
+      return getCategoryFacetState(
+        coreController.state,
+        categoryFacetSearchStateSelector(engine[stateKey], getFacetId())
       );
-      const activeValue = selectedValueAncestry.length
-        ? selectedValueAncestry[selectedValueAncestry.length - 1]
-        : undefined;
-      const canShowLessValues = activeValue
-        ? activeValue.children.length > defaultNumberOfValuesIncrement
-        : false;
-      const canShowMoreValues =
-        activeValue?.moreValuesAvailable ??
-        coreController.state.canShowMoreValues ??
-        false;
-      const hasActiveValues = !!activeValue;
-
-      return {
-        ...coreController.state,
-        activeValue,
-        canShowLessValues,
-        canShowMoreValues,
-        hasActiveValues,
-        selectedValueAncestry,
-        facetSearch: facetSearchStateSelector(engine[stateKey]),
-      };
     },
 
     type: 'hierarchical',
   };
 }
+
+export const getCategoryFacetState = (
+  coreState: CoreCommerceFacetState<CategoryFacetValue>,
+  facetSearchSelector: ReturnType<typeof categoryFacetSearchStateSelector>
+): CategoryFacetState => {
+  const {values} = coreState;
+  const selectedValueAncestry = findActiveValueAncestry(values);
+  const activeValue = selectedValueAncestry.length
+    ? selectedValueAncestry[selectedValueAncestry.length - 1]
+    : undefined;
+  const canShowLessValues = activeValue
+    ? activeValue.children.length > defaultNumberOfValuesIncrement
+    : false;
+  const canShowMoreValues =
+    activeValue?.moreValuesAvailable ?? coreState.canShowMoreValues ?? false;
+  const hasActiveValues = !!activeValue;
+  return {
+    ...coreState,
+    activeValue,
+    canShowLessValues,
+    canShowMoreValues,
+    facetSearch: {
+      isLoading: facetSearchSelector?.isLoading ?? false,
+      moreValuesAvailable:
+        facetSearchSelector?.response.moreValuesAvailable ?? false,
+      query: facetSearchSelector?.options.query ?? '',
+      values: facetSearchSelector?.response.values ?? [],
+    },
+    hasActiveValues,
+    selectedValueAncestry,
+    type: 'hierarchical',
+    values,
+  };
+};

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

@@ -20,7 +20,12 @@ export type DateFacetOptions = Omit<
   'toggleSelectActionCreator' | 'toggleExcludeActionCreator'
 >;
 
-export type DateFacetState = CoreCommerceFacetState<DateFacetValue>;
+export type DateFacetState = Omit<
+  CoreCommerceFacetState<DateFacetValue>,
+  'type'
+> & {
+  type: 'dateRange';
+};
 
 /**
  * The `DateFacet` sub-controller offers a high-level programming interface for implementing date commerce
@@ -86,9 +91,18 @@ export function buildCommerceDateFacet(
     },
 
     get state() {
-      return coreController.state;
+      return getDateFacetState(coreController.state);
     },
 
     type: 'dateRange',
   };
 }
+
+export const getDateFacetState = (
+  coreState: CoreCommerceFacetState<DateFacetValue>
+): DateFacetState => {
+  return {
+    ...coreState,
+    type: 'dateRange',
+  };
+};

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

@@ -0,0 +1,164 @@
+import {SolutionType} from '../../../../../app/commerce-ssr-engine/types/common';
+import {AnyFacetResponse} from '../../../../../features/commerce/facets/facet-set/interfaces/response';
+import {CommerceAppState} from '../../../../../state/commerce-app-state';
+import {buildMockCategoryFacetSearch} from '../../../../../test/mock-category-facet-search';
+import {buildMockCommerceFacetRequest} from '../../../../../test/mock-commerce-facet-request';
+import {
+  buildMockCategoryFacetResponse,
+  buildMockCommerceDateFacetResponse,
+  buildMockCommerceNumericFacetResponse,
+  buildMockCommerceRegularFacetResponse,
+} from '../../../../../test/mock-commerce-facet-response';
+import {buildMockCommerceState} from '../../../../../test/mock-commerce-state';
+import {
+  buildMockSSRCommerceEngine,
+  MockedCommerceEngine,
+} from '../../../../../test/mock-engine-v2';
+import {buildMockFacetSearch} from '../../../../../test/mock-facet-search';
+import {buildProductListing} from '../../../product-listing/headless-product-listing';
+import {buildSearch} from '../../../search/headless-search';
+import {FacetType} from '../headless-core-commerce-facet';
+import {GeneratedFacetControllers} from './headless-commerce-facet-generator';
+import {
+  buildFacetGenerator,
+  FacetGenerator,
+  FacetGeneratorOptions,
+} from './headless-commerce-facet-generator.ssr';
+
+describe('SSR FacetGenerator', () => {
+  let engine: MockedCommerceEngine;
+  let state: CommerceAppState;
+  let options: FacetGeneratorOptions;
+  let facetGenerator: FacetGenerator;
+  let facetsInEngineState: {facetId: string; type: FacetType}[];
+
+  function initEngine(preloadedState = buildMockCommerceState()) {
+    engine = buildMockSSRCommerceEngine({...preloadedState});
+  }
+
+  function initCommerceFacetGenerator() {
+    facetGenerator = buildFacetGenerator(engine, options);
+  }
+
+  function setFacetState(config = facetsInEngineState) {
+    for (const facet of config) {
+      const {facetId, type} = facet;
+      state.facetOrder.push(facetId);
+      let response: AnyFacetResponse;
+      switch (type) {
+        case 'dateRange':
+          response = buildMockCommerceDateFacetResponse({facetId, type});
+          break;
+        case 'hierarchical':
+          response = buildMockCategoryFacetResponse({facetId, type});
+          break;
+        case 'numericalRange':
+          response = buildMockCommerceNumericFacetResponse({facetId, type});
+          break;
+        case 'regular':
+        default:
+          response = buildMockCommerceRegularFacetResponse({facetId, type});
+      }
+      if (options.props.solutionType === SolutionType.listing) {
+        state.productListing.facets.push(response);
+      } else {
+        state.commerceSearch.facets.push(response);
+      }
+
+      state.commerceFacetSet[facet.facetId] = {
+        request: buildMockCommerceFacetRequest({
+          facetId: facet.facetId,
+          type: facet.type,
+        }),
+      };
+      if (type === 'regular') {
+        state.facetSearchSet[facet.facetId] = buildMockFacetSearch();
+      } else if (type === 'hierarchical') {
+        state.categoryFacetSearchSet[facet.facetId] =
+          buildMockCategoryFacetSearch();
+      }
+    }
+  }
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+  describe.each([
+    {
+      solutionType: SolutionType.listing,
+      buildGeneratedCSRFacetControllersFunction: () =>
+        buildProductListing(engine).facetGenerator().facets,
+    },
+    {
+      solutionType: SolutionType.search,
+      buildGeneratedCSRFacetControllersFunction: () =>
+        buildSearch(engine).facetGenerator().facets,
+    },
+  ])(
+    'when solutionType is $solutionType',
+    ({solutionType, buildGeneratedCSRFacetControllersFunction}) => {
+      let generatedCSRFacetControllers: GeneratedFacetControllers;
+      beforeEach(() => {
+        options = {props: {solutionType}};
+        facetsInEngineState = [
+          {
+            facetId: 'category-facet',
+            type: 'hierarchical',
+          },
+          {
+            facetId: 'date-facet',
+            type: 'dateRange',
+          },
+          {
+            facetId: 'numeric-facet',
+            type: 'numericalRange',
+          },
+          {
+            facetId: 'regular-facet',
+            type: 'regular',
+          },
+        ];
+        state = buildMockCommerceState();
+        setFacetState(facetsInEngineState);
+        initEngine(state);
+        initCommerceFacetGenerator();
+
+        generatedCSRFacetControllers =
+          buildGeneratedCSRFacetControllersFunction();
+      });
+
+      it('initialized', () => {
+        expect(facetGenerator).toBeTruthy();
+      });
+      it('#state is an array containing the state of each facet', () => {
+        expect(facetGenerator.state.length).toBe(4);
+        expect(
+          facetGenerator.state.map((facet) => ({
+            facetId: facet.facetId,
+            type: facet.type,
+          }))
+        ).toEqual(facetsInEngineState);
+      });
+
+      it('#getFacetController returns facet controller for the given facet id and type', () => {
+        for (const facetInEngineState of facetsInEngineState) {
+          const {facetId, type} = facetInEngineState;
+          const generatedSSRFacetController = facetGenerator.getFacetController(
+            facetId,
+            type
+          );
+          const generatedCSRFacetController = generatedCSRFacetControllers.find(
+            (controller) => controller.state.facetId === facetId
+          );
+          expect(generatedSSRFacetController).toBeTruthy();
+          expect(generatedSSRFacetController?.type).toBe(
+            generatedCSRFacetController?.type
+          );
+          expect(generatedSSRFacetController?.state).toEqual(
+            generatedCSRFacetController?.state
+          );
+        }
+      });
+    }
+  );
+});