@blocklet/payment-react-headless 1.26.0

package/src/checkout/hooks/usePricing.ts

@@ -0,0 +1,274 @@
+import { useState, useMemo, useEffect, useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import type { TPaymentCurrency, TLineItemExpanded } from '@blocklet/payment-types';
+
+import { getErrorMessage } from '../../types/checkout-augmented';
+
+import { formatExchangeRate, formatExchangeRateDisplay } from '../../shared/format';
+import { checkHasDynamicPricing, fetchExchangeRate, getBackoffInterval } from '../core/exchangeRate';
+import { calculateAmounts, calculateQuoteMeta, calculateTrial } from '../core/pricing';
+import {
+  extractPromotionCodeFromSession,
+  applyPromotionCode,
+  removePromotionCode,
+  isPromotionActive,
+} from '../core/promotion';
+import { updateSlippage } from '../core/submit';
+import type { SessionData } from './useCheckoutSession';
+
+export interface UsePricingReturn {
+  subtotal: string;
+  paymentAmount: string;
+  discount: string | null;
+  tax: {
+    amount: string;
+    rate: number;
+    inclusive: boolean;
+  } | null;
+  staking: string | null;
+  total: string;
+  usdEquivalent: string | null;
+  hasDynamicPricing: boolean;
+  rate: {
+    value: string | null;
+    display: string | null;
+    provider: string | null;
+    providerDisplay: string | null;
+    fetchedAt: number | null;
+    status: 'loading' | 'available' | 'unavailable';
+    refresh: () => Promise<void>;
+  };
+  quote: {
+    locked: boolean;
+    lockedAt: number | null;
+    expiresAt: number | null;
+    expired: boolean;
+    baseCurrency: string | null;
+  };
+  slippage: {
+    percent: number;
+    set: (config: { mode: string; percent: number }) => Promise<void>;
+  };
+  promotion: {
+    applied: boolean;
+    code: string | null;
+    active: boolean;
+    inactiveReason: string | null;
+    apply: (code: string) => Promise<{ success: boolean; error?: string }>;
+    remove: () => Promise<void>;
+  };
+  trial: {
+    active: boolean;
+    days: number;
+    afterTrialPrice: string | null;
+    afterTrialInterval: string | null;
+  };
+}
+
+export function usePricing(
+  sessionData: SessionData | null,
+  sessionId: string,
+  currency: TPaymentCurrency | null,
+  isStripe: boolean,
+  refreshSession: (force?: boolean) => Promise<void>,
+  paymentMethodType?: string | null
+): UsePricingReturn {
+  const session = sessionData?.checkoutSession;
+  const items: TLineItemExpanded[] = (session?.line_items || []) as TLineItemExpanded[];
+
+  const [exchangeRate, setExchangeRate] = useState<string | null>(null);
+  const [rateProvider, setRateProvider] = useState<string | null>(null);
+  const [rateProviderDisplay, setRateProviderDisplay] = useState<string | null>(null);
+  const [rateFetchedAt, setRateFetchedAt] = useState<number | null>(null);
+  const [rateStatus, setRateStatus] = useState<'loading' | 'available' | 'unavailable'>('loading');
+  const [promotionCode, setPromotionCode] = useState<string | null>(null);
+
+  // Initialize promotionCode from session's existing discounts
+  useEffect(() => {
+    if (!session || promotionCode) return;
+    const code = extractPromotionCodeFromSession(session);
+    if (code) setPromotionCode(code);
+  }, [session?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const pollingRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const failCountRef = useRef(0);
+  const mountedRef = useRef(true);
+
+  const hasDynamicPricing = useMemo(() => checkHasDynamicPricing(items), [items]);
+
+  // Fetch exchange rate
+  const fetchRate = useMemoizedFn(async () => {
+    if (!sessionId || !hasDynamicPricing || isStripe) {
+      setRateStatus(hasDynamicPricing ? 'unavailable' : 'available');
+      if (isStripe) {
+        setExchangeRate(null);
+        setRateProvider(null);
+        setRateProviderDisplay(null);
+        setRateFetchedAt(null);
+      }
+      return;
+    }
+
+    try {
+      setRateStatus('loading');
+      const result = await fetchExchangeRate(sessionId, currency?.id);
+
+      if (!mountedRef.current) return;
+
+      if (result.rate) {
+        setExchangeRate(result.rate);
+        setRateProvider(result.provider);
+        setRateProviderDisplay(result.providerDisplay);
+        setRateFetchedAt(result.fetchedAt);
+        setRateStatus('available');
+        failCountRef.current = 0;
+      } else {
+        setRateStatus('unavailable');
+      }
+    } catch {
+      if (!mountedRef.current) return;
+      failCountRef.current += 1;
+      setRateStatus('unavailable');
+    }
+  });
+
+  // Rate polling with exponential backoff
+  useEffect(() => {
+    mountedRef.current = true;
+
+    if (!hasDynamicPricing || isStripe || !sessionId || session?.status === 'complete') {
+      // Clear stale rate when switching to Stripe
+      if (isStripe) {
+        setExchangeRate(null);
+        setRateProvider(null);
+        setRateProviderDisplay(null);
+        setRateFetchedAt(null);
+        setRateStatus('unavailable');
+      } else if (session?.status === 'complete') {
+        // Completed session: rate is irrelevant, suppress unavailable warnings
+        setRateStatus('available');
+      }
+      return undefined;
+    }
+
+    fetchRate();
+
+    const scheduleNext = () => {
+      const backoff = getBackoffInterval(failCountRef.current);
+      pollingRef.current = setTimeout(() => {
+        fetchRate().then(scheduleNext);
+      }, backoff);
+    };
+
+    scheduleNext();
+
+    // Visibility-aware polling
+    const handleVisibility = () => {
+      if (document.hidden) {
+        if (pollingRef.current) clearTimeout(pollingRef.current);
+      } else if (session?.status !== 'complete') {
+        fetchRate().then(scheduleNext);
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibility);
+
+    return () => {
+      mountedRef.current = false;
+      if (pollingRef.current) clearTimeout(pollingRef.current);
+      document.removeEventListener('visibilitychange', handleVisibility);
+    };
+  }, [hasDynamicPricing, isStripe, sessionId, currency?.id, session?.status]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Calculate amounts
+  const amounts = useMemo(
+    () => calculateAmounts(items, currency, session, exchangeRate, hasDynamicPricing, paymentMethodType),
+    [items, currency, exchangeRate, hasDynamicPricing, session, paymentMethodType]
+  );
+
+  // Quote metadata
+  const quoteMeta = useMemo(
+    () => calculateQuoteMeta(items, hasDynamicPricing, sessionData),
+    [items, hasDynamicPricing, sessionData]
+  );
+
+  // Slippage
+  const setSlippage = useMemoizedFn(async (config: { mode: string; percent: number }) => {
+    try {
+      const data = await updateSlippage(sessionId, config);
+      if (data?.checkoutSession || data?.quotes) {
+        await refreshSession(true);
+      }
+    } catch (err: unknown) {
+      console.error('Failed to update slippage:', getErrorMessage(err));
+    }
+  });
+
+  const currentSlippagePercent = quoteMeta.slippagePercent ?? 0.5;
+
+  // Auto-refresh on quote expiry (skip if session already completed)
+  useEffect(() => {
+    if (!quoteMeta.expired || !quoteMeta.expiresAt || session?.status === 'complete') return;
+    refreshSession(true);
+  }, [quoteMeta.expired]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Promotion
+  const applyPromotion = useMemoizedFn(async (code: string) => {
+    const result = await applyPromotionCode(sessionId, code, currency?.id);
+    if (result.success) {
+      setPromotionCode(code);
+      await refreshSession(true);
+    }
+    return result;
+  });
+
+  const removePromotion = useMemoizedFn(async () => {
+    try {
+      await removePromotionCode(sessionId);
+      setPromotionCode(null);
+      await refreshSession(true);
+    } catch {
+      // Ignore
+    }
+  });
+
+  const promotionApplied = (session?.discounts || []).length > 0;
+  const promotionActive = isPromotionActive(session);
+
+  // Trial
+  const trial = calculateTrial(session, currency?.id, items, currency, hasDynamicPricing, exchangeRate);
+
+  return {
+    ...amounts,
+    hasDynamicPricing,
+    rate: {
+      value: formatExchangeRate(exchangeRate),
+      display: exchangeRate ? formatExchangeRateDisplay(exchangeRate) : null,
+      provider: rateProvider,
+      providerDisplay: rateProviderDisplay,
+      fetchedAt: rateFetchedAt,
+      status: rateStatus,
+      refresh: fetchRate,
+    },
+    quote: {
+      locked: quoteMeta.locked,
+      lockedAt: quoteMeta.lockedAt,
+      expiresAt: quoteMeta.expiresAt,
+      expired: quoteMeta.expired,
+      baseCurrency: quoteMeta.baseCurrency,
+    },
+    slippage: {
+      percent: currentSlippagePercent,
+      set: setSlippage,
+    },
+    promotion: {
+      applied: promotionApplied,
+      code: promotionCode,
+      active: promotionActive,
+      inactiveReason: !promotionActive ? 'Promotions not allowed' : null,
+      apply: applyPromotion,
+      remove: removePromotion,
+    },
+    trial,
+  };
+}

package/src/checkout/hooks/usePricingFeature.ts

@@ -0,0 +1,73 @@
+import { useMemo, useEffect } from 'react';
+
+import { useSessionContext } from '../context/SessionContext';
+import { usePaymentMethodContext } from '../context/PaymentMethodContext';
+import { useExchangeRateContext } from '../context/ExchangeRateContext';
+import { calculateAmounts, calculateQuoteMeta, calculateTrial } from '../core/pricing';
+
+export interface UsePricingFeatureReturn {
+  subtotal: string;
+  paymentAmount: string;
+  discount: string | null;
+  tax: {
+    amount: string;
+    rate: number;
+    inclusive: boolean;
+  } | null;
+  staking: string | null;
+  total: string;
+  usdEquivalent: string | null;
+  hasDynamicPricing: boolean;
+  quote: {
+    locked: boolean;
+    lockedAt: number | null;
+    expiresAt: number | null;
+    expired: boolean;
+    baseCurrency: string | null;
+  };
+  trial: {
+    active: boolean;
+    days: number;
+    afterTrialPrice: string | null;
+    afterTrialInterval: string | null;
+  };
+}
+
+export function usePricingFeature(): UsePricingFeatureReturn {
+  const { items, session, sessionData, refresh } = useSessionContext();
+  const { currency } = usePaymentMethodContext();
+  const { rate: exchangeRate, hasDynamicPricing } = useExchangeRateContext();
+
+  const { current: currentMethod } = usePaymentMethodContext();
+
+  const amounts = useMemo(
+    () => calculateAmounts(items, currency, session, exchangeRate, hasDynamicPricing, currentMethod?.type || null),
+    [items, currency, exchangeRate, hasDynamicPricing, session, currentMethod?.type]
+  );
+
+  const quoteMeta = useMemo(
+    () => calculateQuoteMeta(items, hasDynamicPricing, sessionData),
+    [items, hasDynamicPricing, sessionData]
+  );
+
+  // Auto-refresh on quote expiry (skip if session already completed)
+  useEffect(() => {
+    if (!quoteMeta.expired || !quoteMeta.expiresAt || session?.status === 'complete') return;
+    refresh(true);
+  }, [quoteMeta.expired]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const trial = calculateTrial(session, currency?.id, items, currency, hasDynamicPricing, exchangeRate);
+
+  return {
+    ...amounts,
+    hasDynamicPricing,
+    quote: {
+      locked: quoteMeta.locked,
+      lockedAt: quoteMeta.lockedAt,
+      expiresAt: quoteMeta.expiresAt,
+      expired: quoteMeta.expired,
+      baseCurrency: quoteMeta.baseCurrency,
+    },
+    trial,
+  };
+}

package/src/checkout/hooks/useProduct.ts

@@ -0,0 +1,32 @@
+import { useSessionContext } from '../context/SessionContext';
+
+export interface UseProductReturn {
+  product: {
+    name: string;
+    description: string;
+    images: string[];
+    features: Array<{ name: string; icon?: string }>;
+    billing: {
+      mode: 'payment' | 'subscription';
+      interval: 'month' | 'year' | 'week' | 'day' | null;
+      intervalCount: number;
+      displayInterval: string;
+    };
+    metadata: Record<string, string>;
+  } | null;
+  subscription: {
+    mode: 'payment' | 'subscription' | 'setup';
+    showStake: boolean;
+    confirmMessage: string;
+  } | null;
+  pageInfo: {
+    formPurposeDescription?: { en: string; zh: string };
+    showProductFeatures: boolean;
+  } | null;
+  vendorCount: number;
+}
+
+export function useProduct(): UseProductReturn {
+  const { product, subscription, pageInfo, vendorCount } = useSessionContext();
+  return { product, subscription, pageInfo, vendorCount };
+}

package/src/checkout/hooks/usePromotion.ts

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react';
+import { useMemoizedFn } from 'ahooks';
+
+import { useSessionContext } from '../context/SessionContext';
+import { usePaymentMethodContext } from '../context/PaymentMethodContext';
+import {
+  extractPromotionCodeFromSession,
+  applyPromotionCode,
+  removePromotionCode,
+  isPromotionActive,
+} from '../core/promotion';
+
+export interface UsePromotionReturn {
+  applied: boolean;
+  code: string | null;
+  active: boolean;
+  inactiveReason: string | null;
+  apply: (code: string) => Promise<{ success: boolean; error?: string }>;
+  remove: () => Promise<void>;
+}
+
+export function usePromotion(): UsePromotionReturn {
+  const { session, effectiveSessionId, refresh } = useSessionContext();
+  const { currency } = usePaymentMethodContext();
+
+  const [promotionCode, setPromotionCode] = useState<string | null>(null);
+
+  // Initialize from session's existing discounts
+  useEffect(() => {
+    if (!session || promotionCode) return;
+    const code = extractPromotionCodeFromSession(session);
+    if (code) setPromotionCode(code);
+  }, [session?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const apply = useMemoizedFn(async (code: string) => {
+    if (session?.status === 'complete') return { success: false, error: 'Session already completed' };
+    const result = await applyPromotionCode(effectiveSessionId, code, currency?.id);
+    if (result.success) {
+      setPromotionCode(code);
+      await refresh(true);
+    }
+    return result;
+  });
+
+  const remove = useMemoizedFn(async () => {
+    if (session?.status === 'complete') return;
+    try {
+      await removePromotionCode(effectiveSessionId);
+      setPromotionCode(null);
+      await refresh(true);
+    } catch {
+      // Ignore
+    }
+  });
+
+  const promotionApplied = (session?.discounts || []).length > 0;
+  const promotionActive = isPromotionActive(session);
+
+  return {
+    applied: promotionApplied,
+    code: promotionCode,
+    active: promotionActive,
+    inactiveReason: !promotionActive ? 'Promotions not allowed' : null,
+    apply,
+    remove,
+  };
+}

package/src/checkout/hooks/useSlippage.ts

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import { useMemoizedFn } from 'ahooks';
+
+import { getErrorMessage } from '../../types/checkout-augmented';
+import { useSessionContext } from '../context/SessionContext';
+import { useExchangeRateContext } from '../context/ExchangeRateContext';
+import { calculateQuoteMeta } from '../core/pricing';
+import { updateSlippage } from '../core/submit';
+
+export interface UseSlippageReturn {
+  percent: number;
+  set: (config: { mode: string; percent: number }) => Promise<void>;
+}
+
+export function useSlippage(): UseSlippageReturn {
+  const { items, sessionData, effectiveSessionId, refresh } = useSessionContext();
+  const { hasDynamicPricing } = useExchangeRateContext();
+
+  const quoteMeta = useMemo(
+    () => calculateQuoteMeta(items, hasDynamicPricing, sessionData),
+    [items, hasDynamicPricing, sessionData]
+  );
+
+  const set = useMemoizedFn(async (config: { mode: string; percent: number }) => {
+    try {
+      const data = await updateSlippage(effectiveSessionId, config);
+      if (data?.checkoutSession || data?.quotes) {
+        await refresh(true);
+      }
+    } catch (err: unknown) {
+      console.error('Failed to update slippage:', getErrorMessage(err));
+    }
+  });
+
+  return {
+    percent: quoteMeta.slippagePercent ?? 0.5,
+    set,
+  };
+}