Add stripe billing logic (#190)

* add side bar nav in settings page

* improve styling of members page

* wip adding stripe checkout button

* wip onboarding flow

* add stripe subscription id to org

* save stripe session id and add manage subscription button in settings

* properly block access to pages if user isn't in an org

* wip add paywall

* Domain support

* add back paywall and also add support for incrememnting seat count on invite redemption

* prevent self invite

* action button styling in settings and toast on copy

* add ability to remove member from org

* move stripe product id to env var

* add await for blocking loop in backend

* add subscription info to billing page

* handle trial case in billing info page

* add trial duration indicator to nav bar

* check if domain starts or ends with dash

* remove unused no org component

* remove package lock file and fix prisma dep version

* revert dep version updates

* fix yarn.lock

* add auth and membership check to fetchSubscription

* properly handle invite redeem with no valid subscription case

* change back fetch subscription to not require org membership

* add back subscription check in invite redeem page

---------

Co-authored-by: bkellam <bshizzle1234@gmail.com>

packages/backend/src/main.ts

@@ -26,5 +26,5 @@ export const main = async (db: PrismaClient, context: AppContext) => {
     connectionManager.registerPollingCallback();
 
     const repoManager = new RepoManager(db, DEFAULT_SETTINGS, redis, context);
-    repoManager.blockingPollLoop();
+    await repoManager.blockingPollLoop();
 }

packages/db/prisma/migrations/20250212185343_add_stripe_customer_id_to_org/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Org" ADD COLUMN     "stripeCustomerId" TEXT;

packages/db/prisma/schema.prisma

@@ -105,18 +105,20 @@ model Invite {
 }
 
 model Org {
-  id          Int          @id @default(autoincrement())
+  id                Int          @id @default(autoincrement())
-  name        String
+  name              String
-  domain      String       @unique
+  domain            String       @unique
-  createdAt   DateTime     @default(now())
+  createdAt         DateTime     @default(now())
-  updatedAt   DateTime     @updatedAt
+  updatedAt         DateTime     @updatedAt
-  members     UserToOrg[]
+  members           UserToOrg[]
-  connections Connection[]
+  connections       Connection[]
-  repos       Repo[]
+  repos             Repo[]
-  secrets     Secret[]
+  secrets           Secret[]
+
+  stripeCustomerId  String?
 
   /// List of pending invites to this organization
-  invites Invite[]
+  invites           Invite[]
 }
 
 enum OrgRole {

packages/web/package.json

@@ -64,6 +64,8 @@
     "@sourcebot/db": "^0.1.0",
     "@sourcebot/schemas": "^0.1.0",
     "@ssddanbrown/codemirror-lang-twig": "^1.0.0",
+    "@stripe/react-stripe-js": "^3.1.1",
+    "@stripe/stripe-js": "^5.6.0",
     "@tanstack/react-query": "^5.53.3",
     "@tanstack/react-table": "^8.20.5",
     "@tanstack/react-virtual": "^3.10.8",
@@ -113,6 +115,7 @@
     "react-resizable-panels": "^2.1.1",
     "server-only": "^0.0.1",
     "sharp": "^0.33.5",
+    "stripe": "^17.6.0",
     "tailwind-merge": "^2.5.2",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.7",

packages/web/src/actions.ts

@@ -2,7 +2,7 @@
 
 import Ajv from "ajv";
 import { auth } from "./auth";
-import { notAuthenticated, notFound, ServiceError, unexpectedError } from "@/lib/serviceError";
+import { notAuthenticated, notFound, ServiceError, unexpectedError, orgInvalidSubscription } from "@/lib/serviceError";
 import { prisma } from "@/prisma";
 import { StatusCodes } from "http-status-codes";
 import { ErrorCode } from "@/lib/errorCodes";
@@ -12,8 +12,12 @@ import { gitlabSchema } from "@sourcebot/schemas/v3/gitlab.schema";
 import { ConnectionConfig } from "@sourcebot/schemas/v3/connection.type";
 import { encrypt } from "@sourcebot/crypto"
 import { getConnection } from "./data/connection";
-import { ConnectionSyncStatus, Invite, Prisma } from "@sourcebot/db";
+import { ConnectionSyncStatus, Prisma, Invite } from "@sourcebot/db";
+import { headers } from "next/headers"
+import { stripe } from "@/lib/stripe"
+import { getUser } from "@/data/user";
 import { Session } from "next-auth";
+import { STRIPE_PRODUCT_ID } from "@/lib/environment";
 
 const ajv = new Ajv({
     validateFormats: false,
@@ -54,12 +58,18 @@ export const withOrgMembership = async <T>(session: Session, domain: string, fn:
     return fn(org.id);
 }
 
-export const createOrg = (name: string, domain: string): Promise<{ id: number } | ServiceError> =>
+export const isAuthed = async () => {
+    const session = await auth();
+    return session != null;
+}
+
+export const createOrg = (name: string, domain: string, stripeCustomerId?: string): Promise<{ id: number } | ServiceError> =>
     withAuth(async (session) => {
         const org = await prisma.org.create({
             data: {
                 name,
                 domain,
+                stripeCustomerId,
                 members: {
                     create: {
                         role: "OWNER",
@@ -277,6 +287,15 @@ export const createInvite = async (email: string, userId: string, domain: string
         withOrgMembership(session, domain, async (orgId) => {
             console.log("Creating invite for", email, userId, orgId);
 
+            if (email === session.user.email) {
+                console.error("User tried to invite themselves");
+                return {
+                    statusCode: StatusCodes.BAD_REQUEST,
+                    errorCode: ErrorCode.SELF_INVITE,
+                    message: "❌ You can't invite yourself to an org",
+                } satisfies ServiceError;
+            }
+
             try {
                 await prisma.invite.create({
                     data: {
@@ -299,7 +318,36 @@ export const createInvite = async (email: string, userId: string, domain: string
 export const redeemInvite = async (invite: Invite, userId: string): Promise<{ success: boolean } | ServiceError> =>
     withAuth(async () => {
         try {
-            await prisma.$transaction(async (tx) => {
+            const res = await prisma.$transaction(async (tx) => {
+                const org = await tx.org.findUnique({
+                    where: {
+                        id: invite.orgId,
+                    }
+                });
+
+                if (!org) {
+                    return notFound();
+                }
+
+                // Incrememnt the seat count
+                if (org.stripeCustomerId) {
+                    const subscription = await fetchSubscription(org.domain);
+                    if (isServiceError(subscription)) {
+                        throw orgInvalidSubscription();
+                    }
+
+                    const existingSeatCount = subscription.items.data[0].quantity;
+                    const newSeatCount = (existingSeatCount || 1) + 1
+
+                    await stripe.subscriptionItems.update(
+                        subscription.items.data[0].id,
+                        {
+                            quantity: newSeatCount,
+                            proration_behavior: 'create_prorations',
+                        }
+                    )
+                }
+
                 await tx.userToOrg.create({
                     data: {
                         userId,
@@ -315,6 +363,10 @@ export const redeemInvite = async (invite: Invite, userId: string): Promise<{ su
                 });
             });
 
+            if (isServiceError(res)) {
+                return res;
+            }
+
             return {
                 success: true,
             }
@@ -364,3 +416,252 @@ const parseConnectionConfig = (connectionType: string, config: string) => {
 
     return parsedConfig;
 }
+
+export const setupInitialStripeCustomer = async (name: string, domain: string) =>
+    withAuth(async (session) => {
+        const user = await getUser(session.user.id);
+        if (!user) {
+            return "";
+        }
+
+        const origin = (await headers()).get('origin')
+
+        // @nocheckin
+        const test_clock = await stripe.testHelpers.testClocks.create({
+            frozen_time: Math.floor(Date.now() / 1000)
+        })
+
+        const customer = await stripe.customers.create({
+            name: user.name!,
+            email: user.email!,
+            test_clock: test_clock.id
+        })
+
+        const prices = await stripe.prices.list({
+            product: STRIPE_PRODUCT_ID,
+            expand: ['data.product'],
+        });
+        const stripeSession = await stripe.checkout.sessions.create({
+            ui_mode: 'embedded',
+            customer: customer.id,
+            line_items: [
+                {
+                    price: prices.data[0].id,
+                    quantity: 1
+                }
+            ],
+            mode: 'subscription',
+            subscription_data: {
+                trial_period_days: 7,
+                trial_settings: {
+                    end_behavior: {
+                        missing_payment_method: 'cancel',
+                    },
+                },
+            },
+            payment_method_collection: 'if_required',
+            return_url: `${origin}/onboard/complete?session_id={CHECKOUT_SESSION_ID}&org_name=${name}&org_domain=${domain}`,
+        })
+
+        return stripeSession.client_secret!;
+    });
+
+export const getSubscriptionCheckoutRedirect = async (domain: string) =>
+    withAuth((session) =>
+        withOrgMembership(session, domain, async (orgId) => {
+            const org = await prisma.org.findUnique({
+                where: {
+                    id: orgId,
+                },
+            });
+
+            if (!org || !org.stripeCustomerId) {
+                return notFound();
+            }
+
+            const orgMembers = await prisma.userToOrg.findMany({
+                where: {
+                    orgId,
+                },
+                select: {
+                    userId: true,
+                }
+            });
+            const numOrgMembers = orgMembers.length;
+
+            const origin = (await headers()).get('origin')
+            const prices = await stripe.prices.list({
+                product: STRIPE_PRODUCT_ID,
+                expand: ['data.product'],
+            });
+
+            const createNewSubscription = async () => {
+                const stripeSession = await stripe.checkout.sessions.create({
+                    customer: org.stripeCustomerId as string,
+                    payment_method_types: ['card'],
+                    line_items: [
+                        {
+                            price: prices.data[0].id,
+                            quantity: numOrgMembers
+                        }
+                    ],
+                    mode: 'subscription',
+                    payment_method_collection: 'always',
+                    success_url: `${origin}/${domain}/settings/billing`,
+                    cancel_url: `${origin}/${domain}`,
+                });
+
+                return stripeSession.url;
+            }
+
+            const newSubscriptionUrl = await createNewSubscription();
+            return newSubscriptionUrl;
+        })
+    )
+
+export async function fetchStripeSession(sessionId: string) {
+    const stripeSession = await stripe.checkout.sessions.retrieve(sessionId);
+    return stripeSession;
+}
+
+export const getCustomerPortalSessionLink = async (domain: string): Promise<string | ServiceError> =>
+    withAuth((session) =>
+        withOrgMembership(session, domain, async (orgId) => {
+            const org = await prisma.org.findUnique({
+                where: {
+                    id: orgId,
+                },
+            });
+
+            if (!org || !org.stripeCustomerId) {
+                return notFound();
+            }
+
+            const origin = (await headers()).get('origin')
+            const portalSession = await stripe.billingPortal.sessions.create({
+                customer: org.stripeCustomerId as string,
+                return_url: `${origin}/${domain}/settings/billing`,
+            });
+
+            return portalSession.url;
+        }));
+
+export const fetchSubscription = (domain: string): Promise<any | ServiceError> =>
+    withAuth(async () => {
+        const org = await prisma.org.findUnique({
+            where: {
+                domain,
+            },
+        });
+
+        if (!org || !org.stripeCustomerId) {
+            return notFound();
+        }
+
+        const subscriptions = await stripe.subscriptions.list({
+            customer: org.stripeCustomerId
+        });
+
+        if (subscriptions.data.length === 0) {
+            return notFound();
+        }
+        return subscriptions.data[0];
+    });
+
+export const checkIfUserHasOrg = async (userId: string): Promise<boolean | ServiceError> => {
+    const orgs = await prisma.userToOrg.findMany({
+        where: {
+            userId,
+        },
+    });
+
+    return orgs.length > 0;
+}
+
+export const checkIfOrgDomainExists = async (domain: string): Promise<boolean | ServiceError> =>
+    withAuth(async () => {
+        const org = await prisma.org.findFirst({
+            where: {
+                domain,
+            }
+        });
+
+        return !!org;
+    });
+
+export const removeMember = async (memberId: string, domain: string): Promise<{ success: boolean } | ServiceError> =>
+    withAuth(async (session) =>
+        withOrgMembership(session, domain, async (orgId) => {
+            const targetMember = await prisma.userToOrg.findUnique({
+                where: {
+                    orgId_userId: {
+                        orgId,
+                        userId: memberId,
+                    }
+                }
+            });
+
+            if (!targetMember) {
+                return notFound();
+            }
+
+            const org = await prisma.org.findUnique({
+                where: {
+                    id: orgId,
+                },
+            });
+
+            if (!org) {
+                return notFound();
+            }
+
+            if (org.stripeCustomerId) {
+                const subscription = await fetchSubscription(domain);
+                if (isServiceError(subscription)) {
+                    return orgInvalidSubscription();
+                }
+
+                const existingSeatCount = subscription.items.data[0].quantity;
+                const newSeatCount = (existingSeatCount || 1) - 1;
+
+                await stripe.subscriptionItems.update(
+                    subscription.items.data[0].id,
+                    {
+                        quantity: newSeatCount,
+                        proration_behavior: 'create_prorations',
+                    }
+                )
+            }
+
+            await prisma.userToOrg.delete({
+                where: {
+                    orgId_userId: {
+                        orgId,
+                        userId: memberId,
+                    }
+                }
+            });
+
+            return {
+                success: true,
+            }
+        })
+    );
+
+export const getSubscriptionData = async (domain: string) =>
+    withAuth(async (session) =>
+        withOrgMembership(session, domain, async (orgId) => {
+            const subscription = await fetchSubscription(domain);
+            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!,
+                status: subscription.status,
+            }
+        })
+    );

packages/web/src/app/[domain]/components/footer.tsx

@@ -0,0 +1,14 @@
+import Link from "next/link";
+import { Separator } from "@/components/ui/separator";
+
+export function Footer() {
+    return (
+        <footer className="w-full mt-auto py-4 flex flex-row justify-center items-center gap-4">
+        <Link href="https://sourcebot.dev" className="text-gray-400 text-sm hover:underline">About</Link>
+        <Separator orientation="vertical" className="h-4" />
+        <Link href="https://github.com/sourcebot-dev/sourcebot/issues/new" className="text-gray-400 text-sm hover:underline">Support</Link>
+        <Separator orientation="vertical" className="h-4" />
+        <Link href="mailto:team@sourcebot.dev" className="text-gray-400 text-sm hover:underline">Contact Us</Link>
+    </footer>
+    )
+}

packages/web/src/app/[domain]/components/navigationMenu.tsx

@@ -9,7 +9,8 @@ import { SettingsDropdown } from "./settingsDropdown";
 import { GitHubLogoIcon, DiscordLogoIcon } from "@radix-ui/react-icons";
 import { redirect } from "next/navigation";
 import { OrgSelector } from "./orgSelector";
-
+import { getSubscriptionData } from "@/actions";
+import { isServiceError } from "@/lib/utils";
 const SOURCEBOT_DISCORD_URL = "https://discord.gg/6Fhp27x7Pb";
 const SOURCEBOT_GITHUB_URL = "https://github.com/sourcebot-dev/sourcebot";
 
@@ -20,6 +21,8 @@ interface NavigationMenuProps {
 export const NavigationMenu = async ({
     domain,
 }: NavigationMenuProps) => {
+    const subscription = await getSubscriptionData(domain);
+
     return (
         <div className="flex flex-col w-screen h-fit">
             <div className="flex flex-row justify-between items-center py-1.5 px-3">
@@ -66,14 +69,14 @@ export const NavigationMenu = async ({
                             <NavigationMenuItem>
                                 <Link href={`/${domain}/secrets`} legacyBehavior passHref>
                                     <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                                        Secrets 
+                                        Secrets
                                     </NavigationMenuLink>
                                 </Link>
                             </NavigationMenuItem>
                             <NavigationMenuItem>
                                 <Link href={`/${domain}/connections`} legacyBehavior passHref>
                                     <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                                        Connections 
+                                        Connections
                                     </NavigationMenuLink>
                                 </Link>
                             </NavigationMenuItem>
@@ -89,6 +92,17 @@ export const NavigationMenu = async ({
                 </div>
 
                 <div className="flex flex-row items-center gap-2">
+                    {!isServiceError(subscription) && subscription.status === "trialing" && (
+                        <Link href={`/${domain}/settings/billing`}>
+                            <div className="flex items-center gap-2 px-3 py-1.5 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-full text-yellow-700 dark:text-yellow-400 text-xs font-medium hover:bg-yellow-100 dark:hover:bg-yellow-900/30 transition-colors cursor-pointer">
+                                <span className="inline-block w-2 h-2 bg-yellow-400 dark:bg-yellow-500 rounded-full"></span>
+                                <span>
+                                    {Math.ceil((subscription.nextBillingDate * 1000 - Date.now()) / (1000 * 60 * 60 * 24))} days left in
+                                    trial
+                                </span>
+                            </div>
+                        </Link>
+                    )}
                     <form
                         action={async () => {
                             "use server";

packages/web/src/app/[domain]/components/payWall/checkoutButton.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { getSubscriptionCheckoutRedirect } from "@/actions"
+import { isServiceError } from "@/lib/utils"
+
+
+export function CheckoutButton({ domain }: { domain: string }) {
+    const redirectToCheckout = async () => {
+        const redirectUrl = await getSubscriptionCheckoutRedirect(domain)
+
+        if (isServiceError(redirectUrl)) {
+            console.error("Failed to create checkout session")
+            return
+        }
+
+        window.location.href = redirectUrl!;
+    }
+
+    return (
+        <Button className="w-full" onClick={redirectToCheckout}>Renew Membership</Button>
+    )
+}

packages/web/src/app/[domain]/components/payWall/enterpriseContactUsButton.tsx

@@ -0,0 +1,15 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+
+export function EnterpriseContactUsButton() {
+    const handleContactUs = () => {
+        window.location.href = "mailto:team@sourcebot.dev?subject=Enterprise%20Pricing%20Inquiry"
+    }
+
+    return (
+        <Button className="w-full" onClick={handleContactUs}>
+            Contact Us
+        </Button>
+    )
+}

packages/web/src/app/[domain]/components/payWall/paywallCard.tsx

@@ -0,0 +1,93 @@
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Check } from "lucide-react"
+import { EnterpriseContactUsButton } from "./enterpriseContactUsButton"
+import { CheckoutButton } from "./checkoutButton"
+import Image from "next/image";
+import logoDark from "@/public/sb_logo_dark_large.png";
+import logoLight from "@/public/sb_logo_light_large.png";
+
+const teamFeatures = [
+  "Index hundreds of repos from multiple code hosts (GitHub, GitLab, Gerrit, Gitea, etc.). Self-hosted code sources supported",
+  "Public and private repos supported",
+  "Create sharable links to code snippets",
+  "9x5 email support team@sourcebot.dev",
+]
+
+const enterpriseFeatures = [
+  "All Team features",
+  "Dedicated Slack support channel",
+  "Single tenant deployment",
+  "Advanced security features",
+]
+
+export async function PaywallCard({ domain }: { domain: string }) {
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8">
+      <div className="max-h-44 w-auto mb-4 flex justify-center">
+        <Image
+          src={logoDark}
+          className="h-18 md:h-40 w-auto hidden dark:block"
+          alt={"Sourcebot logo"}
+          priority={true}
+        />
+        <Image
+          src={logoLight}
+          className="h-18 md:h-40 w-auto block dark:hidden"
+          alt={"Sourcebot logo"}
+          priority={true}
+        />
+      </div>
+      <h2 className="text-3xl font-bold text-center mb-8 text-primary">
+        Your subscription has expired.
+      </h2>
+      <div className="grid gap-8 md:grid-cols-2">
+        <Card className="border-2 border-primary/20 shadow-lg transition-all duration-300 hover:shadow-xl hover:border-primary/50 flex flex-col">
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl font-bold text-primary">Team</CardTitle>
+            <CardDescription className="text-base">For professional developers and small teams</CardDescription>
+          </CardHeader>
+          <CardContent className="flex-grow">
+            <div className="mb-4">
+              <p className="text-4xl font-bold text-primary">$10</p>
+              <p className="text-sm text-muted-foreground">per user / month</p>
+            </div>
+            <ul className="space-y-3">
+              {teamFeatures.map((feature, index) => (
+                <li key={index} className="flex items-center">
+                  <Check className="mr-3 h-5 w-5 text-green-500 flex-shrink-0" />
+                  <span>{feature}</span>
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+          <CardFooter>
+            <CheckoutButton domain={domain} />
+          </CardFooter>
+        </Card>
+        <Card className="border-2 border-primary/20 shadow-lg transition-all duration-300 hover:shadow-xl hover:border-primary/50 flex flex-col">
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl font-bold text-primary">Enterprise</CardTitle>
+            <CardDescription className="text-base">For large organizations with custom needs</CardDescription>
+          </CardHeader>
+          <CardContent className="flex-grow">
+            <div className="mb-4">
+              <p className="text-4xl font-bold text-primary">Custom</p>
+              <p className="text-sm text-muted-foreground">tailored to your needs</p>
+            </div>
+            <ul className="space-y-3">
+              {enterpriseFeatures.map((feature, index) => (
+                <li key={index} className="flex items-center">
+                  <Check className="mr-3 h-5 w-5 text-green-500 flex-shrink-0" />
+                  <span>{feature}</span>
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+          <CardFooter>
+            <EnterpriseContactUsButton />
+          </CardFooter>
+        </Card>
+      </div>
+    </div>
+  )
+}

packages/web/src/app/[domain]/layout.tsx

@@ -2,6 +2,11 @@ import { prisma } from "@/prisma";
 import { PageNotFound } from "./components/pageNotFound";
 import { auth } from "@/auth";
 import { getOrgFromDomain } from "@/data/org";
+import { fetchSubscription } from "@/actions";
+import { isServiceError } from "@/lib/utils";
+import { PaywallCard } from "./components/payWall/paywallCard";
+import { NavigationMenu } from "./components/navigationMenu";
+import { Footer } from "./components/footer";
 
 interface LayoutProps {
     children: React.ReactNode,
@@ -38,5 +43,16 @@ export default async function Layout({
         return <PageNotFound />
     }
 
+    const subscription = await fetchSubscription(domain);
+    if (isServiceError(subscription) || (subscription.status !== "active" && subscription.status !== "trialing")) {
+        return (
+            <div className="flex flex-col items-center overflow-hidden min-h-screen">
+                <NavigationMenu domain={domain} />
+                <PaywallCard domain={domain} />
+                <Footer />
+            </div>
+        )
+    }
+
     return children;
 }

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

@@ -13,6 +13,7 @@ import { UpgradeToast } from "./components/upgradeToast";
 import Link from "next/link";
 import { getOrgFromDomain } from "@/data/org";
 import { PageNotFound } from "./components/pageNotFound";
+import { Footer } from "./components/footer";
 
 
 export default async function Home({ params: { domain } }: { params: { domain: string } }) {
@@ -109,13 +110,7 @@ export default async function Home({ params: { domain } }: { params: { domain: s
                     </div>
                 </div>
             </div>
-            <footer className="w-full mt-auto py-4 flex flex-row justify-center items-center gap-4">
+            <Footer />
-                <Link href="https://sourcebot.dev" className="text-gray-400 text-sm hover:underline">About</Link>
-                <Separator orientation="vertical" className="h-4" />
-                <Link href="https://github.com/sourcebot-dev/sourcebot/issues/new" className="text-gray-400 text-sm hover:underline">Support</Link>
-                <Separator orientation="vertical" className="h-4" />
-                <Link href="mailto:team@sourcebot.dev" className="text-gray-400 text-sm hover:underline">Contact Us</Link>
-            </footer>
         </div>
     )
 }

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

@@ -0,0 +1,36 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { isServiceError } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { getCustomerPortalSessionLink } from "@/actions"
+import { useDomain } from "@/hooks/useDomain";
+
+export function ManageSubscriptionButton() {
+    const [isLoading, setIsLoading] = useState(false)
+    const router = useRouter()
+    const domain = useDomain();
+
+    const redirectToCustomerPortal = async () => {
+        setIsLoading(true)
+        try {
+            const session = await getCustomerPortalSessionLink(domain)
+            if (isServiceError(session)) {
+                console.log("Failed to create portal session: ", session)
+            } else {
+                router.push(session)
+            }
+        } catch (error) {
+            console.error("Error creating portal session:", error)
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    return (
+        <Button className="w-full" onClick={redirectToCustomerPortal} disabled={isLoading}>
+          {isLoading ? "Creating customer portal..." : "Manage Subscription"}
+        </Button>
+      )
+}

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

@@ -0,0 +1,83 @@
+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",
+}
+
+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>
+              {subscription.status === "trialing" 
+                ? "You are currently on a free trial"
+                : `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">{subscription.status === "trialing" ? "Trial End Date" : "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 />
+          </CardFooter>
+        </Card>
+      </div>
+    </div>
+  )
+}
+

packages/web/src/app/[domain]/settings/components/inviteTable.tsx

@@ -2,6 +2,7 @@
 import { useMemo } from "react";
 import { DataTable } from "@/components/ui/data-table";
 import { InviteColumnInfo, inviteTableColumns } from "./inviteTableColumns"
+import { useToast } from "@/components/hooks/use-toast";
 
 export interface InviteInfo {
     id: string;
@@ -14,6 +15,14 @@ interface InviteTableProps {
 }
 
 export const InviteTable = ({ initialInvites }: InviteTableProps) => {
+    const { toast } = useToast();
+
+    const displayToast = (message: string) => {
+        toast({
+            description: message,
+        });
+    }
+
     const inviteRows: InviteColumnInfo[] = useMemo(() => {
         return initialInvites.map(invite => {
             return {
@@ -25,9 +34,10 @@ export const InviteTable = ({ initialInvites }: InviteTableProps) => {
     }, [initialInvites]);
 
     return (
-        <div>
+        <div className="space-y-2 overflow-x-auto">
+            <h4 className="text-lg font-normal">Invites</h4>
             <DataTable
-                columns={inviteTableColumns()}
+                columns={inviteTableColumns(displayToast)}
                 data={inviteRows}
                 searchKey="email"
                 searchPlaceholder="Search invites..."

packages/web/src/app/[domain]/settings/components/inviteTableColumns.tsx

@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { ColumnDef } from "@tanstack/react-table"
 import { resolveServerPath } from "@/app/api/(client)/client";
 import { createPathWithQueryParams } from "@/lib/utils";
+import { useToast } from "@/components/hooks/use-toast";
 
 export type InviteColumnInfo = {
     id: string;
@@ -11,7 +12,7 @@ export type InviteColumnInfo = {
     createdAt: Date;
 }
 
-export const inviteTableColumns = (): ColumnDef<InviteColumnInfo>[] => {
+export const inviteTableColumns = (displayToast: (message: string) => void): ColumnDef<InviteColumnInfo>[] => {
     return [
         {
             accessorKey: "email",
@@ -28,19 +29,36 @@ export const inviteTableColumns = (): ColumnDef<InviteColumnInfo>[] => {
             }
         },
         {
-            accessorKey: "copy",
+            id: "copy",
             cell: ({ row }) => {
                 const invite = row.original;
                 return (
                     <Button
-                        variant="link"
+                        variant="ghost" 
+                        size="icon"
                         onClick={() => {
                             const basePath = `${window.location.origin}${resolveServerPath('/')}`;
                             const url = createPathWithQueryParams(`${basePath}redeem?invite_id=${invite.id}`);
                             navigator.clipboard.writeText(url);
+
+                            displayToast("✅ Copied invite link");
                         }}
                     >
-                        Copy
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="hover:stroke-gray-600 transition-colors"
+                        >
+                            <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+                            <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+                        </svg>
                     </Button>
                 )
             }

packages/web/src/app/[domain]/settings/components/memberInviteForm.tsx

@@ -9,12 +9,15 @@ import { useToast } from "@/components/hooks/use-toast";
 import { createInvite } from "@/actions"
 import { isServiceError } from "@/lib/utils";
 import { useDomain } from "@/hooks/useDomain";
+import { ErrorCode } from "@/lib/errorCodes";
+import { useRouter } from "next/navigation";
 
 const formSchema = z.object({
     email: z.string().min(2).max(40),
 });
 
 export const MemberInviteForm = ({ userId }: { userId: string }) => {
+    const router = useRouter();
     const { toast } = useToast();
     const domain = useDomain();
 
@@ -29,18 +32,21 @@ export const MemberInviteForm = ({ userId }: { userId: string }) => {
         const res = await createInvite(values.email, userId, domain);
         if (isServiceError(res)) {
             toast({
-                description: `❌ Failed to create invite`
+                description: res.errorCode == ErrorCode.SELF_INVITE ? res.message :`❌ Failed to create invite`
             });
             return;
         } else {
             toast({
                 description: `✅ Invite created successfully!`
             });
+            
+            router.refresh();
         }
     }
 
     return (
-        <div>
+        <div className="space-y-2">
+            <h4 className="text-lg font-normal">Invite a member</h4>
             <Form {...form}>
                 <form onSubmit={form.handleSubmit(handleCreateInvite)}>
                     <FormField

packages/web/src/app/[domain]/settings/components/memberTable.tsx

@@ -1,31 +1,37 @@
 'use client';
 import { useMemo } from "react";
 import { DataTable } from "@/components/ui/data-table";
-import { MemberColumnInfo, memberTableColumns } from "./memberTableColumns";
+import { MemberColumnInfo, MemberTableColumns } from "./memberTableColumns";
 
 export interface MemberInfo {
+    id: string;
     name: string;
+    email: string;
     role: string;
 }
 
 interface MemberTableProps {
+    currentUserId: string;
     initialMembers: MemberInfo[];
 }
 
-export const MemberTable = ({ initialMembers }: MemberTableProps) => {
+export const MemberTable = ({ currentUserId, initialMembers }: MemberTableProps) => {
     const memberRows: MemberColumnInfo[] = useMemo(() => {
         return initialMembers.map(member => {
             return {
+                id: member.id!,
                 name: member.name!,
+                email: member.email!,
                 role: member.role!,
             }
         })
     }, [initialMembers]);
 
     return (
-        <div>
+        <div className="space-y-2">
+            <h4 className="text-lg font-normal">Members</h4>
             <DataTable
-                columns={memberTableColumns()}
+                columns={MemberTableColumns(currentUserId)}
                 data={memberRows}
                 searchKey="name"
                 searchPlaceholder="Search members..."

packages/web/src/app/[domain]/settings/components/memberTableColumns.tsx

@@ -1,13 +1,33 @@
 'use client'
 
+import { Button } from "@/components/ui/button"
 import { ColumnDef } from "@tanstack/react-table"
+import {
+    Dialog,
+    DialogContent,
+    DialogClose,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { removeMember } from "@/actions"
+import { useToast } from "@/components/hooks/use-toast"
+import { useDomain } from "@/hooks/useDomain";
+import { isServiceError } from "@/lib/utils";
+import { useRouter } from "next/navigation";
 
 export type MemberColumnInfo = {
+    id: string;
     name: string;
+    email: string;
     role: string;
 }
 
-export const memberTableColumns = (): ColumnDef<MemberColumnInfo>[] => {
+export const MemberTableColumns = (currentUserId: string): ColumnDef<MemberColumnInfo>[] => {
+    const { toast } = useToast();
+    const domain = useDomain();
+    const router = useRouter();
     return [
         {
             accessorKey: "name",
@@ -16,12 +36,101 @@ export const memberTableColumns = (): ColumnDef<MemberColumnInfo>[] => {
                 return <div>{member.name}</div>;
             }
         },
+        {
+            accessorKey: "email",
+            cell: ({ row }) => {
+                const member = row.original;
+                return <div>{member.email}</div>;
+            }
+        },
         {
             accessorKey: "role",
             cell: ({ row }) => {
                 const member = row.original;
                 return <div>{member.role}</div>;
             }
+        },
+        {
+            id: "remove",
+            cell: ({ row }) => {
+                const member = row.original;
+                if (member.id === currentUserId) {
+                    return null;
+                }
+                return (
+                    <Dialog>
+                        <DialogTrigger asChild>
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                className="hover:bg-destructive/30 transition-colors"
+                            >
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    width="16"
+                                    height="16"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    className="text-destructive hover:text-destructive transition-colors"
+                                >
+                                    <path d="M3 6h18" />
+                                    <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+                                    <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+                                </svg>
+                            </Button>
+                        </DialogTrigger>
+                        <DialogContent className="sm:max-w-[425px]">
+                            <DialogHeader>
+                                <DialogTitle className="text-lg font-semibold">Remove Member</DialogTitle>
+                            </DialogHeader>
+                            <div className="grid gap-4 py-4">
+                                <div className="space-y-4">
+                                    <p className="font-medium">Are you sure you want to remove this member?</p>
+                                    <div className="rounded-lg bg-muted p-4">
+                                        <p className="text-sm text-muted-foreground">
+                                            This action will remove <span className="font-semibold text-foreground">{member.email}</span> from your organization.
+                                            <br/>
+                                            <br/>
+                                            Your subscription&apos;s seat count will be automatically adjusted.
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            <DialogFooter className="gap-2">
+                                <DialogClose asChild>
+                                    <Button variant="outline">Cancel</Button>
+                                </DialogClose>
+                                <DialogClose asChild>
+                                    <Button 
+                                        variant="destructive" 
+                                        className="hover:bg-destructive/90"
+                                        onClick={async () => {
+                                            const response = await removeMember(member.id, domain);
+                                            if (isServiceError(response)) {
+                                                toast({
+                                                    description: `❌ Failed to remove member. Reason: ${response.message}`
+                                                });
+                                            } else {
+                                                toast({
+                                                    description: `✅ Member removed successfully.`
+                                                });
+
+                                                router.refresh();
+                                            }
+                                        }}
+                                    >
+                                        Remove Member
+                                    </Button>
+                                </DialogClose>
+                            </DialogFooter>
+                        </DialogContent>
+                    </Dialog>
+                );
+            }
         }
     ]
 }

packages/web/src/app/[domain]/settings/components/sidebar-nav.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
+  items: {
+    href: string
+    title: string
+  }[]
+}
+
+export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
+  const pathname = usePathname()
+
+  return (
+    <nav
+      className={cn(
+        "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
+        className
+      )}
+      {...props}
+    >
+      {items.map((item) => (
+        <Link
+          key={item.href}
+          href={item.href}
+          className={cn(
+            buttonVariants({ variant: "ghost" }),
+            pathname === item.href
+              ? "bg-muted hover:bg-muted"
+              : "hover:bg-transparent hover:underline",
+            "justify-start"
+          )}
+        >
+          {item.title}
+        </Link>
+      ))}
+    </nav>
+  )
+}

packages/web/src/app/[domain]/settings/layout.tsx

@@ -1,18 +1,49 @@
-import { NavigationMenu } from "../components/navigationMenu";
+import { Metadata } from "next"
 
-export default function Layout({
+import { Separator } from "@/components/ui/separator"
+import { SidebarNav } from "./components/sidebar-nav"
+import { NavigationMenu } from "../components/navigationMenu"
+
+export const metadata: Metadata = {
+    title: "Settings",
+}
+
+export default function SettingsLayout({
     children,
     params: { domain },
 }: Readonly<{
     children: React.ReactNode;
     params: { domain: string };
 }>) {
+    const sidebarNavItems = [
+        {
+            title: "Members",
+            href: `/${domain}/settings`,
+        },
+        {
+            title: "Billing",
+            href: `/${domain}/settings/billing`,
+        }
+    ]
+
     return (
-        <div className="min-h-screen flex flex-col">
+        <div>
             <NavigationMenu domain={domain} />
-            <main className="flex-grow flex justify-center p-4 bg-[#fafafa] dark:bg-background relative">
+            <div className="hidden space-y-6 p-10 pb-16 md:block">
-                <div className="w-full max-w-6xl rounded-lg p-6">{children}</div>
+                <div className="space-y-0.5">
-            </main>
+                    <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
+                    <p className="text-muted-foreground">
+                        Manage your organization settings.
+                    </p>
+                </div>
+                <Separator className="my-6" />
+                <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-8 lg:space-y-0">
+                    <aside className="-mx-4 lg:w-48">
+                        <SidebarNav items={sidebarNavItems} />
+                    </aside>
+                    <div className="flex-1">{children}</div>
+                </div>
+            </div>
         </div>
     )
 }

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

@@ -1,39 +1,37 @@
-import { Header } from "../components/header";
+import { auth } from "@/auth"
-import { auth } from "@/auth";
+import { getUser } from "@/data/user"
-import { getUser } from "@/data/user";
+import { prisma } from "@/prisma"
-import { prisma } from "@/prisma";
+import { MemberTable } from "./components/memberTable"
-import { MemberTable } from "./components/memberTable";
+import { MemberInviteForm } from "./components/memberInviteForm"
-import { MemberInviteForm } from "./components/memberInviteForm";
+import { InviteTable } from "./components/inviteTable"
-import { InviteTable } from "./components/inviteTable";
+import { Separator } from "@/components/ui/separator"
 
 interface SettingsPageProps {
     params: {
-        domain: string;
+        domain: string
-    };
+    }
 }
 
-export default async function SettingsPage({
+export default async function SettingsPage({ params: { domain } }: SettingsPageProps) {
-    params: { domain }
-}: SettingsPageProps) {
     const fetchData = async () => {
-        const session = await auth();
+        const session = await auth()
         if (!session) {
-            return null;
+            return null
         }
 
-        const user = await getUser(session.user.id);
+        const user = await getUser(session.user.id)
         if (!user) {
-            return null;
+            return null
         }
 
         const activeOrg = await prisma.org.findUnique({
             where: {
                 domain,
             },
-        });
+        })
 
         if (!activeOrg) {
-            return null;
+            return null
         }
 
         const members = await prisma.user.findMany({
@@ -54,50 +52,54 @@ export default async function SettingsPage({
                     },
                 },
             },
-        });
+        })
 
         const invites = await prisma.invite.findMany({
             where: {
                 orgId: activeOrg.id,
             },
-        });
+        })
 
         const memberInfo = members.map((member) => ({
+            id: member.id,
             name: member.name!,
+            email: member.email!,
             role: member.orgs[0].role,
-        }));
+        }))
 
         const inviteInfo = invites.map((invite) => ({
             id: invite.id,
             email: invite.recipientEmail,
             createdAt: invite.createdAt,
-        }));
+        }))
 
         return {
             user,
             memberInfo,
             inviteInfo,
             activeOrg,
-        };
+        }
-    };
-
-    const data = await fetchData();
-    if (!data) {
-        return <div>Error: Unable to fetch data</div>;
     }
-    const { user, memberInfo, inviteInfo } = data;
 
+    const data = await fetchData()
+    if (!data) {
+        return <div>Error: Unable to fetch data</div>
+    }
+    const { user, memberInfo, inviteInfo } = data
 
     return (
-        <div>
+        <div className="space-y-6">
-            <Header>
-                <h1 className="text-3xl">Settings</h1>
-            </Header>
             <div>
+                <h3 className="text-lg font-medium">Members</h3>
+                <p className="text-sm text-muted-foreground">Invite and manage members of your organization.</p>
+            </div>
+            <Separator />
+            <div className="space-y-6">
+                <MemberTable currentUserId={user.id} initialMembers={memberInfo} />
                 <MemberInviteForm userId={user.id} />
                 <InviteTable initialInvites={inviteInfo} />
-                <MemberTable initialMembers={memberInfo} />
             </div>
         </div>
     )
-}
+}
+

packages/web/src/app/globals.css

@@ -30,6 +30,14 @@
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --highlight: 224, 76%, 48%;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
@@ -58,6 +66,14 @@
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
     --highlight: 217, 91%, 60%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
 

packages/web/src/app/layout.tsx

@@ -44,4 +44,4 @@ export default function RootLayout({
             </body>
         </html>
     );
-}
+}

packages/web/src/app/login/page.tsx

@@ -7,7 +7,7 @@ import githubLogo from "@/public/github.svg";
 import googleLogo from "@/public/google.svg";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
-
+import { checkIfUserHasOrg } from "@/actions";
 const SIGNIN_ERROR_URL = "/login";
 
 export default async function Login(props: {
@@ -56,7 +56,7 @@ export default async function Login(props: {
                                     "use server"
                                     try {
                                         await signIn(provider.id, {
-                                            redirectTo: props.searchParams?.callbackUrl ?? "/",
+                                            redirectTo: props.searchParams?.callbackUrl ?? "/"
                                         })
                                     } catch (error) {
                                         // Signin can fail for a number of reasons, such as the user

packages/web/src/app/onboard/complete/page.tsx

@@ -0,0 +1,51 @@
+import { ErrorPage } from "../components/errorPage";
+import { auth } from "@/auth";
+import { getUser } from "@/data/user";
+import { createOrg, switchActiveOrg, fetchStripeSession } from "../../../actions";
+import { isServiceError } from "@/lib/utils";
+import { redirect } from 'next/navigation';
+
+interface OnboardCompleteProps {
+    searchParams?: {
+        session_id?: string;
+        org_name?: string;
+        org_domain?: string;
+    };
+}
+
+export default async function OnboardComplete({ searchParams }: OnboardCompleteProps) {
+    const sessionId = searchParams?.session_id;
+    const orgName = searchParams?.org_name;
+    const orgDomain = searchParams?.org_domain;
+    
+    const session = await auth();
+    let user = undefined;
+    if (!session) {
+        return null;
+    }
+    
+    user = await getUser(session.user.id);
+    if (!user) {
+        return null;
+    }
+
+    if (!sessionId || !orgName || !orgDomain) {
+        console.error("Missing required parameters");
+        return <ErrorPage />;
+    }
+
+    const stripeSession = await fetchStripeSession(sessionId);
+    if(stripeSession.payment_status !== "paid") {
+        console.error("Invalid stripe session");
+        return <ErrorPage />;
+    }
+
+    const stripeCustomerId = stripeSession.customer as string;
+    const res = await createOrg(orgName, orgDomain, stripeCustomerId);
+    if (isServiceError(res)) {
+        console.error("Failed to create org");
+        return <ErrorPage />;
+    }
+
+    redirect("/");
+}

packages/web/src/app/onboard/components/errorPage.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { XCircle } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+
+export function ErrorPage() {
+  const router = useRouter()
+
+  return (
+    <div className="min-h-screen w-full flex items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardContent className="pt-12 pb-8 px-8 flex flex-col items-center text-center">
+          <div className="mb-6">
+            <XCircle className="h-16 w-16 text-red-500" />
+          </div>
+          <h1 className="text-2xl font-bold mb-8">Organization Creation Failed</h1>
+          <p className="text-gray-400 mb-4">
+            We encountered an error while creating your organization. Please try again.
+          </p>
+          <p className="text-gray-400 mb-8">
+            If the problem persists, please contact us at team@sourcebot.dev
+          </p>
+          <Button
+            onClick={() => router.push("/onboard")}
+            className="px-6 py-2 h-auto text-base font-medium rounded-xl"
+            variant="secondary"
+          >
+            Try Again
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+

packages/web/src/app/onboard/components/orgCreateForm.tsx

@@ -0,0 +1,127 @@
+"use client"
+
+import { checkIfOrgDomainExists } from "../../../actions"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "@/components/ui/form"
+import { isServiceError } from "@/lib/utils"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import logoDark from "@/public/sb_logo_dark_large.png";
+import logoLight from "@/public/sb_logo_light_large.png";
+import Image from "next/image";
+import { useState } from "react";
+
+const onboardingFormSchema = z.object({
+    name: z.string()
+        .min(2, { message: "Organization name must be at least 3 characters long." })
+        .max(30, { message: "Organization name must be at most 30 characters long." }),
+    domain: z.string()
+        .min(2, { message: "Organization domain must be at least 3 characters long." })
+        .max(20, { message: "Organization domain must be at most 20 characters long." })
+        .regex(/^[a-z][a-z-]*[a-z]$/, {
+            message: "Domain must start and end with a letter, and can only contain lowercase letters and dashes.",
+          }),
+})
+
+export type OnboardingFormValues = z.infer<typeof onboardingFormSchema>
+
+const defaultValues: Partial<OnboardingFormValues> = {
+    name: "",
+    domain: "",
+}
+
+interface OrgCreateFormProps {
+    setOrgCreateData: (data: OnboardingFormValues) => void;
+}
+
+export function OrgCreateForm({ setOrgCreateData }: OrgCreateFormProps) {
+    const form = useForm<OnboardingFormValues>({ resolver: zodResolver(onboardingFormSchema), defaultValues })
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+    async function submitOrgInfoForm(data: OnboardingFormValues) {
+        const res = await checkIfOrgDomainExists(data.domain);
+        if (isServiceError(res)) {
+            setErrorMessage("An error occurred while checking the domain. Please try clearing your cookies and trying again.");
+            return;
+        }
+
+        if (res) {
+            setErrorMessage("Organization domain already exists. Please try a different one.");
+            return;
+        } else {
+            setOrgCreateData(data);
+        }
+    }
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const name = e.target.value
+        const domain = name.toLowerCase().replace(/\s+/g, "-")
+        form.setValue("domain", domain)
+      }
+
+    return (
+        <div className="space-y-6">
+            <div className="flex justify-center">
+                <Image
+                    src={logoDark}
+                    className="h-16 w-auto hidden dark:block"
+                    alt={"Sourcebot logo"}
+                    priority={true}
+                />
+                <Image
+                    src={logoLight}
+                    className="h-16 w-auto block dark:hidden"
+                    alt={"Sourcebot logo"}
+                    priority={true}
+                />
+            </div>
+            <h1 className="text-2xl font-bold">Let's create your organization</h1>
+            <Form {...form}>
+                <form onSubmit={form.handleSubmit(submitOrgInfoForm)} className="space-y-8">
+                    <FormField
+                        control={form.control}
+                        name="name"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Organization Name</FormLabel>
+                                <FormControl>
+                                    <Input 
+                                        placeholder="Aperture Labs" 
+                                        {...field} 
+                                        onChange={(e) => {
+                                            field.onChange(e)
+                                            handleNameChange(e)
+                                        }}
+                                    />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                    <FormField
+                        control={form.control}
+                        name="domain"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Organization Domain</FormLabel>
+                                <FormControl>
+                                    <div className="flex items-center">
+                                        <Input placeholder="aperature-labs" {...field} className="w-1/2" />
+                                        <span className="ml-2">.sourcebot.dev</span>
+                                    </div>
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                    {errorMessage && <p className="text-red-500">{errorMessage}</p>}
+                    <div className="flex justify-center">
+                        <Button type="submit">Create</Button>
+                    </div>
+                </form>
+            </Form>
+        </div>
+    )
+}

packages/web/src/app/onboard/components/trialInfoCard.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/components/ui/card";
+import { Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import logoDark from "@/public/sb_logo_dark_large.png";
+import logoLight from "@/public/sb_logo_light_large.png";
+import Image from "next/image";
+
+import { setupInitialStripeCustomer } from "../../../actions"
+import {
+    EmbeddedCheckout,
+    EmbeddedCheckoutProvider
+  } from '@stripe/react-stripe-js'
+  import { loadStripe } from '@stripe/stripe-js'
+import { useState } from "react";
+import { OnboardingFormValues } from "./orgCreateForm";
+import { isServiceError } from "@/lib/utils";
+
+const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!)
+
+export function TrialCard({ orgCreateInfo }: { orgCreateInfo: OnboardingFormValues }) {
+  const [trialAck, setTrialAck] = useState(false);
+
+  return (
+    <div>
+    {trialAck ? (
+        <div id="checkout">
+        <EmbeddedCheckoutProvider
+          stripe={stripePromise}
+          options={{ fetchClientSecret: async () => {
+            const clientSecret = await setupInitialStripeCustomer(orgCreateInfo.name, orgCreateInfo.domain);
+            if (isServiceError(clientSecret)) {
+              throw clientSecret;
+            }
+            return clientSecret;
+          } }}
+        >
+          <EmbeddedCheckout />
+        </EmbeddedCheckoutProvider>
+        </div>
+      ) :
+      <Card className="w-full max-w-md mx-auto">
+          <CardHeader>
+            <div className="flex justify-center mb-4">
+              <Image
+                src={logoDark || "/placeholder.svg"}
+                className="h-16 w-auto hidden dark:block"
+                alt="Sourcebot logo"
+                priority={true}
+              />
+              <Image
+                src={logoLight || "/placeholder.svg"}
+                className="h-16 w-auto block dark:hidden"
+                alt="Sourcebot logo"
+                priority={true}
+              />
+            </div>
+            <CardTitle className="text-center text-2xl font-bold">7 day free trial</CardTitle>
+            <CardDescription className="text-center mt-2">Cancel anytime. No credit card required.</CardDescription>
+          </CardHeader>
+          <CardContent className="pt-2">
+            <ul className="space-y-4 mb-6">
+              {[
+                "Blazingly fast code search",
+                "Index hundreds of repos from multiple code hosts (GitHub, GitLab, Gerrit, Gitea, etc.). Self-hosted code sources supported.",
+                "Public and private repos supported.",
+                "Create sharable links to code snippets.",
+                "Powerful regex and symbol search",
+              ].map((feature, index) => (
+                <li key={index} className="flex items-center">
+                  <div className="mr-3 flex-shrink-0">
+                    <Check className="h-5 w-5 text-sky-500" />
+                  </div>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">{feature}</p>
+                </li>
+              ))}
+            </ul>
+            <div className="flex justify-center mt-8">
+              <Button onClick={() => setTrialAck(true)} className="px-8 py-2">
+                Start trial
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+    }
+    </div>
+  )
+}

packages/web/src/app/onboard/page.tsx

@@ -1,98 +1,35 @@
-"use client"
+"use client";
 
-import { useState } from "react"
+import { useState, useEffect} from "react";
-import { zodResolver } from "@hookform/resolvers/zod"
+import { OrgCreateForm, OnboardingFormValues } from "./components/orgCreateForm";
-import { useForm } from "react-hook-form"
+import { TrialCard } from "./components/trialInfoCard";
-import * as z from "zod"
+import { isAuthed } from "@/actions";
+import { useRouter } from "next/navigation";
 
-import { Button } from "@/components/ui/button"
+export default function Onboarding() {
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
+    const router = useRouter();
-import { Input } from "@/components/ui/input"
+    const [orgCreateInfo, setOrgInfo] = useState<OnboardingFormValues | undefined>(undefined);
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
-import { createOrg } from "@/actions"
 
-const formSchema = z.object({
+    useEffect(() => {
-  organizationName: z.string().min(2, {
+        const redirectIfNotAuthed = async () => {
-    message: "Organization name must be at least 2 characters.",
+            const authed = await isAuthed();
-  }),
+            if(!authed) {
-  organizationDomain: z.string().regex(/^[a-z-]+$/, {
+                router.push("/login");
-    message: "Domain can only contain lowercase letters and dashes.",
+            }
-  }),
+        }
-})
 
-export default function Onboard() {
+        redirectIfNotAuthed();
-  const [_defaultDomain, setDefaultDomain] = useState("");
+    }, []);
 
-  const form = useForm<z.infer<typeof formSchema>>({
+    return (
-    resolver: zodResolver(formSchema),
+        <div className="flex flex-col justify-center items-center h-screen">
-    defaultValues: {
+            {orgCreateInfo ? (
-      organizationName: "",
+                <TrialCard orgCreateInfo={ orgCreateInfo } />
-      organizationDomain: "",
+            ) : (
-    },
+                <div className="flex flex-col items-center border p-16 rounded-lg gap-6">
-  })
+                    <OrgCreateForm setOrgCreateData={setOrgInfo} />
-
+                </div>
-  function onSubmit(values: z.infer<typeof formSchema>) {
+            )}
-    createOrg(values.organizationName, values.organizationDomain)
+        </div>
-        .then(() => {
+    );
-        })
-  }
-
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const name = e.target.value
-    const domain = name.toLowerCase().replace(/\s+/g, "-")
-    setDefaultDomain(domain)
-    form.setValue("organizationDomain", domain)
-  }
-
-  return (
-    <Card className="w-full max-w-md mx-auto">
-      <CardHeader>
-        <CardTitle>Create Organization</CardTitle>
-        <CardDescription>Enter your organization details below.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-            <FormField
-              control={form.control}
-              name="organizationName"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Organization Name</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="Acme Inc"
-                      {...field}
-                      onChange={(e) => {
-                        field.onChange(e)
-                        handleNameChange(e)
-                      }}
-                    />
-                  </FormControl>
-                  <FormDescription>{`This is your organization's full name.`}</FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="organizationDomain"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Organization Domain</FormLabel>
-                  <FormControl>
-                    <Input placeholder="acme-inc" {...field} />
-                  </FormControl>
-                  <FormDescription>{`This will be used for your organization's URL.`}</FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <Button type="submit">Submit</Button>
-          </form>
-        </Form>
-      </CardContent>
-    </Card>
-  )
 }
-

packages/web/src/app/redeem/components/acceptInviteButton.tsx

@@ -26,7 +26,7 @@ export function AcceptInviteButton({ invite, userId }: AcceptInviteButtonProps)
                 console.log("Failed to redeem invite: ", res)
                 toast({
                     title: "Error",
-                    description: "Failed to redeem invite. Please try again.",
+                    description: "Failed to redeem invite. Please ensure the organization has an active subscription.",
                     variant: "destructive",
                 })
             } else {

packages/web/src/app/redeem/page.tsx

@@ -3,6 +3,11 @@ import { notFound, redirect } from 'next/navigation';
 import { auth } from "@/auth";
 import { getUser } from "@/data/user";
 import { AcceptInviteButton } from "./components/acceptInviteButton"
+import Image from "next/image";
+import logoDark from "@/public/sb_logo_dark_large.png";
+import logoLight from "@/public/sb_logo_light_large.png";
+import { fetchSubscription } from "@/actions";
+import { isServiceError } from "@/lib/utils";
 
 interface RedeemPageProps {
     searchParams?: {
@@ -23,9 +28,23 @@ export default async function RedeemPage({ searchParams }: RedeemPageProps) {
 
     if (!invite) {
         return (
-            <div>
+            <div className="flex flex-col justify-center items-center mt-8 mb-8 md:mt-18 w-full px-5">
-                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+                <div className="max-h-44 w-auto mb-4">
-                    <h1>This invite either expired or was revoked. Contact your organization owner.</h1>
+                    <Image
+                        src={logoDark}
+                        className="h-18 md:h-40 w-auto hidden dark:block"
+                        alt={"Sourcebot logo"}
+                        priority={true}
+                    />
+                    <Image
+                        src={logoLight}
+                        className="h-18 md:h-40 w-auto block dark:hidden"
+                        alt={"Sourcebot logo"}
+                        priority={true}
+                    />
+                </div>
+                <div className="flex justify-center items-center">
+                    <h1>This invite has either expired or was revoked. Contact your organization owner.</h1>
                 </div>
             </div>
         );
@@ -42,32 +61,101 @@ export default async function RedeemPage({ searchParams }: RedeemPageProps) {
     if (user) {
         if (user.email !== invite.recipientEmail) {
             return (
-                <div>
+                <div className="flex flex-col justify-center items-center mt-8 mb-8 md:mt-18 w-full px-5">
-                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+                    <div className="max-h-44 w-auto mb-4">
-                        <h1>Sorry this invite does not belong to you.</h1>
+                        <Image
+                            src={logoDark}
+                            className="h-18 md:h-40 w-auto hidden dark:block"
+                            alt={"Sourcebot logo"}
+                            priority={true}
+                        />
+                        <Image
+                            src={logoLight}
+                            className="h-18 md:h-40 w-auto block dark:hidden"
+                            alt={"Sourcebot logo"}
+                            priority={true}
+                        />
+                    </div>
+                    <div className="flex justify-center items-center">
+                        <h1>This invite doesn't belong to you. You're currenly signed in with ${user.email}</h1>
                     </div>
                 </div>
             )
         } else {
-            const orgName = await prisma.org.findUnique({
+            const org = await prisma.org.findUnique({
                 where: { id: invite.orgId },
-                select: { name: true },
             });
 
-            if (!orgName) {
+            if (!org) {
                 return (
-                    <div>
+                    <div className="flex flex-col justify-center items-center mt-8 mb-8 md:mt-18 w-full px-5">
-                        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+                        <div className="max-h-44 w-auto mb-4">
-                            <h1>Organization not found. Please contact the invite sender.</h1>
+                            <Image
+                                src={logoDark}
+                                className="h-18 md:h-40 w-auto hidden dark:block"
+                                alt={"Sourcebot logo"}
+                                priority={true}
+                            />
+                            <Image
+                                src={logoLight}
+                                className="h-18 md:h-40 w-auto block dark:hidden"
+                                alt={"Sourcebot logo"}
+                                priority={true}
+                            />
+                        </div>
+                        <div className="flex justify-center items-center">
+                            <h1>This organization wasn't found. Please contact your organization owner.</h1>
                         </div>
                     </div>
                 )
             }
 
+            const stripeCustomerId = org.stripeCustomerId;
+            if (stripeCustomerId) {
+                const subscription = await fetchSubscription(org.domain);
+                if (isServiceError(subscription)) {
+                    return (
+                        <div className="flex flex-col justify-center items-center mt-8 mb-8 md:mt-18 w-full px-5">
+                            <div className="max-h-44 w-auto mb-4">
+                                <Image
+                                    src={logoDark}
+                                    className="h-18 md:h-40 w-auto hidden dark:block"
+                                    alt={"Sourcebot logo"}
+                                    priority={true}
+                                />
+                                <Image
+                                    src={logoLight}
+                                    className="h-18 md:h-40 w-auto block dark:hidden"
+                                    alt={"Sourcebot logo"}
+                                    priority={true}
+                                />
+                            </div>
+                            <div className="flex justify-center items-center">
+                                <h1>This organization's subscription has expired. Please renew the subscription and try again.</h1>
+                            </div>
+                        </div>
+                    )
+                }
+            }
+
             return (
-                <div>
+                <div className="flex flex-col justify-center items-center mt-8 mb-8 md:mt-18 w-full px-5">
-                    <div className="flex justify-between items-center h-screen px-6">
+                    <div className="max-h-44 w-auto mb-4">
-                        <h1 className="text-2xl font-bold">You have been invited to org {orgName.name}</h1>
+                        <Image
+                            src={logoDark}
+                            className="h-18 md:h-40 w-auto hidden dark:block"
+                            alt={"Sourcebot logo"}
+                            priority={true}
+                        />
+                        <Image
+                            src={logoLight}
+                            className="h-18 md:h-40 w-auto block dark:hidden"
+                            alt={"Sourcebot logo"}
+                            priority={true}
+                        />
+                    </div>
+                    <div className="flex justify-between items-center w-full max-w-2xl">
+                        <h1 className="text-2xl font-bold">You have been invited to org {org.name}</h1>
                         <AcceptInviteButton invite={invite} userId={user.id} />
                     </div>
                 </div>

packages/web/src/components/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

packages/web/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

packages/web/src/components/ui/input.tsx

@@ -2,16 +2,13 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export interface InputProps
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}

packages/web/src/components/ui/sheet.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

packages/web/src/components/ui/sidebar.tsx

@@ -0,0 +1,763 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import { PanelLeft } from "lucide-react"
+
+import { useIsMobile } from "@/components/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import { Sheet, SheetContent } from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContext = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContext | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value
+        if (setOpenProp) {
+          setOpenProp(openState)
+        } else {
+          _setOpen(openState)
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault()
+          toggleSidebar()
+        }
+      }
+
+      window.addEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener("keydown", handleKeyDown)
+    }, [toggleSidebar])
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed"
+
+    const contextValue = React.useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right"
+    variant?: "sidebar" | "floating" | "inset"
+    collapsible?: "offcanvas" | "icon" | "none"
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden md:block text-sidebar-foreground"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={cn(
+            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarRail.displayName = "SidebarRail"
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInput.displayName = "SidebarInput"
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+})
+SidebarSeparator.displayName = "SidebarSeparator"
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarGroup.displayName = "SidebarGroup"
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupAction.displayName = "SidebarGroupAction"
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+))
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+))
+SidebarMenu.displayName = "SidebarMenu"
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+))
+SidebarMenuItem.displayName = "SidebarMenuItem"
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    const { isMobile, state } = useSidebar()
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
+
+    if (!tooltip) {
+      return button
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      }
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    )
+  }
+)
+SidebarMenuButton.displayName = "SidebarMenuButton"
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    showOnHover?: boolean
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuAction.displayName = "SidebarMenuAction"
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuBadge.displayName = "SidebarMenuBadge"
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 flex-1 max-w-[--skeleton-width]"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+})
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuSub.displayName = "SidebarMenuSub"
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean
+    size?: "sm" | "md"
+    isActive?: boolean
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

packages/web/src/lib/environment.ts

@@ -12,4 +12,7 @@ export const AUTH_GITHUB_CLIENT_ID = getEnv(process.env.AUTH_GITHUB_CLIENT_ID);
 export const AUTH_GITHUB_CLIENT_SECRET = getEnv(process.env.AUTH_GITHUB_CLIENT_SECRET);
 export const AUTH_GOOGLE_CLIENT_ID = getEnv(process.env.AUTH_GOOGLE_CLIENT_ID);
 export const AUTH_GOOGLE_CLIENT_SECRET = getEnv(process.env.AUTH_GOOGLE_CLIENT_SECRET);
-export const AUTH_URL = getEnv(process.env.AUTH_URL);
+export const AUTH_URL = getEnv(process.env.AUTH_URL)!;
+
+export const STRIPE_SECRET_KEY = getEnv(process.env.STRIPE_SECRET_KEY);
+export const STRIPE_PRODUCT_ID = getEnv(process.env.STRIPE_PRODUCT_ID);

packages/web/src/lib/errorCodes.ts

@@ -5,7 +5,11 @@ export enum ErrorCode {
     REPOSITORY_NOT_FOUND = 'REPOSITORY_NOT_FOUND',
     FILE_NOT_FOUND = 'FILE_NOT_FOUND',
     INVALID_REQUEST_BODY = 'INVALID_REQUEST_BODY',
+    SELF_INVITE = 'SELF_INVITE',
     NOT_AUTHENTICATED = 'NOT_AUTHENTICATED',
     NOT_FOUND = 'NOT_FOUND',
     CONNECTION_SYNC_ALREADY_SCHEDULED = 'CONNECTION_SYNC_ALREADY_SCHEDULED',
+    ORG_DOMAIN_ALREADY_EXISTS = 'ORG_DOMAIN_ALREADY_EXISTS',
+    ORG_INVALID_SUBSCRIPTION = 'ORG_INVALID_SUBSCRIPTION',
+    MEMBER_NOT_FOUND = 'MEMBER_NOT_FOUND',
 }

packages/web/src/lib/serviceError.ts

@@ -83,4 +83,20 @@ export const notFound = (): ServiceError => {
         errorCode: ErrorCode.NOT_FOUND,
         message: "Not found",
     }
+}
+
+export const orgDomainExists = (): ServiceError => {
+    return {
+        statusCode: StatusCodes.CONFLICT,
+        errorCode: ErrorCode.ORG_DOMAIN_ALREADY_EXISTS,
+        message: "Organization domain already exists, please try a different one.",
+    }
+}
+
+export const orgInvalidSubscription = (): ServiceError => {
+    return {
+        statusCode: StatusCodes.BAD_REQUEST,
+        errorCode: ErrorCode.ORG_INVALID_SUBSCRIPTION,
+        message: "Invalid subscription",
+    }
 }

packages/web/src/lib/stripe.ts

@@ -0,0 +1,6 @@
+import 'server-only';
+
+import Stripe from 'stripe'
+import { STRIPE_SECRET_KEY } from './environment'
+
+export const stripe = new Stripe(STRIPE_SECRET_KEY!)

packages/web/tailwind.config.ts

@@ -10,71 +10,89 @@ const config = {
 	],
   prefix: "",
   theme: {
-    container: {
+  	container: {
-      center: true,
+  		center: true,
-      padding: "2rem",
+  		padding: '2rem',
-      screens: {
+  		screens: {
-        "2xl": "1400px",
+  			'2xl': '1400px'
-      },
+  		}
-    },
+  	},
-    extend: {
+  	extend: {
-      colors: {
+  		colors: {
-        border: "hsl(var(--border))",
+  			border: 'hsl(var(--border))',
-        input: "hsl(var(--input))",
+  			input: 'hsl(var(--input))',
-        ring: "hsl(var(--ring))",
+  			ring: 'hsl(var(--ring))',
-        background: "hsl(var(--background))",
+  			background: 'hsl(var(--background))',
-        foreground: "hsl(var(--foreground))",
+  			foreground: 'hsl(var(--foreground))',
-        primary: {
+  			primary: {
-          DEFAULT: "hsl(var(--primary))",
+  				DEFAULT: 'hsl(var(--primary))',
-          foreground: "hsl(var(--primary-foreground))",
+  				foreground: 'hsl(var(--primary-foreground))'
-        },
+  			},
-        secondary: {
+  			secondary: {
-          DEFAULT: "hsl(var(--secondary))",
+  				DEFAULT: 'hsl(var(--secondary))',
-          foreground: "hsl(var(--secondary-foreground))",
+  				foreground: 'hsl(var(--secondary-foreground))'
-        },
+  			},
-        destructive: {
+  			destructive: {
-          DEFAULT: "hsl(var(--destructive))",
+  				DEFAULT: 'hsl(var(--destructive))',
-          foreground: "hsl(var(--destructive-foreground))",
+  				foreground: 'hsl(var(--destructive-foreground))'
-        },
+  			},
-        muted: {
+  			muted: {
-          DEFAULT: "hsl(var(--muted))",
+  				DEFAULT: 'hsl(var(--muted))',
-          foreground: "hsl(var(--muted-foreground))",
+  				foreground: 'hsl(var(--muted-foreground))'
-        },
+  			},
-        accent: {
+  			accent: {
-          DEFAULT: "hsl(var(--accent))",
+  				DEFAULT: 'hsl(var(--accent))',
-          foreground: "hsl(var(--accent-foreground))",
+  				foreground: 'hsl(var(--accent-foreground))'
-        },
+  			},
-        popover: {
+  			popover: {
-          DEFAULT: "hsl(var(--popover))",
+  				DEFAULT: 'hsl(var(--popover))',
-          foreground: "hsl(var(--popover-foreground))",
+  				foreground: 'hsl(var(--popover-foreground))'
-        },
+  			},
-        card: {
+  			card: {
-          DEFAULT: "hsl(var(--card))",
+  				DEFAULT: 'hsl(var(--card))',
-          foreground: "hsl(var(--card-foreground))",
+  				foreground: 'hsl(var(--card-foreground))'
-        },
+  			},
-        highlight: "hsl(var(--highlight))",
+  			highlight: 'hsl(var(--highlight))',
-      },
+  			sidebar: {
-      borderRadius: {
+  				DEFAULT: 'hsl(var(--sidebar-background))',
-        lg: "var(--radius)",
+  				foreground: 'hsl(var(--sidebar-foreground))',
-        md: "calc(var(--radius) - 2px)",
+  				primary: 'hsl(var(--sidebar-primary))',
-        sm: "calc(var(--radius) - 4px)",
+  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-      },
+  				accent: 'hsl(var(--sidebar-accent))',
-      keyframes: {
+  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-        "accordion-down": {
+  				border: 'hsl(var(--sidebar-border))',
-          from: { height: "0" },
+  				ring: 'hsl(var(--sidebar-ring))'
-          to: { height: "var(--radix-accordion-content-height)" },
+  			}
-        },
+  		},
-        "accordion-up": {
+  		borderRadius: {
-          from: { height: "var(--radix-accordion-content-height)" },
+  			lg: 'var(--radius)',
-          to: { height: "0" },
+  			md: 'calc(var(--radius) - 2px)',
-        },
+  			sm: 'calc(var(--radius) - 4px)'
-      },
+  		},
-      animation: {
+  		keyframes: {
-        "accordion-down": "accordion-down 0.2s ease-out",
+  			'accordion-down': {
-        "accordion-up": "accordion-up 0.2s ease-out",
+  				from: {
-        "spin-slow": "spin 1.5s linear infinite",
+  					height: '0'
-      },
+  				},
-    },
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out',
+  			'spin-slow': 'spin 1.5s linear infinite'
+  		}
+  	}
   },
   plugins: [
     require("tailwindcss-animate"),

yarn.lock

@@ -2244,6 +2244,18 @@
     "@lezer/highlight" "^1.0.0"
     "@lezer/lr" "^1.0.0"
 
+"@stripe/react-stripe-js@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-3.1.1.tgz#78a2575683637f87c965a81cc1e0f626138f20f1"
+  integrity sha512-+JzYFgUivVD7koqYV7LmLlt9edDMAwKH7XhZAHFQMo7NeRC+6D2JmQGzp9tygWerzwttwFLlExGp4rAOvD6l9g==
+  dependencies:
+    prop-types "^15.7.2"
+
+"@stripe/stripe-js@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-5.6.0.tgz#cbb5b5f6110f870ca7de7e8ea3d189e9525a1019"
+  integrity sha512-w8CEY73X/7tw2KKlL3iOk679V9bWseE4GzNz3zlaYxcTjmcmWOathRb0emgo/QQ3eoNzmq68+2Y2gxluAv3xGw==
+
 "@swc/counter@^0.1.3":
   version "0.1.3"
   resolved "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz"
@@ -2349,6 +2361,13 @@
   dependencies:
     "@types/braces" "*"
 
+"@types/node@>=8.1.0":
+  version "22.13.4"
+  resolved "https://registry.npmjs.org/@types/node/-/node-22.13.4.tgz#3fe454d77cd4a2d73c214008b3e331bfaaf5038a"
+  integrity sha512-ywP2X0DYtX3y08eFVx5fNIw7/uIv8hYUKgXoK8oayJlLnKcRfEYCxWMVE1XagUdVtCJlZT1AU4LXEABW+L1Peg==
+  dependencies:
+    undici-types "~6.20.0"
+
 "@types/node@^20":
   version "20.16.10"
   resolved "https://registry.npmjs.org/@types/node/-/node-20.16.10.tgz"
@@ -3039,6 +3058,14 @@ cac@^6.7.14:
   resolved "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz"
   integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
 
+call-bind-apply-helpers@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz#4b5428c222be985d79c3d82657479dbe0b59b2d6"
+  integrity sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
 call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz"
@@ -3050,6 +3077,14 @@ call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
     get-intrinsic "^1.2.4"
     set-function-length "^1.2.1"
 
+call-bound@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/call-bound/-/call-bound-1.0.3.tgz#41cfd032b593e39176a71533ab4f384aa04fd681"
+  integrity sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    get-intrinsic "^1.2.6"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
@@ -3682,6 +3717,15 @@ dotenv@^16.4.5:
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz"
   integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==
 
+dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
 duplexer@~0.1.1:
   version "0.1.2"
   resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz"
@@ -3819,6 +3863,11 @@ es-define-property@^1.0.0:
   dependencies:
     get-intrinsic "^1.2.4"
 
+es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
 es-errors@^1.2.1, es-errors@^1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz"
@@ -4395,11 +4444,35 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@
     has-symbols "^1.0.3"
     hasown "^2.0.0"
 
+get-intrinsic@^1.2.5, get-intrinsic@^1.2.6:
+  version "1.2.7"
+  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz#dcfcb33d3272e15f445d15124bc0a216189b9044"
+  integrity sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    function-bind "^1.1.2"
+    get-proto "^1.0.0"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
+
 get-nonce@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz"
   integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
 
+get-proto@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
+
 get-symbol-description@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz"
@@ -4533,6 +4606,11 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
+gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
 graceful-fs@^4.1.2, graceful-fs@^4.2.11, graceful-fs@^4.2.4:
   version "4.2.11"
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
@@ -4589,6 +4667,11 @@ has-symbols@^1.0.2, has-symbols@^1.0.3:
   resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz"
   integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
 
+has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
 has-tostringtag@^1.0.0, has-tostringtag@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz"
@@ -5345,6 +5428,11 @@ markdown-it@^14.1.0:
     punycode.js "^2.3.1"
     uc.micro "^2.1.0"
 
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
 mdast-util-to-hast@^13.0.0:
   version "13.2.0"
   resolved "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz"
@@ -5649,6 +5737,11 @@ object-inspect@^1.13.1:
   resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz"
   integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
 
+object-inspect@^1.13.3:
+  version "1.13.4"
+  resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz#8375265e21bc20d0fa582c22e1b13485d6e00213"
+  integrity sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==
+
 object-is@^1.1.5:
   version "1.1.6"
   resolved "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz"
@@ -6045,7 +6138,7 @@ process@^0.11.10:
   resolved "https://registry.npmjs.org/process/-/process-0.11.10.tgz"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
-prop-types@^15.8.1:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -6088,6 +6181,13 @@ punycode@^2.1.0, punycode@^2.3.1:
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
+qs@^6.11.0:
+  version "6.14.0"
+  resolved "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz#c63fa40680d2c5c941412a0e899c89af60c0a930"
+  integrity sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==
+  dependencies:
+    side-channel "^1.1.0"
+
 qs@^6.12.2:
   version "6.13.0"
   resolved "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz"
@@ -6594,6 +6694,35 @@ shiki@1.29.1, shiki@^1.22.2:
     "@shikijs/vscode-textmate" "^10.0.1"
     "@types/hast" "^3.0.4"
 
+side-channel-list@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"
+  integrity sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+
+side-channel-map@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz#d6bb6b37902c6fef5174e5f533fab4c732a26f42"
+  integrity sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+
+side-channel-weakmap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz#11dda19d5368e40ce9ec2bdc1fb0ecbc0790ecea"
+  integrity sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+    side-channel-map "^1.0.1"
+
 side-channel@^1.0.4, side-channel@^1.0.6:
   version "1.0.6"
   resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz"
@@ -6604,6 +6733,17 @@ side-channel@^1.0.4, side-channel@^1.0.6:
     get-intrinsic "^1.2.4"
     object-inspect "^1.13.1"
 
+side-channel@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz#c3fcff9c4da932784873335ec9765fa94ff66bc9"
+  integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+    side-channel-list "^1.0.0"
+    side-channel-map "^1.0.1"
+    side-channel-weakmap "^1.0.2"
+
 siginfo@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz"
@@ -6877,6 +7017,14 @@ strip-json-comments@^5.0.1:
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-5.0.1.tgz"
   integrity sha512-0fk9zBqO67Nq5M/m45qHCJxylV/DhBlIOVExqgOMiCCrzrhU6tCibRXNqE3jwJLftzE9SNuZtYbpzcO+i9FiKw==
 
+stripe@^17.6.0:
+  version "17.6.0"
+  resolved "https://registry.npmjs.org/stripe/-/stripe-17.6.0.tgz#6495a42b7a20066e0d96068c362da793d684e79c"
+  integrity sha512-+HB6+SManp0gSRB0dlPmXO+io18krlAe0uimXhhIkL/RG/VIRigkfoM3QDJPkqbuSW0XsA6uzsivNCJU1ELEDA==
+  dependencies:
+    "@types/node" ">=8.1.0"
+    qs "^6.11.0"
+
 style-mod@^4.0.0, style-mod@^4.1.0:
   version "4.1.2"
   resolved "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz"
@@ -7235,6 +7383,11 @@ undici-types@~6.19.2:
   resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz"
   integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
 
+undici-types@~6.20.0:
+  version "6.20.0"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz#8171bf22c1f588d1554d55bf204bc624af388433"
+  integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==
+
 unist-util-is@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz"