135 lines
4.7 KiB
TypeScript
135 lines
4.7 KiB
TypeScript
'use client';
|
|
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import { getCreditPackages } from '@/config/credits-config';
|
|
import { websiteConfig } from '@/config/website';
|
|
import { useCurrentUser } from '@/hooks/use-current-user';
|
|
import { useCurrentPlan } from '@/hooks/use-payment';
|
|
import { formatPrice } from '@/lib/formatter';
|
|
import { cn } from '@/lib/utils';
|
|
import { CircleCheckBigIcon, CoinsIcon } from 'lucide-react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { CreditCheckoutButton } from './credit-checkout-button';
|
|
|
|
/**
|
|
* Credit packages component
|
|
*/
|
|
export function CreditPackages() {
|
|
// Check if credits are enabled - move this check before any hooks
|
|
if (!websiteConfig.credits.enableCredits) {
|
|
return null;
|
|
}
|
|
|
|
const t = useTranslations('Dashboard.settings.credits.packages');
|
|
|
|
// Get current user and payment info
|
|
const currentUser = useCurrentUser();
|
|
const { data: paymentData, isLoading: isLoadingPayment } = useCurrentPlan(
|
|
currentUser?.id
|
|
);
|
|
const currentPlan = paymentData?.currentPlan;
|
|
|
|
// Get credit packages with translations - must be called here to maintain hook order
|
|
// This function contains useTranslations hook, so it must be called before any conditional returns
|
|
const creditPackages = Object.values(getCreditPackages()).filter(
|
|
(pkg) => !pkg.disabled && pkg.price.priceId
|
|
);
|
|
|
|
// Don't render anything while loading to prevent flash
|
|
if (isLoadingPayment) {
|
|
return null;
|
|
}
|
|
|
|
// Don't render anything if we don't have payment data yet
|
|
if (!paymentData) {
|
|
return null;
|
|
}
|
|
|
|
// Check if user is on free plan and enablePackagesForFreePlan is false
|
|
const isFreePlan = currentPlan?.isFree === true;
|
|
|
|
// Check if user is on free plan and enablePackagesForFreePlan is false
|
|
if (isFreePlan && !websiteConfig.credits.enablePackagesForFreePlan) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Card className="w-full">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg font-semibold">{t('title')}</CardTitle>
|
|
<CardDescription className="text-sm text-muted-foreground">
|
|
{t('description')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
|
|
{creditPackages.map((creditPackage) => (
|
|
<Card
|
|
key={creditPackage.id}
|
|
className={cn(
|
|
`relative ${creditPackage.popular ? 'border-primary' : ''}`,
|
|
'shadow-none border-1 border-border'
|
|
)}
|
|
>
|
|
{creditPackage.popular && (
|
|
<div className="absolute -top-3.5 left-1/2 transform -translate-x-1/2">
|
|
<Badge
|
|
variant="default"
|
|
className="bg-primary text-primary-foreground"
|
|
>
|
|
{t('popular')}
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
|
|
<CardContent className="space-y-4">
|
|
{/* Price and Credits - Left/Right Layout */}
|
|
<div className="flex items-center justify-between py-2">
|
|
<div className="text-left">
|
|
<div className="text-2xl font-semibold flex items-center gap-2">
|
|
<CoinsIcon className="h-4 w-4 text-muted-foreground" />
|
|
{creditPackage.amount.toLocaleString()}
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-3xl font-bold text-primary">
|
|
{formatPrice(
|
|
creditPackage.price.amount,
|
|
creditPackage.price.currency
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-sm text-muted-foreground text-left py-2 flex items-center gap-2">
|
|
<CircleCheckBigIcon className="h-4 w-4 text-green-500" />
|
|
{creditPackage.description}
|
|
</div>
|
|
|
|
{/* purchase button using checkout */}
|
|
<CreditCheckoutButton
|
|
userId={currentUser?.id ?? ''}
|
|
packageId={creditPackage.id}
|
|
priceId={creditPackage.price.priceId}
|
|
className="w-full cursor-pointer mt-2"
|
|
variant={creditPackage.popular ? 'default' : 'outline'}
|
|
disabled={!creditPackage.price.priceId}
|
|
>
|
|
{t('purchase')}
|
|
</CreditCheckoutButton>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|