Credits grants table

Overview

The Credit Grants Table widget provides visibility into all credit grants associated with a customer. It shows the origin of credits, their usage, and their current state in a structured table format.

Layout

• Received — timestamp when the grant was issued.
• Grant Type — type of credit (e.g., promotional, paid, subscription).
• State — current status of the grant (Available, Scheduled, Expired, Voided).
• Balance — remaining credits versus the original amount.
• Expires — expiration date, if applicable.

This widget is especially useful for distinguishing between purchased and promotional credits, tracking upcoming expirations, and auditing adjustments over time.

Customization

• Brand via the no-code widget designer.
• Use custom CSS when deeper styling is required.

Main Container Classes

• stigg-credit-grants-container — The main wrapper container for the entire CreditGrants widget
• stigg-credit-grants-card — The card container that wraps the table content

Table Classes

• stigg-credit-grants-table — The main table component
• stigg-credit-grants-table-error — Error state styling when the table fails to load
• stigg-credit-grants-table-empty — Empty state styling when there are no credit grants

Table Cell Content Classes

• stigg-credit-grants-effective-date — The “Received At” date column content
• stigg-credit-grants-grant-type — The “Grant Type” column content
• stigg-credit-grants-status-chip — The status chip component in the “Status” column
• stigg-credit-grants-balance — The “Balance” column content
• stigg-credit-grants-expiry-date — The “Expiry Date” column content

Snippet

import React from 'react';
import { StiggProvider, CreditGrants } from '@stigg/react-sdk';

function App() {
  return (
    <StiggProvider
      apiKey="your-stigg-api-key"
      customerId="customer-demo-01"
    >
      <div className="credit-widgets">
        {/* Credit Grants Table */}
        <CreditGrants
          currencyId="cred-type-ai-tokens" // Required: currency identifier
          
          // Optional: Custom column labels and messages
          localization={{
            receivedAt: "Grant Date",
            grantType: "Type",
            status: "Status",
            balance: "Amount",
            expiryDate: "Expires",
            emptyState: "No credit grants found for this currency",
            loadingState: "Loading grants...",
            errorState: "Unable to load credit grants"
          }}
        />
      </div>
    </StiggProvider>
  );
}

export default App;