@blocklet/payment-react 1.24.4 → 1.25.0

package/lib/payment/form/index.js

@@ -23,6 +23,7 @@ var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _iconsMaterial = require("@mui/icons-material");
 var _withTracker = require("@arcblock/ux/lib/withTracker");
+var _trim = _interopRequireDefault(require("lodash/trim"));
 var _input = _interopRequireDefault(require("../../components/input"));
 var _label = _interopRequireDefault(require("../../components/label"));
 var _payment = require("../../contexts/payment");
@@ -39,8 +40,12 @@ var _loadingButton = _interopRequireDefault(require("../../components/loading-bu
 var _overDueInvoicePayment = _interopRequireDefault(require("../../components/over-due-invoice-payment"));
 var _currency2 = require("../../libs/currency");
 var _confirm = _interopRequireDefault(require("../../components/confirm"));
+var _priceChangeConfirm = _interopRequireDefault(require("../../components/price-change-confirm"));
 var _validator = require("../../libs/validator");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const generateIdempotencyKey = (sessionId, currencyId) => {
+  return `${sessionId}-${currencyId}-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`;
+};
 const waitForCheckoutComplete = async sessionId => {
   let result;
   await (0, _pWaitFor.default)(async () => {
@@ -121,10 +126,13 @@ function PaymentForm({
   customer,
   onPaid,
   onError,
+  onQuoteUpdated = void 0,
+  onPaymentIntentUpdate = void 0,
   // mode,
   action,
   onlyShowBtn = false,
-  isDonation = false
+  isDonation = false,
+  rateUnavailable = false
 }) {
   const {
     t,
@@ -174,7 +182,8 @@ function PaymentForm({
     stripePaying: false,
     fastCheckoutInfo: null,
     creditInsufficientInfo: null,
-    showEditForm: false
+    showEditForm: false,
+    priceChangeConfirm: null
   });
   const currencies = (0, _util2.flattenPaymentMethods)(paymentMethods);
   const searchParams = (0, _util2.getQueryParams)(window.location.href);
@@ -295,7 +304,192 @@ function PaymentForm({
   const method = paymentMethods.find(x => x.id === paymentMethod);
   const paymentCurrency = currencies.find(x => x.id === paymentCurrencyId);
   const showStake = method.type === "arcblock" && !checkoutSession.subscription_data?.no_stake;
+  const hasDynamicPricing = (0, _react.useMemo)(() => (checkoutSession.line_items || []).some(item => {
+    const price = item.upsell_price || item.price;
+    return price && price?.pricing_type === "dynamic";
+  }), [checkoutSession.line_items]);
+  const rateUnavailableForDynamic = hasDynamicPricing && rateUnavailable;
+  const canPay = payable && !rateUnavailableForDynamic;
   const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
+  const [priceUpdateInfo, setPriceUpdateInfo] = (0, _ahooks.useSetState)({
+    open: false,
+    total: "",
+    usd: null,
+    hasQuotes: false,
+    baseCurrency: "USD",
+    oldTotal: "",
+    reason: "recalculated"
+  });
+  const normalizeExchangeRate = (0, _ahooks.useMemoizedFn)(rate => {
+    if (!rate) {
+      return null;
+    }
+    const value = Number(rate);
+    if (!Number.isFinite(value)) {
+      return null;
+    }
+    return value.toFixed(8);
+  });
+  const getExchangeRateFromSession = (0, _ahooks.useMemoizedFn)(sessionData => {
+    if (!sessionData?.line_items?.length) {
+      return null;
+    }
+    for (const item of sessionData.line_items) {
+      const rate = item?.exchange_rate;
+      if (rate) {
+        return rate;
+      }
+    }
+    return null;
+  });
+  const quoteAutoRetryRef = (0, _react.useRef)(false);
+  const lastRetryKeyRef = (0, _react.useRef)("");
+  const buildRetryKey = (0, _ahooks.useMemoizedFn)(sessionData => {
+    if (!sessionData?.line_items?.length) {
+      return "";
+    }
+    return sessionData.line_items.map(item => {
+      const priceId = item.price_id || item.price?.id || "";
+      const quoteId = item?.quote_id || "";
+      const quotedAmount = item?.quoted_amount || "";
+      const exchangeRate = item?.exchange_rate || "";
+      return `${priceId}:${quoteId}:${quotedAmount}:${exchangeRate}`;
+    }).join("|");
+  });
+  const buildPriceUpdateSummary = (0, _ahooks.useMemoizedFn)(sessionData => {
+    if (!paymentCurrency) {
+      return {
+        total: "",
+        usd: null,
+        hasQuotes: false,
+        baseCurrency: "USD",
+        totalUnit: null
+      };
+    }
+    const lineItems = sessionData.line_items || [];
+    let baseCurrency = "USD";
+    for (const item of lineItems) {
+      const price = item.upsell_price || item.price;
+      const base = price?.base_currency;
+      if (base) {
+        baseCurrency = base;
+        break;
+      }
+    }
+    const hasQuotes = lineItems.some(item => item?.quoted_amount && item?.exchange_rate);
+    if (!hasQuotes) {
+      return {
+        total: "",
+        usd: null,
+        hasQuotes: false,
+        baseCurrency,
+        totalUnit: null
+      };
+    }
+    let trialInDays = Number(sessionData?.subscription_data?.trial_period_days || 0);
+    const trialCurrencyIds = (sessionData?.subscription_data?.trial_currency || "").split(",").map(_trim.default).filter(Boolean);
+    if (trialCurrencyIds.length > 0 && paymentCurrencyId && trialCurrencyIds.includes(paymentCurrencyId) === false) {
+      trialInDays = 0;
+    }
+    const {
+      total
+    } = (0, _util2.getCheckoutAmount)(lineItems, paymentCurrency, trialInDays > 0);
+    const discountAmount = new _util.BN(sessionData.total_details?.amount_discount || "0");
+    const totalUnit = new _util.BN(total).sub(discountAmount);
+    const normalizedTotalUnit = totalUnit.isNeg() ? new _util.BN(0) : totalUnit;
+    const totalDisplay = `${(0, _util2.formatNumber)((0, _util.fromUnitToToken)(normalizedTotalUnit.toString(), paymentCurrency.decimal), 6)} ${paymentCurrency.symbol}`;
+    const itemUsdReferences = lineItems.map(item => {
+      const price = item.upsell_price || item.price;
+      const baseAmount = price?.base_amount;
+      const hasBaseAmount = baseAmount !== void 0 && baseAmount !== null;
+      if (hasBaseAmount) {
+        return (0, _util2.getUsdAmountFromBaseAmount)(baseAmount, item.quantity || 0);
+      }
+      const exchangeRate = item?.exchange_rate;
+      const quotedAmount = item?.quoted_amount;
+      if (!exchangeRate || !quotedAmount) {
+        return null;
+      }
+      return (0, _util2.getUsdAmountFromTokenUnits)(new _util.BN(quotedAmount), paymentCurrency.decimal, exchangeRate);
+    });
+    const usdValues = itemUsdReferences.filter(value => Boolean(value));
+    if (!usdValues.length) {
+      return {
+        total: totalDisplay,
+        usd: null,
+        hasQuotes,
+        baseCurrency,
+        totalUnit: normalizedTotalUnit
+      };
+    }
+    const sumUnit = usdValues.reduce((acc, value) => acc.add(new _util.BN((0, _util.fromTokenToUnit)(value, 8))), new _util.BN(0));
+    const totalUsdReference = (0, _util.fromUnitToToken)(sumUnit.toString(), 8);
+    return {
+      total: totalDisplay,
+      usd: (0, _util2.formatUsdAmount)(totalUsdReference, locale),
+      hasQuotes,
+      baseCurrency,
+      totalUnit: normalizedTotalUnit
+    };
+  });
+  const compareTotals = (0, _ahooks.useMemoizedFn)((prevSession, nextSession) => {
+    const prev = buildPriceUpdateSummary(prevSession);
+    const next = buildPriceUpdateSummary(nextSession);
+    if (!prev.totalUnit || !next.totalUnit) {
+      return {
+        changed: false,
+        prev,
+        next
+      };
+    }
+    const diff = next.totalUnit.sub(prev.totalUnit).abs();
+    const epsilon = new _util.BN(1);
+    return {
+      changed: diff.gt(epsilon),
+      prev,
+      next
+    };
+  });
+  const applyQuoteUpdate = (0, _ahooks.useMemoizedFn)((payload, options = {}) => {
+    if (!payload?.checkoutSession) {
+      return;
+    }
+    onQuoteUpdated?.({
+      checkoutSession: payload.checkoutSession,
+      quotes: payload.quotes,
+      rateUnavailable: payload.rateUnavailable,
+      rateError: payload.rateError
+    });
+    const {
+      changed,
+      prev,
+      next
+    } = compareTotals(checkoutSession, payload.checkoutSession);
+    const previousRate = normalizeExchangeRate(getExchangeRateFromSession(checkoutSession));
+    const nextRate = normalizeExchangeRate(getExchangeRateFromSession(payload.checkoutSession));
+    const rateChanged = !!(previousRate && nextRate && previousRate !== nextRate);
+    const shouldShowModal = (options.forceConfirm || changed) && next.hasQuotes;
+    if (shouldShowModal) {
+      setPriceUpdateInfo({
+        open: true,
+        total: next.total,
+        usd: next.usd,
+        hasQuotes: next.hasQuotes,
+        baseCurrency: next.baseCurrency,
+        oldTotal: prev.total,
+        reason: options.reason || (rateChanged ? "rateChanged" : "recalculated")
+      });
+      return;
+    }
+    setPriceUpdateInfo({
+      open: false
+    });
+    const retryKey = buildRetryKey(payload.checkoutSession);
+    if (retryKey && retryKey !== lastRetryKeyRef.current) {
+      lastRetryKeyRef.current = retryKey;
+      quoteAutoRetryRef.current = true;
+    }
+  });
   const validateUserInfo = values => {
     if (!values) {
       return false;
@@ -403,6 +597,16 @@ function PaymentForm({
     name: "billing_address"
   });
   const showForm = session?.user ? state.showEditForm : false;
+  (0, _react.useEffect)(() => {
+    if (!quoteAutoRetryRef.current) {
+      return;
+    }
+    if (state.submitting || state.paying) {
+      return;
+    }
+    quoteAutoRetryRef.current = false;
+    onAction();
+  }, [state.submitting, state.paying]);
   const handleConnected = async () => {
     if (processingRef.current) {
       return;
@@ -473,7 +677,10 @@ function PaymentForm({
       }
     });
     try {
-      const result = await _api.default.post(`/api/checkout-sessions/${checkoutSession.id}/fast-checkout-confirm`);
+      const result = await _api.default.post(`/api/checkout-sessions/${checkoutSession.id}/fast-checkout-confirm`, {});
+      if (result.data.paymentIntent) {
+        onPaymentIntentUpdate?.(result.data.paymentIntent);
+      }
       if (result.data.fastPaid) {
         setState({
           fastCheckoutInfo: null,
@@ -490,6 +697,57 @@ function PaymentForm({
       }
     } catch (err) {
       console.error(err);
+      const errorCode = err?.response?.data?.code;
+      if (["QUOTE_LOCK_EXPIRED", "QUOTE_AMOUNT_MISMATCH", "QUOTE_EXPIRED_OR_USED", "QUOTE_NOT_FOUND", "QUOTE_REQUIRED"].includes(errorCode)) {
+        try {
+          const {
+            data: refreshed
+          } = await _api.default.get(`/api/checkout-sessions/retrieve/${checkoutSession.id}`, {
+            params: {
+              forceRefresh: "1"
+            }
+          });
+          if (refreshed?.checkoutSession) {
+            applyQuoteUpdate(refreshed, {
+              reason: "rateChanged"
+            });
+            _Toast.default.info(t("payment.checkout.quote.updated.pleaseRetry") || "Price updated, please resubmit");
+          }
+        } catch (refreshError) {
+          console.error(refreshError);
+          _Toast.default.error((0, _util2.formatError)(refreshError));
+        } finally {
+          setState({
+            fastCheckoutInfo: null
+          });
+        }
+        return;
+      }
+      if (errorCode === "QUOTE_UPDATED") {
+        const payload = err?.response?.data;
+        if (payload?.checkoutSession) {
+          applyQuoteUpdate(payload);
+        }
+        setState({
+          fastCheckoutInfo: null
+        });
+        return;
+      }
+      if (errorCode === "RATE_UNAVAILABLE") {
+        const payload = err?.response?.data;
+        if (payload?.checkoutSession) {
+          onQuoteUpdated?.({
+            checkoutSession: payload.checkoutSession,
+            quotes: payload.quotes,
+            rateUnavailable: payload.rateUnavailable,
+            rateError: payload.rateError
+          });
+        }
+        setState({
+          fastCheckoutInfo: null
+        });
+        return;
+      }
       _Toast.default.error((0, _util2.formatError)(err));
       setState({
         fastCheckoutInfo: null
@@ -506,6 +764,31 @@ function PaymentForm({
       creditInsufficientInfo: null
     });
   };
+  const handlePriceUpdateConfirm = () => {
+    setPriceUpdateInfo({
+      open: false
+    });
+    quoteAutoRetryRef.current = true;
+  };
+  const handlePriceUpdateCancel = () => {
+    setPriceUpdateInfo({
+      open: false
+    });
+  };
+  const handlePriceChangeConfirm = () => {
+    const formData = state.priceChangeConfirm?.formData;
+    setState({
+      priceChangeConfirm: null
+    });
+    if (formData) {
+      onFormSubmit(formData);
+    }
+  };
+  const handlePriceChangeCancel = () => {
+    setState({
+      priceChangeConfirm: null
+    });
+  };
   const openConnect = () => {
     try {
       if (!["arcblock", "ethereum", "base"].includes(method.type)) {
@@ -558,6 +841,9 @@ function PaymentForm({
     }
   };
   const onFormSubmit = async data => {
+    if (state.submitting) {
+      return;
+    }
     const userInfo = session.user;
     if (!userInfo.sourceAppPid) {
       const hasVendorConfig = checkoutSession.line_items?.some(item => !!item?.price?.product?.vendor_config?.length);
@@ -571,10 +857,18 @@ function PaymentForm({
     });
     try {
       let result;
+      const previewRate = checkoutSession.line_items?.find(item => item?.exchange_rate)?.exchange_rate || void 0;
+      const payload = {
+        ...data,
+        // Final Freeze: Include these for new quote creation at submit
+        idempotency_key: generateIdempotencyKey(checkoutSession.id, paymentCurrency?.id || ""),
+        preview_rate: previewRate || void 0,
+        price_confirmed: state.priceChangeConfirm?.formData ? true : void 0
+      };
       if (isDonationMode) {
-        result = await _api.default.put(`/api/checkout-sessions/${checkoutSession.id}/donate-submit`, data);
+        result = await _api.default.put(`/api/checkout-sessions/${checkoutSession.id}/donate-submit`, payload);
       } else {
-        result = await _api.default.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+        result = await _api.default.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, payload);
       }
       setState({
         paymentIntent: result.data.paymentIntent,
@@ -583,7 +877,30 @@ function PaymentForm({
         submitting: false,
         customerLimited: false
       });
+      if (result.data.paymentIntent) {
+        onPaymentIntentUpdate?.(result.data.paymentIntent);
+      }
       if (["arcblock", "ethereum", "base"].includes(method.type)) {
+        if (result.data.noPaymentRequired) {
+          try {
+            const confirmResult = await _api.default.post(`/api/checkout-sessions/${checkoutSession.id}/fast-checkout-confirm`, {});
+            if (confirmResult.data.paymentIntent) {
+              onPaymentIntentUpdate?.(confirmResult.data.paymentIntent);
+            }
+            if (confirmResult.data.fastPaid || confirmResult.data.checkoutSession?.status === "complete") {
+              setState({
+                paying: true
+              });
+              await handleConnected();
+            } else {
+              openConnect();
+            }
+          } catch (confirmErr) {
+            console.error("noPaymentRequired confirm failed", confirmErr);
+            openConnect();
+          }
+          return;
+        }
         if (paymentCurrency?.type === "credit") {
           if (result.data.creditSufficient === true) {
             setState({
@@ -634,13 +951,80 @@ function PaymentForm({
     } catch (err) {
       console.error(err);
       let shouldToast = true;
-      if (err.response?.data?.code) {
-        (0, _useBus.dispatch)(`error.${err.response?.data?.code}`);
-        if (err.response?.data?.code === "UNIFIED_APP_REQUIRED") {
+      const errorCode = err.response?.data?.code;
+      if (errorCode) {
+        if (!["QUOTE_UPDATED", "RATE_UNAVAILABLE", "QUOTE_LOCK_EXPIRED", "QUOTE_AMOUNT_MISMATCH", "QUOTE_EXPIRED_OR_USED", "QUOTE_NOT_FOUND", "QUOTE_REQUIRED", "QUOTE_MAX_PAYABLE_EXCEEDED"].includes(errorCode)) {
+          (0, _useBus.dispatch)(`error.${errorCode}`);
+        }
+        if (["QUOTE_LOCK_EXPIRED", "QUOTE_AMOUNT_MISMATCH", "QUOTE_EXPIRED_OR_USED", "QUOTE_NOT_FOUND", "QUOTE_REQUIRED", "QUOTE_MAX_PAYABLE_EXCEEDED", "quote_validation_failed"].includes(errorCode)) {
+          shouldToast = false;
+          try {
+            const {
+              data: refreshed
+            } = await _api.default.get(`/api/checkout-sessions/retrieve/${checkoutSession.id}`, {
+              params: {
+                forceRefresh: "1"
+              }
+            });
+            if (refreshed?.checkoutSession) {
+              applyQuoteUpdate(refreshed, {
+                reason: "rateChanged"
+              });
+              _Toast.default.info(t("payment.checkout.quote.updated.pleaseRetry") || "Price updated, please resubmit");
+            }
+          } catch (refreshError) {
+            console.error(refreshError);
+            _Toast.default.error((0, _util2.formatError)(refreshError));
+          }
+        }
+        if (errorCode === "QUOTE_UPDATED") {
+          shouldToast = false;
+          const payload = err.response?.data;
+          if (payload?.checkoutSession) {
+            applyQuoteUpdate(payload);
+          }
+        }
+        if (errorCode === "RATE_UNAVAILABLE") {
+          shouldToast = false;
+          const payload = err.response?.data;
+          if (payload?.checkoutSession) {
+            onQuoteUpdated?.({
+              checkoutSession: payload.checkoutSession,
+              quotes: payload.quotes,
+              rateUnavailable: payload.rateUnavailable,
+              rateError: payload.rateError
+            });
+          }
+        }
+        if (errorCode === "PRICE_UNAVAILABLE") {
+          shouldToast = false;
+          _Toast.default.error(t("payment.checkout.priceChange.unavailable", {
+            fallback: "Unable to fetch exchange rate. Please try again later."
+          }));
+        }
+        if (errorCode === "PRICE_UNSTABLE") {
+          shouldToast = false;
+          _Toast.default.error(t("payment.checkout.priceChange.unstable", {
+            fallback: "Price is volatile. Please try again later."
+          }));
+        }
+        if (errorCode === "PRICE_CHANGED") {
+          shouldToast = false;
+          const errorData = err.response?.data;
+          setState({
+            priceChangeConfirm: {
+              open: true,
+              changePercent: errorData?.change_percent || 0,
+              formData: data
+              // Save form data for retry
+            }
+          });
+        }
+        if (errorCode === "UNIFIED_APP_REQUIRED") {
           shouldToast = false;
           _Toast.default.error(t("payment.checkout.vendor.accountRequired"));
         }
-        if (err.response.data.code === "CUSTOMER_LIMITED") {
+        if (errorCode === "CUSTOMER_LIMITED") {
           shouldToast = false;
           setState({
             customerLimited: true
@@ -665,7 +1049,7 @@ function PaymentForm({
     });
   };
   const onAction = () => {
-    if (state.submitting || state.paying) {
+    if (state.submitting || state.paying || !canPay) {
       return;
     }
     if (errorRef.current && !(0, _isEmpty.default)(errors) && isMobile) {
@@ -714,7 +1098,7 @@ function PaymentForm({
   };
   (0, _react.useEffect)(() => {
     const handleKeyDown = e => {
-      if (e.key === "Enter" && !state.submitting && !state.paying && !state.stripePaying && quantityInventoryStatus && payable) {
+      if (e.key === "Enter" && !state.submitting && !state.paying && !state.stripePaying && quantityInventoryStatus && canPay) {
         onAction();
       }
     };
@@ -722,7 +1106,7 @@ function PaymentForm({
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]);
+  }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, canPay]);
   const balanceLink = (0, _util2.getTokenBalanceLink)(method, state.fastCheckoutInfo?.payer || "");
   const FastCheckoutConfirmDialog = state.fastCheckoutInfo && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
     onConfirm: handleFastCheckoutConfirm,
@@ -730,7 +1114,7 @@ function PaymentForm({
     title: state.fastCheckoutInfo.sourceType === "credit" ? t("payment.checkout.fastPay.credit.title") : t("payment.checkout.fastPay.title"),
     message: state.fastCheckoutInfo.sourceType === "credit" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       children: t("payment.checkout.fastPay.credit.meteringSubscriptionMessage", {
-        available: `${(0, _util.fromUnitToToken)(state.fastCheckoutInfo?.balance || "0", paymentCurrency?.decimal || 18).toString()} ${paymentCurrency?.symbol}`
+        available: `${(0, _util2.formatAmount)(state.fastCheckoutInfo?.balance || "0", paymentCurrency?.decimal || 18)} ${paymentCurrency?.symbol}`
       })
     }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -794,7 +1178,7 @@ function PaymentForm({
             },
             children: t("payment.checkout.fastPay.amount")
           }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-            children: [(0, _util.fromUnitToToken)(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString(), " ", paymentCurrency?.symbol]
+            children: [(0, _util2.formatAmount)(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18), " ", paymentCurrency?.symbol]
           })]
         })]
       })]
@@ -811,6 +1195,47 @@ function PaymentForm({
     }),
     confirm: t("common.confirm")
   });
+  const PriceUpdatedDialog = priceUpdateInfo.open && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
+    onConfirm: handlePriceUpdateConfirm,
+    onCancel: handlePriceUpdateCancel,
+    title: t("payment.checkout.quote.priceUpdatedTitle"),
+    message: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      spacing: 1,
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t(priceUpdateInfo.reason === "rateChanged" ? "payment.checkout.quote.priceUpdatedDescriptionRate" : "payment.checkout.quote.priceUpdatedDescriptionRecalc")
+      }), priceUpdateInfo.hasQuotes && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 0.25,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            color: "text.secondary",
+            fontSize: "0.7875rem"
+          },
+          children: t("payment.checkout.quote.priceUpdatedNewTotalLabel")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontWeight: 600
+          },
+          children: priceUpdateInfo.total
+        }), priceUpdateInfo.usd && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          sx: {
+            color: "text.secondary"
+          },
+          children: ["\u2248 ", priceUpdateInfo.usd, " ", priceUpdateInfo.baseCurrency]
+        }), priceUpdateInfo.oldTotal && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            color: "text.secondary",
+            fontSize: "0.75rem"
+          },
+          children: t("payment.checkout.quote.priceUpdatedOldTotal", {
+            total: priceUpdateInfo.oldTotal
+          })
+        })]
+      })]
+    }),
+    confirm: t("payment.checkout.quote.priceUpdatedConfirm"),
+    cancel: t("common.cancel"),
+    color: "primary"
+  });
   const getRedirectUrl = () => {
     if (searchParams.redirect) {
       return decodeURIComponent(searchParams.redirect);
@@ -833,13 +1258,13 @@ function PaymentForm({
           size: "large",
           className: "cko-submit-button",
           onClick: () => {
-            if (state.submitting || state.paying) {
+            if (state.submitting || state.paying || !canPay) {
               return;
             }
             onAction();
           },
           fullWidth: true,
-          disabled: state.stripePaying || !quantityInventoryStatus || !payable,
+          disabled: state.stripePaying || !quantityInventoryStatus || !canPay,
           children: [(state.submitting || state.paying) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
             size: 16,
             sx: {
@@ -873,7 +1298,13 @@ function PaymentForm({
           }),
           title: t("payment.customer.pastDue.alert.title")
         }
-      }), FastCheckoutConfirmDialog, CreditInsufficientDialog]
+      }), FastCheckoutConfirmDialog, CreditInsufficientDialog, PriceUpdatedDialog, state.priceChangeConfirm?.open && /* @__PURE__ */(0, _jsxRuntime.jsx)(_priceChangeConfirm.default, {
+        open: true,
+        changePercent: state.priceChangeConfirm.changePercent,
+        onConfirm: handlePriceChangeConfirm,
+        onCancel: handlePriceChangeCancel,
+        loading: state.submitting
+      })]
     });
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -915,10 +1346,29 @@ function PaymentForm({
                 }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_currency.default, {
                   value: field.value,
                   currencies,
-                  onChange: (id, methodId) => {
+                  onChange: async (id, methodId) => {
+                    const oldCurrencyId = field.value;
                     field.onChange(id);
                     setValue("payment_method", methodId);
                     (0, _currency2.saveCurrencyPreference)(id, session?.user?.did);
+                    if (oldCurrencyId && oldCurrencyId !== id) {
+                      try {
+                        const {
+                          data
+                        } = await _api.default.put(`/api/checkout-sessions/${checkoutSession.id}/switch-currency`, {
+                          currency_id: id,
+                          payment_method_id: methodId
+                        });
+                        if (data.currency_changed && onQuoteUpdated) {
+                          onQuoteUpdated({
+                            checkoutSession: data,
+                            quotes: data.quotes
+                          });
+                        }
+                      } catch (err) {
+                        console.error("Failed to switch currency:", err);
+                      }
+                    }
                   }
                 })
               })
@@ -1096,7 +1546,7 @@ function PaymentForm({
             },
             fullWidth: true,
             loading: state.submitting || state.paying,
-            disabled: state.stripePaying || !quantityInventoryStatus || !payable,
+            disabled: state.stripePaying || !quantityInventoryStatus || !canPay,
             children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
           })
         }), ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -1158,6 +1608,12 @@ function PaymentForm({
         }),
         title: t("payment.customer.pastDue.alert.title")
       }
-    }), FastCheckoutConfirmDialog, CreditInsufficientDialog]
+    }), FastCheckoutConfirmDialog, CreditInsufficientDialog, PriceUpdatedDialog, state.priceChangeConfirm?.open && /* @__PURE__ */(0, _jsxRuntime.jsx)(_priceChangeConfirm.default, {
+      open: true,
+      changePercent: state.priceChangeConfirm.changePercent,
+      onConfirm: handlePriceChangeConfirm,
+      onCancel: handlePriceChangeCancel,
+      loading: state.submitting
+    })]
   });
 }

package/lib/payment/index.d.ts

@@ -6,7 +6,7 @@ type Props = CheckoutContext & CheckoutCallbacks & {
     error?: any;
     showCheckoutSummary?: boolean;
 };
-export default function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, }: Props): import("react").JSX.Element;
+export default function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, quotes, rateUnavailable, rateError, }: Props): import("react").JSX.Element;
 type RootProps = {
     mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
 } & BoxProps;