dashboard: tidying ui for business plan (#43998)

GitOrigin-RevId: 7f994cb20ebee59694507173bce3606cd6131dbd

Author: atrakh

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

@@ -132,16 +132,21 @@ export function TeamUsage({ team }: { team: TeamResponse }) {
 
   const hasOrbSubscription = useHasSubscription(team?.id);
 
+  // Business plans don't have included usage, so treat them like there's no subscription
+  const isBusinessPlan = subscription?.plan.planType === "CONVEX_BUSINESS";
+
   const hasSubscription =
     (!shownBillingPeriod ||
       shownBillingPeriod.type === "currentBillingPeriod") &&
     (hasOrbSubscription || hasOrbSubscription === undefined) &&
-    projectId === null;
+    projectId === null &&
+    !isBusinessPlan;
 
   const showEntitlements =
     (!shownBillingPeriod ||
       shownBillingPeriod.type === "currentBillingPeriod") &&
-    projectId === null;
+    projectId === null &&
+    !isBusinessPlan;
 
   return (
     <div className="[--team-usage-toolbar-height:--spacing(32)] md:[--team-usage-toolbar-height:--spacing(28)] lg:[--team-usage-toolbar-height:--spacing(20)]">

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

@@ -44,8 +44,11 @@ export function OrbSelfServePlan({
   };
 
   const isDowngrade =
-    orbSub?.plan.planType === "CONVEX_PROFESSIONAL" &&
-    plan.planType === "CONVEX_STARTER_PLUS";
+    (orbSub?.plan.planType === "CONVEX_PROFESSIONAL" &&
+      plan.planType === "CONVEX_STARTER_PLUS") ||
+    (orbSub?.plan.planType === "CONVEX_BUSINESS" &&
+      (plan.planType === "CONVEX_STARTER_PLUS" ||
+        plan.planType === "CONVEX_PROFESSIONAL"));
 
   const changePlan = useChangeSubscription(team.id);