Initial setup

.env.example

@@ -0,0 +1,7 @@
+BIGCOMMERCE_STOREFRONT_API_URL=https://your-site.mybigcommerce.com/graphql
+BIGCOMMERCE_STOREFRONT_API_TOKEN=
+BIGCOMMERCE_STORE_API_URL=https://api.bigcommerce.com/stores/xxxxxxxxxxx
+BIGCOMMERCE_STORE_API_CLIENT_ID=
+BIGCOMMERCE_STORE_API_SECRET=
+BIGCOMMERCE_STORE_API_TOKEN=
+BIGCOMMERCE_TOKEN_SECRET="this-is-a-secret-value-with-at-least-32-characters"

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+.next/
+out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

lib/cart.ts

@@ -0,0 +1,105 @@
+import { useState, useCallback } from 'react';
+import useSWR, { mutate } from 'swr';
+
+async function getText(res) {
+  try {
+    return (await res.text()) || res.statusText;
+  } catch (error) {
+    return res.statusText;
+  }
+}
+
+async function getError(res) {
+  if (res.headers.get('Content-Type')?.includes('application/json')) {
+    const data = await res.json();
+    return data.errors[0];
+  }
+  return { message: await getText(res) };
+}
+
+async function fetcher(url) {
+  const res = await fetch(url);
+
+  if (res.status === 200) {
+    return res.json();
+  }
+  throw await getError(res);
+}
+
+export function useCart() {
+  return useSWR('/api/cart', fetcher);
+}
+
+export function useAddToCart() {
+  const [{ addingToCart, error }, setStatus] = useState({
+    addingToCart: false,
+  });
+  const addToCart = useCallback(async ({ product }) => {
+    setStatus({ addingToCart: true });
+
+    const res = await fetch('/api/cart', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ product }),
+    });
+
+    // Product added as expected
+    if (res.status === 200) {
+      setStatus({ addingToCart: false });
+      return mutate('/api/cart');
+    }
+
+    const error = await getError(res);
+
+    console.error('Adding product to cart failed with:', res.status, error);
+    setStatus({ addingToCart: false, error });
+  }, []);
+
+  return { addToCart, addingToCart, error };
+}
+
+export function useUpdateCart() {
+  const [{ updatingCart, error }, setStatus] = useState({
+    updatingCart: false,
+  });
+  const updateCart = useCallback(async ({ product, item }) => {
+    setStatus({ updatingCart: true });
+
+    const res = await fetch(
+      `/api/cart?itemId=${item.id}`,
+      product.quantity < 1
+        ? { method: 'DELETE' }
+        : {
+            method: 'PUT',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ product }),
+          }
+    );
+
+    // Product updated as expected
+    if (res.status === 200) {
+      setStatus({ updatingCart: false });
+      return mutate('/api/cart');
+    }
+
+    const error = await getError(res);
+
+    console.error('Update to cart failed with:', res.status, error);
+    setStatus({ updatingCart: false, error });
+  }, []);
+
+  return { updateCart, updatingCart, error };
+}
+
+export function useRemoveFromCart() {
+  const { updateCart, updatingCart, error } = useUpdateCart();
+  const removeFromCart = async ({ item }) => {
+    updateCart({ item, product: { quantity: 0 } });
+  };
+
+  return { removeFromCart, removingFromCart: updatingCart, error };
+}

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "e-comm-example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^9.5.4-canary.20",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "swr": "^0.3.3"
+  },
+  "resolutions": {
+    "webpack": "^5.0.0-beta.30"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.49",
+    "typescript": "^4.0.3"
+  }
+}

pages/index.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <h1>Hello World</h1>;
+}

tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}