feat: add new subscription tier and update credit configurations
- Introduced a new "max" subscription tier with associated monthly credits and top-up limits. - Updated existing subscription tiers' monthly credits and top-up limits for "starter", "pro", and "business". - Enhanced credit display and overview components to reflect the new tier and its attributes. - Integrated Polar authentication features for improved subscription management and credit handling.
This commit is contained in:
Matthias
49
components/billing/manage-subscription.tsx
Normal file
49
components/billing/manage-subscription.tsx
Normal file
@@ -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<keyof typeof TIER_MONTHLY_CREDITS, string> = {
|
||||
free: "Free",
|
||||
starter: "Starter",
|
||||
pro: "Pro",
|
||||
max: "Max",
|
||||
};
|
||||
|
||||
export function ManageSubscription() {
|
||||
const subscription = useQuery(api.credits.getSubscription);
|
||||
const tier = normalizeTier(subscription?.tier);
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between rounded-xl border bg-card p-6">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Current plan</p>
|
||||
<div className="mt-1 flex items-center gap-2">
|
||||
<span className="text-lg font-medium">{TIER_LABELS[tier]}</span>
|
||||
<Badge variant={subscription?.status === "active" ? "default" : "secondary"}>
|
||||
{subscription?.status ?? "active"}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{TIER_MONTHLY_CREDITS[tier].toLocaleString("de-DE")} Credits / month
|
||||
{subscription?.currentPeriodEnd ? (
|
||||
<> · renews {new Date(subscription.currentPeriodEnd).toLocaleDateString("de-DE")}</>
|
||||
) : null}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{tier !== "free" && (
|
||||
<Button variant="outline" onClick={() => authClient.customer.portal()}>
|
||||
<ExternalLink className="mr-2 h-4 w-4" />
|
||||
Manage
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
104
components/billing/pricing-cards.tsx
Normal file
104
components/billing/pricing-cards.tsx
Normal file
@@ -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 (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="flex flex-col gap-4 rounded-xl border bg-card p-6">
|
||||
<div>
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<span className="font-medium">Free</span>
|
||||
{currentTier === "free" && <Badge variant="secondary">Current</Badge>}
|
||||
</div>
|
||||
<p className="text-3xl font-semibold tabular-nums">EUR 0</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{TIER_MONTHLY_CREDITS.free} Credits / month
|
||||
</p>
|
||||
</div>
|
||||
<ul className="flex-1 space-y-1 text-sm text-muted-foreground">
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-4 w-4 text-green-500" /> Budget models only
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-4 w-4 text-green-500" /> 10 generations / day
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-4 w-4 text-green-500" /> 1 concurrent generation
|
||||
</li>
|
||||
</ul>
|
||||
<Button variant="outline" disabled>
|
||||
Free plan
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{(["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 (
|
||||
<div
|
||||
key={tier}
|
||||
className={`flex flex-col gap-4 rounded-xl border bg-card p-6 ${tier === "pro" ? "ring-2 ring-primary" : ""}`}
|
||||
>
|
||||
<div>
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<span className="font-medium">{product.label}</span>
|
||||
{isCurrent && <Badge variant="secondary">Current</Badge>}
|
||||
{tier === "pro" && !isCurrent && <Badge>Popular</Badge>}
|
||||
</div>
|
||||
<p className="text-3xl font-semibold tabular-nums">EUR {product.price}</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{product.credits.toLocaleString("de-DE")} Credits / month
|
||||
</p>
|
||||
</div>
|
||||
<ul className="flex-1 space-y-1 text-sm text-muted-foreground">
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-4 w-4 text-green-500" /> All models
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-4 w-4 text-green-500" /> {tier === "starter" ? "50" : tier === "pro" ? "200" : "500"} generations / day
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-4 w-4 text-green-500" /> 2 concurrent generations
|
||||
</li>
|
||||
</ul>
|
||||
<Button
|
||||
variant={tier === "pro" ? "default" : "outline"}
|
||||
disabled={isCurrent}
|
||||
onClick={() => handleCheckout(product.polarProductId)}
|
||||
>
|
||||
{isCurrent
|
||||
? "Current plan"
|
||||
: isUpgrade
|
||||
? `Upgrade to ${product.label}`
|
||||
: `Switch to ${product.label}`}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
87
components/billing/topup-panel.tsx
Normal file
87
components/billing/topup-panel.tsx
Normal file
@@ -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 (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="mb-3 text-sm font-medium">Quick top-up</h3>
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
{TOPUP_PRODUCTS.map((product) => (
|
||||
<button
|
||||
key={product.polarProductId}
|
||||
onClick={() => handleTopup(product.polarProductId)}
|
||||
className="rounded-lg border bg-card p-4 text-left transition-colors hover:border-primary"
|
||||
type="button"
|
||||
>
|
||||
<p className="text-lg font-semibold tabular-nums">EUR {product.price}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{product.credits.toLocaleString("de-DE")} Cr
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 rounded-xl border bg-card p-6">
|
||||
<h3 className="text-sm font-medium">Custom amount</h3>
|
||||
<div className="flex items-center justify-between">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -9,6 +9,7 @@ const TIER_LABELS: Record<string, string> = {
|
||||
free: "Free",
|
||||
starter: "Starter",
|
||||
pro: "Pro",
|
||||
max: "Max",
|
||||
business: "Business",
|
||||
};
|
||||
|
||||
@@ -16,6 +17,7 @@ const TIER_COLORS: Record<string, string> = {
|
||||
free: "text-muted-foreground",
|
||||
starter: "text-blue-500",
|
||||
pro: "text-purple-500",
|
||||
max: "text-amber-500",
|
||||
business: "text-amber-500",
|
||||
};
|
||||
|
||||
|
||||
@@ -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<string, number> = {
|
||||
free: 50,
|
||||
starter: 630,
|
||||
pro: 3602,
|
||||
business: 7623,
|
||||
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",
|
||||
};
|
||||
|
||||
@@ -124,14 +127,11 @@ export function CreditOverview() {
|
||||
|
||||
{/* ── Block C: Aufladen ───────────────────────────────────────── */}
|
||||
<div className="flex items-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full gap-2"
|
||||
disabled
|
||||
title="Demnächst verfügbar – Top-Up via Polar.sh"
|
||||
>
|
||||
<CreditCard className="size-4" />
|
||||
Credits aufladen
|
||||
<Button variant="outline" className="w-full gap-2" asChild>
|
||||
<Link href="/settings/billing">
|
||||
<CreditCard className="size-4" />
|
||||
Credits aufladen
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
38
components/ui/slider.tsx
Normal file
38
components/ui/slider.tsx
Normal file
@@ -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<typeof SliderPrimitive.Root>) {
|
||||
return (
|
||||
<SliderPrimitive.Root
|
||||
data-slot="slider"
|
||||
className={cn(
|
||||
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track
|
||||
data-slot="slider-track"
|
||||
className="relative h-2 w-full grow overflow-hidden rounded-full bg-muted"
|
||||
>
|
||||
<SliderPrimitive.Range
|
||||
data-slot="slider-range"
|
||||
className="absolute h-full bg-primary"
|
||||
/>
|
||||
</SliderPrimitive.Track>
|
||||
{Array.from({ length: props.value?.length ?? props.defaultValue?.length ?? 1 }).map((_, index) => (
|
||||
<SliderPrimitive.Thumb
|
||||
key={index}
|
||||
data-slot="slider-thumb"
|
||||
className="block size-4 rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
|
||||
/>
|
||||
))}
|
||||
</SliderPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
export { Slider };
|
||||
Reference in New Issue
Block a user