From 83467f6b5e8b5397dfa8cad94be64dc56998badd Mon Sep 17 00:00:00 2001
From: ylakhdar <ylakhdar@coveo.com>
Date: Mon, 26 Aug 2024 10:35:20 -0400
Subject: [PATCH] make recommendations clickable

https://coveord.atlassian.net/browse/KIT-3446
---
 .../app/_components/product-page.tsx          | 54 -------------------
 .../app/_components/recommendation-list.tsx   | 23 ++++++--
 .../app/_lib/commerce-engine-config.ts        |  5 --
 .../headless-ssr-commerce/app/page.tsx        | 17 ------
 4 files changed, 19 insertions(+), 80 deletions(-)
 delete mode 100644 packages/samples/headless-ssr-commerce/app/_components/product-page.tsx
 delete mode 100644 packages/samples/headless-ssr-commerce/app/page.tsx

diff --git a/packages/samples/headless-ssr-commerce/app/_components/product-page.tsx b/packages/samples/headless-ssr-commerce/app/_components/product-page.tsx
deleted file mode 100644
index f426375ed61..00000000000
--- a/packages/samples/headless-ssr-commerce/app/_components/product-page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client';
-
-import {NavigatorContext} from '@coveo/headless/ssr-commerce';
-import {useSearchParams} from 'next/navigation';
-import {useEffect, useState} from 'react';
-import {
-  searchEngineDefinition,
-  SearchHydratedState,
-  SearchStaticState,
-} from '../_lib/commerce-engine';
-
-interface IProductPageProps {
-  staticState: SearchStaticState;
-  navigatorContext: NavigatorContext;
-  productId: string;
-}
-
-export default function ProductPage(props: IProductPageProps) {
-  const [hydratedState, setHydratedState] = useState<
-    SearchHydratedState | undefined
-  >(undefined);
-
-  const {staticState, navigatorContext, productId} = props;
-
-  const searchParams = useSearchParams();
-
-  const price = Number(searchParams.get('price')) ?? NaN;
-  const name = searchParams.get('name') ?? productId;
-
-  // Setting the navigator context provider also in client-side before hydrating the application
-  searchEngineDefinition.setNavigatorContextProvider(() => navigatorContext);
-
-  useEffect(() => {
-    searchEngineDefinition
-      .hydrateStaticState({
-        searchAction: staticState.searchAction,
-      })
-      .then(({engine, controllers}) => {
-        setHydratedState({engine, controllers});
-      });
-  }, [staticState]);
-
-  const controller = hydratedState?.controllers.productView;
-
-  useEffect(() => {
-    controller?.view({name, productId, price});
-  }, [controller, productId, name, price]);
-
-  return (
-    <p>
-      {name} ({productId}) - ${price}
-    </p>
-  );
-}
diff --git a/packages/samples/headless-ssr-commerce/app/_components/recommendation-list.tsx b/packages/samples/headless-ssr-commerce/app/_components/recommendation-list.tsx
index 90027bf2113..944f4401fa4 100644
--- a/packages/samples/headless-ssr-commerce/app/_components/recommendation-list.tsx
+++ b/packages/samples/headless-ssr-commerce/app/_components/recommendation-list.tsx
@@ -1,7 +1,9 @@
 import {
+  Product,
   Recommendations as RecommendationsController,
   RecommendationsState,
 } from '@coveo/headless/ssr-commerce';
+import {useRouter} from 'next/navigation';
 import {useEffect, useState, FunctionComponent} from 'react';
 
 interface RecommendationsProps {
@@ -15,22 +17,35 @@ export const Recommendations: FunctionComponent<RecommendationsProps> = ({
 }) => {
   const [state, setState] = useState(staticState);
 
+  const router = useRouter();
+
   useEffect(
     () => controller?.subscribe(() => setState({...controller.state})),
     [controller]
   );
 
+  const onProductClick = (product: Product) => {
+    controller?.interactiveProduct({options: {product}}).select();
+    router.push(
+      `/products/${product.ec_product_id}?name=${product.ec_name}&price=${product.ec_price}`
+    );
+  };
+
   return (
     <>
-      <h3>{state.headline}</h3>
-      <ul className="product-list">
+      <ul>
+        <h3>{state.headline}</h3>
         {state.products.map((product) => (
           <li key={product.ec_product_id}>
-            <h3>{product.ec_name}</h3>
+            <button
+              disabled={!controller}
+              onClick={() => onProductClick(product)}
+            >
+              {product.ec_name}
+            </button>
           </li>
         ))}
       </ul>
-      <br />
     </>
   );
 };
diff --git a/packages/samples/headless-ssr-commerce/app/_lib/commerce-engine-config.ts b/packages/samples/headless-ssr-commerce/app/_lib/commerce-engine-config.ts
index a87b0707d33..647c0722b3c 100644
--- a/packages/samples/headless-ssr-commerce/app/_lib/commerce-engine-config.ts
+++ b/packages/samples/headless-ssr-commerce/app/_lib/commerce-engine-config.ts
@@ -46,11 +46,6 @@ export default {
         slotId: 'd73afbd2-8521-4ee6-a9b8-31f064721e73',
       },
     }),
-    doNotRefresh: defineRecommendations({
-      options: {
-        slotId: 'xxx--xxx-xxx-xxxx',
-      },
-    }),
     popularBoughtRecs: defineRecommendations({
       options: {
         slotId: 'af4fb7ba-6641-4b67-9cf9-be67e9f30174',
diff --git a/packages/samples/headless-ssr-commerce/app/page.tsx b/packages/samples/headless-ssr-commerce/app/page.tsx
deleted file mode 100644
index 33f31250e78..00000000000
--- a/packages/samples/headless-ssr-commerce/app/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Link from 'next/link';
-
-export default function Home() {
-  return (
-    <ul>
-      <li>
-        <Link href={'/recommendation'}>Recommendations</Link>
-      </li>
-      <li>
-        <Link href={'/listing'}>Surfboard Listing Page</Link>
-      </li>
-      <li>
-        <Link href={'/search'}>Search Page</Link>
-      </li>
-    </ul>
-  );
-}