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

Reusable react components for payment kit v2

# CreditGrantsList

`CreditGrantsList`コンポーネントは、顧客のクレジット付与を表示するページ分割されたテーブルを描画します。各付与のステータス、残高、範囲、および有効期間の明確な概要を提供します。

このコンポーネントは、ユーザーが利用可能なクレジットを追跡できる顧客向けポータルと、顧客の付与を管理するための管理者ダッシュボードの両方にとって不可欠です。必要なセッションとAPIコンテキストにアクセスするには、`PaymentProvider`内で使用する必要があります。

## 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` prop を提供することで、任意の顧客のクレジット付与を表示できます。フィルターやページサイズもカスタマイズできます。

```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」の付与のみをリスト表示し、1ページあたり5項目を表示する方法を示しています。`mode="dashboard"`は、付与をクリックすると管理者専用のURLにナビゲートすることを保証します。