Merge pull request #1396 from escapade-mckv/buy-more-tokens

topup credits

backend/utils/config.py

@@ -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_10_PRICE_ID_PROD: str = 'price_1RxmQUG6l1KZGqIru453O1zW'
-    STRIPE_CREDITS_25_PRICE_ID_PROD: str = 'price_1RxXPNG6l1KZGqIrQprPgDme'
+    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

frontend/src/components/billing/credit-purchase.tsx

@@ -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 },
+    { amount: 25, price: 25 },
-    // Uncomment these when you create the additional price IDs in Stripe:
+    { amount: 50, price: 50 },
-    // { amount: 50, price: 50 },
+    { amount: 100, price: 100, popular: true },
-    // { amount: 100, price: 100 },
+    { amount: 250, price: 250 },
-    // { amount: 250, price: 250 },
+    { amount: 500, price: 500 },
-    // { 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">
+                    <Alert className="text-purple-600 dark:text-purple-400 bg-purple-50 border-purple-200 dark:bg-purple-950 dark:border-purple-800">
-                        <CheckCircle className="h-4 w-4 text-blue-600" />
+                        <AlertCircleIcon className="h-4 w-4" />
-                        <AlertDescription>
+                        <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
                             </>
                         )}