Isabella/overview rehaul

static/gsApp/hooks/useProductBillingMetadata.tsx

@@ -0,0 +1,86 @@
+import type {DataCategory} from 'sentry/types/core';
+import {toTitleCase} from 'sentry/utils/string/toTitleCase';
+
+import type {AddOn, AddOnCategory, ProductTrial, Subscription} from 'getsentry/types';
+import {
+  checkIsAddOn,
+  getActiveProductTrial,
+  getBilledCategory,
+  getPotentialProductTrial,
+  productIsEnabled,
+} from 'getsentry/utils/billing';
+import {getPlanCategoryName} from 'getsentry/utils/dataCategory';
+
+interface ProductBillingMetadata {
+  activeProductTrial: ProductTrial | null;
+  billedCategory: DataCategory | null;
+  displayName: string;
+  isAddOn: boolean;
+  isEnabled: boolean;
+  potentialProductTrial: ProductTrial | null;
+  usageExceeded: boolean;
+  addOnInfo?: AddOn;
+}
+
+const EMPTY_PRODUCT_BILLING_METADATA: ProductBillingMetadata = {
+  billedCategory: null,
+  displayName: '',
+  isAddOn: false,
+  isEnabled: false,
+  usageExceeded: false,
+  activeProductTrial: null,
+  potentialProductTrial: null,
+};
+
+export function useProductBillingMetadata(
+  subscription: Subscription,
+  product: DataCategory | AddOnCategory,
+  parentProduct?: DataCategory | AddOnCategory,
+  excludeProductTrials?: boolean
+): ProductBillingMetadata {
+  const isAddOn = checkIsAddOn(parentProduct ?? product);
+  const billedCategory = getBilledCategory(subscription, product);
+
+  if (!billedCategory) {
+    return EMPTY_PRODUCT_BILLING_METADATA;
+  }
+
+  let displayName = '';
+  let addOnInfo = undefined;
+
+  if (isAddOn) {
+    const category = (parentProduct ?? product) as AddOnCategory;
+    addOnInfo = subscription.addOns?.[category];
+    if (!addOnInfo) {
+      return EMPTY_PRODUCT_BILLING_METADATA;
+    }
+    displayName = parentProduct
+      ? getPlanCategoryName({
+          plan: subscription.planDetails,
+          category: billedCategory,
+          title: true,
+        })
+      : toTitleCase(addOnInfo.productName, {allowInnerUpperCase: true});
+  } else {
+    displayName = getPlanCategoryName({
+      plan: subscription.planDetails,
+      category: billedCategory,
+      title: true,
+    });
+  }
+
+  return {
+    displayName,
+    billedCategory,
+    isAddOn,
+    isEnabled: productIsEnabled(subscription, parentProduct ?? product),
+    addOnInfo,
+    usageExceeded: subscription.categories[billedCategory]?.usageExceeded ?? false,
+    activeProductTrial: excludeProductTrials
+      ? null
+      : getActiveProductTrial(subscription.productTrials ?? null, billedCategory),
+    potentialProductTrial: excludeProductTrials
+      ? null
+      : getPotentialProductTrial(subscription.productTrials ?? null, billedCategory),
+  };
+}

static/gsApp/types/index.tsx

@@ -149,7 +149,7 @@ export type AddOnCategoryInfo = {
   productName: string;
 };
 
-type AddOn = AddOnCategoryInfo & {
+export type AddOn = AddOnCategoryInfo & {
   enabled: boolean;
 };
 

static/gsApp/utils/billing.spec.tsx

@@ -185,6 +185,11 @@ describe('formatReservedWithUnits', () => {
         useUnitScaling: true,
       })
     ).toBe(UNLIMITED);
+    expect(
+      formatReservedWithUnits(-1, DataCategory.ATTACHMENTS, {
+        useUnitScaling: true,
+      })
+    ).toBe(UNLIMITED);
   });
 
   it('returns correct string for Profile Duration', () => {
@@ -254,6 +259,12 @@ describe('formatReservedWithUnits', () => {
       })
     ).toBe(UNLIMITED);
 
+    expect(
+      formatReservedWithUnits(-1, DataCategory.LOG_BYTE, {
+        useUnitScaling: true,
+      })
+    ).toBe(UNLIMITED);
+
     expect(
       formatReservedWithUnits(1234, DataCategory.LOG_BYTE, {
         isAbbreviated: true,

static/gsApp/utils/billing.tsx

@@ -6,6 +6,7 @@ import {DataCategory} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
 import {defined} from 'sentry/utils';
 import getDaysSinceDate from 'sentry/utils/getDaysSinceDate';
+import {toTitleCase} from 'sentry/utils/string/toTitleCase';
 import type {IconSize} from 'sentry/utils/theme';
 
 import {
@@ -158,11 +159,17 @@ export function formatReservedWithUnits(
   if (!isByteCategory(dataCategory)) {
     return formatReservedNumberToString(reservedQuantity, options);
   }
+
   // convert reservedQuantity to BYTES to check for unlimited
-  const usageGb = reservedQuantity ? reservedQuantity * GIGABYTE : reservedQuantity;
+  // unless it's already unlimited
+  const usageGb =
+    reservedQuantity && !isUnlimitedReserved(reservedQuantity)
+      ? reservedQuantity * GIGABYTE
+      : reservedQuantity;
   if (isUnlimitedReserved(usageGb)) {
     return options.isGifted ? '0 GB' : UNLIMITED;
   }
+
   if (!options.useUnitScaling) {
     const byteOptions =
       dataCategory === DataCategory.LOG_BYTE
@@ -622,7 +629,9 @@ export function hasAccessToSubscriptionOverview(
  */
 export function getSoftCapType(metricHistory: BillingMetricHistory): string | null {
   if (metricHistory.softCapType) {
-    return titleCase(metricHistory.softCapType.replace(/_/g, ' '));
+    return toTitleCase(metricHistory.softCapType.replace(/_/g, ' ').toLowerCase(), {
+      allowInnerUpperCase: true,
+    }).replace(' ', metricHistory.softCapType === 'ON_DEMAND' ? '-' : ' ');
   }
   if (metricHistory.trueForward) {
     return 'True Forward';
@@ -861,3 +870,81 @@ export function formatOnDemandDescription(
   const budgetTerm = displayBudgetName(plan, {title: false}).toLowerCase();
   return description.replace(new RegExp(`\\s*${budgetTerm}\\s*`, 'gi'), ' ').trim();
 }
+
+/**
+ * Given a DataCategory or AddOnCategory, returns true if it is an add-on, false otherwise.
+ */
+export function checkIsAddOn(
+  selectedProduct: DataCategory | AddOnCategory | string
+): boolean {
+  return Object.values(AddOnCategory).includes(selectedProduct as AddOnCategory);
+}
+
+/**
+ * Get the billed DataCategory for an add-on or DataCategory.
+ */
+export function getBilledCategory(
+  subscription: Subscription,
+  selectedProduct: DataCategory | AddOnCategory
+): DataCategory | null {
+  if (checkIsAddOn(selectedProduct)) {
+    const category = selectedProduct as AddOnCategory;
+    const addOnInfo = subscription.addOns?.[category];
+    if (!addOnInfo) {
+      return null;
+    }
+
+    const {dataCategories, apiName} = addOnInfo;
+    const reservedBudgetCategory = getReservedBudgetCategoryForAddOn(apiName);
+    const reservedBudget = subscription.reservedBudgets?.find(
+      budget => budget.apiName === reservedBudgetCategory
+    );
+    return reservedBudget
+      ? (dataCategories.find(dataCategory =>
+          subscription.planDetails.planCategories[dataCategory]?.find(
+            bucket => bucket.events === RESERVED_BUDGET_QUOTA
+          )
+        ) ?? dataCategories[0]!)
+      : dataCategories[0]!;
+  }
+
+  return selectedProduct as DataCategory;
+}
+
+export function productIsEnabled(
+  subscription: Subscription,
+  selectedProduct: DataCategory | AddOnCategory
+): boolean {
+  const billedCategory = getBilledCategory(subscription, selectedProduct);
+  if (!billedCategory) {
+    return false;
+  }
+
+  const activeProductTrial = getActiveProductTrial(
+    subscription.productTrials ?? null,
+    billedCategory
+  );
+  if (activeProductTrial) {
+    return true;
+  }
+
+  if (checkIsAddOn(selectedProduct)) {
+    const addOnInfo = subscription.addOns?.[selectedProduct as AddOnCategory];
+    if (!addOnInfo) {
+      return false;
+    }
+    return addOnInfo.enabled;
+  }
+
+  const metricHistory = subscription.categories[billedCategory];
+  if (!metricHistory) {
+    return false;
+  }
+  const isPaygOnly = metricHistory.reserved === 0;
+  return (
+    !isPaygOnly ||
+    metricHistory.onDemandBudget > 0 ||
+    (subscription.onDemandBudgets?.budgetMode === OnDemandBudgetMode.SHARED &&
+      subscription.onDemandBudgets.sharedMaxBudget > 0)
+  );
+}

static/gsApp/utils/trackGetsentryAnalytics.tsx

@@ -203,9 +203,13 @@ type GetsentryEventParameters = {
     addOnCategory: AddOnCategory;
     isOpen: boolean;
   } & HasSub;
-  'subscription_page.usage_overview.row_clicked': {
-    dataCategory: DataCategory;
-  } & HasSub;
+  'subscription_page.usage_overview.row_clicked': (
+    | {
+        dataCategory: DataCategory;
+      }
+    | {addOnCategory: AddOnCategory}
+  ) &
+    HasSub;
   'subscription_page.usage_overview.transform_changed': {
     transform: string;
   } & HasSub;