feat: billing portal

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
           }
         />

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>
     </>
   );