@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

package/dist/templates/web/ui-auth-payments/template/src/app/billing/page.tsx

@@ -1,212 +1,83 @@
 'use client';
 
 import React from 'react';
-import { usePayments } from '@digilogiclabs/app-sdk';
-import { formatCurrency, formatDate } from '@/lib/utils';
-import { Button, Card } from '@digilogiclabs/saas-factory-ui';
+import { Card, CardContent, CardHeader, CardTitle } from '@digilogiclabs/saas-factory-ui';
+import { CreditCard, ExternalLink, Receipt } from 'lucide-react';
+import Link from 'next/link';
 
 export default function BillingPage() {
-  const { loading } = usePayments();
-
-  const handleSubscriptionChange = () => {
-    console.log('Subscription change requested');
-    // Handle subscription changes (upgrade, downgrade, cancel, resume)
-  };
-
-  const handlePaymentMethodUpdate = () => {
-    console.log('Payment method update requested');
-    // Handle payment method updates (add, edit, delete, set default)
-  };
-
-  const handleInvoiceDownload = (invoiceId: string) => {
-    console.log('Download invoice:', invoiceId);
-    // Handle invoice download
-  };
-
-  // Mock current subscription data - in real app this would come from your backend
-  const currentSubscription = {
-    plan: 'Pro Plan',
-    price: 1999,
-    interval: 'month',
-    status: 'active',
-    nextBilling: new Date(Date.now() + 15 * 24 * 60 * 60 * 1000)
-  };
-
-  // Mock payment methods - in real app this would come from your backend
-  const paymentMethods = [
-    {
-      id: 'pm_123',
-      type: 'card',
-      last4: '4242',
-      brand: 'visa',
-      expiryMonth: 12,
-      expiryYear: 2025,
-      isDefault: true
-    },
-    {
-      id: 'pm_456',
-      type: 'card',
-      last4: '0005',
-      brand: 'mastercard',
-      expiryMonth: 8,
-      expiryYear: 2026,
-      isDefault: false
-    }
-  ];
-
-  // Mock billing history - in real app this would come from your backend
-  const invoices = [
-    {
-      id: 'inv_123',
-      amount: 1999,
-      currency: 'usd',
-      status: 'paid',
-      date: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
-      description: 'Pro Plan - Monthly'
-    },
-    {
-      id: 'inv_456',
-      amount: 1999,
-      currency: 'usd',
-      status: 'paid',
-      date: new Date(Date.now() - 60 * 24 * 60 * 60 * 1000),
-      description: 'Pro Plan - Monthly'
-    },
-    {
-      id: 'inv_789',
-      amount: 999,
-      currency: 'usd',
-      status: 'paid',
-      date: new Date(Date.now() - 90 * 24 * 60 * 60 * 1000),
-      description: 'Basic Plan - Monthly'
+  const handleManageBilling = async () => {
+    const res = await fetch('/api/billing/portal', { method: 'POST' });
+    const data = await res.json();
+    if (data.url) {
+      window.location.href = data.url;
     }
-  ];
+  };
 
   return (
-    <div className="min-h-screen bg-gray-100 py-8">
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="mb-8">
-          <h1 className="text-4xl font-bold text-gray-900 mb-2">Billing & Subscription</h1>
-          <p className="text-xl text-gray-600">Manage your subscription and billing information</p>
-        </div>
-        
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
-          {/* Current Subscription */}
-          <Card className="p-6">
-            <h2 className="text-2xl font-bold mb-6">Current Subscription</h2>
-            <div className="space-y-4">
+    <div className="mx-auto max-w-4xl px-4 py-8">
+      <h1 className="text-3xl font-bold text-foreground mb-2">Billing</h1>
+      <p className="text-muted-foreground mb-8">Manage your subscription and payment methods.</p>
+
+      <div className="grid gap-6 md:grid-cols-2 mb-8">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">Current Plan</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center justify-between">
               <div>
-                <h3 className="font-semibold">{currentSubscription.plan}</h3>
-                <p className="text-2xl font-bold">
-                  {formatCurrency(currentSubscription.price)}
-                  <span className="text-sm font-normal">/{currentSubscription.interval}</span>
-                </p>
+                <p className="text-2xl font-bold text-foreground">Free</p>
+                <p className="text-sm text-muted-foreground">Basic features included</p>
               </div>
-              <div>
-                <p className="text-sm text-gray-600">Status</p>
-                <span className="inline-block px-2 py-1 bg-green-100 text-green-800 rounded text-sm">
-                  {currentSubscription.status}
-                </span>
+              <Link href="/checkout" className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
+                Upgrade
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">Payment Method</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
+                <CreditCard className="h-5 w-5 text-muted-foreground" />
               </div>
               <div>
-                <p className="text-sm text-gray-600">Next billing date</p>
-                <p>{formatDate(currentSubscription.nextBilling)}</p>
+                <p className="text-sm font-medium text-foreground">No payment method</p>
+                <p className="text-xs text-muted-foreground">Add one to upgrade your plan</p>
               </div>
-              <Button 
-                onClick={handleSubscriptionChange}
-                disabled={loading}
-                variant="outline"
-                className="w-full"
-              >
-                Change Plan
-              </Button>
             </div>
-          </Card>
+          </CardContent>
+        </Card>
+      </div>
 
-          {/* Payment Methods */}
-          <Card className="p-6">
-            <h2 className="text-2xl font-bold mb-6">Payment Methods</h2>
-            <div className="space-y-4">
-              {paymentMethods.map((method) => (
-                <div key={method.id} className="flex items-center justify-between p-3 border rounded-lg">
-                  <div className="flex items-center">
-                    <div className="w-8 h-8 bg-blue-100 rounded flex items-center justify-center mr-3">
-                      💳
-                    </div>
-                    <div>
-                      <p className="font-medium">
-                        {method.brand.toUpperCase()} •••• {method.last4}
-                      </p>
-                      <p className="text-sm text-gray-600">
-                        Expires {method.expiryMonth}/{method.expiryYear}
-                        {method.isDefault && <span className="ml-2 text-blue-600">(Default)</span>}
-                      </p>
-                    </div>
-                  </div>
-                  <Button 
-                    onClick={handlePaymentMethodUpdate}
-                    disabled={loading}
-                    variant="outline"
-                    size="sm"
-                  >
-                    Edit
-                  </Button>
-                </div>
-              ))}
-              <Button 
-                onClick={handlePaymentMethodUpdate}
-                disabled={loading}
-                variant="outline"
-                className="w-full"
-              >
-                Add Payment Method
-              </Button>
-            </div>
-          </Card>
-        </div>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-lg">
+            <Receipt className="h-5 w-5" />
+            Invoices
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            No invoices yet. Invoices will appear here after your first payment.
+          </p>
+        </CardContent>
+      </Card>
 
-        {/* Billing History */}
-        <Card className="p-6">
-          <h2 className="text-2xl font-bold mb-6">Billing History</h2>
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="border-b">
-                  <th className="text-left py-2">Date</th>
-                  <th className="text-left py-2">Description</th>
-                  <th className="text-left py-2">Amount</th>
-                  <th className="text-left py-2">Status</th>
-                  <th className="text-left py-2">Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                {invoices.map((invoice) => (
-                  <tr key={invoice.id} className="border-b">
-                    <td className="py-3">{formatDate(invoice.date)}</td>
-                    <td className="py-3">{invoice.description}</td>
-                    <td className="py-3">{formatCurrency(invoice.amount)}</td>
-                    <td className="py-3">
-                      <span className="inline-block px-2 py-1 bg-green-100 text-green-800 rounded text-sm">
-                        {invoice.status}
-                      </span>
-                    </td>
-                    <td className="py-3">
-                      <Button
-                        onClick={() => handleInvoiceDownload(invoice.id)}
-                        variant="outline"
-                        size="sm"
-                      >
-                        Download
-                      </Button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </Card>
+      <div className="mt-6 flex justify-end">
+        <button
+          onClick={handleManageBilling}
+          className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-accent transition-colors"
+        >
+          <ExternalLink className="mr-2 h-4 w-4" />
+          Manage in Stripe
+        </button>
       </div>
     </div>
   );
 }
-