fix(webapp): tidy Usage page credits display (#4322)

Two small corrections to the organization **Usage** page credits
display.

### 1. Label the credits panel "Credits" (was "Promo credits")
The panel surfaces any credit balance, not only promo-code redemptions,
so "Promo credits" is misleading when the credits come from another
source. Renamed the heading to "Credits".

### 2. Don't show "Included usage" for Enterprise orgs
Enterprise inherits the Pro plan's `includedUsage` value, so the Usage
bar rendered an "Included usage: $50" tier marker for Enterprise
organizations. Enterprise bills against prepaid credits rather than a
per-month included-usage tier, so the marker was misleading. The
`tierLimit` marker is now suppressed for Enterprise (`plan.type ===
"enterprise"`).

Verified with `pnpm run typecheck --filter webapp`.
This commit is contained in:
Matt Aitken
2026-07-21 17:37:55 +01:00
committed by GitHub
parent 0b2919465c
commit 95307ba33c
@@ -114,6 +114,9 @@ export default function Page() {
const currentPlan = useCurrentPlan();
const billingLimit = useBillingLimit();
const planLimitCents = currentPlan?.v3Subscription?.plan?.limits.includedUsage ?? 0;
// Enterprise bills against prepaid credits, not a per-month included-usage tier,
// so the "Included usage" marker doesn't apply.
const isEnterprise = currentPlan?.v3Subscription?.plan?.type === "enterprise";
const billingLimitDollars = isCurrentMonth
? getUsageBarBillingLimitDollars(billingLimit, planLimitCents)
: undefined;
@@ -157,7 +160,7 @@ export default function Page() {
<div className="flex flex-col gap-1 border-t border-grid-dimmed p-3">
<div className="flex items-end gap-8">
<div className="flex flex-col gap-1">
<Header2 className="whitespace-nowrap">Promo credits</Header2>
<Header2 className="whitespace-nowrap">Credits</Header2>
<p className="whitespace-nowrap text-3xl font-medium text-text-bright">
{formatCurrency(promoCredits.remainingCents / 100, false)}
</p>
@@ -215,7 +218,9 @@ export default function Page() {
<UsageBar
current={usage.overall.current}
isPaying={currentPlan?.v3Subscription?.isPaying ?? false}
tierLimit={isCurrentMonth ? planLimitCents / 100 : undefined}
tierLimit={
isCurrentMonth && !isEnterprise ? planLimitCents / 100 : undefined
}
billingLimit={billingLimitDollars}
/>
</div>