payment-kit 1.13.15

package/src/pages/admin/developers/events/detail.tsx

@@ -0,0 +1,77 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TEventExpanded } from '@did-pay/types';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { Alert, Box, CircularProgress, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { useRequest } from 'ahooks';
+import { Link } from 'react-router-dom';
+
+import Copyable from '../../../../components/copyable';
+import InfoMetric from '../../../../components/info-metric';
+import SectionHeader from '../../../../components/section/header';
+import WebhookAttempts from '../../../../components/webhook/attempts';
+import api from '../../../../libs/api';
+import { formatTime } from '../../../../libs/util';
+
+const fetchData = (id: string): Promise<TEventExpanded> => {
+  return api.get(`/api/events/${id}`).then((res) => res.data);
+};
+
+export default function EventDetail(props: { id: string }) {
+  const { t } = useLocaleContext();
+
+  const { loading, error, data } = useRequest(() => fetchData(props.id));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+      <Box>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+          <Link to="/admin/developers/events">
+            <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.events')}
+              </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}>
+              {data.type}
+            </Typography>
+          </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.event.pendingWebhooks')} value={data.pending_webhooks} 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.event.webhooks')} />
+        <Box className="section-body">
+          <WebhookAttempts event_id={data.id} event={data} />
+        </Box>
+      </Box>
+    </Root>
+  );
+}
+
+const Root = styled(Stack)``;

package/src/pages/admin/developers/events/index.tsx

@@ -0,0 +1,5 @@
+import EventList from '../../../../components/event/list';
+
+export default function EventsList() {
+  return <EventList features={{ toolbar: false }} />;
+}

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

@@ -0,0 +1,60 @@
+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 EventDetail = React.lazy(() => import('./events/detail'));
+const WebhookDetail = React.lazy(() => import('./webhooks/detail'));
+
+const pages = {
+  overview: React.lazy(() => import('./overview')),
+  webhooks: React.lazy(() => import('./webhooks')),
+  events: React.lazy(() => import('./events')),
+  logs: React.lazy(() => import('./logs')),
+};
+
+export default function DevelopersIndex() {
+  const navigate = useNavigate();
+  const { t } = useLocaleContext();
+  const { page = 'overview' } = useParams();
+
+  if (page.startsWith('evt_')) {
+    return <EventDetail id={page} />;
+  }
+
+  if (page.startsWith('we_')) {
+    return <WebhookDetail id={page} />;
+  }
+
+  const onTabChange = (newTab: string) => {
+    navigate(`/admin/developers/${newTab}`);
+  };
+
+  // @ts-ignore
+  const TabComponent = pages[page] || pages.overview;
+  const tabs = [
+    { label: t('admin.overview'), value: 'overview' },
+    { label: t('admin.webhooks'), value: 'webhooks' },
+    { label: t('admin.events'), value: 'events' },
+    { label: t('admin.logs'), value: 'logs' },
+  ];
+
+  return (
+    <div>
+      <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
+        {t('admin.developers')}
+      </Typography>
+      <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
+      <Suspense
+        fallback={
+          <Center relative="parent">
+            <CircularProgress />
+          </Center>
+        }>
+        {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
+      </Suspense>
+    </div>
+  );
+}

package/src/pages/admin/developers/logs.tsx

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

package/src/pages/admin/developers/overview.tsx

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

package/src/pages/admin/developers/webhooks/detail.tsx

@@ -0,0 +1,109 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TWebhookEndpointExpanded } from '@did-pay/types';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { Alert, Box, CircularProgress, Stack, Tooltip, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { useRequest } from 'ahooks';
+import { Link } from 'react-router-dom';
+
+import Copyable from '../../../../components/copyable';
+import InfoMetric from '../../../../components/info-metric';
+import SectionHeader from '../../../../components/section/header';
+import Status from '../../../../components/status';
+import WebhookAttempts from '../../../../components/webhook/attempts';
+import api from '../../../../libs/api';
+import { formatTime, getWebhookStatusColor } from '../../../../libs/util';
+
+const fetchData = (id: string): Promise<TWebhookEndpointExpanded> => {
+  return api.get(`/api/webhook-endpoints/${id}`).then((res) => res.data);
+};
+
+export default function WebhookDetail(props: { id: string }) {
+  const { t } = useLocaleContext();
+
+  const { loading, error, data } = useRequest(() => fetchData(props.id));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+      <Box>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+          <Link to="/admin/developers/webhooks">
+            <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.webhooks')}
+              </Typography>
+            </Stack>
+          </Link>
+          <Copyable text={props.id} style={{ marginLeft: 4 }} />
+        </Stack>
+        <Box mt={2}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack direction="column" alignItems="flex-start">
+              <Typography variant="h5" fontWeight={600}>
+                {data.url}
+              </Typography>
+              <Typography variant="body1" color="text.secondary">
+                {data.description}
+              </Typography>
+            </Stack>
+          </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.status')}
+              value={<Status label={data.status} color={getWebhookStatusColor(data.status)} />}
+              divider
+            />
+            <InfoMetric
+              label={t('admin.webhookEndpoint.listen')}
+              value={
+                <Tooltip
+                  arrow
+                  title={
+                    <ul style={{ padding: 0, margin: 0 }}>
+                      {data.enabled_events.map((x) => (
+                        <li key={x} style={{ fontSize: '0.9rem' }}>
+                          {x}
+                        </li>
+                      ))}
+                    </ul>
+                  }>
+                  <Typography sx={{ backgroundColor: '#eee', paddingX: 0.5, borderRadius: 0.5 }}>
+                    {data.enabled_events.length} events
+                  </Typography>
+                </Tooltip>
+              }
+              divider
+            />
+            <InfoMetric label={t('admin.webhookEndpoint.version')} value={data.api_version} 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.webhookEndpoint.attempts')} mb={0} />
+        <Box className="section-body">
+          <WebhookAttempts webhook_endpoint_id={data.id} />
+        </Box>
+      </Box>
+    </Root>
+  );
+}
+
+const Root = styled(Stack)``;

package/src/pages/admin/developers/webhooks/index.tsx

@@ -0,0 +1,102 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { getDurableData } from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TWebhookEndpoint } from '@did-pay/types';
+import { Alert, CircularProgress, Typography } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import Status from '../../../../components/status';
+import Table from '../../../../components/table';
+import api from '../../../../libs/api';
+import { formatTime, getWebhookStatusColor } from '../../../../libs/util';
+
+const fetchData = (params: Record<string, any> = {}): Promise<{ list: TWebhookEndpoint[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/webhook-endpoints?${search.toString()}`).then((res) => res.data);
+};
+
+export default function WebhooksList() {
+  const listKey = 'webhooks';
+  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.webhookEndpoint.url.label'),
+      name: 'url',
+    },
+    {
+      label: t('common.status'),
+      name: 'status',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TWebhookEndpoint;
+          return <Status label={item?.status} color={getWebhookStatusColor(item?.status)} />;
+        },
+      },
+    },
+    {
+      label: t('common.updatedAt'),
+      name: 'updated_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 TWebhookEndpoint;
+          navigate(`/admin/developers/${item.id}`);
+        },
+      }}
+      loading={loading}
+      onChange={onTableChange}
+      title={<Typography variant="h6">{t('admin.webhookEndpoint.hosted')}</Typography>}
+    />
+  );
+}

package/src/pages/admin/index.tsx

@@ -0,0 +1,120 @@
+import Center from '@arcblock/ux/lib/Center';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Box, Chip, CircularProgress, Stack } from '@mui/material';
+import React, { Suspense, isValidElement } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import Layout from '../../components/layout';
+import Switch from '../../components/switch';
+import { SettingsProvider, useSettingsContext } from '../../contexts/settings';
+
+const groups = {
+  overview: React.lazy(() => import('./overview')),
+  payments: React.lazy(() => import('./payments/index')),
+  customers: React.lazy(() => import('./customers/index')),
+  products: React.lazy(() => import('./products/index')),
+  billing: React.lazy(() => import('./billing/index')),
+  developers: React.lazy(() => import('./developers/index')),
+  settings: React.lazy(() => import('./settings/index')),
+};
+
+// eslint-disable-next-line @typescript-eslint/no-shadow
+const renderNav = (group: string, onChange: Function, groups: { label: string; value: string }[]) =>
+  groups.map((x) => (
+    <Chip
+      key={x.value}
+      variant={group === x.value ? 'filled' : 'outlined'}
+      color={group === x.value ? 'primary' : 'default'}
+      size="small"
+      label={x.label}
+      onClick={() => onChange(x.value)}
+      sx={{
+        mr: 2,
+        fontSize: 14,
+        fontWeight: 600,
+        border: 'none',
+        cursor: 'pointer',
+        '&:hover': group === x.value ? {} : { backgroundColor: '#eee' },
+      }}
+    />
+  ));
+
+function Admin() {
+  const navigate = useNavigate();
+  const { t } = useLocaleContext();
+  const settings = useSettingsContext();
+  const { group = 'overview' } = useParams();
+
+  const onLivemodeChange = (e: any) => {
+    settings.setLivemode(!e.target.checked);
+    settings.refresh();
+  };
+
+  const onTabChange = (newTab: string) => {
+    navigate(`/admin/${newTab}`);
+  };
+
+  // @ts-ignore
+  const TabComponent = groups[group] || groups.overview;
+
+  const group1 = [
+    { label: t('admin.overview'), value: 'overview' },
+    { label: t('admin.payments'), value: 'payments' },
+    { label: t('admin.customers'), value: 'customers' },
+    { label: t('admin.products'), value: 'products' },
+    { label: t('admin.billing'), value: 'billing' },
+    { label: t('admin.settings'), value: 'settings' },
+  ];
+
+  const group2 = [{ label: t('admin.developers'), value: 'developers' }];
+
+  return (
+    <Layout>
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        spacing={1}
+        sx={{ mt: 1, pb: 1, borderBottom: '1px solid #eee' }}>
+        <Box>{renderNav(group, onTabChange, group1)}</Box>
+        <Stack direction="row" alignItems="center">
+          {renderNav(group, onTabChange, group2)}{' '}
+          <label
+            htmlFor="livemode-switch"
+            style={{
+              fontSize: 14,
+              fontWeight: 600,
+              color: settings.livemode ? 'text.primary' : 'warning.light',
+            }}>
+            {t('common.livemode')}
+            <Switch
+              id="livemode-switch"
+              sx={{ ml: 1 }}
+              variant="warning"
+              checked={!settings.livemode}
+              onChange={onLivemodeChange}
+            />
+          </label>
+        </Stack>
+      </Stack>
+      <div className="page-content">
+        <Suspense
+          fallback={
+            <Center relative="parent">
+              <CircularProgress />
+            </Center>
+          }>
+          {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
+        </Suspense>
+      </div>
+    </Layout>
+  );
+}
+
+export default function WrappedAdmin() {
+  return (
+    <SettingsProvider>
+      <Admin />
+    </SettingsProvider>
+  );
+}

package/src/pages/admin/overview.tsx

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

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

@@ -0,0 +1,65 @@
+import Center from '@arcblock/ux/lib/Center';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Tabs from '@arcblock/ux/lib/Tabs';
+import { CircularProgress, Stack, Typography } from '@mui/material';
+import React, { Suspense, isValidElement } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+const PaymentLinkCreate = React.lazy(() => import('./links/create'));
+const PaymentLinkDetail = React.lazy(() => import('./links/detail'));
+const PaymentIntentDetail = React.lazy(() => import('./intents/detail'));
+
+const pages = {
+  intents: React.lazy(() => import('./intents')),
+  links: React.lazy(() => import('./links')),
+};
+
+export default function PaymentIndex() {
+  const navigate = useNavigate();
+  const { t } = useLocaleContext();
+  const { page = 'intents' } = useParams();
+
+  if (page.startsWith('pi_')) {
+    return <PaymentIntentDetail id={page} />;
+  }
+
+  if (page.startsWith('plink_')) {
+    return <PaymentLinkDetail id={page} />;
+  }
+
+  const onTabChange = (newTab: string) => {
+    navigate(`/admin/payments/${newTab}`);
+  };
+
+  // @ts-ignore
+  const TabComponent = pages[page] || pages.intents;
+  const tabs = [
+    { label: t('admin.payments'), value: 'intents' },
+    { label: t('admin.paymentLinks'), value: 'links' },
+  ];
+
+  let extra = null;
+  if (page === 'links') {
+    extra = <PaymentLinkCreate />;
+  }
+
+  return (
+    <div>
+      <Stack direction="row" alignItems="center" justifyContent="space-between">
+        <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
+          {t('admin.payments')}
+        </Typography>
+        {extra}
+      </Stack>
+      <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
+      <Suspense
+        fallback={
+          <Center relative="parent">
+            <CircularProgress />
+          </Center>
+        }>
+        {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
+      </Suspense>
+    </div>
+  );
+}