payment-kit 1.14.21 → 1.14.23

package/src/components/info-row.tsx

@@ -1,6 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Box, Stack } from '@mui/material';
-import { styled } from '@mui/system';
+import { Box, Stack, SxProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
 type Props = {
@@ -8,12 +7,16 @@ type Props = {
   value?: string | ReactNode;
   alignItems?: string;
   sizes?: [number, number];
+  direction?: 'row' | 'column';
+  sx?: SxProps;
 };
 
 InfoRow.defaultProps = {
   value: undefined,
   sizes: [1, 3],
   alignItems: 'center',
+  direction: 'row',
+  sx: {},
 };
 
 export default function InfoRow(props: Props) {
@@ -21,29 +24,33 @@ export default function InfoRow(props: Props) {
   const isNone = props.value === '' || typeof props.value === 'undefined';
   const sizes = props.sizes || [1, 3];
   return (
-    <Root>
-      <Stack
-        direction="row"
-        alignItems={props.alignItems}
-        justifyContent="space-between"
-        flexWrap="wrap"
-        sx={{ mb: 1 }}
-        className="info-row-wrapper">
-        <Box flex={sizes[0]} color="text.secondary">
-          {props.label}
-        </Box>
-        <Box flex={sizes[1]} color={isNone ? 'text.disabled' : 'color.primary'}>
-          {isNone ? t('common.none') : props.value}
-        </Box>
-      </Stack>
-    </Root>
+    <Stack
+      direction={props.direction || 'row'}
+      alignItems={props.alignItems}
+      justifyContent="space-between"
+      flexWrap="wrap"
+      sx={{
+        mb: 2,
+        ...props.sx,
+        a: {
+          color: 'text.link',
+        },
+      }}
+      className="info-row-wrapper">
+      <Box
+        flex={sizes[0]}
+        color="text.primary"
+        fontWeight={500}
+        fontSize={14}
+        sx={{
+          flex: props.direction === 'column' ? 'none' : sizes[0],
+          mb: props.direction === 'column' ? 0.5 : 0,
+        }}>
+        {props.label}
+      </Box>
+      <Box flex={sizes[1]} color={isNone ? 'text.disabled' : 'text.secondary'} className="info-row-value" fontSize={14}>
+        {isNone ? t('common.none') : props.value}
+      </Box>
+    </Stack>
   );
 }
-
-const Root = styled(Box)`
-  @media (max-width: 600px) {
-    .info-row-wrapper {
-      display: block !important;
-    }
-  }
-`;

package/src/components/invoice/list.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, api, formatBNStr, formatTime, getInvoiceStatusColor } from '@blocklet/payment-react';
+import { Status, api, formatBNStr, formatTime, getInvoiceStatusColor, Table } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
@@ -9,7 +9,6 @@ import { Link } from 'react-router-dom';
 
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
-import Table from '../table';
 import InvoiceActions from './action';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TInvoiceExpanded[]; count: number }> => {
@@ -295,6 +294,7 @@ export default function InvoiceList({
           />
         )
       }
+      emptyNodeText={`${t('empty.invoices')}`}
     />
   );
 }

package/src/components/invoice/table.tsx

@@ -1,12 +1,13 @@
+/* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { formatAmount, formatToDate, getPriceUintAmountByCurrency } from '@blocklet/payment-react';
+import { formatAmount, Table, getPriceUintAmountByCurrency } from '@blocklet/payment-react';
 import type { TInvoiceExpanded, TInvoiceItem } from '@blocklet/payment-types';
 import { InfoOutlined } from '@mui/icons-material';
-import { Box, Stack, Table, TableBody, TableCell, TableHead, TableRow, Tooltip, Typography } from '@mui/material';
-import { styled } from '@mui/system';
+import { Box, Stack, Tooltip, Typography } from '@mui/material';
 import { toBN } from '@ocap/util';
 import { useSetState } from 'ahooks';
 
+import { styled } from '@mui/system';
 import LineItemActions from '../subscription/items/actions';
 import { UsageRecordDialog } from '../subscription/items/usage-records';
 
@@ -112,7 +113,7 @@ export function getInvoiceRows(invoice: TInvoiceExpanded) {
 }
 
 export default function InvoiceTable({ invoice, simple }: Props) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { detail, summary } = getInvoiceRows(invoice);
   const [state, setState] = useSetState({
     subscriptionId: '',
@@ -135,81 +136,131 @@ export default function InvoiceTable({ invoice, simple }: Props) {
     });
   };
 
-  return (
-    <Box>
-      <StyledTable>
-        <TableHead>
-          <TableRow sx={{ borderBottom: '1px solid #eee' }}>
-            <TableCell sx={{ textTransform: 'none', fontWeight: 'normal' }}>Description</TableCell>
-            <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 80 }} align="right">
-              {t('common.quantity')}
-            </TableCell>
-            <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 120 }} align="right">
-              {t('payment.customer.invoice.unitPrice')}
-            </TableCell>
-            <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 110 }} align="right">
-              {t('common.amount')}
-            </TableCell>
-            {!simple && (
-              <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 50 }} align="right">
-                &nbsp;
-              </TableCell>
-            )}
-          </TableRow>
-          {invoice.period_end > 0 && invoice.period_start > 0 && (
-            <TableRow sx={{ borderBottom: '1px solid #eee' }}>
-              <TableCell align="left" colSpan={simple ? 4 : 5}>
-                <Typography component="span" variant="body1" color="text.secondary">
-                  {formatToDate(invoice.period_start * 1000)} - {formatToDate(invoice.period_end * 1000)}
-                </Typography>
-              </TableCell>
-            </TableRow>
-          )}
-        </TableHead>
-        <TableBody>
-          {detail.map((line) => (
-            <TableRow key={line.id} sx={{ borderBottom: '1px solid #eee' }}>
-              <TableCell sx={{ fontWeight: 600 }}>{line.product}</TableCell>
-              <TableCell align="right">
-                <Stack
-                  direction="row"
-                  spacing={0.5}
-                  alignItems="center"
-                  justifyContent="flex-end"
-                  sx={{ cursor: 'pointer' }}
-                  onClick={() => onOpenUsageRecords(line)}>
-                  <Typography component="span">{line.quantity}</Typography>
-                  {!!line.rawQuantity && (
-                    <Tooltip
-                      title={t('payment.customer.invoice.rawQuantity', { quantity: line.rawQuantity })}
-                      placement="top">
-                      <InfoOutlined fontSize="small" sx={{ color: 'text.secondary', cursor: 'pointer' }} />
-                    </Tooltip>
-                  )}
-                </Stack>
-              </TableCell>
-              <TableCell align="right">{line.price}</TableCell>
-              <TableCell align="right">{line.amount}</TableCell>
-              {!simple && (
-                <TableCell align="right">
-                  <LineItemActions data={line as any} />
-                </TableCell>
+  const columns = [
+    {
+      label: t('common.description'),
+      name: 'product',
+    },
+    {
+      label: t('common.quantity'),
+      name: 'quantity',
+      width: 200,
+      align: 'right',
+      options: {
+        filter: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = detail[index] as InvoiceDetailItem;
+          return (
+            <Stack
+              direction="row"
+              spacing={0.5}
+              alignItems="center"
+              sx={{
+                cursor: 'pointer',
+                justifyContent: {
+                  xs: 'flex-start',
+                  md: 'flex-end',
+                },
+              }}
+              onClick={() => onOpenUsageRecords(item)}>
+              <Typography component="span">{item.quantity}</Typography>
+              {!!item.rawQuantity && (
+                <Tooltip
+                  title={t('payment.customer.invoice.rawQuantity', { quantity: item.rawQuantity })}
+                  placement="top">
+                  <InfoOutlined fontSize="small" sx={{ color: 'text.secondary', cursor: 'pointer' }} />
+                </Tooltip>
               )}
-            </TableRow>
-          ))}
-          {summary.map((line) => (
-            <TableRow key={line.key}>
-              <TableCell colSpan={3} align="right" sx={{ fontWeight: 600, color: line.color }}>
-                {t(line.key)}
-              </TableCell>
-              <TableCell align="right" sx={{ fontWeight: 600 }}>
-                {line.value}
-              </TableCell>
-              <TableCell>&nbsp;</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </StyledTable>
+            </Stack>
+          );
+        },
+      },
+    },
+    {
+      label: t('payment.customer.invoice.unitPrice'),
+      name: 'price',
+      width: 200,
+      align: 'right',
+    },
+    {
+      label: t('common.amount'),
+      name: 'amount',
+      width: 200,
+      align: 'right',
+    },
+    ...(simple
+      ? []
+      : [
+          {
+            label: t('common.actions'),
+            name: '',
+            width: 40,
+            options: {
+              customBodyRenderLite: (_: string, index: number) => {
+                const item = detail[index] as InvoiceDetailItem;
+                return <LineItemActions data={item as any} />;
+              },
+            },
+          },
+        ]),
+  ];
+
+  return (
+    <Root>
+      <Table
+        data={detail}
+        columns={columns}
+        loading={false}
+        footer={false}
+        toolbar={false}
+        components={{
+          TableToolbar: () => null,
+          TableFooter: () => null,
+        }}
+        options={{
+          count: detail.length,
+          page: 0,
+          rowsPerPage: 100,
+          // responsive: 'simple',
+        }}
+        dire
+        locale={locale}
+        mobileTDFlexDirection="row"
+        emptyNodeText={t('payment.customer.invoice.emptyList')}
+      />
+      <Stack
+        className="invoice-summary"
+        sx={{
+          display: 'flex',
+          flexDirection: {
+            xs: 'column',
+            md: 'row',
+          },
+          justifyContent: 'flex-end',
+          alignItems: {
+            xs: 'flex-end',
+            md: 'center',
+          },
+          gap: {
+            xs: 1,
+            md: 3,
+          },
+          mt: {
+            xs: 1,
+            md: 2,
+          },
+        }}>
+        {summary.map((line) => (
+          <Box key={line.key}>
+            <Typography component="span" variant="body1" color="text.secondary">
+              {t(line.key)}:&nbsp;
+            </Typography>
+            <Typography component="span" variant="body1" color="text.primary">
+              {line.value}
+            </Typography>
+          </Box>
+        ))}
+      </Stack>
       {state.subscriptionId && state.subscriptionItemId && (
         <UsageRecordDialog
           subscriptionId={state.subscriptionId}
@@ -219,16 +270,28 @@ export default function InvoiceTable({ invoice, simple }: Props) {
           end={invoice.metadata?.usage_end || invoice.period_end}
         />
       )}
-    </Box>
+    </Root>
   );
 }
 
-const StyledTable = styled(Table)`
-  .MuiTableCell-root {
-    padding: 8px 0;
-  }
-`;
-
 InvoiceTable.defaultProps = {
   simple: false,
 };
+
+const Root = styled(Box)`
+  .invoice-summary {
+    padding-right: 16px;
+  }
+  @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;
+    }
+  }
+`;

package/src/components/invoice-pdf/pdf.tsx

@@ -57,7 +57,11 @@ export function Download({ data }: { data: TInvoiceExpanded }) {
         aria-label="Save PDF"
         title="Save PDF"
         className="download-pdf__pdf">
-        <Button variant="contained" color="primary" size="small">
+        <Button
+          variant="outlined"
+          color="primary"
+          size="small"
+          sx={{ borderColor: 'var(--stroke-border-base, #EFF1F5)' }}>
           {t('payment.customer.invoice.download')}
         </Button>
       </PDFDownloadLink>

package/src/components/layout/admin.tsx

@@ -7,12 +7,13 @@ import { useEffect } from 'react';
 
 import { useSessionContext } from '../../contexts/session';
 
-const Root = styled(Dashboard)`
+const Root = styled(Dashboard)<{ padding: string }>`
   width: 100%;
   background-color: white;
 
   > .dashboard-body > .dashboard-main {
     > .dashboard-content {
+      padding: ${(props) => props.padding || '0 24px'};
       .MuiTab-root {
         padding: 0;
         margin-right: 24px;
@@ -30,7 +31,7 @@ const Root = styled(Dashboard)`
       }
 
       .page-content {
-        margin-top: 16px;
+        margin-top: 2px;
       }
 
       .MuiToggleButton-root {
@@ -49,6 +50,11 @@ const Root = styled(Dashboard)`
       }
     }
   }
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    > .dashboard-body > .dashboard-main > .dashboard-content {
+      padding: ${(props) => props.padding || '0 16px'};
+    }
+  }
 `;
 
 export default function Layout(props: any) {

package/src/components/metadata/editor.tsx

@@ -2,6 +2,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Button, CircularProgress, Stack } from '@mui/material';
 import { isObject } from 'lodash';
 import type { EventHandler } from 'react';
+import Dialog from '@arcblock/ux/lib/Dialog';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import { isObjectContent } from '../../libs/util';
@@ -21,11 +22,15 @@ export default function MetadataEditor({
   const { t } = useLocaleContext();
   const metadata = data.metadata || {};
   const methods = useForm<any>({
+    mode: 'onSubmit',
     defaultValues: {
-      metadata: Object.keys(metadata).map((key: string) => ({
-        key,
-        value: isObject(metadata[key]) ? JSON.stringify(metadata[key]) : metadata[key],
-      })),
+      metadata:
+        Object.keys(metadata).length < 1
+          ? [{ key: '', value: '' }]
+          : Object.keys(metadata).map((key: string) => ({
+              key,
+              value: isObject(metadata[key]) ? JSON.stringify(metadata[key]) : metadata[key],
+            })),
     },
   });
 
@@ -52,19 +57,21 @@ export default function MetadataEditor({
   };
 
   return (
-    <FormProvider {...methods}>
-      <MetadataForm
-        actions={
-          <Stack direction="row">
-            <Button size="small" sx={{ mr: 2 }} onClick={onReset}>
-              {t('common.cancel')}
-            </Button>
-            <Button variant="contained" color="primary" size="small" disabled={loading} onClick={onSubmit}>
-              {loading && <CircularProgress size="small" />} {t('common.save')}
-            </Button>
-          </Stack>
-        }
-      />
-    </FormProvider>
+    <Dialog open disableEscapeKeyDown fullWidth onClose={() => onCancel(null)} title={t('common.metadata.edit')}>
+      <FormProvider {...methods}>
+        <MetadataForm
+          actions={
+            <Stack direction="row">
+              <Button size="small" color="primary" variant="outlined" sx={{ mr: 2 }} onClick={onReset}>
+                {t('common.cancel')}
+              </Button>
+              <Button variant="contained" color="primary" size="small" disabled={loading} onClick={onSubmit}>
+                {loading && <CircularProgress size="small" />} {t('common.save')}
+              </Button>
+            </Stack>
+          }
+        />
+      </FormProvider>
+    </Dialog>
   );
 }

package/src/components/metadata/form.tsx

@@ -1,41 +1,99 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { FormInput } from '@blocklet/payment-react';
 import { AddOutlined, DeleteOutlineOutlined } from '@mui/icons-material';
-import { Box, Button, IconButton, Stack, Typography } from '@mui/material';
+import { Box, Button, Divider, IconButton, Stack, Typography } from '@mui/material';
+import { useEffect, useRef } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
 export default function MetadataForm({ title, actions }: { title?: string; actions?: React.ReactNode }) {
   const { t } = useLocaleContext();
-  const { control } = useFormContext();
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+
   const metadata = useFieldArray({ control, name: 'metadata' });
+  const lastItemRef = useRef<HTMLDivElement | null>(null);
+  const errorRef = useRef<HTMLDivElement | null>(null);
+  const initRef = useRef(false);
+
+  useEffect(() => {
+    if (!initRef.current) {
+      initRef.current = true;
+      return;
+    }
+    if (lastItemRef.current) {
+      lastItemRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [metadata.fields.length]);
+
+  useEffect(() => {
+    if (errors.metadata && errorRef.current) {
+      errorRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [errors.metadata, errorRef]);
+
   return (
     <Box sx={{ width: 1 }}>
       {!!title && <Typography>{title}</Typography>}
-      {metadata.fields.map((meta, index) => (
-        <Stack key={meta.id} mt={2} spacing={2} direction="row" alignItems="center">
-          <Stack direction="row" spacing={2}>
-            <FormInput
-              sx={{ flex: 1 }}
-              size="small"
-              name={`metadata.${index}.key`}
-              rules={{ required: t('payment.checkout.required') }}
-              placeholder="Key"
-            />
-            <FormInput
-              sx={{ flex: 2 }}
-              size="small"
-              name={`metadata.${index}.value`}
-              placeholder="Value"
-              rules={{ required: t('payment.checkout.required') }}
-            />
+      <Stack
+        sx={{
+          height: {
+            xs: 'calc(100vh - 130px)',
+            md: 400,
+          },
+          minHeight: 400,
+          overflow: 'auto',
+          pb: 1.5,
+          mr: -1.5,
+          pr: 1.5,
+        }}>
+        {metadata.fields.map((meta, index) => (
+          <Stack
+            key={meta.id}
+            mt={2}
+            spacing={2}
+            direction="row"
+            alignItems="flex-end"
+            ref={index === metadata.fields.length - 1 ? lastItemRef : null}>
+            <Stack direction="row" spacing={2} sx={{ flex: 1 }}>
+              <FormInput
+                sx={{ flex: 1 }}
+                size="small"
+                name={`metadata.${index}.key`}
+                rules={{ required: t('payment.checkout.required') }}
+                placeholder="Key"
+                label="Key"
+                // @ts-ignore
+                ref={errors?.metadata?.[index]?.key ? errorRef : null}
+              />
+              <FormInput
+                sx={{ flex: 2 }}
+                size="small"
+                name={`metadata.${index}.value`}
+                placeholder="Value"
+                rules={{ required: t('payment.checkout.required') }}
+                label="Value"
+                // @ts-ignore
+                ref={errors?.metadata?.[index]?.value ? errorRef : null}
+              />
+            </Stack>
+            <IconButton
+              onClick={() => metadata.remove(index)}
+              sx={{
+                border: '1px solid var(--stroke-border-base, #EFF1F5)',
+                borderRadius: 'var(--radius-m, 8px)',
+                padding: '8px',
+              }}>
+              <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
+            </IconButton>
           </Stack>
-          <IconButton size="small" onClick={() => metadata.remove(index)}>
-            <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
-          </IconButton>
-        </Stack>
-      ))}
+        ))}
+      </Stack>
+
+      <Divider />
       <Stack mt={metadata.fields.length ? 2 : 1} direction="row" justifyContent="space-between">
-        <Button size="small" variant="outlined" color="inherit" onClick={() => metadata.append({ key: '', value: '' })}>
+        <Button size="small" variant="outlined" color="primary" onClick={() => metadata.append({ key: '', value: '' })}>
           <AddOutlined fontSize="small" /> {t('common.metadata.add')}
         </Button>
         {actions}

package/src/components/metadata/list.tsx

@@ -1,24 +1,40 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Typography } from '@mui/material';
+import { Box, Button, Typography } from '@mui/material';
 import isEmpty from 'lodash/isEmpty';
 import isObject from 'lodash/isObject';
 
 import { isObjectContent } from '../../libs/util';
 import InfoRow from '../info-row';
 
-export default function MetadataList({ data }: { data: any }) {
+export default function MetadataList({
+  data,
+  handleEditMetadata = () => {},
+}: {
+  data: any;
+  handleEditMetadata: () => void;
+}) {
   const { t } = useLocaleContext();
 
   if (isEmpty(data)) {
-    return <Typography color="text.secondary">{t('common.metadata.empty')}</Typography>;
+    return (
+      <Box sx={{ textAlign: 'center' }}>
+        <Typography color="primary" fontWeight={500}>
+          {t('common.metadata.empty')}
+        </Typography>
+        <Typography color="text.lighter">{t('common.metadata.emptyTip')}</Typography>
+        <Button sx={{ color: 'text.link' }} onClick={handleEditMetadata}>
+          {t('common.add')}
+        </Button>
+      </Box>
+    );
   }
 
   const formatValue = (value: any) => {
     if (isObjectContent(value)) {
-      return <pre>{JSON.stringify(JSON.parse(value), null, 2)}</pre>;
+      return <pre style={{ whiteSpace: 'break-spaces' }}>{JSON.stringify(JSON.parse(value), null, 2)}</pre>;
     }
     if (isObject(value)) {
-      return <pre>{JSON.stringify(value, null, 2)}</pre>;
+      return <pre style={{ whiteSpace: 'break-spaces' }}>{JSON.stringify(value, null, 2)}</pre>;
     }
     return value;
   };
@@ -27,7 +43,7 @@ export default function MetadataList({ data }: { data: any }) {
   return (
     <>
       {Object.keys(data || {}).map((key) => (
-        <InfoRow key={key} label={key} value={formatValue(data[key])} />
+        <InfoRow key={key} label={key} value={formatValue(data[key])} direction="column" alignItems="flex-start" />
       ))}
     </>
   );