From 38803f66964275f0020b8296bb3d4a02276d1165 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Mon, 8 Sep 2025 22:09:45 +0100
Subject: [PATCH] feat(cloud): show pro workspace features

---
 .../components/CustomURLConfirmation.tsx      |  61 -----------
 .../components/UpdateWorkspaceUrlForm.tsx     |   2 +-
 .../components/UpgradeToProConfirmation.tsx   | 103 ++++++++++++++++++
 apps/web/src/views/settings/index.tsx         |  34 +++++-
 4 files changed, 134 insertions(+), 66 deletions(-)
 delete mode 100644 apps/web/src/views/settings/components/CustomURLConfirmation.tsx
 create mode 100644 apps/web/src/views/settings/components/UpgradeToProConfirmation.tsx

diff --git a/apps/web/src/views/settings/components/CustomURLConfirmation.tsx b/apps/web/src/views/settings/components/CustomURLConfirmation.tsx
deleted file mode 100644
index 45bec735..00000000
--- a/apps/web/src/views/settings/components/CustomURLConfirmation.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { t } from "@lingui/core/macro";
-
-import { authClient } from "@kan/auth/client";
-
-import Button from "~/components/Button";
-import { useModal } from "~/providers/modal";
-import { usePopup } from "~/providers/popup";
-
-export function CustomURLConfirmation({
-  userId,
-  workspacePublicId,
-}: {
-  userId: string;
-  workspacePublicId: string;
-}) {
-  const { closeModal, entityId } = useModal();
-  const { showPopup } = usePopup();
-
-  const handleUpgrade = async () => {
-    const { data, error } = await authClient.subscription.upgrade({
-      plan: "pro",
-      referenceId: workspacePublicId,
-      metadata: { userId, workspacePublicId, workspaceSlug: entityId },
-      successUrl: "/settings",
-      cancelUrl: "/settings",
-      returnUrl: "/settings",
-      disableRedirect: true,
-    });
-
-    if (data?.url) {
-      window.location.href = data.url;
-    }
-
-    if (error) {
-      showPopup({
-        header: t`Error upgrading subscription`,
-        message: t`Please try again later, or contact customer support.`,
-        icon: "error",
-      });
-    }
-  };
-
-  return (
-    <div className="p-5">
-      <div className="flex w-full flex-col justify-between pb-4">
-        <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
-          {t`Confirm URL change`}
-        </h2>
-        <p className="text-sm font-medium text-light-900 dark:text-dark-900">
-          {t`Custom URLs are a premium feature. You'll be directed to upgrade your account.`}
-        </p>
-      </div>
-      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
-        <Button onClick={() => closeModal()} variant="secondary">
-          {t`Cancel`}
-        </Button>
-        <Button onClick={handleUpgrade}>{t`Upgrade`}</Button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx b/apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
index b71a8839..4205e3c7 100644
--- a/apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
+++ b/apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
@@ -98,7 +98,7 @@ const UpdateWorkspaceUrlForm = ({
     if (!isWorkspaceSlugAvailable?.isAvailable) return;
 
     if (workspacePlan !== "pro" && env("NEXT_PUBLIC_KAN_ENV") === "cloud")
-      return openModal("UPDATE_WORKSPACE_URL", data.slug);
+      return openModal("UPGRADE_TO_PRO", data.slug);
 
     updateWorkspaceSlug.mutate({
       workspacePublicId,
diff --git a/apps/web/src/views/settings/components/UpgradeToProConfirmation.tsx b/apps/web/src/views/settings/components/UpgradeToProConfirmation.tsx
new file mode 100644
index 00000000..b25a3980
--- /dev/null
+++ b/apps/web/src/views/settings/components/UpgradeToProConfirmation.tsx
@@ -0,0 +1,103 @@
+import { t } from "@lingui/core/macro";
+import { HiBolt, HiCheckBadge } from "react-icons/hi2";
+
+import { authClient } from "@kan/auth/client";
+
+import Button from "~/components/Button";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+
+export function UpgradeToProConfirmation({
+  userId,
+  workspacePublicId,
+}: {
+  userId: string;
+  workspacePublicId: string;
+}) {
+  const { closeModal, entityId } = useModal();
+  const { showPopup } = usePopup();
+
+  const handleUpgrade = async () => {
+    const { data, error } = await authClient.subscription.upgrade({
+      plan: "pro",
+      referenceId: workspacePublicId,
+      metadata: {
+        userId,
+        workspacePublicId,
+        ...(entityId && { workspaceSlug: entityId }),
+      },
+      successUrl: "/settings",
+      cancelUrl: "/settings",
+      returnUrl: "/settings",
+      disableRedirect: true,
+    });
+
+    if (data?.url) {
+      window.location.href = data.url;
+    }
+
+    if (error) {
+      showPopup({
+        header: t`Error upgrading subscription`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    }
+  };
+
+  return (
+    <div className="p-5">
+      <div className="flex w-full flex-col justify-between pb-4">
+        <h2 className="text-md pb-4 font-bold text-neutral-900 dark:text-dark-1000">
+          {t`Upgrade to Pro`}
+        </h2>
+        <p className="mb-4 text-sm font-medium text-light-900 dark:text-dark-900">
+          {t`Supercharge your workspace for just $29/month. Here's what you'll get:`}
+        </p>
+
+        <div className="rounded-md bg-light-100 p-3 text-xs text-light-900 dark:bg-dark-200 dark:text-dark-900">
+          <div className="space-y-3">
+            <div className="flex items-center space-x-3">
+              <HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
+              <div className="flex items-center space-x-2">
+                <span className="text-sm text-neutral-900 dark:text-dark-1000">
+                  {t`Unlimited members`}
+                </span>
+                <span className="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-600 ring-1 ring-inset ring-emerald-500/20 dark:text-emerald-400 sm:text-[10px]">
+                  {t`Launch offer`}
+                </span>
+              </div>
+            </div>
+            <div className="flex items-center space-x-3">
+              <HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
+              <span className="text-sm text-neutral-900 dark:text-dark-1000">
+                {t`Custom workspace URL`}
+              </span>
+            </div>
+            <div className="flex items-center space-x-3">
+              <HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
+              <span className="text-sm text-neutral-900 dark:text-dark-1000">
+                {t`Board analytics (coming soon)`}
+              </span>
+            </div>
+            <div className="flex items-center space-x-3">
+              <HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
+              <span className="text-sm text-neutral-900 dark:text-dark-1000">
+                {t`Priority email support`}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
+        <Button onClick={() => closeModal()} variant="secondary">
+          {t`Cancel`}
+        </Button>
+        <Button
+          onClick={handleUpgrade}
+          iconRight={<HiBolt />}
+        >{t`Upgrade`}</Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/views/settings/index.tsx b/apps/web/src/views/settings/index.tsx
index 356c886f..10f3459a 100644
--- a/apps/web/src/views/settings/index.tsx
+++ b/apps/web/src/views/settings/index.tsx
@@ -2,7 +2,10 @@ import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
 import { useEffect, useRef } from "react";
-import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
+import { HiBolt, HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
+
+import type { Subscription } from "@kan/shared/utils";
+import { hasActiveSubscription } from "@kan/shared/utils";
 
 import Button from "~/components/Button";
 import FeedbackModal from "~/components/FeedbackModal";
@@ -17,13 +20,13 @@ import { api } from "~/utils/api";
 import Avatar from "./components/Avatar";
 import { ChangePasswordFormConfirmation } from "./components/ChangePasswordConfirmation";
 import CreateAPIKeyForm from "./components/CreateAPIKeyForm";
-import { CustomURLConfirmation } from "./components/CustomURLConfirmation";
 import { DeleteAccountConfirmation } from "./components/DeleteAccountConfirmation";
 import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
 import UpdateDisplayNameForm from "./components/UpdateDisplayNameForm";
 import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
 import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
 import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
+import { UpgradeToProConfirmation } from "./components/UpgradeToProConfirmation";
 
 export default function SettingsPage() {
   const { modalContentType, openModal, isOpen } = useModal();
@@ -37,6 +40,14 @@ export default function SettingsPage() {
     env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
   const { data } = api.user.getUser.useQuery();
 
+  const { data: workspaceData } = api.workspace.byId.useQuery({
+    workspacePublicId: workspace.publicId,
+  });
+
+  const subscriptions = workspaceData?.subscriptions as
+    | Subscription[]
+    | undefined;
+
   const {
     data: integrations,
     refetch: refetchIntegrations,
@@ -180,6 +191,18 @@ export default function SettingsPage() {
                 workspacePublicId={workspace.publicId}
                 workspaceDescription={workspace.description ?? ""}
               />
+
+              {env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
+                !hasActiveSubscription(subscriptions, "pro") && (
+                  <div className="mt-8">
+                    <Button
+                      onClick={() => openModal("UPGRADE_TO_PRO")}
+                      iconRight={<HiBolt />}
+                    >
+                      {t`Upgrade to Pro`}
+                    </Button>
+                  </div>
+                )}
             </div>
 
             <div className="mb-8 border-t border-light-300 dark:border-dark-300">
@@ -346,9 +369,12 @@ export default function SettingsPage() {
 
             <Modal
               modalSize="sm"
-              isVisible={isOpen && modalContentType === "UPDATE_WORKSPACE_URL"}
+              isVisible={isOpen && modalContentType === "UPGRADE_TO_PRO"}
             >
-              <CustomURLConfirmation workspacePublicId={workspace.publicId} />
+              <UpgradeToProConfirmation
+                userId={data?.id ?? ""}
+                workspacePublicId={workspace.publicId}
+              />
             </Modal>
 
             <Modal