履歴コンポーネント

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

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

CustomerInvoiceList

顧客の請求書リストまたはテーブルをレンダリングし、ステータス、金額、作成日の詳細を含みます。

CustomerPaymentList

顧客の完全な支払い履歴を表示し、取引詳細、支払い方法、ステータスを含みます。

CreditGrantsList

顧客のすべてのクレジット付与のリストを表示し、ステータス、残額、有効日を詳述します。

CreditTransactionsList

個々のすべてのクレジット取引をリスト表示し、クレジットの使用状況と経時的な調整の詳細なログを提供します。

一般的なユースケース

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

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

MyBillingPage.tsx

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>
  );
}

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

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