diff --git a/.changeset/brave-kiwis-slide.md b/.changeset/brave-kiwis-slide.md new file mode 100644 index 00000000000..fa912af169f --- /dev/null +++ b/.changeset/brave-kiwis-slide.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': minor +'@clerk/types': minor +--- + +[Billing Beta] Rename payment source descriptors to use "payment method". diff --git a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx index 7c32781972f..cffb37817f4 100644 --- a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx +++ b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx @@ -9,17 +9,17 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym sx={{ overflow: 'hidden' }} gap={2} align='baseline' - elementDescriptor={descriptors.paymentSourceRow} + elementDescriptor={descriptors.paymentMethodRow} > ({ alignSelf: 'center', color: t.colors.$colorMutedForeground })} - elementDescriptor={descriptors.paymentSourceRowIcon} + elementDescriptor={descriptors.paymentMethodRowIcon} /> ({ color: t.colors.$colorForeground, textTransform: 'capitalize' })} truncate - elementDescriptor={descriptors.paymentSourceRowType} + elementDescriptor={descriptors.paymentMethodRowType} > {/* TODO(@COMMERCE): Localize this */} {paymentSource.paymentType === 'card' ? paymentSource.cardType : paymentSource.paymentType} @@ -28,21 +28,21 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym sx={t => ({ color: t.colors.$colorMutedForeground })} variant='caption' truncate - elementDescriptor={descriptors.paymentSourceRowValue} + elementDescriptor={descriptors.paymentMethodRowValue} > {paymentSource.paymentType === 'card' ? `⋯ ${paymentSource.last4}` : null} {paymentSource.isDefault && ( )} {paymentSource.status === 'expired' && ( diff --git a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx index c9f0a2998cb..85b9ed17b60 100644 --- a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx +++ b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx @@ -129,7 +129,7 @@ export const PaymentSources = withCardStateProvider(() => { ({ flex: 1, borderTopWidth: t.borderWidths.$normal, @@ -139,7 +139,7 @@ export const PaymentSources = withCardStateProvider(() => { > {isLoading ? ( @@ -148,7 +148,7 @@ export const PaymentSources = withCardStateProvider(() => { <> {sortedPaymentSources.map(paymentSource => ( - + { <> diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts index 2500d89ccf9..a48d622df94 100644 --- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts +++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts @@ -360,12 +360,12 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([ 'selectOptionsContainer', 'selectOption', - 'paymentSourceRow', - 'paymentSourceRowIcon', - 'paymentSourceRowText', - 'paymentSourceRowType', - 'paymentSourceRowValue', - 'paymentSourceRowBadge', + 'paymentMethodRow', + 'paymentMethodRowIcon', + 'paymentMethodRowText', + 'paymentMethodRowType', + 'paymentMethodRowValue', + 'paymentMethodRowBadge', 'statementRoot', 'statementHeader', diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts index a3d053f67f8..4330d90b008 100644 --- a/packages/types/src/appearance.ts +++ b/packages/types/src/appearance.ts @@ -493,12 +493,12 @@ export type ElementsConfig = { selectOptionsContainer: WithOptions; selectOption: WithOptions; - paymentSourceRow: WithOptions; - paymentSourceRowIcon: WithOptions; - paymentSourceRowText: WithOptions; - paymentSourceRowType: WithOptions; - paymentSourceRowValue: WithOptions; - paymentSourceRowBadge: WithOptions<'default' | 'expired'>; + paymentMethodRow: WithOptions; + paymentMethodRowIcon: WithOptions; + paymentMethodRowText: WithOptions; + paymentMethodRowType: WithOptions; + paymentMethodRowValue: WithOptions; + paymentMethodRowBadge: WithOptions<'default' | 'expired'>; statementRoot: WithOptions; statementHeader: WithOptions; diff --git a/packages/types/src/elementIds.ts b/packages/types/src/elementIds.ts index 5732b79675c..50ba96df7f5 100644 --- a/packages/types/src/elementIds.ts +++ b/packages/types/src/elementIds.ts @@ -43,7 +43,7 @@ export type ProfileSectionId = | 'organizationDomains' | 'manageVerifiedDomains' | 'subscriptionsList' - | 'paymentSources'; + | 'paymentMethods'; export type ProfilePageId = 'account' | 'security' | 'organizationGeneral' | 'organizationMembers' | 'billing'; export type UserPreviewId = 'userButton' | 'personalWorkspace';