chore: implement a better cart in headless commerce ssr sample

packages/samples/headless-ssr-commerce/app/_components/nav-bar.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import Link from 'next/link';
+import {useEffect, useState} from 'react';
+import {
+  standaloneEngineDefinition,
+  StandaloneHydratedState,
+  StandaloneStaticState,
+} from '../_lib/commerce-engine';
+
+export default function NavBar({
+  staticState,
+}: {
+  staticState: StandaloneStaticState;
+}) {
+  const [hydratedState, setHydratedState] = useState<
+    StandaloneHydratedState | undefined
+  >(undefined);
+
+  useEffect(() => {
+    standaloneEngineDefinition
+      .hydrateStaticState({
+        searchAction: staticState.searchAction,
+      })
+      .then(({engine, controllers}) => {
+        setHydratedState({engine, controllers});
+      });
+  }, [staticState]);
+
+  const [cartState, setCartState] = useState(
+    staticState.controllers.cart.state
+  );
+
+  useEffect(
+    () =>
+      hydratedState?.controllers.cart?.subscribe(() =>
+        setCartState({...hydratedState?.controllers.cart.state})
+      ),
+    [hydratedState?.controllers.cart]
+  );
+
+  return (
+    <div style={{display: 'flex', alignItems: 'center', gap: '10px'}}>
+      TODO - The cartState Here should look at local storage instead
+      <Link href={'/search'}>Search Page</Link>
+      <Link href={'/listing'}>Listing Page</Link>
+      <Link href={'/recommendation'}>Recommendations</Link>
+      <Link href={'/cart'}>Cart ({cartState.items.length})</Link>
+    </div>
+  );
+}
+
+//Cart nav bar should use cookie or local storage

packages/samples/headless-ssr-commerce/app/_components/pages/cart-page.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import {NavigatorContext} from '@coveo/headless/ssr-commerce';
+import {useEffect, useState} from 'react';
+import {
+  StandaloneStaticState,
+  StandaloneHydratedState,
+  standaloneEngineDefinition,
+} from '../../_lib/commerce-engine';
+import Cart from '../cart';
+
+export default function CartPage({
+  staticState,
+  navigatorContext,
+}: {
+  staticState: StandaloneStaticState;
+  navigatorContext: NavigatorContext;
+}) {
+  const [hydratedState, setHydratedState] = useState<
+    StandaloneHydratedState | undefined
+  >(undefined);
+
+  // Setting the navigator context provider also in client-side before hydrating the application
+  standaloneEngineDefinition.setNavigatorContextProvider(
+    () => navigatorContext
+  );
+
+  useEffect(() => {
+    standaloneEngineDefinition
+      .hydrateStaticState({
+        searchAction: staticState.searchAction,
+      })
+      .then(({engine, controllers}) => {
+        setHydratedState({engine, controllers});
+
+        // Refreshing recommendations in the browser after hydrating the state in the client-side
+        // Recommendation refresh in the server is not supported yet.
+        controllers.popularBoughtRecs.refresh();
+        controllers.popularViewedRecs.refresh();
+      });
+  }, [staticState]);
+
+  return (
+    <>
+      <Cart
+        staticState={staticState.controllers.cart.state}
+        controller={hydratedState?.controllers.cart}
+        staticContextState={staticState.controllers.context.state}
+        contextController={hydratedState?.controllers.context}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,29 @@
+import {headers} from 'next/headers';
+import CartPage from '../_components/pages/cart-page';
+import {standaloneEngineDefinition} from '../_lib/commerce-engine';
+import {NextJsNavigatorContext} from '../_lib/navigatorContextProvider';
+
+/**
+ * This file defines a List component that uses the Coveo Headless SSR commerce library to manage its state.
+ *
+ * The Listing function is the entry point for server-side rendering (SSR).
+ */
+export default async function Page() {
+  // Sets the navigator context provider to use the newly created `navigatorContext` before fetching the app static state
+  const navigatorContext = new NextJsNavigatorContext(headers());
+  standaloneEngineDefinition.setNavigatorContextProvider(
+    () => navigatorContext
+  );
+
+  // Fetches the static state of the app with initial state (when applicable)
+  const staticState = await standaloneEngineDefinition.fetchStaticState();
+
+  return (
+    <CartPage
+      staticState={staticState}
+      navigatorContext={navigatorContext.marshal}
+    ></CartPage>
+  );
+}
+
+export const dynamic = 'force-dynamic';

packages/samples/headless-ssr-commerce/app/layout.tsx

@@ -1,22 +1,24 @@
-import Link from 'next/link';
+import NavBar from './_components/nav-bar';
+import {standaloneEngineDefinition} from './_lib/commerce-engine';
 
 export const metadata = {
   title: 'Headless SSR examples',
   description:
     'Examples of using framework agnostic @coveo/headless/ssr-commerce',
 };
 
-export default function RootLayout({children}: {children: React.ReactNode}) {
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const staticState = await standaloneEngineDefinition.fetchStaticState();
+
   return (
     <html lang="en">
       <body>
         <h1>Coveo Headless Commerce Next.js</h1>
-        <div style={{display: 'flex', alignItems: 'center', gap: '10px'}}>
-          <Link href={'/search'}>Search Page</Link>
-          <Link href={'/listing'}>Listing Page</Link>
-          <Link href={'/recommendation'}>Recommendations</Link>
-        </div>
-
+        <NavBar staticState={staticState} />
         {children}
       </body>
     </html>