From f356216302a78c58949f00b840e5e3a234991083 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sun, 19 Jul 2026 21:52:26 +0000
Subject: [PATCH] fix(checkout): add Versand info modal, show inkl. MwSt. on
 line items

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/checkout/components/CheckoutContent.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/checkout/components/CheckoutContent.tsx b/app/checkout/components/CheckoutContent.tsx
index 5603f34..915fbf2 100644
--- a/app/checkout/components/CheckoutContent.tsx
+++ b/app/checkout/components/CheckoutContent.tsx
@@ -8,6 +8,7 @@ import { useProducts } from "../../lib/products";
 import { formatPrice } from "../../lib/format";
 import { SHIPPING_COST, FREE_SHIPPING_THRESHOLD } from "../../lib/shipping";
 import { Reveal } from "../../components/Reveal";
+import { VersandModal } from "../../components/VersandModal";
 
 const EXPRESS_SHIPPING_COST = 4.9;
 
@@ -62,6 +63,7 @@ export function CheckoutContent() {
   const products = useProducts();
   const [shippingMethod, setShippingMethod] = useState<"standard" | "express">("standard");
   const [paymentMethod, setPaymentMethod] = useState<"card" | "paypal" | "bank">("card");
+  const [versandOpen, setVersandOpen] = useState(false);
 
   const productsLoading = products.length === 0 && cart.length > 0;
   const items = cart
@@ -296,7 +298,9 @@ export function CheckoutContent() {
                 </div>
                 <div className="flex-1 min-w-0 flex flex-col gap-0.5">
                   <p className="text-body-sm text-text-primary">{product.name}</p>
-                  <p className="text-label text-text-muted">{entry.qty} × {formatPrice(product.price)}</p>
+                  <p className="text-label text-text-muted">
+                    {entry.qty} × {formatPrice(product.price)} <span>inkl. MwSt.</span>
+                  </p>
                 </div>
                 <p className="text-body-sm text-text-primary whitespace-nowrap">{formatPrice(entry.qty * product.price)}</p>
               </div>
@@ -312,7 +316,17 @@ export function CheckoutContent() {
 
             <div className="flex flex-col gap-0.5 w-full">
               <div className="flex items-center w-full">
-                <span className="text-body-sm text-text-primary">Versand</span>
+                <span className="flex items-center gap-1.5 text-body-sm text-text-primary">
+                  Versand
+                  <button
+                    type="button"
+                    onClick={() => setVersandOpen(true)}
+                    className="text-text-muted hover:text-brand transition-colors"
+                    aria-label="Alle Informationen zu Versandkosten und Lieferzeiten"
+                  >
+                    <span aria-hidden>ⓘ</span>
+                  </button>
+                </span>
                 <span className="flex-1" />
                 <span className="text-body-sm text-text-primary">
                   {shipping === 0 ? "Kostenlos" : formatPrice(shipping)}
@@ -375,6 +389,8 @@ export function CheckoutContent() {
           </div>
         </Reveal>
       </div>
+
+      <VersandModal open={versandOpen} onClose={() => setVersandOpen(false)} />
     </>
   );
 }