payment-kit 1.13.15

package/src/components/subscription/items/index.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TPaymentCurrency, TSubscriptionItemExpanded } from '@did-pay/types';
+import { Stack, Typography } from '@mui/material';
+
+import { formatPrice } from '../../../libs/util';
+import Copyable from '../../copyable';
+import Table from '../../table';
+import LineItemActions from './actions';
+
+type ListProps = {
+  data: TSubscriptionItemExpanded[];
+  currency: TPaymentCurrency;
+};
+
+SubscriptionItemList.defaultProps = {};
+
+export default function SubscriptionItemList({ data, currency }: ListProps) {
+  const { t } = useLocaleContext();
+
+  const columns = [
+    {
+      label: t('admin.subscription.product'),
+      name: 'price_id',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data[index] as TSubscriptionItemExpanded;
+          return (
+            <Stack>
+              <Typography color="text.primary" fontWeight={600}>
+                {item?.price.product.name} - {item?.price_id}
+              </Typography>
+              <Typography color="text.secondary">
+                {formatPrice(item.price, currency, item?.price.product.unit_label)}
+              </Typography>
+            </Stack>
+          );
+        },
+      },
+    },
+    {
+      label: t('admin.subscription.itemId'),
+      name: 'id',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data[index] as TSubscriptionItemExpanded;
+          return <Copyable text={item?.id} />;
+        },
+      },
+    },
+    {
+      label: t('common.quantity'),
+      name: 'quantity',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data[index];
+          return item?.quantity;
+        },
+      },
+    },
+    {
+      label: t('common.total'),
+      name: 'id',
+      align: 'right',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data[index] as TSubscriptionItemExpanded;
+          return (
+            <Typography>{formatPrice(item.price, currency, item?.price.product.unit_label, item?.quantity)}</Typography>
+          );
+        },
+      },
+    },
+    {
+      label: '',
+      name: '',
+      align: 'center',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data[index] as TSubscriptionItemExpanded;
+          return <LineItemActions data={item} />;
+        },
+      },
+    },
+  ];
+
+  return (
+    <Table
+      data={data}
+      columns={columns}
+      loading={false}
+      footer={false}
+      toolbar={false}
+      components={{
+        TableToolbar: () => null,
+        TableFooter: () => null,
+      }}
+      options={{
+        count: data.length,
+        page: 0,
+        rowsPerPage: 100,
+      }}
+    />
+  );
+}

package/src/components/subscription/list.tsx

@@ -0,0 +1,200 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { getDurableData } from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TSubscriptionExpanded } from '@did-pay/types';
+import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import api from '../../libs/api';
+import { formatSubscriptionProduct, formatTime, getSubscriptionStatusColor } from '../../libs/util';
+import Status from '../status';
+import Table from '../table';
+import SubscriptionActions from './actions';
+
+const fetchData = (params: Record<string, any> = {}): Promise<{ list: TSubscriptionExpanded[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/subscriptions?${search.toString()}`).then((res) => res.data);
+};
+
+type SearchProps = {
+  status: string;
+  pageSize: number;
+  page: number;
+  customer_id?: string;
+};
+
+type ListProps = {
+  features?: {
+    customer?: boolean;
+    toolbar?: boolean;
+    footer?: boolean;
+  };
+  customer_id?: string;
+  status?: string;
+};
+
+const getListKey = (props: ListProps) => {
+  if (props.customer_id) {
+    return `customer-subscriptions-${props.customer_id}`;
+  }
+
+  return 'subscriptions';
+};
+
+SubscriptionList.defaultProps = {
+  features: {
+    customer: true,
+    filter: true,
+  },
+  customer_id: '',
+  status: 'active,paused',
+};
+
+export default function SubscriptionList({ customer_id, features, status }: ListProps) {
+  const listKey = getListKey({ customer_id });
+  const persisted = getDurableData(listKey);
+
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const [search, setSearch] = useState<SearchProps>({
+    status: status as string,
+    customer_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('admin.subscription.product'),
+      name: 'id',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TSubscriptionExpanded;
+          return formatSubscriptionProduct(item.items);
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'status',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TSubscriptionExpanded;
+          return <Status label={item.status} color={getSubscriptionStatusColor(item.status)} />;
+        },
+      },
+    },
+    {
+      label: t('admin.subscription.collectionMethod'),
+      name: 'collection_method',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TSubscriptionExpanded;
+          return (
+            <Status
+              label={item.collection_method === 'charge_automatically' ? 'Auto' : 'Manual'}
+              color={item.collection_method === 'charge_automatically' ? 'default' : 'warning'}
+            />
+          );
+        },
+      },
+    },
+    {
+      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 TSubscriptionExpanded;
+          return <SubscriptionActions data={item} onChange={refresh} />;
+        },
+      },
+    },
+  ];
+
+  if (features?.customer) {
+    columns.splice(3, 0, {
+      label: t('common.customer'),
+      name: 'customer_id',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TSubscriptionExpanded;
+          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 TSubscriptionExpanded;
+          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="active">Active</ToggleButton>
+            <ToggleButton value="trialing">Scheduled</ToggleButton>
+            <ToggleButton value="canceled">Canceled</ToggleButton>
+            <ToggleButton value="incomplete,incomplete_expired">Incomplete</ToggleButton>
+            <ToggleButton value="past_due,unpaid">Due</ToggleButton>
+          </ToggleButtonGroup>
+        </div>
+      }
+    />
+  );
+}

package/src/components/switch.tsx

@@ -0,0 +1,48 @@
+import { Switch } from '@mui/material';
+import { styled } from '@mui/system';
+import type { LiteralUnion } from 'type-fest';
+
+type SwitchProps = {
+  variant?: LiteralUnion<'success' | 'error' | 'warning' | 'info' | 'primary' | 'secondary', string>;
+};
+
+export default styled(Switch)<SwitchProps>(({ variant = 'success', theme }) => ({
+  width: 28,
+  height: 16,
+  padding: 0,
+  display: 'inline-flex',
+  '&:active': {
+    '& .MuiSwitch-thumb': {
+      width: 15,
+    },
+    '& .MuiSwitch-switchBase.Mui-checked': {
+      transform: 'translateX(9px)',
+    },
+  },
+  '& .MuiSwitch-switchBase': {
+    padding: 2,
+    '&.Mui-checked': {
+      transform: 'translateX(12px)',
+      color: '#fff',
+      '& + .MuiSwitch-track': {
+        opacity: 1,
+        backgroundColor: theme.palette[variant].light,
+      },
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    transition: (theme.transitions as any).create(['width'], {
+      duration: 200,
+    }),
+  },
+  '& .MuiSwitch-track': {
+    borderRadius: 16 / 2,
+    opacity: 1,
+    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)',
+    boxSizing: 'border-box',
+  },
+}));

package/src/components/table.tsx

@@ -0,0 +1,66 @@
+import Datatable from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { styled } from '@mui/system';
+
+import useMobile from '../hooks/mobile';
+
+function EmptyStub() {
+  return null;
+}
+
+export default function Table({ options, toolbar = true, footer = true, ...rest }: any) {
+  const { isMobile } = useMobile();
+  const { locale } = useLocaleContext();
+  const defaultOptions = {
+    print: false,
+    download: false,
+    filter: false,
+    selectableRows: 'none',
+    rowsPerPage: 20,
+    rowsPerPageOptions: [20, 50, 100],
+    searchDebounceTime: 300,
+    tableBodyHeight: '100%',
+  };
+
+  const components: any = {};
+  if (!toolbar) {
+    components.TableToolbar = EmptyStub;
+  }
+  if (!footer) {
+    components.TableFooter = EmptyStub;
+  }
+
+  return (
+    <Wrapped
+      locale={locale}
+      options={{ ...defaultOptions, ...options }}
+      {...rest}
+      components={components}
+      isMobile={isMobile}
+    />
+  );
+}
+
+const Wrapped = styled(Datatable)`
+  tr.MuiTableRow-root:not(.MuiTableRow-footer) {
+    border-bottom: 1px solid rgba(224, 224, 224, 0.4);
+  }
+
+  th.MuiTableCell-head {
+    text-transform: inherit;
+  }
+
+  tr.MuiTableRow-root:not(.MuiTableRow-footer):hover {
+    background: #f5f5f5;
+  }
+
+  ${(props) => {
+    if (props.isMobile) {
+      return '';
+    }
+
+    return `.MuiTableRow-root > td:first-of-type{
+              padding-left: 6px;
+            }`;
+  }}
+`;

package/src/components/uploader.tsx

@@ -0,0 +1,81 @@
+import { UploadFileOutlined } from '@mui/icons-material';
+import { Box, Button, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { lazy, useCallback, useEffect, useRef } from 'react';
+
+const UploaderComponent = lazy(() => import('@blocklet/uploader/react').then((res) => ({ default: res.Uploader })));
+
+type Props = {
+  onUploaded: (result: any) => void;
+  preview?: string;
+  maxFileSize?: number;
+  allowedFileTypes?: string[];
+};
+
+export default function Uploader({ onUploaded, preview, maxFileSize, allowedFileTypes }: Props) {
+  const uploaderRef = useRef<any>(null);
+  const handleOpen = useCallback(() => {
+    if (!uploaderRef.current) return;
+    uploaderRef.current.open();
+  }, []);
+
+  useEffect(() => {
+    if (uploaderRef.current) {
+      const uploader = uploaderRef.current.getUploader();
+      uploader.onUploadSuccess((result: any) => onUploaded({ url: result.response.data.fileUrl }));
+    }
+  }, [onUploaded]);
+
+  return (
+    <>
+      <Div
+        display="flex"
+        alignItems={preview ? 'flex-end' : 'center'}
+        justifyContent="center"
+        onClick={handleOpen}
+        style={{
+          backgroundImage: preview ? `url(${preview})` : 'none',
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: 'contain',
+        }}>
+        <Button fullWidth variant={preview ? 'contained' : 'text'} color="inherit" size="small">
+          <UploadFileOutlined sx={{ mr: 1 }} fontSize="small" />
+          <Typography>{preview ? 'Change' : 'Upload'}</Typography>
+        </Button>
+      </Div>
+      <UploaderComponent
+        ref={uploaderRef}
+        popup
+        onUploadFinish={(result: any) => onUploaded({ url: result.data.url })}
+        coreProps={{
+          restrictions: {
+            allowedFileTypes,
+            maxFileSize,
+          },
+        }}
+        apiPathProps={{
+          uploader: '/api/uploads',
+          companion: '/api/companion',
+        }}
+      />
+    </>
+  );
+}
+
+Uploader.defaultProps = {
+  preview: '',
+  maxFileSize: 1024 * 1024 * 2,
+  allowedFileTypes: ['image/png', 'image/jpeg', 'image/webp'],
+};
+
+const Div = styled(Box)`
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+  width: 120px;
+  height: 120px;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+`;

package/src/components/webhook/attempts.tsx

@@ -0,0 +1,149 @@
+/* eslint-disable react/no-unstable-nested-components */
+import CodeBlock from '@arcblock/ux/lib/CodeBlock';
+import type { Paginated, TEvent, TWebhookAttemptExpanded } from '@did-pay/types';
+import { CheckCircleOutlined, ErrorOutlined } from '@mui/icons-material';
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Grid,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { useInfiniteScroll } from 'ahooks';
+import React, { useEffect, useState } from 'react';
+
+import api from '../../libs/api';
+import { formatTime } from '../../libs/util';
+
+const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TWebhookAttemptExpanded>> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/webhook-attempts?${search.toString()}`).then((res) => res.data);
+};
+
+const groupAttemptsByDate = (attempts: TWebhookAttemptExpanded[]) => {
+  const groupedAttempts: { [key: string]: TWebhookAttemptExpanded[] } = {};
+  attempts.forEach((attempt) => {
+    const date = new Date(attempt.created_at).toLocaleDateString();
+    if (!groupedAttempts[date]) {
+      groupedAttempts[date] = [];
+    }
+    groupedAttempts[date]?.push(attempt);
+  });
+  return groupedAttempts;
+};
+
+type Props = {
+  event_id?: string;
+  webhook_endpoint_id?: string;
+  event?: TEvent;
+};
+
+WebhookAttempts.defaultProps = {
+  event_id: '',
+  webhook_endpoint_id: '',
+  event: null,
+};
+
+export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }: Props) {
+  const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TWebhookAttemptExpanded>>(
+    (d) => {
+      const size = 15;
+      const page = d ? Math.ceil(d.list.length / size) + 1 : 1;
+      return fetchData({ page, size, event_id, webhook_endpoint_id });
+    },
+    {
+      reloadDeps: [event_id, webhook_endpoint_id],
+    }
+  );
+
+  const attempts = data?.list || [];
+
+  // @ts-ignore
+  const [selected, setSelected] = useState<TWebhookAttemptExpanded>(null);
+  const groupedAttempts = groupAttemptsByDate(attempts);
+
+  useEffect(() => {
+    if (!selected && data?.list.length) {
+      setSelected(data.list[0] as TWebhookAttemptExpanded);
+    }
+  }, [data?.list.length, selected]); // eslint-disable-line
+
+  const handleAttemptClick = (attempt: TWebhookAttemptExpanded) => {
+    setSelected(attempt);
+  };
+
+  if (loading) {
+    return <CircularProgress />;
+  }
+
+  const hasMore = data && data.list.length < data.count;
+
+  return (
+    <Grid container spacing={0}>
+      <Grid item xs={4} className="attempt-list">
+        <List sx={{ maxHeight: '64vh', overflowY: 'scroll' }}>
+          {Object.entries(groupedAttempts).map(([date, items]) => (
+            <React.Fragment key={date}>
+              <ListSubheader>{date}</ListSubheader>
+              {items.map((attempt) => (
+                <ListItem
+                  button
+                  key={attempt.id}
+                  onClick={() => handleAttemptClick(attempt)}
+                  selected={selected === attempt}
+                  secondaryAction={
+                    <Typography color="text.secondary">{formatTime(attempt.created_at, 'HH:mm:ss A')}</Typography>
+                  }>
+                  <ListItemIcon>
+                    {attempt.response_status > 200 ? (
+                      <ErrorOutlined color="error" />
+                    ) : (
+                      <CheckCircleOutlined color="success" />
+                    )}
+                  </ListItemIcon>
+                  <ListItemText primary={<Typography color="text.primary">{attempt.event.type}</Typography>} />
+                </ListItem>
+              ))}
+            </React.Fragment>
+          ))}
+        </List>
+        {hasMore && (
+          <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
+            {loadingMore ? 'Loading more...' : 'Load more'}
+          </Button>
+        )}
+        {!hasMore && <Typography color="text.secondary">No more data</Typography>}
+      </Grid>
+      <Grid item xs={8}>
+        {selected && (
+          <Stack direction="column" spacing={2} sx={{ pt: 3, pl: 3, borderLeft: '1px solid #eee' }}>
+            <Typography variant="h6">{event_id ? selected.endpoint.url : selected.event.type}</Typography>
+            <Box>
+              <Typography variant="h6">Response ({selected.response_status})</Typography>
+              <CodeBlock language="json">{JSON.stringify(selected.response_body, null, 2)}</CodeBlock>
+            </Box>
+            <Box>
+              <Typography variant="h6">Request</Typography>
+              <CodeBlock language="json">{JSON.stringify(selected.event, null, 2)}</CodeBlock>
+            </Box>
+          </Stack>
+        )}
+        {data?.list.length === 0 && event && (
+          <Box>
+            <Typography variant="h6">Event Data</Typography>
+            <CodeBlock language="json">{JSON.stringify(event.data, null, 2)}</CodeBlock>
+          </Box>
+        )}
+      </Grid>
+    </Grid>
+  );
+}

package/src/contexts/products.tsx

@@ -0,0 +1,42 @@
+import type { TProductExpanded } from '@did-pay/types';
+import { Alert, CircularProgress } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { createContext, useContext } from 'react';
+
+import api from '../libs/api';
+
+type ProductsContextType = {
+  products: TProductExpanded[];
+  refresh: () => void;
+};
+
+// @ts-ignore
+const ProductsContext = createContext<ProductsContextType>({ api });
+const { Provider, Consumer } = ProductsContext;
+
+const getProducts = async (): Promise<TProductExpanded[]> => {
+  const { data } = await api.get('/api/products?active=true');
+  return data.list || [];
+};
+
+// eslint-disable-next-line react/prop-types
+function ProductsProvider({ children }: { children: any }): JSX.Element {
+  const { data, error, run, loading } = useRequest(getProducts);
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  return <Provider value={{ products: data, refresh: run }}>{children}</Provider>;
+}
+
+function useProductsContext() {
+  const context = useContext(ProductsContext);
+  return context;
+}
+
+export { ProductsContext, ProductsProvider, Consumer as ProductsConsumer, useProductsContext };