feat: billing portal

2025-01-03 15:12:31 +00:00
parent 67e714b8b0
commit 3ee0c0039c
14 changed files with 2383 additions and 693 deletions
--- a/apps/web/src/components/Input.tsx
+++ b/apps/web/src/components/Input.tsx
@@ -43,7 +43,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
      <div className="flex w-full flex-col gap-1">
        <div className="relative flex">
          {prefix && (
-            <div className="flex shrink-0 items-center rounded-l-md border border-r-0 border-light-600 px-3 text-base dark:border-dark-700 sm:text-sm/6">
+            <div className="flex shrink-0 items-center rounded-l-md border border-r-0 border-light-600 px-3 text-base dark:border-dark-700 dark:text-dark-1000 sm:text-sm/6">
              {prefix}
            </div>
          )}
--- a/apps/web/src/components/WorkspaceMenu.tsx
+++ b/apps/web/src/components/WorkspaceMenu.tsx
@@ -22,12 +22,17 @@ export default function WorkspaceMenu() {
          <Menu.Button className="mb-1 flex w-full items-center rounded-[5px] p-1.5 hover:bg-light-200 dark:hover:bg-dark-200">
            <span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-indigo-700">
              <span className="text-xs font-bold leading-none text-white">
-                {workspace?.name.charAt(0).toUpperCase()}
+                {workspace.name.charAt(0).toUpperCase()}
              </span>
            </span>
            <span className="ml-2 text-sm font-bold text-neutral-900 dark:text-dark-1000">
-              {workspace?.name}
+              {workspace.name}
            </span>
+            {workspace.plan === "pro" && (
+              <span className="ml-2 inline-flex items-center rounded-md bg-indigo-100 px-2 py-1 text-[10px] font-medium text-indigo-700">
+                Pro
+              </span>
+            )}
          </Menu.Button>
        )}
      </div>
@@ -53,14 +58,14 @@ export default function WorkspaceMenu() {
                    <div>
                      <span className="inline-flex h-5 w-5 items-center justify-center rounded-[5px] bg-indigo-700">
                        <span className="text-xs font-medium leading-none text-white">
-                          {availableWorkspace?.name.charAt(0).toUpperCase()}
+                          {availableWorkspace.name.charAt(0).toUpperCase()}
                        </span>
                      </span>
                      <span className="ml-2 text-xs font-medium">
-                        {availableWorkspace?.name}
+                        {availableWorkspace.name}
                      </span>
                    </div>
-                    {workspace?.name === availableWorkspace?.name && (
+                    {workspace.name === availableWorkspace.name && (
                      <span>
                        <HiCheck className="h-4 w-4" aria-hidden="true" />
                      </span>
--- a/apps/web/src/pages/api/stripe/create_billing_session.ts
+++ b/apps/web/src/pages/api/stripe/create_billing_session.ts
@@ -0,0 +1,73 @@
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+import { Stripe } from "stripe";
+
+import * as userRepo from "@kan/db/repository/user.repo";
+import { createNextClient } from "@kan/supabase/clients";
+
+const stripeSecretKey = process.env.STRIPE_SECRET_KEY;
+
+if (!stripeSecretKey) {
+  throw new Error("STRIPE_SECRET_KEY is not defined");
+}
+
+const stripe = new Stripe(stripeSecretKey, {
+  apiVersion: "2024-12-18.acacia",
+});
+
+export default async function handler(req: NextRequest) {
+  if (req.method !== "POST") {
+    return new Response(JSON.stringify({ error: "Method not allowed" }), {
+      status: 405,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  try {
+    const response = NextResponse.next();
+    const db = createNextClient(req, response);
+    const { data } = await db.auth.getUser();
+
+    if (!data.user) {
+      return new Response(JSON.stringify({ error: "Unauthorized" }), {
+        status: 403,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+
+    const user = await userRepo.getById(db, data.user.id);
+
+    if (!user?.stripeCustomerId) {
+      return new Response(
+        JSON.stringify({ error: "No billing account found" }),
+        {
+          status: 404,
+          headers: { "Content-Type": "application/json" },
+        },
+      );
+    }
+
+    const session = await stripe.billingPortal.sessions.create({
+      customer: user.stripeCustomerId,
+      return_url: `${process.env.WEBSITE_URL}/settings`,
+    });
+
+    return new Response(JSON.stringify({ url: session.url }), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    });
+  } catch (error) {
+    console.error("Error:", error);
+    return new Response(
+      JSON.stringify({ error: "Error creating portal session" }),
+      {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      },
+    );
+  }
+}
+
+export const runtime = "edge";
+export const preferredRegion = "lhr1";
+export const dynamic = "force-dynamic";
--- a/apps/web/src/pages/api/stripe/webhook.ts
+++ b/apps/web/src/pages/api/stripe/webhook.ts
@@ -60,6 +60,7 @@ export default async function handler(req: NextRequest) {
            metaData.workspacePublicId,
            undefined,
            metaData.username,
+            "pro",
          );
        }
        break;
--- a/apps/web/src/providers/workspace.tsx
+++ b/apps/web/src/providers/workspace.tsx
@@ -15,12 +15,14 @@ interface Workspace {
  name: string;
  publicId: string;
  slug: string;
+  plan: "free" | "pro" | "enterprise";
 }

 const initialWorkspace: Workspace = {
  name: "",
  publicId: "",
  slug: "",
+  plan: "free",
 };

 const initialAvailableWorkspaces: Workspace[] = [];
@@ -63,6 +65,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
            publicId: workspace.publicId,
            name: workspace.name,
            slug: workspace.slug,
+            plan: workspace.plan,
          };
        })
        .filter((workspace) => workspace !== null) as Workspace[];
@@ -82,6 +85,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
        publicId: selectedWorkspace.workspace.publicId,
        name: selectedWorkspace.workspace.name,
        slug: selectedWorkspace.workspace.slug,
+        plan: selectedWorkspace.workspace.plan,
      });
    } else {
      const primaryWorkspace = data[0]?.workspace;
@@ -91,6 +95,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
        publicId: primaryWorkspace.publicId,
        name: primaryWorkspace.name,
        slug: primaryWorkspace.slug,
+        plan: primaryWorkspace.plan,
      });
    }
  }, [data]);
--- a/apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
+++ b/apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
@@ -27,9 +27,11 @@ type FormValues = z.infer<typeof schema>;
 const UpdateWorkspaceUrlForm = ({
  workspacePublicId,
  workspaceUrl,
+  workspacePlan,
 }: {
  workspacePublicId: string;
  workspaceUrl: string;
+  workspacePlan: "free" | "pro" | "enterprise";
 }) => {
  const utils = api.useUtils();
  const { showPopup } = usePopup();
@@ -84,7 +86,7 @@ const UpdateWorkspaceUrlForm = ({
  const isWorkspaceSlugAvailable = checkWorkspaceSlugAvailability.data;

  const onSubmit = (data: FormValues) => {
-    if (isWorkspaceSlugAvailable?.isPremium)
+    if (isWorkspaceSlugAvailable?.isPremium && workspacePlan !== "pro")
      return openModal("PREMIUM_USERNAME", data.slug);

    updateWorkspaceSlug.mutate({
@@ -99,7 +101,10 @@ const UpdateWorkspaceUrlForm = ({
        <Input
          {...register("slug")}
          className={`${
-            isWorkspaceSlugAvailable?.isPremium ? "focus:ring-yellow-500" : ""
+            isWorkspaceSlugAvailable?.isPremium ||
+            (workspacePlan === "pro" && slug === workspaceUrl)
+              ? "focus:ring-yellow-500 dark:focus:ring-yellow-500"
+              : ""
          }`}
          errorMessage={
            errors.slug?.message ||
@@ -109,10 +114,11 @@ const UpdateWorkspaceUrlForm = ({
          }
          prefix="kan.bn/"
          iconRight={
-            isWorkspaceSlugAvailable?.isPremium ? (
+            isWorkspaceSlugAvailable?.isPremium ||
+            (workspacePlan === "pro" && slug === workspaceUrl) ? (
              <HiMiniStar className="h-4 w-4 text-yellow-500" />
            ) : isWorkspaceSlugAvailable?.isAvailable ? (
-              <HiCheck className="h-4 w-4" />
+              <HiCheck className="h-4 w-4 dark:text-dark-1000" />
            ) : null
          }
        />
--- a/apps/web/src/views/settings/index.tsx
+++ b/apps/web/src/views/settings/index.tsx
@@ -1,5 +1,8 @@
+import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
+
 import Button from "~/components/Button";
 import Modal from "~/components/modal";
+import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
@@ -12,60 +15,101 @@ export default function SettingsPage() {
  const { modalContentType, openModal } = useModal();
  const { workspace } = useWorkspace();

+  const handleOpenBillingPortal = async () => {
+    try {
+      const response = await fetch("/api/stripe/create_billing_session", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const { url } = (await response.json()) as { url: string };
+
+      if (url) {
+        window.location.href = url;
+      }
+    } catch (error) {
+      console.error("Error creating billing session:", error);
+    }
+  };
+
  return (
    <>
-      <PageHead title={`Settings | ${workspace.name ?? "Workspace"}`} />
-      <div className="px-28 py-12">
-        <div className="mb-8 flex w-full justify-between">
-          <h1 className="font-medium tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
-            Settings
-          </h1>
+      <div className="flex h-full w-full flex-col overflow-hidden">
+        <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto">
+          <PageHead title={`Settings | ${workspace.name ?? "Workspace"}`} />
+          <div className="px-28 py-12">
+            <div className="mb-8 flex w-full justify-between">
+              <h1 className="font-medium tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+                Settings
+              </h1>
+            </div>
+
+            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                Workspace name
+              </h2>
+              <UpdateWorkspaceNameForm
+                workspacePublicId={workspace.publicId}
+                workspaceName={workspace.name}
+              />
+
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                Workspace username
+              </h2>
+              <UpdateWorkspaceUrlForm
+                workspacePublicId={workspace.publicId}
+                workspaceUrl={workspace.slug}
+                workspacePlan={workspace.plan}
+              />
+            </div>
+
+            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                Billing
+              </h2>
+              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                View and manage your billing and subscription.
+              </p>
+              <Button
+                variant="primary"
+                iconRight={<HiMiniArrowTopRightOnSquare />}
+                onClick={handleOpenBillingPortal}
+              >
+                Billing portal
+              </Button>
+            </div>
+
+            <div className="border-t border-light-300 dark:border-dark-300">
+              <h2 className="mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                Delete workspace
+              </h2>
+              <p className="mb-8 mt-2 text-sm text-neutral-500 dark:text-dark-900">
+                Once you delete your workspace, there is no going back. Please
+                be certain.
+              </p>
+              <Button
+                variant="primary"
+                onClick={() => openModal("DELETE_WORKSPACE")}
+              >
+                Delete workspace
+              </Button>
+            </div>
+          </div>
+
+          <Modal>
+            {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
+            {modalContentType === "DELETE_WORKSPACE" && (
+              <DeleteWorkspaceConfirmation />
+            )}
+            {modalContentType === "PREMIUM_USERNAME" && (
+              <PremiumUsernameConfirmation
+                workspacePublicId={workspace.publicId}
+              />
+            )}
+          </Modal>
        </div>
-
-        <div className="mb-8 border-t border-light-300 dark:border-dark-300">
-          <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-            Workspace name
-          </h2>
-          <UpdateWorkspaceNameForm
-            workspacePublicId={workspace.publicId}
-            workspaceName={workspace.name}
-          />
-
-          <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-            Workspace username
-          </h2>
-          <UpdateWorkspaceUrlForm
-            workspacePublicId={workspace.publicId}
-            workspaceUrl={workspace.slug}
-          />
-        </div>
-
-        <div className="border-t border-light-300 dark:border-dark-300">
-          <h2 className="mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-            Delete workspace
-          </h2>
-          <p className="mb-8 mt-2 text-sm text-neutral-500 dark:text-dark-900">
-            Once you delete your workspace, there is no going back. Please be
-            certain.
-          </p>
-          <Button
-            variant="primary"
-            onClick={() => openModal("DELETE_WORKSPACE")}
-          >
-            Delete workspace
-          </Button>
-        </div>
-
-        <Modal>
-          {modalContentType === "DELETE_WORKSPACE" && (
-            <DeleteWorkspaceConfirmation />
-          )}
-          {modalContentType === "PREMIUM_USERNAME" && (
-            <PremiumUsernameConfirmation
-              workspacePublicId={workspace.publicId}
-            />
-          )}
-        </Modal>
      </div>
    </>
  );