@blocklet/payment-react-headless 1.26.0

package/es/checkout/hooks/usePricing.js

@@ -0,0 +1,174 @@
+import { useState, useMemo, useEffect, useRef } from "react";
+import { useMemoizedFn } from "ahooks";
+import { getErrorMessage } from "../../types/checkout-augmented.js";
+import { formatExchangeRate, formatExchangeRateDisplay } from "../../shared/format.js";
+import { checkHasDynamicPricing, fetchExchangeRate, getBackoffInterval } from "../core/exchangeRate.js";
+import { calculateAmounts, calculateQuoteMeta, calculateTrial } from "../core/pricing.js";
+import {
+  extractPromotionCodeFromSession,
+  applyPromotionCode,
+  removePromotionCode,
+  isPromotionActive
+} from "../core/promotion.js";
+import { updateSlippage } from "../core/submit.js";
+export function usePricing(sessionData, sessionId, currency, isStripe, refreshSession, paymentMethodType) {
+  const session = sessionData?.checkoutSession;
+  const items = session?.line_items || [];
+  const [exchangeRate, setExchangeRate] = useState(null);
+  const [rateProvider, setRateProvider] = useState(null);
+  const [rateProviderDisplay, setRateProviderDisplay] = useState(null);
+  const [rateFetchedAt, setRateFetchedAt] = useState(null);
+  const [rateStatus, setRateStatus] = useState("loading");
+  const [promotionCode, setPromotionCode] = useState(null);
+  useEffect(() => {
+    if (!session || promotionCode) return;
+    const code = extractPromotionCodeFromSession(session);
+    if (code) setPromotionCode(code);
+  }, [session?.id]);
+  const pollingRef = useRef(null);
+  const failCountRef = useRef(0);
+  const mountedRef = useRef(true);
+  const hasDynamicPricing = useMemo(() => checkHasDynamicPricing(items), [items]);
+  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");
+    }
+  });
+  useEffect(() => {
+    mountedRef.current = true;
+    if (!hasDynamicPricing || isStripe || !sessionId || session?.status === "complete") {
+      if (isStripe) {
+        setExchangeRate(null);
+        setRateProvider(null);
+        setRateProviderDisplay(null);
+        setRateFetchedAt(null);
+        setRateStatus("unavailable");
+      } else if (session?.status === "complete") {
+        setRateStatus("available");
+      }
+      return void 0;
+    }
+    fetchRate();
+    const scheduleNext = () => {
+      const backoff = getBackoffInterval(failCountRef.current);
+      pollingRef.current = setTimeout(() => {
+        fetchRate().then(scheduleNext);
+      }, backoff);
+    };
+    scheduleNext();
+    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]);
+  const amounts = useMemo(
+    () => calculateAmounts(items, currency, session, exchangeRate, hasDynamicPricing, paymentMethodType),
+    [items, currency, exchangeRate, hasDynamicPricing, session, paymentMethodType]
+  );
+  const quoteMeta = useMemo(
+    () => calculateQuoteMeta(items, hasDynamicPricing, sessionData),
+    [items, hasDynamicPricing, sessionData]
+  );
+  const setSlippage = useMemoizedFn(async (config) => {
+    try {
+      const data = await updateSlippage(sessionId, config);
+      if (data?.checkoutSession || data?.quotes) {
+        await refreshSession(true);
+      }
+    } catch (err) {
+      console.error("Failed to update slippage:", getErrorMessage(err));
+    }
+  });
+  const currentSlippagePercent = quoteMeta.slippagePercent ?? 0.5;
+  useEffect(() => {
+    if (!quoteMeta.expired || !quoteMeta.expiresAt || session?.status === "complete") return;
+    refreshSession(true);
+  }, [quoteMeta.expired]);
+  const applyPromotion = useMemoizedFn(async (code) => {
+    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 {
+    }
+  });
+  const promotionApplied = (session?.discounts || []).length > 0;
+  const promotionActive = isPromotionActive(session);
+  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/es/checkout/hooks/usePricingFeature.d.ts

@@ -0,0 +1,28 @@
+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 declare function usePricingFeature(): UsePricingFeatureReturn;

package/es/checkout/hooks/usePricingFeature.js

@@ -0,0 +1,36 @@
+import { useMemo, useEffect } from "react";
+import { useSessionContext } from "../context/SessionContext.js";
+import { usePaymentMethodContext } from "../context/PaymentMethodContext.js";
+import { useExchangeRateContext } from "../context/ExchangeRateContext.js";
+import { calculateAmounts, calculateQuoteMeta, calculateTrial } from "../core/pricing.js";
+export function usePricingFeature() {
+  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]
+  );
+  useEffect(() => {
+    if (!quoteMeta.expired || !quoteMeta.expiresAt || session?.status === "complete") return;
+    refresh(true);
+  }, [quoteMeta.expired]);
+  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/es/checkout/hooks/useProduct.d.ts

@@ -0,0 +1,32 @@
+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 declare function useProduct(): UseProductReturn;

package/es/checkout/hooks/useProduct.js

@@ -0,0 +1,5 @@
+import { useSessionContext } from "../context/SessionContext.js";
+export function useProduct() {
+  const { product, subscription, pageInfo, vendorCount } = useSessionContext();
+  return { product, subscription, pageInfo, vendorCount };
+}

package/es/checkout/hooks/usePromotion.d.ts

@@ -0,0 +1,12 @@
+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 declare function usePromotion(): UsePromotionReturn;

package/es/checkout/hooks/usePromotion.js

@@ -0,0 +1,48 @@
+import { useState, useEffect } from "react";
+import { useMemoizedFn } from "ahooks";
+import { useSessionContext } from "../context/SessionContext.js";
+import { usePaymentMethodContext } from "../context/PaymentMethodContext.js";
+import {
+  extractPromotionCodeFromSession,
+  applyPromotionCode,
+  removePromotionCode,
+  isPromotionActive
+} from "../core/promotion.js";
+export function usePromotion() {
+  const { session, effectiveSessionId, refresh } = useSessionContext();
+  const { currency } = usePaymentMethodContext();
+  const [promotionCode, setPromotionCode] = useState(null);
+  useEffect(() => {
+    if (!session || promotionCode) return;
+    const code = extractPromotionCodeFromSession(session);
+    if (code) setPromotionCode(code);
+  }, [session?.id]);
+  const apply = useMemoizedFn(async (code) => {
+    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 {
+    }
+  });
+  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/es/checkout/hooks/useSlippage.d.ts

@@ -0,0 +1,8 @@
+export interface UseSlippageReturn {
+    percent: number;
+    set: (config: {
+        mode: string;
+        percent: number;
+    }) => Promise<void>;
+}
+export declare function useSlippage(): UseSlippageReturn;

package/es/checkout/hooks/useSlippage.js

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

package/es/checkout/hooks/useSubmit.d.ts

@@ -0,0 +1,38 @@
+import type { SessionData } from './useCheckoutSession';
+import type { SubmitStatus, SubmitContext, CheckoutResult, CheckoutFormData } from '../types';
+export interface VendorStatus {
+    success: boolean;
+    status: 'delivered' | 'pending' | 'failed';
+    progress: number;
+    message: string;
+    appUrl?: string;
+    title?: string;
+    name?: string;
+    vendorType: string;
+}
+export interface VendorOrderStatus {
+    payment_status: string;
+    session_status: string;
+    vendors: VendorStatus[];
+    error: string | null;
+    isAllCompleted: boolean;
+    hasFailed: boolean;
+}
+export interface UseSubmitReturn {
+    status: SubmitStatus;
+    context: SubmitContext;
+    execute: () => Promise<void>;
+    confirm: () => Promise<void>;
+    cancel: () => void;
+    result: CheckoutResult | null;
+    retry: () => Promise<void>;
+    reset: () => void;
+    stripeConfirm: () => Promise<void>;
+    stripeCancel: () => Promise<void>;
+    vendorStatus: VendorOrderStatus | null;
+    /** Whether the checkout config is locked (user clicked "Connect and Pay", pending login/submit) */
+    locked: boolean;
+    /** Lock the checkout config — prevents quantity/currency/method changes */
+    lock: () => void;
+}
+export declare function useSubmit(sessionData: SessionData | null, sessionId: string, currencyId: string | null, isStripe: boolean, isCredit: boolean, isDonation: boolean, formValues: CheckoutFormData, validateForm: () => Promise<boolean>, refreshSession: (force?: boolean) => Promise<void>, updateSessionData?: (data: SessionData) => void): UseSubmitReturn;