fix: show over-capacity warning when members exceed paid seats

Author: kof

apps/builder/app/dashboard/workspace/manage-members-dialog.test.ts

@@ -178,48 +178,4 @@ describe("computeAvailableSeats", () => {
       computeAvailableSeats(makeData({ maxSeats: 1, members }), optimistic)
     ).toBe(-2);
   });
-
-  test("confirmedMaxSeats overrides stale server maxSeats when higher", () => {
-    // Scenario: user confirmed paying for 2 extra seats but webhook hasn't fired.
-    // Server still returns maxSeats=3, but confirmedMaxSeats=5.
-    const members = [
-      {
-        userId: "u1",
-        email: "a@example.com",
-        relation: "editors" as const,
-        createdAt: "",
-        username: "",
-      },
-    ];
-    const pendingInvites = [
-      {
-        notificationId: "n1",
-        recipientId: "r1",
-        email: "b@example.com",
-        relation: "editors" as const,
-        createdAt: "",
-      },
-      {
-        notificationId: "n2",
-        recipientId: "r2",
-        email: "c@example.com",
-        relation: "editors" as const,
-        createdAt: "",
-      },
-    ];
-    // maxSeats=3 (stale), but 1 member + 2 pending = 3 occupied → would be 0 available.
-    // confirmedMaxSeats=5 → effectiveMax=5, available = 5-1-2 = 2.
-    expect(
-      computeAvailableSeats(
-        makeData({ maxSeats: 3, members, pendingInvites }),
-        [],
-        5
-      )
-    ).toBe(2);
-  });
-
-  test("confirmedMaxSeats is ignored when server maxSeats is already higher", () => {
-    // Webhook fired: server returns maxSeats=5, confirmedMaxSeats=4 (stale override).
-    expect(computeAvailableSeats(makeData({ maxSeats: 5 }), [], 4)).toBe(5);
-  });
 });

apps/builder/app/dashboard/workspace/manage-members-dialog.tsx

@@ -19,6 +19,7 @@ import {
   ScrollAreaNative,
   Select,
   Tooltip,
+  PanelBanner,
   css,
   theme,
 } from "@webstudio-is/design-system";
@@ -254,18 +255,11 @@ const computeAvailableSeats = (
         { success: true }
       >["data"]
     | undefined,
-  optimisticPending: OptimisticPendingInvite[],
-  // Optimistic upper bound for maxSeats set when extra seats are confirmed,
-  // to avoid flickering while the Stripe webhook has not yet updated TransactionLog.
-  confirmedMaxSeats?: number
+  optimisticPending: OptimisticPendingInvite[]
 ): number | undefined => {
   if (membersData === undefined) {
     return;
   }
-  const effectiveMaxSeats =
-    confirmedMaxSeats !== undefined
-      ? Math.max(membersData.maxSeats, confirmedMaxSeats)
-      : membersData.maxSeats;
   const knownEmails = new Set([
     membersData.owner.email,
     ...membersData.members.map((m) => m.email ?? ""),
@@ -275,7 +269,7 @@ const computeAvailableSeats = (
     (o) => !knownEmails.has(o.email)
   ).length;
   return (
-    effectiveMaxSeats -
+    membersData.maxSeats -
     membersData.members.length -
     membersData.pendingInvites.length -
     extraCount
@@ -435,10 +429,6 @@ export const ManageMembersDialog = ({
     relation: Role;
     extraSeats: number;
   }>();
-  // Optimistic maxSeats ceiling: set when the user confirms extra-seat charges so
-  // the footer and confirmation gate stay correct while the Stripe webhook is in
-  // flight (TransactionLog not yet updated).
-  const [confirmedMaxSeats, setConfirmedMaxSeats] = useState<number>();
   const formRef = useRef<HTMLFormElement>(null);
 
   const { load, data } = trpcClient.workspace.listMembers.useQuery();
@@ -453,22 +443,23 @@ export const ManageMembersDialog = ({
     }
   }, [isOpen, isOwner, load, workspace.id]);
 
-  // Clear the optimistic override once the server reflects the paid seats.
-  useEffect(() => {
-    if (
-      membersData !== undefined &&
-      confirmedMaxSeats !== undefined &&
-      membersData.maxSeats >= confirmedMaxSeats
-    ) {
-      setConfirmedMaxSeats(undefined);
-    }
-  }, [membersData, confirmedMaxSeats]);
+  const availableSeats = computeAvailableSeats(membersData, optimisticPending);
 
-  const availableSeats = computeAvailableSeats(
-    membersData,
-    optimisticPending,
-    confirmedMaxSeats
-  );
+  const syncSeatsMutation = trpcClient.workspace.syncSeats.useMutation();
+
+  const overCapacity =
+    availableSeats !== undefined && availableSeats < 0 ? -availableSeats : 0;
+
+  const handleSyncSeats = () => {
+    syncSeatsMutation.send({ workspaceId: workspace.id }, (result) => {
+      if (result && "error" in result) {
+        setErrors([result.error]);
+        return;
+      }
+      handleRefresh();
+      revalidator.revalidate();
+    });
+  };
 
   const performInvite = async (emails: string[], relation: Role) => {
     setErrors(undefined);
@@ -536,14 +527,6 @@ export const ManageMembersDialog = ({
           onConfirm={async () => {
             const confirm = pendingConfirm;
             setPendingConfirm(undefined);
-            // Optimistically raise confirmedMaxSeats so the footer and the
-            // confirmation gate reflect the payment before the webhook fires.
-            setConfirmedMaxSeats((prev) =>
-              Math.max(
-                prev ?? 0,
-                (membersData?.maxSeats ?? 0) + confirm.extraSeats
-              )
-            );
             await performInvite(confirm.emails, confirm.relation);
           }}
         />
@@ -554,7 +537,6 @@ export const ManageMembersDialog = ({
           onOpenChange(open);
           if (open === false) {
             setErrors(undefined);
-            setConfirmedMaxSeats(undefined);
           }
         }}
       >
@@ -599,6 +581,31 @@ export const ManageMembersDialog = ({
                 </Flex>
               </Flex>
             )}
+            {isOwner && overCapacity > 0 && (
+              <PanelBanner variant="warning">
+                <Flex direction="column" gap="2">
+                  <Text>
+                    {`Your workspace has ${overCapacity} more member${overCapacity === 1 ? "" : "s"} than your plan covers. Non-owner members won't be able to access the workspace until this is resolved.`}
+                  </Text>
+                  <Flex gap="2">
+                    <Button
+                      color="dark"
+                      onClick={handleSyncSeats}
+                      state={
+                        syncSeatsMutation.state !== "idle"
+                          ? "pending"
+                          : undefined
+                      }
+                    >
+                      {`Buy ${overCapacity} extra seat${overCapacity === 1 ? "" : "s"}`}
+                    </Button>
+                    <Text color="subtle" css={{ alignSelf: "center" }}>
+                      {`or remove ${overCapacity} member${overCapacity === 1 ? "" : "s"}`}
+                    </Text>
+                  </Flex>
+                </Flex>
+              </PanelBanner>
+            )}
             <ScrollAreaNative
               css={{
                 maxHeight: 300,

apps/builder/app/routes/_ui.dashboard.tsx

@@ -268,9 +268,7 @@ const DashboardRoute = () => {
   }, []);
 
   useEffect(() => {
-    if (search !== "") {
-      setSetting("lastDashboardSearch", search);
-    }
+    setSetting("lastDashboardSearch", search);
   }, [search]);
 
   // `useLoaderData` wraps the return in `JsonifyObject` which turns

apps/builder/app/services/workspace-router.server.ts

@@ -299,6 +299,20 @@ export const workspaceRouter = router({
       }
     }),
 
+  syncSeats: procedure
+    .input(z.object({ workspaceId: z.string() }))
+    .mutation(async ({ input, ctx }) => {
+      try {
+        if (ctx.planFeatures.maxWorkspaces <= 1) {
+          throw new Error("Upgrade your plan to manage workspace seats.");
+        }
+        await syncOwnerSeats(input.workspaceId, ctx);
+        return { success: true as const };
+      } catch (error) {
+        return createErrorResponse(error);
+      }
+    }),
+
   listMembers: procedure
     .input(z.object({ workspaceId: z.string() }))
     .query(async ({ input, ctx }) => {