Skip to content

feat(sub v3): Surface account balance and card brand #103094

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 13, 2025
Merged

feat(sub v3): Surface account balance and card brand #103094

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fd1cb2d
feat(sub v3): Surface account balance and card brand
isabellaenriquez Nov 10, 2025
91edfd3
fix tests
isabellaenriquez Nov 10, 2025
b9f8ae6
add test
isabellaenriquez Nov 10, 2025
4773438
Merge branch 'master' into isabella/surface-info
isabellaenriquez Nov 12, 2025
cd83c5a
correct types
isabellaenriquez Nov 12, 2025
4cc8e14
Merge branch 'master' into isabella/surface-info
isabellaenriquez Nov 13, 2025
08f69a5
fix test
isabellaenriquez Nov 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions static/gsAdmin/views/customerDetails.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2529,6 +2529,7 @@ describe('Customer Details', () => {
countryCode: 'US',
expMonth: 12,
expYear: 2028,
brand: 'Visa',
},
});

Expand Down Expand Up @@ -2564,6 +2565,7 @@ describe('Customer Details', () => {
countryCode: 'US',
expMonth: 12,
expYear: 2028,
brand: 'Visa',
},
});

Expand Down Expand Up @@ -2599,6 +2601,7 @@ describe('Customer Details', () => {
countryCode: 'US',
expMonth: 12,
expYear: 2028,
brand: 'Visa',
},
});

Expand Down Expand Up @@ -2633,6 +2636,7 @@ describe('Customer Details', () => {
countryCode: 'US',
expMonth: 12,
expYear: 2028,
brand: 'Visa',
},
});

Expand Down Expand Up @@ -2689,6 +2693,7 @@ describe('Customer Details', () => {
countryCode: 'US',
expMonth: 12,
expYear: 2028,
brand: 'Visa',
},
});

Expand Down
5 changes: 3 additions & 2 deletions static/gsApp/components/creditCardEdit/panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import PanelHeader from 'sentry/components/panels/panelHeader';
import {t} from 'sentry/locale';
import type {Organization} from 'sentry/types/organization';
import {decodeScalar} from 'sentry/utils/queryString';
import {toTitleCase} from 'sentry/utils/string/toTitleCase';

import {openEditCreditCard} from 'getsentry/actionCreators/modal';
import CreditCardSetup from 'getsentry/components/creditCardEdit/setup';
Expand Down Expand Up @@ -188,8 +189,8 @@ function CreditCardPanel({
/>
) : subscription.paymentSource ? (
<Fragment>
<Text>{`****${subscription.paymentSource.last4} ${String(subscription.paymentSource.expMonth).padStart(2, '0')}/${String(subscription.paymentSource.expYear).slice(-2)}`}</Text>
<Text>{`${countryName ? `${countryName} ` : ''} ${subscription.paymentSource.zipCode}`}</Text>
<Text>{`${toTitleCase(subscription.paymentSource.brand, {allowInnerUpperCase: true})} ****${subscription.paymentSource.last4} ${String(subscription.paymentSource.expMonth).padStart(2, '0')}/${String(subscription.paymentSource.expYear).slice(-2)}`}</Text>
<Text>{`${countryName ? `${countryName} ` : ''} ${subscription.paymentSource.zipCode ? subscription.paymentSource.zipCode : ''}`}</Text>
</Fragment>
) : (
<Text>{t('No payment method on file')}</Text>
Expand Down
5 changes: 3 additions & 2 deletions static/gsApp/types/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,11 +378,12 @@ export type Subscription = {
onDemandSpendUsed: number;
partner: Partner | null;
paymentSource: {
countryCode: string;
brand: string;
countryCode: string | null;
expMonth: number;
expYear: number;
last4: string;
zipCode: string;
zipCode: string | null;
Comment on lines +381 to +386
Copy link
Member Author

@isabellaenriquez isabellaenriquez Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

based on the logic we use to create PaymentMethod, only zip code or country code can be null

} | null;
pendingChanges: PendingChanges | null;
// Subscription details
Expand Down
2 changes: 2 additions & 0 deletions static/gsApp/views/amCheckout/steps/addPaymentMethod.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ describe('AddPaymentMethod', () => {
countryCode: 'US',
expMonth: 12,
expYear: 2028,
brand: 'Visa',
},
};

Expand Down Expand Up @@ -141,6 +142,7 @@ describe('AddPaymentMethod', () => {
countryCode: 'US',
expMonth: 12,
expYear: 2028,
brand: 'Visa',
},
};

Expand Down
1 change: 1 addition & 0 deletions static/gsApp/views/subscriptionPage/billingInformation.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -627,6 +627,7 @@ describe('Billing details form', () => {
zipCode: '94242',
expMonth: 8,
expYear: 2030,
brand: 'Visa',
},
});

Expand Down
10 changes: 6 additions & 4 deletions static/gsApp/views/subscriptionPage/headerCards/billingInfoCard.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,14 @@ describe('BillingInfoCard', () => {
method: 'GET',
body: BillingDetailsFixture(),
});
const subscription = SubscriptionFixture({organization});
const subscription = SubscriptionFixture({organization, accountBalance: 10_00});
render(<BillingInfoCard organization={organization} subscription={subscription} />);

expect(screen.getByText('Billing information')).toBeInTheDocument();
await screen.findByText('Test company, Display Address');
expect(screen.getByText('Billing email: test@gmail.com')).toBeInTheDocument();
expect(screen.getByText('Card ending in 4242')).toBeInTheDocument();
expect(screen.getByText('Visa ending in 4242')).toBeInTheDocument();
expect(screen.getByText('Account balance: $10')).toBeInTheDocument();
});

it('renders with some pre-existing info', async () => {
Expand All @@ -38,7 +39,7 @@ describe('BillingInfoCard', () => {
method: 'GET',
body: BillingDetailsFixture({billingEmail: null, companyName: null}),
});
const subscription = SubscriptionFixture({organization});
const subscription = SubscriptionFixture({organization, accountBalance: -10_00});
render(<BillingInfoCard organization={organization} subscription={subscription} />);

expect(screen.getByText('Billing information')).toBeInTheDocument();
Expand All @@ -48,7 +49,8 @@ describe('BillingInfoCard', () => {
expect(
screen.getByText('No billing email or tax number on file')
).toBeInTheDocument();
expect(screen.getByText('Card ending in 4242')).toBeInTheDocument();
expect(screen.getByText('Visa ending in 4242')).toBeInTheDocument();
expect(screen.getByText('Account balance: $10 credit')).toBeInTheDocument();
});

it('renders without pre-existing info', async () => {
Expand Down
23 changes: 20 additions & 3 deletions static/gsApp/views/subscriptionPage/headerCards/billingInfoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@ import {Text} from 'sentry/components/core/text';
import Placeholder from 'sentry/components/placeholder';
import {t, tct} from 'sentry/locale';
import type {Organization} from 'sentry/types/organization';
import {toTitleCase} from 'sentry/utils/string/toTitleCase';
import {useNavContext} from 'sentry/views/nav/context';
import {NavLayout} from 'sentry/views/nav/types';

import {useBillingDetails} from 'getsentry/hooks/useBillingDetails';
import type {Subscription} from 'getsentry/types';
import {hasSomeBillingDetails} from 'getsentry/utils/billing';
import formatCurrency from 'getsentry/utils/formatCurrency';
import {countryHasSalesTax, getTaxFieldInfo} from 'getsentry/utils/salesTax';
import SubscriptionHeaderCard from 'getsentry/views/subscriptionPage/headerCards/subscriptionHeaderCard';

Expand All @@ -33,7 +35,7 @@ function BillingInfoCard({
align="start"
maxWidth="100%"
>
<BillingDetailsInfo />
<BillingDetailsInfo subscription={subscription} />
<PaymentSourceInfo subscription={subscription} />
</Flex>,
<LinkButton
Expand All @@ -52,7 +54,7 @@ function BillingInfoCard({
);
}

function BillingDetailsInfo() {
function BillingDetailsInfo({subscription}: {subscription: Subscription}) {
const {layout} = useNavContext();
const isMobile = layout === NavLayout.MOBILE;
const {data: billingDetails, isLoading} = useBillingDetails();
Expand Down Expand Up @@ -95,13 +97,27 @@ function BillingDetailsInfo() {
secondaryDetails.push(`${taxFieldInfo.label}: ${billingDetails.taxNumber}`);
}

const balance =
subscription.accountBalance < 0
? tct('[credits] credit', {
credits: formatCurrency(0 - subscription.accountBalance),
})
: `${formatCurrency(subscription.accountBalance)}`;

return (
<Flex
overflow="hidden"
direction="column"
gap="sm"
maxWidth={isMobile ? MAX_WIDTH : '100%'}
>
{!!subscription.accountBalance && (
<Text ellipsis size="sm" variant="muted">
{tct('Account balance: [balance]', {
balance,
})}
</Text>
)}
<Text ellipsis size="sm" variant="muted">
{primaryDetails.length > 0
? primaryDetails.join(', ')
Expand Down Expand Up @@ -129,7 +145,8 @@ function PaymentSourceInfo({subscription}: {subscription: Subscription}) {

return (
<Text ellipsis size="sm" variant="muted">
{tct('Card ending in [last4]', {
{tct('[cardBrand] ending in [last4]', {
cardBrand: toTitleCase(paymentSource.brand, {allowInnerUpperCase: true}),
last4: paymentSource.last4,
})}
</Text>
Expand Down
1 change: 1 addition & 0 deletions tests/js/getsentry-test/fixtures/subscription.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ export function SubscriptionFixture(props: Props): TSubscription {
zipCode: '94242',
expMonth: 12,
expYear: 2077,
brand: 'Visa',
},
billingPeriodEnd: '2018-10-24',
onDemandSpendUsed: 0,
Expand Down
Loading