payment-kit 1.14.21 → 1.14.22

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

@@ -3,25 +3,27 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { CustomerInvoiceList, TxLink, api, formatTime } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { Link, useParams } from 'react-router-dom';
 
+import { styled } from '@mui/system';
 import Currency from '../../../components/currency';
 import CustomerLink from '../../../components/customer/link';
 import InfoRow from '../../../components/info-row';
-import SectionHeader from '../../../components/section/header';
 import SubscriptionDescription from '../../../components/subscription/description';
 import SubscriptionItemList from '../../../components/subscription/items';
 import SubscriptionMetrics from '../../../components/subscription/metrics';
 import SubscriptionActions from '../../../components/subscription/portal/actions';
-import SubscriptionStatus from '../../../components/subscription/status';
 import { canChangePaymentMethod, goBackOrFallback } from '../../../libs/util';
 
 const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
 };
 
+const InfoDirection = 'column';
+const InfoAlignItems = 'flex-start';
+
 export default function CustomerSubscriptionDetail() {
   const { id } = useParams() as { id: string };
   const { t } = useLocaleContext();
@@ -36,58 +38,140 @@ export default function CustomerSubscriptionDetail() {
   }
 
   return (
-    <Stack direction="column" spacing={4} sx={{ mb: 4 }}>
+    <Root>
       <Box>
         <Stack
           className="page-header"
           direction="row"
           justifyContent="space-between"
           alignItems="center"
-          sx={{ position: 'relative' }}>
+          sx={{ position: 'relative', mt: '16px' }}>
           <Stack
             direction="row"
             onClick={() => goBackOrFallback('/customer')}
             alignItems="center"
-            sx={{ fontWeight: 'normal', mt: '16px', cursor: 'pointer' }}>
+            sx={{ fontWeight: 'normal', cursor: 'pointer' }}>
             <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
             <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
               {t('payment.customer.subscriptions.title')}
             </Typography>
           </Stack>
+          <SubscriptionActions
+            subscription={data}
+            onChange={() => refresh()}
+            showExtra
+            actionProps={{
+              cancel: {
+                variant: 'outlined',
+                color: 'primary',
+              },
+              recover: {
+                variant: 'outlined',
+                color: 'info',
+              },
+              pastDue: {
+                variant: 'outlined',
+                color: 'primary',
+              },
+            }}
+          />
         </Stack>
-        <Box mt={2}>
+        <Box
+          mt={4}
+          sx={{
+            display: 'flex',
+            gap: {
+              xs: 2,
+              sm: 2,
+              md: 5,
+            },
+            flexWrap: 'wrap',
+            flexDirection: {
+              xs: 'column',
+              sm: 'column',
+              md: 'row',
+            },
+            alignItems: {
+              xs: 'flex-start',
+              sm: 'flex-start',
+              md: 'center',
+            },
+          }}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Stack direction="row" alignItems="center">
-              <SubscriptionDescription subscription={data} variant="h5" />
-              <SubscriptionStatus subscription={data} sx={{ ml: 1 }} />
+            <Stack direction="row" alignItems="center" flexWrap="wrap" gap={1}>
+              <SubscriptionDescription subscription={data} variant="h1" />
             </Stack>
-            <SubscriptionActions subscription={data} onChange={() => refresh()} showExtra />
           </Stack>
           <Stack
             className="section-body"
-            direction="row"
-            spacing={3}
             justifyContent="flex-start"
             flexWrap="wrap"
-            sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
+            sx={{
+              'hr.MuiDivider-root:last-child': {
+                display: 'none',
+              },
+              flexDirection: {
+                xs: 'column',
+                sm: 'column',
+                md: 'row',
+              },
+              alignItems: {
+                xs: 'flex-start',
+                sm: 'flex-start',
+                md: 'center',
+              },
+              gap: {
+                xs: 1,
+                sm: 1,
+                md: 3,
+              },
+            }}>
             <SubscriptionMetrics subscription={data} />
           </Stack>
         </Box>
       </Box>
-
+      <Divider />
       <Box className="section">
-        <SectionHeader title={t('admin.details')} />
-        <Stack>
-          <InfoRow label={t('common.customer')} value={<CustomerLink customer={data.customer} linked={false} />} />
-          <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+        <Typography variant="h3" mb={3} className="section-header">
+          {t('admin.details')}
+        </Typography>
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: {
+              xs: 'repeat(1, 1fr)',
+              sm: 'repeat(1, 1fr)',
+              md: 'repeat(2, 1fr)',
+              lg: 'repeat(3, 1fr)',
+            },
+          }}>
+          <InfoRow
+            label={t('common.customer')}
+            value={<CustomerLink customer={data.customer} linked={false} />}
+            direction={InfoDirection}
+            alignItems={InfoAlignItems}
+          />
+          <InfoRow
+            label={t('common.createdAt')}
+            value={formatTime(data.created_at)}
+            direction={InfoDirection}
+            alignItems={InfoAlignItems}
+          />
           {data.status === 'paused' && !!data.pause_collection?.resumes_at && (
-            <InfoRow label={t('common.resumesAt')} value={formatTime(data.pause_collection.resumes_at * 1000)} />
+            <InfoRow
+              label={t('common.resumesAt')}
+              value={formatTime(data.pause_collection.resumes_at * 1000)}
+              direction={InfoDirection}
+              alignItems={InfoAlignItems}
+            />
           )}
           <InfoRow
             label={t('admin.subscription.currentPeriod')}
             value={[formatTime(data.current_period_start * 1000), formatTime(data.current_period_end * 1000)].join(
               ' ~ '
             )}
+            direction={InfoDirection}
+            alignItems={InfoAlignItems}
           />
           <InfoRow
             label={t('admin.subscription.trialingPeriod')}
@@ -96,12 +180,26 @@ export default function CustomerSubscriptionDetail() {
                 ? [formatTime(data.trial_start * 1000), formatTime(data.trial_end * 1000)].join(' ~ ')
                 : ''
             }
+            direction={InfoDirection}
+            alignItems={InfoAlignItems}
+          />
+          <InfoRow
+            label={t('admin.subscription.discount')}
+            value={data.discount_id ? data.discount_id : ''}
+            direction={InfoDirection}
+            alignItems={InfoAlignItems}
+          />
+          <InfoRow
+            label={t('admin.subscription.collectionMethod')}
+            value={data.collection_method}
+            direction={InfoDirection}
+            alignItems={InfoAlignItems}
           />
-          <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} />}
+            alignItems={InfoAlignItems}
+            direction={InfoDirection}
           />
           <InfoRow
             label={t('admin.paymentCurrency.name')}
@@ -110,8 +208,8 @@ export default function CustomerSubscriptionDetail() {
                 <Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />
                 {canChangePaymentMethod(data) && (
                   <Button
-                    color="primary"
-                    variant="outlined"
+                    variant="text"
+                    sx={{ color: 'text.link' }}
                     size="small"
                     component={Link}
                     to={`/customer/subscription/${data.id}/change-payment`}>
@@ -120,22 +218,35 @@ export default function CustomerSubscriptionDetail() {
                 )}
               </Stack>
             }
+            direction={InfoDirection}
+            alignItems={InfoAlignItems}
           />
           {(data.payment_details?.arcblock?.tx_hash || data.payment_details?.ethereum?.tx_hash) && (
             <InfoRow
               label={t('common.delegateTxHash')}
               value={<TxLink details={data.payment_details} method={data.paymentMethod} />}
+              direction={InfoDirection}
+              alignItems={InfoAlignItems}
             />
           )}
           {data.payment_details?.arcblock?.staking?.tx_hash && (
             <InfoRow
               label={t('common.stakeTxHash')}
               value={
-                <TxLink
-                  details={{ arcblock: { tx_hash: data.payment_details?.arcblock?.staking?.tx_hash, payer: '' } }}
-                  method={data.paymentMethod}
-                />
+                <Box
+                  sx={{
+                    '.MuiTypography-root': {
+                      color: 'text.link',
+                    },
+                  }}>
+                  <TxLink
+                    details={{ arcblock: { tx_hash: data.payment_details?.arcblock?.staking?.tx_hash, payer: '' } }}
+                    method={data.paymentMethod}
+                  />
+                </Box>
               }
+              direction={InfoDirection}
+              alignItems={InfoAlignItems}
             />
           )}
           {!!data.recovered_from && (
@@ -146,23 +257,46 @@ export default function CustomerSubscriptionDetail() {
                   {data.recovered_from}
                 </Link>
               }
+              direction={InfoDirection}
+              alignItems={InfoAlignItems}
             />
           )}
-        </Stack>
+        </Box>
       </Box>
-
+      <Divider />
       <Box className="section">
-        <SectionHeader title={t('admin.products')} mb={0} />
+        <Typography variant="h3" mb={1.5} className="section-header">
+          {t('admin.products')}
+        </Typography>
         <Box className="section-body">
           <SubscriptionItemList data={data.items} currency={data.paymentCurrency} mode="customer" />
         </Box>
       </Box>
+      <Divider />
       <Box className="section">
-        <SectionHeader title={t('admin.invoices')} mb={0} />
+        <Typography variant="h3" className="section-header">
+          {t('customer.invoiceHistory')}
+        </Typography>
         <Box className="section-body">
-          <CustomerInvoiceList subscription_id={data.id} include_staking />
+          <CustomerInvoiceList subscription_id={data.id} include_staking type="table" />
         </Box>
       </Box>
-    </Stack>
+    </Root>
   );
 }
+
+const Root = styled(Stack)`
+  margin-bottom: 24px;
+  gap: 24px;
+  flex-direction: column;
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    . {
+      border: none;
+      box-shadow: none;
+      padding: 0;
+    }
+    .section-header {
+      font-size: 18px;
+    }
+  }
+`;

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

@@ -190,32 +190,34 @@ export default function SubscriptionEmbed() {
           </List>
         </Box>
         <Divider />
-        <Box sx={{ marginTop: '12px', flex: 1 }}>
-          <List sx={{ overflow: 'auto' }} className="mini-invoice-list">
+        <Box sx={{ marginTop: '12px', flex: 1, overflow: 'hidden' }}>
+          <List sx={{ height: '100%', display: 'flex', flexDirection: 'column' }} className="mini-invoice-list">
             <ListSubheader disableGutters sx={{ padding: 0 }}>
               <Typography component="h2" variant="h6" fontSize="16px">
                 {t('payment.customer.invoices')}
               </Typography>
             </ListSubheader>
             {(invoices as any).length === 0 ? (
-              <Typography color="text.secondary">{t('payment.customer.invoice.empty')}</Typography>
+              <Typography color="text.lighter">{t('payment.customer.invoice.empty')}</Typography>
             ) : (
-              (invoices as any).map((item: any) => {
-                return (
-                  <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                    <Typography component="span" sx={{ flex: 3 }}>
-                      {formatToDate(item.created_at, locale, 'YYYY-MM-DD')}
-                    </Typography>
-                    <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
-                      {formatBNStr(item.total, item.paymentCurrency.decimal)}&nbsp;
-                      {item.paymentCurrency.symbol}
-                    </Typography>
-                    <Typography component="span" sx={{ flex: 2, textAlign: 'right' }}>
-                      <Status label={item.status} color={getInvoiceStatusColor(item.status)} />
-                    </Typography>
-                  </ListItem>
-                );
-              })
+              <Box sx={{ flex: 1, overflow: 'auto' }}>
+                {(invoices as any).map((item: any) => {
+                  return (
+                    <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                      <Typography component="span" sx={{ flex: 3 }}>
+                        {formatToDate(item.created_at, locale, 'YYYY-MM-DD')}
+                      </Typography>
+                      <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
+                        {formatBNStr(item.total, item.paymentCurrency.decimal)}&nbsp;
+                        {item.paymentCurrency.symbol}
+                      </Typography>
+                      <Typography component="span" sx={{ flex: 2, textAlign: 'right' }}>
+                        <Status label={item.status} color={getInvoiceStatusColor(item.status)} />
+                      </Typography>
+                    </ListItem>
+                  );
+                })}
+              </Box>
             )}
           </List>
         </Box>
@@ -257,6 +259,7 @@ function Position({ children }: any) {
         maxWidth: '500px',
         background: '#fff',
         margin: '0 auto',
+        height: '100%',
       }}>
       {children}
     </Box>

package/src/pages/home.tsx

@@ -34,7 +34,13 @@ function Home() {
             <Button variant="outlined" color="secondary" size="large" component={Link} to="/admin/overview">
               Admin Dashboard
             </Button>
-            <Button variant="outlined" color="primary" size="large" component={Link} to="/customer">
+            <Button
+              variant="outlined"
+              color="primary"
+              size="large"
+              component={Link}
+              to="/customer"
+              sx={{ background: 'transparent' }}>
               Customer Portal
             </Button>
           </Stack>

package/src/components/table.tsx

@@ -1,93 +0,0 @@
-import Datatable from '@arcblock/ux/lib/Datatable';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { styled } from '@mui/system';
-
-import useMobile from '../hooks/mobile';
-
-function EmptyStub() {
-  return null;
-}
-
-export default function Table({ options, columns, toolbar = true, footer = true, hasRowLink = false, ...rest }: any) {
-  const { isMobile } = useMobile();
-  const { locale } = useLocaleContext();
-
-  const defaultOptions = {
-    print: false,
-    download: false,
-    filter: false,
-    selectableRows: 'none',
-    rowsPerPage: 10,
-    rowsPerPageOptions: [10, 20, 50, 100],
-    searchDebounceTime: 300,
-    tableBodyHeight: '100%',
-    loading: true,
-  };
-
-  const components: any = {};
-  if (!toolbar) {
-    components.TableToolbar = EmptyStub;
-  }
-  if (!footer) {
-    components.TableFooter = EmptyStub;
-  }
-
-  // components.TableHead = EmptyStub2
-
-  return (
-    <Wrapped
-      locale={locale}
-      options={{ ...defaultOptions, ...options }}
-      columns={columns.map((x: any) => {
-        x.options = x.options || {};
-        x.options.filter = x.options.filter || false;
-        x.options.sort = x.options.sort || false;
-        return x;
-      })}
-      {...rest}
-      components={components}
-      hasRowLink={hasRowLink}
-      isMobile={isMobile}
-    />
-  );
-}
-
-const Wrapped = styled(Datatable)`
-  ${(props) =>
-    props.hasRowLink
-      ? `.MuiTableCell-root {
-    font-size: 1rem !important;
-    padding: 0;
-  }`
-      : ''}
-
-  th.MuiTableCell-head {
-    padding: 8px 24px 8px 0;
-  }
-
-  tr.MuiTableRow-root:not(.MuiTableRow-footer) {
-    border-bottom: 1px solid rgba(224, 224, 224, 0.4);
-  }
-
-  th.MuiTableCell-head {
-    text-transform: inherit;
-  }
-
-  tr.MuiTableRow-root:not(.MuiTableRow-footer):hover {
-    background: #f5f5f5;
-  }
-
-  th a,
-  td a {
-    text-decoration: none;
-    display: block;
-    color: inherit;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    padding-right: 24px;
-  }
-
-  > div {
-    overflow: visible;
-  }
-`;