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(