add subscription info to billing page

packages/web/src/actions.ts

@@ -641,3 +641,20 @@ export const removeMember = async (memberId: string, domain: string): Promise<{
             }
         })
     );
+
+export const getSubscriptionData = async (domain: string) => 
+    withAuth(async (session) =>
+        withOrgMembership(session, domain, async (orgId) => {
+            const subscription = await fetchSubscription(orgId);
+            if (isServiceError(subscription)) {
+                return orgInvalidSubscription();
+            }
+
+            return {
+                plan: "Team",
+                seats: subscription.items.data[0].quantity!,
+                perSeatPrice: subscription.items.data[0].price.unit_amount! / 100,
+                nextBillingDate: subscription.current_period_end!,
+            }
+        })
+    );

packages/web/src/app/[domain]/settings/billing/manageSubscriptionButton.tsx

@@ -29,7 +29,7 @@ export function ManageSubscriptionButton() {
     }
 
     return (
-        <Button onClick={redirectToCustomerPortal} disabled={isLoading}>
+        <Button className="w-full" onClick={redirectToCustomerPortal} disabled={isLoading}>
           {isLoading ? "Creating customer portal..." : "Manage Subscription"}
         </Button>
       )

packages/web/src/app/[domain]/settings/billing/page.tsx

@@ -1,12 +1,79 @@
-'use server'
+import type { Metadata } from "next"
+import { CalendarIcon, CreditCard, DollarSign, Users } from "lucide-react"
 
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
 import { ManageSubscriptionButton } from "./manageSubscriptionButton"
+import { getSubscriptionData } from "@/actions"
+import { isServiceError } from "@/lib/utils"
+export const metadata: Metadata = {
+  title: "Billing | Settings",
+  description: "Manage your subscription and billing information",
+}
 
-export default async function BillingPage() {
+interface BillingPageProps {
-    return (
+  params: {
-        <div>
+    domain: string
-            <h1>Billing</h1>
+  }
+}
+
+export default async function BillingPage({
+  params: { domain },
+}: BillingPageProps) {
+  const subscription = await getSubscriptionData(domain)
+
+  if (isServiceError(subscription)) {
+    return <div>Failed to fetch subscription data. Please contact us at team@sourcebot.dev if this issue persists.</div>
+  }
+
+  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>
+      <Separator />
+      <div className="grid gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Subscription Plan</CardTitle>
+            <CardDescription>You are currently on the {subscription.plan} plan.</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-4">
+                <Users className="h-5 w-5 text-muted-foreground" />
+                <div className="space-y-1">
+                  <p className="text-sm font-medium leading-none">Seats</p>
+                  <p className="text-sm text-muted-foreground">{subscription.seats} active users</p>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-4">
+                <CalendarIcon className="h-5 w-5 text-muted-foreground" />
+                <div className="space-y-1">
+                  <p className="text-sm font-medium leading-none">Next Billing Date</p>
+                  <p className="text-sm text-muted-foreground">{new Date(subscription.nextBillingDate * 1000).toLocaleDateString()}</p>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-4">
+                <DollarSign className="h-5 w-5 text-muted-foreground" />
+                <div className="space-y-1">
+                  <p className="text-sm font-medium leading-none">Billing Amount</p>
+                  <p className="text-sm text-muted-foreground">${(subscription.perSeatPrice * subscription.seats).toFixed(2)} per month</p>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+          <CardFooter className="flex flex-col space-y-2 w-full">
             <ManageSubscriptionButton />
-        </div>
+          </CardFooter>
-    );
+        </Card>
-}
+      </div>
+    </div>
+  )
+}
+