fix(headless-react): fix error when using keys other than their name for WithProps controllers (#4783)

alexprudhomme · web-flow · commit 56a5d92f99b3 · 2024-12-19T16:40:10.000Z
https://coveord.atlassian.net/browse/KIT-3786 ### Problem Right now we have "cart" and "context" hard coded. This means that if users use another key as "cart" for their cart implementation. Lets say we have `myCart: defineCart() ` This condition would fail ` if ('cart' in controllers) { ` ### Solution This PR fixes that problem by adding a _kind property to certain controllers and then changing the condition to `if (controller._kind == Kind.Cart) // where Kind is an enum`
diff --git a/packages/headless-react/src/ssr-commerce/providers.tsx b/packages/headless-react/src/ssr-commerce/providers.tsx
@@ -9,18 +9,30 @@ import {
   InferControllerStaticStateMapFromDefinitionsWithSolutionType,
   InferHydratedState,
   NavigatorContext,
+  ControllerWithKind,
+  Kind,
   SolutionType,
   Context,
   HydrateStaticStateOptions,
   ParameterManager,
-  Parameters,
+  Parameters, // Recommendations,
 } from '@coveo/headless/ssr-commerce';
 import {PropsWithChildren, useEffect, useState} from 'react';
 import {ReactCommerceEngineDefinition} from './commerce-engine.js';
 
 type ControllerPropsMap = {[customName: string]: unknown};
 type UnknownAction = {type: string};
 
+function getController<T extends Controller>(
+  controllers: InferControllerStaticStateMapFromDefinitionsWithSolutionType<
+    ControllerDefinitionsMap<Controller>,
+    SolutionType
+  >,
+  key: string
+) {
+  return controllers[key] as T;
+}
+
 export function buildProviderWithDefinition<
   TControllers extends ControllerDefinitionsMap<Controller>,
   TSolutionType extends SolutionType,
@@ -48,24 +60,40 @@ 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: {
+            const cart = getController<Cart>(controllers, key);
+            hydrateArguments[key] = {
+              initialState: {
+                items: cart.state.items,
+              },
+            };
+            break;
+          }
+          case Kind.Context: {
+            const context = getController<Context>(controllers, key);
+            hydrateArguments[key] = context.state;
+            break;
+          }
 
-      if ('context' in controllers) {
-        hydrateArguments.context = (controllers.context as Context).state;
+          case Kind.ParameterManager: {
+            const parameterManager = getController<
+              ParameterManager<Parameters>
+            >(controllers, key);
+            hydrateArguments[key] = {
+              initialState: {
+                parameters: parameterManager.state.parameters,
+              },
+            };
+            break;
+          }
+          case Kind.Recommendations:
+            //KIT-3801: Done here
+            break;
+        }
       }
 
       const args: HydrateStaticStateOptions<UnknownAction> &
diff --git a/packages/headless/src/app/commerce-ssr-engine/common.ts b/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)),
   };
diff --git a/packages/headless/src/app/commerce-ssr-engine/types/common.ts b/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<
diff --git a/packages/headless/src/app/commerce-ssr-engine/types/kind.ts b/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',
+}
diff --git a/packages/headless/src/controllers/commerce/context/cart/headless-cart.ssr.ts b/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,
+      };
+    },
   };
 }
diff --git a/packages/headless/src/controllers/commerce/context/headless-context.ssr.ts b/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,
+      };
+    },
   };
 }
diff --git a/packages/headless/src/controllers/commerce/recommendations/headless-recommendations.ssr.ts b/packages/headless/src/controllers/commerce/recommendations/headless-recommendations.ssr.ts
@@ -43,6 +43,7 @@ export function defineRecommendations(
     [recommendationInternalOptionKey]: {
       ...props.options,
     },
+    //@ts-expect-error fixed in KIT-3801
     buildWithProps: (
       engine,
       options: Omit<RecommendationsOptions, 'slotId'>
diff --git a/packages/headless/src/ssr-commerce.index.ts b/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,
diff --git a/packages/samples/headless-ssr-commerce/e2e/cart/cart.spec.ts b/packages/samples/headless-ssr-commerce/e2e/cart/cart.spec.ts
@@ -77,27 +77,34 @@ test.describe('default', () => {
     test('should increase the quantity', async ({cart}) => {
       const item = cart.items.first();
 
-      const quantity = parseInt(
-        (await (await cart.getItemQuantity(item)).textContent()) || ''
-      );
-
-      expect(quantity).toBe(initialItemQuantity + 1);
+      await expect
+        .poll(async () => {
+          return parseInt(
+            (await (await cart.getItemQuantity(item)).textContent()) || ''
+          );
+        })
+        .toBe(initialItemQuantity + 1);
     });
 
     test('should increase the total price', async ({cart}) => {
       const item = cart.items.first();
 
-      const totalPrice = parseInt(
-        (await (await cart.getItemTotalPrice(item)).textContent()) || ''
-      );
-
-      expect(totalPrice).toBe(initialItemPrice * (initialItemQuantity + 1));
+      await expect
+        .poll(async () => {
+          return parseInt(
+            (await (await cart.getItemTotalPrice(item)).textContent()) || ''
+          );
+        })
+        .toBe(initialItemPrice * (initialItemQuantity + 1));
     });
 
     test('should increase the cart total', async ({cart}) => {
-      const total = parseInt((await cart.total.textContent()) || '');
-
-      expect(total).toBe(initialCartTotal + initialItemPrice);
+      await expect
+        .poll(async () => {
+          const total = parseInt((await cart.total.textContent()) || '');
+          return total;
+        })
+        .toBe(initialCartTotal + initialItemPrice);
     });
   });
 
@@ -124,27 +131,36 @@ test.describe('default', () => {
       test('should decrease the quantity', async ({cart}) => {
         const item = cart.items.nth(1);
 
-        const quantity = parseInt(
-          (await (await cart.getItemQuantity(item)).textContent()) || ''
-        );
-
-        expect(quantity).toBe(initialItemQuantity - 1);
+        await expect
+          .poll(async () => {
+            const quantity = parseInt(
+              (await (await cart.getItemQuantity(item)).textContent()) || ''
+            );
+            return quantity;
+          })
+          .toBe(initialItemQuantity - 1);
       });
 
       test('should decrease the total price', async ({cart}) => {
         const item = cart.items.nth(1);
 
-        const totalPrice = parseInt(
-          (await (await cart.getItemTotalPrice(item)).textContent()) || ''
-        );
-
-        expect(totalPrice).toBe(initialItemPrice * (initialItemQuantity - 1));
+        await expect
+          .poll(async () => {
+            const totalPrice = parseInt(
+              (await (await cart.getItemTotalPrice(item)).textContent()) || ''
+            );
+            return totalPrice;
+          })
+          .toBe(initialItemPrice * (initialItemQuantity - 1));
       });
 
       test('should decrease the cart total', async ({cart}) => {
-        const total = parseInt((await cart.total.textContent()) || '');
-
-        expect(total).toBe(initialCartTotal - initialItemPrice);
+        await expect
+          .poll(async () => {
+            const total = parseInt((await cart.total.textContent()) || '');
+            return total;
+          })
+          .toBe(initialCartTotal - initialItemPrice);
       });
 
       test('should not remove the item', async ({cart}) => {
@@ -174,15 +190,21 @@ test.describe('default', () => {
       });
 
       test('should remove the item', async ({cart}) => {
-        const cartItemsCount = await cart.items.count();
-
-        expect(cartItemsCount).toBe(initialCartItemsCount - 1);
+        await expect
+          .poll(async () => {
+            const cartItemsCount = await cart.items.count();
+            return cartItemsCount;
+          })
+          .toBe(initialCartItemsCount - 1);
       });
 
       test('should decrease the cart total', async ({cart}) => {
-        const total = parseInt((await cart.total.textContent()) || '');
-
-        expect(total).toBe(initialCartTotal - initialItemPrice * 1);
+        await expect
+          .poll(async () => {
+            const total = parseInt((await cart.total.textContent()) || '');
+            return total;
+          })
+          .toBe(initialCartTotal - initialItemPrice * 1);
       });
     });
   });
@@ -196,9 +218,11 @@ test.describe('default', () => {
     });
 
     test('should remove the item', async ({cart}) => {
-      const cartItemsCount = await cart.items.count();
-
-      expect(cartItemsCount).toBe(initialCartItemsCount - 1);
+      await expect
+        .poll(async () => {
+          return await cart.items.count();
+        })
+        .toBe(initialCartItemsCount - 1);
     });
   });
 
@@ -208,15 +232,20 @@ test.describe('default', () => {
     });
 
     test('should remove all items', async ({cart}) => {
-      const cartItemsCount = await cart.items.count();
-
-      expect(cartItemsCount).toBe(0);
+      await expect
+        .poll(async () => {
+          return await cart.items.count();
+        })
+        .toBe(0);
     });
 
     test('should set the cart total to 0', async ({cart}) => {
-      const total = parseInt((await cart.total.textContent()) || '');
-
-      expect(total).toBe(0);
+      await expect
+        .poll(async () => {
+          const total = parseInt((await cart.total.textContent()) || '');
+          return total;
+        })
+        .toBe(0);
     });
   });
 });
