fix(headless-ssr-commerce): fix client side recommendation refresh with a productId

packages/headless-react/src/ssr-commerce/providers.tsx

@@ -9,11 +9,14 @@ import {
   InferControllerStaticStateMapFromDefinitionsWithSolutionType,
   InferHydratedState,
   NavigatorContext,
+  ControllerWithKind,
+  Kind,
   SolutionType,
   Context,
   HydrateStaticStateOptions,
   ParameterManager,
   Parameters,
+  Recommendations,
 } from '@coveo/headless/ssr-commerce';
 import {PropsWithChildren, useEffect, useState} from 'react';
 import {ReactCommerceEngineDefinition} from './commerce-engine.js';
@@ -48,24 +51,41 @@ export function buildProviderWithDefinition<
       const {searchActions, controllers} = staticState;
       const hydrateArguments: ControllerPropsMap = {};
 
-      if ('parameterManager' in controllers) {
-        hydrateArguments.parameterManager = {
-          initialState: {
-            parameters: (
-              controllers.parameterManager as ParameterManager<Parameters>
-            ).state.parameters,
-          },
-        };
-      }
+      for (const [key, controller] of Object.entries(controllers)) {
+        const typedController = controller as ControllerWithKind;
 
-      if ('cart' in controllers) {
-        hydrateArguments.cart = {
-          initialState: {items: (controllers.cart as Cart).state.items},
-        };
-      }
+        switch (typedController._kind) {
+          case Kind.Cart:
+            hydrateArguments[key] = {
+              initialState: {
+                items: (controllers as Record<string, Cart>)[key].state.items,
+              },
+            };
+            break;
+
+          case Kind.Context:
+            hydrateArguments[key] = (controllers as Record<string, Context>)[
+              key
+            ].state;
+            break;
+
+          case Kind.ParameterManager:
+            hydrateArguments[key] = {
+              initialState: {
+                parameters: (
+                  controllers as Record<string, ParameterManager<Parameters>>
+                )[key].state.parameters,
+              },
+            };
+            break;
 
-      if ('context' in controllers) {
-        hydrateArguments.context = (controllers.context as Context).state;
+          case Kind.Recommendations:
+            hydrateArguments[key] = {
+              productId: (controllers as Record<string, Recommendations>)[key]
+                .state.productId,
+            };
+            break;
+        }
       }
 
       const args: HydrateStaticStateOptions<UnknownAction> &

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

@@ -11,6 +11,7 @@ import {
   ControllerDefinition,
   ControllerDefinitionOption,
   ControllerDefinitionsMap,
+  ControllerWithKind,
   EngineStaticState,
   InferControllerFromDefinition,
   InferControllerPropsFromDefinition,
@@ -19,6 +20,12 @@ import {
   SolutionType,
 } from './types/common.js';
 
+function hasKindProperty(
+  controller: Controller | ControllerWithKind
+): controller is ControllerWithKind {
+  return '_kind' in controller;
+}
+
 export function createStaticState<TSearchAction extends UnknownAction>({
   searchActions,
   controllers,
@@ -32,6 +39,7 @@ export function createStaticState<TSearchAction extends UnknownAction>({
   return {
     controllers: mapObject(controllers, (controller) => ({
       state: clone(controller.state),
+      ...(hasKindProperty(controller) && {_kind: controller._kind}),
     })) as InferControllerStaticStateMapFromControllers<ControllersMap>,
     searchActions: searchActions.map((action) => clone(action)),
   };

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

@@ -15,6 +15,7 @@ import type {
   HasOptionalKeys,
 } from '../../ssr-engine/types/common.js';
 import {SSRCommerceEngine} from '../factories/build-factory.js';
+import {Kind} from './kind.js';
 
 export type {
   EngineDefinitionBuildResult,
@@ -59,6 +60,10 @@ export interface ControllerDefinitionWithoutProps<
   build(engine: SSRCommerceEngine, solutionType?: SolutionType): TController;
 }
 
+export interface ControllerWithKind extends Controller {
+  _kind: Kind;
+}
+
 export interface ControllerDefinitionWithProps<
   TController extends Controller,
   TProps,
@@ -75,7 +80,7 @@ export interface ControllerDefinitionWithProps<
     engine: SSRCommerceEngine,
     props: TProps,
     solutionType?: SolutionType
-  ): TController;
+  ): TController & ControllerWithKind;
 }
 
 export interface EngineStaticState<

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

@@ -0,0 +1,6 @@
+export enum Kind {
+  Cart = 'CART',
+  Context = 'CONTEXT',
+  ParameterManager = 'PARAMETER_MANAGER',
+  Recommendations = 'RECOMMENDATIONS',
+}

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

@@ -1,4 +1,5 @@
 import {UniversalControllerDefinitionWithProps} from '../../../../app/commerce-ssr-engine/types/common.js';
+import {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';
@@ -25,7 +26,11 @@ export function defineCart(): CartDefinition {
     search: true,
     standalone: true,
     recommendation: true,
-    buildWithProps: (engine, props) =>
-      buildCart(engine, {initialState: props.initialState}),
+    buildWithProps: (engine, props) => {
+      return {
+        ...buildCart(engine, {initialState: props.initialState}),
+        _kind: Kind.Cart,
+      };
+    },
   };
 }

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

@@ -1,4 +1,5 @@
 import {UniversalControllerDefinitionWithProps} from '../../../app/commerce-ssr-engine/types/common.js';
+import {Kind} from '../../../app/commerce-ssr-engine/types/kind.js';
 import {
   Context,
   buildContext,
@@ -27,6 +28,11 @@ export function defineContext(): ContextDefinition {
     search: true,
     standalone: true,
     recommendation: true,
-    buildWithProps: (engine, props) => buildContext(engine, {options: props}),
+    buildWithProps: (engine, props) => {
+      return {
+        ...buildContext(engine, {options: props}),
+        _kind: Kind.Context,
+      };
+    },
   };
 }

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

@@ -2,6 +2,7 @@ import {
   recommendationInternalOptionKey,
   RecommendationOnlyControllerDefinitionWithProps,
 } from '../../../app/commerce-ssr-engine/types/common.js';
+import {Kind} from '../../../app/commerce-ssr-engine/types/kind.js';
 import {
   RecommendationsOptions,
   RecommendationsState,
@@ -48,9 +49,19 @@ export function defineRecommendations(
       options: Omit<RecommendationsOptions, 'slotId'>
     ) => {
       const staticOptions = props.options;
-      return buildRecommendations(engine, {
+      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};
     },
   };
 }

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

@@ -84,6 +84,7 @@ export interface RecommendationsState {
   error: CommerceAPIErrorStatusResponse | null;
   isLoading: boolean;
   responseId: string;
+  productId: string;
 }
 
 export interface RecommendationsOptions {
@@ -133,7 +134,7 @@ export function buildRecommendations(
   const {dispatch} = engine;
 
   const {slotId, productId} = props.options;
-  dispatch(registerRecommendationsSlot({slotId}));
+  dispatch(registerRecommendationsSlot({slotId, productId}));
 
   const recommendationStateSelector = createSelector(
     (state: CommerceEngineState) => state.recommendations[slotId]!,

packages/headless/src/features/commerce/recommendations/recommendations-actions.ts

@@ -133,6 +133,7 @@ export const fetchMoreRecommendations = createAsyncThunk<
 
 export interface SlotIdPayload {
   slotId: string;
+  productId?: string;
 }
 
 export type RegisterRecommendationsSlotPayload = SlotIdPayload;

packages/headless/src/features/commerce/recommendations/recommendations-slice.ts

@@ -27,12 +27,13 @@ export const recommendationsReducer = createReducer(
     builder
       .addCase(registerRecommendationsSlot, (state, action) => {
         const slotId = action.payload.slotId;
+        const productId = action.payload.productId;
 
         if (slotId in state) {
           return;
         }
 
-        state[slotId] = buildRecommendationsSlice();
+        state[slotId] = buildRecommendationsSlice({productId});
       })
       .addCase(fetchRecommendations.rejected, (state, action) => {
         handleError(state, action.meta.arg.slotId, action.payload);

packages/headless/src/features/commerce/recommendations/recommendations-state.ts

@@ -7,6 +7,7 @@ export interface RecommendationsSlice {
   isLoading: boolean;
   responseId: string;
   products: Product[];
+  productId: string;
 }
 
 /**
@@ -25,4 +26,5 @@ export const getRecommendationsSliceInitialState =
     isLoading: false,
     responseId: '',
     products: [],
+    productId: '',
   });

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

@@ -104,7 +104,9 @@ export type {
   EngineDefinitionControllersPropsOption,
   HydratedState,
   OptionsTuple,
+  ControllerWithKind,
 } from './app/commerce-ssr-engine/types/common.js';
+export {Kind} from './app/commerce-ssr-engine/types/kind.js';
 export type {
   EngineDefinition,
   InferStaticState,

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

@@ -1,8 +1,15 @@
 import * as externalCartAPI from '@/actions/external-cart-api';
 import ContextDropdown from '@/components/context-dropdown';
-import {StandaloneProvider} from '@/components/providers/providers';
+import {
+  RecommendationProvider,
+  StandaloneProvider,
+} from '@/components/providers/providers';
+import ViewedTogether from '@/components/recommendations/viewed-together';
 import StandaloneSearchBox from '@/components/standalone-search-box';
-import {standaloneEngineDefinition} from '@/lib/commerce-engine';
+import {
+  recommendationEngineDefinition,
+  standaloneEngineDefinition,
+} from '@/lib/commerce-engine';
 import {NextJsNavigatorContext} from '@/lib/navigatorContextProvider';
 import {defaultContext} from '@/utils/context';
 import {headers} from 'next/headers';
@@ -38,6 +45,23 @@ export default async function ProductDescriptionPage({
     },
   });
 
+  const recsStaticState = await recommendationEngineDefinition.fetchStaticState(
+    {
+      controllers: {
+        viewedTogether: {enabled: true, productId: params.productId},
+        cart: {initialState: {items}},
+        context: {
+          language: defaultContext.language,
+          country: defaultContext.country,
+          currency: defaultContext.currency,
+          view: {
+            url: `https://sports.barca.group/products/${params.productId}`,
+          },
+        },
+      },
+    }
+  );
+
   const resolvedSearchParams = await searchParams;
   const price = Number(resolvedSearchParams.price) ?? NaN;
   const name = resolvedSearchParams.name ?? params.productId;
@@ -54,6 +78,13 @@ export default async function ProductDescriptionPage({
         {name} ({params.productId}) - ${price}
       </p>
       <br />
+
+      <RecommendationProvider
+        staticState={recsStaticState}
+        navigatorContext={navigatorContext.marshal}
+      >
+        <ViewedTogether />
+      </RecommendationProvider>
     </StandaloneProvider>
   );
 }

packages/samples/headless-ssr-commerce/components/recommendations/viewed-together.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import {useViewedTogether} from '@/lib/commerce-engine';
+import ProductButtonWithImage from '../product-button-with-image';
+
+export default function ViewedTogether() {
+  const {state, methods} = useViewedTogether();
+
+  return (
+    <>
+      <ul>
+        <h3>{state.headline}</h3>
+        {state.products.map((product) => (
+          <li key={product.ec_product_id}>
+            <ProductButtonWithImage methods={methods} product={product} />
+          </li>
+        ))}
+        <button onClick={() => methods?.refresh()}>Refresh</button>
+      </ul>
+    </>
+  );
+}

packages/samples/headless-ssr-commerce/lib/commerce-engine-config.ts

@@ -41,6 +41,11 @@ export default {
         slotId: 'af4fb7ba-6641-4b67-9cf9-be67e9f30174',
       },
     }),
+    viewedTogether: defineRecommendations({
+      options: {
+        slotId: 'ff5d8804-d398-4dd5-b68c-6a729c66454b',
+      },
+    }),
     cart: defineCart(),
     searchBox: defineSearchBox(),
     context: defineContext(),

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

@@ -21,6 +21,7 @@ export const {
   usePagination,
   usePopularBought,
   usePopularViewed,
+  useViewedTogether,
   useProductView,
   useQueryTrigger,
   useRecentQueriesList,