chore(checkout v3): Remove suggested amount buttons

static/gsApp/views/amCheckout/steps/setSpendCap.spec.tsx

@@ -76,11 +76,6 @@ describe('SetSpendCap', () => {
     expect(
       screen.queryByRole('textbox', {name: 'Custom errors spending cap'})
     ).not.toBeInTheDocument();
-
-    await userEvent.click(
-      screen.getByRole('button', {name: '$500 suggested shared spending cap'})
-    );
-    expect(paygInput).toHaveValue('500');
   });
 
   it('renders for checkout v3 on pre-AM3 tier', async () => {
@@ -131,9 +126,5 @@ describe('SetSpendCap', () => {
       name: 'Custom errors spending cap',
     });
     expect(errorsPaygInput).toBeInTheDocument();
-    await userEvent.click(
-      screen.getByRole('button', {name: '$300 suggested errors spending cap'})
-    );
-    expect(errorsPaygInput).toHaveValue('300');
   });
 });

static/gsApp/views/amCheckout/steps/setSpendCap.tsx

@@ -42,13 +42,7 @@ function SetSpendCap({
   }, [formData.selectedProducts]);
 
   const handleBudgetChange = useCallback(
-    ({
-      onDemandBudgets,
-      fromButton,
-    }: {
-      fromButton: boolean;
-      onDemandBudgets: OnDemandBudgets;
-    }) => {
+    ({onDemandBudgets}: {onDemandBudgets: OnDemandBudgets}) => {
       const totalBudget = getTotalBudget(onDemandBudgets);
       onUpdate({
         ...formData,
@@ -62,7 +56,7 @@ function SetSpendCap({
           subscription,
           plan: formData.plan,
           cents: totalBudget || 0,
-          method: fromButton ? 'button' : 'textbox',
+          method: 'textbox',
         });
       }
     },
@@ -87,9 +81,7 @@ function SetSpendCap({
       onDemandBudgets={
         formData.onDemandBudget ?? parseOnDemandBudgetsFromSubscription(subscription)
       }
-      onUpdate={({onDemandBudgets, fromButton}) =>
-        handleBudgetChange({onDemandBudgets, fromButton: !!fromButton})
-      }
+      onUpdate={({onDemandBudgets}) => handleBudgetChange({onDemandBudgets})}
       currentReserved={formData.reserved}
       additionalProducts={additionalProducts}
       isOpen={isOpen}

static/gsApp/views/spendCaps/spendCapSettings.tsx

@@ -1,10 +1,8 @@
 import type React from 'react';
-import {Fragment, useState} from 'react';
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 import Color from 'color';
 
-import {Button} from 'sentry/components/core/button';
-import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {Input} from 'sentry/components/core/input';
 import {Flex, Grid} from 'sentry/components/core/layout';
 import {Radio} from 'sentry/components/core/radio';
@@ -27,8 +25,6 @@ import type {SelectableProduct} from 'getsentry/views/amCheckout/types';
 import {displayPrice, displayPriceWithCents} from 'getsentry/views/amCheckout/utils';
 import {convertOnDemandBudget} from 'getsentry/views/onDemandBudgets/utils';
 
-const SUGGESTED_SPENDING_CAPS = [300_00, 500_00, 1_000_00, 10_000_00];
-
 type PartialSpendCapUpdate = Partial<Record<DataCategory, number>> & {
   sharedMaxBudget?: number;
 };
@@ -45,13 +41,7 @@ interface SpendCapSettingsProps {
   currentReserved: Partial<Record<DataCategory, number>>;
   header: React.ReactNode;
   onDemandBudgets: OnDemandBudgets;
-  onUpdate: ({
-    onDemandBudgets,
-    fromButton,
-  }: {
-    onDemandBudgets: OnDemandBudgets;
-    fromButton?: boolean;
-  }) => void;
+  onUpdate: ({onDemandBudgets}: {onDemandBudgets: OnDemandBudgets}) => void;
   isOpen?: boolean;
 }
 
@@ -72,13 +62,7 @@ interface SpendCapInputProps extends Pick<SpendCapSettingsProps, 'activePlan'> {
   budgetMode: OnDemandBudgetMode;
   category: DataCategory | null;
   currentSpendingCap: number;
-  onUpdate: ({
-    newData,
-    fromButton,
-  }: {
-    newData: PartialSpendCapUpdate;
-    fromButton?: boolean;
-  }) => void;
+  onUpdate: ({newData}: {newData: PartialSpendCapUpdate}) => void;
   reserved: number | null;
 }
 
@@ -129,9 +113,6 @@ function SpendCapInput({
   category,
   reserved,
 }: SpendCapInputProps) {
-  const [selectedButton, setSelectedButton] = useState<string | null>(
-    `button-${currentSpendingCap}`
-  );
   // category and reserved should never be null for per category but this makes TS happy
   const isPerCategory =
     budgetMode === OnDemandBudgetMode.PER_CATEGORY &&
@@ -158,50 +139,23 @@ function SpendCapInput({
   };
 
   return (
-    <Flex align="center" justify="start" gap="md">
-      <ButtonBar merged gap="0">
-        {SUGGESTED_SPENDING_CAPS.map(cap => {
-          const isSelected = selectedButton === `button-${cap}`;
-          const formattedCap = displayPrice({cents: cap});
-          return (
-            <StyledButton
-              key={cap}
-              onClick={() => {
-                setSelectedButton(`button-${cap}`);
-                onUpdate({
-                  newData: {[inputName]: cap},
-                  fromButton: true,
-                });
-              }}
-              aria-checked={isSelected}
-              isSelected={isSelected}
-              aria-label={t('%s suggested %s spending cap', formattedCap, displayName)}
-            >
-              {formattedCap}
-            </StyledButton>
-          );
-        })}
-      </ButtonBar>
-      <Currency>
-        <StyledInput
-          aria-label={t('Custom %s spending cap', displayName)}
-          name={`spending-cap-${inputName}`}
-          type="text"
-          inputMode="numeric"
-          pattern="[0-9]*"
-          placeholder="300"
-          value={coerceValue(currentSpendingCap)}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            const parsedBudget = parseInputValue(e);
-            onUpdate({
-              newData: {[inputName]: parsedBudget},
-              fromButton: false,
-            });
-            setSelectedButton(`button-${parsedBudget}`);
-          }}
-        />
-      </Currency>
-    </Flex>
+    <Currency>
+      <StyledInput
+        aria-label={t('Custom %s spending cap', displayName)}
+        name={`spending-cap-${inputName}`}
+        type="text"
+        inputMode="numeric"
+        pattern="[0-9]*"
+        placeholder="300"
+        value={coerceValue(currentSpendingCap)}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          const parsedBudget = parseInputValue(e);
+          onUpdate({
+            newData: {[inputName]: parsedBudget},
+          });
+        }}
+      />
+    </Currency>
   );
 }
 
@@ -328,13 +282,7 @@ function InnerSpendCapSettings({
   currentReserved,
   additionalProducts,
 }: InnerSpendCapSettingsProps) {
-  const handleUpdate = ({
-    newData,
-    fromButton,
-  }: {
-    newData: PartialSpendCapUpdate;
-    fromButton?: boolean;
-  }) => {
+  const handleUpdate = ({newData}: {newData: PartialSpendCapUpdate}) => {
     if (onDemandBudgets.budgetMode === OnDemandBudgetMode.PER_CATEGORY) {
       onUpdate({
         onDemandBudgets: {
@@ -344,15 +292,13 @@ function InnerSpendCapSettings({
             ...newData,
           },
         },
-        fromButton,
       });
     } else {
       onUpdate({
         onDemandBudgets: {
           ...onDemandBudgets,
           ...newData,
         },
-        fromButton,
       });
     }
   };
@@ -673,14 +619,6 @@ const ExampleContainer = styled('div')`
   }
 `;
 
-// TODO(isabella): fix text color
-const StyledButton = styled(Button)<{isSelected: boolean}>`
-  color: ${p => (p.isSelected ? p.theme.activeText : p.theme.gray500)};
-  &:hover {
-    color: ${p => p.theme.activeText};
-  }
-`;
-
 const StyledInput = styled(Input)`
   width: 124px;
   text-align: right;

static/gsApp/views/subscriptionPage/headerCards/headerCards.tsx

@@ -1,3 +1,4 @@
+import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import ErrorBoundary from 'sentry/components/errorBoundary';
@@ -6,6 +7,7 @@ import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
 
 import type {Subscription} from 'getsentry/types';
+import {hasCheckoutV3} from 'getsentry/views/amCheckout/utils';
 import SeerAutomationAlert from 'getsentry/views/subscriptionPage/seerAutomationAlert';
 
 import {SubscriptionCard} from './subscriptionCard';
@@ -20,20 +22,25 @@ export function HeaderCards({organization, subscription}: HeaderCardsProps) {
   return (
     <ErrorBoundary mini>
       <SeerAutomationAlert organization={organization} />
-      <HeaderCardWrapper>
+      <HeaderCardWrapper hasNewCheckout={hasCheckoutV3(organization)}>
         <SubscriptionCard organization={organization} subscription={subscription} />
         <UsageCard organization={organization} subscription={subscription} />
       </HeaderCardWrapper>
     </ErrorBoundary>
   );
 }
 
-const HeaderCardWrapper = styled(Panel)`
+// TODO(checkout v3): update this with the real layout
+const HeaderCardWrapper = styled(Panel)<{hasNewCheckout: boolean}>`
   display: grid;
   margin-bottom: ${space(2)};
 
-  @media (min-width: ${p => p.theme.breakpoints.lg}) {
-    grid-template-columns: auto minmax(0, 600px);
-    gap: ${space(2)};
-  }
+  ${p =>
+    !p.hasNewCheckout &&
+    css`
+      @media (min-width: ${p.theme.breakpoints.lg}) {
+        grid-template-columns: auto minmax(0, 600px);
+        gap: ${space(2)};
+      }
+    `}
 `;