[wip] 🔥 Integrate Swell into the shop

Create a custom and internal API for fetching and updating content to Swell Admin API (using swell-node)

src/components/organisms/Cart.svelte

@@ -1,49 +1,151 @@
 <script lang="ts">
+    import { onMount } from 'svelte'
     import { fade, fly } from 'svelte/transition'
-    import { cartOpen } from '$utils/store'
     import { quartOut } from 'svelte/easing'
+    import { cartOpen, cartId, cartData, cartAmount } from '$utils/store'
     // Components
     import Button from '$components/atoms/Button.svelte'
-    import PosterCart from '$components/molecules/PosterCart.svelte'
+    import CartItem from '$components/molecules/CartItem.svelte'
+
+    let open = false
+
+
+    onMount(async () => {
+        // Cart already exists
+        if ($cartId && $cartId !== 'null') {
+            // Fetch stored cart
+            const existantCart = await fetch('/api/swell', {
+                method: 'POST',
+                body: JSON.stringify({
+                    action: 'fetchCart',
+                    cartId: $cartId
+                })
+            })
+            if (existantCart.ok) {
+                const cart = await existantCart.json()
+                $cartId = cart.id
+                $cartData = cart
+                console.log('fetched existant cart:', $cartId, $cartData)
+            }
+        }
+        // Cart doesn't exists
+        else {
+            // Create a new cart and store it
+            const newCart = await fetch('/api/swell', {
+                method: 'POST',
+                body: JSON.stringify({
+                    action: 'createCart'
+                })
+            })
+            if (newCart.ok) {
+                const cart = await newCart.json()
+                $cartId = cart.id
+                $cartData = cart
+                console.log('new cart:', localStorage.getItem('cartId'))
+            }
+        }
+    })
 
 
     // Closing the cart
     const handleCloseCart = () => {
         $cartOpen = false
     }
+
+    // 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
+        // }
+
+        const updatedCart = await fetch('/api/swell', {
+            method: 'POST',
+            body: JSON.stringify({
+                action: 'updateCartItem',
+                cartId: $cartId,
+                productId: id,
+                quantity: quantity
+            })
+        })
+
+        if (updatedCart.ok) {
+            // const cart = await updatedCart.json()
+            // $cartData = cart
+            // console.log('updated cart:', $cartData.items)
+        }
+    }
+
+    // Item removed
+    const removedItem = async ({ detail: id }) => {
+        // Remove item from cart
+        // const removedItem = await swell.cart.removeItem(id)
+        // if (removedItem) {
+        //     $cartData = removedItem
+        // }
+    }
 </script>
 
-<aside class="cart"
-    transition:fly={{ x: 48, duration: 600, easing: quartOut }}
->
-    <header class="cart__heading">
-        <h2>Cart</h2>
-        <button class="text-label" on:click={handleCloseCart}>Close</button>
-    </header>
+{#if $cartOpen}
+    <aside class="cart shadow-box-dark"
+        transition:fly={{ x: 48, duration: 600, easing: quartOut }}
+    >
+        <header class="cart__heading">
+            <h2>Cart</h2>
+            <button class="text-label" on:click={handleCloseCart}>Close</button>
+        </header>
 
-    <div class="cart__content">
-        <PosterCart />
-        <PosterCart />
-    </div>
+        <div class="cart__content">
+            {#if $cartAmount > 0}
+                {#each $cartData.items as item}
+                    <CartItem {item}
+                        on:updatedQuantity={changedQuantity}
+                        on:removed={removedItem}
+                    />
+                {/each}
+            {:else}
+                <div class="cart__message shadow-small">
+                    <div class="icon">
 
-    <footer class="cart__total">
-        <div class="cart__total--sum">
-            <h3>Total</h3>
-            <span>3 articles</span>
-            <p>90€</p>
+                    </div>
+                    <p>Your cart is empty</p>
+                </div>
+            {/if}
         </div>
-        <div class="cart__total--checkout">
-            <p>Shipping will be calculated from the delivery address during the checkout process</p>
-            <Button
-                text="Checkout"
-                color="pink"
-                size="small"
-            />
-        </div>
-    </footer>
-</aside>
 
-<div class="cart-overlay"
-    transition:fade={{ duration: 600, easing: quartOut }}
-    on:click={handleCloseCart}
-/>
+        <footer class="cart__total">
+            <div class="cart__total--sum">
+                <h3>Total</h3>
+                {#if $cartData}
+                    <span>{$cartAmount} item{$cartAmount > 1 ? 's' : ''}</span>
+                    <p>{$cartData.sub_total ? $cartData.sub_total : 0}€</p>
+                {:else}
+                    <span>0 item</span>
+                    <p>0€</p>
+                {/if}
+            </div>
+            <div class="cart__total--checkout">
+                <p>Shipping will be calculated from the delivery address during the checkout process</p>
+                {#if $cartData && $cartAmount > 0 && $cartData.checkout_url}
+                    <div transition:fly={{ y: 8, duration: 600, easing: quartOut }}>
+                        <Button
+                            url={$cartData && $cartData.checkout_url}
+                            text="Checkout"
+                            color="pink"
+                            size="small"
+                            disabled={!$cartData}
+                        />
+                    </div>
+                {/if}
+            </div>
+        </footer>
+    </aside>
+
+    <div class="cart-overlay"
+        transition:fade={{ duration: 600, easing: quartOut }}
+        on:click={handleCloseCart}
+    />
+{/if}