payment-kit 1.13.15

package/src/components/invoice/action.tsx

@@ -0,0 +1,94 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TInvoiceExpanded } from '@did-pay/types';
+import { useSetState } from 'ahooks';
+import { useNavigate } from 'react-router-dom';
+import type { LiteralUnion } from 'type-fest';
+
+import api from '../../libs/api';
+import { formatError } from '../../libs/util';
+import Actions from '../actions';
+import ConfirmDialog from '../confirm';
+
+type Props = {
+  data: TInvoiceExpanded;
+  variant?: LiteralUnion<'compact' | 'normal', string>;
+  onChange: (action: string) => void;
+};
+
+InvoiceActions.defaultProps = {
+  variant: 'compact',
+};
+
+export default function InvoiceActions({ data, variant, onChange }: Props) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const [state, setState] = useSetState({
+    action: '',
+    loading: false,
+  });
+
+  const handleAction = async () => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/invoices/${data.id}/xxx`).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+
+  const actions = [
+    {
+      label: t('admin.invoice.download'),
+      handler: () => setState({ action: 'download' }),
+      color: 'primary',
+      disabled: data.status !== 'paid',
+    },
+    {
+      label: t('admin.invoice.edit'),
+      handler: () => setState({ action: 'edit' }),
+      color: 'primary',
+      disabled: data.status !== 'draft',
+    },
+    {
+      label: t('admin.invoice.duplicate'),
+      handler: () => setState({ action: 'duplicate' }),
+      color: 'primary',
+      disabled: data.status !== 'draft',
+      divider: true,
+    },
+    {
+      label: t('admin.customer.view'),
+      handler: () => navigate(`/admin/customers/${data.customer_id}`),
+      color: 'primary',
+    },
+  ];
+
+  if (variant === 'compact') {
+    actions.push({
+      label: t('admin.invoice.view'),
+      handler: () => navigate(`/admin/billing/${data.id}`),
+      color: 'primary',
+    });
+  }
+
+  return (
+    <>
+      <Actions variant={variant} actions={actions} />
+      {state.action === 'xxx' && (
+        <ConfirmDialog
+          onConfirm={handleAction}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.invoice.edit')}
+          message={t('admin.invoice.edit')}
+          loading={state.loading}
+        />
+      )}
+    </>
+  );
+}

package/src/components/invoice/list.tsx

@@ -0,0 +1,225 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { getDurableData } from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TInvoiceExpanded } from '@did-pay/types';
+import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { fromUnitToToken } from '@ocap/util';
+import { useRequest } from 'ahooks';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import api from '../../libs/api';
+import { formatTime, getInvoiceStatusColor } from '../../libs/util';
+import Status from '../status';
+import Table from '../table';
+import InvoiceActions from './action';
+
+const fetchData = (params: Record<string, any> = {}): Promise<{ list: TInvoiceExpanded[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/invoices?${search.toString()}`).then((res) => res.data);
+};
+
+type SearchProps = {
+  status: string;
+  pageSize: number;
+  page: number;
+  customer_id?: string;
+  subscription_id?: string;
+};
+
+type ListProps = {
+  features?: {
+    customer?: boolean;
+    toolbar?: boolean;
+    footer?: boolean;
+  };
+  customer_id?: string;
+  subscription_id?: string;
+  status?: string;
+};
+
+const getListKey = (props: ListProps) => {
+  if (props.customer_id) {
+    return `customer-invoices-${props.customer_id}`;
+  }
+  if (props.subscription_id) {
+    return `subscription-invoices-${props.subscription_id}`;
+  }
+
+  return 'invoices';
+};
+
+InvoiceList.defaultProps = {
+  features: {
+    customer: true,
+    filter: true,
+  },
+  customer_id: '',
+  subscription_id: '',
+  status: '',
+};
+
+export default function InvoiceList({ customer_id, subscription_id, features, status }: ListProps) {
+  const listKey = getListKey({ customer_id, subscription_id });
+  const persisted = getDurableData(listKey);
+
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const [search, setSearch] = useState<SearchProps>({
+    status: status as string,
+    customer_id,
+    subscription_id,
+    pageSize: persisted.rowsPerPage || 20,
+    page: persisted.page ? persisted.page + 1 : 1,
+  });
+
+  const { loading, error, data, refresh } = useRequest(() => fetchData(search));
+  useEffect(() => {
+    refresh();
+  }, [search, refresh]);
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const columns = [
+    {
+      label: t('common.amount'),
+      name: 'total',
+      width: 60,
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index];
+          return (
+            <Typography component="span">
+              {fromUnitToToken(item?.total, item?.paymentCurrency.decimal)}&nbsp;
+              {item?.paymentCurrency.symbol}
+            </Typography>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'status',
+      width: 60,
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TInvoiceExpanded;
+          return <Status label={item?.status} color={getInvoiceStatusColor(item?.status)} />;
+        },
+      },
+    },
+    {
+      label: t('admin.invoice.number'),
+      name: 'number',
+    },
+    {
+      label: t('common.description'),
+      name: 'description',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index];
+          return item?.description || item?.id;
+        },
+      },
+    },
+    {
+      label: t('admin.invoice.dueDate'),
+      name: 'due_date',
+      options: {
+        customBodyRender: (e: number) => {
+          return e ? formatTime(e * 1000) : '-';
+        },
+      },
+    },
+    {
+      label: t('common.createdAt'),
+      name: 'created_at',
+      options: {
+        customBodyRender: (e: string) => {
+          return formatTime(e);
+        },
+      },
+    },
+    {
+      label: t('common.actions'),
+      name: 'id',
+      width: 100,
+      align: 'center',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TInvoiceExpanded;
+          return <InvoiceActions data={item} onChange={refresh} />;
+        },
+      },
+    },
+  ].filter(Boolean);
+
+  if (features?.customer) {
+    // @ts-ignore
+    columns.splice(3, 0, {
+      label: t('common.customer'),
+      name: 'customer_id',
+      width: 60,
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TInvoiceExpanded;
+          return item.customer.email;
+        },
+      },
+    });
+  }
+
+  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 (
+    <Table
+      durable={listKey}
+      durableKeys={['page', 'rowsPerPage']}
+      data={data.list}
+      columns={columns}
+      loading={loading}
+      onChange={onTableChange}
+      options={{
+        count: data.count,
+        page: search.page - 1,
+        rowsPerPage: search.pageSize,
+        onRowClick: (_: any, { dataIndex }: any) => {
+          const item = data.list[dataIndex] as TInvoiceExpanded;
+          navigate(`/admin/billing/${item.id}`);
+        },
+      }}
+      toolbar={features?.toolbar}
+      footer={features?.footer}
+      title={
+        <div className="table-toolbar-left">
+          <ToggleButtonGroup
+            value={search.status}
+            onChange={(_, value) => setSearch((x) => ({ ...x, status: value }))}
+            exclusive>
+            <ToggleButton value="">All</ToggleButton>
+            <ToggleButton value="draft">Draft</ToggleButton>
+            <ToggleButton value="uncollectible">Outstanding</ToggleButton>
+            <ToggleButton value="open">Past Due</ToggleButton>
+            <ToggleButton value="paid">Paid</ToggleButton>
+          </ToggleButtonGroup>
+        </div>
+      }
+    />
+  );
+}

package/src/components/invoice/table.tsx

@@ -0,0 +1,110 @@
+import type { TInvoiceExpanded } from '@did-pay/types';
+import { Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+
+import { formatAmount, formatToDate } from '../../libs/util';
+import LineItemActions from '../subscription/items/actions';
+
+type Props = {
+  invoice: TInvoiceExpanded;
+  simple?: boolean;
+};
+
+InvoiceTable.defaultProps = {
+  simple: false,
+};
+
+export default function InvoiceTable({ invoice, simple }: Props) {
+  return (
+    <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">
+            Quantity
+          </TableCell>
+          <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 120 }} align="right">
+            Unit Price
+          </TableCell>
+          <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 100 }} align="right">
+            Amount
+          </TableCell>
+          {!simple && (
+            <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 50 }} align="right">
+              &nbsp;
+            </TableCell>
+          )}
+        </TableRow>
+        {invoice.period_end && invoice.period_start && (
+          <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>
+        {invoice.lines.map((line) => (
+          <TableRow key={line.id} sx={{ borderBottom: '1px solid #eee' }}>
+            <TableCell sx={{ fontWeight: 600 }}>
+              {line.description}
+              {line.price.product.unit_label ? ` (per ${line.price.product.unit_label})` : ''}
+            </TableCell>
+            <TableCell align="right">{line.quantity}</TableCell>
+            <TableCell align="right">{formatAmount(line.price.unit_amount, invoice.paymentCurrency.decimal)}</TableCell>
+            <TableCell align="right">{formatAmount(line.amount, invoice.paymentCurrency.decimal)}</TableCell>
+            {!simple && (
+              <TableCell align="right">
+                <LineItemActions data={line} />
+              </TableCell>
+            )}
+          </TableRow>
+        ))}
+        <TableRow>
+          <TableCell colSpan={3} align="right" sx={{ fontWeight: 600 }}>
+            Subtotal
+          </TableCell>
+          <TableCell align="right" sx={{ fontWeight: 600 }}>
+            {formatAmount(invoice.subtotal, invoice.paymentCurrency.decimal)}
+          </TableCell>
+          <TableCell>&nbsp;</TableCell>
+        </TableRow>
+        <TableRow sx={{ borderBottom: '1px solid #eee' }}>
+          <TableCell colSpan={3} align="right" sx={{ fontWeight: 600 }}>
+            Total
+          </TableCell>
+          <TableCell align="right" sx={{ fontWeight: 600 }}>
+            {formatAmount(invoice.total, invoice.paymentCurrency.decimal)}
+          </TableCell>
+          <TableCell>&nbsp;</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell colSpan={3} align="right" sx={{ fontWeight: 600, color: 'text.secondary' }}>
+            Amount Paid
+          </TableCell>
+          <TableCell align="right" sx={{ fontWeight: 600 }}>
+            -{formatAmount(invoice.amount_paid, invoice.paymentCurrency.decimal)}
+          </TableCell>
+          <TableCell>&nbsp;</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell colSpan={3} align="right" sx={{ fontWeight: 600 }}>
+            Amount Due
+          </TableCell>
+          <TableCell align="right" sx={{ fontWeight: 600 }}>
+            {formatAmount(invoice.amount_due, invoice.paymentCurrency.decimal)}
+          </TableCell>
+          <TableCell>&nbsp;</TableCell>
+        </TableRow>
+      </TableBody>
+    </StyledTable>
+  );
+}
+
+const StyledTable = styled(Table)`
+  .MuiTableCell-root {
+    padding: 8px 0;
+  }
+`;

package/src/components/layout.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import Dashboard from '@blocklet/ui-react/lib/Dashboard';
+import { styled } from '@mui/system';
+import { useEffect, useState } from 'react';
+
+import { useSessionContext } from '../contexts/session';
+
+const Root = styled(Dashboard)`
+  width: 100%;
+  background-color: white;
+
+  > .dashboard-body > .dashboard-main {
+    > .dashboard-content {
+      .MuiTab-root {
+        padding: 0;
+        margin-right: 24px;
+        min-height: 32px;
+        min-width: auto;
+      }
+
+      .MuiTabs-root {
+        min-height: 32px;
+        margin-bottom: 8px;
+      }
+
+      .MuiTabs-scroller {
+        border-bottom: 1px solid #eee;
+      }
+
+      .page-content {
+        margin-top: 16px;
+      }
+
+      .MuiToggleButton-root {
+        padding: 4px 16px;
+      }
+    }
+
+    > .dashboard-footer {
+      margin-top: 0;
+      padding: 8px 0;
+
+      .logo-container {
+        svg {
+          height: 100%;
+        }
+      }
+    }
+  }
+`;
+
+export default function Layout(props: any) {
+  const { session } = useSessionContext();
+  const [loggingIn, setLoggingIn] = useState(false);
+
+  useEffect(() => {
+    if (!session.user && !loggingIn) {
+      setLoggingIn(true);
+      session.login(() => {
+        setLoggingIn(false);
+      });
+    }
+  }, [session.user]);
+
+  if (session.user) {
+    return <Root {...props} footerProps={{ className: 'dashboard-footer' }} />;
+  }
+
+  return null;
+}

package/src/components/livemode.tsx

@@ -0,0 +1,23 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Chip } from '@mui/material';
+
+export default function Livemode() {
+  const { t } = useLocaleContext();
+  return (
+    <Chip
+      label={t('common.livemode')}
+      size="small"
+      sx={{
+        ml: 2,
+        height: 18,
+        lineHeight: 18,
+        textTransform: 'uppercase',
+        fontSize: '0.8rem',
+        fontWeight: 'bold',
+        borderRadius: '4px',
+        backgroundColor: '#ffde92',
+        color: '#bb5504',
+      }}
+    />
+  );
+}

package/src/components/metadata/editor.tsx

@@ -0,0 +1,57 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Button, CircularProgress, Stack } from '@mui/material';
+import type { EventHandler } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import MetadataForm from './form';
+
+export default function MetadataEditor({
+  data,
+  loading,
+  onSave,
+  onCancel,
+}: {
+  data: any;
+  loading: boolean;
+  onSave: EventHandler<any>;
+  onCancel: EventHandler<any>;
+}) {
+  const { t } = useLocaleContext();
+  const metadata = data.metadata || {};
+  const methods = useForm<any>({
+    defaultValues: {
+      ...data,
+      // @ts-ignore
+      metadata: Object.keys(metadata).map((key: string) => ({ key, value: metadata[key] })),
+    },
+  });
+
+  const { handleSubmit, reset } = methods;
+  const onReset = (e: any) => {
+    reset();
+    onCancel(e);
+  };
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  const onSubmit = async (data: any) => {
+    await handleSubmit(onSave)(data);
+    reset();
+    onCancel(null);
+  };
+
+  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>
+  );
+}

package/src/components/metadata/form.tsx

@@ -0,0 +1,45 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { AddOutlined, DeleteOutlineOutlined } from '@mui/icons-material';
+import { Box, Button, IconButton, Stack, TextField, Typography } from '@mui/material';
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+
+export default function MetadataForm({ title, actions }: { title?: string; actions?: React.ReactNode }) {
+  const { t } = useLocaleContext();
+  const { control } = useFormContext();
+  const metadata = useFieldArray({ control, name: 'metadata' });
+  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}>
+            <Controller
+              render={({ field }) => <TextField {...field} sx={{ flex: 1 }} placeholder="Key" size="small" />}
+              name={`metadata.${index}.key`}
+              control={control}
+            />
+            <Controller
+              render={({ field }) => <TextField {...field} sx={{ flex: 2 }} placeholder="Value" size="small" />}
+              name={`metadata.${index}.value`}
+              control={control}
+            />
+          </Stack>
+          <IconButton size="small" onClick={() => metadata.remove(index)}>
+            <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
+          </IconButton>
+        </Stack>
+      ))}
+      <Stack mt={metadata.fields.length ? 2 : 1} direction="row" justifyContent="space-between">
+        <Button size="small" variant="outlined" color="inherit" onClick={() => metadata.append({ key: '', value: '' })}>
+          <AddOutlined fontSize="small" /> {t('common.metadata.add')}
+        </Button>
+        {actions}
+      </Stack>
+    </Box>
+  );
+}
+
+MetadataForm.defaultProps = {
+  title: true,
+  actions: null,
+};