@blocklet/payment-react 1.18.19 → 1.18.21

package/lib/payment/form/index.js

@@ -18,7 +18,6 @@ var _ufo = require("ufo");
 var _useBus = require("use-bus");
 var _isEmail = _interopRequireDefault(require("validator/es/lib/isEmail"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-var _confirm = _interopRequireDefault(require("../../components/confirm"));
 var _input = _interopRequireDefault(require("../../components/input"));
 var _payment = require("../../contexts/payment");
 var _subscription = require("../../hooks/subscription");
@@ -31,6 +30,7 @@ var _stripe = _interopRequireDefault(require("./stripe"));
 var _mobile = require("../../hooks/mobile");
 var _phoneValidator = require("../../libs/phone-validator");
 var _loadingButton = _interopRequireDefault(require("../../components/loading-button"));
+var _overDueInvoicePayment = _interopRequireDefault(require("../../components/over-due-invoice-payment"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const waitForCheckoutComplete = async sessionId => {
   let result;
@@ -58,6 +58,36 @@ const hasDidWallet = user => {
   return connected.some(x => x.provider === "wallet");
 };
 exports.hasDidWallet = hasDidWallet;
+const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
+  const {
+    preferExisting = true
+  } = options;
+  const basicFields = {
+    customer_name: userInfo.name || userInfo.fullName,
+    customer_email: userInfo.email,
+    customer_phone: (0, _phoneValidator.formatPhone)(userInfo.phone)
+  };
+  const addressFields = {
+    "billing_address.state": userInfo.address?.state || userInfo.address?.province,
+    "billing_address.line1": userInfo.address?.line1,
+    "billing_address.line2": userInfo.address?.line2,
+    "billing_address.city": userInfo.address?.city,
+    "billing_address.postal_code": userInfo.address?.postal_code || userInfo.address?.postalCode,
+    "billing_address.country": userInfo.address?.country
+  };
+  if (options.showPhone) {
+    addressFields["billing_address.country"] = userInfo.metadata?.phone?.country || userInfo.address?.country;
+  }
+  const allFields = {
+    ...addressFields,
+    ...basicFields
+  };
+  Object.entries(allFields).forEach(([field, value]) => {
+    if (!preferExisting || !currentValues[field.split(".")[0]]) {
+      setValue(field, value);
+    }
+  });
+};
 PaymentForm.defaultProps = {
   onlyShowBtn: false,
   isDonation: false
@@ -148,22 +178,28 @@ function PaymentForm({
   (0, _react.useEffect)(() => {
     if (session?.user) {
       const values = getValues();
-      if (!values.customer_name) {
-        setValue("customer_name", session.user.fullName);
-      }
-      if (!values.customer_email) {
-        setValue("customer_email", session.user.email);
-      }
-      if (!values.customer_phone) {
-        setValue("customer_phone", session.user.phone);
-      }
-    }
-    if (!session?.user) {
-      setValue("customer_name", "");
-      setValue("customer_email", "");
-      setValue("customer_phone", "");
+      setUserFormValues(session.user, values, setValue, {
+        preferExisting: false,
+        showPhone: checkoutSession.phone_number_collection?.enabled
+      });
+    } else {
+      setUserFormValues({
+        name: "",
+        email: "",
+        phone: "",
+        address: {
+          state: "",
+          line1: "",
+          line2: "",
+          city: "",
+          postal_code: ""
+        }
+      }, {}, setValue, {
+        preferExisting: false,
+        showPhone: checkoutSession.phone_number_collection?.enabled
+      });
     }
-  }, [session?.user, getValues, setValue]);
+  }, [session?.user, getValues, setValue, checkoutSession.phone_number_collection?.enabled]);
   (0, _react.useEffect)(() => {
     setValue("payment_method", currencies[paymentCurrencyIndex]?.method?.id);
     setValue("payment_currency", currencies[paymentCurrencyIndex]?.id);
@@ -199,7 +235,7 @@ function PaymentForm({
   });
   const method = paymentMethods.find(x => x.id === paymentMethod);
   const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
-  const showForm = session?.user;
+  const showForm = !!session?.user;
   const skipBindWallet = method.type === "stripe";
   const handleConnected = async () => {
     try {
@@ -232,33 +268,9 @@ function PaymentForm({
     } = await _api.default.get("/api/customers/me?fallback=1");
     if (profile) {
       const values = getValues();
-      if (!values.customer_name) {
-        setValue("customer_name", profile.name);
-      }
-      if (!values.customer_email) {
-        setValue("customer_email", profile.email);
-      }
-      if (!values.customer_phone) {
-        setValue("customer_phone", profile.phone);
-      }
-      if (profile.address?.country) {
-        setValue("billing_address.country", profile.address.country);
-      }
-      if (profile.address?.state) {
-        setValue("billing_address.state", profile.address.state);
-      }
-      if (profile.address?.line1) {
-        setValue("billing_address.line1", profile.address.line1);
-      }
-      if (profile.address?.line2) {
-        setValue("billing_address.line2", profile.address.line2);
-      }
-      if (profile.address?.city) {
-        setValue("billing_address.city", profile.address.city);
-      }
-      if (profile.address?.postal_code) {
-        setValue("billing_address.postal_code", profile.address.postal_code);
-      }
+      setUserFormValues(profile, values, setValue, {
+        showPhone: checkoutSession.phone_number_collection?.enabled
+      });
     }
   };
   const onFormSubmit = async data => {
@@ -445,15 +457,31 @@ function PaymentForm({
             }
           }), state.submitting || state.paying ? t("payment.checkout.processing") : buttonText]
         })
-      }), state.customerLimited && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
-        onConfirm: () => window.open((0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`), "_self"),
-        onCancel: () => setState({
-          customerLimited: false
-        }),
-        confirm: t("payment.customer.pastDue.alert.confirm"),
-        title: t("payment.customer.pastDue.alert.title"),
-        message: t("payment.customer.pastDue.alert.description"),
-        color: "primary"
+      }), state.customerLimited && /* @__PURE__ */(0, _jsxRuntime.jsx)(_overDueInvoicePayment.default, {
+        customerId: customer?.id || session?.user?.did,
+        onPaid: () => {
+          setState({
+            customerLimited: false
+          });
+          onAction();
+        },
+        alertMessage: t("payment.customer.pastDue.alert.customMessage"),
+        detailLinkOptions: {
+          enabled: true,
+          onClick: () => {
+            setState({
+              customerLimited: false
+            });
+            window.open((0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`), "_self");
+          }
+        },
+        dialogProps: {
+          open: state.customerLimited,
+          onClose: () => setState({
+            customerLimited: false
+          }),
+          title: t("payment.customer.pastDue.alert.title")
+        }
       })]
     });
   }
@@ -600,15 +628,31 @@ function PaymentForm({
           })
         })]
       })
-    }), state.customerLimited && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
-      onConfirm: () => window.open((0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`), "_self"),
-      onCancel: () => setState({
-        customerLimited: false
-      }),
-      confirm: t("payment.customer.pastDue.alert.confirm"),
-      title: t("payment.customer.pastDue.alert.title"),
-      message: t("payment.customer.pastDue.alert.description"),
-      color: "primary"
+    }), state.customerLimited && /* @__PURE__ */(0, _jsxRuntime.jsx)(_overDueInvoicePayment.default, {
+      customerId: customer?.id || session?.user?.didssion?.user?.did,
+      onPaid: () => {
+        setState({
+          customerLimited: false
+        });
+        onAction();
+      },
+      alertMessage: t("payment.customer.pastDue.alert.customMessage"),
+      detailLinkOptions: {
+        enabled: true,
+        onClick: () => {
+          setState({
+            customerLimited: false
+          });
+          window.open((0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`), "_self");
+        }
+      },
+      dialogProps: {
+        open: state.customerLimited,
+        onClose: () => setState({
+          customerLimited: false
+        }),
+        title: t("payment.customer.pastDue.alert.title")
+      }
     })]
   });
 }

package/lib/payment/form/phone.js

@@ -24,6 +24,18 @@ function PhoneInput({
     setValue
   } = (0, _reactHookForm.useFormContext)();
   const values = getValues();
+  const isUpdatingRef = (0, _react.useRef)(false);
+  const safeUpdate = (0, _react.useCallback)(callback => {
+    if (isUpdatingRef.current) return;
+    try {
+      isUpdatingRef.current = true;
+      callback();
+    } finally {
+      requestAnimationFrame(() => {
+        isUpdatingRef.current = false;
+      });
+    }
+  }, []);
   const {
     phone,
     handlePhoneValueChange,
@@ -35,8 +47,10 @@ function PhoneInput({
     value: values[props.name] || "",
     countries: _reactInternationalPhone.defaultCountries,
     onChange: data => {
-      setValue(props.name, data.phone);
-      setValue(countryFieldName, data.country);
+      safeUpdate(() => {
+        setValue(props.name, data.phone);
+        setValue(countryFieldName, data.country);
+      });
     }
   });
   const userCountry = (0, _reactHookForm.useWatch)({
@@ -44,14 +58,16 @@ function PhoneInput({
     name: countryFieldName
   });
   (0, _react.useEffect)(() => {
-    if (userCountry !== country) {
+    if (!userCountry || userCountry === country) return;
+    safeUpdate(() => {
       setCountry(userCountry);
-    }
-  }, [userCountry]);
-  const onCountryChange = v => {
-    setCountry(v);
-    setValue(countryFieldName, v);
-  };
+    });
+  }, [userCountry, country, setCountry, safeUpdate]);
+  const onCountryChange = (0, _react.useCallback)(v => {
+    safeUpdate(() => {
+      setCountry(v);
+    });
+  }, [setCountry, safeUpdate]);
   return (
     // @ts-ignore
     /* @__PURE__ */

package/lib/payment/index.js

@@ -28,6 +28,7 @@ var _payment2 = _interopRequireDefault(require("./skeleton/payment"));
 var _success = _interopRequireDefault(require("./success"));
 var _summary = _interopRequireDefault(require("./summary"));
 var _mobile = require("../hooks/mobile");
+var _phoneValidator = require("../libs/phone-validator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 PaymentInner.defaultProps = {
   completed: false,
@@ -68,18 +69,18 @@ function PaymentInner({
     defaultValues: {
       customer_name: customer?.name || session?.user?.fullName || "",
       customer_email: customer?.email || session?.user?.email || "",
-      customer_phone: customer?.phone || session?.user?.phone || "",
+      customer_phone: (0, _phoneValidator.formatPhone)(customer?.phone || session?.user?.phone || ""),
       payment_method: defaultMethodId,
       payment_currency: defaultCurrencyId,
       billing_address: Object.assign({
-        country: "",
-        state: "",
-        city: "",
-        line1: "",
-        line2: "",
-        postal_code: ""
+        country: session?.user?.address?.country || "",
+        state: session?.user?.address?.province || "",
+        city: session?.user?.address?.city || "",
+        line1: session?.user?.address?.line1 || "",
+        line2: session?.user?.address?.line2 || "",
+        postal_code: session?.user?.address?.postalCode || ""
       }, customer?.address || {}, {
-        country: (0, _util2.isValidCountry)(customer?.address?.country || "") ? customer?.address?.country : "us"
+        country: (0, _util2.isValidCountry)(customer?.address?.country || session?.user?.address?.country || "") ? customer?.address?.country : "us"
       })
     }
   });

package/lib/payment/product-donation.js

@@ -47,9 +47,6 @@ function ProductDonation({
     }
   };
   const getDefaultPreset = () => {
-    if (settings?.amount?.preset) {
-      return formatAmount(settings.amount.preset);
-    }
     try {
       const savedPreset = localStorage.getItem(getUserStorageKey(DONATION_PRESET_KEY_BASE));
       if (savedPreset) {
@@ -65,7 +62,13 @@ function ProductDonation({
     }
     if (presets.length > 0) {
       const middleIndex = Math.floor(presets.length / 2);
-      return presets[middleIndex] || presets[0];
+      return presets[middleIndex];
+    }
+    if (settings?.amount?.preset) {
+      return formatAmount(settings.amount.preset);
+    }
+    if (presets.length > 0) {
+      return presets[0];
     }
     return "0";
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.19",
+  "version": "1.18.21",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,10 +54,10 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.12.36",
-    "@arcblock/ux": "^2.12.36",
+    "@arcblock/did-connect": "^2.12.43",
+    "@arcblock/ux": "^2.12.43",
     "@arcblock/ws": "^1.19.15",
-    "@blocklet/ui-react": "^2.12.36",
+    "@blocklet/ui-react": "^2.12.43",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -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.18.19",
+    "@blocklet/payment-types": "1.18.21",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -124,5 +124,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "eabd58598ad349a5177dca2e6302c82117d9b687"
+  "gitHead": "cf08902482dded20ee91402ed6d4678383965daf"
 }

package/src/components/over-due-invoice-payment.tsx

@@ -35,6 +35,7 @@ type Props = {
   dialogProps?: DialogProps;
   detailLinkOptions?: DetailLinkOptions;
   successToast?: boolean;
+  alertMessage?: string; // only for customer
   children?: (
     handlePay: (item: SummaryItem) => void,
     data: {
@@ -88,6 +89,7 @@ function OverdueInvoicePayment({
   onPaid = () => {},
   detailLinkOptions = { enabled: true },
   successToast = true,
+  alertMessage = '',
 }: Props) {
   const { t } = useLocaleContext();
   const { connect } = usePaymentContext();
@@ -99,7 +101,6 @@ function OverdueInvoicePayment({
 
   const sourceType = subscriptionId ? 'subscription' : 'customer';
   const sourceId = subscriptionId || customerId;
-
   const {
     data = {
       summary: {},
@@ -340,19 +341,25 @@ function OverdueInvoicePayment({
       });
     }
     if (customerId) {
+      let title = '';
       if (summaryList.length === 1) {
-        return t('payment.customer.overdue.title', {
+        title = t('payment.customer.overdue.title', {
           subscriptionCount: data.subscriptionCount || 0,
           count: data.invoices?.length,
           total: formatAmount(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
           symbol: summaryList[0]?.currency?.symbol,
           method: getMethodText(summaryList[0]?.method),
         });
+      } else {
+        title = t('payment.customer.overdue.simpleTitle', {
+          subscriptionCount: data.subscriptionCount || 0,
+          count: data.invoices?.length,
+        });
       }
-      return t('payment.customer.overdue.simpleTitle', {
-        subscriptionCount: data.subscriptionCount || 0,
-        count: data.invoices?.length,
-      });
+      if (alertMessage) {
+        return `${title}${alertMessage}`;
+      }
+      return `${title}${t('payment.customer.overdue.defaultAlert')}`;
     }
 
     return '';
@@ -512,6 +519,7 @@ OverdueInvoicePayment.defaultProps = {
   subscriptionId: undefined,
   customerId: undefined,
   successToast: true,
+  alertMessage: '',
 };
 
 export default OverdueInvoicePayment;

package/src/libs/phone-validator.ts

@@ -2,7 +2,11 @@ let phoneUtil: any = null;
 
 export const getPhoneUtil = async () => {
   if (!phoneUtil) {
-    const { PhoneNumberUtil } = await import(/* webpackChunkName: "phone-util" */ 'google-libphonenumber');
+    const result = await import(/* webpackChunkName: "phone-util" */ 'google-libphonenumber');
+    const PhoneNumberUtil = (result.default || result)?.PhoneNumberUtil;
+    if (!PhoneNumberUtil) {
+      throw new Error('PhoneNumberUtil not found');
+    }
     phoneUtil = PhoneNumberUtil.getInstance();
   }
   return phoneUtil;
@@ -10,7 +14,14 @@ export const getPhoneUtil = async () => {
 
 export const validatePhoneNumber = async (phoneNumber: string) => {
   try {
-    const util = await getPhoneUtil();
+    let util: any = null;
+    try {
+      util = await getPhoneUtil();
+    } catch (err) {
+      const pattern = /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,6}$/im;
+      return pattern.test(phoneNumber);
+    }
+
     const parsed = util.parseAndKeepRawInput(phoneNumber);
     return util.isValidNumber(parsed);
   } catch (err) {
@@ -18,3 +29,79 @@ export const validatePhoneNumber = async (phoneNumber: string) => {
     return false;
   }
 };
+
+/**
+ * Format a phone number to international format
+ * @param phoneNumber The original phone number
+ * @param defaultCountry Default country code (ISO 3166-1 alpha-2)
+ * @returns Formatted phone number
+ */
+export const formatPhone = (phoneNumber: string | undefined, defaultCountry = 'US') => {
+  if (!phoneNumber || phoneNumber.trim() === '') {
+    return '';
+  }
+
+  // Remove all non-digit characters (preserve plus sign)
+  const cleanedNumber = phoneNumber.replace(/[^\d+]/g, '');
+
+  // If already in international format (starting with +), return cleaned number
+  if (cleanedNumber.startsWith('+')) {
+    return cleanedNumber;
+  }
+
+  // Country code mapping
+  const COUNTRY_CODES: Record<string, string> = {
+    US: '1', // United States
+    CA: '1', // Canada
+    CN: '86', // China
+    HK: '852', // Hong Kong
+    IN: '91', // India
+    UK: '44', // United Kingdom
+    GB: '44', // United Kingdom
+    JP: '81', // Japan
+    KR: '82', // South Korea
+    AU: '61', // Australia
+    DE: '49', // Germany
+    FR: '33', // France
+    IT: '39', // Italy
+    ES: '34', // Spain
+    BR: '55', // Brazil
+    RU: '7', // Russia
+    MX: '52', // Mexico
+    SG: '65', // Singapore
+    AE: '971', // UAE
+  };
+
+  // Country-specific patterns
+  const COUNTRY_PATTERNS: [RegExp, string][] = [
+    [/^1[3-9]\d{9}$/, '86'], // China mobile: 11 digits, starts with 1
+    [/^\d{10}$/, '1'], // US/Canada: 10 digits
+    [/^[6-9]\d{9}$/, '91'], // India: 10 digits, starts with 6-9
+    [/^0[1-9]\d{8,9}$/, '81'], // Japan: 10-11 digits, starts with 0
+    [/^07\d{9}$/, '44'], // UK mobile: 11 digits, starts with 07
+    [/^04\d{8}$/, '61'], // Australia mobile: 10 digits, starts with 04
+    [/^01[0-9]\d{7,8}$/, '82'], // Korea mobile: 10-11 digits, starts with 01
+    [/^[0-9]\d{8}$/, '86'], // China landline: 9 digits
+  ];
+
+  // Remove leading zero (common in many countries)
+  let numberToFormat = cleanedNumber;
+  if (numberToFormat.startsWith('0')) {
+    numberToFormat = numberToFormat.substring(1);
+  }
+
+  // Try to match with country-specific patterns
+  for (const [pattern, countryCode] of COUNTRY_PATTERNS) {
+    if (pattern.test(cleanedNumber)) {
+      // For numbers starting with 0 that need the zero removed
+      if (cleanedNumber.startsWith('0') && !['1', '86'].includes(countryCode)) {
+        return `+${countryCode}${cleanedNumber.substring(1)}`;
+      }
+      return `+${countryCode}${cleanedNumber}`;
+    }
+  }
+
+  // If no pattern matched, use default country code
+  const countryCode = COUNTRY_CODES[defaultCountry.toUpperCase()] || defaultCountry;
+  return `+${countryCode}${numberToFormat}`;
+};

package/src/locales/en.tsx

@@ -134,6 +134,7 @@ export default flat({
         empty: 'No supporters yet',
         gaveTips: '{count} people gave tips',
         tipAmount: 'Tip Amount',
+        tabHint: 'to switch amount',
         benefits: {
           one: '{name} will receive all tips',
           multiple: 'Tips will be distributed to {count} beneficiaries',
@@ -147,7 +148,7 @@ export default flat({
         later: 'Configure Later',
         configTip: 'Configure donation settings in Payment Kit',
       },
-      cardPay: '{action} with card',
+      cardPay: '{action} with bank card',
       empty: 'No thing to pay',
       per: 'per',
       pay: 'Pay {payee}',
@@ -248,8 +249,7 @@ export default flat({
         warning: 'Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore.',
         alert: {
           title: 'You have unpaid invoices',
-          description:
-            'Seems you have unpaid invoices from previous subscriptions, new purchases are not allowed unless you have paid all past due invoices.',
+          customMessage: 'Please pay immediately, otherwise new purchases or subscriptions will be prohibited.',
           confirm: 'Pay Now',
         },
         view: 'View Due Invoices',
@@ -330,9 +330,10 @@ export default flat({
       },
       overdue: {
         title:
-          'You have {count} due invoices for {subscriptionCount} subscriptions, totaling {total} {symbol}{method}. Please pay immediately to avoid service disruption.',
-        simpleTitle: 'You have {count} due invoices. Please pay now to ensure uninterrupted service.',
+          'You have {count} due invoices for {subscriptionCount} subscriptions, totaling {total} {symbol}{method}. ',
+        simpleTitle: 'You have {count} due invoices. ',
         empty: 'Great! You have no due invoices.',
+        defaultAlert: 'Please pay immediately to avoid service disruption.',
       },
     },
     invoice: {

package/src/locales/zh.tsx

@@ -133,6 +133,7 @@ export default flat({
         empty: '❤️ 支持一下',
         gaveTips: '已有 {count} 人打赏',
         tipAmount: '打赏金额',
+        tabHint: '快速切换金额',
         benefits: {
           one: '{name} 将获得全部打赏',
           multiple: '打赏将按比例分配给 {count} 位受益人',
@@ -146,7 +147,7 @@ export default flat({
         later: '稍后配置',
         configTip: '前往 Payment Kit 配置打赏选项',
       },
-      cardPay: '使用卡片{action}',
+      cardPay: '使用银行卡{action}',
       empty: '没有可支付的项目',
       per: '每',
       pay: '付款给 {payee}',
@@ -244,6 +245,7 @@ export default flat({
         alert: {
           title: '你有欠费账单',
           description: '看起来你有欠费的账单，在你支付所有欠费账单之前，新的购买或者订阅将被禁止，请不要调皮。',
+          customMessage: '请立即支付，否则新的购买或者订阅将被禁止。',
           confirm: '去支付',
         },
         view: '查看欠费明细',
@@ -320,10 +322,10 @@ export default flat({
         owner: '订阅拥有者',
       },
       overdue: {
-        title:
-          '您有 {count} 张欠费账单，涉及 {subscriptionCount} 个订阅，总金额 {total} {symbol}{method}。请立即支付，以免影响您的使用。',
-        simpleTitle: '您有 {count} 张欠费账单，请立即支付，以免影响您的使用。',
+        title: '您有 {count} 张欠费账单，涉及 {subscriptionCount} 个订阅，总金额 {total} {symbol}{method}。',
+        simpleTitle: '您有 {count} 张欠费账单,',
         empty: '恭喜！您当前没有欠费账单。',
+        defaultAlert: '请立即支付，以免影响您的使用。',
       },
     },
     invoice: {