feat(billing): show "Pending Cancellation" and disble cancel button (#86230)

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

@@ -135,6 +135,32 @@ describe('AM1 Checkout', function () {
     expect(screen.getByRole('button', {name: 'Cancel Subscription'})).toBeInTheDocument();
   });
 
+  it('renders pending cancellation button', async function () {
+    const sub: SubscriptionType = {
+      ...subscription,
+      canCancel: true,
+      cancelAtPeriodEnd: true,
+    };
+    SubscriptionStore.set(organization.slug, sub);
+
+    render(
+      <AMCheckout
+        {...RouteComponentPropsFixture()}
+        params={params}
+        api={api}
+        onToggleLegacy={jest.fn()}
+        checkoutTier={sub.planTier as PlanTier}
+      />,
+      {organization}
+    );
+
+    expect(
+      await screen.findByRole('heading', {name: 'Change Subscription'})
+    ).toBeInTheDocument();
+
+    expect(await screen.findByText('Pending Cancellation')).toBeInTheDocument();
+  });
+
   it('does not renders cancel subscription button if cannot cancel', async function () {
     render(
       <AMCheckout

static/gsApp/views/amCheckout/index.tsx

@@ -697,8 +697,13 @@ class AMCheckout extends Component<Props, State> {
 
             {subscription.canCancel && (
               <CancelSubscription>
-                <Button to={`/settings/${organization.slug}/billing/cancel/`}>
-                  {t('Cancel Subscription')}
+                <Button
+                  to={`/settings/${organization.slug}/billing/cancel/`}
+                  disabled={subscription.cancelAtPeriodEnd}
+                >
+                  {subscription.cancelAtPeriodEnd
+                    ? t('Pending Cancellation')
+                    : t('Cancel Subscription')}
                 </Button>
               </CancelSubscription>
             )}

tests/js/getsentry-test/fixtures/planDetailsLookup.ts

@@ -10,6 +10,7 @@ import {PlanTier} from 'getsentry/types';
 
 type PlanIds = keyof typeof AM1_PLANS &
   keyof typeof AM2_PLANS &
+  keyof typeof AM3_PLANS &
   keyof typeof MM1_PLANS &
   keyof typeof MM2_PLANS;