refactor(billing): centralize tier credits and align topup UI

components/billing/topup-panel.tsx

@@ -1,22 +1,13 @@
 "use client";
 
-import { useState } from "react";
 import { useTranslations } from "next-intl";
-import { CreditCard, Zap } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
-import { Slider } from "@/components/ui/slider";
 import { authClient } from "@/lib/auth-client";
 import { TOPUP_PRODUCTS } from "@/lib/polar-products";
-import { calculateCustomTopup } from "@/lib/topup-calculator";
 import { toast } from "@/lib/toast";
 
-const CUSTOM_TOPUP_PRODUCT_ID = "POLAR_PRODUCT_ID_TOPUP_CUSTOM";
-
 export function TopupPanel() {
   const t = useTranslations('toasts');
-  const [customAmount, setCustomAmount] = useState(20);
-  const { credits, bonusRate } = calculateCustomTopup(customAmount);
 
   async function handleTopup(polarProductId: string) {
     toast.info(
@@ -47,48 +38,9 @@ export function TopupPanel() {
         </div>
       </div>
 
-      <div className="space-y-4 rounded-xl border bg-card p-6">
+      <p className="text-xs text-muted-foreground">
-        <h3 className="text-sm font-medium">Custom amount</h3>
+        Angezeigt werden nur kaufbare Top-up Pakete aus der serverseitigen Polar-Produktkonfiguration.
-        <div className="flex items-center justify-between">
+      </p>
-          <span className="text-3xl font-semibold tabular-nums">EUR {customAmount}</span>
-          <div className="text-right">
-            <p className="text-2xl font-semibold tabular-nums text-primary">
-              {credits.toLocaleString("de-DE")} Cr
-            </p>
-            {bonusRate > 0 && (
-              <p className="flex items-center justify-end gap-1 text-xs text-green-600">
-                <Zap className="h-3 w-3" />
-                +{Math.round(bonusRate * 100)}% bonus
-              </p>
-            )}
-          </div>
-        </div>
-
-        <Slider
-          min={5}
-          max={200}
-          step={1}
-          value={[customAmount]}
-          onValueChange={([value]) => setCustomAmount(value)}
-        />
-
-        <div className="flex justify-between text-xs text-muted-foreground">
-          <span>EUR 5</span>
-          <span>EUR 200</span>
-        </div>
-
-        <Button
-          className="w-full"
-          onClick={() => handleTopup(CUSTOM_TOPUP_PRODUCT_ID)}
-        >
-          <CreditCard className="mr-2 h-4 w-4" />
-          Buy {credits.toLocaleString("de-DE")} Credits for EUR {customAmount}
-        </Button>
-
-        <p className="text-center text-xs text-muted-foreground">
-          Larger amounts include a bonus. Top-ups are always available, even on free plan.
-        </p>
-      </div>
     </div>
   );
 }

components/dashboard/credit-overview.tsx

@@ -11,27 +11,15 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
 import { api } from "@/convex/_generated/api";
+import { normalizeTier, TIER_MONTHLY_CREDITS } from "@/lib/polar-products";
 import { cn } from "@/lib/utils";
 import { toast } from "@/lib/toast";
 
-// ---------------------------------------------------------------------------
-// Tier-Config — monatliches Credit-Kontingent pro Tier (in Cent)
-// ---------------------------------------------------------------------------
-
-const TIER_MONTHLY_CREDITS: Record<string, number> = {
-  free: 50,
-  starter: 400,
-  pro: 3300,
-  max: 6700,
-  business: 6700,
-};
-
 const TIER_BADGE_STYLES: Record<string, string> = {
   free: "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400",
   starter: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400",
   pro: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400",
   max: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400",
-  business: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400",
 };
 
 // ---------------------------------------------------------------------------
@@ -90,8 +78,8 @@ export function CreditOverview() {
   }
 
   // ── Computed Values ────────────────────────────────────────────────────
-  const tier = subscription.tier;
+  const tier = normalizeTier(subscription.tier);
-  const monthlyCredits = TIER_MONTHLY_CREDITS[tier] ?? 0;
+  const monthlyCredits = TIER_MONTHLY_CREDITS[tier];
   const usagePercent = monthlyCredits > 0
     ? Math.min(100, Math.round((usageStats.monthlyUsage / monthlyCredits) * 100))
     : 0;