🔥 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/components/organisms/Cart.svelte

@@ -2,7 +2,7 @@
     import { onMount } from 'svelte'
     import { fade, fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
-    import { cartOpen, cartId, cartData, cartAmount } from '$utils/store'
+    import { cartOpen, cartId, cartData, cartAmount, cartIsUpdating } from '$utils/store'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import CartItem from '$components/molecules/CartItem.svelte'
@@ -25,7 +25,7 @@
                 const cart = await existantCart.json()
                 $cartId = cart.id
                 $cartData = cart
-                console.log('fetched existant cart:', $cartId, $cartData)
+                // console.log('Fetched existant cart:', $cartId, $cartData)
             }
         }
         // Cart doesn't exists
@@ -41,7 +41,7 @@
                 const cart = await newCart.json()
                 $cartId = cart.id
                 $cartData = cart
-                console.log('new cart:', localStorage.getItem('cartId'))
+                // console.log('Created new cart:', localStorage.getItem('cartId'))
             }
         }
     })
@@ -54,43 +54,53 @@
 
     // Item quantity changed
     const changedQuantity = async ({ detail: { id, quantity } }) => {
-        // Update item in cart
-        // const updatedCart = await swell.cart.updateItem(id, {
-        //     quantity
-        // })
-        // if (updatedCart) {
-        //     $cartData = updatedCart
-        // }
+        // Cart is now updating
+        $cartIsUpdating = true
 
+        // Get updated cart
         const updatedCart = await fetch('/api/swell', {
             method: 'POST',
             body: JSON.stringify({
                 action: 'updateCartItem',
                 cartId: $cartId,
                 productId: id,
-                quantity: quantity
+                quantity,
             })
         })
-
         if (updatedCart.ok) {
-            // const cart = await updatedCart.json()
-            // $cartData = cart
-            // console.log('updated cart:', $cartData.items)
+            const cart = await updatedCart.json()
+            $cartData = cart
+            // Cart is updated
+            $cartIsUpdating = false
         }
     }
 
     // Item removed
     const removedItem = async ({ detail: id }) => {
+        // Cart is now updating
+        $cartIsUpdating = true
+
         // Remove item from cart
-        // const removedItem = await swell.cart.removeItem(id)
-        // if (removedItem) {
-        //     $cartData = removedItem
-        // }
+        const updatedCart = await fetch('/api/swell', {
+            method: 'POST',
+            body: JSON.stringify({
+                action: 'removeCartItem',
+                cartId: $cartId,
+                productId: id,
+            })
+        })
+        if (updatedCart.ok) {
+            const cart = await updatedCart.json()
+            $cartData = cart
+            // Cart is updated
+            $cartIsUpdating = false
+        }
     }
 </script>
 
 {#if $cartOpen}
     <aside class="cart shadow-box-dark"
+        class:is-updating={$cartIsUpdating}
         transition:fly={{ x: 48, duration: 600, easing: quartOut }}
     >
         <header class="cart__heading">
@@ -100,20 +110,28 @@
 
         <div class="cart__content">
             {#if $cartAmount > 0}
-                {#each $cartData.items as item}
-                    <CartItem {item}
+                {#each $cartData.items as item, index}
+                    <CartItem {item} {index}
                         on:updatedQuantity={changedQuantity}
                         on:removed={removedItem}
                     />
                 {/each}
             {:else}
-                <div class="cart__message shadow-small">
+                <div class="cart__empty shadow-small">
                     <div class="icon">
-
+                        <svg width="23" height="29" viewBox="0 0 23 29" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.95 5.83a4.94 4.94 0 0 1 1.23-3.42 3.8 3.8 0 0 1 2.8-1.2c2.07.02 4 1.67 4.04 4.62h4.13c.6 0 1.08.52 1.03 1.11l-.02.32 2.68 18.19a.94.94 0 0 1-1.26 1.02l-1.02-.38a.09.09 0 0 0-.08.01l-1.84 1.2c-.08.5-.5.88-1.02.88H1.78c-.6 0-1.07-.51-1.03-1.1l1.53-20.3c.04-.53.5-.95 1.03-.95h3.64Zm1.2 0c.01-1.2.4-2.05.9-2.6a2.6 2.6 0 0 1 1.93-.81c1.34 0 2.8 1.07 2.84 3.41H8.15Zm6.87 1.2h3.95l-.02.27-1.48 19.68H1.97l1.5-19.95h3.48v3.41a1.38 1.38 0 1 0 1.2 0v-3.4h5.67v3.4a1.38 1.38 0 1 0 1.2 0v-3.4Zm3.74 18.77.99-13.1 1.84 12.5-.62-.23c-.38-.14-.81-.1-1.15.13l-1.06.7ZM7.87 11.68a.33.33 0 1 1-.65 0 .33.33 0 0 1 .65 0Zm6.55.33a.33.33 0 1 0 0-.66.33.33 0 0 0 0 .66Z"/>
+                        </svg>
                     </div>
                     <p>Your cart is empty</p>
                 </div>
             {/if}
+
+            {#if !$cartData || $cartIsUpdating}
+                <div class="cart__update">
+                    <p>Updating…</p>
+                </div>
+            {/if}
         </div>
 
         <footer class="cart__total">