feat(sub v3): Billing Info header card

static/gsApp/components/billingDetails/panel.tsx

@@ -170,6 +170,7 @@ function BillingDetailsPanel({
       background="primary"
       border="primary"
       radius="md"
+      data-test-id="billing-details-panel"
     >
       <Flex direction="column" gap="lg" width="100%">
         <Heading as="h2" size="lg">

static/gsApp/components/creditCardEdit/panel.tsx

@@ -157,6 +157,7 @@ function CreditCardPanel({
       background="primary"
       border="primary"
       radius="md"
+      data-test-id="credit-card-panel"
     >
       <Flex direction="column" gap="lg" width="100%">
         <Heading as="h2" size="lg">

static/gsApp/components/partnerPlanEndingBanner.tsx

@@ -3,6 +3,7 @@ import PartnerPlanEndingBackground from 'getsentry-images/partnership/plan-endin
 
 import {Tag} from 'sentry/components/core/badge/tag';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
+import {Flex} from 'sentry/components/core/layout';
 import {IconClock} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -52,7 +53,14 @@ function PartnerPlanEndingBanner({
     : 'Business';
 
   return (
-    <PartnerPlanEndingBannerWrapper data-test-id="partner-plan-ending-banner">
+    <Flex
+      data-test-id="partner-plan-ending-banner"
+      background="primary"
+      border="primary"
+      radius="md"
+      justify="between"
+      align="center"
+    >
       <div>
         <PartnerPlanEndingText>
           <PartnerPlanEndingBannerTitle>
@@ -80,20 +88,10 @@ function PartnerPlanEndingBanner({
         </PartnerPlanEndingText>
       </div>
       <IllustrationContainer src={PartnerPlanEndingBackground} />
-    </PartnerPlanEndingBannerWrapper>
+    </Flex>
   );
 }
 
-const PartnerPlanEndingBannerWrapper = styled('div')`
-  border: 1px solid ${p => p.theme.border};
-  border-radius: ${p => p.theme.borderRadius};
-  background: ${p => p.theme.background};
-  margin-bottom: ${space(2)};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
 const PartnerPlanEndingText = styled('div')`
   padding: ${space(2)};
   display: flex;

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

@@ -125,25 +125,47 @@ describe('Subscription > BillingInformation', () => {
     await screen.findByText('Billing Information');
 
     // panels are collapsed with pre-existing information
-    expect(screen.getByText(/\*\*\*\*4242/)).toBeInTheDocument();
-    expect(screen.getByRole('button', {name: 'Edit payment method'})).toBeInTheDocument();
-    expect(screen.getByText('Business address')).toBeInTheDocument();
+    const cardPanel = await screen.findByTestId('credit-card-panel');
+    expect(within(cardPanel).getByText(/\*\*\*\*4242/)).toBeInTheDocument();
     expect(
-      screen.getByRole('button', {name: 'Edit business address'})
+      within(cardPanel).getByRole('button', {name: 'Edit payment method'})
     ).toBeInTheDocument();
-    expect(screen.queryByText('Address Line 1')).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', {name: 'Save Changes'})).not.toBeInTheDocument();
+    expect(
+      within(cardPanel).queryByRole('button', {name: 'Save Changes'})
+    ).not.toBeInTheDocument();
+
+    const billingDetailsPanel = await screen.findByTestId('billing-details-panel');
+    expect(within(billingDetailsPanel).getByText('Business address')).toBeInTheDocument();
+    expect(
+      within(billingDetailsPanel).getByRole('button', {name: 'Edit business address'})
+    ).toBeInTheDocument();
+    expect(
+      within(billingDetailsPanel).queryByText('Address Line 1')
+    ).not.toBeInTheDocument();
+    expect(
+      within(billingDetailsPanel).queryByRole('button', {name: 'Save Changes'})
+    ).not.toBeInTheDocument();
 
     // can edit both
-    await userEvent.click(screen.getByRole('button', {name: 'Edit payment method'}));
+    await userEvent.click(
+      within(cardPanel).getByRole('button', {name: 'Edit payment method'})
+    );
     expect(
-      screen.queryByRole('button', {name: 'Edit payment method'})
+      within(cardPanel).queryByRole('button', {name: 'Edit payment method'})
     ).not.toBeInTheDocument();
-    await userEvent.click(screen.getByRole('button', {name: 'Edit business address'}));
     expect(
-      screen.queryByRole('button', {name: 'Edit business address'})
+      within(cardPanel).getByRole('button', {name: 'Save Changes'})
+    ).toBeInTheDocument();
+
+    await userEvent.click(
+      within(billingDetailsPanel).getByRole('button', {name: 'Edit business address'})
+    );
+    expect(
+      within(billingDetailsPanel).queryByRole('button', {name: 'Edit business address'})
     ).not.toBeInTheDocument();
-    expect(screen.getAllByRole('button', {name: 'Save Changes'})).toHaveLength(2);
+    expect(
+      within(billingDetailsPanel).getByRole('button', {name: 'Save Changes'})
+    ).toBeInTheDocument();
   });
 
   it('renders with no pre-existing information for new billing UI', async () => {
@@ -162,16 +184,23 @@ describe('Subscription > BillingInformation', () => {
     await screen.findByText('Billing Information');
 
     // panels are expanded with no pre-existing information
-    await waitFor(() => {
-      // wait for both panels to be expanded
-      expect(screen.getAllByRole('button', {name: 'Save Changes'})).toHaveLength(2);
-    });
+    const cardPanel = await screen.findByTestId('credit-card-panel');
+    expect(cardPanel).toBeInTheDocument();
     expect(
-      screen.queryByRole('button', {name: 'Edit payment method'})
+      within(cardPanel).queryByRole('button', {name: 'Edit payment method'})
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole('button', {name: 'Edit business address'})
+      within(cardPanel).getByRole('button', {name: 'Save Changes'})
+    ).toBeInTheDocument();
+
+    const billingDetailsPanel = await screen.findByTestId('billing-details-panel');
+    expect(billingDetailsPanel).toBeInTheDocument();
+    expect(
+      within(billingDetailsPanel).queryByRole('button', {name: 'Edit business address'})
     ).not.toBeInTheDocument();
+    expect(
+      within(billingDetailsPanel).getByRole('button', {name: 'Save Changes'})
+    ).toBeInTheDocument();
   });
 
   it('opens credit card form with billing failure query for new billing UI', async () => {

static/gsApp/views/subscriptionPage/headerCards/billingInfoCard.spec.tsx

@@ -0,0 +1,67 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import {BillingDetailsFixture} from 'getsentry-test/fixtures/billingDetails';
+import {SubscriptionFixture} from 'getsentry-test/fixtures/subscription';
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import BillingInfoCard from 'getsentry/views/subscriptionPage/headerCards/billingInfoCard';
+
+describe('BillingInfoCard', () => {
+  const organization = OrganizationFixture({access: ['org:billing']});
+
+  beforeEach(() => {
+    MockApiClient.clearMockResponses();
+    MockApiClient.addMockResponse({
+      url: `/customers/${organization.slug}/billing-details/`,
+      method: 'GET',
+    });
+  });
+
+  it('renders with pre-existing info', async () => {
+    MockApiClient.addMockResponse({
+      url: `/customers/${organization.slug}/billing-details/`,
+      method: 'GET',
+      body: BillingDetailsFixture(),
+    });
+    const subscription = SubscriptionFixture({organization});
+    render(<BillingInfoCard organization={organization} subscription={subscription} />);
+
+    expect(screen.getByText('Billing information')).toBeInTheDocument();
+    await screen.findByText('Test company');
+    expect(screen.getByText('Card ending in 4242')).toBeInTheDocument();
+  });
+
+  it('renders without pre-existing info', async () => {
+    const subscription = SubscriptionFixture({organization, paymentSource: null});
+    render(<BillingInfoCard organization={organization} subscription={subscription} />);
+
+    expect(screen.getByText('Billing information')).toBeInTheDocument();
+    await screen.findByText('No billing details on file');
+    expect(screen.getByText('No payment method on file')).toBeInTheDocument();
+  });
+
+  it('does not render for self-serve partner customers', () => {
+    const subscription = SubscriptionFixture({organization, isSelfServePartner: true});
+    render(<BillingInfoCard organization={organization} subscription={subscription} />);
+
+    expect(screen.queryByText('Billing information')).not.toBeInTheDocument();
+  });
+
+  it('does not render for managed customers', () => {
+    const subscription = SubscriptionFixture({organization, canSelfServe: false});
+    render(<BillingInfoCard organization={organization} subscription={subscription} />);
+
+    expect(screen.queryByText('Billing information')).not.toBeInTheDocument();
+  });
+
+  it('renders for managed customers with legacy invoiced OD', () => {
+    const subscription = SubscriptionFixture({
+      organization,
+      canSelfServe: false,
+      onDemandInvoiced: true,
+    });
+    render(<BillingInfoCard organization={organization} subscription={subscription} />);
+
+    expect(screen.getByText('Billing information')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,114 @@
+import moment from 'moment-timezone';
+
+import {Container, Flex} from 'sentry/components/core/layout';
+import {Text} from 'sentry/components/core/text';
+import Placeholder from 'sentry/components/placeholder';
+import {IconSettings, IconUser} from 'sentry/icons';
+import {t, tct} from 'sentry/locale';
+import type {Organization} from 'sentry/types/organization';
+
+import {useBillingDetails} from 'getsentry/hooks/useBillingDetails';
+import type {Subscription} from 'getsentry/types';
+import {hasSomeBillingDetails} from 'getsentry/utils/billing';
+import SubscriptionHeaderCard from 'getsentry/views/subscriptionPage/headerCards/subscriptionHeaderCard';
+
+function BillingInfoCard({
+  subscription,
+  organization,
+}: {
+  organization: Organization;
+  subscription: Subscription;
+}) {
+  if (
+    subscription.isSelfServePartner ||
+    (!subscription.canSelfServe && !subscription.onDemandInvoiced)
+  ) {
+    return null;
+  }
+
+  return (
+    <SubscriptionHeaderCard
+      title={t('Billing information')}
+      icon={<IconUser />}
+      sections={[
+        <BillingDetailsInfo key="billing-details-info" />,
+        <PaymentSourceInfo key="payment-source-info" subscription={subscription} />,
+      ]}
+      button={{
+        ariaLabel: t('Edit billing information'),
+        label: t('Edit billing information'),
+        linkTo: `/settings/${organization.slug}/billing/details/`,
+        icon: <IconSettings />,
+        priority: 'default',
+      }}
+    />
+  );
+}
+
+function BillingDetailsInfo() {
+  const {data: billingDetails, isLoading} = useBillingDetails();
+
+  if (isLoading) {
+    return (
+      <Flex direction="column" gap="xs">
+        <Placeholder height="16px" />
+        <Placeholder height="16px" />
+        <Placeholder height="16px" />
+        <Placeholder height="16px" />
+      </Flex>
+    );
+  }
+
+  if (!billingDetails || !hasSomeBillingDetails(billingDetails)) {
+    return (
+      <Container>
+        <Text variant="muted">{t('No billing details on file')}</Text>
+      </Container>
+    );
+  }
+
+  return (
+    <Flex direction="column" gap="xs">
+      {billingDetails.companyName && (
+        <Text variant="muted" size="sm">
+          {billingDetails.companyName}
+        </Text>
+      )}
+      {billingDetails.billingEmail && (
+        <Text variant="muted" size="sm">
+          {billingDetails.billingEmail}
+        </Text>
+      )}
+      {billingDetails.displayAddress && (
+        <Text variant="muted" size="sm">
+          {billingDetails.displayAddress}
+        </Text>
+      )}
+    </Flex>
+  );
+}
+
+function PaymentSourceInfo({subscription}: {subscription: Subscription}) {
+  const {paymentSource} = subscription;
+  const paymentSourceExpiryDate = paymentSource
+    ? moment(new Date(paymentSource.expYear, paymentSource.expMonth - 1))
+    : null;
+
+  if (!paymentSource) {
+    return <Text variant="muted">{t('No payment method on file')}</Text>;
+  }
+
+  return (
+    <Flex direction="column" gap="xs">
+      <Text>{tct('Card ending in [last4]', {last4: paymentSource.last4})}</Text>
+      <Text variant="muted" size="sm">
+        {tct('Expires [expMonth]/[expYear]', {
+          expMonth: paymentSourceExpiryDate?.format('MM'),
+          expYear: paymentSourceExpiryDate?.format('YY'),
+        })}
+      </Text>
+    </Flex>
+  );
+}
+
+export default BillingInfoCard;