fix(clerk-js): Add planPeriodStart to CommerceCheckout

.changeset/twenty-monkeys-camp.md

@@ -0,0 +1,7 @@
+---
+"@clerk/clerk-js": patch
+"@clerk/types": patch
+---
+
+Fix the "Plan starts at" date when a user downgrades from a paid plan to the free plan
+

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

@@ -8,13 +8,7 @@ import type {
 } from '@clerk/types';
 
 import { commerceTotalsFromJSON } from '../../utils';
-import {
-  BaseResource,
-  CommercePaymentSource,
-  CommercePlan,
-  CommerceSubscription,
-  isClerkAPIResponseError,
-} from './internal';
+import { BaseResource, CommercePaymentSource, CommercePlan, isClerkAPIResponseError } from './internal';
 
 export class CommerceCheckout extends BaseResource implements CommerceCheckoutResource {
   id!: string;
@@ -24,8 +18,8 @@ export class CommerceCheckout extends BaseResource implements CommerceCheckoutRe
   paymentSource?: CommercePaymentSource;
   plan!: CommercePlan;
   planPeriod!: CommerceSubscriptionPlanPeriod;
+  planPeriodStart!: number | undefined;
   status!: string;
-  subscription?: CommerceSubscription;
   totals!: CommerceCheckoutTotals;
   isImmediatePlanChange!: boolean;
 
@@ -47,8 +41,8 @@ export class CommerceCheckout extends BaseResource implements CommerceCheckoutRe
     this.paymentSource = data.payment_source ? new CommercePaymentSource(data.payment_source) : undefined;
     this.plan = new CommercePlan(data.plan);
     this.planPeriod = data.plan_period;
+    this.planPeriodStart = data.plan_period_start;
     this.status = data.status;
-    this.subscription = data.subscription ? new CommerceSubscription(data.subscription) : undefined;
     this.totals = commerceTotalsFromJSON(data.totals);
     this.isImmediatePlanChange = data.is_immediate_plan_change;
     return this;

packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx

@@ -261,8 +261,8 @@ export const CheckoutComplete = ({
                       ? `${capitalize(checkout.paymentSource.paymentMethod)}`
                       : `${capitalize(checkout.paymentSource.cardType)} ⋯ ${checkout.paymentSource.last4}`
                     : '–'
-                  : checkout.subscription?.periodStart
-                    ? formatDate(new Date(checkout.subscription.periodStart))
+                  : checkout.planPeriodStart
+                    ? formatDate(new Date(checkout.planPeriodStart))
                     : '–'
               }
             />

packages/types/src/commerce.ts

@@ -199,9 +199,9 @@ export interface CommerceCheckoutResource extends ClerkResource {
   paymentSource?: CommercePaymentSourceResource;
   plan: CommercePlanResource;
   planPeriod: CommerceSubscriptionPlanPeriod;
+  planPeriodStart?: number;
   status: string;
   totals: CommerceCheckoutTotals;
-  subscription?: CommerceSubscriptionResource;
   confirm: (params: ConfirmCheckoutParams) => Promise<CommerceCheckoutResource>;
   isImmediatePlanChange: boolean;
 }

packages/types/src/json.ts

@@ -712,8 +712,8 @@ export interface CommerceCheckoutJSON extends ClerkResourceJSON {
   payment_source?: CommercePaymentSourceJSON;
   plan: CommercePlanJSON;
   plan_period: CommerceSubscriptionPlanPeriod;
+  plan_period_start?: number;
   status: string;
-  subscription?: CommerceSubscriptionJSON;
   totals: CommerceCheckoutTotalsJSON;
   is_immediate_plan_change: boolean;
 }