@blocklet/payment-react 1.24.4 → 1.25.1

package/src/components/quote-details-panel.tsx

@@ -0,0 +1,218 @@
+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 type { ReactNode } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import SlippageConfig from './slippage-config';
+import type { SlippageConfigValue } from './slippage-config';
+
+type QuoteDetailRow = {
+  label: string;
+  value: ReactNode;
+  isSlippage?: boolean;
+  tooltip?: string;
+};
+
+type QuoteDetailsPanelProps = {
+  rateLine: string;
+  rows: QuoteDetailRow[];
+  isSubscription?: boolean;
+  slippageValue?: number;
+  onSlippageChange?: (value: SlippageConfigValue) => void | Promise<void>;
+  slippageConfig?: SlippageConfigValue;
+  exchangeRate?: string | null;
+  baseCurrency?: string;
+  disabled?: boolean;
+};
+
+export default function QuoteDetailsPanel({
+  rateLine,
+  rows,
+  isSubscription = false,
+  slippageValue = 0.5,
+  onSlippageChange = undefined,
+  slippageConfig = undefined,
+  exchangeRate = null,
+  baseCurrency = 'USD',
+  disabled = false,
+}: QuoteDetailsPanelProps) {
+  const { t } = useLocaleContext();
+  const [open, setOpen] = useState(false);
+  const [showContent, setShowContent] = useState(true);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [pendingConfig, setPendingConfig] = useState<SlippageConfigValue | null>(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: number) => {
+    setPendingConfig((prev) => (prev ? { ...prev, percent: value } : { mode: 'percent', percent: value }));
+  };
+
+  const handleConfigChange = (config: SlippageConfigValue) => {
+    setPendingConfig(config);
+  };
+
+  const handleSubmit = async () => {
+    if (!pendingConfig || !onSlippageChange) return;
+
+    setSubmitting(true);
+    try {
+      const configToSave: SlippageConfigValue = {
+        ...pendingConfig,
+        ...(baseCurrency ? { base_currency: baseCurrency } : {}),
+      };
+      await onSlippageChange(configToSave);
+      setDialogOpen(false);
+      setPendingConfig(null);
+    } catch (err) {
+      console.error('Failed to update slippage', err);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // Trigger fade effect when rateLine changes
+  useEffect(() => {
+    if (!rateLine) return undefined;
+    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 (
+          <Stack
+            key={row.label}
+            direction="row"
+            sx={{
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 2,
+            }}>
+            <Stack direction="row" spacing={0.5} alignItems="center">
+              <Typography sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>{row.label}</Typography>
+              {row.tooltip && (
+                <Tooltip title={row.tooltip} placement="top">
+                  <InfoOutlinedIcon sx={{ fontSize: '0.75rem', color: 'text.lighter' }} />
+                </Tooltip>
+              )}
+            </Stack>
+            <Stack direction="row" alignItems="center" spacing={0.5}>
+              <Typography sx={{ fontSize: '0.75rem', color: 'text.primary' }}>{row.value}</Typography>
+              {isSlippageRow && !disabled && (
+                <IconButton size="small" onClick={handleOpenDialog} sx={{ p: 0.25 }}>
+                  <SettingsIcon sx={{ fontSize: '0.875rem', color: 'text.secondary' }} />
+                </IconButton>
+              )}
+            </Stack>
+          </Stack>
+        );
+      }),
+    [rows, isSubscription, onSlippageChange, disabled, handleOpenDialog]
+  );
+
+  // For subscriptions with slippage settings, show panel even without rateLine
+  // This allows metered subscriptions to configure slippage before first usage
+  const showSlippageOnly = !rateLine && isSubscription && onSlippageChange && rows.some((r) => r.isSlippage);
+
+  if (!rateLine && !showSlippageOnly) {
+    return null;
+  }
+
+  return (
+    <>
+      <Box sx={{ width: '100%', mt: 0.5 }}>
+        <Stack
+          direction="row"
+          sx={{
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 1,
+          }}>
+          {rateLine ? (
+            <Fade in={showContent} timeout={300}>
+              <Typography sx={{ fontSize: '0.7875rem', color: 'text.lighter' }}>{rateLine}</Typography>
+            </Fade>
+          ) : (
+            <Box /> // Empty placeholder when no rate line
+          )}
+          {hasRows && (
+            <IconButton size="small" onClick={() => setOpen((prev) => !prev)} aria-label={open ? 'collapse' : 'expand'}>
+              <ExpandMoreIcon
+                sx={{
+                  fontSize: '1rem',
+                  transition: 'transform 0.2s ease',
+                  transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
+                }}
+              />
+            </IconButton>
+          )}
+        </Stack>
+        {hasRows && (
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <Fade in={showContent} timeout={300}>
+              <Stack
+                sx={{
+                  mt: 1,
+                  p: 1.25,
+                  borderRadius: 1,
+                  border: '1px solid',
+                  borderColor: 'divider',
+                  bgcolor: 'action.hover',
+                }}
+                spacing={1}>
+                {renderedRows}
+              </Stack>
+            </Fade>
+          </Collapse>
+        )}
+      </Box>
+
+      <Dialog open={dialogOpen} onClose={handleCloseDialog} maxWidth="sm" fullWidth>
+        <DialogTitle>{t('payment.checkout.quote.slippage.title')}</DialogTitle>
+        <DialogContent>
+          <SlippageConfig
+            value={pendingConfig?.percent ?? slippageValue}
+            onChange={handleSlippageChange}
+            config={pendingConfig || slippageConfig}
+            onConfigChange={handleConfigChange}
+            exchangeRate={exchangeRate}
+            baseCurrency={baseCurrency}
+            disabled={disabled || submitting}
+            sx={{ mt: 1 }}
+            onCancel={handleCloseDialog}
+            onSave={handleSubmit}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/components/quote-lock-banner.tsx

@@ -0,0 +1,99 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { LockOutlined } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+import { useMemo } from 'react';
+import { formatExchangeRate } from '../libs/util';
+
+interface QuoteLockInfo {
+  exchangeRate: string | null;
+  tokenSymbol: string;
+  baseCurrency: string;
+  expiresAt: number | null;
+}
+
+interface QuoteLockBannerProps {
+  items: TLineItemExpanded[];
+  currency: TPaymentCurrency;
+}
+
+function getQuoteLockInfo(items: TLineItemExpanded[], currency: TPaymentCurrency): QuoteLockInfo | null {
+  if (!items?.length || !currency) {
+    return null;
+  }
+
+  const dynamicItems = items.filter((item) => {
+    const price = (item.upsell_price || item.price) as any;
+    return price?.pricing_type === 'dynamic' && (item as any)?.quoted_amount;
+  });
+  if (!dynamicItems.length) {
+    return null;
+  }
+
+  let expiresAt: number | null = null;
+  let exchangeRate: string | null = null;
+
+  dynamicItems.forEach((item) => {
+    if ((item as any)?.expires_at) {
+      expiresAt = expiresAt === null ? (item as any)?.expires_at : Math.min(expiresAt, (item as any)?.expires_at);
+    }
+
+    if (!exchangeRate) {
+      exchangeRate = (item as any)?.exchange_rate || null;
+    }
+  });
+
+  return {
+    exchangeRate,
+    tokenSymbol: currency.symbol,
+    baseCurrency: ((dynamicItems[0]?.upsell_price || dynamicItems[0]?.price) as any)?.base_currency || 'USD',
+    expiresAt,
+  };
+}
+
+export default function QuoteLockBanner({ items, currency }: QuoteLockBannerProps) {
+  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 (
+    <Box
+      sx={{
+        bgcolor: 'action.hover',
+        border: '1px solid',
+        borderColor: 'divider',
+        borderRadius: 1,
+        px: 2,
+        py: 1.5,
+        mb: 2,
+      }}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1.5,
+          flexWrap: 'wrap',
+        }}>
+        <LockOutlined sx={{ fontSize: '1rem', color: 'success.main' }} />
+        <Typography sx={{ fontSize: '0.875rem', color: 'text.primary', flex: 1 }}>
+          {t('payment.checkout.quote.dynamicPricingInfo', {
+            symbol: quoteLockInfo.tokenSymbol,
+            rate: formattedRate,
+            currency: '',
+          })}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}

package/src/components/slippage-config.tsx

@@ -0,0 +1,336 @@
+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';
+
+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;
+}
+
+const PRESET_SLIPPAGE = [0.5, 1, 3, 5, 10];
+
+export default function SlippageConfig({
+  value,
+  onChange,
+  config = undefined,
+  onConfigChange = undefined,
+  exchangeRate = null,
+  baseCurrency = 'USD',
+  disabled = false,
+  sx = {},
+  onCancel = undefined,
+  onSave = undefined,
+}: SlippageConfigProps) {
+  const { t } = useLocaleContext();
+  const [inputValue, setInputValue] = useState('');
+  const [inputMode, setInputMode] = useState<'percent' | 'rate'>(config?.mode || 'percent');
+  const [error, setError] = useState<string | null>(null);
+  const [isEditing, setIsEditing] = useState(false); // Track if user is actively editing input
+  const percentValue = config?.percent ?? value;
+
+  // Round exchange rate to 2 decimal places for simpler display and calculation
+  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]);
+
+  // Compute min rate from percent using rounded rate
+  const computeMinRateFromPercent = (percent: number) => {
+    if (!roundedRate) return '';
+    const slippageMultiplier = 1 + percent / 100;
+    return (roundedRate / slippageMultiplier).toFixed(2);
+  };
+
+  // Sync mode from config
+  useEffect(() => {
+    if (config?.mode && config.mode !== inputMode) {
+      setInputMode(config.mode);
+    }
+  }, [config?.mode, inputMode]);
+
+  // Sync input value based on mode - skip when user is actively editing
+  useEffect(() => {
+    // Skip sync when user is typing to prevent overwriting their input
+    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);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [percentValue, inputMode, exchangeRate, config?.min_acceptable_rate, isEditing]);
+
+  const handlePresetClick = (preset: number) => {
+    if (disabled) return;
+    setInputValue(preset.toFixed(2));
+    setInputMode('percent');
+    setError(null);
+    onChange(preset);
+    // Always pass min_acceptable_rate so backend saves the exact value user sees
+    const minRate = computeMinRateFromPercent(preset);
+    onConfigChange?.({
+      mode: 'percent',
+      percent: preset,
+      ...(minRate ? { min_acceptable_rate: minRate } : {}),
+    });
+  };
+
+  const handleInputChange = (newValue: string) => {
+    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);
+      // Always pass min_acceptable_rate so backend saves the exact value user sees
+      const minRate = computeMinRateFromPercent(numValue);
+      onConfigChange?.({
+        mode: 'percent',
+        percent: numValue,
+        ...(minRate ? { min_acceptable_rate: minRate } : {}),
+      });
+    } else {
+      // Rate mode: compute equivalent percent from input rate using rounded rate
+      if (!roundedRate) {
+        setError(t('payment.checkout.quote.slippage.rateRequired'));
+        return;
+      }
+      // No range restriction - accept any positive rate
+      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 = (_: any, newMode: 'percent' | 'rate' | null) => {
+    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));
+      // Always pass min_acceptable_rate so backend saves the exact value user sees
+      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 '—';
+    }
+    return roundedRate.toFixed(2);
+  }, [roundedRate]);
+
+  const handleCancel = () => {
+    onCancel?.();
+  };
+
+  const handleSave = () => {
+    onSave?.();
+  };
+
+  return (
+    <Stack spacing={2.5} sx={sx}>
+      {/* Description */}
+      <Typography variant="body2" color="text.secondary">
+        {t('payment.checkout.quote.slippageLimit.description')}
+      </Typography>
+
+      {/* Mode toggle */}
+      <ToggleButtonGroup
+        value={inputMode}
+        exclusive
+        onChange={handleModeChange}
+        size="small"
+        fullWidth
+        disabled={disabled}>
+        <ToggleButton value="percent">{t('payment.checkout.quote.slippageLimit.configTogglePercent')}</ToggleButton>
+        <ToggleButton value="rate" disabled={!roundedRate}>
+          {t('payment.checkout.quote.slippageLimit.configToggleRate')}
+        </ToggleButton>
+      </ToggleButtonGroup>
+
+      {/* Percent mode */}
+      {inputMode === 'percent' && (
+        <Stack spacing={1.5}>
+          <Stack direction="row" spacing={1}>
+            {PRESET_SLIPPAGE.map((preset) => (
+              <ToggleButton
+                key={preset}
+                value={preset}
+                selected={Math.abs(percentValue - preset) < 0.01}
+                onClick={() => handlePresetClick(preset)}
+                size="small"
+                disabled={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',
+                    },
+                  },
+                }}>
+                <Typography variant="body2">{preset}%</Typography>
+              </ToggleButton>
+            ))}
+          </Stack>
+
+          {/* Custom input */}
+          <TextField
+            size="small"
+            fullWidth
+            value={inputValue}
+            onChange={(e) => handleInputChange(e.target.value)}
+            onFocus={() => setIsEditing(true)}
+            onBlur={() => setIsEditing(false)}
+            error={!!error}
+            helperText={error}
+            disabled={disabled}
+            label={t('common.custom')}
+            InputProps={{
+              endAdornment: (
+                <Typography variant="body2" sx={{ color: 'text.secondary', mr: 1 }}>
+                  %
+                </Typography>
+              ),
+            }}
+            placeholder="0.50"
+          />
+        </Stack>
+      )}
+
+      {/* Rate mode */}
+      {inputMode === 'rate' && (
+        <Stack spacing={1.5}>
+          <TextField
+            size="small"
+            fullWidth
+            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: (
+                <Typography variant="body2" sx={{ color: 'text.secondary', mr: 1 }}>
+                  {baseCurrency}
+                </Typography>
+              ),
+            }}
+            placeholder={roundedRate?.toFixed(2) || '0.00'}
+          />
+        </Stack>
+      )}
+
+      {/* Rate info - only show when exchange rate is available */}
+      {roundedRate && (
+        <Box
+          sx={{
+            borderRadius: 1,
+            p: 1.5,
+            bgcolor: 'action.hover',
+          }}>
+          <Stack spacing={0.5}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Typography variant="body2" color="text.secondary">
+                {t('payment.checkout.quote.slippageLimit.derivedCurrentRate')}
+              </Typography>
+              <Typography variant="body2" fontWeight={500}>
+                {currentRateLabel} {baseCurrency}
+              </Typography>
+            </Stack>
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Typography variant="body2" color="text.secondary">
+                {t('payment.checkout.quote.slippageLimit.derivedMinRate')}
+              </Typography>
+              <Typography variant="body2" fontWeight={500} color="primary.main">
+                {inputMode === 'rate' ? inputValue : minAcceptableRate || '—'} {baseCurrency}
+              </Typography>
+            </Stack>
+          </Stack>
+        </Box>
+      )}
+
+      {/* Actions */}
+      <Stack direction="row" spacing={1} justifyContent="flex-end">
+        <Button onClick={handleCancel} disabled={disabled} color="inherit">
+          {t('common.cancel')}
+        </Button>
+        <Button variant="contained" onClick={handleSave} disabled={disabled || !!error}>
+          {t('common.save')}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}