@blocklet/payment-react 1.24.4 → 1.25.1

package/lib/components/quote-details-panel.js

@@ -0,0 +1,226 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = QuoteDetailsPanel;
+var _jsxRuntime = require("react/jsx-runtime");
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+var _InfoOutlined = _interopRequireDefault(require("@mui/icons-material/InfoOutlined"));
+var _Settings = _interopRequireDefault(require("@mui/icons-material/Settings"));
+var _material = require("@mui/material");
+var _react = require("react");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _slippageConfig = _interopRequireDefault(require("./slippage-config"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function QuoteDetailsPanel({
+  rateLine,
+  rows,
+  isSubscription = false,
+  slippageValue = 0.5,
+  onSlippageChange = void 0,
+  slippageConfig = void 0,
+  exchangeRate = null,
+  baseCurrency = "USD",
+  disabled = false
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [showContent, setShowContent] = (0, _react.useState)(true);
+  const [dialogOpen, setDialogOpen] = (0, _react.useState)(false);
+  const [pendingConfig, setPendingConfig] = (0, _react.useState)(null);
+  const [submitting, setSubmitting] = (0, _react.useState)(false);
+  const hasRows = rows.length > 0;
+  const handleOpenDialog = (0, _react.useCallback)(() => {
+    setPendingConfig(slippageConfig || {
+      mode: "percent",
+      percent: slippageValue
+    });
+    setDialogOpen(true);
+  }, [slippageValue, slippageConfig]);
+  const handleCloseDialog = () => {
+    setDialogOpen(false);
+    setPendingConfig(null);
+  };
+  const handleSlippageChange = value => {
+    setPendingConfig(prev => prev ? {
+      ...prev,
+      percent: value
+    } : {
+      mode: "percent",
+      percent: value
+    });
+  };
+  const handleConfigChange = config => {
+    setPendingConfig(config);
+  };
+  const handleSubmit = async () => {
+    if (!pendingConfig || !onSlippageChange) return;
+    setSubmitting(true);
+    try {
+      const configToSave = {
+        ...pendingConfig,
+        ...(baseCurrency ? {
+          base_currency: baseCurrency
+        } : {})
+      };
+      await onSlippageChange(configToSave);
+      setDialogOpen(false);
+      setPendingConfig(null);
+    } catch (err) {
+      console.error("Failed to update slippage", err);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    if (!rateLine) return void 0;
+    setShowContent(false);
+    const timer = setTimeout(() => {
+      setShowContent(true);
+    }, 150);
+    return () => clearTimeout(timer);
+  }, [rateLine]);
+  const renderedRows = (0, _react.useMemo)(() => rows.map(row => {
+    const isSlippageRow = row.isSlippage && isSubscription && onSlippageChange;
+    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      sx: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 0.5,
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontSize: "0.75rem",
+            color: "text.secondary"
+          },
+          children: row.label
+        }), row.tooltip && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+          title: row.tooltip,
+          placement: "top",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_InfoOutlined.default, {
+            sx: {
+              fontSize: "0.75rem",
+              color: "text.lighter"
+            }
+          })
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 0.5,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontSize: "0.75rem",
+            color: "text.primary"
+          },
+          children: row.value
+        }), isSlippageRow && !disabled && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+          size: "small",
+          onClick: handleOpenDialog,
+          sx: {
+            p: 0.25
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Settings.default, {
+            sx: {
+              fontSize: "0.875rem",
+              color: "text.secondary"
+            }
+          })
+        })]
+      })]
+    }, row.label);
+  }), [rows, isSubscription, onSlippageChange, disabled, handleOpenDialog]);
+  const showSlippageOnly = !rateLine && isSubscription && onSlippageChange && rows.some(r => r.isSlippage);
+  if (!rateLine && !showSlippageOnly) {
+    return null;
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        width: "100%",
+        mt: 0.5
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        sx: {
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 1
+        },
+        children: [rateLine ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+          in: showContent,
+          timeout: 300,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              fontSize: "0.7875rem",
+              color: "text.lighter"
+            },
+            children: rateLine
+          })
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {}), hasRows && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+          size: "small",
+          onClick: () => setOpen(prev => !prev),
+          "aria-label": open ? "collapse" : "expand",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ExpandMore.default, {
+            sx: {
+              fontSize: "1rem",
+              transition: "transform 0.2s ease",
+              transform: open ? "rotate(180deg)" : "rotate(0deg)"
+            }
+          })
+        })]
+      }), hasRows && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Collapse, {
+        in: open,
+        timeout: "auto",
+        unmountOnExit: true,
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+          in: showContent,
+          timeout: 300,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+            sx: {
+              mt: 1,
+              p: 1.25,
+              borderRadius: 1,
+              border: "1px solid",
+              borderColor: "divider",
+              bgcolor: "action.hover"
+            },
+            spacing: 1,
+            children: renderedRows
+          })
+        })
+      })]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Dialog, {
+      open: dialogOpen,
+      onClose: handleCloseDialog,
+      maxWidth: "sm",
+      fullWidth: true,
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.DialogTitle, {
+        children: t("payment.checkout.quote.slippage.title")
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.DialogContent, {
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_slippageConfig.default, {
+          value: pendingConfig?.percent ?? slippageValue,
+          onChange: handleSlippageChange,
+          config: pendingConfig || slippageConfig,
+          onConfigChange: handleConfigChange,
+          exchangeRate,
+          baseCurrency,
+          disabled: disabled || submitting,
+          sx: {
+            mt: 1
+          },
+          onCancel: handleCloseDialog,
+          onSave: handleSubmit
+        })
+      })]
+    })]
+  });
+}

package/lib/components/quote-lock-banner.d.ts

@@ -0,0 +1,7 @@
+import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+interface QuoteLockBannerProps {
+    items: TLineItemExpanded[];
+    currency: TPaymentCurrency;
+}
+export default function QuoteLockBanner({ items, currency }: QuoteLockBannerProps): import("react").JSX.Element | null;
+export {};

package/lib/components/quote-lock-banner.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = QuoteLockBanner;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _iconsMaterial = require("@mui/icons-material");
+var _material = require("@mui/material");
+var _react = require("react");
+var _util = require("../libs/util");
+function getQuoteLockInfo(items, currency) {
+  if (!items?.length || !currency) {
+    return null;
+  }
+  const dynamicItems = items.filter(item => {
+    const price = item.upsell_price || item.price;
+    return price?.pricing_type === "dynamic" && item?.quoted_amount;
+  });
+  if (!dynamicItems.length) {
+    return null;
+  }
+  let expiresAt = null;
+  let exchangeRate = null;
+  dynamicItems.forEach(item => {
+    if (item?.expires_at) {
+      expiresAt = expiresAt === null ? item?.expires_at : Math.min(expiresAt, item?.expires_at);
+    }
+    if (!exchangeRate) {
+      exchangeRate = item?.exchange_rate || null;
+    }
+  });
+  return {
+    exchangeRate,
+    tokenSymbol: currency.symbol,
+    baseCurrency: (dynamicItems[0]?.upsell_price || dynamicItems[0]?.price)?.base_currency || "USD",
+    expiresAt
+  };
+}
+function QuoteLockBanner({
+  items,
+  currency
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const quoteLockInfo = (0, _react.useMemo)(() => getQuoteLockInfo(items, currency), [items, currency]);
+  if (!quoteLockInfo || !quoteLockInfo.exchangeRate) {
+    return null;
+  }
+  const formattedRateValue = (0, _util.formatExchangeRate)(quoteLockInfo.exchangeRate);
+  let formattedRate = "";
+  if (formattedRateValue) {
+    formattedRate = quoteLockInfo.baseCurrency === "USD" ? `$${formattedRateValue}` : `${formattedRateValue} ${quoteLockInfo.baseCurrency}`;
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+    sx: {
+      bgcolor: "action.hover",
+      border: "1px solid",
+      borderColor: "divider",
+      borderRadius: 1,
+      px: 2,
+      py: 1.5,
+      mb: 2
+    },
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1.5,
+        flexWrap: "wrap"
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.LockOutlined, {
+        sx: {
+          fontSize: "1rem",
+          color: "success.main"
+        }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontSize: "0.875rem",
+          color: "text.primary",
+          flex: 1
+        },
+        children: t("payment.checkout.quote.dynamicPricingInfo", {
+          symbol: quoteLockInfo.tokenSymbol,
+          rate: formattedRate,
+          currency: ""
+        })
+      })]
+    })
+  });
+}

package/lib/components/slippage-config.d.ts

@@ -0,0 +1,20 @@
+export type SlippageConfigValue = {
+    mode: 'percent' | 'rate';
+    percent: number;
+    min_acceptable_rate?: string;
+    base_currency?: string;
+    updated_at_ms?: number;
+};
+export interface SlippageConfigProps {
+    value: number;
+    onChange: (value: number) => void;
+    config?: SlippageConfigValue;
+    onConfigChange?: (value: SlippageConfigValue) => void;
+    exchangeRate?: string | null;
+    baseCurrency?: string;
+    disabled?: boolean;
+    sx?: any;
+    onCancel?: () => void;
+    onSave?: () => void;
+}
+export default function SlippageConfig({ value, onChange, config, onConfigChange, exchangeRate, baseCurrency, disabled, sx, onCancel, onSave, }: SlippageConfigProps): import("react").JSX.Element;

package/lib/components/slippage-config.js

@@ -0,0 +1,316 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = SlippageConfig;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+const PRESET_SLIPPAGE = [0.5, 1, 3, 5, 10];
+function SlippageConfig({
+  value,
+  onChange,
+  config = void 0,
+  onConfigChange = void 0,
+  exchangeRate = null,
+  baseCurrency = "USD",
+  disabled = false,
+  sx = {},
+  onCancel = void 0,
+  onSave = void 0
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [inputValue, setInputValue] = (0, _react.useState)("");
+  const [inputMode, setInputMode] = (0, _react.useState)(config?.mode || "percent");
+  const [error, setError] = (0, _react.useState)(null);
+  const [isEditing, setIsEditing] = (0, _react.useState)(false);
+  const percentValue = config?.percent ?? value;
+  const roundedRate = (0, _react.useMemo)(() => {
+    if (!exchangeRate) return null;
+    const rateNum = Number(exchangeRate);
+    if (Number.isNaN(rateNum) || rateNum <= 0) return null;
+    return Math.round(rateNum * 100) / 100;
+  }, [exchangeRate]);
+  const computeMinRateFromPercent = percent => {
+    if (!roundedRate) return "";
+    const slippageMultiplier = 1 + percent / 100;
+    return (roundedRate / slippageMultiplier).toFixed(2);
+  };
+  (0, _react.useEffect)(() => {
+    if (config?.mode && config.mode !== inputMode) {
+      setInputMode(config.mode);
+    }
+  }, [config?.mode, inputMode]);
+  (0, _react.useEffect)(() => {
+    if (isEditing) {
+      return;
+    }
+    if (inputMode === "percent") {
+      setInputValue(percentValue.toFixed(2));
+      return;
+    }
+    if (config?.min_acceptable_rate) {
+      setInputValue(String(config.min_acceptable_rate));
+      return;
+    }
+    const minRate = computeMinRateFromPercent(percentValue);
+    setInputValue(minRate);
+  }, [percentValue, inputMode, exchangeRate, config?.min_acceptable_rate, isEditing]);
+  const handlePresetClick = preset => {
+    if (disabled) return;
+    setInputValue(preset.toFixed(2));
+    setInputMode("percent");
+    setError(null);
+    onChange(preset);
+    const minRate = computeMinRateFromPercent(preset);
+    onConfigChange?.({
+      mode: "percent",
+      percent: preset,
+      ...(minRate ? {
+        min_acceptable_rate: minRate
+      } : {})
+    });
+  };
+  const handleInputChange = newValue => {
+    setInputValue(newValue);
+    setError(null);
+    const numValue = Number(newValue);
+    if (!newValue || Number.isNaN(numValue)) {
+      setError(t("payment.checkout.quote.slippage.invalid"));
+      return;
+    }
+    if (numValue <= 0) {
+      setError(t("payment.checkout.quote.slippage.invalidPositive"));
+      return;
+    }
+    if (inputMode === "percent") {
+      onChange(numValue);
+      const minRate = computeMinRateFromPercent(numValue);
+      onConfigChange?.({
+        mode: "percent",
+        percent: numValue,
+        ...(minRate ? {
+          min_acceptable_rate: minRate
+        } : {})
+      });
+    } else {
+      if (!roundedRate) {
+        setError(t("payment.checkout.quote.slippage.rateRequired"));
+        return;
+      }
+      const percent = (roundedRate - numValue) / numValue * 100;
+      onChange(Math.max(0, percent));
+      onConfigChange?.({
+        mode: "rate",
+        percent: Math.max(0, percent),
+        min_acceptable_rate: newValue
+      });
+    }
+  };
+  const handleModeChange = (_, newMode) => {
+    if (disabled || !newMode) return;
+    setInputMode(newMode);
+    setError(null);
+    if (newMode === "rate") {
+      if (!roundedRate) {
+        setError(t("payment.checkout.quote.slippage.rateRequired"));
+        return;
+      }
+      const minRate = config?.min_acceptable_rate || computeMinRateFromPercent(percentValue);
+      setInputValue(minRate);
+      onConfigChange?.({
+        mode: "rate",
+        percent: percentValue,
+        min_acceptable_rate: minRate
+      });
+    } else {
+      setInputValue(percentValue.toFixed(2));
+      const minRate = computeMinRateFromPercent(percentValue);
+      onConfigChange?.({
+        mode: "percent",
+        percent: percentValue,
+        ...(minRate ? {
+          min_acceptable_rate: minRate
+        } : {})
+      });
+    }
+  };
+  const minAcceptableRate = (0, _react.useMemo)(() => {
+    if (!roundedRate) return null;
+    const slippageMultiplier = 1 + percentValue / 100;
+    return (roundedRate / slippageMultiplier).toFixed(2);
+  }, [roundedRate, percentValue]);
+  const currentRateLabel = (0, _react.useMemo)(() => {
+    if (!roundedRate) {
+      return "\u2014";
+    }
+    return roundedRate.toFixed(2);
+  }, [roundedRate]);
+  const handleCancel = () => {
+    onCancel?.();
+  };
+  const handleSave = () => {
+    onSave?.();
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    spacing: 2.5,
+    sx,
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      children: t("payment.checkout.quote.slippageLimit.description")
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ToggleButtonGroup, {
+      value: inputMode,
+      exclusive: true,
+      onChange: handleModeChange,
+      size: "small",
+      fullWidth: true,
+      disabled,
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+        value: "percent",
+        children: t("payment.checkout.quote.slippageLimit.configTogglePercent")
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+        value: "rate",
+        disabled: !roundedRate,
+        children: t("payment.checkout.quote.slippageLimit.configToggleRate")
+      })]
+    }), inputMode === "percent" && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      spacing: 1.5,
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
+        children: PRESET_SLIPPAGE.map(preset => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+          value: preset,
+          selected: Math.abs(percentValue - preset) < 0.01,
+          onClick: () => handlePresetClick(preset),
+          size: "small",
+          disabled,
+          sx: {
+            flex: 1,
+            py: 1,
+            borderRadius: 1,
+            border: "1px solid",
+            borderColor: "divider",
+            "&.Mui-selected": {
+              bgcolor: "primary.main",
+              color: "primary.contrastText",
+              borderColor: "primary.main",
+              "&:hover": {
+                bgcolor: "primary.dark"
+              }
+            }
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            variant: "body2",
+            children: [preset, "%"]
+          })
+        }, preset))
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+        size: "small",
+        fullWidth: true,
+        value: inputValue,
+        onChange: e => handleInputChange(e.target.value),
+        onFocus: () => setIsEditing(true),
+        onBlur: () => setIsEditing(false),
+        error: !!error,
+        helperText: error,
+        disabled,
+        label: t("common.custom"),
+        InputProps: {
+          endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.secondary",
+              mr: 1
+            },
+            children: "%"
+          })
+        },
+        placeholder: "0.50"
+      })]
+    }), inputMode === "rate" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+      spacing: 1.5,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+        size: "small",
+        fullWidth: true,
+        value: inputValue,
+        onChange: e => handleInputChange(e.target.value),
+        onFocus: () => setIsEditing(true),
+        onBlur: () => setIsEditing(false),
+        error: !!error,
+        helperText: error,
+        disabled: disabled || !roundedRate,
+        label: t("payment.checkout.quote.slippage.rateInputLabel", {
+          currency: baseCurrency
+        }),
+        InputProps: {
+          endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.secondary",
+              mr: 1
+            },
+            children: baseCurrency
+          })
+        },
+        placeholder: roundedRate?.toFixed(2) || "0.00"
+      })
+    }), roundedRate && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        borderRadius: 1,
+        p: 1.5,
+        bgcolor: "action.hover"
+      },
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 0.5,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            children: t("payment.checkout.quote.slippageLimit.derivedCurrentRate")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            variant: "body2",
+            fontWeight: 500,
+            children: [currentRateLabel, " ", baseCurrency]
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            children: t("payment.checkout.quote.slippageLimit.derivedMinRate")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            variant: "body2",
+            fontWeight: 500,
+            color: "primary.main",
+            children: [inputMode === "rate" ? inputValue : minAcceptableRate || "\u2014", " ", baseCurrency]
+          })]
+        })]
+      })
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      spacing: 1,
+      justifyContent: "flex-end",
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        onClick: handleCancel,
+        disabled,
+        color: "inherit",
+        children: t("common.cancel")
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "contained",
+        onClick: handleSave,
+        disabled: disabled || !!error,
+        children: t("common.save")
+      })]
+    })]
+  });
+}