@blocklet/payment-react 1.24.3 → 1.25.0

package/src/payment/index.tsx

@@ -9,6 +9,7 @@ import type {
   TCustomer,
   TPaymentCurrency,
   TPaymentMethod,
+  TPaymentIntent,
   TPaymentMethodExpanded,
 } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
@@ -16,7 +17,7 @@ import { Box, Fade, Stack, type BoxProps } from '@mui/material';
 import { styled } from '@mui/system';
 import { fromTokenToUnit } from '@ocap/util';
 import { useSetState } from 'ahooks';
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import trim from 'lodash/trim';
 import type { LiteralUnion } from 'type-fest';
@@ -61,11 +62,54 @@ function PaymentInner({
   onChange,
   action,
   showCheckoutSummary = true,
+  quotes,
+  rateUnavailable,
+  rateError,
 }: MainProps) {
   const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
   const { isMobile } = useMobile();
-  const [state, setState] = useSetState<{ checkoutSession: TCheckoutSessionExpanded }>({ checkoutSession });
+  const [state, setState] = useSetState<{
+    checkoutSession: TCheckoutSessionExpanded;
+    quotes?: any;
+    rateUnavailable?: boolean;
+    rateError?: string;
+    paymentIntent?: TPaymentIntent | null;
+    liveRateInfo?: {
+      rate?: string;
+      provider_id?: string;
+      provider_name?: string;
+      base_currency?: string;
+      timestamp_ms?: number;
+      volatility_threshold?: number;
+    };
+    liveQuoteSnapshot?: {
+      id: string;
+      quoted_amount: string;
+      exchange_rate: string;
+      expires_at: number;
+      rate_timestamp_ms?: number | null;
+      renewed?: boolean;
+    };
+    liveRateUnavailable?: boolean;
+    liveRateError?: string;
+    isRateLoading?: boolean;
+  }>({
+    checkoutSession,
+    quotes,
+    rateUnavailable,
+    rateError,
+    paymentIntent,
+    liveRateInfo: undefined,
+    liveQuoteSnapshot: undefined,
+    liveRateUnavailable: false,
+    liveRateError: undefined,
+    isRateLoading: false,
+  });
+  // Track if currency is being switched (vs just rate refresh)
+  // Only show skeleton during currency switch, not during rate refresh
+  const isCurrencySwitchRef = useRef(false);
+  const prevCurrencyIdRef = useRef<string | null>(null);
   const query = getQueryParams(window.location.href);
 
   const availableCurrencyIds = useMemo(() => {
@@ -172,16 +216,227 @@ function PaymentInner({
     (findCurrency(paymentMethods as TPaymentMethodExpanded[], currencyId as string) as TPaymentCurrency) ||
     settings.baseCurrency;
   const method = paymentMethods.find((x: any) => x.id === currency.payment_method_id) as TPaymentMethod;
+  const hasDynamicPricing = useMemo(
+    () =>
+      state.checkoutSession.line_items.some(
+        (item: any) => (item.upsell_price || item.price)?.pricing_type === 'dynamic'
+      ),
+    [state.checkoutSession.line_items]
+  );
+  // Stripe/USD payments don't need exchange rate - base_amount is already in USD
+  const isStripePayment = method?.type === 'stripe';
+  const needsExchangeRate = hasDynamicPricing && !isStripePayment;
+  const effectiveRateUnavailable = needsExchangeRate && (state.rateUnavailable || state.liveRateUnavailable);
+  // Don't expose technical errors to UI - only log them for debugging
+  if (state.liveRateError || state.rateError) {
+    console.error('[Rate Error]', { liveRateError: state.liveRateError, rateError: state.rateError });
+  }
+
+  // Manual refresh function - exposed for retry button
+  const refreshRateRef = useRef<(() => Promise<void>) | null>(null);
+  useEffect(() => {
+    if (!currencyId) {
+      return;
+    }
+    // Detect currency switch (not initial load)
+    const isCurrencySwitch = prevCurrencyIdRef.current !== null && prevCurrencyIdRef.current !== currencyId;
+    prevCurrencyIdRef.current = currencyId;
+
+    if (isCurrencySwitch) {
+      isCurrencySwitchRef.current = true;
+      // Show skeleton during currency switch
+      setState({ isRateLoading: true });
+    }
+
+    if (needsExchangeRate) {
+      setState({
+        liveRateInfo: undefined,
+        liveQuoteSnapshot: undefined,
+        liveRateUnavailable: false,
+        liveRateError: undefined,
+      });
+      liveRateRefreshRef.current = false;
+      refreshRateRef.current?.();
+    } else {
+      setState({
+        liveRateInfo: undefined,
+        liveQuoteSnapshot: undefined,
+        liveRateUnavailable: false,
+        liveRateError: undefined,
+      });
+      liveRateRefreshRef.current = false;
+      // For Stripe payments (no exchange rate needed), clear loading after promotion recalc
+      // If no discounts, clear immediately
+      if (isCurrencySwitch && !(state.checkoutSession as any)?.discounts?.length) {
+        setState({ isRateLoading: false });
+        isCurrencySwitchRef.current = false;
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currencyId, needsExchangeRate]);
+
+  useEffect(() => {
+    // Skip exchange rate fetching for Stripe payments (USD base_amount is used directly)
+    if (!state.checkoutSession?.id || completed || !needsExchangeRate) {
+      return undefined;
+    }
+    let cancelled = false;
+    let consecutiveFailures = 0;
+    const baseInterval = 30000;
+    const MAX_INTERVAL = 5 * 60 * 1000;
+    const QUICK_RETRY_DELAY = 1000; // 1s quick retry
+    const MAX_QUICK_RETRIES = 2; // Quick retry 2 times before exponential backoff
+    let currentInterval = baseInterval;
+    let timer: ReturnType<typeof setInterval> | null = null;
+
+    const scheduleNext = () => {
+      if (timer) {
+        clearInterval(timer);
+      }
+      timer = window.setInterval(() => {
+        fetchRate(false);
+      }, currentInterval) as unknown as ReturnType<typeof setInterval>;
+    };
+
+    const fetchRate = async (isManualRetry = false) => {
+      if (document.hidden && !isManualRetry) {
+        return;
+      }
+
+      if (typeof navigator !== 'undefined' && !navigator.onLine) {
+        return;
+      }
+
+      if (liveRateRefreshRef.current) {
+        return;
+      }
+      liveRateRefreshRef.current = true;
+
+      // Quick retry logic: try up to MAX_QUICK_RETRIES times with short delays
+      let quickRetryCount = 0;
+      let lastError: any = null;
+
+      try {
+        // eslint-disable-next-line no-await-in-loop
+        while (quickRetryCount <= MAX_QUICK_RETRIES) {
+          try {
+            // eslint-disable-next-line no-await-in-loop
+            const { data } = await api.get(`/api/checkout-sessions/${state.checkoutSession.id}/exchange-rate`, {
+              params: currencyId ? { currency_id: currencyId } : undefined,
+            });
+            if (cancelled) {
+              return;
+            }
+            consecutiveFailures = 0;
+            currentInterval = baseInterval;
+            // Final Freeze: Only store rate info, no quote_snapshot
+            setState({
+              liveRateInfo: data,
+              liveQuoteSnapshot: undefined, // Quote is created at submit time only
+              liveRateUnavailable: false,
+              liveRateError: undefined,
+            });
+            // Clear loading state after rate fetch - but only if this was a currency switch
+            // and no discounts need recalculation (recalculatePromotion will clear it otherwise)
+            if (isCurrencySwitchRef.current && !(state.checkoutSession as any)?.discounts?.length) {
+              setState({ isRateLoading: false });
+              isCurrencySwitchRef.current = false;
+            }
+            scheduleNext();
+            return;
+          } catch (err: any) {
+            lastError = err;
+            quickRetryCount++;
+            if (quickRetryCount <= MAX_QUICK_RETRIES && !cancelled) {
+              // eslint-disable-next-line no-console
+              console.log(
+                `[Exchange Rate] Quick retry ${quickRetryCount}/${MAX_QUICK_RETRIES} after ${QUICK_RETRY_DELAY}ms`
+              );
+              // eslint-disable-next-line no-await-in-loop
+              await new Promise((resolve) => {
+                setTimeout(resolve, QUICK_RETRY_DELAY);
+              });
+            }
+          }
+        }
+
+        // All quick retries failed
+        if (cancelled) {
+          return;
+        }
+        consecutiveFailures++;
+        const technicalError = lastError?.response?.data?.error || formatError(lastError);
+        console.error('[Exchange Rate Fetch Error]', {
+          error: technicalError,
+          consecutiveFailures,
+          sessionId: state.checkoutSession?.id,
+          currencyId,
+        });
 
-  const recalculatePromotion = () => {
+        setState({
+          liveRateUnavailable: true,
+          liveRateError: undefined,
+        });
+
+        if (consecutiveFailures >= 3) {
+          console.warn('Exchange rate fetch failed multiple times', { consecutiveFailures, technicalError });
+        }
+
+        const nextInterval = Math.min(baseInterval * 2 ** (consecutiveFailures - 1), MAX_INTERVAL);
+        currentInterval = nextInterval;
+        scheduleNext();
+      } finally {
+        liveRateRefreshRef.current = false;
+      }
+    };
+
+    // Expose refresh function for manual retry
+    refreshRateRef.current = async () => {
+      liveRateRefreshRef.current = false; // Allow immediate retry
+      await fetchRate(true);
+    };
+
+    fetchRate(false);
+
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        fetchRate(false);
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      cancelled = true;
+      refreshRateRef.current = null;
+      if (timer) {
+        clearInterval(timer);
+      }
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.checkoutSession?.id, currencyId, completed, needsExchangeRate]);
+
+  const recalculatePromotion = async () => {
     if ((state.checkoutSession as any)?.discounts?.length) {
-      api
-        .post(`/api/checkout-sessions/${state.checkoutSession.id}/recalculate-promotion`, {
+      try {
+        await api.post(`/api/checkout-sessions/${state.checkoutSession.id}/recalculate-promotion`, {
           currency_id: currencyId,
-        })
-        .then(() => {
-          onPromotionUpdate();
         });
+        // Wait for session update before clearing loading state
+        await onPromotionUpdate();
+      } catch (err) {
+        console.error('[recalculatePromotion] Error:', err);
+      } finally {
+        // Clear loading state after promotion recalculation AND session update complete
+        if (isCurrencySwitchRef.current) {
+          setState({ isRateLoading: false });
+          isCurrencySwitchRef.current = false;
+        }
+      }
+    } else if (isCurrencySwitchRef.current) {
+      // No discounts to recalculate - clear loading immediately
+      setState({ isRateLoading: false });
+      isCurrencySwitchRef.current = false;
     }
   };
 
@@ -239,12 +494,18 @@ function PaymentInner({
       const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/adjust-quantity`, {
         itemId,
         quantity,
+        currency_id: currencyId,
       });
       if (data.discounts?.length) {
         recalculatePromotion();
         return;
       }
-      setState({ checkoutSession: data });
+      setState({
+        checkoutSession: data,
+        ...(data.rateUnavailable !== undefined && { rateUnavailable: data.rateUnavailable }),
+        ...(data.rateError !== undefined && { rateError: data.rateError }),
+        ...(data.quotes !== undefined && { quotes: data.quotes }),
+      });
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
@@ -297,6 +558,52 @@ function PaymentInner({
     onPaid(result);
   };
 
+  const handleQuoteUpdated = (payload: {
+    checkoutSession: TCheckoutSessionExpanded;
+    quotes?: any;
+    rateUnavailable?: boolean;
+    rateError?: string;
+    paymentIntent?: TPaymentIntent | null;
+  }) => {
+    setState({
+      checkoutSession: payload.checkoutSession,
+      ...(payload.quotes !== undefined && { quotes: payload.quotes }),
+      ...(payload.rateUnavailable !== undefined && { rateUnavailable: payload.rateUnavailable }),
+      ...(payload.rateError !== undefined && { rateError: payload.rateError }),
+      ...(payload.paymentIntent !== undefined && { paymentIntent: payload.paymentIntent }),
+    });
+  };
+
+  const handlePaymentIntentUpdate = (intent: TPaymentIntent | null) => {
+    setState({ paymentIntent: intent });
+  };
+
+  const quoteRefreshRef = useRef(false);
+  const liveRateRefreshRef = useRef(false);
+  const handleQuoteExpired = async (forceRefresh = false) => {
+    if (quoteRefreshRef.current) {
+      return;
+    }
+    quoteRefreshRef.current = true;
+    try {
+      const { data } = await api.get(`/api/checkout-sessions/retrieve/${state.checkoutSession.id}`, {
+        params: forceRefresh ? { forceRefresh: '1' } : undefined,
+      });
+      handleQuoteUpdated({
+        checkoutSession: data.checkoutSession,
+        quotes: data.quotes,
+        rateUnavailable: data.rateUnavailable,
+        rateError: data.rateError,
+        paymentIntent: data.paymentIntent,
+      });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      quoteRefreshRef.current = false;
+    }
+  };
+
   // trialing can be limited with trial_currency, which can be a list
   let trialInDays = Number(state.checkoutSession?.subscription_data?.trial_period_days || 0);
   let trialEnd = Number(state.checkoutSession?.subscription_data?.trial_end || 0);
@@ -328,6 +635,7 @@ function PaymentInner({
                 )}
                 showStaking={showStaking(method, currency, !!state.checkoutSession.subscription_data?.no_stake)}
                 currency={currency}
+                paymentIntent={state.paymentIntent || paymentIntent}
                 onUpsell={onUpsell}
                 onDownsell={onDownsell}
                 onQuantityChange={onQuantityChange}
@@ -343,6 +651,28 @@ function PaymentInner({
                 onPromotionUpdate={onPromotionUpdate}
                 paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
                 showFeatures={showFeatures}
+                rateUnavailable={effectiveRateUnavailable}
+                isRateLoading={state.isRateLoading}
+                liveRate={state.liveRateInfo}
+                liveQuoteSnapshot={state.liveQuoteSnapshot}
+                onQuoteExpired={handleQuoteExpired}
+                onRefreshRate={refreshRateRef.current || undefined}
+                isStripePayment={isStripePayment}
+                onSlippageChange={async (slippageConfig) => {
+                  try {
+                    const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/slippage`, {
+                      slippage_config: slippageConfig,
+                    });
+                    handleQuoteUpdated({
+                      checkoutSession: data.checkoutSession || state.checkoutSession,
+                      quotes: data.quotes,
+                      rateUnavailable: data.rateUnavailable,
+                      rateError: data.rateError,
+                    });
+                  } catch (err) {
+                    console.error('Failed to update slippage', err);
+                  }
+                }}
               />
               {mode === 'standalone' && !isMobile && (
                 <CheckoutFooter className="cko-footer" sx={{ color: 'text.lighter' }} />
@@ -385,13 +715,16 @@ function PaymentInner({
               currencyId={currencyId}
               checkoutSession={state.checkoutSession}
               paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
-              paymentIntent={paymentIntent}
+              paymentIntent={state.paymentIntent || paymentIntent}
               paymentLink={paymentLink}
               customer={customer}
               onPaid={handlePaid}
               onError={onError}
+              onQuoteUpdated={handleQuoteUpdated}
+              onPaymentIntentUpdate={handlePaymentIntentUpdate}
               mode={mode}
               action={action}
+              rateUnavailable={effectiveRateUnavailable}
             />
           )}
         </Stack>
@@ -416,6 +749,9 @@ export default function Payment({
   goBack,
   action,
   showCheckoutSummary = true,
+  quotes,
+  rateUnavailable,
+  rateError,
 }: Props) {
   const { t } = useLocaleContext();
   const { refresh, livemode, setLivemode } = usePaymentContext();
@@ -492,6 +828,9 @@ export default function Payment({
         mode={mode}
         action={action}
         showCheckoutSummary={showCheckoutSummary}
+        quotes={quotes}
+        rateUnavailable={rateUnavailable}
+        rateError={rateError}
       />
     );
   };