payment-kit 1.13.92 → 1.13.94

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

@@ -2,32 +2,15 @@ import Center from '@arcblock/ux/lib/Center';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import Header from '@blocklet/ui-react/lib/Header';
-import type { PriceRecurring, TPricingTableExpanded, TPricingTableItem } from '@did-pay/types';
-import { CheckOutlined } from '@mui/icons-material';
-import { LoadingButton } from '@mui/lab';
-import {
-  Alert,
-  Box,
-  Fade,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  Skeleton,
-  Stack,
-  ToggleButton,
-  ToggleButtonGroup,
-  Typography,
-} from '@mui/material';
-import { useLocalStorageState, useRequest, useSetState } from 'ahooks';
-import { useEffect } from 'react';
+import type { TPricingTableExpanded } from '@did-pay/types';
+import { Alert, Box, Skeleton, Stack, Typography } from '@mui/material';
+import { useLocalStorageState, useRequest } from 'ahooks';
 import { useSearchParams } from 'react-router-dom';
 
-import PaymentAmount from '../../components/checkout/amount';
+import PricingTable from '../../components/checkout/pricing-table';
 import Livemode from '../../components/livemode';
 import ProductSkeleton from '../../components/pricing-table/product-skeleton';
 import api from '../../libs/api';
-import { formatPriceAmount, formatRecurring } from '../../libs/util';
 
 type Props = {
   id: string;
@@ -38,42 +21,11 @@ const fetchData = async (id: string): Promise<TPricingTableExpanded> => {
   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, locale } = useLocaleContext();
+export default function PricingTablePage({ id }: Props) {
+  const { t } = useLocaleContext();
   const [params] = useSearchParams();
-  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]);
+  const { error, loading, data } = useRequest(() => fetchData(id));
 
   if (error) {
     return (
@@ -141,10 +93,7 @@ export default function PricingTable({ id }: Props) {
     );
   }
 
-  const { recurring, grouped } = groupItemsByRecurring(data.items);
-
   const onStartCheckoutSession = (priceId: string) => {
-    setState({ loading: priceId });
     api
       .post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${params.toString()}`)
       .then((res) => {
@@ -153,7 +102,6 @@ export default function PricingTable({ id }: Props) {
       .catch((err) => {
         console.error(err);
         Toast.error(err.message);
-        setState({ loading: '' });
       });
   };
 
@@ -171,109 +119,12 @@ export default function PricingTable({ id }: Props) {
       }}>
       <Header />
       <Center relative="parent">
-        <Stack
-          direction="column"
-          alignItems="center"
-          sx={{
-            pt: {
-              xs: 4,
-              sm: 2,
-            },
-            gap: {
-              xs: 3,
-              sm: 5,
-            },
-          }}>
+        <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) => {
-                if (value !== null) {
-                  setState({ interval: value });
-                }
-              }}
-              exclusive>
-              {Object.keys(recurring).map((x) => (
-                <ToggleButton key={x} value={x} sx={{ textTransform: 'capitalize' }}>
-                  {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
-                </ToggleButton>
-              ))}
-            </ToggleButtonGroup>
-          )}
-          <Stack flexWrap="wrap" direction="row" gap={{ xs: 3, sm: 5, md: 10 }} justifyContent="center">
-            {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">
-                          {t('checkout.per')}
-                        </Typography>
-                        <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                          {formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
-                        </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: any) => (
-                            <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>
+          <PricingTable table={data} onSelect={onStartCheckoutSession} />
         </Stack>
       </Center>
     </Box>

package/src/pages/customer/subscription/{index.tsx → detail.tsx}

@@ -9,11 +9,12 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
 
 import TxLink from '../../../components/blockchain/tx';
 import Currency from '../../../components/currency';
-import InfoMetric from '../../../components/info-metric';
 import InfoRow from '../../../components/info-row';
 import InvoiceList from '../../../components/invoice/list';
+import SubscriptionActions from '../../../components/portal/subscription/actions';
 import SectionHeader from '../../../components/section/header';
 import SubscriptionItemList from '../../../components/subscription/items';
+import SubscriptionMetrics from '../../../components/subscription/metrics';
 import SubscriptionStatus from '../../../components/subscription/status';
 import api from '../../../libs/api';
 import { formatSubscriptionProduct, formatTime } from '../../../libs/util';
@@ -22,10 +23,10 @@ const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
 };
 
-export default function CustomerSubscription() {
+export default function CustomerSubscriptionDetail() {
   const { id } = useParams() as { id: string };
   const { t } = useLocaleContext();
-  const { loading, error, data } = useRequest(() => fetchData(id));
+  const { loading, error, data, refresh } = useRequest(() => fetchData(id));
   const navigate = useNavigate();
 
   if (error) {
@@ -57,6 +58,7 @@ export default function CustomerSubscription() {
               </Typography>
               <SubscriptionStatus subscription={data} sx={{ ml: 1 }} />
             </Stack>
+            <SubscriptionActions subscription={data} onChange={() => refresh()} showUpdate />
           </Stack>
           <Stack
             className="section-body"
@@ -65,39 +67,7 @@ export default function CustomerSubscription() {
             justifyContent="flex-start"
             flexWrap="wrap"
             sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
-            <InfoMetric
-              label={t('admin.subscription.startedAt')}
-              value={formatTime(data.start_date ? data.start_date * 1000 : data.created_at)}
-              divider
-            />
-            {data.status === 'active' && !data.cancel_at && (
-              <InfoMetric
-                label={t('admin.subscription.nextInvoice')}
-                value={formatTime(data.current_period_end * 1000)}
-                divider
-              />
-            )}
-            {['active', 'trailing'].includes(data.status) && data.cancel_at && (
-              <InfoMetric
-                label={t('admin.subscription.cancel.schedule')}
-                value={formatTime(data.cancel_at * 1000)}
-                divider
-              />
-            )}
-            {data.status !== 'canceled' && data.cancel_at_period_end && (
-              <InfoMetric
-                label={t('admin.subscription.cancel.schedule')}
-                value={formatTime(data.current_period_end * 1000)}
-                divider
-              />
-            )}
-            {data.status === 'canceled' && data.canceled_at && (
-              <InfoMetric
-                label={t('admin.subscription.cancel.done')}
-                value={formatTime(data.canceled_at * 1000)}
-                divider
-              />
-            )}
+            <SubscriptionMetrics subscription={data} />
           </Stack>
         </Box>
       </Box>

package/src/pages/customer/subscription/update.tsx

@@ -0,0 +1,281 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TLineItemExpanded, TPricingTableExpanded, TSubscriptionExpanded } from '@did-pay/types';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { LoadingButton } from '@mui/lab';
+import { Alert, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { fromUnitToToken } from '@ocap/util';
+import { useRequest, useSetState } from 'ahooks';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+
+import PricingTable from '../../../components/checkout/pricing-table';
+import InfoCard from '../../../components/info-card';
+import SectionHeader from '../../../components/section/header';
+import { useSessionContext } from '../../../contexts/session';
+import api from '../../../libs/api';
+import { formatError, formatPrice, formatSubscriptionProduct, formatTime } from '../../../libs/util';
+
+const fetchData = async (
+  id: string
+): Promise<{ subscription: TSubscriptionExpanded; table: TPricingTableExpanded }> => {
+  const results = await Promise.all([
+    api.get(`/api/subscriptions/${id}`).then((res) => res.data),
+    api.get(`/api/subscriptions/${id}/update`).then((res) => res.data),
+  ]);
+
+  return {
+    subscription: results[0],
+    table: results[1],
+  };
+};
+
+type UpdateItem = {
+  id?: string;
+  deleted?: boolean;
+  clear_usage?: boolean;
+  price_id?: string;
+  quantity?: number;
+};
+
+const simulateUpdate = ({ id, items }: { id: string; items: UpdateItem[] }) => {
+  return api.post(`/api/subscriptions/${id}/update`, { items }).then((res) => res.data);
+};
+
+export default function CustomerSubscriptionUpdate() {
+  const navigate = useNavigate();
+  const { id } = useParams() as { id: string };
+  const { t, locale } = useLocaleContext();
+  const { connectApi } = useSessionContext();
+
+  const { loading, error, data } = useRequest(() => fetchData(id));
+  const [state, setState] = useSetState({
+    loading: false,
+    priceId: '',
+    total: '',
+    credit: '',
+    setup: null,
+    prorations: [],
+    items: [],
+    paying: false,
+    paid: false,
+  });
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  if (!data.subscription) {
+    return <Alert severity="error">{t('customer.upgrade.subscriptionNotFound')}</Alert>;
+  }
+
+  if (!data.table) {
+    return <Alert severity="error">{t('customer.upgrade.tableNotFound')}</Alert>;
+  }
+
+  const handleSelect = async (priceId: string) => {
+    try {
+      if (state.priceId === priceId) {
+        return;
+      }
+
+      const deleted = data.subscription.items.find((si) => data.table.items.some((ti) => ti.price_id === si.price_id));
+      if (deleted!.price_id === priceId) {
+        setState({ priceId: '', total: '', credit: '', setup: null, prorations: [], items: [] });
+        return;
+      }
+
+      const result = await simulateUpdate({
+        id: data.subscription.id,
+        items: [
+          {
+            id: deleted!.id,
+            deleted: true,
+            clear_usage: false,
+          },
+          {
+            price_id: priceId,
+            quantity: 1, // FIXME: support customized quantity
+          },
+        ],
+      });
+
+      setState({ priceId, ...result });
+    } catch (err) {
+      Toast.error(formatError(err));
+      setState({ priceId: '', total: '', credit: '', setup: null, prorations: [], items: [] });
+    }
+  };
+
+  const handleBack = () => {
+    navigate(`/customer/subscription/${data.subscription.id}`);
+  };
+
+  const handleConfirm = async () => {
+    try {
+      setState({ loading: true });
+      const deleted = data.subscription.items.find((si) => data.table.items.some((ti) => ti.price_id === si.price_id));
+      const items = [
+        {
+          id: deleted!.id,
+          deleted: true,
+          clear_usage: false,
+        },
+        {
+          price_id: state.priceId,
+          quantity: 1, // FIXME: support customized quantity
+        },
+      ];
+
+      // FIXME: support more proration_behavior
+      const result = await api.put(`/api/subscriptions/${id}`, { proration_behavior: 'create_prorations', items });
+      if (result.data.status === 'active') {
+        Toast.success(t('customer.upgrade.success'));
+        setState({ paid: true });
+        setTimeout(handleBack, 2000);
+      } else {
+        setState({ paying: true });
+        try {
+          setState({ paying: true });
+          connectApi.open({
+            action: result.data.connectAction,
+            timeout: 5 * 60 * 1000,
+            messages: {
+              title: t('customer.upgrade.pay'),
+              scan: t('customer.upgrade.scan'),
+              success: t('customer.upgrade.success'),
+              error: t('customer.upgrade.error'),
+            },
+            extraParams: { invoiceId: result.data.latest_invoice_id, subscriptionId: result.data.id },
+            onSuccess: () => {
+              setState({ paid: true, paying: false });
+              setTimeout(() => {
+                connectApi.close();
+                handleBack();
+              }, 2000);
+            },
+            onClose: () => {
+              connectApi.close();
+              setState({ paying: false });
+            },
+            onError: (err: any) => {
+              setState({ paying: false });
+              Toast.error(formatError(err));
+            },
+          });
+        } catch (err) {
+          Toast.error(formatError(err));
+        } finally {
+          setState({ paying: false });
+        }
+      }
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false });
+    }
+  };
+
+  const table = { ...data.table, currency: data.subscription.paymentCurrency };
+  table.items.forEach((x: any) => {
+    x.is_selected = x.price_id === state.priceId;
+    if (data.subscription.items.find((y) => y.price_id === x.price_id)) {
+      x.is_highlight = true;
+      x.is_disabled = true;
+      x.highlight_text = t('customer.upgrade.current');
+      if (!state.priceId) {
+        x.is_selected = true;
+      }
+    }
+  });
+
+  const { recurring } = data.subscription.items.find((x) => x.price.type === 'recurring')?.price || {};
+  const interval = [recurring?.interval, recurring?.interval_count].join('-');
+
+  return (
+    <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+      <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+        <Link to={`/customer/subscription/${data.subscription.id}`}>
+          <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal', mt: '16px' }}>
+            <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+            <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+              {formatSubscriptionProduct(data.subscription.items)}
+            </Typography>
+          </Stack>
+        </Link>
+      </Stack>
+      <Stack direction="column" sx={{ marginTop: 32 }}>
+        <SectionHeader title={t('customer.upgrade.config')} />
+        <PricingTable mode="select" alignItems="left" interval={interval} table={table} onSelect={handleSelect} />
+      </Stack>
+      {state.priceId && state.total && state.setup && (
+        <Stack direction="column" spacing={3} sx={{ maxWidth: 640 }}>
+          <SectionHeader title={t('customer.upgrade.confirm')} />
+          <Stack direction="column" spacing={2}>
+            <Typography variant="h6" sx={{ fontWeight: 'normal' }}>
+              {t('customer.upgrade.summary', {
+                // @ts-ignore
+                date: formatTime(state.setup.period.end * 1000, 'lll', locale),
+              })}
+            </Typography>
+            {state.items.map((x: TLineItemExpanded) => {
+              const { product } = x.price;
+              return (
+                <Stack key={x.price_id} direction="row" alignItems="center" justifyContent="space-between">
+                  <InfoCard logo={product.images[0]} name={product.name} description={product.description} />
+                  <Typography component="p" style={{ fontWeight: 'bold' }}>
+                    {formatPrice(
+                      x.price,
+                      data.subscription.paymentCurrency,
+                      x.price.product.unit_label,
+                      1,
+                      true,
+                      locale
+                    )}
+                  </Typography>
+                </Stack>
+              );
+            })}
+          </Stack>
+          <Divider />
+          <Stack direction="row" justifyContent="space-between">
+            <Typography variant="h6" sx={{ fontWeight: 'normal' }}>
+              {t('customer.upgrade.due')}
+            </Typography>
+            <Typography component="p" style={{ fontWeight: 'bold' }}>
+              {fromUnitToToken(state.total, data.subscription.paymentCurrency.decimal)}{' '}
+              {data.subscription.paymentCurrency.symbol}
+            </Typography>
+          </Stack>
+          <Divider />
+          <Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={2}>
+            <LoadingButton
+              disabled={state.loading || state.paying}
+              onClick={() => setState({ priceId: '' })}
+              variant="text"
+              size="large">
+              {t('common.cancel')}
+            </LoadingButton>
+            <LoadingButton
+              onClick={handleConfirm}
+              variant="contained"
+              size="large"
+              sx={{ width: 150 }}
+              loading={state.loading || state.paying}
+              loadingPosition="end">
+              {t('common.confirm')}
+            </LoadingButton>
+          </Stack>
+        </Stack>
+      )}
+    </Root>
+  );
+}
+
+const Root = styled(Stack)``;