@blocklet/payment-react 1.18.25 → 1.18.27

package/src/components/country-select.tsx

@@ -1,9 +1,11 @@
-import { useMemo, forwardRef } from 'react';
-import { Box, MenuItem, Select, Typography } from '@mui/material';
+/* eslint-disable @typescript-eslint/indent */
+import { useMemo, forwardRef, useState, useEffect, ChangeEvent, useRef, KeyboardEvent } from 'react';
+import { Box, MenuItem, Select, Typography, TextField } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
 import type { SxProps } from '@mui/material';
 import type { CountryIso2 } from 'react-international-phone';
+import { useMobile } from '../hooks/mobile';
 
 export type CountrySelectProps = {
   value: CountryIso2;
@@ -14,6 +16,123 @@ export type CountrySelectProps = {
 
 const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(({ value, onChange, name, sx }, ref) => {
   const { setValue } = useFormContext();
+  const [open, setOpen] = useState(false);
+  const [searchText, setSearchText] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const itemHeightRef = useRef<number>(40);
+  const { isMobile } = useMobile();
+  const measuredRef = useRef(false);
+
+  // Handle window resize
+  useEffect(() => {
+    if (!open) return () => {};
+    const handleResize = () => {
+      measuredRef.current = false;
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const scrollToTop = () => {
+    if (listRef.current) {
+      listRef.current.scrollTop = 0;
+    }
+  };
+
+  const measureItemHeight = () => {
+    if (!listRef.current || !open) return;
+
+    const items = listRef.current.querySelectorAll('.MuiMenuItem-root');
+    if (items.length > 0) {
+      const firstItem = items[0] as HTMLElement;
+      if (firstItem.offsetHeight > 0) {
+        itemHeightRef.current = firstItem.offsetHeight;
+      }
+    }
+  };
+
+  const controlScrollPosition = (index: number) => {
+    if (!listRef.current) return;
+
+    // Always measure height when dropdown is open for accuracy
+    if (open && !measuredRef.current) {
+      measureItemHeight();
+      measuredRef.current = true;
+    }
+
+    const listHeight = listRef.current.clientHeight;
+    const targetPosition = index * itemHeightRef.current;
+
+    if (index < 2) {
+      listRef.current.scrollTop = 0;
+    } else if (index > filteredCountries.length - 3) {
+      listRef.current.scrollTop = listRef.current.scrollHeight - listHeight;
+    } else {
+      const scrollPosition = targetPosition - listHeight / 2 + itemHeightRef.current / 2;
+      listRef.current.scrollTop = Math.max(0, scrollPosition);
+    }
+  };
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout | null = null;
+    if (open) {
+      timeout = setTimeout(() => {
+        scrollToTop();
+        if (!isMobile && inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 100);
+    } else {
+      setSearchText('');
+      setFocusedIndex(-1);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [open, isMobile]);
+
+  const filteredCountries = useMemo(() => {
+    if (!searchText) return defaultCountries;
+
+    return defaultCountries.filter((c) => {
+      const parsed = parseCountry(c);
+      return (
+        parsed.name.toLowerCase().includes(searchText.toLowerCase()) ||
+        parsed.iso2.toLowerCase().includes(searchText.toLowerCase()) ||
+        `+${parsed.dialCode}`.includes(searchText)
+      );
+    });
+  }, [searchText]);
+
+  useEffect(() => {
+    scrollToTop();
+    setFocusedIndex(-1);
+  }, [searchText]);
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout | null = null;
+    if (focusedIndex >= 0) {
+      timeout = setTimeout(() => {
+        controlScrollPosition(focusedIndex);
+      }, 10);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [focusedIndex, filteredCountries.length]);
+
   const countryDetail = useMemo(() => {
     const item = defaultCountries.find((v) => v[1] === value);
     return value && item ? parseCountry(item) : { name: '' };
@@ -24,12 +143,68 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(({ value, o
     setValue(name, e.target.value);
   };
 
+  const handleCountryClick = (code: CountryIso2) => {
+    onChange(code);
+    setValue(name, code);
+    setOpen(false);
+  };
+
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    setSearchText(e.target.value);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+
+    if (e.key === 'Escape') {
+      setOpen(false);
+      return;
+    }
+
+    const handleNavigation = (direction: 'next' | 'prev') => {
+      e.preventDefault();
+      setFocusedIndex((prev) => {
+        if (direction === 'next') {
+          if (prev === -1) return 0;
+          return prev >= filteredCountries.length - 1 ? 0 : prev + 1;
+        }
+        if (prev === -1) return filteredCountries.length - 1;
+        return prev <= 0 ? filteredCountries.length - 1 : prev - 1;
+      });
+    };
+
+    if (e.key === 'Tab') {
+      handleNavigation(e.shiftKey ? 'prev' : 'next');
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      handleNavigation('next');
+      return;
+    }
+
+    if (e.key === 'ArrowUp') {
+      handleNavigation('prev');
+      return;
+    }
+
+    if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < filteredCountries.length) {
+      e.preventDefault();
+      const country = parseCountry(filteredCountries[focusedIndex]);
+      handleCountryClick(country.iso2);
+    }
+  };
+
   return (
     <Select
       ref={ref}
+      open={open}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
       MenuProps={{
         style: {
-          height: '300px',
+          maxHeight: '300px',
           top: '10px',
         },
         anchorOrigin: {
@@ -40,6 +215,18 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(({ value, o
           vertical: 'top',
           horizontal: 'left',
         },
+        PaperProps: {
+          ref: menuRef,
+          sx: {
+            display: 'flex',
+            '& .MuiList-root': {
+              pt: 0,
+              display: 'flex',
+              flexDirection: 'column',
+              overflowY: 'hidden',
+            },
+          },
+        },
       }}
       sx={{
         width: '100%',
@@ -65,24 +252,82 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(({ value, o
       }}
       value={value}
       onChange={onCountryChange}
-      renderValue={(code) => {
-        return (
-          <Box display="flex" alignItems="center" flexWrap="nowrap" gap={0.5} sx={{ cursor: 'pointer' }}>
-            <FlagEmoji iso2={code} style={{ display: 'flex' }} />
-            <Typography>{countryDetail?.name}</Typography>
-          </Box>
-        );
-      }}>
-      {defaultCountries.map((c: any) => {
-        const parsed = parseCountry(c);
-        return (
-          <MenuItem key={parsed.iso2} value={parsed.iso2}>
-            <FlagEmoji iso2={parsed.iso2} style={{ marginRight: '8px' }} />
-            <Typography marginRight="8px">{parsed.name}</Typography>
-            <Typography color="gray">+{parsed.dialCode}</Typography>
+      renderValue={(code) => (
+        <Box display="flex" alignItems="center" flexWrap="nowrap" gap={0.5} sx={{ cursor: 'pointer' }}>
+          <FlagEmoji iso2={code} style={{ display: 'flex' }} />
+          <Typography>{countryDetail?.name}</Typography>
+        </Box>
+      )}>
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 1,
+          bgcolor: 'background.paper',
+          p: 1,
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}>
+        <TextField
+          inputRef={inputRef}
+          autoFocus={!isMobile}
+          fullWidth
+          placeholder="Search country..."
+          value={searchText}
+          onChange={handleSearchChange}
+          onKeyDown={handleKeyDown}
+          onClick={(e) => e.stopPropagation()}
+          size="small"
+          variant="outlined"
+        />
+      </Box>
+
+      <Box
+        ref={listRef}
+        sx={{
+          flex: 1,
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          maxHeight: 'calc(300px - 65px)',
+          scrollBehavior: 'smooth',
+        }}>
+        {filteredCountries.length > 0 ? (
+          filteredCountries.map((c: any, index) => {
+            const parsed = parseCountry(c);
+            const isFocused = index === focusedIndex;
+
+            return (
+              <MenuItem
+                key={parsed.iso2}
+                value={parsed.iso2}
+                selected={parsed.iso2 === value}
+                onClick={() => handleCountryClick(parsed.iso2)}
+                sx={{
+                  '&.Mui-selected': {
+                    backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                  },
+                  '&:hover': {
+                    backgroundColor: 'var(--backgrounds-bg-highlight, #eff6ff)',
+                  },
+                  ...(isFocused
+                    ? {
+                        backgroundColor: 'var(--backgrounds-bg-highlight, #eff6ff)',
+                        outline: 'none',
+                      }
+                    : {}),
+                }}>
+                <FlagEmoji iso2={parsed.iso2} style={{ marginRight: '8px' }} />
+                <Typography>{parsed.name}</Typography>
+              </MenuItem>
+            );
+          })
+        ) : (
+          <MenuItem disabled>
+            <Typography color="text.secondary">No countries found</Typography>
           </MenuItem>
-        );
-      })}
+        )}
+      </Box>
     </Select>
   );
 });

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

@@ -46,6 +46,7 @@ type Props = {
       detailUrl: string;
     }
   ) => React.ReactNode;
+  authToken?: string;
 };
 
 type SummaryItem = {
@@ -64,6 +65,7 @@ type OverdueInvoicesResult = {
 const fetchOverdueInvoices = async (params: {
   subscriptionId?: string;
   customerId?: string;
+  authToken?: string;
 }): Promise<OverdueInvoicesResult> => {
   if (!params.subscriptionId && !params.customerId) {
     throw new Error('Either subscriptionId or customerId must be provided');
@@ -76,7 +78,7 @@ const fetchOverdueInvoices = async (params: {
     url = `/api/customers/${params.customerId}/overdue/invoices`;
   }
 
-  const res = await api.get(url);
+  const res = await api.get(params.authToken ? joinURL(url, `?authToken=${params.authToken}`) : url);
   return res.data;
 };
 
@@ -90,6 +92,7 @@ function OverdueInvoicePayment({
   detailLinkOptions = { enabled: true },
   successToast = true,
   alertMessage = '',
+  authToken,
 }: Props) {
   const { t } = useLocaleContext();
   const { connect } = usePaymentContext();
@@ -109,7 +112,7 @@ function OverdueInvoicePayment({
     error,
     loading,
     runAsync: refresh,
-  } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId }), {
+  } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId, authToken }), {
     ready: !!subscriptionId || !!customerId,
   });
 
@@ -520,6 +523,7 @@ OverdueInvoicePayment.defaultProps = {
   customerId: undefined,
   successToast: true,
   alertMessage: '',
+  authToken: undefined,
 };
 
 export default OverdueInvoicePayment;

package/src/contexts/payment.tsx

@@ -34,6 +34,8 @@ export type PaymentContextProps = {
   children: any;
   // eslint-disable-next-line react/require-default-props
   baseUrl?: string;
+  // eslint-disable-next-line react/require-default-props
+  authToken?: string;
 };
 
 const formatData = (data: any) => {
@@ -72,10 +74,18 @@ const getMethod = (methodId: string, methods: TPaymentMethodExpanded[]) => {
   return methods.find((x) => x.id === methodId);
 };
 
-function PaymentProvider({ session, connect, children, baseUrl }: PaymentContextProps) {
+function PaymentProvider({ session, connect, children, baseUrl, authToken }: PaymentContextProps) {
   if (baseUrl) {
     // This is hack but efficient to share
     window.__PAYMENT_KIT_BASE_URL = baseUrl;
+  } else {
+    window.__PAYMENT_KIT_BASE_URL = '';
+  }
+
+  if (authToken) {
+    window.__PAYMENT_KIT_AUTH_TOKEN = authToken;
+  } else {
+    window.__PAYMENT_KIT_AUTH_TOKEN = '';
   }
 
   const [livemode, setLivemode] = useLocalStorageState('livemode', { defaultValue: true });

package/src/index.ts

@@ -45,6 +45,7 @@ export * from './hooks/mobile';
 export * from './hooks/table';
 export * from './hooks/scroll';
 export * from './hooks/keyboard';
+export * from './libs/validator';
 
 export { translations, createTranslator } from './locales';
 

package/src/libs/api.ts

@@ -11,10 +11,13 @@ api.interceptors.request.use(
   (config: any) => {
     const prefix = getPrefix();
     config.baseURL = prefix || '';
-
     const locale = getLocale(window.blocklet?.languages);
     const query = new URLSearchParams(config.url?.split('?').pop());
     config.params = { ...(config.params || {}), locale };
+    const authToken = window.__PAYMENT_KIT_AUTH_TOKEN;
+    if (authToken && typeof config.params.authToken === 'undefined' && !query.has('authToken')) {
+      config.params.authToken = authToken;
+    }
     // If we do not have livemode neither in config nor in query params, we will use the value from localStorage
     if (typeof config.params.livemode === 'undefined' && query.has('livemode') === false) {
       const livemode = localStorage.getItem('livemode');

package/src/libs/currency.ts

@@ -0,0 +1,25 @@
+const CURRENCY_PREFERENCE_KEY_BASE = 'payment-currency-preference';
+
+export const getUserStorageKey = (base: string, did?: string) => {
+  return did ? `${base}:${did}` : base;
+};
+
+export const saveCurrencyPreference = (currencyId: string, did?: string) => {
+  try {
+    localStorage.setItem(getUserStorageKey(CURRENCY_PREFERENCE_KEY_BASE, did), currencyId);
+  } catch (e) {
+    console.warn('Failed to save currency preference', e);
+  }
+};
+
+export const getCurrencyPreference = (did?: string, availableCurrencyIds?: string[]) => {
+  try {
+    const saved = localStorage.getItem(getUserStorageKey(CURRENCY_PREFERENCE_KEY_BASE, did));
+    if (saved && (!availableCurrencyIds || availableCurrencyIds.includes(saved))) {
+      return saved;
+    }
+  } catch (e) {
+    console.warn('Failed to access localStorage', e);
+  }
+  return null;
+};

package/src/libs/phone-validator.ts

@@ -13,6 +13,7 @@ export const getPhoneUtil = async () => {
 };
 
 export const validatePhoneNumber = async (phoneNumber: string) => {
+  if (!phoneNumber) return true;
   try {
     let util: any = null;
     try {

package/src/libs/validator.ts

@@ -0,0 +1,70 @@
+import isPostalCode, { PostalCodeLocale } from 'validator/lib/isPostalCode';
+
+const POSTAL_CODE_SUPPORTED_COUNTRIES: PostalCodeLocale[] = [
+  'AD',
+  'AT',
+  'AU',
+  'BE',
+  'BG',
+  'BR',
+  'CA',
+  'CH',
+  'CN',
+  'CZ',
+  'DE',
+  'DK',
+  'DZ',
+  'EE',
+  'ES',
+  'FI',
+  'FR',
+  'GB',
+  'GR',
+  'HR',
+  'HU',
+  'ID',
+  'IE',
+  'IL',
+  'IN',
+  'IR',
+  'IS',
+  'IT',
+  'JP',
+  'KE',
+  'KR',
+  'LI',
+  'LT',
+  'LU',
+  'LV',
+  'MX',
+  'MT',
+  'NL',
+  'NO',
+  'NZ',
+  'PL',
+  'PR',
+  'PT',
+  'RO',
+  'RU',
+  'SA',
+  'SE',
+  'SI',
+  'SK',
+  'TN',
+  'TW',
+  'UA',
+  'US',
+  'ZA',
+  'ZM',
+];
+export function validatePostalCode(postalCode: string, country?: string): boolean {
+  if (!postalCode) return true;
+  const countryUpper = country?.toUpperCase();
+  const isSupported = country && POSTAL_CODE_SUPPORTED_COUNTRIES.includes(countryUpper as PostalCodeLocale);
+  try {
+    return isPostalCode(postalCode, isSupported ? (countryUpper as PostalCodeLocale) : 'any');
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+}

package/src/payment/form/address.tsx

@@ -1,9 +1,10 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Fade, FormLabel, InputAdornment, Stack } from '@mui/material';
 import type { SxProps } from '@mui/material';
-import { Controller, useFormContext } from 'react-hook-form';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import FormInput from '../../components/input';
 import CountrySelect from '../../components/country-select';
+import { validatePostalCode } from '../../libs/validator';
 
 type Props = {
   mode: string;
@@ -18,7 +19,7 @@ AddressForm.defaultProps = {
 export default function AddressForm({ mode, stripe, sx = {} }: Props) {
   const { t } = useLocaleContext();
   const { control } = useFormContext();
-
+  const country = useWatch({ control, name: 'billing_address.country' });
   if (mode === 'required') {
     return (
       <Fade in>
@@ -51,7 +52,13 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
             <FormLabel className="base-label">{t('payment.checkout.billing.postal_code')}</FormLabel>
             <FormInput
               name="billing_address.postal_code"
-              rules={{ required: t('payment.checkout.required') }}
+              rules={{
+                required: t('payment.checkout.required'),
+                validate: (x: string) => {
+                  const isValid = validatePostalCode(x, country);
+                  return isValid ? true : t('payment.checkout.invalid');
+                },
+              }}
               errorPosition="right"
               variant="outlined"
               placeholder={t('payment.checkout.billing.postal_code')}
@@ -91,7 +98,13 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
             <Stack direction="row" spacing={0}>
               <FormInput
                 name="billing_address.postal_code"
-                rules={{ required: t('payment.checkout.required') }}
+                rules={{
+                  required: t('payment.checkout.required'),
+                  validate: (x: string) => {
+                    const isValid = validatePostalCode(x, country);
+                    return isValid ? true : t('payment.checkout.invalid');
+                  },
+                }}
                 errorPosition="right"
                 variant="outlined"
                 placeholder={t('payment.checkout.billing.postal_code')}

package/src/payment/form/index.tsx

@@ -42,6 +42,7 @@ import { useMobile } from '../../hooks/mobile';
 import { formatPhone, validatePhoneNumber } from '../../libs/phone-validator';
 import LoadingButton from '../../components/loading-button';
 import OverdueInvoicePayment from '../../components/over-due-invoice-payment';
+import { saveCurrencyPreference } from '../../libs/currency';
 
 export const waitForCheckoutComplete = async (sessionId: string) => {
   let result: CheckoutContext;
@@ -220,6 +221,14 @@ export default function PaymentForm({
     return index >= 0 ? index : 0;
   });
 
+  const handleCurrencyChange = (index: number) => {
+    setPaymentCurrencyIndex(index);
+    const selectedCurrencyId = currencies[index]?.id;
+    if (selectedCurrencyId) {
+      saveCurrencyPreference(selectedCurrencyId, session?.user?.did);
+    }
+  };
+
   const onCheckoutComplete = useMemoizedFn(async ({ response }: { response: TCheckoutSession }) => {
     if (response.id === checkoutSession.id && state.paid === false) {
       await handleConnected();
@@ -357,6 +366,7 @@ export default function PaymentForm({
   const skipBindWallet = method.type === 'stripe';
 
   const handleConnected = async () => {
+    setState({ paying: true });
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
       if (state.paid === false) {
@@ -614,7 +624,7 @@ export default function PaymentForm({
                     <CurrencySelector
                       value={paymentCurrencyIndex}
                       currencies={currencies}
-                      onChange={setPaymentCurrencyIndex}
+                      onChange={handleCurrencyChange}
                     />
                   )}
                 />

package/src/payment/form/phone.tsx

@@ -6,13 +6,15 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import { defaultCountries, usePhoneInput } from 'react-international-phone';
 import type { CountryIso2 } from 'react-international-phone';
 
+import { useMount } from 'ahooks';
 import FormInput from '../../components/input';
 import { isValidCountry } from '../../libs/util';
 import CountrySelect from '../../components/country-select';
+import { getPhoneUtil } from '../../libs/phone-validator';
 
 export default function PhoneInput({ ...props }) {
   const countryFieldName = props.countryFieldName || 'billing_address.country';
-  const { control, getValues, setValue } = useFormContext();
+  const { control, getValues, setValue, trigger } = useFormContext();
   const values = getValues();
 
   const isUpdatingRef = useRef(false);
@@ -51,6 +53,12 @@ export default function PhoneInput({ ...props }) {
     });
   }, [userCountry, country, setCountry, safeUpdate]);
 
+  useMount(() => {
+    getPhoneUtil().catch((err) => {
+      console.error('Failed to preload phone validator:', err);
+    });
+  });
+
   const onCountryChange = useCallback(
     (v: CountryIso2) => {
       safeUpdate(() => {
@@ -60,6 +68,11 @@ export default function PhoneInput({ ...props }) {
     [setCountry, safeUpdate]
   );
 
+  const handleBlur = useCallback(() => {
+    trigger(props.name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.name]);
+
   return (
     // @ts-ignore
     <FormInput
@@ -67,6 +80,7 @@ export default function PhoneInput({ ...props }) {
       onChange={handlePhoneValueChange}
       type="tel"
       inputRef={inputRef}
+      onBlur={handleBlur}
       InputProps={{
         startAdornment: (
           <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>