@blocklet/payment-react 1.15.33 → 1.15.35

package/lib/checkout/donate.js

@@ -295,7 +295,8 @@ function CheckoutDonateInner({
   onError,
   mode,
   inlineOptions = {},
-  theme
+  theme,
+  children
 }) {
   const {
     state,
@@ -331,118 +332,136 @@ function CheckoutDonateInner({
   const handlePopoverClose = () => {
     setPopoverOpen(false);
   };
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [mode === "inline" ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-        size: settings.appearance?.button?.size || "medium",
-        color: settings.appearance?.button?.color || "primary",
-        variant: settings.appearance?.button?.variant || "contained",
-        ...settings.appearance?.button,
-        onClick: handlePopoverOpen,
-        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          direction: "row",
-          alignItems: "center",
-          spacing: 0.5,
-          children: [settings.appearance.button.icon, typeof settings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            sx: {
-              whiteSpace: "nowrap"
-            },
-            children: settings.appearance.button.text
-          }) : settings.appearance.button.text]
-        })
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Popover, {
-        id: "mouse-over-popper",
-        open: popoverOpen,
-        anchorEl,
-        onClose: handlePopoverClose,
-        anchorOrigin: {
-          vertical: "top",
-          horizontal: "center"
-        },
-        transformOrigin: {
-          vertical: "bottom",
-          horizontal: "center"
-        },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+  const startDonate = () => {
+    setState({
+      open: true
+    });
+  };
+  const inlineRender = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+      size: settings.appearance?.button?.size || "medium",
+      color: settings.appearance?.button?.color || "primary",
+      variant: settings.appearance?.button?.variant || "contained",
+      ...settings.appearance?.button,
+      onClick: handlePopoverOpen,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 0.5,
+        children: [settings.appearance.button.icon, typeof settings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
-            minWidth: 320,
-            padding: "20px"
+            whiteSpace: "nowrap"
           },
-          children: [supporters.loading && /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
-            style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              backgroundColor: "rgba(255, 255, 255, 0.7)"
-            },
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
-          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-            display: "flex",
-            alignItems: "center",
-            flexDirection: "column",
-            gap: 2,
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-              ...inlineOptions.button,
-              onClick: () => setState({
-                open: true
-              }),
-              children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-                direction: "row",
-                alignItems: "center",
-                spacing: 0.5,
-                children: [inlineOptions?.button?.icon, typeof inlineOptions?.button?.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  sx: {
-                    whiteSpace: "nowrap"
-                  },
-                  children: inlineOptions?.button?.text
-                }) : inlineOptions?.button?.text]
-              })
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterSimple, {
-              ...supporters.data
-            })]
-          })]
-        })
-      })]
-    }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        width: "100%",
-        minWidth: 300,
-        maxWidth: 720
+          children: settings.appearance.button.text
+        }) : settings.appearance.button.text]
+      })
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Popover, {
+      id: "mouse-over-popper",
+      open: popoverOpen,
+      anchorEl,
+      onClose: handlePopoverClose,
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "center"
       },
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: {
-        xs: 1,
-        sm: 2
+      transformOrigin: {
+        vertical: "bottom",
+        horizontal: "center"
       },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-        size: settings.appearance?.button?.size || "medium",
-        color: settings.appearance?.button?.color || "primary",
-        variant: settings.appearance?.button?.variant || "contained",
-        ...settings.appearance?.button,
-        onClick: () => setState({
-          open: true
-        }),
-        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          direction: "row",
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          minWidth: 320,
+          padding: "20px"
+        },
+        children: [supporters.loading && /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor: "rgba(255, 255, 255, 0.7)"
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          display: "flex",
           alignItems: "center",
-          spacing: 0.5,
-          children: [settings.appearance.button.icon, typeof settings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: settings.appearance.button.text
-          }) : settings.appearance.button.text]
-        })
-      }), supporters.data && settings.appearance.history.variant === "avatar" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
-        ...supporters.data
-      }), supporters.data && settings.appearance.history.variant === "table" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterTable, {
-        ...supporters.data
-      })]
-    }), donation.data && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
+          flexDirection: "column",
+          gap: 2,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            ...inlineOptions.button,
+            onClick: () => startDonate(),
+            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              alignItems: "center",
+              spacing: 0.5,
+              children: [inlineOptions?.button?.icon, typeof inlineOptions?.button?.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                sx: {
+                  whiteSpace: "nowrap"
+                },
+                children: inlineOptions?.button?.text
+              }) : inlineOptions?.button?.text]
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterSimple, {
+            ...supporters.data
+          })]
+        })]
+      })
+    })]
+  });
+  const defaultRender = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      width: "100%",
+      minWidth: 300,
+      maxWidth: 720
+    },
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: {
+      xs: 1,
+      sm: 2
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+      size: settings.appearance?.button?.size || "medium",
+      color: settings.appearance?.button?.color || "primary",
+      variant: settings.appearance?.button?.variant || "contained",
+      ...settings.appearance?.button,
+      onClick: () => startDonate(),
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 0.5,
+        children: [settings.appearance.button.icon, typeof settings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          children: settings.appearance.button.text
+        }) : settings.appearance.button.text]
+      })
+    }), supporters.data && settings.appearance.history.variant === "avatar" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
+      ...supporters.data
+    }), supporters.data && settings.appearance.history.variant === "table" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterTable, {
+      ...supporters.data
+    })]
+  });
+  const renderInnerView = () => {
+    if (mode === "inline") {
+      return inlineRender;
+    }
+    if (mode === "custom") {
+      return children && typeof children === "function" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: children(startDonate, `${(0, _util.formatAmount)(supporters.data?.totalAmount || "0", supporters.data?.currency?.decimal)} ${supporters.data?.currency?.symbol}`, supporters.data || {})
+      }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+        children: ["Please provide a valid render function ", /* @__PURE__ */(0, _jsxRuntime.jsx)("pre", {
+          children: "(openDonate, donateTotalAmount, supporters) => ReactNode"
+        })]
+      });
+    }
+    return defaultRender;
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [renderInnerView(), donation.data && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
       open: state.open,
       title: settings.title,
       maxWidth: "md",

package/lib/components/pricing-table.d.ts

@@ -6,13 +6,15 @@ type Props = {
     alignItems?: 'center' | 'left';
     mode?: 'checkout' | 'select';
     interval?: string;
+    hideCurrency?: boolean;
 };
-declare function PricingTable({ table, alignItems, interval, mode, onSelect }: Props): import("react").JSX.Element;
+declare function PricingTable({ table, alignItems, interval, mode, onSelect, hideCurrency }: Props): import("react").JSX.Element;
 declare namespace PricingTable {
     var defaultProps: {
         alignItems: string;
         mode: string;
         interval: string;
+        hideCurrency: boolean;
     };
 }
 export default PricingTable;

package/lib/components/pricing-table.js

@@ -17,7 +17,6 @@ var _util = require("@ocap/util");
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _payment = require("../contexts/payment");
 var _util2 = require("../libs/util");
-var _amount = _interopRequireDefault(require("../payment/amount"));
 var _mobile = require("../hooks/mobile");
 var _truncatedText = _interopRequireDefault(require("./truncated-text"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -48,14 +47,16 @@ const groupItemsByRecurring = (items, currency) => {
 PricingTable.defaultProps = {
   alignItems: "center",
   mode: "checkout",
-  interval: ""
+  interval: "",
+  hideCurrency: false
 };
 function PricingTable({
   table,
   alignItems,
   interval,
   mode,
-  onSelect
+  onSelect,
+  hideCurrency
 }) {
   const {
     t,
@@ -187,10 +188,10 @@ function PricingTable({
         max-width: 360px !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) {
-        max-width: 720px !important;
+        max-width: 780px !important;
       }
       .price-table-wrap:has(> div:nth-child(3)) {
-        max-width: 1080px !important;
+        max-width: 1200px !important;
       }
     }
   `;
@@ -274,7 +275,7 @@ function PricingTable({
               children: (0, _util2.formatRecurring)(recurring[x], true, "", locale)
             }, x))
           })
-        }), currencyList.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+        }), currencyList.length > 0 && !hideCurrency && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
           value: currency?.id,
           onChange: e => setCurrency(currencyList.find(v => v?.id === e.target.value)),
           size: "small",
@@ -306,6 +307,7 @@ function PricingTable({
           if (mode === "select") {
             action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
           }
+          const [amount, unit] = (0, _util2.formatPriceAmount)(x.price, currency, x.product.unit_label).split("/");
           return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
             padding: 4,
             spacing: 2,
@@ -327,13 +329,12 @@ function PricingTable({
               },
               width: {
                 xs: "100%",
-                md: "320px"
+                md: "360px"
               },
               maxWidth: "360px",
               minWidth: "300px",
               padding: "20px",
-              position: "relative",
-              height: "fit-content"
+              position: "relative"
             },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
               textAlign: "center",
@@ -352,7 +353,7 @@ function PricingTable({
                     justifyContent: "space-between"
                   },
                   children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                    color: "text.primary",
+                    color: "text.secondary",
                     fontWeight: 600,
                     sx: {
                       fontSize: "18px !important",
@@ -365,7 +366,7 @@ function PricingTable({
                     })
                   }), x.is_highlight && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
                     label: x.highlight_text,
-                    color: "default",
+                    color: "primary",
                     size: "small",
                     sx: {
                       position: "absolute",
@@ -373,14 +374,28 @@ function PricingTable({
                       right: "20px"
                     }
                   })]
-                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
-                  amount: (0, _util2.formatPriceAmount)(x.price, currency, x.product.unit_label),
+                }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                  component: "div",
                   sx: {
                     my: 0,
-                    marginTop: "0px !important",
-                    fontSize: "48px",
-                    fontWeight: "bold"
-                  }
+                    fontWeight: "700",
+                    fontSize: "32px",
+                    letterSpacing: "-0.03rem",
+                    fontVariantNumeric: "tabular-nums",
+                    display: "flex",
+                    alignItems: "baseline",
+                    gap: "4px",
+                    flexWrap: "wrap"
+                  },
+                  children: [amount, unit ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                    sx: {
+                      fontSize: "16px",
+                      fontWeight: "400",
+                      color: "text.secondary",
+                      textAlign: "left"
+                    },
+                    children: ["/ ", unit]
+                  }) : ""]
                 }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                   color: "text.secondary",
                   sx: {
@@ -482,7 +497,7 @@ function Subscribe({
     fullWidth: true,
     size: "medium",
     variant: "contained",
-    color: x.is_highlight || x.is_selected ? "info" : "primary",
+    color: "primary",
     sx: {
       fontSize: "16px",
       padding: "10px 20px",

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

@@ -4,6 +4,7 @@ type Props = {
     subscription_id?: string;
     currency_id?: string;
     include_staking?: boolean;
+    include_return_staking?: boolean;
     include_recovered_from?: boolean;
     status?: string;
     pageSize?: number;

package/lib/history/invoice/list.js

@@ -67,6 +67,7 @@ const InvoiceTable = _react.default.memo(props => {
     currency_id,
     subscription_id,
     include_staking,
+    include_return_staking,
     include_recovered_from,
     onTableDataChange
   } = props;
@@ -93,6 +94,7 @@ const InvoiceTable = _react.default.memo(props => {
     currency_id,
     subscription_id,
     include_staking,
+    include_return_staking,
     include_recovered_from,
     ignore_zero: true
   }), {
@@ -135,6 +137,23 @@ const InvoiceTable = _react.default.memo(props => {
         });
       }
     }
+  }, {
+    label: t("common.type"),
+    name: "billing_reason",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const invoice = data.list[index];
+        const link = getInvoiceLink(invoice, action);
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
+          href: link.url,
+          target: link.external ? "_blank" : target,
+          rel: "noreferrer",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+            label: (0, _util.getInvoiceDescriptionAndReason)(invoice, locale)?.type
+          })
+        });
+      }
+    }
   }, {
     label: t("payment.customer.invoice.invoiceNumber"),
     name: "number",
@@ -177,7 +196,7 @@ const InvoiceTable = _react.default.memo(props => {
           href: link.url,
           target: link.external ? "_blank" : target,
           rel: "noreferrer",
-          children: invoice.description || invoice.id
+          children: (0, _util.getInvoiceDescriptionAndReason)(invoice, locale)?.description || invoice.id
         });
       }
     }

package/lib/hooks/scroll.d.ts

@@ -0,0 +1 @@
+export declare function usePreventWheel(): void;

package/lib/hooks/scroll.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePreventWheel = usePreventWheel;
+var _react = require("react");
+function usePreventWheel() {
+  (0, _react.useEffect)(() => {
+    const handleWheel = e => {
+      if (document.activeElement?.type === "number") {
+        e.preventDefault();
+      }
+    };
+    window.addEventListener("wheel", handleWheel, {
+      passive: false
+    });
+    return () => {
+      window.removeEventListener("wheel", handleWheel);
+    };
+  }, []);
+}

package/lib/index.d.ts

@@ -36,5 +36,6 @@ export * from './contexts/payment';
 export * from './hooks/subscription';
 export * from './hooks/mobile';
 export * from './hooks/table';
+export * from './hooks/scroll';
 export { translations, createTranslator } from './locales';
 export { createLazyComponent, 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, TruncatedText, Link, };

package/lib/index.js

@@ -351,5 +351,17 @@ Object.keys(_table3).forEach(function (key) {
     }
   });
 });
+var _scroll = require("./hooks/scroll");
+Object.keys(_scroll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _scroll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _scroll[key];
+    }
+  });
+});
 var _locales = require("./locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/libs/util.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentCurrencyExpanded, TPaymentMethod, TPaymentMethodExpanded, TPrice, TProductExpanded, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
+import type { PaymentDetails, PriceCurrency, PriceRecurring, TInvoiceExpanded, TLineItemExpanded, TPaymentCurrency, TPaymentCurrencyExpanded, TPaymentMethod, TPaymentMethodExpanded, TPrice, TProductExpanded, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 import { ActionProps, PricingRenderProps } from '../types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const isPaymentKitMounted: () => any;
@@ -108,3 +108,9 @@ export declare function getWordBreakStyle(value: any): 'break-word' | 'break-all
 export declare function isMobileSafari(): boolean;
 export declare function truncateText(text: string, maxLength: number, useWidth?: boolean): string;
 export declare function getCustomerAvatar(did: string | undefined, updated_at: string | number | undefined, imageSize?: number): string;
+export declare function hasDelegateTxHash(details: PaymentDetails, paymentMethod: TPaymentMethod): any;
+export declare function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded, locale?: string): {
+    description: string | undefined;
+    reason: string;
+    type: string;
+};

package/lib/libs/util.js

@@ -30,6 +30,7 @@ exports.formatUpsellSaving = formatUpsellSaving;
 exports.getCheckoutAmount = getCheckoutAmount;
 exports.getCustomerAvatar = getCustomerAvatar;
 exports.getFreeTrialTime = getFreeTrialTime;
+exports.getInvoiceDescriptionAndReason = getInvoiceDescriptionAndReason;
 exports.getInvoiceStatusColor = getInvoiceStatusColor;
 exports.getPaymentIntentStatusColor = getPaymentIntentStatusColor;
 exports.getPayoutStatusColor = getPayoutStatusColor;
@@ -45,6 +46,7 @@ exports.getSubscriptionStatusColor = getSubscriptionStatusColor;
 exports.getTxLink = exports.getSubscriptionTimeSummary = void 0;
 exports.getWebhookStatusColor = getWebhookStatusColor;
 exports.getWordBreakStyle = getWordBreakStyle;
+exports.hasDelegateTxHash = hasDelegateTxHash;
 exports.isMobileSafari = isMobileSafari;
 exports.isPaymentKitMounted = void 0;
 exports.isValidCountry = isValidCountry;
@@ -827,6 +829,13 @@ const flattenPaymentMethods = (methods = []) => {
 };
 exports.flattenPaymentMethods = flattenPaymentMethods;
 const getTxLink = (method, details) => {
+  if (!details) {
+    return {
+      text: "N/A",
+      link: "",
+      gas: ""
+    };
+  }
   if (method.type === "arcblock" && details.arcblock?.tx_hash) {
     return {
       link: (0, _ufo.joinURL)(method.settings.arcblock?.explorer_host, "/txs", details.arcblock?.tx_hash),
@@ -1014,4 +1023,52 @@ function truncateText(text, maxLength, useWidth = false) {
 function getCustomerAvatar(did, updated_at, imageSize = 48) {
   const updated = typeof updated_at === "number" ? updated_at : (0, _dayjs.default)(updated_at).unix();
   return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated || (0, _dayjs.default)().unix()}`;
+}
+function hasDelegateTxHash(details, paymentMethod) {
+  return paymentMethod?.type && ["arcblock", "ethereum"].includes(paymentMethod?.type) &&
+  // @ts-ignore
+  details?.[paymentMethod?.type]?.tx_hash;
+}
+function getInvoiceDescriptionAndReason(invoice, locale = "en") {
+  const {
+    billing_reason: reason,
+    description
+  } = invoice;
+  const reasonMap = {
+    subscription_create: (0, _locales.t)("payment.invoice.reason.creation", locale),
+    subscription_cycle: (0, _locales.t)("payment.invoice.reason.cycle", locale),
+    subscription_update: (0, _locales.t)("payment.invoice.reason.update", locale),
+    subscription_recover: (0, _locales.t)("payment.invoice.reason.recover", locale),
+    subscription_threshold: (0, _locales.t)("payment.invoice.reason.threshold", locale),
+    subscription_cancel: (0, _locales.t)("payment.invoice.reason.cancel", locale),
+    manual: (0, _locales.t)("payment.invoice.reason.manual", locale),
+    upcoming: (0, _locales.t)("payment.invoice.reason.upcoming", locale),
+    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)
+  };
+  let invoiceType = (0, _locales.t)("payment.invoice.reason.payment", locale);
+  if (reason.includes("stake") || reason.includes("recharge")) {
+    invoiceType = reasonMap[reason];
+  }
+  if (description?.startsWith("Subscription ") || description?.startsWith("Slash stake")) {
+    return {
+      description: reasonMap[reason],
+      reason: reasonMap[reason],
+      type: invoiceType
+    };
+  }
+  const descMap = {
+    "Stake for subscription plan change": (0, _locales.t)("payment.invoice.reason.stakeForChangePlan", locale),
+    "Stake for subscription payment change": (0, _locales.t)("payment.invoice.reason.stakeForChangePayment", locale),
+    "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)
+  };
+  return {
+    description: descMap[description] || description,
+    reason: reasonMap[reason] || reason,
+    type: invoiceType
+  };
 }

package/lib/locales/en.js

@@ -95,7 +95,9 @@ module.exports = (0, _flat.default)({
     quantityLimitPerCheckout: "Exceed purchase limit",
     quantityNotEnough: "Exceed inventory",
     amountPrecisionLimit: "Amount decimal places must be less than or equal to {precision}",
-    saveAsDefaultPriceSuccess: "Set default price successfully"
+    saveAsDefaultPriceSuccess: "Set default price successfully",
+    stakeAmount: "Stake Amount",
+    slashStakeAmount: "Slash Stake Amount"
   },
   payment: {
     checkout: {
@@ -312,7 +314,14 @@ module.exports = (0, _flat.default)({
         cancel: "Subscription cancel",
         manual: "Manual invoice",
         upcoming: "Upcoming invoice",
-        slashStake: "Slash stake"
+        slashStake: "Slash stake",
+        stake: "Stake",
+        payment: "Payment",
+        returnStake: "Return stake",
+        stakeForChangePlan: "Subscription plan update",
+        stakeForChangePayment: "Subscription payment method update",
+        recharge: "Recharge",
+        rechargeForSubscription: "Subscription recharge"
       }
     }
   },