@blocklet/payment-react 1.24.2 → 1.24.4

package/es/locales/zh.js

@@ -65,14 +65,24 @@ export default flat({
     remainingBalance: "\u5269\u4F59\u4F59\u989D",
     credits: "\u989D\u5EA6",
     ofCredits: "\u989D\u5EA6",
+    creditActivity: {
+      consumption: "\u989D\u5EA6\u6D88\u8017",
+      paidGrant: "\u989D\u5EA6\u5145\u503C",
+      paidAmount: "\u652F\u4ED8 {amount}",
+      promotionalGrant: "\u8D60\u9001",
+      resetGrant: "\u989D\u5EA6\u91CD\u7F6E",
+      repayment: "\u652F\u4ED8\u6B20\u8D39"
+    },
     transferStatus: "\u4EA4\u6613\u72B6\u6001",
     sourceData: "\u6E90\u6570\u636E",
     viewGrant: "\u67E5\u770B\u989D\u5EA6",
-    viewSubscription: "\u67E5\u770B\u8BA2\u9605",
+    viewSubscription: "\u8BA2\u9605\u8BE6\u60C5",
     view: "\u67E5\u770B",
     meterEvent: "\u8BA1\u91CF\u4E8B\u4EF6",
     source: "\u6765\u6E90",
     viewDetail: "\u67E5\u770B\u8BE6\u60C5",
+    viewTransactionDetail: "\u4EA4\u6613\u8BE6\u60C5",
+    viewConsumptionDetail: "\u6D88\u8D39\u8BE6\u60C5",
     customer: "\u5BA2\u6237",
     currency: "\u5E01\u79CD",
     custom: "\u81EA\u5B9A\u4E49",
@@ -119,6 +129,8 @@ export default flat({
     slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D",
     know: "\u6211\u77E5\u9053\u4E86",
     relatedSubscription: "\u8BA2\u9605",
+    subscriptionOrCredit: "\u8BA2\u9605 / \u989D\u5EA6",
+    purchaseItems: "\u8D2D\u4E70\u9879",
     connect: {
       defaultScan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21\u64CD\u4F5C",
       scan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21{action}",
@@ -126,8 +138,10 @@ export default flat({
       cancel: "\u53D6\u6D88"
     },
     paymentMethod: "\u652F\u4ED8\u65B9\u5F0F",
-    viewInvoice: "\u67E5\u770B\u8D26\u5355",
-    submit: "\u63D0\u4EA4"
+    viewInvoice: "\u8D26\u5355\u8BE6\u60C5",
+    submit: "\u63D0\u4EA4",
+    expired: "\u5DF2\u8FC7\u671F",
+    consumed: "\u5DF2\u6D88\u8D39"
   },
   payment: {
     checkout: {
@@ -490,7 +504,9 @@ export default flat({
         payBatch: "\u652F\u4ED8\u6B20\u6B3E",
         paymentConfirmTitle: "\u652F\u4ED8\u786E\u8BA4",
         paymentConfirmDescription: "\u5B8C\u6210\u672C\u6B21\u652F\u4ED8\u540E\uFF0C\u60A8\u4F7F\u7528\u7684\u652F\u4ED8\u65B9\u5F0F\u5C06\u81EA\u52A8\u8BBE\u7F6E\u4E3A\u8BE5\u8BA2\u9605\u7684\u9ED8\u8BA4\u652F\u4ED8\u65B9\u5F0F\u3002\u6B64\u5916\uFF0C\u6211\u4EEC\u8FD8\u5C06\u5BF9\u8BE5\u8BA2\u9605\u7684\u5176\u4ED6\u6B20\u8D39\u8D26\u5355\u8FDB\u884C\u91CD\u8BD5\u6536\u8D39\u3002",
-        continue: "\u7EE7\u7EED"
+        continue: "\u7EE7\u7EED",
+        credit: "\u989D\u5EA6",
+        creditRefresh: "\u6BCF{interval}{unit}\u5237\u65B0"
       },
       payment: {
         empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55",

package/es/payment/product-item.js

@@ -106,7 +106,9 @@ export default function ProductItem({
     if (!isCreditProduct || !pendingAmount) return null;
     const pendingAmountBN = new BN(pendingAmount || "0");
     if (!pendingAmountBN.gt(new BN(0))) return null;
+    if (!creditAmount || creditAmount <= 0) return null;
     const creditAmountBN = fromTokenToUnit(creditAmount, creditCurrency?.decimal || 2);
+    if (!creditAmountBN || creditAmountBN.isZero()) return null;
     return Math.ceil(pendingAmountBN.mul(new BN(100)).div(creditAmountBN).toNumber() / 100);
   }, [isCreditProduct, pendingAmount, creditAmount, creditCurrency?.decimal]);
   const initialQuantity = useMemo(() => {

package/lib/contexts/payment.js

@@ -13,6 +13,7 @@ var _ahooks = require("ahooks");
 var _react = require("react");
 var _axios = _interopRequireDefault(require("axios"));
 var _ufo = require("ufo");
+var _useBus = _interopRequireDefault(require("use-bus"));
 var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 var _cachedRequest = require("../libs/cached-request");
@@ -136,6 +137,9 @@ function PaymentProvider({
   } = (0, _ahooks.useRequest)(getSettings, {
     refreshDeps: [livemode]
   });
+  (0, _useBus.default)(
+  // @ts-ignore
+  ["paymentMethod.created", "paymentMethod.updated", "paymentCurrency.added", "paymentCurrency.updated"], () => run(true), [run]);
   (0, _react.useEffect)(() => {
     const didSpace = session?.user?.didSpace;
     const userDid = session?.user?.did;

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

@@ -50,16 +50,111 @@ const getInvoiceDetailLink = (invoiceId, inDashboard) => {
     connect: false
   };
 };
-const getTransactionDetailLink = (transactionId, inDashboard) => {
-  let path = `/customer/credit-transaction/${transactionId}`;
+const getSubscriptionDetailLink = (subscriptionId, inDashboard) => {
+  let path = `/customer/subscription/${subscriptionId}`;
   if (inDashboard) {
-    path = `/admin/customers/${transactionId}`;
+    path = `/admin/billing/${subscriptionId}`;
   }
   return {
     link: (0, _navigation.createLink)(path),
     connect: false
   };
 };
+const getCreditTransactionDetailLink = transactionId => {
+  const path = `/customer/credit-transaction/${transactionId}`;
+  return {
+    link: (0, _navigation.createLink)(path),
+    connect: false
+  };
+};
+const getMeterEventDetailLink = meterEventId => {
+  const path = `/admin/billing/${meterEventId}`;
+  return {
+    link: (0, _navigation.createLink)(path),
+    connect: false
+  };
+};
+const getSubscriptionId = item => item.metadata?.subscription_id || item.subscription_id || item.invoice?.subscription_id;
+const getInvoiceId = item => item.metadata?.invoice_id || item.invoice?.id;
+const getMeterEventId = item => item.source || item.metadata?.meter_event_id;
+const getCreditActivityFlags = item => {
+  const isGrant = item.activity_type === "grant";
+  const isScheduled = isGrant && item.metadata?.delivery_mode === "schedule";
+  const isDepleted = isGrant && item.status === "depleted";
+  const isExpired = isGrant && (item.status === "expired" || item.status === "voided");
+  const isInactive = isDepleted || isExpired;
+  return {
+    isGrant,
+    isScheduled,
+    isDepleted,
+    isExpired,
+    isInactive
+  };
+};
+const getTransactionDetailLink = (item, inDashboard) => {
+  if (item.activity_type === "grant") {
+    const invoiceId = getInvoiceId(item);
+    if (invoiceId) {
+      return getInvoiceDetailLink(invoiceId, inDashboard);
+    }
+    return getGrantDetailLink(item.id, inDashboard);
+  }
+  if (!inDashboard) {
+    return getCreditTransactionDetailLink(item.id);
+  }
+  const meterEventId = getMeterEventId(item);
+  if (!meterEventId) {
+    return null;
+  }
+  return getMeterEventDetailLink(meterEventId);
+};
+const getTransactionDescription = (item, t) => {
+  const {
+    isGrant,
+    isScheduled,
+    isInactive
+  } = getCreditActivityFlags(item);
+  const isPaid = isGrant && item.category === "paid" && (!isScheduled || item.metadata?.schedule_seq === 1);
+  if (!isGrant) {
+    const secondLine = item.metadata?.is_repayment ? t("common.creditActivity.repayment") : item.description || "";
+    return {
+      isGrant,
+      isInactive,
+      activityType: t("common.creditActivity.consumption"),
+      secondLine
+    };
+  }
+  if (isPaid) {
+    let secondLine = item.description || "";
+    if (item.invoice?.total && item.invoice?.paymentCurrency) {
+      const invoiceCurrency = item.invoice.paymentCurrency;
+      const paidAmount = (0, _util.formatCreditAmount)((0, _util.formatBNStr)(item.invoice.total, invoiceCurrency.decimal || 0), invoiceCurrency.symbol || "");
+      secondLine = t("common.creditActivity.paidAmount", {
+        amount: paidAmount
+      });
+    }
+    return {
+      isGrant,
+      isInactive,
+      activityType: t("common.creditActivity.paidGrant"),
+      secondLine
+    };
+  }
+  if (isScheduled) {
+    return {
+      isGrant,
+      isInactive,
+      activityType: t("common.creditActivity.resetGrant"),
+      secondLine: item.description || ""
+    };
+  }
+  return {
+    isGrant,
+    isInactive,
+    activityType: t("common.creditActivity.promotionalGrant"),
+    secondLine: item.description || ""
+  };
+};
 const TransactionsTable = _react.default.memo(props => {
   const {
     pageSize,
@@ -82,6 +177,7 @@ const TransactionsTable = _react.default.memo(props => {
     session
   } = (0, _payment.usePaymentContext)();
   const isAdmin = ["owner", "admin"].includes(session?.user?.role || "");
+  const isDashboard = isAdmin && mode === "dashboard";
   const navigate = (0, _reactRouterDom.useNavigate)();
   const effectiveCustomerId = customer_id || session?.user?.did;
   const [search, setSearch] = (0, _react.useState)({
@@ -92,7 +188,7 @@ const TransactionsTable = _react.default.memo(props => {
     start: void 0,
     end: void 0
   });
-  const handleDateRangeChange = (0, _react.useCallback)(newValue => {
+  const handleDateRangeChange = newValue => {
     setFilters(newValue);
     setSearch(prev => ({
       ...prev,
@@ -100,7 +196,7 @@ const TransactionsTable = _react.default.memo(props => {
       start: newValue.start || void 0,
       end: newValue.end || void 0
     }));
-  }, []);
+  };
   const {
     loading,
     data = {
@@ -119,9 +215,14 @@ const TransactionsTable = _react.default.memo(props => {
   });
   (0, _react.useEffect)(() => {
     if (showTimeFilter && !search.start && !search.end) {
-      handleDateRangeChange(filters);
+      setSearch(prev => ({
+        ...prev,
+        page: 1,
+        start: filters.start || void 0,
+        end: filters.end || void 0
+      }));
     }
-  }, [showTimeFilter, handleDateRangeChange, search.start, search.end, filters]);
+  }, [showTimeFilter, search.start, search.end, filters.start, filters.end]);
   const prevData = (0, _react.useRef)(data);
   (0, _react.useEffect)(() => {
     if (onTableDataChange) {
@@ -130,127 +231,168 @@ const TransactionsTable = _react.default.memo(props => {
     }
   }, [data]);
   const handleTransactionClick = (e, item) => {
-    if (item.activity_type === "grant") {
-      const {
-        link
-      } = getGrantDetailLink(item.id, isAdmin && mode === "dashboard");
-      (0, _navigation.handleNavigation)(e, link, navigate, {
-        target: link.external ? "_blank" : "_self"
-      });
-    } else {
-      const {
-        link
-      } = getTransactionDetailLink(item.id, isAdmin && mode === "dashboard");
-      (0, _navigation.handleNavigation)(e, link, navigate, {
-        target: link.external ? "_blank" : "_self"
-      });
+    const detail = getTransactionDetailLink(item, isDashboard);
+    if (!detail) {
+      return;
     }
+    (0, _navigation.handleNavigation)(e, detail.link, navigate, {
+      target: detail.link.external ? "_blank" : "_self"
+    });
+  };
+  const openSubscription = (e, subscriptionId) => {
+    e.preventDefault();
+    const link = getSubscriptionDetailLink(subscriptionId, isDashboard);
+    (0, _navigation.handleNavigation)(e, link.link, navigate);
+  };
+  const openInvoice = (e, invoiceId) => {
+    e.preventDefault();
+    const link = getInvoiceDetailLink(invoiceId, isDashboard);
+    (0, _navigation.handleNavigation)(e, link.link, navigate);
   };
+  const renderActionButton = (label, onClick) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+    variant: "text",
+    size: "small",
+    color: "primary",
+    sx: {
+      whiteSpace: "nowrap"
+    },
+    onClick,
+    children: label
+  });
   const columns = [{
-    label: t("common.amount"),
-    name: "credit_amount",
-    align: "right",
+    label: t("common.date"),
+    name: "created_at",
     options: {
+      setCellProps: () => ({
+        style: {
+          width: "25%"
+        }
+      }),
       customBodyRenderLite: (_, index) => {
         const item = data?.list[index];
-        const isGrant = item.activity_type === "grant";
-        const isExpiredGrant = isGrant && item.status === "expired";
-        const amount = isGrant ? item.amount : item.credit_amount;
-        const currency = item.paymentCurrency || item.currency;
-        const unit = !isGrant && item.meter?.unit ? item.meter.unit : currency?.symbol;
-        const displayAmount = (0, _util.formatCreditAmount)((0, _util.formatBNStr)(amount, currency?.decimal || 0), unit);
-        if (!includeGrants) {
-          return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            onClick: e => handleTransactionClick(e, item),
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              children: displayAmount
-            })
-          });
-        }
-        const amountNode = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-          sx: {
-            color: isGrant ? isExpiredGrant ? "text.disabled" : "success.main" : "error.main"
-          },
-          children: [isGrant ? "+" : "-", " ", displayAmount]
-        });
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           onClick: e => handleTransactionClick(e, item),
-          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-            direction: "row",
-            spacing: 1,
-            alignItems: "center",
-            justifyContent: "flex-end",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body2",
             sx: {
-              width: "100%"
+              fontSize: "0.875rem"
             },
-            children: [isExpiredGrant && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
-              label: t("admin.creditGrants.status.expired"),
-              size: "small",
-              variant: "outlined",
-              sx: {
-                mr: 2,
-                height: 18,
-                fontSize: "12px",
-                color: "text.disabled",
-                borderColor: "text.disabled"
-              }
-            }), amountNode]
+            children: (0, _util.formatToDate)(item.created_at, locale, "YYYY-MM-DD HH:mm")
           })
         });
       }
     }
   }, {
-    label: t("common.creditGrant"),
-    name: "credit_grant",
+    label: t("common.description"),
+    name: "description",
     options: {
+      setCellProps: () => ({
+        style: {
+          width: "25%"
+        }
+      }),
       customBodyRenderLite: (_, index) => {
         const item = data?.list[index];
-        const isGrant = item.activity_type === "grant";
-        const isExpiredGrant = isGrant && item.status === "expired";
-        const grantName = isGrant ? item.name : item.creditGrant.name;
-        const grantId = isGrant ? item.id : item.credit_grant_id;
-        const nameNode = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          variant: "body2",
-          sx: {
-            cursor: "pointer",
-            color: isExpiredGrant ? "text.disabled" : void 0
-          },
-          children: grantName || `Grant ${grantId.slice(-6)}`
-        });
-        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-          direction: "row",
-          spacing: 1,
-          onClick: e => {
-            const link = getGrantDetailLink(grantId, isAdmin && mode === "dashboard");
-            (0, _navigation.handleNavigation)(e, link.link, navigate);
-          },
+        const {
+          activityType,
+          secondLine,
+          isInactive,
+          isGrant
+        } = getTransactionDescription(item, t);
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleTransactionClick(e, item),
           sx: {
-            alignItems: "center"
+            cursor: "pointer"
           },
-          children: nameNode
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "column",
+            spacing: 0.25,
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "body2",
+              sx: {
+                color: isInactive ? "text.secondary" : isGrant ? "success.main" : "error.main"
+              },
+              children: activityType
+            }), secondLine && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "caption",
+              sx: {
+                color: "text.secondary"
+              },
+              children: secondLine
+            })]
+          })
         });
       }
     }
   }, {
-    label: t("common.description"),
-    name: "description",
+    label: t("common.amount"),
+    name: "credit_amount",
+    align: "right",
     options: {
+      setCellProps: () => ({
+        style: {
+          width: "20%"
+        }
+      }),
+      customHeadLabelRender: () => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          pr: 5
+        },
+        children: t("common.amount")
+      }),
       customBodyRenderLite: (_, index) => {
         const item = data?.list[index];
-        const isGrant = item.activity_type === "grant";
-        const isExpiredGrant = isGrant && item.status === "expired";
-        const description = isGrant ? item.name || item.description || "Credit Granted" : item.subscription?.description || item.description || `${item.meter_event_name} usage`;
-        const descriptionNode = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          variant: "body2",
-          sx: {
-            fontWeight: 400,
-            color: isExpiredGrant ? "text.disabled" : void 0
-          },
-          children: description
-        });
+        const {
+          isGrant,
+          isDepleted,
+          isExpired,
+          isInactive
+        } = getCreditActivityFlags(item);
+        const amount = isGrant ? item.amount : item.credit_amount;
+        const currency = item.paymentCurrency || item.currency;
+        const unit = !isGrant && item.meter?.unit ? item.meter.unit : currency?.symbol;
+        const displayAmount = (0, _util.formatCreditAmount)((0, _util.formatBNStr)(amount, currency?.decimal || 0), unit);
+        if (!includeGrants) {
+          return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            onClick: e => handleTransactionClick(e, item),
+            sx: {
+              pr: 5
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: displayAmount
+            })
+          });
+        }
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           onClick: e => handleTransactionClick(e, item),
-          children: descriptionNode
+          sx: {
+            pr: 5
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "column",
+            spacing: 0.25,
+            alignItems: "flex-end",
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              sx: {
+                fontWeight: 500,
+                color: isInactive ? "text.secondary" : isGrant ? "success.main" : "error.main",
+                whiteSpace: "nowrap"
+              },
+              children: [isGrant ? "+" : "-", " ", displayAmount]
+            }), isDepleted ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "caption",
+              sx: {
+                color: "text.secondary"
+              },
+              children: t("common.consumed")
+            }) : isExpired ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "caption",
+              sx: {
+                color: "text.secondary"
+              },
+              children: t("common.expired")
+            }) : null]
+          })
         });
       }
     }
@@ -279,59 +421,32 @@ const TransactionsTable = _react.default.memo(props => {
       }
     }
   }] : []), {
-    label: t("common.date"),
-    name: "created_at",
-    options: {
-      customBodyRenderLite: (_, index) => {
-        const item = data?.list[index];
-        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          onClick: e => handleTransactionClick(e, item),
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            variant: "body2",
-            sx: {
-              color: "text.secondary",
-              fontSize: "0.875rem"
-            },
-            children: (0, _util.formatToDate)(item.created_at, locale, "YYYY-MM-DD HH:mm")
-          })
-        });
-      }
-    }
-  }, {
     label: t("common.actions"),
     name: "actions",
     options: {
+      setCellProps: () => ({
+        style: {
+          width: "25%"
+        }
+      }),
       customBodyRenderLite: (_, index) => {
         const item = data?.list[index];
-        const isGrant = item.activity_type === "grant";
-        const invoiceId = isGrant ? item.metadata?.invoice_id : null;
+        const {
+          isGrant,
+          isScheduled
+        } = getCreditActivityFlags(item);
+        const isPaid = isGrant && item.category === "paid" && !isScheduled;
+        const subscriptionId = getSubscriptionId(item);
+        const invoiceId = isGrant ? getInvoiceId(item) : null;
+        const shouldShowSubscription = Boolean(subscriptionId) && (!isGrant || isScheduled || isPaid);
         return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
           sx: {
             display: "flex",
             gap: 1,
-            alignItems: "center"
+            alignItems: "center",
+            flexWrap: "nowrap"
           },
-          children: [isGrant && invoiceId && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-            variant: "text",
-            size: "small",
-            color: "primary",
-            onClick: e => {
-              e.preventDefault();
-              const link = getInvoiceDetailLink(invoiceId, isAdmin && mode === "dashboard");
-              (0, _navigation.handleNavigation)(e, link.link, navigate);
-            },
-            children: t("common.viewInvoice")
-          }), !isGrant && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-            variant: "text",
-            size: "small",
-            color: "primary",
-            onClick: e => {
-              e.preventDefault();
-              const link = getTransactionDetailLink(item.id, isAdmin && mode === "dashboard");
-              (0, _navigation.handleNavigation)(e, link.link, navigate);
-            },
-            children: t("common.viewDetail")
-          })]
+          children: [shouldShowSubscription && subscriptionId ? renderActionButton(t("common.viewSubscription"), e => openSubscription(e, subscriptionId)) : null, isPaid && invoiceId ? renderActionButton(t("common.viewInvoice"), e => openInvoice(e, invoiceId)) : null]
         });
       }
     }