Skip to main content

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

PropTypeDescriptionDefault
customer_idstringOptional. 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_idstringOptional. Filters the list to show only grants associated with a specific subscription.''
statusstringOptional. A comma-separated string of statuses to filter by. Valid statuses include granted, pending, expired, depleted, and voided.'granted,pending,depleted,expired'
pageSizenumberOptional. The number of items to display per page.10
onTableDataChange(data, prevData) => voidOptional. 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

jsx
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

jsx
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.