@blocklet/payment-react 1.14.29 → 1.14.31

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

@@ -105,3 +105,5 @@ export declare function formatQuantityInventory(price: TPrice, quantity: string
 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

@@ -44,16 +44,19 @@ exports.getSubscriptionStatusColor = getSubscriptionStatusColor;
 exports.getTxLink = exports.getSubscriptionTimeSummary = void 0;
 exports.getWebhookStatusColor = getWebhookStatusColor;
 exports.getWordBreakStyle = getWordBreakStyle;
+exports.isMobileSafari = isMobileSafari;
 exports.isPaymentKitMounted = void 0;
 exports.isValidCountry = isValidCountry;
 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");
@@ -974,4 +977,36 @@ function getWordBreakStyle(value) {
     return "break-word";
   }
   return "break-all";
+}
+function isMobileSafari() {
+  const ua = navigator.userAgent.toLowerCase();
+  const isSafari = ua.indexOf("safari") > -1 && ua.indexOf("chrome") === -1;
+  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

@@ -18,6 +18,7 @@ var _reactHookForm = require("react-hook-form");
 var _ufo = require("ufo");
 var _useBus = require("use-bus");
 var _isEmail = _interopRequireDefault(require("validator/es/lib/isEmail"));
+var _lodash = require("lodash");
 var _confirm = _interopRequireDefault(require("../../components/confirm"));
 var _input = _interopRequireDefault(require("../../components/input"));
 var _payment = require("../../contexts/payment");
@@ -28,6 +29,7 @@ var _address = _interopRequireDefault(require("./address"));
 var _currency = _interopRequireDefault(require("./currency"));
 var _phone = _interopRequireDefault(require("./phone"));
 var _stripe = _interopRequireDefault(require("./stripe"));
+var _mobile = require("../../hooks/mobile");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const phoneUtil = _googleLibphonenumber.PhoneNumberUtil.getInstance();
 const waitForCheckoutComplete = async sessionId => {
@@ -66,6 +68,9 @@ function PaymentForm({
   const {
     t
   } = (0, _context.useLocaleContext)();
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
   const {
     session,
     connect,
@@ -76,8 +81,12 @@ function PaymentForm({
     control,
     getValues,
     setValue,
-    handleSubmit
+    handleSubmit,
+    formState: {
+      errors
+    }
   } = (0, _reactHookForm.useFormContext)();
+  const errorRef = (0, _react.useRef)(null);
   const quantityInventoryStatus = (0, _react.useMemo)(() => {
     let status = true;
     for (const item of checkoutSession.line_items) {
@@ -190,6 +199,13 @@ function PaymentForm({
       });
     }
   };
+  (0, _react.useEffect)(() => {
+    if (errorRef.current && !(0, _lodash.isEmpty)(errors) && isMobile) {
+      errorRef.current.scrollIntoView({
+        behavior: "smooth"
+      });
+    }
+  }, [errors, isMobile]);
   const onUserLoggedIn = async () => {
     const {
       data: profile
@@ -318,6 +334,11 @@ function PaymentForm({
     });
   };
   const onAction = () => {
+    if (errorRef.current && !(0, _lodash.isEmpty)(errors) && isMobile) {
+      errorRef.current.scrollIntoView({
+        behavior: "smooth"
+      });
+    }
     if (session?.user) {
       if (hasDidWallet(session.user)) {
         handleSubmit(onFormSubmit, onFormError)();
@@ -412,7 +433,9 @@ function PaymentForm({
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "column",
           className: "cko-payment-form",
+          id: "cko-payment-form",
           spacing: 0,
+          ref: !(0, _lodash.isEmpty)(errors) ? errorRef : void 0,
           sx: {
             flex: 1,
             overflow: "auto"
@@ -477,16 +500,19 @@ function PaymentForm({
       in: true,
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "cko-payment-submit",
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
-          variant: "contained",
-          color: "primary",
-          size: "large",
-          className: "cko-submit-button",
-          onClick: onAction,
-          fullWidth: true,
-          disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
-          loading: state.submitting || state.paying,
-          children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          className: "cko-payment-submit-btn",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+            variant: "contained",
+            color: "primary",
+            size: "large",
+            className: "cko-submit-button",
+            onClick: onAction,
+            fullWidth: true,
+            disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
+            loading: state.submitting || state.paying,
+            children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
+          })
         }), ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
             mt: 2.5,

package/lib/payment/index.js

@@ -81,6 +81,24 @@ function PaymentInner({
       })
     }
   });
+  (0, _react.useEffect)(() => {
+    if (!(0, _util2.isMobileSafari)()) {
+      return () => {};
+    }
+    let scrollTop = 0;
+    const focusinHandler = () => {
+      scrollTop = window.scrollY;
+    };
+    const focusoutHandler = () => {
+      window.scrollTo(0, scrollTop);
+    };
+    document.body.addEventListener("focusin", focusinHandler);
+    document.body.addEventListener("focusout", focusoutHandler);
+    return () => {
+      document.body.removeEventListener("focusin", focusinHandler);
+      document.body.removeEventListener("focusout", focusoutHandler);
+    };
+  }, []);
   const currencyId = (0, _reactHookForm.useWatch)({
     control: methods.control,
     name: "payment_currency",
@@ -280,7 +298,11 @@ function Payment({
     setLivemode
   } = (0, _payment.usePaymentContext)();
   const [delay, setDelay] = (0, _react.useState)(false);
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
   const hideSummaryCard = mode.endsWith("-minimal") || !showCheckoutSummary;
+  const isMobileSafariEnv = (0, _util2.isMobileSafari)();
   (0, _react.useEffect)(() => {
     setTimeout(() => {
       setDelay(true);
@@ -359,7 +381,7 @@ function Payment({
     flexDirection: "column",
     sx: {
       height: mode === "standalone" ? "100vh" : "auto",
-      overflow: "hidden"
+      overflow: isMobileSafariEnv ? "visible" : "hidden"
     },
     children: [mode === "standalone" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_Header.default, {
       meta: void 0,
@@ -375,7 +397,39 @@ function Payment({
     }) : null, /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
       mode,
       sx: {
-        flex: 1
+        flex: 1,
+        overflow: {
+          xs: isMobileSafariEnv ? "visible" : "auto",
+          md: "hidden"
+        },
+        ...(isMobile && mode === "standalone" ? {
+          ".cko-payment-submit-btn": {
+            position: "fixed",
+            bottom: 20,
+            left: 0,
+            right: 0,
+            zIndex: 999,
+            background: "#fff",
+            padding: "10px",
+            textAlign: "center",
+            button: {
+              color: "#fff",
+              maxWidth: 542
+            }
+          },
+          ".cko-footer": {
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 999,
+            background: "#fff",
+            marginBottom: 0
+          },
+          ".cko-payment": {
+            paddingBottom: "100px"
+          }
+        } : {})
       },
       children: [goBack && /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.ArrowBackOutlined, {
         sx: {
@@ -541,7 +595,6 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   @media (max-width: ${({
   theme
 }) => theme.breakpoints.values.md}px) {
-    background: ${props => props.mode === "standalone" ? "var(--backgrounds-bg-subtle, #F9FAFB)" : "transparent"};
     padding-top: 0;
     overflow: auto;
     &:before {
@@ -550,7 +603,8 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
     .cko-container {
       flex-direction: column;
       align-items: center;
-      gap: 32px;
+      justify-content: flex-start;
+      gap: 0;
       overflow: visible;
       min-width: 200px;
     }
@@ -563,6 +617,7 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
       width: 100%;
       height: fit-content;
       flex: none;
+      border-top: 1px solid var(--stroke-border-base, #eff1f5);
       &:before {
         display: none;
       }

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.29",
+  "version": "1.14.31",
   "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.29",
+    "@blocklet/payment-types": "1.14.31",
     "@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": "104f4189d9ef96c1e332ffa90824ebd3063c989d"
+  "gitHead": "bd36f69fcd955be6b1353b520879bbb3c1e3266f"
 }

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