ref(provisioning): Rehaul form pt. 1 (#87138)

Updates:
- No more hardcoded plans! Parent component passes down billing config
(we query the endpoint for this in the parent component so we can reuse
it for other customer overview actions)
- Only shows relevant fields; this means if I am provisioning AM3, I
won't see any performance unit fields, if I am provisioning AM2, I won't
see any spans fields, etc.
- Category/SKU fields are generated based on plan, so no more manually
adding fields on the frontend when new categories are being launched
- Autofills form based on existing subscription, even if existing
subscription is not already enterprise
- Adds some enterprise plans to our fixtures + updates enterprise plan
names in fixtures to reflect recent update
- Uses the plan category name (ie. if an AM1 plan is selected, we say
"Transactions" over "Performance Units")
- Uses paygCpe over onDemandCpe so we can begin removing references to
the latter in the backend

In follow up PRs I'd like to:
- Convert all deprecated field components to their modern versions
- Convert to functional component and clean up state management where
possible

Depends on getsentry/getsentry#16995


https://github.com/user-attachments/assets/0e202f2c-f822-4e71-be39-e029eb4320d9

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: 2 people

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

@@ -115,31 +115,31 @@ describe('CustomerOverview', function () {
       categories: {
         errors: MetricHistoryFixture({
           customPrice: 300_000_00,
-          onDemandCpe: 12.345678,
+          paygCpe: 12.345678,
           order: 1,
         }),
         transactions: MetricHistoryFixture({
           category: DataCategory.TRANSACTIONS,
           customPrice: 400_000_00,
-          onDemandCpe: 100,
+          paygCpe: 100,
           order: 2,
         }),
         replays: MetricHistoryFixture({
           category: DataCategory.REPLAYS,
           customPrice: 100_000_00,
-          onDemandCpe: 50,
+          paygCpe: 50,
           order: 4,
         }),
         monitorSeats: MetricHistoryFixture({
           category: DataCategory.MONITOR_SEATS,
           customPrice: 10_000_00,
-          onDemandCpe: 7.55,
+          paygCpe: 7.55,
           order: 7,
         }),
         attachments: MetricHistoryFixture({
           category: DataCategory.ATTACHMENTS,
           customPrice: 150_000_00,
-          onDemandCpe: 20.3,
+          paygCpe: 20.3,
           order: 8,
         }),
       },

static/gsAdmin/components/customers/customerOverview.tsx

@@ -213,9 +213,9 @@ function ReservedData({customer}: ReservedDataProps) {
               </DetailLabel>
               {customer.onDemandInvoicedManual && (
                 <DetailLabel title={`Pay-as-you-go Cost-Per-Event ${categoryName}`}>
-                  {typeof categoryHistory.onDemandCpe === 'number'
+                  {typeof categoryHistory.paygCpe === 'number'
                     ? displayPriceWithCents({
-                        cents: categoryHistory.onDemandCpe,
+                        cents: categoryHistory.paygCpe,
                         minimumFractionDigits: 8,
                         maximumFractionDigits: 8,
                       })

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

@@ -344,7 +344,9 @@ describe('PendingChanges', function () {
 
     const {container} = render(<PendingChanges subscription={subscription} />);
 
-    expect(container).toHaveTextContent('Plan changes — Business → Business');
+    expect(container).toHaveTextContent(
+      'Plan changes — Business → Enterprise (Business)'
+    );
     expect(container).toHaveTextContent(
       'Reserved accepted spans — 10,000,000 → reserved budget'
     );
@@ -369,7 +371,6 @@ describe('PendingChanges', function () {
       pendingChanges: PendingChangesFixture({
         planDetails: PlanDetailsLookupFixture('am3_business_ent_auf'),
         plan: 'am3_business_ent_auf',
-        planName: 'Business',
         reserved: {
           spans: 10_000_000,
         },
@@ -378,7 +379,9 @@ describe('PendingChanges', function () {
 
     const {container} = render(<PendingChanges subscription={subscription} />);
 
-    expect(container).toHaveTextContent('Plan changes — Business → Business');
+    expect(container).toHaveTextContent(
+      'Plan changes — Enterprise (Business) → Enterprise (Business)'
+    );
     expect(container).toHaveTextContent(
       'Reserved accepted spans — reserved budget → 10,000,000 spans'
     );