payment-kit 1.13.65 → 1.13.67

package/src/components/invoice/list.tsx

@@ -39,6 +39,12 @@ type ListProps = {
   customer_id?: string;
   subscription_id?: string;
   status?: string;
+
+  invoiceProps?: {
+    onClick?: (invoice: TInvoiceExpanded) => void | Promise<void>;
+  };
+
+  mode?: 'admin' | 'customer';
 };
 
 const getListKey = (props: ListProps) => {
@@ -60,9 +66,13 @@ InvoiceList.defaultProps = {
   customer_id: '',
   subscription_id: '',
   status: '',
+
+  invoiceProps: {},
+
+  mode: 'admin',
 };
 
-export default function InvoiceList({ customer_id, subscription_id, features, status }: ListProps) {
+export default function InvoiceList({ customer_id, subscription_id, features, status, invoiceProps, mode }: ListProps) {
   const listKey = getListKey({ customer_id, subscription_id });
   const persisted = getDurableData(listKey);
 
@@ -159,7 +169,7 @@ export default function InvoiceList({ customer_id, subscription_id, features, st
         sort: false,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
-          return <InvoiceActions data={item} onChange={refresh} />;
+          return <InvoiceActions data={item} onChange={refresh} mode={mode} />;
         },
       },
     },
@@ -200,9 +210,14 @@ export default function InvoiceList({ customer_id, subscription_id, features, st
         count: data.count,
         page: search.page - 1,
         rowsPerPage: search.pageSize,
-        onRowClick: (_: any, { dataIndex }: any) => {
+        onRowClick: async (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TInvoiceExpanded;
-          navigate(`/admin/billing/${item.id}`);
+
+          if (invoiceProps?.onClick) {
+            await invoiceProps.onClick(item);
+          } else {
+            navigate(`/admin/billing/${item.id}`);
+          }
         },
       }}
       toolbar={features?.toolbar}

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

@@ -85,7 +85,7 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
                   <Typography component="span">{invoice.number}</Typography>
                 </Link>
               </Box>
-              <Box flex={1}>
+              <Box flex={2}>
                 <Typography>{formatToDate(invoice.created_at)}</Typography>
               </Box>
               <Box flex={1}>

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

@@ -3,7 +3,7 @@ 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, Typography } from '@mui/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';
 
@@ -29,12 +29,13 @@ const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TSubscri
 
 type Props = {
   id: string;
-  onChange: Function;
-};
+  onChange: (action?: string) => any | Promise<any>;
+  onClickSubscription: (subscription: TSubscriptionExpanded) => void | Promise<void>;
+} & Omit<StackProps, 'onChange'>;
 
 const pageSize = 4;
 
-export function CurrentSubscriptionsInner({ id, onChange }: Props) {
+export function CurrentSubscriptionsInner({ id, onChange, onClickSubscription, ...rest }: Props) {
   const { t } = useLocaleContext();
   const { reset, getValues } = useFormContext();
 
@@ -108,7 +109,7 @@ export function CurrentSubscriptionsInner({ id, onChange }: Props) {
             sm: 3,
           }}
           flexWrap="wrap">
-          <Stack direction="column" spacing={0.5}>
+          <Stack direction="column" spacing={0.5} onClick={() => onClickSubscription(subscription)} {...rest}>
             <Stack direction="row" spacing={1} alignItems="center">
               <AvatarGroup max={3}>
                 {subscription.items.map((item) =>

package/src/components/subscription/items/index.tsx

@@ -12,11 +12,14 @@ import UsageRecords from './usage-records';
 type ListProps = {
   data: TSubscriptionItemExpanded[];
   currency: TPaymentCurrency;
+  mode?: 'admin' | 'customer';
 };
 
-SubscriptionItemList.defaultProps = {};
+SubscriptionItemList.defaultProps = {
+  mode: 'customer',
+};
 
-export default function SubscriptionItemList({ data, currency }: ListProps) {
+export default function SubscriptionItemList({ data, currency, mode }: ListProps) {
   const { t } = useLocaleContext();
 
   const columns = [
@@ -73,7 +76,7 @@ export default function SubscriptionItemList({ data, currency }: ListProps) {
         },
       },
     },
-    {
+    mode === 'admin' && {
       label: '',
       name: '',
       align: 'center',
@@ -81,11 +84,12 @@ export default function SubscriptionItemList({ data, currency }: ListProps) {
         sort: false,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data[index] as TSubscriptionItemExpanded;
+
           return <LineItemActions data={item as any} />;
         },
       },
     },
-  ];
+  ].filter(Boolean);
 
   return (
     <Table

package/src/libs/util.ts

@@ -59,7 +59,7 @@ export function formatToDate(date: Date | string | number, locale = 'en') {
     return '-';
   }
 
-  return dayjs(date).locale(formatLocale(locale)).format('ll');
+  return dayjs(date).locale(formatLocale(locale)).format('YYYY-MM-DD HH:mm:ss');
 }
 
 export function formatToDatetime(date: Date | string | number, locale = 'en') {
@@ -70,7 +70,7 @@ export function formatToDatetime(date: Date | string | number, locale = 'en') {
   return dayjs(date).locale(formatLocale(locale)).format('lll');
 }
 
-export function formatTime(date: Date | string | number, format = 'lll', locale = 'en') {
+export function formatTime(date: Date | string | number, format = 'YYYY-MM-DD HH:mm:ss', locale = 'en') {
   if (!date) {
     return '-';
   }

package/src/locales/en.tsx

@@ -570,7 +570,6 @@ export default flat({
     },
   },
   customer: {
-    subscriptions: 'Current Subscriptions',
     invoices: 'Invoice History',
     details: 'Billing Details',
     update: 'Update Information',
@@ -603,5 +602,10 @@ export default flat({
       download: 'Download PDF',
       pay: 'Pay this invoice',
     },
+
+    subscriptions: {
+      title: 'Manage subscriptions',
+      current: 'Current subscriptions',
+    },
   },
 });

package/src/locales/zh.tsx

@@ -557,7 +557,6 @@ export default flat({
     },
   },
   customer: {
-    subscriptions: '当前订阅',
     invoices: '发票历史',
     details: '计费详情',
     update: '更新客户信息',
@@ -589,5 +588,10 @@ export default flat({
       download: '下载PDF',
       pay: '支付此发票',
     },
+
+    subscriptions: {
+      title: '订阅管理',
+      current: '当前订阅',
+    },
   },
 });

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

@@ -258,7 +258,7 @@ export default function PricingTable({ id }: Props) {
                       <Box>
                         <Typography>{t('checkout.include')}</Typography>
                         <List dense>
-                          {x.product.features.map((f) => (
+                          {x.product.features.map((f: any) => (
                             <ListItem key={f.name} disableGutters disablePadding>
                               <ListItemIcon sx={{ minWidth: 25 }}>
                                 <CheckOutlined color="success" fontSize="small" />

package/src/pages/customer/index.tsx

@@ -6,6 +6,7 @@ import { Alert, Box, Button, CircularProgress, Grid, Stack } from '@mui/material
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { FlagEmoji } from 'react-international-phone';
+import { useNavigate } from 'react-router-dom';
 
 import EditCustomer from '../../components/customer/edit';
 import InfoRow from '../../components/info-row';
@@ -26,6 +27,7 @@ export default function CustomerHome() {
     editing: false,
     loading: false,
   });
+  const navigate = useNavigate();
 
   const { loading, error, data, runAsync } = useRequest(fetchData);
 
@@ -67,9 +69,18 @@ export default function CustomerHome() {
         <Grid item xs={12} md={8}>
           <Root direction="column" spacing={3} sx={{ my: 2 }}>
             <Box className="section">
-              <SectionHeader title={t('customer.subscriptions')} mb={0} />
+              <SectionHeader title={t('customer.subscriptions.current')} mb={0} />
               <Box className="section-body">
-                <CurrentSubscriptions id={data.id} onChange={runAsync} />
+                <CurrentSubscriptions
+                  id={data.id}
+                  onChange={runAsync}
+                  style={{
+                    cursor: 'pointer',
+                  }}
+                  onClickSubscription={(subscription) => {
+                    navigate(`/customer/subscription/${subscription.id}`);
+                  }}
+                />
               </Box>
             </Box>
             <Box className="section">

package/src/pages/customer/invoice.tsx

@@ -1,10 +1,11 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TInvoiceExpanded } from '@did-pay/types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, Grid, Link, Stack, Typography } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
-import { Link, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import TxLink from '../../components/blockchain/tx';
 import Currency from '../../components/currency';
@@ -72,11 +73,11 @@ export default function CustomerHome() {
     <Layout>
       <Grid container spacing={3} sx={{ mt: 1 }}>
         <Grid item xs={12} md={12}>
-          <Link to="/customer">
+          <Link onClick={() => window.history.back()}>
             <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.invoices')}
+                {t('common.previous')}
               </Typography>
             </Stack>
           </Link>

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

@@ -0,0 +1,163 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TSubscriptionExpanded } from '@did-pay/types';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { Alert, Box, CircularProgress, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { useRequest } from 'ahooks';
+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 Layout from '../../../components/layout';
+import SectionHeader from '../../../components/section/header';
+import SubscriptionItemList from '../../../components/subscription/items';
+import SubscriptionStatus from '../../../components/subscription/status';
+import api from '../../../libs/api';
+import { formatSubscriptionProduct, formatTime } from '../../../libs/util';
+
+const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {
+  return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
+};
+
+export default function CustomerSubscription() {
+  const { id } = useParams() as { id: string };
+  const { t } = useLocaleContext();
+  const { loading, error, data } = useRequest(() => fetchData(id));
+  const navigate = useNavigate();
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <Layout>
+      <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+        <Box>
+          <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+            <Link to="/customer">
+              <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' }}>
+                  {t('customer.subscriptions.title')}
+                </Typography>
+              </Stack>
+            </Link>
+          </Stack>
+          <Box mt={2}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Stack direction="row" alignItems="center">
+                <Typography variant="h5" sx={{ fontWeight: 600 }}>
+                  {formatSubscriptionProduct(data.items)}
+                </Typography>
+                <SubscriptionStatus subscription={data} sx={{ ml: 1 }} />
+              </Stack>
+            </Stack>
+            <Stack
+              className="section-body"
+              direction="row"
+              spacing={3}
+              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.cancel_at && (
+                <InfoMetric
+                  label={t('admin.subscription.nextInvoice')}
+                  value={formatTime(data.current_period_end * 1000)}
+                  divider
+                />
+              )}
+              {data.cancel_at && (
+                <InfoMetric
+                  label={t('admin.subscription.cancel.schedule')}
+                  value={formatTime(data.cancel_at * 1000)}
+                  divider
+                />
+              )}
+            </Stack>
+          </Box>
+        </Box>
+
+        <Box className="section">
+          <SectionHeader title={t('admin.details')} />
+          <Stack>
+            <InfoRow
+              label={t('common.customer')}
+              value={<Link to={`/admin/customers/${data.customer.id}`}>{data.customer.name}</Link>}
+            />
+            <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+            {data.status === 'paused' && !!data.pause_collection?.resumes_at && (
+              <InfoRow label={t('common.resumesAt')} value={formatTime(data.pause_collection.resumes_at * 1000)} />
+            )}
+            <InfoRow
+              label={t('admin.subscription.currentPeriod')}
+              value={[formatTime(data.current_period_start * 1000), formatTime(data.current_period_end * 1000)].join(
+                ' ~ '
+              )}
+            />
+            <InfoRow
+              label={t('admin.subscription.trialingPeriod')}
+              value={
+                data.trail_end && data.trail_start
+                  ? [formatTime(data.trail_start * 1000), formatTime(data.trail_end * 1000)].join(' ~ ')
+                  : ''
+              }
+            />
+            <InfoRow label={t('admin.subscription.discount')} value={data.discount_id ? data.discount_id : ''} />
+            <InfoRow label={t('admin.subscription.collectionMethod')} value={data.collection_method} />
+            <InfoRow
+              label={t('admin.paymentMethod._name')}
+              value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
+            />
+            <InfoRow
+              label={t('admin.paymentCurrency.name')}
+              value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+            />
+            {data.payment_details?.arcblock?.tx_hash && (
+              <InfoRow
+                label={t('common.txHash')}
+                value={<TxLink details={data.payment_details} method={data.paymentMethod} />}
+              />
+            )}
+          </Stack>
+        </Box>
+
+        <Box className="section">
+          <SectionHeader title={t('admin.product.pricing')} mb={0} />
+          <Box className="section-body">
+            <SubscriptionItemList data={data.items} currency={data.paymentCurrency} mode="customer" />
+          </Box>
+        </Box>
+        <Box className="section">
+          <SectionHeader title={t('admin.invoices')} mb={0} />
+          <Box className="section-body">
+            <InvoiceList
+              features={{ customer: false, toolbar: false }}
+              subscription_id={data.id}
+              invoiceProps={{
+                onClick: (invoice) => {
+                  navigate(`/customer/invoice/${invoice.id}`);
+                },
+              }}
+              mode="customer"
+            />
+          </Box>
+        </Box>
+      </Root>
+    </Layout>
+  );
+}
+
+const Root = styled(Stack)``;

package/tsconfig.api.json

@@ -3,7 +3,12 @@
   "compilerOptions": {
     "outDir": "api/dist",
     "noEmit": false,
-    "noEmitOnError": true
+    "noEmitOnError": true,
+    "typeRoots": [
+      "./node_modules/@types",
+      "env.d.ts",
+      "pretty-ms-i18n.d.ts"
+    ],     
   },
   "include": ["api/*.d.ts", "api/src"]
 }