@blocklet/payment-react 1.24.3 → 1.25.0

package/es/payment/index.js

@@ -7,7 +7,7 @@ import { Box, Fade, Stack } 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 { usePaymentContext } from "../contexts/payment.js";
@@ -43,12 +43,28 @@ function PaymentInner({
   onError,
   onChange,
   action,
-  showCheckoutSummary = true
+  showCheckoutSummary = true,
+  quotes,
+  rateUnavailable,
+  rateError
 }) {
   const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
   const { isMobile } = useMobile();
-  const [state, setState] = useSetState({ checkoutSession });
+  const [state, setState] = useSetState({
+    checkoutSession,
+    quotes,
+    rateUnavailable,
+    rateError,
+    paymentIntent,
+    liveRateInfo: void 0,
+    liveQuoteSnapshot: void 0,
+    liveRateUnavailable: false,
+    liveRateError: void 0,
+    isRateLoading: false
+  });
+  const isCurrencySwitchRef = useRef(false);
+  const prevCurrencyIdRef = useRef(null);
   const query = getQueryParams(window.location.href);
   const availableCurrencyIds = useMemo(() => {
     const currencyIds = /* @__PURE__ */ new Set();
@@ -135,13 +151,185 @@ function PaymentInner({
   const currencyId = useWatch({ control: methods.control, name: "payment_currency", defaultValue: defaultCurrencyId });
   const currency = findCurrency(paymentMethods, currencyId) || settings.baseCurrency;
   const method = paymentMethods.find((x) => x.id === currency.payment_method_id);
-  const recalculatePromotion = () => {
-    if (state.checkoutSession?.discounts?.length) {
-      api.post(`/api/checkout-sessions/${state.checkoutSession.id}/recalculate-promotion`, {
-        currency_id: currencyId
-      }).then(() => {
-        onPromotionUpdate();
+  const hasDynamicPricing = 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 = useRef(null);
+  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]);
+  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.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 || 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) {
+      try {
+        await api.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;
     }
   };
   useEffect(() => {
@@ -193,13 +381,19 @@ function PaymentInner({
     try {
       const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/adjust-quantity`, {
         itemId,
-        quantity
+        quantity,
+        currency_id: currencyId
       });
       if (data.discounts?.length) {
         recalculatePromotion();
         return;
       }
-      setState({ checkoutSession: data });
+      setState({
+        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);
       Toast.error(formatError(err));
@@ -247,6 +441,43 @@ function PaymentInner({
     setState({ checkoutSession: result.checkoutSession });
     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 = 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" } : void 0
+      });
+      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;
+    }
+  };
   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).filter(Boolean);
@@ -270,6 +501,7 @@ function PaymentInner({
           ),
           showStaking: showStaking(method, currency, !!state.checkoutSession.subscription_data?.no_stake),
           currency,
+          paymentIntent: state.paymentIntent || paymentIntent,
           onUpsell,
           onDownsell,
           onQuantityChange,
@@ -284,7 +516,29 @@ 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.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__ */ jsx(CheckoutFooter, { className: "cko-footer", sx: { color: "text.lighter" } })
@@ -324,13 +578,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
             }
           )
         ]
@@ -353,7 +610,10 @@ export default function Payment({
   onChange,
   goBack,
   action,
-  showCheckoutSummary = true
+  showCheckoutSummary = true,
+  quotes,
+  rateUnavailable,
+  rateError
 }) {
   const { t } = useLocaleContext();
   const { refresh, livemode, setLivemode } = usePaymentContext();
@@ -418,7 +678,10 @@ export default function Payment({
         goBack,
         mode,
         action,
-        showCheckoutSummary
+        showCheckoutSummary,
+        quotes,
+        rateUnavailable,
+        rateError
       }
     );
   };

package/es/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 {};