@omnikit-js/ui 0.2.0

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@omnikit-js/ui",
+  "version": "0.2.0",
+  "description": "A SaaS billing component for Next.js with Stripe integration",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "nextjs",
+    "billing",
+    "saas",
+    "stripe",
+    "component"
+  ],
+  "author": "OmniKit",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "next": "^14.0.0 || ^15.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@stripe/react-stripe-js": "^3.7.0",
+    "@stripe/stripe-js": "^7.4.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.525.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@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",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.17.2",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5"
+  }
+}

package/src/components/BillingClient.tsx

@@ -0,0 +1,549 @@
+'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, Loader2 } from "lucide-react";
+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'
+    }
+  });
+
+  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'
+    }
+  });
+
+  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,
+        price_id: priceId,
+        payment_method_id: paymentMethodId
+      })
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.error || 'Failed to create subscription');
+    }
+
+    return { success: true };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'An error occurred'
+    };
+  }
+}
+
+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 [selectedPlan, setSelectedPlan] = useState<any>(null);
+  const [activeTab, setActiveTab] = useState('overview');
+  const router = useRouter();
+  
+  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 = async (paymentMethodId: string) => {
+    if (!confirm('Are you sure you want to delete this payment method?')) {
+      return;
+    }
+    
+    setIsLoading(true);
+    try {
+      await deletePaymentMethod(paymentMethodId, apiUrl, apiKey);
+      router.refresh();
+    } catch (error) {
+      console.error('Failed to delete payment method:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  
+  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 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?.map((item: any) => {
+                const percentage = typeof item.limit === 'number' 
+                  ? Math.min((item.current_usage / item.limit) * 100, 100)
+                  : 0;
+                
+                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">
+                        {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 ${!item.within_limit ? 'bg-destructive' : ''}`} />
+                        <p className="text-xs text-muted-foreground">
+                          {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 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;
+              
+              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>
+                      )}
+                    </div>
+                    <CardDescription>{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>}
+                    </div>
+                    <ul 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>
+                      ))}
+                    </ul>
+                  </CardContent>
+                  <CardFooter>
+                    <Button 
+                      className="w-full" 
+                      variant={isCurrentPlan ? "outline" : "default"}
+                      disabled={isCurrentPlan}
+                      onClick={() => !isCurrentPlan && handleSubscribeClick(product)}
+                    >
+                      {isCurrentPlan ? "Current Plan" : parseFloat(price?.unit_amount) === 0 ? "Get Started" : "Upgrade"}
+                    </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 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}
+    />
+    </>
+  );
+}