feat(console): add billing history page (#8129)

* feat(console): add billing history page

add billing history page

* fix(cloud): fix index key

fix index key

Co-authored-by: Copilot <[email protected]>

* refactor(console): add useMemo wrapper

add useMemo wrapper

---------

Co-authored-by: Copilot <[email protected]>

Author: simeng-li

packages/connectors/connector-logto-email/package.json

@@ -52,7 +52,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@logto/cloud": "0.2.5-2553f41",
+    "@logto/cloud": "0.2.5-acaf5b8",
     "@silverhand/eslint-config": "6.0.1",
     "@silverhand/ts-config": "6.0.0",
     "@types/node": "^22.14.0",

packages/console/package.json

@@ -28,7 +28,7 @@
     "@fontsource/roboto-mono": "^5.0.0",
     "@inkeep/cxkit-react": "^0.5.66",
     "@jest/types": "^29.5.0",
-    "@logto/cloud": "0.2.5-2553f41",
+    "@logto/cloud": "0.2.5-acaf5b8",
     "@logto/connector-kit": "workspace:^",
     "@logto/core-kit": "workspace:^",
     "@logto/language-kit": "workspace:^",

packages/console/src/cloud/types/router.ts

@@ -73,3 +73,7 @@ export type LogtoEnterpriseResponse = GetArrayElementType<
 export type LogtoEnterpriseSubscriptionResponse = GuardedResponse<
   GetRoutes['/api/me/logto-enterprises/:id']
 >;
+
+export type LogtoEnterpriseSubscriptionInvoiceResponse = GetArrayElementType<
+  GuardedResponse<GetRoutes['/api/me/logto-enterprises/:id/invoices']>['invoices']
+>;

packages/console/src/pages/EnterpriseSubscription/BillingHistory/index.tsx

@@ -1,5 +1,98 @@
+import { type ResponseError } from '@withtyped/client';
+import dayjs from 'dayjs';
+import { useCallback, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import useSWR from 'swr';
+
+import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
+import { type LogtoEnterpriseSubscriptionInvoiceResponse } from '@/cloud/types/router';
+import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
+import ItemPreview from '@/components/ItemPreview';
+import PageMeta from '@/components/PageMeta';
+import DynamicT from '@/ds-components/DynamicT';
+import Table from '@/ds-components/Table';
+import InvoiceStatusTag from '@/pages/TenantSettings/BillingHistory/InvoiceStatusTag';
+import { formatPeriod } from '@/utils/subscription';
+
 function BillingHistory() {
-  return <div>Enterprise Billing History Page</div>;
+  const { logtoEnterpriseId = '' } = useParams();
+  const cloudApi = useCloudApi();
+
+  const { data, isLoading } = useSWR<
+    { invoices: LogtoEnterpriseSubscriptionInvoiceResponse[] },
+    ResponseError
+  >(logtoEnterpriseId && `/api/me/logto-enterprises/${logtoEnterpriseId}/invoices`, async () =>
+    cloudApi.get(`/api/me/logto-enterprises/:id/invoices`, {
+      params: { id: logtoEnterpriseId },
+    })
+  );
+
+  // Filter out draft invoices
+  const invoices = useMemo(
+    () => (data?.invoices ?? []).filter(({ status }) => status !== 'draft'),
+    [data?.invoices]
+  );
+
+  const openStripeHostedInvoicePage = useCallback(
+    async (invoiceId: string) => {
+      const { hostedInvoiceUrl } = await cloudApi.get(
+        '/api/me/logto-enterprises/:enterpriseId/invoices/:invoiceId/hosted-invoice-url',
+        {
+          params: { enterpriseId: logtoEnterpriseId, invoiceId },
+        }
+      );
+
+      window.open(hostedInvoiceUrl, '_blank');
+    },
+    [cloudApi, logtoEnterpriseId]
+  );
+
+  return (
+    <div>
+      <PageMeta titleKey={['tenants.tabs.billing_history', 'tenants.title']} />
+      <Table
+        rowGroups={[{ key: 'invoices', data: invoices }]}
+        rowIndexKey="id"
+        columns={[
+          {
+            title: <DynamicT forKey="subscription.billing_history.invoice_column" />,
+            dataIndex: 'basicSkuId',
+            render: ({ periodStart, periodEnd }) => {
+              return (
+                <ItemPreview title={formatPeriod({ periodStart, periodEnd, displayYear: true })} />
+              );
+            },
+          },
+          {
+            title: <DynamicT forKey="subscription.billing_history.status_column" />,
+            dataIndex: 'status',
+            render: ({ status }) => {
+              return <InvoiceStatusTag status={status} />;
+            },
+          },
+          {
+            title: <DynamicT forKey="subscription.billing_history.amount_column" />,
+            dataIndex: 'amountPaid',
+            render: ({ amountPaid }) => {
+              return `$${(amountPaid / 100).toFixed(2)}`;
+            },
+          },
+          {
+            title: <DynamicT forKey="subscription.billing_history.invoice_created_date_column" />,
+            dataIndex: 'createdAt',
+            render: ({ createdAt }) => {
+              return dayjs(createdAt).format('MMMM DD, YYYY');
+            },
+          },
+        ]}
+        isLoading={isLoading}
+        placeholder={<EmptyDataPlaceholder />}
+        rowClickHandler={({ id }) => {
+          void openStripeHostedInvoicePage(id);
+        }}
+      />
+    </div>
+  );
 }
 
 export default BillingHistory;

packages/core/package.json

@@ -101,7 +101,7 @@
     "zod": "3.24.3"
   },
   "devDependencies": {
-    "@logto/cloud": "0.2.5-2553f41",
+    "@logto/cloud": "0.2.5-acaf5b8",
     "@silverhand/eslint-config": "6.0.1",
     "@silverhand/ts-config": "6.0.0",
     "@types/adm-zip": "^0.5.5",