change the way cart items are passed

https://coveord.atlassian.net/browse/KIT-3681

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

@@ -210,6 +210,12 @@ export type UniversalControllerDefinitionWithoutProps<
 > = ControllerDefinitionWithoutProps<CommerceEngine, TController> &
   UniversalController;
 
+export type UniversalControllerDefinitionWithProps<
+  TController extends Controller,
+  TProps,
+> = ControllerDefinitionWithProps<CommerceEngine, TController, TProps> &
+  UniversalController;
+
 export type SearchAndListingControllerDefinitionWithoutProps<
   TController extends Controller,
 > = ControllerDefinitionWithoutProps<CommerceEngine, TController> &

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

@@ -1,11 +1,15 @@
-import {UniversalControllerDefinitionWithoutProps} from '../../../../app/commerce-ssr-engine/types/common.js';
-import {Cart, buildCart, CartProps, CartInitialState} from './headless-cart.js';
+import {UniversalControllerDefinitionWithProps} from '../../../../app/commerce-ssr-engine/types/common.js';
+import {Cart, buildCart, CartInitialState} from './headless-cart.js';
 
 export type {CartState, CartItem, CartProps} from './headless-cart.js';
 export type {Cart, CartInitialState};
 
+export interface CartBuildProps {
+  initialState: CartInitialState;
+}
+
 export interface CartDefinition
-  extends UniversalControllerDefinitionWithoutProps<Cart> {}
+  extends UniversalControllerDefinitionWithProps<Cart, CartBuildProps> {}
 
 /**
  * Defines a `Cart` controller instance.
@@ -15,11 +19,12 @@ export interface CartDefinition
  *
  * @internal
  */
-export function defineCart(props: CartProps = {}): CartDefinition {
+export function defineCart(): CartDefinition {
   return {
     listing: true,
     search: true,
     standalone: true,
-    build: (engine) => buildCart(engine, props),
+    buildWithProps: (engine, props) =>
+      buildCart(engine, {initialState: props.initialState}),
   };
 }

packages/headless/src/ssr-commerce.index.ts

@@ -192,6 +192,7 @@ export type {
   CartItem,
   CartProps,
   CartState,
+  CartBuildProps,
   CartDefinition,
 } from './controllers/commerce/context/cart/headless-cart.ssr.js';
 export {defineCart} from './controllers/commerce/context/cart/headless-cart.ssr.js';

packages/samples/headless-ssr-commerce/app/listing/page.tsx

@@ -8,6 +8,7 @@ import {Recommendations} from '@/components/recommendation-list';
 import Sort from '@/components/sort';
 import StandaloneSearchBox from '@/components/standalone-search-box';
 import Summary from '@/components/summary';
+import getCart from '@/lib/cart';
 import {listingEngineDefinition} from '@/lib/commerce-engine';
 import {NextJsNavigatorContext} from '@/lib/navigatorContextProvider';
 import {headers} from 'next/headers';
@@ -22,8 +23,13 @@ export default async function Listing() {
   const navigatorContext = new NextJsNavigatorContext(headers());
   listingEngineDefinition.setNavigatorContextProvider(() => navigatorContext);
 
+  // Fetches the cart items from an external service
+  const items = await getCart();
+
   // Fetches the static state of the app with initial state (when applicable)
-  const staticState = await listingEngineDefinition.fetchStaticState();
+  const staticState = await listingEngineDefinition.fetchStaticState({
+    controllers: {cart: {initialState: {items}}},
+  });
 
   //At this point in the app, this is the only part that is in the server side
 

packages/samples/headless-ssr-commerce/app/products/[productId]/page.tsx

@@ -1,4 +1,5 @@
 import ProductPage from '@/components/pages/product-page';
+import getCart from '@/lib/cart';
 import {searchEngineDefinition} from '@/lib/commerce-engine';
 import {NextJsNavigatorContext} from '@/lib/navigatorContextProvider';
 import {headers} from 'next/headers';
@@ -13,8 +14,13 @@ export default async function ProductDescriptionPage({
   const navigatorContext = new NextJsNavigatorContext(headers());
   searchEngineDefinition.setNavigatorContextProvider(() => navigatorContext);
 
+  // Fetches the cart items from an external service
+  const items = await getCart();
+
   // Fetches the static state of the app with initial state (when applicable)
-  const staticState = await searchEngineDefinition.fetchStaticState();
+  const staticState = await searchEngineDefinition.fetchStaticState({
+    controllers: {cart: {initialState: {items}}},
+  });
   return (
     <>
       <h2>Product description page</h2>

packages/samples/headless-ssr-commerce/app/search/page.tsx

@@ -7,6 +7,7 @@ import SearchBox from '@/components/search-box';
 import ShowMore from '@/components/show-more';
 import Summary from '@/components/summary';
 import Triggers from '@/components/triggers/triggers';
+import getCart from '@/lib/cart';
 import {searchEngineDefinition} from '@/lib/commerce-engine';
 import {NextJsNavigatorContext} from '@/lib/navigatorContextProvider';
 import {headers} from 'next/headers';
@@ -16,8 +17,13 @@ export default async function Search() {
   const navigatorContext = new NextJsNavigatorContext(headers());
   searchEngineDefinition.setNavigatorContextProvider(() => navigatorContext);
 
+  // Fetches the cart items from an external service
+  const items = await getCart();
+
   // Fetches the static state of the app with initial state (when applicable)
-  const staticState = await searchEngineDefinition.fetchStaticState();
+  const staticState = await searchEngineDefinition.fetchStaticState({
+    controllers: {cart: {initialState: {items}}},
+  });
   return (
     <SearchProvider
       staticState={staticState}

packages/samples/headless-ssr-commerce/components/pages/product-page.tsx

@@ -37,6 +37,11 @@ export default function ProductPage(props: IProductPageProps) {
     standaloneEngineDefinition
       .hydrateStaticState({
         searchAction: staticState.searchAction,
+        controllers: {
+          cart: {
+            initialState: {items: staticState.controllers.cart.state.items},
+          },
+        },
       })
       .then(({engine, controllers}) => {
         setHydratedState({engine, controllers});

packages/samples/headless-ssr-commerce/components/providers/listing-provider.tsx

@@ -29,6 +29,11 @@ export default function ListingProvider({
     listingEngineDefinition
       .hydrateStaticState({
         searchAction: staticState.searchAction,
+        controllers: {
+          cart: {
+            initialState: {items: staticState.controllers.cart.state.items},
+          },
+        },
       })
       .then(({engine, controllers}) => {
         setHydratedState({engine, controllers});

packages/samples/headless-ssr-commerce/components/providers/search-provider.tsx

@@ -29,6 +29,11 @@ export default function SearchProvider({
     searchEngineDefinition
       .hydrateStaticState({
         searchAction: staticState.searchAction,
+        controllers: {
+          cart: {
+            initialState: {items: staticState.controllers.cart.state.items},
+          },
+        },
       })
       .then(({engine, controllers}) => {
         setHydratedState({engine, controllers});

packages/samples/headless-ssr-commerce/lib/cart.ts

@@ -0,0 +1,6 @@
+import {CartItem} from '@coveo/headless-react/ssr-commerce';
+
+export default async function getCart(): Promise<CartItem[]> {
+  'use server';
+  return [{name: 'item1', price: 10, quantity: 1, productId: 'xxx'}];
+}