fix(headless/ssr-commerce): standalone search box only for listing & …

…standalone https://coveord.atlassian.net/browse/KIT-3762
coveo · Nov 28, 2024 · b9de16f · b9de16f
1 parent dfba10c
commit b9de16f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/packages/headless/src/app/commerce-ssr-engine/types/common.ts b/packages/headless/src/app/commerce-ssr-engine/types/common.ts
@@ -181,6 +181,17 @@ interface SearchAndListingController {
   [SolutionType.listing]: true;
 }
 
+interface ListingAndStandaloneController {
+  /**
+   * @internal
+   */
+  [SolutionType.listing]: true;
+  /**
+   * @internal
+   */
+  [SolutionType.standalone]: true;
+}
+
 export type SearchOnlyControllerDefinitionWithoutProps<
   TController extends Controller,
 > = ControllerDefinitionWithoutProps<TController> & SearchOnlyController;
@@ -190,6 +201,11 @@ export type SearchOnlyControllerDefinitionWithProps<
   TProps,
 > = ControllerDefinitionWithProps<TController, TProps> & SearchOnlyController;
 
+export type ListingAndStandaloneControllerWithoutProps<
+  TController extends Controller,
+> = ControllerDefinitionWithoutProps<TController> &
+  ListingAndStandaloneController;
+
 export type ListingOnlyControllerDefinitionWithoutProps<
   TController extends Controller,
 > = ControllerDefinitionWithoutProps<TController> & ListingOnlyController;

diff --git a/...less/src/controllers/commerce/standalone-search-box/headless-standalone-search-box.ssr.ts b/...less/src/controllers/commerce/standalone-search-box/headless-standalone-search-box.ssr.ts
@@ -1,4 +1,4 @@
-import {NonRecommendationControllerDefinitionWithoutProps} from '../../../app/commerce-ssr-engine/types/common.js';
+import {ListingAndStandaloneControllerWithoutProps} from '../../../app/commerce-ssr-engine/types/common.js';
 import {StandaloneSearchBoxProps} from '../../standalone-search-box/headless-standalone-search-box.js';
 import {
   StandaloneSearchBox,
@@ -10,7 +10,7 @@ export type {StandaloneSearchBoxState} from './headless-standalone-search-box.js
 export type {StandaloneSearchBox, StandaloneSearchBoxProps};
 
 export interface StandaloneSearchBoxDefinition
-  extends NonRecommendationControllerDefinitionWithoutProps<StandaloneSearchBox> {}
+  extends ListingAndStandaloneControllerWithoutProps<StandaloneSearchBox> {}
 
 /**
  * Defines the `StandaloneSearchBox` controller for the purpose of server-side rendering.
@@ -26,7 +26,6 @@ export function defineStandaloneSearchBox(
 ): StandaloneSearchBoxDefinition {
   return {
     listing: true,
-    search: true,
     standalone: true,
     build: (engine) => buildStandaloneSearchBox(engine, props),
   };

diff --git a/packages/samples/headless-ssr-commerce/app/cart/page.tsx b/packages/samples/headless-ssr-commerce/app/cart/page.tsx
@@ -9,7 +9,7 @@ import PopularBought from '@/components/recommendations/popular-bought';
 import StandaloneSearchBox from '@/components/standalone-search-box';
 import {
   recommendationEngineDefinition,
-  searchEngineDefinition,
+  standaloneEngineDefinition,
 } from '@/lib/commerce-engine';
 import {NextJsNavigatorContext} from '@/lib/navigatorContextProvider';
 import {defaultContext} from '@/utils/context';
@@ -18,13 +18,15 @@ import {headers} from 'next/headers';
 export default async function Search() {
   // Sets the navigator context provider to use the newly created `navigatorContext` before fetching the app static state
   const navigatorContext = new NextJsNavigatorContext(headers());
-  searchEngineDefinition.setNavigatorContextProvider(() => navigatorContext);
+  standaloneEngineDefinition.setNavigatorContextProvider(
+    () => navigatorContext
+  );
 
   // Fetches the cart items from an external service
   const items = await externalCartAPI.getCart();
 
   // Fetches the static state of the app with initial state (when applicable)
-  const staticState = await searchEngineDefinition.fetchStaticState({
+  const staticState = await standaloneEngineDefinition.fetchStaticState({
     controllers: {
       cart: {initialState: {items}},
       context: {

diff --git a/packages/samples/headless-ssr-commerce/app/products/[productId]/page.tsx b/packages/samples/headless-ssr-commerce/app/products/[productId]/page.tsx
@@ -2,7 +2,7 @@ import * as externalCartAPI from '@/actions/external-cart-api';
 import ContextDropdown from '@/components/context-dropdown';
 import {StandaloneProvider} from '@/components/providers/providers';
 import StandaloneSearchBox from '@/components/standalone-search-box';
-import {searchEngineDefinition} from '@/lib/commerce-engine';
+import {standaloneEngineDefinition} from '@/lib/commerce-engine';
 import {NextJsNavigatorContext} from '@/lib/navigatorContextProvider';
 import {defaultContext} from '@/utils/context';
 import {headers} from 'next/headers';
@@ -16,13 +16,15 @@ export default async function ProductDescriptionPage({
 }) {
   // Sets the navigator context provider to use the newly created `navigatorContext` before fetching the app static state
   const navigatorContext = new NextJsNavigatorContext(headers());
-  searchEngineDefinition.setNavigatorContextProvider(() => navigatorContext);
+  standaloneEngineDefinition.setNavigatorContextProvider(
+    () => navigatorContext
+  );
 
   // Fetches the cart items from an external service
   const items = await externalCartAPI.getCart();
 
   // Fetches the static state of the app with initial state (when applicable)
-  const staticState = await searchEngineDefinition.fetchStaticState({
+  const staticState = await standaloneEngineDefinition.fetchStaticState({
     controllers: {
       cart: {initialState: {items}},
       context: {