@blocklet/payment-react 1.16.17 → 1.16.19

package/es/contexts/payment.js

@@ -38,7 +38,15 @@ function PaymentProvider({ session, connect, children, baseUrl }) {
     window.__PAYMENT_KIT_BASE_URL = baseUrl;
   }
   const [livemode, setLivemode] = useLocalStorageState("livemode", { defaultValue: true });
-  const { data, error, run, loading } = useRequest(getSettings, {
+  const {
+    data = {
+      paymentMethods: [],
+      baseCurrency: {}
+    },
+    error,
+    run,
+    loading
+  } = useRequest(getSettings, {
     refreshDeps: [livemode]
   });
   const prefix = getPrefix();

package/es/history/invoice/list.js

@@ -5,8 +5,9 @@ import { OpenInNewOutlined } from "@mui/icons-material";
 import { Box, Button, CircularProgress, Hidden, Stack, Typography } from "@mui/material";
 import { styled } from "@mui/system";
 import { useInfiniteScroll, useRequest, useSetState } from "ahooks";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { joinURL } from "ufo";
+import debounce from "lodash/debounce";
 import Status from "../../components/status.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import { useSubscription } from "../../hooks/subscription.js";
@@ -100,18 +101,32 @@ const InvoiceTable = React.memo((props) => {
       refreshDeps: [search, status, customer_id, currency_id, subscription_id, include_staking, include_recovered_from]
     }
   );
+  const prevData = useRef(data);
   useEffect(() => {
     if (onTableDataChange) {
-      onTableDataChange(data);
+      onTableDataChange(data, prevData.current);
+      prevData.current = data;
     }
   }, [data]);
   const subscription = useSubscription("events");
+  const debouncedHandleInvoicePaid = debounce(
+    async () => {
+      Toast.close();
+      Toast.success(t("payment.customer.invoice.paySuccess"));
+      await refresh();
+    },
+    1e3,
+    {
+      leading: false,
+      trailing: true,
+      maxWait: 5e3
+    }
+  );
   useEffect(() => {
     if (subscription && customer_id) {
       subscription.on("invoice.paid", ({ response }) => {
         if (response.customer_id === customer_id) {
-          Toast.success(t("payment.customer.invoice.paySuccess"));
-          refresh();
+          debouncedHandleInvoicePaid();
         }
       });
     }
@@ -186,7 +201,8 @@ const InvoiceTable = React.memo((props) => {
         customBodyRenderLite: (val, index) => {
           const invoice = data?.list[index];
           const link = getInvoiceLink(invoice, action);
-          if (action) {
+          const hidePay = invoice.billing_reason === "overdraft-protection";
+          if (action && !hidePay) {
             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,
               {
@@ -286,17 +302,31 @@ const InvoiceList = React.memo((props) => {
       reloadDeps: [customer_id, subscription_id, status, include_staking, include_recovered_from]
     }
   );
+  const prevData = useRef(data);
   useEffect(() => {
     if (onTableDataChange) {
-      onTableDataChange(data);
+      onTableDataChange(data, prevData.current);
+      prevData.current = data;
     }
   }, [data]);
+  const debouncedHandleInvoicePaid = debounce(
+    async () => {
+      Toast.close();
+      Toast.success(t("payment.customer.invoice.paySuccess"));
+      await reloadAsync();
+    },
+    1e3,
+    {
+      leading: false,
+      trailing: true,
+      maxWait: 5e3
+    }
+  );
   useEffect(() => {
     if (subscription && customer_id) {
-      subscription.on("invoice.paid", async ({ response }) => {
+      subscription.on("invoice.paid", ({ response }) => {
         if (response.customer_id === customer_id) {
-          Toast.success(t("payment.customer.invoice.paySuccess"));
-          await reloadAsync();
+          debouncedHandleInvoicePaid();
         }
       });
     }

package/es/libs/util.js

@@ -105,6 +105,9 @@ export function formatNumber(n, precision = 6, trim = true) {
   return right ? [left, trimEnd(right, "0")].filter(Boolean).join(".") : left;
 }
 export const formatPrice = (price, currency, unit_label, quantity = 1, bn = true, locale = "en") => {
+  if (!currency) {
+    return "";
+  }
   if (price.custom_unit_amount) {
     return `Custom (${currency.symbol})`;
   }
@@ -123,6 +126,9 @@ export const formatPrice = (price, currency, unit_label, quantity = 1, bn = true
   return `${amount} ${currency.symbol}`;
 };
 export const formatPriceAmount = (price, currency, unit_label, quantity = 1, bn = true) => {
+  if (!currency) {
+    return "";
+  }
   const unit = getPriceUintAmountByCurrency(price, currency);
   const amount = bn ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString() : +unit * quantity;
   if (price?.type === "recurring" && price.recurring) {
@@ -174,20 +180,20 @@ export function formatRecurring(recurring, translate = true, separator = "per",
 }
 export function getPriceUintAmountByCurrency(price, currency) {
   const options = getPriceCurrencyOptions(price);
-  const option = options.find((x) => x.currency_id === currency.id);
+  const option = options.find((x) => x.currency_id === currency?.id);
   if (option) {
     if (option.custom_unit_amount) {
       return option.custom_unit_amount.preset || option.custom_unit_amount.presets[0];
     }
     return option.unit_amount;
   }
-  if (price.currency_id === currency.id) {
+  if (price.currency_id === currency?.id) {
     if (price.custom_unit_amount) {
       return price.custom_unit_amount.preset || price.custom_unit_amount.presets[0];
     }
     return price.unit_amount;
   }
-  console.warn(`Currency ${currency.id} not configured for price`, price);
+  console.warn(`Currency ${currency?.id} not configured for price`, price);
   return "0";
 }
 export function getPriceCurrencyOptions(price) {
@@ -204,6 +210,9 @@ export function getPriceCurrencyOptions(price) {
   ];
 }
 export function formatLineItemPricing(item, currency, { trialEnd, trialInDays }, locale = "en") {
+  if (!currency) {
+    return { primary: "", secondary: "", quantity: "" };
+  }
   const price = item.upsell_price || item.price;
   let quantity = t("common.qty", locale, { count: item.quantity });
   if (price.recurring?.usage_type === "metered" || +item.quantity === 1) {
@@ -863,10 +872,12 @@ export function getInvoiceDescriptionAndReason(invoice, locale = "en") {
     slash_stake: t("payment.invoice.reason.slashStake", locale),
     stake: t("payment.invoice.reason.stake", locale),
     return_stake: t("payment.invoice.reason.returnStake", locale),
-    recharge: t("payment.invoice.reason.recharge", locale)
+    recharge: t("payment.invoice.reason.recharge", locale),
+    stake_overdraft_protection: t("payment.invoice.reason.stake", locale),
+    overdraft_protection: t("payment.invoice.reason.fee", locale)
   };
   let invoiceType = t("payment.invoice.reason.payment", locale);
-  if (reason.includes("stake") || reason.includes("recharge")) {
+  if (reason.includes("stake") || reason.includes("recharge") || reason === "overdraft_protection") {
     invoiceType = reasonMap[reason];
   }
   if (description?.startsWith("Subscription ") || description?.startsWith("Slash stake")) {
@@ -882,7 +893,12 @@ export function getInvoiceDescriptionAndReason(invoice, locale = "en") {
     "Stake for subscription": t("payment.invoice.reason.staking", locale),
     "Return Subscription staking": t("payment.invoice.reason.returnStake", locale),
     "Recharge for subscription": t("payment.invoice.reason.rechargeForSubscription", locale),
-    "Add funds for subscription": t("payment.invoice.reason.rechargeForSubscription", locale)
+    "Add funds for subscription": t("payment.invoice.reason.rechargeForSubscription", locale),
+    "Overdraft protection": t("payment.invoice.reason.overdraftProtection", locale),
+    "Stake for subscription overdraft protection": t(
+      "payment.invoice.reason.stakeForSubscriptionOverdraftProtection",
+      locale
+    )
   };
   return {
     description: descMap[description] || description,

package/es/locales/en.js

@@ -315,7 +315,11 @@ export default flat({
         stakeForChangePlan: "Subscription plan update",
         stakeForChangePayment: "Subscription payment method update",
         recharge: "Add funds",
-        rechargeForSubscription: "Add funds for subscription"
+        rechargeForSubscription: "Add funds for subscription",
+        overdraftProtection: "Overdraft protection Fee",
+        stakeForSubscriptionOverdraftProtection: "Subscription overdraft protection",
+        gas: "Gas",
+        fee: "Fee"
       }
     },
     subscription: {

package/es/locales/zh.js

@@ -315,7 +315,11 @@ export default flat({
         stakeForChangePlan: "\u8BA2\u9605\u5957\u9910\u66F4\u65B0",
         stakeForChangePayment: "\u8BA2\u9605\u652F\u4ED8\u65B9\u5F0F\u66F4\u65B0",
         recharge: "\u5145\u503C",
-        rechargeForSubscription: "\u8BA2\u9605\u5145\u503C"
+        rechargeForSubscription: "\u8BA2\u9605\u5145\u503C",
+        overdraftProtection: "\u900F\u652F\u4FDD\u62A4\u8D39",
+        stakeForSubscriptionOverdraftProtection: "\u8BA2\u9605\u900F\u652F\u4FDD\u62A4",
+        gas: "\u624B\u7EED\u8D39",
+        fee: "\u670D\u52A1\u8D39"
       }
     },
     subscription: {

package/es/payment/form/index.js

@@ -452,7 +452,10 @@ export default function PaymentForm({
     state.customerLimited && /* @__PURE__ */ jsx(
       ConfirmDialog,
       {
-        onConfirm: () => window.open(joinURL(getPrefix(), "/customer/invoice/past-due"), "_blank"),
+        onConfirm: () => window.open(
+          joinURL(getPrefix(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`),
+          "_self"
+        ),
         onCancel: () => setState({ customerLimited: false }),
         confirm: t("payment.customer.pastDue.alert.confirm"),
         title: t("payment.customer.pastDue.alert.title"),

package/lib/contexts/payment.js

@@ -68,7 +68,10 @@ function PaymentProvider({
     defaultValue: true
   });
   const {
-    data,
+    data = {
+      paymentMethods: [],
+      baseCurrency: {}
+    },
     error,
     run,
     loading

package/lib/history/invoice/list.js

@@ -13,6 +13,7 @@ var _system = require("@mui/system");
 var _ahooks = require("ahooks");
 var _react = _interopRequireWildcard(require("react"));
 var _ufo = require("ufo");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _status = _interopRequireDefault(require("../../components/status"));
 var _payment = require("../../contexts/payment");
 var _subscription = require("../../hooks/subscription");
@@ -100,20 +101,30 @@ const InvoiceTable = _react.default.memo(props => {
   }), {
     refreshDeps: [search, status, customer_id, currency_id, subscription_id, include_staking, include_recovered_from]
   });
+  const prevData = (0, _react.useRef)(data);
   (0, _react.useEffect)(() => {
     if (onTableDataChange) {
-      onTableDataChange(data);
+      onTableDataChange(data, prevData.current);
+      prevData.current = data;
     }
   }, [data]);
   const subscription = (0, _subscription.useSubscription)("events");
+  const debouncedHandleInvoicePaid = (0, _debounce.default)(async () => {
+    _Toast.default.close();
+    _Toast.default.success(t("payment.customer.invoice.paySuccess"));
+    await refresh();
+  }, 1e3, {
+    leading: false,
+    trailing: true,
+    maxWait: 5e3
+  });
   (0, _react.useEffect)(() => {
     if (subscription && customer_id) {
       subscription.on("invoice.paid", ({
         response
       }) => {
         if (response.customer_id === customer_id) {
-          _Toast.default.success(t("payment.customer.invoice.paySuccess"));
-          refresh();
+          debouncedHandleInvoicePaid();
         }
       });
     }
@@ -207,7 +218,8 @@ const InvoiceTable = _react.default.memo(props => {
       customBodyRenderLite: (val, index) => {
         const invoice = data?.list[index];
         const link = getInvoiceLink(invoice, action);
-        if (action) {
+        const hidePay = invoice.billing_reason === "overdraft-protection";
+        if (action && !hidePay) {
           return link.connect ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
             variant: "text",
             size: "small",
@@ -340,19 +352,29 @@ const InvoiceList = _react.default.memo(props => {
   }, {
     reloadDeps: [customer_id, subscription_id, status, include_staking, include_recovered_from]
   });
+  const prevData = (0, _react.useRef)(data);
   (0, _react.useEffect)(() => {
     if (onTableDataChange) {
-      onTableDataChange(data);
+      onTableDataChange(data, prevData.current);
+      prevData.current = data;
     }
   }, [data]);
+  const debouncedHandleInvoicePaid = (0, _debounce.default)(async () => {
+    _Toast.default.close();
+    _Toast.default.success(t("payment.customer.invoice.paySuccess"));
+    await reloadAsync();
+  }, 1e3, {
+    leading: false,
+    trailing: true,
+    maxWait: 5e3
+  });
   (0, _react.useEffect)(() => {
     if (subscription && customer_id) {
-      subscription.on("invoice.paid", async ({
+      subscription.on("invoice.paid", ({
         response
       }) => {
         if (response.customer_id === customer_id) {
-          _Toast.default.success(t("payment.customer.invoice.paySuccess"));
-          await reloadAsync();
+          debouncedHandleInvoicePaid();
         }
       });
     }

package/lib/libs/util.js

@@ -174,6 +174,9 @@ function formatNumber(n, precision = 6, trim = true) {
   return right ? [left, (0, _trimEnd.default)(right, "0")].filter(Boolean).join(".") : left;
 }
 const formatPrice = (price, currency, unit_label, quantity = 1, bn = true, locale = "en") => {
+  if (!currency) {
+    return "";
+  }
   if (price.custom_unit_amount) {
     return `Custom (${currency.symbol})`;
   }
@@ -193,6 +196,9 @@ const formatPrice = (price, currency, unit_label, quantity = 1, bn = true, local
 };
 exports.formatPrice = formatPrice;
 const formatPriceAmount = (price, currency, unit_label, quantity = 1, bn = true) => {
+  if (!currency) {
+    return "";
+  }
   const unit = getPriceUintAmountByCurrency(price, currency);
   const amount = bn ? (0, _util.fromUnitToToken)(new _util.BN(unit).mul(new _util.BN(quantity)), currency.decimal).toString() : +unit * quantity;
   if (price?.type === "recurring" && price.recurring) {
@@ -247,20 +253,20 @@ function formatRecurring(recurring, translate = true, separator = "per", locale
 }
 function getPriceUintAmountByCurrency(price, currency) {
   const options = getPriceCurrencyOptions(price);
-  const option = options.find(x => x.currency_id === currency.id);
+  const option = options.find(x => x.currency_id === currency?.id);
   if (option) {
     if (option.custom_unit_amount) {
       return option.custom_unit_amount.preset || option.custom_unit_amount.presets[0];
     }
     return option.unit_amount;
   }
-  if (price.currency_id === currency.id) {
+  if (price.currency_id === currency?.id) {
     if (price.custom_unit_amount) {
       return price.custom_unit_amount.preset || price.custom_unit_amount.presets[0];
     }
     return price.unit_amount;
   }
-  console.warn(`Currency ${currency.id} not configured for price`, price);
+  console.warn(`Currency ${currency?.id} not configured for price`, price);
   return "0";
 }
 function getPriceCurrencyOptions(price) {
@@ -278,6 +284,13 @@ function formatLineItemPricing(item, currency, {
   trialEnd,
   trialInDays
 }, locale = "en") {
+  if (!currency) {
+    return {
+      primary: "",
+      secondary: "",
+      quantity: ""
+    };
+  }
   const price = item.upsell_price || item.price;
   let quantity = (0, _locales.t)("common.qty", locale, {
     count: item.quantity
@@ -1046,10 +1059,12 @@ function getInvoiceDescriptionAndReason(invoice, locale = "en") {
     slash_stake: (0, _locales.t)("payment.invoice.reason.slashStake", locale),
     stake: (0, _locales.t)("payment.invoice.reason.stake", locale),
     return_stake: (0, _locales.t)("payment.invoice.reason.returnStake", locale),
-    recharge: (0, _locales.t)("payment.invoice.reason.recharge", locale)
+    recharge: (0, _locales.t)("payment.invoice.reason.recharge", locale),
+    stake_overdraft_protection: (0, _locales.t)("payment.invoice.reason.stake", locale),
+    overdraft_protection: (0, _locales.t)("payment.invoice.reason.fee", locale)
   };
   let invoiceType = (0, _locales.t)("payment.invoice.reason.payment", locale);
-  if (reason.includes("stake") || reason.includes("recharge")) {
+  if (reason.includes("stake") || reason.includes("recharge") || reason === "overdraft_protection") {
     invoiceType = reasonMap[reason];
   }
   if (description?.startsWith("Subscription ") || description?.startsWith("Slash stake")) {
@@ -1065,7 +1080,9 @@ function getInvoiceDescriptionAndReason(invoice, locale = "en") {
     "Stake for subscription": (0, _locales.t)("payment.invoice.reason.staking", locale),
     "Return Subscription staking": (0, _locales.t)("payment.invoice.reason.returnStake", locale),
     "Recharge for subscription": (0, _locales.t)("payment.invoice.reason.rechargeForSubscription", locale),
-    "Add funds for subscription": (0, _locales.t)("payment.invoice.reason.rechargeForSubscription", locale)
+    "Add funds for subscription": (0, _locales.t)("payment.invoice.reason.rechargeForSubscription", locale),
+    "Overdraft protection": (0, _locales.t)("payment.invoice.reason.overdraftProtection", locale),
+    "Stake for subscription overdraft protection": (0, _locales.t)("payment.invoice.reason.stakeForSubscriptionOverdraftProtection", locale)
   };
   return {
     description: descMap[description] || description,

package/lib/locales/en.js

@@ -322,7 +322,11 @@ module.exports = (0, _flat.default)({
         stakeForChangePlan: "Subscription plan update",
         stakeForChangePayment: "Subscription payment method update",
         recharge: "Add funds",
-        rechargeForSubscription: "Add funds for subscription"
+        rechargeForSubscription: "Add funds for subscription",
+        overdraftProtection: "Overdraft protection Fee",
+        stakeForSubscriptionOverdraftProtection: "Subscription overdraft protection",
+        gas: "Gas",
+        fee: "Fee"
       }
     },
     subscription: {

package/lib/locales/zh.js

@@ -322,7 +322,11 @@ module.exports = (0, _flat.default)({
         stakeForChangePlan: "\u8BA2\u9605\u5957\u9910\u66F4\u65B0",
         stakeForChangePayment: "\u8BA2\u9605\u652F\u4ED8\u65B9\u5F0F\u66F4\u65B0",
         recharge: "\u5145\u503C",
-        rechargeForSubscription: "\u8BA2\u9605\u5145\u503C"
+        rechargeForSubscription: "\u8BA2\u9605\u5145\u503C",
+        overdraftProtection: "\u900F\u652F\u4FDD\u62A4\u8D39",
+        stakeForSubscriptionOverdraftProtection: "\u8BA2\u9605\u900F\u652F\u4FDD\u62A4",
+        gas: "\u624B\u7EED\u8D39",
+        fee: "\u670D\u52A1\u8D39"
       }
     },
     subscription: {

package/lib/payment/form/index.js

@@ -521,7 +521,7 @@ function PaymentForm({
         })]
       })
     }), state.customerLimited && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
-      onConfirm: () => window.open((0, _ufo.joinURL)((0, _util.getPrefix)(), "/customer/invoice/past-due"), "_blank"),
+      onConfirm: () => window.open((0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`), "_self"),
       onCancel: () => setState({
         customerLimited: false
       }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.16.17",
+  "version": "1.16.19",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -53,15 +53,15 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.10.88",
-    "@arcblock/ux": "^2.10.88",
-    "@arcblock/ws": "^1.18.161",
-    "@blocklet/ui-react": "^2.10.88",
+    "@arcblock/did-connect": "^2.11.15",
+    "@arcblock/ux": "^2.11.15",
+    "@arcblock/ws": "^1.18.165",
+    "@blocklet/ui-react": "^2.11.15",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.18.161",
+    "@ocap/util": "^1.18.165",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.16.17",
+    "@blocklet/payment-types": "1.16.19",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "38b1da1771951e6a30f3cb643fadb108aceed5b6"
+  "gitHead": "a033985b46d5c80b56f2ed9dc86d808fb60d9db1"
 }

package/src/contexts/payment.tsx

@@ -81,7 +81,15 @@ function PaymentProvider({ session, connect, children, baseUrl }: PaymentContext
 
   const [livemode, setLivemode] = useLocalStorageState('livemode', { defaultValue: true });
 
-  const { data, error, run, loading } = useRequest(getSettings, {
+  const {
+    data = {
+      paymentMethods: [],
+      baseCurrency: {},
+    },
+    error,
+    run,
+    loading,
+  } = useRequest(getSettings, {
     refreshDeps: [livemode],
   });
   const prefix = getPrefix();

package/src/history/invoice/list.tsx

@@ -11,9 +11,10 @@ import { OpenInNewOutlined } from '@mui/icons-material';
 import { Box, Button, CircularProgress, Hidden, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useInfiniteScroll, useRequest, useSetState } from 'ahooks';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { joinURL } from 'ufo';
 
+import debounce from 'lodash/debounce';
 import Status from '../../components/status';
 import { usePaymentContext } from '../../contexts/payment';
 import { useSubscription } from '../../hooks/subscription';
@@ -131,21 +132,38 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
       refreshDeps: [search, status, customer_id, currency_id, subscription_id, include_staking, include_recovered_from],
     }
   );
+
+  const prevData = useRef(data);
+
   useEffect(() => {
     if (onTableDataChange) {
-      onTableDataChange(data);
+      onTableDataChange(data, prevData.current);
+      prevData.current = data;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);
 
   const subscription = useSubscription('events');
 
+  const debouncedHandleInvoicePaid = debounce(
+    async () => {
+      Toast.close();
+      Toast.success(t('payment.customer.invoice.paySuccess'));
+      await refresh();
+    },
+    1000,
+    {
+      leading: false,
+      trailing: true,
+      maxWait: 5000,
+    }
+  );
+
   useEffect(() => {
     if (subscription && customer_id) {
       subscription.on('invoice.paid', ({ response }: { response: TInvoiceExpanded }) => {
         if (response.customer_id === customer_id) {
-          Toast.success(t('payment.customer.invoice.paySuccess'));
-          refresh();
+          debouncedHandleInvoicePaid();
         }
       });
     }
@@ -241,7 +259,8 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
         customBodyRenderLite: (val: string, index: number) => {
           const invoice = data?.list[index] as TInvoiceExpanded;
           const link = getInvoiceLink(invoice, action);
-          if (action) {
+          const hidePay = invoice.billing_reason === 'overdraft-protection';
+          if (action && !hidePay) {
             return link.connect ? (
               <Button variant="text" size="small" onClick={() => onPay(invoice.id)} sx={{ color: 'text.link' }}>
                 {t('payment.customer.invoice.pay')}
@@ -356,20 +375,35 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
     }
   );
 
+  const prevData = useRef(data);
+
   useEffect(() => {
     if (onTableDataChange) {
-      onTableDataChange(data);
+      onTableDataChange(data, prevData.current);
+      prevData.current = data;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);
 
+  const debouncedHandleInvoicePaid = debounce(
+    async () => {
+      Toast.close();
+      Toast.success(t('payment.customer.invoice.paySuccess'));
+      await reloadAsync();
+    },
+    1000,
+    {
+      leading: false,
+      trailing: true,
+      maxWait: 5000,
+    }
+  );
   // Listen to invoice.paid event and refresh data
   useEffect(() => {
     if (subscription && customer_id) {
-      subscription.on('invoice.paid', async ({ response }: { response: TInvoiceExpanded }) => {
+      subscription.on('invoice.paid', ({ response }: { response: TInvoiceExpanded }) => {
         if (response.customer_id === customer_id) {
-          Toast.success(t('payment.customer.invoice.paySuccess'));
-          await reloadAsync();
+          debouncedHandleInvoicePaid();
         }
       });
     }

package/src/libs/util.ts

@@ -159,6 +159,9 @@ export const formatPrice = (
   bn: boolean = true,
   locale: string = 'en'
 ) => {
+  if (!currency) {
+    return '';
+  }
   if (price.custom_unit_amount) {
     return `Custom (${currency.symbol})`;
   }
@@ -190,6 +193,9 @@ export const formatPriceAmount = (
   quantity: number = 1,
   bn: boolean = true
 ) => {
+  if (!currency) {
+    return '';
+  }
   const unit = getPriceUintAmountByCurrency(price, currency);
   const amount = bn
     ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString()
@@ -259,7 +265,7 @@ export function formatRecurring(
 
 export function getPriceUintAmountByCurrency(price: TPrice, currency: TPaymentCurrency) {
   const options = getPriceCurrencyOptions(price);
-  const option = options.find((x) => x.currency_id === currency.id);
+  const option = options.find((x) => x.currency_id === currency?.id);
   if (option) {
     if (option.custom_unit_amount) {
       return option.custom_unit_amount.preset || option.custom_unit_amount.presets[0];
@@ -267,14 +273,14 @@ export function getPriceUintAmountByCurrency(price: TPrice, currency: TPaymentCu
     return option.unit_amount;
   }
 
-  if (price.currency_id === currency.id) {
+  if (price.currency_id === currency?.id) {
     if (price.custom_unit_amount) {
       return price.custom_unit_amount.preset || price.custom_unit_amount.presets[0];
     }
     return price.unit_amount;
   }
 
-  console.warn(`Currency ${currency.id} not configured for price`, price);
+  console.warn(`Currency ${currency?.id} not configured for price`, price);
   return '0';
 }
 
@@ -299,6 +305,9 @@ export function formatLineItemPricing(
   { trialEnd, trialInDays }: { trialEnd: number; trialInDays: number },
   locale: string = 'en'
 ): { primary: string; secondary?: string; quantity: string } {
+  if (!currency) {
+    return { primary: '', secondary: '', quantity: '' };
+  }
   const price = item.upsell_price || item.price;
 
   let quantity = t('common.qty', locale, { count: item.quantity });
@@ -1121,9 +1130,11 @@ export function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded, locale
     stake: t('payment.invoice.reason.stake', locale),
     return_stake: t('payment.invoice.reason.returnStake', locale),
     recharge: t('payment.invoice.reason.recharge', locale),
+    stake_overdraft_protection: t('payment.invoice.reason.stake', locale),
+    overdraft_protection: t('payment.invoice.reason.fee', locale),
   };
   let invoiceType = t('payment.invoice.reason.payment', locale);
-  if (reason.includes('stake') || reason.includes('recharge')) {
+  if (reason.includes('stake') || reason.includes('recharge') || reason === 'overdraft_protection') {
     invoiceType = reasonMap[reason as keyof typeof reasonMap];
   }
   if (description?.startsWith('Subscription ') || description?.startsWith('Slash stake')) {
@@ -1140,6 +1151,11 @@ export function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded, locale
     'Return Subscription staking': t('payment.invoice.reason.returnStake', locale),
     'Recharge for subscription': t('payment.invoice.reason.rechargeForSubscription', locale),
     'Add funds for subscription': t('payment.invoice.reason.rechargeForSubscription', locale),
+    'Overdraft protection': t('payment.invoice.reason.overdraftProtection', locale),
+    'Stake for subscription overdraft protection': t(
+      'payment.invoice.reason.stakeForSubscriptionOverdraftProtection',
+      locale
+    ),
   };
 
   return {

package/src/locales/en.tsx

@@ -329,6 +329,10 @@ export default flat({
         stakeForChangePayment: 'Subscription payment method update',
         recharge: 'Add funds',
         rechargeForSubscription: 'Add funds for subscription',
+        overdraftProtection: 'Overdraft protection Fee',
+        stakeForSubscriptionOverdraftProtection: 'Subscription overdraft protection',
+        gas: 'Gas',
+        fee: 'Fee',
       },
     },
     subscription: {

package/src/locales/zh.tsx

@@ -319,6 +319,10 @@ export default flat({
         stakeForChangePayment: '订阅支付方式更新',
         recharge: '充值',
         rechargeForSubscription: '订阅充值',
+        overdraftProtection: '透支保护费',
+        stakeForSubscriptionOverdraftProtection: '订阅透支保护',
+        gas: '手续费',
+        fee: '服务费',
       },
     },
     subscription: {

package/src/payment/form/index.tsx

@@ -523,7 +523,12 @@ export default function PaymentForm({
       </Fade>
       {state.customerLimited && (
         <ConfirmDialog
-          onConfirm={() => window.open(joinURL(getPrefix(), '/customer/invoice/past-due'), '_blank')}
+          onConfirm={() =>
+            window.open(
+              joinURL(getPrefix(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`),
+              '_self'
+            )
+          }
           onCancel={() => setState({ customerLimited: false })}
           confirm={t('payment.customer.pastDue.alert.confirm')}
           title={t('payment.customer.pastDue.alert.title')}