Fetch the cart!

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',

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 (

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

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 (

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>