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',