@omnikit-js/ui 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnikit-js/ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "A SaaS billing component for Next.js with Stripe integration",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -35,9 +35,9 @@
     "access": "public"
   },
   "peerDependencies": {
+    "next": "^14.0.0 || ^15.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "next": "^14.0.0 || ^15.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.10",
@@ -52,6 +52,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "@stripe/react-stripe-js": "^3.7.0",
     "@stripe/stripe-js": "^7.4.0",
     "class-variance-authority": "^0.7.1",
@@ -70,9 +71,9 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@types/node": "^20",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/node": "^20",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "react": "^18.3.1",

package/src/components/BillingClient.tsx

@@ -10,7 +10,8 @@ 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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import PaymentMethodForm from './PaymentMethodForm';
 import SubscriptionConfirmModal from './SubscriptionConfirmModal';
 import { CardBrandIcon } from './ui/card-brand-icon';
@@ -84,21 +85,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'
     };
   }
 }
@@ -129,6 +148,16 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
   const [selectedPlan, setSelectedPlan] = useState<any>(null);
   const [activeTab, setActiveTab] = useState('overview');
   const router = useRouter();
+
+  const formatFeatureValue = (value: any) => {
+    if (typeof value === 'boolean') {
+      return value ? '✓' : '✗'
+    }
+    if (typeof value === 'number' && value >= 1000) {
+      return new Intl.NumberFormat('en-US').format(value)
+    }
+    return value
+  }
   
   const currentSubscription = customerData?.subscriptions?.[0];
   const currentPlanItem = currentSubscription?.items?.[0];
@@ -380,11 +409,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 +453,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 +476,89 @@ 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-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={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-4 pt-4">
+                    <CardTitle className="text-lg font-semibold">{product.name}</CardTitle>
+                    <CardDescription className="mt-1 text-sm">{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-4">
+                    <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(0)}`}
+                        </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>
-                    <ul className="space-y-2">
+                    <div className="space-y-2">
                       {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-2">
+                          <div className="text-lg font-semibold text-foreground">
+                            {formatFeatureValue(feature.value)} {feature.units}
+                          </div>
+                          <TooltipProvider>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <div className="text-xs text-muted-foreground mt-1 cursor-help">
+                                  {feature.name || feature.description}
+                                </div>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p>{feature.description}</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                        </div>
                       ))}
-                    </ul>
+                    </div>
                   </CardContent>
-                  <CardFooter>
+                  <CardFooter className="pt-3">
                     <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>

package/src/components/SubscriptionConfirmModal.tsx

@@ -6,6 +6,7 @@ import { Button } from './ui/button';
 import { Card } from './ui/card';
 import { Check, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
 import { Alert, AlertDescription } from './ui/alert';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
 import { RadioGroup, RadioGroupItem } from './ui/radio-group';
 import { Label } from './ui/label';
 import { CardBrandIcon } from './ui/card-brand-icon';
@@ -45,6 +46,16 @@ export default function SubscriptionConfirmModal({
     }).format(amount / 100);
   };
 
+  const formatFeatureValue = (value: any) => {
+    if (typeof value === 'boolean') {
+      return value ? '✓' : '✗'
+    }
+    if (typeof value === 'number' && value >= 1000) {
+      return new Intl.NumberFormat('en-US').format(value)
+    }
+    return value
+  };
+
   const handleConfirm = async () => {
     setIsSubscribing(true);
     setError(null);
@@ -120,7 +131,18 @@ export default function SubscriptionConfirmModal({
               {plan.features?.map((feature: any) => (
                 <li key={feature.id} className="flex items-start text-sm">
                   <Check className="h-4 w-4 mr-2 text-primary mt-0.5 flex-shrink-0" />
-                  <span>{feature.value} {feature.units} - {feature.description}</span>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span className="cursor-help">
+                          {formatFeatureValue(feature.value)} {feature.units} - {feature.name || feature.description}
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>{feature.description}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 </li>
               ))}
             </ul>

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "../../lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }