From 0ad9ac0d5d863f48ba59da44fc669e5551ba617c Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Sun, 4 Oct 2020 13:12:41 -0500
Subject: [PATCH 01/10] Hook changes

---
 lib/bigcommerce/{cart.tsx => cart/index.tsx} |  0
 lib/bigcommerce/cart/use-add-item.tsx        | 19 +++++++++++++++++++
 lib/bigcommerce/index.tsx                    | 20 +++++++++-----------
 lib/commerce/{cart.tsx => cart/index.tsx}    |  5 +++--
 lib/commerce/cart/use-add-item.tsx           | 16 ++++++++++++++++
 lib/commerce/index.tsx                       | 16 ++++++++++++++--
 6 files changed, 61 insertions(+), 15 deletions(-)
 rename lib/bigcommerce/{cart.tsx => cart/index.tsx} (100%)
 create mode 100644 lib/bigcommerce/cart/use-add-item.tsx
 rename lib/commerce/{cart.tsx => cart/index.tsx} (85%)
 create mode 100644 lib/commerce/cart/use-add-item.tsx

diff --git a/lib/bigcommerce/cart.tsx b/lib/bigcommerce/cart/index.tsx
similarity index 100%
rename from lib/bigcommerce/cart.tsx
rename to lib/bigcommerce/cart/index.tsx
diff --git a/lib/bigcommerce/cart/use-add-item.tsx b/lib/bigcommerce/cart/use-add-item.tsx
new file mode 100644
index 000000000..6f84ea1a0
--- /dev/null
+++ b/lib/bigcommerce/cart/use-add-item.tsx
@@ -0,0 +1,19 @@
+import { Fetcher } from '@lib/commerce'
+import { default as useCartAddItem } from '@lib/commerce/cart/use-add-item'
+import { Cart } from '.'
+
+async function fetcher(fetch: Fetcher<Cart>, { item }: { item: any }) {
+  const res = await fetch({ url: '/api/cart' })
+
+  // {
+  //   method: 'POST',
+  //   headers: {
+  //     'Content-Type': 'application/json',
+  //   },
+  //   body: JSON.stringify({ product }),
+  // }
+}
+
+export default function useAddItem() {
+  return useCartAddItem<Cart, { item: any }>(fetcher)
+}
diff --git a/lib/bigcommerce/index.tsx b/lib/bigcommerce/index.tsx
index 006d5389c..c72d90a2a 100644
--- a/lib/bigcommerce/index.tsx
+++ b/lib/bigcommerce/index.tsx
@@ -21,19 +21,17 @@ async function getError(res: Response) {
   return { message: await getText(res) }
 }
 
-async function fetcher(url: string, query: string) {
-  const res = await fetch(url)
-
-  if (res.ok) {
-    return res.json()
-  }
-
-  throw await getError(res)
-}
-
 export const bigcommerceConfig: CommerceConfig = {
   locale: 'en-us',
-  fetcher,
+  async fetcher({ url, query }) {
+    const res = await fetch(url!)
+
+    if (res.ok) {
+      return res.json()
+    }
+
+    throw await getError(res)
+  },
 }
 
 export type BigcommerceConfig = Partial<CommerceConfig>
diff --git a/lib/commerce/cart.tsx b/lib/commerce/cart/index.tsx
similarity index 85%
rename from lib/commerce/cart.tsx
rename to lib/commerce/cart/index.tsx
index c11ecd017..dc90eb89b 100644
--- a/lib/commerce/cart.tsx
+++ b/lib/commerce/cart/index.tsx
@@ -1,6 +1,6 @@
 import { createContext, useContext, FC } from 'react'
 import useSWR, { responseInterface } from 'swr'
-import { useCommerce } from '.'
+import { useCommerce } from '..'
 
 export type CartResponse<C> = responseInterface<C, Error> & {
   isEmpty: boolean
@@ -18,7 +18,8 @@ function getCartCookie() {
 }
 
 const CartProvider: FC<CartProviderProps> = ({ children, query, url }) => {
-  const { fetcher } = useCommerce()
+  const { fetcher: fetch } = useCommerce()
+  const fetcher = (url?: string, query?: string) => fetch({ url, query })
   const cartId = getCartCookie()
   const response = useSWR(() => (cartId ? [url, query] : null), fetcher)
 
diff --git a/lib/commerce/cart/use-add-item.tsx b/lib/commerce/cart/use-add-item.tsx
new file mode 100644
index 000000000..05ca475de
--- /dev/null
+++ b/lib/commerce/cart/use-add-item.tsx
@@ -0,0 +1,16 @@
+import { Fetcher, useCommerce } from '..'
+
+export default function useAddItem<T, Input>(
+  fetcher: (fetch: Fetcher<T>, input: Input) => T | Promise<T>
+) {
+  const { fetcher: fetch } = useCommerce()
+
+  return async function addItem(input: Input) {
+    const data = fetcher(fetch, input)
+
+    // TODO: Using the state of the cart provider, update the saved cart
+    // return mutate('/api/cart')
+
+    return data
+  }
+}
diff --git a/lib/commerce/index.tsx b/lib/commerce/index.tsx
index 2659def45..eebeded90 100644
--- a/lib/commerce/index.tsx
+++ b/lib/commerce/index.tsx
@@ -1,4 +1,11 @@
-import { createContext, ReactNode, useContext } from 'react'
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+} from 'react'
+import useSWR from 'swr'
 
 const Commerce = createContext<CommerceConfig | null>(null)
 
@@ -12,7 +19,12 @@ export type CommerceConfig = {
   locale: string
 }
 
-export type Fetcher<T> = (...args: any) => T | Promise<T>
+export type Fetcher<T> = (options: FetcherOptions) => T | Promise<T>
+
+export type FetcherOptions = {
+  url?: string
+  query?: string
+}
 
 export function CommerceProvider({ children, config }: CommerceProps) {
   if (!config) {

From 6c378d98ea06b7888e2f9f4370fd4ff9a0bac988 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Sun, 4 Oct 2020 13:46:28 -0500
Subject: [PATCH 02/10] Updated hooks

---
 lib/bigcommerce/api/cart.ts           |  6 ++----
 lib/bigcommerce/cart/index.tsx        |  2 +-
 lib/bigcommerce/cart/use-add-item.tsx | 12 ++----------
 lib/bigcommerce/index.tsx             | 12 +++++++++---
 lib/commerce/index.tsx                |  3 +++
 5 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/lib/bigcommerce/api/cart.ts b/lib/bigcommerce/api/cart.ts
index e21d3c436..447713051 100644
--- a/lib/bigcommerce/api/cart.ts
+++ b/lib/bigcommerce/api/cart.ts
@@ -33,7 +33,7 @@ const cartApi: BigcommerceApiHandler = async (req, res, config) => {
         }
       }
 
-      return res.status(200).json({ cart: result.data ?? null })
+      return res.status(200).json({ data: result.data ?? null })
     }
 
     // Create or add a product to the cart
@@ -62,9 +62,7 @@ const cartApi: BigcommerceApiHandler = async (req, res, config) => {
         getCartCookie(name, data.id, config.cartCookieMaxAge)
       )
 
-      // There's no need to send any additional data here, the UI can use this response to display a
-      // "success" for the operation and revalidate the GET request for this same endpoint right after.
-      return res.status(200).json({ done: true })
+      return res.status(200).json({ done: { data } })
     }
   } catch (error) {
     const message =
diff --git a/lib/bigcommerce/cart/index.tsx b/lib/bigcommerce/cart/index.tsx
index 1b5f6b47e..691d38f3b 100644
--- a/lib/bigcommerce/cart/index.tsx
+++ b/lib/bigcommerce/cart/index.tsx
@@ -4,7 +4,7 @@ import {
   useCart as useCommerceCart,
 } from 'lib/commerce/cart'
 
-export type Cart = any
+export type Cart = {}
 
 export const CartProvider: FC = ({ children }) => {
   return <CommerceCartProvider url="/api/cart">{children}</CommerceCartProvider>
diff --git a/lib/bigcommerce/cart/use-add-item.tsx b/lib/bigcommerce/cart/use-add-item.tsx
index 6f84ea1a0..182702a0b 100644
--- a/lib/bigcommerce/cart/use-add-item.tsx
+++ b/lib/bigcommerce/cart/use-add-item.tsx
@@ -1,17 +1,9 @@
-import { Fetcher } from '@lib/commerce'
+import type { Fetcher } from '@lib/commerce'
 import { default as useCartAddItem } from '@lib/commerce/cart/use-add-item'
 import { Cart } from '.'
 
 async function fetcher(fetch: Fetcher<Cart>, { item }: { item: any }) {
-  const res = await fetch({ url: '/api/cart' })
-
-  // {
-  //   method: 'POST',
-  //   headers: {
-  //     'Content-Type': 'application/json',
-  //   },
-  //   body: JSON.stringify({ product }),
-  // }
+  return fetch({ url: '/api/cart', method: 'POST', body: { item } })
 }
 
 export default function useAddItem() {
diff --git a/lib/bigcommerce/index.tsx b/lib/bigcommerce/index.tsx
index c72d90a2a..5b4162d01 100644
--- a/lib/bigcommerce/index.tsx
+++ b/lib/bigcommerce/index.tsx
@@ -23,11 +23,17 @@ async function getError(res: Response) {
 
 export const bigcommerceConfig: CommerceConfig = {
   locale: 'en-us',
-  async fetcher({ url, query }) {
-    const res = await fetch(url!)
+  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) {
-      return res.json()
+      const { data } = await res.json()
+      return data
     }
 
     throw await getError(res)
diff --git a/lib/commerce/index.tsx b/lib/commerce/index.tsx
index eebeded90..69747c7e0 100644
--- a/lib/commerce/index.tsx
+++ b/lib/commerce/index.tsx
@@ -24,6 +24,9 @@ export type Fetcher<T> = (options: FetcherOptions) => T | Promise<T>
 export type FetcherOptions = {
   url?: string
   query?: string
+  method?: string
+  variables?: any
+  body?: any
 }
 
 export function CommerceProvider({ children, config }: CommerceProps) {

From 6fa1204e0b123821b4c7ee2d5266e9d16a699d94 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Sun, 4 Oct 2020 19:44:11 -0500
Subject: [PATCH 03/10] add to cart c:

---
 components/core/Layout/Layout.tsx             | 12 ++++--
 .../product/ProductView/ProductView.tsx       | 33 +++++++++++++----
 lib/bigcommerce/api/cart.ts                   | 37 ++++++++++++-------
 lib/bigcommerce/api/operations/get-product.ts | 17 +++++----
 .../api/utils/create-api-handler.ts           |  9 ++++-
 lib/bigcommerce/api/utils/fetch-store-api.ts  |  2 +-
 lib/bigcommerce/cart/index.tsx                |  6 ++-
 lib/bigcommerce/cart/use-add-item.tsx         | 18 +++++++--
 lib/bigcommerce/index.tsx                     |  8 ++--
 pages/product/[slug].tsx                      |  7 +++-
 10 files changed, 107 insertions(+), 42 deletions(-)

diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 05cbd504f..4c5861842 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -1,6 +1,8 @@
 import cn from 'classnames'
 import { FC } from 'react'
 import s from './Layout.module.css'
+import { CommerceProvider } from '@lib/bigcommerce'
+import { CartProvider } from '@lib/bigcommerce/cart'
 import { Navbar, Featurebar } from '@components/core'
 import { Container, Sidebar } from '@components/ui'
 import { CartSidebarView } from '@components/cart'
@@ -35,9 +37,13 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
 }
 
 const Layout: FC<Props> = (props) => (
-  <UIProvider>
-    <CoreLayout {...props} />
-  </UIProvider>
+  <CommerceProvider>
+    <CartProvider>
+      <UIProvider>
+        <CoreLayout {...props} />
+      </UIProvider>
+    </CartProvider>
+  </CommerceProvider>
 )
 
 export default Layout
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index d8e59fba1..db4c93baf 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -4,6 +4,9 @@ import s from './ProductView.module.css'
 import { Button } from '@components/ui'
 import { Swatch } from '@components/product'
 import { Colors } from '@components/ui/types'
+import type { Product } from '@lib/bigcommerce/api/operations/get-product'
+import useAddItem from '@lib/bigcommerce/cart/use-add-item'
+
 interface ProductData {
   name: string
   images: any
@@ -12,17 +15,31 @@ interface ProductData {
   colors?: any[]
   sizes?: any[]
 }
+
 interface Props {
   className?: string
   children?: any
   productData: ProductData
+  product: Product
 }
 
-const ProductView: FC<Props> = ({ productData, className }) => {
-  const rootClassName = cn(s.root, className)
-  const colors: Colors[] = ['pink', 'black', 'white']
+const COLORS: Colors[] = ['pink', 'black', 'white']
+
+const ProductView: FC<Props> = ({ product, productData, className }) => {
+  const addItem = useAddItem()
+  const addToCart = () => {
+    addItem({
+      item: {
+        productId: product.entityId,
+        variantId: product.variants.edges?.[0]?.node.entityId!,
+      },
+    })
+  }
+
+  console.log('PRODUCT', product)
+
   return (
-    <div className={rootClassName}>
+    <div className={cn(s.root, className)}>
       <div className="absolute">
         <h1 className="px-8 py-2 bg-violet text-white font-bold text-3xl">
           {productData.name}
@@ -38,8 +55,8 @@ const ProductView: FC<Props> = ({ productData, className }) => {
         <section className="pb-4">
           <h2 className="uppercase font-medium">Color</h2>
           <div className="flex flex-row py-4">
-            {colors.map((c) => (
-              <Swatch color={c} />
+            {COLORS.map((c) => (
+              <Swatch key={c} color={c} />
             ))}
           </div>
         </section>
@@ -57,7 +74,9 @@ const ProductView: FC<Props> = ({ productData, className }) => {
           <p>{productData.description}</p>
         </section>
         <section className="pb-4">
-          <Button className={s.button}>Add to Cart</Button>
+          <Button type="button" className={s.button} onClick={addToCart}>
+            Add to Cart
+          </Button>
         </section>
       </div>
     </div>
diff --git a/lib/bigcommerce/api/cart.ts b/lib/bigcommerce/api/cart.ts
index 447713051..1f92205de 100644
--- a/lib/bigcommerce/api/cart.ts
+++ b/lib/bigcommerce/api/cart.ts
@@ -5,11 +5,17 @@ import createApiHandler, {
 } from './utils/create-api-handler'
 import { BigcommerceApiError } from './utils/errors'
 
-type Cart = any
+export type Item = {
+  productId: number
+  variantId: number
+  quantity?: number
+}
+
+export type Cart = any
 
 const METHODS = ['GET', 'POST', 'PUT', 'DELETE']
 
-const cartApi: BigcommerceApiHandler = async (req, res, config) => {
+const cartApi: BigcommerceApiHandler<Cart> = async (req, res, config) => {
   if (!isAllowedMethod(req, res, METHODS)) return
 
   const { cookies } = req
@@ -27,7 +33,7 @@ const cartApi: BigcommerceApiHandler = async (req, res, config) => {
       } 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(name))
+          res.setHeader('Set-Cookie', getCartCookie(config.cartCookie))
         } else {
           throw error
         }
@@ -38,10 +44,11 @@ const cartApi: BigcommerceApiHandler = async (req, res, config) => {
 
     // Create or add a product to the cart
     if (req.method === 'POST') {
-      const { product } = req.body
+      const item: Item | undefined = req.body?.item
 
-      if (!product) {
+      if (!item) {
         return res.status(400).json({
+          data: null,
           errors: [{ message: 'Missing product' }],
         })
       }
@@ -49,28 +56,32 @@ const cartApi: BigcommerceApiHandler = async (req, res, config) => {
       const options = {
         method: 'POST',
         body: JSON.stringify({
-          line_items: [parseProduct(product)],
+          line_items: [parseItem(item)],
         }),
       }
       const { data } = cartId
         ? await config.storeApiFetch(`/v3/carts/${cartId}/items`, options)
         : await config.storeApiFetch('/v3/carts', options)
 
+      console.log('API DATA', data)
+
       // Create or update the cart cookie
       res.setHeader(
         'Set-Cookie',
-        getCartCookie(name, data.id, config.cartCookieMaxAge)
+        getCartCookie(config.cartCookie, data.id, config.cartCookieMaxAge)
       )
 
-      return res.status(200).json({ done: { data } })
+      return res.status(200).json({ data })
     }
   } 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({ errors: [{ message }] })
+    res.status(500).json({ data: null, errors: [{ message }] })
   }
 }
 
@@ -90,10 +101,10 @@ function getCartCookie(name: string, cartId?: string, maxAge?: number) {
   return serialize(name, cartId || '', options)
 }
 
-const parseProduct = (product: any) => ({
-  quantity: product.quantity,
-  product_id: product.productId,
-  variant_id: product.variantId,
+const parseItem = (item: Item) => ({
+  quantity: item.quantity || 1,
+  product_id: item.productId,
+  variant_id: item.variantId,
 })
 
 export default createApiHandler(cartApi)
diff --git a/lib/bigcommerce/api/operations/get-product.ts b/lib/bigcommerce/api/operations/get-product.ts
index d2e90b57f..89acc7aa7 100644
--- a/lib/bigcommerce/api/operations/get-product.ts
+++ b/lib/bigcommerce/api/operations/get-product.ts
@@ -33,11 +33,14 @@ export const getProductQuery = /* GraphQL */ `
   ${productInfoFragment}
 `
 
-export interface GetProductResult<T> {
-  product?: T extends GetProductQuery
-    ? Extract<T['site']['route']['node'], { __typename: 'Product' }>
-    : unknown
-}
+export type Product = Extract<
+  GetProductQuery['site']['route']['node'],
+  { __typename: 'Product' }
+>
+
+export type GetProductResult<
+  T extends { product?: any } = { product?: Product }
+> = T
 
 export type ProductVariables = Images &
   ({ path: string; slug?: never } | { path?: never; slug: string })
@@ -45,7 +48,7 @@ export type ProductVariables = Images &
 async function getProduct(opts: {
   variables: ProductVariables
   config?: BigcommerceConfig
-}): Promise<GetProductResult<GetProductQuery>>
+}): Promise<GetProductResult>
 
 async function getProduct<T, V = any>(opts: {
   query: string
@@ -61,7 +64,7 @@ async function getProduct({
   query?: string
   variables: ProductVariables
   config?: BigcommerceConfig
-}): Promise<GetProductResult<GetProductQuery>> {
+}): Promise<GetProductResult> {
   config = getConfig(config)
   const variables: GetProductQueryVariables = {
     ...config.imageVariables,
diff --git a/lib/bigcommerce/api/utils/create-api-handler.ts b/lib/bigcommerce/api/utils/create-api-handler.ts
index 144f13068..68bf92d38 100644
--- a/lib/bigcommerce/api/utils/create-api-handler.ts
+++ b/lib/bigcommerce/api/utils/create-api-handler.ts
@@ -1,12 +1,17 @@
 import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
 import { BigcommerceConfig, getConfig } from '..'
 
-export type BigcommerceApiHandler = (
+export type BigcommerceApiHandler<T = any> = (
   req: NextApiRequest,
-  res: NextApiResponse,
+  res: NextApiResponse<BigcommerceApiResponse<T>>,
   config: BigcommerceConfig
 ) => void | Promise<void>
 
+export type BigcommerceApiResponse<T> = {
+  data: T | null
+  errors?: { message: string }[]
+}
+
 export default function createApiHandler(handler: BigcommerceApiHandler) {
   return function getApiHandler({
     config,
diff --git a/lib/bigcommerce/api/utils/fetch-store-api.ts b/lib/bigcommerce/api/utils/fetch-store-api.ts
index a3dae1e34..687c53c0e 100644
--- a/lib/bigcommerce/api/utils/fetch-store-api.ts
+++ b/lib/bigcommerce/api/utils/fetch-store-api.ts
@@ -30,7 +30,7 @@ export default async function fetchStoreApi<T>(
 
   const contentType = res.headers.get('Content-Type')
 
-  if (contentType?.includes('application/json')) {
+  if (!contentType?.includes('application/json')) {
     throw new BigcommerceApiError(
       `Fetch to Bigcommerce API failed, expected JSON content but found: ${contentType}`,
       res
diff --git a/lib/bigcommerce/cart/index.tsx b/lib/bigcommerce/cart/index.tsx
index 691d38f3b..b778c86e1 100644
--- a/lib/bigcommerce/cart/index.tsx
+++ b/lib/bigcommerce/cart/index.tsx
@@ -7,7 +7,11 @@ import {
 export type Cart = {}
 
 export const CartProvider: FC = ({ children }) => {
-  return <CommerceCartProvider url="/api/cart">{children}</CommerceCartProvider>
+  return (
+    <CommerceCartProvider url="/api/bigcommerce/cart">
+      {children}
+    </CommerceCartProvider>
+  )
 }
 
 export function useCart() {
diff --git a/lib/bigcommerce/cart/use-add-item.tsx b/lib/bigcommerce/cart/use-add-item.tsx
index 182702a0b..becf2ad05 100644
--- a/lib/bigcommerce/cart/use-add-item.tsx
+++ b/lib/bigcommerce/cart/use-add-item.tsx
@@ -1,11 +1,23 @@
 import type { Fetcher } from '@lib/commerce'
 import { default as useCartAddItem } from '@lib/commerce/cart/use-add-item'
+import type { Item } from '../api/cart'
 import { Cart } from '.'
 
-async function fetcher(fetch: Fetcher<Cart>, { item }: { item: any }) {
-  return fetch({ url: '/api/cart', method: 'POST', body: { item } })
+export type { Item }
+
+function fetcher(fetch: Fetcher<Cart>, { item }: { item: Item }) {
+  if (
+    item.quantity &&
+    (!Number.isInteger(item.quantity) || item.quantity! < 1)
+  ) {
+    throw new Error(
+      'The item quantity has to be a valid integer greater than 0'
+    )
+  }
+
+  return fetch({ url: '/api/bigcommerce/cart', method: 'POST', body: { item } })
 }
 
 export default function useAddItem() {
-  return useCartAddItem<Cart, { item: any }>(fetcher)
+  return useCartAddItem<Cart, { item: Item }>(fetcher)
 }
diff --git a/lib/bigcommerce/index.tsx b/lib/bigcommerce/index.tsx
index 5b4162d01..7086812ec 100644
--- a/lib/bigcommerce/index.tsx
+++ b/lib/bigcommerce/index.tsx
@@ -33,6 +33,7 @@ export const bigcommerceConfig: CommerceConfig = {
 
     if (res.ok) {
       const { data } = await res.json()
+      console.log('DATA', data)
       return data
     }
 
@@ -44,12 +45,11 @@ export type BigcommerceConfig = Partial<CommerceConfig>
 
 export type BigcommerceProps = {
   children?: ReactNode
-  config: BigcommerceConfig
-}
+} & BigcommerceConfig
 
-export function CommerceProvider({ children, config }: BigcommerceProps) {
+export function CommerceProvider({ children, ...config }: BigcommerceProps) {
   return (
-    <CoreCommerceProvider config={{ ...config, ...bigcommerceConfig }}>
+    <CoreCommerceProvider config={{ ...bigcommerceConfig, ...config }}>
       {children}
     </CoreCommerceProvider>
   )
diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index 4e6af3308..2b408b49f 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -9,6 +9,11 @@ export async function getStaticProps({
   params,
 }: GetStaticPropsContext<{ slug: string }>) {
   const { product } = await getProduct({ variables: { slug: params!.slug } })
+
+  if (!product) {
+    throw new Error(`Product with slug '${params!.slug}' not found`)
+  }
+
   const productData = {
     name: 'T-Shirt',
     description: `
@@ -51,7 +56,7 @@ export default function Slug({
   return router.isFallback ? (
     <h1>Loading...</h1>
   ) : (
-    <ProductView productData={productData} />
+    <ProductView product={product} productData={productData} />
   )
 }
 

From 8a7798d4d69de4deba2d052aa585f66d03ada8de Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Sun, 4 Oct 2020 19:46:43 -0500
Subject: [PATCH 04/10] Make locale required

---
 components/core/Layout/Layout.tsx | 2 +-
 lib/bigcommerce/index.tsx         | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 4c5861842..f66a2ef4d 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -37,7 +37,7 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
 }
 
 const Layout: FC<Props> = (props) => (
-  <CommerceProvider>
+  <CommerceProvider locale="en-us">
     <CartProvider>
       <UIProvider>
         <CoreLayout {...props} />
diff --git a/lib/bigcommerce/index.tsx b/lib/bigcommerce/index.tsx
index 7086812ec..472ba6d36 100644
--- a/lib/bigcommerce/index.tsx
+++ b/lib/bigcommerce/index.tsx
@@ -45,6 +45,7 @@ export type BigcommerceConfig = Partial<CommerceConfig>
 
 export type BigcommerceProps = {
   children?: ReactNode
+  locale: string
 } & BigcommerceConfig
 
 export function CommerceProvider({ children, ...config }: BigcommerceProps) {

From a3cf05fbd2a2aebaa6507c4718feaab874595564 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Sun, 4 Oct 2020 21:20:52 -0500
Subject: [PATCH 05/10] Fetch the cart!

---
 lib/bigcommerce/api/cart.ts    | 16 ++++++++++++++--
 lib/bigcommerce/cart/index.tsx |  7 ++++---
 lib/bigcommerce/index.tsx      |  1 +
 lib/commerce/cart/index.tsx    | 10 +++-------
 lib/commerce/index.tsx         |  1 +
 package.json                   |  2 ++
 yarn.lock                      | 10 ++++++++++
 7 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/lib/bigcommerce/api/cart.ts b/lib/bigcommerce/api/cart.ts
index 1f92205de..b54a5fc14 100644
--- a/lib/bigcommerce/api/cart.ts
+++ b/lib/bigcommerce/api/cart.ts
@@ -11,7 +11,20 @@ export type Item = {
   quantity?: number
 }
 
-export type Cart = any
+// 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
+  // TODO: add missing fields
+}
 
 const METHODS = ['GET', 'POST', 'PUT', 'DELETE']
 
@@ -91,7 +104,6 @@ function getCartCookie(name: string, cartId?: string, maxAge?: number) {
       ? {
           maxAge,
           expires: new Date(Date.now() + maxAge * 1000),
-          httpOnly: true,
           secure: process.env.NODE_ENV === 'production',
           path: '/',
           sameSite: 'lax',
diff --git a/lib/bigcommerce/cart/index.tsx b/lib/bigcommerce/cart/index.tsx
index b778c86e1..d554443f0 100644
--- a/lib/bigcommerce/cart/index.tsx
+++ b/lib/bigcommerce/cart/index.tsx
@@ -1,10 +1,11 @@
-import { FC } from 'react'
+import type { FC } from 'react'
 import {
   CartProvider as CommerceCartProvider,
   useCart as useCommerceCart,
-} from 'lib/commerce/cart'
+} from '@lib/commerce/cart'
+import type { Cart } from '../api/cart'
 
-export type Cart = {}
+export type { Cart }
 
 export const CartProvider: FC = ({ children }) => {
   return (
diff --git a/lib/bigcommerce/index.tsx b/lib/bigcommerce/index.tsx
index 472ba6d36..d4c8acb39 100644
--- a/lib/bigcommerce/index.tsx
+++ b/lib/bigcommerce/index.tsx
@@ -23,6 +23,7 @@ async function getError(res: Response) {
 
 export const bigcommerceConfig: CommerceConfig = {
   locale: 'en-us',
+  cartCookie: 'bc_cartId',
   async fetcher({ url, method = 'GET', variables, body: bodyObj }) {
     const hasBody = Boolean(variables || bodyObj)
     const body = hasBody
diff --git a/lib/commerce/cart/index.tsx b/lib/commerce/cart/index.tsx
index dc90eb89b..dad90d7a2 100644
--- a/lib/commerce/cart/index.tsx
+++ b/lib/commerce/cart/index.tsx
@@ -1,5 +1,6 @@
 import { createContext, useContext, FC } from 'react'
 import useSWR, { responseInterface } from 'swr'
+import Cookies from 'js-cookie'
 import { useCommerce } from '..'
 
 export type CartResponse<C> = responseInterface<C, Error> & {
@@ -12,15 +13,10 @@ export type CartProviderProps =
 
 const CartContext = createContext<CartResponse<any> | null>(null)
 
-function getCartCookie() {
-  // TODO: Figure how the cart should be persisted
-  return null
-}
-
 const CartProvider: FC<CartProviderProps> = ({ children, query, url }) => {
-  const { fetcher: fetch } = useCommerce()
+  const { fetcher: fetch, cartCookie } = useCommerce()
   const fetcher = (url?: string, query?: string) => fetch({ url, query })
-  const cartId = getCartCookie()
+  const cartId = Cookies.get(cartCookie)
   const response = useSWR(() => (cartId ? [url, query] : null), fetcher)
 
   return (
diff --git a/lib/commerce/index.tsx b/lib/commerce/index.tsx
index 69747c7e0..c024df5de 100644
--- a/lib/commerce/index.tsx
+++ b/lib/commerce/index.tsx
@@ -17,6 +17,7 @@ export type CommerceProps = {
 export type CommerceConfig = {
   fetcher: Fetcher<any>
   locale: string
+  cartCookie: string
 }
 
 export type Fetcher<T> = (options: FetcherOptions) => T | Promise<T>
diff --git a/package.json b/package.json
index 49e51fe5b..a511f0191 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@types/classnames": "^2.2.10",
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
+    "js-cookie": "^2.2.1",
     "lodash": "^4.17.20",
     "next": "^9.5.4-canary.23",
     "postcss-nested": "^5.0.1",
@@ -36,6 +37,7 @@
     "@graphql-codegen/typescript": "^1.17.10",
     "@graphql-codegen/typescript-operations": "^1.17.8",
     "@types/cookie": "^0.4.0",
+    "@types/js-cookie": "^2.2.6",
     "@types/node": "^14.11.2",
     "@types/react": "^16.9.49",
     "graphql": "^15.3.0",
diff --git a/yarn.lock b/yarn.lock
index 58b4345ec..22063a99c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1540,6 +1540,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/js-cookie@^2.2.6":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.6.tgz#f1a1cb35aff47bc5cfb05cb0c441ca91e914c26f"
+  integrity sha512-+oY0FDTO2GYKEV0YPvSshGq9t7YozVkgvXLty7zogQNuCxBhT9/3INX9Q7H1aRZ4SUDRXAKlJuA4EA5nTt7SNw==
+
 "@types/js-yaml@^3.12.5":
   version "3.12.5"
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.5.tgz#136d5e6a57a931e1cce6f9d8126aa98a9c92a6bb"
@@ -4398,6 +4403,11 @@ jest-worker@^26.3.0:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
+js-cookie@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"

From f8df1c1879d79a49b42f2c534f7892d73a7f9098 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Mon, 5 Oct 2020 00:39:54 -0500
Subject: [PATCH 06/10] Fixed bugs and updated hooks

---
 components/product/ProductView/ProductView.tsx |  2 --
 lib/bigcommerce/cart/use-add-item.tsx          | 12 ++++++++++--
 lib/bigcommerce/index.tsx                      |  1 -
 lib/commerce/cart/index.tsx                    |  9 ++++++---
 lib/commerce/cart/use-add-item.tsx             |  7 +------
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index db4c93baf..8f765898c 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -36,8 +36,6 @@ const ProductView: FC<Props> = ({ product, productData, className }) => {
     })
   }
 
-  console.log('PRODUCT', product)
-
   return (
     <div className={cn(s.root, className)}>
       <div className="absolute">
diff --git a/lib/bigcommerce/cart/use-add-item.tsx b/lib/bigcommerce/cart/use-add-item.tsx
index becf2ad05..3b5d5541a 100644
--- a/lib/bigcommerce/cart/use-add-item.tsx
+++ b/lib/bigcommerce/cart/use-add-item.tsx
@@ -1,7 +1,7 @@
 import type { Fetcher } from '@lib/commerce'
 import { default as useCartAddItem } from '@lib/commerce/cart/use-add-item'
 import type { Item } from '../api/cart'
-import { Cart } from '.'
+import { Cart, useCart } from '.'
 
 export type { Item }
 
@@ -19,5 +19,13 @@ function fetcher(fetch: Fetcher<Cart>, { item }: { item: Item }) {
 }
 
 export default function useAddItem() {
-  return useCartAddItem<Cart, { item: Item }>(fetcher)
+  const { mutate } = useCart()
+  const fn = useCartAddItem<Cart, { item: Item }>(fetcher)
+  const addItem: typeof fn = async (input) => {
+    const data = await fn(input)
+    mutate(data)
+    return data
+  }
+
+  return addItem
 }
diff --git a/lib/bigcommerce/index.tsx b/lib/bigcommerce/index.tsx
index d4c8acb39..fb2d15757 100644
--- a/lib/bigcommerce/index.tsx
+++ b/lib/bigcommerce/index.tsx
@@ -34,7 +34,6 @@ export const bigcommerceConfig: CommerceConfig = {
 
     if (res.ok) {
       const { data } = await res.json()
-      console.log('DATA', data)
       return data
     }
 
diff --git a/lib/commerce/cart/index.tsx b/lib/commerce/cart/index.tsx
index dad90d7a2..76ef50c46 100644
--- a/lib/commerce/cart/index.tsx
+++ b/lib/commerce/cart/index.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, FC } from 'react'
+import { createContext, useContext, FC, useCallback } from 'react'
 import useSWR, { responseInterface } from 'swr'
 import Cookies from 'js-cookie'
 import { useCommerce } from '..'
@@ -17,10 +17,13 @@ const CartProvider: FC<CartProviderProps> = ({ children, query, url }) => {
   const { fetcher: fetch, cartCookie } = useCommerce()
   const fetcher = (url?: string, query?: string) => fetch({ url, query })
   const cartId = Cookies.get(cartCookie)
-  const response = useSWR(() => (cartId ? [url, query] : null), fetcher)
+  const response = useSWR(() => (cartId ? [url, query] : null), fetcher, {
+    revalidateOnFocus: false,
+  })
 
   return (
-    <CartContext.Provider value={{ ...response, isEmpty: true }}>
+    // Avoid destructuring in `response` so we don't trigger the getters early
+    <CartContext.Provider value={Object.assign(response, { isEmpty: true })}>
       {children}
     </CartContext.Provider>
   )
diff --git a/lib/commerce/cart/use-add-item.tsx b/lib/commerce/cart/use-add-item.tsx
index 05ca475de..105350cb2 100644
--- a/lib/commerce/cart/use-add-item.tsx
+++ b/lib/commerce/cart/use-add-item.tsx
@@ -6,11 +6,6 @@ export default function useAddItem<T, Input>(
   const { fetcher: fetch } = useCommerce()
 
   return async function addItem(input: Input) {
-    const data = fetcher(fetch, input)
-
-    // TODO: Using the state of the cart provider, update the saved cart
-    // return mutate('/api/cart')
-
-    return data
+    return fetcher(fetch, input)
   }
 }

From 2f3535894228a966dc7e8264cc489c6b92f61fba Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Mon, 5 Oct 2020 01:05:04 -0500
Subject: [PATCH 07/10] See if cart is empty

---
 components/cart/CartSidebarView/CartSidebarView.tsx |  5 +++++
 lib/bigcommerce/api/cart.ts                         |  6 ++++++
 lib/bigcommerce/cart/index.tsx                      | 10 ++++++++--
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 96fd650ae..f18144fa9 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -3,9 +3,14 @@ import { UserNav } from '@components/core'
 import { Button } from '@components/ui'
 import { Trash, Cross } from '@components/icon'
 import { useUI } from '@components/ui/context'
+import { useCart } from '@lib/bigcommerce/cart'
 
 const CartSidebarView: FC = () => {
+  const { data, isEmpty } = useCart()
   const { closeSidebar } = useUI()
+
+  console.log('CART', data, isEmpty)
+
   return (
     <>
       <header className="px-4 py-6 sm:px-6 border-b border-gray-200">
diff --git a/lib/bigcommerce/api/cart.ts b/lib/bigcommerce/api/cart.ts
index b54a5fc14..0ee234f26 100644
--- a/lib/bigcommerce/api/cart.ts
+++ b/lib/bigcommerce/api/cart.ts
@@ -23,6 +23,12 @@ export type Cart = {
   base_amount: number
   discount_amount: number
   cart_amount: number
+  line_items: {
+    custom_items: any[]
+    digital_items: any[]
+    gift_certificates: any[]
+    psysical_items: any[]
+  }
   // TODO: add missing fields
 }
 
diff --git a/lib/bigcommerce/cart/index.tsx b/lib/bigcommerce/cart/index.tsx
index d554443f0..dc4601987 100644
--- a/lib/bigcommerce/cart/index.tsx
+++ b/lib/bigcommerce/cart/index.tsx
@@ -18,8 +18,14 @@ export const CartProvider: FC = ({ children }) => {
 export function useCart() {
   const cart = useCommerceCart<Cart>()
 
-  // TODO: Do something to make this prop work
-  cart.isEmpty = true
+  Object.defineProperty(cart, 'isEmpty', {
+    get() {
+      return Object.values(cart.data?.line_items ?? {}).every(
+        (items) => !items.length
+      )
+    },
+    set: (x) => x,
+  })
 
   return cart
 }

From d095ac9f7067fa1098330af663de62e99ff052f5 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Mon, 5 Oct 2020 01:13:20 -0500
Subject: [PATCH 08/10] Updated types

---
 .../api/operations/get-all-product-paths.ts   | 21 ++++++++++++-------
 .../api/operations/get-all-products.ts        | 18 +++++++++-------
 lib/bigcommerce/api/operations/get-product.ts |  2 +-
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/lib/bigcommerce/api/operations/get-all-product-paths.ts b/lib/bigcommerce/api/operations/get-all-product-paths.ts
index d5d91a00d..7a9f49b23 100644
--- a/lib/bigcommerce/api/operations/get-all-product-paths.ts
+++ b/lib/bigcommerce/api/operations/get-all-product-paths.ts
@@ -16,17 +16,22 @@ export const getAllProductPathsQuery = /* GraphQL */ `
   }
 `
 
-export interface GetAllProductPathsResult<T> {
-  products: T extends GetAllProductPathsQuery
-    ? NonNullable<T['site']['products']['edges']>
-    : unknown
-}
+export type ProductPaths = NonNullable<
+  GetAllProductPathsQuery['site']['products']['edges']
+>
+
+export type GetAllProductPathsResult<
+  T extends { products: any[] } = { products: ProductPaths }
+> = T
 
 async function getAllProductPaths(opts?: {
   config?: BigcommerceConfig
-}): Promise<GetAllProductPathsResult<GetAllProductPathsQuery>>
+}): Promise<GetAllProductPathsResult>
 
-async function getAllProductPaths<T, V = any>(opts: {
+async function getAllProductPaths<
+  T extends { products: any[] },
+  V = any
+>(opts: {
   query: string
   config?: BigcommerceConfig
 }): Promise<GetAllProductPathsResult<T>>
@@ -37,7 +42,7 @@ async function getAllProductPaths({
 }: {
   query?: string
   config?: BigcommerceConfig
-} = {}): Promise<GetAllProductPathsResult<GetAllProductPathsQuery>> {
+} = {}): 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`
diff --git a/lib/bigcommerce/api/operations/get-all-products.ts b/lib/bigcommerce/api/operations/get-all-products.ts
index 23ed87667..db7dd406a 100644
--- a/lib/bigcommerce/api/operations/get-all-products.ts
+++ b/lib/bigcommerce/api/operations/get-all-products.ts
@@ -37,11 +37,13 @@ export const getAllProductsQuery = /* GraphQL */ `
   ${productInfoFragment}
 `
 
-export interface GetAllProductsResult<T> {
-  products: T extends GetAllProductsQuery
-    ? NonNullable<T['site']['products']['edges']>
-    : unknown
-}
+export type Products = NonNullable<
+  GetAllProductsQuery['site']['products']['edges']
+>
+
+export type GetAllProductsResult<
+  T extends { products: any[] } = { products: Products }
+> = T
 
 export type ProductVariables = Images &
   Omit<GetAllProductsQueryVariables, keyof ProductImageVariables>
@@ -49,9 +51,9 @@ export type ProductVariables = Images &
 async function getAllProducts(opts?: {
   variables?: ProductVariables
   config?: BigcommerceConfig
-}): Promise<GetAllProductsResult<GetAllProductsQuery>>
+}): Promise<GetAllProductsResult>
 
-async function getAllProducts<T, V = any>(opts: {
+async function getAllProducts<T extends { products: any[] }, V = any>(opts: {
   query: string
   variables?: V
   config?: BigcommerceConfig
@@ -65,7 +67,7 @@ async function getAllProducts({
   query?: string
   variables?: ProductVariables
   config?: BigcommerceConfig
-} = {}): Promise<GetAllProductsResult<GetAllProductsQuery>> {
+} = {}): Promise<GetAllProductsResult> {
   config = getConfig(config)
   const variables: GetAllProductsQueryVariables = {
     ...config.imageVariables,
diff --git a/lib/bigcommerce/api/operations/get-product.ts b/lib/bigcommerce/api/operations/get-product.ts
index 89acc7aa7..4f052bbee 100644
--- a/lib/bigcommerce/api/operations/get-product.ts
+++ b/lib/bigcommerce/api/operations/get-product.ts
@@ -50,7 +50,7 @@ async function getProduct(opts: {
   config?: BigcommerceConfig
 }): Promise<GetProductResult>
 
-async function getProduct<T, V = any>(opts: {
+async function getProduct<T extends { product?: any }, V = any>(opts: {
   query: string
   variables: V
   config?: BigcommerceConfig

From 3850e33de732aca1f7b915f2e27176afbc996a09 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Mon, 5 Oct 2020 01:22:00 -0500
Subject: [PATCH 09/10] Added a comment

---
 .../product/ProductView/ProductView.tsx       |  1 +
 yarn.lock                                     | 80 +------------------
 2 files changed, 3 insertions(+), 78 deletions(-)

diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 8f765898c..41bb26668 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -28,6 +28,7 @@ const COLORS: Colors[] = ['pink', 'black', 'white']
 const ProductView: FC<Props> = ({ product, productData, className }) => {
   const addItem = useAddItem()
   const addToCart = () => {
+    // TODO: loading state by awating the promise
     addItem({
       item: {
         productId: product.entityId,
diff --git a/yarn.lock b/yarn.lock
index 7ee4c75ae..7a29b837d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3077,11 +3077,6 @@ des.js@^1.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
-desandro-matches-selector@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz#717beed4dc13e7d8f3762f707a6d58a6774218e1"
-  integrity sha1-cXvu1NwT59jzdi9wem1YpndCGOE=
-
 detect-indent@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
@@ -3395,11 +3390,6 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-ev-emitter@^1.0.0, ev-emitter@^1.0.1, ev-emitter@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ev-emitter/-/ev-emitter-1.1.1.tgz#8f18b0ce5c76a5d18017f71c0a795c65b9138f2a"
-  integrity sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==
-
 event-target-shim@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
@@ -3617,30 +3607,11 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
-fizzy-ui-utils@^2.0.7:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz#7df45dcc4eb374a08b65d39bb9a4beedf7330505"
-  integrity sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==
-  dependencies:
-    desandro-matches-selector "^2.0.0"
-
 flatten@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
   integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
 
-flickity@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/flickity/-/flickity-2.2.1.tgz#81126e3d656cb54577358a5f959ffdbda088e670"
-  integrity sha512-fCZJGNqabgDrIhaUBqt2ydE8c5V6iiB3KQAf6dH3Z45MoDUm7g6+uZmteN0aLV9pzVItNqCbfOJQjsJM/rHuSA==
-  dependencies:
-    desandro-matches-selector "^2.0.0"
-    ev-emitter "^1.1.1"
-    fizzy-ui-utils "^2.0.7"
-    get-size "^2.0.3"
-    unidragger "^2.3.0"
-    unipointer "^2.3.0"
-
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -3735,11 +3706,6 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-size@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/get-size/-/get-size-2.0.3.tgz#54a1d0256b20ea7ac646516756202769941ad2ef"
-  integrity sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==
-
 get-stream@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
@@ -4058,13 +4024,6 @@ ignore@^5.1.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
-imagesloaded@^4.1.4:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/imagesloaded/-/imagesloaded-4.1.4.tgz#1376efcd162bb768c34c3727ac89cc04051f3cc7"
-  integrity sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==
-  dependencies:
-    ev-emitter "^1.0.0"
-
 immutable@~3.7.6:
   version "3.7.6"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
@@ -5784,13 +5743,6 @@ postcss-nested@^4.1.1:
     postcss "^7.0.32"
     postcss-selector-parser "^6.0.2"
 
-postcss-nested@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.1.tgz#e7a77f7a806a09c8de0f2c163d8e3d09f00f3139"
-  integrity sha512-ZHNSAoHrMtbEzjq+Qs4R0gHijpXc6F1YUv4TGmGaz7rtfMvVJBbu5hMOH+CrhEaljQpEmx5N/P8i1pXTkbVAmg==
-  dependencies:
-    postcss-selector-parser "^6.0.4"
-
 postcss-nesting@^7.0.0, postcss-nesting@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
@@ -5910,7 +5862,7 @@ postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
   integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==
@@ -6012,7 +5964,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6106,25 +6058,11 @@ react-dom@^16.13.1:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
-react-flickity-component@^3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/react-flickity-component/-/react-flickity-component-3.5.0.tgz#cc4d5ae2dcd8a37c3b95775946d7f4ae7843ea1a"
-  integrity sha512-79REAm9HRT7R+ksLA1kqzPqlntrzD7JBortIAKRoC36/BgXBfzOOF99tCGvptZvew0bMrHTkEzsFv9iSfW6wbA==
-  dependencies:
-    fbjs "^1.0.0"
-    imagesloaded "^4.1.4"
-    prop-types "^15.7.2"
-
 react-is@16.13.1, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-marquee-slider@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/react-marquee-slider/-/react-marquee-slider-1.1.2.tgz#a3df0201d17ee7b20627944c7efd8af78522bc6d"
-  integrity sha512-Fjkwphr+vYqR4yJ9adv0rJgFsKeb5/kx35lA5gVdPFiBDno6r/nHVRg/gdGVLp/SF4dHwoJwZBwa4mKTOpHnqQ==
-
 react-refresh@0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -7179,13 +7117,6 @@ unicode-property-aliases-ecmascript@^1.0.4:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
   integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
 
-unidragger@^2.3.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/unidragger/-/unidragger-2.3.1.tgz#2e8c34feff61affa96dc895234ddfc1ea4ec7515"
-  integrity sha512-u+IgG7AG0MXJTKcdzAIYxCm+W5FcnA9M28203Awl6jIcE3/+9OtEyUX4Wv64y7XNKEVRKPot52IV4V6x7FlF5Q==
-  dependencies:
-    unipointer "^2.3.0"
-
 union-value@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
@@ -7196,13 +7127,6 @@ union-value@^1.0.0:
     is-extendable "^0.1.1"
     set-value "^2.0.1"
 
-unipointer@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/unipointer/-/unipointer-2.3.0.tgz#ba0dc462ce31c2a88e80810e19c3bae0ce47ed9f"
-  integrity sha512-m85sAoELCZhogI1owtJV3Dva7GxkHk2lI7A0otw3o0OwCuC/Q9gi7ehddigEYIAYbhkqNdri+dU1QQkrcBvirQ==
-  dependencies:
-    ev-emitter "^1.0.1"
-
 uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"

From bb2b34626b29ef2565114f5a33a957907a987bf8 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Mon, 5 Oct 2020 01:23:57 -0500
Subject: [PATCH 10/10] fix type

---
 components/ui/Marquee/Marquee.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ui/Marquee/Marquee.tsx b/components/ui/Marquee/Marquee.tsx
index 3ef59ba1a..99ee6baf9 100644
--- a/components/ui/Marquee/Marquee.tsx
+++ b/components/ui/Marquee/Marquee.tsx
@@ -18,7 +18,7 @@ const M: FC<Props> = ({
   items,
   wrapper: Component = DefaultWrapper,
   variant = 'primary',
-  min = 'none',
+  // min = 'none',
 }) => {
   const rootClassName = cn(
     s.root,