53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
import { useState } from "react";
|
|
|
|
import { authClient } from "@/lib/auth-client";
|
|
import { TOPUP_PRODUCTS } from "@/lib/polar-products";
|
|
import { toast } from "@/lib/toast";
|
|
|
|
export function TopupPanel() {
|
|
const t = useTranslations('toasts');
|
|
const [liveMessage, setLiveMessage] = useState("");
|
|
|
|
async function handleTopup(polarProductId: string) {
|
|
setLiveMessage(t('billing.redirectingToCheckoutTitle'));
|
|
toast.info(
|
|
t('billing.redirectingToCheckoutTitle'),
|
|
t('billing.redirectingToCheckoutDesc'),
|
|
);
|
|
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>
|
|
|
|
<p className="text-xs text-muted-foreground">
|
|
Angezeigt werden nur kaufbare Top-up Pakete aus der serverseitigen Polar-Produktkonfiguration.
|
|
</p>
|
|
<p className="sr-only" role="status" aria-live="polite" aria-atomic="true">
|
|
{liveMessage}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|