Matthias Meister
79d9092d43
- Integrated `next-intl` for toast messages and locale handling in various components, including `Providers`, `CanvasUserMenu`, and `CreditOverview`. - Replaced hardcoded strings with translation keys to enhance localization capabilities. - Updated `RootLayout` to dynamically set the language attribute based on the user's locale. - Ensured consistent user feedback through localized toast messages in actions such as sign-out, canvas operations, and billing notifications.
95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
"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(
|
|
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>
|
|
|
|
<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>
|
|
);
|
|
}
|