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

Reusable react components for payment kit v2

# CreditTransactionsList

`CreditTransactionsList`コンポーネントは、すべてのクレジット取引の詳細なページ分割テーブルを描画し、クレジットの使用状況と調整の明確なログを提供します。顧客ポータルや管理ダッシュボードで、クレジットの付与と消費を追跡するのに最適です。

このコンポーネントは、データの取得、ページネーション、フォーマットを自動的に処理し、取引履歴を簡単に表示する方法を提供します。

## Props

| Prop | Type | Description | Default |
| --- | --- | --- | --- |
| `customer_id` | `string` | 取引を表示する顧客のID。指定しない場合は、`PaymentProvider`コンテキストから現在ログインしているユーザーのDIDがデフォルト値になります。 | `session.user.did` |
| `subscription_id` | `string` | 取引を特定のサブスクリプションに絞り込みます。 | `undefined` |
| `credit_grant_id` | `string` | 取引を特定のクレジット付与に絞り込みます。 | `undefined` |
| `pageSize` | `number` | 1ページに表示する取引の数。 | `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;
```