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>

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

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"