recs properly refresh with the productId

https://coveord.atlassian.net/browse/KIT-3801
coveo · Dec 16, 2024 · e85ce25 · e85ce25
1 parent e944b99
commit e85ce25
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 32 deletions.
diff --git a/packages/headless-react/src/ssr-commerce/providers.tsx b/packages/headless-react/src/ssr-commerce/providers.tsx
@@ -72,20 +72,10 @@ export function buildProviderWithDefinition(looseDefinition: LooseDefinition) {
             break;
 
           case Kind.Recommendations:
-            // if (
-            //   //@ts-expect-error normal
-            //   controller.state.productId &&
-            //   //@ts-expect-error normal
-            //   controller.state.productId !== ''
-            // ) {
-            //   console.log('controller', controller);
-            // }
-            // hydrateControllers[key] = {
-            //   options: {
-            //     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            //     productId: (controllers as any)[key].state.productId,
-            //   },
-            // };
+            hydrateControllers[key] = {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              productId: (controllers as any)[key].state.productId,
+            };
             break;
 
           default:

diff --git a/packages/headless/src/controllers/commerce/recommendations/headless-recommendations.ssr.ts b/packages/headless/src/controllers/commerce/recommendations/headless-recommendations.ssr.ts
@@ -4,8 +4,6 @@ import {
 } from '../../../app/commerce-ssr-engine/types/common.js';
 import {Kind} from '../../../app/commerce-ssr-engine/types/kind.js';
 import {ControllerWithKind} from '../../../app/ssr-engine/types/common.js';
-// import {Kind} from '../../../app/commerce-ssr-engine/types/kind.js';
-// import {ControllerWithKind} from '../../../app/ssr-engine/types/common.js';
 import {
   RecommendationsOptions,
   RecommendationsState,
@@ -57,12 +55,19 @@ export function defineRecommendations(
       options: Omit<RecommendationsOptions, 'slotId'>
     ) => {
       const staticOptions = props.options;
-      return {
-        ...buildRecommendations(engine, {
-          options: {...staticOptions, ...options},
-        }),
-        _kind: Kind.Recommendations,
-      };
+      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};
     },
   };
 }
diff --git a/packages/headless/src/controllers/commerce/recommendations/headless-recommendations.ts b/packages/headless/src/controllers/commerce/recommendations/headless-recommendations.ts
@@ -84,7 +84,7 @@ export interface RecommendationsState {
   error: CommerceAPIErrorStatusResponse | null;
   isLoading: boolean;
   responseId: string;
-  // productId: string;
+  productId: string;
 }
 
 export interface RecommendationsOptions {
@@ -134,8 +134,7 @@ export function buildRecommendations(
   const {dispatch} = engine;
 
   const {slotId, productId} = props.options;
-  //Send productId here
-  dispatch(registerRecommendationsSlot({slotId}));
+  dispatch(registerRecommendationsSlot({slotId, productId}));
 
   const recommendationStateSelector = createSelector(
     (state: CommerceEngineState) => state.recommendations[slotId]!,

diff --git a/packages/headless/src/features/commerce/recommendations/recommendations-actions.ts b/packages/headless/src/features/commerce/recommendations/recommendations-actions.ts
@@ -133,7 +133,7 @@ export const fetchMoreRecommendations = createAsyncThunk<
 
 export interface SlotIdPayload {
   slotId: string;
-  // productId?: string;
+  productId?: string;
 }
 
 export type RegisterRecommendationsSlotPayload = SlotIdPayload;

diff --git a/packages/headless/src/features/commerce/recommendations/recommendations-slice.ts b/packages/headless/src/features/commerce/recommendations/recommendations-slice.ts
@@ -27,14 +27,13 @@ export const recommendationsReducer = createReducer(
     builder
       .addCase(registerRecommendationsSlot, (state, action) => {
         const slotId = action.payload.slotId;
-        // const productId = action.payload.productId;
+        const productId = action.payload.productId;
 
         if (slotId in state) {
           return;
         }
 
-        //send productId here
-        state[slotId] = buildRecommendationsSlice();
+        state[slotId] = buildRecommendationsSlice({productId});
       })
       .addCase(fetchRecommendations.rejected, (state, action) => {
         handleError(state, action.meta.arg.slotId, action.payload);

diff --git a/packages/headless/src/features/commerce/recommendations/recommendations-state.ts b/packages/headless/src/features/commerce/recommendations/recommendations-state.ts
@@ -7,7 +7,7 @@ export interface RecommendationsSlice {
   isLoading: boolean;
   responseId: string;
   products: Product[];
-  // productId: string;
+  productId: string;
 }
 
 /**
@@ -26,5 +26,5 @@ export const getRecommendationsSliceInitialState =
     isLoading: false,
     responseId: '',
     products: [],
-    // productId: '',
+    productId: '',
   });
diff --git a/packages/samples/headless-ssr-commerce/components/recommendations/popular-viewed.tsx b/packages/samples/headless-ssr-commerce/components/recommendations/popular-viewed.tsx
@@ -9,7 +9,6 @@ export default function PopularViewed() {
   return (
     <>
       <ul>
-        This is a recommendation
         <h3>{state.headline}</h3>
         {state.products.map((product) => (
           <li key={product.ec_product_id}>