feat(clerk-js,types,localizations): Statements UI

.changeset/pretty-chairs-spend.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add new Billing Statements UI to User and Org Profile

packages/clerk-js/bundlewatch.config.json

@@ -1,7 +1,7 @@
 {
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "594kB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "68KB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "68.2KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "110KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "104KB" },

packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

@@ -2,24 +2,24 @@ import type {
   ClerkPaginatedResponse,
   CommerceBillingNamespace,
   CommerceCheckoutJSON,
-  CommerceInvoiceJSON,
-  CommerceInvoiceResource,
   CommercePlanResource,
   CommerceProductJSON,
+  CommerceStatementJSON,
+  CommerceStatementResource,
   CommerceSubscriptionJSON,
   CommerceSubscriptionResource,
   CreateCheckoutParams,
-  GetInvoicesParams,
   GetPlansParams,
+  GetStatementsParams,
   GetSubscriptionsParams,
 } from '@clerk/types';
 
 import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOffsetSearchParams';
 import {
   BaseResource,
   CommerceCheckout,
-  CommerceInvoice,
   CommercePlan,
+  CommerceStatement,
   CommerceSubscription,
 } from '../../resources/internal';
 
@@ -55,19 +55,20 @@ export class CommerceBilling implements CommerceBillingNamespace {
     });
   };
 
-  getInvoices = async (params: GetInvoicesParams): Promise<ClerkPaginatedResponse<CommerceInvoiceResource>> => {
+  getStatements = async (params: GetStatementsParams): Promise<ClerkPaginatedResponse<CommerceStatementResource>> => {
     const { orgId, ...rest } = params;
 
     return await BaseResource._fetch({
-      path: orgId ? `/organizations/${orgId}/commerce/invoices` : `/me/commerce/invoices`,
+      path: orgId ? `/organizations/${orgId}/commerce/statements` : `/me/commerce/statements`,
       method: 'GET',
       search: convertPageToOffsetSearchParams(rest),
     }).then(res => {
-      const { data: invoices, total_count } = res?.response as unknown as ClerkPaginatedResponse<CommerceInvoiceJSON>;
+      const { data: statements, total_count } =
+        res?.response as unknown as ClerkPaginatedResponse<CommerceStatementJSON>;
 
       return {
         total_count,
-        data: invoices.map(invoice => new CommerceInvoice(invoice)),
+        data: statements.map(statement => new CommerceStatement(statement)),
       };
     });
   };

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

@@ -20,7 +20,7 @@ export class CommerceCheckout extends BaseResource implements CommerceCheckoutRe
   id!: string;
   externalClientSecret!: string;
   externalGatewayId!: string;
-  invoice_id!: string;
+  statement_id!: string;
   paymentSource?: CommercePaymentSource;
   plan!: CommercePlan;
   planPeriod!: CommerceSubscriptionPlanPeriod;
@@ -43,7 +43,7 @@ export class CommerceCheckout extends BaseResource implements CommerceCheckoutRe
     this.id = data.id;
     this.externalClientSecret = data.external_client_secret;
     this.externalGatewayId = data.external_gateway_id;
-    this.invoice_id = data.invoice_id;
+    this.statement_id = data.statement_id;
     this.paymentSource = data.payment_source ? new CommercePaymentSource(data.payment_source) : undefined;
     this.plan = new CommercePlan(data.plan);
     this.planPeriod = data.plan_period;

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

@@ -47,7 +47,7 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
     this.publiclyVisible = data.publicly_visible;
     this.slug = data.slug;
     this.avatarUrl = data.avatar_url;
-    this.features = data.features.map(feature => new CommerceFeature(feature));
+    this.features = (data.features || []).map(feature => new CommerceFeature(feature));
 
     return this;
   }

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

@@ -0,0 +1,88 @@
+import type {
+  CommerceMoney,
+  CommercePaymentChargeType,
+  CommercePaymentJSON,
+  CommercePaymentStatus,
+  CommerceStatementGroupJSON,
+  CommerceStatementJSON,
+  CommerceStatementResource,
+  CommerceStatementStatus,
+  CommerceStatementTotals,
+} from '@clerk/types';
+
+import { commerceMoneyFromJSON, commerceTotalsFromJSON } from '../../utils';
+import { BaseResource, CommercePaymentSource, CommerceSubscription } from './internal';
+
+export class CommerceStatement extends BaseResource implements CommerceStatementResource {
+  id!: string;
+  status!: CommerceStatementStatus;
+  timestamp!: number;
+  totals!: CommerceStatementTotals;
+  groups!: CommerceStatementGroup[];
+
+  constructor(data: CommerceStatementJSON) {
+    super();
+    this.fromJSON(data);
+  }
+
+  protected fromJSON(data: CommerceStatementJSON | null): this {
+    if (!data) {
+      return this;
+    }
+
+    this.id = data.id;
+    this.status = data.status;
+    this.timestamp = data.timestamp;
+    this.totals = commerceTotalsFromJSON(data.totals);
+    this.groups = data.groups.map(group => new CommerceStatementGroup(group));
+    return this;
+  }
+}
+
+export class CommerceStatementGroup {
+  id!: string;
+  timestamp!: number;
+  items!: CommercePayment[];
+
+  constructor(data: CommerceStatementGroupJSON) {
+    this.fromJSON(data);
+  }
+
+  protected fromJSON(data: CommerceStatementGroupJSON | null): this {
+    if (!data) {
+      return this;
+    }
+
+    this.id = data.id;
+    this.timestamp = data.timestamp;
+    this.items = data.items.map(item => new CommercePayment(item));
+    return this;
+  }
+}
+
+export class CommercePayment {
+  id!: string;
+  amount!: CommerceMoney;
+  paymentSource!: CommercePaymentSource;
+  subscription!: CommerceSubscription;
+  chargeType!: CommercePaymentChargeType;
+  status!: CommercePaymentStatus;
+
+  constructor(data: CommercePaymentJSON) {
+    this.fromJSON(data);
+  }
+
+  protected fromJSON(data: CommercePaymentJSON | null): this {
+    if (!data) {
+      return this;
+    }
+
+    this.id = data.id;
+    this.amount = commerceMoneyFromJSON(data.amount);
+    this.paymentSource = new CommercePaymentSource(data.payment_source);
+    this.subscription = new CommerceSubscription(data.subscription);
+    this.chargeType = data.charge_type;
+    this.status = data.status;
+    return this;
+  }
+}

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

@@ -1,12 +1,14 @@
 import type {
   CancelSubscriptionParams,
+  CommerceMoney,
   CommerceSubscriptionJSON,
   CommerceSubscriptionPlanPeriod,
   CommerceSubscriptionResource,
   CommerceSubscriptionStatus,
   DeletedObjectJSON,
 } from '@clerk/types';
 
+import { commerceMoneyFromJSON } from '../../utils';
 import { BaseResource, CommercePlan, DeletedObject } from './internal';
 
 export class CommerceSubscription extends BaseResource implements CommerceSubscriptionResource {
@@ -18,6 +20,10 @@ export class CommerceSubscription extends BaseResource implements CommerceSubscr
   periodStart!: number;
   periodEnd!: number;
   canceledAt!: number | null;
+  amount?: CommerceMoney;
+  credit?: {
+    amount: CommerceMoney;
+  };
   constructor(data: CommerceSubscriptionJSON) {
     super();
     this.fromJSON(data);
@@ -36,6 +42,8 @@ export class CommerceSubscription extends BaseResource implements CommerceSubscr
     this.periodStart = data.period_start;
     this.periodEnd = data.period_end;
     this.canceledAt = data.canceled_at;
+    this.amount = data.amount ? commerceMoneyFromJSON(data.amount) : undefined;
+    this.credit = data.credit && data.credit.amount ? { amount: commerceMoneyFromJSON(data.credit.amount) } : undefined;
     return this;
   }
 

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

@@ -6,7 +6,7 @@ export * from './AuthConfig';
 export * from './Client';
 export * from './CommerceCheckout';
 export * from './CommerceFeature';
-export * from './CommerceInvoice';
+export * from './CommerceStatement';
 export * from './CommercePaymentSource';
 export * from './CommercePlan';
 export * from './CommerceProduct';