feat(cart, checkout, bestellbestaetigung): show total savings in the order summary

"Du sparst -X,XX €" line under Zwischensumme, summing (compareAtPrice
- price) × qty across items with a discount — only shown when > 0,
same conditional-render convention as the rest of the sale-pricing
UI (badge/strikethrough already gated on discountPercent() !== null).
This commit is contained in:
Marco
2026-07-20 00:42:48 +00:00
parent ec016d55d4
commit 3bde1d61ff
3 changed files with 37 additions and 2 deletions
@@ -5,7 +5,7 @@ import Link from "next/link";
import Image from "next/image";
import type { CartItem } from "../../lib/cart";
import { useProducts } from "../../lib/products";
import { formatPrice, formatDate } from "../../lib/format";
import { formatPrice, formatDate, discountPercent } from "../../lib/format";
import { Reveal } from "../../components/Reveal";
import { CheckoutSteps } from "../../components/CheckoutSteps";
import { ORDER_KEY, type OrderSnapshot } from "../../lib/order";
@@ -96,6 +96,10 @@ export function BestellbestaetigungContent() {
.filter((row): row is { entry: CartItem; product: NonNullable<(typeof row)["product"]> } => Boolean(row.product));
const subtotal = items.reduce((sum, { entry, product }) => sum + entry.qty * product.price, 0);
const totalSavings = items.reduce((sum, { entry, product }) => {
const discount = discountPercent(product.price, product.compareAtPrice);
return discount !== null ? sum + entry.qty * (product.compareAtPrice! - product.price) : sum;
}, 0);
const total = subtotal + order.shippingCost;
return (
@@ -194,6 +198,13 @@ export function BestellbestaetigungContent() {
<span className="flex-1" />
<span className="text-body-sm text-text-primary">{formatPrice(subtotal)}</span>
</div>
{totalSavings > 0 && (
<div className="flex items-center w-full">
<span className="text-body-sm text-success">Du sparst</span>
<span className="flex-1" />
<span className="font-bold text-body-sm text-success">-{formatPrice(totalSavings)}</span>
</div>
)}
<div className="flex items-center w-full">
<span className="text-body-sm text-text-primary">Versand</span>
<span className="flex-1" />