payment-kit 1.13.92 → 1.13.94

package/src/components/portal/invoice/list.tsx

@@ -92,7 +92,7 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
               <Box flex={3}>
                 <Typography>{formatToDate(invoice.created_at)}</Typography>
               </Box>
-              <Box flex={1}>
+              <Box flex={2}>
                 <Typography textAlign="right">
                   {fromUnitToToken(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
                   {invoice.paymentCurrency.symbol}

package/src/components/portal/subscription/actions.tsx

@@ -0,0 +1,153 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TSubscriptionExpanded } from '@did-pay/types';
+import { Button, Stack } from '@mui/material';
+import { useRequest, useSetState } from 'ahooks';
+import { FormProvider, useForm, useFormContext } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+
+import api from '../../../libs/api';
+import { formatError, formatToDate, getSubscriptionAction } from '../../../libs/util';
+import ConfirmDialog from '../../confirm';
+import CustomerCancelForm from './cancel';
+
+type Props = {
+  subscription: TSubscriptionExpanded;
+  showUpdate?: boolean;
+  onChange: (action?: string) => any | Promise<any>;
+};
+
+SubscriptionActions.defaultProps = {
+  showUpdate: false,
+};
+
+const fetchUpdateOptions = ({ id, showUpdate }: { id: string; showUpdate: boolean }): Promise<boolean> => {
+  if (!showUpdate) {
+    return Promise.resolve(false);
+  }
+
+  return api.get(`/api/subscriptions/${id}/update`).then((res) => !!res.data);
+};
+
+export function SubscriptionActionsInner({ subscription, showUpdate, onChange }: Props) {
+  const { t } = useLocaleContext();
+  const { reset, getValues } = useFormContext();
+  const navigate = useNavigate();
+  const action = getSubscriptionAction(subscription);
+
+  const { data } = useRequest(() => fetchUpdateOptions({ id: subscription.id, showUpdate: !!showUpdate }));
+
+  const [state, setState] = useSetState({
+    action: '',
+    subscription: '',
+    loading: false,
+  });
+
+  const handleCancel = async () => {
+    try {
+      setState({ loading: true });
+      await api
+        .put(`/api/subscriptions/${state.subscription}/cancel`, { at: 'current_period_end', ...getValues().cancel })
+        .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: '', subscription: '' });
+      reset();
+    }
+  };
+
+  const handleRecover = async () => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/subscriptions/${state.subscription}/recover`).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: '', subscription: '' });
+    }
+  };
+
+  return (
+    <Stack direction="row" alignItems="center" spacing={1}>
+      {action && (
+        <Button
+          variant={action.variant as any}
+          color={action.color as any}
+          size="small"
+          onClick={() => {
+            if (action.action === 'pastDue') {
+              navigate(`/customer/invoice/${subscription.latest_invoice_id}?action=pay`);
+            } else {
+              setState({
+                action: action.action,
+                subscription: subscription.id,
+              });
+            }
+          }}>
+          {t(`customer.${action.action}.button`)}
+        </Button>
+      )}
+      {data && (
+        <Button
+          variant="contained"
+          color="primary"
+          size="small"
+          onClick={() => {
+            navigate(`/customer/subscription/${subscription.id}/update`);
+          }}>
+          {t('customer.upgrade.button')}
+        </Button>
+      )}
+      {state.action === 'cancel' && state.subscription && (
+        <ConfirmDialog
+          onConfirm={handleCancel}
+          onCancel={() => setState({ action: '', subscription: '' })}
+          title={t('customer.cancel.title')}
+          message={<CustomerCancelForm data={subscription} />}
+          loading={state.loading}
+        />
+      )}
+      {state.action === 'recover' && state.subscription && (
+        <ConfirmDialog
+          onConfirm={handleRecover}
+          onCancel={() => setState({ action: '', subscription: '' })}
+          title={t('customer.recover.title')}
+          message={t('customer.recover.description', {
+            date: formatToDate(subscription.current_period_end * 1000),
+          })}
+          loading={state.loading}
+        />
+      )}
+    </Stack>
+  );
+}
+
+export default function SubscriptionActions(props: Props) {
+  const methods = useForm({
+    defaultValues: {
+      cancel: {
+        at: 'current_period_end',
+        feedback: 'unused',
+        comment: '',
+      },
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <SubscriptionActionsInner {...props} />
+    </FormProvider>
+  );
+}
+
+SubscriptionActionsInner.defaultProps = {
+  showUpdate: false,
+};

package/src/components/portal/subscription/list.tsx

@@ -1,23 +1,18 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import Toast from '@arcblock/ux/lib/Toast';
 import type { Paginated, TSubscriptionExpanded } from '@did-pay/types';
 import { Avatar, AvatarGroup, Box, Button, CircularProgress, Stack, StackProps, Typography } from '@mui/material';
-import { useInfiniteScroll, useSetState } from 'ahooks';
-import { FormProvider, useForm, useFormContext } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
+import { useInfiniteScroll } from 'ahooks';
 
 import api from '../../../libs/api';
 import {
-  formatError,
   formatPrice,
   formatSubscriptionProduct,
-  formatToDate,
   getSubscriptionStatusColor,
+  getSubscriptionTimeSummary,
 } from '../../../libs/util';
-import ConfirmDialog from '../../confirm';
 import Status from '../../status';
-import CustomerCancelForm from './cancel';
+import SubscriptionActions from './actions';
 
 const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TSubscriptionExpanded>> => {
   const search = new URLSearchParams();
@@ -35,47 +30,8 @@ type Props = {
 
 const pageSize = 4;
 
-export const getSubscriptionTimeSummary = (subscription: TSubscriptionExpanded) => {
-  const lines = [`Started on ${formatToDate(subscription.start_date * 1000)}`];
-  if (subscription.status === 'active' || subscription.status === 'trialing') {
-    if (subscription.cancel_at) {
-      lines.push(`will cancel on ${formatToDate(subscription.cancel_at * 1000)}`);
-    } else if (subscription.cancel_at_period_end) {
-      lines.push(`will cancel on ${formatToDate(subscription.current_period_end * 1000)}`);
-    } else {
-      lines.push(`will renew on ${formatToDate(subscription.current_period_end * 1000)}`);
-    }
-  } else if (subscription.status === 'past_due') {
-    lines.push(`will cancel on ${formatToDate(subscription.current_period_end * 1000)}`);
-  } else if (subscription.status === 'canceled') {
-    lines.push(`canceled on ${formatToDate(subscription.canceled_at * 1000)}`);
-  }
-
-  return lines.join(', ');
-};
-
-export const getSubscriptionAction = (subscription: TSubscriptionExpanded) => {
-  if (subscription.status === 'active' || subscription.status === 'trialing') {
-    if (subscription.cancel_at) {
-      return null;
-    }
-    if (subscription.cancel_at_period_end) {
-      return { action: 'recover', color: 'secondary' };
-    }
-
-    return { action: 'cancel', color: 'error' };
-  }
-  if (subscription.status === 'past_due') {
-    return { action: 'pastDue', color: 'primary' };
-  }
-
-  return null;
-};
-
-export function CurrentSubscriptionsInner({ id, onChange, onClickSubscription, ...rest }: Props) {
+export default function CurrentSubscriptions({ id, onChange, onClickSubscription, ...rest }: Props) {
   const { t } = useLocaleContext();
-  const { reset, getValues } = useFormContext();
-  const navigate = useNavigate();
 
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TSubscriptionExpanded>>(
     (d) => {
@@ -87,43 +43,6 @@ export function CurrentSubscriptionsInner({ id, onChange, onClickSubscription, .
     }
   );
 
-  const [state, setState] = useSetState({
-    action: '',
-    subscription: '',
-    loading: false,
-  });
-
-  const handleCancel = async () => {
-    try {
-      setState({ loading: true });
-      await api
-        .put(`/api/subscriptions/${state.subscription}/cancel`, { at: 'current_period_end', ...getValues().cancel })
-        .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: '', subscription: '' });
-      reset();
-    }
-  };
-
-  const handleRecover = async () => {
-    try {
-      setState({ loading: true });
-      await api.put(`/api/subscriptions/${state.subscription}/recover`).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: '', subscription: '' });
-    }
-  };
-
   if (loading || !data) {
     return <CircularProgress />;
   }
@@ -136,9 +55,8 @@ export function CurrentSubscriptionsInner({ id, onChange, onClickSubscription, .
   const size = { width: 48, height: 48 };
 
   return (
-    <Stack direction="column" spacing={4} sx={{ mt: 2 }}>
+    <Stack direction="column" spacing={2} sx={{ mt: 2 }}>
       {data.list.map((subscription) => {
-        const action = getSubscriptionAction(subscription);
         return (
           <Stack
             key={subscription.id}
@@ -146,10 +64,23 @@ export function CurrentSubscriptionsInner({ id, onChange, onClickSubscription, .
             justifyContent="space-between"
             gap={{
               xs: 1,
-              sm: 3,
+              sm: 2,
+            }}
+            sx={{
+              padding: 1,
+              '&:hover': {
+                backgroundColor: 'grey.50',
+                transition: 'background-color 200ms linear',
+                cursor: 'pointer',
+              },
             }}
             flexWrap="wrap">
-            <Stack direction="column" spacing={0.5} onClick={() => onClickSubscription(subscription)} {...rest}>
+            <Stack
+              direction="column"
+              flex={1}
+              spacing={0.5}
+              onClick={() => onClickSubscription(subscription)}
+              {...rest}>
               <Stack direction="row" spacing={1} alignItems="center">
                 <AvatarGroup max={3}>
                   {subscription.items.map((item) =>
@@ -196,25 +127,7 @@ export function CurrentSubscriptionsInner({ id, onChange, onClickSubscription, .
               </Stack>
             </Stack>
             <Stack direction="column" alignItems="flex-end" spacing={1}>
-              {action && (
-                <Button
-                  variant="outlined"
-                  // @ts-ignore
-                  color={action.color}
-                  size="small"
-                  onClick={() => {
-                    if (action.action === 'pastDue') {
-                      navigate(`/customer/invoice/${subscription.latest_invoice_id}?action=pay`);
-                    } else {
-                      setState({
-                        action: action.action,
-                        subscription: subscription.id,
-                      });
-                    }
-                  }}>
-                  {t(`customer.${action.action}.button`)}
-                </Button>
-              )}
+              <SubscriptionActions subscription={subscription} onChange={onChange} />
             </Stack>
           </Stack>
         );
@@ -231,48 +144,6 @@ export function CurrentSubscriptionsInner({ id, onChange, onClickSubscription, .
           <Typography color="text.secondary">{t('common.noMore', { resource: t('admin.subscriptions') })}</Typography>
         )}
       </Box>
-      {state.action === 'cancel' && state.subscription && (
-        <ConfirmDialog
-          onConfirm={handleCancel}
-          onCancel={() => setState({ action: '', subscription: '' })}
-          title={t('customer.cancel.title')}
-          message={
-            <CustomerCancelForm data={data.list.find((x) => x.id === state.subscription) as TSubscriptionExpanded} />
-          }
-          loading={state.loading}
-        />
-      )}
-      {state.action === 'recover' && state.subscription && (
-        <ConfirmDialog
-          onConfirm={handleRecover}
-          onCancel={() => setState({ action: '', subscription: '' })}
-          title={t('customer.recover.title')}
-          message={t('customer.recover.description', {
-            date: formatToDate(
-              (data.list.find((x) => x.id === state.subscription) as TSubscriptionExpanded).current_period_end * 1000
-            ),
-          })}
-          loading={state.loading}
-        />
-      )}
     </Stack>
   );
 }
-
-export default function CurrentSubscriptions(props: Props) {
-  const methods = useForm({
-    defaultValues: {
-      cancel: {
-        at: 'current_period_end',
-        feedback: 'unused',
-        comment: '',
-      },
-    },
-  });
-
-  return (
-    <FormProvider {...methods}>
-      <CurrentSubscriptionsInner {...props} />
-    </FormProvider>
-  );
-}

package/src/components/subscription/metrics.tsx

@@ -0,0 +1,46 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TSubscriptionExpanded } from '@did-pay/types';
+
+import { formatTime } from '../../libs/util';
+import InfoMetric from '../info-metric';
+
+type Props = {
+  subscription: TSubscriptionExpanded;
+};
+
+export default function SubscriptionMetrics({ subscription }: Props) {
+  const { t } = useLocaleContext();
+  let scheduleToCancelTime = 0;
+  if (['active', 'trailing'].includes(subscription.status) && subscription.cancel_at) {
+    scheduleToCancelTime = subscription.cancel_at * 1000;
+  } else if (subscription.status !== 'canceled' && subscription.cancel_at_period_end) {
+    scheduleToCancelTime = subscription.current_period_end * 1000;
+  }
+
+  return (
+    <>
+      <InfoMetric
+        label={t('admin.subscription.startedAt')}
+        value={formatTime(subscription.start_date ? subscription.start_date * 1000 : subscription.created_at)}
+        divider
+      />
+      {subscription.status === 'active' && !subscription.cancel_at && (
+        <InfoMetric
+          label={t('admin.subscription.nextInvoice')}
+          value={formatTime(subscription.current_period_end * 1000)}
+          divider
+        />
+      )}
+      {scheduleToCancelTime > 0 && (
+        <InfoMetric label={t('admin.subscription.cancel.schedule')} value={formatTime(scheduleToCancelTime)} divider />
+      )}
+      {subscription.status === 'canceled' && subscription.canceled_at && (
+        <InfoMetric
+          label={t('admin.subscription.cancel.done')}
+          value={formatTime(subscription.canceled_at * 1000)}
+          divider
+        />
+      )}
+    </>
+  );
+}

package/src/contexts/products.tsx

@@ -15,7 +15,8 @@ const ProductsContext = createContext<ProductsContextType>({ api });
 const { Provider, Consumer } = ProductsContext;
 
 const getProducts = async (): Promise<TProductExpanded[]> => {
-  const { data } = await api.get('/api/products?active=true');
+  // FIXME: pagination here
+  const { data } = await api.get('/api/products?active=true&page=1&pageSize=100');
   return data.list || [];
 };
 

package/src/libs/util.ts

@@ -11,6 +11,7 @@ import type {
   TPaymentMethodExpanded,
   TPrice,
   TProductExpanded,
+  TSubscriptionExpanded,
   TSubscriptionItemExpanded,
 } from '@did-pay/types';
 import { BN, fromUnitToToken } from '@ocap/util';
@@ -734,3 +735,45 @@ export function sleep(ms: number) {
 export function isSuccessAttempt(code: number) {
   return code >= 200 && code < 300;
 }
+
+export const getSubscriptionTimeSummary = (subscription: TSubscriptionExpanded) => {
+  const lines = [`Started on ${formatToDate(subscription.start_date * 1000)}`];
+  if (subscription.status === 'active' || subscription.status === 'trialing') {
+    if (subscription.cancel_at) {
+      lines.push(`will cancel on ${formatToDate(subscription.cancel_at * 1000)}`);
+    } else if (subscription.cancel_at_period_end) {
+      lines.push(`will cancel on ${formatToDate(subscription.current_period_end * 1000)}`);
+    } else {
+      lines.push(`will renew on ${formatToDate(subscription.current_period_end * 1000)}`);
+    }
+  } else if (subscription.status === 'past_due') {
+    lines.push(`will cancel on ${formatToDate(subscription.current_period_end * 1000)}`);
+  } else if (subscription.status === 'canceled') {
+    lines.push(`canceled on ${formatToDate(subscription.canceled_at * 1000)}`);
+  }
+
+  return lines.join(', ');
+};
+
+export const getSubscriptionAction = (subscription: TSubscriptionExpanded) => {
+  if (subscription.status !== 'canceled' && subscription.cancel_at_period_end) {
+    return { action: 'recover', variant: 'contained', color: 'primary' };
+  }
+
+  if (subscription.status === 'active' || subscription.status === 'trialing') {
+    if (subscription.cancel_at) {
+      return null;
+    }
+    if (subscription.cancel_at_period_end) {
+      return { action: 'recover', variant: 'contained', color: 'primary' };
+    }
+
+    return { action: 'cancel', variant: 'outlined', color: 'inherit' };
+  }
+
+  if (subscription.status === 'past_due') {
+    return { action: 'pastDue', variant: 'contained', color: 'primary' };
+  }
+
+  return null;
+};

package/src/locales/en.tsx

@@ -509,6 +509,8 @@ export default flat({
     try: 'Try for free',
     include: 'This includes:',
     subscription: 'Subscribe',
+    select: 'Select',
+    selected: 'Selected',
     noPricing: 'No items to purchase',
     setup: 'Subscribe',
     continue: 'Confirm {action}',
@@ -603,6 +605,18 @@ export default flat({
       title: 'Renew your subscription',
       description: 'Your subscription will no longer be canceled, it will renew on {date}',
     },
+    upgrade: {
+      button: 'Update',
+      current: 'Current',
+      pay: 'Payment Required',
+      scan: 'Complete the payment to upgrade your subscription',
+      success: 'Your subscription is successfully upgraded',
+      error: 'Failed to upgrade your subscription',
+      config: 'Switch to another plan or billing cycle',
+      confirm: 'Confirm changes to your subscription',
+      summary: 'What you will pay for starting {date}',
+      due: 'Amount due today',
+    },
     invoice: {
       summary: 'Summary',
       details: 'Details',
@@ -611,7 +625,7 @@ export default flat({
       amountPaid: 'Amount Paid',
       rawQuantity: 'Raw Quantity: {quantity}',
       amountDue: 'Amount Due',
-      amountApplied: 'Applied Balance',
+      amountApplied: 'Applied Credit',
       pay: 'Pay this invoice',
       paySuccess: 'You have successfully paid the invoice',
       payError: 'Failed to paid the invoice',

package/src/locales/zh.tsx

@@ -499,6 +499,8 @@ export default flat({
     try: '免费试用',
     include: '包括：',
     subscription: '订阅',
+    select: '选择',
+    selected: '已选',
     noPricing: '没有可购买的物品',
     setup: '订阅',
     continue: '确认{action}',
@@ -581,13 +583,25 @@ export default flat({
         other: '其他原因',
       },
     },
+    pastDue: {
+      button: '续费',
+    },
     recover: {
       button: '续订',
       title: '续订您的订阅',
       description: '您的订阅将不再被取消，将在{date}续订',
     },
-    pastDue: {
-      button: '续费',
+    upgrade: {
+      button: '更新',
+      current: '当前订阅',
+      pay: '需要支付',
+      scan: '完成支付以更新你的订阅',
+      success: '你的订阅已经更新成功',
+      error: '订阅更新失败',
+      config: '切换套餐或周期',
+      confirm: '确认变更细节',
+      summary: '新的付款计划（{date} 开始)',
+      due: '今天还需支付',
     },
     invoice: {
       summary: '摘要',

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -13,13 +13,13 @@ import TxLink from '../../../../components/blockchain/tx';
 import Copyable from '../../../../components/copyable';
 import Currency from '../../../../components/currency';
 import EventList from '../../../../components/event/list';
-import InfoMetric from '../../../../components/info-metric';
 import InfoRow from '../../../../components/info-row';
 import InvoiceList from '../../../../components/invoice/list';
 import MetadataEditor from '../../../../components/metadata/editor';
 import SectionHeader from '../../../../components/section/header';
 import SubscriptionActions from '../../../../components/subscription/actions';
 import SubscriptionItemList from '../../../../components/subscription/items';
+import SubscriptionMetrics from '../../../../components/subscription/metrics';
 import SubscriptionStatus from '../../../../components/subscription/status';
 import api from '../../../../libs/api';
 import { formatError, formatSubscriptionProduct, formatTime } from '../../../../libs/util';
@@ -106,39 +106,7 @@ export default function SubscriptionDetail(props: { id: string }) {
             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>