fix(billing): Show prepaid volumes for add-ons (#104893)

Fixes
https://www.notion.so/sentry/Reserved-quota-not-shown-for-sponsored-enterprise-2c68b10e4b5d808ca08fec7f142aa0fe?source=copy_link
and
https://www.notion.so/sentry/Show-X-Y-active-contributors-when-Y-0-2c78b10e4b5d8051ae74c959eab62215?source=copy_link

Seer is also considered enabled when an org has X prepaid volume. This
PR ensures we display that prepaid volume in the table and in panel when
Seer is selected.

<img width="3350" height="655" alt="Screenshot 2025-12-15 at 11 45
18 AM"
src="https://github.com/user-attachments/assets/c72de37f-e58c-45bc-8444-3baf01ff58a0"
/>

I also added an empty state for the active contributors table since it
felt cut off without one.

<img width="1133" height="475" alt="Screenshot 2025-12-12 at 4 31 24 PM"
src="https://github.com/user-attachments/assets/3e5da68c-d1c2-4bae-998b-64db318077ae"
/>

Finally this also corrects how we render unlimited prepaid volume in the
panel, opting to use `Unlimited` instead of the infinity sign to match
the tag we show in the table:
<img width="2462" height="744" alt="Screenshot 2025-12-12 at 4 34 00 PM"
src="https://github.com/user-attachments/assets/01d50a45-6100-417c-9f98-78fc1ecb5406"
/>

Author: isabellaenriquez

static/gsAdmin/components/provisionSubscriptionAction.tsx

@@ -372,7 +372,7 @@ class ProvisionSubscriptionModal extends Component<ModalProps, ModalState> {
   hasCompleteSeerBudget = () =>
     this.isSettingSeerBudget() &&
     Object.entries(this.state.data)
-      .filter(([key, _]) => key.startsWith('reservedSeer'))
+      .filter(([key, _]) => key.startsWith('reservedSeer') && key !== 'reservedSeerUsers')
       .every(([_, value]) => value === RESERVED_BUDGET_QUOTA) &&
     this.state.data.seerBudget;
 

static/gsApp/components/upgradeNowModal/usePreviewData.spec.tsx

@@ -24,7 +24,7 @@ const mockReservations: Reservations = {
   reservedSpans: undefined,
   reservedSeerAutofix: 0,
   reservedSeerScanner: 0,
-  reservedSeerUsers: undefined,
+  reservedSeerUsers: 0,
   reservedPreventUsers: undefined,
 };
 

static/gsApp/components/upgradeNowModal/useUpgradeNowParams.spec.tsx

@@ -57,7 +57,7 @@ describe('useUpgradeNowParams', () => {
           reservedSpans: undefined,
           reservedSeerAutofix: 0,
           reservedSeerScanner: 0,
-          reservedSeerUsers: undefined,
+          reservedSeerUsers: 0,
           reservedPreventUsers: undefined,
         },
       })

static/gsApp/utils/dataCategory.spec.tsx

@@ -112,7 +112,10 @@ describe('hasCategoryFeature', () => {
     const org = {...organization, features: []};
     expect(hasCategoryFeature('unknown' as DataCategory, subscription, org)).toBe(false);
   });
+});
 
+describe('sortCategories', () => {
+  const organization = OrganizationFixture();
   it('returns sorted categories', () => {
     const sub = SubscriptionFixture({organization, plan: 'am1_team'});
     expect(sortCategories(sub.categories)).toStrictEqual([
@@ -164,6 +167,12 @@ describe('hasCategoryFeature', () => {
         prepaid: 0,
         order: 15,
       }),
+      MetricHistoryFixture({
+        category: DataCategory.SEER_USER,
+        reserved: 0,
+        prepaid: 0,
+        order: 16,
+      }),
     ]);
   });
 
@@ -242,6 +251,15 @@ describe('hasCategoryFeature', () => {
           order: 15,
         }),
       ],
+      [
+        'seerUsers',
+        MetricHistoryFixture({
+          category: DataCategory.SEER_USER,
+          reserved: 0,
+          prepaid: 0,
+          order: 16,
+        }),
+      ],
     ]);
   });
 });

static/gsApp/views/subscriptionPage/usageOverview/components/billedSeats.tsx

@@ -2,6 +2,7 @@ import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import {Container} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text';
 
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
@@ -14,6 +15,7 @@ import type {Organization} from 'sentry/types/organization';
 import {defined} from 'sentry/utils';
 import {useApiQuery} from 'sentry/utils/queryClient';
 
+import {UNLIMITED_RESERVED} from 'getsentry/constants';
 import {useProductBillingMetadata} from 'getsentry/hooks/useProductBillingMetadata';
 import {
   AddOnCategory,
@@ -30,7 +32,7 @@ function BilledSeats({
   selectedProduct: DataCategory | AddOnCategory;
   subscription: Subscription;
 }) {
-  const {billedCategory, isEnabled} = useProductBillingMetadata(
+  const {billedCategory, isEnabled, activeProductTrial} = useProductBillingMetadata(
     subscription,
     selectedProduct
   );
@@ -55,39 +57,56 @@ function BilledSeats({
     return null;
   }
 
+  const metricHistory = subscription.categories[billedCategory];
+  if (!metricHistory) {
+    return null;
+  }
+
   return (
     <Fragment>
-      <Table hasBorderTop={(billedSeats?.length ?? 0) > 0}>
-        <SimpleTable.Header
-          style={{
-            borderBottom: billedSeats?.length === 0 ? 'none' : undefined,
-          }}
-        >
+      <Table
+        hasBorderTop={
+          // add a top border if there is info above this component in the panel
+          // we can infer this by checking if there is at least one billed seat
+          // (info includes accumulated spend) or by checking that the prepaid
+          // volume for the seat category is greater than 0 (info includes reserved
+          // and gifted volumes)
+          (billedSeats?.length ?? 0) > 0 ||
+          !!activeProductTrial ||
+          (defined(metricHistory.prepaid) &&
+            (metricHistory.prepaid > 0 || metricHistory.prepaid === UNLIMITED_RESERVED))
+        }
+      >
+        <SimpleTable.Header>
           <SimpleTable.HeaderCell style={{textTransform: 'uppercase'}}>
             {tct('Active Contributors ([count])', {count: billedSeats?.length ?? 0})}
           </SimpleTable.HeaderCell>
           <SimpleTable.HeaderCell style={{textTransform: 'uppercase'}}>
             {t('Date Added')}
           </SimpleTable.HeaderCell>
         </SimpleTable.Header>
-        {seatsError && (
+        {seatsError ? (
           <SimpleTable.Empty>
             <LoadingError onRetry={refetch} />
           </SimpleTable.Empty>
-        )}
-        {seatsLoading && (
+        ) : seatsLoading ? (
           <SimpleTable.Empty>
             <LoadingIndicator />
           </SimpleTable.Empty>
+        ) : billedSeats && billedSeats.length > 0 ? (
+          billedSeats.map(seat => (
+            <SimpleTable.Row key={seat.id}>
+              <SimpleTable.RowCell>@{seat.displayName}</SimpleTable.RowCell>
+              <SimpleTable.RowCell>
+                <TimeSince date={seat.created} />
+              </SimpleTable.RowCell>
+            </SimpleTable.Row>
+          ))
+        ) : (
+          <SimpleTable.Empty>
+            <Text variant="muted">{t('No billed usage recorded yet.')}</Text>
+          </SimpleTable.Empty>
         )}
-        {billedSeats?.map(seat => (
-          <SimpleTable.Row key={seat.id}>
-            <SimpleTable.RowCell>@{seat.displayName}</SimpleTable.RowCell>
-            <SimpleTable.RowCell>
-              <TimeSince date={seat.created} />
-            </SimpleTable.RowCell>
-          </SimpleTable.Row>
-        ))}
       </Table>
       {billedSeats && billedSeats.length > 0 && (
         <Container padding="0 lg lg" borderTop="primary">

static/gsApp/views/subscriptionPage/usageOverview/components/breakdownInfo.tsx

@@ -200,38 +200,36 @@ function DataCategoryUsageBreakdownInfo({
   const productCanUsePayg =
     plan.onDemandCategories.includes(category) &&
     hasPaygBudgetForCategory(subscription, category);
-  const platformReserved =
-    plan.planCategories[category]?.find(
-      bucket => bucket.price === 0 && bucket.events >= 0
-    )?.events ?? 0;
-  const platformReservedField = tct('[planName] plan', {planName: plan.name});
   const reserved = metricHistory.reserved ?? 0;
-  const isUnlimited = reserved === UNLIMITED_RESERVED;
-  const isAddOnChildCategory = checkIsAddOnChildCategory(subscription, category, true);
+  const platformReserved = subscription.canSelfServe
+    ? (plan.planCategories[category]?.find(
+        bucket => bucket.price === 0 && bucket.events >= 0
+      )?.events ?? 0)
+    : reserved;
+  const platformReservedField = tct('[planName] plan', {planName: plan.name});
 
   const additionalReserved = Math.max(0, reserved - platformReserved);
-  const shouldShowAdditionalReserved =
-    !isAddOnChildCategory &&
-    !isUnlimited &&
-    subscription.canSelfServe &&
-    additionalReserved > 0;
+  const shouldShowAdditionalReserved = additionalReserved > 0;
   const formattedAdditionalReserved = shouldShowAdditionalReserved
     ? formatReservedWithUnits(additionalReserved, category)
     : null;
   const formattedPlatformReserved =
-    isAddOnChildCategory || !reserved
-      ? null
-      : formatReservedWithUnits(
+    reserved > 0
+      ? formatReservedWithUnits(
           shouldShowAdditionalReserved ? platformReserved : reserved,
           category
-        );
+        )
+      : reserved === UNLIMITED_RESERVED
+        ? t('Unlimited')
+        : null;
 
   const gifted = metricHistory.free ?? 0;
   const formattedGifted = gifted ? formatReservedWithUnits(gifted, category) : null;
 
   const paygSpend = metricHistory.onDemandSpendUsed ?? 0;
   const paygCategoryBudget = metricHistory.onDemandBudget ?? 0;
 
+  const isAddOnChildCategory = checkIsAddOnChildCategory(subscription, category, true);
   const recurringReservedSpend = isAddOnChildCategory
     ? null
     : (plan.planCategories[category]?.find(bucket => bucket.events === reserved)?.price ??

static/gsApp/views/subscriptionPage/usageOverview/components/panel.spec.tsx

@@ -4,6 +4,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 import {CustomerUsageFixture} from 'getsentry-test/fixtures/customerUsage';
 import {MetricHistoryFixture} from 'getsentry-test/fixtures/metricHistory';
 import {
+  InvoicedSubscriptionFixture,
   SubscriptionFixture,
   SubscriptionWithLegacySeerFixture,
 } from 'getsentry-test/fixtures/subscription';
@@ -12,6 +13,7 @@ import {resetMockDate, setMockDate} from 'sentry-test/utils';
 
 import {DataCategory} from 'sentry/types/core';
 
+import {UNLIMITED_RESERVED} from 'getsentry/constants';
 import SubscriptionStore from 'getsentry/stores/subscriptionStore';
 import {AddOnCategory, OnDemandBudgetMode, type Subscription} from 'getsentry/types';
 import ProductBreakdownPanel from 'getsentry/views/subscriptionPage/usageOverview/components/panel';
@@ -78,6 +80,32 @@ describe('ProductBreakdownPanel', () => {
     expect(screen.getByText('$245.00 / month')).toBeInTheDocument();
   });
 
+  it('renders for data category with unlimited reserved', async () => {
+    subscription.categories.errors = {
+      ...subscription.categories.errors!,
+      reserved: UNLIMITED_RESERVED,
+      prepaid: UNLIMITED_RESERVED,
+    };
+    render(
+      <ProductBreakdownPanel
+        subscription={subscription}
+        organization={organization}
+        usageData={usageData}
+        selectedProduct={DataCategory.ERRORS}
+      />
+    );
+
+    await screen.findByRole('heading', {name: 'Errors'});
+    expect(screen.getByText('Included volume')).toBeInTheDocument();
+    expect(screen.getByText('Business plan')).toBeInTheDocument();
+    expect(screen.getByText('Unlimited')).toBeInTheDocument();
+    expect(screen.queryByText('Additional reserved')).not.toBeInTheDocument();
+    expect(screen.queryByText('Gifted')).not.toBeInTheDocument();
+    expect(screen.queryByText('Additional spend')).not.toBeInTheDocument();
+    expect(screen.queryByText('Pay-as-you-go')).not.toBeInTheDocument();
+    expect(screen.queryByText('Reserved spend')).not.toBeInTheDocument();
+  });
+
   it('renders for data category with per-category PAYG set', async () => {
     subscription.categories.errors = {
       ...subscription.categories.errors!,
@@ -381,6 +409,9 @@ describe('ProductBreakdownPanel', () => {
 
     await screen.findByRole('heading', {name: 'Replays'});
     expect(screen.getByText('Trial - 20 days left')).toBeInTheDocument();
+    expect(screen.getByText('Included volume')).toBeInTheDocument();
+    expect(screen.getByText('Trial')).toBeInTheDocument();
+    expect(screen.getByText('Unlimited')).toBeInTheDocument();
   });
 
   it('renders usage exceeded status without PAYG set', async () => {
@@ -520,4 +551,83 @@ describe('ProductBreakdownPanel', () => {
 
     await screen.findByText('Active Contributors (3)'); // wait for billed seats to be loaded
   });
+
+  it('renders for Seer add-on for non-self-serve subscription', async () => {
+    const enterpriseSubscription = InvoicedSubscriptionFixture({
+      plan: 'am3_business_ent_auf',
+      organization,
+    });
+    MockApiClient.addMockResponse({
+      url: `/customers/${organization.slug}/billing-seats/current/?billingMetric=seerUsers`,
+      method: 'GET',
+      body: [
+        {
+          billingMetric: DataCategory.SEER_USER,
+          created: '2021-01-01',
+          displayName: 'johndoe',
+          id: 1,
+          isTrialSeat: false,
+          projectId: 1,
+          seatIdentifier: '1234567890',
+          status: 'ASSIGNED',
+        },
+
+        {
+          billingMetric: DataCategory.SEER_USER,
+          created: '2021-01-01',
+          displayName: 'janedoe',
+          id: 2,
+          isTrialSeat: false,
+          projectId: 1,
+          seatIdentifier: '1234567890',
+          status: 'ASSIGNED',
+        },
+
+        {
+          billingMetric: DataCategory.SEER_USER,
+          created: '2021-01-01',
+          displayName: 'alicebob',
+          id: 3,
+          isTrialSeat: false,
+          projectId: 1,
+          seatIdentifier: '1234567890',
+          status: 'ASSIGNED',
+        },
+      ],
+    });
+    enterpriseSubscription.categories.seerUsers = MetricHistoryFixture({
+      category: DataCategory.SEER_USER,
+      usage: 3,
+      free: 1,
+      prepaid: 3,
+      reserved: 2,
+    });
+    enterpriseSubscription.addOns!.seer = {
+      ...subscription.addOns!.seer!,
+      enabled: true,
+    };
+    SubscriptionStore.set(organization.slug, enterpriseSubscription);
+    render(
+      <ProductBreakdownPanel
+        subscription={enterpriseSubscription}
+        organization={organization}
+        usageData={usageData}
+        selectedProduct={AddOnCategory.SEER}
+      />
+    );
+    await screen.findByRole('heading', {name: 'Seer'});
+    expect(screen.getByText('Included volume')).toBeInTheDocument();
+    expect(screen.getByText('Enterprise (Business) plan')).toBeInTheDocument();
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.queryByText('Additional reserved')).not.toBeInTheDocument();
+    expect(screen.getByText('Gifted')).toBeInTheDocument();
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.queryByText('Additional spend')).not.toBeInTheDocument();
+    expect(screen.queryByText('Pay-as-you-go')).not.toBeInTheDocument();
+    expect(screen.queryByText('Reserved spend')).not.toBeInTheDocument();
+    expect(screen.queryByText('Active contributors spend')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Configure Seer'})).toBeInTheDocument();
+
+    await screen.findByText('Active Contributors (3)'); // wait for billed seats to be loaded
+  });
 });