@omnikit-js/ui 0.5.4 → 0.6.0

package/src/components/BillingClient.tsx

@@ -1,686 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { loadStripe } from '@stripe/stripe-js';
-import { Elements } from '@stripe/react-stripe-js';
-import { Button } from "./ui/button";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card";
-import { Badge } from "./ui/badge";
-import { Progress } from "./ui/progress";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog";
-import { Check, CreditCard, FileText, AlertCircle, AlertTriangle, CheckCircle, Info, Loader2 } from "lucide-react";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
-import PaymentMethodForm from './PaymentMethodForm';
-import SubscriptionConfirmModal from './SubscriptionConfirmModal';
-import { CardBrandIcon } from './ui/card-brand-icon';
-
-interface BillingClientProps {
-  customerData: any;
-  pricingData: any;
-  paymentMethods: any;
-  apiUrl: string;
-  apiKey: string;
-}
-
-const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || '');
-
-// Client-side actions
-async function cancelSubscription(subscriptionId: string, apiUrl: string, apiKey: string) {
-  const response = await fetch(`${apiUrl}/billing/subscriptions/${subscriptionId}`, {
-    method: 'DELETE',
-    headers: {
-      'x-api-key': apiKey,
-      'Content-Type': 'application/json'
-    }
-  });
-
-  if (!response.ok) {
-    throw new Error('Failed to cancel subscription');
-  }
-
-  return await response.json();
-}
-
-async function setDefaultPaymentMethod(paymentMethodId: string, apiUrl: string, apiKey: string) {
-  const response = await fetch(`${apiUrl}/billing/payment-methods/${paymentMethodId}/default`, {
-    method: 'POST',
-    headers: {
-      'x-api-key': apiKey,
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({})
-  });
-
-  if (!response.ok) {
-    throw new Error('Failed to set default payment method');
-  }
-
-  return await response.json();
-}
-
-async function deletePaymentMethod(paymentMethodId: string, apiUrl: string, apiKey: string) {
-  const response = await fetch(`${apiUrl}/billing/payment-methods/${paymentMethodId}`, {
-    method: 'DELETE',
-    headers: {
-      'x-api-key': apiKey,
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({})
-  });
-
-  if (!response.ok) {
-    throw new Error('Failed to delete payment method');
-  }
-
-  return await response.json();
-}
-
-async function createSubscription(userId: string, priceId: string, paymentMethodId: string, apiUrl: string, apiKey: string) {
-  try {
-    const response = await fetch(`${apiUrl}/billing/subscriptions`, {
-      method: 'POST',
-      headers: {
-        'x-api-key': apiKey,
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        user_id: userId,
-        priceId: priceId,
-        paymentMethodId: paymentMethodId
-      })
-    });
-
-    const data = await response.json();
-
-    // Check if the response indicates success
-    if (!response.ok || data.success === false) {
-      // Handle specific error types
-      let errorMessage = 'Failed to create subscription';
-      
-      if (data.error === 'MISSING_PARAMETERS') {
-        errorMessage = data.message || 'Missing required parameters. Please check your information and try again.';
-      } else if (data.message) {
-        errorMessage = data.message;
-      } else if (data.error) {
-        errorMessage = data.error;
-      }
-      
-      return {
-        success: false,
-        error: errorMessage,
-        errorType: data.error
-      };
-    }
-
-    return { success: true, data };
-  } catch (error) {
-    return {
-      success: false,
-      error: error instanceof Error ? error.message : 'An error occurred while creating subscription',
-      errorType: 'NETWORK_ERROR'
-    };
-  }
-}
-
-async function createSetupIntent(userId: string, apiUrl: string, apiKey: string) {
-  const response = await fetch(`${apiUrl}/billing/setup-intent`, {
-    method: 'POST',
-    headers: {
-      'x-api-key': apiKey,
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-      user_id: userId
-    })
-  });
-
-  if (!response.ok) {
-    throw new Error('Failed to create setup intent');
-  }
-
-  return await response.json();
-}
-
-export default function BillingClient({ customerData, pricingData, paymentMethods, apiUrl, apiKey }: BillingClientProps) {
-  const [isLoading, setIsLoading] = useState(false);
-  const [addPaymentModalOpen, setAddPaymentModalOpen] = useState(false);
-  const [subscribeModalOpen, setSubscribeModalOpen] = useState(false);
-  const [deletePaymentModalOpen, setDeletePaymentModalOpen] = useState(false);
-  const [selectedPlan, setSelectedPlan] = useState<any>(null);
-  const [selectedPaymentMethodId, setSelectedPaymentMethodId] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState('overview');
-  const router = useRouter();
-
-  const formatFeatureValue = (value: any) => {
-    // Handle string boolean values
-    if (value === 'true' || value === true) {
-      return '✓'
-    }
-    if (value === 'false' || value === false) {
-      return '✗'
-    }
-    // Handle numeric values (both string and number)
-    const numValue = typeof value === 'string' ? parseFloat(value) : value
-    if (!isNaN(numValue) && numValue >= 1000) {
-      return new Intl.NumberFormat('en-US').format(numValue)
-    }
-    return value
-  }
-  
-  const currentSubscription = customerData?.subscriptions?.[0];
-  const currentPlanItem = currentSubscription?.items?.[0];
-  const usage = customerData?.usage;
-  const invoices = customerData?.invoices || [];
-  const entitlements = customerData?.entitlements || [];
-  
-  // Find the current plan details from pricing data
-  const currentPlan = pricingData?.products?.find((product: any) => 
-    product.prices?.some((price: any) => price.id === currentPlanItem?.price_id)
-  );
-  const currentPrice = currentPlan?.prices?.find((price: any) => price.id === currentPlanItem?.price_id);
-  
-  const formatDate = (date: string | number) => {
-    const dateObj = typeof date === 'string' ? new Date(date) : new Date(date * 1000);
-    return dateObj.toLocaleDateString('en-US', { 
-      month: 'long', 
-      day: 'numeric', 
-      year: 'numeric' 
-    });
-  };
-  
-  const formatCurrency = (amount: number) => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'usd',
-    }).format(amount / 100);
-  };
-  
-  const handleCancelSubscription = async () => {
-    if (!currentSubscription?.id) return;
-    
-    if (!confirm('Are you sure you want to cancel your subscription? You will continue to have access until the end of your billing period.')) {
-      return;
-    }
-    
-    setIsLoading(true);
-    try {
-      await cancelSubscription(currentSubscription.id, apiUrl, apiKey);
-      router.refresh();
-    } catch (error) {
-      console.error('Failed to cancel subscription:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  
-  const handleSetDefaultPayment = async (paymentMethodId: string) => {
-    setIsLoading(true);
-    try {
-      await setDefaultPaymentMethod(paymentMethodId, apiUrl, apiKey);
-      router.refresh();
-    } catch (error) {
-      console.error('Failed to set default payment method:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  
-  const handleDeletePayment = (paymentMethodId: string) => {
-    setSelectedPaymentMethodId(paymentMethodId);
-    setDeletePaymentModalOpen(true);
-  };
-
-  const confirmDeletePayment = async () => {
-    if (!selectedPaymentMethodId) return;
-
-    try {
-      setIsLoading(true);
-      await deletePaymentMethod(selectedPaymentMethodId, apiUrl, apiKey);
-      router.refresh();
-    } catch (error) {
-      console.error('Error deleting payment method:', error);
-    } finally {
-      setIsLoading(false);
-      setDeletePaymentModalOpen(false);
-      setSelectedPaymentMethodId(null);
-    }
-  };
-  
-  const handlePaymentMethodAdded = () => {
-    setAddPaymentModalOpen(false);
-    router.refresh();
-  };
-  
-  const handleSubscribeClick = (plan: any) => {
-    const price = plan.prices?.[0];
-    const isFree = price && parseFloat(price.unit_amount) === 0;
-    
-    if (!isFree && (!paymentMethods?.paymentMethods || paymentMethods.paymentMethods.length === 0)) {
-      setActiveTab('overview');
-      setAddPaymentModalOpen(true);
-      return;
-    }
-    
-    setSelectedPlan(plan);
-    setSubscribeModalOpen(true);
-  };
-  
-  const handleSubscriptionCreated = () => {
-    setSubscribeModalOpen(false);
-    setSelectedPlan(null);
-    router.refresh();
-    setActiveTab('overview');
-  };
-
-  const handleCreateSubscription = async (userId: string, priceId: string, paymentMethodId: string) => {
-    return await createSubscription(userId, priceId, paymentMethodId, apiUrl, apiKey);
-  };
-
-  const handleCreateSetupIntent = async (userId: string) => {
-    return await createSetupIntent(userId, apiUrl, apiKey);
-  };
-
-  return (
-    <>
-    <div className="space-y-6">
-      <div>
-        <h3 className="text-lg font-medium">Billing</h3>
-        <p className="text-sm text-muted-foreground">
-          Manage your subscription and billing information.
-        </p>
-      </div>
-      
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
-        <TabsList>
-          <TabsTrigger value="overview">Overview</TabsTrigger>
-          <TabsTrigger value="usage">Usage</TabsTrigger>
-          <TabsTrigger value="plans">Plans</TabsTrigger>
-          <TabsTrigger value="billing-history">Billing History</TabsTrigger>
-        </TabsList>
-        
-        <TabsContent value="overview" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Current Plan</CardTitle>
-              <CardDescription>
-                {currentPlan ? `You are currently on the ${currentPlan.name}` : 'No active subscription'}
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              {currentSubscription ? (
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-2xl font-bold">
-                      {currentPrice ? formatCurrency(parseFloat(currentPrice.unit_amount) * 100) : 'Active'}/month
-                    </p>
-                    <p className="text-sm text-muted-foreground">
-                      Next billing date: {formatDate(currentSubscription.current_period_end)}
-                    </p>
-                    {currentSubscription.cancel_at_period_end && (
-                      <p className="text-sm text-destructive mt-2">
-                        <AlertCircle className="inline h-4 w-4 mr-1" />
-                        Subscription will cancel at the end of the billing period
-                      </p>
-                    )}
-                  </div>
-                  <div className="space-x-2">
-                    <Button variant="outline" onClick={() => setActiveTab('plans')}>
-                      Change Plan
-                    </Button>
-                    {!currentSubscription.cancel_at_period_end && (
-                      <Button 
-                        variant="outline" 
-                        onClick={handleCancelSubscription}
-                        disabled={isLoading}
-                      >
-                        {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                        Cancel Subscription
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              ) : (
-                <div className="text-center py-6">
-                  <p className="text-muted-foreground mb-4">You don't have an active subscription</p>
-                  <Button onClick={() => setActiveTab('plans')}>
-                    Choose a Plan
-                  </Button>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-          
-          <Card>
-            <CardHeader>
-              <CardTitle>Payment Methods</CardTitle>
-              <CardDescription>Manage your payment information</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              {paymentMethods?.paymentMethods?.length > 0 ? (
-                <div className="space-y-3">
-                  {paymentMethods.paymentMethods.map((method: any) => (
-                    <div key={method.id} className="flex items-center justify-between p-4 border border-border rounded-lg">
-                      <div className="flex items-center gap-4">
-                        <CardBrandIcon brand={method.brand} className="w-16 h-10" />
-                        <div className="flex-1">
-                          <p className="font-medium">•••• •••• •••• {method.last4}</p>
-                          <p className="text-sm text-muted-foreground">
-                            Expires {method.exp_month}/{method.exp_year}
-                          </p>
-                        </div>
-                        {method.is_default && (
-                          <Badge variant="secondary">Default</Badge>
-                        )}
-                      </div>
-                      <div className="flex items-center gap-2 ml-4">
-                        {!method.is_default && (
-                          <Button 
-                            variant="outline" 
-                            size="sm"
-                            onClick={() => handleSetDefaultPayment(method.stripe_payment_method_id)}
-                            disabled={isLoading}
-                          >
-                            Set as Default
-                          </Button>
-                        )}
-                        <Button 
-                          variant="outline" 
-                          size="sm"
-                          onClick={() => handleDeletePayment(method.stripe_payment_method_id)}
-                          disabled={isLoading}
-                        >
-                          Remove
-                        </Button>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <div className="text-center py-6">
-                  <p className="text-muted-foreground mb-4">No payment methods on file</p>
-                </div>
-              )}
-            </CardContent>
-            <CardFooter>
-              <Button className="w-full" onClick={() => setAddPaymentModalOpen(true)}>
-                <CreditCard className="mr-2 h-4 w-4" />
-                Add Payment Method
-              </Button>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-        
-        <TabsContent value="usage" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Current Usage</CardTitle>
-              <CardDescription>Your resource usage for the current billing period</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              {usage?.data?.filter((item: any) => typeof item.limit === 'number' && item.limit > 0).map((item: any) => {
-                const percentage = typeof item.limit === 'number' 
-                  ? Math.min((item.current_usage / item.limit) * 100, 100)
-                  : 0;
-                
-                const getUsageColor = (percent: number) => {
-                  if (percent >= 90) return 'text-red-600 dark:text-red-400';
-                  if (percent >= 75) return 'text-orange-600 dark:text-orange-400';
-                  if (percent >= 50) return 'text-yellow-600 dark:text-yellow-400';
-                  return 'text-green-600 dark:text-green-400';
-                };
-                
-                const getProgressColor = (percent: number) => {
-                  if (percent >= 90) return 'bg-red-100 dark:bg-red-950';
-                  if (percent >= 75) return 'bg-orange-100 dark:bg-orange-950';
-                  if (percent >= 50) return 'bg-yellow-100 dark:bg-yellow-950';
-                  return 'bg-green-100 dark:bg-green-950';
-                };
-                
-                const getStatusIcon = (percent: number, withinLimit: boolean) => {
-                  if (!withinLimit || percent >= 90) {
-                    return <AlertCircle className="h-4 w-4 text-red-600 dark:text-red-400" />;
-                  }
-                  if (percent >= 75) {
-                    return <AlertTriangle className="h-4 w-4 text-orange-600 dark:text-orange-400" />;
-                  }
-                  if (percent >= 50) {
-                    return <Info className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />;
-                  }
-                  return <CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />;
-                };
-                
-                return (
-                  <div key={item.feature_key} className="space-y-3">
-                    <div className="flex items-center justify-between text-sm">
-                      <div className="flex items-center gap-2">
-                        {typeof item.limit === 'number' && getStatusIcon(percentage, item.within_limit)}
-                        <span>{item.feature_details.description}</span>
-                      </div>
-                      <span className={`font-medium ${typeof item.limit === 'number' ? getUsageColor(percentage) : ''}`}>
-                        {typeof item.limit === 'number' 
-                          ? `${item.current_usage.toLocaleString()} / ${item.limit.toLocaleString()}`
-                          : item.current_usage
-                        }
-                        {item.feature_details.units && ` ${item.feature_details.units}`}
-                      </span>
-                    </div>
-                    {typeof item.limit === 'number' && (
-                      <>
-                        <Progress value={percentage} className={`h-2 ${getProgressColor(percentage)} ${!item.within_limit ? '[&>div]:bg-red-500' : percentage >= 90 ? '[&>div]:bg-red-500' : percentage >= 75 ? '[&>div]:bg-orange-500' : percentage >= 50 ? '[&>div]:bg-yellow-500' : '[&>div]:bg-green-500'}`} />
-                        <p className={`text-xs ${item.within_limit ? percentage >= 90 ? 'text-red-600 dark:text-red-400' : percentage >= 75 ? 'text-orange-600 dark:text-orange-400' : 'text-muted-foreground' : 'text-red-600 dark:text-red-400 font-medium'}`}>
-                          {item.within_limit 
-                            ? `${Math.max(0, item.limit - item.current_usage).toLocaleString()} ${item.feature_details.units || ''} remaining`
-                            : `${(item.current_usage - item.limit).toLocaleString()} ${item.feature_details.units || ''} over limit`
-                          }
-                        </p>
-                      </>
-                    )}
-                  </div>
-                );
-              })}
-            </CardContent>
-            <CardFooter>
-              <p className="text-sm text-muted-foreground">
-                Usage resets on {currentSubscription ? formatDate(currentSubscription.current_period_end) : 'N/A'}. 
-                Need more resources? Consider upgrading your plan.
-              </p>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-        
-        <TabsContent value="plans" className="space-y-4">
-          <div className={`grid gap-4 ${pricingData?.products?.length === 3 ? 'md:grid-cols-3' : 'md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'}`}>
-            {pricingData?.products?.map((product: any) => {
-              const price = product.prices?.[0];
-              const features = product.features || [];
-              const isCurrentPlan = currentPlanItem?.price_id === price?.id;
-              
-              // Determine if this is an upgrade, downgrade, or switch to free
-              const getButtonText = () => {
-                if (isCurrentPlan) return "Current Plan";
-                
-                const targetPrice = parseFloat(price?.unit_amount || 0);
-                const currentPlanPrice = parseFloat(currentPrice?.unit_amount || 0);
-                
-                // If target is free plan
-                if (targetPrice === 0) {
-                  return currentPlanPrice > 0 ? "Switch to Free" : "Get Started";
-                }
-                
-                // If current plan is free
-                if (currentPlanPrice === 0) {
-                  return "Upgrade";
-                }
-                
-                // Compare prices for paid plans
-                return targetPrice > currentPlanPrice ? "Upgrade" : "Downgrade";
-              };
-              
-              return (
-                <Card key={product.id} className={`pricing-card relative overflow-hidden h-full flex flex-col ${isCurrentPlan ? "current border-primary shadow-md" : "border-muted"} ${product.metadata?.popular === 'true' && !isCurrentPlan ? "border-primary/50" : ""}`}>
-                  {product.metadata?.popular === 'true' && !isCurrentPlan && (
-                    <div className="absolute top-0 right-0 bg-primary text-primary-foreground text-xs font-medium px-3 py-1 rounded-bl-lg">
-                      POPULAR
-                    </div>
-                  )}
-                  <CardHeader className="text-center pb-4 pt-4">
-                    <CardTitle className="text-lg font-semibold">{product.name}</CardTitle>
-                    <CardDescription className="mt-1 text-sm">{product.description}</CardDescription>
-                  </CardHeader>
-                  <CardContent className="text-center pb-4 flex-1">
-                    <div className="mb-4">
-                      <div className="flex items-baseline justify-center">
-                        <span className="text-3xl font-bold tracking-tight">
-                          {parseFloat(price?.unit_amount) === 0 ? 'Free' : `$${parseFloat(price?.unit_amount).toFixed(2).replace(/\.00$/, '')}`}
-                        </span>
-                        {parseFloat(price?.unit_amount) > 0 && (
-                          <span className="ml-1 text-sm text-muted-foreground">/month</span>
-                        )}
-                      </div>
-                      {isCurrentPlan ? (
-                        <Badge variant="secondary" className="mt-2">Current Plan</Badge>
-                      ) : (
-                        <div className="mt-2 h-6"></div>
-                      )}
-                    </div>
-                    <div className="space-y-3 flex-1 flex flex-col justify-between min-h-[300px]">
-                      {features.map((feature: any) => (
-                        <div key={feature.id} className="border-t pt-3 first:border-t-0 first:pt-0 flex-1 flex flex-col justify-center">
-                          <div className="text-lg font-semibold text-foreground">
-                            {formatFeatureValue(feature.value)} <span className="text-sm text-gray-500 font-normal">{feature.units}</span>
-                          </div>
-                          <TooltipProvider>
-                            <Tooltip>
-                              <TooltipTrigger asChild>
-                                <div className="text-xs text-gray-500 mt-1 cursor-help">
-                                  {feature.name || feature.description}
-                                </div>
-                              </TooltipTrigger>
-                              <TooltipContent>
-                                <p>{feature.description}</p>
-                              </TooltipContent>
-                            </Tooltip>
-                          </TooltipProvider>
-                        </div>
-                      ))}
-                    </div>
-                  </CardContent>
-                  <CardFooter className="pt-3">
-                    <Button 
-                      className="w-full" 
-                      variant={isCurrentPlan ? "outline" : product.metadata?.popular === 'true' ? "default" : "secondary"}
-                      size="lg"
-                      disabled={isCurrentPlan}
-                      onClick={() => !isCurrentPlan && handleSubscribeClick(product)}
-                    >
-                      {getButtonText()}
-                    </Button>
-                  </CardFooter>
-                </Card>
-              );
-            })}
-          </div>
-        </TabsContent>
-        
-        <TabsContent value="billing-history" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Billing History</CardTitle>
-              <CardDescription>Download your past invoices</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                {invoices.length > 0 ? (
-                  invoices.map((invoice: any) => (
-                    <div key={invoice.id} className="flex items-center justify-between p-4 border border-border rounded-lg">
-                      <div className="flex items-center space-x-4">
-                        <FileText className="h-8 w-8 text-muted-foreground" />
-                        <div>
-                          <p className="font-medium">Invoice #{invoice.id.slice(-8).toUpperCase()}</p>
-                          <p className="text-sm text-muted-foreground">{formatDate(invoice.created)}</p>
-                        </div>
-                      </div>
-                      <div className="flex items-center space-x-4">
-                        <div className="text-right">
-                          <p className="font-medium">{formatCurrency(invoice.amount_paid)}</p>
-                          <p className="text-sm text-muted-foreground capitalize">{invoice.status}</p>
-                        </div>
-                        <Button 
-                          variant="outline" 
-                          size="sm"
-                          onClick={() => window.open(invoice.invoice_pdf || invoice.hosted_invoice_url, '_blank')}
-                        >
-                          <FileText className="h-4 w-4 mr-2" />
-                          Download
-                        </Button>
-                      </div>
-                    </div>
-                  ))
-                ) : (
-                  <div className="text-center py-12">
-                    <FileText className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-                    <p className="text-muted-foreground">No invoices yet</p>
-                  </div>
-                )}
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </div>
-    
-    <Dialog open={addPaymentModalOpen} onOpenChange={setAddPaymentModalOpen}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Add Payment Method</DialogTitle>
-          <DialogDescription>
-            Add a new payment method to your account. Your card information is securely processed by Stripe.
-          </DialogDescription>
-        </DialogHeader>
-        
-        <Elements stripe={stripePromise}>
-          <PaymentMethodForm
-            userId={String(customerData?.id || '')}
-            onSuccess={handlePaymentMethodAdded}
-            onCancel={() => setAddPaymentModalOpen(false)}
-            createSetupIntent={handleCreateSetupIntent}
-          />
-        </Elements>
-      </DialogContent>
-    </Dialog>
-    
-    <SubscriptionConfirmModal
-      isOpen={subscribeModalOpen}
-      onClose={() => setSubscribeModalOpen(false)}
-      plan={selectedPlan}
-      currentPlan={currentPlan}
-      paymentMethods={paymentMethods?.paymentMethods || []}
-      userId={String(customerData?.id || '')}
-      onSuccess={handleSubscriptionCreated}
-      createSubscription={handleCreateSubscription}
-    />
-
-    <Dialog open={deletePaymentModalOpen} onOpenChange={setDeletePaymentModalOpen}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete Payment Method</DialogTitle>
-          <DialogDescription>
-            Are you sure you want to delete this payment method? This action cannot be undone.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex justify-end space-x-2 pt-4">
-          <Button variant="outline" onClick={() => setDeletePaymentModalOpen(false)}>
-            Cancel
-          </Button>
-          <Button variant="destructive" onClick={confirmDeletePayment} disabled={isLoading}>
-            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            Delete
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-    </>
-  );
-}