@blocklet/payment-react 1.14.30 → 1.14.32

package/es/checkout/table.js

@@ -11,6 +11,7 @@ import api from "../libs/api.js";
 import { mergeExtraParams } from "../libs/util.js";
 import CheckoutForm from "./form.js";
 import { PaymentThemeProvider } from "../theme/index.js";
+import TruncatedText from "../components/truncated-text.js";
 const fetchData = async (id) => {
   const { data } = await api.get(`/api/pricing-tables/${id}`);
   return data;
@@ -85,7 +86,7 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
               textAlign: "center"
             },
             children: [
-              !data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { display: "flex", marginBottom: "8px", width: "fit-content" } }),
+              !data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { display: "flex", marginBottom: "8px", width: "fit-content", ml: 0 } }),
               /* @__PURE__ */ jsx(
                 Typography,
                 {
@@ -95,7 +96,7 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
                     lineHeight: "32px",
                     fontSize: "24px"
                   },
-                  children: data.name
+                  children: /* @__PURE__ */ jsx(TruncatedText, { text: data.name, maxLength: 60, useWidth: true })
                 }
               )
             ]

package/es/components/pricing-table.js

@@ -32,6 +32,7 @@ import {
 } from "../libs/util.js";
 import Amount from "../payment/amount.js";
 import { useMobile } from "../hooks/mobile.js";
+import TruncatedText from "./truncated-text.js";
 const sortOrder = {
   year: 1,
   month: 2,
@@ -294,7 +295,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                                   fontSize: "18px !important",
                                   fontWeight: "600"
                                 },
-                                children: x.product.name
+                                children: /* @__PURE__ */ jsx(TruncatedText, { text: x.product.name, maxLength: 26, useWidth: true })
                               }
                             ),
                             x.is_highlight && /* @__PURE__ */ jsx(

package/es/components/truncated-text.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface TruncatedTextProps {
+    text?: string;
+    maxLength?: number;
+    useWidth?: boolean;
+}
+declare function TruncatedText({ text, maxLength, useWidth }: TruncatedTextProps): import("react").JSX.Element | null;
+declare namespace TruncatedText {
+    var defaultProps: {
+        useWidth: boolean;
+        text: string;
+        maxLength: number;
+    };
+}
+export default TruncatedText;

package/es/components/truncated-text.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { Tooltip, tooltipClasses } from "@mui/material";
+import { styled } from "@mui/system";
+import { truncateText } from "../libs/util.js";
+const CustomTooltip = styled(({ className, ...props }) => /* @__PURE__ */ jsx(Tooltip, { ...props, classes: { popper: className } }))({
+  [`& .${tooltipClasses.tooltip}`]: {
+    fontSize: 11,
+    maxHeight: 120,
+    maxWidth: 500,
+    overflowY: "auto"
+  }
+});
+export default function TruncatedText({ text = "", maxLength = 100, useWidth = false }) {
+  if (!text) {
+    return null;
+  }
+  const truncatedText = truncateText(text, maxLength, useWidth);
+  if (!truncatedText.endsWith("...")) {
+    return /* @__PURE__ */ jsx("span", { children: truncatedText });
+  }
+  return /* @__PURE__ */ jsx(CustomTooltip, { title: text, placement: "bottom", enterTouchDelay: 0, children: /* @__PURE__ */ jsx("span", { title: text, children: truncatedText }) });
+}
+TruncatedText.defaultProps = {
+  useWidth: false,
+  text: "",
+  maxLength: 100
+};

package/es/history/invoice/list.js

@@ -96,7 +96,7 @@ const InvoiceTable = React.memo((props) => {
     {
       label: t("common.amount"),
       name: "total",
-      width: 60,
+      width: 80,
       align: "right",
       options: {
         customBodyRenderLite: (_, index) => {
@@ -146,9 +146,8 @@ const InvoiceTable = React.memo((props) => {
     },
     {
       label: t("common.status"),
-      name: "created_at",
+      name: "status",
       options: {
-        sort: true,
         customBodyRenderLite: (val, index) => {
           const invoice = data?.list[index];
           const link = getInvoiceLink(invoice, action);
@@ -300,7 +299,17 @@ const InvoiceList = React.memo((props) => {
               ] }) }),
               /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, locale, "HH:mm:ss") }) }),
               !action && /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(Box, { flex: 2, className: "invoice-description", textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id }) }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? link.connect ? /* @__PURE__ */ jsx(Button, { variant: "contained", color: "primary", size: "small", onClick: () => onPay(invoice.id), children: t("payment.customer.invoice.pay") }) : /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? link.connect ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "contained",
+                  color: "primary",
+                  size: "small",
+                  onClick: () => onPay(invoice.id),
+                  sx: { whiteSpace: "nowrap" },
+                  children: t("payment.customer.invoice.pay")
+                }
+              ) : /* @__PURE__ */ jsx(
                 Button,
                 {
                   component: "a",
@@ -308,6 +317,7 @@ const InvoiceList = React.memo((props) => {
                   size: "small",
                   href: link.url,
                   target: link.external ? "_blank" : target,
+                  sx: { whiteSpace: "nowrap" },
                   rel: "noreferrer",
                   children: t("payment.customer.invoice.pay")
                 }

package/es/index.d.ts

@@ -25,6 +25,7 @@ import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
 import PricingItem from './components/pricing-item';
 import CountrySelect from './components/country-select';
+import TruncatedText from './components/truncated-text';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -33,4 +34,4 @@ export * from './hooks/subscription';
 export * from './hooks/mobile';
 export * from './hooks/table';
 export { translations, createTranslator } from './locales';
-export { 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, };
+export { 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, };

package/es/index.js

@@ -25,6 +25,7 @@ import ProductSkeleton from "./payment/product-skeleton.js";
 import PaymentSummary from "./payment/summary.js";
 import PricingItem from "./components/pricing-item.js";
 import CountrySelect from "./components/country-select.js";
+import TruncatedText from "./components/truncated-text.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
@@ -60,5 +61,6 @@ export {
   SafeGuard,
   PricingItem,
   CountrySelect,
-  Table
+  Table,
+  TruncatedText
 };

package/es/libs/util.d.ts

@@ -106,3 +106,4 @@ export declare function formatSubscriptionStatus(status: string): string;
 export declare function formatAmountPrecisionLimit(amount: string, locale?: string, precision?: number): string;
 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;

package/es/libs/util.js

@@ -2,6 +2,7 @@ import { BN, fromUnitToToken } from "@ocap/util";
 import omit from "lodash/omit";
 import trimEnd from "lodash/trimEnd";
 import numbro from "numbro";
+import stringWidth from "string-width";
 import { defaultCountries } from "react-international-phone";
 import { joinURL } from "ufo";
 import { t } from "../locales/index.js";
@@ -812,3 +813,28 @@ export function isMobileSafari() {
   const isIOS = /iphone|ipad|ipod/.test(ua);
   return isSafari && isMobile && isIOS;
 }
+export function truncateText(text, maxLength, useWidth = false) {
+  if (!text || !maxLength) {
+    return text;
+  }
+  if (!useWidth) {
+    if (text.length <= maxLength) {
+      return text;
+    }
+    return `${text.substring(0, maxLength)}...`;
+  }
+  let width = 0;
+  let truncated = "";
+  for (let i = 0; i < text.length; i++) {
+    const charWidth = stringWidth(text.charAt(i));
+    if (width + charWidth > maxLength) {
+      break;
+    }
+    truncated += text.charAt(i);
+    width += charWidth;
+  }
+  if (truncated === text) {
+    return truncated;
+  }
+  return `${truncated}...`;
+}

package/es/locales/en.js

@@ -202,6 +202,7 @@ export default flat({
         title: "Cancel your subscription",
         comment: "Any additional feedback?",
         description: "Your subscription will be canceled, but it is still available until the end of your current billing period on {date}",
+        trialDescription: "Free trial subscriptions will be canceled immediately and no longer available, confirm to continue",
         feedback: {
           tip: "We would love your feedback, it will help us improve our service",
           too_expensive: "The service is too expensive",
@@ -303,7 +304,8 @@ export default flat({
         threshold: "Metered usage billing",
         cancel: "Subscription cancel",
         manual: "Manual invoice",
-        upcoming: "Upcoming invoice"
+        upcoming: "Upcoming invoice",
+        slashStake: "Slash stake"
       }
     }
   },

package/es/locales/zh.js

@@ -202,6 +202,7 @@ export default flat({
         title: "\u53D6\u6D88\u60A8\u7684\u8BA2\u9605",
         comment: "\u4F60\u8FD8\u6709\u5176\u4ED6\u53CD\u9988\u4E48\uFF1F",
         description: "\u60A8\u7684\u8BA2\u9605\u5C06\u88AB\u53D6\u6D88\uFF0C\u4F46\u4ECD\u7136\u53EF\u7528\u76F4\u5230\u60A8\u5F53\u524D\u8BA1\u8D39\u5468\u671F\u7ED3\u675F\u4E8E{date}",
+        trialDescription: "\u514D\u8D39\u8BD5\u7528\u7684\u8BA2\u9605\u5C06\u88AB\u7ACB\u5373\u53D6\u6D88\uFF0C\u4E0D\u518D\u53EF\u7528\uFF0C\u786E\u8BA4\u662F\u5426\u7EE7\u7EED",
         feedback: {
           tip: "\u6211\u4EEC\u5E0C\u671B\u542C\u5230\u60A8\u7684\u53CD\u9988\uFF0C\u8FD9\u5C06\u5E2E\u52A9\u6211\u4EEC\u6539\u8FDB\u6211\u4EEC\u7684\u670D\u52A1",
           too_expensive: "\u670D\u52A1\u8D39\u7528\u592A\u9AD8",
@@ -303,7 +304,8 @@ export default flat({
         threshold: "\u7528\u91CF\u8D26\u5355",
         cancel: "\u8BA2\u9605\u53D6\u6D88",
         manual: "\u4EBA\u5DE5\u8D26\u5355",
-        upcoming: "\u672A\u6765\u8D26\u5355"
+        upcoming: "\u672A\u6765\u8D26\u5355",
+        slashStake: "\u7F5A\u6CA1\u8D28\u62BC"
       }
     }
   },

package/es/payment/form/index.js

@@ -331,7 +331,7 @@ export default function PaymentForm({
           children: t("payment.checkout.paymentDetails")
         }
       ),
-      /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", className: "cko-payment-methods", children: [
+      /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", className: "cko-payment-methods", sx: { mb: 1 }, children: [
         /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
           Controller,
           {
@@ -360,7 +360,6 @@ export default function PaymentForm({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { mb: 1 }, alignItems: "center", justifyContent: "space-between" }),
       /* @__PURE__ */ jsxs(
         Stack,
         {

package/es/payment/summary.js

@@ -277,30 +277,14 @@ export default function PaymentSummary({
       /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, children: [
         /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
           /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.paymentRequired") }),
-          /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              title: /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.stakingConfirm") }),
-              placement: "top",
-              sx: { maxWidth: "150px" },
-              children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } })
-            }
-          )
+          /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.stakingConfirm"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
         ] }),
         /* @__PURE__ */ jsx(Typography, { children: headlines.amount })
       ] }),
       /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, children: [
         /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
           /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.staking.title") }),
-          /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              title: /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.staking.tooltip") }),
-              placement: "top",
-              sx: { maxWidth: "150px" },
-              children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } })
-            }
-          )
+          /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.staking.tooltip"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
         ] }),
         /* @__PURE__ */ jsxs(Typography, { children: [
           formatAmount(staking, currency.decimal),

package/es/theme/index.js

@@ -101,6 +101,11 @@ export function PaymentThemeProvider({
         defaultProps: {
           enterTouchDelay: 3e3,
           leaveTouchDelay: 100
+        },
+        styleOverrides: {
+          tooltip: {
+            fontSize: "0.875rem"
+          }
         }
       },
       MuiPopover: {

package/lib/checkout/table.js

@@ -17,6 +17,7 @@ var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 var _form = _interopRequireDefault(require("./form"));
 var _theme = require("../theme");
+var _truncatedText = _interopRequireDefault(require("../components/truncated-text"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const fetchData = async id => {
   const {
@@ -120,7 +121,8 @@ function CheckoutTableInner({
             sx: {
               display: "flex",
               marginBottom: "8px",
-              width: "fit-content"
+              width: "fit-content",
+              ml: 0
             }
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             color: "text.primary",
@@ -129,7 +131,11 @@ function CheckoutTableInner({
               lineHeight: "32px",
               fontSize: "24px"
             },
-            children: data.name
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_truncatedText.default, {
+              text: data.name,
+              maxLength: 60,
+              useWidth: true
+            })
           })]
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_pricingTable.default, {
           table: data,

package/lib/components/pricing-table.js

@@ -19,6 +19,7 @@ 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 }; }
 const sortOrder = {
   year: 1,
@@ -318,7 +319,11 @@ function PricingTable({
                       fontSize: "18px !important",
                       fontWeight: "600"
                     },
-                    children: x.product.name
+                    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_truncatedText.default, {
+                      text: x.product.name,
+                      maxLength: 26,
+                      useWidth: true
+                    })
                   }), x.is_highlight && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
                     label: x.highlight_text,
                     color: "default",

package/lib/components/truncated-text.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface TruncatedTextProps {
+    text?: string;
+    maxLength?: number;
+    useWidth?: boolean;
+}
+declare function TruncatedText({ text, maxLength, useWidth }: TruncatedTextProps): import("react").JSX.Element | null;
+declare namespace TruncatedText {
+    var defaultProps: {
+        useWidth: boolean;
+        text: string;
+        maxLength: number;
+    };
+}
+export default TruncatedText;

package/lib/components/truncated-text.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = TruncatedText;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _system = require("@mui/system");
+var _util = require("../libs/util");
+const CustomTooltip = (0, _system.styled)(({
+  className,
+  ...props
+}) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+  ...props,
+  classes: {
+    popper: className
+  }
+}))({
+  [`& .${_material.tooltipClasses.tooltip}`]: {
+    fontSize: 11,
+    maxHeight: 120,
+    maxWidth: 500,
+    overflowY: "auto"
+  }
+});
+function TruncatedText({
+  text = "",
+  maxLength = 100,
+  useWidth = false
+}) {
+  if (!text) {
+    return null;
+  }
+  const truncatedText = (0, _util.truncateText)(text, maxLength, useWidth);
+  if (!truncatedText.endsWith("...")) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
+      children: truncatedText
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(CustomTooltip, {
+    title: text,
+    placement: "bottom",
+    enterTouchDelay: 0,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
+      title: text,
+      children: truncatedText
+    })
+  });
+}
+TruncatedText.defaultProps = {
+  useWidth: false,
+  text: "",
+  maxLength: 100
+};

package/lib/history/invoice/list.js

@@ -99,7 +99,7 @@ const InvoiceTable = _react.default.memo(props => {
   const columns = [{
     label: t("common.amount"),
     name: "total",
-    width: 60,
+    width: 80,
     align: "right",
     options: {
       customBodyRenderLite: (_, index) => {
@@ -163,9 +163,8 @@ const InvoiceTable = _react.default.memo(props => {
     }
   }, {
     label: t("common.status"),
-    name: "created_at",
+    name: "status",
     options: {
-      sort: true,
       customBodyRenderLite: (val, index) => {
         const invoice = data?.list[index];
         const link = getInvoiceLink(invoice, action);
@@ -420,6 +419,9 @@ const InvoiceList = _react.default.memo(props => {
               color: "primary",
               size: "small",
               onClick: () => onPay(invoice.id),
+              sx: {
+                whiteSpace: "nowrap"
+              },
               children: t("payment.customer.invoice.pay")
             }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
               component: "a",
@@ -427,6 +429,9 @@ const InvoiceList = _react.default.memo(props => {
               size: "small",
               href: link.url,
               target: link.external ? "_blank" : target,
+              sx: {
+                whiteSpace: "nowrap"
+              },
               rel: "noreferrer",
               children: t("payment.customer.invoice.pay")
             }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {

package/lib/index.d.ts

@@ -25,6 +25,7 @@ import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
 import PricingItem from './components/pricing-item';
 import CountrySelect from './components/country-select';
+import TruncatedText from './components/truncated-text';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -33,4 +34,4 @@ export * from './hooks/subscription';
 export * from './hooks/mobile';
 export * from './hooks/table';
 export { translations, createTranslator } from './locales';
-export { 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, };
+export { 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, };

package/lib/index.js

@@ -31,6 +31,7 @@ var _exportNames = {
   PaymentSummary: true,
   PricingItem: true,
   CountrySelect: true,
+  TruncatedText: true,
   PaymentThemeProvider: true,
   translations: true,
   createTranslator: true
@@ -179,6 +180,12 @@ Object.defineProperty(exports, "Table", {
     return _table2.default;
   }
 });
+Object.defineProperty(exports, "TruncatedText", {
+  enumerable: true,
+  get: function () {
+    return _truncatedText.default;
+  }
+});
 Object.defineProperty(exports, "TxGas", {
   enumerable: true,
   get: function () {
@@ -242,6 +249,7 @@ var _productSkeleton = _interopRequireDefault(require("./payment/product-skeleto
 var _summary = _interopRequireDefault(require("./payment/summary"));
 var _pricingItem = _interopRequireDefault(require("./components/pricing-item"));
 var _countrySelect = _interopRequireDefault(require("./components/country-select"));
+var _truncatedText = _interopRequireDefault(require("./components/truncated-text"));
 var _theme = require("./theme");
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {

package/lib/libs/util.d.ts

@@ -106,3 +106,4 @@ export declare function formatSubscriptionStatus(status: string): string;
 export declare function formatAmountPrecisionLimit(amount: string, locale?: string, precision?: number): string;
 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;

package/lib/libs/util.js

@@ -51,10 +51,12 @@ exports.lazyLoad = lazyLoad;
 exports.mergeExtraParams = void 0;
 exports.sleep = sleep;
 exports.stopEvent = stopEvent;
+exports.truncateText = truncateText;
 var _util = require("@ocap/util");
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _trimEnd = _interopRequireDefault(require("lodash/trimEnd"));
 var _numbro = _interopRequireDefault(require("numbro"));
+var _stringWidth = _interopRequireDefault(require("string-width"));
 var _reactInternationalPhone = require("react-international-phone");
 var _ufo = require("ufo");
 var _locales = require("../locales");
@@ -982,4 +984,29 @@ function isMobileSafari() {
   const isMobile = ua.indexOf("mobile") > -1 || /iphone|ipad|ipod/.test(ua);
   const isIOS = /iphone|ipad|ipod/.test(ua);
   return isSafari && isMobile && isIOS;
+}
+function truncateText(text, maxLength, useWidth = false) {
+  if (!text || !maxLength) {
+    return text;
+  }
+  if (!useWidth) {
+    if (text.length <= maxLength) {
+      return text;
+    }
+    return `${text.substring(0, maxLength)}...`;
+  }
+  let width = 0;
+  let truncated = "";
+  for (let i = 0; i < text.length; i++) {
+    const charWidth = (0, _stringWidth.default)(text.charAt(i));
+    if (width + charWidth > maxLength) {
+      break;
+    }
+    truncated += text.charAt(i);
+    width += charWidth;
+  }
+  if (truncated === text) {
+    return truncated;
+  }
+  return `${truncated}...`;
 }

package/lib/locales/en.js

@@ -209,6 +209,7 @@ module.exports = (0, _flat.default)({
         title: "Cancel your subscription",
         comment: "Any additional feedback?",
         description: "Your subscription will be canceled, but it is still available until the end of your current billing period on {date}",
+        trialDescription: "Free trial subscriptions will be canceled immediately and no longer available, confirm to continue",
         feedback: {
           tip: "We would love your feedback, it will help us improve our service",
           too_expensive: "The service is too expensive",
@@ -310,7 +311,8 @@ module.exports = (0, _flat.default)({
         threshold: "Metered usage billing",
         cancel: "Subscription cancel",
         manual: "Manual invoice",
-        upcoming: "Upcoming invoice"
+        upcoming: "Upcoming invoice",
+        slashStake: "Slash stake"
       }
     }
   },

package/lib/locales/zh.js

@@ -209,6 +209,7 @@ module.exports = (0, _flat.default)({
         title: "\u53D6\u6D88\u60A8\u7684\u8BA2\u9605",
         comment: "\u4F60\u8FD8\u6709\u5176\u4ED6\u53CD\u9988\u4E48\uFF1F",
         description: "\u60A8\u7684\u8BA2\u9605\u5C06\u88AB\u53D6\u6D88\uFF0C\u4F46\u4ECD\u7136\u53EF\u7528\u76F4\u5230\u60A8\u5F53\u524D\u8BA1\u8D39\u5468\u671F\u7ED3\u675F\u4E8E{date}",
+        trialDescription: "\u514D\u8D39\u8BD5\u7528\u7684\u8BA2\u9605\u5C06\u88AB\u7ACB\u5373\u53D6\u6D88\uFF0C\u4E0D\u518D\u53EF\u7528\uFF0C\u786E\u8BA4\u662F\u5426\u7EE7\u7EED",
         feedback: {
           tip: "\u6211\u4EEC\u5E0C\u671B\u542C\u5230\u60A8\u7684\u53CD\u9988\uFF0C\u8FD9\u5C06\u5E2E\u52A9\u6211\u4EEC\u6539\u8FDB\u6211\u4EEC\u7684\u670D\u52A1",
           too_expensive: "\u670D\u52A1\u8D39\u7528\u592A\u9AD8",
@@ -310,7 +311,8 @@ module.exports = (0, _flat.default)({
         threshold: "\u7528\u91CF\u8D26\u5355",
         cancel: "\u8BA2\u9605\u53D6\u6D88",
         manual: "\u4EBA\u5DE5\u8D26\u5355",
-        upcoming: "\u672A\u6765\u8D26\u5355"
+        upcoming: "\u672A\u6765\u8D26\u5355",
+        slashStake: "\u7F5A\u6CA1\u8D28\u62BC"
       }
     }
   },

package/lib/payment/form/index.js

@@ -399,6 +399,9 @@ function PaymentForm({
             direction: "column",
             alignItems: "flex-start",
             className: "cko-payment-methods",
+            sx: {
+              mb: 1
+            },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
               direction: "row",
               sx: {
@@ -423,13 +426,6 @@ function PaymentForm({
               onCancel: onStripeCancel
             })]
           })
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-          direction: "row",
-          sx: {
-            mb: 1
-          },
-          alignItems: "center",
-          justifyContent: "space-between"
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "column",
           className: "cko-payment-form",

package/lib/payment/summary.js

@@ -342,9 +342,7 @@ function PaymentSummary({
               },
               children: t("payment.checkout.paymentRequired")
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
-              title: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                children: t("payment.checkout.stakingConfirm")
-              }),
+              title: t("payment.checkout.stakingConfirm"),
               placement: "top",
               sx: {
                 maxWidth: "150px"
@@ -374,9 +372,7 @@ function PaymentSummary({
               },
               children: t("payment.checkout.staking.title")
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
-              title: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                children: t("payment.checkout.staking.tooltip")
-              }),
+              title: t("payment.checkout.staking.tooltip"),
               placement: "top",
               sx: {
                 maxWidth: "150px"

package/lib/theme/index.js

@@ -115,6 +115,11 @@ function PaymentThemeProvider({
         defaultProps: {
           enterTouchDelay: 3e3,
           leaveTouchDelay: 100
+        },
+        styleOverrides: {
+          tooltip: {
+            fontSize: "0.875rem"
+          }
         }
       },
       MuiPopover: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.14.30",
+  "version": "1.14.32",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -53,16 +53,16 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.10.16",
-    "@arcblock/ux": "^2.10.16",
-    "@arcblock/ws": "^1.18.128",
-    "@blocklet/ui-react": "^2.10.16",
+    "@arcblock/did-connect": "^2.10.23",
+    "@arcblock/ux": "^2.10.23",
+    "@arcblock/ws": "^1.18.132",
+    "@blocklet/ui-react": "^2.10.23",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/styles": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.18.128",
+    "@ocap/util": "^1.18.132",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.14.30",
+    "@blocklet/payment-types": "1.14.32",
     "@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": "f98dee7bce684f81f4e060b942efaa9ad8730b55"
+  "gitHead": "347accd83eb9354f423e06670d53003b4fd40114"
 }

package/src/checkout/table.tsx

@@ -13,6 +13,7 @@ import { mergeExtraParams } from '../libs/util';
 import { CheckoutProps } from '../types';
 import CheckoutForm from './form';
 import { PaymentThemeProvider } from '../theme';
+import TruncatedText from '../components/truncated-text';
 
 const fetchData = async (id: string): Promise<TPricingTableExpanded> => {
   const { data } = await api.get(`/api/pricing-tables/${id}`);
@@ -100,7 +101,7 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
               },
               textAlign: 'center',
             }}>
-            {!data.livemode && <Livemode sx={{ display: 'flex', marginBottom: '8px', width: 'fit-content' }} />}
+            {!data.livemode && <Livemode sx={{ display: 'flex', marginBottom: '8px', width: 'fit-content', ml: 0 }} />}
             <Typography
               color="text.primary"
               fontWeight={600}
@@ -108,7 +109,7 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
                 lineHeight: '32px',
                 fontSize: '24px',
               }}>
-              {data.name}
+              <TruncatedText text={data.name} maxLength={60} useWidth />
             </Typography>
           </Box>
           <PricingTable table={data} onSelect={handleSelect} />

package/src/components/pricing-table.tsx

@@ -34,6 +34,7 @@ import {
 } from '../libs/util';
 import Amount from '../payment/amount';
 import { useMobile } from '../hooks/mobile';
+import TruncatedText from './truncated-text';
 
 type SortOrder = { [key: string]: number };
 
@@ -330,7 +331,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                           fontSize: '18px !important',
                           fontWeight: '600',
                         }}>
-                        {x.product.name}
+                        <TruncatedText text={x.product.name} maxLength={26} useWidth />
                       </Typography>
                       {x.is_highlight && (
                         <Chip

package/src/components/truncated-text.tsx

@@ -0,0 +1,41 @@
+import { Tooltip, TooltipProps, tooltipClasses } from '@mui/material';
+import { styled } from '@mui/system';
+import { truncateText } from '../libs/util';
+
+const CustomTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))({
+  [`& .${tooltipClasses.tooltip}`]: {
+    fontSize: 11,
+    maxHeight: 120,
+    maxWidth: 500,
+    overflowY: 'auto',
+  },
+});
+
+interface TruncatedTextProps {
+  text?: string;
+  maxLength?: number;
+  useWidth?: boolean;
+}
+
+export default function TruncatedText({ text = '', maxLength = 100, useWidth = false }: TruncatedTextProps) {
+  if (!text) {
+    return null;
+  }
+  const truncatedText = truncateText(text, maxLength, useWidth);
+  if (!truncatedText.endsWith('...')) {
+    return <span>{truncatedText}</span>;
+  }
+  return (
+    <CustomTooltip title={text} placement="bottom" enterTouchDelay={0}>
+      <span title={text}>{truncatedText}</span>
+    </CustomTooltip>
+  );
+}
+
+TruncatedText.defaultProps = {
+  useWidth: false,
+  text: '',
+  maxLength: 100,
+};

package/src/history/invoice/list.tsx

@@ -126,7 +126,7 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
     {
       label: t('common.amount'),
       name: 'total',
-      width: 60,
+      width: 80,
       align: 'right',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
@@ -191,9 +191,8 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
     },
     {
       label: t('common.status'),
-      name: 'created_at',
+      name: 'status',
       options: {
-        sort: true,
         customBodyRenderLite: (val: string, index: number) => {
           const invoice = data?.list[index] as TInvoiceExpanded;
           const link = getInvoiceLink(invoice, action);
@@ -396,7 +395,12 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                 <Box flex={1} textAlign="right">
                   {action ? (
                     link.connect ? (
-                      <Button variant="contained" color="primary" size="small" onClick={() => onPay(invoice.id)}>
+                      <Button
+                        variant="contained"
+                        color="primary"
+                        size="small"
+                        onClick={() => onPay(invoice.id)}
+                        sx={{ whiteSpace: 'nowrap' }}>
                         {t('payment.customer.invoice.pay')}
                       </Button>
                     ) : (
@@ -406,6 +410,7 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                         size="small"
                         href={link.url}
                         target={link.external ? '_blank' : target}
+                        sx={{ whiteSpace: 'nowrap' }}
                         rel="noreferrer">
                         {t('payment.customer.invoice.pay')}
                       </Button>

package/src/index.ts

@@ -25,6 +25,7 @@ import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
 import PricingItem from './components/pricing-item';
 import CountrySelect from './components/country-select';
+import TruncatedText from './components/truncated-text';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -65,4 +66,5 @@ export {
   PricingItem,
   CountrySelect,
   Table,
+  TruncatedText,
 };

package/src/libs/util.ts

@@ -19,6 +19,8 @@ import { BN, fromUnitToToken } from '@ocap/util';
 import omit from 'lodash/omit';
 import trimEnd from 'lodash/trimEnd';
 import numbro from 'numbro';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import stringWidth from 'string-width';
 import { defaultCountries } from 'react-international-phone';
 import { joinURL } from 'ufo';
 
@@ -1050,3 +1052,34 @@ export function isMobileSafari() {
   const isIOS = /iphone|ipad|ipod/.test(ua);
   return isSafari && isMobile && isIOS;
 }
+
+export function truncateText(text: string, maxLength: number, useWidth: boolean = false): string {
+  if (!text || !maxLength) {
+    return text;
+  }
+
+  if (!useWidth) {
+    if (text.length <= maxLength) {
+      return text;
+    }
+    return `${text.substring(0, maxLength)}...`;
+  }
+
+  let width = 0;
+  let truncated = '';
+
+  for (let i = 0; i < text.length; i++) {
+    const charWidth = stringWidth(text.charAt(i));
+    if (width + charWidth > maxLength) {
+      break;
+    }
+    truncated += text.charAt(i);
+    width += charWidth;
+  }
+
+  if (truncated === text) {
+    return truncated;
+  }
+
+  return `${truncated}...`;
+}

package/src/locales/en.tsx

@@ -208,6 +208,8 @@ export default flat({
         comment: 'Any additional feedback?',
         description:
           'Your subscription will be canceled, but it is still available until the end of your current billing period on {date}',
+        trialDescription:
+          'Free trial subscriptions will be canceled immediately and no longer available, confirm to continue',
         feedback: {
           tip: 'We would love your feedback, it will help us improve our service',
           too_expensive: 'The service is too expensive',
@@ -316,6 +318,7 @@ export default flat({
         cancel: 'Subscription cancel',
         manual: 'Manual invoice',
         upcoming: 'Upcoming invoice',
+        slashStake: 'Slash stake',
       },
     },
   },

package/src/locales/zh.tsx

@@ -204,6 +204,7 @@ export default flat({
         title: '取消您的订阅',
         comment: '你还有其他反馈么？',
         description: '您的订阅将被取消，但仍然可用直到您当前计费周期结束于{date}',
+        trialDescription: '免费试用的订阅将被立即取消，不再可用，确认是否继续',
         feedback: {
           tip: '我们希望听到您的反馈，这将帮助我们改进我们的服务',
           too_expensive: '服务费用太高',
@@ -307,6 +308,7 @@ export default flat({
         cancel: '订阅取消',
         manual: '人工账单',
         upcoming: '未来账单',
+        slashStake: '罚没质押',
       },
     },
   },

package/src/payment/form/index.tsx

@@ -416,7 +416,7 @@ export default function PaymentForm({
             {t('payment.checkout.paymentDetails')}
           </Typography>
           <Fade in>
-            <Stack direction="column" alignItems="flex-start" className="cko-payment-methods">
+            <Stack direction="column" alignItems="flex-start" className="cko-payment-methods" sx={{ mb: 1 }}>
               <Stack direction="row" sx={{ width: '100%' }}>
                 <Controller
                   name="payment_currency"
@@ -443,10 +443,6 @@ export default function PaymentForm({
               )}
             </Stack>
           </Fade>
-          <Stack direction="row" sx={{ mb: 1 }} alignItems="center" justifyContent="space-between">
-            {/* <Typography sx={{ color: 'text.secondary', fontWeight: 600 }}>{t('payment.checkout.contact')}</Typography> */}
-            {/* {isColumnLayout || mode !== 'standalone' ? null : <UserButtons />} */}
-          </Stack>
           <Stack
             direction="column"
             className="cko-payment-form"

package/src/payment/summary.tsx

@@ -335,10 +335,7 @@ export default function PaymentSummary({
             <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={1}>
               <Stack direction="row" alignItems="center" spacing={0.5}>
                 <Typography sx={{ color: 'text.secondary' }}>{t('payment.checkout.paymentRequired')}</Typography>
-                <Tooltip
-                  title={<Typography>{t('payment.checkout.stakingConfirm')}</Typography>}
-                  placement="top"
-                  sx={{ maxWidth: '150px' }}>
+                <Tooltip title={t('payment.checkout.stakingConfirm')} placement="top" sx={{ maxWidth: '150px' }}>
                   <HelpOutline fontSize="small" sx={{ color: 'text.lighter' }} />
                 </Tooltip>
               </Stack>
@@ -347,10 +344,7 @@ export default function PaymentSummary({
             <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={1}>
               <Stack direction="row" alignItems="center" spacing={0.5}>
                 <Typography sx={{ color: 'text.secondary' }}>{t('payment.checkout.staking.title')}</Typography>
-                <Tooltip
-                  title={<Typography>{t('payment.checkout.staking.tooltip')}</Typography>}
-                  placement="top"
-                  sx={{ maxWidth: '150px' }}>
+                <Tooltip title={t('payment.checkout.staking.tooltip')} placement="top" sx={{ maxWidth: '150px' }}>
                   <HelpOutline fontSize="small" sx={{ color: 'text.lighter' }} />
                 </Tooltip>
               </Stack>

package/src/theme/index.tsx

@@ -112,6 +112,11 @@ export function PaymentThemeProvider({
           enterTouchDelay: 3000,
           leaveTouchDelay: 100,
         },
+        styleOverrides: {
+          tooltip: {
+            fontSize: '0.875rem',
+          },
+        },
       },
       MuiPopover: {
         styleOverrides: {