From 27180b1875bbafbe745160f1c619263c4bba73a3 Mon Sep 17 00:00:00 2001
From: ZeroWave022 <36341766+ZeroWave022@users.noreply.github.com>
Date: Fri, 13 Sep 2024 13:38:43 +0200
Subject: [PATCH] feat: Add clear cart button

---
 messages/en.json                              |  3 ++-
 messages/no.json                              |  3 ++-
 .../(default)/storage/shopping-cart/page.tsx  | 16 ++++++-----
 .../storage/ShoppingCartClearButton.tsx       | 27 +++++++++++++++++++
 4 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 src/components/storage/ShoppingCartClearButton.tsx

diff --git a/messages/en.json b/messages/en.json
index 89ab309..2cc988a 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -84,7 +84,8 @@
       "unitsAvailable": "Units available",
       "tableDescription": "A list of your shopping cart items.",
       "backToStorage": "Back to storage",
-      "cartEmpty": "Your shopping cart is empty."
+      "cartEmpty": "Your shopping cart is empty.",
+      "clearCart": "Empty shopping cart"
     }
   }
 }
diff --git a/messages/no.json b/messages/no.json
index 80953f0..829331a 100644
--- a/messages/no.json
+++ b/messages/no.json
@@ -84,7 +84,8 @@
       "unitsAvailable": "Stk tilgjengelig",
       "tableDescription": "En liste over handlekurven din.",
       "backToStorage": "Tilbake til lageret",
-      "cartEmpty": "Handlekurven din er tom."
+      "cartEmpty": "Handlekurven din er tom.",
+      "clearCart": "Tøm handlekurven"
     }
   }
 }
diff --git a/src/app/[locale]/(default)/storage/shopping-cart/page.tsx b/src/app/[locale]/(default)/storage/shopping-cart/page.tsx
index f2f08d8..62627cc 100644
--- a/src/app/[locale]/(default)/storage/shopping-cart/page.tsx
+++ b/src/app/[locale]/(default)/storage/shopping-cart/page.tsx
@@ -1,3 +1,4 @@
+import { ShoppingCartClearButton } from '@/components/storage/ShoppingCartClearButton';
 import { ShoppingCartTable } from '@/components/storage/ShoppingCartTable';
 import { Button } from '@/components/ui/Button';
 import { Link } from '@/lib/navigation';
@@ -26,12 +27,15 @@ export default function StorageShoppingCartPage({
     <>
       <h1 className='my-4 md:text-center'>{t('title')}</h1>
       <ShoppingCartTable messages={tableMessages} />
-      <Link href='/storage'>
-        <Button className='mx-auto flex gap-2'>
-          <ArrowLeft />
-          {t('backToStorage')}
-        </Button>
-      </Link>
+      <div className='flex justify-center gap-2'>
+        <Link href='/storage'>
+          <Button className='flex gap-2'>
+            <ArrowLeft />
+            {t('backToStorage')}
+          </Button>
+        </Link>
+        <ShoppingCartClearButton caption={t('clearCart')} />
+      </div>
     </>
   );
 }
diff --git a/src/components/storage/ShoppingCartClearButton.tsx b/src/components/storage/ShoppingCartClearButton.tsx
new file mode 100644
index 0000000..7674993
--- /dev/null
+++ b/src/components/storage/ShoppingCartClearButton.tsx
@@ -0,0 +1,27 @@
+'use client';
+import { Button } from '@/components/ui/Button';
+import { X } from 'lucide-react';
+import { useLocalStorage } from 'usehooks-ts';
+
+function ShoppingCartClearButton({ caption }: { caption: string }) {
+  const [cart, setCart] = useLocalStorage<number[]>('shopping-cart', []);
+
+  function clearCart() {
+    setCart([]);
+  }
+
+  if (cart.length <= 0) return;
+
+  return (
+    <Button
+      className='flex gap-2'
+      variant='destructive'
+      onClick={() => clearCart()}
+    >
+      <X />
+      {caption}
+    </Button>
+  );
+}
+
+export { ShoppingCartClearButton };