housesof/apps/website/src/components/organisms/Cart.svelte

<style lang="scss">
    @import "../../style/organisms/cart";
</style>

<script lang="ts">
    import { browser } from '$app/environment'
    import { onMount } from 'svelte'
    import { fade, fly } from 'svelte/transition'
    import { quartOut } from 'svelte/easing'
    import { smoothScroll } from '$utils/stores'
    import { cartOpen, cartData, cartAmount, cartIsUpdating } from '$utils/stores/shop'
    import { initSwell, getCart, updateCartItem, removeCartItem } from '$utils/functions/shop'
    import { sendEvent } from '$utils/analytics'
    // Components
    import Button from '$components/atoms/Button.svelte'
    import Icon from '$components/atoms/Icon.svelte'
    import CartItem from '$components/molecules/CartItem.svelte'
    import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'


    // Block scroll if cart is open
    $: if (browser && $smoothScroll) {
        if ($cartOpen) {
            $smoothScroll.stop()
        } else {
            $smoothScroll.start()
        }

        document.documentElement.classList.toggle('block-scroll', $cartOpen)
    }


    // Closing the cart
    const handleCloseCart = () => {
        $cartOpen = false
    }

    // Item quantity changed
    const changedQuantity = async ({ detail: { id, quantity } }) => {
        // Cart is now updating
        $cartIsUpdating = true

        // Update cart item
        const updatedCart = await updateCartItem(id, quantity)
        if (updatedCart) {
            // Store new cart data
            $cartData = updatedCart
            // Cart is updated
            $cartIsUpdating = false
        }
    }

    // Item removed
    const removedItem = async ({ detail: id }) => {
        // Cart is now updating
        $cartIsUpdating = true

        // Remove item from cart
        const updatedCart = await removeCartItem(id)
        if (updatedCart) {
            // Store new cart data
            $cartData = updatedCart
            // Cart is updated
            $cartIsUpdating = false
        }
    }


    onMount(async () => {
        // Init Swell
        initSwell()

        // Fetch cart
        const cart = await getCart()
        if (cart) {
            // Store cart data
            $cartData = cart
        }
    })
</script>

{#if $cartOpen}
    <div class="cart-switcher" transition:fly={{ y: -24, duration: 1000, easing: quartOut }}>
        <ShopLocationSwitcher isOver={true} />
    </div>

    <aside class="cart shadow-box-dark"
        class:is-updating={$cartIsUpdating}
        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">
            {#if $cartAmount > 0}
                {#each $cartData.items as item}
                    <CartItem {item}
                        on:updatedQuantity={changedQuantity}
                        on:removed={removedItem}
                    />
                {/each}
            {:else}
                <div class="cart__empty shadow-small" transition:fade={{ duration: 600 }}>
                    <div class="icon">
                        <Icon icon="bag" label="Shopping bag icon" />
                    </div>
                    <p>Your cart is empty</p>
                </div>
            {/if}

            {#if $cartIsUpdating}
                <div class="cart__update"
                    in:fly={{ y: 8, duration: 600, easing: quartOut }}
                    out:fly={{ y: -8, duration: 600, easing: quartOut }}
                >
                    <p>Updating…</p>
                </div>
            {/if}
        </div>

        <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>Free shipping worldwide!</p>
                {#if $cartData && $cartAmount > 0 && $cartData.checkout_url}
                    <div transition:fly={{ y: 8, duration: 600, easing: quartOut }}>
                        <Button
                            size="small"
                            url={$cartData && $cartData.checkout_url}
                            text="Checkout"
                            color="pink"
                            on:click={() => sendEvent('cartCheckout', { props: { amount: $cartAmount } })}
                        />
                    </div>
                {/if}
            </div>
        </footer>
    </aside>

    <div class="cart-overlay"
        transition:fade={{ duration: 600, easing: quartOut }}
        on:click={handleCloseCart}
        on:keydown
    />
{/if}