@blocklet/payment-react 1.14.20 → 1.14.22

package/src/history/invoice/list.tsx

@@ -1,3 +1,7 @@
+/* eslint-disable @typescript-eslint/indent */
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable @typescript-eslint/naming-convention */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -6,8 +10,8 @@ import type { Paginated, TInvoiceExpanded, TSubscription } from '@blocklet/payme
 import { OpenInNewOutlined } from '@mui/icons-material';
 import { Box, Button, CircularProgress, Hidden, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
-import { useInfiniteScroll, useSetState } from 'ahooks';
-import { useEffect } from 'react';
+import { useInfiniteScroll, useRequest, useSetState } from 'ahooks';
+import React, { useEffect, useState } from 'react';
 import { joinURL } from 'ufo';
 
 import Status from '../../components/status';
@@ -23,6 +27,7 @@ import {
   getPrefix,
   getTxLink,
 } from '../../libs/util';
+import Table from '../../components/table';
 
 type Result = Paginated<TInvoiceExpanded> & { subscription: TSubscription };
 
@@ -53,10 +58,12 @@ type Props = {
   subscription_id?: string;
   currency_id?: string;
   include_staking?: boolean;
+  include_recovered_from?: boolean;
   status?: string;
   pageSize?: number;
   target?: string;
   action?: string;
+  type?: 'list' | 'table';
 };
 
 const getInvoiceLink = (invoice: TInvoiceExpanded, action?: string) => {
@@ -78,22 +85,210 @@ const getInvoiceLink = (invoice: TInvoiceExpanded, action?: string) => {
   };
 };
 
-export default function CustomerInvoiceList({
-  customer_id,
-  subscription_id,
-  currency_id,
-  include_staking,
-  status,
-  pageSize,
-  target,
-  action,
-}: Props) {
+const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) => void }) => {
+  const {
+    pageSize,
+    target,
+    action,
+    onPay,
+    status,
+    customer_id,
+    currency_id,
+    subscription_id,
+    include_staking,
+    include_recovered_from,
+  } = 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,
+        status,
+        customer_id,
+        currency_id,
+        subscription_id,
+        include_staking,
+        include_recovered_from,
+        ignore_zero: true,
+      }),
+    {
+      refreshDeps: [search],
+    }
+  );
+
+  const columns = [
+    {
+      label: t('payment.customer.invoice.invoiceNumber'),
+      name: 'number',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice, action);
+          return (
+            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+              {invoice?.number}
+            </a>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.amount'),
+      name: 'total',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice, action);
+          return (
+            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+              <Typography>
+                {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
+                {invoice.paymentCurrency.symbol}
+              </Typography>
+            </a>
+          );
+        },
+      },
+    },
+
+    {
+      label: t('common.updatedAt'),
+      name: 'name',
+      options: {
+        customBodyRenderLite: (val: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice, action);
+          return (
+            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+              {formatToDate(invoice.created_at, locale, 'YYYY-MM-DD HH:mm:ss')}
+            </a>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.description'),
+      name: '',
+      options: {
+        sort: false,
+        customBodyRenderLite: (val: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice, action);
+          return (
+            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+              {invoice.description || invoice.id}
+            </a>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'created_at',
+      options: {
+        sort: true,
+        customBodyRenderLite: (val: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice, action);
+          if (action) {
+            return link.connect ? (
+              <Button variant="text" size="small" onClick={() => onPay(invoice.id)} sx={{ color: 'text.link' }}>
+                {t('payment.customer.invoice.pay')}
+              </Button>
+            ) : (
+              <Button
+                component="a"
+                variant="text"
+                size="small"
+                href={link.url}
+                target={link.external ? '_blank' : target}
+                sx={{ color: 'var(--foregrounds-fg-interactive, #0086FF) !important' }}
+                rel="noreferrer">
+                {t('payment.customer.invoice.pay')}
+              </Button>
+            );
+          }
+          return (
+            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+              <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
+            </a>
+          );
+        },
+      },
+    },
+  ];
+
+  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 (
+    <InvoiceTableRoot>
+      <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}
+        mobileTDFlexDirection="row"
+        emptyNodeText={t('payment.customer.invoice.emptyList')}
+      />
+    </InvoiceTableRoot>
+  );
+});
+
+const InvoiceTableRoot = styled(Box)`
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      > div {
+        width: fit-content;
+        flex: inherit;
+        font-size: 14px;
+      }
+    }
+    .invoice-summary {
+      padding-right: 20px;
+    }
+  }
+`;
+
+const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => void }) => {
+  const {
+    customer_id,
+    subscription_id,
+    include_recovered_from,
+    currency_id,
+    include_staking,
+    status,
+    pageSize,
+    target,
+    action,
+    onPay,
+  } = props;
   const size = pageSize || 10;
 
   const subscription = useSubscription('events');
   const { t, locale } = useLocaleContext();
-  const { connect } = usePaymentContext();
-  const [state, setState] = useSetState({ paying: '' });
 
   const { data, loadMore, loadingMore, loading, reloadAsync } = useInfiniteScroll<Result>(
     (d) => {
@@ -106,11 +301,12 @@ export default function CustomerInvoiceList({
         currency_id,
         subscription_id,
         include_staking,
+        include_recovered_from,
         ignore_zero: true,
       });
     },
     {
-      reloadDeps: [customer_id, subscription_id, status, include_staking],
+      reloadDeps: [customer_id, subscription_id, status, include_staking, include_recovered_from],
     }
   );
 
@@ -125,38 +321,6 @@ export default function CustomerInvoiceList({
     }
   }, [subscription]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const onPay = (invoiceId: string) => {
-    if (state.paying) {
-      return;
-    }
-
-    setState({ paying: invoiceId });
-    connect.open({
-      action: 'collect',
-      saveConnect: false,
-      messages: {
-        scan: '',
-        title: t(`payment.customer.invoice.${action || 'pay'}`),
-        success: t(`payment.customer.invoice.${action || 'pay'}Success`),
-        error: t(`payment.customer.invoice.${action || 'pay'}Error`),
-        confirm: '',
-      } as any,
-      extraParams: { invoiceId, action },
-      onSuccess: () => {
-        connect.close();
-        setState({ paying: '' });
-      },
-      onClose: () => {
-        connect.close();
-        setState({ paying: '' });
-      },
-      onError: (err: any) => {
-        setState({ paying: '' });
-        Toast.error(formatError(err));
-      },
-    });
-  };
-
   if (loading || !data) {
     return <CircularProgress />;
   }
@@ -238,7 +402,6 @@ export default function CustomerInvoiceList({
                       <Button
                         component="a"
                         variant="contained"
-                        color="primary"
                         size="small"
                         href={link.url}
                         target={link.external ? '_blank' : target}
@@ -271,6 +434,50 @@ export default function CustomerInvoiceList({
       </Box>
     </Root>
   );
+});
+
+export default function CustomerInvoiceList(props: Props) {
+  const { action, type } = props;
+  const { t } = useLocaleContext();
+  const { connect } = usePaymentContext();
+  const [state, setState] = useSetState({ paying: '' });
+
+  const onPay = (invoiceId: string) => {
+    if (state.paying) {
+      return;
+    }
+
+    setState({ paying: invoiceId });
+    connect.open({
+      action: 'collect',
+      saveConnect: false,
+      messages: {
+        scan: '',
+        title: t(`payment.customer.invoice.${action || 'pay'}`),
+        success: t(`payment.customer.invoice.${action || 'pay'}Success`),
+        error: t(`payment.customer.invoice.${action || 'pay'}Error`),
+        confirm: '',
+      } as any,
+      extraParams: { invoiceId, action },
+      onSuccess: () => {
+        connect.close();
+        setState({ paying: '' });
+      },
+      onClose: () => {
+        connect.close();
+        setState({ paying: '' });
+      },
+      onError: (err: any) => {
+        setState({ paying: '' });
+        Toast.error(formatError(err));
+      },
+    });
+  };
+
+  if (type === 'table') {
+    return <InvoiceTable {...props} onPay={onPay} />;
+  }
+  return <InvoiceList {...props} onPay={onPay} />;
 }
 
 CustomerInvoiceList.defaultProps = {
@@ -278,14 +485,16 @@ CustomerInvoiceList.defaultProps = {
   subscription_id: '',
   currency_id: '',
   include_staking: false,
+  include_recovered_from: false,
   status: 'open,paid,uncollectible',
   pageSize: 10,
   target: '_self',
   action: '',
+  type: 'list',
 };
 
 const Root = styled(Stack)`
-  @media (max-width: 600px) {
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
     .invoice-description {
       display: none !important;
     }

package/src/hooks/mobile.ts

@@ -0,0 +1,13 @@
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+const MOBILE_POINT = 'md';
+
+export function useMobile(mobilePoint: 'md' | 'sm' | 'lg' | 'xl' | 'xs' = MOBILE_POINT) {
+  const theme = useTheme();
+
+  return {
+    isMobile: useMediaQuery(theme.breakpoints.down(mobilePoint)),
+    mobileSize: `${theme.breakpoints.values[mobilePoint]}px`,
+  };
+}

package/src/index.ts

@@ -7,6 +7,7 @@ import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
+import Table from './components/table';
 import SafeGuard from './components/safe-guard';
 import Status from './components/status';
 import Switch from './components/switch-button';
@@ -23,11 +24,15 @@ import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
 import PricingItem from './components/pricing-item';
+import CountrySelect from './components/country-select';
+
+export { PaymentThemeProvider } from './theme';
 
 export * from './libs/util';
 export * from './libs/connect';
 export * from './contexts/payment';
 export * from './hooks/subscription';
+export * from './hooks/mobile';
 
 export { translations, createTranslator } from './locales';
 
@@ -57,4 +62,6 @@ export {
   TxGas,
   SafeGuard,
   PricingItem,
+  CountrySelect,
+  Table,
 };