diff --git a/static/gsApp/views/amCheckout/reserveAdditionalVolume.spec.tsx b/static/gsApp/views/amCheckout/reserveAdditionalVolume.spec.tsx index ea7fdcab3a49a4..19208f037099a6 100644 --- a/static/gsApp/views/amCheckout/reserveAdditionalVolume.spec.tsx +++ b/static/gsApp/views/amCheckout/reserveAdditionalVolume.spec.tsx @@ -8,7 +8,7 @@ import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary'; import {MONTHLY} from 'getsentry/constants'; import SubscriptionStore from 'getsentry/stores/subscriptionStore'; -import {PlanTier} from 'getsentry/types'; +import {PlanTier, type Subscription} from 'getsentry/types'; import ReserveAdditionalVolume from 'getsentry/views/amCheckout/reserveAdditionalVolume'; type SliderInfo = { @@ -201,26 +201,17 @@ describe('ReserveAdditionalVolume', () => { const transactions = screen.getByTestId('transactions-volume-item').textContent; expect(transactions).not.toContain('Sentry Performance'); }); - - it('can hide sliders', async () => { - render(); - await openSection(); - expect(screen.getByTestId('errors-volume-item')).toBeInTheDocument(); - await closeSection(); - expect(screen.queryByTestId('errors-volume-item')).not.toBeInTheDocument(); - }); }); describe('Modern Plans', () => { const {organization} = initializeOrg(); - const subscription = SubscriptionFixture({organization}); + let subscription: Subscription; const billingConfig = BillingConfigFixture(PlanTier.AM3); const bizPlanMonthly = PlanDetailsLookupFixture('am3_business')!; - const stepProps = { + const stepProps: any = { checkoutTier: PlanTier.AM3, - subscription, isActive: true, stepNumber: 2, onUpdate: jest.fn(), @@ -238,6 +229,8 @@ describe('ReserveAdditionalVolume', () => { }; beforeEach(() => { + subscription = SubscriptionFixture({organization}); + stepProps.subscription = subscription; SubscriptionStore.set(organization.slug, subscription); MockApiClient.addMockResponse({ url: `/customers/${organization.slug}/plan-migrations/?applied=0`, @@ -304,5 +297,12 @@ describe('ReserveAdditionalVolume', () => { await closeSection(); expect(screen.queryByTestId('errors-volume-item')).not.toBeInTheDocument(); }); + + it('auto-shows sliders if customer has reserved volume above platform', () => { + const paidSub = SubscriptionFixture({organization, plan: 'am3_business'}); + paidSub.categories.errors!.reserved = 100_000; + render(); + expect(screen.getByTestId('errors-volume-item')).toBeInTheDocument(); + }); }); }); diff --git a/static/gsApp/views/amCheckout/reserveAdditionalVolume.tsx b/static/gsApp/views/amCheckout/reserveAdditionalVolume.tsx index 8b1d65277b9a44..8c0c1b5a8d075c 100644 --- a/static/gsApp/views/amCheckout/reserveAdditionalVolume.tsx +++ b/static/gsApp/views/amCheckout/reserveAdditionalVolume.tsx @@ -11,11 +11,11 @@ import {t} from 'sentry/locale'; import type {DataCategory} from 'sentry/types/core'; import {PlanTier} from 'getsentry/types'; -import {isAmPlan} from 'getsentry/utils/billing'; +import {isAmPlan, isDeveloperPlan} from 'getsentry/utils/billing'; import trackGetsentryAnalytics from 'getsentry/utils/trackGetsentryAnalytics'; import VolumeSliders from 'getsentry/views/amCheckout/steps/volumeSliders'; import type {StepProps} from 'getsentry/views/amCheckout/types'; -import {formatPrice, getShortInterval} from 'getsentry/views/amCheckout/utils'; +import {formatPrice, getBucket, getShortInterval} from 'getsentry/views/amCheckout/utils'; function ReserveAdditionalVolume({ organization, @@ -33,7 +33,24 @@ function ReserveAdditionalVolume({ | 'formData' | 'onUpdate' >) { - const [showSliders, setShowSliders] = useState(false); + // if the customer has any reserved volume above platform already, auto-show the sliders + const [showSliders, setShowSliders] = useState( + isDeveloperPlan(subscription.planDetails) + ? false + : Object.values(subscription.categories ?? {}) + .filter( + ({category}) => + activePlan.checkoutCategories.includes(category) && + category in activePlan.planCategories + ) + .some( + ({category, reserved}) => + getBucket({ + buckets: activePlan.planCategories[category], + events: reserved ?? 0, + }).price > 0 + ) + ); const reservedVolumeTotal = useMemo(() => { return Object.entries(formData.reserved).reduce((acc, [category, value]) => { const bucket = activePlan.planCategories?.[category as DataCategory]?.find(