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 />

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

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

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

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

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

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

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