@omnikit-js/ui 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnikit-js/ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A SaaS billing component for Next.js with Stripe integration",
   "main": "src/index.ts",
   "module": "src/index.ts",

package/src/components/BillingClient.tsx

@@ -10,7 +10,7 @@ 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, Loader2 } from "lucide-react";
+import { Check, CreditCard, FileText, AlertCircle, AlertTriangle, CheckCircle, Info, Loader2 } from "lucide-react";
 import PaymentMethodForm from './PaymentMethodForm';
 import SubscriptionConfirmModal from './SubscriptionConfirmModal';
 import { CardBrandIcon } from './ui/card-brand-icon';
@@ -84,21 +84,39 @@ async function createSubscription(userId: string, priceId: string, paymentMethod
       },
       body: JSON.stringify({
         user_id: userId,
-        price_id: priceId,
-        payment_method_id: paymentMethodId
+        priceId: priceId,
+        paymentMethodId: paymentMethodId
       })
     });
 
-    if (!response.ok) {
-      const errorData = await response.json();
-      throw new Error(errorData.error || 'Failed to create subscription');
+    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 };
+    return { success: true, data };
   } catch (error) {
     return {
       success: false,
-      error: error instanceof Error ? error.message : 'An error occurred'
+      error: error instanceof Error ? error.message : 'An error occurred while creating subscription',
+      errorType: 'NETWORK_ERROR'
     };
   }
 }
@@ -380,11 +398,41 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
                   ? 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">
-                      <span>{item.feature_details.description}</span>
-                      <span className="font-medium">
+                      <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
@@ -394,8 +442,8 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
                     </div>
                     {typeof item.limit === 'number' && (
                       <>
-                        <Progress value={percentage} className={`h-2 ${!item.within_limit ? 'bg-destructive' : ''}`} />
-                        <p className="text-xs text-muted-foreground">
+                        <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`
@@ -417,48 +465,80 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
         </TabsContent>
         
         <TabsContent value="plans" className="space-y-4">
-          <div className="grid gap-4 md:grid-cols-3">
+          <div className="grid gap-6 md:grid-cols-3">
             {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={isCurrentPlan ? "border-primary" : ""}>
-                  <CardHeader>
-                    <div className="flex items-center justify-between">
-                      <CardTitle>{product.name}</CardTitle>
-                      {isCurrentPlan && <Badge>Current</Badge>}
-                      {product.metadata?.popular === 'true' && !isCurrentPlan && (
-                        <Badge variant="secondary">Popular</Badge>
-                      )}
+                <Card key={product.id} className={`relative overflow-hidden ${isCurrentPlan ? "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>
-                    <CardDescription>{product.description}</CardDescription>
+                  )}
+                  <CardHeader className="text-center pb-8 pt-6">
+                    <CardTitle className="text-xl font-semibold">{product.name}</CardTitle>
+                    <CardDescription className="mt-2">{product.description}</CardDescription>
                   </CardHeader>
-                  <CardContent>
-                    <div className="text-3xl font-bold mb-4">
-                      {parseFloat(price?.unit_amount) === 0 ? 'Free' : formatCurrency(parseFloat(price?.unit_amount) * 100)}
-                      {parseFloat(price?.unit_amount) > 0 && <span className="text-sm font-normal">/month</span>}
+                  <CardContent className="text-center pb-8">
+                    <div className="mb-8">
+                      <div className="flex items-baseline justify-center">
+                        <span className="text-5xl font-bold tracking-tight">
+                          {parseFloat(price?.unit_amount) === 0 ? 'Free' : `$${parseFloat(price?.unit_amount).toFixed(0)}`}
+                        </span>
+                        {parseFloat(price?.unit_amount) > 0 && (
+                          <span className="ml-1 text-lg text-muted-foreground">/month</span>
+                        )}
+                      </div>
+                      {isCurrentPlan && (
+                        <Badge variant="secondary" className="mt-2">Current Plan</Badge>
+                      )}
                     </div>
-                    <ul className="space-y-2">
+                    <div className="space-y-4">
                       {features.map((feature: any) => (
-                        <li key={feature.id} className="flex items-center">
-                          <Check className="h-4 w-4 mr-2 text-primary" />
-                          <span className="text-sm">
-                            {feature.value} {feature.units} - {feature.description}
-                          </span>
-                        </li>
+                        <div key={feature.id} className="border-t pt-4">
+                          <div className="text-2xl font-semibold text-foreground">
+                            {feature.value} {feature.units}
+                          </div>
+                          <div className="text-sm text-muted-foreground mt-1">
+                            {feature.description}
+                          </div>
+                        </div>
                       ))}
-                    </ul>
+                    </div>
                   </CardContent>
-                  <CardFooter>
+                  <CardFooter className="pt-4">
                     <Button 
                       className="w-full" 
-                      variant={isCurrentPlan ? "outline" : "default"}
+                      variant={isCurrentPlan ? "outline" : product.metadata?.popular === 'true' ? "default" : "secondary"}
+                      size="lg"
                       disabled={isCurrentPlan}
                       onClick={() => !isCurrentPlan && handleSubscribeClick(product)}
                     >
-                      {isCurrentPlan ? "Current Plan" : parseFloat(price?.unit_amount) === 0 ? "Get Started" : "Upgrade"}
+                      {getButtonText()}
                     </Button>
                   </CardFooter>
                 </Card>