@blocklet/payment-react/docs/components-history.zh-TW.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() {
  // 在實際應用中，您會使用狀態來管理當前的分頁
  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>
  );
}
```

這個範例展示了如何輕鬆嵌入歷史記錄元件，為您的使用者提供全面的自助式帳務資訊。每個元件都會處理自己的資料獲取、分頁和顯示邏輯。

探索每個元件的詳細文件，以了解其特定的 props 和自訂選項。