fix product page and fix standalone provider

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

packages/headless/src/controllers/commerce/instant-products/headless-instant-products.ssr.ts

@@ -1,4 +1,4 @@
-import {SearchAndListingControllerDefinitionWithoutProps} from '../../../app/commerce-ssr-engine/types/common.js';
+import {UniversalControllerDefinitionWithoutProps} from '../../../app/commerce-ssr-engine/types/common.js';
 import {
   InstantProducts,
   InstantProductsProps,
@@ -12,7 +12,7 @@ export type {
 export type {InstantProducts, InstantProductsProps};
 
 export interface InstantProductsDefinition
-  extends SearchAndListingControllerDefinitionWithoutProps<InstantProducts> {}
+  extends UniversalControllerDefinitionWithoutProps<InstantProducts> {}
 
 /**
  * Defines the `InstantProducts` controller for the purpose of server-side rendering.
@@ -28,6 +28,7 @@ export function defineInstantProducts(
   return {
     listing: true,
     search: true,
+    standalone: true,
     build: (engine) => buildInstantProducts(engine, props),
   };
 }

packages/headless/src/controllers/commerce/recent-queries-list/headless-recent-queries-list.ssr.ts

@@ -1,4 +1,4 @@
-import {SearchAndListingControllerDefinitionWithoutProps} from '../../../app/commerce-ssr-engine/types/common.js';
+import {UniversalControllerDefinitionWithoutProps} from '../../../app/commerce-ssr-engine/types/common.js';
 import {
   RecentQueriesList,
   RecentQueriesListProps,
@@ -13,7 +13,7 @@ export type {
 export type {RecentQueriesList, RecentQueriesListProps};
 
 export interface RecentQueriesListDefinition
-  extends SearchAndListingControllerDefinitionWithoutProps<RecentQueriesList> {}
+  extends UniversalControllerDefinitionWithoutProps<RecentQueriesList> {}
 
 /**
  * Defines the `RecentQueriesList` controller for the purpose of server-side rendering.
@@ -30,6 +30,7 @@ export function defineRecentQueriesList(
   return {
     search: true,
     listing: true,
+    standalone: true,
     build: (engine) => buildRecentQueriesList(engine, props),
   };
 }

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

@@ -2,10 +2,11 @@ import * as externalCartAPI from '@/actions/external-cart-api';
 import Cart from '@/components/cart';
 import ContextDropdown from '@/components/context-dropdown';
 import {
-  ListingProvider,
   RecommendationProvider,
+  StandaloneProvider,
 } from '@/components/providers/providers';
 import PopularBought from '@/components/recommendations/popular-bought';
+import StandaloneSearchBox from '@/components/standalone-search-box';
 import {
   recommendationEngineDefinition,
   searchEngineDefinition,
@@ -41,12 +42,13 @@ export default async function Search() {
     ['popularBought']
   );
   return (
-    <ListingProvider
+    <StandaloneProvider
       staticState={staticState}
       navigatorContext={navigatorContext.marshal}
     >
-      <div style={{display: 'flex', flexDirection: 'row'}}>
+      <div style={{display: 'flex', flexDirection: 'column'}}>
         <ContextDropdown />
+        <StandaloneSearchBox />
         <Cart />
         <RecommendationProvider
           staticState={recsStaticState}
@@ -55,7 +57,7 @@ export default async function Search() {
           <PopularBought />
         </RecommendationProvider>
       </div>
-    </ListingProvider>
+    </StandaloneProvider>
   );
 }
 

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

@@ -1,18 +1,18 @@
 import * as externalCartAPI from '@/actions/external-cart-api';
 import ContextDropdown from '@/components/context-dropdown';
-import ProductPage from '@/components/pages/product-page';
 import {StandaloneProvider} from '@/components/providers/providers';
 import StandaloneSearchBox from '@/components/standalone-search-box';
 import {searchEngineDefinition} from '@/lib/commerce-engine';
 import {NextJsNavigatorContext} from '@/lib/navigatorContextProvider';
 import {defaultContext} from '@/utils/context';
 import {headers} from 'next/headers';
-import {Suspense} from 'react';
 
 export default async function ProductDescriptionPage({
   params,
+  searchParams,
 }: {
   params: {productId: string};
+  searchParams: Promise<{[key: string]: string | string[] | undefined}>;
 }) {
   // Sets the navigator context provider to use the newly created `navigatorContext` before fetching the app static state
   const navigatorContext = new NextJsNavigatorContext(headers());
@@ -35,6 +35,11 @@ export default async function ProductDescriptionPage({
       },
     },
   });
+
+  const resolvedSearchParams = await searchParams;
+  const price = Number(resolvedSearchParams.price) ?? NaN;
+  const name = resolvedSearchParams.name ?? params.productId;
+
   return (
     <StandaloneProvider
       staticState={staticState}
@@ -43,13 +48,10 @@ export default async function ProductDescriptionPage({
       <h2>Product description page</h2>
       <ContextDropdown />
       <StandaloneSearchBox />
-      <Suspense fallback={<p>Loading...</p>}>
-        <ProductPage
-          staticState={staticState}
-          navigatorContext={navigatorContext.marshal}
-          productId={params.productId}
-        />
-      </Suspense>
+      <p>
+        {name} ({params.productId}) - ${price}
+      </p>
+      <br />
     </StandaloneProvider>
   );
 }