mirror of https://github.com/kortix-ai/suna.git
topup credits
This commit is contained in:
parent
49393e9b56
commit
120a2380a4
|
@ -88,12 +88,20 @@ class Configuration:
|
|||
STRIPE_TIER_25_170_YEARLY_COMMITMENT_ID_STAGING: str = 'price_1RqYHbG6l1KZGqIrAUVf8KpG' # $170/month
|
||||
|
||||
# Credit package price IDs - Production
|
||||
STRIPE_CREDITS_10_PRICE_ID_PROD: str = 'price_1RxXOvG6l1KZGqIrMqsiYQvk'
|
||||
STRIPE_CREDITS_25_PRICE_ID_PROD: str = 'price_1RxXPNG6l1KZGqIrQprPgDme'
|
||||
STRIPE_CREDITS_10_PRICE_ID_PROD: str = 'price_1RxmQUG6l1KZGqIru453O1zW'
|
||||
STRIPE_CREDITS_25_PRICE_ID_PROD: str = 'price_1RxmQlG6l1KZGqIr3hS5WtGg'
|
||||
STRIPE_CREDITS_50_PRICE_ID_PROD: str = 'price_1RxmQvG6l1KZGqIrLbMZ3D6r'
|
||||
STRIPE_CREDITS_100_PRICE_ID_PROD: str = 'price_1RxmR3G6l1KZGqIrpLwFCGac'
|
||||
STRIPE_CREDITS_250_PRICE_ID_PROD: str = 'price_1RxmRAG6l1KZGqIrtBIMsZAj'
|
||||
STRIPE_CREDITS_500_PRICE_ID_PROD: str = 'price_1RxmRGG6l1KZGqIrSyvl6w1G'
|
||||
|
||||
# Credit package price IDs - Staging
|
||||
STRIPE_CREDITS_10_PRICE_ID_STAGING: str = 'price_1RxXOvG6l1KZGqIrMqsiYQvk'
|
||||
STRIPE_CREDITS_25_PRICE_ID_STAGING: str = 'price_1RxXPNG6l1KZGqIrQprPgDme'
|
||||
STRIPE_CREDITS_50_PRICE_ID_STAGING: str = 'price_1RxmNhG6l1KZGqIrTq2zPtgi'
|
||||
STRIPE_CREDITS_100_PRICE_ID_STAGING: str = 'price_1RxmNwG6l1KZGqIrnliwPDM6'
|
||||
STRIPE_CREDITS_250_PRICE_ID_STAGING: str = 'price_1RxmO6G6l1KZGqIrBF8Kx87G'
|
||||
STRIPE_CREDITS_500_PRICE_ID_STAGING: str = 'price_1RxmOFG6l1KZGqIrn4wgORnH'
|
||||
|
||||
# Computed subscription tier IDs based on environment
|
||||
@property
|
||||
|
|
|
@ -10,12 +10,10 @@ import {
|
|||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Loader2, CreditCard, AlertCircle, CheckCircle, Zap } from 'lucide-react';
|
||||
import { Loader2, CreditCard, AlertCircle, Zap, AlertCircleIcon } from 'lucide-react';
|
||||
import { apiClient, backendApi } from '@/lib/api-client';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
|
@ -35,12 +33,11 @@ interface CreditPackage {
|
|||
|
||||
const CREDIT_PACKAGES: CreditPackage[] = [
|
||||
{ amount: 10, price: 10 },
|
||||
{ amount: 25, price: 25, popular: true },
|
||||
// Uncomment these when you create the additional price IDs in Stripe:
|
||||
// { amount: 50, price: 50 },
|
||||
// { amount: 100, price: 100 },
|
||||
// { amount: 250, price: 250 },
|
||||
// { amount: 500, price: 500 },
|
||||
{ amount: 25, price: 25 },
|
||||
{ amount: 50, price: 50 },
|
||||
{ amount: 100, price: 100, popular: true },
|
||||
{ amount: 250, price: 250 },
|
||||
{ amount: 500, price: 500 },
|
||||
];
|
||||
|
||||
export function CreditPurchaseModal({
|
||||
|
@ -148,9 +145,9 @@ export function CreditPurchaseModal({
|
|||
</DialogHeader>
|
||||
|
||||
{currentBalance > 0 && (
|
||||
<Alert className="bg-blue-50 border-blue-200">
|
||||
<CheckCircle className="h-4 w-4 text-blue-600" />
|
||||
<AlertDescription>
|
||||
<Alert className="text-purple-600 dark:text-purple-400 bg-purple-50 border-purple-200 dark:bg-purple-950 dark:border-purple-800">
|
||||
<AlertCircleIcon className="h-4 w-4" />
|
||||
<AlertDescription className="text-purple-600 dark:text-purple-400">
|
||||
Current balance: <strong>${currentBalance.toFixed(2)}</strong>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
@ -183,60 +180,12 @@ export function CreditPurchaseModal({
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="custom-amount" className="text-base font-semibold mb-2 block">
|
||||
Or Enter Custom Amount
|
||||
</Label>
|
||||
<div className="flex gap-2">
|
||||
<div className="relative flex-1">
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
|
||||
$
|
||||
</span>
|
||||
<Input
|
||||
id="custom-amount"
|
||||
type="number"
|
||||
min="10"
|
||||
max="5000"
|
||||
step="0.01"
|
||||
placeholder="10.00 - 5000.00"
|
||||
value={customAmount}
|
||||
onChange={(e) => handleCustomAmountChange(e.target.value)}
|
||||
className="pl-7"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Minimum: $10 • Maximum: $5,000
|
||||
</p>
|
||||
</div>
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{(selectedPackage || customAmount) && (
|
||||
<Card className="bg-gray-50">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm">Purchase Summary</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex justify-between items-center">
|
||||
<span>Amount:</span>
|
||||
<span className="font-semibold">
|
||||
${selectedPackage ? selectedPackage.amount.toFixed(2) : parseFloat(customAmount).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mt-2 text-sm text-muted-foreground">
|
||||
<span>Payment method:</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<CreditCard className="h-3 w-3" />
|
||||
Card
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 mt-6">
|
||||
<Button
|
||||
|
@ -252,12 +201,12 @@ export function CreditPurchaseModal({
|
|||
>
|
||||
{isProcessing ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Processing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CreditCard className="mr-2 h-4 w-4" />
|
||||
<CreditCard className="h-4 w-4" />
|
||||
Purchase Credits
|
||||
</>
|
||||
)}
|
||||
|
|
Loading…
Reference in New Issue