coveo · fbeaudoincoveo · Jul 25, 2024 · Jul 23, 2024 · Jul 23, 2024 · Jul 23, 2024
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+dist
@@ -0,0 +1,3 @@
+# Headless Commerce React
+
+TODO
@@ -0,0 +1,32 @@
+{
+  "name": "@coveo/headless-commerce-react-samples",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@coveo/headless": "^2.73.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1"
+  },
+  "scripts": {
+    "dev": "react-scripts start",
+    "build": "nx build",
+    "build:client": "tsc --noEmit && tsc --module commonjs --noEmit",
+    "test": "react-scripts test"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
@@ -0,0 +1,18 @@
+{
+  "name": "headless-commerce-react-samples",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "targets": {
+    "cached:build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["npm run build:client"],
+        "parallel": true,
+        "cwd": "packages/samples/headless-commerce-react"
+      }
+    },
+    "build": {
+      "dependsOn": ["cached:build"],
+      "executor": "nx:noop"
+    }
+  }
+}
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Web site created using create-react-app" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Coveo Headless Commerce + React</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
@@ -0,0 +1,25 @@
+{
+  "short_name": "Headless Commerce + React",
+  "name": "Coveo Headless Commerce + React Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
@@ -0,0 +1,14 @@
+import {render} from '@testing-library/react';
+import App from './App';
+
+let errorSpy: jest.SpyInstance;
+
+beforeEach(() => {
+  errorSpy = jest.spyOn(global.console, 'error');
+});
+
+test('renders without error', async () => {
+  render(<App />);
+
+  expect(errorSpy).not.toHaveBeenCalled();
+});
@@ -0,0 +1,17 @@
+import {Suspense} from 'react';
+import {getEngine} from './context/engine';
+import Router from './router/router';
+
+export default function App() {
+  const engine = getEngine();
+
+  return (
+    <Suspense fallback={<BigSpinner />}>
+      <Router engine={engine} />
+    </Suspense>
+  );
+}
+
+function BigSpinner() {
+  return <h2>🌀 Loading...</h2>;
+}
@@ -0,0 +1,81 @@
+import {
+  CategoryFacetValue,
+  RegularFacetValue,
+  NumericFacetValue,
+  DateFacetValue,
+  BreadcrumbManager as HeadlessBreadcrumbManager,
+} from '@coveo/headless/commerce';
+import {AnyFacetValueResponse} from '@coveo/headless/dist/definitions/features/commerce/facets/facet-set/interfaces/response';
+import {useEffect, useState} from 'react';
+
+interface BreadcrumbManagerProps {
+  controller: HeadlessBreadcrumbManager;
+}
+
+export default function BreadcrumbManager(props: BreadcrumbManagerProps) {
+  const {controller} = props;
+
+  const [state, setState] = useState(controller.state);
+
+  useEffect(() => {
+    controller.subscribe(() => setState(controller.state));
+  }, [controller]);
+
+  if (!state.hasBreadcrumbs) {
+    return null;
+  }
+
+  const renderBreadcrumbValue = (
+    value: AnyFacetValueResponse,
+    type: string
+  ) => {
+    switch (type) {
+      case 'hierarchical':
+        return (value as CategoryFacetValue).path.join(' > ');
+      case 'regular':
+        return (value as RegularFacetValue).value;
+      case 'numericalRange':
+        return (
+          (value as NumericFacetValue).start +
+          ' - ' +
+          (value as NumericFacetValue).end
+        );
+      case 'dateRange':
+        return (
+          (value as DateFacetValue).start +
+          ' - ' +
+          (value as DateFacetValue).end
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="BreadcrumbManager">
+      <div className="ClearAllBreadcrumbs">
+        <button onClick={controller.deselectAll}>Clear all filters</button>
+      </div>
+      <ul className="Breadcrumbs">
+        {state.facetBreadcrumbs.map((facetBreadcrumb, index) => {
+          return (
+            <li className="FacetBreadcrumbs" key={index}>
+              {facetBreadcrumb.values.map((value, index) => {
+                return (
+                  <button
+                    className="BreadcrumbValue"
+                    key={index}
+                    onClick={() => value.deselect()}
+                  >
+                    {facetBreadcrumb.facetDisplayName}:{' '}
+                    {renderBreadcrumbValue(value.value, facetBreadcrumb.type)} X
+                  </button>
+                );
+              })}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
@@ -0,0 +1,33 @@
+import {Cart} from '@coveo/headless/commerce';
+import {useEffect, useState} from 'react';
+
+interface ICartTab {
+  controller: Cart;
+  onChange: () => void;
+}
+
+export default function CartTab(props: ICartTab) {
+  const {controller, onChange} = props;
+
+  const [state, setState] = useState(controller.state);
+
+  useEffect(() => {
+    controller.subscribe(() => setState(controller.state));
+  }, [controller]);
+
+  return (
+    <span>
+      <input
+        type="radio"
+        id="cart"
+        name="cart"
+        value="/cart"
+        checked={window.location.pathname === '/cart'}
+        onChange={onChange}
+      />
+      <label htmlFor="cart">
+        Cart<span>({state.totalQuantity})</span>
+      </label>
+    </span>
+  );
+}
@@ -0,0 +1,84 @@
+import {CartItem, Cart as HeadlessCart} from '@coveo/headless/commerce';
+import {useEffect, useState} from 'react';
+import {saveCartItemsToLocaleStorage} from '../../utils/cart-utils';
+import {formatCurrency} from '../../utils/format-currency';
+
+interface ICartProps {
+  controller: HeadlessCart;
+}
+
+export default function Cart(props: ICartProps) {
+  const {controller} = props;
+
+  const [state, setState] = useState(controller.state);
+
+  // When the cart state changes, you should save it so that you can restore it when you initialize the commerce engine.
+  useEffect(() => {
+    controller.subscribe(() => {
+      setState(controller.state);
+      saveCartItemsToLocaleStorage(controller.state);
+    });
+  }, [controller]);
+
+  const adjustQuantity = (item: CartItem, delta: number) => {
+    controller.updateItemQuantity({
+      ...item,
+      quantity: item.quantity + delta,
+    });
+  };
+
+  const isCartEmpty = () => {
+    return state.items.length === 0;
+  };
+
+  const purchase = () => {
+    controller.purchase({id: crypto.randomUUID(), revenue: state.totalPrice});
+  };
+
+  const emptyCart = () => {
+    controller.empty();
+  };
+
+  return (
+    <div className="Cart">
+      <ul>
+        {state.items.map((item, index) => (
+          <li key={index}>
+            <p>
+              <span>Name: </span>
+              <span>{item.name}</span>
+            </p>
+            <p>
+              <span>Quantity: </span>
+              <span>{item.quantity}</span>
+            </p>
+            <p>
+              <span>Price: </span>
+              <span>{formatCurrency(item.price)}</span>
+            </p>
+            <p>
+              <span>Total: </span>
+              <span>{formatCurrency(item.price * item.quantity)}</span>
+            </p>
+            <button onClick={() => adjustQuantity(item, 1)}>Add one</button>
+            <button onClick={() => adjustQuantity(item, -1)}>Remove one</button>
+            <button onClick={() => adjustQuantity(item, -item.quantity)}>
+              Remove all
+            </button>
+          </li>
+        ))}
+      </ul>
+      <p>
+        <span>Total: </span>
+        {formatCurrency(state.totalPrice)}
+        <span></span>
+      </p>
+      <button disabled={isCartEmpty()} onClick={purchase}>
+        Purchase
+      </button>
+      <button disabled={isCartEmpty()} onClick={emptyCart}>
+        Empty cart
+      </button>
+    </div>
+  );
+}