@blocklet/payment-react 1.18.20 → 1.18.21

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

@@ -249,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',
@@ -331,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

@@ -245,6 +245,7 @@ export default flat({
         alert: {
           title: '你有欠费账单',
           description: '看起来你有欠费的账单，在你支付所有欠费账单之前，新的购买或者订阅将被禁止，请不要调皮。',
+          customMessage: '请立即支付，否则新的购买或者订阅将被禁止。',
           confirm: '去支付',
         },
         view: '查看欠费明细',
@@ -321,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: {

package/src/payment/donation-form.tsx

@@ -36,6 +36,7 @@ import ProductDonation from './product-donation';
 import ConfirmDialog from '../components/confirm';
 import PaymentBeneficiaries, { TBeneficiary } from '../components/payment-beneficiaries';
 import DonationSkeleton from './skeleton/donation';
+import { formatPhone } from '../libs/phone-validator';
 
 const getBenefits = async (id: string, url?: string) => {
   const { data } = await api.get(`/api/payment-links/${id}/benefits?${url ? `url=${url}` : ''}`);
@@ -102,20 +103,24 @@ 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/src/payment/form/index.tsx

@@ -21,7 +21,6 @@ import { dispatch } from 'use-bus';
 import isEmail from 'validator/es/lib/isEmail';
 
 import isEmpty from 'lodash/isEmpty';
-import ConfirmDialog from '../../components/confirm';
 import FormInput from '../../components/input';
 import { usePaymentContext } from '../../contexts/payment';
 import { useSubscription } from '../../hooks/subscription';
@@ -40,8 +39,9 @@ import CurrencySelector from './currency';
 import PhoneInput from './phone';
 import StripeCheckout from './stripe';
 import { useMobile } from '../../hooks/mobile';
-import { validatePhoneNumber } from '../../libs/phone-validator';
+import { formatPhone, validatePhoneNumber } from '../../libs/phone-validator';
 import LoadingButton from '../../components/loading-button';
+import OverdueInvoicePayment from '../../components/over-due-invoice-payment';
 
 export const waitForCheckoutComplete = async (sessionId: string) => {
   let result: CheckoutContext;
@@ -83,6 +83,63 @@ type PageData = CheckoutContext &
     isDonation?: boolean;
   };
 
+type UserInfo = {
+  name?: string;
+  fullName?: string;
+  email?: string;
+  phone?: string;
+  address?: {
+    country?: string;
+    state?: string;
+    province?: string;
+    line1?: string;
+    line2?: string;
+    city?: string;
+    postal_code?: string;
+    postalCode?: string;
+  };
+  metadata?: {
+    phone?: {
+      country?: string;
+      phoneNumber?: string;
+    };
+  };
+};
+
+const setUserFormValues = (
+  userInfo: UserInfo,
+  currentValues: any,
+  setValue: Function,
+  options: { preferExisting?: boolean; showPhone?: boolean } = {}
+) => {
+  const { preferExisting = true } = options;
+  const basicFields = {
+    customer_name: userInfo.name || userInfo.fullName,
+    customer_email: userInfo.email,
+    customer_phone: formatPhone(userInfo.phone),
+  };
+  const addressFields: Record<string, any> = {
+    '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,
@@ -185,22 +242,30 @@ export default function PaymentForm({
   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]);
 
   useEffect(() => {
     setValue('payment_method', (currencies[paymentCurrencyIndex] as any)?.method?.id);
@@ -248,7 +313,7 @@ export default function PaymentForm({
 
   const method = paymentMethods.find((x) => x.id === paymentMethod) as TPaymentMethodExpanded;
   const isDonationMode = checkoutSession?.submit_type === 'donate' && isDonation;
-  const showForm = session?.user;
+  const showForm = !!session?.user;
   const skipBindWallet = method.type === 'stripe';
 
   const handleConnected = async () => {
@@ -275,33 +340,9 @@ export default function PaymentForm({
     const { data: profile } = await api.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,
+      });
     }
   };
 
@@ -473,18 +514,31 @@ export default function PaymentForm({
           </Button>
         </Box>
         {state.customerLimited && (
-          <ConfirmDialog
-            onConfirm={() =>
-              window.open(
-                joinURL(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"
+          <OverdueInvoicePayment
+            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(
+                  joinURL(
+                    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'),
+            }}
           />
         )}
       </>
@@ -619,18 +673,28 @@ export default function PaymentForm({
         </Stack>
       </Fade>
       {state.customerLimited && (
-        <ConfirmDialog
-          onConfirm={() =>
-            window.open(
-              joinURL(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"
+        <OverdueInvoicePayment
+          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(
+                joinURL(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/src/payment/form/phone.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 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 type { CountryIso2 } from 'react-international-phone';
@@ -15,28 +15,50 @@ export default function PhoneInput({ ...props }) {
   const { control, getValues, setValue } = useFormContext();
   const values = getValues();
 
+  const isUpdatingRef = useRef(false);
+
+  const safeUpdate = useCallback((callback: () => void) => {
+    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: any) => {
-      setValue(props.name, data.phone);
-      setValue(countryFieldName, data.country);
+    onChange: (data) => {
+      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);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userCountry]);
+    });
+  }, [userCountry, country, setCountry, safeUpdate]);
 
-  const onCountryChange = (v: CountryIso2) => {
-    setCountry(v);
-    setValue(countryFieldName, v);
-  };
+  const onCountryChange = useCallback(
+    (v: CountryIso2) => {
+      safeUpdate(() => {
+        setCountry(v);
+      });
+    },
+    [setCountry, safeUpdate]
+  );
 
   return (
     // @ts-ignore

package/src/payment/index.tsx

@@ -41,6 +41,7 @@ import PaymentSkeleton from './skeleton/payment';
 import PaymentSuccess from './success';
 import PaymentSummary from './summary';
 import { useMobile } from '../hooks/mobile';
+import { formatPhone } from '../libs/phone-validator';
 
 // eslint-disable-next-line react/no-unused-prop-types
 type Props = CheckoutContext & CheckoutCallbacks & { completed?: boolean; error?: any; showCheckoutSummary?: boolean };
@@ -78,20 +79,24 @@ 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/src/payment/product-donation.tsx

@@ -48,10 +48,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) {
@@ -67,7 +63,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';
   };