fix(sub v3): Improve payment failure experience (#102480)

Removes the duplicate payment failure banner + changes the top banner to
use the danger/error motif

<img width="1100" height="333" alt="Screenshot 2025-10-31 at 1 42 16 PM"
src="https://github.com/user-attachments/assets/ec4cd257-f61d-4a9e-8f2b-9ef7c1206165"
/>

Author: isabellaenriquez

static/gsApp/components/gsBanner.tsx

@@ -5,6 +5,8 @@ import Cookies from 'js-cookie';
 import snakeCase from 'lodash/snakeCase';
 import moment from 'moment-timezone';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
 import {openModal} from 'sentry/actionCreators/modal';
 import {fetchOrganizationDetails} from 'sentry/actionCreators/organization';
@@ -16,7 +18,7 @@ import {
 } from 'sentry/actionCreators/prompts';
 import type {Client} from 'sentry/api';
 import {Alert, type AlertProps} from 'sentry/components/core/alert';
-import {Badge} from 'sentry/components/core/badge';
+import {Tag} from 'sentry/components/core/badge';
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
@@ -951,9 +953,15 @@ class GSBanner extends Component<Props, State> {
 
       return (
         <Alert.Container>
-          <InvertedAlert
+          <Alert
+            system
+            type="error"
             data-test-id="banner-alert-past-due"
-            trailingItems={<Badge type="warning">{t('Action Required')}</Badge>}
+            trailingItems={
+              <Flex align="center" height="100%">
+                <Tag type="error">{t('Action Required')}</Tag>
+              </Flex>
+            }
           >
             {billingPermissions
               ? tct(
@@ -984,7 +992,7 @@ class GSBanner extends Component<Props, State> {
                     ),
                   }
                 )}
-          </InvertedAlert>
+          </Alert>
         </Alert.Container>
       );
     }

static/gsApp/views/subscriptionPage/components/paymentFailureAlert.tsx

@@ -324,25 +324,6 @@ describe('SubscriptionHeader', () => {
     });
   });
 
-  it('renders new payment failure alert for past due subscriptions with flag', async () => {
-    const organization = OrganizationFixture({
-      features: ['subscriptions-v3'],
-      access: ['org:billing'],
-    });
-    const subscription = SubscriptionFixture({
-      organization,
-      plan: 'am3_team',
-      isPastDue: true,
-    });
-    SubscriptionStore.set(organization.slug, subscription);
-    render(
-      <SubscriptionHeader organization={organization} subscription={subscription} />
-    );
-    await screen.findByText(
-      'Automatic payment failed. Update your payment method to ensure uninterrupted access to Sentry.'
-    );
-  });
-
   it('does not render new payment failure alert for past due subscriptions without flag', async () => {
     const organization = OrganizationFixture({
       access: ['org:billing'],

static/gsApp/views/subscriptionPage/subscriptionHeader.spec.tsx

@@ -26,7 +26,6 @@ import {
   hasPartnerMigrationFeature,
 } from 'getsentry/utils/billing';
 import {isDisabledByPartner} from 'getsentry/utils/partnerships';
-import PaymentFailureAlert from 'getsentry/views/subscriptionPage/components/paymentFailureAlert';
 import PartnershipNote from 'getsentry/views/subscriptionPage/partnershipNote';
 
 import HeaderCards from './headerCards/headerCards';
@@ -268,7 +267,6 @@ function BodyWithBillingPerms({
       {subscription.pendingChanges ? (
         <DecidePendingChanges subscription={subscription} organization={organization} />
       ) : null}
-      <PaymentFailureAlert subscription={subscription} organization={organization} />
       <TrialAlert subscription={subscription} organization={organization} />
       {hasPartnerMigrationFeature(organization) && (
         <PartnerPlanEndingBanner