49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import { toast } from "sonner";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import type { Tier } from "@/lib/subscription/config";
|
||
|
|
|
||
|
|
export function PricingClient({ currentTier }: { currentTier: Tier }) {
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
|
||
|
|
if (currentTier === "pro") {
|
||
|
|
return (
|
||
|
|
<p className="text-muted-foreground text-sm">
|
||
|
|
You're on Pro. Manage your subscription through the receipt email link.
|
||
|
|
</p>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const upgrade = async () => {
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
const response = await fetch("/api/billing/checkout", { method: "POST" });
|
||
|
|
const data = await response.json();
|
||
|
|
if (response.ok && data.url) {
|
||
|
|
window.location.href = data.url;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
toast.error(data.message ?? "Failed to start checkout");
|
||
|
|
} catch (error) {
|
||
|
|
toast.error(error instanceof Error ? error.message : "Checkout failed");
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex justify-center">
|
||
|
|
<Button
|
||
|
|
className="px-6"
|
||
|
|
disabled={loading}
|
||
|
|
onClick={upgrade}
|
||
|
|
size="lg"
|
||
|
|
>
|
||
|
|
{loading ? "Opening checkout..." : "Upgrade to Pro"}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|