fix(sub v3): PAYG-related tweaks

static/gsApp/utils/billing.tsx

@@ -348,6 +348,10 @@ export function isAmPlan(planId?: string) {
   return typeof planId === 'string' && planId.startsWith('am');
 }
 
+export function isAm1Plan(planId?: string) {
+  return typeof planId === 'string' && planId.startsWith('am1');
+}
+
 export function isAm2Plan(planId?: string) {
   return typeof planId === 'string' && planId.startsWith('am2');
 }

static/gsApp/views/amCheckout/cart.tsx

@@ -237,9 +237,18 @@ function ItemsSummary({activePlan, formData}: ItemsSummaryProps) {
                         title={t('This product is only available with a PAYG budget.')}
                       >
                         <Tag icon={<IconLock locked size="xs" />}>
-                          {isChonk ? (
+                          {isChonk || activePlan.budgetTerm === 'pay-as-you-go' ? (
                             tct('Unlock with [budgetTerm]', {
-                              budgetTerm: displayBudgetName(activePlan, {title: true}),
+                              budgetTerm: displayBudgetName(
+                                activePlan,
+                                activePlan.budgetTerm === 'pay-as-you-go'
+                                  ? {
+                                      abbreviated: true,
+                                    }
+                                  : {
+                                      title: true,
+                                    }
+                              ),
                             })
                           ) : (
                             // "Unlock with on-demand" gets cut off in non-chonk theme

static/gsApp/views/amCheckout/cartDiff.spec.tsx

@@ -138,7 +138,7 @@ describe('CartDiff', () => {
     expect(paygDiff).toHaveTextContent('$10');
 
     const perCategoryDiff = await screen.findByTestId('per-category-spend-limit-diff');
-    expect(perCategoryDiff).toHaveTextContent('Per-category spend limits');
+    expect(perCategoryDiff).toHaveTextContent('Per-product spend limits');
     expect(perCategoryDiff).toHaveTextContent('Errors$10');
   });
 
@@ -175,7 +175,7 @@ describe('CartDiff', () => {
     expect(paygDiff).toHaveTextContent('$10');
 
     const perCategoryDiff = await screen.findByTestId('per-category-spend-limit-diff');
-    expect(perCategoryDiff).toHaveTextContent('Per-category spend limits');
+    expect(perCategoryDiff).toHaveTextContent('Per-product spend limits');
     expect(perCategoryDiff).toHaveTextContent('Errors$10');
     expect(perCategoryDiff).toHaveTextContent('Replays$20');
   });
@@ -227,7 +227,7 @@ describe('CartDiff', () => {
     renderCartDiff({formData});
     expect(await screen.findByText('Changes (2)')).toBeInTheDocument();
     const perCategoryDiff = await screen.findByTestId('per-category-spend-limit-diff');
-    expect(perCategoryDiff).toHaveTextContent('Per-category spend limits');
+    expect(perCategoryDiff).toHaveTextContent('Per-product spend limits');
     expect(perCategoryDiff).toHaveTextContent('Errors$10');
     expect(perCategoryDiff).toHaveTextContent('Replays$20');
     expect(perCategoryDiff).not.toHaveTextContent('$0');

static/gsApp/views/amCheckout/cartDiff.tsx

@@ -232,7 +232,7 @@ function OnDemandDiff({
       {perCategoryOnDemandChanges.length > 0 && (
         <ChangeSection data-test-id="per-category-spend-limit-diff">
           <ChangeSectionTitle hasBottomMargin>
-            {t('Per-category spend limits')}
+            {t('Per-product spend limits')}
           </ChangeSectionTitle>
           <ChangeGrid>
             {perCategoryOnDemandChanges.map(({key, currentValue, newValue}) => {

static/gsApp/views/spendLimits/spendLimitSettings.tsx

@@ -26,6 +26,7 @@ import {
   displayBudgetName,
   formatReservedWithUnits,
   getReservedBudgetCategoryForAddOn,
+  isAm1Plan,
   isAm2Plan,
 } from 'getsentry/utils/billing';
 import {
@@ -184,6 +185,7 @@ export function SharedSpendLimitPriceTable({
   const baseCategories = activePlan.onDemandCategories.filter(
     category => !addOnDataCategories.includes(category)
   );
+  const isLegacy = isAm2Plan(activePlan.id) || isAm1Plan(activePlan.id);
 
   return (
     <Flex
@@ -194,7 +196,13 @@ export function SharedSpendLimitPriceTable({
       radius="md"
       padding="lg xl"
     >
-      <Grid gap="lg" columns={{xs: '1fr', md: 'repeat(2, 1fr)'}}>
+      <Grid
+        gap="lg"
+        columns={
+          // legacy plans need more space because of the longer product names (transactions, performance units)
+          isLegacy ? {xs: '1fr', xl: 'repeat(2, 1fr)'} : {xs: '1fr', md: 'repeat(2, 1fr)'}
+        }
+      >
         {baseCategories.map(category => {
           // pre-AM3 specific behavior
           const showPerformanceUnits =
@@ -372,7 +380,8 @@ function InnerSpendLimitSettings({
 
   const getPerCategoryWarning = (productName: string) => {
     return (
-      <Flex gap="xs">
+      // hardcoded height to match the input height so that all rows have the same height
+      <Flex gap="xs" height="36px" align="center">
         <IconWarning size="sm" />
         <Text variant="muted" size="sm">
           {tct(

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

@@ -112,6 +112,11 @@ function PaygCard({
                     value={newBudgetDollars}
                     min={0}
                     onChange={e => setNewBudgetDollars(parseInt(e.target.value, 10) || 0)}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') {
+                        handleSubmit();
+                      }
+                    }}
                   />
                 </Currency>
                 <Flex justify="between" align="center">