🔥 Finish Cart implementation

- Use Select component in CartItem to change quantity
- Visual update when removing or changing an item quantity
- API: Remove Cart item action
- API: Handle Cart item adding and updating (quantity)

src/utils/store.ts

@@ -5,7 +5,7 @@ import { writable, derived } from 'svelte/store'
  * Shop
  */
 /** Open Cart state */
-export const cartOpen = writable(true)
+export const cartOpen = writable(false)
 
 /** Current Cart ID */
 export const cartId = writable(null)
@@ -21,6 +21,9 @@ if (typeof localStorage !== 'undefined') {
 /** Raw Cart data */
 export const cartData = writable(null)
 
+/** Cart data is being updated */
+export const cartIsUpdating = writable(false)
+
 /** Amount of products present in cart */
 export const cartAmount = derived(cartData, ($cart) => {
     return $cart && $cart.item_quantity > 0 ? $cart.item_quantity : 0

src/utils/swellFunctions.ts

@@ -9,7 +9,9 @@ swell.init(import.meta.env.VITE_SWELL_STORE_ID, import.meta.env.VITE_SWELL_API_T
  * Retrieve a product
  */
 export const getProduct = async (id: string) => {
-    const product = await swell.get(`/products/${id}`)
+    const product = await swell.get('/products/{id}', {
+        id
+    })
 
     if (product) {
         return product
@@ -21,7 +23,7 @@ export const getProduct = async (id: string) => {
  * Create a cart
  */
 export const createCart = async () => {
-    const cart = await swell.post('/carts', {})
+    const cart = await swell.post('/carts')
 
     if (cart) {
         return cart
@@ -32,9 +34,9 @@ export const createCart = async () => {
 /**
  * Retrieve cart
  */
-export const fetchCart = async (cartId: string) => {
+export const fetchCart = async (id: string) => {
     const cart = await swell.get('/carts/{id}', {
-        id: cartId,
+        id,
         expand: [
             'items.product',
             'items.variant',
@@ -51,21 +53,26 @@ export const fetchCart = async (cartId: string) => {
  * Add product to cart
  */
 export const addToCart = async (cartId: string, productId: string, quantity: number) => {
-    // TODO: Update current product quantity if adding again, otherwise add new product to existing items
+    // Fetch current cart data
+    const currentCart = await fetchCart(cartId)
+
+    // Updated cart with new items
     const updatedCart = await swell.put('/carts/{id}', {
         id: cartId,
-        items: [{
-            product_id: productId,
-            quantity: quantity,
-            expand: [
-                'items.product',
-                'items.variant',
-            ]
-        }],
+        items: [
+            ...currentCart.items || [],
+            {
+                product_id: productId,
+                quantity,
+            }
+        ],
     })
-
     if (updatedCart) {
-        return updatedCart
+        // Fetch latest cart with updates
+        const cart = await fetchCart(cartId)
+        if (cart) {
+            return cart
+        }
     }
 }
 
@@ -77,26 +84,54 @@ export const updateCartItem = async (cartId: string, productId: string, quantity
     // Fetch current cart data
     const currentCart = await fetchCart(cartId)
 
-    // Update cart
-    // const itemToUpdate = currentCart.items.find((item: any) => item.id === productId)
-    // itemToUpdate.quantity = quantity
-
     // Updated items with replacing new item quantity
     const updatedCartItems = currentCart.items.map((item: any) => {
-        console.log(item)
+        // Replace item quantity with selected one
+        if (item.id === productId) {
+            item.quantity = quantity
+        }
         return item
     })
 
-    // const updatedCart = await swell.put('/carts/{id}', {
-    //     id: cartId,
-    //     items: updatedItems,
-    // })
+    const updatedCart = await swell.put('/carts/{id}', {
+        id: cartId,
+        $set: {
+            items: updatedCartItems,
+        }
+    })
+    if (updatedCart) {
+        // Fetch latest cart with updates
+        const cart = await fetchCart(cartId)
+        if (cart) {
+            return cart
+        }
+    }
+}
 
-    // console.log(updatedCart)
 
-    return currentCart
-    // if (updatedCart) {
-    //     return {}
-    //     // return updatedCart
-    // }
+/**
+ * Remove cart item
+ */
+export const removeCartItem = async (cartId: string, productId: string) => {
+    // Fetch current cart data
+    const currentCart = await fetchCart(cartId)
+
+    // Updated items and remove selected item
+    const updatedCartItems = [...currentCart.items.filter((item: any) => {
+        return item.id !== productId
+    })]
+
+    const updatedCart = await swell.put('/carts/{id}', {
+        id: cartId,
+        $set: {
+            items: updatedCartItems,
+        }
+    })
+    if (updatedCart) {
+        // Fetch latest cart with updates
+        const cart = await fetchCart(cartId)
+        if (cart) {
+            return cart
+        }
+    }
 }