Skip to content

Commit 5866855

Browse files
aelioxaeliox
authored
chore(clerk-js,types): Rename SubscriptionDetails to PlanDetails (#5749)
1 parent 462b5b2 commit 5866855

File tree

20 files changed

+175
-169
lines changed

20 files changed

+175
-169
lines changed

‎.changeset/cruel-berries-flow.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@clerk/clerk-js': patch
3+
'@clerk/clerk-react': patch
4+
'@clerk/types': patch
5+
---
6+
7+
Renames all instances of `SubscriptionDetails` to `PlanDetails` to better reflect the capabilities, use cases, and params of the component.

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
1616
import type {
1717
__experimental_CheckoutProps,
1818
__experimental_CommerceNamespace,
19+
__experimental_PlanDetailsProps,
1920
__experimental_PricingTableProps,
20-
__experimental_SubscriptionDetailsProps,
2121
__internal_ComponentNavigationContext,
2222
__internal_UserVerificationModalProps,
2323
AuthenticateWithCoinbaseWalletParams,
@@ -564,24 +564,24 @@ export class Clerk implements ClerkInterface {
564564
void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('checkout'));
565565
};
566566

567-
public __internal_openSubscriptionDetails = (props?: __experimental_SubscriptionDetailsProps): void => {
567+
public __internal_openPlanDetails = (props?: __experimental_PlanDetailsProps): void => {
568568
this.assertComponentsReady(this.#componentControls);
569569
if (disabledBillingFeature(this, this.environment)) {
570570
if (this.#instanceType === 'development') {
571-
throw new ClerkRuntimeError(warnings.cannotRenderAnyCommerceComponent('SubscriptionDetails'), {
571+
throw new ClerkRuntimeError(warnings.cannotRenderAnyCommerceComponent('PlanDetails'), {
572572
code: CANNOT_RENDER_BILLING_DISABLED_ERROR_CODE,
573573
});
574574
}
575575
return;
576576
}
577577
void this.#componentControls
578-
.ensureMounted({ preloadHint: 'SubscriptionDetails' })
579-
.then(controls => controls.openDrawer('subscriptionDetails', props || {}));
578+
.ensureMounted({ preloadHint: 'PlanDetails' })
579+
.then(controls => controls.openDrawer('planDetails', props || {}));
580580
};
581581

582-
public __internal_closeSubscriptionDetails = (): void => {
582+
public __internal_closePlanDetails = (): void => {
583583
this.assertComponentsReady(this.#componentControls);
584-
void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('subscriptionDetails'));
584+
void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('planDetails'));
585585
};
586586

587587
public __internal_openReverification = (props?: __internal_UserVerificationModalProps): void => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const createMessageForDisabledOrganizations = (
1111
`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.`,
1212
);
1313
};
14-
const createMessageForDisabledCommerce = (componentName: 'PricingTable' | 'Checkout' | 'SubscriptionDetails') => {
14+
const createMessageForDisabledCommerce = (componentName: 'PricingTable' | 'Checkout' | 'PlanDetails') => {
1515
return formatWarning(
1616
`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.`,
1717
);

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createDeferredPromise } from '@clerk/shared/utils';
22
import type {
33
__experimental_CheckoutProps,
4-
__experimental_SubscriptionDetailsProps,
4+
__experimental_PlanDetailsProps,
55
__internal_UserVerificationProps,
66
Appearance,
77
Clerk,
@@ -37,7 +37,7 @@ import {
3737
UserVerificationModal,
3838
WaitlistModal,
3939
} from './lazyModules/components';
40-
import { MountedCheckoutDrawer, MountedSubscriptionDetailDrawer } from './lazyModules/drawers';
40+
import { MountedCheckoutDrawer, MountedPlanDetailDrawer } from './lazyModules/drawers';
4141
import {
4242
LazyComponentRenderer,
4343
LazyImpersonationFabProvider,
@@ -107,16 +107,16 @@ export type ComponentControls = {
107107
notify?: boolean;
108108
},
109109
) => void;
110-
openDrawer: <T extends 'checkout' | 'subscriptionDetails'>(
110+
openDrawer: <T extends 'checkout' | 'planDetails'>(
111111
drawer: T,
112112
props: T extends 'checkout'
113113
? __experimental_CheckoutProps
114-
: T extends 'subscriptionDetails'
115-
? __experimental_SubscriptionDetailsProps
114+
: T extends 'planDetails'
115+
? __experimental_PlanDetailsProps
116116
: never,
117117
) => void;
118118
closeDrawer: (
119-
drawer: 'checkout' | 'subscriptionDetails',
119+
drawer: 'checkout' | 'planDetails',
120120
options?: {
121121
notify?: boolean;
122122
},
@@ -157,9 +157,9 @@ interface ComponentsState {
157157
open: false;
158158
props: null | __experimental_CheckoutProps;
159159
};
160-
subscriptionDetailsDrawer: {
160+
planDetailsDrawer: {
161161
open: false;
162-
props: null | __experimental_SubscriptionDetailsProps;
162+
props: null | __experimental_PlanDetailsProps;
163163
};
164164
nodes: Map<HTMLDivElement, HtmlNodeOptions>;
165165
impersonationFab: boolean;
@@ -246,7 +246,7 @@ const Components = (props: ComponentsProps) => {
246246
open: false,
247247
props: null,
248248
},
249-
subscriptionDetailsDrawer: {
249+
planDetailsDrawer: {
250250
open: false,
251251
props: null,
252252
},
@@ -265,7 +265,7 @@ const Components = (props: ComponentsProps) => {
265265
waitlistModal,
266266
blankCaptchaModal,
267267
checkoutDrawer,
268-
subscriptionDetailsDrawer,
268+
planDetailsDrawer,
269269
nodes,
270270
} = state;
271271

@@ -578,10 +578,10 @@ const Components = (props: ComponentsProps) => {
578578
onOpenChange={() => componentsControls.closeDrawer('checkout')}
579579
/>
580580

581-
<MountedSubscriptionDetailDrawer
581+
<MountedPlanDetailDrawer
582582
appearance={state.appearance}
583-
subscriptionDetailsDrawer={subscriptionDetailsDrawer}
584-
onOpenChange={() => componentsControls.closeDrawer('subscriptionDetails')}
583+
planDetailsDrawer={planDetailsDrawer}
584+
onOpenChange={() => componentsControls.closeDrawer('planDetails')}
585585
/>
586586

587587
{state.impersonationFab && (

packages/clerk-js/src/ui/components/Subscriptions/SubscriptionDetails.tsx renamed to packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type {
33
__experimental_CommercePlanResource,
44
__experimental_CommerceSubscriptionPlanPeriod,
55
__experimental_CommerceSubscriptionResource,
6-
__experimental_SubscriptionDetailsProps,
6+
__experimental_PlanDetailsProps,
77
ClerkAPIError,
88
ClerkRuntimeError,
99
} from '@clerk/types';
@@ -27,22 +27,22 @@ import { Alert, Avatar, Drawer, SegmentedControl, useDrawerContext } from '../..
2727
import { InformationCircle } from '../../icons';
2828
import { formatDate, handleError } from '../../utils';
2929

30-
export const SubscriptionDetails = (props: __experimental_SubscriptionDetailsProps) => {
30+
export const PlanDetails = (props: __experimental_PlanDetailsProps) => {
3131
return (
3232
<SubscriberTypeContext.Provider value={props.subscriberType || 'user'}>
3333
<PlansContextProvider>
34-
<_SubscriptionDetails {...props} />
34+
<_PlanDetails {...props} />
3535
</PlansContextProvider>
3636
</SubscriberTypeContext.Provider>
3737
);
3838
};
3939

40-
const _SubscriptionDetails = ({
40+
const _PlanDetails = ({
4141
plan,
4242
onSubscriptionCancel,
4343
portalId,
4444
planPeriod: _planPeriod = 'month',
45-
}: __experimental_SubscriptionDetailsProps) => {
45+
}: __experimental_PlanDetailsProps) => {
4646
const clerk = useClerk();
4747
const { organization } = useOrganization();
4848
const [showConfirmation, setShowConfirmation] = useState(false);
@@ -134,7 +134,7 @@ const _SubscriptionDetails = ({
134134
{hasFeatures ? (
135135
<Drawer.Body>
136136
<Text
137-
elementDescriptor={descriptors.subscriptionDetailCaption}
137+
elementDescriptor={descriptors.planDetailCaption}
138138
variant={'caption'}
139139
localizationKey={localizationKeys('__experimental_commerce.availableFeatures')}
140140
colorScheme='secondary'
@@ -144,7 +144,7 @@ const _SubscriptionDetails = ({
144144
})}
145145
/>
146146
<Box
147-
elementDescriptor={descriptors.subscriptionDetailFeaturesList}
147+
elementDescriptor={descriptors.planDetailFeaturesList}
148148
as='ul'
149149
role='list'
150150
sx={t => ({
@@ -156,7 +156,7 @@ const _SubscriptionDetails = ({
156156
{features.map(feature => (
157157
<Box
158158
key={feature.id}
159-
elementDescriptor={descriptors.subscriptionDetailFeaturesListItem}
159+
elementDescriptor={descriptors.planDetailFeaturesListItem}
160160
as='li'
161161
sx={t => ({
162162
display: 'flex',
@@ -173,9 +173,9 @@ const _SubscriptionDetails = ({
173173
imageUrl={feature.avatarUrl}
174174
/>
175175
) : null}
176-
<Span elementDescriptor={descriptors.subscriptionDetailFeaturesListItemContent}>
176+
<Span elementDescriptor={descriptors.planDetailFeaturesListItemContent}>
177177
<Text
178-
elementDescriptor={descriptors.subscriptionDetailFeaturesListItemTitle}
178+
elementDescriptor={descriptors.planDetailFeaturesListItemTitle}
179179
colorScheme='body'
180180
sx={t => ({
181181
fontWeight: t.fontWeights.$medium,
@@ -185,7 +185,7 @@ const _SubscriptionDetails = ({
185185
</Text>
186186
{feature.description ? (
187187
<Text
188-
elementDescriptor={descriptors.subscriptionDetailFeaturesListItemDescription}
188+
elementDescriptor={descriptors.planDetailFeaturesListItemDescription}
189189
colorScheme='secondary'
190190
sx={t => ({
191191
marginBlockStart: t.space.$0x25,
@@ -319,7 +319,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
319319
return (
320320
<Box
321321
ref={ref}
322-
elementDescriptor={descriptors.subscriptionDetailHeader}
322+
elementDescriptor={descriptors.planDetailHeader}
323323
sx={t => ({
324324
width: '100%',
325325
padding: t.space.$4,
@@ -340,7 +340,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
340340

341341
{plan.avatarUrl ? (
342342
<Avatar
343-
boxElementDescriptor={descriptors.subscriptionDetailAvatar}
343+
boxElementDescriptor={descriptors.planDetailAvatar}
344344
size={_ => 40}
345345
title={plan.name}
346346
initials={plan.name[0]}
@@ -353,20 +353,20 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
353353
) : null}
354354
{subscription ? (
355355
<Box
356-
elementDescriptor={descriptors.subscriptionDetailBadgeContainer}
356+
elementDescriptor={descriptors.planDetailBadgeContainer}
357357
sx={t => ({
358358
marginBlockEnd: t.space.$3,
359359
})}
360360
>
361361
{subscription.status === 'active' ? (
362362
<Badge
363-
elementDescriptor={descriptors.subscriptionDetailBadge}
363+
elementDescriptor={descriptors.planDetailBadge}
364364
localizationKey={localizationKeys('badge__currentPlan')}
365365
colorScheme={'secondary'}
366366
/>
367367
) : (
368368
<Badge
369-
elementDescriptor={descriptors.subscriptionDetailBadge}
369+
elementDescriptor={descriptors.planDetailBadge}
370370
localizationKey={localizationKeys('badge__upcomingPlan')}
371371
colorScheme={'primary'}
372372
/>
@@ -380,15 +380,15 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
380380
})}
381381
>
382382
<Heading
383-
elementDescriptor={descriptors.subscriptionDetailTitle}
383+
elementDescriptor={descriptors.planDetailTitle}
384384
as='h2'
385385
textVariant='h2'
386386
>
387387
{plan.name}
388388
</Heading>
389389
{plan.description ? (
390390
<Text
391-
elementDescriptor={descriptors.subscriptionDetailDescription}
391+
elementDescriptor={descriptors.planDetailDescription}
392392
variant='subtitle'
393393
colorScheme='secondary'
394394
>
@@ -399,7 +399,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
399399

400400
{plan.amount > 0 ? (
401401
<Flex
402-
elementDescriptor={descriptors.subscriptionDetailFeeContainer}
402+
elementDescriptor={descriptors.planDetailFeeContainer}
403403
align='center'
404404
wrap='wrap'
405405
sx={t => ({
@@ -409,7 +409,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
409409
>
410410
<>
411411
<Text
412-
elementDescriptor={descriptors.subscriptionDetailFee}
412+
elementDescriptor={descriptors.planDetailFee}
413413
variant='h1'
414414
colorScheme='body'
415415
>
@@ -419,7 +419,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
419419
: plan.amountFormatted}
420420
</Text>
421421
<Text
422-
elementDescriptor={descriptors.subscriptionDetailFeePeriod}
422+
elementDescriptor={descriptors.planDetailFeePeriod}
423423
variant='caption'
424424
colorScheme='secondary'
425425
sx={t => ({
@@ -433,7 +433,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
433433
/>
434434
{plan.annualMonthlyAmount > 0 ? (
435435
<Box
436-
elementDescriptor={descriptors.subscriptionDetailFeePeriodNotice}
436+
elementDescriptor={descriptors.planDetailFeePeriodNotice}
437437
sx={[
438438
_ => ({
439439
width: '100%',
@@ -448,14 +448,14 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
448448
}
449449
>
450450
<Box
451-
elementDescriptor={descriptors.subscriptionDetailFeePeriodNoticeInner}
451+
elementDescriptor={descriptors.planDetailFeePeriodNoticeInner}
452452
sx={{
453453
overflow: 'hidden',
454454
minHeight: 0,
455455
}}
456456
>
457457
<Text
458-
elementDescriptor={descriptors.subscriptionDetailFeePeriodNoticeLabel}
458+
elementDescriptor={descriptors.planDetailFeePeriodNoticeLabel}
459459
variant='caption'
460460
colorScheme='secondary'
461461
sx={t => ({
@@ -482,7 +482,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
482482

483483
{!!subscription && (
484484
<Text
485-
elementDescriptor={descriptors.subscriptionDetailCaption}
485+
elementDescriptor={descriptors.planDetailCaption}
486486
variant={'caption'}
487487
localizationKey={captionForSubscription(subscription)}
488488
colorScheme='secondary'
@@ -494,7 +494,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
494494

495495
{!subscription && plan.annualMonthlyAmount > 0 ? (
496496
<Box
497-
elementDescriptor={descriptors.subscriptionDetailPeriodToggle}
497+
elementDescriptor={descriptors.planDetailPeriodToggle}
498498
sx={t => ({
499499
display: 'flex',
500500
marginTop: t.space.$3,

‎packages/clerk-js/src/ui/components/Plans/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './PlanDetails';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const FreePlanRow = () => {
1818
return;
1919
}
2020

21-
clerk.__internal_openSubscriptionDetails({
21+
clerk.__internal_openPlanDetails({
2222
plan: defaultFreePlan,
2323
subscriberType: subscriberType,
2424
portalId:

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ function Card(props: CardProps) {
116116
const { buttonPropsForPlan } = usePlansContext();
117117

118118
const showPlanDetails = () => {
119-
clerk.__internal_openSubscriptionDetails({
119+
clerk.__internal_openPlanDetails({
120120
plan,
121121
subscriberType,
122122
planPeriod,

‎packages/clerk-js/src/ui/components/Subscriptions/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
export * from './SubscriptionDetails';
21
export * from './SubscriptionsList';

‎packages/clerk-js/src/ui/contexts/components/Plans.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ export const usePlansContext = () => {
174174
const subscription = activeOrUpcomingSubscription(plan);
175175

176176
if (subscription && !subscription.canceledAt) {
177-
clerk.__internal_openSubscriptionDetails({
177+
clerk.__internal_openPlanDetails({
178178
plan,
179179
subscriberType,
180180
onSubscriptionCancel: () => {

0 commit comments

Comments
 (0)