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

Reusable react components for payment kit v2

# CreditGrantsList

`CreditGrantsList` 组件渲染一个分页表格，用于显示客户的信用额度授予情况。它清晰地概述了每笔授予的状态、剩余额度、范围和有效期。

该组件对于面向客户的门户（用户可以在其中跟踪其可用信用额度）和用于管理客户授予的管理仪表板都至关重要。它必须在 `PaymentProvider` 内部使用，以访问必要的会话和 API 上下文。

## Props

| Prop | Type | Description | Default |
| --- | --- | --- | --- |
| `customer_id` | `string` | 可选。客户的 ID。如果省略，则默认为会话上下文中当前已认证用户的 DID。 | `session.user.did` |
| `subscription_id` | `string` | 可选。筛选列表，仅显示与特定订阅关联的授予。 | `''` |
| `status` | `string` | 可选。一个用逗号分隔的状态字符串，用于筛选。有效状态包括 `granted`、`pending`、`expired`、`depleted` 和 `voided`。 | `'granted,pending,depleted,expired'` |
| `pageSize` | `number` | 可选。每页显示的项目数。 | `10` |
| `onTableDataChange` | `(data, prevData) => void` | 可选。每当获取或更新表格数据时调用的回调函数。 | `() => {}` |
| `mode` | `'dashboard' \| 'portal'` | 可选。决定点击行时的导航行为。对面向客户的视图使用 `'portal'`，对管理面板使用 `'dashboard'`，这将生成不同的链接路径。 | `'portal'` |

## 用法

### 基本用法（针对已登录客户）

默认情况下，`CreditGrantsList` 组件会获取并显示当前已认证用户的信用额度授予。这是客户账户页面最常见的用例。

```jsx 我的信用额度授予 icon=logos:react
import { CreditGrantsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '/path/to/your/session/context'; // 调整此导入路径

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

  if (!session || !connectApi) {
    return <div>正在加载会话...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h2>我的信用额度授予</h2>
      <CreditGrantsList />
    </PaymentProvider>
  );
}
```

### 管理员或仪表板用法

在管理仪表板中，您可以通过提供 `customer_id` 属性来显示任何客户的信用额度授予。您还可以自定义筛选条件和页面大小。

```jsx 客户的信用额度授予 icon=logos:react
import { CreditGrantsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '/path/to/your/session/context'; // 调整此导入路径

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

  if (!session || !connectApi) {
    return <div>正在加载会话...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h3>客户的有效信用额度授予</h3>
      <CreditGrantsList
        customer_id={customerId}
        status="granted,pending"
        pageSize={5}
        mode="dashboard"
      />
    </PaymentProvider>
  );
}
```

此示例展示了如何仅列出特定客户的 'granted' 和 'pending' 状态的授予，每页显示 5 项。`mode="dashboard"` 确保了点击某项授予将导航至管理员专用的 URL。