@blocklet/payment-react 1.24.1 → 1.24.3

package/lib/history/invoice/list.js

@@ -83,6 +83,9 @@ const InvoiceTable = _react.default.memo(props => {
     locale
   } = (0, _context.useLocaleContext)();
   const navigate = (0, _reactRouterDom.useNavigate)();
+  const {
+    getCurrency
+  } = (0, _payment.usePaymentContext)();
   const [search, setSearch] = (0, _react.useState)({
     pageSize: pageSize || 10,
     page: 1
@@ -222,52 +225,134 @@ const InvoiceTable = _react.default.memo(props => {
       }
     }
   }, ...(relatedSubscription ? [{
-    label: t("common.relatedSubscription"),
-    name: "subscription",
+    label: t("common.purchaseItems"),
+    name: "purchase_items",
     options: {
       customBodyRenderLite: (_, index) => {
         const invoice = data?.list[index];
-        return invoice.subscription_id ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          onClick: e => handleRelatedSubscriptionClick(e, invoice),
-          sx: {
-            color: "text.link",
+        const lines = invoice.lines || [];
+        const items = lines.map(line => {
+          const name = line.price?.product?.name || line.description;
+          if (!name) {
+            return null;
+          }
+          const quantity = Number(line.quantity || 0);
+          const label = Number.isFinite(quantity) && quantity > 1 ? `${name} x${quantity}` : name;
+          const lineKey = line.id || line.price?.id || line.price?.product?.id || line.description || name;
+          return {
+            key: String(lineKey),
+            label
+          };
+        }).filter(Boolean);
+        if (items.length === 0 && invoice.subscription?.description) {
+          items.push({
+            key: `subscription-${invoice.subscription_id || invoice.id}`,
+            label: invoice.subscription.description
+          });
+        }
+        const isSubscription = Boolean(invoice.subscription_id);
+        const clickableProps = isSubscription ? {
+          onClick: e => handleRelatedSubscriptionClick(e, invoice)
+        } : {};
+        if (items.length === 0) {
+          return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+              color: "text.lighter"
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                fontSize: 14
+              },
+              children: t("common.none")
+            })
+          });
+        }
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          ...clickableProps,
+          sx: isSubscription ? {
             cursor: "pointer"
-          },
-          children: invoice.subscription?.description
-        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          onClick: e => handleLinkClick(e, invoice),
-          sx: {
-            ...linkStyle,
-            color: "text.lighter"
-          },
-          children: t("common.none")
+          } : void 0,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+            spacing: 0.5,
+            children: items.map(item => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                fontSize: 14,
+                color: isSubscription ? "text.link" : "text.primary"
+              },
+              noWrap: true,
+              children: item.label
+            }, `${invoice.id}-item-${item.key}`))
+          })
         });
       }
     }
-  }] : []), {
-    label: t("common.updatedAt"),
-    name: "name",
+  }, {
+    label: t("common.credits"),
+    name: "credits",
     options: {
-      customBodyRenderLite: (val, index) => {
+      customBodyRenderLite: (_, index) => {
         const invoice = data?.list[index];
-        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          onClick: e => handleLinkClick(e, invoice),
-          sx: linkStyle,
-          children: (0, _util.formatToDate)(invoice.created_at, locale, relatedSubscription ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD HH:mm:ss")
+        const lines = invoice.lines || [];
+        const creditItems = [];
+        lines.forEach(line => {
+          const lineKey = String(line.id || line.price?.id || line.price?.product?.id || line.description || invoice.id);
+          const pushCreditItem = (suffix, label) => {
+            creditItems.push({
+              key: `${lineKey}-${suffix}`,
+              label
+            });
+          };
+          const creditConfig = line.price?.metadata?.credit_config;
+          const creditAmount = Number(creditConfig?.credit_amount || 0);
+          if (creditAmount > 0) {
+            const quantity = Number(line.quantity || 0);
+            const totalAmount = creditAmount * (Number.isFinite(quantity) && quantity > 0 ? quantity : 1);
+            const currencySymbol = getCurrency(creditConfig?.currency_id)?.symbol || creditConfig?.currency_id || "Credits";
+            pushCreditItem("amount", `+${(0, _util.formatCreditAmount)(String(totalAmount), currencySymbol)}`);
+            return;
+          }
+          const scheduleConfig = creditConfig?.schedule;
+          const scheduledAmount = Number(scheduleConfig?.amount_per_grant || 0);
+          if (scheduleConfig?.enabled && scheduleConfig?.delivery_mode === "schedule" && scheduledAmount > 0) {
+            const quantity = Number(line.quantity || 0);
+            const totalAmount = scheduledAmount * (Number.isFinite(quantity) && quantity > 0 ? quantity : 1);
+            const currencySymbol = getCurrency(creditConfig?.currency_id)?.symbol || creditConfig?.currency_id || "Credits";
+            pushCreditItem("schedule", `+${(0, _util.formatCreditAmount)(String(totalAmount), currencySymbol)}`);
+            return;
+          }
+          const creditInfo = line.price?.credit;
+          const creditInfoAmount = Number(creditInfo?.amount || 0);
+          if (creditInfoAmount > 0) {
+            const currencySymbol = creditInfo.currency?.symbol || "Credits";
+            pushCreditItem("credit", `+${(0, _util.formatCreditAmount)(String(creditInfoAmount), currencySymbol)}`);
+          }
+        });
+        if (creditItems.length === 0) {
+          return "-";
+        }
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          spacing: 0.5,
+          children: creditItems.map(creditItem => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              fontSize: 14,
+              color: "success.main"
+            },
+            noWrap: true,
+            children: creditItem.label
+          }, `${invoice.id}-credit-${creditItem.key}`))
         });
       }
     }
-  }, {
-    label: t("common.description"),
-    name: "",
+  }] : []), {
+    label: t("common.updatedAt"),
+    name: "name",
     options: {
-      sort: false,
       customBodyRenderLite: (val, index) => {
         const invoice = data?.list[index];
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           onClick: e => handleLinkClick(e, invoice),
           sx: linkStyle,
-          children: (0, _util.getInvoiceDescriptionAndReason)(invoice, locale)?.description || invoice.id
+          children: (0, _util.formatToDate)(invoice.created_at, locale, relatedSubscription ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD HH:mm:ss")
         });
       }
     }

package/lib/locales/en.js

@@ -72,14 +72,24 @@ module.exports = (0, _flat.default)({
     remainingBalance: "Remaining Balance",
     credits: "credits",
     ofCredits: "of credits",
+    creditActivity: {
+      consumption: "Credit Consumed",
+      paidGrant: "Credit Top-up",
+      paidAmount: "Paid {amount}",
+      promotionalGrant: "Bonus",
+      resetGrant: "Credit Reset",
+      repayment: "Repayment"
+    },
     transferStatus: "Transaction Status",
     sourceData: "Source Data",
     viewGrant: "View Grant",
-    viewSubscription: "View Subscription",
+    viewSubscription: "Subscription Detail",
     view: "View",
     meterEvent: "Meter Event",
     source: "Source",
     viewDetail: "View Detail",
+    viewTransactionDetail: "Transaction Detail",
+    viewConsumptionDetail: "Consumption Detail",
     customer: "Customer",
     currency: "Currency",
     custom: "Custom",
@@ -126,6 +136,8 @@ module.exports = (0, _flat.default)({
     slashStakeAmount: "Slash Stake Amount",
     know: "I know",
     relatedSubscription: "Subscription",
+    subscriptionOrCredit: "Subscription / Credit",
+    purchaseItems: "Purchase Items",
     connect: {
       defaultScan: "Use the following methods to complete this action",
       scan: "Use the following methods to complete this {action}",
@@ -133,8 +145,10 @@ module.exports = (0, _flat.default)({
       cancel: "Cancel"
     },
     paymentMethod: "Payment Method",
-    viewInvoice: "View Invoice",
-    submit: "Submit"
+    viewInvoice: "Invoice Detail",
+    submit: "Submit",
+    expired: "Expired",
+    consumed: "Consumed"
   },
   payment: {
     checkout: {
@@ -495,7 +509,9 @@ module.exports = (0, _flat.default)({
         amount: "Amount",
         paymentConfirmTitle: "Payment Confirmation",
         paymentConfirmDescription: "After completing this payment, the payment method you use will be automatically set as the default for this subscription. Additionally, we will retry payment for any other unpaid invoices associated with this subscription.",
-        continue: "Continue"
+        continue: "Continue",
+        credit: "Credit",
+        creditRefresh: "Refresh every {interval} {unit}"
       },
       overduePayment: {
         setupPaymentDescription: "Use your saved card or add a new one to complete payment via Stripe.",

package/lib/locales/zh.js

@@ -72,14 +72,24 @@ module.exports = (0, _flat.default)({
     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",
@@ -126,6 +136,8 @@ module.exports = (0, _flat.default)({
     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}",
@@ -133,8 +145,10 @@ module.exports = (0, _flat.default)({
       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: {
@@ -497,7 +511,9 @@ module.exports = (0, _flat.default)({
         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/lib/payment/product-item.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.24.1",
+  "version": "1.24.3",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -96,7 +96,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.24.1",
+    "@blocklet/payment-types": "1.24.3",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -127,5 +127,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "37207c8206743f75ad682d9e020fa04ab7b93e7b"
+  "gitHead": "6f2a963875ed4aced1db11f1c3a044c7f5deedd6"
 }

package/src/contexts/payment.tsx

@@ -7,6 +7,7 @@ import { createContext, useContext, useEffect, useState } from 'react';
 
 import axios from 'axios';
 import { joinURL } from 'ufo';
+import useBus from 'use-bus';
 import api from '../libs/api';
 import { getPrefix, PAYMENT_KIT_DID } from '../libs/util';
 import { CachedRequest } from '../libs/cached-request';
@@ -178,6 +179,14 @@ function PaymentProvider({
     refreshDeps: [livemode],
   });
 
+  // Listen for settings changes and force refresh
+  useBus(
+    // @ts-ignore
+    ['paymentMethod.created', 'paymentMethod.updated', 'paymentCurrency.added', 'paymentCurrency.updated'],
+    () => run(true),
+    [run]
+  );
+
   useEffect(() => {
     const didSpace = session?.user?.didSpace as
       | {