chore(clerk-js): Split <PlanDetails/> and <SubcriptionDetails/>

.changeset/tangy-toes-dress.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Extract `SubscriptionDetails`, into its own internal component, out of existing (also internal) `PlanDetails` component.

packages/clerk-js/bundlewatch.config.json

@@ -1,11 +1,11 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "614kB" },
+    { "path": "./dist/clerk.js", "maxSize": "616kB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "72.2KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "110KB" },
-    { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "113.72KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "111KB" },
+    { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "115KB" },
     { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },

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

@@ -21,6 +21,7 @@ import type {
   __internal_ComponentNavigationContext,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
+  __internal_SubscriptionDetailsProps,
   __internal_UserVerificationModalProps,
   APIKeysNamespace,
   APIKeysProps,
@@ -602,7 +603,7 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('checkout'));
   };
 
-  public __internal_openPlanDetails = (props?: __internal_PlanDetailsProps): void => {
+  public __internal_openPlanDetails = (props: __internal_PlanDetailsProps): void => {
     this.assertComponentsReady(this.#componentControls);
     if (disabledBillingFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
@@ -615,13 +616,27 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls
       .ensureMounted({ preloadHint: 'PlanDetails' })
       .then(controls => controls.openDrawer('planDetails', props || {}));
+
+    this.telemetry?.record(eventPrebuiltComponentOpened(`PlanDetails`, props));
   };
 
   public __internal_closePlanDetails = (): void => {
     this.assertComponentsReady(this.#componentControls);
     void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('planDetails'));
   };
 
+  public __internal_openSubscriptionDetails = (props?: __internal_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

@@ -2,6 +2,7 @@ import { createDeferredPromise } from '@clerk/shared/utils';
 import type {
   __internal_CheckoutProps,
   __internal_PlanDetailsProps,
+  __internal_SubscriptionDetailsProps,
   __internal_UserVerificationProps,
   Appearance,
   Clerk,
@@ -36,7 +37,7 @@ import {
   UserVerificationModal,
   WaitlistModal,
 } from './lazyModules/components';
-import { MountedCheckoutDrawer, MountedPlanDetailDrawer } from './lazyModules/drawers';
+import { MountedCheckoutDrawer, MountedPlanDetailDrawer, MountedSubscriptionDetailDrawer } from './lazyModules/drawers';
 import {
   LazyComponentRenderer,
   LazyImpersonationFabProvider,
@@ -106,16 +107,18 @@ export type ComponentControls = {
       notify?: boolean;
     },
   ) => void;
-  openDrawer: <T extends 'checkout' | 'planDetails'>(
+  openDrawer: <T extends 'checkout' | 'planDetails' | 'subscriptionDetails'>(
     drawer: T,
     props: T extends 'checkout'
       ? __internal_CheckoutProps
       : T extends 'planDetails'
         ? __internal_PlanDetailsProps
-        : never,
+        : T extends 'subscriptionDetails'
+          ? __internal_SubscriptionDetailsProps
+          : never,
   ) => void;
   closeDrawer: (
-    drawer: 'checkout' | 'planDetails',
+    drawer: 'checkout' | 'planDetails' | 'subscriptionDetails',
     options?: {
       notify?: boolean;
     },
@@ -160,6 +163,10 @@ interface ComponentsState {
     open: false;
     props: null | __internal_PlanDetailsProps;
   };
+  subscriptionDetailsDrawer: {
+    open: false;
+    props: null | __internal_SubscriptionDetailsProps;
+  };
   nodes: Map<HTMLDivElement, HtmlNodeOptions>;
   impersonationFab: boolean;
 }
@@ -249,6 +256,10 @@ const Components = (props: ComponentsProps) => {
       open: false,
       props: null,
     },
+    subscriptionDetailsDrawer: {
+      open: false,
+      props: null,
+    },
     nodes: new Map(),
     impersonationFab: false,
   });
@@ -265,6 +276,7 @@ const Components = (props: ComponentsProps) => {
     blankCaptchaModal,
     checkoutDrawer,
     planDetailsDrawer,
+    subscriptionDetailsDrawer,
     nodes,
   } = state;
 
@@ -588,6 +600,12 @@ const Components = (props: ComponentsProps) => {
           onOpenChange={() => componentsControls.closeDrawer('planDetails')}
         />
 
+        <MountedSubscriptionDetailDrawer
+          appearance={state.appearance}
+          subscriptionDetailsDrawer={subscriptionDetailsDrawer}
+          onOpenChange={() => componentsControls.closeDrawer('subscriptionDetails')}
+        />
+
         {state.impersonationFab && (
           <LazyImpersonationFabProvider globalAppearance={state.appearance}>
             <ImpersonationFab />