docs(headless commerce SSR): copy common codes/sample between NextJS & Remix

packages/headless/src/app/commerce-ssr-engine/types/kind.ts

@@ -4,3 +4,19 @@ export enum Kind {
   ParameterManager = 'PARAMETER_MANAGER',
   Recommendations = 'RECOMMENDATIONS',
 }
+
+export function createControllerWithKind<TController, TKind extends Kind>(
+  controller: TController,
+  kind: TKind
+): TController & {_kind: TKind} {
+  const copy = Object.defineProperties(
+    {},
+    Object.getOwnPropertyDescriptors(controller)
+  );
+
+  Object.defineProperty(copy, '_kind', {
+    value: kind,
+  });
+
+  return copy as TController & {_kind: TKind};
+}

packages/headless/src/controllers/commerce/context/cart/headless-cart.ssr.ts

@@ -1,5 +1,8 @@
 import {UniversalControllerDefinitionWithProps} from '../../../../app/commerce-ssr-engine/types/common.js';
-import {Kind} from '../../../../app/commerce-ssr-engine/types/kind.js';
+import {
+  createControllerWithKind,
+  Kind,
+} from '../../../../app/commerce-ssr-engine/types/kind.js';
 import {Cart, buildCart, CartInitialState} from './headless-cart.js';
 
 export type {CartState, CartItem, CartProps} from './headless-cart.js';
@@ -27,10 +30,8 @@ export function defineCart(): CartDefinition {
     standalone: true,
     recommendation: true,
     buildWithProps: (engine, props) => {
-      return {
-        ...buildCart(engine, {initialState: props.initialState}),
-        _kind: Kind.Cart,
-      };
+      const controller = buildCart(engine, {initialState: props.initialState});
+      return createControllerWithKind(controller, Kind.Cart);
     },
   };
 }

packages/headless/src/controllers/commerce/context/headless-context.ssr.ts

@@ -1,5 +1,8 @@
 import {UniversalControllerDefinitionWithProps} from '../../../app/commerce-ssr-engine/types/common.js';
-import {Kind} from '../../../app/commerce-ssr-engine/types/kind.js';
+import {
+  createControllerWithKind,
+  Kind,
+} from '../../../app/commerce-ssr-engine/types/kind.js';
 import {
   Context,
   buildContext,
@@ -29,10 +32,8 @@ export function defineContext(): ContextDefinition {
     standalone: true,
     recommendation: true,
     buildWithProps: (engine, props) => {
-      return {
-        ...buildContext(engine, {options: props}),
-        _kind: Kind.Context,
-      };
+      const controller = buildContext(engine, {options: props});
+      return createControllerWithKind(controller, Kind.Context);
     },
   };
 }

packages/headless/src/controllers/commerce/core/parameter-manager/headless-core-parameter-manager.ssr.ts

@@ -4,6 +4,10 @@ import {
   SolutionType,
   SubControllerDefinitionWithProps,
 } from '../../../../app/commerce-ssr-engine/types/common.js';
+import {
+  createControllerWithKind,
+  Kind,
+} from '../../../../app/commerce-ssr-engine/types/kind.js';
 import {CoreEngineNext} from '../../../../app/engine.js';
 import {commerceFacetSetReducer as commerceFacetSet} from '../../../../features/commerce/facets/facet-set/facet-set-slice.js';
 import {manualNumericFacetReducer as manualNumericFacetSet} from '../../../../features/commerce/facets/numeric-facet/manual-numeric-facet-slice.js';
@@ -55,18 +59,23 @@ export function defineParameterManager<
         if (!loadCommerceProductListingParameterReducers(engine)) {
           throw loadReducerError;
         }
-        return buildProductListing(engine).parameterManager({
+        const controller = buildProductListing(engine).parameterManager({
           ...props,
           excludeDefaultParameters: true,
         });
+
+        return createControllerWithKind(controller, Kind.ParameterManager);
       } else {
         if (!loadCommerceSearchParameterReducers(engine)) {
           throw loadReducerError;
         }
-        return buildSearch(engine).parameterManager({
+
+        const controller = buildSearch(engine).parameterManager({
           ...props,
           excludeDefaultParameters: true,
         });
+
+        return createControllerWithKind(controller, Kind.ParameterManager);
       }
     },
   } as SubControllerDefinitionWithProps<

packages/headless/src/controllers/commerce/recommendations/headless-recommendations.ssr.ts

@@ -2,7 +2,10 @@ import {
   recommendationInternalOptionKey,
   RecommendationOnlyControllerDefinitionWithProps,
 } from '../../../app/commerce-ssr-engine/types/common.js';
-import {Kind} from '../../../app/commerce-ssr-engine/types/kind.js';
+import {
+  createControllerWithKind,
+  Kind,
+} from '../../../app/commerce-ssr-engine/types/kind.js';
 import {
   RecommendationsOptions,
   RecommendationsState,
@@ -52,16 +55,7 @@ export function defineRecommendations(
       const controller = buildRecommendations(engine, {
         options: {...staticOptions, ...options},
       });
-      const copy = Object.defineProperties(
-        {},
-        Object.getOwnPropertyDescriptors(controller)
-      );
-
-      Object.defineProperty(copy, '_kind', {
-        value: Kind.Recommendations,
-      });
-
-      return copy as typeof controller & {_kind: Kind.Recommendations};
+      return createControllerWithKind(controller, Kind.Recommendations);
     },
   };
 }

packages/samples/headless-commerce-ssr-remix/app/components/breadcrumb-manager.tsx

@@ -0,0 +1,71 @@
+import {useBreadcrumbManager} from '@/lib/commerce-engine';
+import {
+  NumericFacetValue,
+  DateFacetValue,
+  CategoryFacetValue,
+  RegularFacetValue,
+  LocationFacetValue,
+} from '@coveo/headless-react/ssr-commerce';
+
+export default function BreadcrumbManager() {
+  const {state, methods} = useBreadcrumbManager();
+
+  const renderBreadcrumbValue = (
+    value:
+      | CategoryFacetValue
+      | RegularFacetValue
+      | NumericFacetValue
+      | DateFacetValue
+      | LocationFacetValue,
+    type: string
+  ) => {
+    switch (type) {
+      case 'hierarchical':
+        return (value as CategoryFacetValue).path.join(' > ');
+      case 'regular':
+        return (value as RegularFacetValue).value;
+      case 'numericalRange':
+        return (
+          (value as NumericFacetValue).start +
+          ' - ' +
+          (value as NumericFacetValue).end
+        );
+      case 'dateRange':
+        return (
+          (value as DateFacetValue).start +
+          ' - ' +
+          (value as DateFacetValue).end
+        );
+      default:
+        // TODO COMHUB-291 support location breadcrumb
+        return null;
+    }
+  };
+
+  return (
+    <div>
+      <div>
+        <button onClick={methods?.deselectAll}>Clear all filters</button>
+      </div>
+      <ul>
+        {state.facetBreadcrumbs.map((facetBreadcrumb) => {
+          return (
+            <li key={`${facetBreadcrumb.facetId}-breadcrumbs`}>
+              {facetBreadcrumb.values.map((value, index) => {
+                return (
+                  <button
+                    key={`${value.value}-breadcrumb-${index}`}
+                    onClick={() => value.deselect()}
+                  >
+                    {facetBreadcrumb.facetDisplayName}:{' '}
+                    {renderBreadcrumbValue(value.value, facetBreadcrumb.type)} X
+                  </button>
+                );
+              })}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

packages/samples/headless-commerce-ssr-remix/app/components/context-dropdown.tsx

@@ -0,0 +1,76 @@
+import externalContextService from '@/external-services/external-context-service';
+import {useContext, useEngine} from '@/lib/commerce-engine';
+import {
+  CommerceEngine,
+  ContextOptions,
+  loadProductListingActions,
+  loadSearchActions,
+} from '@coveo/headless-react/ssr-commerce';
+import {LoaderFunctionArgs} from '@remix-run/node';
+import {Form, useFetcher, useLoaderData} from '@remix-run/react';
+import {useState} from 'react';
+
+export const loader = async ({}: LoaderFunctionArgs) => {
+  const contextInfo = await externalContextService.getContextInformation();
+  return contextInfo;
+};
+
+export default function ContextDropdown({
+  useCase,
+}: {
+  useCase?: 'listing' | 'search';
+}) {
+  const {state, methods} = useContext();
+  const engine = useEngine();
+  const fetcher = useFetcher();
+  const serverContext = useLoaderData<typeof loader>();
+  const [, setContext] = useState<{
+    language: string;
+    country: string;
+    currency: string;
+  }>(serverContext);
+
+  const handleChange = async (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const [language, country, currency] = e.target.value.split('-');
+    const newContext = {language, country, currency};
+    setContext(newContext);
+    methods?.setLanguage(language);
+    methods?.setCountry(country);
+    methods?.setCurrency(currency as ContextOptions['currency']);
+
+    fetcher.submit(
+      {language, country, currency},
+      {method: 'post', action: '/context/update'}
+    );
+
+    if (useCase === 'search') {
+      engine?.dispatch(
+        loadSearchActions(engine as CommerceEngine).executeSearch()
+      );
+    } else if (useCase === 'listing') {
+      engine?.dispatch(
+        loadProductListingActions(
+          engine as CommerceEngine
+        ).fetchProductListing()
+      );
+    }
+  };
+
+  return (
+    <div>
+      Context dropdown:
+      <Form method="post" action="/context/update">
+        <select
+          value={`${state.language}-${state.country}-${state.currency}`}
+          onChange={handleChange}
+        >
+          {externalContextService.getContextOptions().map((association) => (
+            <option key={association} value={association}>
+              {association}
+            </option>
+          ))}
+        </select>
+      </Form>
+    </div>
+  );
+}

packages/samples/headless-commerce-ssr-remix/app/components/did-you-mean.tsx

@@ -0,0 +1,34 @@
+import {useDidYouMean} from '@/lib/commerce-engine';
+
+export default function DidYouMean() {
+  const {state, methods} = useDidYouMean();
+
+  if (!state.hasQueryCorrection) {
+    return null;
+  }
+
+  if (state.wasAutomaticallyCorrected) {
+    return (
+      <div>
+        <p>
+          No results for <b>{state.originalQuery}</b>
+        </p>
+        <p>
+          Query was automatically corrected to <b>{state.wasCorrectedTo}</b>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <p>
+        Search for
+        <span onClick={() => methods?.applyCorrection()}>
+          <b>{state.queryCorrection.correctedQuery}</b>
+        </span>
+        instead?
+      </p>
+    </div>
+  );
+}