feat(core): billing history pagination (#4787)

packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx

@@ -1,3 +1,4 @@
+import { Pagination } from '@affine/component/member-components';
 import {
   SettingHeader,
   SettingRow,
@@ -6,6 +7,7 @@ import {
 import {
   cancelSubscriptionMutation,
   createCustomerPortalMutation,
+  getInvoicesCountQuery,
   type InvoicesQuery,
   invoicesQuery,
   InvoiceStatus,
@@ -41,6 +43,8 @@ enum DescriptionI18NKey {
   Yearly = 'com.affine.payment.billing-setting.current-plan.description.yearly',
 }
 
+const INVOICE_PAGE_SIZE = 12;
+
 const getMessageKey = (
   plan: SubscriptionPlan,
   recurring: SubscriptionRecurring
@@ -334,27 +338,40 @@ const CancelSubscription = ({ loading }: { loading?: boolean }) => {
 
 const BillingHistory = () => {
   const t = useAFFiNEI18N();
+  const { data: invoicesCountQueryResult } = useQuery({
+    query: getInvoicesCountQuery,
+  });
+
+  const [skip, setSkip] = useState(0);
+
   const { data: invoicesQueryResult } = useQuery({
     query: invoicesQuery,
-    variables: {
-      skip: 0,
-      take: 12,
-    },
+    variables: { skip, take: INVOICE_PAGE_SIZE },
   });
 
   const invoices = invoicesQueryResult.currentUser?.invoices ?? [];
+  const invoiceCount = invoicesCountQueryResult.currentUser?.invoiceCount ?? 0;
 
   return (
-    <div className={styles.billingHistory}>
-      {invoices.length === 0 ? (
-        <p className={styles.noInvoice}>
-          {t['com.affine.payment.billing-setting.no-invoice']()}
-        </p>
-      ) : (
-        // TODO: pagination
-        invoices.map(invoice => (
-          <InvoiceLine key={invoice.id} invoice={invoice} />
-        ))
+    <div className={styles.history}>
+      <div className={styles.historyContent}>
+        {invoices.length === 0 ? (
+          <p className={styles.noInvoice}>
+            {t['com.affine.payment.billing-setting.no-invoice']()}
+          </p>
+        ) : (
+          invoices.map(invoice => (
+            <InvoiceLine key={invoice.id} invoice={invoice} />
+          ))
+        )}
+      </div>
+
+      {invoiceCount > INVOICE_PAGE_SIZE && (
+        <Pagination
+          totalCount={invoiceCount}
+          countPerPage={INVOICE_PAGE_SIZE}
+          onPageChange={skip => setSkip(skip)}
+        />
       )}
     </div>
   );

packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/style.css.ts

@@ -2,7 +2,15 @@ import { globalStyle, style } from '@vanilla-extract/css';
 
 export const subscription = style({});
 
-export const billingHistory = style({});
+export const history = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '24px',
+});
+export const historyContent = style({
+  width: '100%',
+});
 
 export const planCard = style({
   display: 'flex',

packages/frontend/graphql/src/graphql/index.ts

@@ -359,6 +359,19 @@ query getWorkspaces {
 }`,
 };
 
+export const getInvoicesCountQuery = {
+  id: 'getInvoicesCountQuery' as const,
+  operationName: 'getInvoicesCount',
+  definitionName: 'currentUser',
+  containsFile: false,
+  query: `
+query getInvoicesCount {
+  currentUser {
+    invoiceCount
+  }
+}`,
+};
+
 export const invoicesQuery = {
   id: 'invoicesQuery' as const,
   operationName: 'invoices',

packages/frontend/graphql/src/graphql/invoices-count.gql

@@ -0,0 +1,5 @@
+query getInvoicesCount {
+  currentUser {
+    invoiceCount
+  }
+}

packages/frontend/graphql/src/schema.ts

@@ -359,6 +359,13 @@ export type GetWorkspacesQuery = {
   workspaces: Array<{ __typename?: 'WorkspaceType'; id: string }>;
 };
 
+export type GetInvoicesCountQueryVariables = Exact<{ [key: string]: never }>;
+
+export type GetInvoicesCountQuery = {
+  __typename?: 'Query';
+  currentUser: { __typename?: 'UserType'; invoiceCount: number } | null;
+};
+
 export type InvoicesQueryVariables = Exact<{
   take: Scalars['Int']['input'];
   skip: Scalars['Int']['input'];
@@ -693,6 +700,11 @@ export type Queries =
       variables: GetWorkspacesQueryVariables;
       response: GetWorkspacesQuery;
     }
+  | {
+      name: 'getInvoicesCountQuery';
+      variables: GetInvoicesCountQueryVariables;
+      response: GetInvoicesCountQuery;
+    }
   | {
       name: 'invoicesQuery';
       variables: InvoicesQueryVariables;