fix(billing): Fix on-demand capitalization

Author: dashed

static/gsApp/views/amCheckout/billingCycleSelectCard.tsx

@@ -9,7 +9,7 @@ import {t, tct} from 'sentry/locale';
 
 import {ANNUAL} from 'getsentry/constants';
 import type {Plan, Subscription} from 'getsentry/types';
-import {isDeveloperPlan} from 'getsentry/utils/billing';
+import {displayBudgetName, isDeveloperPlan} from 'getsentry/utils/billing';
 import CheckoutOption from 'getsentry/views/amCheckout/checkoutOption';
 import type {CheckoutFormData} from 'getsentry/views/amCheckout/types';
 
@@ -72,7 +72,10 @@ function BillingCycleSelectCard({
 
   const additionalInfo = isAnnual
     ? tct('[budgetTerm] usage billed monthly, discount does not apply', {
-        budgetTerm: plan.budgetTerm === 'pay-as-you-go' ? 'PAYG' : plan.budgetTerm,
+        budgetTerm:
+          plan.budgetTerm === 'pay-as-you-go'
+            ? 'PAYG'
+            : displayBudgetName(plan, {title: true}),
       })
     : t('Cancel anytime');
 

static/gsApp/views/amCheckout/cart.tsx

@@ -30,6 +30,7 @@ import {
   type Subscription,
 } from 'getsentry/types';
 import {
+  displayBudgetName,
   formatReservedWithUnits,
   getPlanIcon,
   getProductIcon,
@@ -238,13 +239,16 @@ function ItemsSummary({activePlan, formData}: ItemsSummaryProps) {
                               budgetTerm:
                                 activePlan.budgetTerm === 'pay-as-you-go'
                                   ? 'PAYG'
-                                  : activePlan.budgetTerm,
+                                  : displayBudgetName(activePlan, {title: true}),
                             })
                           ) : (
                             // "Unlock with on-demand" gets cut off in non-chonk theme
                             <Text size="xs">
                               {tct('Unlock with [budgetTerm]', {
-                                budgetTerm: activePlan.budgetTerm,
+                                budgetTerm:
+                                  activePlan.budgetTerm === 'pay-as-you-go'
+                                    ? 'PAYG'
+                                    : displayBudgetName(activePlan, {title: true}),
                               })}
                             </Text>
                           )}
@@ -364,7 +368,7 @@ function SubtotalSummary({
               <ItemFlex>
                 <Text>
                   {tct('[budgetTerm] spend limit', {
-                    budgetTerm: capitalize(activePlan.budgetTerm),
+                    budgetTerm: displayBudgetName(activePlan, {title: true}),
                   })}
                 </Text>
                 <Flex direction="column" gap="sm" align="end">

static/gsApp/views/amCheckout/index.spec.tsx

@@ -29,8 +29,8 @@ function assertCheckoutV3Steps(tier: PlanTier) {
   [
     'Build your plan',
     [PlanTier.AM1, PlanTier.AM2].includes(tier)
-      ? /Set your on-demand limit/
-      : /Set your pay-as-you-go limit/,
+      ? /Set your On-Demand limit/
+      : /Set your Pay-as-you-go limit/,
     'Pay monthly or yearly, your choice',
     'Edit billing information',
   ].forEach(step => {

static/gsApp/views/amCheckout/steps/setSpendLimit.tsx

@@ -4,6 +4,7 @@ import {Flex} from 'sentry/components/core/layout';
 import {t} from 'sentry/locale';
 
 import type {OnDemandBudgets} from 'getsentry/types';
+import {displayBudgetName} from 'getsentry/utils/billing';
 import trackGetsentryAnalytics from 'getsentry/utils/trackGetsentryAnalytics';
 import ReserveAdditionalVolume from 'getsentry/views/amCheckout/reserveAdditionalVolume';
 import StepHeader from 'getsentry/views/amCheckout/steps/stepHeader';
@@ -55,7 +56,7 @@ function SetSpendCap({
         organization={organization}
         header={
           <StepHeader
-            title={t('Set your %s limit', activePlan.budgetTerm)}
+            title={t('Set your %s limit', displayBudgetName(activePlan, {title: true}))}
             isActive
             stepNumber={stepNumber}
             isCompleted={false}

static/gsApp/views/spendLimits/spendLimitSettings.tsx

@@ -22,6 +22,7 @@ import {
   type Plan,
 } from 'getsentry/types';
 import {
+  displayBudgetName,
   formatReservedWithUnits,
   getReservedBudgetCategoryForAddOn,
   isAm2Plan,
@@ -656,8 +657,8 @@ function SpendLimitSettings({
               {
                 budgetTerm:
                   activePlan.budgetTerm === 'pay-as-you-go'
-                    ? `${capitalize(activePlan.budgetTerm)} (PAYG)`
-                    : `${capitalize(activePlan.budgetTerm)}`,
+                    ? `${displayBudgetName(activePlan, {title: true})} (PAYG)`
+                    : displayBudgetName(activePlan, {title: true}),
               }
             )}
           </Text>

static/gsApp/views/subscriptionPage/onDemandSettings.tsx

@@ -54,7 +54,12 @@ export function OnDemandSettings({subscription, organization}: OnDemandSettingsP
       },
       success: data => {
         SubscriptionStore.set(data.slug, data);
-        addSuccessMessage(t('%s max spend updated', subscription.planDetails.budgetTerm));
+        addSuccessMessage(
+          t(
+            '%s max spend updated',
+            displayBudgetName(subscription.planDetails, {title: true})
+          )
+        );
       },
     });
   }