@blocklet/payment-react 1.14.21 → 1.14.23

package/src/components/table.tsx

@@ -0,0 +1,200 @@
+/* eslint-disable @typescript-eslint/indent */
+import React from 'react';
+import Empty from '@arcblock/ux/lib/Empty';
+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;
+}
+
+const Table = React.memo(
+  ({ options, columns, toolbar = true, footer = true, hasRowLink = false, emptyNodeText = '', ...rest }: any) => {
+    const { locale, t } = useLocaleContext();
+    const { isMobile } = useMobile();
+
+    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;
+        })}
+        emptyNode={<Empty>{emptyNodeText || t('empty.records')}</Empty>}
+        {...rest}
+        components={components}
+        hasRowLink={hasRowLink}
+        isMobile={isMobile}
+      />
+    );
+  }
+);
+
+const Wrapped = styled(Datatable)`
+  ${(props) =>
+    props.hasRowLink
+      ? `.MuiTableCell-root {
+    font-size: 1rem !important;
+  }`
+      : ''}
+  .MuiPaper-root {
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  table.MuiTable-root {
+    outline: 1px solid var(--stroke-border-base, #eff1f5);
+    border-radius: var(--radius-m, 8px);
+    overflow: hidden;
+  }
+  [class*='MUIDataTable-responsiveBase'] {
+    outline: 1px solid var(--stroke-border-base, #eff1f5);
+    border-radius: var(--radius-m, 8px);
+  }
+
+  th.MuiTableCell-head {
+    padding: 8px 16px 8px 16px;
+    text-transform: inherit;
+    background: var(--backgrounds-bg-subtle, #f9fafb);
+    border-bottom: none;
+    &:first-of-type {
+      border-top-left-radius: 8px;
+      padding-left: 20px;
+    }
+    &:last-of-type {
+      border-top-right-radius: 8px;
+    }
+  }
+
+  tr.MuiTableRow-root:not(.MuiTableRow-footer):hover {
+    background: #f5f5f5;
+  }
+  tr.MuiTableRow-root:last-of-type td:first-of-type {
+    border-bottom-left-radius: 8px;
+  }
+
+  tr.MuiTableRow-root:last-of-type td:last-of-type {
+    border-bottom-right-radius: 8px;
+  }
+
+  tr.MuiTableRow-root:nth-of-type(even) {
+    background: var(--backgrounds-bg-subtle, #f9fafb);
+  }
+  td.MuiTableCell-root {
+    border-bottom: none;
+    &:first-of-type {
+      padding-left: 20px;
+    }
+    &.MuiTableCell-footer {
+      border: none;
+    }
+  }
+
+  .datatable-footer {
+    .MuiTableRow-root.MuiTableRow-footer {
+      border: none;
+    }
+    table.MuiTable-root {
+      outline: none;
+      overflow: hidden;
+    }
+    .MuiTablePagination-input {
+      background: none;
+    }
+    div.MuiSelect-select {
+      padding: 0 24px 0 0;
+    }
+  }
+
+  th a,
+  td a {
+    text-decoration: none;
+    display: block;
+    color: inherit;
+    &:first-of-type {
+      padding-left: 0;
+    }
+  }
+
+  > div {
+    overflow: auto;
+  }
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    th a,
+    td a {
+      text-decoration: none;
+      display: block;
+      color: inherit;
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-right: 0;
+    }
+    tr.MuiTableRow-root {
+      border: none;
+      padding: 20px;
+      display: block;
+    }
+    td.MuiTableCell-root:first-of-type {
+      padding-left: 0;
+      margin-top: 0;
+    }
+    td.MuiTableCell-root {
+      margin: 0;
+      margin-top: 8px;
+      align-items: center;
+      padding: 0;
+      flex-wrap: wrap;
+      flex-direction: ${({ mobileTDFlexDirection = 'column' }) => mobileTDFlexDirection || 'row'};
+      align-items: ${({ mobileTDFlexDirection = 'column' }) =>
+        mobileTDFlexDirection === 'column' ? 'flex-start' : 'center'};
+      justify-content: ${({ mobileTDFlexDirection = 'column' }) =>
+        mobileTDFlexDirection === 'column' ? 'flex-start' : 'space-between'};
+    }
+    td.MuiTableCell-root > div {
+      margin-bottom: 4px;
+    }
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      display: flex;
+      flex-direction: ${({ mobileTDFlexDirection = 'column' }) => mobileTDFlexDirection || 'row'};
+      align-items: flex-start;
+      justify-content: ${({ mobileTDFlexDirection = 'column' }) =>
+        mobileTDFlexDirection === 'row' ? 'space-between' : 'flex-start'};
+      flex-wrap: ${({ mobileTDFlexDirection = 'column' }) => (mobileTDFlexDirection === 'row' ? 'nowrap' : 'wrap')};
+      word-break: break-all;
+      &.datatables-noprint {
+        justify-content: center;
+      }
+    }
+    [class*='MUIDataTable-responsiveBase'] tr:not([class*='responsiveSimple']) td.MuiTableCell-body > div {
+      width: inherit;
+    }
+  }
+`;
+
+export default Table;

package/src/contexts/payment.tsx

@@ -2,7 +2,7 @@ import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment
 import { Alert } from '@mui/material';
 import { useLocalStorageState, useRequest } from 'ahooks';
 import type { Axios } from 'axios';
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useState } from 'react';
 
 import api from '../libs/api';
 import { getPrefix } from '../libs/util';
@@ -23,6 +23,8 @@ export type PaymentContextType = {
   getMethod: (methodId: string) => TPaymentMethodExpanded | undefined;
   setLivemode: (livemode: boolean) => void;
   api: Axios;
+  payable: boolean;
+  setPayable: (status: boolean) => void;
 };
 
 export type PaymentContextProps = {
@@ -60,6 +62,7 @@ function PaymentProvider({ session, connect, children, baseUrl }: PaymentContext
   const { data, error, run, loading } = useRequest(getSettings);
   const [livemode, setLivemode] = useLocalStorageState('livemode', { defaultValue: true });
   const prefix = getPrefix();
+  const [payable, setPayable] = useState(true);
 
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;
@@ -82,6 +85,8 @@ function PaymentProvider({ session, connect, children, baseUrl }: PaymentContext
         refresh: run,
         setLivemode,
         api,
+        payable,
+        setPayable,
       }}>
       {children}
     </Provider>

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 };
 
@@ -58,6 +63,7 @@ type Props = {
   pageSize?: number;
   target?: string;
   action?: string;
+  type?: 'list' | 'table';
 };
 
 const getInvoiceLink = (invoice: TInvoiceExpanded, action?: string) => {
@@ -79,23 +85,210 @@ const getInvoiceLink = (invoice: TInvoiceExpanded, action?: string) => {
   };
 };
 
-export default function CustomerInvoiceList({
-  customer_id,
-  subscription_id,
-  currency_id,
-  include_staking,
-  include_recovered_from,
-  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) => {
@@ -128,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 />;
   }
@@ -241,7 +402,6 @@ export default function CustomerInvoiceList({
                       <Button
                         component="a"
                         variant="contained"
-                        color="primary"
                         size="small"
                         href={link.url}
                         target={link.external ? '_blank' : target}
@@ -274,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 = {
@@ -286,10 +490,11 @@ CustomerInvoiceList.defaultProps = {
   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,
 };