@blocklet/payment-react 1.18.24 → 1.18.26

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

package/src/payment/form/stripe/form.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/indent */
 import Center from '@arcblock/ux/lib/Center';
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -21,6 +22,14 @@ export type StripeCheckoutFormProps = {
   returnUrl: string;
 };
 
+const PaymentElementContainer = styled('div')`
+  opacity: 0;
+  transition: opacity 300ms ease;
+  &.visible {
+    opacity: 1;
+  }
+`;
+
 // @doc https://stripe.com/docs/js/elements_object/create_payment_element
 function StripeCheckoutForm({
   clientSecret,
@@ -38,8 +47,39 @@ function StripeCheckoutForm({
     message: '',
     confirming: false,
     loaded: false,
+    showBillingForm: false,
+    isTransitioning: false,
+    paymentMethod: 'card',
   });
 
+  const handlePaymentMethodChange = (event: any) => {
+    const method = event.value?.type;
+    const needsBillingInfo = method === 'google_pay' || method === 'apple_pay';
+    const shouldShowForm = needsBillingInfo && !isCompleteBillingAddress(customer.address);
+
+    if (shouldShowForm && !state.showBillingForm) {
+      setState({ isTransitioning: true });
+      setTimeout(() => {
+        setState({
+          isTransitioning: false,
+          paymentMethod: method,
+          showBillingForm: true,
+        });
+      }, 300);
+    } else {
+      // if shouldShowForm is false, set showBillingForm to false immediately
+      setState({
+        showBillingForm: false,
+        paymentMethod: method,
+        isTransitioning: false,
+      });
+    }
+  };
+
+  const isCompleteBillingAddress = (address: any) => {
+    return address && address.line1 && address.city && address.state && address.postal_code && address.country;
+  };
+
   useEffect(() => {
     if (!stripe) {
       return;
@@ -76,29 +116,53 @@ function StripeCheckoutForm({
       }
 
       try {
-        setState({ confirming: true });
+        setState({ confirming: true, message: '' });
         const method = intentType === 'payment_intent' ? 'confirmPayment' : 'confirmSetup';
-        const { error } = await stripe[method]({
+
+        const { error: submitError } = await elements.submit();
+        if (submitError) {
+          setState({ confirming: false });
+          return;
+        }
+
+        const { error, paymentIntent, setupIntent } = await stripe[method]({
           elements,
           redirect: 'if_required',
           confirmParams: {
             return_url: returnUrl || window.location.href,
-            payment_method_data: {
-              billing_details: {
-                name: customer.name,
-                phone: customer.phone,
-                email: customer.email,
-                address: customer.address,
-              },
-            },
+            ...(!state.showBillingForm
+              ? {
+                  payment_method_data: {
+                    billing_details: {
+                      name: customer.name,
+                      phone: customer.phone,
+                      email: customer.email,
+                      address: {
+                        ...(customer.address || {}),
+                        country: customer.address?.country || 'us',
+                        line1: customer.address?.line1 || '',
+                        line2: customer.address?.line2 || '',
+                        city: customer.address?.city || '',
+                        state: customer.address?.state || '',
+                        postal_code: customer.address?.postal_code || '00000',
+                      },
+                    },
+                  },
+                }
+              : {}),
           },
         });
+        const intent = paymentIntent || setupIntent;
+        if (intent?.status === 'canceled' || intent?.status === 'requires_payment_method') {
+          setState({ confirming: false });
+          return;
+        }
+
         setState({ confirming: false });
         if (error) {
           if (error.type === 'validation_error') {
             return;
           }
-
           setState({ message: error.message as string });
           return;
         }
@@ -109,32 +173,40 @@ function StripeCheckoutForm({
         setState({ confirming: false, message: err.message as string });
       }
     },
-    [customer, intentType, stripe] // eslint-disable-line
+    [customer, intentType, stripe, state.showBillingForm, returnUrl] // eslint-disable-line
   );
 
   return (
     <Content onSubmit={handleSubmit}>
-      <LinkAuthenticationElement
-        options={{
-          defaultEmail: customer.email,
-        }}
-      />
-      <PaymentElement
-        options={{
-          layout: 'auto',
-          fields: { billingDetails: 'never' },
-          readOnly: state.confirming,
-          defaultValues: {
-            billingDetails: {
-              name: customer.name,
-              phone: customer.phone,
-              email: customer.email,
-              address: customer.address,
+      {(!state.paymentMethod || state.paymentMethod === 'card') && (
+        <LinkAuthenticationElement
+          options={{
+            defaultEmail: customer.email,
+          }}
+        />
+      )}
+      <PaymentElementContainer className={!state.isTransitioning ? 'visible' : ''}>
+        <PaymentElement
+          options={{
+            layout: 'auto',
+            fields: {
+              billingDetails: state.showBillingForm ? 'auto' : 'never',
             },
-          },
-        }}
-        onReady={() => setState({ loaded: true })}
-      />
+            readOnly: state.confirming,
+            defaultValues: {
+              billingDetails: {
+                name: customer.name,
+                phone: customer.phone,
+                email: customer.email,
+                address: customer.address,
+              },
+            },
+          }}
+          onChange={handlePaymentMethodChange}
+          onReady={() => setState({ loaded: true })}
+        />
+      </PaymentElementContainer>
+
       {(!stripe || !elements || !state.loaded) && (
         <Center relative="parent">
           <CircularProgress />

package/src/payment/index.tsx

@@ -16,7 +16,7 @@ import { Box, Fade, Stack, type BoxProps } from '@mui/material';
 import { styled } from '@mui/system';
 import { fromTokenToUnit } from '@ocap/util';
 import { useSetState } from 'ahooks';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import trim from 'lodash/trim';
 import type { LiteralUnion } from 'type-fest';
@@ -34,7 +34,7 @@ import {
 import type { CheckoutCallbacks, CheckoutContext, CheckoutFormData } from '../types';
 import PaymentError from './error';
 import CheckoutFooter from './footer';
-import PaymentForm from './form';
+import PaymentForm, { hasDidWallet } from './form';
 // import PaymentHeader from './header';
 import OverviewSkeleton from './skeleton/overview';
 import PaymentSkeleton from './skeleton/payment';
@@ -42,6 +42,7 @@ import PaymentSuccess from './success';
 import PaymentSummary from './summary';
 import { useMobile } from '../hooks/mobile';
 import { formatPhone } from '../libs/phone-validator';
+import { getCurrencyPreference } from '../libs/currency';
 
 // eslint-disable-next-line react/no-unused-prop-types
 type Props = CheckoutContext & CheckoutCallbacks & { completed?: boolean; error?: any; showCheckoutSummary?: boolean };
@@ -70,8 +71,48 @@ function PaymentInner({
   const { isMobile } = useMobile();
   const [state, setState] = useSetState<{ checkoutSession: TCheckoutSessionExpanded }>({ checkoutSession });
   const query = getQueryParams(window.location.href);
-  const defaultCurrencyId =
-    query.currencyId || state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
+
+  const availableCurrencyIds = useMemo(() => {
+    const currencyIds = new Set<string>();
+    paymentMethods.forEach((method) => {
+      method.payment_currencies.forEach((currency) => {
+        if (currency.active) {
+          currencyIds.add(currency.id);
+        }
+      });
+    });
+    return Array.from(currencyIds);
+  }, [paymentMethods]);
+
+  const defaultCurrencyId = useMemo(() => {
+    // 1. first check url currencyId
+    if (query.currencyId && availableCurrencyIds.includes(query.currencyId)) {
+      return query.currencyId;
+    }
+
+    // 2. if user has no wallet, use the first available currency of stripe payment method
+    if (session?.user && !hasDidWallet(session.user)) {
+      const stripeCurrencyId = paymentMethods
+        .find((m) => m.type === 'stripe')
+        ?.payment_currencies.find((c) => c.active)?.id;
+      if (stripeCurrencyId) {
+        return stripeCurrencyId;
+      }
+    }
+
+    // 3. then check user's saved currency preference
+    const savedPreference = getCurrencyPreference(session?.user?.did, availableCurrencyIds);
+    if (savedPreference) {
+      return savedPreference;
+    }
+
+    // 4. finally use the currency in checkoutSession or the first available currency
+    if (state.checkoutSession.currency_id && availableCurrencyIds.includes(state.checkoutSession.currency_id)) {
+      return state.checkoutSession.currency_id;
+    }
+    return availableCurrencyIds?.[0];
+  }, [query.currencyId, availableCurrencyIds, session?.user, state.checkoutSession.currency_id, paymentMethods]);
+
   const defaultMethodId = paymentMethods.find((m) => m.payment_currencies.some((c) => c.id === defaultCurrencyId))?.id;
   const hideSummaryCard = mode.endsWith('-minimal') || !showCheckoutSummary;
 
@@ -120,16 +161,6 @@ function PaymentInner({
     };
   }, []);
 
-  useEffect(() => {
-    if (!methods || query.currencyId) {
-      return;
-    }
-    if (state.checkoutSession.currency_id !== defaultCurrencyId) {
-      methods.setValue('payment_currency', state.checkoutSession.currency_id);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.checkoutSession, defaultCurrencyId, query.currencyId]);
-
   const currencyId = useWatch({ control: methods.control, name: 'payment_currency', defaultValue: defaultCurrencyId });
   const currency =
     (findCurrency(paymentMethods as TPaymentMethodExpanded[], currencyId as string) as TPaymentCurrency) ||

package/src/payment/product-donation.tsx

@@ -1,6 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { DonationSettings, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
-import { Avatar, Box, Card, CardActionArea, Grid, Stack, TextField, Typography } from '@mui/material';
+import { Avatar, Box, Card, CardActionArea, Grid, Stack, TextField, Typography, IconButton } from '@mui/material';
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import { useSetState } from 'ahooks';
 import { useEffect, useRef } from 'react';
 
@@ -78,6 +79,7 @@ export default function ProductDonation({
     input: defaultCustomAmount,
     custom: !supportPreset || defaultPreset === 'custom',
     error: '',
+    animating: false,
   });
 
   const customInputRef = useRef<HTMLInputElement>(null);
@@ -91,15 +93,98 @@ export default function ProductDonation({
   };
 
   const handleCustomSelect = () => {
-    setState({ custom: true, selected: '', error: '' });
-    const savedCustomAmount = getSavedCustomAmount();
-    if (savedCustomAmount) {
-      setState({ input: savedCustomAmount });
-      onChange({ priceId: item.price_id, amount: savedCustomAmount });
-      setPayable(true);
-    } else if (!state.input) {
-      setPayable(false);
+    // Set custom mode and prepare for random amount
+    setState({
+      custom: true,
+      selected: '',
+      animating: true,
+    });
+
+    // Prepare random amount range with correctly sorted presets
+    const hasPresets = presets.length > 0;
+    let sortedPresets: number[] = [];
+    if (hasPresets) {
+      sortedPresets = [...presets].map((p) => parseFloat(p)).sort((a, b) => a - b);
     }
+
+    // Get min and max values for random amount
+    const minPreset = hasPresets ? sortedPresets[0] : 1;
+    const middleIndex = Math.floor(sortedPresets.length / 2);
+    const maxPreset = hasPresets ? sortedPresets[middleIndex] : 10;
+
+    // Detect precision from existing presets
+    const detectPrecision = () => {
+      let maxPrecision = 2; // Default to 2 decimal places for currency
+
+      // If no presets, default to 0 precision (integers) for simplicity
+      if (!hasPresets) return 0;
+
+      const allIntegers = presets.every((preset) => {
+        const num = parseFloat(preset);
+        return num === Math.floor(num);
+      });
+
+      if (allIntegers) return 0;
+
+      presets.forEach((preset) => {
+        const decimalPart = preset.toString().split('.')[1];
+        if (decimalPart) {
+          maxPrecision = Math.max(maxPrecision, decimalPart.length);
+        }
+      });
+
+      return maxPrecision;
+    };
+
+    const precision = detectPrecision();
+
+    // Generate random amount with matching precision
+    let randomAmount;
+    if (precision === 0) {
+      randomAmount = (Math.round(Math.random() * (maxPreset - minPreset) + minPreset) || 1).toString();
+    } else {
+      randomAmount = (Math.random() * (maxPreset - minPreset) + minPreset).toFixed(precision);
+    }
+
+    // Get starting value for animation - use either current input, cached value, or 0
+    const startValue = state.input ? parseFloat(state.input) : 0;
+    const targetValue = parseFloat(randomAmount);
+    const difference = targetValue - startValue;
+
+    // Animate value change
+    const startTime = Date.now();
+    const duration = 800;
+
+    const updateCounter = () => {
+      const currentTime = Date.now();
+      const elapsed = currentTime - startTime;
+
+      if (elapsed < duration) {
+        const progress = elapsed / duration;
+        const intermediateValue = startValue + difference * progress;
+        const currentValue =
+          precision === 0 ? Math.floor(intermediateValue).toString() : intermediateValue.toFixed(precision);
+
+        setState({ input: currentValue });
+        requestAnimationFrame(updateCounter);
+      } else {
+        // Animation complete
+        setState({
+          input: randomAmount,
+          animating: false,
+          error: '',
+        });
+        onChange({ priceId: item.price_id, amount: formatAmount(randomAmount) });
+        setPayable(true);
+        localStorage.setItem(getUserStorageKey(DONATION_CUSTOM_AMOUNT_KEY_BASE), formatAmount(randomAmount));
+
+        setTimeout(() => {
+          customInputRef.current?.focus();
+        }, 200);
+      }
+    };
+
+    requestAnimationFrame(updateCounter);
     localStorage.setItem(getUserStorageKey(DONATION_PRESET_KEY_BASE), 'custom');
   };
 
@@ -111,7 +196,6 @@ export default function ProductDonation({
     }
   };
 
-  // 使用useTabNavigation进行键盘导航
   const { handleKeyDown } = useTabNavigation(presets, handleTabSelect, {
     includeCustom: supportCustom,
     currentValue: state.custom ? undefined : state.selected,
@@ -286,14 +370,49 @@ export default function ProductDonation({
           InputProps={{
             endAdornment: (
               <Stack direction="row" spacing={0.5} alignItems="center" sx={{ ml: 1 }}>
+                <IconButton
+                  size="small"
+                  onClick={handleCustomSelect}
+                  disabled={state.animating}
+                  sx={{
+                    mr: 0.5,
+                    opacity: state.animating ? 0.5 : 1,
+                    transition: 'all 0.2s ease',
+                    '&:hover': {
+                      transform: 'scale(1.2)',
+                      transition: 'transform 0.3s ease',
+                    },
+                  }}
+                  aria-label={t('common.random')}>
+                  <AutoAwesomeIcon fontSize="small" />
+                </IconButton>
                 <Avatar src={currency?.logo} sx={{ width: 16, height: 16 }} alt={currency?.symbol} />
                 <Typography>{currency?.symbol}</Typography>
               </Stack>
             ),
             autoComplete: 'off',
+            sx: {
+              '& input': {
+                transition: 'all 0.25s ease',
+              },
+            },
           }}
           sx={{
             mt: defaultPreset !== '0' ? 0 : 1,
+            '& .MuiInputBase-root': {
+              transition: 'all 0.3s ease',
+            },
+            '& input[type=number]': {
+              MozAppearance: 'textfield',
+            },
+            '& input[type=number]::-webkit-outer-spin-button': {
+              WebkitAppearance: 'none',
+              margin: 0,
+            },
+            '& input[type=number]::-webkit-inner-spin-button': {
+              WebkitAppearance: 'none',
+              margin: 0,
+            },
           }}
         />
       )}

package/src/types/shims.d.ts

@@ -16,3 +16,5 @@ declare module 'pretty-ms-i18n';
 declare var blocklet: import('@blocklet/sdk').WindowBlocklet;
 
 declare var __PAYMENT_KIT_BASE_URL: string;
+
+declare var __PAYMENT_KIT_AUTH_TOKEN: string;