payment-kit 1.13.15

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -0,0 +1,237 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TProduct, TSubscriptionExpanded } from '@did-pay/types';
+import { ArrowBackOutlined, Edit } from '@mui/icons-material';
+import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { useRequest, useSetState } from 'ahooks';
+import { isEmpty } from 'lodash';
+import { Link } from 'react-router-dom';
+
+import TxLink from '../../../../components/blockchain/tx';
+import Copyable from '../../../../components/copyable';
+import Currency from '../../../../components/currency';
+import EventList from '../../../../components/event/list';
+import InfoMetric from '../../../../components/info-metric';
+import InfoRow from '../../../../components/info-row';
+import InvoiceList from '../../../../components/invoice/list';
+import MetadataEditor from '../../../../components/metadata/editor';
+import SectionHeader from '../../../../components/section/header';
+import Status from '../../../../components/status';
+import SubscriptionActions from '../../../../components/subscription/actions';
+import SubscriptionItemList from '../../../../components/subscription/items';
+import api from '../../../../libs/api';
+import { formatError, formatSubscriptionProduct, formatTime, getSubscriptionStatusColor } from '../../../../libs/util';
+
+const fetchData = (id: string): Promise<TSubscriptionExpanded> => {
+  return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
+};
+
+export default function SubscriptionDetail(props: { id: string }) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    adding: {
+      price: false,
+    },
+    editing: {
+      metadata: false,
+      product: false,
+    },
+    loading: {
+      metadata: false,
+      price: false,
+      product: false,
+    },
+  });
+
+  const { loading, error, data, runAsync } = useRequest(() => fetchData(props.id));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const createUpdater = (key: string) => async (updates: TProduct) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
+      await api.put(`/api/subscriptions/${props.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      runAsync();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: false } }));
+    }
+  };
+
+  const onUpdateMetadata = createUpdater('metadata');
+
+  return (
+    <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+      <Box>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+          <Link to="/admin/billing/subscriptions">
+            <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal' }}>
+              <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+              <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+                {t('admin.subscriptions')}
+              </Typography>
+            </Stack>
+          </Link>
+          <Copyable text={props.id} style={{ marginLeft: 4 }} />
+        </Stack>
+        <Box mt={2}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack direction="row" alignItems="center">
+              <Typography variant="h5" sx={{ fontWeight: 600 }}>
+                {data.customer.name}
+              </Typography>
+              <Typography sx={{ mx: 1 }}>on</Typography>
+              <Typography variant="h5" sx={{ fontWeight: 600 }}>
+                {formatSubscriptionProduct(data.items)}
+              </Typography>
+              <Status label={data.status} color={getSubscriptionStatusColor(data.status)} sx={{ ml: 1 }} />
+            </Stack>
+            <SubscriptionActions data={data} onChange={runAsync} variant="normal" />
+          </Stack>
+          <Stack
+            className="section-body"
+            direction="row"
+            spacing={3}
+            justifyContent="flex-start"
+            flexWrap="wrap"
+            sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
+            <InfoMetric
+              label={t('admin.subscription.startedAt')}
+              value={formatTime(data.start_date ? data.start_date * 1000 : data.created_at)}
+              divider
+            />
+            {!data.cancel_at && (
+              <InfoMetric
+                label={t('admin.subscription.nextInvoice')}
+                value={formatTime(data.current_period_end * 1000)}
+                divider
+              />
+            )}
+            {data.cancel_at && (
+              <InfoMetric
+                label={t('admin.subscription.cancel.schedule')}
+                value={formatTime(data.cancel_at * 1000)}
+                divider
+              />
+            )}
+          </Stack>
+        </Box>
+      </Box>
+
+      <Box className="section">
+        <SectionHeader title={t('admin.details')}>
+          <Button
+            variant="outlined"
+            color="inherit"
+            size="small"
+            onClick={() => setState((prev) => ({ editing: { ...prev.editing, product: true } }))}>
+            <Edit fontSize="small" sx={{ mr: 0.5 }} />
+            {t('common.edit')}
+          </Button>
+        </SectionHeader>
+        <Stack>
+          <InfoRow
+            label={t('common.customer')}
+            value={<Link to={`/admin/customers/${data.customer.id}`}>{data.customer.name}</Link>}
+          />
+          <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+          {data.status === 'paused' && !!data.pause_collection?.resumes_at && (
+            <InfoRow label={t('common.resumesAt')} value={formatTime(data.pause_collection.resumes_at * 1000)} />
+          )}
+          <InfoRow
+            label={t('admin.subscription.currentPeriod')}
+            value={[formatTime(data.current_period_start * 1000), formatTime(data.current_period_end * 1000)].join(
+              ' ~ '
+            )}
+          />
+          <InfoRow
+            label={t('admin.subscription.trialingPeriod')}
+            value={
+              data.trail_end && data.trail_start
+                ? [formatTime(data.trail_start * 1000), formatTime(data.trail_end * 1000)].join(' ~ ')
+                : ''
+            }
+          />
+          <InfoRow label={t('admin.subscription.discount')} value={data.discount_id ? data.discount_id : ''} />
+          <InfoRow label={t('admin.subscription.collectionMethod')} value={data.collection_method} />
+          <InfoRow
+            label={t('admin.paymentMethod.name')}
+            value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
+          />
+          <InfoRow
+            label={t('admin.paymentCurrency.name')}
+            value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+          />
+          {data.payment_details?.tx_hash && (
+            <InfoRow
+              label={t('common.txHash')}
+              value={<TxLink hash={data.payment_details?.tx_hash} method={data.paymentMethod} />}
+            />
+          )}
+        </Stack>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('common.metadata.label')}>
+          <Button
+            variant="outlined"
+            color="inherit"
+            size="small"
+            disabled={state.editing.metadata}
+            onClick={() => setState((prev) => ({ editing: { ...prev.editing, metadata: true } }))}>
+            <Edit fontSize="small" sx={{ mr: 0.5 }} />
+            {t('common.metadata.edit')}
+          </Button>
+        </SectionHeader>
+        <Box className="section-body">
+          {!state.editing.metadata &&
+            (isEmpty(data.metadata) ? (
+              <Typography color="text.secondary">{t('common.metadata.empty')}</Typography>
+            ) : (
+              Object.keys(data.metadata || {}).map((key) => (
+                <InfoRow key={key} label={key} value={data.metadata[key]} />
+              ))
+            ))}
+          {state.editing.metadata && (
+            <MetadataEditor
+              data={data}
+              loading={state.loading.metadata}
+              onSave={onUpdateMetadata}
+              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
+            />
+          )}
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.product.pricing')} mb={0} />
+        <Box className="section-body">
+          <SubscriptionItemList data={data.items} currency={data.paymentCurrency} />
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.invoices')} mb={0} />
+        <Box className="section-body">
+          <InvoiceList features={{ customer: true, toolbar: false }} subscription_id={data.id} />
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.events')} />
+        <Box className="section-body">
+          <EventList features={{ toolbar: false }} object_id={data.id} />
+        </Box>
+      </Box>
+    </Root>
+  );
+}
+
+const Root = styled(Stack)``;

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

@@ -0,0 +1,5 @@
+import SubscriptionList from '../../../../components/subscription/list';
+
+export default function SubscriptionsList() {
+  return <SubscriptionList />;
+}

package/src/pages/admin/customers/customers/detail.tsx

@@ -0,0 +1,209 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TCustomerExpanded } from '@did-pay/types';
+import { ArrowBackOutlined, Edit } from '@mui/icons-material';
+import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { useRequest, useSetState } from 'ahooks';
+import { isEmpty } from 'lodash';
+import { Link, useNavigate } from 'react-router-dom';
+
+import Copyable from '../../../../components/copyable';
+import CustomerActions from '../../../../components/customer/actions';
+import EventList from '../../../../components/event/list';
+import InfoMetric from '../../../../components/info-metric';
+import InfoRow from '../../../../components/info-row';
+import InvoiceList from '../../../../components/invoice/list';
+import MetadataEditor from '../../../../components/metadata/editor';
+import PaymentList from '../../../../components/payment-intent/list';
+import SectionHeader from '../../../../components/section/header';
+import SubscriptionList from '../../../../components/subscription/list';
+import api from '../../../../libs/api';
+import { formatError, formatTime } from '../../../../libs/util';
+
+const fetchData = (id: string): Promise<TCustomerExpanded> => {
+  return api.get(`/api/customers/${id}`).then((res) => res.data);
+};
+
+export default function CustomerDetail(props: { id: string }) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const [state, setState] = useSetState({
+    adding: {
+      price: false,
+    },
+    editing: {
+      metadata: false,
+      product: false,
+    },
+    loading: {
+      metadata: false,
+      price: false,
+      product: false,
+    },
+  });
+
+  const { loading, error, data, runAsync } = useRequest(() => fetchData(props.id));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const createUpdater = (key: string) => async (updates: TCustomerExpanded) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
+      await api.put(`/api/customers/${props.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      runAsync();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: false } }));
+    }
+  };
+
+  const onUpdateMetadata = createUpdater('metadata');
+  const onChange = (action: string) => {
+    if (action === 'remove') {
+      navigate('/admin/customers');
+    } else {
+      runAsync();
+    }
+  };
+
+  return (
+    <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+      <Box>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+          <Link to="/admin/customers">
+            <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal' }}>
+              <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+              <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+                {t('admin.customers')}
+              </Typography>
+            </Stack>
+          </Link>
+          <Copyable text={props.id} style={{ marginLeft: 4 }} />
+        </Stack>
+        <Box mt={2}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Typography variant="h5" sx={{ fontWeight: 600 }}>
+              {data.name}
+            </Typography>
+            <CustomerActions data={data} onChange={onChange} variant="normal" />
+          </Stack>
+          <Stack
+            className="section-body"
+            direction="row"
+            spacing={3}
+            justifyContent="flex-start"
+            flexWrap="wrap"
+            sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
+            <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
+            <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} divider />
+            <InfoMetric label={t('admin.customer.spent')} value={0} divider />
+            <InfoMetric label={t('admin.customer.refund')} value={0} divider />
+            <InfoMetric label={t('admin.customer.dispute')} value={0} divider />
+          </Stack>
+        </Box>
+      </Box>
+
+      <Box className="section">
+        <SectionHeader title={t('admin.details')}>
+          <Button
+            variant="outlined"
+            color="inherit"
+            size="small"
+            onClick={() => setState((prev) => ({ editing: { ...prev.editing, product: true } }))}>
+            <Edit fontSize="small" sx={{ mr: 0.5 }} />
+            {t('common.edit')}
+          </Button>
+        </SectionHeader>
+        <Stack>
+          <InfoRow label={t('admin.customer.name')} value={data.name} />
+          <InfoRow label={t('admin.customer.phone')} value={data.phone} />
+          <InfoRow label={t('admin.customer.email')} value={data.email} />
+          <InfoRow label={t('admin.customer.invoicePrefix')} value={data.invoice_prefix} />
+          <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+          <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+          <InfoRow
+            label={t('admin.customer.address.label')}
+            value={
+              <Stack direction="column">
+                <InfoRow label={t('admin.customer.address.country')} value={data.address?.country} />
+                <InfoRow label={t('admin.customer.address.state')} value={data.address?.state} />
+                <InfoRow label={t('admin.customer.address.city')} value={data.address?.city} />
+                <InfoRow label={t('admin.customer.address.line1')} value={data.address?.line1} />
+                <InfoRow label={t('admin.customer.address.line2')} value={data.address?.line2} />
+                <InfoRow label={t('admin.customer.address.postal_code')} value={data.address?.postal_code} />
+              </Stack>
+            }
+          />
+        </Stack>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.subscriptions')} mb={0} />
+        <Box className="section-body">
+          <SubscriptionList features={{ customer: false, toolbar: false }} customer_id={data.id} />
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.payments')} mb={0} />
+        <Box className="section-body">
+          <PaymentList features={{ customer: false, toolbar: false }} customer_id={data.id} />
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.invoices')} mb={0} />
+        <Box className="section-body">
+          <InvoiceList features={{ customer: false, toolbar: false }} customer_id={data.id} />
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('common.metadata.label')}>
+          <Button
+            variant="outlined"
+            color="inherit"
+            size="small"
+            disabled={state.editing.metadata}
+            onClick={() => setState((prev) => ({ editing: { ...prev.editing, metadata: true } }))}>
+            <Edit fontSize="small" sx={{ mr: 0.5 }} />
+            {t('common.metadata.edit')}
+          </Button>
+        </SectionHeader>
+        <Box className="section-body">
+          {!state.editing.metadata &&
+            (isEmpty(data.metadata) ? (
+              <Typography color="text.secondary">{t('common.metadata.empty')}</Typography>
+            ) : (
+              Object.keys(data.metadata || {}).map((key) => (
+                <InfoRow key={key} label={key} value={data.metadata[key]} />
+              ))
+            ))}
+          {state.editing.metadata && (
+            <MetadataEditor
+              data={data}
+              loading={state.loading.metadata}
+              onSave={onUpdateMetadata}
+              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
+            />
+          )}
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.events')} />
+        <Box className="section-body">
+          <EventList features={{ toolbar: false }} object_id={data.id} />
+        </Box>
+      </Box>
+    </Root>
+  );
+}
+
+const Root = styled(Stack)``;

package/src/pages/admin/customers/customers/index.tsx

@@ -0,0 +1,109 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { getDurableData } from '@arcblock/ux/lib/Datatable';
+import DidAddress from '@arcblock/ux/lib/DID';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TCustomer } from '@did-pay/types';
+import { Alert, CircularProgress } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import Table from '../../../../components/table';
+import api from '../../../../libs/api';
+import { formatTime } from '../../../../libs/util';
+
+const fetchData = (params: Record<string, any> = {}): Promise<{ list: TCustomer[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/customers?${search.toString()}`).then((res) => res.data);
+};
+
+export default function CustomersList() {
+  const listKey = 'customers';
+  const persisted = getDurableData(listKey);
+
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const [search, setSearch] = useState<{ active: string; pageSize: number; page: number }>({
+    active: '',
+    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('admin.product.name.label'),
+      name: 'name',
+    },
+    {
+      label: t('common.did'),
+      name: 'did',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TCustomer;
+          return <DidAddress did={item.did} />;
+        },
+      },
+    },
+    {
+      label: t('common.email'),
+      name: 'email',
+    },
+    {
+      label: t('admin.customer.phone'),
+      name: 'phone',
+    },
+    {
+      label: t('common.createdAt'),
+      name: 'created_at',
+      options: {
+        customBodyRender: (e: string) => {
+          return formatTime(e);
+        },
+      },
+    },
+  ];
+
+  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}
+      options={{
+        count: data.count,
+        page: search.page - 1,
+        rowsPerPage: search.pageSize,
+        onRowClick: (_: any, { dataIndex }: any) => {
+          const item = data.list[dataIndex] as TCustomer;
+          navigate(`/admin/customers/${item.id}`);
+        },
+      }}
+      loading={loading}
+      onChange={onTableChange}
+    />
+  );
+}

package/src/pages/admin/customers/index.tsx

@@ -0,0 +1,47 @@
+import Center from '@arcblock/ux/lib/Center';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Tabs from '@arcblock/ux/lib/Tabs';
+import { CircularProgress, Typography } from '@mui/material';
+import React, { Suspense, isValidElement } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+const CustomerDetail = React.lazy(() => import('./customers/detail'));
+
+const pages = {
+  overview: React.lazy(() => import('./customers')),
+};
+
+export default function CustomerIndex() {
+  const navigate = useNavigate();
+  const { t } = useLocaleContext();
+  const { page = 'overview' } = useParams();
+
+  if (page.startsWith('cus_')) {
+    return <CustomerDetail id={page} />;
+  }
+
+  const onTabChange = (newTab: string) => {
+    navigate(`/admin/customers/${newTab}`);
+  };
+
+  // @ts-ignore
+  const TabComponent = pages[page] || pages.overview;
+  const tabs = [{ label: t('admin.overview'), value: 'overview' }];
+
+  return (
+    <div>
+      <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
+        {t('admin.customers')}
+      </Typography>
+      <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
+      <Suspense
+        fallback={
+          <Center relative="parent">
+            <CircularProgress />
+          </Center>
+        }>
+        {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
+      </Suspense>
+    </div>
+  );
+}