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

Reusable react components for payment kit v2

# 履歴コンポーネント

`@blocklet/payment-react`ライブラリは、ユーザーが過去のアクティビティを明確かつ詳細に確認できるように設計された一連の履歴コンポーネントを提供します。これらのコンポーネントは、ユーザーが請求、支払い、クレジットの使用状況を追跡する必要がある顧客ポータル、アカウントダッシュボード、および管理インターフェースの構築に不可欠です。

これらのコンポーネントは、支払いサービスから直接データを取得して表示するため、複雑なデータ取得およびレンダリングロジックをゼロから構築することなく、履歴情報をシームレスに提示できます。

<x-cards data-columns="2">
  <x-card data-title="CustomerInvoiceList" data-icon="lucide:receipt-text" data-href="/components/history/invoice-list">
    顧客の請求書リストまたはテーブルをレンダリングし、ステータス、金額、作成日の詳細を含みます。
  </x-card>
  <x-card data-title="CustomerPaymentList" data-icon="lucide:credit-card" data-href="/components/history/payment-list">
    顧客の完全な支払い履歴を表示し、取引詳細、支払い方法、ステータスを含みます。
  </x-card>
  <x-card data-title="CreditGrantsList" data-icon="lucide:award" data-href="/components/history/credit-grants-list">
    顧客のすべてのクレジット付与のリストを表示し、ステータス、残額、有効日を詳述します。
  </x-card>
  <x-card data-title="CreditTransactionsList" data-icon="lucide:history" data-href="/components/history/credit-transactions-list">
    個々のすべてのクレジット取引をリスト表示し、クレジットの使用状況と経時的な調整の詳細なログを提供します。
  </x-card>
</x-cards>

## 一般的なユースケース

一般的なユースケースは、ユーザーのアカウントページに「請求履歴」セクションを作成することです。タブ付きインターフェースを使用して、請求書、支払い、クレジットなどの異なる履歴ビューを切り替えることができます。

以下は、そのようなページを構成する方法の概念的な例です。

```jsx MyBillingPage.tsx icon=lucide:user
import React from 'react';
import { CustomerInvoiceList, CustomerPaymentList } from '@blocklet/payment-react';

// セッションまたはコンテキストから顧客IDを取得していると仮定します
const customerId = 'cus_xxxxxxxxxxxxxx';

export default function MyBillingPage() {
  // 実際のアプリケーションでは、stateを使用してアクティブなタブを管理します
  const [activeTab, setActiveTab] = React.useState('invoices');

  return (
    <div>
      <h1>Billing History</h1>
      <nav>
        <button onClick={() => setActiveTab('invoices')}>Invoices</button>
        <button onClick={() => setActiveTab('payments')}>Payments</button>
      </nav>

      <div style={{ marginTop: '20px' }}>
        {activeTab === 'invoices' && (
          <CustomerInvoiceList 
            customer_id={customerId} 
            type="table" 
          />
        )}
        {activeTab === 'payments' && (
          <CustomerPaymentList 
            customer_id={customerId} 
          />
        )}
      </div>
    </div>
  );
}
```

この例は、履歴コンポーネントを簡単に埋め込むことで、包括的なセルフサービスの請求情報をユーザーに提供する方法を示しています。各コンポーネントは、独自のデータ取得、ページネーション、および表示ロジックを処理します。

各コンポーネントの詳細なドキュメントを参照して、その特定のプロパティとカスタマイズオプションを理解してください。