Skip to content

Commit b72a3dd

Browse files
panteliselefpanteliselef
authored
chore(clerk-js, types): Cleanup naming inconsistencies in billing dates (#6513)
1 parent 29a25f3 commit b72a3dd

File tree

10 files changed

+76
-80
lines changed

10 files changed

+76
-80
lines changed

‎.changeset/brown-news-unite.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
'@clerk/clerk-js': minor
3+
'@clerk/types': minor
4+
---
5+
6+
[Billing Beta] Cleanup naming inconsistencies in billing dates.
7+
8+
## Migration
9+
- subscriptionItem.periodStartDate → subscriptionItem.periodStart
10+
- subscriptionItem.periodEndDate → subscriptionItem.periodEnd
11+
- subscriptionItem.canceledAtDate → subscriptionItem.canceledAt

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

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,10 @@ export class CommerceSubscriptionItem extends BaseResource implements CommerceSu
6262
planPeriod!: CommerceSubscriptionPlanPeriod;
6363
status!: CommerceSubscriptionStatus;
6464
createdAt!: Date;
65+
periodStart!: Date;
66+
periodEnd!: Date | null;
67+
canceledAt!: Date | null;
6568
pastDueAt!: Date | null;
66-
periodStartDate!: Date;
67-
periodEndDate!: Date | null;
68-
canceledAtDate!: Date | null;
69-
periodStart!: number;
70-
periodEnd!: number;
71-
canceledAt!: number | null;
7269
//TODO(@COMMERCE): Why can this be undefined ?
7370
amount?: CommerceMoney;
7471
credit?: {
@@ -90,16 +87,13 @@ export class CommerceSubscriptionItem extends BaseResource implements CommerceSu
9087
this.plan = new CommercePlan(data.plan);
9188
this.planPeriod = data.plan_period;
9289
this.status = data.status;
93-
this.periodStart = data.period_start;
94-
this.periodEnd = data.period_end;
95-
this.canceledAt = data.canceled_at;
9690

9791
this.createdAt = unixEpochToDate(data.created_at);
9892
this.pastDueAt = data.past_due_at ? unixEpochToDate(data.past_due_at) : null;
9993

100-
this.periodStartDate = unixEpochToDate(data.period_start);
101-
this.periodEndDate = data.period_end ? unixEpochToDate(data.period_end) : null;
102-
this.canceledAtDate = data.canceled_at ? unixEpochToDate(data.canceled_at) : null;
94+
this.periodStart = unixEpochToDate(data.period_start);
95+
this.periodEnd = data.period_end ? unixEpochToDate(data.period_end) : null;
96+
this.canceledAt = data.canceled_at ? unixEpochToDate(data.canceled_at) : null;
10397

10498
this.amount = data.amount ? commerceMoneyFromJSON(data.amount) : undefined;
10599
this.credit = data.credit && data.credit.amount ? { amount: commerceMoneyFromJSON(data.credit.amount) } : undefined;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const PricingTableRoot = (props: PricingTableProps) => {
2525

2626
// don't pay attention to the default plan
2727
const activeSubscription = subscriptionItems?.find(
28-
sub => !sub.canceledAtDate && sub.status === 'active' && !sub.plan.isDefault,
28+
sub => !sub.canceledAt && sub.status === 'active' && !sub.plan.isDefault,
2929
);
3030
if (activeSubscription) {
3131
return activeSubscription.planPeriod;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ function Card(props: CardProps) {
141141
shouldShowFooter = true;
142142
shouldShowFooterNotice = true;
143143
} else if (subscription.status === 'active') {
144-
if (subscription.canceledAtDate) {
144+
if (subscription.canceledAt) {
145145
shouldShowFooter = true;
146146
shouldShowFooterNotice = false;
147147
} else if (planPeriod !== subscription.planPeriod && plan.annualMonthlyAmount > 0) {
@@ -233,7 +233,7 @@ function Card(props: CardProps) {
233233
elementDescriptor={descriptors.pricingTableCardFooterNotice}
234234
variant={isCompact ? 'buttonSmall' : 'buttonLarge'}
235235
localizationKey={localizationKeys('badge__startsAt', {
236-
date: subscription?.periodStartDate,
236+
date: subscription?.periodStart,
237237
})}
238238
colorScheme='secondary'
239239
sx={t => ({

‎packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,9 @@ describe('SubscriptionDetails', () => {
6868
isDefault: false,
6969
},
7070
createdAt: new Date('2021-01-01'),
71-
periodStartDate: new Date('2021-01-01'),
72-
periodEndDate: new Date('2021-02-01'),
73-
canceledAtDate: null,
71+
periodStart: new Date('2021-01-01'),
72+
periodEnd: new Date('2021-02-01'),
73+
canceledAt: null,
7474
paymentSourceId: 'src_123',
7575
planPeriod: 'month',
7676
status: 'active',
@@ -161,9 +161,9 @@ describe('SubscriptionDetails', () => {
161161
isDefault: false,
162162
},
163163
createdAt: new Date('2021-01-01'),
164-
periodStartDate: new Date('2021-01-01'),
165-
periodEndDate: new Date('2022-01-01'),
166-
canceledAtDate: null,
164+
periodStart: new Date('2021-01-01'),
165+
periodEnd: new Date('2022-01-01'),
166+
canceledAt: null,
167167
paymentSourceId: 'src_123',
168168
planPeriod: 'annual' as const,
169169
status: 'active' as const,
@@ -246,9 +246,9 @@ describe('SubscriptionDetails', () => {
246246
isDefault: true,
247247
},
248248
createdAt: new Date('2021-01-01'),
249-
periodStartDate: new Date('2021-01-01'),
250-
periodEndDate: new Date('2021-02-01'),
251-
canceledAtDate: null,
249+
periodStart: new Date('2021-01-01'),
250+
periodEnd: new Date('2021-02-01'),
251+
canceledAt: null,
252252
paymentSourceId: 'src_123',
253253
planPeriod: 'month' as const,
254254
status: 'active' as const,
@@ -354,9 +354,9 @@ describe('SubscriptionDetails', () => {
354354
id: 'sub_annual',
355355
plan: planAnnual,
356356
createdAt: new Date('2021-01-01'),
357-
periodStartDate: new Date('2021-01-01'),
358-
periodEndDate: new Date('2022-01-01'),
359-
canceledAtDate: new Date('2021-04-01'),
357+
periodStart: new Date('2021-01-01'),
358+
periodEnd: new Date('2022-01-01'),
359+
canceledAt: new Date('2021-04-01'),
360360
paymentSourceId: 'src_annual',
361361
planPeriod: 'annual' as const,
362362
status: 'active' as const,
@@ -365,9 +365,9 @@ describe('SubscriptionDetails', () => {
365365
id: 'sub_monthly',
366366
plan: planMonthly,
367367
createdAt: new Date('2022-01-01'),
368-
periodStartDate: new Date('2022-02-01'),
369-
periodEndDate: new Date('2022-03-01'),
370-
canceledAtDate: null,
368+
periodStart: new Date('2022-02-01'),
369+
periodEnd: new Date('2022-03-01'),
370+
canceledAt: null,
371371
paymentSourceId: 'src_monthly',
372372
planPeriod: 'month' as const,
373373
status: 'upcoming' as const,
@@ -486,9 +486,9 @@ describe('SubscriptionDetails', () => {
486486
id: 'test_active',
487487
plan: planMonthly,
488488
createdAt: new Date('2021-01-01'),
489-
periodStartDate: new Date('2021-01-01'),
490-
periodEndDate: new Date('2021-02-01'),
491-
canceledAtDate: new Date('2021-01-03'),
489+
periodStart: new Date('2021-01-01'),
490+
periodEnd: new Date('2021-02-01'),
491+
canceledAt: new Date('2021-01-03'),
492492
paymentSourceId: 'src_free_active',
493493
planPeriod: 'month' as const,
494494
status: 'active' as const,
@@ -497,8 +497,8 @@ describe('SubscriptionDetails', () => {
497497
id: 'sub_free_upcoming',
498498
plan: planFreeUpcoming,
499499
createdAt: new Date('2021-01-03'),
500-
periodStartDate: new Date('2021-02-01'),
501-
canceledAtDate: null,
500+
periodStart: new Date('2021-02-01'),
501+
canceledAt: null,
502502
paymentSourceId: 'src_free_upcoming',
503503
planPeriod: 'month' as const,
504504
status: 'upcoming' as const,
@@ -582,9 +582,9 @@ describe('SubscriptionDetails', () => {
582582
isDefault: false,
583583
},
584584
createdAt: new Date('2021-01-01'),
585-
periodStartDate: new Date('2021-01-01'),
586-
periodEndDate: new Date('2021-02-01'),
587-
canceledAtDate: null,
585+
periodStart: new Date('2021-01-01'),
586+
periodEnd: new Date('2021-02-01'),
587+
canceledAt: null,
588588
paymentSourceId: 'src_123',
589589
planPeriod: 'month' as const,
590590
status: 'active' as const,
@@ -668,9 +668,9 @@ describe('SubscriptionDetails', () => {
668668
id: 'sub_annual',
669669
plan,
670670
createdAt: new Date('2021-01-01'),
671-
periodStartDate: new Date('2021-01-01'),
672-
periodEndDate: new Date('2022-01-01'),
673-
canceledAtDate: new Date('2021-04-01'),
671+
periodStart: new Date('2021-01-01'),
672+
periodEnd: new Date('2022-01-01'),
673+
canceledAt: new Date('2021-04-01'),
674674
paymentSourceId: 'src_annual',
675675
planPeriod: 'annual' as const,
676676
status: 'active' as const,
@@ -755,9 +755,9 @@ describe('SubscriptionDetails', () => {
755755
id: 'sub_annual',
756756
plan,
757757
createdAt: new Date('2021-01-01'),
758-
periodStartDate: new Date('2021-01-01'),
759-
periodEndDate: new Date('2022-01-01'),
760-
canceledAtDate: null,
758+
periodStart: new Date('2021-01-01'),
759+
periodEnd: new Date('2022-01-01'),
760+
canceledAt: null,
761761
paymentSourceId: 'src_annual',
762762
planPeriod: 'annual' as const,
763763
status: 'active' as const,
@@ -862,9 +862,9 @@ describe('SubscriptionDetails', () => {
862862
id: 'sub_past_due',
863863
plan,
864864
createdAt: new Date('2021-01-01'),
865-
periodStartDate: new Date('2021-01-01'),
866-
periodEndDate: new Date('2021-02-01'),
867-
canceledAtDate: null,
865+
periodStart: new Date('2021-01-01'),
866+
periodEnd: new Date('2021-02-01'),
867+
canceledAt: null,
868868
paymentSourceId: 'src_123',
869869
planPeriod: 'month' as const,
870870
status: 'past_due' as const,

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
271271
: localizationKeys('commerce.cancelSubscriptionAccessUntil', {
272272
plan: selectedSubscription.plan.name,
273273
// this will always be defined in this state
274-
date: selectedSubscription.periodEndDate as Date,
274+
date: selectedSubscription.periodEnd as Date,
275275
})
276276
}
277277
/>
@@ -339,8 +339,8 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
339339
subscription.planPeriod === 'annual') &&
340340
subscription.status !== 'past_due';
341341
const isFree = isFreePlan(subscription.plan);
342-
const isCancellable = subscription.canceledAtDate === null && !isFree && subscription.status !== 'past_due';
343-
const isReSubscribable = subscription.canceledAtDate !== null && !isFree;
342+
const isCancellable = subscription.canceledAt === null && !isFree && subscription.status !== 'past_due';
343+
const isReSubscribable = subscription.canceledAt !== null && !isFree;
344344

345345
const openCheckout = useCallback(
346346
(params?: __internal_CheckoutProps) => {
@@ -523,14 +523,14 @@ const SubscriptionCard = ({ subscription }: { subscription: CommerceSubscription
523523
value={formatDate(subscription.createdAt)}
524524
/>
525525
{/* The free plan does not have a period end date */}
526-
{subscription.periodEndDate && (
526+
{subscription.periodEnd && (
527527
<DetailRow
528528
label={
529-
subscription.canceledAtDate
529+
subscription.canceledAt
530530
? localizationKeys('commerce.subscriptionDetails.endsOn')
531531
: localizationKeys('commerce.subscriptionDetails.renewsAt')
532532
}
533-
value={formatDate(subscription.periodEndDate)}
533+
value={formatDate(subscription.periodEnd)}
534534
/>
535535
)}
536536
</>
@@ -539,7 +539,7 @@ const SubscriptionCard = ({ subscription }: { subscription: CommerceSubscription
539539
{subscription.status === 'upcoming' ? (
540540
<DetailRow
541541
label={localizationKeys('commerce.subscriptionDetails.beginsOn')}
542-
value={formatDate(subscription.periodStartDate)}
542+
value={formatDate(subscription.periodStart)}
543543
/>
544544
) : null}
545545
</Col>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ export function SubscriptionsList({
120120
>
121121
{subscription.plan.name}
122122
</Text>
123-
{sortedSubscriptions.length > 1 || !!subscription.canceledAtDate ? (
123+
{sortedSubscriptions.length > 1 || !!subscription.canceledAt ? (
124124
<SubscriptionBadge subscription={subscription} />
125125
) : null}
126126
</Flex>

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export const usePlansContext = () => {
129129
// should the default plan be shown as active
130130
const isDefaultPlanImplicitlyActiveOrUpcoming = useMemo(() => {
131131
// are there no subscriptions or are all subscriptions canceled
132-
return subscriptionItems.length === 0 || !subscriptionItems.some(subscription => !subscription.canceledAtDate);
132+
return subscriptionItems.length === 0 || !subscriptionItems.some(subscription => !subscription.canceledAt);
133133
}, [subscriptionItems]);
134134

135135
// return the active or upcoming subscription for a plan if it exists
@@ -178,7 +178,7 @@ export const usePlansContext = () => {
178178
({ plan, subscription: sub }: { plan?: CommercePlanResource; subscription?: CommerceSubscriptionItemResource }) => {
179179
const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined);
180180

181-
return !subscription || !subscription.canceledAtDate;
181+
return !subscription || !subscription.canceledAt;
182182
},
183183
[activeOrUpcomingSubscription],
184184
);
@@ -214,7 +214,7 @@ export const usePlansContext = () => {
214214
const getLocalizationKey = () => {
215215
// Handle subscription cases
216216
if (subscription) {
217-
if (_selectedPlanPeriod !== subscription.planPeriod && subscription.canceledAtDate) {
217+
if (_selectedPlanPeriod !== subscription.planPeriod && subscription.canceledAt) {
218218
if (_selectedPlanPeriod === 'month') {
219219
return localizationKeys('commerce.switchToMonthly');
220220
}
@@ -224,7 +224,7 @@ export const usePlansContext = () => {
224224
}
225225
}
226226

227-
if (subscription.canceledAtDate) {
227+
if (subscription.canceledAt) {
228228
return localizationKeys('commerce.reSubscribe');
229229
}
230230

@@ -268,14 +268,14 @@ export const usePlansContext = () => {
268268
}
269269

270270
if (subscription.status === 'upcoming') {
271-
return localizationKeys('badge__startsAt', { date: subscription.periodStartDate });
271+
return localizationKeys('badge__startsAt', { date: subscription.periodStart });
272272
}
273-
if (subscription.canceledAtDate) {
273+
if (subscription.canceledAt) {
274274
// @ts-expect-error `periodEndDate` is always defined when `canceledAtDate` exists
275-
return localizationKeys('badge__canceledEndsAt', { date: subscription.periodEndDate });
275+
return localizationKeys('badge__canceledEndsAt', { date: subscription.periodEnd });
276276
}
277-
if (subscription.periodEndDate) {
278-
return localizationKeys('badge__renewsAt', { date: subscription.periodEndDate });
277+
if (subscription.periodEnd) {
278+
return localizationKeys('badge__renewsAt', { date: subscription.periodEnd });
279279
}
280280
return;
281281
}, []);

‎packages/types/src/commerce.ts

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1038,7 +1038,7 @@ export interface CommerceSubscriptionItemResource extends ClerkResource {
10381038
* <ClerkProvider clerkJsVersion="x.x.x" />
10391039
* ```
10401040
*/
1041-
periodStartDate: Date;
1041+
periodStart: Date;
10421042
/**
10431043
* @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change.
10441044
* It is advised to pin the SDK version and the clerk-js version to a specific version to avoid breaking changes.
@@ -1047,7 +1047,7 @@ export interface CommerceSubscriptionItemResource extends ClerkResource {
10471047
* <ClerkProvider clerkJsVersion="x.x.x" />
10481048
* ```
10491049
*/
1050-
periodEndDate: Date | null;
1050+
periodEnd: Date | null;
10511051
/**
10521052
* @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change.
10531053
* It is advised to pin the SDK version and the clerk-js version to a specific version to avoid breaking changes.
@@ -1056,19 +1056,7 @@ export interface CommerceSubscriptionItemResource extends ClerkResource {
10561056
* <ClerkProvider clerkJsVersion="x.x.x" />
10571057
* ```
10581058
*/
1059-
canceledAtDate: Date | null;
1060-
/**
1061-
* @deprecated Use `periodStartDate` instead
1062-
*/
1063-
periodStart: number;
1064-
/**
1065-
* @deprecated Use `periodEndDate` instead
1066-
*/
1067-
periodEnd: number;
1068-
/**
1069-
* @deprecated Use `canceledAtDate` instead
1070-
*/
1071-
canceledAt: number | null;
1059+
canceledAt: Date | null;
10721060
/**
10731061
* @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change.
10741062
* It is advised to pin the SDK version and the clerk-js version to a specific version to avoid breaking changes.

‎packages/types/src/json.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -777,7 +777,10 @@ export interface CommerceSubscriptionItemJSON extends ClerkResourceJSON {
777777
status: CommerceSubscriptionStatus;
778778
created_at: number;
779779
period_start: number;
780-
period_end: number;
780+
/**
781+
* Period end is `null` for subscription items that are on the free plan.
782+
*/
783+
period_end: number | null;
781784
canceled_at: number | null;
782785
past_due_at: number | null;
783786
}

0 commit comments

Comments
 (0)