@blocklet/payment-react 1.19.18 → 1.19.20

package/lib/payment/form/index.js

@@ -21,6 +21,7 @@ var _util = require("@ocap/util");
 var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _iconsMaterial = require("@mui/icons-material");
+var _withTracker = require("@arcblock/ux/lib/withTracker");
 var _input = _interopRequireDefault(require("../../components/input"));
 var _label = _interopRequireDefault(require("../../components/label"));
 var _payment = require("../../contexts/payment");
@@ -136,6 +137,7 @@ function PaymentForm({
     trigger
   } = (0, _reactHookForm.useFormContext)();
   const errorRef = (0, _react.useRef)(null);
+  const processingRef = (0, _react.useRef)(false);
   const quantityInventoryStatus = (0, _react.useMemo)(() => {
     let status = true;
     for (const item of checkoutSession.line_items) {
@@ -287,6 +289,10 @@ function PaymentForm({
     return true;
   }, [session?.user, method, checkoutSession]);
   const handleConnected = async () => {
+    if (processingRef.current) {
+      return;
+    }
+    processingRef.current = true;
     setState({
       paying: true
     });
@@ -300,11 +306,21 @@ function PaymentForm({
         onPaid(result);
       }
     } catch (err) {
-      _Toast.default.error((0, _util2.formatError)(err));
+      const errorMessage = (0, _util2.formatError)(err);
+      const payFailedEvent = {
+        action: "payFailed",
+        // @ts-ignore 后续升级的话就会报错了，移除这个 lint 即可
+        mode: checkoutSession.mode,
+        errorMessage,
+        success: false
+      };
+      _withTracker.ReactGA.event(payFailedEvent.action, payFailedEvent);
+      _Toast.default.error(errorMessage);
     } finally {
       setState({
         paying: false
       });
+      processingRef.current = false;
     }
   };
   (0, _react.useEffect)(() => {

package/lib/payment/product-item.js

@@ -37,7 +37,8 @@ function ProductItem({
     locale
   } = (0, _context.useLocaleContext)();
   const {
-    settings
+    settings,
+    setPayable
   } = (0, _payment.usePaymentContext)();
   const pricing = (0, _util.formatLineItemPricing)(item, currency, {
     trialEnd,
@@ -56,7 +57,14 @@ function ProductItem({
   const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
   const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
   const maxQuantity = quantityAvailable ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable) : adjustableQuantity.maximum || Infinity;
+  const localQuantityNum = localQuantity || 0;
   const handleQuantityChange = newQuantity => {
+    if (!newQuantity) {
+      setLocalQuantity(void 0);
+      setPayable(false);
+      return;
+    }
+    setPayable(true);
     if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
       if ((0, _util.formatQuantityInventory)(item.price, newQuantity, locale)) {
         return;
@@ -66,17 +74,17 @@ function ProductItem({
     }
   };
   const handleQuantityIncrease = () => {
-    if (localQuantity < maxQuantity) {
-      handleQuantityChange(localQuantity + 1);
+    if (localQuantityNum < maxQuantity) {
+      handleQuantityChange(localQuantityNum + 1);
     }
   };
   const handleQuantityDecrease = () => {
-    if (localQuantity > minQuantity) {
-      handleQuantityChange(localQuantity - 1);
+    if (localQuantityNum > minQuantity) {
+      handleQuantityChange(localQuantityNum - 1);
     }
   };
   const handleQuantityInputChange = event => {
-    const value = parseInt(event.target.value, 10);
+    const value = parseInt(event.target.value || "0", 10);
     if (!Number.isNaN(value)) {
       handleQuantityChange(value);
     }
@@ -84,7 +92,7 @@ function ProductItem({
   const formatCreditInfo = () => {
     if (!isCreditProduct) return null;
     const isRecurring = item.price.type === "recurring";
-    const totalCredit = (0, _util.formatNumber)(creditAmount * localQuantity);
+    const totalCredit = (0, _util.formatNumber)(creditAmount * (localQuantity || 0));
     let message = "";
     if (isRecurring) {
       message = t("payment.checkout.credit.recurringInfo", {
@@ -114,7 +122,7 @@ function ProductItem({
     }
     return pricing.primary;
   }, [trialInDays, trialEnd, pricing, item, locale]);
-  const quantityInventoryError = (0, _util.formatQuantityInventory)(item.price, localQuantity, locale);
+  const quantityInventoryError = (0, _util.formatQuantityInventory)(item.price, localQuantityNum, locale);
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "column",
     spacing: 1,
@@ -203,7 +211,7 @@ function ProductItem({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
             size: "small",
             onClick: handleQuantityDecrease,
-            disabled: localQuantity <= minQuantity,
+            disabled: localQuantityNum <= minQuantity,
             sx: {
               minWidth: 32,
               width: 32,
@@ -231,7 +239,7 @@ function ProductItem({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
             size: "small",
             onClick: handleQuantityIncrease,
-            disabled: localQuantity >= maxQuantity,
+            disabled: localQuantityNum >= maxQuantity,
             sx: {
               minWidth: 32,
               width: 32,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.19.18",
+  "version": "1.19.20",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,16 +54,16 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect-react": "^3.1.18",
-    "@arcblock/ux": "^3.1.18",
-    "@arcblock/ws": "^1.21.3",
-    "@blocklet/theme": "^3.1.18",
-    "@blocklet/ui-react": "^3.1.18",
+    "@arcblock/did-connect-react": "^3.1.31",
+    "@arcblock/ux": "^3.1.31",
+    "@arcblock/ws": "^1.23.1",
+    "@blocklet/theme": "^3.1.31",
+    "@blocklet/ui-react": "^3.1.31",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/util": "^1.21.3",
+    "@ocap/util": "^1.23.1",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^7.0.0",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.19.18",
+    "@blocklet/payment-types": "1.19.20",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "b57baf21f22ae453247bc31444673aa01e35e6dc"
+  "gitHead": "4e09a5936748fc15c1ab6ea90b741b3e44f5eab7"
 }

package/src/checkout/form.tsx

@@ -4,6 +4,8 @@ import noop from 'lodash/noop';
 import { useEffect } from 'react';
 import { joinURL } from 'ufo';
 
+import { ReactGA } from '@arcblock/ux/lib/withTracker';
+import type { PayFailedEvent, PaySuccessEvent } from '@arcblock/ux/lib/withTracker/action/pay';
 import api from '../libs/api';
 import { getPrefix, mergeExtraParams } from '../libs/util';
 import Payment from '../payment';
@@ -67,15 +69,32 @@ export default function CheckoutForm({
     }
   }, [type, mode, data, extraParams]);
 
-  const handlePaid = () => {
+  const handlePaid = (result: CheckoutContext) => {
     setState({ completed: true });
-    onPaid?.(data as CheckoutContext);
+    onPaid?.(result as CheckoutContext);
+
+    const paySuccessEvent: PaySuccessEvent = {
+      action: 'paySuccess',
+      // @ts-ignore 后续升级的话就会报错了，移除这个 lint 即可
+      mode: data?.checkoutSession?.mode!,
+      success: true,
+    };
+    ReactGA.event(paySuccessEvent.action, paySuccessEvent);
   };
 
   const handleError = (err: any) => {
     console.error(err);
     setState({ appError: err });
     onError?.(err);
+
+    const payFailedEvent: PayFailedEvent = {
+      action: 'payFailed',
+      // @ts-ignore后续升级的话就会报错了，移除这个 lint 即可
+      mode: data?.checkoutSession?.mode!,
+      errorMessage: err.message,
+      success: false,
+    };
+    ReactGA.event(payFailedEvent.action, payFailedEvent);
   };
 
   const Checkout =

package/src/components/auto-topup/index.tsx

@@ -0,0 +1,449 @@
+import React, { useState, useCallback } from 'react';
+import {
+  Box,
+  Typography,
+  Stack,
+  Button,
+  CircularProgress,
+  Card,
+  CardContent,
+  IconButton,
+  Tooltip,
+  SxProps,
+  Collapse,
+} from '@mui/material';
+import { AddOutlined, CreditCard, SettingsOutlined, AccountBalanceWalletOutlined } from '@mui/icons-material';
+
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useNavigate } from 'react-router-dom';
+import { joinURL } from 'ufo';
+
+import type { AutoRechargeConfig } from '@blocklet/payment-types';
+import { useRequest } from 'ahooks';
+
+import { getPrefix, formatBNStr, formatNumber, formatPrice } from '../../libs/util';
+import { createLink, handleNavigation } from '../../libs/navigation';
+import { usePaymentContext } from '../../contexts/payment';
+import api from '../../libs/api';
+import AutoTopupModal from './modal';
+
+export interface AutoTopupCardProps {
+  currencyId: string;
+  onConfigChange?: (config: AutoRechargeConfig) => void;
+  sx?: SxProps;
+  // 渲染模式: default=完整显示, simple=默认收起支持展开, custom=自定义渲染
+  mode?: 'default' | 'simple' | 'custom';
+  // 自定义渲染函数（custom模式下使用）
+  children?: (
+    openModal: () => void,
+    config: AutoRechargeConfig | null,
+    paymentData: { paymentInfo: any; balanceInfo: any } | null,
+    loading: boolean
+  ) => React.ReactNode;
+}
+
+const fetchConfig = async (customerId: string, currencyId: string) => {
+  const { data } = await api.get(`/api/auto-recharge-configs/customer/${customerId}`, {
+    params: { currency_id: currencyId },
+  });
+  return data;
+};
+
+const fetchCurrencyBalance = async (currencyId: string, payerAddress: string) => {
+  const { data } = await api.get('/api/customers/payer-token', {
+    params: { currencyId, payerAddress },
+  });
+  return data;
+};
+
+const cardStyle = {
+  height: '100%',
+  width: '100%',
+  border: '1px solid',
+  borderColor: 'divider',
+  boxShadow: 1,
+  borderRadius: 1,
+  backgroundColor: 'background.default',
+};
+
+export default function AutoTopupCard({
+  currencyId,
+  onConfigChange = () => {},
+  sx = {},
+  mode = 'default',
+  children = undefined,
+}: AutoTopupCardProps) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const { session } = usePaymentContext();
+  const [modalOpen, setModalOpen] = useState(false);
+  const [paymentData, setPaymentData] = useState<{ paymentInfo: any; balanceInfo: any } | null>(null);
+  const [quickSetupMode, setQuickSetupMode] = useState(false); // 是否是快速设置模式
+  // simple模式默认收起，default模式默认展开
+  const [expanded, setExpanded] = useState(mode === 'default');
+
+  const customerId = session?.user?.did || '';
+
+  const {
+    data: config,
+    loading,
+    refresh,
+  } = useRequest(() => fetchConfig(customerId, currencyId), {
+    refreshDeps: [customerId, currencyId],
+    ready: !!customerId && !!currencyId,
+    onSuccess: (data) => {
+      loadPaymentInfo(data);
+    },
+  });
+
+  const loadPaymentInfo = useCallback(async (data: any) => {
+    if (!data?.recharge_currency_id) return;
+
+    try {
+      const paymentMethodType = data?.paymentMethod?.type;
+      const paymentInfo = data?.payment_settings?.payment_method_options?.[paymentMethodType];
+      const balanceInfo =
+        paymentInfo?.payer && paymentMethodType !== 'stripe'
+          ? await fetchCurrencyBalance(data.recharge_currency_id, paymentInfo.payer as string)
+          : null;
+
+      setPaymentData({
+        paymentInfo,
+        balanceInfo,
+      });
+    } catch (error) {
+      console.error('Failed to load payment info:', error);
+    }
+  }, []);
+
+  const handleRecharge = (e: React.MouseEvent) => {
+    if (!paymentData?.paymentInfo?.payer) return;
+    const url = joinURL(
+      getPrefix(),
+      `/customer/recharge/${config?.recharge_currency_id}?rechargeAddress=${paymentData.paymentInfo.payer}`
+    );
+    const link = createLink(url, true);
+    handleNavigation(e, link, navigate);
+  };
+
+  const handleConfigSuccess = (newConfig: AutoRechargeConfig) => {
+    refresh();
+    onConfigChange?.(newConfig);
+    setModalOpen(false);
+    setQuickSetupMode(false); // 重置快速设置模式
+  };
+
+  const handleToggleExpanded = () => {
+    setExpanded(!expanded);
+  };
+
+  if (loading) {
+    return (
+      <Card sx={{ ...cardStyle, ...sx }}>
+        <CardContent>
+          <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 80 }}>
+            <CircularProgress size={24} />
+          </Box>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!config) {
+    return null;
+  }
+
+  const renderPurchaseDetails = () => {
+    const { paymentInfo, balanceInfo } = paymentData || {};
+
+    if (!paymentInfo) {
+      return (
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+          }}>
+          {t('payment.autoTopup.notConfigured')}
+        </Typography>
+      );
+    }
+
+    const purchaseAmount = formatPrice(
+      config.price,
+      config.rechargeCurrency,
+      config.price.product?.unit_label,
+      config.quantity,
+      true
+    );
+
+    if (config?.paymentMethod?.type === 'stripe') {
+      const cardBrand =
+        (paymentInfo?.card_brand || 'Card').charAt(0).toUpperCase() +
+        (paymentInfo?.card_brand || 'Card').slice(1).toLowerCase();
+      const last4 = paymentInfo?.card_last4;
+
+      return (
+        <Stack spacing={1}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'text.secondary',
+              }}>
+              {t('payment.autoTopup.purchaseAmount')}：
+            </Typography>
+            <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary' }}>
+              {purchaseAmount}
+            </Typography>
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'text.secondary',
+              }}>
+              {t('payment.autoTopup.paymentMethod')}：
+            </Typography>
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                alignItems: 'center',
+              }}>
+              <CreditCard fontSize="small" sx={{ color: 'text.secondary' }} />
+              <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 500 }}>
+                {cardBrand}({last4})
+              </Typography>
+            </Stack>
+          </Box>
+        </Stack>
+      );
+    }
+
+    return (
+      <Stack spacing={1}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'text.secondary',
+            }}>
+            {t('payment.autoTopup.purchaseAmount')}：
+          </Typography>
+          <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary' }}>
+            {purchaseAmount}
+          </Typography>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'text.secondary',
+              }}>
+              {t('payment.autoTopup.walletBalance')}：
+            </Typography>
+            <Tooltip
+              title={paymentInfo?.payer ? `${t('payment.autoTopup.paymentAddress')}: ${paymentInfo.payer}` : ''}
+              placement="top">
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                <AccountBalanceWalletOutlined sx={{ fontSize: 16, color: 'text.secondary' }} />
+                <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary' }}>
+                  {balanceInfo
+                    ? `${formatBNStr(balanceInfo?.token || '0', config?.rechargeCurrency?.decimal || 18)} ${config?.rechargeCurrency?.symbol || ''}`
+                    : '--'}
+                </Typography>
+              </Box>
+            </Tooltip>
+            {balanceInfo && (
+              <Button
+                size="small"
+                variant="text"
+                onClick={handleRecharge}
+                sx={{
+                  color: 'primary.main',
+                  display: 'flex',
+                  alignItems: 'center',
+                }}>
+                <AddOutlined fontSize="small" />
+                {t('payment.autoTopup.addFunds')}
+              </Button>
+            )}
+          </Box>
+        </Box>
+      </Stack>
+    );
+  };
+
+  const openModal = () => setModalOpen(true);
+
+  const renderInnerView = () => {
+    if (mode === 'custom') {
+      return children && typeof children === 'function' ? (
+        <>{children(openModal, config, paymentData, loading)}</>
+      ) : (
+        <Typography>
+          Please provide a valid render function
+          <pre>{'(openModal, config, paymentData, loading) => ReactNode'}</pre>
+        </Typography>
+      );
+    }
+
+    return (
+      <Card sx={{ ...cardStyle, ...sx }}>
+        <CardContent>
+          {/* Header */}
+          <Stack
+            direction="row"
+            className="auto-topup-header"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              borderBottom: '1px solid',
+              borderColor: 'divider',
+              pb: 1.5,
+            }}>
+            <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'text.primary' }}>
+              {t('payment.autoTopup.title')}
+            </Typography>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+              <IconButton
+                size="small"
+                onClick={openModal}
+                sx={{
+                  p: 0.5,
+                  color: 'text.secondary',
+                  '&:hover': {
+                    bgcolor: 'grey.50',
+                    color: 'text.primary',
+                  },
+                }}>
+                <SettingsOutlined fontSize="small" />
+              </IconButton>
+            </Box>
+          </Stack>
+
+          {config?.enabled ? (
+            <Stack spacing={1.5} className="auto-topup-content" sx={{ pt: 1.5 }}>
+              {/* Main Description */}
+              {(() => {
+                const threshold = `${formatNumber(config.threshold)} ${config.currency?.symbol || ''}`;
+                const credits = `${formatNumber(
+                  Number(config.price.metadata?.credit_config?.credit_amount || 0) * Number(config.quantity)
+                )} ${config.currency?.name || ''}`;
+
+                return (
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      color: 'text.secondary',
+                    }}>
+                    {t('payment.autoTopup.activeDescriptionWithCredits', { threshold, credits })}
+                    {/* 展开收起按钮 - 仅在simple模式下显示 */}
+                    {mode === 'simple' && (
+                      <Button
+                        component="span"
+                        size="small"
+                        variant="text"
+                        onClick={handleToggleExpanded}
+                        sx={{
+                          color: 'primary.main',
+                          minWidth: 'auto',
+                          ml: 1,
+                          p: 0,
+                          fontSize: 'inherit',
+                          textTransform: 'none',
+                          '&:hover': {
+                            backgroundColor: 'transparent',
+                            textDecoration: 'underline',
+                          },
+                        }}>
+                        {expanded ? t('payment.autoTopup.hideDetails') : t('payment.autoTopup.showDetails')}
+                      </Button>
+                    )}
+                  </Typography>
+                );
+              })()}
+
+              <Collapse in={mode === 'default' || expanded}>
+                <Box
+                  sx={{
+                    bgcolor: 'grey.50',
+                    borderRadius: 1,
+                    p: 1.5,
+                  }}>
+                  {renderPurchaseDetails()}
+                </Box>
+              </Collapse>
+            </Stack>
+          ) : (
+            <Stack
+              className="auto-topup-content"
+              sx={{
+                minHeight: 80,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                pt: 1.5,
+                gap: 2,
+              }}>
+              <Typography
+                variant="body2"
+                sx={{
+                  color: 'text.secondary',
+                  textAlign: 'left',
+                }}>
+                {t('payment.autoTopup.inactiveDescription', {
+                  name: config?.currency?.name,
+                })}
+                <Button
+                  component="span"
+                  variant="text"
+                  size="small"
+                  onClick={() => {
+                    setQuickSetupMode(true);
+                    setModalOpen(true);
+                  }}
+                  sx={{
+                    color: 'primary.main',
+                    minWidth: 'auto',
+                    ml: 1,
+                    p: 0,
+                    fontSize: 'inherit',
+                    textTransform: 'none',
+                    '&:hover': {
+                      backgroundColor: 'transparent',
+                      textDecoration: 'underline',
+                    },
+                  }}>
+                  {t('payment.autoTopup.setup')}
+                </Button>
+              </Typography>
+            </Stack>
+          )}
+        </CardContent>
+      </Card>
+    );
+  };
+
+  return (
+    <>
+      {renderInnerView()}
+
+      {modalOpen && (
+        <AutoTopupModal
+          open={modalOpen}
+          onClose={() => {
+            setModalOpen(false);
+            setQuickSetupMode(false); // 关闭时重置快速设置模式
+          }}
+          currencyId={currencyId}
+          onSuccess={handleConfigSuccess}
+          defaultEnabled={quickSetupMode} // 传递默认启用状态
+        />
+      )}
+    </>
+  );
+}