@blocklet/payment-react 1.24.4 → 1.25.0

package/es/types/index.d.ts

@@ -11,6 +11,16 @@ export type CheckoutContext = {
     action?: string;
     showCheckoutSummary?: boolean;
     currencyId?: string;
+    quotes?: Record<string, {
+        quote_id: string;
+        expires_at: number;
+        quoted_amount: string;
+        exchange_rate?: string;
+        rate_provider_name?: string;
+        rate_provider_id?: string;
+    }>;
+    rateUnavailable?: boolean;
+    rateError?: string;
 };
 export type CheckoutFormData = {
     customer_name: string;
@@ -44,6 +54,7 @@ export type CheckoutCallbacks = {
     onError: (err: Error) => void;
     onChange?: (data: CheckoutFormData) => void;
     goBack?: () => void;
+    onRefreshQuote?: () => Promise<boolean>;
 };
 export type PricingRenderProps = {
     totalPrice: string;

package/lib/components/auto-topup/modal.d.ts

@@ -1,4 +1,5 @@
 import type { AutoRechargeConfig } from '@blocklet/payment-types';
+import type { SlippageConfigValue } from '../slippage-config';
 export interface AutoTopupFormData {
     enabled: boolean;
     threshold: string;
@@ -21,6 +22,7 @@ export interface AutoTopupFormData {
         city?: string;
         postal_code?: string;
     };
+    slippage_config?: SlippageConfigValue | null;
 }
 export interface AutoTopupModalProps {
     open: boolean;

package/lib/components/auto-topup/modal.js

@@ -58,7 +58,16 @@ const DEFAULT_VALUES = {
   recharge_currency_id: "",
   price_id: "",
   daily_max_amount: 0,
-  daily_max_attempts: 0
+  daily_max_attempts: 0,
+  slippage_config: null
+};
+const fetchExchangeRate = async currencyId => {
+  const {
+    data
+  } = await _api.default.post("/api/exchange-rates/validate", {
+    currency: currencyId
+  });
+  return data;
 };
 const waitForAutoRechargeComplete = async configId => {
   let result;
@@ -281,6 +290,8 @@ function AutoTopup({
     settings
   } = (0, _payment.usePaymentContext)();
   const [changePaymentMethod, setChangePaymentMethod] = (0, _react.useState)(false);
+  const [slippagePercent, setSlippagePercent] = (0, _react.useState)(0.5);
+  const [slippageConfig, setSlippageConfig] = (0, _react.useState)(null);
   const [state, setState] = (0, _ahooks.useSetState)({
     loading: false,
     submitting: false,
@@ -316,6 +327,10 @@ function AutoTopup({
   const enabled = watch("enabled");
   const quantity = watch("quantity");
   const rechargeCurrencyId = watch("recharge_currency_id");
+  const selectedMethod = settings.paymentMethods.find(method => {
+    return method.payment_currencies.find(c => c.id === rechargeCurrencyId);
+  });
+  const isStripePayment = selectedMethod?.type === "stripe";
   const handleClose = () => {
     setState({
       loading: false,
@@ -343,6 +358,24 @@ function AutoTopup({
         max_amount: data.daily_limits?.max_amount || 0,
         max_attempts: data.daily_limits?.max_attempts || 0
       });
+      if (data.slippage_config) {
+        setSlippageConfig(data.slippage_config);
+        setSlippagePercent(data.slippage_config.percent ?? 0.5);
+      }
+    }
+  });
+  const isDynamicPricing = config?.price?.pricing_type === "dynamic";
+  const {
+    data: exchangeRateData
+  } = (0, _ahooks.useRequest)(() => fetchExchangeRate(rechargeCurrencyId), {
+    refreshDeps: [rechargeCurrencyId],
+    ready: !!rechargeCurrencyId && isDynamicPricing && enabled && !isStripePayment,
+    pollingInterval: 3e4,
+    // Refresh every 30 seconds
+    pollingWhenHidden: false,
+    // Stop polling when tab is hidden
+    onError: error => {
+      console.warn("Failed to fetch exchange rate:", error.message);
     }
   });
   const filterCurrencies = (0, _react.useMemo)(() => {
@@ -477,6 +510,12 @@ function AutoTopup({
         },
         change_payment_method: changePaymentMethod
       };
+      if (isDynamicPricing && slippageConfig) {
+        submitData.slippage_config = {
+          ...slippageConfig,
+          updated_at_ms: Date.now()
+        };
+      }
       const {
         data
       } = await _api.default.post("/api/auto-recharge-configs/submit", submitData);
@@ -508,10 +547,7 @@ function AutoTopup({
     handleFormSubmit(formData);
   };
   const rechargeCurrency = filterCurrencies.find(c => c.id === rechargeCurrencyId);
-  const selectedMethod = settings.paymentMethods.find(method => {
-    return method.payment_currencies.find(c => c.id === rechargeCurrencyId);
-  });
-  const showStripeForm = state.authorizationRequired && selectedMethod?.type === "stripe";
+  const showStripeForm = state.authorizationRequired && isStripePayment;
   const onStripeConfirm = async () => {
     await handleConnected();
   };
@@ -713,7 +749,19 @@ function AutoTopup({
                   quantity,
                   onQuantityChange: newQuantity => setValue("quantity", newQuantity),
                   maxQuantity: 9999,
-                  minQuantity: 1
+                  minQuantity: 1,
+                  exchangeRate: exchangeRateData?.rate,
+                  isDynamicPricing: isDynamicPricing && !isStripePayment,
+                  exchangeRateData,
+                  slippageConfig,
+                  slippagePercent,
+                  onSlippageChange: newSlippageConfig => {
+                    setSlippageConfig(newSlippageConfig);
+                    if (newSlippageConfig.percent !== void 0) {
+                      setSlippagePercent(newSlippageConfig.percent);
+                    }
+                  },
+                  disabled: state.submitting
                 }), config && rechargeCurrency && /* @__PURE__ */(0, _jsxRuntime.jsx)(PaymentMethodDisplay, {
                   config,
                   onChangePaymentMethod: setChangePaymentMethod,

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

@@ -1,4 +1,12 @@
 import type { TPaymentCurrency } from '@blocklet/payment-types';
+import type { SlippageConfigValue } from '../slippage-config';
+interface ExchangeRateData {
+    rate?: string;
+    provider_name?: string;
+    provider_id?: string;
+    provider_display?: string;
+    timestamp_ms?: number;
+}
 interface AutoTopupProductCardProps {
     product: any;
     price: any;
@@ -8,6 +16,13 @@ interface AutoTopupProductCardProps {
     maxQuantity?: number;
     minQuantity?: number;
     creditCurrency: TPaymentCurrency;
+    exchangeRate?: string | null;
+    isDynamicPricing?: boolean;
+    exchangeRateData?: ExchangeRateData | null;
+    slippageConfig?: SlippageConfigValue | null;
+    slippagePercent?: number;
+    onSlippageChange?: (config: SlippageConfigValue) => void;
+    disabled?: boolean;
 }
-export default function AutoTopupProductCard({ product, price, currency, quantity, onQuantityChange, maxQuantity, minQuantity, creditCurrency, }: AutoTopupProductCardProps): import("react").JSX.Element;
+export default function AutoTopupProductCard({ product, price, currency, quantity, onQuantityChange, maxQuantity, minQuantity, creditCurrency, exchangeRate, isDynamicPricing, exchangeRateData, slippageConfig, slippagePercent, onSlippageChange, disabled, }: AutoTopupProductCardProps): import("react").JSX.Element;
 export {};

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

@@ -10,6 +10,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _react = require("react");
 var _productCard = _interopRequireDefault(require("../../payment/product-card"));
 var _util = require("../../libs/util");
+var _quoteDetailsPanel = _interopRequireDefault(require("../quote-details-panel"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function AutoTopupProductCard({
   product,
@@ -19,7 +20,14 @@ function AutoTopupProductCard({
   onQuantityChange,
   maxQuantity = 99,
   minQuantity = 1,
-  creditCurrency
+  creditCurrency,
+  exchangeRate = null,
+  isDynamicPricing = false,
+  exchangeRateData = null,
+  slippageConfig = null,
+  slippagePercent = 0.5,
+  onSlippageChange = void 0,
+  disabled = false
 }) {
   const {
     t,
@@ -27,6 +35,32 @@ function AutoTopupProductCard({
   } = (0, _context.useLocaleContext)();
   const [localQuantity, setLocalQuantity] = (0, _react.useState)(quantity);
   const localQuantityNum = Number(localQuantity) || 0;
+  const {
+    paymentAmount,
+    usdReferenceDisplay
+  } = (0, _react.useMemo)(() => {
+    if (!isDynamicPricing || !exchangeRate || !price?.base_amount) {
+      return {
+        paymentAmount: (0, _util.formatPrice)(price, currency, product?.unit_label, localQuantity, true),
+        usdReferenceDisplay: null
+      };
+    }
+    const baseAmount = Number(price.base_amount) * localQuantityNum;
+    const rate = Number(exchangeRate);
+    if (rate <= 0 || !Number.isFinite(baseAmount)) {
+      return {
+        paymentAmount: (0, _util.formatPrice)(price, currency, product?.unit_label, localQuantity, true),
+        usdReferenceDisplay: null
+      };
+    }
+    const tokenAmount = baseAmount / rate;
+    const formattedToken = (0, _util.formatDynamicPrice)(tokenAmount, true, 6);
+    const formattedUsd = (0, _util.formatUsdAmount)(baseAmount.toString(), locale);
+    return {
+      paymentAmount: `${formattedToken} ${currency.symbol}`,
+      usdReferenceDisplay: formattedUsd ? `\u2248 $${formattedUsd}` : null
+    };
+  }, [isDynamicPricing, exchangeRate, price, currency, product?.unit_label, localQuantity, localQuantityNum, locale]);
   const handleQuantityChange = newQuantity => {
     if (!newQuantity) {
       setLocalQuantity(void 0);
@@ -124,7 +158,7 @@ function AutoTopupProductCard({
       direction: "row",
       sx: {
         justifyContent: "space-between",
-        alignItems: "center",
+        alignItems: "flex-start",
         mt: 2,
         pt: 2,
         borderTop: "1px solid",
@@ -136,13 +170,47 @@ function AutoTopupProductCard({
           color: "text.secondary"
         },
         children: t("payment.autoTopup.rechargeAmount")
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        variant: "h6",
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         sx: {
-          fontWeight: 600,
-          color: "text.primary"
+          alignItems: "flex-end"
         },
-        children: (0, _util.formatPrice)(price, currency, product?.unit_label, localQuantity, true)
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "h6",
+          sx: {
+            fontWeight: 600,
+            color: "text.primary"
+          },
+          children: paymentAmount
+        }), usdReferenceDisplay && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontSize: "0.7875rem",
+            color: "text.lighter"
+          },
+          children: usdReferenceDisplay
+        }), isDynamicPricing && exchangeRateData?.rate && /* @__PURE__ */(0, _jsxRuntime.jsx)(_quoteDetailsPanel.default, {
+          rateLine: t("payment.checkout.quote.rateLine", {
+            symbol: currency.symbol,
+            rate: `$${(0, _util.formatExchangeRate)(exchangeRateData.rate) || exchangeRateData.rate}`
+          }),
+          rows: [{
+            label: t("payment.checkout.quote.detailProvider"),
+            value: exchangeRateData?.provider_display || exchangeRateData?.provider_name || "\u2014"
+          }, {
+            label: t("payment.checkout.quote.detailUpdatedAt"),
+            value: exchangeRateData?.timestamp_ms ? (0, _util.formatToDatetime)(exchangeRateData.timestamp_ms, locale) : "\u2014"
+          }, {
+            label: t("payment.checkout.quote.detailSlippage"),
+            value: slippageConfig?.mode === "rate" && slippageConfig.min_acceptable_rate ? `$${(0, _util.formatExchangeRate)(slippageConfig.min_acceptable_rate) || slippageConfig.min_acceptable_rate}` : `${slippageConfig?.percent ?? slippagePercent}%`,
+            isSlippage: true
+          }],
+          isSubscription: true,
+          slippageValue: slippageConfig?.percent ?? slippagePercent,
+          slippageConfig: slippageConfig || void 0,
+          onSlippageChange,
+          exchangeRate: exchangeRateData?.rate,
+          baseCurrency: "USD",
+          disabled
+        })]
       })]
     })]
   });

package/lib/components/dynamic-pricing-unavailable.d.ts

@@ -0,0 +1,9 @@
+import { type SxProps } from '@mui/material';
+interface DynamicPricingUnavailableProps {
+    error?: string;
+    onRetry?: () => void | Promise<void>;
+    showRetry?: boolean;
+    sx?: SxProps;
+}
+export default function DynamicPricingUnavailable({ error, onRetry, showRetry, sx, }: DynamicPricingUnavailableProps): import("react").JSX.Element;
+export {};

package/lib/components/dynamic-pricing-unavailable.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = DynamicPricingUnavailable;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _react = require("react");
+function DynamicPricingUnavailable({
+  error = void 0,
+  onRetry = void 0,
+  showRetry = true,
+  sx = void 0
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [retrying, setRetrying] = (0, _react.useState)(false);
+  if (error) {
+    console.error("[Dynamic Pricing Error]", error);
+  }
+  const handleRetry = async () => {
+    if (!onRetry || retrying) return;
+    setRetrying(true);
+    try {
+      await onRetry();
+    } finally {
+      setRetrying(false);
+    }
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+    severity: "warning",
+    icon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.ErrorOutline, {}),
+    sx: {
+      borderRadius: 2,
+      "& .MuiAlert-message": {
+        width: "100%"
+      },
+      ...sx
+    },
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        width: "100%"
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AlertTitle, {
+          sx: {
+            fontWeight: 600
+          },
+          children: t("payment.dynamicPricing.unavailable.title")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          sx: {
+            color: "text.secondary",
+            mt: 0.5
+          },
+          children: t("payment.dynamicPricing.unavailable.message")
+        })]
+      }), showRetry && onRetry && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        size: "small",
+        variant: "outlined",
+        onClick: handleRetry,
+        disabled: retrying,
+        startIcon: retrying ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+          size: 16
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Refresh, {}),
+        sx: {
+          ml: 2,
+          flexShrink: 0
+        },
+        children: t("payment.dynamicPricing.unavailable.retry")
+      })]
+    })
+  });
+}

package/lib/components/loading-amount.d.ts

@@ -0,0 +1,17 @@
+/**
+ * LoadingAmount Component
+ *
+ * Displays amount with skeleton loading state during currency switch.
+ * Only shows skeleton when isRateLoading is true (currency switch scenario).
+ */
+import type { SxProps, Theme } from '@mui/material';
+export interface LoadingAmountProps {
+    value: string;
+    loading?: boolean;
+    skeletonWidth?: number;
+    height?: number;
+    sx?: SxProps<Theme>;
+    animateValueChange?: boolean;
+    transitionDuration?: number;
+}
+export default function LoadingAmount({ value, loading, skeletonWidth, height, sx, animateValueChange, transitionDuration, }: LoadingAmountProps): import("react").JSX.Element;

package/lib/components/loading-amount.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = LoadingAmount;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _react = require("react");
+function LoadingAmount({
+  value,
+  loading = false,
+  skeletonWidth = 80,
+  height = 24,
+  sx = {},
+  animateValueChange = false,
+  transitionDuration = 300
+}) {
+  const [displayValue, setDisplayValue] = (0, _react.useState)(value);
+  const [isTransitioning, setIsTransitioning] = (0, _react.useState)(false);
+  const prevValueRef = (0, _react.useRef)(value);
+  (0, _react.useEffect)(() => {
+    if (value !== prevValueRef.current) {
+      prevValueRef.current = value;
+      if (animateValueChange && !loading) {
+        setIsTransitioning(true);
+        const timer = setTimeout(() => {
+          setDisplayValue(value);
+          setIsTransitioning(false);
+        }, transitionDuration / 2);
+        return () => clearTimeout(timer);
+      }
+      setDisplayValue(value);
+    }
+    return void 0;
+  }, [value, loading, animateValueChange, transitionDuration]);
+  if (loading) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+      variant: "text",
+      width: skeletonWidth,
+      height
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+    component: "span",
+    sx: {
+      ...sx,
+      opacity: isTransitioning ? 0 : 1,
+      transition: animateValueChange ? `opacity ${transitionDuration / 2}ms ease-in-out` : void 0
+    },
+    children: displayValue
+  });
+}

package/lib/components/price-change-confirm.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Price Change Confirmation Dialog (Final Freeze Architecture)
+ *
+ * Displayed when the price changes between Preview and Submit
+ * beyond the user's configured slippage threshold.
+ *
+ * @see Intent: blocklets/core/ai/intent/20260112-dynamic-price.md
+ */
+export interface PriceChangeConfirmProps {
+    open: boolean;
+    previewRate?: string;
+    submitRate?: string;
+    changePercent: number;
+    onConfirm: () => void;
+    onCancel: () => void;
+    loading?: boolean;
+}
+export default function PriceChangeConfirm({ open, previewRate, submitRate, changePercent, onConfirm, onCancel, loading, }: PriceChangeConfirmProps): import("react").JSX.Element;

package/lib/components/price-change-confirm.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = PriceChangeConfirm;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _WarningAmber = _interopRequireDefault(require("@mui/icons-material/WarningAmber"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function PriceChangeConfirm({
+  open,
+  previewRate = void 0,
+  submitRate = void 0,
+  changePercent,
+  onConfirm,
+  onCancel,
+  loading = false
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const changeDirection = changePercent > 0 ? "increased" : "decreased";
+  const absChangePercent = Math.abs(changePercent);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Dialog, {
+    open,
+    onClose: loading ? void 0 : onCancel,
+    maxWidth: "sm",
+    fullWidth: true,
+    PaperProps: {
+      sx: {
+        borderRadius: 2
+      }
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.DialogTitle, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        pb: 1
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_WarningAmber.default, {
+        color: "warning"
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h6",
+        component: "span",
+        children: t("payment.checkout.priceChange.title", {
+          fallback: "Price Changed"
+        })
+      })]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.DialogContent, {
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 2,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body1",
+          color: "text.secondary",
+          children: t("payment.checkout.priceChange.description", {
+            fallback: `The exchange rate has ${changeDirection} by ${absChangePercent.toFixed(2)}% since you started this checkout.`,
+            direction: changeDirection,
+            percent: absChangePercent.toFixed(2)
+          })
+        }), (previewRate || submitRate) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            bgcolor: "action.hover",
+            borderRadius: 1,
+            p: 2
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 1,
+            children: [previewRate && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between"
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: [t("payment.checkout.priceChange.previewRate", {
+                  fallback: "Preview Rate"
+                }), ":"]
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "body2",
+                fontFamily: "monospace",
+                children: previewRate
+              })]
+            }), submitRate && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between"
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: [t("payment.checkout.priceChange.currentRate", {
+                  fallback: "Current Rate"
+                }), ":"]
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "body2",
+                fontFamily: "monospace",
+                children: submitRate
+              })]
+            }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between"
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: [t("payment.checkout.priceChange.change", {
+                  fallback: "Change"
+                }), ":"]
+              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                variant: "body2",
+                fontWeight: "bold",
+                color: changePercent > 0 ? "error.main" : "success.main",
+                children: [changePercent > 0 ? "+" : "", changePercent.toFixed(2), "%"]
+              })]
+            })]
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          color: "text.secondary",
+          children: t("payment.checkout.priceChange.confirm", {
+            fallback: "Do you want to continue with the new price?"
+          })
+        })]
+      })
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.DialogActions, {
+      sx: {
+        px: 3,
+        pb: 2
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        onClick: onCancel,
+        disabled: loading,
+        variant: "outlined",
+        color: "inherit",
+        children: t("payment.checkout.priceChange.cancel", {
+          fallback: "Cancel"
+        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        onClick: onConfirm,
+        disabled: loading,
+        variant: "contained",
+        color: "primary",
+        autoFocus: true,
+        children: loading ? t("payment.checkout.priceChange.confirming", {
+          fallback: "Confirming..."
+        }) : t("payment.checkout.priceChange.accept", {
+          fallback: "Accept & Continue"
+        })
+      })]
+    })]
+  });
+}

package/lib/components/quote-details-panel.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+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, slippageValue, onSlippageChange, slippageConfig, exchangeRate, baseCurrency, disabled, }: QuoteDetailsPanelProps): import("react").JSX.Element | null;
+export {};