payment-kit 1.13.15

package/src/components/copyable.tsx

@@ -0,0 +1,38 @@
+import { CopyButton } from '@arcblock/ux/lib/ClickToCopy';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Stack, Typography } from '@mui/material';
+
+export default function Copyable({ text, children, style }: { text: string; children?: React.ReactNode; style?: any }) {
+  const { locale } = useLocaleContext();
+  return (
+    <CopyButton
+      content={text}
+      locale={locale}
+      style={style}
+      render={({ copyButton, containerRef }: any) => (
+        <Stack ref={containerRef} direction="row" alignItems="center" color="text.secondary">
+          {children || (
+            <Typography
+              component="span"
+              sx={{
+                mr: 0.5,
+                maxWidth: 480,
+                overflow: 'hidden',
+                fontSize: 'inherit',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}>
+              {text}
+            </Typography>
+          )}
+          {copyButton}
+        </Stack>
+      )}
+    />
+  );
+}
+
+Copyable.defaultProps = {
+  style: {},
+  children: null,
+};

package/src/components/currency.tsx

@@ -0,0 +1,15 @@
+import { Avatar, Stack, Typography } from '@mui/material';
+
+type Props = {
+  logo: string;
+  name: string;
+};
+
+export default function Currency({ logo, name }: Props) {
+  return (
+    <Stack direction="row" alignItems="center" spacing={0.5}>
+      <Avatar src={logo} alt={name} sx={{ width: 20, height: 20 }} />
+      <Typography color="text.primary">{name}</Typography>
+    </Stack>
+  );
+}

package/src/components/customer/actions.tsx

@@ -0,0 +1,73 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TCustomerExpanded } from '@did-pay/types';
+import { useSetState } from 'ahooks';
+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: TCustomerExpanded;
+  onChange: (action: string) => void;
+  variant?: LiteralUnion<'compact' | 'normal', string>;
+};
+
+CustomerActions.defaultProps = {
+  variant: 'compact',
+};
+
+export default function CustomerActions({ data, onChange, variant }: Props) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    action: '',
+    loading: false,
+  });
+
+  const onRefund = async () => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/customers/${data.id}/archive`).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: '' });
+    }
+  };
+
+  return (
+    <>
+      <Actions
+        variant={variant}
+        actions={[
+          {
+            label: t('admin.payments'),
+            handler: () => setState({ action: 'refund' }),
+            color: 'primary',
+            disabled: true,
+          },
+          {
+            label: t('admin.customer.edit'),
+            handler: () => setState({ action: 'edit' }),
+            color: 'primary',
+            disabled: true,
+          },
+        ]}
+      />
+      {state.action === 'refund' && (
+        <ConfirmDialog
+          onConfirm={onRefund}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.customer.refund')}
+          message={t('admin.customer.refundTip')}
+          loading={state.loading}
+        />
+      )}
+    </>
+  );
+}

package/src/components/data.tsx

@@ -0,0 +1,20 @@
+import { Alert, CircularProgress } from '@mui/material';
+import { useRequest } from 'ahooks';
+
+type Props = {
+  dataFn: () => Promise<any>;
+  children: (data: any) => React.ReactNode;
+};
+
+export default function DataDrivenPage(props: Props) {
+  const { loading, error, data } = useRequest(props.dataFn);
+
+  if (loading) {
+    return <CircularProgress />;
+  }
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  return props.children(data);
+}

package/src/components/drawer-form.tsx

@@ -0,0 +1,77 @@
+import { Close } from '@mui/icons-material';
+import { Box, Button, Divider, Drawer, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import React, { useState } from 'react';
+import useBus from 'use-bus';
+
+import { useSettingsContext } from '../contexts/settings';
+import Livemode from './livemode';
+
+type Props = {
+  icon: React.ReactNode;
+  text: string;
+  addons: React.ReactNode;
+  children: React.ReactNode;
+  maxWidth?: number;
+  style?: Record<string, any>;
+};
+
+DrawerForm.defaultProps = {
+  style: {},
+  maxWidth: 960,
+};
+
+export default function DrawerForm(props: Props) {
+  const [open, setOpen] = useState(false);
+  const settings = useSettingsContext();
+
+  useBus('drawer.submitted', () => setOpen(false), []);
+
+  return (
+    <>
+      <Button variant="contained" size="small" color="primary" onClick={() => setOpen(true)}>
+        {props.icon}
+        {props.text}
+      </Button>
+      <Container
+        anchor="right"
+        open={open}
+        onClose={() => setOpen(false)}
+        sx={props.style || {}}
+        maxWidth={props.maxWidth}
+        disableEscapeKeyDown>
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="space-between"
+          sx={{ pl: 3, pr: 3, pb: 2, mt: 2, borderBottom: '1px solid #eee' }}>
+          <Stack direction="row" alignItems="center">
+            <Typography className="drawer-form-header" variant="h6" sx={{ fontWeight: 600 }}>
+              {props.text}
+            </Typography>
+            {!settings.livemode && <Livemode />}
+          </Stack>
+          <Stack direction="row" alignItems="center" justifyContent="space-between">
+            <Close
+              sx={{ mr: props.addons ? 1 : 0, color: 'text.secondary', cursor: 'pointer' }}
+              onClick={() => setOpen(false)}
+            />
+            {props.addons && <Divider orientation="vertical" flexItem sx={{ mr: 2 }} />}
+            {props.addons}
+          </Stack>
+        </Stack>
+        <Box className="drawer-form-body" sx={{ mx: 3, my: 2 }}>
+          {props.children}
+        </Box>
+      </Container>
+    </>
+  );
+}
+
+const Container = styled<any>(Drawer)`
+  .MuiPaper-root {
+    width: 80%;
+    min-width: 360px;
+    max-width: ${(props) => props.maxWidth}px;
+  }
+`;

package/src/components/error-fallback.tsx

@@ -0,0 +1,7 @@
+import Error from './error';
+
+function ErrorFallback({ error }: { error: Error }) {
+  return <Error message={error?.message} />;
+}
+
+export default ErrorFallback;

package/src/components/error.tsx

@@ -0,0 +1,39 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/system';
+
+const Container = styled(Box)`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
+`;
+
+const Content = styled(Box)`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: 'Lexend';
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: center;
+`;
+
+export default function Error({ message }: { message?: string }) {
+  const { t } = useLocaleContext();
+
+  return (
+    <Container>
+      <Content>{message || t('common.error')}</Content>
+    </Container>
+  );
+}
+
+Error.defaultProps = {
+  message: '',
+};

package/src/components/event/list.tsx

@@ -0,0 +1,217 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { getDurableData } from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TEventExpanded } 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 api from '../../libs/api';
+import { formatTime } from '../../libs/util';
+import Table from '../table';
+
+const fetchData = (params: Record<string, any> = {}): Promise<{ list: TEventExpanded[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/events?${search.toString()}`).then((res) => res.data);
+};
+
+type SearchProps = {
+  pageSize: number;
+  page: number;
+  type?: string;
+  object_id?: string;
+};
+
+type ListProps = {
+  features?: {
+    toolbar?: boolean;
+  };
+  type?: string;
+  object_id?: string;
+};
+
+const getListKey = (props: ListProps) => {
+  if (props.type) {
+    return `events-${props.type}`;
+  }
+  if (props.object_id) {
+    return `events-${props.object_id}`;
+  }
+
+  return 'events';
+};
+
+const getEventDescription = (event: TEventExpanded) => {
+  switch (event.type) {
+    case 'product.created':
+      return `A new product ${event.object_id} was created`;
+    case 'product.updated':
+      return `The product with ID ${event.object_id} was updated`;
+    case 'product.deleted':
+      return `The product with ID ${event.object_id} was deleted`;
+    case 'price.created':
+      return `A new price ${event.object_id} was created`;
+    case 'price.updated':
+      return `The price with ID ${event.object_id} was updated`;
+    case 'price.deleted':
+      return `The price with ID ${event.object_id} was deleted`;
+    case 'payment_link.created':
+      return `A new payment link ${event.object_id} was created`;
+    case 'payment_link.updated':
+      return `The payment link with ID ${event.object_id} was updated`;
+    case 'payment_link.deleted':
+      return `The payment link with ID ${event.object_id} was deleted`;
+    case 'payment_intent.created':
+      return `A new payment intent ${event.object_id} was created`;
+    case 'payment_intent.updated':
+      return `The payment intent with ID ${event.object_id} was updated`;
+    case 'payment_intent.canceled':
+      return `The payment intent with ID ${event.object_id} was canceled`;
+    case 'payment_intent.succeeded':
+      return `The payment intent with ID ${event.object_id} succeeded`;
+    case 'payment_intent.processing':
+      return `The payment intent with ID ${event.object_id} is processing`;
+    case 'payment_intent.requires_action':
+      return `The payment intent with ID ${event.object_id} requires user action`;
+    case 'payment_intent.payment_failed':
+      return `The payment intent with ID ${event.object_id} failed to pay`;
+    case 'payment_intent.deleted':
+      return `The payment intent with ID ${event.object_id} was deleted`;
+    case 'customer.created':
+      return `A new customer ${event.object_id} was created`;
+    case 'customer.updated':
+      return `The customer with ID ${event.object_id} was updated`;
+    case 'customer.deleted':
+      return `The customer with ID ${event.object_id} was deleted`;
+    case 'invoice.created':
+      return `A new invoice ${event.object_id} was created`;
+    case 'invoice.finalized':
+      return `The invoice with ID ${event.object_id} was finalized`;
+    case 'invoice.updated':
+      return `The invoice with ID ${event.object_id} was updated`;
+    case 'invoice.voided':
+      return `The invoice with ID ${event.object_id} was marked as void`;
+    case 'invoice.paid':
+      return `The invoice with ID ${event.object_id} was marked as paid`;
+    case 'invoice.marked_uncollectible':
+      return `The invoice with ID ${event.object_id} was marked as uncollectible`;
+    case 'invoice.deleted':
+      return `The invoice with ID ${event.object_id} was deleted`;
+    case 'checkout.session.completed':
+      return `The checkout session ${event.object_id} completed`;
+    case 'checkout.session.expired':
+      return `The checkout session ${event.object_id} expired`;
+    case 'customer.subscription.created':
+      return `A new subscription ${event.object_id} was created`;
+    case 'customer.subscription.updated':
+      return `The subscription with ID ${event.object_id} was updated`;
+    case 'customer.subscription.canceled':
+      return `The subscription with ID ${event.object_id} was canceled`;
+    case 'customer.subscription.resumed':
+      return `The subscription with ID ${event.object_id} was resumed`;
+    case 'customer.subscription.paused':
+      return `The subscription with ID ${event.object_id} was paused`;
+    case 'customer.subscription.deleted':
+      return `The subscription with ID ${event.object_id} was deleted`;
+    default:
+      return `${event.type}: ${event.object_id}`;
+  }
+};
+
+EventList.defaultProps = {
+  features: {
+    toolbar: true,
+  },
+  type: '',
+  object_id: '',
+};
+
+export default function EventList({ type, object_id, features }: ListProps) {
+  const listKey = getListKey({ type, object_id });
+  const persisted = getDurableData(listKey);
+
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const [search, setSearch] = useState<SearchProps>({
+    type,
+    object_id,
+    pageSize: persisted.rowsPerPage || 50,
+    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 />;
+  }
+
+  if (data && data.list.length === 0) {
+    return <Typography color="text.secondary">{t('admin.event.empty')}</Typography>;
+  }
+
+  const columns = [
+    {
+      label: t('common.description'),
+      name: 'type',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TEventExpanded;
+          return getEventDescription(item);
+        },
+      },
+    },
+    {
+      label: t('common.id'),
+      name: 'id',
+    },
+    {
+      label: t('common.createdAt'),
+      name: 'created_at',
+      options: {
+        customBodyRender: (e: string) => {
+          return formatTime(e);
+        },
+      },
+    },
+  ].filter(Boolean);
+
+  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 TEventExpanded;
+          navigate(`/admin/developers/${item.id}`);
+        },
+      }}
+      toolbar={features?.toolbar}
+    />
+  );
+}

package/src/components/info-card.tsx

@@ -0,0 +1,40 @@
+import { Avatar, Stack, Typography } from '@mui/material';
+import type { LiteralUnion } from 'type-fest';
+
+type Props = {
+  logo?: string;
+  name: string;
+  description: string;
+  variant?: LiteralUnion<'square' | 'rounded' | 'circular', string>;
+};
+
+// FIXME: @wangshijun add image filter for logo
+export default function InfoCard(props: Props) {
+  const size = { width: 40, height: 40 };
+  return (
+    <Stack direction="row" alignItems="center" spacing={1}>
+      {props.logo ? (
+        // @ts-ignore
+        <Avatar src={props.logo} alt={props.name} variant={props.variant} sx={size} />
+      ) : (
+        // @ts-ignore
+        <Avatar variant={props.variant} sx={size}>
+          {props.name.slice(0, 1)}
+        </Avatar>
+      )}
+      <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
+        <Typography variant="body1" color="text.primary">
+          {props.name}
+        </Typography>
+        <Typography variant="subtitle1" color="text.secondary">
+          {props.description}
+        </Typography>
+      </Stack>
+    </Stack>
+  );
+}
+
+InfoCard.defaultProps = {
+  logo: '',
+  variant: 'rounded',
+};

package/src/components/info-metric.tsx

@@ -0,0 +1,35 @@
+import { InfoOutlined } from '@mui/icons-material';
+import { Divider, Stack, Tooltip, Typography } from '@mui/material';
+
+type Props = {
+  label: string | React.ReactNode;
+  value: string | React.ReactNode;
+  tip?: string | React.ReactNode;
+  divider?: boolean;
+};
+
+export default function InfoMetric(props: Props) {
+  return (
+    <>
+      <Stack direction="column" alignItems="flex-start">
+        <Typography variant="body1" mb={1} color="text.secondary">
+          {props.label}
+          {!!props.tip && (
+            <Tooltip title={props.tip}>
+              <InfoOutlined fontSize="small" />
+            </Tooltip>
+          )}
+        </Typography>
+        <Typography variant="body1" color="text.primary">
+          {props.value}
+        </Typography>
+      </Stack>
+      {props.divider && <Divider orientation="vertical" flexItem />}
+    </>
+  );
+}
+
+InfoMetric.defaultProps = {
+  tip: '',
+  divider: false,
+};

package/src/components/info-row.tsx

@@ -0,0 +1,28 @@
+import { Box, Stack } from '@mui/material';
+import type { ReactNode } from 'react';
+
+type Props = {
+  label: string | ReactNode;
+  value?: string | ReactNode;
+  sizes?: [number, number];
+};
+
+InfoRow.defaultProps = {
+  value: undefined,
+  sizes: [1, 3],
+};
+
+export default function InfoRow(props: Props) {
+  const isNone = props.value === '' || typeof props.value === 'undefined';
+  const sizes = props.sizes || [1, 3];
+  return (
+    <Stack direction="row" alignItems="flex-start" justifyContent="space-between" flexWrap="wrap" sx={{ mb: 1 }}>
+      <Box flex={sizes[0]} color="text.secondary">
+        {props.label}
+      </Box>
+      <Box flex={sizes[1]} color={isNone ? 'text.disabled' : 'color.primary'}>
+        {isNone ? 'None' : props.value}
+      </Box>
+    </Stack>
+  );
+}

package/src/components/input.tsx

@@ -0,0 +1,40 @@
+import { Box, FormLabel, TextField, TextFieldProps } from '@mui/material';
+import { Controller, RegisterOptions, useFormContext } from 'react-hook-form';
+
+type InputProps = TextFieldProps & {
+  name: string;
+  label?: string;
+  placeholder?: string;
+  rules?: RegisterOptions;
+};
+
+FormInput.defaultProps = {
+  label: '',
+  placeholder: '',
+  rules: {},
+};
+
+export default function FormInput({ name, label, placeholder, rules, ...rest }: InputProps) {
+  const { control, formState } = useFormContext();
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({ field }) => (
+        <Box sx={{ width: '100%' }}>
+          {!!label && <FormLabel>{label}</FormLabel>}
+          <TextField
+            fullWidth
+            error={!!formState.errors[name]}
+            helperText={formState.errors[name]?.message as string}
+            placeholder={placeholder}
+            size="small"
+            {...field}
+            {...rest}
+          />
+        </Box>
+      )}
+    />
+  );
+}