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

### Summary 
Self-serve billing UI is now hidden for managed-billing organizations.

Plan pickers, upgrade actions, billing alerts, and related upgrade
prompts are replaced with a "Contact us" option where appropriate.

Uses the new showSelfServe subscription flag, defaulting to true for
existing self-serve organizations.

### Testing

- [x] billing pages render correctly for self-serve organizations.
- [x] managed-billing organizations no longer see self-serve upgrade
flows.
- [x] "Contact us" actions are shown instead of upgrade actions where
applicable.

### Changelog

Hide self-serve billing flows for managed-billing organizations behind
the new showSelfServe subscription flag.

Author: kathiekiwi

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

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Hide self-serve billing and upgrade options for directly-billed organizations; show Contact us instead.

apps/webapp/app/components/BlankStatePanels.tsx

@@ -434,7 +434,7 @@ export function NoWaitpointTokens() {
   );
 }
 
-export function BranchesNoBranchableEnvironment() {
+export function BranchesNoBranchableEnvironment({ showSelfServe }: { showSelfServe: boolean }) {
   const { isManagedCloud } = useFeatures();
   const organization = useOrganization();
 
@@ -462,9 +462,16 @@ export function BranchesNoBranchableEnvironment() {
       iconClassName="text-preview"
       panelClassName="max-w-full"
       accessory={
-        <LinkButton variant="primary/small" to={v3BillingPath(organization)}>
-          Upgrade
-        </LinkButton>
+        showSelfServe ? (
+          <LinkButton variant="primary/small" to={v3BillingPath(organization)}>
+            Upgrade
+          </LinkButton>
+        ) : (
+          <Feedback
+            button={<Button variant="secondary/small">Request more</Button>}
+            defaultValue="enterprise"
+          />
+        )
       }
     >
       <Paragraph spacing variant="small">
@@ -483,10 +490,12 @@ export function BranchesNoBranches({
   parentEnvironment,
   limits,
   canUpgrade,
+  showSelfServe,
 }: {
   parentEnvironment: { id: string };
   limits: { used: number; limit: number };
   canUpgrade: boolean;
+  showSelfServe: boolean;
 }) {
   const organization = useOrganization();
 
@@ -498,14 +507,18 @@ export function BranchesNoBranches({
         iconClassName="text-preview"
         panelClassName="max-w-full"
         accessory={
-          canUpgrade ? (
+          showSelfServe && canUpgrade ? (
             <LinkButton variant="primary/small" to={v3BillingPath(organization)}>
               Upgrade
             </LinkButton>
           ) : (
             <Feedback
-              button={<Button variant="primary/small">Request more</Button>}
-              defaultValue="help"
+              button={
+                <Button variant={showSelfServe ? "primary/small" : "secondary/small"}>
+                  Request more
+                </Button>
+              }
+              defaultValue={showSelfServe ? "help" : "enterprise"}
             />
           )
         }

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

@@ -29,6 +29,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";
@@ -55,6 +56,7 @@ export function OrganizationSettingsSideMenu({
   const { isManagedCloud } = useFeatures();
   const featureFlags = useFeatureFlags();
   const currentPlan = useCurrentPlan();
+  const showSelfServe = useShowSelfServe();
   const isAdmin = useHasAdminAccess();
   const showBuildInfo = isAdmin || !isManagedCloud;
 
@@ -103,14 +105,16 @@ export function OrganizationSettingsSideMenu({
                   ) : undefined
                 }
               />
-              <SideMenuItem
-                name="Billing alerts"
-                icon={BellIcon}
-                activeIconColor="text-text-bright"
-                inactiveIconColor="text-text-dimmed"
-                to={v3BillingAlertsPath(organization)}
-                data-action="billing-alerts"
-              />
+              {showSelfServe ? (
+                <SideMenuItem
+                  name="Billing alerts"
+                  icon={BellIcon}
+                  activeIconColor="text-text-bright"
+                  inactiveIconColor="text-text-dimmed"
+                  to={v3BillingAlertsPath(organization)}
+                  data-action="billing-alerts"
+                />
+              ) : null}
             </>
           )}
           <SideMenuItem

apps/webapp/app/components/schedules/PurchaseSchedulesModal.tsx

@@ -4,6 +4,7 @@ import { EnvelopeIcon } from "@heroicons/react/20/solid";
 import { DialogClose } from "@radix-ui/react-dialog";
 import { useFetcher } from "@remix-run/react";
 import { type ReactNode, useEffect, useState } from "react";
+import { Feedback } from "~/components/Feedback";
 import { Button } from "~/components/primitives/Buttons";
 import {
   Dialog,
@@ -20,6 +21,7 @@ import { InputNumberStepper } from "~/components/primitives/InputNumberStepper";
 import { Label } from "~/components/primitives/Label";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { SpinnerWhite } from "~/components/primitives/Spinner";
+import { useShowSelfServe } from "~/hooks/useShowSelfServe";
 import { PurchaseSchema } from "~/routes/resources.orgs.$organizationSlug.schedules-addon";
 import { cn } from "~/utils/cn";
 import { formatCurrency, formatNumber } from "~/utils/numberFormatter";
@@ -49,6 +51,7 @@ export function PurchaseSchedulesModal({
   planScheduleLimit,
   triggerButton,
 }: Props) {
+  const showSelfServe = useShowSelfServe();
   const fetcher = useFetcher();
   const lastSubmission =
     fetcher.data && typeof fetcher.data === "object" && "intent" in fetcher.data
@@ -105,6 +108,15 @@ export function PurchaseSchedulesModal({
   const stepUnit = formatNumber(stepSize);
   const title = extraSchedules === 0 ? "Purchase extra schedules…" : "Add/remove extra schedules…";
 
+  if (!showSelfServe) {
+    return (
+      <Feedback
+        defaultValue="enterprise"
+        button={<Button variant="secondary/small">Request more</Button>}
+      />
+    );
+  }
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>

apps/webapp/app/components/schedules/ScheduleLimitActions.tsx

@@ -0,0 +1,83 @@
+import { ArrowUpCircleIcon } from "@heroicons/react/20/solid";
+import { Feedback } from "~/components/Feedback";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { useShowSelfServe } from "~/hooks/useShowSelfServe";
+import { type MatchedOrganization } from "~/hooks/useOrganizations";
+import { v3BillingPath } from "~/utils/pathBuilder";
+import { PurchaseSchedulesModal, type SchedulePricing } from "./PurchaseSchedulesModal";
+
+type Props = {
+  actionPath: string;
+  canPurchaseSchedules: boolean;
+  schedulePricing: SchedulePricing | null;
+  extraSchedules: number;
+  limits: { used: number; limit: number };
+  maxScheduleQuota: number;
+  planScheduleLimit: number;
+  canUpgrade: boolean;
+  organization: MatchedOrganization;
+  variant?: "dialog" | "banner";
+};
+
+export function ScheduleLimitActions({
+  actionPath,
+  canPurchaseSchedules,
+  schedulePricing,
+  extraSchedules,
+  limits,
+  maxScheduleQuota,
+  planScheduleLimit,
+  canUpgrade,
+  organization,
+  variant = "banner",
+}: Props) {
+  const showSelfServe = useShowSelfServe();
+
+  if (!showSelfServe) {
+    return (
+      <Feedback
+        button={<Button variant="secondary/small">Request more</Button>}
+        defaultValue="enterprise"
+      />
+    );
+  }
+
+  if (canPurchaseSchedules && schedulePricing) {
+    return (
+      <PurchaseSchedulesModal
+        actionPath={actionPath}
+        schedulePricing={schedulePricing}
+        extraSchedules={extraSchedules}
+        usedSchedules={limits.used}
+        maxQuota={maxScheduleQuota}
+        planScheduleLimit={planScheduleLimit}
+        triggerButton={
+          variant === "dialog" ? (
+            <Button variant="primary/small">Purchase more…</Button>
+          ) : undefined
+        }
+      />
+    );
+  }
+
+  if (canUpgrade) {
+    return variant === "dialog" ? (
+      <LinkButton variant="primary/small" to={v3BillingPath(organization)}>
+        Upgrade
+      </LinkButton>
+    ) : (
+      <LinkButton
+        to={v3BillingPath(organization)}
+        variant="secondary/small"
+        LeadingIcon={ArrowUpCircleIcon}
+        leadingIconClassName="text-indigo-500"
+      >
+        Upgrade
+      </LinkButton>
+    );
+  }
+
+  return (
+    <Feedback button={<Button variant="primary/small">Request more</Button>} defaultValue="help" />
+  );
+}

apps/webapp/app/components/schedules/SchedulesUsageBar.tsx

@@ -1,14 +1,9 @@
-import { ArrowUpCircleIcon } from "@heroicons/react/20/solid";
-import { Feedback } from "~/components/Feedback";
-import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Header3 } from "~/components/primitives/Headers";
 import { InfoIconTooltip, SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useOrganization } from "~/hooks/useOrganizations";
-import { v3BillingPath, v3SchedulesAddOnPath } from "~/utils/pathBuilder";
-import {
-  PurchaseSchedulesModal,
-  type SchedulePricing,
-} from "./PurchaseSchedulesModal";
+import { v3SchedulesAddOnPath } from "~/utils/pathBuilder";
+import { ScheduleLimitActions } from "./ScheduleLimitActions";
+import { type SchedulePricing } from "./PurchaseSchedulesModal";
 
 type Props = {
   limits: { used: number; limit: number };
@@ -81,30 +76,17 @@ export function SchedulesUsageBar({
             </div>
           )}
 
-          {canPurchaseSchedules && schedulePricing ? (
-            <PurchaseSchedulesModal
-              actionPath={actionPath}
-              schedulePricing={schedulePricing}
-              extraSchedules={extraSchedules}
-              usedSchedules={limits.used}
-              maxQuota={maxScheduleQuota}
-              planScheduleLimit={planScheduleLimit}
-            />
-          ) : canUpgrade ? (
-            <LinkButton
-              to={v3BillingPath(organization)}
-              variant="secondary/small"
-              LeadingIcon={ArrowUpCircleIcon}
-              leadingIconClassName="text-indigo-500"
-            >
-              Upgrade
-            </LinkButton>
-          ) : (
-            <Feedback
-              button={<Button variant="secondary/small">Request more</Button>}
-              defaultValue="help"
-            />
-          )}
+          <ScheduleLimitActions
+            actionPath={actionPath}
+            canPurchaseSchedules={canPurchaseSchedules}
+            schedulePricing={schedulePricing}
+            extraSchedules={extraSchedules}
+            limits={limits}
+            maxScheduleQuota={maxScheduleQuota}
+            planScheduleLimit={planScheduleLimit}
+            canUpgrade={canUpgrade}
+            organization={organization}
+          />
         </div>
       </div>
     </div>

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>