chore(clerk-js,localizations): Tidy up some commerce localizations

.changeset/soft-toys-flow.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add localizations for some commerce strings, general cleanups

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
     { "path": "./dist/clerk.browser.js", "maxSize": "69.3KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "53KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "106.3KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "107.5KB" },
     { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
@@ -22,7 +22,7 @@
     { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" },
     { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" },
     { "path": "./dist/checkout*.js", "maxSize": "7.25KB" },
-    { "path": "./dist/paymentSources*.js", "maxSize": "9.15KB" },
+    { "path": "./dist/paymentSources*.js", "maxSize": "9.17KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" }

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

@@ -7,14 +7,15 @@ import type {
 } from '@clerk/types';
 
 import { commerceMoneyFromJSON } from '../../utils';
+import { unixEpochToDate } from '../../utils/date';
 import { BaseResource, CommercePaymentSource, CommerceSubscription } from './internal';
 
 export class CommercePayment extends BaseResource implements CommercePaymentResource {
   id!: string;
   amount!: CommerceMoney;
-  failedAt?: number;
-  paidAt?: number;
-  updatedAt!: number;
+  failedAt?: Date;
+  paidAt?: Date;
+  updatedAt!: Date;
   paymentSource!: CommercePaymentSource;
   subscription!: CommerceSubscription;
   subscriptionItem!: CommerceSubscription;
@@ -33,9 +34,9 @@ export class CommercePayment extends BaseResource implements CommercePaymentReso
 
     this.id = data.id;
     this.amount = commerceMoneyFromJSON(data.amount);
-    this.paidAt = data.paid_at;
-    this.failedAt = data.failed_at;
-    this.updatedAt = data.updated_at;
+    this.paidAt = data.paid_at ? unixEpochToDate(data.paid_at) : undefined;
+    this.failedAt = data.failed_at ? unixEpochToDate(data.failed_at) : undefined;
+    this.updatedAt = unixEpochToDate(data.updated_at);
     this.paymentSource = new CommercePaymentSource(data.payment_source);
     this.subscription = new CommerceSubscription(data.subscription);
     this.subscriptionItem = new CommerceSubscription(data.subscription_item);

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

@@ -88,7 +88,7 @@ export class CommerceInitializedPaymentSource extends BaseResource implements Co
 
     this.externalClientSecret = data.external_client_secret;
     this.externalGatewayId = data.external_gateway_id;
-    this.paymentMethodOrder = data.payment_method_order;
+    this.paymentMethodOrder = data.payment_method_order ?? ['card'];
     return this;
   }
 }

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

@@ -23,11 +23,10 @@ export class CommerceSettings extends BaseResource implements CommerceSettingsRe
       return this;
     }
 
-    // TODO(@commerce): Remove `?.` once we launch.
-    this.billing.stripePublishableKey = data?.billing?.stripe_publishable_key || '';
-    this.billing.enabled = data?.billing?.enabled || false;
-    this.billing.hasPaidUserPlans = data?.billing?.has_paid_user_plans || false;
-    this.billing.hasPaidOrgPlans = data?.billing?.has_paid_org_plans || false;
+    this.billing.stripePublishableKey = data.billing.stripe_publishable_key || '';
+    this.billing.enabled = data.billing.enabled || false;
+    this.billing.hasPaidUserPlans = data.billing.has_paid_user_plans || false;
+    this.billing.hasPaidOrgPlans = data.billing.has_paid_org_plans || false;
 
     return this;
   }

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

@@ -7,12 +7,13 @@ import type {
 } from '@clerk/types';
 
 import { commerceTotalsFromJSON } from '../../utils';
+import { unixEpochToDate } from '../../utils/date';
 import { BaseResource, CommercePayment } from './internal';
 
 export class CommerceStatement extends BaseResource implements CommerceStatementResource {
   id!: string;
   status!: CommerceStatementStatus;
-  timestamp!: number;
+  timestamp!: Date;
   totals!: CommerceStatementTotals;
   groups!: CommerceStatementGroup[];
 
@@ -28,7 +29,7 @@ export class CommerceStatement extends BaseResource implements CommerceStatement
 
     this.id = data.id;
     this.status = data.status;
-    this.timestamp = data.timestamp;
+    this.timestamp = unixEpochToDate(data.timestamp);
     this.totals = commerceTotalsFromJSON(data.totals);
     this.groups = data.groups.map(group => new CommerceStatementGroup(group));
     return this;
@@ -37,7 +38,7 @@ export class CommerceStatement extends BaseResource implements CommerceStatement
 
 export class CommerceStatementGroup {
   id!: string;
-  timestamp!: number;
+  timestamp!: Date;
   items!: CommercePayment[];
 
   constructor(data: CommerceStatementGroupJSON) {
@@ -50,7 +51,7 @@ export class CommerceStatementGroup {
     }
 
     this.id = data.id;
-    this.timestamp = data.timestamp;
+    this.timestamp = unixEpochToDate(data.timestamp);
     this.items = data.items.map(item => new CommercePayment(item));
     return this;
   }

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx

@@ -22,7 +22,9 @@ const OrganizationPlansPageInternal = () => {
           paddingBlockEnd: t.space.$4,
         })}
       >
-        <Header.BackLink onClick={() => void navigate('../', { searchParams: new URLSearchParams('tab=plans') })}>
+        <Header.BackLink
+          onClick={() => void navigate('../', { searchParams: new URLSearchParams('tab=subscriptions') })}
+        >
           <Header.Title
             localizationKey={localizationKeys('organizationProfile.plansPage.title')}
             textVariant='h2'