From 1b0eeb0a2bc5188c8a227e736a79115ac9f002f0 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Thu, 9 Oct 2025 17:52:19 +0300 Subject: [PATCH 1/2] chore: Rename payment source to method internally --- .../modules/billing/payment-source-methods.ts | 5 +- .../checkout/__tests__/manager.test.ts | 2 +- .../ui/components/Checkout/CheckoutForm.tsx | 54 +++++++-------- .../Checkout/__tests__/Checkout.test.tsx | 30 ++++----- .../OrganizationBillingPage.tsx | 4 +- .../AddPaymentMethod.tsx} | 44 ++++++------- .../PaymentElementSkeleton.tsx | 0 .../PaymentMethodRow.tsx} | 12 ++-- .../PaymentMethods.tsx} | 66 +++++++++---------- .../TestPaymentMethod.tsx} | 2 +- .../src/ui/components/PaymentMethods/index.ts | 3 + .../src/ui/components/PaymentSources/index.ts | 3 - .../ui/components/UserProfile/BillingPage.tsx | 4 +- .../src/ui/contexts/components/Plans.tsx | 6 +- 14 files changed, 117 insertions(+), 118 deletions(-) rename packages/clerk-js/src/ui/components/{PaymentSources/AddPaymentSource.tsx => PaymentMethods/AddPaymentMethod.tsx} (87%) rename packages/clerk-js/src/ui/components/{PaymentSources => PaymentMethods}/PaymentElementSkeleton.tsx (100%) rename packages/clerk-js/src/ui/components/{PaymentSources/PaymentSourceRow.tsx => PaymentMethods/PaymentMethodRow.tsx} (77%) rename packages/clerk-js/src/ui/components/{PaymentSources/PaymentSources.tsx => PaymentMethods/PaymentMethods.tsx} (79%) rename packages/clerk-js/src/ui/components/{PaymentSources/TestPaymentSource.tsx => PaymentMethods/TestPaymentMethod.tsx} (98%) create mode 100644 packages/clerk-js/src/ui/components/PaymentMethods/index.ts delete mode 100644 packages/clerk-js/src/ui/components/PaymentSources/index.ts diff --git a/packages/clerk-js/src/core/modules/billing/payment-source-methods.ts b/packages/clerk-js/src/core/modules/billing/payment-source-methods.ts index a454aaaabcc..ec8b065347d 100644 --- a/packages/clerk-js/src/core/modules/billing/payment-source-methods.ts +++ b/packages/clerk-js/src/core/modules/billing/payment-source-methods.ts @@ -46,11 +46,10 @@ export const getPaymentMethods = async (params: GetPaymentMethodsParams) => { method: 'GET', search: convertPageToOffsetSearchParams(rest), }).then(res => { - const { data: paymentSources, total_count } = - res?.response as unknown as ClerkPaginatedResponse; + const { data, total_count } = res?.response as unknown as ClerkPaginatedResponse; return { total_count, - data: paymentSources.map(paymentMethod => new BillingPaymentMethod(paymentMethod)), + data: data.map(paymentMethod => new BillingPaymentMethod(paymentMethod)), }; }); }; diff --git a/packages/clerk-js/src/core/modules/checkout/__tests__/manager.test.ts b/packages/clerk-js/src/core/modules/checkout/__tests__/manager.test.ts index fe003965e5b..9c0b0a101a1 100644 --- a/packages/clerk-js/src/core/modules/checkout/__tests__/manager.test.ts +++ b/packages/clerk-js/src/core/modules/checkout/__tests__/manager.test.ts @@ -52,7 +52,7 @@ const createMockCheckoutResource = (overrides: Partial pathRoot: '', reload: vi.fn(), }, - paymentSource: undefined, + paymentMethod: undefined, confirm: vi.fn(), reload: vi.fn(), pathRoot: '/checkout', diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx index 1b453a29261..a260166293d 100644 --- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx +++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx @@ -15,8 +15,8 @@ import { DevOnly } from '../../common/DevOnly'; import { useCheckoutContext, usePaymentMethods } from '../../contexts'; import { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Spinner, Text } from '../../customizables'; import { ChevronUpDown, InformationCircle } from '../../icons'; -import * as AddPaymentSource from '../PaymentSources/AddPaymentSource'; -import { PaymentSourceRow } from '../PaymentSources/PaymentSourceRow'; +import * as AddPaymentMethod from '../PaymentMethods/AddPaymentMethod'; +import { PaymentMethodRow } from '../PaymentMethods/PaymentMethodRow'; import { SubscriptionBadge } from '../Subscriptions/badge'; type PaymentMethodSource = 'existing' | 'new'; @@ -213,10 +213,10 @@ const CheckoutFormElements = () => { const CheckoutFormElementsInternal = () => { const { checkout } = useCheckout(); const { id, totals, isImmediatePlanChange, freeTrialEndsAt } = checkout; - const { data: paymentSources } = usePaymentMethods(); + const { data: paymentMethods } = usePaymentMethods(); const [paymentMethodSource, setPaymentMethodSource] = useState(() => - paymentSources.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new', + paymentMethods.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new', ); const showPaymentMethods = isImmediatePlanChange && (totals.totalDueNow.amount > 0 || !!freeTrialEndsAt); @@ -233,7 +233,7 @@ const CheckoutFormElementsInternal = () => { > {__BUILD_DISABLE_RHC__ ? null : ( <> - {paymentSources.length > 0 && showPaymentMethods && ( + {paymentMethods.length > 0 && showPaymentMethods && ( { )} {paymentMethodSource === 'existing' && ( - )} - {__BUILD_DISABLE_RHC__ ? null : paymentMethodSource === 'new' && } + {__BUILD_DISABLE_RHC__ ? null : paymentMethodSource === 'new' && } ); }; -export const PayWithTestPaymentSource = () => { +export const PayWithTestPaymentMethod = () => { const { isLoading } = useCardState(); const { payWithTestCard } = useCheckoutMutations(); @@ -344,32 +344,32 @@ const useSubmitLabel = () => { return localizationKeys('commerce.subscribe'); }; -const AddPaymentSourceForCheckout = withCardStateProvider(() => { +const AddPaymentMethodForCheckout = withCardStateProvider(() => { const { addPaymentMethodAndPay } = useCheckoutMutations(); const submitLabel = useSubmitLabel(); const { checkout } = useCheckout(); return ( - - + - - + + ); }); -const ExistingPaymentSourceForm = withCardStateProvider( +const ExistingPaymentMethodForm = withCardStateProvider( ({ totalDueNow, - paymentSources, + paymentMethods, }: { totalDueNow: BillingMoneyAmount; - paymentSources: BillingPaymentMethodResource[]; + paymentMethods: BillingPaymentMethodResource[]; }) => { const submitLabel = useSubmitLabel(); const { checkout } = useCheckout(); @@ -378,22 +378,22 @@ const ExistingPaymentSourceForm = withCardStateProvider( const { payWithExistingPaymentMethod } = useCheckoutMutations(); const card = useCardState(); const [selectedPaymentMethod, setSelectedPaymentMethod] = useState( - paymentMethod || paymentSources.find(p => p.isDefault), + paymentMethod || paymentMethods.find(p => p.isDefault), ); const options = useMemo(() => { - return paymentSources.map(source => { + return paymentMethods.map(method => { const label = - source.paymentType !== 'card' - ? `${capitalize(source.paymentType)}` - : `${capitalize(source.cardType)} ⋯ ${source.last4}`; + method.paymentType !== 'card' + ? `${capitalize(method.paymentType)}` + : `${capitalize(method.cardType)} ⋯ ${method.last4}`; return { - value: source.id, + value: method.id, label, }; }); - }, [paymentSources]); + }, [paymentMethods]); const showPaymentMethods = isImmediatePlanChange && (totalDueNow.amount > 0 || !!freeTrialEndsAt); @@ -412,8 +412,8 @@ const ExistingPaymentSourceForm = withCardStateProvider( options={options} value={selectedPaymentMethod?.id || null} onChange={option => { - const paymentSource = paymentSources.find(source => source.id === option.value); - setSelectedPaymentMethod(paymentSource); + const paymentMethod = paymentMethods.find(source => source.id === option.value); + setSelectedPaymentMethod(paymentMethod); }} portal > @@ -430,7 +430,7 @@ const ExistingPaymentSourceForm = withCardStateProvider( backgroundColor: t.colors.$colorBackground, })} > - {selectedPaymentMethod && } + {selectedPaymentMethod && } ({ diff --git a/packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx b/packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx index 3b5618a0144..89178c8b543 100644 --- a/packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx +++ b/packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx @@ -450,7 +450,7 @@ describe('Checkout', () => { freeTrialDays: 7, freeTrialEnabled: true, }, - paymentSource: undefined, + paymentMethod: undefined, confirm: vi.fn(), freeTrialEndsAt, } as any); @@ -747,7 +747,7 @@ describe('Checkout', () => { freeTrialDays: 7, freeTrialEnabled: true, }, - paymentSource: undefined, + paymentMethod: undefined, confirm: vi.fn(), freeTrialEndsAt: new Date('2025-08-19'), } as any); @@ -780,17 +780,17 @@ describe('Checkout', () => { }); await waitFor(() => { - const visaPaymentSource = getByText('visa'); - expect(visaPaymentSource).toBeVisible(); + const visaPaymentMethod = getByText('visa'); + expect(visaPaymentMethod).toBeVisible(); const last4Digits = getByText('⋯ 4242'); expect(last4Digits).toBeVisible(); - // Verify the default badge is shown for the first payment source + // Verify the default badge is shown for the first payment method const defaultBadge = getByText('Default'); expect(defaultBadge).toBeVisible(); - // Verify the hidden input contains the correct payment source id + // Verify the hidden input contains the correct payment method id const hiddenInput = baseElement.querySelector('input[name="payment_method_id"]'); expect(hiddenInput).toHaveAttribute('value', 'pm_test_visa'); @@ -886,7 +886,7 @@ describe('Checkout', () => { freeTrialDays: 7, freeTrialEnabled: true, }, - paymentSource: undefined, + paymentMethod: undefined, confirm: vi.fn(), freeTrialEndsAt: null, } as any); @@ -919,17 +919,17 @@ describe('Checkout', () => { }); await waitFor(() => { - const visaPaymentSource = getByText('visa'); - expect(visaPaymentSource).toBeVisible(); + const visaPaymentMethod = getByText('visa'); + expect(visaPaymentMethod).toBeVisible(); const last4Digits = getByText('⋯ 4242'); expect(last4Digits).toBeVisible(); - // Verify the default badge is shown for the first payment source + // Verify the default badge is shown for the first payment method const defaultBadge = getByText('Default'); expect(defaultBadge).toBeVisible(); - // Verify the hidden input contains the correct payment source id + // Verify the hidden input contains the correct payment method id const hiddenInput = baseElement.querySelector('input[name="payment_method_id"]'); expect(hiddenInput).toHaveAttribute('value', 'pm_test_visa'); @@ -1025,7 +1025,7 @@ describe('Checkout', () => { freeTrialDays: 7, freeTrialEnabled: true, }, - paymentSource: undefined, + paymentMethod: undefined, confirm: vi.fn(), freeTrialEndsAt: null, } as any); @@ -1055,8 +1055,8 @@ describe('Checkout', () => { const addPaymentMethodButton = queryByText('Add payment method'); expect(addPaymentMethodButton).toBeNull(); - const visaPaymentSource = queryByText('visa'); - expect(visaPaymentSource).toBeNull(); + const visaPaymentMethod = queryByText('visa'); + expect(visaPaymentMethod).toBeNull(); expect( getByText( @@ -1064,7 +1064,7 @@ describe('Checkout', () => { ), ).toBeInTheDocument(); - // Verify the hidden input contains the correct payment source id + // Verify the hidden input contains the correct payment method id const hiddenInput = baseElement.querySelector('input[name="payment_method_id"]'); expect(hiddenInput).toHaveAttribute('value', 'pm_test_visa'); diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx index 1eca8ace58f..7105e66eabb 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx @@ -8,7 +8,7 @@ import { SubscriberTypeContext } from '../../contexts'; import { Col, descriptors, localizationKeys } from '../../customizables'; import { useTabState } from '../../hooks/useTabState'; import { PaymentAttemptsList } from '../PaymentAttempts'; -import { PaymentSources } from '../PaymentSources'; +import { PaymentMethods } from '../PaymentMethods'; import { StatementsList } from '../Statements'; import { SubscriptionsList } from '../Subscriptions'; @@ -68,7 +68,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => { )} /> has({ permission: 'org:sys_billing:manage' })}> - + diff --git a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx b/packages/clerk-js/src/ui/components/PaymentMethods/AddPaymentMethod.tsx similarity index 87% rename from packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx rename to packages/clerk-js/src/ui/components/PaymentMethods/AddPaymentMethod.tsx index cf91e1c8f7e..362ab76d076 100644 --- a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx +++ b/packages/clerk-js/src/ui/components/PaymentMethods/AddPaymentMethod.tsx @@ -50,14 +50,14 @@ const useStripeAppearance = (node: HTMLElement | null) => { }, [theme, node]); }; -type AddPaymentSourceProps = { +type AddPaymentMethodProps = { onSuccess: (context: { gateway: 'stripe'; paymentToken: string }) => Promise; checkout?: ReturnType['checkout']; cancelAction?: () => void; }; -const [AddPaymentSourceContext, useAddPaymentSourceContext] = createContextAndHook< - AddPaymentSourceProps & { +const [AddPaymentMethodContext, useAddPaymentMethodContext] = createContextAndHook< + AddPaymentMethodProps & { headerTitle: LocalizationKey | undefined; headerSubtitle: LocalizationKey | undefined; submitLabel: LocalizationKey | undefined; @@ -66,9 +66,9 @@ const [AddPaymentSourceContext, useAddPaymentSourceContext] = createContextAndHo setSubmitLabel: (label: LocalizationKey) => void; onSuccess: (context: { gateway: 'stripe'; paymentToken: string }) => Promise; } ->('AddPaymentSourceRoot'); +>('AddPaymentMethodRoot'); -const AddPaymentSourceRoot = ({ children, checkout, ...rest }: PropsWithChildren) => { +const AddPaymentMethodRoot = ({ children, checkout, ...rest }: PropsWithChildren) => { const subscriberType = useSubscriberTypeContext(); const stripeAppearanceNode = useRef(null); const { t } = useLocalizations(); @@ -78,7 +78,7 @@ const AddPaymentSourceRoot = ({ children, checkout, ...rest }: PropsWithChildren const stripeAppearance = useStripeAppearance(stripeAppearanceNode.current); return ( - {children} - + ); }; -const AddPaymentSourceLoading = (props: PropsWithChildren) => { +const AddPaymentMethodLoading = (props: PropsWithChildren) => { const { isProviderReady } = usePaymentElement(); if (!isProviderReady) { @@ -124,7 +124,7 @@ const AddPaymentSourceLoading = (props: PropsWithChildren) => { return null; }; -const AddPaymentSourceReady = (props: PropsWithChildren) => { +const AddPaymentMethodReady = (props: PropsWithChildren) => { const { isProviderReady } = usePaymentElement(); if (!isProviderReady) { @@ -134,12 +134,12 @@ const AddPaymentSourceReady = (props: PropsWithChildren) => { return <>{props.children}; }; -const Root = (props: PropsWithChildren) => { +const Root = (props: PropsWithChildren) => { const { children, ...rest } = props; return ( - - + + ) => { elementDescriptor={descriptors.spinner} /> - + - - {children} - - + + {children} + + ); }; @@ -175,25 +175,25 @@ const useSetAndSync = (text: LocalizationKey, setter: (a: any) => void) => { }; const FormHeader = ({ text }: { text: LocalizationKey }) => { - const { setHeaderTitle } = useAddPaymentSourceContext(); + const { setHeaderTitle } = useAddPaymentMethodContext(); useSetAndSync(text, setHeaderTitle); return null; }; const FormSubtitle = ({ text }: { text: LocalizationKey }) => { - const { setHeaderSubtitle } = useAddPaymentSourceContext(); + const { setHeaderSubtitle } = useAddPaymentMethodContext(); useSetAndSync(text, setHeaderSubtitle); return null; }; const FormButton = ({ text }: { text: LocalizationKey }) => { - const { setSubmitLabel } = useAddPaymentSourceContext(); + const { setSubmitLabel } = useAddPaymentMethodContext(); useSetAndSync(text, setSubmitLabel); return null; }; -const AddPaymentSourceForm = ({ children }: PropsWithChildren) => { - const { headerTitle, headerSubtitle, submitLabel, checkout, onSuccess, cancelAction } = useAddPaymentSourceContext(); +const AddPaymentMethodForm = ({ children }: PropsWithChildren) => { + const { headerTitle, headerSubtitle, submitLabel, checkout, onSuccess, cancelAction } = useAddPaymentMethodContext(); const card = useCardState(); const localizationRoot = useSubscriberTypeLocalizationRoot(); diff --git a/packages/clerk-js/src/ui/components/PaymentSources/PaymentElementSkeleton.tsx b/packages/clerk-js/src/ui/components/PaymentMethods/PaymentElementSkeleton.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/PaymentSources/PaymentElementSkeleton.tsx rename to packages/clerk-js/src/ui/components/PaymentMethods/PaymentElementSkeleton.tsx diff --git a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx b/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethodRow.tsx similarity index 77% rename from packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx rename to packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethodRow.tsx index cffb37817f4..e576f960407 100644 --- a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx +++ b/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethodRow.tsx @@ -3,7 +3,7 @@ import type { BillingPaymentMethodResource } from '@clerk/types'; import { Badge, descriptors, Flex, Icon, localizationKeys, Text } from '../../customizables'; import { CreditCard, GenericPayment } from '../../icons'; -export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaymentMethodResource }) => { +export const PaymentMethodRow = ({ paymentMethod }: { paymentMethod: BillingPaymentMethodResource }) => { return ( ({ alignSelf: 'center', color: t.colors.$colorMutedForeground })} elementDescriptor={descriptors.paymentMethodRowIcon} /> @@ -22,7 +22,7 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym elementDescriptor={descriptors.paymentMethodRowType} > {/* TODO(@COMMERCE): Localize this */} - {paymentSource.paymentType === 'card' ? paymentSource.cardType : paymentSource.paymentType} + {paymentMethod.paymentType === 'card' ? paymentMethod.cardType : paymentMethod.paymentType} ({ color: t.colors.$colorMutedForeground })} @@ -30,16 +30,16 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym truncate elementDescriptor={descriptors.paymentMethodRowValue} > - {paymentSource.paymentType === 'card' ? `⋯ ${paymentSource.last4}` : null} + {paymentMethod.paymentType === 'card' ? `⋯ ${paymentMethod.last4}` : null} - {paymentSource.isDefault && ( + {paymentMethod.isDefault && ( )} - {paymentSource.status === 'expired' && ( + {paymentMethod.status === 'expired' && ( void }) => { const { close } = useActionContext(); @@ -24,7 +24,7 @@ const AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void const subscriberType = useSubscriberTypeContext(); const localizationRoot = useSubscriberTypeLocalizationRoot(); - const onAddPaymentSourceSuccess = async (context: { gateway: 'stripe'; paymentToken: string }) => { + const onAddPaymentMethodSuccess = async (context: { gateway: 'stripe'; paymentToken: string }) => { const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user; await resource?.addPaymentMethod(context); onSuccess(); @@ -33,28 +33,28 @@ const AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void }; return ( - - - - + - + ); }); const RemoveScreen = ({ - paymentSource, + paymentMethod, revalidate, }: { - paymentSource: BillingPaymentMethodResource; + paymentMethod: BillingPaymentMethodResource; revalidate: () => void; }) => { const { close } = useActionContext(); @@ -63,15 +63,15 @@ const RemoveScreen = ({ const { organization } = useOrganization(); const localizationRoot = useSubscriberTypeLocalizationRoot(); const ref = useRef( - `${paymentSource.paymentType === 'card' ? paymentSource.cardType : paymentSource.paymentType} ${paymentSource.paymentType === 'card' ? `⋯ ${paymentSource.last4}` : '-'}`, + `${paymentMethod.paymentType === 'card' ? paymentMethod.cardType : paymentMethod.paymentType} ${paymentMethod.paymentType === 'card' ? `⋯ ${paymentMethod.last4}` : '-'}`, ); if (!ref.current) { return null; } - const removePaymentSource = async () => { - await paymentSource + const removePaymentMethod = async () => { + await paymentMethod .remove({ orgId: subscriberType === 'organization' ? organization?.id : undefined }) .then(revalidate) .catch((error: Error) => { @@ -97,14 +97,14 @@ const RemoveScreen = ({ paymentSource: ref.current, }, )} - deleteResource={removePaymentSource} + deleteResource={removePaymentMethod} onSuccess={close} onReset={close} /> ); }; -export const PaymentSources = withCardStateProvider(() => { +export const PaymentMethods = withCardStateProvider(() => { const clerk = useClerk(); const subscriberType = useSubscriberTypeContext(); const localizationRoot = useSubscriberTypeLocalizationRoot(); @@ -112,7 +112,7 @@ export const PaymentSources = withCardStateProvider(() => { const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods(); - const sortedPaymentSources = useMemo( + const sortedPaymentMethods = useMemo( () => paymentMethods.sort((a, b) => (a.isDefault && !b.isDefault ? -1 : 1)), [paymentMethods], ); @@ -121,7 +121,7 @@ export const PaymentSources = withCardStateProvider(() => { return null; } - if (__BUILD_DISABLE_RHC__ && sortedPaymentSources.length === 0) { + if (__BUILD_DISABLE_RHC__ && sortedPaymentMethods.length === 0) { return null; } @@ -146,20 +146,20 @@ export const PaymentSources = withCardStateProvider(() => { ) : ( <> - {sortedPaymentSources.map(paymentSource => ( - + {sortedPaymentMethods.map(paymentMethod => ( + - - + - + @@ -189,11 +189,11 @@ export const PaymentSources = withCardStateProvider(() => { ); }); -const PaymentSourceMenu = ({ - paymentSource, +const PaymentMethodMenu = ({ + paymentMethod, revalidate, }: { - paymentSource: BillingPaymentMethodResource; + paymentMethod: BillingPaymentMethodResource; revalidate: () => void; }) => { const { open } = useActionContext(); @@ -206,17 +206,17 @@ const PaymentSourceMenu = ({ { label: localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.actionLabel__remove`), isDestructive: true, - onClick: () => open(`remove-${paymentSource.id}`), - isDisabled: !paymentSource.isRemovable, + onClick: () => open(`remove-${paymentMethod.id}`), + isDisabled: !paymentMethod.isRemovable, }, ]; - if (!paymentSource.isDefault) { + if (!paymentMethod.isDefault) { actions.unshift({ label: localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.actionLabel__default`), isDestructive: false, onClick: () => { - paymentSource + paymentMethod .makeDefault({ orgId: subscriberType === 'organization' ? organization?.id : undefined }) .then(revalidate) .catch((error: Error) => { diff --git a/packages/clerk-js/src/ui/components/PaymentSources/TestPaymentSource.tsx b/packages/clerk-js/src/ui/components/PaymentMethods/TestPaymentMethod.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/PaymentSources/TestPaymentSource.tsx rename to packages/clerk-js/src/ui/components/PaymentMethods/TestPaymentMethod.tsx index 66a9968ac29..6a58e252b27 100644 --- a/packages/clerk-js/src/ui/components/PaymentSources/TestPaymentSource.tsx +++ b/packages/clerk-js/src/ui/components/PaymentMethods/TestPaymentMethod.tsx @@ -2,7 +2,7 @@ import { LineItems } from '@/ui/elements/LineItems'; import { Box, localizationKeys, Text, useLocalizations } from '../../customizables'; -export const TestPaymentSource = () => { +export const TestPaymentMethod = () => { const { t } = useLocalizations(); return ( { 'userProfile.billingPage.subscriptionsListSection.actionLabel__manageSubscription', )} /> - + diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx index 5a402604a59..d39d173ba34 100644 --- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx +++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx @@ -123,15 +123,15 @@ export const usePlansContext = () => { // Invalidates cache but does not fetch immediately const { revalidate: revalidateStatements } = useStatements({ mode: 'cache' }); - const { revalidate: revalidatePaymentSources } = usePaymentMethods(); + const { revalidate: revalidatePaymentMethods } = usePaymentMethods(); const revalidateAll = useCallback(() => { // Revalidate the plans and subscriptions void revalidateSubscriptions(); void revalidatePlans(); void revalidateStatements(); - void revalidatePaymentSources(); - }, [revalidateSubscriptions, revalidatePlans, revalidateStatements, revalidatePaymentSources]); + void revalidatePaymentMethods(); + }, [revalidateSubscriptions, revalidatePlans, revalidateStatements, revalidatePaymentMethods]); // should the default plan be shown as active const isDefaultPlanImplicitlyActiveOrUpcoming = useMemo(() => { From 34a99d1796c2f6777640b761060eb5a1ac5c3c52 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Thu, 9 Oct 2025 19:03:27 +0300 Subject: [PATCH 2/2] changeset --- .changeset/wet-cameras-sneeze.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .changeset/wet-cameras-sneeze.md diff --git a/.changeset/wet-cameras-sneeze.md b/.changeset/wet-cameras-sneeze.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/wet-cameras-sneeze.md @@ -0,0 +1,2 @@ +--- +---