CreditTransactionsList

CreditTransactionsList 元件會呈現一個詳細且分頁的所有點數交易表格，提供清晰的點數使用和調整記錄。它非常適合在客戶入口網站或管理儀表板中使用，以追蹤點數如何授予和消耗。

此元件會自動處理資料擷取、分頁和格式化，提供一種直接顯示交易歷史記錄的方法。

屬性

屬性	類型	說明	預設值
`customer_id`	`string`	要顯示其交易的客戶 ID。如果未提供，則預設為來自 `PaymentProvider` 上下文的當前登入使用者的 DID。	`session.user.did`
`subscription_id`	`string`	將交易篩選至特定的訂閱。	`undefined`
`credit_grant_id`	`string`	將交易篩選至特定的點數授予。	`undefined`
`pageSize`	`number`	每頁顯示的交易數量。	`10`
`onTableDataChange`	`(data, prevData) => void`	當表格資料被擷取或更新時觸發的回呼函式。	`() => {}`
`showAdminColumns`	`boolean`	如果為 `true` 且使用者是管理員，則會顯示額外的欄位，例如「Meter Event」。	`false`
`showTimeFilter`	`boolean`	如果為 `true`，則會顯示日期範圍選擇器，以允許按日期篩選交易。	`false`
`source`	`string`	用於篩選交易的可選來源字串。	`''`
`mode`	`'dashboard' \| 'portal'`	決定相關項目（如點數授予）的連結結構。使用 `'dashboard'` 表示管理員視圖，使用 `'portal'` 表示客戶導向的視圖。	`'portal'`

客戶入口網站的基本用法

此範例展示了如何顯示當前登入使用者的點數交易歷史記錄。當 customer_id 被省略時，該元件會自動從 PaymentProvider 上下文中使用使用者的 DID。

MyCreditHistoryPage.tsx

import React from 'react';
import { CreditTransactionsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '../hooks/session-context'; // 您的會話上下文鉤子

function MyCreditHistoryPage() {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>正在載入會話...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h2>我的點數交易</h2>
      <CreditTransactionsList />
    </PaymentProvider>
  );
}

export default MyCreditHistoryPage;

帶有篩選功能的管理員視圖

對於管理員儀表板，您可以傳遞特定的 customer_id 並啟用管理員欄位和時間篩選器，以提供更強大、更詳細的使用者交易歷史記錄視圖。

CustomerDetailsPage.tsx

import React from 'react';
import { CreditTransactionsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '../hooks/session-context'; // 您的會話上下文鉤子

function CustomerDetailsPage({ customerId }) {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>正在載入會話...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h3>{customerId} 的交易歷史記錄</h3>
      <CreditTransactionsList
        customer_id={customerId}
        showAdminColumns={true}
        showTimeFilter={true}
        pageSize={20}
        mode="dashboard"
      />
    </PaymentProvider>
  );
}

export default CustomerDetailsPage;

顯示特定點數授予的交易

若要顯示特定點數授予如何被消耗的詳細日誌，請傳遞 credit_grant_id。這對於顯示單個點數授予詳細資訊的頁面非常有用。

CreditGrantDetailsPage.tsx

import React from 'react';
import { CreditTransactionsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '../hooks/session-context'; // 您的會話上下文鉤子

function CreditGrantDetailsPage({ grantId }) {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>正在載入會話...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h4>授予 {grantId} 的使用詳情</h4>
      <CreditTransactionsList credit_grant_id={grantId} />
    </PaymentProvider>
  );
}

export default CreditGrantDetailsPage;