From 4293df674fbbb9d01b34734dc5afd7ac7c2e83ca Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sun, 19 Jul 2026 23:34:08 +0000
Subject: [PATCH] fix(todo-cards): show sale badge and strikethrough on the
 pricing panel

Pricing.tsx got the items-baseline alignment fix in the last commit
but the actual discount display (badge + strikethrough) was never
wired in, unlike the shop grid and spotlight that got both.
---
 app/todo-cards/components/Pricing.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/todo-cards/components/Pricing.tsx b/app/todo-cards/components/Pricing.tsx
index ab4c31c..b0cceda 100644
--- a/app/todo-cards/components/Pricing.tsx
+++ b/app/todo-cards/components/Pricing.tsx
@@ -3,7 +3,7 @@ import { AddToCartButton } from "../../components/AddToCartButton";
 import { Reveal } from "../../components/Reveal";
 import { TOTAL_DAYS_DE } from "../../lib/shipping";
 import { getProductBySlug } from "../../lib/payload";
-import { formatPrice } from "../../lib/format";
+import { formatPrice, discountPercent } from "../../lib/format";
 
 const bullets = [
   "50 ToDo-Karten",
@@ -20,6 +20,7 @@ const bullets = [
 export async function Pricing() {
   const product = await getProductBySlug("todo-karten");
   if (!product) return null;
+  const discount = discountPercent(product.price, product.compareAtPrice);
 
   return (
     <section className="w-full bg-bg-base px-[var(--layout-padding-x)] py-8">
@@ -35,6 +36,11 @@ export async function Pricing() {
             sizes="(min-width: 1024px) 410px, 100vw"
             className="object-cover transition-transform duration-500 group-hover:scale-105"
           />
+          {discount !== null && (
+            <span className="absolute top-3 left-3 rounded-full bg-brand px-2.5 py-1 text-label font-bold text-text-primary">
+              -{discount}%
+            </span>
+          )}
         </div>
 
         <div className="flex flex-col gap-3 items-start flex-1 min-w-0 w-full">
@@ -56,6 +62,9 @@ export async function Pricing() {
 
         <div className="flex flex-col gap-3 items-start w-full lg:w-[18.75rem] lg:shrink-0">
           <div className="flex gap-2 items-baseline">
+            {discount !== null && (
+              <p className="text-body text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</p>
+            )}
             <p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
             <p className="text-label text-text-muted">inkl. MwSt. zzgl. Versand</p>
           </div>