ref(billing): Clean up hardcoded on-demand terms (#102408)

Mainly just cleaning up where we display the term to users everywhere;
some comments and variable names updated but we'll probably need to do
the rest (if ever) when we update on the backend too.

Author: isabellaenriquez

static/app/views/insights/crons/components/processingErrors/processingErrorItem.tsx

@@ -55,8 +55,10 @@ export function ProcessingErrorItem({error, checkinTooltip}: Props) {
         {checkinTooltip}
       );
     case ProcessingErrorType.MONITOR_DISABLED_NO_QUOTA:
+      // TODO: this should really be a gsApp hook so we have subscription context, but
+      // for now we'll just default to "pay-as-you-go" since it's the modern term
       return tct(
-        'A [checkinTooltip:check-in] upsert was sent, but due to insufficient quota a new monitor could not be enabled. Increase your Crons on-demand budget in your [link: subscription settings], and then enable this monitor.',
+        'A [checkinTooltip:check-in] upsert was sent, but due to insufficient quota a new monitor could not be enabled. Increase your Crons pay-as-you-go budget in your [link: subscription settings], and then enable this monitor.',
         {checkinTooltip, link: <Link to="/settings/billing/overview/" />}
       );
     case ProcessingErrorType.MONITOR_INVALID_CONFIG:

static/gsAdmin/components/customerStatus.tsx

@@ -43,8 +43,6 @@ const getTooltip = ({planDetails, trialPlan}: Subscription) => (
     )}
     <dt>Base Price:</dt>
     <dd>{formatCurrency(planDetails?.price)}</dd>
-    <dt>On-Demand:</dt>
-    <dd>{formatCurrency(planDetails?.onDemandEventPrice)} / event</dd>
     <dt>Contract:</dt>
     <dd>{planDetails?.contractInterval}</dd>
     <dt>Billed:</dt>

static/gsAdmin/components/customers/customerHistory.tsx

@@ -32,7 +32,7 @@ function CustomerHistory({orgId, ...props}: Props) {
       columns={[
         <th key="period">Period</th>,
         <th key="onDemand" style={{width: 200, textAlign: 'right'}}>
-          On-Demand
+          Pay-as-you-go
         </th>,
         <th key="reserved" style={{width: 200, textAlign: 'right'}}>
           Reserved

static/gsAdmin/components/customers/customerOverview.spec.tsx

@@ -190,20 +190,18 @@ describe('CustomerOverview', () => {
     expect(screen.getByText('Total: $0.00 / $3,000,000.00')).toBeInTheDocument();
 
     // CPE information
-    expect(screen.getByText('Pay-as-you-go Cost-Per-Event Errors:')).toBeInTheDocument();
+    expect(screen.getByText('On-Demand Cost-Per-Event Errors:')).toBeInTheDocument();
     expect(screen.getByText('$0.12345678')).toBeInTheDocument();
     expect(
-      screen.getByText('Pay-as-you-go Cost-Per-Event Performance units:')
+      screen.getByText('On-Demand Cost-Per-Event Performance units:')
     ).toBeInTheDocument();
     expect(screen.getByText('$1.00000000')).toBeInTheDocument();
-    expect(screen.getByText('Pay-as-you-go Cost-Per-Event Replays:')).toBeInTheDocument();
+    expect(screen.getByText('On-Demand Cost-Per-Event Replays:')).toBeInTheDocument();
     expect(screen.getByText('$0.50000000')).toBeInTheDocument();
-    expect(
-      screen.getByText('Pay-as-you-go Cost-Per-Event Attachments:')
-    ).toBeInTheDocument();
+    expect(screen.getByText('On-Demand Cost-Per-Event Attachments:')).toBeInTheDocument();
     expect(screen.getByText('$0.20300000')).toBeInTheDocument();
     expect(
-      screen.getByText('Pay-as-you-go Cost-Per-Event Cron monitors:')
+      screen.getByText('On-Demand Cost-Per-Event Cron monitors:')
     ).toBeInTheDocument();
     expect(screen.getByText('$0.07550000')).toBeInTheDocument();
   });

static/gsAdmin/components/customers/customerOverview.tsx

@@ -32,6 +32,7 @@ import type {
 } from 'getsentry/types';
 import {BillingType, OnDemandBudgetMode} from 'getsentry/types';
 import {
+  displayBudgetName,
   formatBalance,
   formatReservedWithUnits,
   getActiveProductTrial,
@@ -130,6 +131,7 @@ function SubscriptionSummary({customer, onAction}: SubscriptionSummaryProps) {
             <small>{customer.contractInterval}</small>
           </DetailLabel>
         )}
+        {/* TODO(billing): Should we start calling On-Demand periods "Pay-as-you-go" periods? */}
         <DetailLabel title="On-Demand">
           <OnDemandSummary customer={customer} />
         </DetailLabel>
@@ -213,7 +215,9 @@ function ReservedData({customer}: ReservedDataProps) {
                   : 'None'}
               </DetailLabel>
               {customer.onDemandInvoicedManual && (
-                <DetailLabel title={`Pay-as-you-go Cost-Per-Event ${categoryName}`}>
+                <DetailLabel
+                  title={`${displayBudgetName(customer.planDetails, {title: true})} Cost-Per-Event ${categoryName}`}
+                >
                   {typeof categoryHistory.paygCpe === 'number'
                     ? displayPriceWithCents({
                         cents: categoryHistory.paygCpe,

static/gsAdmin/components/customers/customerStatsFilters.tsx

@@ -92,6 +92,7 @@ export function CustomerStatsFilters({
 
   const {start, end, period, utc} = pageDateTime;
 
+  // TODO(billing): Should we start calling On-Demand periods "Pay-as-you-go" periods?
   const onDemandLabel = (
     <Fragment>
       On-Demand (

static/gsAdmin/components/customers/pendingChanges.spec.tsx

@@ -46,6 +46,7 @@ describe('PendingChanges', () => {
           name: 'Team (Enterprise)',
           contractInterval: 'annual',
           billingInterval: 'annual',
+          budgetTerm: 'on-demand',
         }),
         plan: 'am1_team_ent',
         planName: 'Team (Enterprise)',
@@ -87,7 +88,7 @@ describe('PendingChanges', () => {
     expect(container).toHaveTextContent(
       'The following changes will take effect on Feb 16, 2022'
     );
-    expect(container).toHaveTextContent('On-demand maximum — $0.00 → $500.00');
+    expect(container).toHaveTextContent('On-Demand maximum — $0.00 → $500.00');
   });
 
   it('renders pending changes with all categories', () => {
@@ -100,6 +101,7 @@ describe('PendingChanges', () => {
           name: 'Team (Enterprise)',
           contractInterval: 'annual',
           billingInterval: 'annual',
+          budgetTerm: 'on-demand',
         }),
         plan: 'am3_team_ent',
         planName: 'Team (Enterprise)',
@@ -140,7 +142,7 @@ describe('PendingChanges', () => {
     expect(container).toHaveTextContent(
       'The following changes will take effect on Feb 20, 2024'
     );
-    expect(container).toHaveTextContent('On-demand maximum — $0.00 → $500.00');
+    expect(container).toHaveTextContent('On-Demand maximum — $0.00 → $500.00');
   });
 
   it('renders on-demand budgets', () => {
@@ -189,7 +191,7 @@ describe('PendingChanges', () => {
       'The following changes will take effect on Feb 16, 2022'
     );
     expect(container).toHaveTextContent(
-      'On-demand budget — shared on-demand budget of $100 → per-category on-demand budget (errors at $3, transactions at $2, and attachments at $1)'
+      'On-Demand Budget — shared on-demand budget of $100 → per-category on-demand budget (errors at $3, transactions at $2, and attachments at $1)'
     );
   });
 
@@ -234,7 +236,7 @@ describe('PendingChanges', () => {
     );
     expect(container).toHaveTextContent('Plan changes — Developer → Team (Enterprise)');
     expect(container).toHaveTextContent(
-      'On-demand budget — shared on-demand budget of $100 → per-category on-demand budget (errors at $3, transactions at $2, and attachments at $1)'
+      'On-Demand Budget — shared on-demand budget of $100 → per-category on-demand budget (errors at $3, transactions at $2, and attachments at $1)'
     );
     expect(screen.getAllByText(/The following changes will take effect on/)).toHaveLength(
       1

static/gsAdmin/components/customers/pendingChanges.tsx

@@ -10,7 +10,7 @@ import {DataCategory} from 'sentry/types/core';
 import {RESERVED_BUDGET_QUOTA} from 'getsentry/constants';
 import {usePlanMigrations} from 'getsentry/hooks/usePlanMigrations';
 import type {Plan, PlanMigration, Subscription} from 'getsentry/types';
-import {formatReservedWithUnits} from 'getsentry/utils/billing';
+import {displayBudgetName, formatReservedWithUnits} from 'getsentry/utils/billing';
 import {
   getPlanCategoryName,
   getReservedBudgetDisplayName,
@@ -307,7 +307,8 @@ function getOnDemandChanges(subscription: Subscription) {
       );
       changes.push(
         <span>
-          On-demand budget — {current} → {change}
+          {displayBudgetName(pendingChanges.planDetails, {title: true, withBudget: true})}{' '}
+          — {current} → {change}
         </span>
       );
     }
@@ -316,7 +317,8 @@ function getOnDemandChanges(subscription: Subscription) {
     const change = getStringForPrice(pendingChanges.onDemandMaxSpend);
     changes.push(
       <span>
-        On-demand maximum — {old} → {change}
+        {displayBudgetName(pendingChanges.planDetails, {title: true})} maximum — {old} →{' '}
+        {change}
       </span>
     );
   }

static/gsAdmin/components/provisionSubscriptionAction.spec.tsx

@@ -281,22 +281,22 @@ describe('provisionSubscriptionAction', () => {
     );
 
     expect(
-      within(container).getByLabelText('On-Demand Max Spend Setting')
+      within(container).getByLabelText('Pay-as-you-go Max Spend Setting')
     ).toBeInTheDocument();
     expect(
-      within(container).queryByLabelText('On-Demand Cost-Per-Event Errors')
+      within(container).queryByLabelText('Pay-as-you-go Cost-Per-Event Errors')
     ).not.toBeInTheDocument();
     expect(
-      within(container).queryByLabelText('On-Demand Cost-Per-Event Performance Units')
+      within(container).queryByLabelText('Pay-as-you-go Cost-Per-Event Performance Units')
     ).not.toBeInTheDocument();
     expect(
-      within(container).queryByLabelText('On-Demand Cost-Per-Event Replays')
+      within(container).queryByLabelText('Pay-as-you-go Cost-Per-Event Replays')
     ).not.toBeInTheDocument();
     expect(
-      within(container).queryByLabelText('On-Demand Cost-Per-Event Attachments')
+      within(container).queryByLabelText('Pay-as-you-go Cost-Per-Event Attachments')
     ).not.toBeInTheDocument();
     expect(
-      within(container).queryByLabelText('On-Demand Cost-Per-Event Cron Monitors')
+      within(container).queryByLabelText('Pay-as-you-go Cost-Per-Event Cron Monitors')
     ).not.toBeInTheDocument();
   });
 
@@ -325,19 +325,19 @@ describe('provisionSubscriptionAction', () => {
     ).not.toBeInTheDocument();
 
     await selectEvent.select(
-      screen.getByRole('textbox', {name: 'On-Demand Max Spend Setting'}),
+      screen.getByRole('textbox', {name: 'Pay-as-you-go Max Spend Setting'}),
       'Shared'
     );
     expect(
-      (await within(container).findAllByLabelText(/On-Demand Cost-Per-Event/)).length
+      (await within(container).findAllByLabelText(/Pay-as-you-go Cost-Per-Event/)).length
     ).toBeGreaterThan(0);
 
     await selectEvent.select(
-      screen.getByRole('textbox', {name: 'On-Demand Max Spend Setting'}),
+      screen.getByRole('textbox', {name: 'Pay-as-you-go Max Spend Setting'}),
       'Disable'
     );
     expect(
-      within(container).queryByLabelText(/On-Demand Cost-Per-Event/)
+      within(container).queryByLabelText(/Pay-as-you-go Cost-Per-Event/)
     ).not.toBeInTheDocument();
   });
 
@@ -363,7 +363,7 @@ describe('provisionSubscriptionAction', () => {
       'Invoiced'
     );
     await selectEvent.select(
-      screen.getByRole('textbox', {name: 'On-Demand Max Spend Setting'}),
+      screen.getByRole('textbox', {name: 'Pay-as-you-go Max Spend Setting'}),
       'Shared'
     );
     const disabledSoftCapFields = screen.getAllByLabelText(/Soft Cap Type/);
@@ -389,7 +389,7 @@ describe('provisionSubscriptionAction', () => {
       'Invoiced'
     );
     await selectEvent.select(
-      screen.getByRole('textbox', {name: 'On-Demand Max Spend Setting'}),
+      screen.getByRole('textbox', {name: 'Pay-as-you-go Max Spend Setting'}),
       'Disable'
     );
     const enabledSoftCapFields = screen.getAllByLabelText(/Soft Cap Type/);
@@ -845,21 +845,21 @@ describe('provisionSubscriptionAction', () => {
       'Invoiced'
     );
     await selectEvent.select(
-      await screen.findByRole('textbox', {name: 'On-Demand Max Spend Setting'}),
+      await screen.findByRole('textbox', {name: 'Pay-as-you-go Max Spend Setting'}),
       'Shared'
     );
 
     expect(
-      within(container).getByLabelText('Retain On-Demand Budget')
+      within(container).getByLabelText('Retain Pay-as-you-go Budget')
     ).toBeInTheDocument();
 
     await selectEvent.select(
-      await screen.findByRole('textbox', {name: 'On-Demand Max Spend Setting'}),
+      await screen.findByRole('textbox', {name: 'Pay-as-you-go Max Spend Setting'}),
       'Per Category'
     );
 
     expect(
-      within(container).queryByLabelText('Retain On-Demand Budget')
+      within(container).queryByLabelText('Retain Pay-as-you-go Budget')
     ).not.toBeInTheDocument();
 
     await selectEvent.select(
@@ -1251,7 +1251,7 @@ describe('provisionSubscriptionAction', () => {
     );
 
     await selectEvent.select(
-      await screen.findByRole('textbox', {name: 'On-Demand Max Spend Setting'}),
+      await screen.findByRole('textbox', {name: 'Pay-as-you-go Max Spend Setting'}),
       'Disable'
     );
 
@@ -1380,7 +1380,7 @@ describe('provisionSubscriptionAction', () => {
     );
 
     await selectEvent.select(
-      await screen.findByRole('textbox', {name: 'On-Demand Max Spend Setting'}),
+      await screen.findByRole('textbox', {name: 'Pay-as-you-go Max Spend Setting'}),
       'Disable'
     );
 
@@ -1500,7 +1500,7 @@ describe('provisionSubscriptionAction', () => {
     );
 
     await selectEvent.select(
-      await screen.findByRole('textbox', {name: 'On-Demand Max Spend Setting'}),
+      await screen.findByRole('textbox', {name: 'Pay-as-you-go Max Spend Setting'}),
       'Disable'
     );