feat(webapp): hide self-serve billing UI for managed-billing orgs

Self-serve billing UI is now hidden for managed-billing organizations.
Uses the new `showSelfServe` subscription flag, defaulting to `true` for
existing self-serve organizations.

Author: kathiekiwi

.server-changes/hide-self-serve-billing-ui.md

@@ -0,0 +1,9 @@
+---
+area: webapp
+type: improvement
+---
+
+Hide self-serve billing and upgrade UI for organizations that are billed
+directly. When self-serve is off, plan pickers, upgrade buttons, billing
+alerts, and seat/branch purchase flows are replaced with a "Contact us"
+option, and the billing page shows a managed-billing message instead.

apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx

@@ -30,6 +30,7 @@ import { LinkButton } from "../primitives/Buttons";
 import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
+import { useShowSelfServe } from "~/hooks/useShowSelfServe";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { Paragraph } from "../primitives/Paragraph";
 import { Badge } from "../primitives/Badge";
@@ -56,6 +57,7 @@ export function OrganizationSettingsSideMenu({
   const { isManagedCloud } = useFeatures();
   const featureFlags = useFeatureFlags();
   const currentPlan = useCurrentPlan();
+  const showSelfServe = useShowSelfServe();
   const isAdmin = useHasAdminAccess();
   const showBuildInfo = isAdmin || !isManagedCloud;
 
@@ -104,14 +106,16 @@ export function OrganizationSettingsSideMenu({
                   ) : undefined
                 }
               />
-              <SideMenuItem
-                name="Billing alerts"
-                icon={BellAlertIcon}
-                activeIconColor="text-rose-500"
-                inactiveIconColor="text-rose-500"
-                to={v3BillingAlertsPath(organization)}
-                data-action="billing-alerts"
-              />
+              {showSelfServe ? (
+                <SideMenuItem
+                  name="Billing alerts"
+                  icon={BellAlertIcon}
+                  activeIconColor="text-rose-500"
+                  inactiveIconColor="text-rose-500"
+                  to={v3BillingAlertsPath(organization)}
+                  data-action="billing-alerts"
+                />
+              ) : null}
             </>
           )}
           {featureFlags.hasPrivateConnections && (

apps/webapp/app/hooks/useShowSelfServe.ts

@@ -0,0 +1,7 @@
+import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
+
+/** Whether the org should see self-serve billing UI (plan picker, Stripe checkout, upgrades). */
+export function useShowSelfServe(): boolean {
+  const plan = useCurrentPlan();
+  return plan?.v3Subscription?.showSelfServe ?? true;
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.alerts/route.tsx

@@ -18,6 +18,7 @@ import assertNever from "assert-never";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { AlertsNoneDev, AlertsNoneDeployed } from "~/components/BlankStatePanels";
+import { Feedback } from "~/components/Feedback";
 import { EnvironmentCombo } from "~/components/environments/EnvironmentLabel";
 import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
@@ -45,6 +46,7 @@ import {
 import { EnabledStatus } from "~/components/runs/v3/EnabledStatus";
 import { prisma } from "~/db.server";
 import { useEnvironment } from "~/hooks/useEnvironment";
+import { useShowSelfServe } from "~/hooks/useShowSelfServe";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { redirectWithSuccessMessage } from "~/models/message.server";
@@ -182,6 +184,7 @@ export default function Page() {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
+  const showSelfServe = useShowSelfServe();
 
   const requiresUpgrade = limits.used >= limits.limit;
 
@@ -343,9 +346,16 @@ export default function Page() {
                       </Header3>
                     )}
 
-                    <LinkButton to={v3BillingPath(organization)} variant="secondary/small">
-                      Upgrade
-                    </LinkButton>
+                    {showSelfServe ? (
+                      <LinkButton to={v3BillingPath(organization)} variant="secondary/small">
+                        Upgrade
+                      </LinkButton>
+                    ) : (
+                      <Feedback
+                        defaultValue="enterprise"
+                        button={<Button variant="secondary/small">Request more</Button>}
+                      />
+                    )}
                   </div>
                 </div>
               </div>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx

@@ -12,6 +12,7 @@ import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
 import { BranchesNoBranchableEnvironment, BranchesNoBranches } from "~/components/BlankStatePanels";
+import { Feedback } from "~/components/Feedback";
 import { GitMetadata } from "~/components/GitMetadata";
 import { V4Title } from "~/components/V4Badge";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
@@ -56,6 +57,7 @@ import {
 } from "~/components/primitives/Table";
 import { InfoIconTooltip, SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useEnvironment } from "~/hooks/useEnvironment";
+import { useShowSelfServe } from "~/hooks/useShowSelfServe";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 
@@ -632,6 +634,7 @@ function PurchaseBranchesModal({
   planBranchLimit: number;
   triggerButton?: React.ReactNode;
 }) {
+  const showSelfServe = useShowSelfServe();
   const fetcher = useFetcher();
   const lastSubmission =
     fetcher.data && typeof fetcher.data === "object" && "intent" in fetcher.data
@@ -679,6 +682,15 @@ function PurchaseBranchesModal({
   const pricePerBranch = branchPricing.centsPerStep / branchPricing.stepSize / 100;
   const title = extraBranches === 0 ? "Purchase extra branches…" : "Add/remove extra branches…";
 
+  if (!showSelfServe) {
+    return (
+      <Feedback
+        defaultValue="enterprise"
+        button={<Button variant="secondary/small">Request more</Button>}
+      />
+    );
+  }
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>