feat(clerk-js,types): Add subscription listing to UP and OP (#5658)

Co-authored-by: Keiran Flanigan <keiran@aeliox.com>

Author: alexcarpenter

.changeset/red-peaches-fold.md

@@ -0,0 +1,14 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Add `<SubscriptionsList />` to both UserProfile and OrgProfile components.
+
+Introduce experimental method for opening `<SubscriptionDetails />` component.
+
+```tsx
+clerk.__experimental_openSubscriptionDetails(...)
+```

packages/clerk-js/bundlewatch.config.json

@@ -1,7 +1,7 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "593kB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "74.2KB" },
+    { "path": "./dist/clerk.js", "maxSize": "594kB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "75KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "102KB" },
     { "path": "./dist/vendors*.js", "maxSize": "39KB" },

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

@@ -17,6 +17,7 @@ import type {
   __experimental_CheckoutProps,
   __experimental_CommerceNamespace,
   __experimental_PricingTableProps,
+  __experimental_SubscriptionDetailsProps,
   __internal_ComponentNavigationContext,
   __internal_UserVerificationModalProps,
   AuthenticateWithCoinbaseWalletParams,
@@ -550,6 +551,18 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('checkout'));
   };
 
+  public __internal_openSubscriptionDetails = (props?: __experimental_SubscriptionDetailsProps): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls
+      .ensureMounted({ preloadHint: 'SubscriptionDetails' })
+      .then(controls => controls.openDrawer('subscriptionDetails', props || {}));
+  };
+
+  public __internal_closeSubscriptionDetails = (): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('subscriptionDetails'));
+  };
+
   public __internal_openReverification = (props?: __internal_UserVerificationModalProps): void => {
     this.assertComponentsReady(this.#componentControls);
     if (noUserExists(this)) {

packages/clerk-js/src/ui/Components.tsx

@@ -1,6 +1,7 @@
 import { createDeferredPromise } from '@clerk/shared/utils';
 import type {
   __experimental_CheckoutProps,
+  __experimental_SubscriptionDetailsProps,
   __internal_UserVerificationProps,
   Appearance,
   Clerk,
@@ -33,6 +34,7 @@ import {
   preloadComponent,
   SignInModal,
   SignUpModal,
+  SubscriptionDetails,
   UserProfileModal,
   UserVerificationModal,
   WaitlistModal,
@@ -107,12 +109,16 @@ export type ComponentControls = {
       notify?: boolean;
     },
   ) => void;
-  openDrawer: <T extends 'checkout'>(
+  openDrawer: <T extends 'checkout' | 'subscriptionDetails'>(
     drawer: T,
-    props: T extends 'checkout' ? __experimental_CheckoutProps : never,
+    props: T extends 'checkout'
+      ? __experimental_CheckoutProps
+      : T extends 'subscriptionDetails'
+        ? __experimental_SubscriptionDetailsProps
+        : never,
   ) => void;
   closeDrawer: (
-    drawer: 'checkout',
+    drawer: 'checkout' | 'subscriptionDetails',
     options?: {
       notify?: boolean;
     },
@@ -153,6 +159,10 @@ interface ComponentsState {
     open: false;
     props: null | __experimental_CheckoutProps;
   };
+  subscriptionDetailsDrawer: {
+    open: false;
+    props: null | __experimental_SubscriptionDetailsProps;
+  };
   nodes: Map<HTMLDivElement, HtmlNodeOptions>;
   impersonationFab: boolean;
 }
@@ -238,6 +248,10 @@ const Components = (props: ComponentsProps) => {
       open: false,
       props: null,
     },
+    subscriptionDetailsDrawer: {
+      open: false,
+      props: null,
+    },
     nodes: new Map(),
     impersonationFab: false,
   });
@@ -253,6 +267,7 @@ const Components = (props: ComponentsProps) => {
     waitlistModal,
     blankCaptchaModal,
     checkoutDrawer,
+    subscriptionDetailsDrawer,
     nodes,
   } = state;
 
@@ -548,6 +563,25 @@ const Components = (props: ComponentsProps) => {
     </LazyDrawerRenderer>
   );
 
+  const mountedSubscriptionDetailDrawer = subscriptionDetailsDrawer.props && (
+    <LazyDrawerRenderer
+      globalAppearance={state.appearance}
+      appearanceKey={'subscriptionDetails' as any}
+      componentAppearance={{}}
+      flowName={'subscriptionDetails'}
+      open={subscriptionDetailsDrawer.open}
+      onOpenChange={() => componentsControls.closeDrawer('subscriptionDetails')}
+      componentName={'SubscriptionDetails'}
+      portalId={subscriptionDetailsDrawer.props.portalId}
+    >
+      <SubscriptionDetails
+        {...subscriptionDetailsDrawer.props}
+        subscriberType={subscriptionDetailsDrawer.props.subscriberType || 'user'}
+        onSubscriptionCancel={subscriptionDetailsDrawer.props.onSubscriptionCancel || (() => {})}
+      />
+    </LazyDrawerRenderer>
+  );
+
   return (
     <Suspense fallback={''}>
       <LazyProviders
@@ -579,7 +613,7 @@ const Components = (props: ComponentsProps) => {
         {waitlistModal && mountedWaitlistModal}
         {blankCaptchaModal && mountedBlankCaptchaModal}
         {mountedCheckoutDrawer}
-
+        {mountedSubscriptionDetailDrawer}
         {state.impersonationFab && (
           <LazyImpersonationFabProvider globalAppearance={state.appearance}>
             <ImpersonationFab />

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx

@@ -5,7 +5,7 @@ import {
   usePlansContext,
   withPlans,
 } from '../../contexts';
-import { Col, descriptors, localizationKeys } from '../../customizables';
+import { Col, descriptors, Heading, Hr, localizationKeys } from '../../customizables';
 import {
   Card,
   Header,
@@ -21,6 +21,7 @@ import { useTabState } from '../../hooks/useTabState';
 import { InvoicesList } from '../Invoices';
 import { __experimental_PaymentSources } from '../PaymentSources/PaymentSources';
 import { __experimental_PricingTable } from '../PricingTable';
+import { SubscriptionsList } from '../Subscriptions';
 
 const orgTabMap = {
   0: 'plans',
@@ -75,7 +76,19 @@ export const OrganizationBillingPage = withPlans(
               />
             </TabsList>
             <TabPanels>
-              <TabPanel sx={{ width: '100%' }}>
+              <TabPanel sx={{ width: '100%', flexDirection: 'column' }}>
+                {subscriptions.length > 0 && (
+                  <>
+                    <SubscriptionsList />
+                    <Hr sx={t => ({ marginBlock: t.space.$6 })} />
+                    <Heading
+                      textVariant='h3'
+                      as='h2'
+                      localizationKey='Available Plans'
+                      sx={t => ({ marginBlockEnd: t.space.$4, fontWeight: t.fontWeights.$medium })}
+                    />
+                  </>
+                )}
                 <__experimental_PricingTableContext.Provider
                   value={{ componentName: 'PricingTable', mode: 'modal', subscriberType: 'org' }}
                 >

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

@@ -161,6 +161,7 @@ const PaymentSourceMenu = ({
       label: localizationKeys('userProfile.__experimental_billingPage.paymentSourcesSection.actionLabel__remove'),
       isDestructive: true,
       onClick: () => open(`remove-${paymentSource.id}`),
+      isDisabled: paymentSource.isDefault,
     },
   ];
 
@@ -176,6 +177,7 @@ const PaymentSourceMenu = ({
             handleError(error, [], card.setError);
           });
       },
+      isDisabled: false,
     });
   }
 

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

@@ -2,17 +2,14 @@ import { useClerk } from '@clerk/shared/react';
 import type {
   __experimental_CommercePlanResource,
   __experimental_CommerceSubscriptionPlanPeriod,
-  __experimental_CommerceSubscriptionResource,
   __experimental_PricingTableProps,
 } from '@clerk/types';
 import { useState } from 'react';
 
 import { PROFILE_CARD_SCROLLBOX_ID } from '../../constants';
 import { usePlansContext, usePricingTableContext } from '../../contexts';
-import { AppearanceProvider } from '../../customizables';
 import { PricingTableDefault } from './PricingTableDefault';
 import { PricingTableMatrix } from './PricingTableMatrix';
-import { SubscriptionDetailDrawer } from './SubscriptionDetailDrawer';
 
 const PricingTable = (props: __experimental_PricingTableProps) => {
   const clerk = useClerk();
@@ -22,9 +19,6 @@ const PricingTable = (props: __experimental_PricingTableProps) => {
   const { plans, revalidate, activeOrUpcomingSubscription } = usePlansContext();
 
   const [planPeriod, setPlanPeriod] = useState<__experimental_CommerceSubscriptionPlanPeriod>('month');
-  const [detailSubscription, setDetailSubscription] = useState<__experimental_CommerceSubscriptionResource>();
-
-  const [showSubscriptionDetailDrawer, setShowSubscriptionDetailDrawer] = useState(false);
 
   const selectPlan = (plan: __experimental_CommercePlanResource) => {
     if (!clerk.isSignedIn) {
@@ -34,8 +28,12 @@ const PricingTable = (props: __experimental_PricingTableProps) => {
     const subscription = activeOrUpcomingSubscription(plan);
 
     if (subscription && !subscription.canceledAt) {
-      setDetailSubscription(subscription);
-      setShowSubscriptionDetailDrawer(true);
+      clerk.__internal_openSubscriptionDetails({
+        subscription,
+        subscriberType,
+        onSubscriptionCancel: onSubscriptionChange,
+        portalId: mode === 'modal' ? PROFILE_CARD_SCROLLBOX_ID : undefined,
+      });
     } else {
       clerk.__internal_openCheckout({
         planId: plan.id,
@@ -71,24 +69,6 @@ const PricingTable = (props: __experimental_PricingTableProps) => {
           props={props}
         />
       )}
-
-      <AppearanceProvider
-        appearanceKey='checkout'
-        appearance={props.checkoutProps?.appearance}
-      >
-        <SubscriptionDetailDrawer
-          isOpen={showSubscriptionDetailDrawer}
-          setIsOpen={setShowSubscriptionDetailDrawer}
-          subscription={detailSubscription}
-          subscriberType={subscriberType}
-          setPlanPeriod={setPlanPeriod}
-          strategy={mode === 'mounted' ? 'fixed' : 'absolute'}
-          portalProps={{
-            id: mode === 'modal' ? PROFILE_CARD_SCROLLBOX_ID : undefined,
-          }}
-          onSubscriptionCancel={onSubscriptionChange}
-        />
-      </AppearanceProvider>
     </>
   );
 };