Working mock cart (#135)

Added a cart store which uses a cookie for item storage

Update, add, and remove now work

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-storefront",
-  "version": "8.16.2",
+  "version": "8.16.3",
   "description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.",
   "module": "./index.js",
   "license": "Apache-2.0",

src/mock-connector/addToCart.js

@@ -1,10 +1,5 @@
-export default async function addToCart({ color, size, product }, req, res) {
-  const { id, quantity } = product
+import { addItem } from './utils/cartStore'
 
-  console.log('product id: ', id)
-  console.log('color id: ', color || 'Not provided')
-  console.log('size id: ', size || 'Not provided')
-  console.log('quantity ', quantity || 1)
-
-  return { added: true, id }
+export default async function addToCart({ color, size, product, quantity }, req, res) {
+  return { cart: { items: addItem(product.id, quantity, req, res) } }
 }

src/mock-connector/cart.js

@@ -1,10 +1,8 @@
-import createProduct from './utils/createProduct'
 import fulfillAPIRequest from '../props/fulfillAPIRequest'
 import createAppData from './utils/createAppData'
+import { getProducts } from './utils/cartStore'
 
 export default async function cart(req, res) {
-  const products = [createProduct(1), createProduct(2), createProduct(3)]
-
   return fulfillAPIRequest(req, {
     appData: createAppData,
     pageData: () =>
@@ -17,10 +15,7 @@ export default async function cart(req, res) {
           },
         ],
         cart: {
-          items: products.map((item, i) => ({
-            ...item,
-            quantity: 1,
-          })),
+          items: getProducts(req, res),
         },
       }),
   })

src/mock-connector/index.js

@@ -2,6 +2,7 @@ export { default as cart } from './cart.js'
 export { default as account } from './account.js'
 export { default as addToCart } from './addToCart.js'
 export { default as updateCartItem } from './updateCartItem.js'
+export { default as removeCartItem } from './removeCartItem.js'
 export { default as home } from './home.js'
 export { default as product } from './product.js'
 export { default as productMedia } from './productMedia.js'

src/mock-connector/removeCartItem.js

@@ -1,3 +1,5 @@
-export default function removeCartItem(item, req, res) {
-  return {}
+import { removeItem } from './utils/cartStore'
+
+export default async function removeCartItem(item, req, res) {
+  return { cart: { items: removeItem(item.id, req, res) } }
 }

src/mock-connector/session.js

@@ -1,16 +1,11 @@
-import createProduct from './utils/createProduct'
+import { getProducts } from './utils/cartStore'
 
 export default async function session(req, res) {
-  const products = [createProduct(1), createProduct(2), createProduct(3)]
-
   return {
     name: 'Mark',
     email: '[email protected]',
     cart: {
-      items: products.map((item, i) => ({
-        ...item,
-        quantity: 1,
-      })),
+      items: getProducts(req, res),
     },
     currency: 'USD',
   }

src/mock-connector/updateCartItem.js

@@ -1,3 +1,5 @@
+import { updateItem } from './utils/cartStore'
+
 export default function updateCartItem(item, quantity, req, res) {
-  return {}
+  return { cart: { items: updateItem(item.id, quantity, req, res) } }
 }

src/mock-connector/utils/cartStore.js

@@ -0,0 +1,49 @@
+import createProduct from './createProduct'
+
+const CART_COOKIE = 'rsf_mock_cart'
+
+const initialStore = [
+  { id: 1, quantity: 1 },
+  { id: 2, quantity: 1 },
+]
+
+function getStore(req, res) {
+  if (!req.cookies[CART_COOKIE]) {
+    res.setHeader('Set-Cookie', `${CART_COOKIE}=${JSON.stringify(initialStore)}; Path=/`)
+  }
+  const store = req.cookies[CART_COOKIE] || initialStore
+  try {
+    return JSON.parse(store)
+  } catch (err) {
+    console.log('Failed parsing store from cookie', req.cookies[CART_COOKIE])
+    return []
+  }
+}
+
+function toProduct({ id, quantity }) {
+  return { ...createProduct(id), quantity }
+}
+
+export function getProducts(req, res) {
+  return getStore(req, res).map(toProduct)
+}
+
+export function updateItem(id, quantity, req, res) {
+  const newStore = [...getStore(req, res)]
+  const item = newStore.find(e => e.id === id)
+  item.quantity = quantity
+  res.setHeader('Set-Cookie', `${CART_COOKIE}=${JSON.stringify(newStore)}; Path=/`)
+  return newStore.map(toProduct)
+}
+
+export function removeItem(id, req, res) {
+  const newStore = [...getStore(req, res)].filter(e => e.id !== id)
+  res.setHeader('Set-Cookie', `${CART_COOKIE}=${JSON.stringify(newStore)}; Path=/`)
+  return newStore.map(toProduct)
+}
+
+export function addItem(id, quantity, req, res) {
+  const newStore = [{ id, quantity }, ...getStore(req, res)]
+  res.setHeader('Set-Cookie', `${CART_COOKIE}=${JSON.stringify(newStore)}; Path=/`)
+  return newStore.map(toProduct)
+}