chore(clerk-js,types): Use is_removable flag on payment sources (#6033)

Author: aeliox

.changeset/happy-bees-post.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Use the `is_removable` flag on a payment source to determine if it can be removed.

packages/clerk-js/src/core/resources/CommercePaymentSource.ts

@@ -17,6 +17,7 @@ export class CommercePaymentSource extends BaseResource implements CommercePayme
  paymentMethod!: string;
  cardType!: string;
  isDefault!: boolean;
+ isRemovable!: boolean;
  status!: CommercePaymentSourceStatus;
  walletType: string | undefined;
 
@@ -35,6 +36,7 @@ export class CommercePaymentSource extends BaseResource implements CommercePayme
  this.paymentMethod = data.payment_method;
  this.cardType = data.card_type;
  this.isDefault = data.is_default;
+ this.isRemovable = data.is_removable;
  this.status = data.status;
  this.walletType = data.wallet_type ?? undefined;
 

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

@@ -4,7 +4,7 @@ import type { SetupIntent } from '@stripe/stripe-js';
 import { Fragment, useCallback, useMemo, useRef } from 'react';
 
 import { RemoveResourceForm } from '../../common';
-import { usePaymentSources, useSubscriberTypeContext, useSubscriptions } from '../../contexts';
+import { usePaymentSources, useSubscriberTypeContext } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { FullHeightLoader, ProfileSection, ThreeDotsMenu, useCardState, withCardStateProvider } from '../../elements';
 import { Action } from '../../elements/Action';
@@ -174,14 +174,13 @@ const PaymentSourceMenu = ({
  const card = useCardState();
  const { organization } = useOrganization();
  const subscriberType = useSubscriberTypeContext();
- const { data: subscriptions } = useSubscriptions();
 
  const actions = [
  {
  label: localizationKeys('userProfile.billingPage.paymentSourcesSection.actionLabel__remove'),
  isDestructive: true,
  onClick: () => open(`remove-${paymentSource.id}`),
- isDisabled: paymentSource.isDefault && subscriptions.some(s => !s.plan.isDefault),
+ isDisabled: !paymentSource.isRemovable,
  },
  ];
 

packages/types/src/commerce.ts

@@ -96,6 +96,7 @@ export interface CommercePaymentSourceResource extends ClerkResource {
  paymentMethod: string;
  cardType: string;
  isDefault: boolean;
+ isRemovable: boolean;
  status: CommercePaymentSourceStatus;
  walletType: string | undefined;
  remove: (params?: RemovePaymentSourceParams) => Promise<DeletedObjectResource>;

packages/types/src/json.ts

@@ -638,6 +638,7 @@ export interface CommercePaymentSourceJSON extends ClerkResourceJSON {
  payment_method: string;
  card_type: string;
  is_default: boolean;
+ is_removable: boolean;
  status: CommercePaymentSourceStatus;
  wallet_type: string | null;
 }