payment-kit 1.13.24 → 1.13.25

package/src/pages/admin/products/pricing-tables/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 { TPricingTableExpanded, TProduct } from '@did-pay/types';
+import { ArrowBackOutlined, Edit } from '@mui/icons-material';
+import { Alert, 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 { joinURL } from 'ufo';
+
+import Copyable from '../../../../components/copyable';
+import EventList from '../../../../components/event/list';
+import InfoCard from '../../../../components/info-card';
+import InfoRow from '../../../../components/info-row';
+import MetadataEditor from '../../../../components/metadata/editor';
+import PricingTableActions from '../../../../components/pricing-table/actions';
+import PricingTablePreview from '../../../../components/pricing-table/preview';
+import SectionHeader from '../../../../components/section/header';
+import Table from '../../../../components/table';
+import { useSettingsContext } from '../../../../contexts/settings';
+import api from '../../../../libs/api';
+import { formatError, formatProductPrice, formatTime } from '../../../../libs/util';
+
+const fetchData = (id: string): Promise<TPricingTableExpanded> => {
+  return api.get(`/api/pricing-tables/${id}`).then((res) => res.data);
+};
+
+export default function PricingTableDetail(props: { id: string }) {
+  const { t, locale } = useLocaleContext();
+  const navigate = useNavigate();
+  const { settings } = useSettingsContext();
+  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/payment-links/${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/products/pricing-tables');
+    } else {
+      runAsync();
+    }
+  };
+
+  return (
+    <Grid container spacing={4} sx={{ mb: 4 }}>
+      <Grid item md={12}>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+          <Link to="/admin/products/pricing-tables">
+            <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.pricingTables')}
+              </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">
+              <Stack direction="row" alignItems="center" mb={1}>
+                <Typography variant="h5" sx={{ color: 'text.primary', fontWeight: 600 }}>
+                  {data.name}
+                </Typography>
+              </Stack>
+              <Copyable
+                text={joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pricing-table/${data.id}`)}>
+                <Typography variant="h6" sx={{ color: 'text.secondary', mr: 1 }}>
+                  {joinURL(window.blocklet.prefix, `/checkout/pricing-table/${data.id}`)}
+                </Typography>
+              </Copyable>
+            </Stack>
+            <PricingTableActions data={data} onChange={onChange} variant="normal" />
+          </Stack>
+        </Box>
+      </Grid>
+      <Grid item xs={12} md={4}>
+        <Div direction="column" spacing={4}>
+          <Box className="section">
+            <SectionHeader title={t('admin.products')} />
+            <Box className="section-body">
+              <Table
+                className="link-products-table"
+                toolbar={false}
+                footer={false}
+                locale={locale}
+                data={data.items}
+                columns={[
+                  {
+                    label: t('common.name'),
+                    name: 'product_id',
+                    options: {
+                      sort: false,
+                      customBodyRenderLite: (_: any, index: number) => {
+                        const item = data.items[index] as any;
+                        return (
+                          <Link to={`/admin/products/${item.product_id}`}>
+                            <InfoCard
+                              name={item.product.name}
+                              description={formatProductPrice(
+                                // @ts-ignore
+                                { ...item.product, prices: [item.price] },
+                                settings.baseCurrency
+                              )}
+                              logo={item.product.images[0]}
+                            />
+                          </Link>
+                        );
+                      },
+                    },
+                  },
+                  {
+                    label: t('common.actions'),
+                    name: 'quantity',
+                  },
+                ]}
+                options={{
+                  count: data.items.length,
+                  page: 0,
+                  rowsPerPage: 20,
+                }}
+              />
+            </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 sizes={[1, 1]} label={t('common.createdAt')} value={formatTime(data.created_at)} />
+              <InfoRow sizes={[1, 1]} label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+            </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>
+                ) : (
+                  <Grid container>
+                    <Grid item xs={12} md={6}>
+                      {Object.keys(data.metadata || {}).map((key) => (
+                        // @ts-ignore
+                        <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>
+        </Div>
+      </Grid>
+      <Grid item xs={12} md={8}>
+        <Div>
+          <Box className="section">
+            <SectionHeader title={t('common.preview')} />
+            <Box className="section-body">
+              <PricingTablePreview id={data.id} />
+            </Box>
+          </Box>
+        </Div>
+      </Grid>
+    </Grid>
+  );
+}
+
+const Div = styled(Stack)``;

package/src/pages/admin/products/pricing-tables/index.tsx

@@ -0,0 +1,154 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { getDurableData } from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TPricingTableExpanded } 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 PricingTableActions from '../../../../components/pricing-table/actions';
+import Status from '../../../../components/status';
+import Table from '../../../../components/table';
+import { ProductsProvider } from '../../../../contexts/products';
+import api from '../../../../libs/api';
+import { formatTime } from '../../../../libs/util';
+
+const fetchData = (params: Record<string, any> = {}): Promise<{ list: TPricingTableExpanded[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/pricing-tables?${search.toString()}`).then((res) => res.data);
+};
+
+function PricingTables() {
+  const listKey = 'pricing-tables';
+  const { t } = useLocaleContext();
+  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('pricingTable.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 TPricingTableExpanded;
+          return (
+            <Copyable
+              text={joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pricing-table/${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('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 TPricingTableExpanded;
+          return <PricingTableActions 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 TPricingTableExpanded;
+          navigate(`/admin/products/${item.id}`);
+        },
+      }}
+      loading={loading}
+      onChange={onTableChange}
+    />
+  );
+}
+
+export default function WrappedPricingTables() {
+  return (
+    <ProductsProvider>
+      <PricingTables />
+    </ProductsProvider>
+  );
+}

package/src/pages/checkout/index.tsx

@@ -6,10 +6,11 @@ import { SettingsProvider } from '../../contexts/settings';
 
 const pages = {
   pay: React.lazy(() => import('./pay')),
+  'pricing-table': React.lazy(() => import('./pricing-table')),
 };
 
 function Checkout() {
-  const { action, id } = useParams<{ action: 'pay'; id: string }>();
+  const { action, id } = useParams<{ action: string; id: string }>();
 
   // @ts-ignore
   const TabComponent = pages[action];

package/src/pages/checkout/pricing-table.tsx

@@ -0,0 +1,195 @@
+import Center from '@arcblock/ux/lib/Center';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { PriceRecurring, TPricingTableExpanded, TPricingTableItem } from '@did-pay/types';
+import { CheckOutlined } from '@mui/icons-material';
+import { LoadingButton } from '@mui/lab';
+import {
+  Alert,
+  Box,
+  CircularProgress,
+  Fade,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Stack,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography,
+} from '@mui/material';
+import { useLocalStorageState, useRequest, useSetState } from 'ahooks';
+import { useEffect } from 'react';
+
+import PaymentAmount from '../../components/checkout/amount';
+import Livemode from '../../components/livemode';
+import api from '../../libs/api';
+import { formatPriceAmount, formatRecurring } from '../../libs/util';
+
+type Props = {
+  id: string;
+};
+
+const fetchData = async (id: string): Promise<TPricingTableExpanded> => {
+  const { data } = await api.get(`/api/pricing-tables/${id}`);
+  return data;
+};
+
+const groupItemsByRecurring = (items: TPricingTableItem[]) => {
+  const grouped: { [key: string]: TPricingTableItem[] } = {};
+  const recurring: { [key: string]: PriceRecurring } = {};
+
+  items.forEach((x) => {
+    const key = [x.price.recurring?.interval, x.price.recurring?.interval_count].join('-');
+    recurring[key] = x.price.recurring as PriceRecurring;
+
+    if (!grouped[key]) {
+      grouped[key] = [];
+    }
+
+    // @ts-ignore
+    grouped[key].push(x);
+  });
+
+  return { recurring, grouped };
+};
+
+export default function PricingTable({ id }: Props) {
+  const { t } = useLocaleContext();
+  const { error, loading, data } = useRequest(() => fetchData(id));
+  const [state, setState] = useSetState({ interval: '', loading: '' });
+  const [livemode] = useLocalStorageState('livemode', { defaultValue: true });
+
+  useEffect(() => {
+    if (data && !state.interval) {
+      const { recurring } = groupItemsByRecurring(data.items);
+      const keys = Object.keys(recurring);
+      if (keys[0]) {
+        setState({ interval: keys[0] });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  if (error) {
+    return (
+      <Center>
+        <Alert severity="error">{error.message}</Alert>
+      </Center>
+    );
+  }
+
+  if (loading || !data) {
+    return (
+      <Center>
+        <CircularProgress />
+      </Center>
+    );
+  }
+
+  const { recurring, grouped } = groupItemsByRecurring(data.items);
+
+  const onStartCheckoutSession = (priceId: string) => {
+    setState({ loading: priceId });
+    api
+      .post(`/api/pricing-tables/${data.id}/checkout/${priceId}`)
+      .then((res) => {
+        window.location.href = res.data.url;
+      })
+      .catch((err) => {
+        console.error(err);
+        Toast.error(err.message);
+        setState({ loading: '' });
+      });
+  };
+
+  return (
+    <Center>
+      <Stack direction="column" alignItems="center" spacing={4}>
+        <Typography variant="h4" color="text.primary" fontWeight={600}>
+          {data.name}
+          {!livemode && <Livemode />}
+        </Typography>
+        {Object.keys(recurring).length > 1 && (
+          <ToggleButtonGroup value={state.interval} onChange={(_, value) => setState({ interval: value })} exclusive>
+            {Object.keys(recurring).map((x) => (
+              <ToggleButton key={x} value={x} sx={{ textTransform: 'capitalize' }}>
+                {formatRecurring(recurring[x] as PriceRecurring)}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+        )}
+        <Stack direction="row" flexWrap="wrap" spacing={5}>
+          {grouped[state.interval]?.map((x) => {
+            return (
+              <Fade in>
+                <Stack
+                  key={x.price_id}
+                  padding={4}
+                  spacing={2}
+                  direction="column"
+                  alignItems="center"
+                  sx={{
+                    width: 320,
+                    cursor: 'pointer',
+                    border: '1px solid #eee',
+                    borderRadius: 1,
+                    transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
+                    boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
+                    '&:hover': {
+                      borderColor: '#ddd',
+                      boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
+                    },
+                  }}>
+                  <Box textAlign="center">
+                    <Typography variant="h5" color="text.primary" fontWeight={600}>
+                      {x.product.name}
+                    </Typography>
+                    <Typography color="text.secondary">{x.product.description}</Typography>
+                  </Box>
+                  <Stack direction="row" alignItems="center" spacing={1}>
+                    <PaymentAmount amount={formatPriceAmount(x.price, data.currency, x.product.unit_label)} />
+                    <Stack direction="column" alignItems="flex-start">
+                      <Typography component="span" color="text.secondary" fontSize="0.8rem">
+                        per
+                      </Typography>
+                      <Typography component="span" color="text.secondary" fontSize="0.8rem">
+                        {formatRecurring(x.price.recurring as PriceRecurring, false, '')}
+                      </Typography>
+                    </Stack>
+                  </Stack>
+                  <LoadingButton
+                    fullWidth
+                    size="large"
+                    loadingPosition="end"
+                    variant={x.is_highlight ? 'contained' : 'outlined'}
+                    color={x.is_highlight ? 'primary' : 'info'}
+                    sx={{ fontSize: '1.2rem' }}
+                    loading={state.loading === x.price_id}
+                    onClick={() => onStartCheckoutSession(x.price_id)}>
+                    {x.subscription_data?.trial_period_days ? t('checkout.try') : t('checkout.subscription')}
+                  </LoadingButton>
+                  {x.product.features.length > 0 && (
+                    <Box>
+                      <Typography>{t('checkout.include')}</Typography>
+                      <List dense>
+                        {x.product.features.map((f) => (
+                          <ListItem key={f.name} disableGutters disablePadding>
+                            <ListItemIcon sx={{ minWidth: 25 }}>
+                              <CheckOutlined color="success" fontSize="small" />
+                            </ListItemIcon>
+                            <ListItemText primary={f.name} />
+                          </ListItem>
+                        ))}
+                      </List>
+                    </Box>
+                  )}
+                </Stack>
+              </Fade>
+            );
+          })}
+        </Stack>
+      </Stack>
+    </Center>
+  );
+}

package/src/pages/admin/products/pricing-tables.tsx

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