chore(clerk-js,types): Rename descriptors from payment source to method (#6951)

Author: panteliselef

.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". 

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}
     >
       <Icon
         icon={paymentSource.paymentType === 'card' ? CreditCard : GenericPayment}
         sx={t => ({ alignSelf: 'center', color: t.colors.$colorMutedForeground })}
-        elementDescriptor={descriptors.paymentSourceRowIcon}
+        elementDescriptor={descriptors.paymentMethodRowIcon}
       />
       <Text
         sx={t => ({ 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}
       </Text>
       {paymentSource.isDefault && (
         <Badge
-          elementDescriptor={descriptors.paymentSourceRowBadge}
-          elementId={descriptors.paymentSourceRowBadge.setId('default')}
+          elementDescriptor={descriptors.paymentMethodRowBadge}
+          elementId={descriptors.paymentMethodRowBadge.setId('default')}
           localizationKey={localizationKeys('badge__default')}
         />
       )}
       {paymentSource.status === 'expired' && (
         <Badge
-          elementDescriptor={descriptors.paymentSourceRowBadge}
-          elementId={descriptors.paymentSourceRowBadge.setId('expired')}
+          elementDescriptor={descriptors.paymentMethodRowBadge}
+          elementId={descriptors.paymentMethodRowBadge.setId('expired')}
           colorScheme='danger'
           localizationKey={localizationKeys('badge__expired')}
         />

packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx

@@ -129,7 +129,7 @@ export const PaymentSources = withCardStateProvider(() => {
     <ProfileSection.Root
       title={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.title`)}
       centered={false}
-      id='paymentSources'
+      id='paymentMethods'
       sx={t => ({
         flex: 1,
         borderTopWidth: t.borderWidths.$normal,
@@ -139,7 +139,7 @@ export const PaymentSources = withCardStateProvider(() => {
     >
       <Action.Root>
         <ProfileSection.ItemList
-          id='paymentSources'
+          id='paymentMethods'
           disableAnimation
         >
           {isLoading ? (
@@ -148,7 +148,7 @@ export const PaymentSources = withCardStateProvider(() => {
             <>
               {sortedPaymentSources.map(paymentSource => (
                 <Fragment key={paymentSource.id}>
-                  <ProfileSection.Item id='paymentSources'>
+                  <ProfileSection.Item id='paymentMethods'>
                     <PaymentSourceRow paymentSource={paymentSource} />
                     <PaymentSourceMenu
                       paymentSource={paymentSource}
@@ -170,7 +170,7 @@ export const PaymentSources = withCardStateProvider(() => {
                 <>
                   <Action.Trigger value='add'>
                     <ProfileSection.ArrowButton
-                      id='paymentSources'
+                      id='paymentMethods'
                       localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
                     />
                   </Action.Trigger>

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',

packages/types/src/appearance.ts

@@ -493,12 +493,12 @@ export type ElementsConfig = {
   selectOptionsContainer: WithOptions<SelectId>;
   selectOption: WithOptions<SelectId>;
 
-  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;

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';