docs(headless commerce react samples): Add instant products

packages/samples/headless-commerce-react/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["plugin:@typescript-eslint/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "root": true
+}

packages/samples/headless-commerce-react/src/components/instant-products/instant-products.tsx

@@ -0,0 +1,53 @@
+import {
+  InstantProducts as HeadlessInstantProducts,
+  Product,
+} from '@coveo/headless/commerce';
+import {useEffect, useState} from 'react';
+
+interface IInstantProductProps {
+  controller: HeadlessInstantProducts;
+  navigate: (pathName: string) => void;
+}
+
+export default function InstantProducts(props: IInstantProductProps) {
+  const {controller, navigate} = props;
+  const [state, setState] = useState(controller.state);
+
+  useEffect(
+    () => controller.subscribe(() => setState({...controller.state})),
+    [controller]
+  );
+
+  if (state.products.length === 0) {
+    return null;
+  }
+
+  const clickProduct = (product: Product) => {
+    controller.interactiveProduct({options: {product}}).select();
+
+    // Normally here, you would simply navigate to product.clickUri.
+    const productId = product.ec_product_id ?? product.permanentid;
+    const productName = product.ec_name ?? product.permanentid;
+    const productPrice = product.ec_promo_price ?? product.ec_price ?? NaN;
+    navigate(`/product/${productId}/${productName}/${productPrice}`);
+    // In this sample project, we navigate to a custom URL because the app doesn't have access to a commerce backend
+    // service to retrieve detailed product information from for the purpose of rendering a product description page
+    // (PDP).
+    // Therefore, we encode bare-minimum product information in the URL, and use it to render the PDP.
+    // This is by no means a realistic scenario.
+  };
+
+  return (
+    <>
+      <ul className="InstantProducts">
+        {state.products.map((product, index) => (
+          <li className="Product" key={index}>
+            <button onClick={() => clickProduct(product)}>
+              {product.ec_name} ({product.ec_product_id})
+            </button>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

packages/samples/headless-commerce-react/src/components/search-box/search-box.tsx

@@ -1,12 +1,18 @@
-import {SearchBox as HeadlessSearchBox} from '@coveo/headless/commerce';
+import {
+  SearchBox as HeadlessSearchBox,
+  InstantProducts as HeadlessInstantProducts,
+} from '@coveo/headless/commerce';
 import {useEffect, useState} from 'react';
+import InstantProducts from '../instant-products/instant-products';
 
 interface ISearchBoxProps {
   controller: HeadlessSearchBox;
+  instantProductsController: HeadlessInstantProducts;
+  navigate: (pathName: string) => void;
 }
 
 export default function SearchBox(props: ISearchBoxProps) {
-  const {controller} = props;
+  const {controller, instantProductsController, navigate} = props;
 
   const [state, setState] = useState(controller.state);
 
@@ -15,31 +21,65 @@ export default function SearchBox(props: ISearchBoxProps) {
     controller.subscribe(() => setState(controller.state));
   }, [controller]);
 
+  const onSearchBoxInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    controller.updateText(e.target.value);
+    instantProductsController.updateQuery(e.target.value);
+  };
+
   return (
     <div className="Searchbox">
       <input
         className="SearchBoxInput"
         value={state.value}
-        onChange={(e) => controller.updateText(e.target.value)}
+        onChange={(e) => onSearchBoxInputChange(e)}
       ></input>
       {state.value !== '' && (
         <span className="SearchBoxClear">
           <button onClick={controller.clear}>X</button>
         </span>
       )}
       <button onClick={controller.submit}>Search</button>
-      {state.suggestions.length > 0 && (
-        <ul className="QuerySuggestions">
-          {state.suggestions.map((suggestion, index) => (
-            <li key={index} className="QuerySuggestion">
-              <button
-                onClick={() => controller.selectSuggestion(suggestion.rawValue)}
-                dangerouslySetInnerHTML={{__html: suggestion.highlightedValue}}
-              ></button>
-            </li>
-          ))}
-        </ul>
-      )}
+      <table>
+        <thead>
+          <tr>
+            <th>Query suggestions</th>
+            <th>Instant products</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              {state.suggestions.length > 0 && (
+                <ul className="QuerySuggestions">
+                  {state.suggestions.map((suggestion, index) => (
+                    <li key={index} className="QuerySuggestion">
+                      <button
+                        onMouseEnter={() =>
+                          instantProductsController.updateQuery(
+                            suggestion.rawValue
+                          )
+                        }
+                        onClick={() =>
+                          controller.selectSuggestion(suggestion.rawValue)
+                        }
+                        dangerouslySetInnerHTML={{
+                          __html: suggestion.highlightedValue,
+                        }}
+                      ></button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </td>
+            <td>
+              <InstantProducts
+                controller={instantProductsController}
+                navigate={navigate}
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   );
 }

packages/samples/headless-commerce-react/src/components/standalone-search-box/standalone-search-box.tsx

@@ -1,13 +1,18 @@
-import {StandaloneSearchBox as HeadlessStandaloneSearchBox} from '@coveo/headless/commerce';
+import {
+  StandaloneSearchBox as HeadlessStandaloneSearchBox,
+  InstantProducts as HeadlessInstantProducts,
+} from '@coveo/headless/commerce';
 import {useEffect, useState} from 'react';
+import InstantProducts from '../instant-products/instant-products';
 
 interface IStandaloneSearchBoxProps {
   navigate: (url: string) => void;
   controller: HeadlessStandaloneSearchBox;
+  instantProductsController: HeadlessInstantProducts;
 }
 
 export default function StandaloneSearchBox(props: IStandaloneSearchBoxProps) {
-  const {navigate, controller} = props;
+  const {navigate, controller, instantProductsController} = props;
 
   const [state, setState] = useState(controller.state);
 
@@ -25,12 +30,17 @@ export default function StandaloneSearchBox(props: IStandaloneSearchBoxProps) {
     }
   }, [state.redirectTo, navigate, state.value, controller]);
 
+  const onSearchBoxInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    controller.updateText(e.target.value);
+    instantProductsController.updateQuery(e.target.value);
+  };
+
   return (
     <div className="StandaloneSearchbox">
       <input
         className="SearchBoxInput"
         value={state.value}
-        onChange={(e) => controller.updateText(e.target.value)}
+        onChange={(e) => onSearchBoxInputChange(e)}
       ></input>
       {state.value !== '' && (
         <span className="SearchBoxClear">
@@ -39,16 +49,45 @@ export default function StandaloneSearchBox(props: IStandaloneSearchBoxProps) {
       )}
       <button onClick={() => controller.submit()}>Search</button>
       {state.suggestions.length > 0 && (
-        <ul className="QuerySuggestions">
-          {state.suggestions.map((suggestion, index) => (
-            <li key={index} className="QuerySuggestion">
-              <button
-                onClick={() => controller.selectSuggestion(suggestion.rawValue)}
-                dangerouslySetInnerHTML={{__html: suggestion.highlightedValue}}
-              ></button>
-            </li>
-          ))}
-        </ul>
+        <table>
+          <thead>
+            <tr>
+              <th>Query suggestions</th>
+              <th>Instant products</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <ul className="QuerySuggestions">
+                  {state.suggestions.map((suggestion, index) => (
+                    <li key={index} className="QuerySuggestion">
+                      <button
+                        onMouseEnter={() =>
+                          instantProductsController.updateQuery(
+                            suggestion.rawValue
+                          )
+                        }
+                        onClick={() =>
+                          controller.selectSuggestion(suggestion.rawValue)
+                        }
+                        dangerouslySetInnerHTML={{
+                          __html: suggestion.highlightedValue,
+                        }}
+                      ></button>
+                    </li>
+                  ))}
+                </ul>
+              </td>
+              <td>
+                <InstantProducts
+                  controller={instantProductsController}
+                  navigate={navigate}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
       )}
     </div>
   );

packages/samples/headless-commerce-react/src/layout/layout.tsx

@@ -1,5 +1,6 @@
 import {
   buildCart,
+  buildInstantProducts,
   buildStandaloneSearchBox,
   CommerceEngine,
 } from '@coveo/headless/commerce';
@@ -17,6 +18,8 @@ interface ILayoutProps {
 
 export default function Layout(props: ILayoutProps) {
   const {engine, isPending, navigate, children} = props;
+  const standaloneSearchBoxId = 'standalone-search-box';
+
   return (
     <div className="Layout">
       <section className="Header">
@@ -93,10 +96,13 @@ export default function Layout(props: ILayoutProps) {
             controller={buildStandaloneSearchBox(engine, {
               options: {
                 redirectionUrl: '/search',
-                id: 'standalone-search-box',
+                id: standaloneSearchBoxId,
                 highlightOptions,
               },
             })}
+            instantProductsController={buildInstantProducts(engine, {
+              options: {searchBoxId: standaloneSearchBoxId},
+            })}
           />
         )}
       </section>

packages/samples/headless-commerce-react/src/pages/search-page.tsx

@@ -1,4 +1,5 @@
 import {
+  buildInstantProducts,
   buildSearch,
   buildSearchBox,
   Cart,
@@ -25,8 +26,10 @@ export default function Search(props: ISearchProps) {
 
   contextController.setView({url});
   const searchController = buildSearch(engine);
+
+  const searchBoxId = 'search-box';
   const searchBoxController = buildSearchBox(engine, {
-    options: {id: 'search-box', highlightOptions},
+    options: {id: searchBoxId, highlightOptions},
   });
 
   const bindUrlManager = useCallback(() => {
@@ -84,7 +87,13 @@ export default function Search(props: ISearchProps) {
 
   return (
     <div className="SearchPage">
-      <SearchBox controller={searchBoxController} />
+      <SearchBox
+        controller={searchBoxController}
+        instantProductsController={buildInstantProducts(engine, {
+          options: {searchBoxId},
+        })}
+        navigate={navigate}
+      />
       <h2 className="PageTitle">Search</h2>
       <DidYouMean controller={searchController.didYouMean()} />
       <SearchAndListingInterface