@blocklet/payment-react 1.24.3 → 1.25.0

package/lib/payment/index.js

@@ -45,7 +45,10 @@ function PaymentInner({
   onError,
   onChange,
   action,
-  showCheckoutSummary = true
+  showCheckoutSummary = true,
+  quotes,
+  rateUnavailable,
+  rateError
 }) {
   const {
     t
@@ -58,8 +61,19 @@ function PaymentInner({
     isMobile
   } = (0, _mobile.useMobile)();
   const [state, setState] = (0, _ahooks.useSetState)({
-    checkoutSession
+    checkoutSession,
+    quotes,
+    rateUnavailable,
+    rateError,
+    paymentIntent,
+    liveRateInfo: void 0,
+    liveQuoteSnapshot: void 0,
+    liveRateUnavailable: false,
+    liveRateError: void 0,
+    isRateLoading: false
   });
+  const isCurrencySwitchRef = (0, _react.useRef)(false);
+  const prevCurrencyIdRef = (0, _react.useRef)(null);
   const query = (0, _util2.getQueryParams)(window.location.href);
   const availableCurrencyIds = (0, _react.useMemo)(() => {
     const currencyIds = /* @__PURE__ */new Set();
@@ -145,13 +159,198 @@ function PaymentInner({
   });
   const currency = (0, _util2.findCurrency)(paymentMethods, currencyId) || settings.baseCurrency;
   const method = paymentMethods.find(x => x.id === currency.payment_method_id);
-  const recalculatePromotion = () => {
+  const hasDynamicPricing = (0, _react.useMemo)(() => state.checkoutSession.line_items.some(item => (item.upsell_price || item.price)?.pricing_type === "dynamic"), [state.checkoutSession.line_items]);
+  const isStripePayment = method?.type === "stripe";
+  const needsExchangeRate = hasDynamicPricing && !isStripePayment;
+  const effectiveRateUnavailable = needsExchangeRate && (state.rateUnavailable || state.liveRateUnavailable);
+  if (state.liveRateError || state.rateError) {
+    console.error("[Rate Error]", {
+      liveRateError: state.liveRateError,
+      rateError: state.rateError
+    });
+  }
+  const refreshRateRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!currencyId) {
+      return;
+    }
+    const isCurrencySwitch = prevCurrencyIdRef.current !== null && prevCurrencyIdRef.current !== currencyId;
+    prevCurrencyIdRef.current = currencyId;
+    if (isCurrencySwitch) {
+      isCurrencySwitchRef.current = true;
+      setState({
+        isRateLoading: true
+      });
+    }
+    if (needsExchangeRate) {
+      setState({
+        liveRateInfo: void 0,
+        liveQuoteSnapshot: void 0,
+        liveRateUnavailable: false,
+        liveRateError: void 0
+      });
+      liveRateRefreshRef.current = false;
+      refreshRateRef.current?.();
+    } else {
+      setState({
+        liveRateInfo: void 0,
+        liveQuoteSnapshot: void 0,
+        liveRateUnavailable: false,
+        liveRateError: void 0
+      });
+      liveRateRefreshRef.current = false;
+      if (isCurrencySwitch && !state.checkoutSession?.discounts?.length) {
+        setState({
+          isRateLoading: false
+        });
+        isCurrencySwitchRef.current = false;
+      }
+    }
+  }, [currencyId, needsExchangeRate]);
+  (0, _react.useEffect)(() => {
+    if (!state.checkoutSession?.id || completed || !needsExchangeRate) {
+      return void 0;
+    }
+    let cancelled = false;
+    let consecutiveFailures = 0;
+    const baseInterval = 3e4;
+    const MAX_INTERVAL = 5 * 60 * 1e3;
+    const QUICK_RETRY_DELAY = 1e3;
+    const MAX_QUICK_RETRIES = 2;
+    let currentInterval = baseInterval;
+    let timer = null;
+    const scheduleNext = () => {
+      if (timer) {
+        clearInterval(timer);
+      }
+      timer = window.setInterval(() => {
+        fetchRate(false);
+      }, currentInterval);
+    };
+    const fetchRate = async (isManualRetry = false) => {
+      if (document.hidden && !isManualRetry) {
+        return;
+      }
+      if (typeof navigator !== "undefined" && !navigator.onLine) {
+        return;
+      }
+      if (liveRateRefreshRef.current) {
+        return;
+      }
+      liveRateRefreshRef.current = true;
+      let quickRetryCount = 0;
+      let lastError = null;
+      try {
+        while (quickRetryCount <= MAX_QUICK_RETRIES) {
+          try {
+            const {
+              data
+            } = await _api.default.get(`/api/checkout-sessions/${state.checkoutSession.id}/exchange-rate`, {
+              params: currencyId ? {
+                currency_id: currencyId
+              } : void 0
+            });
+            if (cancelled) {
+              return;
+            }
+            consecutiveFailures = 0;
+            currentInterval = baseInterval;
+            setState({
+              liveRateInfo: data,
+              liveQuoteSnapshot: void 0,
+              // Quote is created at submit time only
+              liveRateUnavailable: false,
+              liveRateError: void 0
+            });
+            if (isCurrencySwitchRef.current && !state.checkoutSession?.discounts?.length) {
+              setState({
+                isRateLoading: false
+              });
+              isCurrencySwitchRef.current = false;
+            }
+            scheduleNext();
+            return;
+          } catch (err) {
+            lastError = err;
+            quickRetryCount++;
+            if (quickRetryCount <= MAX_QUICK_RETRIES && !cancelled) {
+              console.log(`[Exchange Rate] Quick retry ${quickRetryCount}/${MAX_QUICK_RETRIES} after ${QUICK_RETRY_DELAY}ms`);
+              await new Promise(resolve => {
+                setTimeout(resolve, QUICK_RETRY_DELAY);
+              });
+            }
+          }
+        }
+        if (cancelled) {
+          return;
+        }
+        consecutiveFailures++;
+        const technicalError = lastError?.response?.data?.error || (0, _util2.formatError)(lastError);
+        console.error("[Exchange Rate Fetch Error]", {
+          error: technicalError,
+          consecutiveFailures,
+          sessionId: state.checkoutSession?.id,
+          currencyId
+        });
+        setState({
+          liveRateUnavailable: true,
+          liveRateError: void 0
+        });
+        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;
+      }
+    };
+    refreshRateRef.current = async () => {
+      liveRateRefreshRef.current = false;
+      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);
+    };
+  }, [state.checkoutSession?.id, currencyId, completed, needsExchangeRate]);
+  const recalculatePromotion = async () => {
     if (state.checkoutSession?.discounts?.length) {
-      _api.default.post(`/api/checkout-sessions/${state.checkoutSession.id}/recalculate-promotion`, {
-        currency_id: currencyId
-      }).then(() => {
-        onPromotionUpdate();
+      try {
+        await _api.default.post(`/api/checkout-sessions/${state.checkoutSession.id}/recalculate-promotion`, {
+          currency_id: currencyId
+        });
+        await onPromotionUpdate();
+      } catch (err) {
+        console.error("[recalculatePromotion] Error:", err);
+      } finally {
+        if (isCurrencySwitchRef.current) {
+          setState({
+            isRateLoading: false
+          });
+          isCurrencySwitchRef.current = false;
+        }
+      }
+    } else if (isCurrencySwitchRef.current) {
+      setState({
+        isRateLoading: false
       });
+      isCurrencySwitchRef.current = false;
     }
   };
   (0, _react.useEffect)(() => {
@@ -224,14 +423,24 @@ function PaymentInner({
         data
       } = await _api.default.put(`/api/checkout-sessions/${state.checkoutSession.id}/adjust-quantity`, {
         itemId,
-        quantity
+        quantity,
+        currency_id: currencyId
       });
       if (data.discounts?.length) {
         recalculatePromotion();
         return;
       }
       setState({
-        checkoutSession: data
+        checkoutSession: data,
+        ...(data.rateUnavailable !== void 0 && {
+          rateUnavailable: data.rateUnavailable
+        }),
+        ...(data.rateError !== void 0 && {
+          rateError: data.rateError
+        }),
+        ...(data.quotes !== void 0 && {
+          quotes: data.quotes
+        })
       });
     } catch (err) {
       console.error(err);
@@ -297,6 +506,57 @@ function PaymentInner({
     });
     onPaid(result);
   };
+  const handleQuoteUpdated = payload => {
+    setState({
+      checkoutSession: payload.checkoutSession,
+      ...(payload.quotes !== void 0 && {
+        quotes: payload.quotes
+      }),
+      ...(payload.rateUnavailable !== void 0 && {
+        rateUnavailable: payload.rateUnavailable
+      }),
+      ...(payload.rateError !== void 0 && {
+        rateError: payload.rateError
+      }),
+      ...(payload.paymentIntent !== void 0 && {
+        paymentIntent: payload.paymentIntent
+      })
+    });
+  };
+  const handlePaymentIntentUpdate = intent => {
+    setState({
+      paymentIntent: intent
+    });
+  };
+  const quoteRefreshRef = (0, _react.useRef)(false);
+  const liveRateRefreshRef = (0, _react.useRef)(false);
+  const handleQuoteExpired = async (forceRefresh = false) => {
+    if (quoteRefreshRef.current) {
+      return;
+    }
+    quoteRefreshRef.current = true;
+    try {
+      const {
+        data
+      } = await _api.default.get(`/api/checkout-sessions/retrieve/${state.checkoutSession.id}`, {
+        params: forceRefresh ? {
+          forceRefresh: "1"
+        } : void 0
+      });
+      handleQuoteUpdated({
+        checkoutSession: data.checkoutSession,
+        quotes: data.quotes,
+        rateUnavailable: data.rateUnavailable,
+        rateError: data.rateError,
+        paymentIntent: data.paymentIntent
+      });
+    } catch (err) {
+      console.error(err);
+      _Toast.default.error((0, _util2.formatError)(err));
+    } finally {
+      quoteRefreshRef.current = false;
+    }
+  };
   let trialInDays = Number(state.checkoutSession?.subscription_data?.trial_period_days || 0);
   let trialEnd = Number(state.checkoutSession?.subscription_data?.trial_end || 0);
   const trialCurrencyIds = (state.checkoutSession?.subscription_data?.trial_currency || "").split(",").map(_trim.default).filter(Boolean);
@@ -328,6 +588,7 @@ function PaymentInner({
             state.checkoutSession.subscription_data?.min_stake_amount || 0),
             showStaking: (0, _util2.showStaking)(method, currency, !!state.checkoutSession.subscription_data?.no_stake),
             currency,
+            paymentIntent: state.paymentIntent || paymentIntent,
             onUpsell,
             onDownsell,
             onQuantityChange,
@@ -342,7 +603,31 @@ function PaymentInner({
             checkoutSession: state.checkoutSession,
             onPromotionUpdate,
             paymentMethods,
-            showFeatures
+            showFeatures,
+            rateUnavailable: effectiveRateUnavailable,
+            isRateLoading: state.isRateLoading,
+            liveRate: state.liveRateInfo,
+            liveQuoteSnapshot: state.liveQuoteSnapshot,
+            onQuoteExpired: handleQuoteExpired,
+            onRefreshRate: refreshRateRef.current || void 0,
+            isStripePayment,
+            onSlippageChange: async slippageConfig => {
+              try {
+                const {
+                  data
+                } = await _api.default.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 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
             className: "cko-footer",
             sx: {
@@ -374,13 +659,16 @@ function PaymentInner({
           currencyId,
           checkoutSession: state.checkoutSession,
           paymentMethods,
-          paymentIntent,
+          paymentIntent: state.paymentIntent || paymentIntent,
           paymentLink,
           customer,
           onPaid: handlePaid,
           onError,
+          onQuoteUpdated: handleQuoteUpdated,
+          onPaymentIntentUpdate: handlePaymentIntentUpdate,
           mode,
-          action
+          action,
+          rateUnavailable: effectiveRateUnavailable
         })]
       }), mode === "standalone" && isMobile && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
         className: "cko-footer",
@@ -405,7 +693,10 @@ function Payment({
   onChange,
   goBack,
   action,
-  showCheckoutSummary = true
+  showCheckoutSummary = true,
+  quotes,
+  rateUnavailable,
+  rateError
 }) {
   const {
     t
@@ -488,7 +779,10 @@ function Payment({
       goBack,
       mode,
       action,
-      showCheckoutSummary
+      showCheckoutSummary,
+      quotes,
+      rateUnavailable,
+      rateError
     });
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {

package/lib/payment/product-item.d.ts

@@ -1,5 +1,24 @@
 import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 import React from 'react';
+interface DiscountInfo {
+    promotion_code?: string;
+    coupon?: string;
+    discount_amount?: string;
+    promotion_code_details?: {
+        code?: string;
+    };
+    coupon_details?: {
+        percent_off?: number;
+        amount_off?: string;
+        currency_id?: string;
+        currency_options?: Record<string, {
+            amount_off?: string;
+        }>;
+    };
+    verification_data?: {
+        code?: string;
+    };
+}
 type Props = {
     item: TLineItemExpanded;
     items: TLineItemExpanded[];
@@ -18,6 +37,12 @@ type Props = {
     onQuantityChange?: (itemId: string, quantity: number) => void;
     completed?: boolean;
     showFeatures?: boolean;
+    exchangeRate?: string | null;
+    isStripePayment?: boolean;
+    isPriceLocked?: boolean;
+    isRateLoading?: boolean;
+    discounts?: DiscountInfo[];
+    calculatedDiscountAmount?: string | null;
 };
-export default function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, completed, adjustableQuantity, onQuantityChange, showFeatures, }: Props): JSX.Element;
+export default function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, completed, adjustableQuantity, onQuantityChange, showFeatures, exchangeRate, isStripePayment, isPriceLocked, isRateLoading, discounts, calculatedDiscountAmount, }: Props): JSX.Element;
 export {};