@blocklet/payment-react 1.18.19 → 1.18.21

package/es/payment/form/phone.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { InputAdornment } from "@mui/material";
 import omit from "lodash/omit";
-import { useEffect } from "react";
+import { useEffect, useRef, useCallback } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { defaultCountries, usePhoneInput } from "react-international-phone";
 import FormInput from "../../components/input.js";
@@ -11,25 +11,46 @@ export default function PhoneInput({ ...props }) {
   const countryFieldName = props.countryFieldName || "billing_address.country";
   const { control, getValues, setValue } = useFormContext();
   const values = getValues();
+  const isUpdatingRef = useRef(false);
+  const safeUpdate = useCallback((callback) => {
+    if (isUpdatingRef.current)
+      return;
+    try {
+      isUpdatingRef.current = true;
+      callback();
+    } finally {
+      requestAnimationFrame(() => {
+        isUpdatingRef.current = false;
+      });
+    }
+  }, []);
   const { phone, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
     defaultCountry: isValidCountry(values[countryFieldName]) ? values[countryFieldName] : "us",
     value: values[props.name] || "",
     countries: defaultCountries,
     onChange: (data) => {
-      setValue(props.name, data.phone);
-      setValue(countryFieldName, data.country);
+      safeUpdate(() => {
+        setValue(props.name, data.phone);
+        setValue(countryFieldName, data.country);
+      });
     }
   });
   const userCountry = useWatch({ control, name: countryFieldName });
   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 = useCallback(
+    (v) => {
+      safeUpdate(() => {
+        setCountry(v);
+      });
+    },
+    [setCountry, safeUpdate]
+  );
   return (
     // @ts-ignore
     /* @__PURE__ */ jsx(

package/es/payment/index.js

@@ -28,6 +28,7 @@ import PaymentSkeleton from "./skeleton/payment.js";
 import PaymentSuccess from "./success.js";
 import PaymentSummary from "./summary.js";
 import { useMobile } from "../hooks/mobile.js";
+import { formatPhone } from "../libs/phone-validator.js";
 PaymentInner.defaultProps = {
   completed: false,
   showCheckoutSummary: true
@@ -58,20 +59,22 @@ 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: 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: isValidCountry(customer?.address?.country || "") ? customer?.address?.country : "us" }
+        {
+          country: isValidCountry(customer?.address?.country || session?.user?.address?.country || "") ? customer?.address?.country : "us"
+        }
       )
     }
   });

package/es/payment/product-donation.js

@@ -35,9 +35,6 @@ export default 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) {
@@ -53,7 +50,13 @@ export default 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/lib/components/over-due-invoice-payment.d.ts

@@ -17,6 +17,7 @@ type Props = {
     dialogProps?: DialogProps;
     detailLinkOptions?: DetailLinkOptions;
     successToast?: boolean;
+    alertMessage?: string;
     children?: (handlePay: (item: SummaryItem) => void, data: {
         subscription?: Subscription;
         summary: {
@@ -32,7 +33,7 @@ type SummaryItem = {
     currency: PaymentCurrency;
     method: PaymentMethod;
 };
-declare function OverdueInvoicePayment({ subscriptionId, customerId, mode, dialogProps, children, onPaid, detailLinkOptions, successToast, }: Props): import("react").JSX.Element | null;
+declare function OverdueInvoicePayment({ subscriptionId, customerId, mode, dialogProps, children, onPaid, detailLinkOptions, successToast, alertMessage, }: Props): import("react").JSX.Element | null;
 declare namespace OverdueInvoicePayment {
     var defaultProps: {
         mode: string;
@@ -47,6 +48,7 @@ declare namespace OverdueInvoicePayment {
         subscriptionId: undefined;
         customerId: undefined;
         successToast: boolean;
+        alertMessage: string;
     };
 }
 export default OverdueInvoicePayment;

package/lib/components/over-due-invoice-payment.js

@@ -43,7 +43,8 @@ function OverdueInvoicePayment({
   detailLinkOptions = {
     enabled: true
   },
-  successToast = true
+  successToast = true,
+  alertMessage = ""
 }) {
   const {
     t
@@ -274,19 +275,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: (0, _util.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 "";
   };
@@ -442,6 +449,7 @@ OverdueInvoicePayment.defaultProps = {
   },
   subscriptionId: void 0,
   customerId: void 0,
-  successToast: true
+  successToast: true,
+  alertMessage: ""
 };
 module.exports = OverdueInvoicePayment;

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

@@ -1,2 +1,9 @@
 export declare const getPhoneUtil: () => Promise<any>;
 export declare const validatePhoneNumber: (phoneNumber: string) => Promise<any>;
+/**
+ * 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 declare const formatPhone: (phoneNumber: string | undefined, defaultCountry?: string) => string;

package/lib/libs/phone-validator.js

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validatePhoneNumber = exports.getPhoneUtil = void 0;
+exports.validatePhoneNumber = exports.getPhoneUtil = exports.formatPhone = void 0;
 let phoneUtil = null;
 const getPhoneUtil = async () => {
   if (!phoneUtil) {
-    const {
-      PhoneNumberUtil
-    } = await Promise.resolve().then(() => require("google-libphonenumber"));
+    const result = await Promise.resolve().then(() => require("google-libphonenumber"));
+    const PhoneNumberUtil = (result.default || result)?.PhoneNumberUtil;
+    if (!PhoneNumberUtil) {
+      throw new Error("PhoneNumberUtil not found");
+    }
     phoneUtil = PhoneNumberUtil.getInstance();
   }
   return phoneUtil;
@@ -17,7 +19,13 @@ const getPhoneUtil = async () => {
 exports.getPhoneUtil = getPhoneUtil;
 const validatePhoneNumber = async phoneNumber => {
   try {
-    const util = await getPhoneUtil();
+    let util = 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) {
@@ -25,4 +33,87 @@ const validatePhoneNumber = async phoneNumber => {
     return false;
   }
 };
-exports.validatePhoneNumber = validatePhoneNumber;
+exports.validatePhoneNumber = validatePhoneNumber;
+const formatPhone = (phoneNumber, defaultCountry = "US") => {
+  if (!phoneNumber || phoneNumber.trim() === "") {
+    return "";
+  }
+  const cleanedNumber = phoneNumber.replace(/[^\d+]/g, "");
+  if (cleanedNumber.startsWith("+")) {
+    return cleanedNumber;
+  }
+  const COUNTRY_CODES = {
+    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
+  };
+
+  const COUNTRY_PATTERNS = [[/^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
+  ];
+
+  let numberToFormat = cleanedNumber;
+  if (numberToFormat.startsWith("0")) {
+    numberToFormat = numberToFormat.substring(1);
+  }
+  for (const [pattern, countryCode2] of COUNTRY_PATTERNS) {
+    if (pattern.test(cleanedNumber)) {
+      if (cleanedNumber.startsWith("0") && !["1", "86"].includes(countryCode2)) {
+        return `+${countryCode2}${cleanedNumber.substring(1)}`;
+      }
+      return `+${countryCode2}${cleanedNumber}`;
+    }
+  }
+  const countryCode = COUNTRY_CODES[defaultCountry.toUpperCase()] || defaultCountry;
+  return `+${countryCode}${numberToFormat}`;
+};
+exports.formatPhone = formatPhone;

package/lib/locales/en.js

@@ -138,6 +138,7 @@ module.exports = (0, _flat.default)({
         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",
@@ -151,7 +152,7 @@ module.exports = (0, _flat.default)({
         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,7 +249,7 @@ module.exports = (0, _flat.default)({
         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"
@@ -324,9 +325,10 @@ module.exports = (0, _flat.default)({
         owner: "Subscription Owner"
       },
       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.",
-        empty: "Great! You have no due invoices."
+        title: "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/lib/locales/zh.js

@@ -138,6 +138,7 @@ module.exports = (0, _flat.default)({
         empty: "\u2764\uFE0F \u652F\u6301\u4E00\u4E0B",
         gaveTips: "\u5DF2\u6709 {count} \u4EBA\u6253\u8D4F",
         tipAmount: "\u6253\u8D4F\u91D1\u989D",
+        tabHint: "\u5FEB\u901F\u5207\u6362\u91D1\u989D",
         benefits: {
           one: "{name} \u5C06\u83B7\u5F97\u5168\u90E8\u6253\u8D4F",
           multiple: "\u6253\u8D4F\u5C06\u6309\u6BD4\u4F8B\u5206\u914D\u7ED9 {count} \u4F4D\u53D7\u76CA\u4EBA",
@@ -151,7 +152,7 @@ module.exports = (0, _flat.default)({
         later: "\u7A0D\u540E\u914D\u7F6E",
         configTip: "\u524D\u5F80 Payment Kit \u914D\u7F6E\u6253\u8D4F\u9009\u9879"
       },
-      cardPay: "\u4F7F\u7528\u5361\u7247{action}",
+      cardPay: "\u4F7F\u7528\u94F6\u884C\u5361{action}",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",
       per: "\u6BCF",
       pay: "\u4ED8\u6B3E\u7ED9 {payee}",
@@ -249,6 +250,7 @@ module.exports = (0, _flat.default)({
         alert: {
           title: "\u4F60\u6709\u6B20\u8D39\u8D26\u5355",
           description: "\u770B\u8D77\u6765\u4F60\u6709\u6B20\u8D39\u7684\u8D26\u5355\uFF0C\u5728\u4F60\u652F\u4ED8\u6240\u6709\u6B20\u8D39\u8D26\u5355\u4E4B\u524D\uFF0C\u65B0\u7684\u8D2D\u4E70\u6216\u8005\u8BA2\u9605\u5C06\u88AB\u7981\u6B62\uFF0C\u8BF7\u4E0D\u8981\u8C03\u76AE\u3002",
+          customMessage: "\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u5426\u5219\u65B0\u7684\u8D2D\u4E70\u6216\u8005\u8BA2\u9605\u5C06\u88AB\u7981\u6B62\u3002",
           confirm: "\u53BB\u652F\u4ED8"
         },
         view: "\u67E5\u770B\u6B20\u8D39\u660E\u7EC6"
@@ -324,9 +326,10 @@ module.exports = (0, _flat.default)({
         owner: "\u8BA2\u9605\u62E5\u6709\u8005"
       },
       overdue: {
-        title: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u6D89\u53CA {subscriptionCount} \u4E2A\u8BA2\u9605\uFF0C\u603B\u91D1\u989D {total} {symbol}{method}\u3002\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002",
-        simpleTitle: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002",
-        empty: "\u606D\u559C\uFF01\u60A8\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355\u3002"
+        title: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u6D89\u53CA {subscriptionCount} \u4E2A\u8BA2\u9605\uFF0C\u603B\u91D1\u989D {total} {symbol}{method}\u3002",
+        simpleTitle: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355,",
+        empty: "\u606D\u559C\uFF01\u60A8\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355\u3002",
+        defaultAlert: "\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002"
       }
     },
     invoice: {

package/lib/payment/donation-form.js

@@ -28,6 +28,7 @@ var _productDonation = _interopRequireDefault(require("./product-donation"));
 var _confirm = _interopRequireDefault(require("../components/confirm"));
 var _paymentBeneficiaries = _interopRequireDefault(require("../components/payment-beneficiaries"));
 var _donation = _interopRequireDefault(require("./skeleton/donation"));
+var _phoneValidator = require("../libs/phone-validator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const getBenefits = async (id, url) => {
   const {
@@ -62,6 +63,9 @@ function PaymentInner({
     settings,
     session
   } = (0, _payment.usePaymentContext)();
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
   const [state, setState] = (0, _ahooks.useSetState)({
     checkoutSession,
     submitting: false,
@@ -86,18 +90,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"
       })
     }
   });
@@ -234,16 +238,48 @@ function PaymentInner({
           sx: {
             display: benefitsState.open ? "none" : "block"
           },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            title: t("payment.checkout.orderSummary"),
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
             sx: {
-              color: "text.primary",
-              fontSize: "18px",
-              fontWeight: "500",
-              lineHeight: "24px",
               mb: 2
             },
-            children: t("payment.checkout.donation.tipAmount")
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              title: t("payment.checkout.orderSummary"),
+              sx: {
+                color: "text.primary",
+                fontSize: "18px",
+                fontWeight: "500",
+                lineHeight: "24px"
+              },
+              children: t("payment.checkout.donation.tipAmount")
+            }), !isMobile && donationSettings?.amount?.presets && donationSettings.amount.presets.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              sx: {
+                color: "text.secondary",
+                fontSize: "13px",
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5,
+                opacity: 0.8
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+                component: "span",
+                sx: {
+                  border: "1px solid",
+                  borderColor: "divider",
+                  borderRadius: 0.75,
+                  px: 0.75,
+                  py: 0.25,
+                  fontSize: "12px",
+                  lineHeight: 1,
+                  color: "text.secondary",
+                  fontWeight: "400",
+                  bgcolor: "transparent"
+                },
+                children: "Tab"
+              }), t("payment.checkout.donation.tabHint")]
+            })]
           }), items.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_productDonation.default, {
             item: x,
             settings: donationSettings,