@blocklet/payment-react 1.14.21 → 1.14.23

package/es/components/table.js

@@ -0,0 +1,186 @@
+import { jsx } from "react/jsx-runtime";
+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.js";
+function EmptyStub() {
+  return null;
+}
+const Table = React.memo(
+  ({ options, columns, toolbar = true, footer = true, hasRowLink = false, emptyNodeText = "", ...rest }) => {
+    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 = {};
+    if (!toolbar) {
+      components.TableToolbar = EmptyStub;
+    }
+    if (!footer) {
+      components.TableFooter = EmptyStub;
+    }
+    return /* @__PURE__ */ jsx(
+      Wrapped,
+      {
+        locale,
+        options: { ...defaultOptions, ...options },
+        columns: columns.map((x) => {
+          x.options = x.options || {};
+          x.options.filter = x.options.filter || false;
+          x.options.sort = x.options.sort || false;
+          return x;
+        }),
+        emptyNode: /* @__PURE__ */ jsx(Empty, { children: emptyNodeText || t("empty.records") }),
+        ...rest,
+        components,
+        hasRowLink,
+        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/es/contexts/payment.d.ts

@@ -18,6 +18,8 @@ export type PaymentContextType = {
     getMethod: (methodId: string) => TPaymentMethodExpanded | undefined;
     setLivemode: (livemode: boolean) => void;
     api: Axios;
+    payable: boolean;
+    setPayable: (status: boolean) => void;
 };
 export type PaymentContextProps = {
     session: import('@arcblock/did-connect/lib/types').SessionContext['session'];

package/es/contexts/payment.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { Alert } from "@mui/material";
 import { useLocalStorageState, useRequest } from "ahooks";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useState } from "react";
 import api from "../libs/api.js";
 import { getPrefix } from "../libs/util.js";
 const PaymentContext = createContext({ api });
@@ -24,6 +24,7 @@ function PaymentProvider({ session, connect, children, baseUrl }) {
   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 /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
   }
@@ -43,7 +44,9 @@ function PaymentProvider({ session, connect, children, baseUrl }) {
         getMethod: (methodId) => getMethod(methodId, data.paymentMethods),
         refresh: run,
         setLivemode,
-        api
+        api,
+        payable,
+        setPayable
       },
       children
     }

package/es/history/invoice/list.d.ts

@@ -9,8 +9,9 @@ type Props = {
     pageSize?: number;
     target?: string;
     action?: string;
+    type?: 'list' | 'table';
 };
-declare function CustomerInvoiceList({ customer_id, subscription_id, currency_id, include_staking, include_recovered_from, status, pageSize, target, action, }: Props): import("react").JSX.Element;
+declare function CustomerInvoiceList(props: Props): JSX.Element;
 declare namespace CustomerInvoiceList {
     var defaultProps: {
         customer_id: string;
@@ -22,6 +23,7 @@ declare namespace CustomerInvoiceList {
         pageSize: number;
         target: string;
         action: string;
+        type: string;
     };
 }
 export default CustomerInvoiceList;

package/es/history/invoice/list.js

@@ -4,8 +4,8 @@ import Toast from "@arcblock/ux/lib/Toast";
 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.js";
 import { usePaymentContext } from "../../contexts/payment.js";
@@ -20,6 +20,7 @@ import {
   getPrefix,
   getTxLink
 } from "../../libs/util.js";
+import Table from "../../components/table.js";
 const groupByDate = (items) => {
   const grouped = {};
   items.forEach((item) => {
@@ -57,22 +58,178 @@ const getInvoiceLink = (invoice, action) => {
     url: getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link
   };
 };
-export default function CustomerInvoiceList({
-  customer_id,
-  subscription_id,
-  currency_id,
-  include_staking,
-  include_recovered_from,
-  status,
-  pageSize,
-  target,
-  action
-}) {
+const InvoiceTable = React.memo((props) => {
+  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: 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: (_, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: invoice?.number });
+        }
+      }
+    },
+    {
+      label: t("common.amount"),
+      name: "total",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsxs(Typography, { children: [
+            formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
+            "\xA0",
+            invoice.paymentCurrency.symbol
+          ] }) });
+        }
+      }
+    },
+    {
+      label: t("common.updatedAt"),
+      name: "name",
+      options: {
+        customBodyRenderLite: (val, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: formatToDate(invoice.created_at, locale, "YYYY-MM-DD HH:mm:ss") });
+        }
+      }
+    },
+    {
+      label: t("common.description"),
+      name: "",
+      options: {
+        sort: false,
+        customBodyRenderLite: (val, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: invoice.description || invoice.id });
+        }
+      }
+    },
+    {
+      label: t("common.status"),
+      name: "created_at",
+      options: {
+        sort: true,
+        customBodyRenderLite: (val, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          if (action) {
+            return link.connect ? /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: () => onPay(invoice.id), sx: { color: "text.link" }, children: t("payment.customer.invoice.pay") }) : /* @__PURE__ */ jsx(
+              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",
+                children: t("payment.customer.invoice.pay")
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) });
+        }
+      }
+    }
+  ];
+  const onTableChange = ({ page, rowsPerPage }) => {
+    if (search.pageSize !== rowsPerPage) {
+      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search.page !== page + 1) {
+      setSearch((x) => ({ ...x, page: page + 1 }));
+    }
+  };
+  return /* @__PURE__ */ jsx(InvoiceTableRoot, { children: /* @__PURE__ */ jsx(
+    Table,
+    {
+      hasRowLink: true,
+      durable: `__${listKey}__`,
+      durableKeys: ["page", "rowsPerPage", "searchText"],
+      data: data.list,
+      columns,
+      options: {
+        count: data.count,
+        page: search.page - 1,
+        rowsPerPage: search.pageSize
+      },
+      loading,
+      onChange: onTableChange,
+      toolbar: false,
+      sx: { mt: 2 },
+      showMobile: false,
+      mobileTDFlexDirection: "row",
+      emptyNodeText: t("payment.customer.invoice.emptyList")
+    }
+  ) });
+});
+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) => {
+  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(
     (d) => {
       const page = d ? Math.ceil(d.list.length / size) + 1 : 1;
@@ -101,36 +258,6 @@ export default function CustomerInvoiceList({
       });
     }
   }, [subscription]);
-  const onPay = (invoiceId) => {
-    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: ""
-      },
-      extraParams: { invoiceId, action },
-      onSuccess: () => {
-        connect.close();
-        setState({ paying: "" });
-      },
-      onClose: () => {
-        connect.close();
-        setState({ paying: "" });
-      },
-      onError: (err) => {
-        setState({ paying: "" });
-        Toast.error(formatError(err));
-      }
-    });
-  };
   if (loading || !data) {
     return /* @__PURE__ */ jsx(CircularProgress, {});
   }
@@ -176,7 +303,6 @@ export default function CustomerInvoiceList({
                 {
                   component: "a",
                   variant: "contained",
-                  color: "primary",
                   size: "small",
                   href: link.url,
                   target: link.external ? "_blank" : target,
@@ -195,6 +321,46 @@ export default function CustomerInvoiceList({
       !hasMore && data.count > size && /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("common.noMore", { resource: t("payment.customer.invoices") }) })
     ] })
   ] });
+});
+export default function CustomerInvoiceList(props) {
+  const { action, type } = props;
+  const { t } = useLocaleContext();
+  const { connect } = usePaymentContext();
+  const [state, setState] = useSetState({ paying: "" });
+  const onPay = (invoiceId) => {
+    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: ""
+      },
+      extraParams: { invoiceId, action },
+      onSuccess: () => {
+        connect.close();
+        setState({ paying: "" });
+      },
+      onClose: () => {
+        connect.close();
+        setState({ paying: "" });
+      },
+      onError: (err) => {
+        setState({ paying: "" });
+        Toast.error(formatError(err));
+      }
+    });
+  };
+  if (type === "table") {
+    return /* @__PURE__ */ jsx(InvoiceTable, { ...props, onPay });
+  }
+  return /* @__PURE__ */ jsx(InvoiceList, { ...props, onPay });
 }
 CustomerInvoiceList.defaultProps = {
   customer_id: "",
@@ -205,10 +371,11 @@ CustomerInvoiceList.defaultProps = {
   status: "open,paid,uncollectible",
   pageSize: 10,
   target: "_self",
-  action: ""
+  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/es/hooks/mobile.d.ts

@@ -0,0 +1,4 @@
+export declare function useMobile(mobilePoint?: 'md' | 'sm' | 'lg' | 'xl' | 'xs'): {
+    isMobile: boolean;
+    mobileSize: string;
+};

package/es/hooks/mobile.js

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

package/es/index.d.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,9 +24,12 @@ 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';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, };
+export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, };

package/es/index.js

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