@blocklet/payment-react 1.18.19 → 1.18.21

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}` : ''}`);
@@ -74,6 +75,7 @@ function PaymentInner({
 }: MainProps) {
   const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
+  const { isMobile } = useMobile();
   const [state, setState] = useSetState({
     checkoutSession,
     submitting: false,
@@ -101,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',
+        }
       ),
     },
   });
@@ -238,17 +244,49 @@ function PaymentInner({
             )}
 
             <Stack sx={{ display: benefitsState.open ? 'none' : 'block' }}>
-              <Typography
-                title={t('payment.checkout.orderSummary')}
-                sx={{
-                  color: 'text.primary',
-                  fontSize: '18px',
-                  fontWeight: '500',
-                  lineHeight: '24px',
-                  mb: 2,
-                }}>
-                {t('payment.checkout.donation.tipAmount')}
-              </Typography>
+              <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 2 }}>
+                <Typography
+                  title={t('payment.checkout.orderSummary')}
+                  sx={{
+                    color: 'text.primary',
+                    fontSize: '18px',
+                    fontWeight: '500',
+                    lineHeight: '24px',
+                  }}>
+                  {t('payment.checkout.donation.tipAmount')}
+                </Typography>
+
+                {!isMobile && donationSettings?.amount?.presets && donationSettings.amount.presets.length > 0 && (
+                  <Typography
+                    sx={{
+                      color: 'text.secondary',
+                      fontSize: '13px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 0.5,
+                      opacity: 0.8,
+                    }}>
+                    <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',
+                      }}>
+                      Tab
+                    </Box>
+                    {t('payment.checkout.donation.tabHint')}
+                  </Typography>
+                )}
+              </Stack>
+
               {items.map((x: TLineItemExpanded) => (
                 <ProductDonation
                   key={`${x.price_id}-${currency.id}`}

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';
   };