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