From e1c259164fd7a80bc110322b887aec1b7ce13834 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 7 Nov 2021 20:18:19 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Show=20a=20notification=20when=20ad?=
 =?UTF-8?q?ding=20a=20product=20to=20Cart?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layouts/PosterLayout.svelte    | 23 +++++------
 .../molecules/NotificationCart.svelte         | 29 +++++++++-----
 src/routes/shop/__layout.svelte               |  9 ++++-
 src/style/pages/_shop.scss                    |  8 ++++
 src/utils/functions.ts                        |  1 -
 src/utils/notifications.ts                    | 39 +++++++++++++++++++
 src/utils/store.ts                            |  7 +++-
 7 files changed, 92 insertions(+), 24 deletions(-)
 create mode 100644 src/utils/notifications.ts

diff --git a/src/components/layouts/PosterLayout.svelte b/src/components/layouts/PosterLayout.svelte
index 8bca5b6..6e80744 100644
--- a/src/components/layouts/PosterLayout.svelte
+++ b/src/components/layouts/PosterLayout.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
     import { capitalizeFirstLetter } from '$utils/functions'
+    import { cartId, cartData } from '$utils/store'
+    import { addNotification } from '$utils/notifications'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Image from '$components/atoms/Image.svelte'
     import Carousel from '$components/organisms/Carousel.svelte'
-import { cartData, cartId } from '$utils/store';
 
     export let product: any
     export let productShop: any
@@ -59,12 +60,7 @@ import { cartData, cartId } from '$utils/store';
      * Handling add to cart
      */
     const addToCart = async () => {
-        // const addedReturn = await swell.cart.addItem({
-        //     product_id: product.product_id,
-        //     quantity: 1,
-        // })
-
-        const addedReturn = await fetch('/api/swell', {
+        const updatedCart = await fetch('/api/swell', {
             method: 'POST',
             body: JSON.stringify({
                 action: 'addToCart',
@@ -73,11 +69,16 @@ import { cartData, cartId } from '$utils/store';
                 quantity: 1,
             })
         })
-
-        if (addedReturn.ok) {
-            const newCart = await addedReturn.json()
+        if (updatedCart.ok) {
+            const newCart = await updatedCart.json()
             $cartData = newCart
-            console.log('Show mini product added to cart')
+
+            // Show notification
+            addNotification({
+                title: 'Added to cart',
+                name: `${productShop.name} - x1`,
+                image: productShop.images[0].file.url,
+            })
         }
     }
 </script>
diff --git a/src/components/molecules/NotificationCart.svelte b/src/components/molecules/NotificationCart.svelte
index b2ff7dc..e595d73 100644
--- a/src/components/molecules/NotificationCart.svelte
+++ b/src/components/molecules/NotificationCart.svelte
@@ -1,19 +1,28 @@
 <script lang="ts">
-    import { getContext } from 'svelte'
-    // Components
-    import Button from '$components/atoms/Button.svelte'
-    import Image from '$components/atoms/Image.svelte'
+    import { fly } from 'svelte/transition'
+    import { quartOut } from 'svelte/easing'
+    import { cartOpen } from '$utils/store'
 
-    const { locations, shop } = getContext('global')
+    export let title: string
+    export let name: string
+    export let image: string
 
+
+    const closeNotification = () => {
+        // Open cart
+        $cartOpen = true
+    }
 </script>
 
-<aside class="notification-cart shadow-small">
+<div class="notification-cart shadow-small"
+    on:click={closeNotification}
+    transition:fly={{ y: 20, duration: 700, easing: quartOut }}
+>
     <div class="notification-cart__left">
-        <img src="/images/issue-1.jpg" width={58} height={88} alt="">
+        <img src={image} width={58} height={88} alt={title}>
     </div>
     <div class="notification-cart__right">
-        <h3>Added to cart</h3>
-        <p>Houses Of Melbourne</p>
+        <h3>{title}</h3>
+        <p>{name}</p>
     </div>
-</aside>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/routes/shop/__layout.svelte b/src/routes/shop/__layout.svelte
index ccecddb..2b43fbc 100644
--- a/src/routes/shop/__layout.svelte
+++ b/src/routes/shop/__layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte'
+    import { cartNotifications } from '$utils/store'
     // Components
     import Metas from '$components/Metas.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
@@ -105,7 +106,13 @@
         <ButtonCart />
 
         <div class="shop-location__notifications">
-            <NotificationCart />
+            {#each $cartNotifications as { id, title, name, image } (id)}
+                <NotificationCart
+                    title={title}
+                    name={name}
+                    image={image}
+                />
+            {/each}
         </div>
     </nav>
 
diff --git a/src/style/pages/_shop.scss b/src/style/pages/_shop.scss
index 83378a0..d9a2e86 100644
--- a/src/style/pages/_shop.scss
+++ b/src/style/pages/_shop.scss
@@ -43,6 +43,11 @@
         // Visible state
         &.is-visible {
             transform: translate3d(0,0,0);
+
+            .shop-location__notifications {
+                opacity: 1;
+                pointer-events: auto;
+            }
         }
 
         // Left
@@ -93,6 +98,9 @@
             z-index: 100;
             top: 72px;
             right: 0;
+            opacity: 0;
+            transition: opacity 0.7s var(--ease-quart);
+            pointer-events: none;
 
             & > * {
                 &:not(:last-child) {
diff --git a/src/utils/functions.ts b/src/utils/functions.ts
index 4a672eb..d6c5749 100644
--- a/src/utils/functions.ts
+++ b/src/utils/functions.ts
@@ -93,7 +93,6 @@ export const clamp = (num: number, a: number, b: number) => {
 }
 
 
-
 /**
  * Return a random element from an array
  */
diff --git a/src/utils/notifications.ts b/src/utils/notifications.ts
new file mode 100644
index 0000000..7e99e01
--- /dev/null
+++ b/src/utils/notifications.ts
@@ -0,0 +1,39 @@
+import { cartNotifications } from './store'
+
+interface Notification {
+    title: string
+    name: string
+    image: string
+    timeout?: number
+    id?: number
+}
+
+/**
+ * Add a notification
+ */
+export const addNotification = (notification: Notification) => {
+    const id = Math.floor(Math.random() * 10000)
+
+    // Add ID and default timeout
+    notification = {
+        id,
+        timeout: notification.timeout || 3000,
+        ...notification,
+    }
+
+    // Push the notifications to the top of the list of notificationss
+    cartNotifications.update((all) => [notification, ...all])
+
+    // If notification is dismissible, dismiss it after an amount of time (timeout)
+    if (notification.timeout) {
+        setTimeout(() => dismissNotification(id), notification.timeout)
+    }
+}
+
+
+/**
+ * Dismiss a notification
+ */
+export const dismissNotification = (id: number) => {
+    cartNotifications.update((all) => all.filter((t) => t.id !== id))
+}
\ No newline at end of file
diff --git a/src/utils/store.ts b/src/utils/store.ts
index 3f0d51a..e27300c 100644
--- a/src/utils/store.ts
+++ b/src/utils/store.ts
@@ -24,4 +24,9 @@ export const cartData = writable(null)
 /** Amount of products present in cart */
 export const cartAmount = derived(cartData, ($cart) => {
     return $cart && $cart.item_quantity > 0 ? $cart.item_quantity : 0
-})
\ No newline at end of file
+})
+
+/**
+ * Notifications
+ */
+export const cartNotifications = writable([])
\ No newline at end of file