Used to check for browser translation.
用于检测浏览器翻译。
ブラウザの翻訳を検出する
Components

CreditGrantsList

The CreditGrantsList component is designed to display a comprehensive list of credit grants associated with a specific customer. It presents key information such as the grant's status, remaining balance, scope, and effective dates in a clear, tabular format. This component is essential for both customers checking their credit balance and administrators managing credit grants.

This component must be used within a PaymentProvider to access the necessary session and context information.

Props#

The CreditGrantsList component accepts the following props to customize its behavior and filter the displayed data.

Prop

Type

Description

customer_id

string

The ID of the customer whose credit grants are to be displayed. If not provided, it defaults to the DID of the currently logged-in user.

subscription_id

string

Optional. Filters the credit grants to show only those associated with a specific subscription ID.

status

string

Optional. A comma-separated string of statuses to filter by. Defaults to 'granted,pending,depleted,expired'. Valid statuses include granted, pending, expired, depleted, and voided.

pageSize

number

Optional. The number of items to display per page. Defaults to 10.

onTableDataChange

(data, prevData) => void

Optional. A callback function that is invoked when the table's data is fetched or updated. It receives the new and previous data sets as arguments.

mode

'dashboard' | 'portal'

Optional. Determines the navigation behavior. In 'dashboard' mode (for admins), links navigate to admin-specific routes. In 'portal' mode (for customers), links navigate to customer-facing routes.

Usage Example#

Here is an example of how to implement the CreditGrantsList component to display the credit grants for a specific customer.

import React from 'react';
import { PaymentProvider } from '@blocklet/payment-react';
import CreditGrantsList from '@blocklet/payment-react/lib/components/history/credit-grants-list';

const MyCreditGrantsPage = () => {
const customerId = 'cus_xxxxxxxxxxxxxx'; // Replace with a valid customer ID

return (
<PaymentProvider>
<div>
<h2>My Credit Grants</h2>
<CreditGrantsList customer_id={customerId} pageSize={5} />
</div>
</PaymentProvider>
);
};

export default MyCreditGrantsPage;

In this example, the CreditGrantsList is rendered inside a PaymentProvider. It is configured to display up to 5 credit grants for the customer specified by customerId.

Displayed Information#

The component renders a table with the following columns, providing a detailed overview of each credit grant:

  • Name: The name of the credit grant, or its ID if no name is provided.
  • Status: The current status of the grant (e.g., granted, pending, expired), displayed using a color-coded chip for easy identification.
  • Remaining Credit: The amount of credit still available in the grant, along with the currency symbol.
  • Scope: Indicates whether the credit is general (applicable to any charge) or specific (applicable only to certain prices).
  • Effective Date: The date and time when the credit grant becomes active.
  • Expiration Date: The date and time when the credit grant expires. A hyphen (-) is shown if there is no expiration date.

Each row in the table is clickable, navigating the user to a detailed view of that specific credit grant.

StatusChip Helper#

The CreditGrantsList utilizes an internal StatusChip component to visually represent the status of each grant. The colors are mapped as follows:

Status

Color

granted

Success

pending

Warning

expired

Default

depleted

Default

voided

Default


Next, you can explore how to display a detailed log of credit usage with the CreditTransactionsList component.

previous
CustomerPaymentList
next
CreditTransactionsList