payment-kit 1.13.23 → 1.13.25

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/admin/products/products/create.tsx

@@ -34,7 +34,7 @@ export default function ProductsCreate() {
       metadata: [],
     },
   });
-  const { control, handleSubmit } = methods;
+  const { control, handleSubmit, getValues } = methods;
 
   const prices = useFieldArray({ control, name: 'prices' });
   const getPrice = (index: number) => methods.getValues().prices[index];
@@ -79,10 +79,14 @@ export default function ProductsCreate() {
                 expanded
                 style={{ fontWeight: 'bold', width: '50%' }}
                 addons={<PriceActions onDuplicate={() => prices.append(price)} onRemove={() => prices.remove(index)} />}
-                trigger={(expanded: boolean) =>
+                trigger={(expanded: boolean) => {
+                  if (expanded) {
+                    return t('admin.price.detail');
+                  }
+
                   // @ts-ignore
-                  expanded ? t('admin.price.detail') : formatPrice(getPrice(index), settings.baseCurrency)
-                }>
+                  return formatPrice(getPrice(index), settings.baseCurrency, getValues().unit_label, 1, false);
+                }}>
                 <PriceForm prefix={`prices.${index}`} />
               </Collapse>
               <Divider sx={{ mt: 2, mb: 4 }} />

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>;
-}