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

Reusable react components for payment kit v2

# CreditGrantsList

The `CreditGrantsList` component renders a paginated table displaying a customer's credit grants. It provides a clear overview of each grant's status, remaining balance, scope, and validity period.

This component is essential for both customer-facing portals where users can track their available credits and admin dashboards for managing customer grants. It must be used within a `PaymentProvider` to access the necessary session and API context.

## Props

| Prop | Type | Description | Default |
| --- | --- | --- | --- |
| `customer_id` | `string` | Optional. The ID of the customer. If omitted, it defaults to the DID of the currently authenticated user from the session context. | `session.user.did` |
| `subscription_id` | `string` | Optional. Filters the list to show only grants associated with a specific subscription. | `''` |
| `status` | `string` | Optional. A comma-separated string of statuses to filter by. Valid statuses include `granted`, `pending`, `expired`, `depleted`, and `voided`. | `'granted,pending,depleted,expired'` |
| `pageSize` | `number` | Optional. The number of items to display per page. | `10` |
| `onTableDataChange` | `(data, prevData) => void` | Optional. A callback function that is invoked whenever the table data is fetched or updated. | `() => {}` |
| `mode` | `'dashboard' \| 'portal'` | Optional. Determines the navigation behavior when a row is clicked. Use `'portal'` for customer-facing views and `'dashboard'` for admin panels, which generates different link paths. | `'portal'` |

## Usage

### Basic Usage (For Logged-in Customer)

By default, the `CreditGrantsList` component fetches and displays the credit grants for the currently authenticated user. This is the most common use case for a customer's account page.

```jsx My Credit Grants icon=logos:react
import { CreditGrantsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '/path/to/your/session/context'; // Adjust this import path

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

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

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h2>My Credit Grants</h2>
      <CreditGrantsList />
    </PaymentProvider>
  );
}
```

### Admin or Dashboard Usage

In an administrative dashboard, you can display the credit grants for any customer by providing the `customer_id` prop. You can also customize the filters and page size.

```jsx Customer Credit Grants icon=logos:react
import { CreditGrantsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '/path/to/your/session/context'; // Adjust this import path

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

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

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h3>Active Credit Grants for Customer</h3>
      <CreditGrantsList
        customer_id={customerId}
        status="granted,pending"
        pageSize={5}
        mode="dashboard"
      />
    </PaymentProvider>
  );
}
```

This example shows how to list only the 'granted' and 'pending' grants for a specific customer, displaying 5 items per page. The `mode="dashboard"` ensures that clicking a grant will navigate to an admin-specific URL.