diff --git a/app/(app)/settings/billing/page.tsx b/app/(app)/settings/billing/page.tsx new file mode 100644 index 0000000..e85c182 --- /dev/null +++ b/app/(app)/settings/billing/page.tsx @@ -0,0 +1,29 @@ +import { ManageSubscription } from "@/components/billing/manage-subscription"; +import { PricingCards } from "@/components/billing/pricing-cards"; +import { TopupPanel } from "@/components/billing/topup-panel"; + +export default function BillingPage() { + return ( +
+
+

Billing

+

Manage your plan and credits

+
+ +
+

Current plan

+ +
+ +
+

Change plan

+ +
+ +
+

Buy credits

+ +
+
+ ); +} diff --git a/components/billing/manage-subscription.tsx b/components/billing/manage-subscription.tsx new file mode 100644 index 0000000..78a723d --- /dev/null +++ b/components/billing/manage-subscription.tsx @@ -0,0 +1,49 @@ +"use client"; + +import { useQuery } from "convex/react"; +import { ExternalLink } from "lucide-react"; + +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { api } from "@/convex/_generated/api"; +import { authClient } from "@/lib/auth-client"; +import { normalizeTier, TIER_MONTHLY_CREDITS } from "@/lib/polar-products"; + +const TIER_LABELS: Record = { + free: "Free", + starter: "Starter", + pro: "Pro", + max: "Max", +}; + +export function ManageSubscription() { + const subscription = useQuery(api.credits.getSubscription); + const tier = normalizeTier(subscription?.tier); + + return ( +
+
+

Current plan

+
+ {TIER_LABELS[tier]} + + {subscription?.status ?? "active"} + +
+

+ {TIER_MONTHLY_CREDITS[tier].toLocaleString("de-DE")} Credits / month + {subscription?.currentPeriodEnd ? ( + <> · renews {new Date(subscription.currentPeriodEnd).toLocaleDateString("de-DE")} + ) : null} +

+
+ + {tier !== "free" && ( + + )} +
+ ); +} diff --git a/components/billing/pricing-cards.tsx b/components/billing/pricing-cards.tsx new file mode 100644 index 0000000..1dc42df --- /dev/null +++ b/components/billing/pricing-cards.tsx @@ -0,0 +1,104 @@ +"use client"; + +import { useQuery } from "convex/react"; +import { Check } from "lucide-react"; + +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { api } from "@/convex/_generated/api"; +import { authClient } from "@/lib/auth-client"; +import { + normalizeTier, + SUBSCRIPTION_PRODUCTS, + TIER_MONTHLY_CREDITS, +} from "@/lib/polar-products"; + +const TIER_ORDER = ["free", "starter", "pro", "max"] as const; + +export function PricingCards() { + const subscription = useQuery(api.credits.getSubscription); + const currentTier = normalizeTier(subscription?.tier); + + async function handleCheckout(polarProductId: string) { + await authClient.checkout({ products: [polarProductId] }); + } + + return ( +
+
+
+
+ Free + {currentTier === "free" && Current} +
+

EUR 0

+

+ {TIER_MONTHLY_CREDITS.free} Credits / month +

+
+
    +
  • + Budget models only +
    • +
  • + 10 generations / day +
    • +
  • + 1 concurrent generation +
    • +
+ +
+ + {(["starter", "pro", "max"] as const).map((tier) => { + const product = SUBSCRIPTION_PRODUCTS[tier]; + const isCurrent = currentTier === tier; + const isUpgrade = + TIER_ORDER.indexOf(tier) > TIER_ORDER.indexOf(currentTier); + + return ( +
+
+
+ {product.label} + {isCurrent && Current} + {tier === "pro" && !isCurrent && Popular} +
+

EUR {product.price}

+

+ {product.credits.toLocaleString("de-DE")} Credits / month +

+
+
    +
  • + All models +
    • +
  • + {tier === "starter" ? "50" : tier === "pro" ? "200" : "500"} generations / day +
    • +
  • + 2 concurrent generations +
    • +
+ +
+ ); + })} +
+ ); +} diff --git a/components/billing/topup-panel.tsx b/components/billing/topup-panel.tsx new file mode 100644 index 0000000..0eae13b --- /dev/null +++ b/components/billing/topup-panel.tsx @@ -0,0 +1,87 @@ +"use client"; + +import { useState } from "react"; +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"; + +const CUSTOM_TOPUP_PRODUCT_ID = "POLAR_PRODUCT_ID_TOPUP_CUSTOM"; + +export function TopupPanel() { + const [customAmount, setCustomAmount] = useState(20); + const { credits, bonusRate } = calculateCustomTopup(customAmount); + + async function handleTopup(polarProductId: string) { + await authClient.checkout({ products: [polarProductId] }); + } + + return ( +
+
+

Quick top-up

+
+ {TOPUP_PRODUCTS.map((product) => ( + + ))} +
+
+ +
+

Custom amount

+
+ EUR {customAmount} +
+

+ {credits.toLocaleString("de-DE")} Cr +

+ {bonusRate > 0 && ( +

+ + +{Math.round(bonusRate * 100)}% bonus +

+ )} +
+
+ + setCustomAmount(value)} + /> + +
+ EUR 5 + EUR 200 +
+ + + +

+ Larger amounts include a bonus. Top-ups are always available, even on free plan. +

+
+
+ ); +} diff --git a/components/canvas/credit-display.tsx b/components/canvas/credit-display.tsx index 8b8eb04..f9f4c68 100644 --- a/components/canvas/credit-display.tsx +++ b/components/canvas/credit-display.tsx @@ -9,6 +9,7 @@ const TIER_LABELS: Record = { free: "Free", starter: "Starter", pro: "Pro", + max: "Max", business: "Business", }; @@ -16,6 +17,7 @@ const TIER_COLORS: Record = { free: "text-muted-foreground", starter: "text-blue-500", pro: "text-purple-500", + max: "text-amber-500", business: "text-amber-500", }; diff --git a/components/dashboard/credit-overview.tsx b/components/dashboard/credit-overview.tsx index 1b66d09..6a1b7a8 100644 --- a/components/dashboard/credit-overview.tsx +++ b/components/dashboard/credit-overview.tsx @@ -2,6 +2,7 @@ import { useQuery } from "convex/react"; import { CreditCard } from "lucide-react"; +import Link from "next/link"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; @@ -16,15 +17,17 @@ import { cn } from "@/lib/utils"; const TIER_MONTHLY_CREDITS: Record = { free: 50, - starter: 630, - pro: 3602, - business: 7623, + starter: 400, + pro: 3300, + max: 6700, + business: 6700, }; const TIER_BADGE_STYLES: Record = { 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", }; @@ -124,14 +127,11 @@ export function CreditOverview() { {/* ── Block C: Aufladen ───────────────────────────────────────── */}
-
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx new file mode 100644 index 0000000..bc945e0 --- /dev/null +++ b/components/ui/slider.tsx @@ -0,0 +1,38 @@ +"use client"; + +import * as React from "react"; +import { Slider as SliderPrimitive } from "radix-ui"; + +import { cn } from "@/lib/utils"; + +function Slider({ className, ...props }: React.ComponentProps) { + return ( + + + + + {Array.from({ length: props.value?.length ?? props.defaultValue?.length ?? 1 }).map((_, index) => ( + + ))} + + ); +} + +export { Slider }; diff --git a/convex/_generated/api.d.ts b/convex/_generated/api.d.ts index aa89155..2bbbb8c 100644 --- a/convex/_generated/api.d.ts +++ b/convex/_generated/api.d.ts @@ -18,6 +18,7 @@ import type * as helpers from "../helpers.js"; import type * as http from "../http.js"; import type * as nodes from "../nodes.js"; import type * as openrouter from "../openrouter.js"; +import type * as polar from "../polar.js"; import type * as storage from "../storage.js"; import type { @@ -37,6 +38,7 @@ declare const fullApi: ApiFromModules<{ http: typeof http; nodes: typeof nodes; openrouter: typeof openrouter; + polar: typeof polar; storage: typeof storage; }>; diff --git a/convex/auth.ts b/convex/auth.ts index 6cea815..53fcc0b 100644 --- a/convex/auth.ts +++ b/convex/auth.ts @@ -1,6 +1,10 @@ import { createClient, type GenericCtx } from "@convex-dev/better-auth"; import { convex } from "@convex-dev/better-auth/plugins"; +import { requireRunMutationCtx } from "@convex-dev/better-auth/utils"; +import { checkout, polar, portal, webhooks } from "@polar-sh/better-auth"; +import { Polar } from "@polar-sh/sdk"; import { components } from "./_generated/api"; +import { internal } from "./_generated/api"; import { DataModel } from "./_generated/dataModel"; import { query } from "./_generated/server"; import { betterAuth } from "better-auth/minimal"; @@ -10,6 +14,11 @@ import authConfig from "./auth.config"; const siteUrl = process.env.SITE_URL!; const appUrl = process.env.APP_URL; +const polarClient = new Polar({ + accessToken: process.env.POLAR_ACCESS_TOKEN!, + server: "production", +}); + // Component Client — stellt Adapter, Helper und Auth-Methoden bereit export const authComponent = createClient(components.betterAuth); @@ -68,6 +77,92 @@ export const createAuth = (ctx: GenericCtx) => { }, plugins: [ convex({ authConfig }), + polar({ + client: polarClient, + createCustomerOnSignUp: true, + use: [ + checkout({ + successUrl: `${siteUrl}/dashboard?checkout=success`, + authenticatedUsersOnly: true, + }), + portal(), + webhooks({ + secret: process.env.POLAR_WEBHOOK_SECRET!, + onCustomerStateChanged: async (payload) => { + const runMutationCtx = requireRunMutationCtx(ctx); + const customerState = payload.data; + const userId = customerState.externalId; + + if (!userId) { + console.error("Polar customer.state_changed payload without externalId", { + customerId: customerState.id, + }); + return; + } + + const subscription = customerState.activeSubscriptions?.[0]; + + if (!subscription) { + await runMutationCtx.runMutation(internal.polar.handleSubscriptionRevoked, { + userId, + }); + return; + } + + const tierMetadata = subscription.metadata.tier; + const creditsMetadata = subscription.metadata.credits; + const tier = tierMetadata === "starter" || tierMetadata === "pro" || tierMetadata === "max" + ? tierMetadata + : undefined; + const monthlyCredits = Number(creditsMetadata); + + if (!tier || !Number.isFinite(monthlyCredits) || monthlyCredits <= 0) { + console.error("Missing or invalid Polar subscription metadata", { + subscriptionId: subscription.id, + tier: tierMetadata, + credits: creditsMetadata, + }); + return; + } + + await runMutationCtx.runMutation(internal.polar.handleSubscriptionActivated, { + userId, + tier, + polarSubscriptionId: subscription.id, + currentPeriodStart: subscription.currentPeriodStart.getTime(), + currentPeriodEnd: subscription.currentPeriodEnd.getTime(), + monthlyCredits, + }); + }, + onOrderPaid: async (payload) => { + const runMutationCtx = requireRunMutationCtx(ctx); + const order = payload.data; + const metadata = order.product?.metadata; + const type = metadata?.type; + const credits = Number(metadata?.credits); + + if (type !== "topup" || !Number.isFinite(credits) || credits <= 0) { + return; + } + + const userId = order.customer.externalId; + if (!userId) { + console.error("Polar order.paid payload without externalId", { + orderId: order.id, + }); + return; + } + + await runMutationCtx.runMutation(internal.polar.handleTopUpPaid, { + userId, + credits, + polarOrderId: order.id, + amountPaidEuroCents: order.totalAmount, + }); + }, + }), + ], + }), ], }); }; diff --git a/convex/credits.ts b/convex/credits.ts index 8482b07..6c05472 100644 --- a/convex/credits.ts +++ b/convex/credits.ts @@ -8,28 +8,35 @@ import { requireAuth } from "./helpers"; export const TIER_CONFIG = { free: { - monthlyCredits: 50, // €0,50 in Cent + monthlyCredits: 50, dailyGenerationCap: 10, concurrencyLimit: 1, premiumModels: false, - topUpLimit: 0, // Kein Top-Up für Free + topUpLimit: 50000, }, starter: { - monthlyCredits: 630, // €6,30 in Cent + monthlyCredits: 400, dailyGenerationCap: 50, concurrencyLimit: 2, premiumModels: true, topUpLimit: 2000, // €20 pro Monat }, pro: { - monthlyCredits: 3602, // €36,02 in Cent (+5% Bonus) + monthlyCredits: 3300, dailyGenerationCap: 200, concurrencyLimit: 2, premiumModels: true, topUpLimit: 10000, // €100 pro Monat }, + max: { + monthlyCredits: 6700, + dailyGenerationCap: 500, + concurrencyLimit: 2, + premiumModels: true, + topUpLimit: 50000, + }, business: { - monthlyCredits: 7623, // €76,23 in Cent (+10% Bonus) + monthlyCredits: 6700, dailyGenerationCap: 500, concurrencyLimit: 2, premiumModels: true, @@ -516,6 +523,7 @@ export const activateSubscription = internalMutation({ v.literal("free"), v.literal("starter"), v.literal("pro"), + v.literal("max"), v.literal("business") ), lemonSqueezySubscriptionId: v.string(), @@ -601,10 +609,6 @@ export const topUp = mutation({ const tier = (subscription?.tier ?? "free") as Tier; const config = TIER_CONFIG[tier]; - if (config.topUpLimit === 0) { - throw new Error("Top-up not available for Free tier"); - } - // Monatliches Top-Up-Limit prüfen const monthStart = new Date(); monthStart.setDate(1); diff --git a/convex/polar.ts b/convex/polar.ts new file mode 100644 index 0000000..946f363 --- /dev/null +++ b/convex/polar.ts @@ -0,0 +1,183 @@ +import { v } from "convex/values"; + +import { internalMutation, type MutationCtx } from "./_generated/server"; + +type DbCtx = Pick; + +type ActivatedArgs = { + userId: string; + tier: "starter" | "pro" | "max"; + polarSubscriptionId: string; + currentPeriodStart: number; + currentPeriodEnd: number; + monthlyCredits: number; +}; + +type RevokedArgs = { + userId: string; + polarSubscriptionId?: string; +}; + +type TopUpArgs = { + userId: string; + credits: number; + polarOrderId: string; + amountPaidEuroCents: number; +}; + +export async function applySubscriptionActivated(ctx: DbCtx, args: ActivatedArgs) { + const existing = await ctx.db + .query("subscriptions") + .withIndex("by_user", (q) => q.eq("userId", args.userId)) + .order("desc") + .first(); + + if (existing) { + await ctx.db.patch(existing._id, { + tier: args.tier, + status: "active", + currentPeriodStart: args.currentPeriodStart, + currentPeriodEnd: args.currentPeriodEnd, + polarSubscriptionId: args.polarSubscriptionId, + }); + } else { + await ctx.db.insert("subscriptions", { + userId: args.userId, + tier: args.tier, + status: "active", + currentPeriodStart: args.currentPeriodStart, + currentPeriodEnd: args.currentPeriodEnd, + polarSubscriptionId: args.polarSubscriptionId, + }); + } + + const balance = await ctx.db + .query("creditBalances") + .withIndex("by_user", (q) => q.eq("userId", args.userId)) + .unique(); + + if (balance) { + await ctx.db.patch(balance._id, { + balance: balance.balance + args.monthlyCredits, + monthlyAllocation: args.monthlyCredits, + updatedAt: Date.now(), + }); + } else { + await ctx.db.insert("creditBalances", { + userId: args.userId, + balance: args.monthlyCredits, + reserved: 0, + monthlyAllocation: args.monthlyCredits, + updatedAt: Date.now(), + }); + } + + await ctx.db.insert("creditTransactions", { + userId: args.userId, + amount: args.monthlyCredits, + type: "subscription", + status: "committed", + description: `${args.tier} plan - ${args.monthlyCredits} credits allocated`, + }); +} + +export async function applySubscriptionRevoked(ctx: DbCtx, args: RevokedArgs) { + const sub = await ctx.db + .query("subscriptions") + .withIndex("by_user", (q) => q.eq("userId", args.userId)) + .order("desc") + .first(); + + if (sub) { + await ctx.db.patch(sub._id, { + tier: "free", + status: "cancelled", + }); + } + + const balance = await ctx.db + .query("creditBalances") + .withIndex("by_user", (q) => q.eq("userId", args.userId)) + .unique(); + + if (balance) { + await ctx.db.patch(balance._id, { + monthlyAllocation: 50, + updatedAt: Date.now(), + }); + } + + await ctx.db.insert("creditTransactions", { + userId: args.userId, + amount: 0, + type: "subscription", + status: "committed", + description: args.polarSubscriptionId + ? `Subscription ${args.polarSubscriptionId} cancelled - downgraded to Free` + : "Subscription cancelled - downgraded to Free", + }); +} + +export async function applyTopUpPaid(ctx: DbCtx, args: TopUpArgs) { + const duplicate = await ctx.db + .query("creditTransactions") + .withIndex("by_user", (q) => q.eq("userId", args.userId)) + .filter((q) => q.eq(q.field("description"), `Top-up order ${args.polarOrderId}`)) + .first(); + + if (duplicate) { + return; + } + + const balance = await ctx.db + .query("creditBalances") + .withIndex("by_user", (q) => q.eq("userId", args.userId)) + .unique(); + + if (!balance) { + return; + } + + await ctx.db.patch(balance._id, { + balance: balance.balance + args.credits, + updatedAt: Date.now(), + }); + + await ctx.db.insert("creditTransactions", { + userId: args.userId, + amount: args.credits, + type: "topup", + status: "committed", + description: `Top-up order ${args.polarOrderId} - ${args.credits} credits (EUR ${(args.amountPaidEuroCents / 100).toFixed(2)})`, + }); +} + +export const handleSubscriptionActivated = internalMutation({ + args: { + userId: v.string(), + tier: v.union(v.literal("starter"), v.literal("pro"), v.literal("max")), + polarSubscriptionId: v.string(), + currentPeriodStart: v.number(), + currentPeriodEnd: v.number(), + monthlyCredits: v.number(), + }, + handler: applySubscriptionActivated, +}); + +export const handleSubscriptionRevoked = internalMutation({ + args: { + userId: v.string(), + polarSubscriptionId: v.optional(v.string()), + }, + handler: applySubscriptionRevoked, +}); + +export const handleTopUpPaid = internalMutation({ + args: { + userId: v.string(), + credits: v.number(), + polarOrderId: v.string(), + amountPaidEuroCents: v.number(), + }, + handler: applyTopUpPaid, +}); diff --git a/convex/schema.ts b/convex/schema.ts index 2a8718f..aef32fb 100644 --- a/convex/schema.ts +++ b/convex/schema.ts @@ -258,6 +258,7 @@ export default defineSchema({ v.literal("free"), v.literal("starter"), v.literal("pro"), + v.literal("max"), v.literal("business") ), status: v.union( @@ -268,11 +269,13 @@ export default defineSchema({ ), currentPeriodStart: v.number(), // Timestamp (ms) currentPeriodEnd: v.number(), // Timestamp (ms) + polarSubscriptionId: v.optional(v.string()), lemonSqueezySubscriptionId: v.optional(v.string()), lemonSqueezyCustomerId: v.optional(v.string()), cancelAtPeriodEnd: v.optional(v.boolean()), // Kündigung zum Periodenende }) .index("by_user", ["userId"]) + .index("by_polar", ["polarSubscriptionId"]) .index("by_lemon_squeezy", ["lemonSqueezySubscriptionId"]), // ========================================================================== diff --git a/lib/ai-models.ts b/lib/ai-models.ts index 1161151..246eccf 100644 --- a/lib/ai-models.ts +++ b/lib/ai-models.ts @@ -9,7 +9,7 @@ export interface AiModel { estimatedCost: string; // human-readable, e.g. "~€0.04" /** Credits pro Generierung — gleiche Einheit wie Convex reserve/commit (Euro-Cent). */ creditCost: number; - minTier: "free" | "starter" | "pro" | "business"; // minimum subscription tier + minTier: "free" | "starter" | "pro" | "max" | "business"; // minimum subscription tier } export const IMAGE_MODELS: AiModel[] = [ diff --git a/lib/auth-client.ts b/lib/auth-client.ts index 4584788..95396c7 100644 --- a/lib/auth-client.ts +++ b/lib/auth-client.ts @@ -1,7 +1,8 @@ import { createAuthClient } from "better-auth/react"; import { convexClient } from "@convex-dev/better-auth/client/plugins"; +import { polarClient } from "@polar-sh/better-auth/client"; // Next.js: kein crossDomainClient nötig (same-origin via API Route Proxy) export const authClient = createAuthClient({ - plugins: [convexClient()], + plugins: [convexClient(), polarClient()], }); diff --git a/lib/polar-products.ts b/lib/polar-products.ts new file mode 100644 index 0000000..38ecf01 --- /dev/null +++ b/lib/polar-products.ts @@ -0,0 +1,61 @@ +export const SUBSCRIPTION_PRODUCTS = { + starter: { + polarProductId: "81b6de07-cd41-430f-bd54-f0e7072deec6", + price: 8, + credits: 400, + label: "Starter", + }, + pro: { + polarProductId: "efb5cdb6-2cd6-4861-9073-7b43e29bc9f5", + price: 59, + credits: 3300, + label: "Pro", + }, + max: { + polarProductId: "40b850a9-0a07-4284-a749-c410ef532e80", + price: 119, + credits: 6700, + label: "Max", + }, +} as const; + +export const TOPUP_PRODUCTS = [ + { + label: "Klein", + price: 5, + credits: 250, + polarProductId: "539a18b1-375c-4d70-ae84-66c53cb365f8", + }, + { + label: "Mittel", + price: 10, + credits: 500, + polarProductId: "d62970e4-fb5a-4f72-b4af-1bb92a575fa8", + }, + { + label: "Groß", + price: 20, + credits: 1000, + polarProductId: "ed4f0c05-7d77-4087-bcf7-cf60174e1316", + }, + { + label: "XL", + price: 50, + credits: 3000, + polarProductId: "79a27a33-e8bf-4205-b37b-b9431593310b", + }, +] as const; + +export const TIER_MONTHLY_CREDITS = { + free: 50, + starter: 400, + pro: 3300, + max: 6700, +} as const; + +export function normalizeTier(tier: string | undefined | null): keyof typeof TIER_MONTHLY_CREDITS { + if (!tier || tier === "free") return "free"; + if (tier === "starter" || tier === "pro" || tier === "max") return tier; + if (tier === "business") return "max"; + return "free"; +} diff --git a/lib/topup-calculator.ts b/lib/topup-calculator.ts new file mode 100644 index 0000000..cb84d9d --- /dev/null +++ b/lib/topup-calculator.ts @@ -0,0 +1,14 @@ +export function calculateCustomTopup(euroAmount: number): { + credits: number; + bonusRate: number; +} { + const bonusRate = + euroAmount >= 100 ? 0.13 : + euroAmount >= 50 ? 0.10 : + euroAmount >= 20 ? 0.06 : + euroAmount >= 10 ? 0.03 : 0; + + const netAmount = euroAmount / 1.19; + const credits = Math.floor((netAmount * 0.70 * (1 + bonusRate)) / 0.01); + return { credits, bonusRate }; +}