fix(sales): show original price and correct discount % for active sales

Tebex's Headless /packages API reports an active (user-specific) sale only with an authenticated basket ident, and in a counter-intuitive shape: base_price is the post-discount price, discount is the amount removed, total_price is the payable price. The original price is base_price + discount.

The previous code treated base_price as the original and dropped discount, so the strikethrough equaled the sale price and the badge rendered 'SALE -0%'.

Add a shared resolveDisplayPrice helper (lib/price.ts): original = base_price + discount, price = total_price, with a float guard against rounding-induced -0%. Thread discount through the sale-prices store and SalePriceFetcher, and use the helper in both PackagePrice and PackageCard.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: Musiker15

components/SalePriceFetcher.tsx

@@ -19,13 +19,14 @@ export function SalePriceFetcher() {
         const res = await fetch(`/api/packages?ident=${ident}`, { cache: 'no-store' })
         if (!res.ok) return
         const data = await res.json()
-        const packages: { id: number; base_price: number; total_price?: number }[] = data.data ?? []
+        const packages: { id: number; base_price: number; total_price?: number; discount?: number }[] = data.data ?? []
 
-        const prices: Record<number, { base_price: number; total_price: number }> = {}
+        const prices: Record<number, { base_price: number; total_price: number; discount: number }> = {}
         for (const pkg of packages) {
           prices[pkg.id] = {
             base_price: pkg.base_price ?? 0,
             total_price: pkg.total_price ?? pkg.base_price ?? 0,
+            discount: pkg.discount ?? 0,
           }
         }
         setPrices(prices)

components/packages/PackageCard.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { ShoppingCart, Loader2, LogIn } from 'lucide-react'
 import { useCart } from '@/lib/useCart'
 import { useSalePricesStore } from '@/store/salePrices'
+import { resolveDisplayPrice } from '@/lib/price'
 import { Card, CardContent, CardTitle, CardDescription } from '@/components/ui/Card'
 import { Badge, type BadgeVariant } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
@@ -22,15 +23,9 @@ export function PackageCard({ pkg, tags, badges, description }: Props) {
   const { addPackage, isLoading, username } = useCart()
   const { prices } = useSalePricesStore()
 
-  const saleData = prices[pkg.id]
-  const basePrice = saleData?.base_price ?? pkg.base_price ?? 0
-  const totalPrice = saleData?.total_price ?? pkg.total_price ?? basePrice
-  const hasDiscount = totalPrice < basePrice && basePrice > 0
-  const isFree = basePrice === 0
+  const { original, price, isFree, hasDiscount, discountPct } =
+    resolveDisplayPrice(pkg.base_price ?? 0, pkg.total_price ?? pkg.base_price ?? 0, prices[pkg.id])
   const needsLogin = !username && !isFree
-  const discountPct = hasDiscount && basePrice > 0
-    ? Math.round(((basePrice - totalPrice) / basePrice) * 100)
-    : 0
 
   return (
     <Card hoverLift className="group flex flex-col overflow-hidden">
@@ -96,11 +91,11 @@ export function PackageCard({ pkg, tags, badges, description }: Props) {
           <div className="flex flex-col leading-none">
             {hasDiscount && (
               <span className="font-mono text-xs text-[var(--color-muted-foreground)] line-through">
-                {basePrice.toFixed(2)}€
+                {original.toFixed(2)}€
               </span>
             )}
             <span className={`font-mono font-bold tracking-tight ${isFree ? 'text-xl text-[var(--color-muted-foreground)]' : 'text-2xl text-[var(--color-primary)]'}`}>
-              {isFree ? 'Free' : `${totalPrice.toFixed(2)}€`}
+              {isFree ? 'Free' : `${price.toFixed(2)}€`}
             </span>
           </div>
 

components/packages/PackagePrice.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useSalePricesStore } from '@/store/salePrices'
+import { resolveDisplayPrice } from '@/lib/price'
 import { Badge } from '@/components/ui/Badge'
 
 interface Props {
@@ -13,26 +14,20 @@ interface Props {
 export function PackagePrice({ packageId, basePrice, totalPrice, currency }: Props) {
   const { prices } = useSalePricesStore()
 
-  const saleData = prices[packageId]
-  const effectiveBase = saleData?.base_price ?? basePrice
-  const effectiveTotal = saleData?.total_price ?? totalPrice
-  const hasDiscount = effectiveTotal < effectiveBase && effectiveBase > 0
-  const isFree = effectiveBase === 0
-  const discountPct = hasDiscount && effectiveBase > 0
-    ? Math.round(((effectiveBase - effectiveTotal) / effectiveBase) * 100)
-    : 0
+  const { original, price, isFree, hasDiscount, discountPct } =
+    resolveDisplayPrice(basePrice, totalPrice, prices[packageId])
 
   return (
     <div className="flex flex-wrap items-baseline gap-2">
       {hasDiscount && (
         <span className="font-mono text-sm text-[var(--color-muted-foreground)] line-through">
-          {effectiveBase.toFixed(2)}€
+          {original.toFixed(2)}€
         </span>
       )}
       <span
         className={`font-mono text-3xl font-bold tracking-tight ${isFree ? 'text-[var(--color-muted-foreground)]' : 'text-[var(--color-primary)]'}`}
       >
-        {isFree ? 'Free' : `${effectiveTotal.toFixed(2)}€`}
+        {isFree ? 'Free' : `${price.toFixed(2)}€`}
       </span>
       <span className="text-xs text-[var(--color-muted-foreground)]">{currency}</span>
       {hasDiscount && <Badge variant="sale">Sale −{discountPct}%</Badge>}

lib/price.ts

@@ -0,0 +1,46 @@
+// Zentrale Preis-/Sale-Auflösung für die Anzeige.
+//
+// Tebex meldet einen aktiven (ggf. user-spezifischen) Sale über die Headless-API
+// NUR mit authentifiziertem Basket-Ident – und in einer unintuitiven Form:
+//   base_price  = Preis NACH Rabatt (z. B. 17.994)
+//   discount    = Rabattbetrag in der Währung (z. B. 11.996)
+//   total_price = zahlbarer Preis (z. B. 17.99)
+// Der ursprüngliche (Vor-Sale-)Preis ist also `base_price + discount`.
+//
+// Ohne Sale (bzw. ohne Basket-Kontext) gilt base_price == total_price und discount == 0.
+
+export interface SaleData {
+  base_price: number
+  total_price: number
+  discount: number
+}
+
+export interface DisplayPrice {
+  /** Ursprünglicher Katalogpreis (durchgestrichen, wenn rabattiert). */
+  original: number
+  /** Tatsächlich zu zahlender Preis. */
+  price: number
+  isFree: boolean
+  hasDiscount: boolean
+  /** Gerundeter Rabatt in Prozent. */
+  discountPct: number
+}
+
+export function resolveDisplayPrice(
+  pkgBasePrice: number,
+  pkgTotalPrice: number,
+  sale?: SaleData,
+): DisplayPrice {
+  // Mit aktivem Sale ist base_price bereits rabattiert → Original = base_price + discount.
+  // Ohne Sale-Daten der Katalogpreis aus den Server-Props.
+  const original = sale ? sale.base_price + sale.discount : pkgBasePrice
+  const price = sale?.total_price ?? pkgTotalPrice
+  const isFree = original === 0
+  // Float-Guard: 17.994 vs. 17.99 darf NICHT als „Sale −0%" durchrutschen.
+  const hasDiscount = !isFree && original > 0 && original - price > 0.005
+  const discountPct = hasDiscount
+    ? Math.round(((original - price) / original) * 100)
+    : 0
+
+  return { original, price, isFree, hasDiscount, discountPct }
+}

store/salePrices.ts

@@ -1,12 +1,13 @@
 'use client'
 
 import { create } from 'zustand'
+import type { SaleData } from '@/lib/price'
 
 // Stores sale prices fetched from Tebex with basket context
-// Key: package ID, Value: { base_price, total_price }
+// Key: package ID, Value: { base_price, total_price, discount }
 interface SalePricesStore {
-  prices: Record<number, { base_price: number; total_price: number }>
-  setPrices: (prices: Record<number, { base_price: number; total_price: number }>) => void
+  prices: Record<number, SaleData>
+  setPrices: (prices: Record<number, SaleData>) => void
   clear: () => void
 }