Skip to content

Commit 2afcbbb

Browse files
authored
fix(billing): Fix credit card expiration date display (#103112)
1 parent cf80306 commit 2afcbbb

File tree

2 files changed

+37
-2
lines changed

2 files changed

+37
-2
lines changed

static/gsApp/components/creditCardEdit/panel.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {Fragment, useCallback, useEffect, useState} from 'react';
22
import type {Location} from 'history';
3-
import moment from 'moment-timezone';
43

54
import {Button} from 'sentry/components/core/button';
65
import {Flex} from 'sentry/components/core/layout';
@@ -189,7 +188,7 @@ function CreditCardPanel({
189188
/>
190189
) : subscription.paymentSource ? (
191190
<Fragment>
192-
<Text>{`****${subscription.paymentSource.last4} ${moment(new Date(subscription.paymentSource.expYear, subscription.paymentSource.expMonth - 1)).format('MM/YY')}`}</Text>
191+
<Text>{`****${subscription.paymentSource.last4} ${String(subscription.paymentSource.expMonth).padStart(2, '0')}/${String(subscription.paymentSource.expYear).slice(-2)}`}</Text>
193192
<Text>{`${countryName ? `${countryName} ` : ''} ${subscription.paymentSource.zipCode}`}</Text>
194193
</Fragment>
195194
) : (

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -615,4 +615,40 @@ describe('Billing details form', () => {
615615
inModal.queryByRole('textbox', {name: 'Street Address 1'})
616616
).not.toBeInTheDocument();
617617
});
618+
619+
it('displays credit card expiration date', async () => {
620+
organization.features = ['subscriptions-v3'];
621+
622+
const subscriptionWithCard = SubscriptionFixture({
623+
organization,
624+
paymentSource: {
625+
last4: '4242',
626+
countryCode: 'US',
627+
zipCode: '94242',
628+
expMonth: 8,
629+
expYear: 2030,
630+
},
631+
});
632+
633+
MockApiClient.addMockResponse({
634+
url: `/subscriptions/${organization.slug}/`,
635+
method: 'GET',
636+
body: subscriptionWithCard,
637+
});
638+
639+
render(
640+
<BillingInformation
641+
organization={organization}
642+
subscription={subscriptionWithCard}
643+
location={router.location}
644+
/>
645+
);
646+
647+
await screen.findByText('Billing Information');
648+
649+
const cardPanel = await screen.findByTestId('credit-card-panel');
650+
651+
// Verify payment method displays with correct expiration date format (MM/YY)
652+
expect(within(cardPanel).getByText(/\*\*\*\*4242 08\/30/)).toBeInTheDocument();
653+
});
618654
});

0 commit comments

Comments
 (0)