@blocklet/payment-react 1.24.4 → 1.25.1

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

@@ -0,0 +1,170 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import SettingsIcon from "@mui/icons-material/Settings";
+import {
+  Box,
+  Collapse,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  Fade,
+  IconButton,
+  Stack,
+  Tooltip,
+  Typography
+} from "@mui/material";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import SlippageConfig from "./slippage-config.js";
+export default function QuoteDetailsPanel({
+  rateLine,
+  rows,
+  isSubscription = false,
+  slippageValue = 0.5,
+  onSlippageChange = void 0,
+  slippageConfig = void 0,
+  exchangeRate = null,
+  baseCurrency = "USD",
+  disabled = false
+}) {
+  const { t } = useLocaleContext();
+  const [open, setOpen] = useState(false);
+  const [showContent, setShowContent] = useState(true);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [pendingConfig, setPendingConfig] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const hasRows = rows.length > 0;
+  const handleOpenDialog = 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);
+    }
+  };
+  useEffect(() => {
+    if (!rateLine) return void 0;
+    setShowContent(false);
+    const timer = setTimeout(() => {
+      setShowContent(true);
+    }, 150);
+    return () => clearTimeout(timer);
+  }, [rateLine]);
+  const renderedRows = useMemo(
+    () => rows.map((row) => {
+      const isSlippageRow = row.isSlippage && isSubscription && onSlippageChange;
+      return /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          sx: {
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 2
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.75rem", color: "text.secondary" }, children: row.label }),
+              row.tooltip && /* @__PURE__ */ jsx(Tooltip, { title: row.tooltip, placement: "top", children: /* @__PURE__ */ jsx(InfoOutlinedIcon, { sx: { fontSize: "0.75rem", color: "text.lighter" } }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.75rem", color: "text.primary" }, children: row.value }),
+              isSlippageRow && !disabled && /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleOpenDialog, sx: { p: 0.25 }, children: /* @__PURE__ */ jsx(SettingsIcon, { 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", mt: 0.5 }, children: [
+      /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          sx: {
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 1
+          },
+          children: [
+            rateLine ? /* @__PURE__ */ jsx(Fade, { in: showContent, timeout: 300, children: /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.7875rem", color: "text.lighter" }, children: rateLine }) }) : /* @__PURE__ */ jsx(Box, {}),
+            hasRows && /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => setOpen((prev) => !prev), "aria-label": open ? "collapse" : "expand", children: /* @__PURE__ */ jsx(
+              ExpandMoreIcon,
+              {
+                sx: {
+                  fontSize: "1rem",
+                  transition: "transform 0.2s ease",
+                  transform: open ? "rotate(180deg)" : "rotate(0deg)"
+                }
+              }
+            ) })
+          ]
+        }
+      ),
+      hasRows && /* @__PURE__ */ jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx(Fade, { in: showContent, timeout: 300, children: /* @__PURE__ */ jsx(
+        Stack,
+        {
+          sx: {
+            mt: 1,
+            p: 1.25,
+            borderRadius: 1,
+            border: "1px solid",
+            borderColor: "divider",
+            bgcolor: "action.hover"
+          },
+          spacing: 1,
+          children: renderedRows
+        }
+      ) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Dialog, { open: dialogOpen, onClose: handleCloseDialog, maxWidth: "sm", fullWidth: true, children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: t("payment.checkout.quote.slippage.title") }),
+      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
+        SlippageConfig,
+        {
+          value: pendingConfig?.percent ?? slippageValue,
+          onChange: handleSlippageChange,
+          config: pendingConfig || slippageConfig,
+          onConfigChange: handleConfigChange,
+          exchangeRate,
+          baseCurrency,
+          disabled: disabled || submitting,
+          sx: { mt: 1 },
+          onCancel: handleCloseDialog,
+          onSave: handleSubmit
+        }
+      ) })
+    ] })
+  ] });
+}

package/es/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/es/components/quote-lock-banner.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { LockOutlined } from "@mui/icons-material";
+import { Box, Typography } from "@mui/material";
+import { useMemo } from "react";
+import { formatExchangeRate } from "../libs/util.js";
+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
+  };
+}
+export default function QuoteLockBanner({ items, currency }) {
+  const { t } = useLocaleContext();
+  const quoteLockInfo = useMemo(() => getQuoteLockInfo(items, currency), [items, currency]);
+  if (!quoteLockInfo || !quoteLockInfo.exchangeRate) {
+    return null;
+  }
+  const formattedRateValue = formatExchangeRate(quoteLockInfo.exchangeRate);
+  let formattedRate = "";
+  if (formattedRateValue) {
+    formattedRate = quoteLockInfo.baseCurrency === "USD" ? `$${formattedRateValue}` : `${formattedRateValue} ${quoteLockInfo.baseCurrency}`;
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        bgcolor: "action.hover",
+        border: "1px solid",
+        borderColor: "divider",
+        borderRadius: 1,
+        px: 2,
+        py: 1.5,
+        mb: 2
+      },
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1.5,
+            flexWrap: "wrap"
+          },
+          children: [
+            /* @__PURE__ */ jsx(LockOutlined, { sx: { fontSize: "1rem", color: "success.main" } }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.875rem", color: "text.primary", flex: 1 }, children: t("payment.checkout.quote.dynamicPricingInfo", {
+              symbol: quoteLockInfo.tokenSymbol,
+              rate: formattedRate,
+              currency: ""
+            }) })
+          ]
+        }
+      )
+    }
+  );
+}

package/es/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/es/components/slippage-config.js

@@ -0,0 +1,261 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from "react";
+import { Box, Stack, Typography, TextField, ToggleButton, ToggleButtonGroup, Button } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+const PRESET_SLIPPAGE = [0.5, 1, 3, 5, 10];
+export default 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 } = useLocaleContext();
+  const [inputValue, setInputValue] = useState("");
+  const [inputMode, setInputMode] = useState(config?.mode || "percent");
+  const [error, setError] = useState(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const percentValue = config?.percent ?? value;
+  const roundedRate = 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);
+  };
+  useEffect(() => {
+    if (config?.mode && config.mode !== inputMode) {
+      setInputMode(config.mode);
+    }
+  }, [config?.mode, inputMode]);
+  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 = useMemo(() => {
+    if (!roundedRate) return null;
+    const slippageMultiplier = 1 + percentValue / 100;
+    return (roundedRate / slippageMultiplier).toFixed(2);
+  }, [roundedRate, percentValue]);
+  const currentRateLabel = useMemo(() => {
+    if (!roundedRate) {
+      return "\u2014";
+    }
+    return roundedRate.toFixed(2);
+  }, [roundedRate]);
+  const handleCancel = () => {
+    onCancel?.();
+  };
+  const handleSave = () => {
+    onSave?.();
+  };
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2.5, sx, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: t("payment.checkout.quote.slippageLimit.description") }),
+    /* @__PURE__ */ jsxs(
+      ToggleButtonGroup,
+      {
+        value: inputMode,
+        exclusive: true,
+        onChange: handleModeChange,
+        size: "small",
+        fullWidth: true,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(ToggleButton, { value: "percent", children: t("payment.checkout.quote.slippageLimit.configTogglePercent") }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "rate", disabled: !roundedRate, children: t("payment.checkout.quote.slippageLimit.configToggleRate") })
+        ]
+      }
+    ),
+    inputMode === "percent" && /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, children: [
+      /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, children: PRESET_SLIPPAGE.map((preset) => /* @__PURE__ */ jsx(
+        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__ */ jsxs(Typography, { variant: "body2", children: [
+            preset,
+            "%"
+          ] })
+        },
+        preset
+      )) }),
+      /* @__PURE__ */ jsx(
+        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__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", mr: 1 }, children: "%" })
+          },
+          placeholder: "0.50"
+        }
+      )
+    ] }),
+    inputMode === "rate" && /* @__PURE__ */ jsx(Stack, { spacing: 1.5, children: /* @__PURE__ */ jsx(
+      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__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", mr: 1 }, children: baseCurrency })
+        },
+        placeholder: roundedRate?.toFixed(2) || "0.00"
+      }
+    ) }),
+    roundedRate && /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          borderRadius: 1,
+          p: 1.5,
+          bgcolor: "action.hover"
+        },
+        children: /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, children: [
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: t("payment.checkout.quote.slippageLimit.derivedCurrentRate") }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: 500, children: [
+              currentRateLabel,
+              " ",
+              baseCurrency
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: t("payment.checkout.quote.slippageLimit.derivedMinRate") }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: 500, color: "primary.main", children: [
+              inputMode === "rate" ? inputValue : minAcceptableRate || "\u2014",
+              " ",
+              baseCurrency
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", children: [
+      /* @__PURE__ */ jsx(Button, { onClick: handleCancel, disabled, color: "inherit", children: t("common.cancel") }),
+      /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleSave, disabled: disabled || !!error, children: t("common.save") })
+    ] })
+  ] });
+}