Skip to content

Commit 9822e62

Browse files
panteliselefpanteliselef
authored
chore(clerk-js): Rename payment source to method internally (#6952)
1 parent 56a81aa commit 9822e62

File tree

15 files changed

+119
-118
lines changed

15 files changed

+119
-118
lines changed

‎.changeset/wet-cameras-sneeze.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎packages/clerk-js/src/core/modules/billing/payment-source-methods.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,10 @@ export const getPaymentMethods = async (params: GetPaymentMethodsParams) => {
4646
method: 'GET',
4747
search: convertPageToOffsetSearchParams(rest),
4848
}).then(res => {
49-
const { data: paymentSources, total_count } =
50-
res?.response as unknown as ClerkPaginatedResponse<BillingPaymentMethodJSON>;
49+
const { data, total_count } = res?.response as unknown as ClerkPaginatedResponse<BillingPaymentMethodJSON>;
5150
return {
5251
total_count,
53-
data: paymentSources.map(paymentMethod => new BillingPaymentMethod(paymentMethod)),
52+
data: data.map(paymentMethod => new BillingPaymentMethod(paymentMethod)),
5453
};
5554
});
5655
};

‎packages/clerk-js/src/core/modules/checkout/__tests__/manager.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const createMockCheckoutResource = (overrides: Partial<BillingCheckoutResource>
5252
pathRoot: '',
5353
reload: vi.fn(),
5454
},
55-
paymentSource: undefined,
55+
paymentMethod: undefined,
5656
confirm: vi.fn(),
5757
reload: vi.fn(),
5858
pathRoot: '/checkout',

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

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import { DevOnly } from '../../common/DevOnly';
1515
import { useCheckoutContext, usePaymentMethods } from '../../contexts';
1616
import { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Spinner, Text } from '../../customizables';
1717
import { ChevronUpDown, InformationCircle } from '../../icons';
18-
import * as AddPaymentSource from '../PaymentSources/AddPaymentSource';
19-
import { PaymentSourceRow } from '../PaymentSources/PaymentSourceRow';
18+
import * as AddPaymentMethod from '../PaymentMethods/AddPaymentMethod';
19+
import { PaymentMethodRow } from '../PaymentMethods/PaymentMethodRow';
2020
import { SubscriptionBadge } from '../Subscriptions/badge';
2121

2222
type PaymentMethodSource = 'existing' | 'new';
@@ -213,10 +213,10 @@ const CheckoutFormElements = () => {
213213
const CheckoutFormElementsInternal = () => {
214214
const { checkout } = useCheckout();
215215
const { id, totals, isImmediatePlanChange, freeTrialEndsAt } = checkout;
216-
const { data: paymentSources } = usePaymentMethods();
216+
const { data: paymentMethods } = usePaymentMethods();
217217

218218
const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>
219-
paymentSources.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',
219+
paymentMethods.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',
220220
);
221221

222222
const showPaymentMethods = isImmediatePlanChange && (totals.totalDueNow.amount > 0 || !!freeTrialEndsAt);
@@ -233,7 +233,7 @@ const CheckoutFormElementsInternal = () => {
233233
>
234234
{__BUILD_DISABLE_RHC__ ? null : (
235235
<>
236-
{paymentSources.length > 0 && showPaymentMethods && (
236+
{paymentMethods.length > 0 && showPaymentMethods && (
237237
<SegmentedControl.Root
238238
aria-label='Payment method source'
239239
value={paymentMethodSource}
@@ -255,18 +255,18 @@ const CheckoutFormElementsInternal = () => {
255255
)}
256256

257257
{paymentMethodSource === 'existing' && (
258-
<ExistingPaymentSourceForm
259-
paymentSources={paymentSources}
258+
<ExistingPaymentMethodForm
259+
paymentMethods={paymentMethods}
260260
totalDueNow={totals.totalDueNow}
261261
/>
262262
)}
263263

264-
{__BUILD_DISABLE_RHC__ ? null : paymentMethodSource === 'new' && <AddPaymentSourceForCheckout />}
264+
{__BUILD_DISABLE_RHC__ ? null : paymentMethodSource === 'new' && <AddPaymentMethodForCheckout />}
265265
</Col>
266266
);
267267
};
268268

269-
export const PayWithTestPaymentSource = () => {
269+
export const PayWithTestPaymentMethod = () => {
270270
const { isLoading } = useCardState();
271271
const { payWithTestCard } = useCheckoutMutations();
272272

@@ -344,32 +344,32 @@ const useSubmitLabel = () => {
344344
return localizationKeys('commerce.subscribe');
345345
};
346346

347-
const AddPaymentSourceForCheckout = withCardStateProvider(() => {
347+
const AddPaymentMethodForCheckout = withCardStateProvider(() => {
348348
const { addPaymentMethodAndPay } = useCheckoutMutations();
349349
const submitLabel = useSubmitLabel();
350350
const { checkout } = useCheckout();
351351

352352
return (
353-
<AddPaymentSource.Root
353+
<AddPaymentMethod.Root
354354
onSuccess={addPaymentMethodAndPay}
355355
checkout={checkout}
356356
>
357357
<DevOnly>
358-
<PayWithTestPaymentSource />
358+
<PayWithTestPaymentMethod />
359359
</DevOnly>
360360

361-
<AddPaymentSource.FormButton text={submitLabel} />
362-
</AddPaymentSource.Root>
361+
<AddPaymentMethod.FormButton text={submitLabel} />
362+
</AddPaymentMethod.Root>
363363
);
364364
});
365365

366-
const ExistingPaymentSourceForm = withCardStateProvider(
366+
const ExistingPaymentMethodForm = withCardStateProvider(
367367
({
368368
totalDueNow,
369-
paymentSources,
369+
paymentMethods,
370370
}: {
371371
totalDueNow: BillingMoneyAmount;
372-
paymentSources: BillingPaymentMethodResource[];
372+
paymentMethods: BillingPaymentMethodResource[];
373373
}) => {
374374
const submitLabel = useSubmitLabel();
375375
const { checkout } = useCheckout();
@@ -378,22 +378,22 @@ const ExistingPaymentSourceForm = withCardStateProvider(
378378
const { payWithExistingPaymentMethod } = useCheckoutMutations();
379379
const card = useCardState();
380380
const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<BillingPaymentMethodResource | undefined>(
381-
paymentMethod || paymentSources.find(p => p.isDefault),
381+
paymentMethod || paymentMethods.find(p => p.isDefault),
382382
);
383383

384384
const options = useMemo(() => {
385-
return paymentSources.map(source => {
385+
return paymentMethods.map(method => {
386386
const label =
387-
source.paymentType !== 'card'
388-
? `${capitalize(source.paymentType)}`
389-
: `${capitalize(source.cardType)} ⋯ ${source.last4}`;
387+
method.paymentType !== 'card'
388+
? `${capitalize(method.paymentType)}`
389+
: `${capitalize(method.cardType)} ⋯ ${method.last4}`;
390390

391391
return {
392-
value: source.id,
392+
value: method.id,
393393
label,
394394
};
395395
});
396-
}, [paymentSources]);
396+
}, [paymentMethods]);
397397

398398
const showPaymentMethods = isImmediatePlanChange && (totalDueNow.amount > 0 || !!freeTrialEndsAt);
399399

@@ -412,8 +412,8 @@ const ExistingPaymentSourceForm = withCardStateProvider(
412412
options={options}
413413
value={selectedPaymentMethod?.id || null}
414414
onChange={option => {
415-
const paymentSource = paymentSources.find(source => source.id === option.value);
416-
setSelectedPaymentMethod(paymentSource);
415+
const paymentMethod = paymentMethods.find(source => source.id === option.value);
416+
setSelectedPaymentMethod(paymentMethod);
417417
}}
418418
portal
419419
>
@@ -430,7 +430,7 @@ const ExistingPaymentSourceForm = withCardStateProvider(
430430
backgroundColor: t.colors.$colorBackground,
431431
})}
432432
>
433-
{selectedPaymentMethod && <PaymentSourceRow paymentSource={selectedPaymentMethod} />}
433+
{selectedPaymentMethod && <PaymentMethodRow paymentMethod={selectedPaymentMethod} />}
434434
</SelectButton>
435435
<SelectOptionList
436436
sx={t => ({

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -450,7 +450,7 @@ describe('Checkout', () => {
450450
freeTrialDays: 7,
451451
freeTrialEnabled: true,
452452
},
453-
paymentSource: undefined,
453+
paymentMethod: undefined,
454454
confirm: vi.fn(),
455455
freeTrialEndsAt,
456456
} as any);
@@ -747,7 +747,7 @@ describe('Checkout', () => {
747747
freeTrialDays: 7,
748748
freeTrialEnabled: true,
749749
},
750-
paymentSource: undefined,
750+
paymentMethod: undefined,
751751
confirm: vi.fn(),
752752
freeTrialEndsAt: new Date('2025-08-19'),
753753
} as any);
@@ -780,17 +780,17 @@ describe('Checkout', () => {
780780
});
781781

782782
await waitFor(() => {
783-
const visaPaymentSource = getByText('visa');
784-
expect(visaPaymentSource).toBeVisible();
783+
const visaPaymentMethod = getByText('visa');
784+
expect(visaPaymentMethod).toBeVisible();
785785

786786
const last4Digits = getByText('⋯ 4242');
787787
expect(last4Digits).toBeVisible();
788788

789-
// Verify the default badge is shown for the first payment source
789+
// Verify the default badge is shown for the first payment method
790790
const defaultBadge = getByText('Default');
791791
expect(defaultBadge).toBeVisible();
792792

793-
// Verify the hidden input contains the correct payment source id
793+
// Verify the hidden input contains the correct payment method id
794794
const hiddenInput = baseElement.querySelector('input[name="payment_method_id"]');
795795
expect(hiddenInput).toHaveAttribute('value', 'pm_test_visa');
796796

@@ -886,7 +886,7 @@ describe('Checkout', () => {
886886
freeTrialDays: 7,
887887
freeTrialEnabled: true,
888888
},
889-
paymentSource: undefined,
889+
paymentMethod: undefined,
890890
confirm: vi.fn(),
891891
freeTrialEndsAt: null,
892892
} as any);
@@ -919,17 +919,17 @@ describe('Checkout', () => {
919919
});
920920

921921
await waitFor(() => {
922-
const visaPaymentSource = getByText('visa');
923-
expect(visaPaymentSource).toBeVisible();
922+
const visaPaymentMethod = getByText('visa');
923+
expect(visaPaymentMethod).toBeVisible();
924924

925925
const last4Digits = getByText('⋯ 4242');
926926
expect(last4Digits).toBeVisible();
927927

928-
// Verify the default badge is shown for the first payment source
928+
// Verify the default badge is shown for the first payment method
929929
const defaultBadge = getByText('Default');
930930
expect(defaultBadge).toBeVisible();
931931

932-
// Verify the hidden input contains the correct payment source id
932+
// Verify the hidden input contains the correct payment method id
933933
const hiddenInput = baseElement.querySelector('input[name="payment_method_id"]');
934934
expect(hiddenInput).toHaveAttribute('value', 'pm_test_visa');
935935

@@ -1025,7 +1025,7 @@ describe('Checkout', () => {
10251025
freeTrialDays: 7,
10261026
freeTrialEnabled: true,
10271027
},
1028-
paymentSource: undefined,
1028+
paymentMethod: undefined,
10291029
confirm: vi.fn(),
10301030
freeTrialEndsAt: null,
10311031
} as any);
@@ -1055,16 +1055,16 @@ describe('Checkout', () => {
10551055
const addPaymentMethodButton = queryByText('Add payment method');
10561056
expect(addPaymentMethodButton).toBeNull();
10571057

1058-
const visaPaymentSource = queryByText('visa');
1059-
expect(visaPaymentSource).toBeNull();
1058+
const visaPaymentMethod = queryByText('visa');
1059+
expect(visaPaymentMethod).toBeNull();
10601060

10611061
expect(
10621062
getByText(
10631063
'You will keep your current subscription and its features until the end of the billing cycle, then you will be switched to this subscription.',
10641064
),
10651065
).toBeInTheDocument();
10661066

1067-
// Verify the hidden input contains the correct payment source id
1067+
// Verify the hidden input contains the correct payment method id
10681068
const hiddenInput = baseElement.querySelector('input[name="payment_method_id"]');
10691069
expect(hiddenInput).toHaveAttribute('value', 'pm_test_visa');
10701070

‎packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { SubscriberTypeContext } from '../../contexts';
88
import { Col, descriptors, localizationKeys } from '../../customizables';
99
import { useTabState } from '../../hooks/useTabState';
1010
import { PaymentAttemptsList } from '../PaymentAttempts';
11-
import { PaymentSources } from '../PaymentSources';
11+
import { PaymentMethods } from '../PaymentMethods';
1212
import { StatementsList } from '../Statements';
1313
import { SubscriptionsList } from '../Subscriptions';
1414

@@ -68,7 +68,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
6868
)}
6969
/>
7070
<Protect condition={has => has({ permission: 'org:sys_billing:manage' })}>
71-
<PaymentSources />
71+
<PaymentMethods />
7272
</Protect>
7373
</TabPanel>
7474
<TabPanel sx={{ width: '100%' }}>

0 commit comments

Comments
 (0)