From 52e2d6fc89b6faf5d058f0860ccd139bac06b085 Mon Sep 17 00:00:00 2001 From: Keiran Flanigan Date: Mon, 28 Apr 2025 12:51:13 -0700 Subject: [PATCH 1/6] chore(clerk-js,types): Rename SubscriptionDetails to PlanDetails --- packages/clerk-js/src/core/clerk.ts | 14 ++++----- packages/clerk-js/src/core/warnings.ts | 2 +- packages/clerk-js/src/ui/Components.tsx | 22 +++++++------- .../PlanDetails.tsx} | 10 +++---- .../src/ui/components/Plans/index.tsx | 1 + .../components/PricingTable/FreePlanRow.tsx | 2 +- .../PricingTable/PricingTableDefault.tsx | 2 +- .../src/ui/components/Subscriptions/index.tsx | 1 - .../src/ui/contexts/components/Plans.tsx | 2 +- .../elements/contexts/FlowMetadataContext.tsx | 2 +- .../MountedSubscriptionDetailDrawer.tsx | 30 +++++++++---------- .../clerk-js/src/ui/lazyModules/components.ts | 9 +++--- packages/clerk-js/src/ui/types.ts | 4 +-- packages/react/src/isomorphicClerk.ts | 20 ++++++------- packages/types/src/clerk.ts | 10 +++---- 15 files changed, 65 insertions(+), 66 deletions(-) rename packages/clerk-js/src/ui/components/{Subscriptions/SubscriptionDetails.tsx => Plans/PlanDetails.tsx} (98%) create mode 100644 packages/clerk-js/src/ui/components/Plans/index.tsx diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index fa10ae89f09..1e7e5f45841 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -17,7 +17,7 @@ import type { __experimental_CheckoutProps, __experimental_CommerceNamespace, __experimental_PricingTableProps, - __experimental_SubscriptionDetailsProps, + __experimental_PlanDetailsProps, __internal_ComponentNavigationContext, __internal_UserVerificationModalProps, AuthenticateWithCoinbaseWalletParams, @@ -564,24 +564,24 @@ export class Clerk implements ClerkInterface { void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('checkout')); }; - public __internal_openSubscriptionDetails = (props?: __experimental_SubscriptionDetailsProps): void => { + public __internal_openPlanDetails = (props?: __experimental_PlanDetailsProps): void => { this.assertComponentsReady(this.#componentControls); if (disabledBillingFeature(this, this.environment)) { if (this.#instanceType === 'development') { - throw new ClerkRuntimeError(warnings.cannotRenderAnyCommerceComponent('SubscriptionDetails'), { + throw new ClerkRuntimeError(warnings.cannotRenderAnyCommerceComponent('PlanDetails'), { code: CANNOT_RENDER_BILLING_DISABLED_ERROR_CODE, }); } return; } void this.#componentControls - .ensureMounted({ preloadHint: 'SubscriptionDetails' }) - .then(controls => controls.openDrawer('subscriptionDetails', props || {})); + .ensureMounted({ preloadHint: 'PlanDetails' }) + .then(controls => controls.openDrawer('planDetails', props || {})); }; - public __internal_closeSubscriptionDetails = (): void => { + public __internal_closePlanDetails = (): void => { this.assertComponentsReady(this.#componentControls); - void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('subscriptionDetails')); + void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('planDetails')); }; public __internal_openReverification = (props?: __internal_UserVerificationModalProps): void => { diff --git a/packages/clerk-js/src/core/warnings.ts b/packages/clerk-js/src/core/warnings.ts index 862668ae907..35ab2dcacb8 100644 --- a/packages/clerk-js/src/core/warnings.ts +++ b/packages/clerk-js/src/core/warnings.ts @@ -11,7 +11,7 @@ const createMessageForDisabledOrganizations = ( `The <${componentName}/> cannot be rendered when the feature is turned off. Visit 'dashboard.clerk.com' to enable the feature. Since the feature is turned off, this is no-op.`, ); }; -const createMessageForDisabledCommerce = (componentName: 'PricingTable' | 'Checkout' | 'SubscriptionDetails') => { +const createMessageForDisabledCommerce = (componentName: 'PricingTable' | 'Checkout' | 'PlanDetails') => { return formatWarning( `The <${componentName}/> component cannot be rendered when billing is disabled. Visit 'https://dashboard.clerk.com/last-active?path=billing/settings' to follow the necessary steps to enable commerce. Since commerce is disabled, this is no-op.`, ); diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx index 156b0d30b09..f0ffd811e92 100644 --- a/packages/clerk-js/src/ui/Components.tsx +++ b/packages/clerk-js/src/ui/Components.tsx @@ -1,7 +1,7 @@ import { createDeferredPromise } from '@clerk/shared/utils'; import type { __experimental_CheckoutProps, - __experimental_SubscriptionDetailsProps, + __experimental_PlanDetailsProps, __internal_UserVerificationProps, Appearance, Clerk, @@ -107,16 +107,16 @@ export type ComponentControls = { notify?: boolean; }, ) => void; - openDrawer: ( + openDrawer: ( drawer: T, props: T extends 'checkout' ? __experimental_CheckoutProps - : T extends 'subscriptionDetails' - ? __experimental_SubscriptionDetailsProps + : T extends 'planDetails' + ? __experimental_PlanDetailsProps : never, ) => void; closeDrawer: ( - drawer: 'checkout' | 'subscriptionDetails', + drawer: 'checkout' | 'planDetails', options?: { notify?: boolean; }, @@ -157,9 +157,9 @@ interface ComponentsState { open: false; props: null | __experimental_CheckoutProps; }; - subscriptionDetailsDrawer: { + planDetailsDrawer: { open: false; - props: null | __experimental_SubscriptionDetailsProps; + props: null | __experimental_PlanDetailsProps; }; nodes: Map; impersonationFab: boolean; @@ -246,7 +246,7 @@ const Components = (props: ComponentsProps) => { open: false, props: null, }, - subscriptionDetailsDrawer: { + planDetailsDrawer: { open: false, props: null, }, @@ -265,7 +265,7 @@ const Components = (props: ComponentsProps) => { waitlistModal, blankCaptchaModal, checkoutDrawer, - subscriptionDetailsDrawer, + planDetailsDrawer, nodes, } = state; @@ -580,8 +580,8 @@ const Components = (props: ComponentsProps) => { componentsControls.closeDrawer('subscriptionDetails')} + planDetailsDrawer={planDetailsDrawer} + onOpenChange={() => componentsControls.closeDrawer('planDetails')} /> {state.impersonationFab && ( diff --git a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionDetails.tsx b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/Subscriptions/SubscriptionDetails.tsx rename to packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx index 2aefddd204b..454ec72d047 100644 --- a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionDetails.tsx +++ b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx @@ -3,7 +3,7 @@ import type { __experimental_CommercePlanResource, __experimental_CommerceSubscriptionPlanPeriod, __experimental_CommerceSubscriptionResource, - __experimental_SubscriptionDetailsProps, + __experimental_PlanDetailsProps, ClerkAPIError, ClerkRuntimeError, } from '@clerk/types'; @@ -27,22 +27,22 @@ import { Alert, Avatar, Drawer, SegmentedControl, useDrawerContext } from '../.. import { InformationCircle } from '../../icons'; import { formatDate, handleError } from '../../utils'; -export const SubscriptionDetails = (props: __experimental_SubscriptionDetailsProps) => { +export const PlanDetails = (props: __experimental_PlanDetailsProps) => { return ( - <_SubscriptionDetails {...props} /> + <_PlanDetails {...props} /> ); }; -const _SubscriptionDetails = ({ +const _PlanDetails = ({ plan, onSubscriptionCancel, portalId, planPeriod: _planPeriod = 'month', -}: __experimental_SubscriptionDetailsProps) => { +}: __experimental_PlanDetailsProps) => { const clerk = useClerk(); const { organization } = useOrganization(); const [showConfirmation, setShowConfirmation] = useState(false); diff --git a/packages/clerk-js/src/ui/components/Plans/index.tsx b/packages/clerk-js/src/ui/components/Plans/index.tsx new file mode 100644 index 00000000000..612088fd9aa --- /dev/null +++ b/packages/clerk-js/src/ui/components/Plans/index.tsx @@ -0,0 +1 @@ +export * from './PlanDetails'; diff --git a/packages/clerk-js/src/ui/components/PricingTable/FreePlanRow.tsx b/packages/clerk-js/src/ui/components/PricingTable/FreePlanRow.tsx index 2d9c2b1254f..23ba60a417a 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/FreePlanRow.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/FreePlanRow.tsx @@ -18,7 +18,7 @@ export const FreePlanRow = () => { return; } - clerk.__internal_openSubscriptionDetails({ + clerk.__internal_openPlanDetails({ plan: defaultFreePlan, subscriberType: subscriberType, portalId: diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx index 70f4f4d302c..c34d397a251 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx @@ -116,7 +116,7 @@ function Card(props: CardProps) { const { buttonPropsForPlan } = usePlansContext(); const showPlanDetails = () => { - clerk.__internal_openSubscriptionDetails({ + clerk.__internal_openPlanDetails({ plan, subscriberType, planPeriod, diff --git a/packages/clerk-js/src/ui/components/Subscriptions/index.tsx b/packages/clerk-js/src/ui/components/Subscriptions/index.tsx index 5059745b3a3..15705307b23 100644 --- a/packages/clerk-js/src/ui/components/Subscriptions/index.tsx +++ b/packages/clerk-js/src/ui/components/Subscriptions/index.tsx @@ -1,2 +1 @@ -export * from './SubscriptionDetails'; export * from './SubscriptionsList'; diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx index 2b6bf64126e..5591a0870ce 100644 --- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx +++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx @@ -174,7 +174,7 @@ export const usePlansContext = () => { const subscription = activeOrUpcomingSubscription(plan); if (subscription && !subscription.canceledAt) { - clerk.__internal_openSubscriptionDetails({ + clerk.__internal_openPlanDetails({ plan, subscriberType, onSubscriptionCancel: () => { diff --git a/packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx b/packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx index a2fb5cdbc7c..78a118aa9f9 100644 --- a/packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx +++ b/packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx @@ -16,7 +16,7 @@ type FlowMetadata = { | 'blankCaptcha' | 'waitlist' | 'checkout' - | 'subscriptionDetails'; + | 'planDetails'; part?: | 'start' | 'emailCode' diff --git a/packages/clerk-js/src/ui/lazyModules/MountedSubscriptionDetailDrawer.tsx b/packages/clerk-js/src/ui/lazyModules/MountedSubscriptionDetailDrawer.tsx index d6aded1e802..8e19053914c 100644 --- a/packages/clerk-js/src/ui/lazyModules/MountedSubscriptionDetailDrawer.tsx +++ b/packages/clerk-js/src/ui/lazyModules/MountedSubscriptionDetailDrawer.tsx @@ -1,23 +1,23 @@ import { useUser } from '@clerk/shared/react'; -import type { __experimental_SubscriptionDetailsProps, Appearance } from '@clerk/types'; +import type { __experimental_PlanDetailsProps, Appearance } from '@clerk/types'; -import { SubscriptionDetails } from './components'; +import { PlanDetails } from './components'; import { LazyDrawerRenderer } from './providers'; export function MountedSubscriptionDetailDrawer({ appearance, - subscriptionDetailsDrawer, + planDetailsDrawer, onOpenChange, }: { appearance?: Appearance; onOpenChange: (open: boolean) => void; - subscriptionDetailsDrawer: { + planDetailsDrawer: { open: false; - props: null | __experimental_SubscriptionDetailsProps; + props: null | __experimental_PlanDetailsProps; }; }) { const { user } = useUser(); - if (!subscriptionDetailsDrawer.props) { + if (!planDetailsDrawer.props) { return null; } @@ -27,18 +27,18 @@ export function MountedSubscriptionDetailDrawer({ // Without this, the drawer would not be rendered after a session switch. key={user?.id} globalAppearance={appearance} - appearanceKey={'subscriptionDetails' as any} + appearanceKey={'planDetails' as any} componentAppearance={{}} - flowName={'subscriptionDetails'} - open={subscriptionDetailsDrawer.open} + flowName={'planDetails'} + open={planDetailsDrawer.open} onOpenChange={onOpenChange} - componentName={'SubscriptionDetails'} - portalId={subscriptionDetailsDrawer.props.portalId} + componentName={'PlanDetails'} + portalId={planDetailsDrawer.props.portalId} > - {})} + {})} /> ); diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts index c79286c58e9..9378632fa35 100644 --- a/packages/clerk-js/src/ui/lazyModules/components.ts +++ b/packages/clerk-js/src/ui/lazyModules/components.ts @@ -20,8 +20,7 @@ const componentImportPaths = { PricingTable: () => import(/* webpackChunkName: "pricingTable" */ '../components/PricingTable'), Checkout: () => import(/* webpackChunkName: "checkout" */ '../components/Checkout'), SessionTasks: () => import(/* webpackChunkName: "sessionTasks" */ '../components/SessionTasks'), - SubscriptionDetails: () => - import(/* webpackChunkName: "subscriptionDetails" */ '../components/Subscriptions/SubscriptionDetails'), + PlanDetails: () => import(/* webpackChunkName: "planDetails" */ '../components/Plans'), } as const; export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn }))); @@ -101,8 +100,8 @@ export const Checkout = lazy(() => componentImportPaths.Checkout().then(module => ({ default: module.__experimental_Checkout })), ); -export const SubscriptionDetails = lazy(() => - componentImportPaths.SubscriptionDetails().then(module => ({ default: module.SubscriptionDetails })), +export const PlanDetails = lazy(() => + componentImportPaths.PlanDetails().then(module => ({ default: module.PlanDetails })), ); export const SessionTasks = lazy(() => @@ -135,7 +134,7 @@ export const ClerkComponents = { BlankCaptchaModal, PricingTable, Checkout, - SubscriptionDetails, + PlanDetails, }; export type ClerkComponentName = keyof typeof ClerkComponents; diff --git a/packages/clerk-js/src/ui/types.ts b/packages/clerk-js/src/ui/types.ts index 5fd7a252787..8002eed49f6 100644 --- a/packages/clerk-js/src/ui/types.ts +++ b/packages/clerk-js/src/ui/types.ts @@ -4,7 +4,7 @@ import type { __experimental_CommercePlanResource, __experimental_CommerceSubscriptionResource, __experimental_PricingTableProps, - __experimental_SubscriptionDetailsProps, + __experimental_PlanDetailsProps, __internal_UserVerificationProps, CreateOrganizationProps, GoogleOneTapProps, @@ -49,7 +49,7 @@ export type AvailableComponentProps = | __experimental_PricingTableProps | __experimental_CheckoutProps | __internal_UserVerificationProps - | __experimental_SubscriptionDetailsProps; + | __experimental_PlanDetailsProps; type ComponentMode = 'modal' | 'mounted'; diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts index 6e55c0fc24c..0a8d1c0779e 100644 --- a/packages/react/src/isomorphicClerk.ts +++ b/packages/react/src/isomorphicClerk.ts @@ -6,7 +6,7 @@ import type { __experimental_CheckoutProps, __experimental_CommerceNamespace, __experimental_PricingTableProps, - __experimental_SubscriptionDetailsProps, + __experimental_PlanDetailsProps, __internal_UserVerificationModalProps, __internal_UserVerificationProps, AuthenticateWithCoinbaseWalletParams, @@ -114,7 +114,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { private preopenUserVerification?: null | __internal_UserVerificationProps = null; private preopenSignIn?: null | SignInProps = null; private preopenCheckout?: null | __experimental_CheckoutProps = null; - private preopenSubscriptionDetails?: null | __experimental_SubscriptionDetailsProps = null; + private preopenPlanDetails?: null | __experimental_PlanDetailsProps = null; private preopenSignUp?: null | SignUpProps = null; private preopenUserProfile?: null | UserProfileProps = null; private preopenOrganizationProfile?: null | OrganizationProfileProps = null; @@ -540,8 +540,8 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { clerkjs.__internal_openCheckout(this.preopenCheckout); } - if (this.preopenSubscriptionDetails !== null) { - clerkjs.__internal_openSubscriptionDetails(this.preopenSubscriptionDetails); + if (this.preopenPlanDetails !== null) { + clerkjs.__internal_openPlanDetails(this.preopenPlanDetails); } if (this.preopenSignUp !== null) { @@ -744,19 +744,19 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { } }; - __internal_openSubscriptionDetails = (props?: __experimental_SubscriptionDetailsProps) => { + __internal_openPlanDetails = (props?: __experimental_PlanDetailsProps) => { if (this.clerkjs && this.loaded) { - this.clerkjs.__internal_openSubscriptionDetails(props); + this.clerkjs.__internal_openPlanDetails(props); } else { - this.preopenSubscriptionDetails = props; + this.preopenPlanDetails = props; } }; - __internal_closeSubscriptionDetails = () => { + __internal_closePlanDetails = () => { if (this.clerkjs && this.loaded) { - this.clerkjs.__internal_closeSubscriptionDetails(); + this.clerkjs.__internal_closePlanDetails(); } else { - this.preopenSubscriptionDetails = null; + this.preopenPlanDetails = null; } }; diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index 9920716956c..6889908fcd0 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -218,15 +218,15 @@ export interface Clerk { __internal_closeCheckout: () => void; /** - * Opens the Clerk SubscriptionDetails drawer component in a drawer. + * Opens the Clerk PlanDetails drawer component in a drawer. * @param props Optional subscription details drawer configuration parameters. */ - __internal_openSubscriptionDetails: (props?: __experimental_SubscriptionDetailsProps) => void; + __internal_openPlanDetails: (props?: __experimental_PlanDetailsProps) => void; /** - * Closes the Clerk SubscriptionDetails drawer. + * Closes the Clerk PlanDetails drawer. */ - __internal_closeSubscriptionDetails: () => void; + __internal_closePlanDetails: () => void; /** Opens the Clerk UserVerification component in a modal. * @param props Optional user verification configuration parameters. @@ -1583,7 +1583,7 @@ export type __experimental_CheckoutProps = { portalId?: string; }; -export type __experimental_SubscriptionDetailsProps = { +export type __experimental_PlanDetailsProps = { appearance?: SubscriptionDetailTheme; plan?: __experimental_CommercePlanResource; subscriberType?: __experimental_CommerceSubscriberType; From c3f69a815e073b80b6e8c89a37df72655b9e6ed8 Mon Sep 17 00:00:00 2001 From: Keiran Flanigan Date: Mon, 28 Apr 2025 12:52:44 -0700 Subject: [PATCH 2/6] changeset --- .changeset/cruel-berries-flow.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/cruel-berries-flow.md diff --git a/.changeset/cruel-berries-flow.md b/.changeset/cruel-berries-flow.md new file mode 100644 index 00000000000..0dee4056e16 --- /dev/null +++ b/.changeset/cruel-berries-flow.md @@ -0,0 +1,7 @@ +--- +'@clerk/clerk-js': patch +'@clerk/clerk-react': patch +'@clerk/types': patch +--- + +Renames all instances of `SubscriptionDetails` to `PlanDetails` to better reflect the capabilities, use cases, and params of the component. From 2787b0611d3773718bab12d2a2bb73267bd6c00c Mon Sep 17 00:00:00 2001 From: Keiran Flanigan Date: Mon, 28 Apr 2025 13:05:46 -0700 Subject: [PATCH 3/6] more instances, descriptors --- packages/clerk-js/src/ui/Components.tsx | 4 +- .../src/ui/components/Plans/PlanDetails.tsx | 42 ++++++++--------- .../ui/customizables/elementDescriptors.ts | 44 +++++++++--------- ...Drawer.tsx => MountedPlanDetailDrawer.tsx} | 2 +- .../clerk-js/src/ui/lazyModules/drawers.tsx | 4 +- packages/types/src/appearance.ts | 46 +++++++++---------- packages/types/src/clerk.ts | 4 +- 7 files changed, 73 insertions(+), 73 deletions(-) rename packages/clerk-js/src/ui/lazyModules/{MountedSubscriptionDetailDrawer.tsx => MountedPlanDetailDrawer.tsx} (96%) diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx index f0ffd811e92..fdb327bd0ef 100644 --- a/packages/clerk-js/src/ui/Components.tsx +++ b/packages/clerk-js/src/ui/Components.tsx @@ -37,7 +37,7 @@ import { UserVerificationModal, WaitlistModal, } from './lazyModules/components'; -import { MountedCheckoutDrawer, MountedSubscriptionDetailDrawer } from './lazyModules/drawers'; +import { MountedCheckoutDrawer, MountedPlanDetailDrawer } from './lazyModules/drawers'; import { LazyComponentRenderer, LazyImpersonationFabProvider, @@ -578,7 +578,7 @@ const Components = (props: ComponentsProps) => { onOpenChange={() => componentsControls.closeDrawer('checkout')} /> - componentsControls.closeDrawer('planDetails')} diff --git a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx index 454ec72d047..4844ab05756 100644 --- a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx +++ b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx @@ -134,7 +134,7 @@ const _PlanDetails = ({ {hasFeatures ? ( ({ @@ -156,7 +156,7 @@ const _PlanDetails = ({ {features.map(feature => ( ({ display: 'flex', @@ -173,9 +173,9 @@ const _PlanDetails = ({ imageUrl={feature.avatarUrl} /> ) : null} - + ({ fontWeight: t.fontWeights.$medium, @@ -185,7 +185,7 @@ const _PlanDetails = ({ {feature.description ? ( ({ marginBlockStart: t.space.$0x25, @@ -319,7 +319,7 @@ const Header = React.forwardRef((props, ref) => { return ( ({ width: '100%', padding: t.space.$4, @@ -340,7 +340,7 @@ const Header = React.forwardRef((props, ref) => { {plan.avatarUrl ? ( 40} title={plan.name} initials={plan.name[0]} @@ -353,20 +353,20 @@ const Header = React.forwardRef((props, ref) => { ) : null} {subscription ? ( ({ marginBlockEnd: t.space.$3, })} > {subscription.status === 'active' ? ( ) : ( @@ -380,7 +380,7 @@ const Header = React.forwardRef((props, ref) => { })} > @@ -388,7 +388,7 @@ const Header = React.forwardRef((props, ref) => { {plan.description ? ( @@ -399,7 +399,7 @@ const Header = React.forwardRef((props, ref) => { {plan.amount > 0 ? ( ({ @@ -409,7 +409,7 @@ const Header = React.forwardRef((props, ref) => { > <> @@ -419,7 +419,7 @@ const Header = React.forwardRef((props, ref) => { : plan.amountFormatted} ({ @@ -433,7 +433,7 @@ const Header = React.forwardRef((props, ref) => { /> {plan.annualMonthlyAmount > 0 ? ( ({ width: '100%', @@ -448,14 +448,14 @@ const Header = React.forwardRef((props, ref) => { } > ({ @@ -482,7 +482,7 @@ const Header = React.forwardRef((props, ref) => { {!!subscription && ( ((props, ref) => { {!subscription && plan.annualMonthlyAmount > 0 ? ( ({ display: 'flex', marginTop: t.space.$3, diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts index e886651409b..47288463729 100644 --- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts +++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts @@ -284,28 +284,28 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([ 'pricingTableMatrixFeePeriodNoticeLabel', 'pricingTableMatrixFooter', - 'subscriptionDetailHeader', - 'subscriptionDetailAvatarBadgeContainer', - 'subscriptionDetailAvatar', - 'subscriptionDetailBadgeContainer', - 'subscriptionDetailBadge', - 'subscriptionDetailTitle', - 'subscriptionDetailDescription', - 'subscriptionDetailAction', - 'subscriptionDetailFeeContainer', - 'subscriptionDetailFee', - 'subscriptionDetailFeePeriod', - 'subscriptionDetailFeePeriodNotice', - 'subscriptionDetailFeePeriodNoticeInner', - 'subscriptionDetailFeePeriodNoticeLabel', - 'subscriptionDetailCaption', - 'subscriptionDetailFeatures', - 'subscriptionDetailFeaturesList', - 'subscriptionDetailFeaturesListItem', - 'subscriptionDetailFeaturesListItemContent', - 'subscriptionDetailFeaturesListItemTitle', - 'subscriptionDetailFeaturesListItemDescription', - 'subscriptionDetailPeriodToggle', + 'planDetailHeader', + 'planDetailAvatarBadgeContainer', + 'planDetailAvatar', + 'planDetailBadgeContainer', + 'planDetailBadge', + 'planDetailTitle', + 'planDetailDescription', + 'planDetailAction', + 'planDetailFeeContainer', + 'planDetailFee', + 'planDetailFeePeriod', + 'planDetailFeePeriodNotice', + 'planDetailFeePeriodNoticeInner', + 'planDetailFeePeriodNoticeLabel', + 'planDetailCaption', + 'planDetailFeatures', + 'planDetailFeaturesList', + 'planDetailFeaturesListItem', + 'planDetailFeaturesListItemContent', + 'planDetailFeaturesListItemTitle', + 'planDetailFeaturesListItemDescription', + 'planDetailPeriodToggle', 'segmentedControlRoot', 'segmentedControlButton', diff --git a/packages/clerk-js/src/ui/lazyModules/MountedSubscriptionDetailDrawer.tsx b/packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx similarity index 96% rename from packages/clerk-js/src/ui/lazyModules/MountedSubscriptionDetailDrawer.tsx rename to packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx index 8e19053914c..83c72a66b05 100644 --- a/packages/clerk-js/src/ui/lazyModules/MountedSubscriptionDetailDrawer.tsx +++ b/packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx @@ -4,7 +4,7 @@ import type { __experimental_PlanDetailsProps, Appearance } from '@clerk/types'; import { PlanDetails } from './components'; import { LazyDrawerRenderer } from './providers'; -export function MountedSubscriptionDetailDrawer({ +export function MountedPlanDetailDrawer({ appearance, planDetailsDrawer, onOpenChange, diff --git a/packages/clerk-js/src/ui/lazyModules/drawers.tsx b/packages/clerk-js/src/ui/lazyModules/drawers.tsx index 5e083bf467b..3e05ccdddef 100644 --- a/packages/clerk-js/src/ui/lazyModules/drawers.tsx +++ b/packages/clerk-js/src/ui/lazyModules/drawers.tsx @@ -3,6 +3,6 @@ import { lazy } from 'react'; export const MountedCheckoutDrawer = lazy(() => import('./MountedCheckoutDrawer').then(module => ({ default: module.MountedCheckoutDrawer })), ); -export const MountedSubscriptionDetailDrawer = lazy(() => - import('./MountedSubscriptionDetailDrawer').then(module => ({ default: module.MountedSubscriptionDetailDrawer })), +export const MountedPlanDetailDrawer = lazy(() => + import('./MountedPlanDetailDrawer').then(module => ({ default: module.MountedPlanDetailDrawer })), ); diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts index da5bc41d370..8bb3065c3c5 100644 --- a/packages/types/src/appearance.ts +++ b/packages/types/src/appearance.ts @@ -411,28 +411,28 @@ export type ElementsConfig = { pricingTableMatrixFeePeriodNoticeLabel: WithOptions; pricingTableMatrixFooter: WithOptions; - subscriptionDetailHeader: WithOptions; - subscriptionDetailAvatarBadgeContainer: WithOptions; - subscriptionDetailAvatar: WithOptions; - subscriptionDetailBadgeContainer: WithOptions; - subscriptionDetailBadge: WithOptions; - subscriptionDetailTitle: WithOptions; - subscriptionDetailDescription: WithOptions; - subscriptionDetailAction: WithOptions; - subscriptionDetailFeeContainer: WithOptions; - subscriptionDetailFee: WithOptions; - subscriptionDetailFeePeriod: WithOptions; - subscriptionDetailFeePeriodNotice: WithOptions; - subscriptionDetailFeePeriodNoticeInner: WithOptions; - subscriptionDetailFeePeriodNoticeLabel: WithOptions; - subscriptionDetailCaption: WithOptions; - subscriptionDetailFeatures: WithOptions; - subscriptionDetailFeaturesList: WithOptions; - subscriptionDetailFeaturesListItem: WithOptions; - subscriptionDetailFeaturesListItemContent: WithOptions; - subscriptionDetailFeaturesListItemTitle: WithOptions; - subscriptionDetailFeaturesListItemDescription: WithOptions; - subscriptionDetailPeriodToggle: WithOptions; + planDetailHeader: WithOptions; + planDetailAvatarBadgeContainer: WithOptions; + planDetailAvatar: WithOptions; + planDetailBadgeContainer: WithOptions; + planDetailBadge: WithOptions; + planDetailTitle: WithOptions; + planDetailDescription: WithOptions; + planDetailAction: WithOptions; + planDetailFeeContainer: WithOptions; + planDetailFee: WithOptions; + planDetailFeePeriod: WithOptions; + planDetailFeePeriodNotice: WithOptions; + planDetailFeePeriodNoticeInner: WithOptions; + planDetailFeePeriodNoticeLabel: WithOptions; + planDetailCaption: WithOptions; + planDetailFeatures: WithOptions; + planDetailFeaturesList: WithOptions; + planDetailFeaturesListItem: WithOptions; + planDetailFeaturesListItemContent: WithOptions; + planDetailFeaturesListItemTitle: WithOptions; + planDetailFeaturesListItemDescription: WithOptions; + planDetailPeriodToggle: WithOptions; alert: WithOptions; alertIcon: WithOptions; @@ -808,7 +808,7 @@ export type UserVerificationTheme = Theme; export type WaitlistTheme = Theme; export type PricingTableTheme = Theme; export type CheckoutTheme = Theme; -export type SubscriptionDetailTheme = Theme; +export type PlanDetailTheme = Theme; export type Appearance = T & { /** diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index 6889908fcd0..a2f01993fa8 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -8,7 +8,7 @@ import type { PricingTableTheme, SignInTheme, SignUpTheme, - SubscriptionDetailTheme, + PlanDetailTheme, UserButtonTheme, UserProfileTheme, UserVerificationTheme, @@ -1584,7 +1584,7 @@ export type __experimental_CheckoutProps = { }; export type __experimental_PlanDetailsProps = { - appearance?: SubscriptionDetailTheme; + appearance?: PlanDetailTheme; plan?: __experimental_CommercePlanResource; subscriberType?: __experimental_CommerceSubscriberType; planPeriod?: __experimental_CommerceSubscriptionPlanPeriod; From 747e50e75da583912b0ed12cdb0cb1c183306d45 Mon Sep 17 00:00:00 2001 From: Keiran Flanigan Date: Mon, 28 Apr 2025 13:10:55 -0700 Subject: [PATCH 4/6] linter fix --- packages/types/src/clerk.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index a2f01993fa8..0ca5b4ae428 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -5,10 +5,10 @@ import type { OrganizationListTheme, OrganizationProfileTheme, OrganizationSwitcherTheme, + PlanDetailTheme, PricingTableTheme, SignInTheme, SignUpTheme, - PlanDetailTheme, UserButtonTheme, UserProfileTheme, UserVerificationTheme, From 391871c5d55cd8b8b510fd4fec3ee18a54b8e3e7 Mon Sep 17 00:00:00 2001 From: Keiran Flanigan Date: Mon, 28 Apr 2025 13:21:36 -0700 Subject: [PATCH 5/6] more linter --- packages/clerk-js/src/ui/types.ts | 2 +- packages/react/src/isomorphicClerk.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/clerk-js/src/ui/types.ts b/packages/clerk-js/src/ui/types.ts index 8002eed49f6..66e6061196d 100644 --- a/packages/clerk-js/src/ui/types.ts +++ b/packages/clerk-js/src/ui/types.ts @@ -3,8 +3,8 @@ import type { __experimental_CommerceInvoiceResource, __experimental_CommercePlanResource, __experimental_CommerceSubscriptionResource, - __experimental_PricingTableProps, __experimental_PlanDetailsProps, + __experimental_PricingTableProps, __internal_UserVerificationProps, CreateOrganizationProps, GoogleOneTapProps, diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts index 0a8d1c0779e..5b9e282e060 100644 --- a/packages/react/src/isomorphicClerk.ts +++ b/packages/react/src/isomorphicClerk.ts @@ -5,8 +5,8 @@ import { handleValueOrFn } from '@clerk/shared/utils'; import type { __experimental_CheckoutProps, __experimental_CommerceNamespace, - __experimental_PricingTableProps, __experimental_PlanDetailsProps, + __experimental_PricingTableProps, __internal_UserVerificationModalProps, __internal_UserVerificationProps, AuthenticateWithCoinbaseWalletParams, @@ -243,7 +243,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { this.options.sdkMetadata = SDK_METADATA; } this.#eventBus.emit(clerkEvents.Status, 'loading'); - this.#eventBus.prioritizedOn(clerkEvents.Status, status => (this.#status = status as ClerkStatus)); + this.#eventBus.prioritizedOn(clerkEvents.Status, status => (this.#status = status)); if (this.#publishableKey) { void this.loadClerkJS(); From e09077234eaca87419b35efd1c14e3d8d612cabd Mon Sep 17 00:00:00 2001 From: Keiran Flanigan Date: Mon, 28 Apr 2025 13:38:02 -0700 Subject: [PATCH 6/6] one more --- packages/clerk-js/src/core/clerk.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 1e7e5f45841..927881bf913 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -16,8 +16,8 @@ import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils'; import type { __experimental_CheckoutProps, __experimental_CommerceNamespace, - __experimental_PricingTableProps, __experimental_PlanDetailsProps, + __experimental_PricingTableProps, __internal_ComponentNavigationContext, __internal_UserVerificationModalProps, AuthenticateWithCoinbaseWalletParams,