feat(checkout v3): Update product select (#97630)

Closes
https://linear.app/getsentry/issue/BIL-1203/update-product-select-styling-and-copy

Figma:
https://www.figma.com/design/4ICnO5MHVqkm6JV0TKzf7H/Checkout-Redesign?node-id=2682-35176&t=qdEalTpNeinXU3hi-4

Copy is not yet final. Product checkout name comes from backend.


# unchecked

<img width="680" height="268" alt="Screenshot 2025-08-11 at 5 46 08 PM"
src="https://github.com/user-attachments/assets/47458967-aa40-4e21-8139-bc3c2344e487"
/>


# checked
<img width="679" height="265" alt="Screenshot 2025-08-11 at 5 45 49 PM"
src="https://github.com/user-attachments/assets/f192424b-58fe-42b7-8e2d-70114056b1b7"
/>

Author: isabellaenriquez

static/gsApp/views/amCheckout/index.tsx

@@ -76,7 +76,7 @@ import type {
   SelectedProductData,
 } from 'getsentry/views/amCheckout/types';
 import {SelectableProduct} from 'getsentry/views/amCheckout/types';
-import {getBucket} from 'getsentry/views/amCheckout/utils';
+import {getBucket, hasCheckoutV3} from 'getsentry/views/amCheckout/utils';
 import {
   getTotalBudget,
   hasOnDemandBudgetsFeature,
@@ -652,6 +652,7 @@ class AMCheckout extends Component<Props, State> {
       const isActive = currentStep === stepNumber;
       const isCompleted = !isActive && completedSteps.has(stepNumber);
       const prevStepCompleted = completedSteps.has(stepNumber - 1);
+      const isNewCheckout = hasCheckoutV3(organization); // TODO(checkout-v3): remove post-GA
 
       return (
         <CheckoutStep
@@ -662,6 +663,7 @@ class AMCheckout extends Component<Props, State> {
           isCompleted={isCompleted}
           prevStepCompleted={prevStepCompleted}
           referrer={this.referrer}
+          isNewCheckout={isNewCheckout}
         />
       );
     });

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

@@ -129,6 +129,7 @@ function PlanSelect({
   subscription,
   formData,
   referrer,
+  isNewCheckout,
   onEdit,
   onToggleLegacy,
   onUpdate,
@@ -330,7 +331,12 @@ function PlanSelect({
       />
       {isActive && renderBody()}
       {isActive && (
-        <ProductSelect activePlan={activePlan} formData={formData} onUpdate={onUpdate} />
+        <ProductSelect
+          activePlan={activePlan}
+          formData={formData}
+          onUpdate={onUpdate}
+          isNewCheckout={isNewCheckout}
+        />
       )}
       {isActive && renderFooter()}
     </Panel>

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

@@ -67,14 +67,45 @@ describe('ProductSelect', function () {
       {organization}
     );
 
-    expect(await screen.findByTestId('body-choose-your-plan')).toBeInTheDocument();
-    expect(screen.getByTestId('product-option-seer')).toBeInTheDocument();
+    expect(await screen.findByTestId('product-option-seer')).toBeInTheDocument();
     expect(screen.getAllByTestId(/product-option-feature/)).toHaveLength(2);
     expect(screen.getAllByTestId(/product-option/)).toHaveLength(3);
     expect(screen.getByText('Add to plan')).toBeInTheDocument();
     expect(screen.getByTestId('footer-choose-your-plan')).toBeInTheDocument();
   });
 
+  it('renders for checkout v3', async function () {
+    const organizationWithFlag = OrganizationFixture({
+      features: ['checkout-v3'],
+    });
+    const freeSubscription = SubscriptionFixture({
+      organization: organizationWithFlag,
+      plan: 'am3_f',
+      isFree: true,
+    });
+    SubscriptionStore.set(organizationWithFlag.slug, freeSubscription);
+
+    render(
+      <AMCheckout
+        {...RouteComponentPropsFixture()}
+        params={params}
+        api={api}
+        onToggleLegacy={jest.fn()}
+        checkoutTier={PlanTier.AM3}
+      />,
+      {organization: organizationWithFlag}
+    );
+
+    expect(await screen.findByTestId('product-option-seer')).toBeInTheDocument();
+    expect(screen.getAllByTestId(/product-option-feature/)).toHaveLength(3); // +1 for credits included
+    expect(screen.getAllByTestId(/product-option/)).toHaveLength(4); // +1 for credits included
+    expect(screen.queryByText('Add to plan')).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('checkbox', {name: /Add seer AI agent to plan/})
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('footer-choose-your-plan')).toBeInTheDocument();
+  });
+
   it('does not render products if flags are missing', async function () {
     const mockBillingConfig = structuredClone(BillingConfigFixture(PlanTier.AM3));
     mockBillingConfig.planList.forEach(plan => {