feat(clerk-js,types,localizations): Payment history tab (#6075)

Author: aeliox

.changeset/brown-masks-admire.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add payment history tab to UserProfile and OrgProfile

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
     { "path": "./dist/clerk.browser.js", "maxSize": "69KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "106.1KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "106.3KB" },
     { "path": "./dist/vendors*.js", "maxSize": "39.8KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

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

@@ -2,13 +2,16 @@ import type {
   ClerkPaginatedResponse,
   CommerceBillingNamespace,
   CommerceCheckoutJSON,
+  CommercePaymentJSON,
+  CommercePaymentResource,
   CommercePlanResource,
   CommerceProductJSON,
   CommerceStatementJSON,
   CommerceStatementResource,
   CommerceSubscriptionJSON,
   CommerceSubscriptionResource,
   CreateCheckoutParams,
+  GetPaymentAttemptsParams,
   GetPlansParams,
   GetStatementsParams,
   GetSubscriptionsParams,
@@ -18,6 +21,7 @@ import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOff
 import {
   BaseResource,
   CommerceCheckout,
+  CommercePayment,
   CommercePlan,
   CommerceStatement,
   CommerceSubscription,
@@ -73,6 +77,25 @@ export class CommerceBilling implements CommerceBillingNamespace {
     });
   };
 
+  getPaymentAttempts = async (
+    params: GetPaymentAttemptsParams,
+  ): Promise<ClerkPaginatedResponse<CommercePaymentResource>> => {
+    const { orgId, ...rest } = params;
+
+    return await BaseResource._fetch({
+      path: orgId ? `/organizations/${orgId}/commerce/payment_attempts` : `/me/commerce/payment_attempts`,
+      method: 'GET',
+      search: convertPageToOffsetSearchParams(rest),
+    }).then(res => {
+      const { data: payments, total_count } = res as unknown as ClerkPaginatedResponse<CommercePaymentJSON>;
+
+      return {
+        total_count,
+        data: payments.map(payment => new CommercePayment(payment)),
+      };
+    });
+  };
+
   startCheckout = async (params: CreateCheckoutParams) => {
     const { orgId, ...rest } = params;
     const json = (

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

@@ -0,0 +1,46 @@
+import type {
+  CommerceMoney,
+  CommercePaymentChargeType,
+  CommercePaymentJSON,
+  CommercePaymentResource,
+  CommercePaymentStatus,
+} from '@clerk/types';
+
+import { commerceMoneyFromJSON } from '../../utils';
+import { BaseResource, CommercePaymentSource, CommerceSubscription } from './internal';
+
+export class CommercePayment extends BaseResource implements CommercePaymentResource {
+  id!: string;
+  amount!: CommerceMoney;
+  failedAt?: number;
+  paidAt?: number;
+  updatedAt!: number;
+  paymentSource!: CommercePaymentSource;
+  subscription!: CommerceSubscription;
+  subscriptionItem!: CommerceSubscription;
+  chargeType!: CommercePaymentChargeType;
+  status!: CommercePaymentStatus;
+
+  constructor(data: CommercePaymentJSON) {
+    super();
+    this.fromJSON(data);
+  }
+
+  protected fromJSON(data: CommercePaymentJSON | null): this {
+    if (!data) {
+      return this;
+    }
+
+    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.paymentSource = new CommercePaymentSource(data.payment_source);
+    this.subscription = new CommerceSubscription(data.subscription);
+    this.subscriptionItem = new CommerceSubscription(data.subscription_item);
+    this.chargeType = data.charge_type;
+    this.status = data.status;
+    return this;
+  }
+}

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

@@ -1,17 +1,13 @@
 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';
+import { commerceTotalsFromJSON } from '../../utils';
+import { BaseResource, CommercePayment } from './internal';
 
 export class CommerceStatement extends BaseResource implements CommerceStatementResource {
   id!: string;
@@ -59,30 +55,3 @@ export class CommerceStatementGroup {
     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/internal.ts

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

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

@@ -7,14 +7,15 @@ import { Protect } from '../../common';
 import { SubscriberTypeContext } from '../../contexts';
 import { Col, descriptors, localizationKeys } from '../../customizables';
 import { useTabState } from '../../hooks/useTabState';
+import { PaymentAttemptsList } from '../PaymentAttempts';
 import { PaymentSources } from '../PaymentSources';
 import { StatementsList } from '../Statements';
 import { SubscriptionsList } from '../Subscriptions';
 
 const orgTabMap = {
-  0: 'plans',
+  0: 'subscriptions',
   1: 'statements',
-  2: 'payment-methods',
+  2: 'payments',
 } as const;
 
 const OrganizationBillingPageInternal = withCardStateProvider(() => {
@@ -50,6 +51,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
               localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__subscriptions')}
             />
             <Tab localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__statements')} />
+            <Tab localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__payments')} />
           </TabsList>
           <TabPanels>
             <TabPanel sx={{ width: '100%', flexDirection: 'column' }}>
@@ -69,6 +71,9 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
             <TabPanel sx={{ width: '100%' }}>
               <StatementsList />
             </TabPanel>
+            <TabPanel sx={{ width: '100%' }}>
+              <PaymentAttemptsList />
+            </TabPanel>
           </TabPanels>
         </Tabs>
       </Col>

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

@@ -0,0 +1,10 @@
+import { SubscriberTypeContext } from '../../contexts';
+import { PaymentAttemptPage } from '../PaymentAttempts';
+
+export const OrganizationPaymentAttemptPage = () => {
+  return (
+    <SubscriberTypeContext.Provider value='org'>
+      <PaymentAttemptPage />
+    </SubscriberTypeContext.Provider>
+  );
+};

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

@@ -6,6 +6,7 @@ import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Route, Switch } from '../../router';
 import { OrganizationGeneralPage } from './OrganizationGeneralPage';
 import { OrganizationMembers } from './OrganizationMembers';
+import { OrganizationPaymentAttemptPage } from './OrganizationPaymentAttemptPage';
 import { OrganizationPlansPage } from './OrganizationPlansPage';
 import { OrganizationStatementPage } from './OrganizationStatementPage';
 
@@ -85,6 +86,12 @@ export const OrganizationProfileRoutes = () => {
                     <OrganizationStatementPage />
                   </Suspense>
                 </Route>
+                <Route path='payment-attempt/:paymentAttemptId'>
+                  {/* TODO(@commerce): Should this be lazy loaded ? */}
+                  <Suspense fallback={''}>
+                    <OrganizationPaymentAttemptPage />
+                  </Suspense>
+                </Route>
               </Switch>
             </Route>
           </Protect>