fix(sub v3): Show PAYG column for all orgs that can use it (#103070)

Originally, we only showed the PAYG spend column for self-serve orgs, or
invoiced orgs with special PAYG. There are other non-self-serve orgs
that can set PAYG, however, so instead we can use the existing
`supportsPayg` util function for determining whether to show it.

Author: isabellaenriquez

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

@@ -48,6 +48,7 @@ describe('UsageOverview', () => {
         usageData={usageData}
       />
     );
+    expect(screen.getAllByRole('columnheader')).toHaveLength(6);
     expect(screen.getByRole('columnheader', {name: 'Product'})).toBeInTheDocument();
     expect(screen.getByRole('columnheader', {name: 'Total usage'})).toBeInTheDocument();
     expect(screen.getByRole('columnheader', {name: 'Reserved'})).toBeInTheDocument();
@@ -73,6 +74,7 @@ describe('UsageOverview', () => {
         usageData={usageData}
       />
     );
+    expect(screen.getAllByRole('columnheader')).toHaveLength(6);
     expect(screen.getByRole('columnheader', {name: 'Product'})).toBeInTheDocument();
     expect(screen.getByRole('columnheader', {name: 'Total usage'})).toBeInTheDocument();
     expect(screen.getByRole('columnheader', {name: 'Reserved'})).toBeInTheDocument();
@@ -93,6 +95,54 @@ describe('UsageOverview', () => {
     );
   });
 
+  it('renders some spend columns for non-self-serve with PAYG support', () => {
+    const newSubscription = SubscriptionFixture({
+      organization,
+      plan: 'am3_business',
+      supportsOnDemand: true,
+      canSelfServe: false,
+    });
+    SubscriptionStore.set(organization.slug, newSubscription);
+    render(
+      <UsageOverview
+        subscription={newSubscription}
+        organization={organization}
+        usageData={usageData}
+      />
+    );
+    expect(screen.getAllByRole('columnheader')).toHaveLength(5);
+    expect(
+      screen.queryByRole('columnheader', {name: 'Reserved spend'})
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('columnheader', {name: 'Pay-as-you-go spend'})
+    ).toBeInTheDocument();
+  });
+
+  it('does not render spend columns for non-self-serve without PAYG support', () => {
+    const newSubscription = SubscriptionFixture({
+      organization,
+      plan: 'am3_business',
+      supportsOnDemand: false,
+      canSelfServe: false,
+    });
+    SubscriptionStore.set(organization.slug, newSubscription);
+    render(
+      <UsageOverview
+        subscription={newSubscription}
+        organization={organization}
+        usageData={usageData}
+      />
+    );
+    expect(screen.getAllByRole('columnheader')).toHaveLength(4);
+    expect(
+      screen.queryByRole('columnheader', {name: 'Reserved spend'})
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('columnheader', {name: 'Pay-as-you-go spend'})
+    ).not.toBeInTheDocument();
+  });
+
   it('renders table based on subscription state', () => {
     subscription.onDemandPeriodStart = '2025-05-02';
     subscription.onDemandPeriodEnd = '2025-06-01';

static/gsApp/views/subscriptionPage/usageOverview.tsx

@@ -57,6 +57,7 @@ import {
   getPotentialProductTrial,
   getReservedBudgetCategoryForAddOn,
   MILLISECONDS_IN_HOUR,
+  supportsPayg,
 } from 'getsentry/utils/billing';
 import {
   getCategoryInfoFromPlural,
@@ -274,18 +275,10 @@ function UsageOverviewTable({subscription, organization, usageData}: UsageOvervi
       column =>
         (subscription.canSelfServe ||
           !column.key.endsWith('Spend') ||
-          ((subscription.onDemandInvoiced || subscription.onDemandInvoicedManual) &&
-            column.key === 'budgetSpend')) &&
+          (supportsPayg(subscription) && column.key === 'budgetSpend')) &&
         (hasAnyPotentialOrActiveProductTrial || column.key !== 'trialInfo')
     );
-  }, [
-    subscription.planDetails,
-    subscription.productTrials,
-    subscription.canSelfServe,
-    subscription.onDemandInvoiced,
-    subscription.onDemandInvoicedManual,
-    isXlScreen,
-  ]);
+  }, [subscription, isXlScreen]);
 
   // TODO(isabella): refactor this to have better types
   const productData: Array<{