ti.sil/sourcebot
1
0
Fork 0
mirror of https://github.com/sourcebot-dev/sourcebot.git synced 2025-12-12 20:35:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

add subscription info to billing page

Browse source
This commit is contained in:
msukkari 2025-02-13 10:52:34 -08:00
parent 875f9b8586
commit 193c7e0732
3 changed files with 93 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
packages/web/src/actions.ts
View file

@ -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!,
}
})
);

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

@ -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>
)

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

@ -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() {
return (
<div>
<h1>Billing</h1>
interface BillingPageProps {
params: {
domain: string
}
}
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>
)
}