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.
This commit is contained in:
Marco
2026-07-19 23:34:08 +00:00
parent 7b35b3e55b
commit 4293df674f
+10 -1
View File
@@ -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>