Skip to content

Commit 31a04fc

Browse files
panteliselefpanteliselef
authored
chore(types, localizations): Rename payment sources to method methods (#6959)
1 parent 1840bf0 commit 31a04fc

72 files changed

Lines changed: 601 additions & 597 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/sad-bikes-tan.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@clerk/localizations': minor
3+
'@clerk/clerk-js': minor
4+
'@clerk/types': minor
5+
---
6+
7+
[Billing Beta] Rename payment sources to method methods.
8+
Updates localization keys from `commerce` -> `billing` and `paymentSource` to `paymentMethod`.

‎integration/tests/pricing-table.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -452,7 +452,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
452452

453453
test.describe('in UserProfile', () => {
454454
// test.describe.configure({ mode: 'serial' });
455-
test('renders pricing table, subscribes to a plan, revalidates payment sources on complete and then downgrades to free', async ({
455+
test('renders pricing table, subscribes to a plan, revalidates payment method on complete and then downgrades to free', async ({
456456
page,
457457
context,
458458
}) => {
@@ -584,7 +584,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
584584
await fakeUser.deleteIfExists();
585585
});
586586

587-
test('adds payment source via checkout and resets stripe setup intent after failed payment', async ({
587+
test('adds payment method via checkout and resets stripe setup intent after failed payment', async ({
588588
page,
589589
context,
590590
}) => {

packages/clerk-js/src/core/resources/BillingPaymentSource.ts renamed to packages/clerk-js/src/core/resources/BillingPaymentMethod.ts

File renamed without changes.

‎packages/clerk-js/src/core/resources/internal.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export * from './BillingCheckout';
88
export * from './Feature';
99
export * from './BillingStatement';
1010
export * from './BillingPayment';
11-
export * from './BillingPaymentSource';
11+
export * from './BillingPaymentMethod';
1212
export * from './BillingPlan';
1313
export * from './BillingSubscription';
1414
export * from './DeletedObject';

‎packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -330,10 +330,10 @@ export const CheckoutComplete = () => {
330330
textVariant='h2'
331331
localizationKey={
332332
freeTrialEndsAt
333-
? localizationKeys('commerce.checkout.title__trialSuccess')
333+
? localizationKeys('billing.checkout.title__trialSuccess')
334334
: totals.totalDueNow.amount > 0
335-
? localizationKeys('commerce.checkout.title__paymentSuccessful')
336-
: localizationKeys('commerce.checkout.title__subscriptionSuccessful')
335+
? localizationKeys('billing.checkout.title__paymentSuccessful')
336+
: localizationKeys('billing.checkout.title__subscriptionSuccessful')
337337
}
338338
sx={t => ({
339339
opacity: 0,
@@ -387,8 +387,8 @@ export const CheckoutComplete = () => {
387387
})}
388388
localizationKey={
389389
totals.totalDueNow.amount > 0
390-
? localizationKeys('commerce.checkout.description__paymentSuccessful')
391-
: localizationKeys('commerce.checkout.description__subscriptionSuccessful')
390+
? localizationKeys('billing.checkout.description__paymentSuccessful')
391+
: localizationKeys('billing.checkout.description__subscriptionSuccessful')
392392
}
393393
/>
394394
</Span>
@@ -417,22 +417,22 @@ export const CheckoutComplete = () => {
417417
>
418418
<LineItems.Root>
419419
<LineItems.Group variant='secondary'>
420-
<LineItems.Title title={localizationKeys('commerce.checkout.lineItems.title__totalPaid')} />
420+
<LineItems.Title title={localizationKeys('billing.checkout.lineItems.title__totalPaid')} />
421421
<LineItems.Description text={`${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`} />
422422
</LineItems.Group>
423423

424424
{freeTrialEndsAt ? (
425425
<LineItems.Group variant='secondary'>
426-
<LineItems.Title title={localizationKeys('commerce.checkout.lineItems.title__freeTrialEndsAt')} />
426+
<LineItems.Title title={localizationKeys('billing.checkout.lineItems.title__freeTrialEndsAt')} />
427427
<LineItems.Description text={formatDate(freeTrialEndsAt)} />
428428
</LineItems.Group>
429429
) : null}
430430
<LineItems.Group variant='secondary'>
431431
<LineItems.Title
432432
title={
433433
totals.totalDueNow.amount > 0 || freeTrialEndsAt !== null
434-
? localizationKeys('commerce.checkout.lineItems.title__paymentMethod')
435-
: localizationKeys('commerce.checkout.lineItems.title__subscriptionBegins')
434+
? localizationKeys('billing.checkout.lineItems.title__paymentMethod')
435+
: localizationKeys('billing.checkout.lineItems.title__subscriptionBegins')
436436
}
437437
/>
438438
<LineItems.Description

‎packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const CheckoutForm = withCardStateProvider(() => {
5555
<LineItems.Group>
5656
<LineItems.Title
5757
title={plan.name}
58-
description={planPeriod === 'annual' ? localizationKeys('commerce.billedAnnually') : undefined}
58+
description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}
5959
badge={
6060
plan.freeTrialEnabled && freeTrialEndsAt ? (
6161
<SubscriptionBadge subscription={{ status: 'free_trial' }} />
@@ -65,19 +65,19 @@ export const CheckoutForm = withCardStateProvider(() => {
6565
<LineItems.Description
6666
prefix={planPeriod === 'annual' ? 'x12' : undefined}
6767
text={`${fee.currencySymbol}${fee.amountFormatted}`}
68-
suffix={localizationKeys('commerce.checkout.perMonth')}
68+
suffix={localizationKeys('billing.checkout.perMonth')}
6969
/>
7070
</LineItems.Group>
7171
<LineItems.Group
7272
borderTop
7373
variant='tertiary'
7474
>
75-
<LineItems.Title title={localizationKeys('commerce.subtotal')} />
75+
<LineItems.Title title={localizationKeys('billing.subtotal')} />
7676
<LineItems.Description text={`${totals.subtotal.currencySymbol}${totals.subtotal.amountFormatted}`} />
7777
</LineItems.Group>
7878
{showCredits && (
7979
<LineItems.Group variant='tertiary'>
80-
<LineItems.Title title={localizationKeys('commerce.creditRemainder')} />
80+
<LineItems.Title title={localizationKeys('billing.creditRemainder')} />
8181
<LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />
8282
</LineItems.Group>
8383
)}
@@ -86,11 +86,11 @@ export const CheckoutForm = withCardStateProvider(() => {
8686
<Tooltip.Root>
8787
<Tooltip.Trigger>
8888
<LineItems.Title
89-
title={localizationKeys('commerce.pastDue')}
89+
title={localizationKeys('billing.pastDue')}
9090
icon={InformationCircle}
9191
/>
9292
</Tooltip.Trigger>
93-
<Tooltip.Content text={localizationKeys('commerce.checkout.pastDueNotice')} />
93+
<Tooltip.Content text={localizationKeys('billing.checkout.pastDueNotice')} />
9494
</Tooltip.Root>
9595
<LineItems.Description text={`${totals.pastDue?.currencySymbol}${totals.pastDue?.amountFormatted}`} />
9696
</LineItems.Group>
@@ -99,7 +99,7 @@ export const CheckoutForm = withCardStateProvider(() => {
9999
{!!freeTrialEndsAt && !!plan.freeTrialDays && (
100100
<LineItems.Group variant='tertiary'>
101101
<LineItems.Title
102-
title={localizationKeys('commerce.checkout.totalDueAfterTrial', {
102+
title={localizationKeys('billing.checkout.totalDueAfterTrial', {
103103
days: plan.freeTrialDays,
104104
})}
105105
/>
@@ -110,7 +110,7 @@ export const CheckoutForm = withCardStateProvider(() => {
110110
)}
111111

112112
<LineItems.Group borderTop>
113-
<LineItems.Title title={localizationKeys('commerce.totalDueToday')} />
113+
<LineItems.Title title={localizationKeys('billing.totalDueToday')} />
114114
<LineItems.Description text={`${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`} />
115115
</LineItems.Group>
116116
</LineItems.Root>
@@ -125,7 +125,7 @@ export const CheckoutForm = withCardStateProvider(() => {
125125
})}
126126
>
127127
<Text
128-
localizationKey={localizationKeys('commerce.checkout.downgradeNotice')}
128+
localizationKey={localizationKeys('billing.checkout.downgradeNotice')}
129129
variant='caption'
130130
colorScheme='secondary'
131131
/>
@@ -243,11 +243,11 @@ const CheckoutFormElementsInternal = () => {
243243
>
244244
<SegmentedControl.Button
245245
value='existing'
246-
text={localizationKeys('commerce.paymentMethods')}
246+
text={localizationKeys('billing.paymentMethods__label')}
247247
/>
248248
<SegmentedControl.Button
249249
value='new'
250-
text={localizationKeys('commerce.addPaymentMethod')}
250+
text={localizationKeys('billing.addPaymentMethod__label')}
251251
/>
252252
</SegmentedControl.Root>
253253
)}
@@ -307,13 +307,13 @@ export const PayWithTestPaymentMethod = () => {
307307
color: t.colors.$warning500,
308308
fontWeight: t.fontWeights.$semibold,
309309
})}
310-
localizationKey={localizationKeys('commerce.paymentSource.dev.developmentMode')}
310+
localizationKey={localizationKeys('billing.paymentMethod.dev.developmentMode')}
311311
/>
312312
<Button
313313
type='button'
314314
block
315315
variant='bordered'
316-
localizationKey={localizationKeys('userProfile.billingPage.paymentSourcesSection.payWithTestCardButton')}
316+
localizationKey={localizationKeys('userProfile.billingPage.paymentMethodsSection.payWithTestCardButton')}
317317
colorScheme='secondary'
318318
isLoading={isLoading}
319319
onClick={payWithTestCard}
@@ -332,16 +332,16 @@ const useSubmitLabel = () => {
332332
}
333333

334334
if (freeTrialEndsAt) {
335-
return localizationKeys('commerce.startFreeTrial');
335+
return localizationKeys('billing.startFreeTrial');
336336
}
337337

338338
if (totals.totalDueNow.amount > 0) {
339-
return localizationKeys('commerce.pay', {
339+
return localizationKeys('billing.pay', {
340340
amount: `${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`,
341341
});
342342
}
343343

344-
return localizationKeys('commerce.subscribe');
344+
return localizationKeys('billing.subscribe');
345345
};
346346

347347
const AddPaymentMethodForCheckout = withCardStateProvider(() => {

‎packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ describe('Checkout', () => {
3535
// Mock billing to prevent actual API calls and stay in loading state
3636
fixtures.clerk.billing.startCheckout.mockResolvedValue({} as any);
3737

38-
const { baseElement } = render(
38+
const { baseElement, getByRole } = render(
3939
<Drawer.Root
4040
open
4141
onOpenChange={() => {}}
@@ -53,9 +53,7 @@ describe('Checkout', () => {
5353
expect(baseElement.querySelector('[role="dialog"]')).toBeVisible();
5454

5555
// Verify the checkout title is displayed
56-
const title = baseElement.querySelector('[data-localization-key="commerce.checkout.title"]');
57-
expect(title).toBeVisible();
58-
expect(title).toHaveTextContent('Checkout');
56+
expect(getByRole('heading', { name: 'Checkout' })).toBeVisible();
5957

6058
// Verify spinner is shown during initialization
6159
const spinner = baseElement.querySelector('span[aria-live="polite"]');
@@ -110,7 +108,7 @@ describe('Checkout', () => {
110108
errors: [{ code: 'unknown_error' }],
111109
});
112110

113-
const { baseElement } = render(
111+
const { getByRole, baseElement } = render(
114112
<Drawer.Root
115113
open
116114
onOpenChange={() => {}}
@@ -126,7 +124,7 @@ describe('Checkout', () => {
126124
await waitFor(() => {
127125
// Component should still render the drawer structure even with errors
128126
expect(baseElement.querySelector('[role="dialog"]')).toBeVisible();
129-
expect(baseElement.querySelector('[data-localization-key="commerce.checkout.title"]')).toBeVisible();
127+
expect(getByRole('heading', { name: 'Checkout' })).toBeVisible();
130128
});
131129
});
132130

@@ -171,7 +169,7 @@ describe('Checkout', () => {
171169

172170
fixtures.clerk.billing.startCheckout.mockResolvedValue({} as any);
173171

174-
const { baseElement } = render(
172+
const { baseElement, getByRole } = render(
175173
<Drawer.Root
176174
open
177175
onOpenChange={() => {}}
@@ -191,7 +189,7 @@ describe('Checkout', () => {
191189
expect(dialog).toHaveAttribute('tabindex', '-1');
192190

193191
// Check heading hierarchy
194-
const heading = baseElement.querySelector('h2[data-localization-key="commerce.checkout.title"]');
192+
const heading = getByRole('heading', { name: 'Checkout' });
195193
expect(heading).toBeVisible();
196194

197195
// Check focus guards for modal

‎packages/clerk-js/src/ui/components/Checkout/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const Checkout = (props: __internal_CheckoutProps) => {
2121
}}
2222
>
2323
<Drawer.Content>
24-
<Drawer.Header title={localizationKeys('commerce.checkout.title')} />
24+
<Drawer.Header title={localizationKeys('billing.checkout.title')} />
2525
<CheckoutPage.Root>
2626
<CheckoutPage.Stage name='needs_initialization'>
2727
<CheckoutPage.FetchStatus status='fetching'>

‎packages/clerk-js/src/ui/components/Checkout/parts.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,12 @@ export const InvalidPlanScreen = () => {
7676
<LineItems.Group>
7777
<LineItems.Title
7878
title={planFromError.name}
79-
description={planPeriod === 'annual' ? localizationKeys('commerce.billedAnnually') : undefined}
79+
description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}
8080
/>
8181
<LineItems.Description
8282
prefix={planPeriod === 'annual' ? 'x12' : undefined}
8383
text={`${planFromError.currency_symbol}${planPeriod === 'month' ? planFromError.amount_formatted : planFromError.annual_monthly_amount_formatted}`}
84-
suffix={localizationKeys('commerce.checkout.perMonth')}
84+
suffix={localizationKeys('billing.checkout.perMonth')}
8585
/>
8686
</LineItems.Group>
8787
</LineItems.Root>
@@ -92,8 +92,8 @@ export const InvalidPlanScreen = () => {
9292
colorScheme='info'
9393
title={
9494
isPlanUpgradePossible
95-
? localizationKeys('commerce.cannotSubscribeMonthly')
96-
: localizationKeys('commerce.cannotSubscribeUnrecoverable')
95+
? localizationKeys('billing.cannotSubscribeMonthly')
96+
: localizationKeys('billing.cannotSubscribeUnrecoverable')
9797
}
9898
/>
9999
</Box>
@@ -113,8 +113,8 @@ export const AddEmailForm = () => {
113113
})}
114114
>
115115
<EmailForm
116-
title={localizationKeys('commerce.checkout.emailForm.title')}
117-
subtitle={localizationKeys('commerce.checkout.emailForm.subtitle')}
116+
title={localizationKeys('billing.checkout.emailForm.title')}
117+
subtitle={localizationKeys('billing.checkout.emailForm.subtitle')}
118118
onSuccess={() => void checkout.start()}
119119
onReset={() => setIsOpen(false)}
120120
disableAutoFocus

‎packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ export const PaymentAttemptPage = () => {
175175
>
176176
<Text
177177
variant='h3'
178-
localizationKey={localizationKeys('commerce.totalDue')}
178+
localizationKey={localizationKeys('billing.totalDue')}
179179
elementDescriptor={descriptors.paymentAttemptFooterLabel}
180180
/>
181181
<Span
@@ -236,14 +236,14 @@ function PaymentAttemptBody({ subscriptionItem }: { subscriptionItem: BillingSub
236236
borderTop
237237
variant='tertiary'
238238
>
239-
<LineItems.Title title={localizationKeys('commerce.subtotal')} />
239+
<LineItems.Title title={localizationKeys('billing.subtotal')} />
240240
<LineItems.Description
241241
text={`${subscriptionItem.amount?.currencySymbol}${subscriptionItem.amount?.amountFormatted}`}
242242
/>
243243
</LineItems.Group>
244244
{subscriptionItem.credit && subscriptionItem.credit.amount.amount > 0 && (
245245
<LineItems.Group variant='tertiary'>
246-
<LineItems.Title title={localizationKeys('commerce.credit')} />
246+
<LineItems.Title title={localizationKeys('billing.credit')} />
247247
<LineItems.Description
248248
text={`- ${subscriptionItem.credit.amount.currencySymbol}${subscriptionItem.credit.amount.amountFormatted}`}
249249
/>

0 commit comments

Comments
 (0)