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.

My Credit Grants

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.

Customer Credit Grants

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.

CustomerPaymentList
CreditTransactionsList