fix(quota alert): copy change (#90204)

isabellaenriquez · web-flow · commit 5a6def8781eb · 2025-04-23T12:41:17.000-07:00
"Quota Exceeded" -> "[category] Quota Exceeded" if only one category is exceeded, else "Quotas Exceeded" ![Screenshot 2025-04-23 at 11 35 09 AM](https://github.com/user-attachments/assets/4726d099-a1b5-4c63-9ed0-88f35f8eb1c3) ![Screenshot 2025-04-23 at 11 35 37 AM](https://github.com/user-attachments/assets/e34bb1a1-601b-4933-950a-ed2cbae8187a) If a non-PAYG only category and any PAYG only categories (ie. crons, profiling hours) are exceeded, we still render the singular title (ie. "[non-PAYG only category] Quota Exceeded") if the customer doesn't have PAYG, otherwise we'd render "Quotas Exceeded"
diff --git a/static/gsApp/components/navBillingStatus.spec.tsx b/static/gsApp/components/navBillingStatus.spec.tsx
@@ -112,13 +112,13 @@ describe('PrimaryNavigationQuotaExceeded', function () {
     ).toBe('Mon Jun 06 2022');
   }
 
-  it('should render', async function () {
+  it('should render for multiple categories', async function () {
     render(<PrimaryNavigationQuotaExceeded organization={organization} />);
 
     // open the alert
     await userEvent.click(await screen.findByRole('button', {name: 'Billing Status'}));
-    expect(await screen.findByText('Quota Exceeded')).toBeInTheDocument();
-    // doesn't show categories with <1 reserved tier and no PAYG
+    expect(await screen.findByText('Quotas Exceeded')).toBeInTheDocument();
+    // doesn't show categories with <=1 reserved tier and no PAYG
     expect(
       screen.getByText(
         /You’ve run out of errors, replays, and spans for this billing cycle./
@@ -129,6 +129,47 @@ describe('PrimaryNavigationQuotaExceeded', function () {
     expect(screen.getByRole('checkbox')).not.toBeChecked();
   });
 
+  it('should render for single category', async function () {
+    const newSub = SubscriptionFixture({
+      organization,
+      plan: 'am3_team',
+    });
+    newSub.categories.errors!.usageExceeded = true;
+    newSub.categories.monitorSeats!.usageExceeded = true;
+    SubscriptionStore.set(organization.slug, newSub);
+    localStorage.setItem(
+      `billing-status-last-shown-categories-${organization.id}`,
+      'errors' // exceeded categories
+    );
+    render(<PrimaryNavigationQuotaExceeded organization={organization} />);
+
+    // open the alert
+    await userEvent.click(await screen.findByRole('button', {name: 'Billing Status'}));
+
+    expect(await screen.findByText('Error Quota Exceeded')).toBeInTheDocument();
+    expect(
+      screen.getByText(/You’ve run out of errors for this billing cycle./)
+    ).toBeInTheDocument(); // doesn't show categories with <=1 reserved tier and no PAYG
+    expect(screen.getByRole('checkbox')).not.toBeChecked();
+  });
+
+  it('should not render for zero categories', function () {
+    const newSub = SubscriptionFixture({
+      organization,
+      plan: 'am3_team',
+    });
+    // these categories are PAYG categories and there is no PAYG, so they should not trigger the alert
+    newSub.categories.monitorSeats!.usageExceeded = true;
+    newSub.categories.profileDuration!.usageExceeded = true;
+    SubscriptionStore.set(organization.slug, newSub);
+    localStorage.clear();
+    render(<PrimaryNavigationQuotaExceeded organization={organization} />);
+    expect(
+      screen.queryByRole('button', {name: 'Billing Status'})
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText('Quotas Exceeded')).not.toBeInTheDocument();
+  });
+
   it('should render PAYG categories when there is shared PAYG', async function () {
     localStorage.setItem(
       `billing-status-last-shown-categories-${organization.id}`,
@@ -140,7 +181,7 @@ describe('PrimaryNavigationQuotaExceeded', function () {
 
     // open the alert
     await userEvent.click(await screen.findByRole('button', {name: 'Billing Status'}));
-    expect(await screen.findByText('Quota Exceeded')).toBeInTheDocument();
+    expect(await screen.findByText('Quotas Exceeded')).toBeInTheDocument();
     expect(
       screen.getByText(
         /You’ve run out of errors, replays, spans, cron monitors, and continuous profile hours for this billing cycle./
@@ -177,7 +218,7 @@ describe('PrimaryNavigationQuotaExceeded', function () {
 
     // open the alert
     await userEvent.click(await screen.findByRole('button', {name: 'Billing Status'}));
-    expect(await screen.findByText('Quota Exceeded')).toBeInTheDocument();
+    expect(await screen.findByText('Quotas Exceeded')).toBeInTheDocument();
     expect(
       screen.getByText(
         /You’ve run out of errors, replays, spans, and cron monitors for this billing cycle./
@@ -197,7 +238,7 @@ describe('PrimaryNavigationQuotaExceeded', function () {
     expect(
       screen.queryByRole('button', {name: 'Billing Status'})
     ).not.toBeInTheDocument();
-    expect(screen.queryByText('Quota Exceeded')).not.toBeInTheDocument();
+    expect(screen.queryByText('Quotas Exceeded')).not.toBeInTheDocument();
 
     // reset
     subscription.canSelfServe = true;
@@ -208,7 +249,7 @@ describe('PrimaryNavigationQuotaExceeded', function () {
 
     // open the alert
     await userEvent.click(await screen.findByRole('button', {name: 'Billing Status'}));
-    expect(await screen.findByText('Quota Exceeded')).toBeInTheDocument();
+    expect(await screen.findByText('Quotas Exceeded')).toBeInTheDocument();
 
     // stop the alert from animating
     await userEvent.click(screen.getByRole('checkbox'));
@@ -220,7 +261,7 @@ describe('PrimaryNavigationQuotaExceeded', function () {
 
     // open the alert
     await userEvent.click(await screen.findByRole('button', {name: 'Billing Status'}));
-    expect(await screen.findByText('Quota Exceeded')).toBeInTheDocument();
+    expect(await screen.findByText('Quotas Exceeded')).toBeInTheDocument();
     expect(screen.getByText('Request Additional Quota')).toBeInTheDocument();
 
     // click the button
@@ -235,11 +276,12 @@ describe('PrimaryNavigationQuotaExceeded', function () {
       organization,
       plan: 'am3_f',
     });
+    freeSub.categories.errors!.usageExceeded = true;
     freeSub.categories.replays!.usageExceeded = true;
     SubscriptionStore.set(organization.slug, freeSub);
     localStorage.setItem(
       `billing-status-last-shown-categories-${organization.id}`,
-      'replays'
+      'errors-replays'
     );
     MockApiClient.addMockResponse({
       method: 'GET',
@@ -251,12 +293,12 @@ describe('PrimaryNavigationQuotaExceeded', function () {
 
     // open the alert
     await userEvent.click(await screen.findByRole('button', {name: 'Billing Status'}));
-    expect(await screen.findByText('Quota Exceeded')).toBeInTheDocument();
+    expect(await screen.findByText('Quotas Exceeded')).toBeInTheDocument();
     expect(screen.getByText('Start Trial')).toBeInTheDocument();
 
     // click the button
     await userEvent.click(screen.getByText('Start Trial'));
-    expect(promptMock).toHaveBeenCalledTimes(1);
+    expect(promptMock).toHaveBeenCalledTimes(2);
     expect(customerPutMock).toHaveBeenCalled();
   });
 
@@ -265,14 +307,14 @@ describe('PrimaryNavigationQuotaExceeded', function () {
     expect(
       await screen.findByRole('button', {name: 'Billing Status'})
     ).toBeInTheDocument();
-    expect(screen.queryByText('Quota Exceeded')).not.toBeInTheDocument();
+    expect(screen.queryByText('Quotas Exceeded')).not.toBeInTheDocument();
 
     localStorage.clear();
     render(<PrimaryNavigationQuotaExceeded organization={organization} />);
     expect(
       await screen.findByRole('button', {name: 'Billing Status'})
     ).toBeInTheDocument();
-    expect(await screen.findByText('Quota Exceeded')).toBeInTheDocument();
+    expect(await screen.findByText('Quotas Exceeded')).toBeInTheDocument();
     assertLocalStorageStateAfterAutoOpen();
   });
 
@@ -298,15 +340,15 @@ describe('PrimaryNavigationQuotaExceeded', function () {
     expect(
       await screen.findByRole('button', {name: 'Billing Status'})
     ).toBeInTheDocument();
-    expect(screen.queryByText('Quota Exceeded')).not.toBeInTheDocument();
+    expect(screen.queryByText('Quotas Exceeded')).not.toBeInTheDocument();
 
     // even when localStorage is cleared, the alert should not show
     localStorage.clear();
     render(<PrimaryNavigationQuotaExceeded organization={organization} />);
     expect(
       await screen.findByRole('button', {name: 'Billing Status'})
     ).toBeInTheDocument();
-    expect(screen.queryByText('Quota Exceeded')).not.toBeInTheDocument();
+    expect(screen.queryByText('Quotas Exceeded')).not.toBeInTheDocument();
     expect(localStorage).toHaveLength(0);
   });
 
@@ -330,19 +372,19 @@ describe('PrimaryNavigationQuotaExceeded', function () {
     });
     localStorage.clear();
     render(<PrimaryNavigationQuotaExceeded organization={organization} />);
-    expect(await screen.findByText('Quota Exceeded')).toBeInTheDocument();
+    expect(await screen.findByText('Quotas Exceeded')).toBeInTheDocument();
   });
 
   it('should auto open the alert when categories have changed', async function () {
     render(<PrimaryNavigationQuotaExceeded organization={organization} />);
-    expect(screen.queryByText('Quota Exceeded')).not.toBeInTheDocument();
+    expect(screen.queryByText('Quotas Exceeded')).not.toBeInTheDocument();
 
     localStorage.setItem(
       `billing-status-last-shown-categories-${organization.id}`,
       'errors-replays'
     ); // spans not included, so alert should show even though last opened "today"
     render(<PrimaryNavigationQuotaExceeded organization={organization} />);
-    expect(await screen.findByText('Quota Exceeded')).toBeInTheDocument();
+    expect(await screen.findByText('Quotas Exceeded')).toBeInTheDocument();
     assertLocalStorageStateAfterAutoOpen();
   });
 
@@ -352,7 +394,7 @@ describe('PrimaryNavigationQuotaExceeded', function () {
       'Sun Jun 05 2022'
     ); // more than a day, so alert should show even though categories haven't changed
     render(<PrimaryNavigationQuotaExceeded organization={organization} />);
-    expect(await screen.findByText('Quota Exceeded')).toBeInTheDocument();
+    expect(await screen.findByText('Quotas Exceeded')).toBeInTheDocument();
     assertLocalStorageStateAfterAutoOpen();
   });
 
@@ -362,7 +404,7 @@ describe('PrimaryNavigationQuotaExceeded', function () {
       'Sun May 29 2022'
     ); // last seen before current usage cycle started, so alert should show even though categories haven't changed
     render(<PrimaryNavigationQuotaExceeded organization={organization} />);
-    expect(await screen.findByText('Quota Exceeded')).toBeInTheDocument();
+    expect(await screen.findByText('Quotas Exceeded')).toBeInTheDocument();
     assertLocalStorageStateAfterAutoOpen();
   });
 });
diff --git a/static/gsApp/components/navBillingStatus.tsx b/static/gsApp/components/navBillingStatus.tsx
@@ -31,7 +31,11 @@ import {
   type Subscription,
 } from 'getsentry/types';
 import {getCategoryInfoFromPlural} from 'getsentry/utils/billing';
-import {listDisplayNames, sortCategoriesWithKeys} from 'getsentry/utils/dataCategory';
+import {
+  getSingularCategoryName,
+  listDisplayNames,
+  sortCategoriesWithKeys,
+} from 'getsentry/utils/dataCategory';
 import trackGetsentryAnalytics from 'getsentry/utils/trackGetsentryAnalytics';
 
 const ANIMATE_PROPS: MotionProps = {
@@ -80,7 +84,18 @@ function QuotaExceededContent({
         <HeaderTitle>{t('Billing Status')}</HeaderTitle>
       </Header>
       <Body>
-        <Title>{t('Quota Exceeded')}</Title>
+        <Title>
+          {exceededCategories.length === 1
+            ? tct('[category] Quota Exceeded', {
+                category: getSingularCategoryName({
+                  plan: subscription.planDetails,
+                  category: exceededCategories[0] as DataCategory,
+                  hadCustomDynamicSampling: subscription.hadCustomDynamicSampling,
+                  title: true,
+                }),
+              })
+            : t('Quotas Exceeded')}
+        </Title>
         <Description>
           {tct(
             'You’ve run out of [exceededCategories] for this billing cycle. This means we are no longer monitoring or ingesting events and showing them in Sentry.',
