@blocklet/payment-react 1.19.18 → 1.19.20

package/es/components/auto-topup/product-card.d.ts

@@ -0,0 +1,13 @@
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+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, minQuantity, creditCurrency, }: AutoTopupProductCardProps): import("react").JSX.Element;
+export {};

package/es/components/auto-topup/product-card.js

@@ -0,0 +1,173 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Stack, Typography, TextField, Card } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useState } from "react";
+import ProductCard from "../../payment/product-card.js";
+import { formatPrice, formatNumber } from "../../libs/util.js";
+export default function AutoTopupProductCard({
+  product,
+  price,
+  currency,
+  quantity,
+  onQuantityChange,
+  maxQuantity = 99,
+  minQuantity = 1,
+  creditCurrency
+}) {
+  const { t } = useLocaleContext();
+  const [localQuantity, setLocalQuantity] = useState(quantity);
+  const localQuantityNum = Number(localQuantity) || 0;
+  const handleQuantityChange = (newQuantity) => {
+    if (!newQuantity) {
+      setLocalQuantity(void 0);
+      return;
+    }
+    if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
+      setLocalQuantity(newQuantity);
+      onQuantityChange(newQuantity);
+    }
+  };
+  const handleQuantityInputChange = (event) => {
+    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 /* @__PURE__ */ jsxs(Card, { variant: "outlined", sx: { p: 2 }, children: [
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        spacing: 2,
+        sx: {
+          flexDirection: {
+            xs: "column",
+            sm: "row"
+          },
+          alignItems: {
+            xs: "flex-start",
+            sm: "center"
+          },
+          justifyContent: {
+            xs: "flex-start",
+            sm: "space-between"
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Stack,
+            {
+              direction: "row",
+              spacing: 2,
+              sx: {
+                alignItems: "center",
+                flex: 1
+              },
+              children: /* @__PURE__ */ jsx(
+                ProductCard,
+                {
+                  name: product?.name || "",
+                  description: t("payment.autoTopup.creditsIncluded", {
+                    name: creditCurrency?.name,
+                    num: formatNumber(creditUnitAmount * localQuantityNum)
+                  }),
+                  logo: product?.images?.[0],
+                  size: 40
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: "row",
+              spacing: 1,
+              sx: {
+                alignItems: "center",
+                alignSelf: {
+                  xs: "flex-end",
+                  sm: "center"
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Typography,
+                  {
+                    variant: "body2",
+                    sx: {
+                      color: "text.secondary",
+                      minWidth: "fit-content"
+                    },
+                    children: [
+                      t("common.quantity"),
+                      ":"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  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" }
+                      }
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        sx: {
+          justifyContent: "space-between",
+          alignItems: "center",
+          mt: 2,
+          pt: 2,
+          borderTop: "1px solid",
+          borderColor: "divider"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              sx: {
+                color: "text.secondary"
+              },
+              children: t("payment.autoTopup.rechargeAmount")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "h6",
+              sx: {
+                fontWeight: 600,
+                color: "text.primary"
+              },
+              children: formatPrice(price, currency, product?.unit_label, localQuantity, true)
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}

package/es/components/collapse.d.ts

@@ -0,0 +1,13 @@
+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): import("react").JSX.Element;
+export {};

package/es/components/collapse.js

@@ -0,0 +1,76 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ExpandLessOutlined, ExpandMoreOutlined } from "@mui/icons-material";
+import { Box, Collapse, Stack } from "@mui/material";
+import { useEffect, useState } from "react";
+export default function IconCollapse(rawProps) {
+  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 /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      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
+        },
+        children: [
+          /* @__PURE__ */ jsx(Box, { children: typeof props.trigger === "function" ? props.trigger(expanded) : props.trigger }),
+          /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: "row",
+              spacing: 2,
+              sx: {
+                alignItems: "center"
+              },
+              children: [
+                props.addons,
+                " ",
+                expanded ? /* @__PURE__ */ jsx(ExpandLessOutlined, {}) : /* @__PURE__ */ jsx(ExpandMoreOutlined, {})
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Collapse, { in: expanded, sx: { width: "100%" }, children: expanded || props.lazy ? props.children : null })
+  ] });
+}

package/es/components/input.d.ts

@@ -11,8 +11,9 @@ type InputProps = TextFieldProps & {
     required?: boolean;
     tooltip?: ReactNode | string;
     description?: ReactNode | string;
+    layout?: 'vertical' | 'horizontal';
 };
-export default function FormInput({ ref, name, label, placeholder, rules, errorPosition, wrapperStyle, inputProps, required, tooltip, description, ...rest }: InputProps & {
+export default function FormInput({ ref, name, label, placeholder, rules, errorPosition, wrapperStyle, inputProps, required, tooltip, description, layout, slotProps, ...rest }: InputProps & {
     ref?: React.RefObject<HTMLInputElement | null>;
     inputProps?: TextFieldProps['inputProps'];
 }): JSX.Element;

package/es/components/input.js

@@ -1,6 +1,6 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { 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 FormLabel from "./label.js";
@@ -19,43 +19,94 @@ export default function FormInput({
   required = false,
   tooltip = "",
   description = "",
+  layout = "vertical",
+  slotProps,
   ...rest
 }) {
   const { control, formState } = useFormContext();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
   const inputRef = useRef(null);
   useImperativeHandle(ref, () => {
     return inputRef.current;
   });
   const error = get(formState.errors, name)?.message;
+  const isHorizontal = layout === "horizontal" && !isMobile;
+  const mergedSlotProps = {
+    htmlInput: { ...inputProps, ...slotProps?.htmlInput },
+    input: Object.assign(
+      rest.InputProps || {},
+      slotProps?.input || {},
+      errorPosition === "right" && error ? { endAdornment: /* @__PURE__ */ jsx(FormInputError, { error }) } : {}
+    )
+  };
+  const renderLabel = () => {
+    if (!label) return null;
+    return /* @__PURE__ */ jsx(
+      FormLabel,
+      {
+        required,
+        tooltip,
+        description,
+        boxSx: isHorizontal ? { width: "fit-content", whiteSpace: "nowrap", minWidth: "fit-content" } : void 0,
+        children: label
+      }
+    );
+  };
   return /* @__PURE__ */ jsx(
     Controller,
     {
       name,
       control,
       rules,
-      render: ({ field }) => /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", ...wrapperStyle }, children: [
-        !!label && /* @__PURE__ */ jsx(FormLabel, { required, tooltip, description, children: label }),
+      render: ({ field }) => /* @__PURE__ */ jsx(Box, { sx: { width: "100%", ...wrapperStyle }, children: isHorizontal ? /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          spacing: 2,
+          sx: {
+            alignItems: "center",
+            justifyContent: "space-between"
+          },
+          children: [
+            renderLabel(),
+            /* @__PURE__ */ jsx(
+              TextField,
+              {
+                fullWidth: false,
+                error: !!error,
+                helperText: errorPosition === "bottom" && error ? error : "",
+                placeholder,
+                size: "small",
+                ...field,
+                ...rest,
+                inputRef,
+                slotProps: mergedSlotProps,
+                sx: {
+                  flex: 1,
+                  ...rest.sx
+                }
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderLabel(),
         /* @__PURE__ */ jsx(
           TextField,
           {
             fullWidth: true,
-            error: !!get(formState.errors, name),
+            error: !!error,
             helperText: errorPosition === "bottom" && error ? error : "",
             placeholder,
             size: "small",
             ...field,
             ...rest,
             inputRef,
-            slotProps: {
-              htmlInput: inputProps,
-              input: Object.assign(
-                rest.InputProps || {},
-                errorPosition === "right" && error ? { endAdornment: /* @__PURE__ */ jsx(FormInputError, { error }) } : {}
-              )
-            }
+            slotProps: mergedSlotProps
           }
         )
-      ] })
+      ] }) })
     }
   );
 }

package/es/components/label.d.ts

@@ -1,7 +1,8 @@
 import type { FormLabelProps } from '@mui/material';
 import type { ReactNode } from 'react';
-export default function CustomFormLabel({ children, required, tooltip, description, ...props }: FormLabelProps & {
+export default function CustomFormLabel({ children, required, tooltip, description, boxSx, ...props }: FormLabelProps & {
     required?: boolean;
     tooltip?: ReactNode | string;
     description?: ReactNode | string;
+    boxSx?: React.CSSProperties;
 }): import("react").JSX.Element;

package/es/components/label.js

@@ -6,9 +6,10 @@ export default function CustomFormLabel({
   required = false,
   tooltip = "",
   description = "",
+  boxSx = {},
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 1, width: "100%" }, children: [
+  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 1, width: "100%", ...boxSx }, children: [
     /* @__PURE__ */ jsxs(
       FormLabel,
       {

package/es/index.d.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';
 export * from './libs/util';
 export * from './libs/connect';
@@ -50,4 +53,4 @@ export * from './hooks/scroll';
 export * from './hooks/keyboard';
 export * from './libs/validator';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, FormLabel, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, };
+export { createLazyComponent, api, dayjs, FormInput, FormLabel, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, AutoTopupModal, AutoTopup, Collapse, };

package/es/index.js

@@ -36,6 +36,9 @@ import PaymentBeneficiaries from "./components/payment-beneficiaries.js";
 import LoadingButton from "./components/loading-button.js";
 import ResumeSubscription from "./components/resume-subscription.js";
 import DateRangePicker from "./components/date-range-picker.js";
+import AutoTopupModal from "./components/auto-topup/modal.js";
+import AutoTopup from "./components/auto-topup/index.js";
+import Collapse from "./components/collapse.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
@@ -90,5 +93,8 @@ export {
   CreditGrantsList,
   CreditTransactionsList,
   DateRangePicker,
-  CreditStatusChip
+  CreditStatusChip,
+  AutoTopupModal,
+  AutoTopup,
+  Collapse
 };

package/es/libs/util.js

@@ -917,7 +917,8 @@ export function getInvoiceDescriptionAndReason(invoice, locale = "en") {
     return_stake: t("payment.invoice.reason.returnStake", 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)
+    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/es/locales/en.js

@@ -29,6 +29,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",
@@ -253,6 +255,60 @@ 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/es/locales/zh.js

@@ -32,6 +32,8 @@ export default flat({
     confirm: "\u786E\u8BA4",
     cancel: "\u53D6\u6D88",
     clear: "\u6E05\u7A7A",
+    show: "\u663E\u793A",
+    hide: "\u9690\u85CF",
     selectTimeRange: "\u9009\u62E9\u65F6\u95F4\u8303\u56F4",
     startDate: "\u5F00\u59CB\u65E5\u671F",
     endDate: "\u7ED3\u675F\u65E5\u671F",
@@ -253,6 +255,60 @@ export default flat({
         }
       }
     },
+    autoTopup: {
+      title: "\u81EA\u52A8\u5145\u503C",
+      enableLabel: "\u81EA\u52A8\u5145\u503C",
+      purchaseConfig: "\u8D2D\u4E70\u914D\u7F6E",
+      triggerThreshold: "\u5F53\u989D\u5EA6\u4F4E\u4E8E",
+      thresholdPlaceholder: "\u8F93\u5165\u89E6\u53D1\u9608\u503C",
+      thresholdDescription: "\u89E6\u53D1\u81EA\u52A8\u5145\u503C\u7684\u5269\u4F59\u989D\u5EA6",
+      thresholdMinError: "\u9608\u503C\u5FC5\u987B\u5927\u4E8E0",
+      thresholdFormatError: "\u8BF7\u8F93\u5165\u6709\u6548\u6570\u5B57",
+      creditsIncluded: "\u5305\u542B {num} {name}",
+      purchaseBelow: "\u8D2D\u4E70\u6B64\u5957\u9910",
+      perPackage: "\u6BCF\u5305",
+      quantity: "\u6570\u91CF",
+      selectPaymentMethod: "\u9009\u62E9\u652F\u4ED8\u65B9\u5F0F",
+      paymentInformation: "\u652F\u4ED8\u4FE1\u606F",
+      saveConfiguration: "\u4FDD\u5B58\u914D\u7F6E",
+      saveSuccess: "\u81EA\u52A8\u5145\u503C\u914D\u7F6E\u4FDD\u5B58\u6210\u529F",
+      disableSuccess: "\u5DF2\u5173\u95ED\u81EA\u52A8\u5145\u503C",
+      stripeSetupRequired: "\u9700\u8981\u4FE1\u7528\u5361\u6388\u6743\u4EE5\u8FDB\u884C\u81EA\u52A8\u652F\u4ED8",
+      cryptoAuthorizationNote: "\u60A8\u9700\u8981\u4ECE\u94B1\u5305\u6388\u6743\u652F\u4ED8\u4EE5\u542F\u7528\u81EA\u52A8\u5145\u503C",
+      tip: "\u542F\u7528\u81EA\u52A8\u5145\u503C\u540E\uFF0C\u5F53\u60A8\u7684\u989D\u5EA6\u4F4E\u4E8E\u9608\u503C\u65F6\uFF0C\u7CFB\u7EDF\u5C06\u81EA\u52A8\u8D2D\u4E70\u6307\u5B9A\u6570\u91CF\u7684\u989D\u5EA6\u5957\u9910\u3002",
+      authTitle: "\u81EA\u52A8\u5145\u503C\u6388\u6743",
+      authTip: "\u8BF7\u5B8C\u6210\u6388\u6743\u6D41\u7A0B\u4EE5\u542F\u7528\u81EA\u52A8\u5145\u503C",
+      rechargeAmount: "\u6BCF\u6B21\u5145\u503C\u91D1\u989D",
+      currentPaymentMethod: "\u5F53\u524D\u652F\u4ED8\u65B9\u5F0F",
+      changePaymentMethod: "\u66F4\u6362\u652F\u4ED8\u65B9\u5F0F",
+      keepCurrent: "\u4FDD\u6301\u5F53\u524D",
+      changePaymentMethodTip: "\u4FDD\u5B58\u65F6\u5C06\u5F15\u5BFC\u60A8\u8BBE\u7F6E\u65B0\u7684\u652F\u4ED8\u65B9\u5F0F\u3002",
+      noPaymentMethodSetup: "\u672A\u914D\u7F6E\u652F\u4ED8\u65B9\u5F0F\uFF0C\u8BF7\u5148\u8BBE\u7F6E\u652F\u4ED8\u65B9\u5F0F\u3002",
+      addFunds: "\u5145\u503C",
+      advanced: "\u9AD8\u7EA7\u9009\u9879",
+      enabled: "\u5DF2\u542F\u7528",
+      disabled: "\u5DF2\u7981\u7528",
+      notConfigured: "\u5C1A\u672A\u914D\u7F6E\u81EA\u52A8\u5145\u503C",
+      setup: "\u53BB\u542F\u7528",
+      ruleDisplay: "\u989D\u5EA6\u4F4E\u4E8E{threshold}\u65F6\uFF0C\u5145\u503C{amount}\u53EF\u83B7\u5F97{credits}\u989D\u5EA6",
+      activeDescription: "\u81EA\u52A8\u5145\u503C\u5DF2\u542F\u7528\uFF0C\u5F53 Credits \u4F4E\u4E8E {threshold} \u65F6\uFF0C\u7CFB\u7EDF\u4F1A\u81EA\u52A8\u5145\u503C\u8D2D\u4E70 {credits} Credits\uFF0C\u652F\u4ED8\u91D1\u989D\u4E3A {amount}",
+      activeDescriptionWithCredits: "\u81EA\u52A8\u5145\u503C\u5DF2\u542F\u7528\uFF0C\u5F53 Credits \u4F4E\u4E8E {threshold} \u65F6\uFF0C\u7CFB\u7EDF\u4F1A\u81EA\u52A8\u8D2D\u4E70 {credits} \u989D\u5EA6\u3002",
+      purchaseAmount: "\u8D2D\u4E70\u6240\u9700\u91D1\u989D",
+      paymentMethod: "\u652F\u4ED8\u65B9\u5F0F",
+      walletBalance: "\u94B1\u5305\u4F59\u989D",
+      paymentAddress: "\u652F\u4ED8\u5730\u5740",
+      inactiveDescription: "\u5F00\u542F\u81EA\u52A8\u5145\u503C\uFF0C\u5373\u53EF\u5728 {name} \u4E0D\u8DB3\u65F6\u81EA\u52A8\u7EED\u8D39\uFF0C\u6709\u6548\u907F\u514D\u670D\u52A1\u4E2D\u65AD\u3002",
+      showDetails: "\u5C55\u5F00\u652F\u4ED8\u4FE1\u606F",
+      hideDetails: "\u6536\u8D77",
+      dailyLimits: {
+        maxAmount: "\u6BCF\u65E5\u5145\u503C\u91D1\u989D\u4E0A\u9650",
+        maxAmountPlaceholder: "0\u8868\u793A\u65E0\u9650\u5236",
+        maxAmountDescription: "\u6BCF\u65E5\u53EF\u5145\u503C\u7684\u6700\u5927\u603B\u91D1\u989D\uFF0C0 \u8868\u793A\u65E0\u9650\u5236",
+        maxAttempts: "\u6BCF\u65E5\u5145\u503C\u6B21\u6570\u4E0A\u9650",
+        maxAttemptsPlaceholder: "0\u8868\u793A\u65E0\u9650\u5236",
+        maxAttemptsDescription: "\u6BCF\u65E5\u53EF\u5145\u503C\u7684\u6700\u5927\u6B21\u6570\uFF0C0 \u8868\u793A\u65E0\u9650\u5236"
+      }
+    },
     customer: {
       payments: "\u652F\u4ED8\u5386\u53F2",
       invoices: "\u8D26\u5355\u5386\u53F2",

package/es/payment/form/index.js

@@ -14,6 +14,7 @@ import { fromUnitToToken } from "@ocap/util";
 import DID from "@arcblock/ux/lib/DID";
 import isEmpty from "lodash/isEmpty";
 import { HelpOutline, OpenInNew } from "@mui/icons-material";
+import { ReactGA } from "@arcblock/ux/lib/withTracker";
 import FormInput from "../../components/input.js";
 import FormLabel from "../../components/label.js";
 import { usePaymentContext } from "../../contexts/payment.js";
@@ -113,6 +114,7 @@ export default function PaymentForm({
     trigger
   } = useFormContext();
   const errorRef = useRef(null);
+  const processingRef = useRef(false);
   const quantityInventoryStatus = useMemo(() => {
     let status = true;
     for (const item of checkoutSession.line_items) {
@@ -254,6 +256,10 @@ export default function PaymentForm({
     return true;
   }, [session?.user, method, checkoutSession]);
   const handleConnected = async () => {
+    if (processingRef.current) {
+      return;
+    }
+    processingRef.current = true;
     setState({ paying: true });
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
@@ -262,9 +268,19 @@ export default function PaymentForm({
         onPaid(result);
       }
     } catch (err) {
-      Toast.error(formatError(err));
+      const errorMessage = formatError(err);
+      const 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;
     }
   };
   useEffect(() => {