dashboard: cleanup disabled team management UIs for vercel teams (#40865)

GitOrigin-RevId: f0278f7596978dee46e5c5dc817a3bba5b8e7fe3

Author: atrakh

npm-packages/@convex-dev/design-system/src/Callout.tsx

@@ -6,7 +6,7 @@ const classes: Record<CalloutVariant, string> = {
   error: "bg-background-error text-content-error",
   instructions: "bg-background-warning text-content-warning",
   hint: "bg-util-accent/10",
-  upsell: "bg-util-accent/10",
+  upsell: "bg-util-accent/10 dark:bg-util-accent/30",
   localDev:
     "bg-teal-100 border border-teal-500 dark:bg-teal-900 text-content-primary",
 };

npm-packages/dashboard/src/components/billing/PriceSummary.tsx

@@ -27,11 +27,20 @@ export function PriceSummary({
   return (
     <div className="flex flex-col gap-2 text-sm" data-testid="price-summary">
       {teamManagedBy && (
-        <Callout className="mb-2">
-          This team's billing is currently being managed by{" "}
-          {startCase(teamManagedBy)}. Upgrading to this plan will disable your{" "}
-          {startCase(teamManagedBy)} integration and migrate billing to be
-          handled by Convex.
+        <Callout className="mb-2 flex flex-col gap-1" variant="upsell">
+          <p>
+            This team's billing is currently being managed by{" "}
+            {startCase(teamManagedBy)}.
+          </p>
+          <p>
+            To switch to {newPlanName}, you may create a new Convex team, and
+            upgrade that team to the Professional plan.{" "}
+          </p>
+          <p>
+            Once you've created a new team with the Professional plan, you can
+            transfer your existing projects to the new team and invite your team
+            members.
+          </p>
         </Callout>
       )}
       {plan.seatPrice ? (

npm-packages/dashboard/src/components/billing/SubscriptionOverview.tsx

@@ -115,27 +115,31 @@ export function SubscriptionOverview({
             team={team}
             hasAdminPermissions={hasAdminPermissions}
           />
-          <hr />
-          <BillingContactForm
-            subscription={subscription}
-            team={team}
-            hasAdminPermissions={hasAdminPermissions}
-          />
-          <hr />
-          <BillingAddressForm
-            subscription={subscription}
-            team={team}
-            hasAdminPermissions={hasAdminPermissions}
-          />
-          <hr />
-          <PaymentMethodForm
-            subscription={subscription}
-            team={team}
-            hasAdminPermissions={hasAdminPermissions}
-          />
+          {!team.managedBy && (
+            <>
+              <hr />
+              <BillingContactForm
+                subscription={subscription}
+                team={team}
+                hasAdminPermissions={hasAdminPermissions}
+              />
+              <hr />
+              <BillingAddressForm
+                subscription={subscription}
+                team={team}
+                hasAdminPermissions={hasAdminPermissions}
+              />
+              <hr />
+              <PaymentMethodForm
+                subscription={subscription}
+                team={team}
+                hasAdminPermissions={hasAdminPermissions}
+              />
+            </>
+          )}
         </Sheet>
       )}
-      {invoices && (invoices.length > 0 || subscription) && (
+      {!team.managedBy && invoices && (invoices.length > 0 || subscription) && (
         <Invoices invoices={invoices} />
       )}
     </>

npm-packages/dashboard/src/components/billing/TeamUsage.tsx

@@ -149,7 +149,9 @@ export function TeamUsage({ team }: { team: Team }) {
             size="xs"
           >
             {subscription
-              ? "View Subscription & Invoices"
+              ? team.managedBy
+                ? "View Subscription"
+                : "View Subscription & Invoices"
               : "Upgrade Subscription"}
           </Button>
         )}

npm-packages/dashboard/src/components/billing/planCards/ChangePlanDialogs.tsx

@@ -144,7 +144,7 @@ export function UpgradePlanDialog({
           )}
         </div>
       }
-      disableConfirm={couponData.isLoading}
+      disableConfirm={!!team.managedBy || couponData.isLoading}
       variant="primary"
       confirmText="Upgrade"
       onConfirm={() => onConfirm(couponData.coupon?.planId ?? newPlan.id)}

npm-packages/dashboard/src/components/teamSettings/TeamSettings.tsx

@@ -40,48 +40,47 @@ export function TeamSettings({ team }: { team: Team }) {
           remove all team members and delete all projects associated with the
           team.
         </p>
-        {team.managedBy && (
-          <Callout>
-            This team is managed by {startCase(team.managedBy)}. You must delete
-            the integration in {startCase(team.managedBy)} before you can delete
-            this team.
-          </Callout>
-        )}
         {subscription && (
           <p className="mb-4">
             Deleting your team will automatically cancel your{" "}
             <span className="font-semibold">{subscription.plan.name}</span>{" "}
             subscription.
           </p>
         )}
-        {!team.managedBy && (
-          <Button
-            variant="danger"
-            onClick={() => setShowDeleteTeamModal(true)}
-            disabled={
-              !hasAdminPermissions ||
-              !teams ||
-              teams.length === 1 ||
-              !teamMembers ||
-              teamMembers.length > 1 ||
-              !projects ||
-              projects.length > 0
-            }
-            tip={
-              !hasAdminPermissions
-                ? "You do not have permission to delete this team."
-                : teams && teams.length === 1
-                  ? "You cannot delete your last team."
-                  : teamMembers && teamMembers.length > 1
-                    ? "You must remove all other team members before deleting the team."
-                    : projects && projects.length > 0
-                      ? "You must delete all projects before deleting the team."
-                      : undefined
-            }
-          >
-            Delete Team
-          </Button>
+        {team.managedBy && (
+          <Callout className="mb-4">
+            This team is managed by {startCase(team.managedBy)}. You must delete
+            the integration in {startCase(team.managedBy)} before you can delete
+            this team.
+          </Callout>
         )}
+        <Button
+          variant="danger"
+          onClick={() => setShowDeleteTeamModal(true)}
+          disabled={
+            !!team.managedBy ||
+            !hasAdminPermissions ||
+            !teams ||
+            teams.length === 1 ||
+            !teamMembers ||
+            teamMembers.length > 1 ||
+            !projects ||
+            projects.length > 0
+          }
+          tip={
+            !hasAdminPermissions
+              ? "You do not have permission to delete this team."
+              : teams && teams.length === 1
+                ? "You cannot delete your last team."
+                : teamMembers && teamMembers.length > 1
+                  ? "You must remove all other team members before deleting the team."
+                  : projects && projects.length > 0
+                    ? "You must delete all projects before deleting the team."
+                    : undefined
+          }
+        >
+          Delete Team
+        </Button>
         {showDeleteTeamModal && (
           <ConfirmationDialog
             onClose={() => setShowDeleteTeamModal(false)}