Implements new seats purchase logic and UI

Author: samejr

apps/webapp/app/presenters/TeamPresenter.server.ts

@@ -1,5 +1,5 @@
 import { getTeamMembersAndInvites } from "~/models/member.server";
-import { getLimit } from "~/services/platform.v3.server";
+import { getCurrentPlan, getLimit, getPlans } from "~/services/platform.v3.server";
 import { BasePresenter } from "./v3/basePresenter.server";
 
 export class TeamPresenter extends BasePresenter {
@@ -13,14 +13,31 @@ export class TeamPresenter extends BasePresenter {
       return;
     }
 
-    const limit = await getLimit(organizationId, "teamMembers", 100_000_000);
+    const [baseLimit, currentPlan, plans] = await Promise.all([
+      getLimit(organizationId, "teamMembers", 100_000_000),
+      getCurrentPlan(organizationId),
+      getPlans(),
+    ]);
+
+    const canPurchaseSeats =
+      currentPlan?.v3Subscription?.plan?.limits.teamMembers.canExceed === true;
+    const extraSeats = currentPlan?.v3Subscription?.addOns?.seats?.purchased ?? 0;
+    const maxSeatQuota = currentPlan?.v3Subscription?.addOns?.seats?.quota ?? 0;
+    const planSeatLimit = currentPlan?.v3Subscription?.plan?.limits.teamMembers.number ?? 0;
+    const seatPricing = plans?.addOnPricing.seats ?? null;
+    const limit = baseLimit + extraSeats;
 
     return {
       ...result,
       limits: {
         used: result.members.length + result.invites.length,
         limit,
       },
+      canPurchaseSeats,
+      extraSeats,
+      seatPricing,
+      maxSeatQuota,
+      planSeatLimit,
     };
   }
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx

@@ -1,6 +1,11 @@
 import { conform, list, requestIntent, useFieldList, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import { EnvelopeIcon, LockOpenIcon, UserPlusIcon } from "@heroicons/react/20/solid";
+import {
+  ArrowUpCircleIcon,
+  EnvelopeIcon,
+  LockOpenIcon,
+  UserPlusIcon,
+} from "@heroicons/react/20/solid";
 import type { ActionFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Form, useActionData } from "@remix-run/react";
@@ -28,7 +33,13 @@ import { redirectWithSuccessMessage } from "~/models/message.server";
 import { TeamPresenter } from "~/presenters/TeamPresenter.server";
 import { scheduleEmail } from "~/services/email.server";
 import { requireUserId } from "~/services/session.server";
-import { acceptInvitePath, organizationTeamPath, v3BillingPath } from "~/utils/pathBuilder";
+import {
+  acceptInvitePath,
+  inviteTeamMemberPath,
+  organizationTeamPath,
+  v3BillingPath,
+} from "~/utils/pathBuilder";
+import { PurchaseSeatsModal } from "../_app.orgs.$organizationSlug.settings.team/route";
 
 const Params = z.object({
   organizationSlug: z.string(),
@@ -122,7 +133,8 @@ export const action: ActionFunction = async ({ request, params }) => {
 };
 
 export default function Page() {
-  const { limits } = useTypedLoaderData<typeof loader>();
+  const { limits, canPurchaseSeats, seatPricing, extraSeats, maxSeatQuota, planSeatLimit } =
+    useTypedLoaderData<typeof loader>();
   const [total, setTotal] = useState(limits.used);
   const organization = useOrganization();
   const lastSubmission = useActionData();
@@ -150,25 +162,55 @@ export default function Page() {
           title="Invite team members"
           description={`Invite new team members to ${organization.title}.`}
         />
-        {total > limits.limit && (
-          <InfoPanel
-            variant="upgrade"
-            icon={LockOpenIcon}
-            iconClassName="text-indigo-500"
-            title="Unlock more team members"
-            accessory={
-              <LinkButton to={v3BillingPath(organization)} variant="secondary/small">
-                Upgrade
-              </LinkButton>
-            }
-            panelClassName="mb-4"
-          >
-            <Paragraph variant="small">
-              You've used all {limits.limit} of your available team members. Upgrade your plan to
-              add more.
-            </Paragraph>
-          </InfoPanel>
-        )}
+        {total > limits.limit &&
+          (canPurchaseSeats && seatPricing ? (
+            <InfoPanel
+              variant="upgrade"
+              icon={LockOpenIcon}
+              iconClassName="text-indigo-500"
+              title="Need more seats?"
+              accessory={
+                <PurchaseSeatsModal
+                  seatPricing={seatPricing}
+                  extraSeats={extraSeats}
+                  usedSeats={limits.used}
+                  maxQuota={maxSeatQuota}
+                  planSeatLimit={planSeatLimit}
+                  triggerButton={<Button variant="primary/small">Purchase more seats…</Button>}
+                  redirectTo={inviteTeamMemberPath(organization)}
+                />
+              }
+              panelClassName="mb-4"
+            >
+              <Paragraph variant="small">
+                You've used all {limits.limit} of your available team members. Purchase extra seats
+                to add more.
+              </Paragraph>
+            </InfoPanel>
+          ) : (
+            <InfoPanel
+              variant="upgrade"
+              icon={LockOpenIcon}
+              iconClassName="text-indigo-500"
+              title="Unlock more team members"
+              accessory={
+                <LinkButton
+                  to={v3BillingPath(organization)}
+                  variant="secondary/small"
+                  LeadingIcon={ArrowUpCircleIcon}
+                  leadingIconClassName="text-indigo-500"
+                >
+                  Upgrade
+                </LinkButton>
+              }
+              panelClassName="mb-4"
+            >
+              <Paragraph variant="small">
+                You've used all {limits.limit} of your available team members. Upgrade your plan to
+                add more.
+              </Paragraph>
+            </InfoPanel>
+          ))}
         <Form method="post" {...form.props}>
           <Fieldset>
             <InputGroup>