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.

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.

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>
  );
}

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.

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;