diff --git a/static/gsApp/views/amCheckout/steps/setSpendCap.spec.tsx b/static/gsApp/views/amCheckout/steps/setSpendCap.spec.tsx index 687a0ccccd9468..bd095f270be786 100644 --- a/static/gsApp/views/amCheckout/steps/setSpendCap.spec.tsx +++ b/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'); }); }); diff --git a/static/gsApp/views/amCheckout/steps/setSpendCap.tsx b/static/gsApp/views/amCheckout/steps/setSpendCap.tsx index d259407d33f4c4..4ad106888b750b 100644 --- a/static/gsApp/views/amCheckout/steps/setSpendCap.tsx +++ b/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} diff --git a/static/gsApp/views/spendCaps/spendCapSettings.tsx b/static/gsApp/views/spendCaps/spendCapSettings.tsx index 9396c43ddddf4e..78bb6858054f73 100644 --- a/static/gsApp/views/spendCaps/spendCapSettings.tsx +++ b/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> & { sharedMaxBudget?: number; }; @@ -45,13 +41,7 @@ interface SpendCapSettingsProps { currentReserved: Partial>; 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 { 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( - `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 ( - - - {SUGGESTED_SPENDING_CAPS.map(cap => { - const isSelected = selectedButton === `button-${cap}`; - const formattedCap = displayPrice({cents: cap}); - return ( - { - 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} - - ); - })} - - - ) => { - const parsedBudget = parseInputValue(e); - onUpdate({ - newData: {[inputName]: parsedBudget}, - fromButton: false, - }); - setSelectedButton(`button-${parsedBudget}`); - }} - /> - - + + ) => { + const parsedBudget = parseInputValue(e); + onUpdate({ + newData: {[inputName]: parsedBudget}, + }); + }} + /> + ); } @@ -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,7 +292,6 @@ function InnerSpendCapSettings({ ...newData, }, }, - fromButton, }); } else { onUpdate({ @@ -352,7 +299,6 @@ function InnerSpendCapSettings({ ...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; diff --git a/static/gsApp/views/subscriptionPage/headerCards/headerCards.tsx b/static/gsApp/views/subscriptionPage/headerCards/headerCards.tsx index 7e3e58eb1600ec..72352611ef5a40 100644 --- a/static/gsApp/views/subscriptionPage/headerCards/headerCards.tsx +++ b/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,7 +22,7 @@ export function HeaderCards({organization, subscription}: HeaderCardsProps) { return ( - + @@ -28,12 +30,17 @@ export function HeaderCards({organization, subscription}: HeaderCardsProps) { ); } -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)}; + } + `} `;