@blocklet/payment-react/docs/components-history-credit-transactions-list.zh-TW.md

Reusable react components for payment kit v2

# CreditTransactionsList

`CreditTransactionsList` 元件會呈現一個詳細且分頁的所有點數交易表格，提供清晰的點數使用和調整記錄。它非常適合在客戶入口網站或管理儀表板中使用，以追蹤點數如何授予和消耗。

此元件會自動處理資料擷取、分頁和格式化，提供一種直接顯示交易歷史記錄的方法。

## 屬性

| 屬性 | 類型 | 說明 | 預設值 |
| --- | --- | --- | --- |
| `customer_id` | `string` | 要顯示其交易的客戶 ID。如果未提供，則預設為來自 `PaymentProvider` 上下文的當前登入使用者的 DID。 | `session.user.did` |
| `subscription_id` | `string` | 將交易篩選至特定的訂閱。 | `undefined` |
| `credit_grant_id` | `string` | 將交易篩選至特定的點數授予。 | `undefined` |
| `pageSize` | `number` | 每頁顯示的交易數量。 | `10` |
| `onTableDataChange` | `(data, prevData) => void` | 當表格資料被擷取或更新時觸發的回呼函式。 | `() => {}` |
| `showAdminColumns` | `boolean` | 如果為 `true` 且使用者是管理員，則會顯示額外的欄位，例如「Meter Event」。 | `false` |
| `showTimeFilter` | `boolean` | 如果為 `true`，則會顯示日期範圍選擇器，以允許按日期篩選交易。 | `false` |
| `source` | `string` | 用於篩選交易的可選來源字串。 | `''` |
| `mode` | `'dashboard' \| 'portal'` | 決定相關項目（如點數授予）的連結結構。使用 `'dashboard'` 表示管理員視圖，使用 `'portal'` 表示客戶導向的視圖。 | `'portal'` |

## 客戶入口網站的基本用法

此範例展示了如何顯示當前登入使用者的點數交易歷史記錄。當 `customer_id` 被省略時，該元件會自動從 `PaymentProvider` 上下文中使用使用者的 DID。

```jsx MyCreditHistoryPage.tsx icon=logos:react
import React from 'react';
import { CreditTransactionsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '../hooks/session-context'; // 您的會話上下文鉤子

function MyCreditHistoryPage() {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>正在載入會話...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h2>我的點數交易</h2>
      <CreditTransactionsList />
    </PaymentProvider>
  );
}

export default MyCreditHistoryPage;
```

## 帶有篩選功能的管理員視圖

對於管理員儀表板，您可以傳遞特定的 `customer_id` 並啟用管理員欄位和時間篩選器，以提供更強大、更詳細的使用者交易歷史記錄視圖。

```jsx CustomerDetailsPage.tsx icon=logos:react
import React from 'react';
import { CreditTransactionsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '../hooks/session-context'; // 您的會話上下文鉤子

function CustomerDetailsPage({ customerId }) {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>正在載入會話...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h3>{customerId} 的交易歷史記錄</h3>
      <CreditTransactionsList
        customer_id={customerId}
        showAdminColumns={true}
        showTimeFilter={true}
        pageSize={20}
        mode="dashboard"
      />
    </PaymentProvider>
  );
}

export default CustomerDetailsPage;
```

## 顯示特定點數授予的交易

若要顯示特定點數授予如何被消耗的詳細日誌，請傳遞 `credit_grant_id`。這對於顯示單個點數授予詳細資訊的頁面非常有用。

```jsx CreditGrantDetailsPage.tsx icon=logos:react
import React from 'react';
import { CreditTransactionsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '../hooks/session-context'; // 您的會話上下文鉤子

function CreditGrantDetailsPage({ grantId }) {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>正在載入會話...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h4>授予 {grantId} 的使用詳情</h4>
      <CreditTransactionsList credit_grant_id={grantId} />
    </PaymentProvider>
  );
}

export default CreditGrantDetailsPage;
```