diff --git a/static/gsApp/components/creditCardEdit/panel.tsx b/static/gsApp/components/creditCardEdit/panel.tsx index 1a0484568ae6ea..666ca7ced1f9f2 100644 --- a/static/gsApp/components/creditCardEdit/panel.tsx +++ b/static/gsApp/components/creditCardEdit/panel.tsx @@ -1,6 +1,5 @@ import {Fragment, useCallback, useEffect, useState} from 'react'; import type {Location} from 'history'; -import moment from 'moment-timezone'; import {Button} from 'sentry/components/core/button'; import {Flex} from 'sentry/components/core/layout'; @@ -189,7 +188,7 @@ function CreditCardPanel({ /> ) : subscription.paymentSource ? ( - {`****${subscription.paymentSource.last4} ${moment(new Date(subscription.paymentSource.expYear, subscription.paymentSource.expMonth - 1)).format('MM/YY')}`} + {`****${subscription.paymentSource.last4} ${String(subscription.paymentSource.expMonth).padStart(2, '0')}/${String(subscription.paymentSource.expYear).slice(-2)}`} {`${countryName ? `${countryName} ` : ''} ${subscription.paymentSource.zipCode}`} ) : ( diff --git a/static/gsApp/views/subscriptionPage/billingInformation.spec.tsx b/static/gsApp/views/subscriptionPage/billingInformation.spec.tsx index c5f6ee99e7a9e5..236227e5217293 100644 --- a/static/gsApp/views/subscriptionPage/billingInformation.spec.tsx +++ b/static/gsApp/views/subscriptionPage/billingInformation.spec.tsx @@ -615,4 +615,40 @@ describe('Billing details form', () => { inModal.queryByRole('textbox', {name: 'Street Address 1'}) ).not.toBeInTheDocument(); }); + + it('displays credit card expiration date', async () => { + organization.features = ['subscriptions-v3']; + + const subscriptionWithCard = SubscriptionFixture({ + organization, + paymentSource: { + last4: '4242', + countryCode: 'US', + zipCode: '94242', + expMonth: 8, + expYear: 2030, + }, + }); + + MockApiClient.addMockResponse({ + url: `/subscriptions/${organization.slug}/`, + method: 'GET', + body: subscriptionWithCard, + }); + + render( + + ); + + await screen.findByText('Billing Information'); + + const cardPanel = await screen.findByTestId('credit-card-panel'); + + // Verify payment method displays with correct expiration date format (MM/YY) + expect(within(cardPanel).getByText(/\*\*\*\*4242 08\/30/)).toBeInTheDocument(); + }); });