@blocklet/payment-react 1.18.56 → 1.19.1

package/es/history/credit/transactions-list.js

@@ -0,0 +1,255 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Box, Typography, Stack, Link, Grid } from "@mui/material";
+import { useRequest } from "ahooks";
+import { useNavigate } from "react-router-dom";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { joinURL } from "ufo";
+import { styled } from "@mui/system";
+import DateRangePicker from "../../components/date-range-picker.js";
+import { formatBNStr, formatToDate, getPrefix } from "../../libs/util.js";
+import { usePaymentContext } from "../../contexts/payment.js";
+import api from "../../libs/api.js";
+import Table from "../../components/table.js";
+import { createLink, handleNavigation } from "../../libs/navigation.js";
+const fetchData = (params = {}) => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    if (params[key]) {
+      search.set(key, String(params[key]));
+    }
+  });
+  return api.get(`/api/credit-transactions?${search.toString()}`).then((res) => res.data);
+};
+const getGrantDetailLink = (grantId, inDashboard) => {
+  let path = `/customer/credit-grant/${grantId}`;
+  if (inDashboard) {
+    path = `/admin/customers/${grantId}`;
+  }
+  return {
+    link: createLink(path),
+    connect: false
+  };
+};
+const TransactionsTable = React.memo((props) => {
+  const {
+    pageSize,
+    customer_id,
+    subscription_id,
+    credit_grant_id,
+    onTableDataChange,
+    showAdminColumns = false,
+    showTimeFilter = false,
+    source,
+    mode = "portal"
+  } = props;
+  const listKey = "credit-transactions-table";
+  const { t, locale } = useLocaleContext();
+  const { session } = usePaymentContext();
+  const isAdmin = ["owner", "admin"].includes(session?.user?.role || "");
+  const navigate = useNavigate();
+  const effectiveCustomerId = customer_id || session?.user?.did;
+  const [search, setSearch] = useState({
+    pageSize: pageSize || 10,
+    page: 1
+  });
+  const [filters, setFilters] = useState({
+    start: void 0,
+    end: void 0
+  });
+  const handleDateRangeChange = useCallback((newValue) => {
+    setFilters(newValue);
+    setSearch((prev) => ({
+      ...prev,
+      page: 1,
+      start: newValue.start || void 0,
+      end: newValue.end || void 0
+    }));
+  }, []);
+  const { loading, data = { list: [], count: 0 } } = useRequest(
+    () => fetchData({
+      ...search,
+      customer_id: effectiveCustomerId,
+      subscription_id,
+      credit_grant_id,
+      source
+    }),
+    {
+      refreshDeps: [search, effectiveCustomerId, subscription_id, credit_grant_id, source]
+    }
+  );
+  useEffect(() => {
+    if (showTimeFilter && !search.start && !search.end) {
+      handleDateRangeChange(filters);
+    }
+  }, [showTimeFilter, handleDateRangeChange, search.start, search.end, filters]);
+  const prevData = useRef(data);
+  useEffect(() => {
+    if (onTableDataChange) {
+      onTableDataChange(data, prevData.current);
+      prevData.current = data;
+    }
+  }, [data]);
+  const columns = [
+    {
+      label: t("common.creditAmount"),
+      name: "credit_amount",
+      align: "right",
+      width: 120,
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const transaction = data?.list[index];
+          const unit = transaction.meter?.unit || transaction.paymentCurrency.symbol;
+          return /* @__PURE__ */ jsxs(Typography, { children: [
+            formatBNStr(transaction.credit_amount, transaction.paymentCurrency.decimal),
+            " ",
+            unit
+          ] });
+        }
+      }
+    },
+    !credit_grant_id && {
+      label: t("common.creditGrant"),
+      name: "credit_grant",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const transaction = data?.list[index];
+          return /* @__PURE__ */ jsx(
+            Stack,
+            {
+              direction: "row",
+              spacing: 1,
+              onClick: (e) => {
+                const link = getGrantDetailLink(transaction.credit_grant_id, isAdmin && mode === "dashboard");
+                handleNavigation(e, link.link, navigate);
+              },
+              sx: {
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.link", cursor: "pointer" }, children: transaction.creditGrant.name || `Grant ${transaction.credit_grant_id.slice(-6)}` })
+            }
+          );
+        }
+      }
+    },
+    {
+      label: t("common.description"),
+      name: "subscription",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const transaction = data?.list[index];
+          return /* @__PURE__ */ jsx(Typography, { variant: "body2", children: transaction.subscription?.description || transaction.description });
+        }
+      }
+    },
+    ...showAdminColumns && isAdmin ? [
+      {
+        label: t("common.meterEvent"),
+        name: "meter_event",
+        options: {
+          customBodyRenderLite: (_, index) => {
+            const transaction = data?.list[index];
+            if (!transaction.meter) {
+              return /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "-" });
+            }
+            return /* @__PURE__ */ jsx(Link, { href: joinURL(getPrefix(), `/admin/billing/${transaction.meter.id}`), children: /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.link" }, children: transaction.meter.event_name }) });
+          }
+        }
+      }
+    ] : [],
+    {
+      label: t("admin.creditTransactions.transactionDate"),
+      name: "created_at",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const transaction = data?.list[index];
+          return /* @__PURE__ */ jsx(Typography, { variant: "body2", children: formatToDate(transaction.created_at, locale, "YYYY-MM-DD HH:mm:ss") });
+        }
+      }
+    }
+  ].filter(Boolean);
+  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__ */ jsxs(TableRoot, { children: [
+    showTimeFilter && /* @__PURE__ */ jsx(Box, { sx: { my: 2 }, children: /* @__PURE__ */ jsx(Box, { sx: { mt: 2 }, children: /* @__PURE__ */ jsx(
+      Grid,
+      {
+        container: true,
+        spacing: 2,
+        sx: {
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ jsx(
+          Grid,
+          {
+            size: {
+              xs: 12,
+              sm: 6,
+              md: 4
+            },
+            children: /* @__PURE__ */ jsx(DateRangePicker, { value: filters, onChange: handleDateRangeChange, size: "small", fullWidth: true })
+          }
+        )
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      Table,
+      {
+        hasRowLink: true,
+        durable: `__${listKey}__`,
+        durableKeys: ["page", "rowsPerPage"],
+        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("admin.creditTransactions.noTransactions")
+      }
+    )
+  ] });
+});
+const TableRoot = 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;
+    }
+  }
+`;
+export default function CreditTransactionsList(rawProps) {
+  const props = Object.assign(
+    {
+      customer_id: "",
+      subscription_id: "",
+      credit_grant_id: "",
+      source: "",
+      pageSize: 10,
+      onTableDataChange: () => {
+      },
+      showAdminColumns: false,
+      showTimeFilter: false,
+      mode: "portal"
+    },
+    rawProps
+  );
+  return /* @__PURE__ */ jsx(TransactionsTable, { ...props });
+}

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

@@ -13,21 +13,5 @@ type Props = {
     onTableDataChange?: Function;
     relatedSubscription?: boolean;
 };
-declare function CustomerInvoiceList(props: Props): JSX.Element;
-declare namespace CustomerInvoiceList {
-    var defaultProps: {
-        customer_id: string;
-        subscription_id: string;
-        currency_id: string;
-        include_staking: boolean;
-        include_recovered_from: boolean;
-        status: string;
-        pageSize: number;
-        target: string;
-        action: string;
-        type: string;
-        onTableDataChange: () => void;
-        relatedSubscription: boolean;
-    };
-}
-export default CustomerInvoiceList;
+export default function CustomerInvoiceList(rawProps: Props): JSX.Element;
+export {};

package/es/history/invoice/list.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
 import { OpenInNewOutlined } from "@mui/icons-material";
-import { Box, Button, CircularProgress, Stack, Typography, Tooltip } from "@mui/material";
+import { Box, Button, CircularProgress, Stack, Typography, Tooltip, Avatar } from "@mui/material";
 import { styled } from "@mui/system";
 import { useInfiniteScroll, useRequest, useSetState } from "ahooks";
 import React, { useEffect, useRef, useState } from "react";
@@ -160,6 +160,26 @@ const InvoiceTable = React.memo((props) => {
         }
       }
     },
+    {
+      label: t("common.paymentMethod"),
+      name: "paymentMethod",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const invoice = data?.list[index];
+          return /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              sx: { display: "flex", alignItems: "center", whiteSpace: "nowrap" },
+              onClick: (e) => handleLinkClick(e, invoice),
+              children: [
+                /* @__PURE__ */ jsx(Avatar, { src: invoice.paymentMethod.logo, sx: { width: 18, height: 18, mr: 1 } }),
+                invoice.paymentMethod.name
+              ]
+            }
+          );
+        }
+      }
+    },
     {
       label: t("common.type"),
       name: "billing_reason",
@@ -367,9 +387,27 @@ const InvoiceList = React.memo((props) => {
   }
   if (data && data.list.length === 0) {
     if (data.subscription && ["active", "trialing"].includes(data.subscription.status)) {
-      return /* @__PURE__ */ jsx(Typography, { color: "text.secondary", sx: { my: 0.5 }, children: t("payment.customer.invoice.next", { date: formatToDatetime(data.subscription.current_period_end * 1e3) }) });
+      return /* @__PURE__ */ jsx(
+        Typography,
+        {
+          sx: {
+            color: "text.secondary",
+            my: 0.5
+          },
+          children: t("payment.customer.invoice.next", { date: formatToDatetime(data.subscription.current_period_end * 1e3) })
+        }
+      );
     }
-    return /* @__PURE__ */ jsx(Typography, { color: "text.secondary", sx: { my: 0.5 }, children: t("payment.customer.invoice.empty") });
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        sx: {
+          color: "text.secondary",
+          my: 0.5
+        },
+        children: t("payment.customer.invoice.empty")
+      }
+    );
   }
   const hasMore = data && data.list.length < data.count;
   const grouped = groupByDate(data.list);
@@ -386,75 +424,124 @@ const InvoiceList = React.memo((props) => {
           Stack,
           {
             direction: "row",
-            sx: { my: 1 },
-            gap: {
-              xs: 0.5,
-              sm: 1.5,
-              md: 3
+            sx: {
+              gap: {
+                xs: 0.5,
+                sm: 1.5,
+                md: 3
+              },
+              alignItems: "center",
+              flexWrap: "nowrap",
+              my: 1
             },
-            alignItems: "center",
-            flexWrap: "nowrap",
             children: [
-              /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsx(
-                "a",
+              /* @__PURE__ */ jsx(
+                Box,
                 {
-                  href: link.url,
-                  target: link.external ? "_blank" : target,
-                  rel: "noreferrer",
-                  onClick: (e) => handleLinkClick(e, link),
-                  children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-                    /* @__PURE__ */ jsx(Typography, { component: "span", children: invoice.number }),
-                    link.external && /* @__PURE__ */ jsx(
-                      OpenInNewOutlined,
-                      {
-                        fontSize: "small",
-                        sx: {
-                          color: "text.secondary",
-                          display: { xs: "none", md: "inline-flex" }
+                  sx: {
+                    flex: 2
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: link.url,
+                      target: link.external ? "_blank" : target,
+                      rel: "noreferrer",
+                      onClick: (e) => handleLinkClick(e, link),
+                      children: /* @__PURE__ */ jsxs(
+                        Stack,
+                        {
+                          direction: "row",
+                          spacing: 0.5,
+                          sx: {
+                            alignItems: "center"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(Typography, { component: "span", children: invoice.number }),
+                            link.external && /* @__PURE__ */ jsx(
+                              OpenInNewOutlined,
+                              {
+                                fontSize: "small",
+                                sx: {
+                                  color: "text.secondary",
+                                  display: { xs: "none", md: "inline-flex" }
+                                }
+                              }
+                            )
+                          ]
                         }
-                      }
-                    )
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    flex: 1,
+                    textAlign: "right"
+                  },
+                  children: /* @__PURE__ */ jsxs(Typography, { sx: isVoid ? { textDecoration: "line-through" } : {}, children: [
+                    formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
+                    "\xA0",
+                    invoice.paymentCurrency.symbol
                   ] })
                 }
-              ) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsxs(Typography, { sx: isVoid ? { textDecoration: "line-through" } : {}, children: [
-                formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
-                "\xA0",
-                invoice.paymentCurrency.symbol
-              ] }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, locale, "HH:mm:ss") }) }),
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    flex: 1,
+                    textAlign: "right"
+                  },
+                  children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, locale, "HH:mm:ss") })
+                }
+              ),
               !action && /* @__PURE__ */ jsx(
                 Box,
                 {
-                  flex: 2,
                   className: "invoice-description",
-                  textAlign: "right",
-                  sx: { display: { xs: "none", lg: "inline-flex" } },
+                  sx: {
+                    flex: 2,
+                    textAlign: "right",
+                    display: { xs: "none", lg: "inline-flex" }
+                  },
                   children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id })
                 }
               ),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? connect ? /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "contained",
-                  color: "primary",
-                  size: "small",
-                  onClick: () => onPay(invoice.id),
-                  sx: { whiteSpace: "nowrap" },
-                  children: t("payment.customer.invoice.pay")
-                }
-              ) : /* @__PURE__ */ jsx(
-                Button,
+              /* @__PURE__ */ jsx(
+                Box,
                 {
-                  component: "a",
-                  variant: "contained",
-                  size: "small",
-                  onClick: (e) => handleLinkClick(e, link),
-                  sx: { whiteSpace: "nowrap" },
-                  rel: "noreferrer",
-                  children: t("payment.customer.invoice.pay")
+                  sx: {
+                    flex: 1,
+                    textAlign: "right"
+                  },
+                  children: action ? connect ? /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "contained",
+                      color: "primary",
+                      size: "small",
+                      onClick: () => onPay(invoice.id),
+                      sx: { whiteSpace: "nowrap" },
+                      children: t("payment.customer.invoice.pay")
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      component: "a",
+                      variant: "contained",
+                      size: "small",
+                      onClick: (e) => handleLinkClick(e, link),
+                      sx: { whiteSpace: "nowrap" },
+                      rel: "noreferrer",
+                      children: t("payment.customer.invoice.pay")
+                    }
+                  ) : isVoid ? /* @__PURE__ */ jsx(Tooltip, { title: t("payment.customer.invoice.noPaymentRequired"), arrow: true, placement: "top", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }) }) : /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) })
                 }
-              ) : isVoid ? /* @__PURE__ */ jsx(Tooltip, { title: t("payment.customer.invoice.noPaymentRequired"), arrow: true, placement: "top", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }) }) : /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) })
+              )
             ]
           },
           invoice.id
@@ -463,11 +550,37 @@ const InvoiceList = React.memo((props) => {
     ] }, date)),
     /* @__PURE__ */ jsxs(Box, { children: [
       hasMore && /* @__PURE__ */ jsx(Button, { variant: "text", type: "button", color: "inherit", onClick: loadMore, disabled: loadingMore, children: loadingMore ? t("common.loadingMore", { resource: t("payment.customer.invoices") }) : t("common.loadMore", { resource: t("payment.customer.invoices") }) }),
-      !hasMore && data.count > size && /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("common.noMore", { resource: t("payment.customer.invoices") }) })
+      !hasMore && data.count > size && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          sx: {
+            color: "text.secondary"
+          },
+          children: t("common.noMore", { resource: t("payment.customer.invoices") })
+        }
+      )
     ] })
   ] });
 });
-export default function CustomerInvoiceList(props) {
+export default function CustomerInvoiceList(rawProps) {
+  const props = Object.assign(
+    {
+      customer_id: "",
+      subscription_id: "",
+      currency_id: "",
+      include_staking: false,
+      include_recovered_from: false,
+      status: "open,paid,uncollectible",
+      pageSize: 10,
+      target: "_self",
+      action: "",
+      type: "list",
+      onTableDataChange: () => {
+      },
+      relatedSubscription: false
+    },
+    rawProps
+  );
   const { action, type } = props;
   const { t, locale } = useLocaleContext();
   const { connect } = usePaymentContext();
@@ -509,21 +622,6 @@ export default function CustomerInvoiceList(props) {
   }
   return /* @__PURE__ */ jsx(InvoiceList, { ...props, onPay });
 }
-CustomerInvoiceList.defaultProps = {
-  customer_id: "",
-  subscription_id: "",
-  currency_id: "",
-  include_staking: false,
-  include_recovered_from: false,
-  status: "open,paid,uncollectible",
-  pageSize: 10,
-  target: "_self",
-  action: "",
-  type: "list",
-  onTableDataChange: () => {
-  },
-  relatedSubscription: false
-};
 const Root = styled(Stack)`
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
     svg.MuiSvgIcon-root {