@omnikit-js/ui 0.3.1 → 0.3.3

package/README.md

@@ -19,6 +19,31 @@ A comprehensive SaaS billing component for Next.js applications with Stripe inte
 npm install @omnikit-js/ui
 ```
 
+**Important**: The component requires Tailwind CSS to be configured in your project. 
+
+### Setup Tailwind CSS
+
+1. Install Tailwind CSS if you haven't already:
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+2. Import the component's CSS in your main CSS file or `layout.js`:
+```css
+@import '@omnikit-js/ui/styles.css';
+```
+
+Or in your `app/globals.css`:
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Import the component styles */
+@import '@omnikit-js/ui/styles.css';
+```
+
 ## Prerequisites
 
 1. A Stripe account with API keys

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnikit-js/ui",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "A SaaS billing component for Next.js with Stripe integration",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -13,7 +13,8 @@
     }
   },
   "files": [
-    "src"
+    "src",
+    "styles.css"
   ],
   "scripts": {
     "build": "rollup -c",
@@ -35,9 +36,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 +53,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 +72,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

@@ -11,6 +11,7 @@ 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';
@@ -48,7 +49,8 @@ async function setDefaultPaymentMethod(paymentMethodId: string, apiUrl: string,
     headers: {
       'x-api-key': apiKey,
       'Content-Type': 'application/json'
-    }
+    },
+    body: JSON.stringify({})
   });
 
   if (!response.ok) {
@@ -64,7 +66,8 @@ async function deletePaymentMethod(paymentMethodId: string, apiUrl: string, apiK
     headers: {
       'x-api-key': apiKey,
       'Content-Type': 'application/json'
-    }
+    },
+    body: JSON.stringify({})
   });
 
   if (!response.ok) {
@@ -144,9 +147,27 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
   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];
@@ -206,19 +227,24 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
     }
   };
   
-  const handleDeletePayment = async (paymentMethodId: string) => {
-    if (!confirm('Are you sure you want to delete this payment method?')) {
-      return;
-    }
-    
-    setIsLoading(true);
+  const handleDeletePayment = (paymentMethodId: string) => {
+    setSelectedPaymentMethodId(paymentMethodId);
+    setDeletePaymentModalOpen(true);
+  };
+
+  const confirmDeletePayment = async () => {
+    if (!selectedPaymentMethodId) return;
+
     try {
-      await deletePaymentMethod(paymentMethodId, apiUrl, apiKey);
+      setIsLoading(true);
+      await deletePaymentMethod(selectedPaymentMethodId, apiUrl, apiKey);
       router.refresh();
     } catch (error) {
-      console.error('Failed to delete payment method:', error);
+      console.error('Error deleting payment method:', error);
     } finally {
       setIsLoading(false);
+      setDeletePaymentModalOpen(false);
+      setSelectedPaymentMethodId(null);
     }
   };
   
@@ -393,7 +419,7 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
               <CardDescription>Your resource usage for the current billing period</CardDescription>
             </CardHeader>
             <CardContent className="space-y-6">
-              {usage?.data?.map((item: any) => {
+              {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;
@@ -465,7 +491,7 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
         </TabsContent>
         
         <TabsContent value="plans" className="space-y-4">
-          <div className="grid gap-6 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 || [];
@@ -493,44 +519,55 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
               };
               
               return (
-                <Card key={product.id} className={`relative overflow-hidden ${isCurrentPlan ? "border-primary shadow-md" : "border-muted"} ${product.metadata?.popular === 'true' && !isCurrentPlan ? "border-primary/50" : ""}`}>
+                <Card key={product.id} className={`relative overflow-hidden h-full flex flex-col ${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>
                   )}
-                  <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 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-8">
-                    <div className="mb-8">
+                  <CardContent className="text-center pb-4 flex-1">
+                    <div className="mb-4">
                       <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 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-lg text-muted-foreground">/month</span>
+                          <span className="ml-1 text-sm text-muted-foreground">/month</span>
                         )}
                       </div>
-                      {isCurrentPlan && (
+                      {isCurrentPlan ? (
                         <Badge variant="secondary" className="mt-2">Current Plan</Badge>
+                      ) : (
+                        <div className="mt-2 h-6"></div>
                       )}
                     </div>
-                    <div className="space-y-4">
+                    <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-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 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-4">
+                  <CardFooter className="pt-3">
                     <Button 
                       className="w-full" 
                       variant={isCurrentPlan ? "outline" : product.metadata?.popular === 'true' ? "default" : "secondary"}
@@ -624,6 +661,26 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
       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>
     </>
   );
 }

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,22 @@ export default function SubscriptionConfirmModal({
     }).format(amount / 100);
   };
 
+  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 handleConfirm = async () => {
     setIsSubscribing(true);
     setError(null);
@@ -120,7 +137,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)} <span className="text-sm text-muted-foreground font-normal">{feature.units}</span> - {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 }

package/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;