@omnikit-js/ui 0.3.2 → 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.2",
+  "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",

package/src/components/BillingClient.tsx

@@ -49,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) {
@@ -65,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) {
@@ -145,16 +147,24 @@ 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) => {
-    if (typeof value === 'boolean') {
-      return value ? '✓' : '✗'
+    // Handle string boolean values
+    if (value === 'true' || value === true) {
+      return '✓'
+    }
+    if (value === 'false' || value === false) {
+      return '✗'
     }
-    if (typeof value === 'number' && value >= 1000) {
-      return new Intl.NumberFormat('en-US').format(value)
+    // 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
   }
@@ -217,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);
     }
   };
   
@@ -404,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;
@@ -504,7 +519,7 @@ 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
@@ -514,30 +529,32 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
                     <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">
+                  <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(0)}`}
+                          {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 && (
+                      {isCurrentPlan ? (
                         <Badge variant="secondary" className="mt-2">Current Plan</Badge>
+                      ) : (
+                        <div className="mt-2 h-6"></div>
                       )}
                     </div>
-                    <div className="space-y-2">
+                    <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-2">
+                        <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)} {feature.units}
+                            {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-muted-foreground mt-1 cursor-help">
+                                <div className="text-xs text-gray-500 mt-1 cursor-help">
                                   {feature.name || feature.description}
                                 </div>
                               </TooltipTrigger>
@@ -644,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

@@ -47,11 +47,17 @@ export default function SubscriptionConfirmModal({
   };
 
   const formatFeatureValue = (value: any) => {
-    if (typeof value === 'boolean') {
-      return value ? '✓' : '✗'
+    // Handle string boolean values
+    if (value === 'true' || value === true) {
+      return '✓'
     }
-    if (typeof value === 'number' && value >= 1000) {
-      return new Intl.NumberFormat('en-US').format(value)
+    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
   };
@@ -135,7 +141,7 @@ export default function SubscriptionConfirmModal({
                     <Tooltip>
                       <TooltipTrigger asChild>
                         <span className="cursor-help">
-                          {formatFeatureValue(feature.value)} {feature.units} - {feature.name || feature.description}
+                          {formatFeatureValue(feature.value)} <span className="text-sm text-muted-foreground font-normal">{feature.units}</span> - {feature.name || feature.description}
                         </span>
                       </TooltipTrigger>
                       <TooltipContent>

package/styles.css

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