Minimal list/detail views working with Vendure

.gitignore

@@ -18,6 +18,7 @@ out/
 # misc
 .DS_Store
 *.pem
+.idea
 
 # debug
 npm-debug.log*

framework/vendure/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))

framework/vendure/api/cart/handlers/add-item.ts

@@ -0,0 +1,39 @@
+import { parseCartItem } from '../../utils/parse-item'
+import getCartCookie from '../../utils/get-cart-cookie'
+import type { CartHandlers } from '..'
+
+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

framework/vendure/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

framework/vendure/api/cart/handlers/remove-item.ts

@@ -0,0 +1,33 @@
+import getCartCookie from '../../utils/get-cart-cookie'
+import type { CartHandlers } from '..'
+
+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

framework/vendure/api/cart/handlers/update-item.ts

@@ -0,0 +1,35 @@
+import { parseCartItem } from '../../utils/parse-item'
+import getCartCookie from '../../utils/get-cart-cookie'
+import type { CartHandlers } from '..'
+
+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

framework/vendure/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, {})

framework/vendure/api/catalog/handlers/get-products.ts

@@ -0,0 +1,79 @@
+import { Product } from 'framework/types'
+import getAllProducts, { ProductEdge } from '../../../product/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]: Product
+  }>((prods, p) => {
+    prods[p.id] = p
+    return prods
+  }, {})
+
+  const products: Product[] = 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

framework/vendure/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 getProducts from './handlers/get-products'
+import { Product } from 'framework/types'
+
+export type SearchProductsData = {
+  products: Product[]
+  found: boolean
+}
+
+export type ProductsHandlers = {
+  getProducts: BigcommerceHandler<
+    SearchProductsData,
+    { search?: 'string'; category?: string; brand?: string; sort?: string }
+  >
+}
+
+const METHODS = ['GET']
+
+// TODO(lf): 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, {})

framework/vendure/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, {}, {})

framework/vendure/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

framework/vendure/api/customers/handlers/login.ts

@@ -0,0 +1,49 @@
+import { FetcherError } from '@commerce/utils/errors'
+import login from '../../../auth/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

framework/vendure/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

framework/vendure/api/customers/handlers/signup.ts

@@ -0,0 +1,62 @@
+import { BigcommerceApiError } from '../../utils/errors'
+import login from '../../../auth/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

framework/vendure/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, {})

framework/vendure/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, {})

framework/vendure/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, {})

framework/vendure/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, {})

framework/vendure/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'
+  }
+}

framework/vendure/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'] }
+}

framework/vendure/api/fragments/category-tree.ts

@@ -0,0 +1,9 @@
+export const categoryTreeItemFragment = /* GraphQL */ `
+  fragment categoryTreeItem on CategoryTreeItem {
+    entityId
+    name
+    path
+    description
+    productCount
+  }
+`

framework/vendure/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}
+`

framework/vendure/api/index.ts

@@ -0,0 +1,53 @@
+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 VendureConfig extends CommerceAPIConfig {}
+
+const API_URL = process.env.VENDURE_SHOP_API_URL
+
+if (!API_URL) {
+  throw new Error(
+    `The environment variable BIGCOMMERCE_STOREFRONT_API_URL is missing and it's required to access your store`
+  )
+}
+
+export class Config {
+  private config: VendureConfig
+
+  constructor(config: VendureConfig) {
+    this.config = {
+      ...config,
+    }
+  }
+
+  getConfig(userConfig: Partial<VendureConfig> = {}) {
+    return Object.entries(userConfig).reduce<VendureConfig>(
+      (cfg, [key, value]) => Object.assign(cfg, { [key]: value }),
+      { ...this.config }
+    )
+  }
+
+  setConfig(newConfig: Partial<VendureConfig>) {
+    Object.assign(this.config, newConfig)
+  }
+}
+
+const ONE_DAY = 60 * 60 * 24
+const config = new Config({
+  commerceUrl: API_URL,
+  apiToken: '',
+  cartCookie: '',
+  customerCookie: '',
+  cartCookieMaxAge: ONE_DAY * 30,
+  fetch: fetchGraphqlApi,
+})
+
+export function getConfig(userConfig?: Partial<VendureConfig>) {
+  return config.getConfig(userConfig)
+}
+
+export function setConfig(newConfig: Partial<VendureConfig>) {
+  return config.setConfig(newConfig)
+}

framework/vendure/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)]
+}

framework/vendure/api/utils/create-api-handler.ts

@@ -0,0 +1,58 @@
+import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
+import { VendureConfig, getConfig } from '..'
+
+export type BigcommerceApiHandler<
+  T = any,
+  H extends BigcommerceHandlers = {},
+  Options extends {} = {}
+> = (
+  req: NextApiRequest,
+  res: NextApiResponse<BigcommerceApiResponse<T>>,
+  config: VendureConfig,
+  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: VendureConfig
+  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?: VendureConfig
+    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)
+    }
+  }
+}

framework/vendure/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'
+  }
+}

framework/vendure/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, {
+    ...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

framework/vendure/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
+  }
+}

framework/vendure/api/utils/fetch.ts

@@ -0,0 +1,3 @@
+import zeitFetch from '@vercel/fetch'
+
+export default zeitFetch()

framework/vendure/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) ?? []
+}

framework/vendure/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)
+}

framework/vendure/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
+}

framework/vendure/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
+})

framework/vendure/api/utils/set-product-locale-meta.ts

@@ -0,0 +1,21 @@
+import type { ProductNode } from '../../product/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
+    }
+  }
+}

framework/vendure/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]>
+}

framework/vendure/api/wishlist/handlers/add-item.ts

@@ -0,0 +1,56 @@
+import type { WishlistHandlers } from '..'
+import getCustomerId from '../../../customer/get-customer-id'
+import getCustomerWishlist from '../../../customer/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

framework/vendure/api/wishlist/handlers/get-wishlist.ts

@@ -0,0 +1,37 @@
+import getCustomerId from '../../../customer/get-customer-id'
+import getCustomerWishlist from '../../../customer/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

framework/vendure/api/wishlist/handlers/remove-item.ts

@@ -0,0 +1,39 @@
+import getCustomerId from '../../../customer/get-customer-id'
+import getCustomerWishlist, {
+  Wishlist,
+} from '../../../customer/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

framework/vendure/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 '../../customer/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: Product['id']
+  variantId: ProductVariant['id']
+}
+
+export type AddItemBody = { item: ItemBody }
+
+export type RemoveItemBody = { itemId: Product['id'] }
+
+export type WishlistBody = {
+  customer_id: Customer['id']
+  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, {})

framework/vendure/auth/index.ts

@@ -0,0 +1,3 @@
+export { default as useLogin } from './use-login'
+export { default as useLogout } from './use-logout'
+export { default as useSignup } from './use-signup'

framework/vendure/auth/login.ts

@@ -0,0 +1,73 @@
+import type { ServerResponse } from 'http'
+import type { LoginMutation, LoginMutationVariables } from '../schema'
+import type { RecursivePartial } from '../api/utils/types'
+import concatHeader from '../api/utils/concat-cookie'
+import { VendureConfig, getConfig } from '../api'
+
+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?: VendureConfig
+  res: ServerResponse
+}): Promise<LoginResult>
+
+async function login<T extends { result?: any }, V = any>(opts: {
+  query: string
+  variables: V
+  res: ServerResponse
+  config?: VendureConfig
+}): Promise<LoginResult<T>>
+
+async function login({
+  query = loginMutation,
+  variables,
+  res: response,
+  config,
+}: {
+  query?: string
+  variables: LoginVariables
+  res: ServerResponse
+  config?: VendureConfig
+}): 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

framework/vendure/auth/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 '../customer/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)

framework/vendure/auth/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 '../customer/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)

framework/vendure/auth/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 '../customer/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)

framework/vendure/cart/index.ts

@@ -0,0 +1,5 @@
+export { default as useCart } from './use-cart'
+export { default as useAddItem } from './use-add-item'
+export { default as useRemoveItem } from './use-remove-item'
+export { default as useWishlistActions } from './use-cart-actions'
+export { default as useUpdateItem } from './use-cart-actions'

framework/vendure/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)

framework/vendure/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 }
+}

framework/vendure/cart/use-cart.tsx

@@ -0,0 +1,54 @@
+import { normalizeCart } from '../lib/normalize'
+import type { HookFetcher } from '@commerce/utils/types'
+import type { SwrOptions } from '@commerce/utils/use-data'
+import useResponse from '@commerce/utils/use-response'
+import useCommerceCart, { CartInput } from '@commerce/cart/use-cart'
+import type { Cart as BigCommerceCart } from '../api/cart'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/cart',
+  method: 'GET',
+}
+
+type UseCartResponse = BigCommerceCart & Cart
+
+export const fetcher: HookFetcher<UseCartResponse | null, CartInput> = (
+  options,
+  { cartId },
+  fetch
+) => {
+  return cartId ? fetch({ ...defaultOpts, ...options }) : null
+}
+
+export function extendHook(
+  customFetcher: typeof fetcher,
+  swrOptions?: SwrOptions<UseCartResponse | null, CartInput>
+) {
+  const useCart = () => {
+    const response = useCommerceCart(defaultOpts, [], customFetcher, {
+      revalidateOnFocus: false,
+      ...swrOptions,
+    })
+    const res = useResponse(response, {
+      normalizer: normalizeCart,
+      descriptors: {
+        isEmpty: {
+          get() {
+            return Object.values(response.data?.line_items ?? {}).every(
+              (items) => !items.length
+            )
+          },
+          enumerable: true,
+        },
+      },
+    })
+
+    return res
+  }
+
+  useCart.extend = extendHook
+
+  return useCart
+}
+
+export default extendHook(fetcher)

framework/vendure/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)

framework/vendure/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)

framework/vendure/codegen.json

@@ -0,0 +1,22 @@
+{
+  "schema": {
+    "http://localhost:3001/shop-api": {}
+  },
+  "generates": {
+    "./framework/vendure/schema.d.ts": {
+      "plugins": [
+        "typescript"
+      ]
+    },
+    "./framework/vendure/schema.graphql": {
+      "plugins": [
+        "schema-ast"
+      ]
+    }
+  },
+  "hooks": {
+    "afterAllFileWrite": [
+      "prettier --write"
+    ]
+  }
+}

framework/vendure/common/get-all-pages.ts

@@ -0,0 +1,37 @@
+import type { RecursivePartial, RecursiveRequired } from '../api/utils/types'
+import { VendureConfig, getConfig } from '../api'
+import { definitions } from '../api/definitions/store-content'
+
+export type Page = definitions['page_Full']
+
+export type GetAllPagesResult<
+  T extends { pages: any[] } = { pages: Page[] }
+> = T
+
+async function getAllPages(opts?: {
+  config?: VendureConfig
+  preview?: boolean
+}): Promise<GetAllPagesResult>
+
+async function getAllPages<T extends { pages: any[] }>(opts: {
+  url: string
+  config?: VendureConfig
+  preview?: boolean
+}): Promise<GetAllPagesResult<T>>
+
+async function getAllPages({
+  config,
+  preview,
+}: {
+  url?: string
+  config?: VendureConfig
+  preview?: boolean
+} = {}): Promise<GetAllPagesResult> {
+  config = getConfig(config)
+
+  return {
+    pages: [],
+  }
+}
+
+export default getAllPages

framework/vendure/common/get-page.ts

@@ -0,0 +1,53 @@
+import type { RecursivePartial, RecursiveRequired } from '../api/utils/types'
+import { VendureConfig, getConfig } from '../api'
+import { definitions } from '../api/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?: VendureConfig
+  preview?: boolean
+}): Promise<GetPageResult>
+
+async function getPage<T extends { page?: any }, V = any>(opts: {
+  url: string
+  variables: V
+  config?: VendureConfig
+  preview?: boolean
+}): Promise<GetPageResult<T>>
+
+async function getPage({
+  url,
+  variables,
+  config,
+  preview,
+}: {
+  url?: string
+  variables: PageVariables
+  config?: VendureConfig
+  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

framework/vendure/common/get-site-info.ts

@@ -0,0 +1,106 @@
+import type { GetSiteInfoQuery, GetSiteInfoQueryVariables } from '../schema'
+import type { RecursivePartial, RecursiveRequired } from '../api/utils/types'
+import filterEdges from '../api/utils/filter-edges'
+import { VendureConfig, getConfig } from '../api'
+import { categoryTreeItemFragment } from '../api/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?: VendureConfig
+  preview?: boolean
+}): Promise<GetSiteInfoResult>
+
+async function getSiteInfo<
+  T extends { categories: any[]; brands: any[] },
+  V = any
+>(opts: {
+  query: string
+  variables?: V
+  config?: VendureConfig
+  preview?: boolean
+}): Promise<GetSiteInfoResult<T>>
+
+async function getSiteInfo({
+  query = getSiteInfoQuery,
+  variables,
+  config,
+}: {
+  query?: string
+  variables?: GetSiteInfoQueryVariables
+  config?: VendureConfig
+  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

framework/vendure/customer/get-customer-id.ts

@@ -0,0 +1,34 @@
+import { GetCustomerIdQuery } from '../schema'
+import { VendureConfig, getConfig } from '../api'
+
+export const getCustomerIdQuery = /* GraphQL */ `
+  query getCustomerId {
+    customer {
+      entityId
+    }
+  }
+`
+
+async function getCustomerId({
+  customerToken,
+  config,
+}: {
+  customerToken: string
+  config?: VendureConfig
+}): 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

framework/vendure/customer/get-customer-wishlist.ts

@@ -0,0 +1,87 @@
+import type { RecursivePartial, RecursiveRequired } from '../api/utils/types'
+import { definitions } from '../api/definitions/wishlist'
+import { VendureConfig, getConfig } from '../api'
+import getAllProducts, { ProductEdge } from '../product/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?: VendureConfig
+  includeProducts?: boolean
+}): Promise<GetCustomerWishlistResult>
+
+async function getCustomerWishlist<
+  T extends { wishlist?: any },
+  V = any
+>(opts: {
+  url: string
+  variables: V
+  config?: VendureConfig
+  includeProducts?: boolean
+}): Promise<GetCustomerWishlistResult<T>>
+
+async function getCustomerWishlist({
+  config,
+  variables,
+  includeProducts,
+}: {
+  url?: string
+  variables: GetCustomerWishlistVariables
+  config?: VendureConfig
+  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

framework/vendure/customer/index.ts

@@ -0,0 +1 @@
+export { default as useCustomer } from './use-customer'

framework/vendure/customer/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)

framework/vendure/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 vendureConfig: 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 VendureConfig = Partial<CommerceConfig>
+
+export type VendureProps = {
+  children?: ReactNode
+  locale: string
+} & VendureConfig
+
+export function CommerceProvider({ children, ...config }: VendureProps) {
+  return (
+    <CoreCommerceProvider config={{ ...vendureConfig, ...config }}>
+      {children}
+    </CoreCommerceProvider>
+  )
+}
+
+export const useCommerce = () => useCoreCommerce()

framework/vendure/lib/immutability.ts

@@ -0,0 +1,18 @@
+
+import update, { Context } from 'immutability-helper';
+
+const c = new Context();
+
+c.extend('$auto', function(value, object) {
+  return object ?
+    c.update(object, value):
+    c.update({}, value);
+});
+
+c.extend('$autoArray', function(value, object) {
+  return object ?
+    c.update(object, value):
+    c.update([], value);
+});
+
+export default c.update

framework/vendure/lib/normalize.ts

@@ -0,0 +1,118 @@
+import update from '@framework/lib/immutability'
+
+function normalizeProductOption(productOption: any) {
+  const {
+    node: {
+      entityId,
+      values: { edges },
+      ...rest
+    },
+  } = productOption
+
+  return {
+    id: entityId,
+    values: edges?.map(({ node }: any) => node),
+    ...rest,
+  }
+}
+
+export function normalizeProduct(productNode: any): Product {
+  const {
+    entityId: id,
+    productOptions,
+    prices,
+    path,
+    id: _,
+    options: _0,
+  } = productNode
+
+  return update(productNode, {
+    id: { $set: String(id) },
+    images: {
+      $apply: ({ edges }: any) =>
+        edges?.map(({ node: { urlOriginal, altText, ...rest } }: any) => ({
+          url: urlOriginal,
+          alt: altText,
+          ...rest,
+        })),
+    },
+    variants: {
+      $apply: ({ edges }: any) =>
+        edges?.map(({ node: { entityId, productOptions, ...rest } }: any) => ({
+          id: entityId,
+          options: productOptions?.edges
+            ? productOptions.edges.map(normalizeProductOption)
+            : [],
+          ...rest,
+        })),
+    },
+    options: {
+      $set: productOptions.edges
+        ? productOptions?.edges.map(normalizeProductOption)
+        : [],
+    },
+    brand: {
+      $apply: (brand: any) => (brand?.entityId ? brand?.entityId : null),
+    },
+    slug: {
+      $set: path?.replace(/^\/+|\/+$/g, ''),
+    },
+    price: {
+      $set: {
+        value: prices?.price.value,
+        currencyCode: prices?.price.currencyCode,
+      },
+    },
+    $unset: ['entityId'],
+  })
+}
+
+export function normalizeCart(data: any): Cart {
+  return update(data, {
+    $auto: {
+      items: { $set: data?.line_items?.physical_items?.map(itemsToProducts) },
+      subTotal: { $set: data?.base_amount },
+      total: { $set: data?.cart_amount },
+    },
+    $unset: ['created_time', 'coupons', 'line_items', 'email'],
+  })
+}
+
+function itemsToProducts(item: any): CartItem {
+  const {
+    id,
+    name,
+    quantity,
+    product_id,
+    variant_id,
+    image_url,
+    list_price,
+    sale_price,
+    extended_list_price,
+    extended_sale_price,
+    ...rest
+  } = item
+
+  return update(item, {
+    $auto: {
+      prices: {
+        $auto: {
+          listPrice: { $set: list_price },
+          salePrice: { $set: sale_price },
+          extendedListPrice: { $set: extended_list_price },
+          extendedSalePrice: { $set: extended_sale_price },
+        },
+      },
+      images: {
+        $set: [
+          {
+            alt: name,
+            url: image_url,
+          },
+        ],
+      },
+      productId: { $set: product_id },
+      variantId: { $set: variant_id },
+    },
+  })
+}

framework/vendure/product/get-all-product-paths.ts

@@ -0,0 +1,67 @@
+import type {
+  GetAllProductPathsQuery,
+  GetAllProductPathsQueryVariables,
+} from '../schema'
+import type { RecursivePartial, RecursiveRequired } from '../api/utils/types'
+import filterEdges from '../api/utils/filter-edges'
+import { VendureConfig, getConfig } from '../api'
+
+export const getAllProductPathsQuery = /* GraphQL */ `
+  query getAllProductPaths($first: Int = 100) {
+    products(options: { take: $first }) {
+      items {
+        slug
+      }
+    }
+  }
+`
+
+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?: VendureConfig
+}): Promise<GetAllProductPathsResult>
+
+async function getAllProductPaths<
+  T extends { products: any[] },
+  V = any
+>(opts: {
+  query: string
+  variables?: V
+  config?: VendureConfig
+}): Promise<GetAllProductPathsResult<T>>
+
+async function getAllProductPaths({
+  query = getAllProductPathsQuery,
+  variables,
+  config,
+}: {
+  query?: string
+  variables?: GetAllProductPathsQueryVariables
+  config?: VendureConfig
+} = {}): 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.products.items
+
+  return {
+    products: products.map(p => ({ node: { path: `/${p.slug}` } })),
+  }
+}
+
+export default getAllProductPaths

framework/vendure/product/get-all-products.ts

@@ -0,0 +1,83 @@
+import type { RecursivePartial, RecursiveRequired } from '../api/utils/types'
+import filterEdges from '../api/utils/filter-edges'
+import setProductLocaleMeta from '../api/utils/set-product-locale-meta'
+import { productConnectionFragment } from '../api/fragments/product'
+import { VendureConfig, getConfig } from '../api'
+import { normalizeProduct } from '../lib/normalize'
+
+export const getAllProductsQuery = /* GraphQL */ `
+  query getAllProducts(
+    $input: SearchInput!
+  ) {
+    search(input: $input) {
+        items {
+          productId
+          productName
+          description
+          description
+          slug
+          sku
+          currencyCode
+          productAsset {
+            id
+            preview
+          }
+          priceWithTax {
+            ... on SinglePrice { value }
+            ... on PriceRange { min max }
+          }
+        }
+    }
+  }
+`
+
+export type ProductVariables = { first?: number; }
+
+async function getAllProducts(opts?: {
+  variables?: ProductVariables
+  config?: VendureConfig
+  preview?: boolean
+}): Promise<{ products: Product[] }>
+
+async function getAllProducts({
+  query = getAllProductsQuery,
+  variables: { ...vars } = {},
+  config,
+}: {
+  query?: string
+  variables?: ProductVariables
+  config?: VendureConfig
+  preview?: boolean
+} = {}): Promise<{ products: Product[] | any[] }> {
+  config = getConfig(config)
+  const variables = {
+    input: {
+      take: vars.first,
+      groupByProduct: true,
+    }
+  }
+  const { data } = await config.fetch(
+    query,
+    { variables }
+  )
+
+  return { products: data.search.items.map((item: any) => {
+    return {
+      id: item.productId,
+      name: item.productName,
+      description: item.description,
+      slug: item.slug,
+      path: item.slug,
+      images: [{ url: item.productAsset?.preview }],
+      variants: [],
+      price: {
+        value: (item.priceWithTax.min / 100),
+        currencyCode: item.currencyCode,
+      },
+      options: [],
+      sku: item.sku,
+    }
+    }) }
+}
+
+export default getAllProducts

framework/vendure/product/get-product.ts

@@ -0,0 +1,84 @@
+import setProductLocaleMeta from '../api/utils/set-product-locale-meta'
+import { productInfoFragment } from '../api/fragments/product'
+import { VendureConfig, getConfig } from '../api'
+import { normalizeProduct } from '@framework/lib/normalize'
+
+export const getProductQuery = /* GraphQL */ `
+  query getProduct($slug: String!) {
+    product(slug: $slug) {
+      id
+      name
+      slug
+      description
+      assets {
+        id
+        preview
+        name
+      }
+      variants {
+        id
+        priceWithTax
+        currencyCode
+        options {
+          id
+          name
+          code
+          groupId
+        }
+      }
+      optionGroups {
+        code
+        name
+        options {
+          name
+        }
+      }
+    }
+  }
+`
+
+async function getProduct({
+  query = getProductQuery,
+  variables,
+  config,
+}: {
+  query?: string
+  variables: { slug: string; }
+  config?: VendureConfig
+  preview?: boolean
+}): Promise<Product | {} | any> {
+  config = getConfig(config)
+
+  const locale = config.locale
+  const { data } = await config.fetch(query, { variables })
+  const product = data.product
+
+  if (product) {
+    return {
+      product: {
+        id: product.id,
+        name: product.name,
+        description: product.description,
+        slug: product.slug,
+        images: product.assets.map((a: any) => ({ url: a.preview, alt: a.name })),
+        variants: product.variants.map((v: any) => ({
+          id: v.id,
+          options: v.options.map((o: any) => ({ displayName: o.name, values: [] })),
+        })),
+        price: {
+          value: product.variants[0].priceWithTax / 100,
+          currencyCode: product.variants[0].currencyCode,
+        },
+        options: product.optionGroups.map((og: any) => ({
+          displayName: og.name,
+          values: og.options.map((o: any) => ({ label: o.name + ' hello' })),
+        })),
+      }
+    };
+  }
+
+  return {}
+}
+
+export default getProduct
+

framework/vendure/product/index.ts

@@ -0,0 +1,4 @@
+export { default as usePrice } from './use-price'
+export { default as useSearch } from './use-search'
+export { default as getProduct } from './get-product'
+export { default as getAllProducts } from './get-all-products'

framework/vendure/product/use-price.tsx

@@ -0,0 +1,2 @@
+export * from '@commerce/use-price'
+export { default } from '@commerce/use-price'

framework/vendure/product/use-search.tsx

@@ -0,0 +1,64 @@
+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(categoryId))
+    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)

framework/vendure/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 = `http://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()

framework/vendure/wishlist/index.ts

@@ -0,0 +1,4 @@
+export { default as useAddItem } from './use-add-item'
+export { default as useWishlist } from './use-wishlist'
+export { default as useRemoveItem } from './use-remove-item'
+export { default as useWishlistActions } from './use-wishlist-actions'

framework/vendure/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 '../customer/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)

framework/vendure/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 '../customer/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)

framework/vendure/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 }
+}

framework/vendure/wishlist/use-wishlist.tsx

@@ -0,0 +1,79 @@
+import { HookFetcher } from '@commerce/utils/types'
+import { SwrOptions } from '@commerce/utils/use-data'
+import defineProperty from '@commerce/utils/define-property'
+import useCommerceWishlist from '@commerce/wishlist/use-wishlist'
+import type { Wishlist } from '../api/wishlist'
+import useCustomer from '../customer/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?.id],
+        ['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
+    if (!('isEmpty' in response)) {
+      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)

next.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   images: {
-    domains: ['cdn11.bigcommerce.com'],
+    domains: ['cdn11.bigcommerce.com', 'localhost'],
   },
   i18n: {
     locales: ['en-US', 'es'],

package.json

@@ -9,6 +9,7 @@
     "prettier-fix": "prettier --write .",
     "find:unused": "next-unused",
     "generate": "graphql-codegen",
+    "generate:vendure": "graphql-codegen --config framework/vendure/codegen.json",
     "generate:definitions": "node framework/bigcommerce/scripts/generate-definitions.js"
   },
   "license": "MIT",

pages/index.tsx

@@ -21,15 +21,15 @@ export async function getStaticProps({
     preview,
   })
 
-  const { categories, brands } = await getSiteInfo({ config, preview })
+  // const { categories, brands } = await getSiteInfo({ config, preview })
-  const { pages } = await getAllPages({ config, preview })
+  // const { pages } = await getAllPages({ config, preview })
 
   return {
     props: {
       products,
-      categories,
+      categories: [],
-      brands,
+      brands: [],
-      pages,
+      pages: [],
     },
     revalidate: 14400,
   }

tsconfig.json

@@ -22,8 +22,8 @@
       "@utils/*": ["utils/*"],
       "@commerce/*": ["framework/commerce/*"],
       "@commerce": ["framework/commerce"],
-      "@framework/*": ["framework/bigcommerce/*"],
+      "@framework/*": ["framework/vendure/*"],
-      "@framework": ["framework/bigcommerce"]
+      "@framework": ["framework/vendure"]
     }
   },
   "include": [