From 51b6165f09c322ae790e045d5089f8dc9d3ec0bb Mon Sep 17 00:00:00 2001
From: Tiago Yamamoto <japa@rede5.com.br>
Date: Tue, 23 Dec 2025 12:03:47 -0300
Subject: [PATCH] Add cart empty state

---
 marketplace/package-lock.json  | 10 +++++++++
 marketplace/package.json       |  1 +
 marketplace/src/pages/Cart.tsx | 38 ++++++++++++++++++++++++++--------
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/marketplace/package-lock.json b/marketplace/package-lock.json
index 2ed97c7..763b47e 100644
--- a/marketplace/package-lock.json
+++ b/marketplace/package-lock.json
@@ -12,6 +12,7 @@
         "@types/leaflet": "^1.9.21",
         "axios": "^1.7.4",
         "leaflet": "^1.9.4",
+        "lucide-react": "^0.562.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-leaflet": "^4.2.1",
@@ -3024,6 +3025,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.562.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
+      "integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
diff --git a/marketplace/package.json b/marketplace/package.json
index 465ea26..f121caf 100644
--- a/marketplace/package.json
+++ b/marketplace/package.json
@@ -15,6 +15,7 @@
     "@types/leaflet": "^1.9.21",
     "axios": "^1.7.4",
     "leaflet": "^1.9.4",
+    "lucide-react": "^0.562.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-leaflet": "^4.2.1",
diff --git a/marketplace/src/pages/Cart.tsx b/marketplace/src/pages/Cart.tsx
index 422207b..a6010cc 100644
--- a/marketplace/src/pages/Cart.tsx
+++ b/marketplace/src/pages/Cart.tsx
@@ -1,3 +1,4 @@
+import { ShoppingBasket } from 'lucide-react'
 import { Shell } from '../layouts/Shell'
 import { selectGroupedCart, selectCartSummary, useCartStore } from '../stores/cartStore'
 import { formatCurrency } from '../utils/format'
@@ -6,6 +7,7 @@ export function CartPage() {
   const items = useCartStore((state) => state.items)
   const groups = useCartStore(selectGroupedCart)
   const summary = useCartStore(selectCartSummary)
+  const isEmpty = items.length === 0
   const updateQuantity = useCartStore((state) => state.updateQuantity)
   const removeItem = useCartStore((state) => state.removeItem)
   const clearVendor = useCartStore((state) => state.clearVendor)
@@ -14,20 +16,39 @@ export function CartPage() {
   return (
     <Shell>
       <div className="space-y-4">
-        <div className="flex items-center justify-between">
+        <div className="flex flex-wrap items-center justify-between gap-4">
           <div>
             <h1 className="text-xl font-semibold text-medicalBlue">Carrinho B2B</h1>
             <p className="text-sm text-gray-600">
               Agrupamento automático por distribuidora para suportar checkout unificado ou múltiplo.
             </p>
           </div>
-          <div className="text-right">
-            <p className="text-sm text-gray-600">Itens: {summary.totalItems}</p>
-            <p className="text-lg font-semibold text-medicalBlue">R$ {formatCurrency(summary.totalValue)}</p>
-          </div>
+          {!isEmpty && (
+            <div className="text-right">
+              <p className="text-sm text-gray-600">Itens: {summary.totalItems}</p>
+              <p className="text-lg font-semibold text-medicalBlue">R$ {formatCurrency(summary.totalValue)}</p>
+            </div>
+          )}
         </div>
-        {items.length === 0 ? (
-          <div className="rounded-lg bg-white p-6 text-center text-gray-600 shadow">Nenhum item no carrinho.</div>
+        {isEmpty ? (
+          <div className="flex min-h-[60vh] items-center justify-center">
+            <div className="w-full max-w-2xl rounded-2xl bg-white px-6 py-10 text-center shadow-sm sm:px-10">
+              <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-gray-100">
+                <ShoppingBasket className="h-10 w-10 text-gray-300" />
+              </div>
+              <h2 className="mt-5 text-xl font-semibold text-gray-800">Seu carrinho está vazio</h2>
+              <p className="mt-3 text-sm text-gray-600 sm:text-base">
+                Parece que você ainda não adicionou produtos das distribuidoras. Explore nosso catálogo para
+                encontrar medicamentos e suprimentos.
+              </p>
+              <a
+                href="/inventory"
+                className="mt-6 inline-flex items-center justify-center rounded-lg bg-[#0056b3] px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:opacity-90"
+              >
+                Explorar Produtos
+              </a>
+            </div>
+          </div>
         ) : (
           Object.entries(groups).map(([vendorId, group]) => (
             <div key={vendorId} className="space-y-2 rounded-lg bg-white p-4 shadow-sm">
@@ -93,7 +114,7 @@ export function CartPage() {
             </div>
           ))
         )}
-        {items.length > 0 && (
+        {!isEmpty && (
           <div className="flex justify-end gap-3">
             <button className="rounded bg-gray-200 px-4 py-2 text-sm font-semibold" onClick={clearAll}>
               Limpar carrinho
@@ -110,4 +131,3 @@ export function CartPage() {
     </Shell>
   )
 }
-