@blocklet/payment-react 1.18.25 → 1.18.27

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

@@ -49,6 +49,7 @@ function StripeCheckoutForm({
     loaded: false,
     showBillingForm: false,
     isTransitioning: false,
+    paymentMethod: 'card',
   });
 
   const handlePaymentMethodChange = (event: any) => {
@@ -61,6 +62,7 @@ function StripeCheckoutForm({
       setTimeout(() => {
         setState({
           isTransitioning: false,
+          paymentMethod: method,
           showBillingForm: true,
         });
       }, 300);
@@ -68,6 +70,7 @@ function StripeCheckoutForm({
       // if shouldShowForm is false, set showBillingForm to false immediately
       setState({
         showBillingForm: false,
+        paymentMethod: method,
         isTransitioning: false,
       });
     }
@@ -113,15 +116,16 @@ function StripeCheckoutForm({
       }
 
       try {
-        setState({ confirming: true });
+        setState({ confirming: true, message: '' });
         const method = intentType === 'payment_intent' ? 'confirmPayment' : 'confirmSetup';
 
         const { error: submitError } = await elements.submit();
         if (submitError) {
+          setState({ confirming: false });
           return;
         }
 
-        const { error } = await stripe[method]({
+        const { error, paymentIntent, setupIntent } = await stripe[method]({
           elements,
           redirect: 'if_required',
           confirmParams: {
@@ -148,6 +152,12 @@ function StripeCheckoutForm({
               : {}),
           },
         });
+        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') {
@@ -163,17 +173,18 @@ 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,
-        }}
-      />
-
+      {(!state.paymentMethod || state.paymentMethod === 'card') && (
+        <LinkAuthenticationElement
+          options={{
+            defaultEmail: customer.email,
+          }}
+        />
+      )}
       <PaymentElementContainer className={!state.isTransitioning ? 'visible' : ''}>
         <PaymentElement
           options={{

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;