Merge branch 'master' into issue/79-fallback-image

2025-06-29 18:01:21 +00:00 · 2021-01-23 21:52:09 -08:00 · 2021-01-23 21:52:09 -08:00 · d244ea12c9
commit d244ea12c9
parent 6d30d04fae 027c4aca70
150 changed files with 16506 additions and 1288 deletions
--- a/.gitignore
+++ b/.gitignore
@ -31,4 +31,4 @@ yarn-error.log*
 .env.production.local

 # vercel
-.vercel
+.vercel
--- a/README.md
+++ b/README.md
@ -9,7 +9,7 @@ Demo live at: [demo.vercel.store](https://demo.vercel.store/)

 This project is currently <b>under development</b>.

-## Goals and Features
+## Features

 - Performant by default
 - SEO Ready
@ -22,13 +22,25 @@ This project is currently <b>under development</b>.
 - Dark Mode Support

 ## Work in progress
-
 We're using Github Projects to keep track of issues in progress and todo's. Here is our [Board](https://github.com/vercel/commerce/projects/1)

 ## Integrations
-
 Next.js Commerce integrates out-of-the-box with BigCommerce. We plan to support all major ecommerce backends.

+
+## Goals
+
+* **Next.js Commerce** should have a completely data **agnostic** UI
+* **Aware of schema**: should ship with the right data schemas and types.
+* All providers should return the right data types and schemas to blend correctly with Next.js Commerce.
+* `@framework` will be the alias utilized in commerce and it will map to the ecommerce provider of preference- e.g BigCommerce, Shopify, Swell. All providers should expose the same standardized functions. _Note that the same applies for recipes using a CMS + an ecommerce provider._
+
+There is a `framework` folder in the root folder that will contain multiple ecommerce providers.
+
+Additionally, we need to ensure feature parity (not all providers have e.g. wishlist) we will also have to build a feature API to disable/enable features in the UI.
+
+People actively working on this project: @okbel & @lfades.
+
 ## Troubleshoot

 <details>
@ -66,15 +78,6 @@ After Email confirmation, Checkout should be manually enabled through BigCommerc
 BigCommerce team has been notified and they plan to add more detailed about this subject.
 </details>

-<details>
-<summary>I have issues with BigCommerce data hooks</summary>
-<br>
-Report issue with Data Hooks here: https://github.com/bigcommerce/storefront-data-hooks
-</details>
-
-
-
-
 ## Contribute

 Our commitment to Open Source can be found [here](https://vercel.com/oss).
@ -87,4 +90,9 @@ Our commitment to Open Source can be found [here](https://vercel.com/oss).
 6. Add proper store values to `.env.local`.
 7. Run `yarn dev` to build and watch for code changes
 8. The development branch is `development` (this is the branch pull requests should be made against).
-   On a release, the relevant parts of the changes in the `staging` branch are rebased into `master`.
+   On a release, `develop` branch is rebased into `master`.
+
+
+
+
+
--- a/assets/chrome-bug.css
+++ b/assets/chrome-bug.css
@ -0,0 +1,12 @@
+/**
+ * Chrome has a bug with transitions on load since 2012!
+ *
+ * To prevent a "pop" of content, you have to disable all transitions until
+ * the page is done loading.
+ *
+ * https://lab.laukstein.com/bug/input
+ * https://twitter.com/timer150/status/1345217126680899584
+ */
+body.loading * {
+  transition: none !important;
+}
--- a/codegen.json
+++ b/codegen.json
@ -0,0 +1,27 @@
+{
+  "schema": {
+    "https://buybutton.store/graphql": {
+      "headers": {
+        "Authorization": "Bearer xzy"
+      }
+    }
+  },
+  "documents": [
+    {
+      "./framework/bigcommerce/api/**/*.ts": {
+        "noRequire": true
+      }
+    }
+  ],
+  "generates": {
+    "./framework/bigcommerce/schema.d.ts": {
+      "plugins": ["typescript", "typescript-operations"]
+    },
+    "./framework/bigcommerce/schema.graphql": {
+      "plugins": ["schema-ast"]
+    }
+  },
+  "hooks": {
+    "afterAllFileWrite": ["prettier --write"]
+  }
+}
--- a/components/auth/LoginView.tsx
+++ b/components/auth/LoginView.tsx
@ -1,6 +1,6 @@
 import { FC, useEffect, useState, useCallback } from 'react'
 import { Logo, Button, Input } from '@components/ui'
-import useLogin from '@bigcommerce/storefront-data-hooks/use-login'
+import useLogin from '@framework/use-login'
 import { useUI } from '@components/ui/context'
 import { validate } from 'email-validator'

--- a/components/auth/SignUpView.tsx
+++ b/components/auth/SignUpView.tsx
@ -3,7 +3,7 @@ import { validate } from 'email-validator'
 import { Info } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import { Logo, Button, Input } from '@components/ui'
-import useSignup from '@bigcommerce/storefront-data-hooks/use-signup'
+import useSignup from '@framework/use-signup'

 interface Props {}

--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@ -3,9 +3,9 @@ import cn from 'classnames'
 import Image from 'next/image'
 import Link from 'next/link'
 import { Trash, Plus, Minus } from '@components/icons'
-import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
-import useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'
-import useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'
+import usePrice from '@framework/use-price'
+import useUpdateItem from '@framework/cart/use-update-item'
+import useRemoveItem from '@framework/cart/use-remove-item'
 import s from './CartItem.module.css'

 const CartItem = ({
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@ -4,8 +4,8 @@ import { UserNav } from '@components/common'
 import { Button } from '@components/ui'
 import { Bag, Cross, Check } from '@components/icons'
 import { useUI } from '@components/ui/context'
-import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'
-import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
+import useCart from '@framework/cart/use-cart'
+import usePrice from '@framework/use-price'
 import CartItem from '../CartItem'
 import s from './CartSidebarView.module.css'

@ -94,7 +94,7 @@ const CartSidebarView: FC = () => {
              My Cart
            </h2>
            <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-3 border-t border-accents-3">
-              {items.map((item) => (
+              {items.map((item: any) => (
                <CartItem
                  key={item.id}
                  item={item}
--- a/components/common/Footer/Footer.tsx
+++ b/components/common/Footer/Footer.tsx
@ -2,9 +2,9 @@ import { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+import type { Page } from '@framework/api/operations/get-all-pages'
 import getSlug from '@lib/get-slug'
-import { Github } from '@components/icons'
+import { Github, Vercel } from '@components/icons'
 import { Logo, Container } from '@components/ui'
 import { I18nWidget } from '@components/common'
 import s from './Footer.module.css'
@ -99,13 +99,18 @@ const Footer: FC<Props> = ({ className, pages }) => {
          <div>
            <span>&copy; 2020 ACME, Inc. All rights reserved.</span>
          </div>
-          <div className="flex items-center">
+          <div className="flex items-center text-primary">
            <span className="text-primary">Crafted by</span>
-            <a href="https://vercel.com" aria-label="Vercel.com Link">
-              <img
-                src="/vercel.svg"
-                alt="Vercel.com Logo"
+            <a
+              rel="noopener"
+              href="https://vercel.com"
+              aria-label="Vercel.com Link"
+              target="_blank"
+              className="text-primary"
+            >
+              <Vercel
                className="inline-block h-6 ml-4 text-primary"
+                alt="Vercel.com Logo"
              />
            </a>
          </div>
--- a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
+++ b/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
@ -23,7 +23,7 @@ const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
              </Link>
            </li>
            {categories.map((cat: any) => (
-              <li key={cat.path} className="py-1 text-accents-8">
+              <li key={cat.path} className="py-1 text-accents-8 text-base">
                <Link href={getCategoryPath(cat.path)}>
                  <a>{cat.name}</a>
                </Link>
@ -37,7 +37,7 @@ const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
              </Link>
            </li>
            {brands.flatMap(({ node }: any) => (
-              <li key={node.path} className="py-1 text-accents-8">
+              <li key={node.path} className="py-1 text-accents-8 text-base">
                <Link href={getDesignerPath(node.path)}>
                  <a>{node.name}</a>
                </Link>
--- a/components/common/I18nWidget/I18nWidget.module.css
+++ b/components/common/I18nWidget/I18nWidget.module.css
@ -6,6 +6,10 @@
  @apply h-10 px-2 rounded-md border border-accents-2 flex items-center justify-center;
 }

+.button:hover {
+  @apply border-accents-4 shadow-sm;
+}
+
 .button:focus {
  @apply outline-none;
 }
@ -18,6 +22,12 @@
  }
 }

+.closeButton {
+  @screen md {
+    @apply hidden;
+  }
+}
+
 .item {
  @apply flex cursor-pointer px-6 py-3 flex transition ease-in-out duration-150 text-primary leading-6 font-medium items-center;
  text-transform: capitalize;
@ -26,3 +36,7 @@
 .item:hover {
  @apply bg-accents-1;
 }
+
+.icon {
+  transform: rotate(180deg);
+}
--- a/components/common/I18nWidget/I18nWidget.tsx
+++ b/components/common/I18nWidget/I18nWidget.tsx
@ -3,7 +3,8 @@ import Link from 'next/link'
 import { FC, useState } from 'react'
 import { useRouter } from 'next/router'
 import s from './I18nWidget.module.css'
-import { Cross } from '@components/icons'
+import { Cross, ChevronUp } from '@components/icons'
+import ClickOutside from '@lib/click-outside'
 interface LOCALE_DATA {
  name: string
  img: {
@ -37,63 +38,63 @@ const I18nWidget: FC = () => {
    defaultLocale = 'en-US',
    asPath: currentPath,
  } = useRouter()
+
  const options = locales?.filter((val) => val !== locale)
  const currentLocale = locale || defaultLocale

  return (
-    <nav className={s.root}>
-      <div className="flex items-center relative">
-        <button className={s.button} aria-label="Language selector" />
-        <img
-          className="block mr-2 w-5"
-          src={`/${LOCALES_MAP[currentLocale].img.filename}`}
-          alt={LOCALES_MAP[currentLocale].img.alt}
-        />
-        {options && (
-          <span className="cursor-pointer" onClick={() => setDisplay(!display)}>
-            <svg
-              viewBox="0 0 24 24"
-              width="24"
-              height="24"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              fill="none"
-              shapeRendering="geometricPrecision"
-            >
-              <path d="M6 9l6 6 6-6" />
-            </svg>
-          </span>
-        )}
-      </div>
-      <div className="absolute top-0 right-0">
-        {options?.length && display ? (
-          <div className={s.dropdownMenu}>
-            <div className="flex flex-row justify-end px-6">
-              <button
-                onClick={() => setDisplay(false)}
-                aria-label="Close panel"
-                className={s.closeButton}
-              >
-                <Cross className="h-6 w-6" />
-              </button>
+    <ClickOutside active={display} onClick={() => setDisplay(false)} >
+      <nav className={s.root}>
+        <div
+          className="flex items-center relative"
+          onClick={() => setDisplay(!display)}
+        >
+          <button className={s.button} aria-label="Language selector">
+            <img
+              width="20"
+              height="20"
+              className="block mr-2 w-5"
+              src={`/${LOCALES_MAP[currentLocale].img.filename}`}
+              alt={LOCALES_MAP[currentLocale].img.alt}
+            />
+            {options && (
+              <span className="cursor-pointer">
+                <ChevronUp className={cn({ [s.icon]: display })} />
+              </span>
+            )}
+          </button>
+        </div>
+        <div className="absolute top-0 right-0">
+          {options?.length && display ? (
+            <div className={s.dropdownMenu}>
+              <div className="flex flex-row justify-end px-6">
+                <button
+                  onClick={() => setDisplay(false)}
+                  aria-label="Close panel"
+                  className={s.closeButton}
+                >
+                  <Cross className="h-6 w-6" />
+                </button>
+              </div>
+              <ul>
+                {options.map((locale) => (
+                  <li key={locale}>
+                    <Link href={currentPath} locale={locale}>
+                      <a
+                        className={cn(s.item)}
+                        onClick={() => setDisplay(false)}
+                      >
+                        {LOCALES_MAP[locale].name}
+                      </a>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
            </div>
-            <ul>
-              {options.map((locale) => (
-                <li key={locale}>
-                  <Link href={currentPath} locale={locale}>
-                    <a className={cn(s.item)} onClick={() => setDisplay(false)}>
-                      {LOCALES_MAP[locale].name}
-                    </a>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ) : null}
-      </div>
-    </nav>
+          ) : null}
+        </div>
+      </nav>
+    </ClickOutside>
  )
 }

--- a/components/common/Layout/Layout.tsx
+++ b/components/common/Layout/Layout.tsx
@ -6,11 +6,14 @@ import React, { FC } from 'react'
 import { useUI } from '@components/ui/context'
 import { Navbar, Footer } from '@components/common'
 import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
-import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
 import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
-import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
 import { CartSidebarView } from '@components/cart'

+import LoginView from '@components/auth/LoginView'
+import { CommerceProvider } from '@framework'
+import type { Page } from '@framework/api/operations/get-all-pages'
+
+
 const Loading = () => (
  <div className="w-80 h-80 flex items-center text-center justify-center p-3">
    <LoadingDots />
@ -21,10 +24,6 @@ const dynamicProps = {
  loading: () => <Loading />,
 }

-const LoginView = dynamic(
-  () => import('@components/auth/LoginView'),
-  dynamicProps
-)
 const SignUpView = dynamic(
  () => import('@components/auth/SignUpView'),
  dynamicProps
@ -76,7 +75,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
          title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
          hide={acceptedCookies}
          action={
-            <Button className="mx-5" onClick={onAcceptCookies}>
+            <Button className="mx-5" onClick={() => onAcceptCookies()}>
              Accept cookies
            </Button>
          }
--- a/components/common/Navbar/Navbar.tsx
+++ b/components/common/Navbar/Navbar.tsx
@ -9,31 +9,31 @@ import throttle from 'lodash.throttle'
 const Navbar: FC = () => {
  const [hasScrolled, setHasScrolled] = useState(false)

-  const handleScroll = () => {
-    const offset = 0
-    const { scrollTop } = document.documentElement
-    const scrolled = scrollTop > offset
-    setHasScrolled(scrolled)
-  }
-
  useEffect(() => {
-    document.addEventListener('scroll', throttle(handleScroll, 200))
+    const handleScroll = throttle(() => {
+      const offset = 0
+      const { scrollTop } = document.documentElement
+      const scrolled = scrollTop > offset
+      setHasScrolled(scrolled)
+    }, 200)
+
+    document.addEventListener('scroll', handleScroll)
    return () => {
      document.removeEventListener('scroll', handleScroll)
    }
-  }, [handleScroll])
+  }, [])

  return (
    <div className={cn(s.root, { 'shadow-magical': hasScrolled })}>
      <Container>
-        <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
-          <div className="flex flex-1 items-center">
+        <div className="relative flex flex-row justify-between py-4 align-center md:py-6">
+          <div className="flex items-center flex-1">
            <Link href="/">
              <a className={s.logo} aria-label="Logo">
                <Logo />
              </a>
            </Link>
-            <nav className="space-x-4 ml-6 hidden lg:block">
+            <nav className="hidden ml-6 space-x-4 lg:block">
              <Link href="/search">
                <a className={s.link}>All</a>
              </Link>
@ -46,11 +46,11 @@ const Navbar: FC = () => {
            </nav>
          </div>

-          <div className="flex-1 justify-center hidden lg:flex">
+          <div className="justify-center flex-1 hidden lg:flex">
            <Searchbar />
          </div>

-          <div className="flex flex-1 justify-end space-x-8">
+          <div className="flex justify-end flex-1 space-x-8">
            <UserNav />
          </div>
        </div>
--- a/components/common/UserNav/DropdownMenu.tsx
+++ b/components/common/UserNav/DropdownMenu.tsx
@ -1,14 +1,22 @@
 import cn from 'classnames'
 import Link from 'next/link'
-import { FC, useState } from 'react'
+import { FC, useRef, useState, useEffect } from 'react'
 import { useTheme } from 'next-themes'
 import { useRouter } from 'next/router'
 import s from './DropdownMenu.module.css'
 import { Avatar } from '@components/common'
 import { Moon, Sun } from '@components/icons'
 import { useUI } from '@components/ui/context'
+import ClickOutside from '@lib/click-outside'
+
+import {
+  disableBodyScroll,
+  enableBodyScroll,
+  clearAllBodyScrollLocks,
+} from 'body-scroll-lock'
+
+import useLogout from '@framework/use-logout'

-import useLogout from '@bigcommerce/storefront-data-hooks/use-logout'
 interface DropdownMenuProps {
  open?: boolean
 }
@ -34,65 +42,84 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
  const { theme, setTheme } = useTheme()
  const [display, setDisplay] = useState(false)
  const { closeSidebarIfPresent } = useUI()
+  const ref = useRef() as React.MutableRefObject<HTMLUListElement>
+
+  useEffect(() => {
+    if (ref.current) {
+      if (display) {
+        disableBodyScroll(ref.current)
+      } else {
+        enableBodyScroll(ref.current)
+      }
+    }
+    return () => {
+      clearAllBodyScrollLocks()
+    }
+  }, [display])

  return (
-    <div>
-      <button
-        className={s.avatarButton}
-        onClick={() => setDisplay(!display)}
-        aria-label="Menu"
-      >
-        <Avatar />
-      </button>
-
-      {display && (
-        <ul className={s.dropdownMenu}>
-          {LINKS.map(({ name, href }) => (
-            <li key={href}>
-              <div>
-                <Link href={href}>
-                  <a
-                    className={cn(s.link, {
-                      [s.active]: pathname === href,
-                    })}
-                    onClick={closeSidebarIfPresent}
-                  >
-                    {name}
-                  </a>
-                </Link>
-              </div>
+    <ClickOutside active={display} onClick={() => setDisplay(false)}>
+      <div>
+        <button
+          className={s.avatarButton}
+          onClick={() => setDisplay(!display)}
+          aria-label="Menu"
+        >
+          <Avatar />
+        </button>
+        {display && (
+          <ul className={s.dropdownMenu} ref={ref}>
+            {LINKS.map(({ name, href }) => (
+              <li key={href}>
+                <div>
+                  <Link href={href}>
+                    <a
+                      className={cn(s.link, {
+                        [s.active]: pathname === href,
+                      })}
+                      onClick={() => {
+                        setDisplay(false)
+                        closeSidebarIfPresent()
+                      }}
+                    >
+                      {name}
+                    </a>
+                  </Link>
+                </div>
+              </li>
+            ))}
+            <li>
+              <a
+                className={cn(s.link, 'justify-between')}
+                onClick={() => {
+                  theme === 'dark' ? setTheme('light') : setTheme('dark')
+                  setDisplay(false)
+                }}
+              >
+                <div>
+                  Theme: <strong>{theme}</strong>{' '}
+                </div>
+                <div className="ml-3">
+                  {theme == 'dark' ? (
+                    <Moon width={20} height={20} />
+                  ) : (
+                    <Sun width="20" height={20} />
+                  )}
+                </div>
+              </a>
            </li>
-          ))}
-          <li>
-            <a
-              className={cn(s.link, 'justify-between')}
-              onClick={() =>
-                theme === 'dark' ? setTheme('light') : setTheme('dark')
-              }
-            >
-              <div>
-                Theme: <strong>{theme}</strong>{' '}
-              </div>
-              <div className="ml-3">
-                {theme == 'dark' ? (
-                  <Moon width={20} height={20} />
-                ) : (
-                  <Sun width="20" height={20} />
-                )}
-              </div>
-            </a>
-          </li>
-          <li>
-            <a
-              className={cn(s.link, 'border-t border-accents-2 mt-4')}
-              onClick={() => logout()}
-            >
-              Logout
-            </a>
-          </li>
-        </ul>
-      )}
-    </div>
+            <li>
+              <a
+                className={cn(s.link, 'border-t border-accents-2 mt-4')}
+                onClick={() => logout()}
+              >
+                Logout
+              </a>
+            </li>
+          </ul>
+        )}
+      </div>
+    </ClickOutside>
  )
 }

--- a/components/common/UserNav/UserNav.tsx
+++ b/components/common/UserNav/UserNav.tsx
@ -1,8 +1,8 @@
 import { FC } from 'react'
 import Link from 'next/link'
 import cn from 'classnames'
-import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'
-import useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'
+import useCart from '@framework/cart/use-cart'
+import useCustomer from '@framework/use-customer'
 import { Heart, Bag } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import DropdownMenu from './DropdownMenu'
--- a/components/icons/ChevronUp.tsx
+++ b/components/icons/ChevronUp.tsx
@ -0,0 +1,20 @@
+const ChevronUp = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+      {...props}
+    >
+      <path d="M18 15l-6-6-6 6" />
+    </svg>
+  )
+}
+
+export default ChevronUp
--- a/components/icons/Vercel.tsx
+++ b/components/icons/Vercel.tsx
@ -0,0 +1,16 @@
+const Vercel = ({ ...props }) => {
+    return (
+  <svg width="89" height="20" viewBox="0 0 89 20" fill="none" xmlns="http://www.w3.org/2000/svg" { ...props }>
+      <path d="M11.5625 0L23.125 20H0L11.5625 0Z" fill="currentColor"/>
+      <path d="M49.875 10.625C49.875 7.40625 47.5 5.15625 44.0937 5.15625C40.6875 5.15625 38.3125 7.40625 38.3125 10.625C38.3125 13.7812 40.875 16.0937 44.4062 16.0937C46.3438 16.0937 48.0938 15.375 49.2188 14.0625L47.0938 12.8437C46.4375 13.5 45.4688 13.9062 44.4062 13.9062C42.8438 13.9062 41.5 13.0625 41.0312 11.7812L40.9375 11.5625H49.7812C49.8438 11.25 49.875 10.9375 49.875 10.625ZM40.9062 9.6875L40.9688 9.5C41.375 8.15625 42.5625 7.34375 44.0625 7.34375C45.5938 7.34375 46.75 8.15625 47.1562 9.5L47.2188 9.6875H40.9062Z" fill="currentColor"/>
+      <path d="M83.5313 10.625C83.5313 7.40625 81.1563 5.15625 77.75 5.15625C74.3438 5.15625 71.9688 7.40625 71.9688 10.625C71.9688 13.7812 74.5313 16.0937 78.0625 16.0937C80 16.0937 81.75 15.375 82.875 14.0625L80.75 12.8437C80.0938 13.5 79.125 13.9062 78.0625 13.9062C76.5 13.9062 75.1563 13.0625 74.6875 11.7812L74.5938 11.5625H83.4375C83.5 11.25 83.5313 10.9375 83.5313 10.625ZM74.5625 9.6875L74.625 9.5C75.0313 8.15625 76.2188 7.34375 77.7188 7.34375C79.25 7.34375 80.4063 8.15625 80.8125 9.5L80.875 9.6875H74.5625Z" fill="currentColor"/>
+      <path d="M68.5313 8.84374L70.6563 7.62499C69.6563 6.06249 67.875 5.18749 65.7188 5.18749C62.3125 5.18749 59.9375 7.43749 59.9375 10.6562C59.9375 13.875 62.3125 16.125 65.7188 16.125C67.875 16.125 69.6563 15.25 70.6563 13.6875L68.5313 12.4687C67.9688 13.4062 66.9688 13.9375 65.7188 13.9375C63.75 13.9375 62.4375 12.625 62.4375 10.6562C62.4375 8.68749 63.75 7.37499 65.7188 7.37499C66.9375 7.37499 67.9688 7.90624 68.5313 8.84374Z" fill="currentColor"/>
+      <path d="M88.2188 1.75H85.7188V15.8125H88.2188V1.75Z" fill="currentColor"/>
+      <path d="M40.1563 1.75H37.2813L31.7813 11.25L26.2813 1.75H23.375L31.7813 16.25L40.1563 1.75Z" fill="currentColor"/>
+      <path d="M57.8438 8.0625C58.125 8.0625 58.4062 8.09375 58.6875 8.15625V5.5C56.5625 5.5625 54.5625 6.75 54.5625 8.21875V5.5H52.0625V15.8125H54.5625V11.3437C54.5625 9.40625 55.9062 8.0625 57.8438 8.0625Z" fill="currentColor"/>
+  </svg>
+
+  )
+}
+
+export default Vercel
--- a/components/icons/index.ts
+++ b/components/icons/index.ts
@ -12,3 +12,5 @@ export { default as Github } from './Github'
 export { default as DoubleChevron } from './DoubleChevron'
 export { default as RightArrow } from './RightArrow'
 export { default as Info } from './Info'
+export { default as ChevronUp } from './ChevronUp'
+export { default as Vercel } from './Vercel'
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@ -9,8 +9,8 @@
      transform: scale(0.98);
    }

-    & .product-image {
-      transform: scale(1.05);
+    & .productImage {
+      transform: scale(1.2625);
    }

    & .productTitle > span,
@ -44,10 +44,6 @@
    }
  }

-  & .product-image {
-    @apply transform transition-transform duration-500;
-  }
-
  &:nth-child(6n + 1) .squareBg {
    @apply bg-violet;
  }
@ -135,7 +131,6 @@
  }
 }

-.image {
-  object-fit: cover;
-  transform: scale(1.2);
+.productImage {
+  @apply transform transition-transform duration-500 object-cover scale-120;
 }
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@ -1,12 +1,13 @@
-import type { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
-import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
-import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
 import Image from 'next/image'
+import type { FC } from 'react'
 import s from './ProductCard.module.css'
 import WishlistButton from '@components/wishlist/WishlistButton'

+import usePrice from '@framework/use-price'
+import type { ProductNode } from '@framework/api/operations/get-all-products'
+
 interface Props {
  className?: string
  product: ProductNode
@ -83,7 +84,7 @@ const ProductCard: FC<Props> = ({
                quality="85"
                src={src || placeholderImg}
                alt={p.name}
-                className={s.image}
+                className={s.productImage}
                width={imgWidth}
                sizes={imgSizes}
                height={imgHeight}
--- a/components/product/ProductSlider/ProductSlider.tsx
+++ b/components/product/ProductSlider/ProductSlider.tsx
@ -1,5 +1,5 @@
 import { useKeenSlider } from 'keen-slider/react'
-import React, { Children, FC, isValidElement, useState } from 'react'
+import React, { Children, FC, isValidElement, useState, useRef, useEffect } from 'react'
 import cn from 'classnames'

 import s from './ProductSlider.module.css'
@ -7,6 +7,7 @@ import s from './ProductSlider.module.css'
 const ProductSlider: FC = ({ children }) => {
  const [currentSlide, setCurrentSlide] = useState(0)
  const [isMounted, setIsMounted] = useState(false)
+  const sliderContainerRef = useRef<HTMLDivElement>(null)

  const [ref, slider] = useKeenSlider<HTMLDivElement>({
    loop: true,
@ -17,8 +18,35 @@ const ProductSlider: FC = ({ children }) => {
    },
  })

+  // Stop the history navigation gesture on touch devices
+  useEffect(() => {
+    const preventNavigation = (event: TouchEvent) => {
+      // Center point of the touch area
+      const touchXPosition = event.touches[0].pageX
+      // Size of the touch area
+      const touchXRadius = event.touches[0].radiusX || 0
+      
+      // We set a threshold (10px) on both sizes of the screen,
+      // if the touch area overlaps with the screen edges
+      // it's likely to trigger the navigation. We prevent the
+      // touchstart event in that case.
+      if (
+        touchXPosition - touchXRadius < 10 ||
+        touchXPosition + touchXRadius > window.innerWidth - 10
+      ) event.preventDefault()
+    }
+
+    sliderContainerRef.current!
+      .addEventListener('touchstart', preventNavigation)
+
+    return () => {
+      sliderContainerRef.current!
+      .removeEventListener('touchstart', preventNavigation)
+    }
+  }, [])
+
  return (
-    <div className={s.root}>
+    <div className={s.root} ref={sliderContainerRef}>
      <button
        className={cn(s.leftControl, s.control)}
        onClick={slider?.prev}
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@ -8,9 +8,9 @@ import { useUI } from '@components/ui/context'
 import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container, Text } from '@components/ui'

-import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
-import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
-import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-product'
+import usePrice from '@framework/use-price'
+import useAddItem from '@framework/cart/use-add-item'
+import type { ProductNode } from '@framework/api/operations/get-product'
 import {
  getCurrentVariant,
  getProductOptions,
@ -86,7 +86,7 @@ const ProductView: FC<Props> = ({ product }) => {
          </div>

          <div className={s.sliderContainer}>
-            <ProductSlider>
+            <ProductSlider key={product.entityId}>
              {product.images.edges?.map((image, i) => (
                <div key={image?.node.urlOriginal} className={s.imageContainer}>
                  <Image
--- a/components/product/helpers.ts
+++ b/components/product/helpers.ts
@ -1,4 +1,4 @@
-import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-product'
+import type { ProductNode } from '@framework/api/operations/get-product'

 export type SelectedOptions = {
  size: string | null
--- a/components/ui/Button/Button.tsx
+++ b/components/ui/Button/Button.tsx
@ -27,12 +27,12 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
    variant = 'flat',
    children,
    active,
-    onClick,
    width,
-    Component = 'button',
    loading = false,
    disabled = false,
    style = {},
+    Component = 'button',
+    ...rest
  } = props
  const ref = useRef<typeof Component>(null)

@ -57,6 +57,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
        width,
        ...style,
      }}
+      {...rest}
    >
      {children}
      {loading && (
--- a/components/ui/Marquee/Marquee.tsx
+++ b/components/ui/Marquee/Marquee.tsx
@ -2,7 +2,6 @@ import cn from 'classnames'
 import s from './Marquee.module.css'
 import { FC, ReactNode, Component } from 'react'
 import Ticker from 'react-ticker'
-import { useInView } from 'react-intersection-observer'

 interface Props {
  className?: string
@ -23,18 +22,12 @@ const Maquee: FC<Props> = ({
    },
    className
  )
-  const [ref, inView] = useInView({
-    triggerOnce: true,
-    rootMargin: '200px 0px',
-  })

  return (
-    <div className={rootClassName} ref={ref}>
-      {inView ? (
-        <Ticker offset={80}>
-          {() => <div className={s.container}>{children}</div>}
-        </Ticker>
-      ) : null}
+    <div className={rootClassName}>
+      <Ticker offset={80}>
+        {() => <div className={s.container}>{children}</div>}
+      </Ticker>
    </div>
  )
 }
--- a/components/ui/Modal/Modal.module.css
+++ b/components/ui/Modal/Modal.module.css
@ -4,7 +4,7 @@
 }

 .modal {
-  @apply bg-primary p-12 border border-accents-2;
+  @apply bg-primary p-12 border border-accents-2 relative;
 }

 .modal:focus {
--- a/components/ui/Modal/Modal.tsx
+++ b/components/ui/Modal/Modal.tsx
@ -1,4 +1,4 @@
-import { FC, useRef, useEffect } from 'react'
+import { FC, useRef, useEffect, useCallback } from 'react'
 import Portal from '@reach/portal'
 import s from './Modal.module.css'
 import { Cross } from '@components/icons'
@ -7,45 +7,55 @@ import {
  enableBodyScroll,
  clearAllBodyScrollLocks,
 } from 'body-scroll-lock'
-
+import FocusTrap from '@lib/focus-trap'
 interface Props {
  className?: string
  children?: any
  open?: boolean
  onClose: () => void
+  onEnter?: () => void | null
 }

-const Modal: FC<Props> = ({ children, open, onClose }) => {
+const Modal: FC<Props> = ({ children, open, onClose, onEnter = null }) => {
  const ref = useRef() as React.MutableRefObject<HTMLDivElement>

+  const handleKey = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        return onClose()
+      }
+    },
+    [onClose]
+  )
+
  useEffect(() => {
    if (ref.current) {
      if (open) {
        disableBodyScroll(ref.current)
+        window.addEventListener('keydown', handleKey)
      } else {
        enableBodyScroll(ref.current)
      }
    }
    return () => {
+      window.removeEventListener('keydown', handleKey)
      clearAllBodyScrollLocks()
    }
-  }, [open])
+  }, [open, handleKey])

  return (
    <Portal>
      {open ? (
-        <div className={s.root} ref={ref}>
-          <div className={s.modal}>
-            <div className="h-7 flex items-center justify-end w-full">
-              <button
-                onClick={() => onClose()}
-                aria-label="Close panel"
-                className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none"
-              >
-                <Cross className="h-6 w-6" />
-              </button>
-            </div>
-            {children}
+        <div className={s.root}>
+          <div className={s.modal} role="dialog" ref={ref}>
+            <button
+              onClick={() => onClose()}
+              aria-label="Close panel"
+              className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6"
+            >
+              <Cross className="h-6 w-6" />
+            </button>
+            <FocusTrap focusFirst>{children}</FocusTrap>
          </div>
        </div>
      ) : null}
--- a/components/ui/Text/Text.tsx
+++ b/components/ui/Text/Text.tsx
@ -26,7 +26,7 @@ const Text: FunctionComponent<Props> = ({
  const componentsMap: {
    [P in Variant]: React.ComponentType<any> | string
  } = {
-    body: 'p',
+    body: 'div',
    heading: 'h1',
    pageHeading: 'h1',
    sectionHeading: 'h2',
--- a/components/wishlist/WishlistButton/WishlistButton.tsx
+++ b/components/wishlist/WishlistButton/WishlistButton.tsx
@ -1,10 +1,10 @@
 import React, { FC, useState } from 'react'
 import cn from 'classnames'
-import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
-import useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'
-import useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'
-import useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'
-import useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'
+import type { ProductNode } from '@framework/api/operations/get-all-products'
+import useAddItem from '@framework/wishlist/use-add-item'
+import useRemoveItem from '@framework/wishlist/use-remove-item'
+import useWishlist from '@framework/wishlist/use-wishlist'
+import useCustomer from '@framework/use-customer'
 import { Heart } from '@components/icons'
 import { useUI } from '@components/ui/context'

--- a/components/wishlist/WishlistCard/WishlistCard.tsx
+++ b/components/wishlist/WishlistCard/WishlistCard.tsx
@ -2,10 +2,10 @@ import { FC, useState } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
 import Image from 'next/image'
-import type { WishlistItem } from '@bigcommerce/storefront-data-hooks/api/wishlist'
-import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
-import useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'
-import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
+import type { WishlistItem } from '@framework/api/wishlist'
+import usePrice from '@framework/use-price'
+import useRemoveItem from '@framework/wishlist/use-remove-item'
+import useAddItem from '@framework/cart/use-add-item'
 import { useUI } from '@components/ui/context'
 import { Button, Text } from '@components/ui'
 import { Trash } from '@components/icons'
--- a/framework/bigcommerce/README.md
+++ b/framework/bigcommerce/README.md
@ -0,0 +1,383 @@
+
+Table of Contents
+=================
+
+   * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)
+      * [Installation](#installation)
+      * [General Usage](#general-usage)
+         * [CommerceProvider](#commerceprovider)
+         * [useLogin hook](#uselogin-hook)
+         * [useLogout](#uselogout)
+         * [useCustomer](#usecustomer)
+         * [useSignup](#usesignup)
+         * [usePrice](#useprice)
+      * [Cart Hooks](#cart-hooks)
+         * [useCart](#usecart)
+         * [useAddItem](#useadditem)
+         * [useUpdateItem](#useupdateitem)
+         * [useRemoveItem](#useremoveitem)
+      * [Wishlist Hooks](#wishlist-hooks)
+      * [Product Hooks and API](#product-hooks-and-api)
+         * [useSearch](#usesearch)
+         * [getAllProducts](#getallproducts)
+         * [getProduct](#getproduct)
+      * [More](#more)
+
+# BigCommerce Storefront Data Hooks
+
+> This project is under active development, new features and updates will be continuously added over time
+
+UI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:
+
+- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions
+- Code splitted data fetching methods for initial data population and static generation of content
+- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications
+
+## Installation
+
+To install:
+
+```
+yarn add storefront-data-hooks
+```
+
+After install, the first thing you do is: <b>set your environment variables</b> in `.env.local`
+
+```sh
+BIGCOMMERCE_STOREFRONT_API_URL=<>
+BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
+BIGCOMMERCE_STORE_API_URL=<>
+BIGCOMMERCE_STORE_API_TOKEN=<>
+BIGCOMMERCE_STORE_API_CLIENT_ID=<>
+```
+
+## General Usage
+
+### CommerceProvider
+
+This component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.
+
+```jsx
+...
+import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
+
+const App = ({ locale = 'en-US', children }) => {
+  return (
+    <CommerceProvider locale={locale}>
+      {children}
+    </CommerceProvider>
+  )
+}
+...
+```
+
+### useLogin hook
+
+Hook for bigcommerce user login functionality, returns `login` function to handle user login.
+
+```jsx
+...
+import useLogin from '@bigcommerce/storefront-data-hooks/use-login'
+
+const LoginView = () => {
+  const login = useLogin()
+
+  const handleLogin = async () => {
+    await login({
+      email,
+      password,
+    })
+  }
+
+  return (
+    <form onSubmit={handleLogin}>
+      {children}
+    </form>
+  )
+}
+...
+```
+
+### useLogout
+
+Hook to logout user.
+
+```jsx
+...
+import useLogout from '@bigcommerce/storefront-data-hooks/use-logout'
+
+const LogoutLink = () => {
+  const logout = useLogout()
+  return (
+    <a onClick={() => logout()}>
+      Logout
+    </a>
+  )
+}
+```
+
+### useCustomer
+
+Hook for getting logged in customer data, and fetching customer info.
+
+```jsx
+...
+import useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'
+...
+
+const Profile = () => {
+  const { data } = useCustomer()
+
+  if (!data) {
+    return null
+  }
+
+  return (
+    <div>Hello, {data.firstName}</div>
+  )
+}
+```
+
+### useSignup
+
+Hook for bigcommerce user signup, returns `signup` function to handle user signups.
+
+```jsx
+...
+import useSignup from '@bigcommerce/storefront-data-hooks/use-login'
+
+const SignupView = () => {
+  const signup = useSignup()
+
+  const handleSignup = async () => {
+    await signup({
+      email,
+      firstName,
+      lastName,
+      password,
+    })
+  }
+
+  return (
+    <form onSubmit={handleSignup}>
+      {children}
+    </form>
+  )
+}
+...
+```
+
+### usePrice
+
+Helper hook to format price according to commerce locale, and return discount if available.
+
+```jsx
+import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
+...
+  const { price, discount, basePrice } = usePrice(
+    data && {
+      amount: data.cart_amount,
+      currencyCode: data.currency.code,
+    }
+  )
+...
+```
+
+## Cart Hooks
+
+### useCart
+
+Returns the current cart data for use
+
+```jsx
+...
+import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'
+
+const countItem = (count: number, item: any) => count + item.quantity
+const countItems = (count: number, items: any[]) =>
+  items.reduce(countItem, count)
+
+const CartNumber = () => {
+  const { data } = useCart()
+  const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
+
+  return itemsCount > 0 ? <span>{itemsCount}</span> : null
+}
+```
+
+### useAddItem
+
+```jsx
+...
+import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
+
+const AddToCartButton = ({ productId, variantId }) => {
+  const addItem = useAddItem()
+
+  const addToCart = async () => {
+    await addItem({
+      productId,
+      variantId,
+    })
+  }
+
+  return <button onClick={addToCart}>Add To Cart</button>
+}
+...
+```
+
+### useUpdateItem
+
+```jsx
+...
+import useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'
+
+const CartItem = ({ item }) => {
+  const [quantity, setQuantity] = useState(item.quantity)
+  const updateItem = useUpdateItem(item)
+  
+  const updateQuantity = async (e) => {
+    const val = e.target.value
+    await updateItem({ quantity: val })
+  }
+
+  return (
+    <input
+      type="number"
+      max={99}
+      min={0}
+      value={quantity}
+      onChange={updateQuantity}
+    />
+  )
+}
+...
+```
+
+### useRemoveItem
+
+Provided with a cartItemId, will remove an item from the cart:
+
+```jsx
+...
+import useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'
+
+const RemoveButton = ({ item }) => {
+  const removeItem = useRemoveItem()
+  
+  const handleRemove = async () => {
+    await removeItem({ id: item.id })
+  }
+
+  return <button onClick={handleRemove}>Remove</button>
+}
+...
+```
+
+## Wishlist Hooks
+
+Wishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.
+
+```jsx
+import useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'
+import useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'
+import useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'
+
+const WishlistButton = ({ productId, variant }) => {
+  const addItem = useAddItem()
+  const removeItem = useRemoveItem()
+  const { data } = useWishlist()
+  const { data: customer } = useCustomer()
+  const itemInWishlist = data?.items?.find(
+    (item) =>
+      item.product_id === productId &&
+      item.variant_id === variant?.node.entityId
+  )
+
+  const handleWishlistChange = async (e) => {
+    e.preventDefault()
+
+    if (!customer) {
+      return
+    }
+
+    if (itemInWishlist) {
+      await removeItem({ id: itemInWishlist.id! })
+    } else {
+      await addItem({
+        productId,
+        variantId: variant?.node.entityId!,
+      })
+    }
+  }
+
+  return (
+    <button onClick={handleWishlistChange}>
+      <Heart fill={itemInWishlist ? 'var(--pink)' : 'none'} />
+    </button>
+  )
+}
+```
+
+## Product Hooks and API
+
+### useSearch
+
+`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string.
+
+```jsx
+...
+import useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'
+
+const SearchPage = ({ searchString, category, brand, sortStr }) => {
+  const { data } = useSearch({
+    search: searchString || '',
+    categoryId: category?.entityId,
+    brandId: brand?.entityId,
+    sort: sortStr || '',
+  })
+
+  return (
+    <Grid layout="normal">
+      {data.products.map(({ node }) => (
+        <ProductCard key={node.path} product={node} />
+      ))}
+    </Grid>
+  )
+}
+```
+
+### getAllProducts
+
+API function to retrieve a product list.
+
+```js
+import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
+import getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
+
+const { products } = await getAllProducts({
+  variables: { field: 'featuredProducts', first: 6 },
+  config,
+  preview,
+})
+```
+
+### getProduct
+
+API product to retrieve a single product when provided with the product
+slug string.
+
+```js
+import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
+import getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'
+
+const { product } = await getProduct({
+  variables: { slug },
+  config,
+  preview,
+})
+```
+
+## More
+
+Feel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))
--- a/framework/bigcommerce/api/cart/handlers/add-item.ts
+++ b/framework/bigcommerce/api/cart/handlers/add-item.ts
@ -0,0 +1,40 @@
+import { parseCartItem } from '../../utils/parse-item'
+import getCartCookie from '../../utils/get-cart-cookie'
+import type { CartHandlers } from '..'
+
+// Return current cart info
+const addItem: CartHandlers['addItem'] = async ({
+  res,
+  body: { cartId, item },
+  config,
+}) => {
+  if (!item) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Missing item' }],
+    })
+  }
+  if (!item.quantity) item.quantity = 1
+
+  const options = {
+    method: 'POST',
+    body: JSON.stringify({
+      line_items: [parseCartItem(item)],
+      ...(!cartId && config.storeChannelId
+        ? { channel_id: config.storeChannelId }
+        : {}),
+    }),
+  }
+  const { data } = cartId
+    ? await config.storeApiFetch(`/v3/carts/${cartId}/items`, options)
+    : await config.storeApiFetch('/v3/carts', options)
+
+  // Create or update the cart cookie
+  res.setHeader(
+    'Set-Cookie',
+    getCartCookie(config.cartCookie, data.id, config.cartCookieMaxAge)
+  )
+  res.status(200).json({ data })
+}
+
+export default addItem
--- a/framework/bigcommerce/api/cart/handlers/get-cart.ts
+++ b/framework/bigcommerce/api/cart/handlers/get-cart.ts
@ -0,0 +1,29 @@
+import { BigcommerceApiError } from '../../utils/errors'
+import getCartCookie from '../../utils/get-cart-cookie'
+import type { Cart, CartHandlers } from '..'
+
+// Return current cart info
+const getCart: CartHandlers['getCart'] = async ({
+  res,
+  body: { cartId },
+  config,
+}) => {
+  let result: { data?: Cart } = {}
+
+  if (cartId) {
+    try {
+      result = await config.storeApiFetch(`/v3/carts/${cartId}`)
+    } catch (error) {
+      if (error instanceof BigcommerceApiError && error.status === 404) {
+        // Remove the cookie if it exists but the cart wasn't found
+        res.setHeader('Set-Cookie', getCartCookie(config.cartCookie))
+      } else {
+        throw error
+      }
+    }
+  }
+
+  res.status(200).json({ data: result.data ?? null })
+}
+
+export default getCart
--- a/framework/bigcommerce/api/cart/handlers/remove-item.ts
+++ b/framework/bigcommerce/api/cart/handlers/remove-item.ts
@ -0,0 +1,34 @@
+import getCartCookie from '../../utils/get-cart-cookie'
+import type { CartHandlers } from '..'
+
+// Return current cart info
+const removeItem: CartHandlers['removeItem'] = async ({
+  res,
+  body: { cartId, itemId },
+  config,
+}) => {
+  if (!cartId || !itemId) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Invalid request' }],
+    })
+  }
+
+  const result = await config.storeApiFetch<{ data: any } | null>(
+    `/v3/carts/${cartId}/items/${itemId}`,
+    { method: 'DELETE' }
+  )
+  const data = result?.data ?? null
+
+  res.setHeader(
+    'Set-Cookie',
+    data
+      ? // Update the cart cookie
+        getCartCookie(config.cartCookie, cartId, config.cartCookieMaxAge)
+      : // Remove the cart cookie if the cart was removed (empty items)
+        getCartCookie(config.cartCookie)
+  )
+  res.status(200).json({ data })
+}
+
+export default removeItem
--- a/framework/bigcommerce/api/cart/handlers/update-item.ts
+++ b/framework/bigcommerce/api/cart/handlers/update-item.ts
@ -0,0 +1,36 @@
+import { parseCartItem } from '../../utils/parse-item'
+import getCartCookie from '../../utils/get-cart-cookie'
+import type { CartHandlers } from '..'
+
+// Return current cart info
+const updateItem: CartHandlers['updateItem'] = async ({
+  res,
+  body: { cartId, itemId, item },
+  config,
+}) => {
+  if (!cartId || !itemId || !item) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Invalid request' }],
+    })
+  }
+
+  const { data } = await config.storeApiFetch(
+    `/v3/carts/${cartId}/items/${itemId}`,
+    {
+      method: 'PUT',
+      body: JSON.stringify({
+        line_item: parseCartItem(item),
+      }),
+    }
+  )
+
+  // Update the cart cookie
+  res.setHeader(
+    'Set-Cookie',
+    getCartCookie(config.cartCookie, cartId, config.cartCookieMaxAge)
+  )
+  res.status(200).json({ data })
+}
+
+export default updateItem
--- a/framework/bigcommerce/api/cart/index.ts
+++ b/framework/bigcommerce/api/cart/index.ts
@ -0,0 +1,116 @@
+import isAllowedMethod from '../utils/is-allowed-method'
+import createApiHandler, {
+  BigcommerceApiHandler,
+  BigcommerceHandler,
+} from '../utils/create-api-handler'
+import { BigcommerceApiError } from '../utils/errors'
+import getCart from './handlers/get-cart'
+import addItem from './handlers/add-item'
+import updateItem from './handlers/update-item'
+import removeItem from './handlers/remove-item'
+
+type OptionSelections = {
+	option_id: Number
+	option_value: Number|String
+}
+
+export type ItemBody = {
+  productId: number
+  variantId: number
+	quantity?: number
+	optionSelections?: OptionSelections
+}
+
+export type AddItemBody = { item: ItemBody }
+
+export type UpdateItemBody = { itemId: string; item: ItemBody }
+
+export type RemoveItemBody = { itemId: string }
+
+// TODO: this type should match:
+// https://developer.bigcommerce.com/api-reference/cart-checkout/server-server-cart-api/cart/getacart#responses
+export type Cart = {
+  id: string
+  parent_id?: string
+  customer_id: number
+  email: string
+  currency: { code: string }
+  tax_included: boolean
+  base_amount: number
+  discount_amount: number
+  cart_amount: number
+  line_items: {
+    custom_items: any[]
+    digital_items: any[]
+    gift_certificates: any[]
+    physical_items: any[]
+  }
+  // TODO: add missing fields
+}
+
+export type CartHandlers = {
+  getCart: BigcommerceHandler<Cart, { cartId?: string }>
+  addItem: BigcommerceHandler<Cart, { cartId?: string } & Partial<AddItemBody>>
+  updateItem: BigcommerceHandler<
+    Cart,
+    { cartId?: string } & Partial<UpdateItemBody>
+  >
+  removeItem: BigcommerceHandler<
+    Cart,
+    { cartId?: string } & Partial<RemoveItemBody>
+  >
+}
+
+const METHODS = ['GET', 'POST', 'PUT', 'DELETE']
+
+// TODO: a complete implementation should have schema validation for `req.body`
+const cartApi: BigcommerceApiHandler<Cart, CartHandlers> = async (
+  req,
+  res,
+  config,
+  handlers
+) => {
+  if (!isAllowedMethod(req, res, METHODS)) return
+
+  const { cookies } = req
+  const cartId = cookies[config.cartCookie]
+
+  try {
+    // Return current cart info
+    if (req.method === 'GET') {
+      const body = { cartId }
+      return await handlers['getCart']({ req, res, config, body })
+    }
+
+    // Create or add an item to the cart
+    if (req.method === 'POST') {
+      const body = { ...req.body, cartId }
+      return await handlers['addItem']({ req, res, config, body })
+    }
+
+    // Update item in cart
+    if (req.method === 'PUT') {
+      const body = { ...req.body, cartId }
+      return await handlers['updateItem']({ req, res, config, body })
+    }
+
+    // Remove an item from the cart
+    if (req.method === 'DELETE') {
+      const body = { ...req.body, cartId }
+      return await handlers['removeItem']({ req, res, config, body })
+    }
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof BigcommerceApiError
+        ? 'An unexpected error ocurred with the Bigcommerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+export const handlers = { getCart, addItem, updateItem, removeItem }
+
+export default createApiHandler(cartApi, handlers, {})
--- a/framework/bigcommerce/api/catalog/handlers/get-products.ts
+++ b/framework/bigcommerce/api/catalog/handlers/get-products.ts
@ -0,0 +1,73 @@
+import getAllProducts, { ProductEdge } from '../../operations/get-all-products'
+import type { ProductsHandlers } from '../products'
+
+const SORT: { [key: string]: string | undefined } = {
+  latest: 'id',
+  trending: 'total_sold',
+  price: 'price',
+}
+const LIMIT = 12
+
+// Return current cart info
+const getProducts: ProductsHandlers['getProducts'] = async ({
+  res,
+  body: { search, category, brand, sort },
+  config,
+}) => {
+  // Use a dummy base as we only care about the relative path
+  const url = new URL('/v3/catalog/products', 'http://a')
+
+  url.searchParams.set('is_visible', 'true')
+  url.searchParams.set('limit', String(LIMIT))
+
+  if (search) url.searchParams.set('keyword', search)
+
+  if (category && Number.isInteger(Number(category)))
+    url.searchParams.set('categories:in', category)
+
+  if (brand && Number.isInteger(Number(brand)))
+    url.searchParams.set('brand_id', brand)
+
+  if (sort) {
+    const [_sort, direction] = sort.split('-')
+    const sortValue = SORT[_sort]
+
+    if (sortValue && direction) {
+      url.searchParams.set('sort', sortValue)
+      url.searchParams.set('direction', direction)
+    }
+  }
+
+  // We only want the id of each product
+  url.searchParams.set('include_fields', 'id')
+
+  const { data } = await config.storeApiFetch<{ data: { id: number }[] }>(
+    url.pathname + url.search
+  )
+  const entityIds = data.map((p) => p.id)
+  const found = entityIds.length > 0
+  // We want the GraphQL version of each product
+  const graphqlData = await getAllProducts({
+    variables: { first: LIMIT, entityIds },
+    config,
+  })
+  // Put the products in an object that we can use to get them by id
+  const productsById = graphqlData.products.reduce<{
+    [k: number]: ProductEdge
+  }>((prods, p) => {
+    prods[p.node.entityId] = p
+    return prods
+  }, {})
+  const products: ProductEdge[] = found ? [] : graphqlData.products
+
+  // Populate the products array with the graphql products, in the order
+  // assigned by the list of entity ids
+  entityIds.forEach((id) => {
+    const product = productsById[id]
+    if (product) products.push(product)
+  })
+
+  res.status(200).json({ data: { products, found } })
+}
+
+export default getProducts
--- a/framework/bigcommerce/api/catalog/products.ts
+++ b/framework/bigcommerce/api/catalog/products.ts
@ -0,0 +1,48 @@
+import isAllowedMethod from '../utils/is-allowed-method'
+import createApiHandler, {
+  BigcommerceApiHandler,
+  BigcommerceHandler,
+} from '../utils/create-api-handler'
+import { BigcommerceApiError } from '../utils/errors'
+import type { ProductEdge } from '../operations/get-all-products'
+import getProducts from './handlers/get-products'
+
+export type SearchProductsData = {
+  products: ProductEdge[]
+  found: boolean
+}
+
+export type ProductsHandlers = {
+  getProducts: BigcommerceHandler<
+    SearchProductsData,
+    { search?: 'string'; category?: string; brand?: string; sort?: string }
+  >
+}
+
+const METHODS = ['GET']
+
+// TODO: a complete implementation should have schema validation for `req.body`
+const productsApi: BigcommerceApiHandler<
+  SearchProductsData,
+  ProductsHandlers
+> = async (req, res, config, handlers) => {
+  if (!isAllowedMethod(req, res, METHODS)) return
+
+  try {
+    const body = req.query
+    return await handlers['getProducts']({ req, res, config, body })
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof BigcommerceApiError
+        ? 'An unexpected error ocurred with the Bigcommerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+export const handlers = { getProducts }
+
+export default createApiHandler(productsApi, handlers, {})
--- a/framework/bigcommerce/api/checkout.ts
+++ b/framework/bigcommerce/api/checkout.ts
@ -0,0 +1,77 @@
+import isAllowedMethod from './utils/is-allowed-method'
+import createApiHandler, {
+  BigcommerceApiHandler,
+} from './utils/create-api-handler'
+import { BigcommerceApiError } from './utils/errors'
+
+const METHODS = ['GET']
+const fullCheckout = true
+
+// TODO: a complete implementation should have schema validation for `req.body`
+const checkoutApi: BigcommerceApiHandler<any> = async (req, res, config) => {
+  if (!isAllowedMethod(req, res, METHODS)) return
+
+  const { cookies } = req
+  const cartId = cookies[config.cartCookie]
+
+  try {
+    if (!cartId) {
+      res.redirect('/cart')
+      return
+    }
+
+    const { data } = await config.storeApiFetch(
+      `/v3/carts/${cartId}/redirect_urls`,
+      {
+        method: 'POST',
+      }
+    )
+
+    if (fullCheckout) {
+      res.redirect(data.checkout_url)
+      return
+    }
+
+    // TODO: make the embedded checkout work too!
+    const html = `
+      <!DOCTYPE html>
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Checkout</title>
+          <script src="https://checkout-sdk.bigcommerce.com/v1/loader.js"></script>
+          <script>
+            window.onload = function() {
+              checkoutKitLoader.load('checkout-sdk').then(function (service) {
+                service.embedCheckout({
+                  containerId: 'checkout',
+                  url: '${data.embedded_checkout_url}'
+                });
+              });
+            }
+          </script>
+        </head>
+        <body>
+          <div id="checkout"></div>
+        </body>
+      </html>
+    `
+
+    res.status(200)
+    res.setHeader('Content-Type', 'text/html')
+    res.write(html)
+    res.end()
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof BigcommerceApiError
+        ? 'An unexpected error ocurred with the Bigcommerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+export default createApiHandler(checkoutApi, {}, {})
--- a/framework/bigcommerce/api/customers/handlers/get-logged-in-customer.ts
+++ b/framework/bigcommerce/api/customers/handlers/get-logged-in-customer.ts
@ -0,0 +1,59 @@
+import type { GetLoggedInCustomerQuery } from '../../../schema'
+import type { CustomersHandlers } from '..'
+
+export const getLoggedInCustomerQuery = /* GraphQL */ `
+  query getLoggedInCustomer {
+    customer {
+      entityId
+      firstName
+      lastName
+      email
+      company
+      customerGroupId
+      notes
+      phone
+      addressCount
+      attributeCount
+      storeCredit {
+        value
+        currencyCode
+      }
+    }
+  }
+`
+
+export type Customer = NonNullable<GetLoggedInCustomerQuery['customer']>
+
+const getLoggedInCustomer: CustomersHandlers['getLoggedInCustomer'] = async ({
+  req,
+  res,
+  config,
+}) => {
+  const token = req.cookies[config.customerCookie]
+
+  if (token) {
+    const { data } = await config.fetch<GetLoggedInCustomerQuery>(
+      getLoggedInCustomerQuery,
+      undefined,
+      {
+        headers: {
+          cookie: `${config.customerCookie}=${token}`,
+        },
+      }
+    )
+    const { customer } = data
+
+    if (!customer) {
+      return res.status(400).json({
+        data: null,
+        errors: [{ message: 'Customer not found', code: 'not_found' }],
+      })
+    }
+
+    return res.status(200).json({ data: { customer } })
+  }
+
+  res.status(200).json({ data: null })
+}
+
+export default getLoggedInCustomer
--- a/framework/bigcommerce/api/customers/handlers/login.ts
+++ b/framework/bigcommerce/api/customers/handlers/login.ts
@ -0,0 +1,49 @@
+import { FetcherError } from '@commerce/utils/errors'
+import login from '../../operations/login'
+import type { LoginHandlers } from '../login'
+
+const invalidCredentials = /invalid credentials/i
+
+const loginHandler: LoginHandlers['login'] = async ({
+  res,
+  body: { email, password },
+  config,
+}) => {
+  // TODO: Add proper validations with something like Ajv
+  if (!(email && password)) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Invalid request' }],
+    })
+  }
+  // TODO: validate the password and email
+  // Passwords must be at least 7 characters and contain both alphabetic
+  // and numeric characters.
+
+  try {
+    await login({ variables: { email, password }, config, res })
+  } catch (error) {
+    // Check if the email and password didn't match an existing account
+    if (
+      error instanceof FetcherError &&
+      invalidCredentials.test(error.message)
+    ) {
+      return res.status(401).json({
+        data: null,
+        errors: [
+          {
+            message:
+              'Cannot find an account that matches the provided credentials',
+            code: 'invalid_credentials',
+          },
+        ],
+      })
+    }
+
+    throw error
+  }
+
+  res.status(200).json({ data: null })
+}
+
+export default loginHandler
--- a/framework/bigcommerce/api/customers/handlers/logout.ts
+++ b/framework/bigcommerce/api/customers/handlers/logout.ts
@ -0,0 +1,23 @@
+import { serialize } from 'cookie'
+import { LogoutHandlers } from '../logout'
+
+const logoutHandler: LogoutHandlers['logout'] = async ({
+  res,
+  body: { redirectTo },
+  config,
+}) => {
+  // Remove the cookie
+  res.setHeader(
+    'Set-Cookie',
+    serialize(config.customerCookie, '', { maxAge: -1, path: '/' })
+  )
+
+  // Only allow redirects to a relative URL
+  if (redirectTo?.startsWith('/')) {
+    res.redirect(redirectTo)
+  } else {
+    res.status(200).json({ data: null })
+  }
+}
+
+export default logoutHandler
--- a/framework/bigcommerce/api/customers/handlers/signup.ts
+++ b/framework/bigcommerce/api/customers/handlers/signup.ts
@ -0,0 +1,62 @@
+import { BigcommerceApiError } from '../../utils/errors'
+import login from '../../operations/login'
+import { SignupHandlers } from '../signup'
+
+const signup: SignupHandlers['signup'] = async ({
+  res,
+  body: { firstName, lastName, email, password },
+  config,
+}) => {
+  // TODO: Add proper validations with something like Ajv
+  if (!(firstName && lastName && email && password)) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Invalid request' }],
+    })
+  }
+  // TODO: validate the password and email
+  // Passwords must be at least 7 characters and contain both alphabetic
+  // and numeric characters.
+
+  try {
+    await config.storeApiFetch('/v3/customers', {
+      method: 'POST',
+      body: JSON.stringify([
+        {
+          first_name: firstName,
+          last_name: lastName,
+          email,
+          authentication: {
+            new_password: password,
+          },
+        },
+      ]),
+    })
+  } catch (error) {
+    if (error instanceof BigcommerceApiError && error.status === 422) {
+      const hasEmailError = '0.email' in error.data?.errors
+
+      // If there's an error with the email, it most likely means it's duplicated
+      if (hasEmailError) {
+        return res.status(400).json({
+          data: null,
+          errors: [
+            {
+              message: 'The email is already in use',
+              code: 'duplicated_email',
+            },
+          ],
+        })
+      }
+    }
+
+    throw error
+  }
+
+  // Login the customer right after creating it
+  await login({ variables: { email, password }, res, config })
+
+  res.status(200).json({ data: null })
+}
+
+export default signup
--- a/framework/bigcommerce/api/customers/index.ts
+++ b/framework/bigcommerce/api/customers/index.ts
@ -0,0 +1,46 @@
+import createApiHandler, {
+  BigcommerceApiHandler,
+  BigcommerceHandler,
+} from '../utils/create-api-handler'
+import isAllowedMethod from '../utils/is-allowed-method'
+import { BigcommerceApiError } from '../utils/errors'
+import getLoggedInCustomer, {
+  Customer,
+} from './handlers/get-logged-in-customer'
+
+export type { Customer }
+
+export type CustomerData = {
+  customer: Customer
+}
+
+export type CustomersHandlers = {
+  getLoggedInCustomer: BigcommerceHandler<CustomerData>
+}
+
+const METHODS = ['GET']
+
+const customersApi: BigcommerceApiHandler<
+  CustomerData,
+  CustomersHandlers
+> = async (req, res, config, handlers) => {
+  if (!isAllowedMethod(req, res, METHODS)) return
+
+  try {
+    const body = null
+    return await handlers['getLoggedInCustomer']({ req, res, config, body })
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof BigcommerceApiError
+        ? 'An unexpected error ocurred with the Bigcommerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+const handlers = { getLoggedInCustomer }
+
+export default createApiHandler(customersApi, handlers, {})
--- a/framework/bigcommerce/api/customers/login.ts
+++ b/framework/bigcommerce/api/customers/login.ts
@ -0,0 +1,45 @@
+import createApiHandler, {
+  BigcommerceApiHandler,
+  BigcommerceHandler,
+} from '../utils/create-api-handler'
+import isAllowedMethod from '../utils/is-allowed-method'
+import { BigcommerceApiError } from '../utils/errors'
+import login from './handlers/login'
+
+export type LoginBody = {
+  email: string
+  password: string
+}
+
+export type LoginHandlers = {
+  login: BigcommerceHandler<null, Partial<LoginBody>>
+}
+
+const METHODS = ['POST']
+
+const loginApi: BigcommerceApiHandler<null, LoginHandlers> = async (
+  req,
+  res,
+  config,
+  handlers
+) => {
+  if (!isAllowedMethod(req, res, METHODS)) return
+
+  try {
+    const body = req.body ?? {}
+    return await handlers['login']({ req, res, config, body })
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof BigcommerceApiError
+        ? 'An unexpected error ocurred with the Bigcommerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+const handlers = { login }
+
+export default createApiHandler(loginApi, handlers, {})
--- a/framework/bigcommerce/api/customers/logout.ts
+++ b/framework/bigcommerce/api/customers/logout.ts
@ -0,0 +1,42 @@
+import createApiHandler, {
+  BigcommerceApiHandler,
+  BigcommerceHandler,
+} from '../utils/create-api-handler'
+import isAllowedMethod from '../utils/is-allowed-method'
+import { BigcommerceApiError } from '../utils/errors'
+import logout from './handlers/logout'
+
+export type LogoutHandlers = {
+  logout: BigcommerceHandler<null, { redirectTo?: string }>
+}
+
+const METHODS = ['GET']
+
+const logoutApi: BigcommerceApiHandler<null, LogoutHandlers> = async (
+  req,
+  res,
+  config,
+  handlers
+) => {
+  if (!isAllowedMethod(req, res, METHODS)) return
+
+  try {
+    const redirectTo = req.query.redirect_to
+    const body = typeof redirectTo === 'string' ? { redirectTo } : {}
+
+    return await handlers['logout']({ req, res, config, body })
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof BigcommerceApiError
+        ? 'An unexpected error ocurred with the Bigcommerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+const handlers = { logout }
+
+export default createApiHandler(logoutApi, handlers, {})
--- a/framework/bigcommerce/api/customers/signup.ts
+++ b/framework/bigcommerce/api/customers/signup.ts
@ -0,0 +1,50 @@
+import createApiHandler, {
+  BigcommerceApiHandler,
+  BigcommerceHandler,
+} from '../utils/create-api-handler'
+import isAllowedMethod from '../utils/is-allowed-method'
+import { BigcommerceApiError } from '../utils/errors'
+import signup from './handlers/signup'
+
+export type SignupBody = {
+  firstName: string
+  lastName: string
+  email: string
+  password: string
+}
+
+export type SignupHandlers = {
+  signup: BigcommerceHandler<null, { cartId?: string } & Partial<SignupBody>>
+}
+
+const METHODS = ['POST']
+
+const signupApi: BigcommerceApiHandler<null, SignupHandlers> = async (
+  req,
+  res,
+  config,
+  handlers
+) => {
+  if (!isAllowedMethod(req, res, METHODS)) return
+
+  const { cookies } = req
+  const cartId = cookies[config.cartCookie]
+
+  try {
+    const body = { ...req.body, cartId }
+    return await handlers['signup']({ req, res, config, body })
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof BigcommerceApiError
+        ? 'An unexpected error ocurred with the Bigcommerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+const handlers = { signup }
+
+export default createApiHandler(signupApi, handlers, {})
--- a/framework/bigcommerce/api/definitions/catalog.ts
+++ b/framework/bigcommerce/api/definitions/catalog.ts
--- a/framework/bigcommerce/api/definitions/store-content.ts
+++ b/framework/bigcommerce/api/definitions/store-content.ts
@ -0,0 +1,329 @@
+/**
+ * This file was auto-generated by swagger-to-ts.
+ * Do not make direct changes to the file.
+ */
+
+export interface definitions {
+  blogPost_Full: {
+    /**
+     * ID of this blog post. (READ-ONLY)
+     */
+    id?: number
+  } & definitions['blogPost_Base']
+  addresses: {
+    /**
+     * Full URL of where the resource is located.
+     */
+    url?: string
+    /**
+     * Resource being accessed.
+     */
+    resource?: string
+  }
+  formField: {
+    /**
+     * Name of the form field
+     */
+    name?: string
+    /**
+     * Value of the form field
+     */
+    value?: string
+  }
+  page_Full: {
+    /**
+     * ID of the page.
+     */
+    id?: number
+  } & definitions['page_Base']
+  redirect: {
+    /**
+     * Numeric ID of the redirect.
+     */
+    id?: number
+    /**
+     * The path from which to redirect.
+     */
+    path: string
+    forward: definitions['forward']
+    /**
+     * URL of the redirect. READ-ONLY
+     */
+    url?: string
+  }
+  forward: {
+    /**
+     * The type of redirect. If it is a `manual` redirect then type will always be manual. Dynamic redirects will have the type of the page. Such as product or category.
+     */
+    type?: string
+    /**
+     * Reference of the redirect. Dynamic redirects will have the category or product number. Manual redirects will have the url that is being directed to.
+     */
+    ref?: number
+  }
+  customer_Full: {
+    /**
+     * Unique numeric ID of this customer. This is a READ-ONLY field; do not set or modify its value in a POST or PUT request.
+     */
+    id?: number
+    /**
+     * Not returned in any responses, but accepts up to two fields allowing you to set the customer’s password. If a password is not supplied, it is generated automatically. For further information about using this object, please see the Customers resource documentation.
+     */
+    _authentication?: {
+      force_reset?: string
+      password?: string
+      password_confirmation?: string
+    }
+    /**
+     * The name of the company for which the customer works.
+     */
+    company?: string
+    /**
+     * First name of the customer.
+     */
+    first_name: string
+    /**
+     * Last name of the customer.
+     */
+    last_name: string
+    /**
+     * Email address of the customer.
+     */
+    email: string
+    /**
+     * Phone number of the customer.
+     */
+    phone?: string
+    /**
+     * Date on which the customer registered from the storefront or was created in the control panel. This is a READ-ONLY field; do not set or modify its value in a POST or PUT request.
+     */
+    date_created?: string
+    /**
+     * Date on which the customer updated their details in the storefront or was updated in the control panel. This is a READ-ONLY field; do not set or modify its value in a POST or PUT request.
+     */
+    date_modified?: string
+    /**
+     * The amount of credit the customer has. (Float, Float as String, Integer)
+     */
+    store_credit?: string
+    /**
+     * The customer’s IP address when they signed up.
+     */
+    registration_ip_address?: string
+    /**
+     * The group to which the customer belongs.
+     */
+    customer_group_id?: number
+    /**
+     * Store-owner notes on the customer.
+     */
+    notes?: string
+    /**
+     * Used to identify customers who fall into special sales-tax categories – in particular, those who are fully or partially exempt from paying sales tax. Can be blank, or can contain a single AvaTax code. (The codes are case-sensitive.) Stores that subscribe to BigCommerce’s Avalara Premium integration will use this code to determine how/whether to apply sales tax. Does not affect sales-tax calculations for stores that do not subscribe to Avalara Premium.
+     */
+    tax_exempt_category?: string
+    /**
+     * Records whether the customer would like to receive marketing content from this store. READ-ONLY.This is a READ-ONLY field; do not set or modify its value in a POST or PUT request.
+     */
+    accepts_marketing?: boolean
+    addresses?: definitions['addresses']
+    /**
+     * Array of custom fields. This is a READ-ONLY field; do not set or modify its value in a POST or PUT request.
+     */
+    form_fields?: definitions['formField'][]
+    /**
+     * Force a password change on next login.
+     */
+    reset_pass_on_login?: boolean
+  }
+  categoryAccessLevel: {
+    /**
+     * + `all` - Customers can access all categories
+     *  + `specific`  - Customers can access a specific list of categories
+     * + `none` - Customers are prevented from viewing any of the categories in this group.
+     */
+    type?: 'all' | 'specific' | 'none'
+    /**
+     * Is an array of category IDs and should be supplied only if `type` is specific.
+     */
+    categories?: string[]
+  }
+  timeZone: {
+    /**
+     * a string identifying the time zone, in the format: <Continent-name>/<City-name>.
+     */
+    name?: string
+    /**
+     * a negative or positive number, identifying the offset from UTC/GMT, in seconds, during winter/standard time.
+     */
+    raw_offset?: number
+    /**
+     * "-/+" offset from UTC/GMT, in seconds, during summer/daylight saving time.
+     */
+    dst_offset?: number
+    /**
+     * a boolean indicating whether this time zone observes daylight saving time.
+     */
+    dst_correction?: boolean
+    date_format?: definitions['dateFormat']
+  }
+  count_Response: { count?: number }
+  dateFormat: {
+    /**
+     * string that defines dates’ display format, in the pattern: M jS Y
+     */
+    display?: string
+    /**
+     * string that defines the CSV export format for orders, customers, and products, in the pattern: M jS Y
+     */
+    export?: string
+    /**
+     * string that defines dates’ extended-display format, in the pattern: M jS Y @ g:i A.
+     */
+    extended_display?: string
+  }
+  blogTags: { tag?: string; post_ids?: number[] }[]
+  blogPost_Base: {
+    /**
+     * Title of this blog post.
+     */
+    title: string
+    /**
+     * URL for the public blog post.
+     */
+    url?: string
+    /**
+     * URL to preview the blog post. (READ-ONLY)
+     */
+    preview_url?: string
+    /**
+     * Text body of the blog post.
+     */
+    body: string
+    /**
+     * Tags to characterize the blog post.
+     */
+    tags?: string[]
+    /**
+     * Summary of the blog post. (READ-ONLY)
+     */
+    summary?: string
+    /**
+     * Whether the blog post is published.
+     */
+    is_published?: boolean
+    published_date?: definitions['publishedDate']
+    /**
+     * Published date in `ISO 8601` format.
+     */
+    published_date_iso8601?: string
+    /**
+     * Description text for this blog post’s `<meta/>` element.
+     */
+    meta_description?: string
+    /**
+     * Keywords for this blog post’s `<meta/>` element.
+     */
+    meta_keywords?: string
+    /**
+     * Name of the blog post’s author.
+     */
+    author?: string
+    /**
+     * Local path to a thumbnail uploaded to `product_images/` via [WebDav](https://support.bigcommerce.com/s/article/File-Access-WebDAV).
+     */
+    thumbnail_path?: string
+  }
+  publishedDate: { timezone_type?: string; date?: string; timezone?: string }
+  /**
+   * Not returned in any responses, but accepts up to two fields allowing you to set the customer’s password. If a password is not supplied, it is generated automatically. For further information about using this object, please see the Customers resource documentation.
+   */
+  authentication: {
+    force_reset?: string
+    password?: string
+    password_confirmation?: string
+  }
+  customer_Base: { [key: string]: any }
+  page_Base: {
+    /**
+     * ID of any parent Web page.
+     */
+    parent_id?: number
+    /**
+     * `page`: free-text page
+     * `link`: link to another web address
+     * `rss_feed`: syndicated content from an RSS feed
+     * `contact_form`: When the store's contact form is used.
+     */
+    type: 'page' | 'rss_feed' | 'contact_form' | 'raw' | 'link'
+    /**
+     * Where the page’s type is a contact form: object whose members are the fields enabled (in the control panel) for storefront display. Possible members are:`fullname`: full name of the customer submitting the form; `phone`: customer’s phone number, as submitted on the form; `companyname`: customer’s submitted company name; `orderno`: customer’s submitted order number; `rma`: customer’s submitted RMA (Return Merchandise Authorization) number.
+     */
+    contact_fields?: string
+    /**
+     * Where the page’s type is a contact form: email address that receives messages sent via the form.
+     */
+    email?: string
+    /**
+     * Page name, as displayed on the storefront.
+     */
+    name: string
+    /**
+     * Relative URL on the storefront for this page.
+     */
+    url?: string
+    /**
+     * Description contained within this page’s `<meta/>` element.
+     */
+    meta_description?: string
+    /**
+     * HTML or variable that populates this page’s `<body>` element, in default/desktop view. Required in POST if page type is `raw`.
+     */
+    body: string
+    /**
+     * HTML to use for this page's body when viewed in the mobile template (deprecated).
+     */
+    mobile_body?: string
+    /**
+     * If true, this page has a mobile version.
+     */
+    has_mobile_version?: boolean
+    /**
+     * If true, this page appears in the storefront’s navigation menu.
+     */
+    is_visible?: boolean
+    /**
+     * If true, this page is the storefront’s home page.
+     */
+    is_homepage?: boolean
+    /**
+     * Text specified for this page’s `<title>` element. (If empty, the value of the name property is used.)
+     */
+    meta_title?: string
+    /**
+     * Layout template for this page. This field is writable only for stores with a Blueprint theme applied.
+     */
+    layout_file?: string
+    /**
+     * Order in which this page should display on the storefront. (Lower integers specify earlier display.)
+     */
+    sort_order?: number
+    /**
+     * Comma-separated list of keywords that shoppers can use to locate this page when searching the store.
+     */
+    search_keywords?: string
+    /**
+     * Comma-separated list of SEO-relevant keywords to include in the page’s `<meta/>` element.
+     */
+    meta_keywords?: string
+    /**
+     * If page type is `rss_feed` the n this field is visisble. Required in POST required for `rss page` type.
+     */
+    feed: string
+    /**
+     * If page type is `link` this field is returned. Required in  POST to create a `link` page.
+     */
+    link: string
+    content_type?: 'application/json' | 'text/javascript' | 'text/html'
+  }
+}
--- a/framework/bigcommerce/api/definitions/wishlist.ts
+++ b/framework/bigcommerce/api/definitions/wishlist.ts
@ -0,0 +1,142 @@
+/**
+ * This file was auto-generated by swagger-to-ts.
+ * Do not make direct changes to the file.
+ */
+
+export interface definitions {
+  wishlist_Post: {
+    /**
+     * The customer id.
+     */
+    customer_id: number
+    /**
+     * Whether the wishlist is available to the public.
+     */
+    is_public?: boolean
+    /**
+     * The title of the wishlist.
+     */
+    name?: string
+    /**
+     * Array of Wishlist items.
+     */
+    items?: {
+      /**
+       * The ID of the product.
+       */
+      product_id?: number
+      /**
+       * The variant ID of the product.
+       */
+      variant_id?: number
+    }[]
+  }
+  wishlist_Put: {
+    /**
+     * The customer id.
+     */
+    customer_id: number
+    /**
+     * Whether the wishlist is available to the public.
+     */
+    is_public?: boolean
+    /**
+     * The title of the wishlist.
+     */
+    name?: string
+    /**
+     * Array of Wishlist items.
+     */
+    items?: {
+      /**
+       * The ID of the item
+       */
+      id?: number
+      /**
+       * The ID of the product.
+       */
+      product_id?: number
+      /**
+       * The variant ID of the item.
+       */
+      variant_id?: number
+    }[]
+  }
+  wishlist_Full: {
+    /**
+     * Wishlist ID, provided after creating a wishlist with a POST.
+     */
+    id?: number
+    /**
+     * The ID the customer to which the wishlist belongs.
+     */
+    customer_id?: number
+    /**
+     * The Wishlist's name.
+     */
+    name?: string
+    /**
+     * Whether the Wishlist is available to the public.
+     */
+    is_public?: boolean
+    /**
+     * The token of the Wishlist. This is created internally within BigCommerce. The Wishlist ID is to be used for external apps. Read-Only
+     */
+    token?: string
+    /**
+     * Array of Wishlist items
+     */
+    items?: definitions['wishlistItem_Full'][]
+  }
+  wishlistItem_Full: {
+    /**
+     * The ID of the item
+     */
+    id?: number
+    /**
+     * The ID of the product.
+     */
+    product_id?: number
+    /**
+     * The variant ID of the item.
+     */
+    variant_id?: number
+  }
+  wishlistItem_Post: {
+    /**
+     * The ID of the product.
+     */
+    product_id?: number
+    /**
+     * The variant ID of the product.
+     */
+    variant_id?: number
+  }
+  /**
+   * Data about the response, including pagination and collection totals.
+   */
+  pagination: {
+    /**
+     * Total number of items in the result set.
+     */
+    total?: number
+    /**
+     * Total number of items in the collection response.
+     */
+    count?: number
+    /**
+     * The amount of items returned in the collection per page, controlled by the limit parameter.
+     */
+    per_page?: number
+    /**
+     * The page you are currently on within the collection.
+     */
+    current_page?: number
+    /**
+     * The total number of pages in the collection.
+     */
+    total_pages?: number
+  }
+  error: { status?: number; title?: string; type?: string }
+  metaCollection: { pagination?: definitions['pagination'] }
+}
--- a/framework/bigcommerce/api/fragments/category-tree.ts
+++ b/framework/bigcommerce/api/fragments/category-tree.ts
@ -0,0 +1,9 @@
+export const categoryTreeItemFragment = /* GraphQL */ `
+  fragment categoryTreeItem on CategoryTreeItem {
+    entityId
+    name
+    path
+    description
+    productCount
+  }
+`
--- a/framework/bigcommerce/api/fragments/product.ts
+++ b/framework/bigcommerce/api/fragments/product.ts
@ -0,0 +1,113 @@
+export const productPrices = /* GraphQL */ `
+  fragment productPrices on Prices {
+    price {
+      value
+      currencyCode
+    }
+    salePrice {
+      value
+      currencyCode
+    }
+    retailPrice {
+      value
+      currencyCode
+    }
+  }
+`
+
+export const swatchOptionFragment = /* GraphQL */ `
+  fragment swatchOption on SwatchOptionValue {
+    isDefault
+    hexColors
+  }
+`
+
+export const multipleChoiceOptionFragment = /* GraphQL */ `
+  fragment multipleChoiceOption on MultipleChoiceOption {
+    values {
+      edges {
+        node {
+          label
+          ...swatchOption
+        }
+      }
+    }
+  }
+
+  ${swatchOptionFragment}
+`
+
+export const productInfoFragment = /* GraphQL */ `
+  fragment productInfo on Product {
+    entityId
+    name
+    path
+    brand {
+      entityId
+    }
+    description
+    prices {
+      ...productPrices
+    }
+    images {
+      edges {
+        node {
+          urlOriginal
+          altText
+          isDefault
+        }
+      }
+    }
+    variants {
+      edges {
+        node {
+          entityId
+          defaultImage {
+            urlOriginal
+            altText
+            isDefault
+          }
+        }
+      }
+    }
+    productOptions {
+      edges {
+        node {
+          __typename
+          entityId
+          displayName
+          ...multipleChoiceOption
+        }
+      }
+    }
+    localeMeta: metafields(namespace: $locale, keys: ["name", "description"])
+      @include(if: $hasLocale) {
+      edges {
+        node {
+          key
+          value
+        }
+      }
+    }
+  }
+
+  ${productPrices}
+  ${multipleChoiceOptionFragment}
+`
+
+export const productConnectionFragment = /* GraphQL */ `
+  fragment productConnnection on ProductConnection {
+    pageInfo {
+      startCursor
+      endCursor
+    }
+    edges {
+      cursor
+      node {
+        ...productInfo
+      }
+    }
+  }
+
+  ${productInfoFragment}
+`
--- a/framework/bigcommerce/api/index.ts
+++ b/framework/bigcommerce/api/index.ts
@ -0,0 +1,88 @@
+import type { RequestInit } from '@vercel/fetch'
+import type { CommerceAPIConfig } from '@commerce/api'
+import fetchGraphqlApi from './utils/fetch-graphql-api'
+import fetchStoreApi from './utils/fetch-store-api'
+
+export interface BigcommerceConfig extends CommerceAPIConfig {
+  // Indicates if the returned metadata with translations should be applied to the
+  // data or returned as it is
+  applyLocale?: boolean
+  storeApiUrl: string
+  storeApiToken: string
+  storeApiClientId: string
+  storeChannelId?: string
+  storeApiFetch<T>(endpoint: string, options?: RequestInit): Promise<T>
+}
+
+const API_URL = process.env.BIGCOMMERCE_STOREFRONT_API_URL
+const API_TOKEN = process.env.BIGCOMMERCE_STOREFRONT_API_TOKEN
+const STORE_API_URL = process.env.BIGCOMMERCE_STORE_API_URL
+const STORE_API_TOKEN = process.env.BIGCOMMERCE_STORE_API_TOKEN
+const STORE_API_CLIENT_ID = process.env.BIGCOMMERCE_STORE_API_CLIENT_ID
+const STORE_CHANNEL_ID = process.env.BIGCOMMERCE_CHANNEL_ID
+
+if (!API_URL) {
+  throw new Error(
+    `The environment variable BIGCOMMERCE_STOREFRONT_API_URL is missing and it's required to access your store`
+  )
+}
+
+if (!API_TOKEN) {
+  throw new Error(
+    `The environment variable BIGCOMMERCE_STOREFRONT_API_TOKEN is missing and it's required to access your store`
+  )
+}
+
+if (!(STORE_API_URL && STORE_API_TOKEN && STORE_API_CLIENT_ID)) {
+  throw new Error(
+    `The environment variables BIGCOMMERCE_STORE_API_URL, BIGCOMMERCE_STORE_API_TOKEN, BIGCOMMERCE_STORE_API_CLIENT_ID have to be set in order to access the REST API of your store`
+  )
+}
+
+export class Config {
+  private config: BigcommerceConfig
+
+  constructor(config: Omit<BigcommerceConfig, 'customerCookie'>) {
+    this.config = {
+      ...config,
+      // The customerCookie is not customizable for now, BC sets the cookie and it's
+      // not important to rename it
+      customerCookie: 'SHOP_TOKEN',
+    }
+  }
+
+  getConfig(userConfig: Partial<BigcommerceConfig> = {}) {
+    return Object.entries(userConfig).reduce<BigcommerceConfig>(
+      (cfg, [key, value]) => Object.assign(cfg, { [key]: value }),
+      { ...this.config }
+    )
+  }
+
+  setConfig(newConfig: Partial<BigcommerceConfig>) {
+    Object.assign(this.config, newConfig)
+  }
+}
+
+const ONE_DAY = 60 * 60 * 24
+const config = new Config({
+  commerceUrl: API_URL,
+  apiToken: API_TOKEN,
+  cartCookie: process.env.BIGCOMMERCE_CART_COOKIE ?? 'bc_cartId',
+  cartCookieMaxAge: ONE_DAY * 30,
+  fetch: fetchGraphqlApi,
+  applyLocale: true,
+  // REST API only
+  storeApiUrl: STORE_API_URL,
+  storeApiToken: STORE_API_TOKEN,
+  storeApiClientId: STORE_API_CLIENT_ID,
+  storeChannelId: STORE_CHANNEL_ID,
+  storeApiFetch: fetchStoreApi,
+})
+
+export function getConfig(userConfig?: Partial<BigcommerceConfig>) {
+  return config.getConfig(userConfig)
+}
+
+export function setConfig(newConfig: Partial<BigcommerceConfig>) {
+  return config.setConfig(newConfig)
+}
--- a/framework/bigcommerce/api/operations/get-all-pages.ts
+++ b/framework/bigcommerce/api/operations/get-all-pages.ts
@ -0,0 +1,43 @@
+import type { RecursivePartial, RecursiveRequired } from '../utils/types'
+import { BigcommerceConfig, getConfig } from '..'
+import { definitions } from '../definitions/store-content'
+
+export type Page = definitions['page_Full']
+
+export type GetAllPagesResult<
+  T extends { pages: any[] } = { pages: Page[] }
+> = T
+
+async function getAllPages(opts?: {
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetAllPagesResult>
+
+async function getAllPages<T extends { pages: any[] }>(opts: {
+  url: string
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetAllPagesResult<T>>
+
+async function getAllPages({
+  config,
+  preview,
+}: {
+  url?: string
+  config?: BigcommerceConfig
+  preview?: boolean
+} = {}): Promise<GetAllPagesResult> {
+  config = getConfig(config)
+  // RecursivePartial forces the method to check for every prop in the data, which is
+  // required in case there's a custom `url`
+  const { data } = await config.storeApiFetch<
+    RecursivePartial<{ data: Page[] }>
+  >('/v3/content/pages')
+  const pages = (data as RecursiveRequired<typeof data>) ?? []
+
+  return {
+    pages: preview ? pages : pages.filter((p) => p.is_visible),
+  }
+}
+
+export default getAllPages
--- a/framework/bigcommerce/api/operations/get-all-product-paths.ts
+++ b/framework/bigcommerce/api/operations/get-all-product-paths.ts
@ -0,0 +1,71 @@
+import type {
+  GetAllProductPathsQuery,
+  GetAllProductPathsQueryVariables,
+} from '../../schema'
+import type { RecursivePartial, RecursiveRequired } from '../utils/types'
+import filterEdges from '../utils/filter-edges'
+import { BigcommerceConfig, getConfig } from '..'
+
+export const getAllProductPathsQuery = /* GraphQL */ `
+  query getAllProductPaths($first: Int = 100) {
+    site {
+      products(first: $first) {
+        edges {
+          node {
+            path
+          }
+        }
+      }
+    }
+  }
+`
+
+export type ProductPath = NonNullable<
+  NonNullable<GetAllProductPathsQuery['site']['products']['edges']>[0]
+>
+
+export type ProductPaths = ProductPath[]
+
+export type { GetAllProductPathsQueryVariables }
+
+export type GetAllProductPathsResult<
+  T extends { products: any[] } = { products: ProductPaths }
+> = T
+
+async function getAllProductPaths(opts?: {
+  variables?: GetAllProductPathsQueryVariables
+  config?: BigcommerceConfig
+}): Promise<GetAllProductPathsResult>
+
+async function getAllProductPaths<
+  T extends { products: any[] },
+  V = any
+>(opts: {
+  query: string
+  variables?: V
+  config?: BigcommerceConfig
+}): Promise<GetAllProductPathsResult<T>>
+
+async function getAllProductPaths({
+  query = getAllProductPathsQuery,
+  variables,
+  config,
+}: {
+  query?: string
+  variables?: GetAllProductPathsQueryVariables
+  config?: BigcommerceConfig
+} = {}): Promise<GetAllProductPathsResult> {
+  config = getConfig(config)
+  // RecursivePartial forces the method to check for every prop in the data, which is
+  // required in case there's a custom `query`
+  const { data } = await config.fetch<
+    RecursivePartial<GetAllProductPathsQuery>
+  >(query, { variables })
+  const products = data.site?.products?.edges
+
+  return {
+    products: filterEdges(products as RecursiveRequired<typeof products>),
+  }
+}
+
+export default getAllProductPaths
--- a/framework/bigcommerce/api/operations/get-all-products.ts
+++ b/framework/bigcommerce/api/operations/get-all-products.ts
@ -0,0 +1,132 @@
+import type {
+  GetAllProductsQuery,
+  GetAllProductsQueryVariables,
+} from '../../schema'
+import type { RecursivePartial, RecursiveRequired } from '../utils/types'
+import filterEdges from '../utils/filter-edges'
+import setProductLocaleMeta from '../utils/set-product-locale-meta'
+import { productConnectionFragment } from '../fragments/product'
+import { BigcommerceConfig, getConfig } from '..'
+
+export const getAllProductsQuery = /* GraphQL */ `
+  query getAllProducts(
+    $hasLocale: Boolean = false
+    $locale: String = "null"
+    $entityIds: [Int!]
+    $first: Int = 10
+    $products: Boolean = false
+    $featuredProducts: Boolean = false
+    $bestSellingProducts: Boolean = false
+    $newestProducts: Boolean = false
+  ) {
+    site {
+      products(first: $first, entityIds: $entityIds) @include(if: $products) {
+        ...productConnnection
+      }
+      featuredProducts(first: $first) @include(if: $featuredProducts) {
+        ...productConnnection
+      }
+      bestSellingProducts(first: $first) @include(if: $bestSellingProducts) {
+        ...productConnnection
+      }
+      newestProducts(first: $first) @include(if: $newestProducts) {
+        ...productConnnection
+      }
+    }
+  }
+
+  ${productConnectionFragment}
+`
+
+export type ProductEdge = NonNullable<
+  NonNullable<GetAllProductsQuery['site']['products']['edges']>[0]
+>
+
+export type ProductNode = ProductEdge['node']
+
+export type GetAllProductsResult<
+  T extends Record<keyof GetAllProductsResult, any[]> = {
+    products: ProductEdge[]
+  }
+> = T
+
+const FIELDS = [
+  'products',
+  'featuredProducts',
+  'bestSellingProducts',
+  'newestProducts',
+]
+
+export type ProductTypes =
+  | 'products'
+  | 'featuredProducts'
+  | 'bestSellingProducts'
+  | 'newestProducts'
+
+export type ProductVariables = { field?: ProductTypes } & Omit<
+  GetAllProductsQueryVariables,
+  ProductTypes | 'hasLocale'
+>
+
+async function getAllProducts(opts?: {
+  variables?: ProductVariables
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetAllProductsResult>
+
+async function getAllProducts<
+  T extends Record<keyof GetAllProductsResult, any[]>,
+  V = any
+>(opts: {
+  query: string
+  variables?: V
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetAllProductsResult<T>>
+
+async function getAllProducts({
+  query = getAllProductsQuery,
+  variables: { field = 'products', ...vars } = {},
+  config,
+}: {
+  query?: string
+  variables?: ProductVariables
+  config?: BigcommerceConfig
+  preview?: boolean
+} = {}): Promise<GetAllProductsResult> {
+  config = getConfig(config)
+
+  const locale = vars.locale || config.locale
+  const variables: GetAllProductsQueryVariables = {
+    ...vars,
+    locale,
+    hasLocale: !!locale,
+  }
+
+  if (!FIELDS.includes(field)) {
+    throw new Error(
+      `The field variable has to match one of ${FIELDS.join(', ')}`
+    )
+  }
+
+  variables[field] = true
+
+  // RecursivePartial forces the method to check for every prop in the data, which is
+  // required in case there's a custom `query`
+  const { data } = await config.fetch<RecursivePartial<GetAllProductsQuery>>(
+    query,
+    { variables }
+  )
+  const edges = data.site?.[field]?.edges
+  const products = filterEdges(edges as RecursiveRequired<typeof edges>)
+
+  if (locale && config.applyLocale) {
+    products.forEach((product: RecursivePartial<ProductEdge>) => {
+      if (product.node) setProductLocaleMeta(product.node)
+    })
+  }
+
+  return { products }
+}
+
+export default getAllProducts
--- a/framework/bigcommerce/api/operations/get-customer-id.ts
+++ b/framework/bigcommerce/api/operations/get-customer-id.ts
@ -0,0 +1,34 @@
+import { GetCustomerIdQuery } from '../../schema'
+import { BigcommerceConfig, getConfig } from '..'
+
+export const getCustomerIdQuery = /* GraphQL */ `
+  query getCustomerId {
+    customer {
+      entityId
+    }
+  }
+`
+
+async function getCustomerId({
+  customerToken,
+  config,
+}: {
+  customerToken: string
+  config?: BigcommerceConfig
+}): Promise<number | undefined> {
+  config = getConfig(config)
+
+  const { data } = await config.fetch<GetCustomerIdQuery>(
+    getCustomerIdQuery,
+    undefined,
+    {
+      headers: {
+        cookie: `${config.customerCookie}=${customerToken}`,
+      },
+    }
+  )
+
+  return data?.customer?.entityId
+}
+
+export default getCustomerId
--- a/framework/bigcommerce/api/operations/get-customer-wishlist.ts
+++ b/framework/bigcommerce/api/operations/get-customer-wishlist.ts
@ -0,0 +1,87 @@
+import type { RecursivePartial, RecursiveRequired } from '../utils/types'
+import { definitions } from '../definitions/wishlist'
+import { BigcommerceConfig, getConfig } from '..'
+import getAllProducts, { ProductEdge } from './get-all-products'
+
+export type Wishlist = Omit<definitions['wishlist_Full'], 'items'> & {
+  items?: WishlistItem[]
+}
+
+export type WishlistItem = NonNullable<
+  definitions['wishlist_Full']['items']
+>[0] & {
+  product?: ProductEdge['node']
+}
+
+export type GetCustomerWishlistResult<
+  T extends { wishlist?: any } = { wishlist?: Wishlist }
+> = T
+
+export type GetCustomerWishlistVariables = {
+  customerId: number
+}
+
+async function getCustomerWishlist(opts: {
+  variables: GetCustomerWishlistVariables
+  config?: BigcommerceConfig
+  includeProducts?: boolean
+}): Promise<GetCustomerWishlistResult>
+
+async function getCustomerWishlist<
+  T extends { wishlist?: any },
+  V = any
+>(opts: {
+  url: string
+  variables: V
+  config?: BigcommerceConfig
+  includeProducts?: boolean
+}): Promise<GetCustomerWishlistResult<T>>
+
+async function getCustomerWishlist({
+  config,
+  variables,
+  includeProducts,
+}: {
+  url?: string
+  variables: GetCustomerWishlistVariables
+  config?: BigcommerceConfig
+  includeProducts?: boolean
+}): Promise<GetCustomerWishlistResult> {
+  config = getConfig(config)
+
+  const { data = [] } = await config.storeApiFetch<
+    RecursivePartial<{ data: Wishlist[] }>
+  >(`/v3/wishlists?customer_id=${variables.customerId}`)
+  const wishlist = data[0]
+
+  if (includeProducts && wishlist?.items?.length) {
+    const entityIds = wishlist.items
+      ?.map((item) => item?.product_id)
+      .filter((id): id is number => !!id)
+
+    if (entityIds?.length) {
+      const graphqlData = await getAllProducts({
+        variables: { first: 100, entityIds },
+        config,
+      })
+      // Put the products in an object that we can use to get them by id
+      const productsById = graphqlData.products.reduce<{
+        [k: number]: ProductEdge
+      }>((prods, p) => {
+        prods[p.node.entityId] = p
+        return prods
+      }, {})
+      // Populate the wishlist items with the graphql products
+      wishlist.items.forEach((item) => {
+        const product = item && productsById[item.product_id!]
+        if (item && product) {
+          item.product = product.node
+        }
+      })
+    }
+  }
+
+  return { wishlist: wishlist as RecursiveRequired<typeof wishlist> }
+}
+
+export default getCustomerWishlist
--- a/framework/bigcommerce/api/operations/get-page.ts
+++ b/framework/bigcommerce/api/operations/get-page.ts
@ -0,0 +1,53 @@
+import type { RecursivePartial, RecursiveRequired } from '../utils/types'
+import { BigcommerceConfig, getConfig } from '..'
+import { definitions } from '../definitions/store-content'
+
+export type Page = definitions['page_Full']
+
+export type GetPageResult<T extends { page?: any } = { page?: Page }> = T
+
+export type PageVariables = {
+  id: number
+}
+
+async function getPage(opts: {
+  url?: string
+  variables: PageVariables
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetPageResult>
+
+async function getPage<T extends { page?: any }, V = any>(opts: {
+  url: string
+  variables: V
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetPageResult<T>>
+
+async function getPage({
+  url,
+  variables,
+  config,
+  preview,
+}: {
+  url?: string
+  variables: PageVariables
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetPageResult> {
+  config = getConfig(config)
+  // RecursivePartial forces the method to check for every prop in the data, which is
+  // required in case there's a custom `url`
+  const { data } = await config.storeApiFetch<RecursivePartial<{ data: Page[] }>>(
+    url || `/v3/content/pages?id=${variables.id}&include=body`
+  )
+  const firstPage = data?.[0]
+  const page = firstPage as RecursiveRequired<typeof firstPage>
+
+  if (preview || page?.is_visible) {
+    return { page }
+  }
+  return {}
+}
+
+export default getPage
--- a/framework/bigcommerce/api/operations/get-product.ts
+++ b/framework/bigcommerce/api/operations/get-product.ts
@ -0,0 +1,118 @@
+import type { GetProductQuery, GetProductQueryVariables } from '../../schema'
+import setProductLocaleMeta from '../utils/set-product-locale-meta'
+import { productInfoFragment } from '../fragments/product'
+import { BigcommerceConfig, getConfig } from '..'
+
+export const getProductQuery = /* GraphQL */ `
+  query getProduct(
+    $hasLocale: Boolean = false
+    $locale: String = "null"
+    $path: String!
+  ) {
+    site {
+      route(path: $path) {
+        node {
+          __typename
+          ... on Product {
+            ...productInfo
+            variants {
+              edges {
+                node {
+                  entityId
+                  defaultImage {
+                    urlOriginal
+                    altText
+                    isDefault
+                  }
+                  prices {
+                    ...productPrices
+                  }
+                  inventory {
+                    aggregated {
+                      availableToSell
+                      warningLevel
+                    }
+                    isInStock
+                  }
+                  productOptions {
+                    edges {
+                      node {
+                        __typename
+                        entityId
+                        displayName
+                        ...multipleChoiceOption
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ${productInfoFragment}
+`
+
+export type ProductNode = Extract<
+  GetProductQuery['site']['route']['node'],
+  { __typename: 'Product' }
+>
+
+export type GetProductResult<
+  T extends { product?: any } = { product?: ProductNode }
+> = T
+
+export type ProductVariables = { locale?: string } & (
+  | { path: string; slug?: never }
+  | { path?: never; slug: string }
+)
+
+async function getProduct(opts: {
+  variables: ProductVariables
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetProductResult>
+
+async function getProduct<T extends { product?: any }, V = any>(opts: {
+  query: string
+  variables: V
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetProductResult<T>>
+
+async function getProduct({
+  query = getProductQuery,
+  variables: { slug, ...vars },
+  config,
+}: {
+  query?: string
+  variables: ProductVariables
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetProductResult> {
+  config = getConfig(config)
+
+  const locale = vars.locale || config.locale
+  const variables: GetProductQueryVariables = {
+    ...vars,
+    locale,
+    hasLocale: !!locale,
+    path: slug ? `/${slug}/` : vars.path!,
+  }
+  const { data } = await config.fetch<GetProductQuery>(query, { variables })
+  const product = data.site?.route?.node
+
+  if (product?.__typename === 'Product') {
+    if (locale && config.applyLocale) {
+      setProductLocaleMeta(product)
+    }
+    return { product }
+  }
+
+  return {}
+}
+
+export default getProduct
--- a/framework/bigcommerce/api/operations/get-site-info.ts
+++ b/framework/bigcommerce/api/operations/get-site-info.ts
@ -0,0 +1,106 @@
+import type { GetSiteInfoQuery, GetSiteInfoQueryVariables } from '../../schema'
+import type { RecursivePartial, RecursiveRequired } from '../utils/types'
+import filterEdges from '../utils/filter-edges'
+import { BigcommerceConfig, getConfig } from '..'
+import { categoryTreeItemFragment } from '../fragments/category-tree'
+
+// Get 3 levels of categories
+export const getSiteInfoQuery = /* GraphQL */ `
+  query getSiteInfo {
+    site {
+      categoryTree {
+        ...categoryTreeItem
+        children {
+          ...categoryTreeItem
+          children {
+            ...categoryTreeItem
+          }
+        }
+      }
+      brands {
+        pageInfo {
+          startCursor
+          endCursor
+        }
+        edges {
+          cursor
+          node {
+            entityId
+            name
+            defaultImage {
+              urlOriginal
+              altText
+            }
+            pageTitle
+            metaDesc
+            metaKeywords
+            searchKeywords
+            path
+          }
+        }
+      }
+    }
+  }
+  ${categoryTreeItemFragment}
+`
+
+export type CategoriesTree = NonNullable<
+  GetSiteInfoQuery['site']['categoryTree']
+>
+
+export type BrandEdge = NonNullable<
+  NonNullable<GetSiteInfoQuery['site']['brands']['edges']>[0]
+>
+
+export type Brands = BrandEdge[]
+
+export type GetSiteInfoResult<
+  T extends { categories: any[]; brands: any[] } = {
+    categories: CategoriesTree
+    brands: Brands
+  }
+> = T
+
+async function getSiteInfo(opts?: {
+  variables?: GetSiteInfoQueryVariables
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetSiteInfoResult>
+
+async function getSiteInfo<
+  T extends { categories: any[]; brands: any[] },
+  V = any
+>(opts: {
+  query: string
+  variables?: V
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetSiteInfoResult<T>>
+
+async function getSiteInfo({
+  query = getSiteInfoQuery,
+  variables,
+  config,
+}: {
+  query?: string
+  variables?: GetSiteInfoQueryVariables
+  config?: BigcommerceConfig
+  preview?: boolean
+} = {}): Promise<GetSiteInfoResult> {
+  config = getConfig(config)
+  // RecursivePartial forces the method to check for every prop in the data, which is
+  // required in case there's a custom `query`
+  const { data } = await config.fetch<RecursivePartial<GetSiteInfoQuery>>(
+    query,
+    { variables }
+  )
+  const categories = data.site?.categoryTree
+  const brands = data.site?.brands?.edges
+
+  return {
+    categories: (categories as RecursiveRequired<typeof categories>) ?? [],
+    brands: filterEdges(brands as RecursiveRequired<typeof brands>),
+  }
+}
+
+export default getSiteInfo
--- a/framework/bigcommerce/api/operations/login.ts
+++ b/framework/bigcommerce/api/operations/login.ts
@ -0,0 +1,73 @@
+import type { ServerResponse } from 'http'
+import type { LoginMutation, LoginMutationVariables } from '../../schema'
+import type { RecursivePartial } from '../utils/types'
+import concatHeader from '../utils/concat-cookie'
+import { BigcommerceConfig, getConfig } from '..'
+
+export const loginMutation = /* GraphQL */ `
+  mutation login($email: String!, $password: String!) {
+    login(email: $email, password: $password) {
+      result
+    }
+  }
+`
+
+export type LoginResult<T extends { result?: any } = { result?: string }> = T
+
+export type LoginVariables = LoginMutationVariables
+
+async function login(opts: {
+  variables: LoginVariables
+  config?: BigcommerceConfig
+  res: ServerResponse
+}): Promise<LoginResult>
+
+async function login<T extends { result?: any }, V = any>(opts: {
+  query: string
+  variables: V
+  res: ServerResponse
+  config?: BigcommerceConfig
+}): Promise<LoginResult<T>>
+
+async function login({
+  query = loginMutation,
+  variables,
+  res: response,
+  config,
+}: {
+  query?: string
+  variables: LoginVariables
+  res: ServerResponse
+  config?: BigcommerceConfig
+}): Promise<LoginResult> {
+  config = getConfig(config)
+
+  const { data, res } = await config.fetch<RecursivePartial<LoginMutation>>(
+    query,
+    { variables }
+  )
+  // Bigcommerce returns a Set-Cookie header with the auth cookie
+  let cookie = res.headers.get('Set-Cookie')
+
+  if (cookie && typeof cookie === 'string') {
+    // In development, don't set a secure cookie or the browser will ignore it
+    if (process.env.NODE_ENV !== 'production') {
+      cookie = cookie.replace('; Secure', '')
+      // SameSite=none can't be set unless the cookie is Secure
+      // bc seems to sometimes send back SameSite=None rather than none so make 
+      // this case insensitive
+      cookie = cookie.replace(/; SameSite=none/gi, '; SameSite=lax')
+    }
+
+    response.setHeader(
+      'Set-Cookie',
+      concatHeader(response.getHeader('Set-Cookie'), cookie)!
+    )
+  }
+
+  return {
+    result: data.login?.result,
+  }
+}
+
+export default login
--- a/framework/bigcommerce/api/utils/concat-cookie.ts
+++ b/framework/bigcommerce/api/utils/concat-cookie.ts
@ -0,0 +1,14 @@
+type Header = string | number | string[] | undefined
+
+export default function concatHeader(prev: Header, val: Header) {
+  if (!val) return prev
+  if (!prev) return val
+
+  if (Array.isArray(prev)) return prev.concat(String(val))
+
+  prev = String(prev)
+
+  if (Array.isArray(val)) return [prev].concat(val)
+
+  return [prev, String(val)]
+}
--- a/framework/bigcommerce/api/utils/create-api-handler.ts
+++ b/framework/bigcommerce/api/utils/create-api-handler.ts
@ -0,0 +1,58 @@
+import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
+import { BigcommerceConfig, getConfig } from '..'
+
+export type BigcommerceApiHandler<
+  T = any,
+  H extends BigcommerceHandlers = {},
+  Options extends {} = {}
+> = (
+  req: NextApiRequest,
+  res: NextApiResponse<BigcommerceApiResponse<T>>,
+  config: BigcommerceConfig,
+  handlers: H,
+  // Custom configs that may be used by a particular handler
+  options: Options
+) => void | Promise<void>
+
+export type BigcommerceHandler<T = any, Body = null> = (options: {
+  req: NextApiRequest
+  res: NextApiResponse<BigcommerceApiResponse<T>>
+  config: BigcommerceConfig
+  body: Body
+}) => void | Promise<void>
+
+export type BigcommerceHandlers<T = any> = {
+  [k: string]: BigcommerceHandler<T, any>
+}
+
+export type BigcommerceApiResponse<T> = {
+  data: T | null
+  errors?: { message: string; code?: string }[]
+}
+
+export default function createApiHandler<
+  T = any,
+  H extends BigcommerceHandlers = {},
+  Options extends {} = {}
+>(
+  handler: BigcommerceApiHandler<T, H, Options>,
+  handlers: H,
+  defaultOptions: Options
+) {
+  return function getApiHandler({
+    config,
+    operations,
+    options,
+  }: {
+    config?: BigcommerceConfig
+    operations?: Partial<H>
+    options?: Options extends {} ? Partial<Options> : never
+  } = {}): NextApiHandler {
+    const ops = { ...operations, ...handlers }
+    const opts = { ...defaultOptions, ...options }
+
+    return function apiHandler(req, res) {
+      return handler(req, res, getConfig(config), ops, opts)
+    }
+  }
+}
--- a/framework/bigcommerce/api/utils/errors.ts
+++ b/framework/bigcommerce/api/utils/errors.ts
@ -0,0 +1,25 @@
+import type { Response } from '@vercel/fetch'
+
+// Used for GraphQL errors
+export class BigcommerceGraphQLError extends Error {}
+
+export class BigcommerceApiError extends Error {
+  status: number
+  res: Response
+  data: any
+
+  constructor(msg: string, res: Response, data?: any) {
+    super(msg)
+    this.name = 'BigcommerceApiError'
+    this.status = res.status
+    this.res = res
+    this.data = data
+  }
+}
+
+export class BigcommerceNetworkError extends Error {
+  constructor(msg: string) {
+    super(msg)
+    this.name = 'BigcommerceNetworkError'
+  }
+}
--- a/framework/bigcommerce/api/utils/fetch-graphql-api.ts
+++ b/framework/bigcommerce/api/utils/fetch-graphql-api.ts
@ -0,0 +1,38 @@
+import { FetcherError } from '@commerce/utils/errors'
+import type { GraphQLFetcher } from '@commerce/api'
+import { getConfig } from '..'
+import fetch from './fetch'
+
+const fetchGraphqlApi: GraphQLFetcher = async (
+  query: string,
+  { variables, preview } = {},
+  fetchOptions
+) => {
+  // log.warn(query)
+  const config = getConfig()
+  const res = await fetch(config.commerceUrl + (preview ? '/preview' : ''), {
+    ...fetchOptions,
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${config.apiToken}`,
+      ...fetchOptions?.headers,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      query,
+      variables,
+    }),
+  })
+
+  const json = await res.json()
+  if (json.errors) {
+    throw new FetcherError({
+      errors: json.errors ?? [{ message: 'Failed to fetch Bigcommerce API' }],
+      status: res.status,
+    })
+  }
+
+  return { data: json.data, res }
+}
+
+export default fetchGraphqlApi
--- a/framework/bigcommerce/api/utils/fetch-store-api.ts
+++ b/framework/bigcommerce/api/utils/fetch-store-api.ts
@ -0,0 +1,71 @@
+import type { RequestInit, Response } from '@vercel/fetch'
+import { getConfig } from '..'
+import { BigcommerceApiError, BigcommerceNetworkError } from './errors'
+import fetch from './fetch'
+
+export default async function fetchStoreApi<T>(
+  endpoint: string,
+  options?: RequestInit
+): Promise<T> {
+  const config = getConfig()
+  let res: Response
+
+  try {
+    res = await fetch(config.storeApiUrl + endpoint, {
+      ...options,
+      headers: {
+        ...options?.headers,
+        'Content-Type': 'application/json',
+        'X-Auth-Token': config.storeApiToken,
+        'X-Auth-Client': config.storeApiClientId,
+      },
+    })
+  } catch (error) {
+    throw new BigcommerceNetworkError(
+      `Fetch to Bigcommerce failed: ${error.message}`
+    )
+  }
+
+  const contentType = res.headers.get('Content-Type')
+  const isJSON = contentType?.includes('application/json')
+
+  if (!res.ok) {
+    const data = isJSON ? await res.json() : await getTextOrNull(res)
+    const headers = getRawHeaders(res)
+    const msg = `Big Commerce API error (${
+      res.status
+    }) \nHeaders: ${JSON.stringify(headers, null, 2)}\n${
+      typeof data === 'string' ? data : JSON.stringify(data, null, 2)
+    }`
+
+    throw new BigcommerceApiError(msg, res, data)
+  }
+
+  if (res.status !== 204 && !isJSON) {
+    throw new BigcommerceApiError(
+      `Fetch to Bigcommerce API failed, expected JSON content but found: ${contentType}`,
+      res
+    )
+  }
+
+  // If something was removed, the response will be empty
+  return res.status === 204 ? null : await res.json()
+}
+
+function getRawHeaders(res: Response) {
+  const headers: { [key: string]: string } = {}
+
+  res.headers.forEach((value, key) => {
+    headers[key] = value
+  })
+
+  return headers
+}
+
+function getTextOrNull(res: Response) {
+  try {
+    return res.text()
+  } catch (err) {
+    return null
+  }
+}
--- a/framework/bigcommerce/api/utils/fetch.ts
+++ b/framework/bigcommerce/api/utils/fetch.ts
@ -0,0 +1,3 @@
+import zeitFetch from '@vercel/fetch'
+
+export default zeitFetch()
--- a/framework/bigcommerce/api/utils/filter-edges.ts
+++ b/framework/bigcommerce/api/utils/filter-edges.ts
@ -0,0 +1,5 @@
+export default function filterEdges<T>(
+  edges: (T | null | undefined)[] | null | undefined
+) {
+  return edges?.filter((edge): edge is T => !!edge) ?? []
+}
--- a/framework/bigcommerce/api/utils/get-cart-cookie.ts
+++ b/framework/bigcommerce/api/utils/get-cart-cookie.ts
@ -0,0 +1,20 @@
+import { serialize, CookieSerializeOptions } from 'cookie'
+
+export default function getCartCookie(
+  name: string,
+  cartId?: string,
+  maxAge?: number
+) {
+  const options: CookieSerializeOptions =
+    cartId && maxAge
+      ? {
+          maxAge,
+          expires: new Date(Date.now() + maxAge * 1000),
+          secure: process.env.NODE_ENV === 'production',
+          path: '/',
+          sameSite: 'lax',
+        }
+      : { maxAge: -1, path: '/' } // Removes the cookie
+
+  return serialize(name, cartId || '', options)
+}
--- a/framework/bigcommerce/api/utils/is-allowed-method.ts
+++ b/framework/bigcommerce/api/utils/is-allowed-method.ts
@ -0,0 +1,28 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function isAllowedMethod(
+  req: NextApiRequest,
+  res: NextApiResponse,
+  allowedMethods: string[]
+) {
+  const methods = allowedMethods.includes('OPTIONS')
+    ? allowedMethods
+    : [...allowedMethods, 'OPTIONS']
+
+  if (!req.method || !methods.includes(req.method)) {
+    res.status(405)
+    res.setHeader('Allow', methods.join(', '))
+    res.end()
+    return false
+  }
+
+  if (req.method === 'OPTIONS') {
+    res.status(200)
+    res.setHeader('Allow', methods.join(', '))
+    res.setHeader('Content-Length', '0')
+    res.end()
+    return false
+  }
+
+  return true
+}
--- a/framework/bigcommerce/api/utils/parse-item.ts
+++ b/framework/bigcommerce/api/utils/parse-item.ts
@ -0,0 +1,14 @@
+import type { ItemBody as WishlistItemBody } from '../wishlist'
+import type { ItemBody } from '../cart'
+
+export const parseWishlistItem = (item: WishlistItemBody) => ({
+  product_id: item.productId,
+  variant_id: item.variantId,
+})
+
+export const parseCartItem = (item: ItemBody) => ({
+  quantity: item.quantity,
+  product_id: item.productId,
+  variant_id: item.variantId,
+  option_selections: item.optionSelections
+})
--- a/framework/bigcommerce/api/utils/set-product-locale-meta.ts
+++ b/framework/bigcommerce/api/utils/set-product-locale-meta.ts
@ -0,0 +1,21 @@
+import type { ProductNode } from '../operations/get-all-products'
+import type { RecursivePartial } from './types'
+
+export default function setProductLocaleMeta(
+  node: RecursivePartial<ProductNode>
+) {
+  if (node.localeMeta?.edges) {
+    node.localeMeta.edges = node.localeMeta.edges.filter((edge) => {
+      const { key, value } = edge?.node ?? {}
+      if (key && key in node) {
+        ;(node as any)[key] = value
+        return false
+      }
+      return true
+    })
+
+    if (!node.localeMeta.edges.length) {
+      delete node.localeMeta
+    }
+  }
+}
--- a/framework/bigcommerce/api/utils/types.ts
+++ b/framework/bigcommerce/api/utils/types.ts
@ -0,0 +1,7 @@
+export type RecursivePartial<T> = {
+  [P in keyof T]?: RecursivePartial<T[P]>
+}
+
+export type RecursiveRequired<T> = {
+  [P in keyof T]-?: RecursiveRequired<T[P]>
+}
--- a/framework/bigcommerce/api/wishlist/handlers/add-item.ts
+++ b/framework/bigcommerce/api/wishlist/handlers/add-item.ts
@ -0,0 +1,56 @@
+import type { WishlistHandlers } from '..'
+import getCustomerId from '../../operations/get-customer-id'
+import getCustomerWishlist from '../../operations/get-customer-wishlist'
+import { parseWishlistItem } from '../../utils/parse-item'
+
+// Returns the wishlist of the signed customer
+const addItem: WishlistHandlers['addItem'] = async ({
+  res,
+  body: { customerToken, item },
+  config,
+}) => {
+  if (!item) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Missing item' }],
+    })
+  }
+
+  const customerId =
+    customerToken && (await getCustomerId({ customerToken, config }))
+
+  if (!customerId) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Invalid request' }],
+    })
+  }
+
+  const { wishlist } = await getCustomerWishlist({
+    variables: { customerId },
+    config,
+  })
+  const options = {
+    method: 'POST',
+    body: JSON.stringify(
+      wishlist
+        ? {
+            items: [parseWishlistItem(item)],
+          }
+        : {
+            name: 'Wishlist',
+            customer_id: customerId,
+            items: [parseWishlistItem(item)],
+            is_public: false,
+          }
+    ),
+  }
+
+  const { data } = wishlist
+    ? await config.storeApiFetch(`/v3/wishlists/${wishlist.id}/items`, options)
+    : await config.storeApiFetch('/v3/wishlists', options)
+
+  res.status(200).json({ data })
+}
+
+export default addItem
--- a/framework/bigcommerce/api/wishlist/handlers/get-wishlist.ts
+++ b/framework/bigcommerce/api/wishlist/handlers/get-wishlist.ts
@ -0,0 +1,37 @@
+import getCustomerId from '../../operations/get-customer-id'
+import getCustomerWishlist from '../../operations/get-customer-wishlist'
+import type { Wishlist, WishlistHandlers } from '..'
+
+// Return wishlist info
+const getWishlist: WishlistHandlers['getWishlist'] = async ({
+  res,
+  body: { customerToken, includeProducts },
+  config,
+}) => {
+  let result: { data?: Wishlist } = {}
+
+  if (customerToken) {
+    const customerId =
+      customerToken && (await getCustomerId({ customerToken, config }))
+
+    if (!customerId) {
+      // If the customerToken is invalid, then this request is too
+      return res.status(404).json({
+        data: null,
+        errors: [{ message: 'Wishlist not found' }],
+      })
+    }
+
+    const { wishlist } = await getCustomerWishlist({
+      variables: { customerId },
+      includeProducts,
+      config,
+    })
+
+    result = { data: wishlist }
+  }
+
+  res.status(200).json({ data: result.data ?? null })
+}
+
+export default getWishlist
--- a/framework/bigcommerce/api/wishlist/handlers/remove-item.ts
+++ b/framework/bigcommerce/api/wishlist/handlers/remove-item.ts
@ -0,0 +1,39 @@
+import getCustomerId from '../../operations/get-customer-id'
+import getCustomerWishlist, {
+  Wishlist,
+} from '../../operations/get-customer-wishlist'
+import type { WishlistHandlers } from '..'
+
+// Return current wishlist info
+const removeItem: WishlistHandlers['removeItem'] = async ({
+  res,
+  body: { customerToken, itemId },
+  config,
+}) => {
+  const customerId =
+    customerToken && (await getCustomerId({ customerToken, config }))
+  const { wishlist } =
+    (customerId &&
+      (await getCustomerWishlist({
+        variables: { customerId },
+        config,
+      }))) ||
+    {}
+
+  if (!wishlist || !itemId) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Invalid request' }],
+    })
+  }
+
+  const result = await config.storeApiFetch<{ data: Wishlist } | null>(
+    `/v3/wishlists/${wishlist.id}/items/${itemId}`,
+    { method: 'DELETE' }
+  )
+  const data = result?.data ?? null
+
+  res.status(200).json({ data })
+}
+
+export default removeItem
--- a/framework/bigcommerce/api/wishlist/index.ts
+++ b/framework/bigcommerce/api/wishlist/index.ts
@ -0,0 +1,103 @@
+import isAllowedMethod from '../utils/is-allowed-method'
+import createApiHandler, {
+  BigcommerceApiHandler,
+  BigcommerceHandler,
+} from '../utils/create-api-handler'
+import { BigcommerceApiError } from '../utils/errors'
+import type {
+  Wishlist,
+  WishlistItem,
+} from '../operations/get-customer-wishlist'
+import getWishlist from './handlers/get-wishlist'
+import addItem from './handlers/add-item'
+import removeItem from './handlers/remove-item'
+
+export type { Wishlist, WishlistItem }
+
+export type ItemBody = {
+  productId: number
+  variantId: number
+}
+
+export type AddItemBody = { item: ItemBody }
+
+export type RemoveItemBody = { itemId: string }
+
+export type WishlistBody = {
+  customer_id: number
+  is_public: number
+  name: string
+  items: any[]
+}
+
+export type AddWishlistBody = { wishlist: WishlistBody }
+
+export type WishlistHandlers = {
+  getWishlist: BigcommerceHandler<
+    Wishlist,
+    { customerToken?: string; includeProducts?: boolean }
+  >
+  addItem: BigcommerceHandler<
+    Wishlist,
+    { customerToken?: string } & Partial<AddItemBody>
+  >
+  removeItem: BigcommerceHandler<
+    Wishlist,
+    { customerToken?: string } & Partial<RemoveItemBody>
+  >
+}
+
+const METHODS = ['GET', 'POST', 'DELETE']
+
+// TODO: a complete implementation should have schema validation for `req.body`
+const wishlistApi: BigcommerceApiHandler<Wishlist, WishlistHandlers> = async (
+  req,
+  res,
+  config,
+  handlers
+) => {
+  if (!isAllowedMethod(req, res, METHODS)) return
+
+  const { cookies } = req
+  const customerToken = cookies[config.customerCookie]
+
+  try {
+    // Return current wishlist info
+    if (req.method === 'GET') {
+      const body = {
+        customerToken,
+        includeProducts: req.query.products === '1',
+      }
+      return await handlers['getWishlist']({ req, res, config, body })
+    }
+
+    // Add an item to the wishlist
+    if (req.method === 'POST') {
+      const body = { ...req.body, customerToken }
+      return await handlers['addItem']({ req, res, config, body })
+    }
+
+    // Remove an item from the wishlist
+    if (req.method === 'DELETE') {
+      const body = { ...req.body, customerToken }
+      return await handlers['removeItem']({ req, res, config, body })
+    }
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof BigcommerceApiError
+        ? 'An unexpected error ocurred with the Bigcommerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+export const handlers = {
+  getWishlist,
+  addItem,
+  removeItem,
+}
+
+export default createApiHandler(wishlistApi, handlers, {})
--- a/framework/bigcommerce/cart/use-add-item.tsx
+++ b/framework/bigcommerce/cart/use-add-item.tsx
@ -0,0 +1,56 @@
+import { useCallback } from 'react'
+import type { HookFetcher } from '@commerce/utils/types'
+import { CommerceError } from '@commerce/utils/errors'
+import useCartAddItem from '@commerce/cart/use-add-item'
+import type { ItemBody, AddItemBody } from '../api/cart'
+import useCart, { Cart } from './use-cart'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/cart',
+  method: 'POST',
+}
+
+export type AddItemInput = ItemBody
+
+export const fetcher: HookFetcher<Cart, AddItemBody> = (
+  options,
+  { item },
+  fetch
+) => {
+  if (
+    item.quantity &&
+    (!Number.isInteger(item.quantity) || item.quantity! < 1)
+  ) {
+    throw new CommerceError({
+      message: 'The item quantity has to be a valid integer greater than 0',
+    })
+  }
+
+  return fetch({
+    ...defaultOpts,
+    ...options,
+    body: { item },
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useAddItem = () => {
+    const { mutate } = useCart()
+    const fn = useCartAddItem(defaultOpts, customFetcher)
+
+    return useCallback(
+      async function addItem(input: AddItemInput) {
+        const data = await fn({ item: input })
+        await mutate(data, false)
+        return data
+      },
+      [fn, mutate]
+    )
+  }
+
+  useAddItem.extend = extendHook
+
+  return useAddItem
+}
+
+export default extendHook(fetcher)
--- a/framework/bigcommerce/cart/use-cart-actions.tsx
+++ b/framework/bigcommerce/cart/use-cart-actions.tsx
@ -0,0 +1,13 @@
+import useAddItem from './use-add-item'
+import useRemoveItem from './use-remove-item'
+import useUpdateItem from './use-update-item'
+
+// This hook is probably not going to be used, but it's here
+// to show how a commerce should be structuring it
+export default function useCartActions() {
+  const addItem = useAddItem()
+  const updateItem = useUpdateItem()
+  const removeItem = useRemoveItem()
+
+  return { addItem, updateItem, removeItem }
+}
--- a/framework/bigcommerce/cart/use-cart.tsx
+++ b/framework/bigcommerce/cart/use-cart.tsx
@ -0,0 +1,50 @@
+import type { HookFetcher } from '@commerce/utils/types'
+import type { SwrOptions } from '@commerce/utils/use-data'
+import useCommerceCart, { CartInput } from '@commerce/cart/use-cart'
+import type { Cart } from '../api/cart'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/cart',
+  method: 'GET',
+}
+
+export type { Cart }
+
+export const fetcher: HookFetcher<Cart | null, CartInput> = (
+  options,
+  { cartId },
+  fetch
+) => {
+  return cartId ? fetch({ ...defaultOpts, ...options }) : null
+}
+
+export function extendHook(
+  customFetcher: typeof fetcher,
+  swrOptions?: SwrOptions<Cart | null, CartInput>
+) {
+  const useCart = () => {
+    const response = useCommerceCart(defaultOpts, [], customFetcher, {
+      revalidateOnFocus: false,
+      ...swrOptions,
+    })
+
+    // Uses a getter to only calculate the prop when required
+    // response.data is also a getter and it's better to not trigger it early
+    Object.defineProperty(response, 'isEmpty', {
+      get() {
+        return Object.values(response.data?.line_items ?? {}).every(
+          (items) => !items.length
+        )
+      },
+      set: (x) => x,
+    })
+
+    return response
+  }
+
+  useCart.extend = extendHook
+
+  return useCart
+}
+
+export default extendHook(fetcher)
--- a/framework/bigcommerce/cart/use-remove-item.tsx
+++ b/framework/bigcommerce/cart/use-remove-item.tsx
@ -0,0 +1,51 @@
+import { useCallback } from 'react'
+import { HookFetcher } from '@commerce/utils/types'
+import useCartRemoveItem from '@commerce/cart/use-remove-item'
+import type { RemoveItemBody } from '../api/cart'
+import useCart, { Cart } from './use-cart'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/cart',
+  method: 'DELETE',
+}
+
+export type RemoveItemInput = {
+  id: string
+}
+
+export const fetcher: HookFetcher<Cart | null, RemoveItemBody> = (
+  options,
+  { itemId },
+  fetch
+) => {
+  return fetch({
+    ...defaultOpts,
+    ...options,
+    body: { itemId },
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useRemoveItem = (item?: any) => {
+    const { mutate } = useCart()
+    const fn = useCartRemoveItem<Cart | null, RemoveItemBody>(
+      defaultOpts,
+      customFetcher
+    )
+
+    return useCallback(
+      async function removeItem(input: RemoveItemInput) {
+        const data = await fn({ itemId: input.id ?? item?.id })
+        await mutate(data, false)
+        return data
+      },
+      [fn, mutate]
+    )
+  }
+
+  useRemoveItem.extend = extendHook
+
+  return useRemoveItem
+}
+
+export default extendHook(fetcher)
--- a/framework/bigcommerce/cart/use-update-item.tsx
+++ b/framework/bigcommerce/cart/use-update-item.tsx
@ -0,0 +1,70 @@
+import { useCallback } from 'react'
+import debounce from 'lodash.debounce'
+import type { HookFetcher } from '@commerce/utils/types'
+import { CommerceError } from '@commerce/utils/errors'
+import useCartUpdateItem from '@commerce/cart/use-update-item'
+import type { ItemBody, UpdateItemBody } from '../api/cart'
+import { fetcher as removeFetcher } from './use-remove-item'
+import useCart, { Cart } from './use-cart'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/cart',
+  method: 'PUT',
+}
+
+export type UpdateItemInput = Partial<{ id: string } & ItemBody>
+
+export const fetcher: HookFetcher<Cart | null, UpdateItemBody> = (
+  options,
+  { itemId, item },
+  fetch
+) => {
+  if (Number.isInteger(item.quantity)) {
+    // Also allow the update hook to remove an item if the quantity is lower than 1
+    if (item.quantity! < 1) {
+      return removeFetcher(null, { itemId }, fetch)
+    }
+  } else if (item.quantity) {
+    throw new CommerceError({
+      message: 'The item quantity has to be a valid integer',
+    })
+  }
+
+  return fetch({
+    ...defaultOpts,
+    ...options,
+    body: { itemId, item },
+  })
+}
+
+function extendHook(customFetcher: typeof fetcher, cfg?: { wait?: number }) {
+  const useUpdateItem = (item?: any) => {
+    const { mutate } = useCart()
+    const fn = useCartUpdateItem<Cart | null, UpdateItemBody>(
+      defaultOpts,
+      customFetcher
+    )
+
+    return useCallback(
+      debounce(async (input: UpdateItemInput) => {
+        const data = await fn({
+          itemId: input.id ?? item?.id,
+          item: {
+            productId: input.productId ?? item?.product_id,
+            variantId: input.productId ?? item?.variant_id,
+            quantity: input.quantity,
+          },
+        })
+        await mutate(data, false)
+        return data
+      }, cfg?.wait ?? 500),
+      [fn, mutate]
+    )
+  }
+
+  useUpdateItem.extend = extendHook
+
+  return useUpdateItem
+}
+
+export default extendHook(fetcher)
--- a/framework/bigcommerce/index.tsx
+++ b/framework/bigcommerce/index.tsx
@ -0,0 +1,61 @@
+import { ReactNode } from 'react'
+import * as React from 'react'
+import {
+  CommerceConfig,
+  CommerceProvider as CoreCommerceProvider,
+  useCommerce as useCoreCommerce,
+} from '@commerce'
+import { FetcherError } from '@commerce/utils/errors'
+
+async function getText(res: Response) {
+  try {
+    return (await res.text()) || res.statusText
+  } catch (error) {
+    return res.statusText
+  }
+}
+
+async function getError(res: Response) {
+  if (res.headers.get('Content-Type')?.includes('application/json')) {
+    const data = await res.json()
+    return new FetcherError({ errors: data.errors, status: res.status })
+  }
+  return new FetcherError({ message: await getText(res), status: res.status })
+}
+
+export const bigcommerceConfig: CommerceConfig = {
+  locale: 'en-us',
+  cartCookie: 'bc_cartId',
+  async fetcher({ url, method = 'GET', variables, body: bodyObj }) {
+    const hasBody = Boolean(variables || bodyObj)
+    const body = hasBody
+      ? JSON.stringify(variables ? { variables } : bodyObj)
+      : undefined
+    const headers = hasBody ? { 'Content-Type': 'application/json' } : undefined
+    const res = await fetch(url!, { method, body, headers })
+
+    if (res.ok) {
+      const { data } = await res.json()
+      return data
+    }
+
+    throw await getError(res)
+  },
+}
+
+export type BigcommerceConfig = Partial<CommerceConfig>
+
+export type BigcommerceProps = {
+  children?: ReactNode
+  locale: string
+} & BigcommerceConfig
+
+export function CommerceProvider({ children, ...config }: BigcommerceProps) {
+  return (
+    <CoreCommerceProvider config={{ ...bigcommerceConfig, ...config }}>
+      {children}
+    </CoreCommerceProvider>
+  )
+}
+
+export const useCommerce = () => useCoreCommerce()
--- a/framework/bigcommerce/products/use-search.tsx
+++ b/framework/bigcommerce/products/use-search.tsx
@ -0,0 +1,63 @@
+import type { HookFetcher } from '@commerce/utils/types'
+import type { SwrOptions } from '@commerce/utils/use-data'
+import useCommerceSearch from '@commerce/products/use-search'
+import type { SearchProductsData } from '../api/catalog/products'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/catalog/products',
+  method: 'GET',
+}
+
+export type SearchProductsInput = {
+  search?: string
+  categoryId?: number
+  brandId?: number
+  sort?: string
+}
+
+export const fetcher: HookFetcher<SearchProductsData, SearchProductsInput> = (
+  options,
+  { search, categoryId, brandId, sort },
+  fetch
+) => {
+  // Use a dummy base as we only care about the relative path
+  const url = new URL(options?.url ?? defaultOpts.url, 'http://a')
+
+  if (search) url.searchParams.set('search', search)
+  if (Number.isInteger(categoryId))
+    url.searchParams.set('category', String(categoryId))
+  if (Number.isInteger(brandId)) url.searchParams.set('brand', String(brandId))
+  if (sort) url.searchParams.set('sort', sort)
+
+  return fetch({
+    url: url.pathname + url.search,
+    method: options?.method ?? defaultOpts.method,
+  })
+}
+
+export function extendHook(
+  customFetcher: typeof fetcher,
+  swrOptions?: SwrOptions<SearchProductsData, SearchProductsInput>
+) {
+  const useSearch = (input: SearchProductsInput = {}) => {
+    const response = useCommerceSearch(
+      defaultOpts,
+      [
+        ['search', input.search],
+        ['categoryId', input.categoryId],
+        ['brandId', input.brandId],
+        ['sort', input.sort],
+      ],
+      customFetcher,
+      { revalidateOnFocus: false, ...swrOptions }
+    )
+
+    return response
+  }
+
+  useSearch.extend = extendHook
+
+  return useSearch
+}
+
+export default extendHook(fetcher)
--- a/framework/bigcommerce/schema.d.ts
+++ b/framework/bigcommerce/schema.d.ts
--- a/framework/bigcommerce/schema.graphql
+++ b/framework/bigcommerce/schema.graphql
--- a/framework/bigcommerce/scripts/generate-definitions.js
+++ b/framework/bigcommerce/scripts/generate-definitions.js
@ -0,0 +1,49 @@
+/**
+ * Generates definitions for REST API endpoints that are being
+ * used by ../api using https://github.com/drwpow/swagger-to-ts
+ */
+const { readFileSync, promises } = require('fs')
+const path = require('path')
+const fetch = require('node-fetch')
+const swaggerToTS = require('@manifoldco/swagger-to-ts').default
+
+async function getSchema(filename) {
+  const url = `https://next-api.stoplight.io/projects/8433/files/${filename}`
+  const res = await fetch(url)
+
+  if (!res.ok) {
+    throw new Error(`Request failed with ${res.status}: ${res.statusText}`)
+  }
+
+  return res.json()
+}
+
+const schemas = Object.entries({
+  '../api/definitions/catalog.ts':
+    'BigCommerce_Catalog_API.oas2.yml?ref=version%2F20.930',
+  '../api/definitions/store-content.ts':
+    'BigCommerce_Store_Content_API.oas2.yml?ref=version%2F20.930',
+  '../api/definitions/wishlist.ts':
+    'BigCommerce_Wishlist_API.oas2.yml?ref=version%2F20.930',
+  // swagger-to-ts is not working for the schema of the cart API
+  // '../api/definitions/cart.ts':
+  //   'BigCommerce_Server_to_Server_Cart_API.oas2.yml',
+})
+
+async function writeDefinitions() {
+  const ops = schemas.map(async ([dest, filename]) => {
+    const destination = path.join(__dirname, dest)
+    const schema = await getSchema(filename)
+    const definition = swaggerToTS(schema.content, {
+      prettierConfig: 'package.json',
+    })
+
+    await promises.writeFile(destination, definition)
+
+    console.log(`✔️ Added definitions for: ${dest}`)
+  })
+
+  await Promise.all(ops)
+}
+
+writeDefinitions()
--- a/framework/bigcommerce/use-customer.tsx
+++ b/framework/bigcommerce/use-customer.tsx
@ -0,0 +1,38 @@
+import type { HookFetcher } from '@commerce/utils/types'
+import type { SwrOptions } from '@commerce/utils/use-data'
+import useCommerceCustomer from '@commerce/use-customer'
+import type { Customer, CustomerData } from './api/customers'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/customers',
+  method: 'GET',
+}
+
+export type { Customer }
+
+export const fetcher: HookFetcher<Customer | null> = async (
+  options,
+  _,
+  fetch
+) => {
+  const data = await fetch<CustomerData | null>({ ...defaultOpts, ...options })
+  return data?.customer ?? null
+}
+
+export function extendHook(
+  customFetcher: typeof fetcher,
+  swrOptions?: SwrOptions<Customer | null>
+) {
+  const useCustomer = () => {
+    return useCommerceCustomer(defaultOpts, [], customFetcher, {
+      revalidateOnFocus: false,
+      ...swrOptions,
+    })
+  }
+
+  useCustomer.extend = extendHook
+
+  return useCustomer
+}
+
+export default extendHook(fetcher)
--- a/framework/bigcommerce/use-login.tsx
+++ b/framework/bigcommerce/use-login.tsx
@ -0,0 +1,54 @@
+import { useCallback } from 'react'
+import type { HookFetcher } from '@commerce/utils/types'
+import { CommerceError } from '@commerce/utils/errors'
+import useCommerceLogin from '@commerce/use-login'
+import type { LoginBody } from './api/customers/login'
+import useCustomer from './use-customer'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/customers/login',
+  method: 'POST',
+}
+
+export type LoginInput = LoginBody
+
+export const fetcher: HookFetcher<null, LoginBody> = (
+  options,
+  { email, password },
+  fetch
+) => {
+  if (!(email && password)) {
+    throw new CommerceError({
+      message:
+        'A first name, last name, email and password are required to login',
+    })
+  }
+
+  return fetch({
+    ...defaultOpts,
+    ...options,
+    body: { email, password },
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useLogin = () => {
+    const { revalidate } = useCustomer()
+    const fn = useCommerceLogin<null, LoginInput>(defaultOpts, customFetcher)
+
+    return useCallback(
+      async function login(input: LoginInput) {
+        const data = await fn(input)
+        await revalidate()
+        return data
+      },
+      [fn]
+    )
+  }
+
+  useLogin.extend = extendHook
+
+  return useLogin
+}
+
+export default extendHook(fetcher)
--- a/framework/bigcommerce/use-logout.tsx
+++ b/framework/bigcommerce/use-logout.tsx
@ -0,0 +1,38 @@
+import { useCallback } from 'react'
+import type { HookFetcher } from '@commerce/utils/types'
+import useCommerceLogout from '@commerce/use-logout'
+import useCustomer from './use-customer'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/customers/logout',
+  method: 'GET',
+}
+
+export const fetcher: HookFetcher<null> = (options, _, fetch) => {
+  return fetch({
+    ...defaultOpts,
+    ...options,
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useLogout = () => {
+    const { mutate } = useCustomer()
+    const fn = useCommerceLogout<null>(defaultOpts, customFetcher)
+
+    return useCallback(
+      async function login() {
+        const data = await fn(null)
+        await mutate(null, false)
+        return data
+      },
+      [fn]
+    )
+  }
+
+  useLogout.extend = extendHook
+
+  return useLogout
+}
+
+export default extendHook(fetcher)
--- a/framework/bigcommerce/use-price.tsx
+++ b/framework/bigcommerce/use-price.tsx
@ -0,0 +1,2 @@
+export * from '@commerce/use-price'
+export { default } from '@commerce/use-price'
--- a/framework/bigcommerce/use-signup.tsx
+++ b/framework/bigcommerce/use-signup.tsx
@ -0,0 +1,54 @@
+import { useCallback } from 'react'
+import type { HookFetcher } from '@commerce/utils/types'
+import { CommerceError } from '@commerce/utils/errors'
+import useCommerceSignup from '@commerce/use-signup'
+import type { SignupBody } from './api/customers/signup'
+import useCustomer from './use-customer'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/customers/signup',
+  method: 'POST',
+}
+
+export type SignupInput = SignupBody
+
+export const fetcher: HookFetcher<null, SignupBody> = (
+  options,
+  { firstName, lastName, email, password },
+  fetch
+) => {
+  if (!(firstName && lastName && email && password)) {
+    throw new CommerceError({
+      message:
+        'A first name, last name, email and password are required to signup',
+    })
+  }
+
+  return fetch({
+    ...defaultOpts,
+    ...options,
+    body: { firstName, lastName, email, password },
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useSignup = () => {
+    const { revalidate } = useCustomer()
+    const fn = useCommerceSignup<null, SignupInput>(defaultOpts, customFetcher)
+
+    return useCallback(
+      async function signup(input: SignupInput) {
+        const data = await fn(input)
+        await revalidate()
+        return data
+      },
+      [fn]
+    )
+  }
+
+  useSignup.extend = extendHook
+
+  return useSignup
+}
+
+export default extendHook(fetcher)
--- a/framework/bigcommerce/wishlist/use-add-item.tsx
+++ b/framework/bigcommerce/wishlist/use-add-item.tsx
@ -0,0 +1,57 @@
+import { useCallback } from 'react'
+import { HookFetcher } from '@commerce/utils/types'
+import { CommerceError } from '@commerce/utils/errors'
+import useWishlistAddItem from '@commerce/wishlist/use-add-item'
+import type { ItemBody, AddItemBody } from '../api/wishlist'
+import useCustomer from '../use-customer'
+import useWishlist, { UseWishlistOptions, Wishlist } from './use-wishlist'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/wishlist',
+  method: 'POST',
+}
+
+export type AddItemInput = ItemBody
+
+export const fetcher: HookFetcher<Wishlist, AddItemBody> = (
+  options,
+  { item },
+  fetch
+) => {
+  // TODO: add validations before doing the fetch
+  return fetch({
+    ...defaultOpts,
+    ...options,
+    body: { item },
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useAddItem = (opts?: UseWishlistOptions) => {
+    const { data: customer } = useCustomer()
+    const { revalidate } = useWishlist(opts)
+    const fn = useWishlistAddItem(defaultOpts, customFetcher)
+
+    return useCallback(
+      async function addItem(input: AddItemInput) {
+        if (!customer) {
+          // A signed customer is required in order to have a wishlist
+          throw new CommerceError({
+            message: 'Signed customer not found',
+          })
+        }
+
+        const data = await fn({ item: input })
+        await revalidate()
+        return data
+      },
+      [fn, revalidate, customer]
+    )
+  }
+
+  useAddItem.extend = extendHook
+
+  return useAddItem
+}
+
+export default extendHook(fetcher)
--- a/framework/bigcommerce/wishlist/use-remove-item.tsx
+++ b/framework/bigcommerce/wishlist/use-remove-item.tsx
@ -0,0 +1,61 @@
+import { useCallback } from 'react'
+import { HookFetcher } from '@commerce/utils/types'
+import { CommerceError } from '@commerce/utils/errors'
+import useWishlistRemoveItem from '@commerce/wishlist/use-remove-item'
+import type { RemoveItemBody } from '../api/wishlist'
+import useCustomer from '../use-customer'
+import useWishlist, { UseWishlistOptions, Wishlist } from './use-wishlist'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/wishlist',
+  method: 'DELETE',
+}
+
+export type RemoveItemInput = {
+  id: string | number
+}
+
+export const fetcher: HookFetcher<Wishlist | null, RemoveItemBody> = (
+  options,
+  { itemId },
+  fetch
+) => {
+  return fetch({
+    ...defaultOpts,
+    ...options,
+    body: { itemId },
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useRemoveItem = (opts?: UseWishlistOptions) => {
+    const { data: customer } = useCustomer()
+    const { revalidate } = useWishlist(opts)
+    const fn = useWishlistRemoveItem<Wishlist | null, RemoveItemBody>(
+      defaultOpts,
+      customFetcher
+    )
+
+    return useCallback(
+      async function removeItem(input: RemoveItemInput) {
+        if (!customer) {
+          // A signed customer is required in order to have a wishlist
+          throw new CommerceError({
+            message: 'Signed customer not found',
+          })
+        }
+
+        const data = await fn({ itemId: String(input.id) })
+        await revalidate()
+        return data
+      },
+      [fn, revalidate, customer]
+    )
+  }
+
+  useRemoveItem.extend = extendHook
+
+  return useRemoveItem
+}
+
+export default extendHook(fetcher)
--- a/framework/bigcommerce/wishlist/use-wishlist-actions.tsx
+++ b/framework/bigcommerce/wishlist/use-wishlist-actions.tsx
@ -0,0 +1,11 @@
+import useAddItem from './use-add-item'
+import useRemoveItem from './use-remove-item'
+
+// This hook is probably not going to be used, but it's here
+// to show how a commerce should be structuring it
+export default function useWishlistActions() {
+  const addItem = useAddItem()
+  const removeItem = useRemoveItem()
+
+  return { addItem, removeItem }
+}
--- a/framework/bigcommerce/wishlist/use-wishlist.tsx
+++ b/framework/bigcommerce/wishlist/use-wishlist.tsx
@ -0,0 +1,76 @@
+import { HookFetcher } from '@commerce/utils/types'
+import { SwrOptions } from '@commerce/utils/use-data'
+import useCommerceWishlist from '@commerce/wishlist/use-wishlist'
+import type { Wishlist } from '../api/wishlist'
+import useCustomer from '../use-customer'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/wishlist',
+  method: 'GET',
+}
+
+export type { Wishlist }
+
+export interface UseWishlistOptions {
+  includeProducts?: boolean
+}
+
+export interface UseWishlistInput extends UseWishlistOptions {
+  customerId?: number
+}
+
+export const fetcher: HookFetcher<Wishlist | null, UseWishlistInput> = (
+  options,
+  { customerId, includeProducts },
+  fetch
+) => {
+  if (!customerId) return null
+
+  // Use a dummy base as we only care about the relative path
+  const url = new URL(options?.url ?? defaultOpts.url, 'http://a')
+
+  if (includeProducts) url.searchParams.set('products', '1')
+
+  return fetch({
+    url: url.pathname + url.search,
+    method: options?.method ?? defaultOpts.method,
+  })
+}
+
+export function extendHook(
+  customFetcher: typeof fetcher,
+  swrOptions?: SwrOptions<Wishlist | null, UseWishlistInput>
+) {
+  const useWishlist = ({ includeProducts }: UseWishlistOptions = {}) => {
+    const { data: customer } = useCustomer()
+    const response = useCommerceWishlist(
+      defaultOpts,
+      [
+        ['customerId', customer?.entityId],
+        ['includeProducts', includeProducts],
+      ],
+      customFetcher,
+      {
+        revalidateOnFocus: false,
+        ...swrOptions,
+      }
+    )
+
+    // Uses a getter to only calculate the prop when required
+    // response.data is also a getter and it's better to not trigger it early
+    Object.defineProperty(response, 'isEmpty', {
+      get() {
+        return (response.data?.items?.length || 0) <= 0
+      },
+      set: (x) => x,
+    })
+
+    return response
+  }
+
+  useWishlist.extend = extendHook
+
+  return useWishlist
+}
+
+export default extendHook(fetcher)
--- a/framework/commerce/api/index.ts
+++ b/framework/commerce/api/index.ts
@ -0,0 +1,36 @@
+import type { RequestInit, Response } from '@vercel/fetch'
+
+export interface CommerceAPIConfig {
+  locale?: string
+  commerceUrl: string
+  apiToken: string
+  cartCookie: string
+  cartCookieMaxAge: number
+  customerCookie: string
+  fetch<Data = any, Variables = any>(
+    query: string,
+    queryData?: CommerceAPIFetchOptions<Variables>,
+    fetchOptions?: RequestInit
+  ): Promise<GraphQLFetcherResult<Data>>
+}
+
+export type GraphQLFetcher<
+  Data extends GraphQLFetcherResult = GraphQLFetcherResult,
+  Variables = any
+> = (
+  query: string,
+  queryData?: CommerceAPIFetchOptions<Variables>,
+  fetchOptions?: RequestInit
+) => Promise<Data>
+
+export interface GraphQLFetcherResult<Data = any> {
+  data: Data
+  res: Response
+}
+
+export interface CommerceAPIFetchOptions<Variables> {
+  variables?: Variables
+  preview?: boolean
+}
+
+// TODO: define interfaces for all the available operations and API endpoints
--- a/framework/commerce/cart/use-add-item.tsx
+++ b/framework/commerce/cart/use-add-item.tsx
@ -0,0 +1,5 @@
+import useAction from '../utils/use-action'
+
+const useAddItem = useAction
+
+export default useAddItem
--- a/Show More
+++ b/Show More