From 65592982122aed8ae7149955cb9e2bc21213fb70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 20 Nov 2021 21:39:44 +0100
Subject: [PATCH] Check stock for Shop's add to cart button

---
 src/components/layouts/PosterLayout.svelte | 6 +++++-
 src/style/atoms/_button.scss               | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/layouts/PosterLayout.svelte b/src/components/layouts/PosterLayout.svelte
index 62d2ef6..f48ba2c 100644
--- a/src/components/layouts/PosterLayout.svelte
+++ b/src/components/layouts/PosterLayout.svelte
@@ -10,6 +10,8 @@
     export let product: any
     export let shopProduct: any
 
+    $: hasStock = shopProduct.stock_level > 0
+
 
     /**
      * Preview photos specs
@@ -69,8 +71,10 @@
                 <dd>{shopProduct.name} – {shopProduct.price}€</dd>
             </dl>
             <Button
-                text="Add to cart"
+                tag="button"
+                text={hasStock ? 'Add to cart' : 'Sold out'}
                 color="pinklight"
+                disabled={!hasStock}
                 on:click={() => addToCart($cartId, shopProduct)}
             />
         </div>
diff --git a/src/style/atoms/_button.scss b/src/style/atoms/_button.scss
index 805ec74..5546bbe 100644
--- a/src/style/atoms/_button.scss
+++ b/src/style/atoms/_button.scss
@@ -25,7 +25,7 @@
     }
 
     // Hover effect
-    &:hover {
+    &:not([disabled]):hover {
         background: $color-secondary;
     }
     .text-split__line {
@@ -85,7 +85,7 @@
         background: $color-secondary-light;
 
         // Hover
-        &:hover {
+        &:not([disabled]):hover {
             color: #fff;
             background: $color-secondary;
         }
@@ -102,7 +102,7 @@
         background: $color-secondary;
 
         // Hover
-        &:hover {
+        &:not([disabled]):hover {
             color: $color-text;
             background-color: darken($color-secondary, 7);
         }