feat(seer): _admin product trial management (#91690)

Closes
https://linear.app/getsentry/issue/BIL-546/manage-seer-product-trials

<img width="611" alt="Screenshot 2025-05-14 at 5 53 52 PM"
src="https://github.com/user-attachments/assets/3fb31a87-7b35-42bf-9f84-e20771cd32e2"
/>

Author: isabellaenriquez

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

@@ -364,6 +364,7 @@ describe('CustomerOverview', function () {
     expect(screen.queryByText('Spans:')).not.toBeInTheDocument();
     expect(screen.queryByText('Performance Units:')).not.toBeInTheDocument();
     expect(screen.queryByText('Transactions:')).not.toBeInTheDocument();
+    expect(screen.queryByText('Seer:')).not.toBeInTheDocument();
   });
 
   it('renders no product trials for non-self-serve account', function () {
@@ -388,6 +389,7 @@ describe('CustomerOverview', function () {
     expect(screen.queryByText('Spans:')).not.toBeInTheDocument();
     expect(screen.queryByText('Performance Units:')).not.toBeInTheDocument();
     expect(screen.queryByText('Transactions:')).not.toBeInTheDocument();
+    expect(screen.queryByText('Seer:')).not.toBeInTheDocument();
   });
 
   it('render product trials for am1 account', function () {
@@ -399,6 +401,7 @@ describe('CustomerOverview', function () {
       canSelfServe: true,
     });
     am1_subscription.planDetails.categories = [DataCategory.TRANSACTIONS];
+    am1_subscription.planDetails.availableReservedBudgetTypes = {};
 
     render(
       <CustomerOverview
@@ -447,6 +450,7 @@ describe('CustomerOverview', function () {
     ).not.toBeInTheDocument();
 
     expect(within(productTrialsList).queryByText('Spans:')).not.toBeInTheDocument();
+    expect(within(productTrialsList).queryByText('Seer:')).not.toBeInTheDocument();
   });
 
   it('render product trials for am2 account', function () {
@@ -461,6 +465,7 @@ describe('CustomerOverview', function () {
       DataCategory.REPLAYS,
       DataCategory.TRANSACTIONS,
     ];
+    am2_subscription.planDetails.availableReservedBudgetTypes = {};
 
     render(
       <CustomerOverview
@@ -520,6 +525,7 @@ describe('CustomerOverview', function () {
     ).not.toBeInTheDocument();
 
     expect(within(productTrialsList).queryByText('Spans:')).not.toBeInTheDocument();
+    expect(within(productTrialsList).queryByText('Seer:')).not.toBeInTheDocument();
   });
 
   it('render product trials for am3 account', function () {
@@ -576,6 +582,17 @@ describe('CustomerOverview', function () {
       within(spansDefinition).getByRole('button', {name: 'Allow Trial'})
     ).toBeInTheDocument();
 
+    // Check within the Seer section
+    const seerTermElement = within(productTrialsList).getByText('Seer:');
+    const seerDefinition = seerTermElement.nextElementSibling;
+    expect(seerDefinition).toBeInTheDocument(); // Ensure we found the dd
+    if (!seerDefinition || !(seerDefinition instanceof HTMLElement)) {
+      throw new Error('Seer definition not found or not an HTMLElement');
+    }
+    expect(
+      within(seerDefinition).getByRole('button', {name: 'Allow Trial'})
+    ).toBeInTheDocument();
+
     // Ensure other trial categories are NOT present
     expect(
       within(productTrialsList).queryByText('Performance Units:')

static/gsAdmin/components/customers/customerOverview.tsx

@@ -12,6 +12,7 @@ import ConfigStore from 'sentry/stores/configStore';
 import {DataCategory} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
 import {defined} from 'sentry/utils';
+import {toTitleCase} from 'sentry/utils/string/toTitleCase';
 import useApi from 'sentry/utils/useApi';
 
 import ChangeARRAction from 'admin/components/changeARRAction';
@@ -445,6 +446,12 @@ function CustomerOverview({customer, onAction, organization}: Props) {
       )
     : [];
 
+  const productTrialCategoryGroups = customer.canSelfServe
+    ? Object.values(customer.planDetails.availableReservedBudgetTypes).filter(
+        group => group.canProductTrial
+      )
+    : [];
+
   function updateCustomerStatus(action: string, type: string) {
     const data = {
       [action]: true,
@@ -462,6 +469,43 @@ function CustomerOverview({customer, onAction, organization}: Props) {
     });
   }
 
+  const getTrialManagementActions = (apiName: string, trialName: string) => {
+    const formattedApiName = upperFirst(apiName);
+    return (
+      <DetailLabel
+        key={apiName}
+        title={toTitleCase(trialName, {allowInnerUpperCase: true})}
+      >
+        <TrialActions>
+          <Button
+            size="xs"
+            onClick={() =>
+              updateCustomerStatus(`allowTrial${formattedApiName}`, 'product trial')
+            }
+          >
+            Allow Trial
+          </Button>
+          <Button
+            size="xs"
+            onClick={() =>
+              updateCustomerStatus(`startTrial${formattedApiName}`, 'product trial')
+            }
+          >
+            Start Trial
+          </Button>
+          <Button
+            size="xs"
+            onClick={() =>
+              updateCustomerStatus(`stopTrial${formattedApiName}`, 'product trial')
+            }
+          >
+            Stop Trial
+          </Button>
+        </TrialActions>
+      </DetailLabel>
+    );
+  };
+
   return (
     <DetailsContainer>
       <div>
@@ -642,7 +686,7 @@ function CustomerOverview({customer, onAction, organization}: Props) {
             </ExternalLink>
           </DetailLabel>
         </DetailList>
-        {productTrialCategories.length > 0 && (
+        {productTrialCategories.length + productTrialCategoryGroups.length > 0 && (
           <Fragment>
             <h6>Product Trials</h6>
             <ProductTrialsDetailListContainer>
@@ -652,47 +696,10 @@ function CustomerOverview({customer, onAction, organization}: Props) {
                   category: categoryInfo.plural,
                   title: true,
                 });
-                const upperCategory = upperFirst(categoryInfo.plural);
-
-                return (
-                  <DetailLabel key={categoryInfo.plural} title={categoryName}>
-                    <TrialActions>
-                      <Button
-                        size="xs"
-                        onClick={() =>
-                          updateCustomerStatus(
-                            `allowTrial${upperCategory}`,
-                            'product trial'
-                          )
-                        }
-                      >
-                        Allow Trial
-                      </Button>
-                      <Button
-                        size="xs"
-                        onClick={() =>
-                          updateCustomerStatus(
-                            `startTrial${upperCategory}`,
-                            'product trial'
-                          )
-                        }
-                      >
-                        Start Trial
-                      </Button>
-                      <Button
-                        size="xs"
-                        onClick={() =>
-                          updateCustomerStatus(
-                            `stopTrial${upperCategory}`,
-                            'product trial'
-                          )
-                        }
-                      >
-                        Stop Trial
-                      </Button>
-                    </TrialActions>
-                  </DetailLabel>
-                );
+                return getTrialManagementActions(categoryInfo.plural, categoryName);
+              })}
+              {productTrialCategoryGroups.map(group => {
+                return getTrialManagementActions(group.apiName, group.productName);
               })}
             </ProductTrialsDetailListContainer>
           </Fragment>