payment-kit 1.13.15

package/src/pages/admin/payments/links/index.tsx

@@ -0,0 +1,167 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { getDurableData } from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TPaymentLinkExpanded } from '@did-pay/types';
+import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { joinURL } from 'ufo';
+import useBus from 'use-bus';
+
+import Copyable from '../../../../components/copyable';
+import PaymentLinkActions from '../../../../components/payment-link/actions';
+import Status from '../../../../components/status';
+import Table from '../../../../components/table';
+import { ProductsProvider } from '../../../../contexts/products';
+import { useSettingsContext } from '../../../../contexts/settings';
+import api from '../../../../libs/api';
+import { formatPaymentLinkPricing, formatTime } from '../../../../libs/util';
+
+const fetchData = (params: Record<string, any> = {}): Promise<{ list: TPaymentLinkExpanded[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/payment-links?${search.toString()}`).then((res) => res.data);
+};
+
+function PaymentLinks() {
+  const listKey = 'payment-links';
+  const { t } = useLocaleContext();
+  const { settings } = useSettingsContext();
+  const navigate = useNavigate();
+
+  const persisted = getDurableData(listKey);
+  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]);
+
+  useBus('paymentLink.created', () => refresh(), []);
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const columns = [
+    {
+      label: t('common.url'),
+      name: 'id',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPaymentLinkExpanded;
+          return (
+            <Copyable text={joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pay/${item.id}`)}>
+              <Typography sx={{ color: 'text.primary', mr: 1 }}>{item.id}</Typography>
+            </Copyable>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'active',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index];
+          return <Status label={item?.active ? 'Active' : 'Archived'} color={item?.active ? 'success' : 'default'} />;
+        },
+      },
+    },
+    {
+      label: t('common.name'),
+      name: 'name',
+    },
+    {
+      label: t('admin.price.name'),
+      name: '',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const doc = data.list[index] as TPaymentLinkExpanded;
+          const result = formatPaymentLinkPricing(doc, settings.baseCurrency);
+          return [result.amount, result.then].filter(Boolean).join(', ');
+        },
+      },
+    },
+    {
+      label: t('common.createdAt'),
+      name: 'created_at',
+      options: {
+        customBodyRender: (e: string) => {
+          return formatTime(e);
+        },
+      },
+    },
+    {
+      label: t('common.actions'),
+      name: 'id',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const doc = data.list[index] as TPaymentLinkExpanded;
+          return <PaymentLinkActions data={doc} onChange={refresh} />;
+        },
+      },
+    },
+  ];
+
+  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']}
+      title={
+        <div className="table-toolbar-left">
+          <ToggleButtonGroup
+            value={search.active}
+            onChange={(_, value) => setSearch((x) => ({ ...x, active: value }))}
+            exclusive>
+            <ToggleButton value="">All</ToggleButton>
+            <ToggleButton value="true">Active</ToggleButton>
+            <ToggleButton value="false">Archived</ToggleButton>
+          </ToggleButtonGroup>
+        </div>
+      }
+      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 TPaymentLinkExpanded;
+          navigate(`/admin/payments/${item.id}`);
+        },
+      }}
+      loading={loading}
+      onChange={onTableChange}
+    />
+  );
+}
+
+export default function WrappedPaymentLinks() {
+  return (
+    <ProductsProvider>
+      <PaymentLinks />
+    </ProductsProvider>
+  );
+}

package/src/pages/admin/products/coupons/index.tsx

@@ -0,0 +1,3 @@
+export default function Coupons() {
+  return <div>Coupons List</div>;
+}

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

@@ -0,0 +1,81 @@
+import Button from '@arcblock/ux/lib/Button';
+import Center from '@arcblock/ux/lib/Center';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Tabs from '@arcblock/ux/lib/Tabs';
+import { AddOutlined } from '@mui/icons-material';
+import { CircularProgress, Stack, Typography } from '@mui/material';
+import React, { Suspense, isValidElement } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+const ProductCreate = React.lazy(() => import('./products/create'));
+const ProductDetail = React.lazy(() => import('./products/detail'));
+const PriceDetail = React.lazy(() => import('./prices/detail'));
+
+const pages = {
+  products: React.lazy(() => import('./products')),
+  coupons: React.lazy(() => import('./coupons')),
+  'pricing-tables': React.lazy(() => import('./pricing-tables')),
+};
+
+export default function Products() {
+  const navigate = useNavigate();
+  const { t } = useLocaleContext();
+  const { page = 'products' } = useParams();
+
+  if (page.startsWith('prod_')) {
+    return <ProductDetail id={page} />;
+  }
+
+  if (page.startsWith('price_')) {
+    return <PriceDetail id={page} />;
+  }
+
+  // @ts-ignore
+  const TabComponent = pages[page] || pages.products;
+  const tabs = [
+    { label: t('admin.products'), value: 'products' },
+    { label: t('admin.coupons'), value: 'coupons' },
+    { label: t('admin.pricingTables'), value: 'pricing-tables' },
+  ];
+
+  let extra = null;
+  if (page === 'products') {
+    extra = <ProductCreate />;
+  } else if (page === 'coupons') {
+    extra = (
+      <Button
+        variant="contained"
+        size="small"
+        color="primary"
+        onClick={() => navigate('/admin/products/coupons/create')}>
+        <AddOutlined />
+        {t('admin.coupon.create')}
+      </Button>
+    );
+  }
+
+  return (
+    <>
+      <Stack direction="row" alignItems="center" justifyContent="space-between">
+        <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
+          {t('admin.products')}
+        </Typography>
+        {extra}
+      </Stack>
+      <Tabs
+        tabs={tabs}
+        current={page}
+        onChange={(newTab: string) => navigate(`/admin/products/${newTab}`)}
+        scrollButtons="auto"
+      />
+      <Suspense
+        fallback={
+          <Center relative="parent">
+            <CircularProgress />
+          </Center>
+        }>
+        {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
+      </Suspense>
+    </>
+  );
+}

package/src/pages/admin/products/prices/actions.tsx

@@ -0,0 +1,151 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TPrice } from '@did-pay/types';
+import { useSetState } from 'ahooks';
+
+import Actions from '../../../../components/actions';
+import ConfirmDialog from '../../../../components/confirm';
+import EditPrice from '../../../../components/product/edit-price';
+import api from '../../../../libs/api';
+import { formatError } from '../../../../libs/util';
+
+type Props = {
+  data: TPrice;
+  onChange: Function;
+  variant?: string;
+  setAsDefault?: boolean;
+};
+
+PriceActions.defaultProps = {
+  variant: 'compact',
+  setAsDefault: false,
+};
+
+export default function PriceActions(props: Props) {
+  const { t } = useLocaleContext();
+
+  const canEdit = props.data.active;
+  const canArchive = props.data.active;
+  const canRemove = !props.data.locked && props.setAsDefault;
+
+  const [state, setState] = useSetState({
+    action: '',
+    loading: false,
+  });
+
+  const onEditPrice = async (updates: TPrice) => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/prices/${props.data.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      props.onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+  const onArchivePrice = async () => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/prices/${props.data.id}/archive`).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      props.onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+  const onRemovePrice = async () => {
+    try {
+      setState({ loading: true });
+      await api.delete(`/api/prices/${props.data.id}`).then((res) => res.data);
+      Toast.success(t('common.removed'));
+      props.onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+  const onSetAsDefault = async () => {
+    try {
+      setState({ loading: true });
+      await api
+        .put(`/api/products/${props.data.product_id}`, { default_price_id: props.data.id })
+        .then((res) => res.data);
+      Toast.success(t('common.removed'));
+      props.onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+
+  const actions = [
+    {
+      label: t('admin.price.edit'),
+      handler: () => setState({ action: 'edit' }),
+      color: canEdit ? 'text.primary' : 'text.disabled',
+      disabled: !canEdit,
+    },
+    {
+      label: t('admin.price.archive'),
+      handler: () => setState({ action: 'archive' }),
+      color: canArchive ? 'text.primary' : 'text.disabled',
+      disabled: !canArchive,
+      divider: true,
+    },
+    {
+      label: t('admin.price.remove'),
+      handler: () => setState({ action: 'remove' }),
+      color: canRemove ? 'error.main' : 'text.disabled',
+      disabled: !canRemove,
+      divider: props.setAsDefault,
+    },
+    // FIXME: add these features later
+    // { label: 'Create payment link', handler: props.onRemove, color: 'error', divider: true },
+    // { label: 'Create pricing table', handler: props.onRemove, color: 'error', divider: true },
+  ];
+
+  if (props.setAsDefault) {
+    actions.push({
+      label: t('admin.price.setAsDefault'),
+      handler: onSetAsDefault,
+      color: 'text.primary',
+      disabled: false,
+    });
+  }
+
+  return (
+    <>
+      <Actions variant={props.variant} actions={actions} />
+      {state.action === 'edit' && (
+        // @ts-ignore
+        <EditPrice price={props.data} onSave={onEditPrice} onCancel={() => setState({ action: '' })} />
+      )}
+      {state.action === 'archive' && (
+        <ConfirmDialog
+          onConfirm={onArchivePrice}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.price.archive')}
+          message={t('admin.price.archiveTip')}
+        />
+      )}
+      {state.action === 'remove' && (
+        <ConfirmDialog
+          onConfirm={onRemovePrice}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.price.remove')}
+          message={t('admin.price.removeTip')}
+        />
+      )}
+    </>
+  );
+}

package/src/pages/admin/products/prices/detail.tsx

@@ -0,0 +1,203 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TPrice, TPriceExpanded } from '@did-pay/types';
+import { ArrowBackOutlined, Edit } from '@mui/icons-material';
+import { Alert, AlertTitle, Box, Button, CircularProgress, Grid, 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 Currency from '../../../../components/currency';
+import EventList from '../../../../components/event/list';
+import InfoMetric from '../../../../components/info-metric';
+import InfoRow from '../../../../components/info-row';
+import MetadataEditor from '../../../../components/metadata/editor';
+import EditPrice from '../../../../components/product/edit-price';
+import SectionHeader from '../../../../components/section/header';
+import api from '../../../../libs/api';
+import { formatError, formatPrice, formatTime } from '../../../../libs/util';
+import PriceActions from './actions';
+
+const fetchData = (id: string): Promise<TPriceExpanded> => {
+  return api.get(`/api/prices/${id}`).then((res) => res.data);
+};
+
+export default function PriceDetail(props: { id: string }) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const [state, setState] = useSetState({
+    adding: {
+      price: false,
+    },
+    editing: {
+      metadata: false,
+      price: false,
+    },
+    loading: {
+      metadata: false,
+      price: 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: TPrice) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
+      await api.put(`/api/prices/${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 onUpdateAll = createUpdater('price');
+  const onChange = (action: string) => {
+    if (action === 'remove') {
+      navigate('/admin/products');
+    } else {
+      runAsync();
+    }
+  };
+
+  return (
+    <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+      {data.active === false && (
+        <Alert severity="warning">
+          <AlertTitle>{t('admin.price.archived')}</AlertTitle>
+          {t('admin.price.archivedTip')}
+        </Alert>
+      )}
+      <Box>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+          <Link to="/admin/products">
+            <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.products')}
+              </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" fontWeight={600}>
+              Price for {data.product.name}
+            </Typography>
+            <PriceActions 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('admin.product.name.label')}
+              value={<Link to={`/admin/products/${data.product_id}`}>{data.product.name}</Link>}
+              divider
+            />
+            <InfoMetric label={t('admin.price.amount')} value={formatPrice(data, data.currency)} divider />
+            <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
+            <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+          </Stack>
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.details')}>
+          <Button
+            variant="outlined"
+            color="inherit"
+            size="small"
+            onClick={() => setState((prev) => ({ editing: { ...prev.editing, price: true } }))}>
+            <Edit fontSize="small" sx={{ mr: 0.5 }} />
+            {t('common.edit')}
+          </Button>
+        </SectionHeader>
+        <Grid className="section-body" container>
+          <Grid item xs={12} md={6}>
+            <InfoRow label={t('admin.price.type')} value={data.type} />
+            <InfoRow label={t('admin.price.recurring.interval')} value={data.recurring?.interval} />
+            <InfoRow label={t('admin.price.nickname.label')} value={data.nickname} />
+            <InfoRow label={t('admin.price.lookupKey')} value={data.lookup_key} />
+            <InfoRow
+              label={t('admin.paymentCurrency.name')}
+              value={<Currency logo={data.currency.logo} name={data.currency.symbol} />}
+            />
+            <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+            <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+          </Grid>
+          {state.editing.price && (
+            <EditPrice
+              // @ts-ignore
+              price={data}
+              loading={state.loading.price}
+              onSave={onUpdateAll}
+              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, price: false } }))}
+            />
+          )}
+        </Grid>
+      </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>
+            ) : (
+              <Grid container>
+                <Grid item xs={12} md={6}>
+                  {Object.keys(data.metadata || {}).map((key) => (
+                    <InfoRow key={key} label={key} value={data.metadata[key]} />
+                  ))}
+                </Grid>
+              </Grid>
+            ))}
+          {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)``;