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

Reusable react components for payment kit v2

# CreditTransactionsList

The `CreditTransactionsList` component renders a detailed and paginated table of all credit transactions, providing a clear log of credit usage and adjustments. It is ideal for use in customer portals or administrative dashboards to track how credits are granted and consumed.

This component automatically handles data fetching, pagination, and formatting, offering a straightforward way to display transaction history.

## Props

| Prop | Type | Description | Default |
| --- | --- | --- | --- |
| `customer_id` | `string` | The ID of the customer whose transactions are to be displayed. If not provided, it defaults to the DID of the currently logged-in user from the `PaymentProvider` context. | `session.user.did` |
| `subscription_id` | `string` | Filters the transactions to a specific subscription. | `undefined` |
| `credit_grant_id` | `string` | Filters the transactions to a specific credit grant. | `undefined` |
| `pageSize` | `number` | The number of transactions to display per page. | `10` |
| `onTableDataChange` | `(data, prevData) => void` | A callback function that is triggered when the table data is fetched or updated. | `() => {}` |
| `showAdminColumns` | `boolean` | If `true` and the user is an admin, additional columns like 'Meter Event' are shown. | `false` |
| `showTimeFilter` | `boolean` | If `true`, a date range picker is displayed to allow filtering transactions by date. | `false` |
| `source` | `string` | An optional source string to filter transactions. | `''` |
| `mode` | `'dashboard' \| 'portal'` | Determines the link structure for related items like credit grants. Use `'dashboard'` for admin views and `'portal'` for customer-facing views. | `'portal'` |

## Basic Usage for a Customer Portal

This example shows how to display the credit transaction history for the currently logged-in user. The component automatically uses the user's DID from the `PaymentProvider` context when `customer_id` is omitted.

```jsx MyCreditHistoryPage.tsx icon=logos:react
import React from 'react';
import { CreditTransactionsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '../hooks/session-context'; // Your session context hook

function MyCreditHistoryPage() {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>Loading session...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h2>My Credit Transactions</h2>
      <CreditTransactionsList />
    </PaymentProvider>
  );
}

export default MyCreditHistoryPage;
```

## Admin View with Filtering

For an admin dashboard, you can pass a specific `customer_id` and enable admin columns and time filters to provide a more powerful and detailed view of a user's transaction history.

```jsx CustomerDetailsPage.tsx icon=logos:react
import React from 'react';
import { CreditTransactionsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '../hooks/session-context'; // Your session context hook

function CustomerDetailsPage({ customerId }) {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>Loading session...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h3>Transaction History for {customerId}</h3>
      <CreditTransactionsList
        customer_id={customerId}
        showAdminColumns={true}
        showTimeFilter={true}
        pageSize={20}
        mode="dashboard"
      />
    </PaymentProvider>
  );
}

export default CustomerDetailsPage;
```

## Displaying Transactions for a Specific Credit Grant

To show a detailed log of how a particular credit grant was consumed, pass the `credit_grant_id`. This is useful for pages that show the details of a single credit grant.

```jsx CreditGrantDetailsPage.tsx icon=logos:react
import React from 'react';
import { CreditTransactionsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '../hooks/session-context'; // Your session context hook

function CreditGrantDetailsPage({ grantId }) {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>Loading session...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h4>Usage Details for Grant {grantId}</h4>
      <CreditTransactionsList credit_grant_id={grantId} />
    </PaymentProvider>
  );
}

export default CreditGrantDetailsPage;
```