payment-kit 1.18.56 → 1.19.1

package/src/pages/admin/billing/meters/index.tsx

@@ -0,0 +1,210 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { getDurableData } from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Status, api, formatTime, Table } from '@blocklet/payment-react';
+import { CircularProgress } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import useBus from 'use-bus';
+
+import { useLocalStorageState } from 'ahooks';
+import type { TMeter } from '@blocklet/payment-types';
+import MeterActions from '../../../../components/meter/actions';
+
+const fetchData = (params: Record<string, any> = {}): Promise<{ list: TMeter[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    let v = params[key];
+    if (key === 'q') {
+      v = Object.entries(v)
+        .map((x) => x.join(':'))
+        .join(' ');
+    }
+    search.set(key, String(v));
+  });
+  return api.get(`/api/meters?${search.toString()}`).then((res) => res.data);
+};
+
+type SearchProps = {
+  status: string;
+  pageSize: number;
+  page: number;
+  q?: any;
+  o?: string;
+};
+
+export default function MetersList() {
+  const listKey = 'meters';
+  const persisted = getDurableData(listKey);
+
+  const { t } = useLocaleContext();
+  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+    defaultValue: {
+      status: '',
+      pageSize: persisted.rowsPerPage || 20,
+      page: persisted.page ? persisted.page + 1 : 1,
+    },
+  });
+
+  const [data, setData] = useState({}) as any;
+
+  const refresh = () =>
+    fetchData(search).then((res: any) => {
+      setData(res);
+    });
+
+  useBus('meter.created', () => refresh(), []);
+
+  useEffect(() => {
+    refresh();
+  }, [search]);
+
+  if (!data.list) {
+    return <CircularProgress />;
+  }
+
+  const columns = [
+    {
+      label: t('admin.meter.name.label'),
+      name: 'name',
+      options: {
+        filter: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TMeter;
+          return <Link to={`/admin/billing/${item.id}`}>{item.name}</Link>;
+        },
+      },
+    },
+    {
+      label: t('admin.meter.eventName.label'),
+      name: 'event_name',
+      options: {
+        filter: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TMeter;
+          return <Link to={`/admin/billing/${item.id}`}>{item.event_name}</Link>;
+        },
+      },
+    },
+    {
+      label: t('admin.meter.unit.label'),
+      name: 'unit',
+      options: {
+        filter: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TMeter;
+          return <Link to={`/admin/billing/${item.id}`}>{item.unit}</Link>;
+        },
+      },
+    },
+    {
+      label: t('admin.meter.aggregationMethod.label'),
+      name: 'aggregation_method',
+      options: {
+        filter: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TMeter;
+          return (
+            <Link to={`/admin/billing/${item.id}`}>
+              {t(`admin.meter.aggregationMethod.${item.aggregation_method}`)}
+            </Link>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'status',
+      options: {
+        filter: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TMeter;
+          return (
+            <Link to={`/admin/billing/${item.id}`}>
+              <Status
+                label={item?.status === 'active' ? 'Active' : 'Inactive'}
+                color={item?.status === 'active' ? 'success' : 'default'}
+              />
+            </Link>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.createdAt'),
+      name: 'created_at',
+      options: {
+        sort: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TMeter;
+          return <Link to={`/admin/billing/${item.id}`}>{formatTime(item.created_at)}</Link>;
+        },
+      },
+    },
+    {
+      label: t('common.actions'),
+      name: 'id',
+      width: 100,
+      align: 'center',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const meter = data.list[index] as TMeter;
+          return <MeterActions data={meter} onChange={refresh} />;
+        },
+      },
+    },
+  ];
+
+  const onTableChange = ({ page, rowsPerPage }: any) => {
+    if (search!.pageSize !== rowsPerPage) {
+      setSearch((x: any) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search!.page !== page + 1) {
+      setSearch((x: any) => ({ ...x, page: page + 1 }));
+    }
+  };
+
+  return (
+    <Table
+      hasRowLink
+      durable={`__${listKey}__`}
+      durableKeys={['page', 'rowsPerPage', 'searchText']}
+      data={data.list}
+      columns={columns}
+      options={{
+        count: data.count,
+        page: search!.page - 1,
+        rowsPerPage: search!.pageSize,
+        onColumnSortChange(_: any, order: any) {
+          setSearch({
+            ...search!,
+            q: search!.q || {},
+            o: order,
+          });
+        },
+        onSearchChange: (text: string) => {
+          if (text) {
+            setSearch({
+              ...search!,
+              q: {
+                'like-name': text,
+                'like-event_name': text,
+              },
+              pageSize: 100,
+              page: 1,
+            });
+          } else {
+            setSearch({
+              ...search!,
+              pageSize: 100,
+              page: 1,
+              q: {},
+            });
+          }
+        },
+      }}
+      loading={!data.list}
+      onChange={onTableChange}
+    />
+  );
+}

package/src/pages/admin/billing/meters/meter-event.tsx

@@ -0,0 +1,346 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { api, formatTime, useMobile, CreditTransactionsList, formatBNStr } from '@blocklet/payment-react';
+import type { TMeterEventExpanded } from '@blocklet/payment-types';
+import { ArrowBackOutlined, InfoOutlined } from '@mui/icons-material';
+import { Alert, Box, CircularProgress, Divider, Stack, Typography, Chip, Tooltip } from '@mui/material';
+import { styled } from '@mui/system';
+import { useRequest } from 'ahooks';
+
+import { Link } from 'react-router-dom';
+import Copyable from '../../../../components/copyable';
+import CustomerLink from '../../../../components/customer/link';
+import EventList from '../../../../components/event/list';
+import InfoRow from '../../../../components/info-row';
+import InfoMetric from '../../../../components/info-metric';
+import SectionHeader from '../../../../components/section/header';
+import { goBackOrFallback } from '../../../../libs/util';
+import InfoRowGroup from '../../../../components/info-row-group';
+import MetadataList from '../../../../components/metadata/list';
+
+const fetchData = (id: string): Promise<TMeterEventExpanded> => {
+  return api.get(`/api/meter-events/${id}`).then((res: any) => res.data);
+};
+
+export default function MeterEventDetail(props: { id: string }) {
+  const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
+
+  const { loading, error, data } = useRequest(() => fetchData(props.id));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'pending':
+        return 'info';
+      case 'requires_action':
+        return 'warning';
+      case 'requires_capture':
+        return 'warning';
+      case 'completed':
+        return 'success';
+      case 'processing':
+        return 'info';
+      default:
+        return 'default';
+    }
+  };
+
+  return (
+    <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
+      <Box>
+        <Stack
+          className="page-header"
+          direction="row"
+          sx={{
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
+          <Stack
+            direction="row"
+            onClick={() => goBackOrFallback('/admin/billing/meters')}
+            sx={{
+              alignItems: 'center',
+              fontWeight: 'normal',
+              cursor: 'pointer',
+            }}>
+            <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+            <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+              {t('admin.meterEvents.title')}
+            </Typography>
+          </Stack>
+        </Stack>
+        <Box
+          sx={{
+            mt: 4,
+            mb: 3,
+            display: 'flex',
+
+            gap: {
+              xs: 2,
+              sm: 2,
+              md: 5,
+            },
+
+            flexWrap: 'wrap',
+
+            flexDirection: {
+              xs: 'column',
+              sm: 'column',
+              md: 'row',
+            },
+
+            alignItems: {
+              xs: 'flex-start',
+              sm: 'flex-start',
+              md: 'center',
+            },
+          }}>
+          <Stack
+            direction="column"
+            sx={{
+              gap: 1,
+            }}>
+            <Copyable text={props.id} />
+          </Stack>
+
+          <Stack
+            className="section-body"
+            sx={{
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
+
+              'hr.MuiDivider-root:last-child': {
+                display: 'none',
+              },
+
+              flexDirection: {
+                xs: 'column',
+                sm: 'column',
+                md: 'row',
+              },
+
+              alignItems: 'flex-start',
+
+              gap: {
+                xs: 1,
+                sm: 1,
+                md: 3,
+              },
+            }}>
+            <InfoMetric
+              label={t('common.status')}
+              value={<Chip label={data.status} color={getStatusColor(data.status)} size="small" />}
+              divider
+            />
+            <InfoMetric
+              label={t('common.meterEvent')}
+              value={
+                <Link to={`/admin/billing/meters/${data.meter.id}`} style={{ color: 'inherit' }}>
+                  <Typography sx={{ color: 'text.link' }}>{data.meter.event_name}</Typography>
+                </Link>
+              }
+              divider
+            />
+            {data.subscription && (
+              <InfoMetric
+                label={t('common.subscription')}
+                value={
+                  <Link to={`/admin/billing/${data.subscription.id}`} style={{ color: 'inherit' }}>
+                    <Typography sx={{ color: 'text.link' }}>
+                      {data.subscription.description || data.subscription.id}
+                    </Typography>
+                  </Link>
+                }
+                divider
+              />
+            )}
+            <InfoMetric
+              label={t('admin.meterEvent.creditConsumed')}
+              value={`${formatBNStr(data.credit_consumed, data.paymentCurrency?.decimal)} ${data.paymentCurrency?.symbol}`}
+              divider
+            />
+            {data.credit_pending !== '0' && (
+              <InfoMetric
+                label={t('admin.customer.creditGrants.pendingAmount')}
+                value={
+                  <Typography sx={{ color: 'error.main' }}>
+                    {`${formatBNStr(data.credit_pending, data.paymentCurrency?.decimal)} ${data.paymentCurrency?.symbol}`}
+                  </Typography>
+                }
+                divider
+              />
+            )}
+          </Stack>
+        </Box>
+        <Divider />
+      </Box>
+      <Stack
+        sx={{
+          flexDirection: {
+            xs: 'column',
+            lg: 'row',
+          },
+          gap: {
+            xs: 2.5,
+            md: 4,
+          },
+          '.meter-event-column-1': {
+            minWidth: {
+              xs: '100%',
+              lg: '600px',
+            },
+          },
+          '.meter-event-column-2': {
+            width: {
+              xs: '100%',
+              md: '100%',
+              lg: '320px',
+            },
+            maxWidth: {
+              xs: '100%',
+              md: '33%',
+            },
+          },
+        }}>
+        <Box
+          className="meter-event-column-1"
+          sx={{
+            flex: 1,
+            gap: 2.5,
+            display: 'flex',
+            flexDirection: 'column',
+          }}>
+          <Box className="section" sx={{ containerType: 'inline-size' }}>
+            <SectionHeader title={t('admin.details')} />
+            <InfoRowGroup
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: {
+                  xs: 'repeat(1, 1fr)',
+                  xl: 'repeat(2, 1fr)',
+                },
+                '@container (min-width: 1000px)': {
+                  gridTemplateColumns: 'repeat(2, 1fr)',
+                },
+                '.info-row-wrapper': {
+                  gap: 1,
+                  flexDirection: {
+                    xs: 'column',
+                    xl: 'row',
+                  },
+                  alignItems: {
+                    xs: 'flex-start',
+                    xl: 'center',
+                  },
+                  '@container (min-width: 1000px)': {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                  },
+                },
+                '.currency-name': {
+                  color: 'text.secondary',
+                },
+              }}>
+              <InfoRow
+                label={t('admin.meterEvent.usageValue')}
+                value={`${formatBNStr(data.payload.value, data.paymentCurrency?.decimal)} ${data.paymentCurrency?.symbol}`}
+              />
+              <InfoRow label={t('admin.meterEvent.reportedAt')} value={formatTime(data.timestamp * 1000)} />
+              <InfoRow
+                label={t('common.customer')}
+                value={<CustomerLink customer={data.customer} size={isMobile ? 'default' : 'small'} />}
+              />
+              <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+              <InfoRow
+                label={t('common.status')}
+                value={
+                  <Stack
+                    direction="row"
+                    spacing={1}
+                    sx={{
+                      alignItems: 'center',
+                    }}>
+                    <Chip
+                      label={data.status}
+                      color={getStatusColor(data.status)}
+                      size="small"
+                      sx={{ textTransform: 'capitalize' }}
+                    />
+                    {data.metadata?.last_error && (
+                      <Tooltip
+                        title={
+                          <pre style={{ whiteSpace: 'break-spaces' }}>
+                            {JSON.stringify(
+                              {
+                                error: data.metadata.last_error,
+                                failed_at: data.metadata.failed_at
+                                  ? formatTime(data.metadata.failed_at * 1000)
+                                  : undefined,
+                                attempt_count: data.attempt_count,
+                                next_attempt: data.next_attempt ? formatTime(data.next_attempt * 1000) : undefined,
+                              },
+                              null,
+                              2
+                            )}
+                          </pre>
+                        }>
+                        <InfoOutlined fontSize="small" color="error" />
+                      </Tooltip>
+                    )}
+                  </Stack>
+                }
+              />
+            </InfoRowGroup>
+          </Box>
+
+          <Divider />
+
+          <Box className="section">
+            <Typography variant="h3" className="section-header">
+              {t('admin.creditTransactions.title')}
+            </Typography>
+            <Box className="section-body">
+              <CreditTransactionsList
+                customer_id={data.payload.customer_id}
+                source={data.id}
+                showAdminColumns
+                mode="dashboard"
+              />
+            </Box>
+          </Box>
+          <Divider />
+
+          <Box className="section">
+            <SectionHeader title={t('admin.events.title')} />
+            <Box className="section-body">
+              <EventList features={{ toolbar: false }} object_id={data.id} />
+            </Box>
+          </Box>
+        </Box>
+
+        {isMobile && <Divider />}
+
+        <Box className="meter-event-column-2" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
+          {data.metadata && Object.keys(data.metadata).length > 0 && (
+            <Box className="section">
+              <SectionHeader title={t('common.metadata.label')} />
+              <Box className="section-body">
+                <MetadataList data={data.metadata} handleEditMetadata={() => {}} />
+              </Box>
+            </Box>
+          )}
+        </Box>
+      </Stack>
+    </Root>
+  );
+}
+
+const Root = styled(Stack)``;