payment-kit 1.13.73 → 1.13.74

package/src/components/layout/admin.tsx

@@ -4,6 +4,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Dashboard from '@blocklet/ui-react/lib/Dashboard';
 import { Avatar, Button, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
+import { useEffect, useState } from 'react';
 
 import { useSessionContext } from '../../contexts/session';
 
@@ -54,12 +55,27 @@ const Root = styled(Dashboard)`
 export default function Layout(props: any) {
   const { t } = useLocaleContext();
   const { session } = useSessionContext();
+  const [showLogin, setShowLogin] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (!session.user) {
+        setShowLogin(true);
+      }
+    }, 500);
+
+    return () => clearTimeout(timer);
+  });
 
   const handleLogin = () => {
     session.login();
   };
 
-  if (!session.user) {
+  if (session.user) {
+    return <Root {...props} footerProps={{ className: 'dashboard-footer' }} />;
+  }
+
+  if (showLogin) {
     return (
       <Center>
         <Stack maxWidth="sm" direction="column" alignItems="center" spacing={3}>
@@ -75,9 +91,5 @@ export default function Layout(props: any) {
     );
   }
 
-  if (session.user) {
-    return <Root {...props} footerProps={{ className: 'dashboard-footer' }} />;
-  }
-
   return null;
 }

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

@@ -42,7 +42,7 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TInvoiceExpanded>>(
     (d) => {
       const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
-      return fetchData({ page, pageSize, status: 'open,paid', customer_id });
+      return fetchData({ page, pageSize, status: 'open,paid,uncollectible', customer_id });
     },
     {
       reloadDeps: [customer_id],
@@ -54,7 +54,11 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
   }
 
   if (data && data.list.length === 0) {
-    return <Typography color="text.secondary">{t('admin.invoice.empty')}</Typography>;
+    return (
+      <Typography color="text.secondary">
+        {customer_id ? t('customer.invoice.empty') : t('admin.invoice.empty')}
+      </Typography>
+    );
   }
 
   const hasMore = data && data.list.length < data.count;
@@ -77,27 +81,27 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
               gap={{
                 xs: 0.5,
                 sm: 1.5,
-                md: 4,
+                md: 3,
               }}
               flexWrap="nowrap">
-              <Box flex={2}>
+              <Box flex={3}>
                 <Link to={`/customer/invoice/${invoice.id}`}>
                   <Typography component="span">{invoice.number}</Typography>
                 </Link>
               </Box>
-              <Box flex={2}>
+              <Box flex={3}>
                 <Typography>{formatToDate(invoice.created_at)}</Typography>
               </Box>
               <Box flex={1}>
-                <Typography>
+                <Typography textAlign="right">
                   {fromUnitToToken(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
                   {invoice.paymentCurrency.symbol}
                 </Typography>
               </Box>
-              <Box flex={1}>
+              <Box flex={2}>
                 <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
               </Box>
-              <Box flex={3}>
+              <Box flex={4}>
                 <Typography>{invoice.description || invoice.id}</Typography>
               </Box>
             </Stack>

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

@@ -2,10 +2,10 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { Paginated, TSubscriptionExpanded } from '@did-pay/types';
-import { ScheduleOutlined } from '@mui/icons-material';
 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 api from '../../../libs/api';
 import {
@@ -35,14 +35,52 @@ 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) {
   const { t } = useLocaleContext();
   const { reset, getValues } = useFormContext();
+  const navigate = useNavigate();
 
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TSubscriptionExpanded>>(
     (d) => {
       const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
-      return fetchData({ page, pageSize, status: 'active,trialing,paused', customer_id: id });
+      return fetchData({ page, pageSize, status: 'active,trialing,paused,past_due,canceled', customer_id: id });
     },
     {
       reloadDeps: [id],
@@ -99,89 +137,88 @@ export function CurrentSubscriptionsInner({ id, onChange, onClickSubscription, .
 
   return (
     <Stack direction="column" spacing={4} sx={{ mt: 2 }}>
-      {data.list.map((subscription) => (
-        <Stack
-          key={subscription.id}
-          direction="row"
-          justifyContent="space-between"
-          gap={{
-            xs: 1,
-            sm: 3,
-          }}
-          flexWrap="wrap">
-          <Stack direction="column" spacing={0.5} onClick={() => onClickSubscription(subscription)} {...rest}>
-            <Stack direction="row" spacing={1} alignItems="center">
-              <AvatarGroup max={3}>
-                {subscription.items.map((item) =>
-                  item.price.product.images.length > 0 ? (
-                    // @ts-ignore
-                    <Avatar
-                      key={item.price.product_id}
-                      src={item.price.product.images[0]}
-                      alt={item.price.product.name}
-                      variant="rounded"
-                      sx={size}
+      {data.list.map((subscription) => {
+        const action = getSubscriptionAction(subscription);
+        return (
+          <Stack
+            key={subscription.id}
+            direction="row"
+            justifyContent="space-between"
+            gap={{
+              xs: 1,
+              sm: 3,
+            }}
+            flexWrap="wrap">
+            <Stack direction="column" spacing={0.5} onClick={() => onClickSubscription(subscription)} {...rest}>
+              <Stack direction="row" spacing={1} alignItems="center">
+                <AvatarGroup max={3}>
+                  {subscription.items.map((item) =>
+                    item.price.product.images.length > 0 ? (
+                      // @ts-ignore
+                      <Avatar
+                        key={item.price.product_id}
+                        src={item.price.product.images[0]}
+                        alt={item.price.product.name}
+                        variant="rounded"
+                        sx={size}
+                      />
+                    ) : (
+                      <Avatar key={item.price.product_id} variant="rounded" sx={size}>
+                        {item.price.product.name.slice(0, 1)}
+                      </Avatar>
+                    )
+                  )}
+                </AvatarGroup>
+                <Stack direction="column" spacing={0.5}>
+                  <Stack direction="row" spacing={2} alignItems="center">
+                    <Typography variant="body1" fontWeight={600}>
+                      {formatSubscriptionProduct(subscription.items)}
+                    </Typography>
+                    <Status
+                      size="small"
+                      sx={{ height: 18 }}
+                      label={subscription.status}
+                      color={getSubscriptionStatusColor(subscription.status)}
                     />
-                  ) : (
-                    <Avatar key={item.price.product_id} variant="rounded" sx={size}>
-                      {item.price.product.name.slice(0, 1)}
-                    </Avatar>
-                  )
-                )}
-              </AvatarGroup>
-              <Stack direction="column" spacing={0.5}>
-                <Stack direction="row" spacing={2} alignItems="center">
-                  <Typography variant="body1" fontWeight={600}>
-                    {formatSubscriptionProduct(subscription.items)}
+                  </Stack>
+                  <Typography variant="subtitle1" fontWeight={500}>
+                    {
+                      // @ts-ignore
+                      formatPrice(subscription.items[0].price, subscription.paymentCurrency)
+                    }
                   </Typography>
-                  <Status
-                    size="small"
-                    sx={{ height: 18 }}
-                    label={subscription.status}
-                    color={getSubscriptionStatusColor(subscription.status)}
-                  />
                 </Stack>
-                <Typography variant="subtitle1" fontWeight={500}>
-                  {
-                    // @ts-ignore
-                    formatPrice(subscription.items[0].price, subscription.paymentCurrency)
-                  }
+              </Stack>
+              <Stack direction="row" spacing={2} alignItems="center">
+                <Typography variant="body1" color="text.secondary">
+                  {getSubscriptionTimeSummary(subscription)}
                 </Typography>
               </Stack>
             </Stack>
-            <Stack direction="row" spacing={2} alignItems="center">
-              <Typography variant="body1" color="text.secondary">
-                Started on {formatToDate(subscription.start_date * 1000)}, will{' '}
-                {subscription.cancel_at_period_end ? 'end' : 'renew'} on{' '}
-                {formatToDate(subscription.current_period_end * 1000)}
-              </Typography>
+            <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>
+              )}
             </Stack>
           </Stack>
-          <Stack direction="column" alignItems="flex-end" spacing={1}>
-            <Button
-              variant="outlined"
-              color={subscription.cancel_at_period_end ? 'inherit' : 'error'}
-              size="small"
-              onClick={() =>
-                setState({
-                  action: subscription.cancel_at_period_end ? 'recover' : 'cancel',
-                  subscription: subscription.id,
-                })
-              }>
-              {t(`customer.${subscription.cancel_at_period_end ? 'recover' : 'cancel'}.button`)}
-            </Button>
-            {subscription.cancel_at_period_end && (
-              <Stack direction="row" alignItems="center" spacing={0.5}>
-                <ScheduleOutlined fontSize="small" sx={{ color: 'text.secondary' }} />
-                <Typography component="span" variant="body1" color="text.secondary">
-                  will {subscription.cancel_at_period_end ? 'cancel' : 'renew'} on{' '}
-                  {formatToDate(subscription.current_period_end * 1000)}
-                </Typography>
-              </Stack>
-            )}
-          </Stack>
-        </Stack>
-      ))}
+        );
+      })}
       <Box>
         {hasMore && (
           <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>

package/src/components/subscription/status.tsx

@@ -13,26 +13,28 @@ export default function SubscriptionStatus({
   [key: string]: any;
 }) {
   const { t } = useLocaleContext();
-  if (subscription.cancel_at_period_end && subscription.current_period_end > Date.now() / 1000) {
-    return (
-      <Status
-        icon={<AccessTimeOutlined />}
-        label={t('admin.subscription.cancel.will', { date: formatToDate(subscription.current_period_end * 1000) })}
-        color="default"
-        {...rest}
-      />
-    );
-  }
+  if (subscription.status === 'active' || subscription.status === 'trialing') {
+    if (subscription.cancel_at_period_end && subscription.current_period_end > Date.now() / 1000) {
+      return (
+        <Status
+          icon={<AccessTimeOutlined />}
+          label={t('admin.subscription.cancel.will', { date: formatToDate(subscription.current_period_end * 1000) })}
+          color="default"
+          {...rest}
+        />
+      );
+    }
 
-  if (subscription.cancel_at && subscription.cancel_at >= Date.now() / 1000) {
-    return (
-      <Status
-        icon={<AccessTimeOutlined />}
-        label={t('admin.subscription.cancel.will', { date: formatToDate(subscription.cancel_at * 1000) })}
-        color="default"
-        {...rest}
-      />
-    );
+    if (subscription.cancel_at && subscription.cancel_at >= Date.now() / 1000) {
+      return (
+        <Status
+          icon={<AccessTimeOutlined />}
+          label={t('admin.subscription.cancel.will', { date: formatToDate(subscription.cancel_at * 1000) })}
+          color="default"
+          {...rest}
+        />
+      );
+    }
   }
 
   if (subscription.pause_collection) {

package/src/global.css

@@ -97,3 +97,7 @@ th.MuiTableCell-head {
   max-height: 100% !important;
   overflow: auto !important;
 }
+
+.MuiTooltip-tooltip {
+  max-width: 500px;
+}

package/src/locales/en.tsx

@@ -18,6 +18,7 @@ export default flat({
     name: 'Name',
     amount: 'Amount',
     total: 'Total',
+    subtotal: 'Subtotal',
     status: 'Status',
     livemode: 'Test mode',
     afterTime: 'After {time}',
@@ -408,6 +409,7 @@ export default flat({
         title: 'Cancel subscription',
         required: 'Custom cancel time is required',
         will: 'Cancels on {date}',
+        done: 'Canceled',
         at: {
           title: 'Cancel',
           now: 'Immediately ({date})',
@@ -455,6 +457,7 @@ export default flat({
       email: 'Email',
       phone: 'Phone',
       invoicePrefix: 'Invoice Prefix',
+      balance: 'Balance ({currency})',
       address: {
         label: 'Address',
         country: 'Country',
@@ -592,6 +595,9 @@ export default flat({
         other: 'Other reasons',
       },
     },
+    pastDue: {
+      button: 'Pay',
+    },
     recover: {
       button: 'Renew',
       title: 'Renew your subscription',
@@ -601,12 +607,19 @@ export default flat({
       summary: 'Summary',
       details: 'Details',
       download: 'Download PDF',
+      unitPrice: 'Unit Price',
+      amountPaid: 'Amount Paid',
+      amountDue: 'Amount Due',
+      amountApplied: 'Applied Balance',
       pay: 'Pay this invoice',
+      paySuccess: 'You have successfully paid the invoice',
+      payError: 'Failed to paid the invoice',
+      empty: 'Seems you do not have any payments here',
     },
-
     subscriptions: {
       title: 'Manage subscriptions',
       current: 'Current subscriptions',
+      empty: 'Seems you do not have any subscriptions here',
     },
   },
 });

package/src/locales/zh.tsx

@@ -18,6 +18,7 @@ export default flat({
     login: '登录以访问此页面',
     amount: '金额',
     total: '总计',
+    subtotal: '小计',
     status: '状态',
     livemode: '测试模式',
     afterTime: '在{time}后',
@@ -399,6 +400,7 @@ export default flat({
         title: '取消订阅',
         required: '必须指定自定义取消时间',
         will: '于{date}取消',
+        done: '已取消',
         at: {
           title: '取消',
           now: '立即取消({date})',
@@ -446,6 +448,7 @@ export default flat({
       email: '电子邮件',
       phone: '电话',
       invoicePrefix: '发票前缀',
+      balance: '余额 ({currency})',
       address: {
         label: '地址',
         country: '国家',
@@ -583,16 +586,27 @@ export default flat({
       title: '续订您的订阅',
       description: '您的订阅将不再被取消，将在{date}续订',
     },
+    pastDue: {
+      button: '续费',
+    },
     invoice: {
       summary: '摘要',
       details: '详情',
       download: '下载PDF',
+      unitPrice: '单价',
+      amountPaid: '已支付',
+      amountDue: '待支付',
+      amountApplied: '余额变更',
       pay: '支付此发票',
+      paySuccess: '支付成功',
+      payError: '支付失败',
+      empty: '你没有任何支付',
     },
 
     subscriptions: {
       title: '订阅管理',
       current: '当前订阅',
+      empty: '你还没有任何订阅',
     },
   },
 });

package/src/pages/admin/customers/customers/detail.tsx

@@ -2,10 +2,11 @@
 import DidAddress from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TCustomerExpanded } from '@did-pay/types';
+import type { TCustomerExpanded, TPaymentMethodExpanded } from '@did-pay/types';
 import { ArrowBackOutlined, Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
+import { fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
 import { isEmpty } from 'lodash';
 import { FlagEmoji } from 'react-international-phone';
@@ -22,6 +23,7 @@ import MetadataEditor from '../../../../components/metadata/editor';
 import PaymentList from '../../../../components/payment-intent/list';
 import SectionHeader from '../../../../components/section/header';
 import SubscriptionList from '../../../../components/subscription/list';
+import { useSettingsContext } from '../../../../contexts/settings';
 import api from '../../../../libs/api';
 import { formatError, formatTime } from '../../../../libs/util';
 
@@ -29,9 +31,43 @@ const fetchData = (id: string): Promise<TCustomerExpanded> => {
   return api.get(`/api/customers/${id}`).then((res) => res.data);
 };
 
+function getTokenBalances(customer: TCustomerExpanded, paymentMethods: TPaymentMethodExpanded[]) {
+  const tokens: { currency: string; balance: string }[] = [];
+  // @ts-ignore
+  const currencies = paymentMethods.reduce((acc, x) => acc.concat(x.payment_currencies), []);
+
+  if (customer.balance) {
+    const currency = currencies.find((x: any) => x.symbol === 'USD');
+    tokens.push({
+      // @ts-ignore
+      currency: currency.symbol,
+      // @ts-ignore
+      balance: fromUnitToToken(customer.balance, currency.decimal),
+    });
+  }
+
+  if (customer.token_balance) {
+    Object.keys(customer.token_balance).forEach((currencyId) => {
+      const currency = currencies.find((x: any) => x.id === currencyId);
+      // @ts-ignore
+      if (currency && customer.token_balance[currencyId] !== '0') {
+        tokens.push({
+          // @ts-ignore
+          currency: currency.symbol,
+          // @ts-ignore
+          balance: fromUnitToToken(customer.token_balance[currencyId], currency.decimal),
+        });
+      }
+    });
+  }
+
+  return tokens;
+}
+
 export default function CustomerDetail(props: { id: string }) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
+  const { settings } = useSettingsContext();
   const [state, setState] = useSetState({
     adding: {
       price: false,
@@ -92,6 +128,8 @@ export default function CustomerDetail(props: { id: string }) {
     }
   };
 
+  const tokenBalances = getTokenBalances(data, settings.paymentMethods);
+
   return (
     <Root direction="column" spacing={4} sx={{ mb: 4 }}>
       <Box>
@@ -123,8 +161,14 @@ export default function CustomerDetail(props: { id: string }) {
             <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
             <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} divider />
             <InfoMetric label={t('admin.customer.spent')} value={0} divider />
-            <InfoMetric label={t('admin.customer.refund')} value={0} divider />
-            <InfoMetric label={t('admin.customer.dispute')} value={0} divider />
+            {tokenBalances.map((x) => (
+              <InfoMetric
+                key={x.currency}
+                label={t('admin.customer.balance', { currency: x.currency })}
+                value={x.balance}
+                divider
+              />
+            ))}
           </Stack>
         </Box>
       </Box>

package/src/pages/admin/overview.tsx

@@ -1,3 +1,23 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Button, Stack } from '@mui/material';
+import { Link } from 'react-router-dom';
+
 export default function Overview() {
-  return <div>Overview</div>;
+  const { t } = useLocaleContext();
+  return (
+    <Stack direction="row" spacing={2}>
+      <Button component={Link} variant="outlined" to="/admin/products">
+        {t('admin.products')}
+      </Button>
+      <Button component={Link} variant="outlined" to="/admin/payments">
+        {t('admin.payments')}
+      </Button>
+      <Button component={Link} variant="outlined" to="/admin/customers">
+        {t('admin.customers')}
+      </Button>
+      <Button component={Link} variant="outlined" to="/admin/billing/subscriptions">
+        {t('admin.subscriptions')}
+      </Button>
+    </Stack>
+  );
 }

package/src/pages/admin/payments/intents/detail.tsx

@@ -2,8 +2,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TPaymentIntentExpanded } from '@did-pay/types';
-import { ArrowBackOutlined, Edit } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { ArrowBackOutlined, Edit, InfoOutlined } from '@mui/icons-material';
+import { Alert, Box, Button, CircularProgress, Stack, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
@@ -118,7 +118,16 @@ export default function PaymentIntentDetail(props: { id: string }) {
           <InfoRow label={t('common.amount')} value={amount} />
           <InfoRow
             label={t('common.status')}
-            value={<Status label={data.status} color={getPaymentIntentStatusColor(data.status)} />}
+            value={
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Status label={data.status} color={getPaymentIntentStatusColor(data.status)} />
+                {data.last_payment_error && (
+                  <Tooltip title={<pre>{JSON.stringify(data.last_payment_error, null, 2)}</pre>}>
+                    <InfoOutlined fontSize="small" color="error" />
+                  </Tooltip>
+                )}
+              </Stack>
+            }
           />
           <InfoRow label={t('common.description')} value={data.description} />
           <InfoRow label={t('common.statementDescriptor')} value={data.statement_descriptor} />