From 8765300574986fa22a4e1130fbed13947ebb5214 Mon Sep 17 00:00:00 2001 From: Alberto Leal Date: Fri, 3 Oct 2025 16:17:02 -0400 Subject: [PATCH 1/3] fix(billing): Fix on-demand capitalization --- .../gsApp/views/amCheckout/billingCycleSelectCard.tsx | 7 +++++-- static/gsApp/views/amCheckout/cart.tsx | 10 +++++++--- static/gsApp/views/amCheckout/index.spec.tsx | 4 ++-- static/gsApp/views/amCheckout/steps/setSpendLimit.tsx | 3 ++- static/gsApp/views/spendLimits/spendLimitSettings.tsx | 5 +++-- .../gsApp/views/subscriptionPage/onDemandSettings.tsx | 7 ++++++- 6 files changed, 25 insertions(+), 11 deletions(-) diff --git a/static/gsApp/views/amCheckout/billingCycleSelectCard.tsx b/static/gsApp/views/amCheckout/billingCycleSelectCard.tsx index 3d91ff9eaf9756..46b11d9c53e2f0 100644 --- a/static/gsApp/views/amCheckout/billingCycleSelectCard.tsx +++ b/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'); diff --git a/static/gsApp/views/amCheckout/cart.tsx b/static/gsApp/views/amCheckout/cart.tsx index 46c2ed204dfb98..60ff1e63c40228 100644 --- a/static/gsApp/views/amCheckout/cart.tsx +++ b/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 {tct('Unlock with [budgetTerm]', { - budgetTerm: activePlan.budgetTerm, + budgetTerm: + activePlan.budgetTerm === 'pay-as-you-go' + ? 'PAYG' + : displayBudgetName(activePlan, {title: true}), })} )} @@ -364,7 +368,7 @@ function SubtotalSummary({ {tct('[budgetTerm] spend limit', { - budgetTerm: capitalize(activePlan.budgetTerm), + budgetTerm: displayBudgetName(activePlan, {title: true}), })} diff --git a/static/gsApp/views/amCheckout/index.spec.tsx b/static/gsApp/views/amCheckout/index.spec.tsx index 176c8efd4fb81b..d344dcacbdb674 100644 --- a/static/gsApp/views/amCheckout/index.spec.tsx +++ b/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 => { diff --git a/static/gsApp/views/amCheckout/steps/setSpendLimit.tsx b/static/gsApp/views/amCheckout/steps/setSpendLimit.tsx index 292cb4576a54f7..79131e249b83ff 100644 --- a/static/gsApp/views/amCheckout/steps/setSpendLimit.tsx +++ b/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={ diff --git a/static/gsApp/views/subscriptionPage/onDemandSettings.tsx b/static/gsApp/views/subscriptionPage/onDemandSettings.tsx index c5f8e2706d23f5..1221710884c5a2 100644 --- a/static/gsApp/views/subscriptionPage/onDemandSettings.tsx +++ b/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}) + ) + ); }, }); } From d80738e3af3857d5c87f9fe534cca4eb7bcc7b20 Mon Sep 17 00:00:00 2001 From: Alberto Leal Date: Mon, 6 Oct 2025 15:12:22 -0400 Subject: [PATCH 2/3] fix(billing): Use sentence case for on-demand budget terms Addresses PR feedback to keep budget term capitalization in sentence case for step titles and cart text, except when at the beginning of a sentence. --- static/gsApp/views/amCheckout/cart.tsx | 5 ++--- static/gsApp/views/amCheckout/index.spec.tsx | 4 ++-- static/gsApp/views/amCheckout/steps/setSpendLimit.tsx | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/static/gsApp/views/amCheckout/cart.tsx b/static/gsApp/views/amCheckout/cart.tsx index 60ff1e63c40228..9a9ca1f7a422fb 100644 --- a/static/gsApp/views/amCheckout/cart.tsx +++ b/static/gsApp/views/amCheckout/cart.tsx @@ -15,7 +15,6 @@ import {IconChevron, IconLightning, IconLock, IconSentry} from 'sentry/icons'; import {t, tct} from 'sentry/locale'; import {DataCategory} from 'sentry/types/core'; import type {Organization} from 'sentry/types/organization'; -import {capitalize} from 'sentry/utils/string/capitalize'; import {toTitleCase} from 'sentry/utils/string/toTitleCase'; import useApi from 'sentry/utils/useApi'; @@ -239,7 +238,7 @@ function ItemsSummary({activePlan, formData}: ItemsSummaryProps) { budgetTerm: activePlan.budgetTerm === 'pay-as-you-go' ? 'PAYG' - : displayBudgetName(activePlan, {title: true}), + : displayBudgetName(activePlan), }) ) : ( // "Unlock with on-demand" gets cut off in non-chonk theme @@ -248,7 +247,7 @@ function ItemsSummary({activePlan, formData}: ItemsSummaryProps) { budgetTerm: activePlan.budgetTerm === 'pay-as-you-go' ? 'PAYG' - : displayBudgetName(activePlan, {title: true}), + : displayBudgetName(activePlan), })} )} diff --git a/static/gsApp/views/amCheckout/index.spec.tsx b/static/gsApp/views/amCheckout/index.spec.tsx index d344dcacbdb674..176c8efd4fb81b 100644 --- a/static/gsApp/views/amCheckout/index.spec.tsx +++ b/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 => { diff --git a/static/gsApp/views/amCheckout/steps/setSpendLimit.tsx b/static/gsApp/views/amCheckout/steps/setSpendLimit.tsx index 79131e249b83ff..8b62048ff0f4df 100644 --- a/static/gsApp/views/amCheckout/steps/setSpendLimit.tsx +++ b/static/gsApp/views/amCheckout/steps/setSpendLimit.tsx @@ -56,7 +56,7 @@ function SetSpendCap({ organization={organization} header={ Date: Mon, 6 Oct 2025 15:56:02 -0400 Subject: [PATCH 3/3] fix --- static/gsApp/views/amCheckout/cart.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/static/gsApp/views/amCheckout/cart.tsx b/static/gsApp/views/amCheckout/cart.tsx index 9a9ca1f7a422fb..91a01311ba09a7 100644 --- a/static/gsApp/views/amCheckout/cart.tsx +++ b/static/gsApp/views/amCheckout/cart.tsx @@ -233,21 +233,15 @@ function ItemsSummary({activePlan, formData}: ItemsSummaryProps) { title={t('This product is only available with a PAYG budget.')} > }> - {isChonk || activePlan.budgetTerm === 'pay-as-you-go' ? ( + {isChonk ? ( tct('Unlock with [budgetTerm]', { - budgetTerm: - activePlan.budgetTerm === 'pay-as-you-go' - ? 'PAYG' - : displayBudgetName(activePlan), + budgetTerm: displayBudgetName(activePlan, {title: true}), }) ) : ( // "Unlock with on-demand" gets cut off in non-chonk theme {tct('Unlock with [budgetTerm]', { - budgetTerm: - activePlan.budgetTerm === 'pay-as-you-go' - ? 'PAYG' - : displayBudgetName(activePlan), + budgetTerm: displayBudgetName(activePlan, {title: true}), })} )}