Cart and order data persistence on the server side (#21)

* Cart and order data persistence on the server side

* commerce-generic:
- better files naming
- comment about the persistence limitation in serverless environment

---------

Co-authored-by: Marcin Slezak <[email protected]>

composable-ui/src/components/checkout/checkout-provider/checkout-provider.tsx

@@ -108,6 +108,7 @@ export const CheckoutProvider = ({ children }: CheckoutProviderProps) => {
    */
 
   const [checkoutState, setCheckoutState] = useState<CheckoutState>({
+    cartId: cart.id || '',
     config: {
       billingSameAsShipping: true,
       gdpr: false,

composable-ui/src/components/checkout/step-1/form-guest.tsx

@@ -6,7 +6,7 @@ import { InputField } from '@composable/ui'
 import { CHECKOUT_FORM_KEY } from '../constants'
 import { CheckoutInput } from '@composable/types'
 
-type FormData = Omit<CheckoutInput['customer'], 'id' | 'name'>
+type FormData = Omit<CheckoutInput['customer'], 'id' | 'name' | 'cartId'>
 
 type GuestFormProps = Pick<
   UseCheckoutFormProps<FormData>,

composable-ui/src/server/api/routers/commerce/procedures/checkout/create-order.ts

@@ -6,6 +6,7 @@ export const createOrder = protectedProcedure
   .input(
     z.object({
       checkout: z.object({
+        cartId: z.string(),
         customer: z.object({
           id: z.string().optional(),
           email: z.string(),

composable-ui/src/utils/__mocks__/api.ts

@@ -28,21 +28,27 @@ export const api = {
           items: [
             {
               __typename: 'BannerSplit',
+              id: '23385feb-cd12-4122-8105-bf5da178d70c',
             },
             {
               __typename: 'BannerFull',
+              id: '2d095fdd-e3ea-4f7a-907a-359ef1d0593d',
             },
             {
               __typename: 'BannerTextOnly',
+              id: '40433348-1eb0-43fd-99dc-090c79972512',
             },
             {
               __typename: 'BannerTextOnly',
+              id: 'a609a45e-f3f2-4cfc-8709-29a08153c9ac',
             },
             {
               __typename: 'Grid',
+              id: '9fad8aa3-6e8d-43e2-b79a-492409b49003',
             },
             {
               __typename: 'CommerceConnector',
+              id: '662f1110-8a51-4a11-9a8e-730a43d6867d',
             },
           ],
         },

packages/commerce-generic/package.json

@@ -10,7 +10,9 @@
     "ts": "tsc --noEmit --incremental"
   },
   "dependencies": {
-    "@composable/types": "workspace:*"
+    "@composable/types": "workspace:*",
+    "@types/node-persist": "^3.1.5",
+    "node-persist": "^3.1.3"
   },
   "devDependencies": {
     "eslint-config-custom": "workspace:*",

packages/commerce-generic/src/data/generate-cart-data.ts

@@ -0,0 +1,44 @@
+import { Cart, CartItem } from '@composable/types'
+import products from './products.json'
+import { randomUUID } from 'crypto'
+
+const findProductById = (id: string) => {
+  return products.find((product) => product.id === id) ?? products[0]
+}
+
+export const generateEmptyCart = (cartId?: string): Cart => ({
+  id: cartId || randomUUID(),
+  items: [],
+  summary: {},
+})
+
+export const generateCartItem = (productId: string, quantity: number) => {
+  const _product = findProductById(productId)
+  return {
+    brand: _product.brand,
+    category: _product.category,
+    id: _product.id,
+    image: _product.images[0],
+    name: _product.name,
+    price: _product.price,
+    quantity: quantity ?? 1,
+    sku: _product.sku,
+    slug: _product.slug,
+    type: _product.type,
+  }
+}
+
+export const calculateCartSummary = (cartItems: CartItem[]) => {
+  const subtotal = cartItems.reduce((_subtotal, item) => {
+    return _subtotal + item.price * (item.quantity ?? 1)
+  }, 0)
+  const taxes = subtotal * 0.07
+  const total = subtotal + taxes
+
+  return {
+    subtotalPrice: subtotal.toFixed(2),
+    taxes: taxes.toFixed(2),
+    totalPrice: total.toFixed(2),
+    shipping: 'Free',
+  }
+}

packages/commerce-generic/src/data/mock-storage.ts

@@ -0,0 +1,41 @@
+/**
+ *  IMPORTANT: The following implementation is purely for demonstration purposes and should NEVER be used in a Production environment.
+ *
+ *  The current persistence mechanism leverages storing data as JSON documents in the serverless functions' file system.
+ *  Keep in mind that these files may be destroyed and recreated by the Cloud Provider (e.g., Vercel or Netlify) at any time.
+ *  As a result, users with a working cart containing items may experience data loss and need to start anew if serverless
+ *  functions are reinitialized. This is not suitable for a Production environment where data persistence and reliability are critical.
+ */
+import storage from 'node-persist'
+import path from 'path'
+import os from 'os'
+import { Order, Cart } from '@composable/types'
+
+const storageFolderPath = path.join(os.tmpdir(), 'composable-ui-storage')
+
+storage.init({
+  dir: storageFolderPath,
+})
+
+export const getOrder = async (orderId: string): Promise<Order | undefined> => {
+  return storage.getItem(`order-${orderId}`)
+}
+
+export const saveOrder = async (order: Order) => {
+  await storage.setItem(`order-${order.id}`, order)
+  return order
+}
+
+export const getCart = async (cartId: string): Promise<Cart | undefined> => {
+  return storage.getItem(`cart-${cartId}`)
+}
+
+export const saveCart = async (cart: Cart) => {
+  await storage.setItem(`cart-${cart.id}`, cart)
+  return cart
+}
+
+export const deleteCart = async (cartId: string) => {
+  const result = await storage.del(`cart-${cartId}`)
+  return result.removed
+}

packages/commerce-generic/src/services/cart/add-cart-item.ts

@@ -1,18 +1,30 @@
 import { CommerceService } from '@composable/types'
-import { generateCartData } from '../../data/generateCartData'
-import cart from '../../data/cart.json'
+import { getCart, saveCart } from '../../data/mock-storage'
+import {
+  generateCartItem,
+  calculateCartSummary,
+  generateEmptyCart,
+} from '../../data/generate-cart-data'
 
 export const addCartItem: CommerceService['addCartItem'] = async ({
   cartId,
   productId,
   quantity,
   variantId,
 }) => {
-  const { items, summary } = generateCartData({ productId, quantity })
+  const cart = (await getCart(cartId)) || generateEmptyCart(cartId)
 
-  return {
-    ...cart,
-    items,
-    summary,
+  const isProductInCartAlready = cart.items.some(
+    (item) => item.id === productId
+  )
+
+  if (isProductInCartAlready) {
+    cart.items.find((item) => item.id === productId)!.quantity++
+  } else {
+    const newItem = generateCartItem(productId, quantity)
+    cart.items.push(newItem)
   }
+  cart.summary = calculateCartSummary(cart.items)
+
+  return saveCart(cart)
 }

packages/commerce-generic/src/services/cart/create-cart.ts

@@ -1,6 +1,7 @@
 import { CommerceService } from '@composable/types'
-import cart from '../../data/cart.json'
+import { saveCart } from '../../data/mock-storage'
+import { generateEmptyCart } from '../../data/generate-cart-data'
 
 export const createCart: CommerceService['createCart'] = async () => {
-  return cart
+  return saveCart(generateEmptyCart())
 }

packages/commerce-generic/src/services/cart/delete-cart-item.ts

@@ -1,9 +1,22 @@
 import { CommerceService } from '@composable/types'
-import cart from '../../data/cart.json'
+import { getCart, saveCart } from '../../data/mock-storage'
+
+import { calculateCartSummary } from '../../data/generate-cart-data'
 
 export const deleteCartItem: CommerceService['deleteCartItem'] = async ({
   cartId,
   productId,
 }) => {
-  return cart
+  const cart = await getCart(cartId)
+
+  if (!cart) {
+    throw new Error(
+      `[deleteCartItem] Could not found cart with requested cart id: ${cartId}`
+    )
+  }
+
+  cart.items = cart.items.filter((item) => item.id !== productId)
+  cart.summary = calculateCartSummary(cart.items)
+
+  return saveCart(cart)
 }

packages/commerce-generic/src/services/cart/get-cart.ts

@@ -1,17 +1,10 @@
 import { CommerceService } from '@composable/types'
-import { generateCartData } from '../../data/generateCartData'
-import cart from '../../data/cart.json'
+import { getCart as getCartFromStorage } from '../../data/mock-storage'
 
 export const getCart: CommerceService['getCart'] = async ({ cartId }) => {
   if (!cartId) {
     return null
   }
 
-  const { items, summary } = generateCartData()
-
-  return {
-    ...cart,
-    items,
-    summary,
-  }
+  return (await getCartFromStorage(cartId)) || null
 }

packages/commerce-generic/src/services/cart/update-cart-item.ts

@@ -1,17 +1,32 @@
 import { CommerceService } from '@composable/types'
-import { generateCartData } from '../../data/generateCartData'
-import cart from '../../data/cart.json'
+import { getCart, saveCart } from '../../data/mock-storage'
+
+import { calculateCartSummary } from '../../data/generate-cart-data'
 
 export const updateCartItem: CommerceService['updateCartItem'] = async ({
   cartId,
   productId,
   quantity,
 }) => {
-  const { items, summary } = generateCartData({ productId, quantity })
+  const cart = await getCart(cartId)
+
+  if (!cart) {
+    throw new Error(
+      `[updateCartItem] Could not found cart with requested cart id: ${cartId}`
+    )
+  }
+
+  const cartItem = cart.items.find((item) => item.id === productId)
 
-  return {
-    ...cart,
-    items,
-    summary,
+  if (!cartItem) {
+    throw new Error(
+      `[updateCartItem] Could not found cart item with requested product id: ${productId}`
+    )
   }
+
+  cartItem.quantity = quantity
+
+  cart.summary = calculateCartSummary(cart.items)
+
+  return saveCart(cart)
 }

packages/commerce-generic/src/services/checkout/create-order.ts

@@ -1,16 +1,48 @@
-import { CommerceService } from '@composable/types'
-import { generateCartData } from '../../data/generateCartData'
-import order from '../../data/order.json'
+import { Cart, CheckoutInput, CommerceService, Order } from '@composable/types'
+import { getCart } from '../../data/mock-storage'
+import { saveOrder } from '../../data/mock-storage'
 import shippingMethods from '../../data/shipping-methods.json'
+import { randomUUID } from 'crypto'
 
-export const createOrder: CommerceService['createOrder'] = async ({
-  checkout,
-}) => {
-  const cartItems = generateCartData()
+const generateOrderFromCart = (
+  cart: Cart,
+  checkoutInput: CheckoutInput
+): Order => {
   return {
-    ...order,
-    ...cartItems,
+    id: randomUUID(),
+    status: 'complete',
+    payment: 'unpaid',
+    shipping: 'unfulfilled',
+    customer: {
+      email: checkoutInput.customer.email,
+    },
+    shipping_address: {
+      phone_number: '',
+      city: '',
+      ...checkoutInput.shipping_address,
+    },
+    billing_address: {
+      phone_number: '',
+      city: '',
+      ...checkoutInput.billing_address,
+    },
     shipping_method: shippingMethods[0],
     created_at: Date.now(),
+    items: cart.items,
+    summary: cart.summary,
   }
 }
+
+export const createOrder: CommerceService['createOrder'] = async ({
+  checkout,
+}) => {
+  const cart = await getCart(checkout.cartId)
+
+  if (!cart) {
+    throw new Error(
+      `[createOrder] Could not find cart by id: ${checkout.cartId}`
+    )
+  }
+
+  return saveOrder(generateOrderFromCart(cart, checkout))
+}