payment-kit 1.14.21 → 1.14.23

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

@@ -13,7 +13,7 @@ import {
 } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } 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 { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { useEffect } from 'react';
@@ -24,14 +24,16 @@ import CustomerLink from '../../../components/customer/link';
 import InfoRow from '../../../components/info-row';
 import { Download } from '../../../components/invoice-pdf/pdf';
 import InvoiceTable from '../../../components/invoice/table';
-import SectionHeader from '../../../components/section/header';
 import { goBackOrFallback } from '../../../libs/util';
 import CustomerRefundList from '../refund/list';
+import InfoMetric from '../../../components/info-metric';
 
 const fetchData = (id: string): Promise<TInvoiceExpanded> => {
   return api.get(`/api/invoices/${id}`).then((res) => res.data);
 };
 
+const InfoDirection = 'column';
+const InfoAlignItems = 'flex-start';
 export default function CustomerInvoiceDetail() {
   const { t } = useLocaleContext();
   const [searchParams] = useSearchParams();
@@ -100,7 +102,7 @@ export default function CustomerInvoiceDetail() {
   }
 
   return (
-    <Stack direction="column" spacing={3} sx={{ my: 2, maxWidth: 'lg' }}>
+    <InvoiceDetailRoot direction="column" spacing={3} sx={{ my: 2 }}>
       <Stack direction="row" justifyContent="space-between">
         <Stack
           direction="row"
@@ -115,30 +117,125 @@ export default function CustomerInvoiceDetail() {
         <Stack direction="row" spacing={1} justifyContent="flex-end" alignItems="center">
           {['open', 'paid', 'uncollectible'].includes(data.status) && <Download data={data} />}
           {['open', 'uncollectible'].includes(data.status) && (
-            <Button variant="contained" color="primary" size="small" disabled={state.paying} onClick={onPay}>
+            <Button
+              variant="outlined"
+              color="primary"
+              size="small"
+              sx={{ borderColor: 'var(--stroke-border-base, #EFF1F5)' }}
+              disabled={state.paying}
+              onClick={onPay}>
               {t('payment.customer.invoice.pay')}
             </Button>
           )}
         </Stack>
       </Stack>
-      <Root>
-        <SectionHeader title={t('payment.customer.invoice.summary')} />
-        <Stack className="invoice-summary-wrapper">
-          <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
-          <InfoRow label={t('admin.invoice.number')} value={data.number} />
-          <InfoRow label={t('admin.invoice.description')} value={data.description} />
-          <InfoRow
+      <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" flexWrap="wrap" gap={1}>
+            <Typography variant="h1">{data.number}</Typography>
+          </Stack>
+        </Stack>
+        <Stack
+          className="section-body"
+          justifyContent="flex-start"
+          flexWrap="wrap"
+          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,
+            },
+          }}>
+          <InfoMetric
             label={t('common.status')}
             value={<Status label={data.status} color={getInvoiceStatusColor(data.status)} />}
+            divider
           />
+          <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
           {data.period_start > 0 && data.period_end > 0 && (
-            <InfoRow
+            <InfoMetric
               label={t('admin.subscription.currentPeriod')}
               value={[formatTime(data.period_start * 1000), formatTime(data.period_end * 1000)].join(' ~ ')}
+              divider
             />
           )}
+        </Stack>
+      </Box>
+      <Divider />
+      <Box className="section">
+        <Typography variant="h3" mb={3} className="section-header">
+          {t('payment.customer.invoice.details')}
+        </Typography>
+        <Stack
+          className="invoice-summary-wrapper"
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: {
+              xs: 'repeat(1, 1fr)',
+              sm: 'repeat(1, 1fr)',
+              md: 'repeat(2, 1fr)',
+              lg: 'repeat(3, 1fr)',
+            },
+          }}>
+          <InfoRow
+            label={t('admin.invoice.description')}
+            value={data.description}
+            direction={InfoDirection}
+            alignItems={InfoAlignItems}
+          />
+          <InfoRow
+            label={t('admin.invoice.from')}
+            value={data.statement_descriptor || blocklet.appName}
+            direction={InfoDirection}
+            alignItems={InfoAlignItems}
+          />
+
+          <InfoRow
+            label={t('admin.invoice.billTo')}
+            value={<CustomerLink customer={data.customer} linked={false} />}
+            direction={InfoDirection}
+            alignItems={InfoAlignItems}
+          />
           {data.status_transitions?.paid_at && (
-            <InfoRow label={t('admin.invoice.paidAt')} value={formatTime(data.status_transitions.paid_at * 1000)} />
+            <InfoRow
+              label={t('admin.invoice.paidAt')}
+              value={formatTime(data.status_transitions.paid_at * 1000)}
+              direction={InfoDirection}
+              alignItems={InfoAlignItems}
+            />
           )}
           <InfoRow
             label={t('admin.paymentCurrency.name')}
@@ -148,11 +245,15 @@ export default function CustomerInvoiceDetail() {
                 name={`${data.paymentCurrency.symbol} (${data.paymentMethod.name})`}
               />
             }
+            direction={InfoDirection}
+            alignItems={InfoAlignItems}
           />
           {!!data.paymentIntent?.payment_details?.ethereum && (
             <InfoRow
               label={t('common.txGas')}
               value={<TxGas details={data.paymentIntent.payment_details as any} method={data.paymentMethod} />}
+              direction={InfoDirection}
+              alignItems={InfoAlignItems}
             />
           )}
           {data.paymentIntent && data.paymentIntent.payment_details && (
@@ -161,6 +262,8 @@ export default function CustomerInvoiceDetail() {
               value={
                 <TxLink details={data.paymentIntent.payment_details} method={data.paymentMethod} mode="customer" />
               }
+              direction={InfoDirection}
+              alignItems={InfoAlignItems}
             />
           )}
           {data.subscription && (
@@ -168,36 +271,45 @@ export default function CustomerInvoiceDetail() {
               label={t('admin.subscription.name')}
               value={
                 <Link to={`/customer/subscription/${data.subscription.id}`}>
-                  {data.subscription.description || data.subscription.id}
+                  <Typography variant="body1" color="text.link">
+                    {data.subscription.description || data.subscription.id}
+                  </Typography>
                 </Link>
               }
+              direction={InfoDirection}
+              alignItems={InfoAlignItems}
             />
           )}
-          <InfoRow label={t('admin.invoice.billTo')} value={<CustomerLink customer={data.customer} linked={false} />} />
         </Stack>
-      </Root>
-      <Box>
-        <SectionHeader title={t('payment.customer.invoice.details')} />
+      </Box>
+      <Divider />
+      <Box className="section">
+        <Typography variant="h3" mb={1.5} className="section-header">
+          {t('payment.customer.specifics')}
+        </Typography>
         <InvoiceTable invoice={data} simple />
       </Box>
+      <Divider />
       <Box className="section">
-        <SectionHeader title={t('admin.refunds')} mb={0} mt={0} />
+        <Typography variant="h3" className="section-header">
+          {t('admin.refunds')}
+        </Typography>
         <Box className="section-body">
-          <CustomerRefundList invoice_id={data.id} />
+          <CustomerRefundList invoice_id={data.id} type="table" />
         </Box>
       </Box>
-    </Stack>
+    </InvoiceDetailRoot>
   );
 }
 
-const Root = styled(Box)`
+const InvoiceDetailRoot = styled(Stack)`
   .invoice-summary-wrapper {
     display: 'grid';
-    gridtemplatecolumns: '50% 50%';
+    grid-template-columns: '50% 50%';
   }
-  @media (max-width: 600px) {
-    .invoice-summary-wrapper {
-      display: block !important;
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .section-header {
+      font-size: 18px;
     }
   }
 `;

package/src/pages/customer/refund/list.tsx

@@ -1,9 +1,21 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, TxLink, api, formatBNStr, formatToDate, getPaymentIntentStatusColor } from '@blocklet/payment-react';
+import {
+  Status,
+  Table,
+  TxLink,
+  api,
+  formatBNStr,
+  formatTime,
+  formatToDate,
+  getPaymentIntentStatusColor,
+} from '@blocklet/payment-react';
 import type { Paginated, TRefundExpanded } from '@blocklet/payment-types';
 import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
-import { useInfiniteScroll } from 'ahooks';
+import { styled } from '@mui/system';
+import { useInfiniteScroll, useRequest } from 'ahooks';
+import { capitalize, toLower } from 'lodash';
+import { memo, useState } from 'react';
 
 const groupByDate = (items: TRefundExpanded[]) => {
   const grouped: { [key: string]: TRefundExpanded[] } = {};
@@ -31,7 +43,170 @@ type Props = {
 
 const pageSize = 10;
 
-export default function CustomerRefundList({ invoice_id }: Props) {
+const RefundTable = memo(({ invoice_id }: Props) => {
+  const listKey = 'invoice-table';
+  const { t, locale } = useLocaleContext();
+
+  const [search, setSearch] = useState<{ pageSize: number; page: number }>({
+    pageSize: pageSize || 10,
+    page: 1,
+  });
+  const { loading, data = { list: [], count: 0 } } = useRequest(
+    () =>
+      fetchData({
+        ...search,
+        invoice_id,
+      }),
+    {
+      refreshDeps: [search],
+    }
+  );
+
+  const columns = [
+    {
+      label: t('common.amount'),
+      name: 'id',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TRefundExpanded;
+          return (
+            <Typography component="strong" fontWeight={600}>
+              {formatBNStr(item?.amount, item?.paymentCurrency.decimal)}&nbsp;
+              {item?.paymentCurrency.symbol}
+            </Typography>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'status',
+      width: 100,
+      options: {
+        filter: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TRefundExpanded;
+          return <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />;
+        },
+      },
+    },
+    {
+      label: t('common.type'),
+      name: 'type',
+      width: 60,
+      options: {
+        filter: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TRefundExpanded;
+          return <Status label={t(`refund.type.${item.type}`)} />;
+        },
+      },
+    },
+    {
+      label: t('common.description'),
+      name: 'description',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TRefundExpanded;
+          return item.description ? capitalize(toLower(item.description.replace(/_/g, ' '))) : item.id;
+        },
+      },
+    },
+    {
+      label: t('common.createdAt'),
+      name: 'created_at',
+      options: {
+        sort: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TRefundExpanded;
+          return formatTime(item.created_at);
+        },
+      },
+    },
+    {
+      label: t('common.updatedAt'),
+      name: 'updated_at',
+      options: {
+        sort: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TRefundExpanded;
+          return formatTime(item.updated_at);
+        },
+      },
+    },
+    {
+      label: t('common.txHash'),
+      name: '',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TRefundExpanded;
+          return item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash ? (
+            <Box
+              sx={{
+                '.MuiTypography-root': {
+                  color: 'text.link',
+                },
+              }}>
+              <TxLink details={item.payment_details} method={item.paymentMethod} mode="customer" />
+            </Box>
+          ) : (
+            t('common.none')
+          );
+        },
+      },
+    },
+  ];
+
+  const onTableChange = ({ page, rowsPerPage }: any) => {
+    if (search.pageSize !== rowsPerPage) {
+      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search.page !== page + 1) {
+      setSearch((x) => ({ ...x, page: page + 1 }));
+    }
+  };
+
+  return (
+    <TableRoot>
+      <Table
+        hasRowLink
+        durable={`__${listKey}__`}
+        durableKeys={['page', 'rowsPerPage', 'searchText']}
+        data={data.list}
+        columns={columns}
+        options={{
+          count: data.count,
+          page: search.page - 1,
+          rowsPerPage: search.pageSize,
+        }}
+        loading={loading}
+        onChange={onTableChange}
+        toolbar={false}
+        sx={{ mt: 2 }}
+        showMobile={false}
+        locale={locale}
+        mobileTDFlexDirection="row"
+        emptyNodeText={t('payment.customer.refund.emptyList')}
+      />
+    </TableRoot>
+  );
+});
+
+const TableRoot = styled(Box)`
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root {
+      > div {
+        width: fit-content;
+        flex: inherit;
+        font-size: 14px;
+      }
+    }
+    .invoice-summary {
+      padding-right: 20px;
+    }
+  }
+`;
+
+const RefundList = memo(({ invoice_id }: Props) => {
   const { t } = useLocaleContext();
 
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TRefundExpanded>>(
@@ -89,7 +264,9 @@ export default function CustomerRefundList({ invoice_id }: Props) {
                   <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />
                 </Box>
                 <Box flex={3}>
-                  <Typography>{item.description || '-'}</Typography>
+                  <Typography>
+                    {item.description ? capitalize(toLower(item.description.replace(/_/g, ' '))) : '-'}
+                  </Typography>
                 </Box>
                 <Box flex={3} sx={{ minWidth: '220px' }}>
                   {(item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash) && (
@@ -117,4 +294,16 @@ export default function CustomerRefundList({ invoice_id }: Props) {
       </Box>
     </Stack>
   );
+});
+
+export default function CustomerRefundList(props: Props & { type?: 'table' | 'list' }) {
+  const { type, ...restProps } = props;
+  if (type === 'table') {
+    return <RefundTable {...restProps} />;
+  }
+  return <RefundList {...restProps} />;
 }
+
+CustomerRefundList.defaultProps = {
+  type: 'list',
+};

package/src/pages/customer/subscription/change-payment.tsx

@@ -342,26 +342,26 @@ export default function DataWrapper() {
 
 const Root = styled(Stack)`
   .cko-payment-form {
-    .MuiInputBase-root {
-      border-radius: 0;
-    }
-
-    .MuiInputAdornment-positionStart {
-      width: 50px;
-    }
-
-    .MuiBox-root {
-      border: 1px solid #ccc;
-      margin: -1px 0 0 -1px;
-    }
-
-    .MuiFormHelperText-root {
-      margin-left: 14px;
-    }
-
-    .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
+    // .MuiInputBase-root {
+    //   border-radius: 0;
+    // }
+
+    // .MuiInputAdornment-positionStart {
+    //   width: 50px;
+    // }
+
+    // .MuiBox-root {
+    //   border: 1px solid #ccc;
+    //   margin: -1px 0 0 -1px;
+    // }
+
+    // .MuiFormHelperText-root {
+    //   margin-left: 14px;
+    // }
+
+    // .MuiOutlinedInput-notchedOutline {
+    //   border: none;
+    // }
   }
 
   .cko-payment-submit {