@blocklet/payment-react 1.15.23 → 1.15.25

package/es/components/link.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    to: string;
+    children: React.ReactNode;
+    replace?: boolean;
+    target?: string;
+    outLink?: boolean;
+}
+declare function Link({ to, children, onClick, replace, target, outLink, ...props }: LinkProps): JSX.Element;
+declare namespace Link {
+    var defaultProps: {
+        replace: boolean;
+        target: undefined;
+        outLink: boolean;
+    };
+}
+export default Link;

package/es/components/link.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { useNavigate } from "react-router-dom";
+export default function Link({ to, children, onClick, replace, target, outLink = false, ...props }) {
+  const navigate = useNavigate();
+  const handleClick = (e) => {
+    const isInternal = to.startsWith("/") || to.startsWith("#") || to.startsWith("?");
+    if (!outLink && isInternal) {
+      e.preventDefault();
+      navigate(to, { replace });
+    } else if (!target) {
+      e.preventDefault();
+      window.location.href = to;
+    }
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx("a", { href: to, onClick: handleClick, target, rel: "noreferrer", ...props, children });
+}
+Link.defaultProps = {
+  replace: false,
+  target: void 0,
+  outLink: false
+};

package/es/components/pricing-table.js

@@ -21,7 +21,7 @@ import { styled } from "@mui/system";
 import { useSetState } from "ahooks";
 import { useEffect, useMemo, useState } from "react";
 import { BN } from "@ocap/util";
-import { isEmpty } from "lodash";
+import isEmpty from "lodash/isEmpty";
 import { usePaymentContext } from "../contexts/payment.js";
 import {
   formatError,

package/es/components/truncated-text.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { Tooltip, tooltipClasses } from "@mui/material";
+import { Tooltip } from "@mui/material";
+import { tooltipClasses } from "@mui/material/Tooltip";
 import { styled } from "@mui/system";
 import { truncateText } from "../libs/util.js";
 const CustomTooltip = styled(({ className, ...props }) => /* @__PURE__ */ jsx(Tooltip, { ...props, classes: { popper: className } }))({

package/es/index.d.ts

@@ -26,12 +26,14 @@ import PaymentSummary from './payment/summary';
 import PricingItem from './components/pricing-item';
 import CountrySelect from './components/country-select';
 import TruncatedText from './components/truncated-text';
+import Link from './components/link';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
+export * from './libs/phone-validator';
 export * from './contexts/payment';
 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, TruncatedText, };
+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, Link, };

package/es/index.js

@@ -26,9 +26,11 @@ 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";
+import Link from "./components/link.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
+export * from "./libs/phone-validator.js";
 export * from "./contexts/payment.js";
 export * from "./hooks/subscription.js";
 export * from "./hooks/mobile.js";
@@ -62,5 +64,6 @@ export {
   PricingItem,
   CountrySelect,
   Table,
-  TruncatedText
+  TruncatedText,
+  Link
 };

package/es/libs/phone-validator.d.ts

@@ -0,0 +1,2 @@
+export declare const getPhoneUtil: () => Promise<any>;
+export declare const validatePhoneNumber: (phoneNumber: string) => Promise<any>;

package/es/libs/phone-validator.js

@@ -0,0 +1,21 @@
+let phoneUtil = null;
+export const getPhoneUtil = async () => {
+  if (!phoneUtil) {
+    const { PhoneNumberUtil } = await import(
+      /* webpackChunkName: "phone-util" */
+      "google-libphonenumber"
+    );
+    phoneUtil = PhoneNumberUtil.getInstance();
+  }
+  return phoneUtil;
+};
+export const validatePhoneNumber = async (phoneNumber) => {
+  try {
+    const util = await getPhoneUtil();
+    const parsed = util.parseAndKeepRawInput(phoneNumber);
+    return util.isValidNumber(parsed);
+  } catch (err) {
+    console.error("Phone validation error:", err);
+    return false;
+  }
+};

package/es/locales/index.js

@@ -1,4 +1,4 @@
-import { template } from "lodash";
+import template from "lodash/template";
 import en from "./en.js";
 import zh from "./zh.js";
 export const translations = {

package/es/payment/form/index.js

@@ -5,14 +5,13 @@ import Toast from "@arcblock/ux/lib/Toast";
 import { LoadingButton } from "@mui/lab";
 import { Box, Divider, Fade, FormLabel, Stack, Typography } from "@mui/material";
 import { useMemoizedFn, useSetState } from "ahooks";
-import { PhoneNumberUtil } from "google-libphonenumber";
 import pWaitFor from "p-wait-for";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { joinURL } from "ufo";
 import { dispatch } from "use-bus";
 import isEmail from "validator/es/lib/isEmail";
-import { isEmpty } from "lodash";
+import isEmpty from "lodash/isEmpty";
 import ConfirmDialog from "../../components/confirm.js";
 import FormInput from "../../components/input.js";
 import { usePaymentContext } from "../../contexts/payment.js";
@@ -31,7 +30,7 @@ import CurrencySelector from "./currency.js";
 import PhoneInput from "./phone.js";
 import StripeCheckout from "./stripe.js";
 import { useMobile } from "../../hooks/mobile.js";
-const phoneUtil = PhoneNumberUtil.getInstance();
+import { validatePhoneNumber } from "../../libs/phone-validator.js";
 const waitForCheckoutComplete = async (sessionId) => {
   let result;
   await pWaitFor(
@@ -409,13 +408,9 @@ export default function PaymentForm({
                   placeholder: "Phone number",
                   rules: {
                     required: t("payment.checkout.required"),
-                    validate: (x) => {
-                      try {
-                        const parsed = phoneUtil.parseAndKeepRawInput(x);
-                        return phoneUtil.isValidNumber(parsed) ? true : t("payment.checkout.invalid");
-                      } catch {
-                        return t("payment.checkout.invalid");
-                      }
+                    validate: async (x) => {
+                      const isValid = await validatePhoneNumber(x);
+                      return isValid ? true : t("payment.checkout.invalid");
                     }
                   }
                 }

package/es/theme/index.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ThemeProvider, useTheme } from "@mui/material/styles";
 import { create } from "@arcblock/ux/lib/Theme";
-import { cloneDeep, merge } from "lodash";
+import cloneDeep from "lodash/cloneDeep";
+import merge from "lodash/merge";
 import { Box, CssBaseline } from "@mui/material";
 import { typography } from "./typography.js";
 import "./index.css";

package/lib/components/link.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    to: string;
+    children: React.ReactNode;
+    replace?: boolean;
+    target?: string;
+    outLink?: boolean;
+}
+declare function Link({ to, children, onClick, replace, target, outLink, ...props }: LinkProps): JSX.Element;
+declare namespace Link {
+    var defaultProps: {
+        replace: boolean;
+        target: undefined;
+        outLink: boolean;
+    };
+}
+export default Link;

package/lib/components/link.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = Link;
+var _jsxRuntime = require("react/jsx-runtime");
+var _reactRouterDom = require("react-router-dom");
+function Link({
+  to,
+  children,
+  onClick,
+  replace,
+  target,
+  outLink = false,
+  ...props
+}) {
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const handleClick = e => {
+    const isInternal = to.startsWith("/") || to.startsWith("#") || to.startsWith("?");
+    if (!outLink && isInternal) {
+      e.preventDefault();
+      navigate(to, {
+        replace
+      });
+    } else if (!target) {
+      e.preventDefault();
+      window.location.href = to;
+    }
+    onClick?.(e);
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
+    href: to,
+    onClick: handleClick,
+    target,
+    rel: "noreferrer",
+    ...props,
+    children
+  });
+}
+Link.defaultProps = {
+  replace: false,
+  target: void 0,
+  outLink: false
+};

package/lib/components/pricing-table.js

@@ -14,7 +14,7 @@ var _system = require("@mui/system");
 var _ahooks = require("ahooks");
 var _react = require("react");
 var _util = require("@ocap/util");
-var _lodash = require("lodash");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _payment = require("../contexts/payment");
 var _util2 = require("../libs/util");
 var _amount = _interopRequireDefault(require("../payment/amount"));
@@ -86,7 +86,7 @@ function PricingTable({
     grouped
   } = (0, _react.useMemo)(() => groupItemsByRecurring(table.items, currency), [table.items, currency]);
   const recurringKeysList = (0, _react.useMemo)(() => {
-    if ((0, _lodash.isEmpty)(recurring)) {
+    if ((0, _isEmpty.default)(recurring)) {
       return [];
     }
     return Object.keys(recurring).sort((a, b) => {

package/lib/components/truncated-text.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = TruncatedText;
 var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
+var _Tooltip = require("@mui/material/Tooltip");
 var _system = require("@mui/system");
 var _util = require("../libs/util");
 const CustomTooltip = (0, _system.styled)(({
@@ -17,7 +18,7 @@ const CustomTooltip = (0, _system.styled)(({
     popper: className
   }
 }))({
-  [`& .${_material.tooltipClasses.tooltip}`]: {
+  [`& .${_Tooltip.tooltipClasses.tooltip}`]: {
     fontSize: 11,
     maxHeight: 120,
     maxWidth: 500,

package/lib/index.d.ts

@@ -26,12 +26,14 @@ import PaymentSummary from './payment/summary';
 import PricingItem from './components/pricing-item';
 import CountrySelect from './components/country-select';
 import TruncatedText from './components/truncated-text';
+import Link from './components/link';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
+export * from './libs/phone-validator';
 export * from './contexts/payment';
 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, TruncatedText, };
+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, Link, };

package/lib/index.js

@@ -32,6 +32,7 @@ var _exportNames = {
   PricingItem: true,
   CountrySelect: true,
   TruncatedText: true,
+  Link: true,
   PaymentThemeProvider: true,
   translations: true,
   createTranslator: true
@@ -102,6 +103,12 @@ Object.defineProperty(exports, "FormInput", {
     return _input.default;
   }
 });
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function () {
+    return _link.default;
+  }
+});
 Object.defineProperty(exports, "Livemode", {
   enumerable: true,
   get: function () {
@@ -250,6 +257,7 @@ 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 _link = _interopRequireDefault(require("./components/link"));
 var _theme = require("./theme");
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {
@@ -275,6 +283,18 @@ Object.keys(_connect).forEach(function (key) {
     }
   });
 });
+var _phoneValidator = require("./libs/phone-validator");
+Object.keys(_phoneValidator).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _phoneValidator[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _phoneValidator[key];
+    }
+  });
+});
 var _payment = require("./contexts/payment");
 Object.keys(_payment).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/libs/phone-validator.d.ts

@@ -0,0 +1,2 @@
+export declare const getPhoneUtil: () => Promise<any>;
+export declare const validatePhoneNumber: (phoneNumber: string) => Promise<any>;

package/lib/libs/phone-validator.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validatePhoneNumber = exports.getPhoneUtil = void 0;
+let phoneUtil = null;
+const getPhoneUtil = async () => {
+  if (!phoneUtil) {
+    const {
+      PhoneNumberUtil
+    } = await Promise.resolve().then(() => require("google-libphonenumber"));
+    phoneUtil = PhoneNumberUtil.getInstance();
+  }
+  return phoneUtil;
+};
+exports.getPhoneUtil = getPhoneUtil;
+const validatePhoneNumber = async phoneNumber => {
+  try {
+    const util = await getPhoneUtil();
+    const parsed = util.parseAndKeepRawInput(phoneNumber);
+    return util.isValidNumber(parsed);
+  } catch (err) {
+    console.error("Phone validation error:", err);
+    return false;
+  }
+};
+exports.validatePhoneNumber = validatePhoneNumber;

package/lib/locales/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.translations = exports.translate = exports.t = exports.createTranslator = void 0;
-var _lodash = require("lodash");
+var _template = _interopRequireDefault(require("lodash/template"));
 var _en = _interopRequireDefault(require("./en"));
 var _zh = _interopRequireDefault(require("./zh"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -14,7 +14,7 @@ const translations = exports.translations = {
 };
 const replace = (t2, data = {}) => {
   try {
-    const compiled = (0, _lodash.template)(t2, {
+    const compiled = (0, _template.default)(t2, {
       interpolate: /{([\s\S]+?)}/g,
       escape: /{([\s\S]+?)}/g
     });

package/lib/payment/form/index.js

@@ -11,14 +11,13 @@ var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _lab = require("@mui/lab");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
-var _googleLibphonenumber = require("google-libphonenumber");
 var _pWaitFor = _interopRequireDefault(require("p-wait-for"));
 var _react = require("react");
 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 _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _confirm = _interopRequireDefault(require("../../components/confirm"));
 var _input = _interopRequireDefault(require("../../components/input"));
 var _payment = require("../../contexts/payment");
@@ -30,8 +29,8 @@ var _currency = _interopRequireDefault(require("./currency"));
 var _phone = _interopRequireDefault(require("./phone"));
 var _stripe = _interopRequireDefault(require("./stripe"));
 var _mobile = require("../../hooks/mobile");
+var _phoneValidator = require("../../libs/phone-validator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const phoneUtil = _googleLibphonenumber.PhoneNumberUtil.getInstance();
 const waitForCheckoutComplete = async sessionId => {
   let result;
   await (0, _pWaitFor.default)(async () => {
@@ -202,7 +201,7 @@ function PaymentForm({
     }
   };
   (0, _react.useEffect)(() => {
-    if (errorRef.current && !(0, _lodash.isEmpty)(errors) && isMobile) {
+    if (errorRef.current && !(0, _isEmpty.default)(errors) && isMobile) {
       errorRef.current.scrollIntoView({
         behavior: "smooth"
       });
@@ -336,7 +335,7 @@ function PaymentForm({
     });
   };
   const onAction = () => {
-    if (errorRef.current && !(0, _lodash.isEmpty)(errors) && isMobile) {
+    if (errorRef.current && !(0, _isEmpty.default)(errors) && isMobile) {
       errorRef.current.scrollIntoView({
         behavior: "smooth"
       });
@@ -431,7 +430,7 @@ function PaymentForm({
           className: "cko-payment-form",
           id: "cko-payment-form",
           spacing: 0,
-          ref: !(0, _lodash.isEmpty)(errors) ? errorRef : void 0,
+          ref: !(0, _isEmpty.default)(errors) ? errorRef : void 0,
           sx: {
             flex: 1,
             overflow: "auto",
@@ -469,13 +468,9 @@ function PaymentForm({
               placeholder: "Phone number",
               rules: {
                 required: t("payment.checkout.required"),
-                validate: x => {
-                  try {
-                    const parsed = phoneUtil.parseAndKeepRawInput(x);
-                    return phoneUtil.isValidNumber(parsed) ? true : t("payment.checkout.invalid");
-                  } catch {
-                    return t("payment.checkout.invalid");
-                  }
+                validate: async x => {
+                  const isValid = await (0, _phoneValidator.validatePhoneNumber)(x);
+                  return isValid ? true : t("payment.checkout.invalid");
                 }
               }
             })]

package/lib/theme/index.js

@@ -13,10 +13,12 @@ Object.defineProperty(exports, "typography", {
 var _jsxRuntime = require("react/jsx-runtime");
 var _styles = require("@mui/material/styles");
 var _Theme = require("@arcblock/ux/lib/Theme");
-var _lodash = require("lodash");
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _merge = _interopRequireDefault(require("lodash/merge"));
 var _material = require("@mui/material");
 var _typography = require("./typography");
 require("./index.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 PaymentThemeProvider.defaultProps = {
   theme: {}
 };
@@ -246,7 +248,7 @@ function PaymentThemeProvider({
       }
     }
   };
-  const mergeTheme = (0, _Theme.create)((0, _lodash.merge)((0, _lodash.cloneDeep)({
+  const mergeTheme = (0, _Theme.create)((0, _merge.default)((0, _cloneDeep.default)({
     ...parentTheme,
     typography: _typography.typography,
     palette: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.15.23",
+  "version": "1.15.25",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -53,15 +53,15 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.10.51",
-    "@arcblock/ux": "^2.10.51",
-    "@arcblock/ws": "^1.18.136",
-    "@blocklet/ui-react": "^2.10.51",
+    "@arcblock/did-connect": "^2.10.55",
+    "@arcblock/ux": "^2.10.55",
+    "@arcblock/ws": "^1.18.137",
+    "@blocklet/ui-react": "^2.10.55",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.18.136",
+    "@ocap/util": "^1.18.137",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.15.23",
+    "@blocklet/payment-types": "1.15.25",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -122,5 +122,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "94862642b9c4f0f753a47e8c68d9b70315d8f008"
+  "gitHead": "c7d493c6e185b11844ef0ceb8abe688f1faad67c"
 }

package/src/components/link.tsx

@@ -0,0 +1,39 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useNavigate } from 'react-router-dom';
+import React from 'react';
+
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  to: string;
+  children: React.ReactNode;
+  replace?: boolean; // 是否替换当前历史记录
+  target?: string; // 打开方式
+  outLink?: boolean;
+}
+
+export default function Link({ to, children, onClick, replace, target, outLink = false, ...props }: LinkProps) {
+  const navigate = useNavigate();
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    const isInternal = to.startsWith('/') || to.startsWith('#') || to.startsWith('?');
+    if (!outLink && isInternal) {
+      e.preventDefault();
+      navigate(to, { replace });
+    } else if (!target) {
+      e.preventDefault();
+      window.location.href = to;
+    }
+    onClick?.(e);
+  };
+
+  return (
+    <a href={to} onClick={handleClick} target={target} rel="noreferrer" {...props}>
+      {children}
+    </a>
+  );
+}
+
+Link.defaultProps = {
+  replace: false,
+  target: undefined,
+  outLink: false,
+};

package/src/components/pricing-table.tsx

@@ -23,7 +23,7 @@ import { useSetState } from 'ahooks';
 import { useEffect, useMemo, useState } from 'react';
 
 import { BN } from '@ocap/util';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import { usePaymentContext } from '../contexts/payment';
 import {
   formatError,

package/src/components/truncated-text.tsx

@@ -1,4 +1,5 @@
-import { Tooltip, TooltipProps, tooltipClasses } from '@mui/material';
+import { Tooltip, TooltipProps } from '@mui/material';
+import { tooltipClasses } from '@mui/material/Tooltip';
 import { styled } from '@mui/system';
 import { truncateText } from '../libs/util';
 

package/src/index.ts

@@ -26,11 +26,13 @@ import PaymentSummary from './payment/summary';
 import PricingItem from './components/pricing-item';
 import CountrySelect from './components/country-select';
 import TruncatedText from './components/truncated-text';
+import Link from './components/link';
 
 export { PaymentThemeProvider } from './theme';
 
 export * from './libs/util';
 export * from './libs/connect';
+export * from './libs/phone-validator';
 export * from './contexts/payment';
 export * from './hooks/subscription';
 export * from './hooks/mobile';
@@ -67,4 +69,5 @@ export {
   CountrySelect,
   Table,
   TruncatedText,
+  Link,
 };

package/src/libs/phone-validator.ts

@@ -0,0 +1,20 @@
+let phoneUtil: any = null;
+
+export const getPhoneUtil = async () => {
+  if (!phoneUtil) {
+    const { PhoneNumberUtil } = await import(/* webpackChunkName: "phone-util" */ 'google-libphonenumber');
+    phoneUtil = PhoneNumberUtil.getInstance();
+  }
+  return phoneUtil;
+};
+
+export const validatePhoneNumber = async (phoneNumber: string) => {
+  try {
+    const util = await getPhoneUtil();
+    const parsed = util.parseAndKeepRawInput(phoneNumber);
+    return util.isValidNumber(parsed);
+  } catch (err) {
+    console.error('Phone validation error:', err);
+    return false;
+  }
+};

package/src/locales/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-prototype-builtins */
-import { template } from 'lodash';
+import template from 'lodash/template';
 import en from './en';
 import zh from './zh';
 

package/src/payment/form/index.tsx

@@ -13,7 +13,6 @@ import type {
 import { LoadingButton } from '@mui/lab';
 import { Box, Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
 import { useMemoizedFn, useSetState } from 'ahooks';
-import { PhoneNumberUtil } from 'google-libphonenumber';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
@@ -21,7 +20,7 @@ import { joinURL } from 'ufo';
 import { dispatch } from 'use-bus';
 import isEmail from 'validator/es/lib/isEmail';
 
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import ConfirmDialog from '../../components/confirm';
 import FormInput from '../../components/input';
 import { usePaymentContext } from '../../contexts/payment';
@@ -41,8 +40,7 @@ import CurrencySelector from './currency';
 import PhoneInput from './phone';
 import StripeCheckout from './stripe';
 import { useMobile } from '../../hooks/mobile';
-
-const phoneUtil = PhoneNumberUtil.getInstance();
+import { validatePhoneNumber } from '../../libs/phone-validator';
 
 const waitForCheckoutComplete = async (sessionId: string) => {
   let result: CheckoutContext;
@@ -482,13 +480,9 @@ export default function PaymentForm({
                   placeholder="Phone number"
                   rules={{
                     required: t('payment.checkout.required'),
-                    validate: (x: string) => {
-                      try {
-                        const parsed = phoneUtil.parseAndKeepRawInput(x);
-                        return phoneUtil.isValidNumber(parsed) ? true : t('payment.checkout.invalid');
-                      } catch {
-                        return t('payment.checkout.invalid');
-                      }
+                    validate: async (x: string) => {
+                      const isValid = await validatePhoneNumber(x);
+                      return isValid ? true : t('payment.checkout.invalid');
                     },
                   }}
                 />

package/src/theme/index.tsx

@@ -1,6 +1,7 @@
 import { type Theme, ThemeProvider, useTheme } from '@mui/material/styles';
 import { create } from '@arcblock/ux/lib/Theme';
-import { cloneDeep, merge } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
+import merge from 'lodash/merge';
 import { Box, CssBaseline } from '@mui/material';
 import React from 'react';