@blocklet/payment-react 1.19.0 → 1.19.2

package/src/components/input.tsx

@@ -1,9 +1,10 @@
 import React, { type ReactNode, useImperativeHandle, useRef } from 'react';
-import { Box, FormLabel, InputAdornment, TextField, Typography } from '@mui/material';
+import { Box, InputAdornment, TextField, Typography } from '@mui/material';
 import get from 'lodash/get';
 import { Controller, useFormContext } from 'react-hook-form';
 import type { TextFieldProps } from '@mui/material';
 import type { RegisterOptions } from 'react-hook-form';
+import FormLabel from './label';
 
 type InputProps = TextFieldProps & {
   name: string;
@@ -12,6 +13,9 @@ type InputProps = TextFieldProps & {
   errorPosition?: 'right' | 'bottom';
   rules?: RegisterOptions;
   wrapperStyle?: React.CSSProperties;
+  required?: boolean;
+  tooltip?: ReactNode | string;
+  description?: ReactNode | string;
 };
 
 function FormInputError({ error }: { error: string }) {
@@ -33,9 +37,12 @@ export default function FormInput({
   errorPosition = 'bottom',
   wrapperStyle = {},
   inputProps = {},
+  required = false,
+  tooltip = '',
+  description = '',
   ...rest
 }: InputProps & {
-  ref?: React.RefObject<HTMLInputElement>;
+  ref?: React.RefObject<HTMLInputElement | null>;
   inputProps?: TextFieldProps['inputProps'];
 }) {
   const { control, formState } = useFormContext();
@@ -52,7 +59,11 @@ export default function FormInput({
       rules={rules}
       render={({ field }) => (
         <Box sx={{ width: '100%', ...wrapperStyle }}>
-          {!!label && <FormLabel sx={{ color: 'text.primary' }}>{label}</FormLabel>}
+          {!!label && (
+            <FormLabel required={required} tooltip={tooltip} description={description}>
+              {label}
+            </FormLabel>
+          )}
           <TextField
             fullWidth
             error={!!get(formState.errors, name)}

package/src/components/label.tsx

@@ -0,0 +1,59 @@
+import { InfoOutlined } from '@mui/icons-material';
+import { Box, FormLabel, Tooltip, Typography } from '@mui/material';
+import type { FormLabelProps } from '@mui/material';
+import type { ReactNode } from 'react';
+
+export default function CustomFormLabel({
+  children,
+  required = false,
+  tooltip = '',
+  description = '',
+  ...props
+}: FormLabelProps & { required?: boolean; tooltip?: ReactNode | string; description?: ReactNode | string }) {
+  return (
+    <Box sx={{ mb: 1, width: '100%' }}>
+      <FormLabel
+        {...props}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5,
+          fontSize: '0.875rem',
+          fontWeight: 500,
+          color: 'text.primary',
+          '&.MuiFormLabel-root': {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            fontWeight: 500,
+            color: 'text.primary',
+          },
+          ...(props.sx || {}),
+        }}>
+        {children}
+        {required && (
+          <Typography component="span" color="error">
+            *
+          </Typography>
+        )}
+        {tooltip &&
+          (typeof tooltip === 'string' ? (
+            <Tooltip title={tooltip}>
+              <InfoOutlined fontSize="small" sx={{ opacity: 0.7, fontSize: '1rem' }} />
+            </Tooltip>
+          ) : (
+            tooltip
+          ))}
+      </FormLabel>
+      {description && (
+        <Typography
+          variant="caption"
+          sx={{
+            color: 'text.secondary',
+          }}>
+          {description}
+        </Typography>
+      )}
+    </Box>
+  );
+}

package/src/components/loading-button.tsx

@@ -28,7 +28,7 @@ export default function LoadingButton({
   sx,
   ...props
 }: LoadingButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.RefObject<HTMLButtonElement | null>;
 }) {
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (loading) {

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,316 @@
+/* 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',
+      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} />;
+}