@blocklet/payment-react 1.24.4 → 1.25.0

package/src/payment/form/index.tsx

@@ -7,6 +7,7 @@ import { FlagEmoji } from 'react-international-phone';
 import Toast from '@arcblock/ux/lib/Toast';
 import type {
   TCheckoutSession,
+  TCheckoutSessionExpanded,
   TCustomer,
   TLineItemExpanded,
   TPaymentIntent,
@@ -20,13 +21,14 @@ import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { joinURL } from 'ufo';
 import { dispatch } from 'use-bus';
 import isEmail from 'validator/es/lib/isEmail';
-import { fromUnitToToken } from '@ocap/util';
+import { BN, fromTokenToUnit, fromUnitToToken } from '@ocap/util';
 import DID from '@arcblock/ux/lib/DID';
 import { PayFailedEvent } from '@arcblock/ux/lib/withTracker/action/pay';
 
 import isEmpty from 'lodash/isEmpty';
 import { HelpOutline, OpenInNew } from '@mui/icons-material';
 import { ReactGA } from '@arcblock/ux/lib/withTracker';
+import trim from 'lodash/trim';
 import FormInput from '../../components/input';
 import FormLabel from '../../components/label';
 import { usePaymentContext } from '../../contexts/payment';
@@ -41,6 +43,12 @@ import {
   getStatementDescriptor,
   getTokenBalanceLink,
   isCrossOrigin,
+  getCheckoutAmount,
+  formatNumber,
+  formatUsdAmount,
+  getUsdAmountFromBaseAmount,
+  getUsdAmountFromTokenUnits,
+  formatAmount,
 } from '../../libs/util';
 import type { CheckoutCallbacks, CheckoutContext } from '../../types';
 import AddressForm from './address';
@@ -53,8 +61,14 @@ import LoadingButton from '../../components/loading-button';
 import OverdueInvoicePayment from '../../components/over-due-invoice-payment';
 import { saveCurrencyPreference } from '../../libs/currency';
 import ConfirmDialog from '../../components/confirm';
+import PriceChangeConfirm from '../../components/price-change-confirm';
 import { getFieldValidation, validatePostalCode } from '../../libs/validator';
 
+// Generate unique idempotency key for submit (Final Freeze Architecture)
+const generateIdempotencyKey = (sessionId: string, currencyId: string): string => {
+  return `${sessionId}-${currencyId}-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`;
+};
+
 export const waitForCheckoutComplete = async (sessionId: string) => {
   let result: CheckoutContext;
 
@@ -91,6 +105,10 @@ export const hasDidWallet = (user: any) => {
 
 type PageData = CheckoutContext &
   CheckoutCallbacks & {
+    onQuoteUpdated?: (
+      data: Pick<CheckoutContext, 'checkoutSession' | 'quotes' | 'rateUnavailable' | 'rateError'>
+    ) => void;
+    onPaymentIntentUpdate?: (intent: TPaymentIntent | null) => void;
     onlyShowBtn?: boolean;
     isDonation?: boolean;
   };
@@ -178,6 +196,15 @@ const setUserFormValues = (
   return updatedFields;
 };
 
+// ✅ No longer need to collect quotes from frontend - backend auto-finds them
+// const collectQuotes = (lineItems: TLineItemExpanded[]) =>
+//   lineItems
+//     ?.filter((item) => (item.price as any)?.pricing_type === 'dynamic' && (item as any)?.quote_id)
+//     .map((item) => ({
+//       price_id: item.price_id,
+//       quote_id: (item as any).quote_id,
+//     })) || [];
+
 // FIXME: https://stripe.com/docs/elements/address-element
 // TODO: https://country-regions.github.io/react-country-region-selector/
 // https://www.npmjs.com/package/postal-codes-js
@@ -191,10 +218,13 @@ export default function PaymentForm({
   customer,
   onPaid,
   onError,
+  onQuoteUpdated = undefined,
+  onPaymentIntentUpdate = undefined,
   // mode,
   action,
   onlyShowBtn = false,
   isDonation = false,
+  rateUnavailable = false,
 }: PageData) {
   // const theme = useTheme();
   const { t, locale } = useLocaleContext();
@@ -240,6 +270,14 @@ export default function PaymentForm({
       open: boolean;
     } | null;
     showEditForm: boolean;
+    // Final Freeze: Price change confirmation state
+    priceChangeConfirm: {
+      open: boolean;
+      previewRate?: string;
+      submitRate?: string;
+      changePercent: number;
+      formData?: any;
+    } | null;
   }>({
     submitting: false,
     paying: false,
@@ -252,6 +290,7 @@ export default function PaymentForm({
     fastCheckoutInfo: null,
     creditInsufficientInfo: null,
     showEditForm: false,
+    priceChangeConfirm: null,
   });
 
   const currencies = flattenPaymentMethods(paymentMethods);
@@ -388,8 +427,192 @@ export default function PaymentForm({
   const method = paymentMethods.find((x) => x.id === paymentMethod) as TPaymentMethodExpanded;
   const paymentCurrency = currencies.find((x) => x.id === paymentCurrencyId);
   const showStake = method.type === 'arcblock' && !checkoutSession.subscription_data?.no_stake;
+  const hasDynamicPricing = useMemo(
+    () =>
+      (checkoutSession.line_items || []).some((item: any) => {
+        const price = item.upsell_price || item.price;
+        return price && (price as any)?.pricing_type === 'dynamic';
+      }),
+    [checkoutSession.line_items]
+  );
+  const rateUnavailableForDynamic = hasDynamicPricing && rateUnavailable;
+  const canPay = payable && !rateUnavailableForDynamic;
 
   const isDonationMode = checkoutSession?.submit_type === 'donate' && isDonation;
+  const [priceUpdateInfo, setPriceUpdateInfo] = useSetState<{
+    open: boolean;
+    total: string;
+    usd: string | null;
+    hasQuotes: boolean;
+    baseCurrency: string;
+    oldTotal: string;
+    reason: 'rateChanged' | 'recalculated';
+  }>({
+    open: false,
+    total: '',
+    usd: null,
+    hasQuotes: false,
+    baseCurrency: 'USD',
+    oldTotal: '',
+    reason: 'recalculated',
+  });
+  // lockExpiredInfo state removed - now auto-refreshes instead
+
+  const normalizeExchangeRate = useMemoizedFn((rate?: string | null): string | null => {
+    if (!rate) {
+      return null;
+    }
+    const value = Number(rate);
+    if (!Number.isFinite(value)) {
+      return null;
+    }
+    return value.toFixed(8);
+  });
+
+  const getExchangeRateFromSession = useMemoizedFn((sessionData?: TCheckoutSession | null): string | null => {
+    if (!sessionData?.line_items?.length) {
+      return null;
+    }
+    for (const item of sessionData.line_items as TLineItemExpanded[]) {
+      const rate = (item as any)?.exchange_rate;
+      if (rate) {
+        return rate;
+      }
+    }
+    return null;
+  });
+
+  const quoteAutoRetryRef = useRef(false);
+  const lastRetryKeyRef = useRef<string>('');
+  const buildRetryKey = useMemoizedFn((sessionData?: TCheckoutSession | null) => {
+    if (!sessionData?.line_items?.length) {
+      return '';
+    }
+    return (sessionData.line_items as TLineItemExpanded[])
+      .map((item) => {
+        const priceId = item.price_id || item.price?.id || '';
+        const quoteId = (item as any)?.quote_id || '';
+        const quotedAmount = (item as any)?.quoted_amount || '';
+        const exchangeRate = (item as any)?.exchange_rate || '';
+        return `${priceId}:${quoteId}:${quotedAmount}:${exchangeRate}`;
+      })
+      .join('|');
+  });
+
+  const buildPriceUpdateSummary = useMemoizedFn((sessionData: TCheckoutSession) => {
+    if (!paymentCurrency) {
+      return { total: '', usd: null, hasQuotes: false, baseCurrency: 'USD', totalUnit: null as BN | null };
+    }
+    const lineItems = (sessionData.line_items || []) as TLineItemExpanded[];
+    let baseCurrency = 'USD';
+    for (const item of lineItems) {
+      const price = item.upsell_price || item.price;
+      const base = (price as any)?.base_currency;
+      if (base) {
+        baseCurrency = base;
+        break;
+      }
+    }
+    const hasQuotes = lineItems.some((item) => (item as any)?.quoted_amount && (item as any)?.exchange_rate);
+    if (!hasQuotes) {
+      return { total: '', usd: null, hasQuotes: false, baseCurrency, totalUnit: null as BN | null };
+    }
+    let trialInDays = Number(sessionData?.subscription_data?.trial_period_days || 0);
+    const trialCurrencyIds = (sessionData?.subscription_data?.trial_currency || '')
+      .split(',')
+      .map(trim)
+      .filter(Boolean);
+    if (trialCurrencyIds.length > 0 && paymentCurrencyId && trialCurrencyIds.includes(paymentCurrencyId) === false) {
+      trialInDays = 0;
+    }
+    const { total } = getCheckoutAmount(lineItems, paymentCurrency, trialInDays > 0);
+    const discountAmount = new BN(sessionData.total_details?.amount_discount || '0');
+    const totalUnit = new BN(total).sub(discountAmount);
+    const normalizedTotalUnit = totalUnit.isNeg() ? new BN(0) : totalUnit;
+    const totalDisplay = `${formatNumber(
+      fromUnitToToken(normalizedTotalUnit.toString(), paymentCurrency.decimal),
+      6
+    )} ${paymentCurrency.symbol}`;
+
+    const itemUsdReferences = lineItems.map((item) => {
+      const price = item.upsell_price || item.price;
+      const baseAmount = (price as any)?.base_amount;
+      const hasBaseAmount = baseAmount !== undefined && baseAmount !== null;
+      if (hasBaseAmount) {
+        return getUsdAmountFromBaseAmount(baseAmount, item.quantity || 0);
+      }
+      const exchangeRate = (item as any)?.exchange_rate;
+      const quotedAmount = (item as any)?.quoted_amount;
+      if (!exchangeRate || !quotedAmount) {
+        return null;
+      }
+      return getUsdAmountFromTokenUnits(new BN(quotedAmount), paymentCurrency.decimal, exchangeRate);
+    });
+    const usdValues = itemUsdReferences.filter((value): value is string => Boolean(value));
+    if (!usdValues.length) {
+      return { total: totalDisplay, usd: null, hasQuotes, baseCurrency, totalUnit: normalizedTotalUnit };
+    }
+    const sumUnit = usdValues.reduce((acc, value) => acc.add(new BN(fromTokenToUnit(value, 8))), new BN(0));
+    const totalUsdReference = fromUnitToToken(sumUnit.toString(), 8);
+    return {
+      total: totalDisplay,
+      usd: formatUsdAmount(totalUsdReference, locale),
+      hasQuotes,
+      baseCurrency,
+      totalUnit: normalizedTotalUnit,
+    };
+  });
+
+  const compareTotals = useMemoizedFn((prevSession: TCheckoutSession, nextSession: TCheckoutSession) => {
+    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 BN(1);
+    return { changed: diff.gt(epsilon), prev, next };
+  });
+
+  const applyQuoteUpdate = useMemoizedFn(
+    (
+      payload: { checkoutSession: TCheckoutSession; quotes?: any; rateUnavailable?: boolean; rateError?: string },
+      options: { forceConfirm?: boolean; reason?: 'rateChanged' | 'recalculated' } = {}
+    ) => {
+      if (!payload?.checkoutSession) {
+        return;
+      }
+      onQuoteUpdated?.({
+        checkoutSession: payload.checkoutSession as TCheckoutSessionExpanded,
+        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: any) => {
     if (!values) {
@@ -496,6 +719,17 @@ export default function PaymentForm({
 
   const showForm = session?.user ? state.showEditForm : false;
 
+  useEffect(() => {
+    if (!quoteAutoRetryRef.current) {
+      return;
+    }
+    if (state.submitting || state.paying) {
+      return;
+    }
+    quoteAutoRetryRef.current = false;
+    onAction();
+  }, [state.submitting, state.paying]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const handleConnected = async () => {
     if (processingRef.current) {
       return;
@@ -560,7 +794,11 @@ export default function PaymentForm({
     });
 
     try {
-      const result = await api.post(`/api/checkout-sessions/${checkoutSession.id}/fast-checkout-confirm`);
+      // ✅ No longer need to send quotes - backend auto-finds them
+      const result = await api.post(`/api/checkout-sessions/${checkoutSession.id}/fast-checkout-confirm`, {});
+      if (result.data.paymentIntent) {
+        onPaymentIntentUpdate?.(result.data.paymentIntent);
+      }
       if (result.data.fastPaid) {
         setState({
           fastCheckoutInfo: null,
@@ -575,8 +813,56 @@ export default function PaymentForm({
         });
         openConnect();
       }
-    } catch (err) {
+    } catch (err: unknown) {
       console.error(err);
+      const errorCode = (err as any)?.response?.data?.code;
+      // Auto-refresh for quote-related errors (including lock expired)
+      if (
+        [
+          'QUOTE_LOCK_EXPIRED',
+          'QUOTE_AMOUNT_MISMATCH',
+          'QUOTE_EXPIRED_OR_USED',
+          'QUOTE_NOT_FOUND',
+          'QUOTE_REQUIRED',
+        ].includes(errorCode)
+      ) {
+        try {
+          const { data: refreshed } = await api.get(`/api/checkout-sessions/retrieve/${checkoutSession.id}`, {
+            params: { forceRefresh: '1' },
+          });
+          if (refreshed?.checkoutSession) {
+            applyQuoteUpdate(refreshed, { reason: 'rateChanged' });
+            Toast.info(t('payment.checkout.quote.updated.pleaseRetry') || 'Price updated, please resubmit');
+          }
+        } catch (refreshError) {
+          console.error(refreshError);
+          Toast.error(formatError(refreshError));
+        } finally {
+          setState({ fastCheckoutInfo: null });
+        }
+        return;
+      }
+      if (errorCode === 'QUOTE_UPDATED') {
+        const payload = (err as any)?.response?.data;
+        if (payload?.checkoutSession) {
+          applyQuoteUpdate(payload);
+        }
+        setState({ fastCheckoutInfo: null });
+        return;
+      }
+      if (errorCode === 'RATE_UNAVAILABLE') {
+        const payload = (err as any)?.response?.data;
+        if (payload?.checkoutSession) {
+          onQuoteUpdated?.({
+            checkoutSession: payload.checkoutSession as TCheckoutSessionExpanded,
+            quotes: payload.quotes,
+            rateUnavailable: payload.rateUnavailable,
+            rateError: payload.rateError,
+          });
+        }
+        setState({ fastCheckoutInfo: null });
+        return;
+      }
       Toast.error(formatError(err));
       setState({
         fastCheckoutInfo: null,
@@ -592,6 +878,29 @@ export default function PaymentForm({
     setState({ creditInsufficientInfo: null });
   };
 
+  const handlePriceUpdateConfirm = () => {
+    setPriceUpdateInfo({ open: false });
+    quoteAutoRetryRef.current = true;
+  };
+
+  const handlePriceUpdateCancel = () => {
+    setPriceUpdateInfo({ open: false });
+  };
+
+  // Final Freeze: Handle price change confirmation (PRICE_CHANGED error)
+  const handlePriceChangeConfirm = () => {
+    const formData = state.priceChangeConfirm?.formData;
+    setState({ priceChangeConfirm: null });
+    if (formData) {
+      // Retry submit with price_confirmed flag
+      onFormSubmit(formData);
+    }
+  };
+
+  const handlePriceChangeCancel = () => {
+    setState({ priceChangeConfirm: null });
+  };
+
   const openConnect = () => {
     try {
       if (!['arcblock', 'ethereum', 'base'].includes(method.type)) {
@@ -632,6 +941,10 @@ export default function PaymentForm({
   };
 
   const onFormSubmit = async (data: any) => {
+    if (state.submitting) {
+      return;
+    }
+
     const userInfo = session.user;
 
     if (!userInfo.sourceAppPid) {
@@ -644,13 +957,36 @@ export default function PaymentForm({
       }
     }
 
+    // ✅ No longer need to collect or validate quotes - backend auto-finds them
+    // const quotes = collectQuotes(checkoutSession.line_items as TLineItemExpanded[]);
+    // if (
+    //   (checkoutSession.line_items || []).some((item: any) => item.price?.pricing_type === 'dynamic') &&
+    //   quotes.length === 0
+    // ) {
+    //   Toast.error(t('payment.checkout.quote.expired'));
+    //   return;
+    // }
+
     setState({ submitting: true });
     try {
       let result;
+      // Final Freeze: Add idempotency_key and preview_rate for dynamic pricing
+      const previewRate =
+        checkoutSession.line_items?.find((item: TLineItemExpanded) => (item as any)?.exchange_rate)?.exchange_rate ||
+        undefined;
+
+      const payload = {
+        ...data,
+        // Final Freeze: Include these for new quote creation at submit
+        idempotency_key: generateIdempotencyKey(checkoutSession.id, paymentCurrency?.id || ''),
+        preview_rate: (previewRate as unknown as string) || undefined,
+        price_confirmed: state.priceChangeConfirm?.formData ? true : undefined,
+      };
+
       if (isDonationMode) {
-        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/donate-submit`, data);
+        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/donate-submit`, payload);
       } else {
-        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, payload);
       }
       setState({
         paymentIntent: result.data.paymentIntent,
@@ -659,8 +995,34 @@ export default 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.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;
+        }
+
         // 优先判断 credit 支付
         if (paymentCurrency?.type === 'credit') {
           if (result.data.creditSufficient === true) {
@@ -715,15 +1077,109 @@ export default function PaymentForm({
       console.error(err);
       let shouldToast = true;
 
-      if (err.response?.data?.code) {
-        dispatch(`error.${err.response?.data?.code}`);
+      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)
+        ) {
+          dispatch(`error.${errorCode}`);
+        }
+
+        // Auto-refresh for all quote-related errors (no modal dialog)
+        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.get(`/api/checkout-sessions/retrieve/${checkoutSession.id}`, {
+              params: { forceRefresh: '1' },
+            });
+            if (refreshed?.checkoutSession) {
+              applyQuoteUpdate(refreshed, { reason: 'rateChanged' });
+              Toast.info(t('payment.checkout.quote.updated.pleaseRetry') || 'Price updated, please resubmit');
+            }
+          } catch (refreshError) {
+            console.error(refreshError);
+            Toast.error(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,
+            });
+          }
+        }
+
+        // Final Freeze: Handle new error codes
+        if (errorCode === 'PRICE_UNAVAILABLE') {
+          shouldToast = false;
+          Toast.error(
+            t('payment.checkout.priceChange.unavailable', {
+              fallback: 'Unable to fetch exchange rate. Please try again later.',
+            })
+          );
+        }
 
-        if (err.response?.data?.code === 'UNIFIED_APP_REQUIRED') {
+        if (errorCode === 'PRICE_UNSTABLE') {
+          shouldToast = false;
+          Toast.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;
+          // Show price change confirmation dialog
+          setState({
+            priceChangeConfirm: {
+              open: true,
+              changePercent: errorData?.change_percent || 0,
+              formData: data, // Save form data for retry
+            },
+          });
+        }
+
+        if (errorCode === 'UNIFIED_APP_REQUIRED') {
           shouldToast = false;
           Toast.error(t('payment.checkout.vendor.accountRequired'));
         }
 
-        if (err.response.data.code === 'CUSTOMER_LIMITED') {
+        if (errorCode === 'CUSTOMER_LIMITED') {
           shouldToast = false;
           setState({ customerLimited: true });
         }
@@ -744,7 +1200,7 @@ export default function PaymentForm({
   };
 
   const onAction = () => {
-    if (state.submitting || state.paying) {
+    if (state.submitting || state.paying || !canPay) {
       return;
     }
     if (errorRef.current && !isEmpty(errors) && isMobile) {
@@ -769,6 +1225,8 @@ export default function PaymentForm({
     }
   };
 
+  // Lock expired handlers removed - now auto-refreshes instead
+
   const onStripeConfirm = async () => {
     setState({ stripePaying: false, paying: true });
     await handleConnected();
@@ -793,7 +1251,7 @@ export default function PaymentForm({
         !state.paying &&
         !state.stripePaying &&
         quantityInventoryStatus &&
-        payable
+        canPay
       ) {
         onAction();
       }
@@ -803,7 +1261,7 @@ export default function PaymentForm({
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, canPay]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const balanceLink = getTokenBalanceLink(method, state.fastCheckoutInfo?.payer || '');
 
@@ -820,7 +1278,7 @@ export default function PaymentForm({
         state.fastCheckoutInfo.sourceType === 'credit' ? (
           <Typography>
             {t('payment.checkout.fastPay.credit.meteringSubscriptionMessage', {
-              available: `${fromUnitToToken(state.fastCheckoutInfo?.balance || '0', paymentCurrency?.decimal || 18).toString()} ${paymentCurrency?.symbol}`,
+              available: `${formatAmount(state.fastCheckoutInfo?.balance || '0', paymentCurrency?.decimal || 18)} ${paymentCurrency?.symbol}`,
             })}
           </Typography>
         ) : (
@@ -873,7 +1331,7 @@ export default function PaymentForm({
                   {t('payment.checkout.fastPay.amount')}
                 </Typography>
                 <Typography>
-                  {fromUnitToToken(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString()}{' '}
+                  {formatAmount(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18)}{' '}
                   {paymentCurrency?.symbol}
                 </Typography>
               </Stack>
@@ -896,6 +1354,47 @@ export default function PaymentForm({
     />
   );
 
+  const PriceUpdatedDialog = priceUpdateInfo.open && (
+    <ConfirmDialog
+      onConfirm={handlePriceUpdateConfirm}
+      onCancel={handlePriceUpdateCancel}
+      title={t('payment.checkout.quote.priceUpdatedTitle')}
+      message={
+        <Stack spacing={1}>
+          <Typography>
+            {t(
+              priceUpdateInfo.reason === 'rateChanged'
+                ? 'payment.checkout.quote.priceUpdatedDescriptionRate'
+                : 'payment.checkout.quote.priceUpdatedDescriptionRecalc'
+            )}
+          </Typography>
+          {priceUpdateInfo.hasQuotes && (
+            <Stack spacing={0.25}>
+              <Typography sx={{ color: 'text.secondary', fontSize: '0.7875rem' }}>
+                {t('payment.checkout.quote.priceUpdatedNewTotalLabel')}
+              </Typography>
+              <Typography sx={{ fontWeight: 600 }}>{priceUpdateInfo.total}</Typography>
+              {priceUpdateInfo.usd && (
+                <Typography sx={{ color: 'text.secondary' }}>
+                  ≈ {priceUpdateInfo.usd} {priceUpdateInfo.baseCurrency}
+                </Typography>
+              )}
+              {priceUpdateInfo.oldTotal && (
+                <Typography sx={{ color: 'text.secondary', fontSize: '0.75rem' }}>
+                  {t('payment.checkout.quote.priceUpdatedOldTotal', { total: priceUpdateInfo.oldTotal })}
+                </Typography>
+              )}
+            </Stack>
+          )}
+        </Stack>
+      }
+      confirm={t('payment.checkout.quote.priceUpdatedConfirm')}
+      cancel={t('common.cancel')}
+      color="primary"
+    />
+  );
+  // LockExpiredDialog removed - now auto-refreshes instead
+
   const getRedirectUrl = () => {
     if (searchParams.redirect) {
       return decodeURIComponent(searchParams.redirect);
@@ -919,13 +1418,13 @@ export default function PaymentForm({
             size="large"
             className="cko-submit-button"
             onClick={() => {
-              if (state.submitting || state.paying) {
+              if (state.submitting || state.paying || !canPay) {
                 return;
               }
               onAction();
             }}
             fullWidth
-            disabled={state.stripePaying || !quantityInventoryStatus || !payable}>
+            disabled={state.stripePaying || !quantityInventoryStatus || !canPay}>
             {(state.submitting || state.paying) && (
               <CircularProgress size={16} sx={{ mr: 0.5, color: 'primary.contrastText' }} />
             )}
@@ -962,6 +1461,17 @@ export default function PaymentForm({
         )}
         {FastCheckoutConfirmDialog}
         {CreditInsufficientDialog}
+        {PriceUpdatedDialog}
+        {/* Final Freeze: Price change confirmation dialog */}
+        {state.priceChangeConfirm?.open && (
+          <PriceChangeConfirm
+            open
+            changePercent={state.priceChangeConfirm.changePercent}
+            onConfirm={handlePriceChangeConfirm}
+            onCancel={handlePriceChangeCancel}
+            loading={state.submitting}
+          />
+        )}
       </>
     );
   }
@@ -998,10 +1508,31 @@ export default function PaymentForm({
                     <CurrencySelector
                       value={field.value}
                       currencies={currencies}
-                      onChange={(id: string, methodId: string) => {
+                      onChange={async (id: string, methodId: string) => {
+                        const oldCurrencyId = field.value;
                         field.onChange(id);
                         setValue('payment_method', methodId);
                         saveCurrencyPreference(id, session?.user?.did);
+
+                        // Call API to switch currency and clear quote-related fields if currency changed
+                        // This is essential because quotes are currency-specific (e.g., TBA quote with 18 decimals
+                        // cannot be used for USD with 2 decimals)
+                        if (oldCurrencyId && oldCurrencyId !== id) {
+                          try {
+                            const { data } = await api.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);
+                          }
+                        }
                       }}
                     />
                   )}
@@ -1154,11 +1685,10 @@ export default function PaymentForm({
               }}
               fullWidth
               loading={state.submitting || state.paying}
-              disabled={state.stripePaying || !quantityInventoryStatus || !payable}>
+              disabled={state.stripePaying || !quantityInventoryStatus || !canPay}>
               {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}
             </LoadingButton>
           </Box>
-
           {['subscription', 'setup'].includes(checkoutSession.mode) && (
             <Typography sx={{ mt: 2.5, color: 'text.lighter', fontSize: '0.7875rem', lineHeight: '0.9625rem' }}>
               {showStake
@@ -1205,6 +1735,18 @@ export default function PaymentForm({
       )}
       {FastCheckoutConfirmDialog}
       {CreditInsufficientDialog}
+      {PriceUpdatedDialog}
+      {/* Final Freeze: Price change confirmation dialog */}
+      {state.priceChangeConfirm?.open && (
+        <PriceChangeConfirm
+          open
+          changePercent={state.priceChangeConfirm.changePercent}
+          onConfirm={handlePriceChangeConfirm}
+          onCancel={handlePriceChangeCancel}
+          loading={state.submitting}
+        />
+      )}
+      {/* LockExpiredDialog removed - now auto-refreshes instead */}
     </>
   );
 }