@blocklet/payment-react 1.19.18 → 1.19.20

package/src/components/auto-topup/product-card.tsx

@@ -0,0 +1,156 @@
+import { Stack, Typography, TextField, Card } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useState } from 'react';
+
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+import ProductCard from '../../payment/product-card';
+import { formatPrice, formatNumber } from '../../libs/util';
+
+interface AutoTopupProductCardProps {
+  product: any;
+  price: any;
+  currency: TPaymentCurrency;
+  quantity: number;
+  onQuantityChange: (quantity: number) => void;
+  maxQuantity?: number;
+  minQuantity?: number;
+  creditCurrency: TPaymentCurrency;
+}
+
+export default function AutoTopupProductCard({
+  product,
+  price,
+  currency,
+  quantity,
+  onQuantityChange,
+  maxQuantity = 99,
+  minQuantity = 1,
+  creditCurrency,
+}: AutoTopupProductCardProps) {
+  const { t } = useLocaleContext();
+  const [localQuantity, setLocalQuantity] = useState<number | undefined>(quantity);
+  const localQuantityNum = Number(localQuantity) || 0;
+
+  const handleQuantityChange = (newQuantity: number) => {
+    if (!newQuantity) {
+      setLocalQuantity(undefined);
+      return;
+    }
+    if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
+      setLocalQuantity(newQuantity);
+      onQuantityChange(newQuantity);
+    }
+  };
+
+  const handleQuantityInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value || '0', 10);
+    if (!Number.isNaN(value)) {
+      handleQuantityChange(value);
+    }
+  };
+
+  const creditUnitAmount = Number(price.metadata?.credit_config?.credit_amount || 0);
+  return (
+    <Card variant="outlined" sx={{ p: 2 }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{
+          flexDirection: {
+            xs: 'column',
+            sm: 'row',
+          },
+          alignItems: {
+            xs: 'flex-start',
+            sm: 'center',
+          },
+          justifyContent: {
+            xs: 'flex-start',
+            sm: 'space-between',
+          },
+        }}>
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: 'center',
+            flex: 1,
+          }}>
+          <ProductCard
+            name={product?.name || ''}
+            description={t('payment.autoTopup.creditsIncluded', {
+              name: creditCurrency?.name,
+              num: formatNumber(creditUnitAmount * localQuantityNum),
+            })}
+            logo={product?.images?.[0] as string}
+            size={40}
+          />
+        </Stack>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: 'center',
+            alignSelf: {
+              xs: 'flex-end',
+              sm: 'center',
+            },
+          }}>
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'text.secondary',
+              minWidth: 'fit-content',
+            }}>
+            {t('common.quantity')}:
+          </Typography>
+          <TextField
+            size="small"
+            value={localQuantity}
+            onChange={handleQuantityInputChange}
+            type="number"
+            sx={{
+              '& .MuiInputBase-root': {
+                height: 32,
+              },
+            }}
+            slotProps={{
+              htmlInput: {
+                min: 0,
+                max: maxQuantity,
+                style: { textAlign: 'center', padding: '4px 8px' },
+              },
+            }}
+          />
+        </Stack>
+      </Stack>
+      {/* 充值金额显示 */}
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          mt: 2,
+          pt: 2,
+          borderTop: '1px solid',
+          borderColor: 'divider',
+        }}>
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+          }}>
+          {t('payment.autoTopup.rechargeAmount')}
+        </Typography>
+        <Typography
+          variant="h6"
+          sx={{
+            fontWeight: 600,
+            color: 'text.primary',
+          }}>
+          {formatPrice(price, currency, product?.unit_label, localQuantity, true)}
+        </Typography>
+      </Stack>
+    </Card>
+  );
+}

package/src/components/collapse.tsx

@@ -0,0 +1,82 @@
+/* eslint-disable react/prop-types */
+import { ExpandLessOutlined, ExpandMoreOutlined } from '@mui/icons-material';
+import { Box, Collapse, Stack } from '@mui/material';
+import { useEffect, useState } from 'react';
+
+type Props = {
+  trigger: string | ((expanded: boolean) => React.ReactNode) | React.ReactNode;
+  children?: React.ReactNode;
+  expanded?: boolean;
+  addons?: React.ReactNode;
+  style?: Record<string, any>;
+  value?: string;
+  onChange?: (value: string, expanded: boolean) => void;
+  lazy?: boolean;
+  card?: boolean;
+};
+
+export default function IconCollapse(rawProps: Props) {
+  const props = Object.assign(
+    {
+      value: '',
+      onChange: () => {},
+      children: null,
+      expanded: false,
+      addons: null,
+      style: {},
+      lazy: true,
+      card: false,
+    },
+    rawProps
+  );
+  const [expanded, setExpanded] = useState(props.expanded || false);
+  const toggleExpanded = () => {
+    const newExpanded = !expanded;
+    setExpanded(newExpanded);
+  };
+
+  useEffect(() => {
+    setExpanded(props.expanded || false);
+  }, [props.expanded]);
+
+  return (
+    <>
+      <Stack
+        direction="row"
+        onClick={(e) => {
+          e.stopPropagation();
+          props.onChange?.(props.value || '', !expanded);
+          toggleExpanded();
+        }}
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          width: 1,
+          cursor: 'pointer',
+          fontWeight: 500,
+          color: 'text.primary',
+          '& :hover': { color: 'primary.main' },
+          ...(props.card && {
+            borderRadius: 1,
+            padding: 1,
+            pl: 2,
+            backgroundColor: 'grey.100',
+          }),
+          ...props.style,
+        }}>
+        <Box>{typeof props.trigger === 'function' ? props.trigger(expanded) : props.trigger}</Box>
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: 'center',
+          }}>
+          {props.addons} {expanded ? <ExpandLessOutlined /> : <ExpandMoreOutlined />}
+        </Stack>
+      </Stack>
+      <Collapse in={expanded} sx={{ width: '100%' }}>
+        {expanded || props.lazy ? props.children : null}
+      </Collapse>
+    </>
+  );
+}

package/src/components/input.tsx

@@ -1,5 +1,5 @@
 import React, { type ReactNode, useImperativeHandle, useRef } from 'react';
-import { Box, InputAdornment, TextField, Typography } from '@mui/material';
+import { Box, InputAdornment, TextField, Typography, Stack, useMediaQuery, useTheme } from '@mui/material';
 import get from 'lodash/get';
 import { Controller, useFormContext } from 'react-hook-form';
 import type { TextFieldProps } from '@mui/material';
@@ -16,6 +16,7 @@ type InputProps = TextFieldProps & {
   required?: boolean;
   tooltip?: ReactNode | string;
   description?: ReactNode | string;
+  layout?: 'vertical' | 'horizontal';
 };
 
 function FormInputError({ error }: { error: string }) {
@@ -40,17 +41,46 @@ export default function FormInput({
   required = false,
   tooltip = '',
   description = '',
+  layout = 'vertical',
+  slotProps,
   ...rest
 }: InputProps & {
   ref?: React.RefObject<HTMLInputElement | null>;
   inputProps?: TextFieldProps['inputProps'];
 }) {
   const { control, formState } = useFormContext();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const inputRef = useRef<HTMLInputElement | null>(null);
+
   useImperativeHandle(ref, () => {
     return inputRef.current as HTMLInputElement;
   });
+
   const error = get(formState.errors, name)?.message as string;
+  const isHorizontal = layout === 'horizontal' && !isMobile;
+
+  const mergedSlotProps = {
+    htmlInput: { ...inputProps, ...slotProps?.htmlInput },
+    input: Object.assign(
+      rest.InputProps || {},
+      slotProps?.input || {},
+      errorPosition === 'right' && error ? { endAdornment: <FormInputError error={error} /> } : {}
+    ),
+  };
+
+  const renderLabel = () => {
+    if (!label) return null;
+    return (
+      <FormLabel
+        required={required}
+        tooltip={tooltip}
+        description={description}
+        boxSx={isHorizontal ? { width: 'fit-content', whiteSpace: 'nowrap', minWidth: 'fit-content' } : undefined}>
+        {label}
+      </FormLabel>
+    );
+  };
 
   return (
     <Controller
@@ -59,28 +89,47 @@ export default function FormInput({
       rules={rules}
       render={({ field }) => (
         <Box sx={{ width: '100%', ...wrapperStyle }}>
-          {!!label && (
-            <FormLabel required={required} tooltip={tooltip} description={description}>
-              {label}
-            </FormLabel>
+          {isHorizontal ? (
+            <Stack
+              direction="row"
+              spacing={2}
+              sx={{
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}>
+              {renderLabel()}
+              <TextField
+                fullWidth={false}
+                error={!!error}
+                helperText={errorPosition === 'bottom' && error ? error : ''}
+                placeholder={placeholder}
+                size="small"
+                {...field}
+                {...rest}
+                inputRef={inputRef}
+                slotProps={mergedSlotProps}
+                sx={{
+                  flex: 1,
+                  ...rest.sx,
+                }}
+              />
+            </Stack>
+          ) : (
+            <>
+              {renderLabel()}
+              <TextField
+                fullWidth
+                error={!!error}
+                helperText={errorPosition === 'bottom' && error ? error : ''}
+                placeholder={placeholder}
+                size="small"
+                {...field}
+                {...rest}
+                inputRef={inputRef}
+                slotProps={mergedSlotProps}
+              />
+            </>
           )}
-          <TextField
-            fullWidth
-            error={!!get(formState.errors, name)}
-            helperText={errorPosition === 'bottom' && error ? error : ''}
-            placeholder={placeholder}
-            size="small"
-            {...field}
-            {...rest}
-            inputRef={inputRef}
-            slotProps={{
-              htmlInput: inputProps,
-              input: Object.assign(
-                rest.InputProps || {},
-                errorPosition === 'right' && error ? { endAdornment: <FormInputError error={error} /> } : {}
-              ),
-            }}
-          />
         </Box>
       )}
     />

package/src/components/label.tsx

@@ -8,10 +8,16 @@ export default function CustomFormLabel({
   required = false,
   tooltip = '',
   description = '',
+  boxSx = {},
   ...props
-}: FormLabelProps & { required?: boolean; tooltip?: ReactNode | string; description?: ReactNode | string }) {
+}: FormLabelProps & {
+  required?: boolean;
+  tooltip?: ReactNode | string;
+  description?: ReactNode | string;
+  boxSx?: React.CSSProperties;
+}) {
   return (
-    <Box sx={{ mb: 1, width: '100%' }}>
+    <Box sx={{ mb: 1, width: '100%', ...boxSx }}>
       <FormLabel
         {...props}
         sx={{

package/src/index.ts

@@ -36,6 +36,9 @@ import PaymentBeneficiaries from './components/payment-beneficiaries';
 import LoadingButton from './components/loading-button';
 import ResumeSubscription from './components/resume-subscription';
 import DateRangePicker from './components/date-range-picker';
+import AutoTopupModal from './components/auto-topup/modal';
+import AutoTopup from './components/auto-topup';
+import Collapse from './components/collapse';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -50,6 +53,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';
@@ -95,4 +99,7 @@ export {
   CreditTransactionsList,
   DateRangePicker,
   CreditStatusChip,
+  AutoTopupModal,
+  AutoTopup,
+  Collapse,
 };

package/src/libs/util.ts

@@ -1188,6 +1188,7 @@ export function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded, locale
     recharge: t('payment.invoice.reason.recharge', locale),
     stake_overdraft_protection: t('payment.invoice.reason.stake', locale),
     overdraft_protection: t('payment.invoice.reason.fee', locale),
+    auto_recharge: t('payment.invoice.reason.recharge', locale),
   };
   let invoiceType = t('payment.invoice.reason.payment', locale);
   if (reason.includes('stake') || reason.includes('recharge') || reason === 'overdraft_protection') {

package/src/locales/en.tsx

@@ -31,6 +31,8 @@ export default flat({
     removed: 'Resource removed',
     confirm: 'Confirm',
     clear: 'Clear',
+    show: 'Show',
+    hide: 'Hide',
     selectTimeRange: 'Select time range',
     startDate: 'Start date',
     endDate: 'End date',
@@ -263,6 +265,63 @@ export default flat({
         },
       },
     },
+    autoTopup: {
+      title: 'Auto Top-Up',
+      enableLabel: 'Auto Top-Up',
+      purchaseConfig: 'Credit Purchase Configuration',
+      triggerThreshold: 'When credits are below',
+      thresholdPlaceholder: 'Enter threshold amount',
+      thresholdDescription: 'Credits remaining to trigger auto top-up',
+      thresholdMinError: 'Threshold must be greater than 0',
+      thresholdFormatError: 'Please enter a valid number',
+      creditsIncluded: '{num} {name} included',
+      purchaseBelow: 'Purchase this package',
+      perPackage: 'per package',
+      quantity: 'Quantity',
+      selectPaymentMethod: 'Select payment method',
+      paymentInformation: 'Payment Information',
+      saveConfiguration: 'Save Configuration',
+      saveSuccess: 'Auto top-up configuration saved successfully',
+      disableSuccess: 'Auto top-up disabled successfully',
+      authorizationRequired: 'Payment authorization is required to complete the setup',
+      cryptoAuthorizationNote: 'You will need to authorize payments from your wallet to enable automatic top-ups',
+      tip: 'With auto top-up enabled, the system automatically buys the specified credit package when your balance drops below the threshold.',
+      authTitle: 'Auto Top-Up Authorization',
+      authTip: 'Please complete the authorization process to enable automatic top-up',
+      rechargeAmount: 'Top-up Amount per Time',
+      currentPaymentMethod: 'Current Payment Method',
+      changePaymentMethod: 'Change Payment Method',
+      keepCurrent: 'Keep Current',
+      changePaymentMethodTip: 'You will be redirected to set up a new payment method when saving.',
+      noPaymentMethodSetup: 'No payment method configured. Please set up a payment method first.',
+      addFunds: 'Add Funds',
+      advanced: 'Advanced Options',
+      enabled: 'Enabled',
+      disabled: 'Disabled',
+      notConfigured: 'Auto Top-Up not configured',
+      setup: 'Enable Auto Top-Up',
+      ruleDisplay: 'When balance < {threshold}, top-up {amount} to get {credits} credits',
+      activeDescription:
+        'Auto top-up is enabled. When Credits drop below {threshold}, the system will automatically purchase {credits} Credits for {amount}',
+      activeDescriptionWithCredits:
+        'Auto top-up is enabled. When Credits drop below {threshold}, the system will automatically purchase {credits}.',
+      purchaseAmount: 'Purchase Amount',
+      paymentMethod: 'Payment Method',
+      walletBalance: 'Wallet Balance',
+      paymentAddress: 'Payment Address',
+      inactiveDescription:
+        'Enable auto top-up to automatically renew when {name} are insufficient, effectively avoiding service interruptions.',
+      showDetails: 'Show Method',
+      hideDetails: 'Hide Method',
+      dailyLimits: {
+        maxAmount: 'Daily Top-up Amount Limit',
+        maxAmountPlaceholder: '0 means unlimited',
+        maxAmountDescription: 'The maximum amount of top-up you can make each day, 0 means unlimited',
+        maxAttempts: 'Daily Top-up Attempts Limit',
+        maxAttemptsPlaceholder: '0 means unlimited',
+        maxAttemptsDescription: 'The maximum number of top-up attempts you can make each day, 0 means unlimited',
+      },
+    },
     customer: {
       payments: 'Payment History',
       invoices: 'Invoice History',

package/src/locales/zh.tsx

@@ -34,6 +34,8 @@ export default flat({
     confirm: '确认',
     cancel: '取消',
     clear: '清空',
+    show: '显示',
+    hide: '隐藏',
     selectTimeRange: '选择时间范围',
     startDate: '开始日期',
     endDate: '结束日期',
@@ -257,6 +259,61 @@ export default flat({
         },
       },
     },
+    autoTopup: {
+      title: '自动充值',
+      enableLabel: '自动充值',
+      purchaseConfig: '购买配置',
+      triggerThreshold: '当额度低于',
+      thresholdPlaceholder: '输入触发阈值',
+      thresholdDescription: '触发自动充值的剩余额度',
+      thresholdMinError: '阈值必须大于0',
+      thresholdFormatError: '请输入有效数字',
+      creditsIncluded: '包含 {num} {name}',
+      purchaseBelow: '购买此套餐',
+      perPackage: '每包',
+      quantity: '数量',
+      selectPaymentMethod: '选择支付方式',
+      paymentInformation: '支付信息',
+      saveConfiguration: '保存配置',
+      saveSuccess: '自动充值配置保存成功',
+      disableSuccess: '已关闭自动充值',
+      stripeSetupRequired: '需要信用卡授权以进行自动支付',
+      cryptoAuthorizationNote: '您需要从钱包授权支付以启用自动充值',
+      tip: '启用自动充值后，当您的额度低于阈值时，系统将自动购买指定数量的额度套餐。',
+      authTitle: '自动充值授权',
+      authTip: '请完成授权流程以启用自动充值',
+      rechargeAmount: '每次充值金额',
+      currentPaymentMethod: '当前支付方式',
+      changePaymentMethod: '更换支付方式',
+      keepCurrent: '保持当前',
+      changePaymentMethodTip: '保存时将引导您设置新的支付方式。',
+      noPaymentMethodSetup: '未配置支付方式，请先设置支付方式。',
+      addFunds: '充值',
+      advanced: '高级选项',
+      enabled: '已启用',
+      disabled: '已禁用',
+      notConfigured: '尚未配置自动充值',
+      setup: '去启用',
+      ruleDisplay: '额度低于{threshold}时，充值{amount}可获得{credits}额度',
+      activeDescription:
+        '自动充值已启用，当 Credits 低于 {threshold} 时，系统会自动充值购买 {credits} Credits，支付金额为 {amount}',
+      activeDescriptionWithCredits: '自动充值已启用，当 Credits 低于 {threshold} 时，系统会自动购买 {credits} 额度。',
+      purchaseAmount: '购买所需金额',
+      paymentMethod: '支付方式',
+      walletBalance: '钱包余额',
+      paymentAddress: '支付地址',
+      inactiveDescription: '开启自动充值，即可在 {name} 不足时自动续费，有效避免服务中断。',
+      showDetails: '展开支付信息',
+      hideDetails: '收起',
+      dailyLimits: {
+        maxAmount: '每日充值金额上限',
+        maxAmountPlaceholder: '0表示无限制',
+        maxAmountDescription: '每日可充值的最大总金额，0 表示无限制',
+        maxAttempts: '每日充值次数上限',
+        maxAttemptsPlaceholder: '0表示无限制',
+        maxAttemptsDescription: '每日可充值的最大次数，0 表示无限制',
+      },
+    },
     customer: {
       payments: '支付历史',
       invoices: '账单历史',

package/src/payment/form/index.tsx

@@ -15,9 +15,11 @@ import { dispatch } from 'use-bus';
 import isEmail from 'validator/es/lib/isEmail';
 import { fromUnitToToken } from '@ocap/util';
 import DID from '@arcblock/ux/lib/DID';
+import { PayFailedEvent } from '@arcblock/ux/lib/withTracker/action/pay';
 
 import isEmpty from 'lodash/isEmpty';
 import { HelpOutline, OpenInNew } from '@mui/icons-material';
+import { ReactGA } from '@arcblock/ux/lib/withTracker';
 import FormInput from '../../components/input';
 import FormLabel from '../../components/label';
 import { usePaymentContext } from '../../contexts/payment';
@@ -185,6 +187,7 @@ export default function PaymentForm({
     trigger,
   } = useFormContext();
   const errorRef = useRef<HTMLDivElement | null>(null);
+  const processingRef = useRef(false);
   const quantityInventoryStatus = useMemo(() => {
     let status = true;
     for (const item of checkoutSession.line_items) {
@@ -369,6 +372,10 @@ export default function PaymentForm({
   }, [session?.user, method, checkoutSession]);
 
   const handleConnected = async () => {
+    if (processingRef.current) {
+      return;
+    }
+    processingRef.current = true;
     setState({ paying: true });
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
@@ -377,9 +384,20 @@ export default function PaymentForm({
         onPaid(result);
       }
     } catch (err) {
-      Toast.error(formatError(err));
+      const errorMessage = formatError(err);
+      const payFailedEvent: PayFailedEvent = {
+        action: 'payFailed',
+        // @ts-ignore 后续升级的话就会报错了，移除这个 lint 即可
+        mode: checkoutSession.mode,
+        errorMessage,
+        success: false,
+      };
+      ReactGA.event(payFailedEvent.action, payFailedEvent);
+
+      Toast.error(errorMessage);
     } finally {
       setState({ paying: false });
+      processingRef.current = false;
     }
   };