feat(cloud): unlimited seats (#166)

* feat: add unlimitedSeats to subscription

* feat: set unlimited seats to true for pro plans

* feat: add unlimited invites messaging

* feat: upgrade to pro via auth client

* feat: add subscription repo funcs

* chore: move subscription utils to shared

* feat: skip updating subscription if unlimited seats

apps/web/src/views/members/components/InviteMemberForm.tsx

@@ -7,7 +7,9 @@ import { HiXMark } from "react-icons/hi2";
 import { z } from "zod";
 
 import type { InviteMemberInput } from "@kan/api/types";
+import type { Subscription } from "@kan/shared/utils";
 import { authClient } from "@kan/auth/client";
+import { getSubscriptionByPlan } from "@kan/shared/utils";
 
 import Button from "~/components/Button";
 import Input from "~/components/Input";
@@ -19,20 +21,13 @@ import { api } from "~/utils/api";
 
 export function InviteMemberForm({
   numberOfMembers,
-  activeTeamSubscription,
+  subscriptions,
+  unlimitedSeats,
   userId,
 }: {
   numberOfMembers: number;
-  activeTeamSubscription:
-    | {
-        id: number | null;
-        plan: string;
-        status: string;
-        seats: number | null;
-        periodStart: Date | null;
-        periodEnd: Date | null;
-      }
-    | undefined;
+  subscriptions: Subscription[] | undefined;
+  unlimitedSeats: boolean;
   userId: string | undefined;
 }) {
   const utils = api.useUtils();
@@ -87,16 +82,19 @@ export function InviteMemberForm({
     },
   });
 
+  const teamSubscription = getSubscriptionByPlan(subscriptions, "team");
+  const proSubscription = getSubscriptionByPlan(subscriptions, "pro");
+
+  const hasTeamSubscription = !!teamSubscription;
+  const hasProSubscription = !!proSubscription;
+
   let isYearly = false;
   let price = t`$10/month`;
   let billingType = t`monthly billing`;
 
-  if (
-    activeTeamSubscription?.periodStart &&
-    activeTeamSubscription?.periodEnd
-  ) {
-    const periodStartDate = new Date(activeTeamSubscription.periodStart);
-    const periodEndDate = new Date(activeTeamSubscription.periodEnd);
+  if (teamSubscription?.periodStart && teamSubscription?.periodEnd) {
+    const periodStartDate = new Date(teamSubscription.periodStart);
+    const periodEndDate = new Date(teamSubscription.periodEnd);
     const diffInDays = Math.round(
       (periodEndDate.getTime() - periodStartDate.getTime()) /
         (1000 * 60 * 60 * 24),
@@ -163,7 +161,8 @@ export function InviteMemberForm({
           placeholder={t`Email`}
           disabled={
             env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
-            !activeTeamSubscription?.id
+            !hasTeamSubscription &&
+            !hasProSubscription
           }
           {...register("email", { required: true })}
           onKeyDown={async (e) => {
@@ -177,13 +176,15 @@ export function InviteMemberForm({
 
         {env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
           <div className="mt-3 rounded-md bg-light-100 p-3 text-xs text-light-900 dark:bg-dark-200 dark:text-dark-900">
-            {activeTeamSubscription?.id ? (
+            {hasTeamSubscription || hasProSubscription ? (
               <div>
                 <span className="font-medium text-emerald-500 dark:text-emerald-400">
-                  {t`Team Plan`}
+                  {hasTeamSubscription ? t`Team Plan` : t`Pro Plan ∞`}
                 </span>
                 <p className="mt-1">
-                  {t`Adding a new member will cost an additional ${price} (${billingType}) per seat.`}
+                  {unlimitedSeats
+                    ? t`You have unlimited seats with your Pro Plan. There is no additional charge for new members!`
+                    : t`Adding a new member will cost an additional ${price} (${billingType}) per seat.`}
                 </p>
               </div>
             ) : (
@@ -201,7 +202,7 @@ export function InviteMemberForm({
       </div>
 
       <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
-        {activeTeamSubscription?.id &&
+        {(hasTeamSubscription || hasProSubscription) &&
           env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
             <Toggle
               label={t`Invite another`}
@@ -213,7 +214,8 @@ export function InviteMemberForm({
           )}
         <div>
           {env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
-          !activeTeamSubscription?.id ? (
+          !hasTeamSubscription &&
+          !hasProSubscription ? (
             <Button
               type="button"
               onClick={handleUpgrade}

apps/web/src/views/members/index.tsx

@@ -3,7 +3,9 @@ import { env } from "next-runtime-env";
 import { HiEllipsisHorizontal, HiOutlinePlusSmall } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
 
+import type { Subscription } from "@kan/shared/utils";
 import { authClient } from "@kan/auth/client";
+import { getSubscriptionByPlan, hasUnlimitedSeats } from "@kan/shared/utils";
 
 import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
@@ -30,13 +32,12 @@ export default function MembersPage() {
 
   const { data: session } = authClient.useSession();
 
-  const subscription = data?.subscriptions;
+  const subscriptions = data?.subscriptions as Subscription[] | undefined;
 
-  const activeTeamSubscription = subscription?.find(
-    (sub: any) =>
-      sub.status === "active" ||
-      (sub.status === "trialing" && sub.plan === "team"),
-  );
+  const teamSubscription = getSubscriptionByPlan(subscriptions, "team");
+  const proSubscription = getSubscriptionByPlan(subscriptions, "pro");
+
+  const unlimitedSeats = hasUnlimitedSeats(subscriptions);
 
   const TableRow = ({
     memberPublicId,
@@ -175,13 +176,20 @@ export default function MembersPage() {
               <div
                 className={twMerge(
                   "flex items-center rounded-full border px-3 py-1 text-center text-xs",
-                  activeTeamSubscription
+                  teamSubscription || proSubscription
                     ? "border-emerald-300 bg-emerald-50 text-emerald-400 dark:border-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"
                     : "border-light-300 bg-light-50 text-light-1000 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900",
                 )}
               >
                 <span className="font-medium">
-                  {activeTeamSubscription ? t`Team Plan` : t`Free Plan`}
+                  {proSubscription
+                    ? t`Pro Plan`
+                    : teamSubscription
+                      ? t`Team Plan`
+                      : t`Free Plan`}
+                  {proSubscription && unlimitedSeats && (
+                    <span className="ml-1 text-xs">∞</span>
+                  )}
                 </span>
               </div>
             )}
@@ -268,7 +276,8 @@ export default function MembersPage() {
             <InviteMemberForm
               userId={session?.user.id}
               numberOfMembers={data?.members.length ?? 1}
-              activeTeamSubscription={activeTeamSubscription}
+              subscriptions={subscriptions}
+              unlimitedSeats={unlimitedSeats}
             />
           </Modal>
 

apps/web/src/views/settings/components/CustomURLConfirmation.tsx

@@ -1,37 +1,42 @@
 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 () => {
-    try {
-      const response = await fetch("/api/stripe/create_checkout_session", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          slug: entityId,
-          workspacePublicId: workspacePublicId,
-          cancelUrl: "/settings",
-          successUrl: "/settings",
-        }),
+    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",
       });
-
-      const { url } = (await response.json()) as { url: string };
-
-      if (url) {
-        window.location.href = url;
-      }
-    } catch (error) {
-      console.error("Error creating checkout session:", error);
     }
   };