docs(headless-ssr-commerce): log product view events (#4833)

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

This PR adds a component to log product view events on PDPs.
Relevant CSR docs:
https://docs.coveo.com/en/o8ce0239#displaying-a-product-on-a-product-detail-page

Author: jpmarceau

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

@@ -1,5 +1,6 @@
 import * as externalCartAPI from '@/actions/external-cart-api';
 import ContextDropdown from '@/components/context-dropdown';
+import ProductViewer from '@/components/product-viewer';
 import {
   RecommendationProvider,
   StandaloneProvider,
@@ -64,7 +65,9 @@ export default async function ProductDescriptionPage({
 
   const resolvedSearchParams = await searchParams;
   const price = Number(resolvedSearchParams.price) ?? NaN;
-  const name = resolvedSearchParams.name ?? params.productId;
+  const name = Array.isArray(resolvedSearchParams.name)
+    ? params.productId
+    : (resolvedSearchParams.name ?? params.productId);
 
   return (
     <StandaloneProvider
@@ -74,6 +77,7 @@ export default async function ProductDescriptionPage({
       <h2>Product description page</h2>
       <ContextDropdown />
       <StandaloneSearchBox />
+      <ProductViewer productId={params.productId} name={name} price={price} />
       <p>
         {name} ({params.productId}) - ${price}
       </p>

packages/samples/headless-ssr-commerce/components/product-viewer.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import {useProductView} from '@/lib/commerce-engine';
+import {useEffect} from 'react';
+
+interface Product {
+  productId: string;
+  name: string;
+  price: number;
+}
+
+export default function ProductViewer({productId, name, price}: Product) {
+  const {methods} = useProductView();
+  let productViewEventEmitted = false;
+
+  useEffect(() => {
+    if (methods && !productViewEventEmitted) {
+      methods?.view({productId, name, price});
+      productViewEventEmitted = true;
+    }
+  }, []);
+
+  return null;
+}