@blocklet/payment-react 1.19.0 → 1.19.1

package/src/history/credit/grants-list.tsx

@@ -0,0 +1,276 @@
+/* eslint-disable @typescript-eslint/indent */
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { Paginated, TCreditGrantExpanded } from '@blocklet/payment-types';
+import { Box, Typography, Chip } from '@mui/material';
+import { useRequest } from 'ahooks';
+import React, { useEffect, useRef, useState } from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useNavigate } from 'react-router-dom';
+
+import { styled } from '@mui/system';
+import { formatBNStr, formatToDate } from '../../libs/util';
+import { usePaymentContext } from '../../contexts/payment';
+import api from '../../libs/api';
+import Table from '../../components/table';
+import { createLink, handleNavigation } from '../../libs/navigation';
+
+type Result = Paginated<TCreditGrantExpanded>;
+
+const fetchData = (params: Record<string, any> = {}): Promise<Result> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    if (params[key]) {
+      search.set(key, String(params[key]));
+    }
+  });
+
+  return api.get(`/api/credit-grants?${search.toString()}`).then((res: any) => res.data);
+};
+
+type Props = {
+  customer_id?: string;
+  subscription_id?: string;
+  status?: string;
+  pageSize?: number;
+  onTableDataChange?: Function;
+  mode?: 'dashboard' | 'portal';
+};
+
+export function StatusChip({ status, label }: { status: string; label?: string }) {
+  const getStatusColor = (statusValue: string) => {
+    switch (statusValue) {
+      case 'granted':
+        return 'success';
+      case 'pending':
+        return 'warning';
+      case 'expired':
+        return 'default';
+      case 'depleted':
+        return 'default';
+      case 'voided':
+        return 'default';
+      default:
+        return 'default';
+    }
+  };
+
+  return <Chip label={label || status} size="small" color={getStatusColor(status) as any} />;
+}
+
+const getLink = (grant: TCreditGrantExpanded, inDashboard: boolean) => {
+  let path = `/customer/credit-grant/${grant.id}`;
+  if (inDashboard) {
+    path = `/admin/customers/${grant.id}`;
+  }
+
+  return {
+    link: createLink(path),
+    connect: false,
+  };
+};
+
+const GrantsTable = React.memo((props: Props) => {
+  const { pageSize, status = '', customer_id, subscription_id, onTableDataChange } = props;
+  const listKey = 'credit-grants-table';
+  const { t, locale } = useLocaleContext();
+  const { session } = usePaymentContext();
+  const navigate = useNavigate();
+
+  const isAdmin = ['owner', 'admin'].includes(session?.user?.role || '');
+
+  const inDashboard = props.mode === 'dashboard' && isAdmin;
+
+  // 如果没有传入 customer_id，使用当前登录用户的 DID
+  const effectiveCustomerId = customer_id || session?.user?.did;
+
+  const [search, setSearch] = useState<{ pageSize: number; page: number }>({
+    pageSize: pageSize || 10,
+    page: 1,
+  });
+
+  const { loading, data = { list: [], count: 0 } } = useRequest(
+    () =>
+      fetchData({
+        ...search,
+        status,
+        customer_id: effectiveCustomerId,
+        subscription_id,
+      }),
+    {
+      refreshDeps: [search, status, effectiveCustomerId, subscription_id],
+    }
+  );
+
+  const prevData = useRef(data);
+
+  const handleLinkClick = (e: React.MouseEvent, grant: TCreditGrantExpanded) => {
+    const { link } = getLink(grant, inDashboard);
+    handleNavigation(e, link, navigate, { target: link.external ? '_blank' : '_self' });
+  };
+
+  useEffect(() => {
+    if (onTableDataChange) {
+      onTableDataChange(data, prevData.current);
+      prevData.current = data;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  const columns = [
+    {
+      label: t('common.name'),
+      name: 'name',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const grant = data?.list[index] as TCreditGrantExpanded;
+          return <Box onClick={(e) => handleLinkClick(e, grant)}>{grant.name || grant.id}</Box>;
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'status',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const grant = data?.list[index] as TCreditGrantExpanded;
+          return (
+            <Box onClick={(e) => handleLinkClick(e, grant)}>
+              <StatusChip status={grant.status} label={t(`admin.customer.creditGrants.status.${grant.status}`)} />
+            </Box>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.remainingCredit'),
+      name: 'remaining_amount',
+      align: 'right',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const grant = data?.list[index] as TCreditGrantExpanded;
+          return (
+            <Box onClick={(e) => handleLinkClick(e, grant)}>
+              <Typography variant="body2">
+                {formatBNStr(grant.remaining_amount, grant.paymentCurrency.decimal)} {grant.paymentCurrency.symbol}
+              </Typography>
+            </Box>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.scope'),
+      name: 'scope',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const grant = data?.list[index] as TCreditGrantExpanded;
+          let scope = 'general';
+          if (grant.applicability_config?.scope?.prices) {
+            scope = 'specific';
+          }
+          return (
+            <Box onClick={(e) => handleLinkClick(e, grant)}>
+              {scope === 'specific' ? t('common.specific') : t('common.general')}
+            </Box>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.effectiveDate'),
+      name: 'effective_at',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const grant = data?.list[index] as TCreditGrantExpanded;
+          const effectiveAt = grant.effective_at ? grant.effective_at * 1000 : grant.created_at;
+          return (
+            <Box onClick={(e) => handleLinkClick(e, grant)}>
+              {formatToDate(effectiveAt, locale, 'YYYY-MM-DD HH:mm')}
+            </Box>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.expirationDate'),
+      name: 'expires_at',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const grant = data?.list[index] as TCreditGrantExpanded;
+          return (
+            <Box onClick={(e) => handleLinkClick(e, grant)}>
+              <Typography variant="body2">
+                {grant.expires_at ? formatToDate(grant.expires_at * 1000, locale, 'YYYY-MM-DD HH:mm') : '-'}
+              </Typography>
+            </Box>
+          );
+        },
+      },
+    },
+  ];
+
+  const onTableChange = ({ page, rowsPerPage }: any) => {
+    if (search.pageSize !== rowsPerPage) {
+      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search.page !== page + 1) {
+      setSearch((x) => ({ ...x, page: page + 1 }));
+    }
+  };
+
+  return (
+    <TableRoot>
+      <Table
+        hasRowLink
+        durable={`__${listKey}__`}
+        durableKeys={['page', 'rowsPerPage', 'searchText']}
+        data={data.list}
+        columns={columns}
+        options={{
+          count: data.count,
+          page: search.page - 1,
+          rowsPerPage: search.pageSize,
+        }}
+        loading={loading}
+        onChange={onTableChange}
+        toolbar={false}
+        sx={{ mt: 2 }}
+        showMobile={false}
+        mobileTDFlexDirection="row"
+        emptyNodeText={t('admin.creditGrants.noGrants')}
+      />
+    </TableRoot>
+  );
+});
+
+const TableRoot = styled(Box)`
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      > div {
+        width: fit-content;
+        flex: inherit;
+        font-size: 14px;
+      }
+    }
+    .invoice-summary {
+      padding-right: 20px;
+    }
+  }
+`;
+export default function CreditGrantsList(rawProps: Props) {
+  const props = Object.assign(
+    {
+      customer_id: '',
+      subscription_id: '',
+      status: 'granted,pending,depleted,expired',
+      pageSize: 10,
+      onTableDataChange: () => {},
+    },
+    rawProps
+  );
+  return <GrantsTable {...props} />;
+}

package/src/history/credit/transactions-list.tsx

@@ -0,0 +1,317 @@
+/* eslint-disable @typescript-eslint/indent */
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { Paginated, TCreditTransactionExpanded } from '@blocklet/payment-types';
+import { Box, Typography, Stack, Link, Grid } from '@mui/material';
+import { useRequest } from 'ahooks';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useNavigate } from 'react-router-dom';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { joinURL } from 'ufo';
+import { styled } from '@mui/system';
+import DateRangePicker, { type DateRangeValue } from '../../components/date-range-picker';
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { formatBNStr, formatToDate, getPrefix } from '../../libs/util';
+import { usePaymentContext } from '../../contexts/payment';
+import api from '../../libs/api';
+import Table from '../../components/table';
+import { createLink, handleNavigation } from '../../libs/navigation';
+
+type Result = Paginated<TCreditTransactionExpanded>;
+
+const fetchData = (params: Record<string, any> = {}): Promise<Result> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    if (params[key]) {
+      search.set(key, String(params[key]));
+    }
+  });
+
+  return api.get(`/api/credit-transactions?${search.toString()}`).then((res: any) => res.data);
+};
+
+type Props = {
+  customer_id?: string;
+  subscription_id?: string;
+  credit_grant_id?: string;
+  pageSize?: number;
+  onTableDataChange?: Function;
+  showAdminColumns?: boolean;
+  showTimeFilter?: boolean;
+  source?: string;
+  mode?: 'dashboard' | 'portal';
+};
+
+const getGrantDetailLink = (grantId: string, inDashboard: boolean) => {
+  let path = `/customer/credit-grant/${grantId}`;
+  if (inDashboard) {
+    path = `/admin/customers/${grantId}`;
+  }
+
+  return {
+    link: createLink(path),
+    connect: false,
+  };
+};
+
+const TransactionsTable = React.memo((props: Props) => {
+  const {
+    pageSize,
+    customer_id,
+    subscription_id,
+    credit_grant_id,
+    onTableDataChange,
+    showAdminColumns = false,
+    showTimeFilter = false,
+    source,
+    mode = 'portal',
+  } = props;
+  const listKey = 'credit-transactions-table';
+  const { t, locale } = useLocaleContext();
+  const { session } = usePaymentContext();
+  const isAdmin = ['owner', 'admin'].includes(session?.user?.role || '');
+  const navigate = useNavigate();
+
+  // 如果没有传入 customer_id，使用当前登录用户的 DID
+  const effectiveCustomerId = customer_id || session?.user?.did;
+
+  const [search, setSearch] = useState<{
+    pageSize: number;
+    page: number;
+    start?: number;
+    end?: number;
+  }>({
+    pageSize: pageSize || 10,
+    page: 1,
+  });
+
+  const [filters, setFilters] = useState<DateRangeValue>({
+    start: undefined,
+    end: undefined,
+  });
+
+  const handleDateRangeChange = useCallback((newValue: DateRangeValue) => {
+    setFilters(newValue);
+    setSearch((prev) => ({
+      ...prev,
+      page: 1,
+      start: newValue.start || undefined,
+      end: newValue.end || undefined,
+    }));
+  }, []);
+
+  const { loading, data = { list: [], count: 0 } } = useRequest(
+    () =>
+      fetchData({
+        ...search,
+        customer_id: effectiveCustomerId,
+        subscription_id,
+        credit_grant_id,
+        source,
+      }),
+    {
+      refreshDeps: [search, effectiveCustomerId, subscription_id, credit_grant_id, source],
+    }
+  );
+
+  // 初始化时应用默认日期筛选
+  useEffect(() => {
+    if (showTimeFilter && !search.start && !search.end) {
+      handleDateRangeChange(filters);
+    }
+  }, [showTimeFilter, handleDateRangeChange, search.start, search.end, filters]);
+
+  const prevData = useRef(data);
+
+  useEffect(() => {
+    if (onTableDataChange) {
+      onTableDataChange(data, prevData.current);
+      prevData.current = data;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  const columns = [
+    {
+      label: t('common.creditAmount'),
+      name: 'credit_amount',
+      align: 'right',
+      width: 120,
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const transaction = data?.list[index] as TCreditTransactionExpanded;
+          const unit = transaction.meter?.unit || transaction.paymentCurrency.symbol;
+          return (
+            <Typography>
+              {formatBNStr(transaction.credit_amount, transaction.paymentCurrency.decimal)} {unit}
+            </Typography>
+          );
+        },
+      },
+    },
+    !credit_grant_id && {
+      label: t('common.creditGrant'),
+      name: 'credit_grant',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const transaction = data?.list[index] as TCreditTransactionExpanded;
+          return (
+            <Stack
+              direction="row"
+              spacing={1}
+              onClick={(e) => {
+                const link = getGrantDetailLink(transaction.credit_grant_id, isAdmin && mode === 'dashboard');
+                handleNavigation(e, link.link, navigate);
+              }}
+              sx={{
+                alignItems: 'center',
+              }}>
+              <Typography variant="body2" sx={{ color: 'text.link', cursor: 'pointer' }}>
+                {transaction.creditGrant.name || `Grant ${transaction.credit_grant_id.slice(-6)}`}
+              </Typography>
+            </Stack>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.description'),
+      name: 'subscription',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const transaction = data?.list[index] as TCreditTransactionExpanded;
+          return (
+            <Typography variant="body2">{transaction.subscription?.description || transaction.description}</Typography>
+          );
+        },
+      },
+    },
+    ...(showAdminColumns && isAdmin
+      ? [
+          {
+            label: t('common.meterEvent'),
+            name: 'meter_event',
+            options: {
+              customBodyRenderLite: (_: string, index: number) => {
+                const transaction = data?.list[index] as TCreditTransactionExpanded;
+                if (!transaction.meter) {
+                  return <Typography variant="body2">-</Typography>;
+                }
+                return (
+                  <Link href={joinURL(getPrefix(), `/admin/billing/${transaction.meter.id}`)}>
+                    <Typography variant="body2" sx={{ color: 'text.link' }}>
+                      {transaction.meter.event_name}
+                    </Typography>
+                  </Link>
+                );
+              },
+            },
+          },
+        ]
+      : []),
+    {
+      label: t('admin.creditTransactions.transactionDate'),
+      name: 'created_at',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const transaction = data?.list[index] as TCreditTransactionExpanded;
+          return (
+            <Typography variant="body2">
+              {formatToDate(transaction.created_at, locale, 'YYYY-MM-DD HH:mm:ss')}
+            </Typography>
+          );
+        },
+      },
+    },
+  ].filter(Boolean);
+
+  const onTableChange = ({ page, rowsPerPage }: any) => {
+    if (search.pageSize !== rowsPerPage) {
+      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search.page !== page + 1) {
+      setSearch((x) => ({ ...x, page: page + 1 }));
+    }
+  };
+
+  return (
+    <TableRoot>
+      {showTimeFilter && (
+        <Box sx={{ my: 2 }}>
+          <Box sx={{ mt: 2 }}>
+            <Grid
+              container
+              spacing={2}
+              sx={{
+                alignItems: 'center',
+              }}>
+              <Grid
+                size={{
+                  xs: 12,
+                  sm: 6,
+                  md: 4,
+                }}>
+                <DateRangePicker value={filters} onChange={handleDateRangeChange} size="small" fullWidth />
+              </Grid>
+            </Grid>
+          </Box>
+        </Box>
+      )}
+      <Table
+        hasRowLink
+        durable={`__${listKey}__`}
+        durableKeys={['page', 'rowsPerPage']}
+        data={data.list}
+        columns={columns}
+        options={{
+          count: data.count,
+          page: search.page - 1,
+          rowsPerPage: search.pageSize,
+        }}
+        loading={loading}
+        onChange={onTableChange}
+        toolbar={false}
+        sx={{ mt: 2 }}
+        showMobile={false}
+        mobileTDFlexDirection="row"
+        emptyNodeText={t('admin.creditTransactions.noTransactions')}
+      />
+    </TableRoot>
+  );
+});
+
+const TableRoot = styled(Box)`
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      > div {
+        width: fit-content;
+        flex: inherit;
+        font-size: 14px;
+      }
+    }
+    .invoice-summary {
+      padding-right: 20px;
+    }
+  }
+`;
+export default function CreditTransactionsList(rawProps: Props) {
+  const props = Object.assign(
+    {
+      customer_id: '',
+      subscription_id: '',
+      credit_grant_id: '',
+      source: '',
+      pageSize: 10,
+      onTableDataChange: () => {},
+      showAdminColumns: false,
+      showTimeFilter: false,
+      mode: 'portal',
+    },
+    rawProps
+  );
+  return <TransactionsTable {...props} />;
+}

package/src/history/invoice/list.tsx

@@ -8,7 +8,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { Paginated, TInvoiceExpanded, TSubscription } from '@blocklet/payment-types';
 import { OpenInNewOutlined } from '@mui/icons-material';
-import { Box, Button, CircularProgress, Stack, Typography, Tooltip } from '@mui/material';
+import { Box, Button, CircularProgress, Stack, Typography, Tooltip, Avatar } from '@mui/material';
 import { styled } from '@mui/system';
 import { useInfiniteScroll, useRequest, useSetState } from 'ahooks';
 import React, { useEffect, useRef, useState } from 'react';
@@ -207,6 +207,23 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
         },
       },
     },
+    {
+      label: t('common.paymentMethod'),
+      name: 'paymentMethod',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          return (
+            <Typography
+              sx={{ display: 'flex', alignItems: 'center', whiteSpace: 'nowrap' }}
+              onClick={(e) => handleLinkClick(e, invoice)}>
+              <Avatar src={invoice.paymentMethod.logo} sx={{ width: 18, height: 18, mr: 1 }} />
+              {invoice.paymentMethod.name}
+            </Typography>
+          );
+        },
+      },
+    },
     {
       label: t('common.type'),
       name: 'billing_reason',

package/src/index.ts

@@ -5,6 +5,7 @@ import TxGas from './components/blockchain/gas';
 import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
+import FormLabel from './components/label';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
 import Table from './components/table';
@@ -13,6 +14,8 @@ import Status from './components/status';
 import Switch from './components/switch-button';
 import CustomerInvoiceList from './history/invoice/list';
 import CustomerPaymentList from './history/payment/list';
+import CreditGrantsList, { StatusChip as CreditStatusChip } from './history/credit/grants-list';
+import CreditTransactionsList from './history/credit/transactions-list';
 import api from './libs/api';
 import dayjs from './libs/dayjs';
 import Amount from './payment/amount';
@@ -32,6 +35,7 @@ import OverdueInvoicePayment from './components/over-due-invoice-payment';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
 import LoadingButton from './components/loading-button';
 import ResumeSubscription from './components/resume-subscription';
+import DateRangePicker from './components/date-range-picker';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -55,6 +59,7 @@ export {
   api,
   dayjs,
   FormInput,
+  FormLabel,
   PhoneInput,
   AddressForm,
   StripeForm,
@@ -86,4 +91,8 @@ export {
   LoadingButton,
   DonateDetails,
   ResumeSubscription,
+  CreditGrantsList,
+  CreditTransactionsList,
+  DateRangePicker,
+  CreditStatusChip,
 };

package/src/libs/util.ts

@@ -1283,3 +1283,17 @@ export function getTokenBalanceLink(method: TPaymentMethod, address: string) {
   }
   return '';
 }
+
+export function isCreditMetered(price: TPrice): boolean {
+  return !!(price.type === 'recurring' && price.recurring?.usage_type === 'metered' && price.recurring?.meter_id);
+}
+
+export function showStaking(method: TPaymentMethod, currency: TPaymentCurrency, noStake: boolean) {
+  if (noStake) {
+    return false;
+  }
+  if (method.type === 'arcblock') {
+    return currency.type !== 'credit';
+  }
+  return true;
+}