@blocklet/payment-react-headless 1.26.0

package/es/checkout/hooks/useSubmit.js

@@ -0,0 +1,493 @@
+import { useState, useRef, useEffect } from "react";
+import { useMemoizedFn } from "ahooks";
+import { WsClient } from "@arcblock/ws";
+import api, { API } from "../../shared/api.js";
+import { waitForCheckoutComplete, generateIdempotencyKey } from "../../shared/polling.js";
+import { getErrorMessage, getAxiosErrorDetails } from "../../types/checkout-augmented.js";
+import {
+  RELAY_SOCKET_PREFIX,
+  getAppId,
+  getRelayChannel,
+  getRelayProtocol,
+  getSocketHost,
+  getSessionFingerprint,
+  buildSubmitPayload,
+  isQuoteError,
+  abortStripePayment,
+  submitCheckout,
+  confirmFastCheckout
+} from "../core/submit.js";
+export function useSubmit(sessionData, sessionId, currencyId, isStripe, isCredit, isDonation, formValues, validateForm, refreshSession, updateSessionData) {
+  const session = sessionData?.checkoutSession;
+  const [status, setStatus] = useState("idle");
+  const [context, setContext] = useState(null);
+  const [result, setResult] = useState(null);
+  const [locked, setLocked] = useState(false);
+  const lock = useMemoizedFn(() => setLocked(true));
+  const unlock = useMemoizedFn(() => setLocked(false));
+  const mountedRef = useRef(true);
+  const pollingAbortRef = useRef(false);
+  const socketRef = useRef(null);
+  const subscriptionRef = useRef(null);
+  const lastPayloadRef = useRef(null);
+  const [vendorStatus, setVendorStatus] = useState(null);
+  const vendorTimerRef = useRef(null);
+  const quoteRetryCountRef = useRef(0);
+  const MAX_QUOTE_RETRIES = 2;
+  const idempotencyKeyRef = useRef("");
+  const sessionFingerprintRef = useRef("");
+  const completedDetectedRef = useRef(false);
+  useEffect(() => {
+    if (completedDetectedRef.current) return;
+    if (!session || !sessionData) return;
+    const isSessionComplete = session.status === "complete" && ["paid", "no_payment_required"].includes(session.payment_status);
+    if (isSessionComplete && status === "idle") {
+      completedDetectedRef.current = true;
+      setResult(sessionData);
+      setStatus("completed");
+    }
+  }, [session, sessionData]);
+  useEffect(() => {
+    mountedRef.current = true;
+    if (!sessionId || !getAppId()) return void 0;
+    const socket = new WsClient(`${getRelayProtocol()}//${getSocketHost()}${RELAY_SOCKET_PREFIX}`, {
+      longpollerTimeout: 5e3,
+      heartbeatIntervalMs: 30 * 1e3
+    });
+    socket.connect();
+    socketRef.current = socket;
+    const sub = socket.subscribe(getRelayChannel("events"));
+    sub.channel = "events";
+    subscriptionRef.current = sub;
+    return () => {
+      mountedRef.current = false;
+      pollingAbortRef.current = true;
+      if (subscriptionRef.current) {
+        socket.unsubscribe(getRelayChannel(subscriptionRef.current.channel));
+        subscriptionRef.current = null;
+      }
+      socket.disconnect();
+      socketRef.current = null;
+    };
+  }, [sessionId]);
+  const handleWsComplete = useMemoizedFn(async ({ response }) => {
+    if (response.id === sessionId && status !== "completed") {
+      pollingAbortRef.current = true;
+      await handleCompletion();
+    }
+  });
+  useEffect(() => {
+    const sub = subscriptionRef.current;
+    if (sub) {
+      sub.on("checkout.session.completed", handleWsComplete);
+    }
+    return () => {
+      if (sub) {
+        try {
+          sub.off?.("checkout.session.completed", handleWsComplete);
+        } catch {
+        }
+      }
+    };
+  }, [subscriptionRef.current, status]);
+  const handleCompletion = useMemoizedFn(async () => {
+    try {
+      const completionResult = await waitForCheckoutComplete(sessionId);
+      if (!mountedRef.current) return;
+      setResult(completionResult);
+      updateSessionData?.(completionResult);
+      setStatus("completed");
+      setContext(null);
+    } catch (err) {
+      if (!mountedRef.current) return;
+      setStatus("failed");
+      setContext({ type: "error", message: getErrorMessage(err) || "Payment verification failed" });
+    }
+  });
+  useEffect(() => {
+    if (status !== "completed" || !sessionId) return void 0;
+    const hasVendors = session?.line_items?.some(
+      (item) => !!item?.price?.product?.vendor_config?.length
+    );
+    if (!hasVendors) return void 0;
+    const startTime = Date.now();
+    const fetchVendorStatus = async () => {
+      try {
+        const { data } = await api.get(API.VENDOR_ORDER_STATUS(sessionId));
+        if (!mountedRef.current) return;
+        const needCheckError = Date.now() - startTime > 6e3;
+        const allCompleted = data?.vendors?.every((v) => v.progress >= 100);
+        const hasFailed = data?.vendors?.some(
+          (v) => v.status === "failed" || needCheckError && !!v.error && !!v.error_message
+        );
+        setVendorStatus({
+          ...data,
+          isAllCompleted: !hasFailed && allCompleted,
+          hasFailed
+        });
+        if (hasFailed || allCompleted) return;
+        vendorTimerRef.current = setTimeout(fetchVendorStatus, 5e3);
+      } catch {
+      }
+    };
+    fetchVendorStatus();
+    return () => {
+      if (vendorTimerRef.current) clearTimeout(vendorTimerRef.current);
+    };
+  }, [status, sessionId]);
+  const handleQuoteError = useMemoizedFn(async (errorCode, errorData) => {
+    try {
+      await refreshSession(true);
+      if (!mountedRef.current) return;
+    } catch {
+    }
+    if (errorCode === "QUOTE_UPDATED" && errorData?.checkoutSession) {
+      quoteRetryCountRef.current = 0;
+      setStatus("failed");
+      setContext({ type: "error", message: "Price updated, please resubmit", code: errorCode });
+      return;
+    }
+    const canAutoRetry = ["QUOTE_LOCK_EXPIRED", "QUOTE_EXPIRED_OR_USED", "QUOTE_NOT_FOUND", "QUOTE_REQUIRED"].includes(
+      errorCode
+    );
+    if (canAutoRetry && quoteRetryCountRef.current < MAX_QUOTE_RETRIES) {
+      quoteRetryCountRef.current += 1;
+      setStatus("idle");
+      setContext(null);
+      await execute(true);
+      return;
+    }
+    quoteRetryCountRef.current = 0;
+    setStatus("failed");
+    setContext({
+      type: "error",
+      message: "Price updated, please resubmit",
+      code: errorCode
+    });
+  });
+  const routeSubmitResponse = useMemoizedFn(async (data) => {
+    if (isStripe) {
+      const stripeCtx = data.stripeContext;
+      if (stripeCtx?.status === "succeeded") {
+        await handleCompletion();
+        return;
+      }
+      const piCtx = data.paymentIntent;
+      const clientSecret = stripeCtx?.client_secret || piCtx?.client_secret;
+      if (clientSecret) {
+        const intentType = stripeCtx?.intent_type || "payment_intent";
+        setStatus("waiting_stripe");
+        setContext({ type: "stripe", clientSecret, intentType });
+        return;
+      }
+      if (data.noPaymentRequired) {
+        try {
+          const confirmResult = await confirmFastCheckout(sessionId);
+          const confirmSession = confirmResult.checkoutSession;
+          if (confirmResult.fastPaid || confirmSession?.status === "complete") {
+            await handleCompletion();
+            return;
+          }
+        } catch {
+        }
+      }
+      await handleCompletion();
+      return;
+    }
+    if (data.noPaymentRequired) {
+      try {
+        const confirmResult = await confirmFastCheckout(sessionId);
+        const confirmSession = confirmResult.checkoutSession;
+        if (confirmResult.fastPaid || confirmSession?.status === "complete") {
+          await handleCompletion();
+        } else {
+          setStatus("waiting_did");
+          setContext({
+            type: "did_connect",
+            action: session?.mode || "payment",
+            checkpointId: sessionId,
+            extraParams: {
+              checkoutSessionId: sessionId,
+              sessionUserDid: session?.user?.did
+            }
+          });
+        }
+      } catch {
+        if (!mountedRef.current) return;
+        setStatus("waiting_did");
+        setContext({
+          type: "did_connect",
+          action: session?.mode || "payment",
+          checkpointId: sessionId,
+          extraParams: {
+            checkoutSessionId: sessionId,
+            sessionUserDid: session?.user?.did
+          }
+        });
+      }
+      return;
+    }
+    const fastPayInfo = data.fastPayInfo;
+    const balance = data.balance;
+    const delegation = data.delegation;
+    if (isCredit) {
+      if (data.creditSufficient === true && fastPayInfo) {
+        setStatus("confirming_fast_pay");
+        setContext({
+          type: "fast_pay",
+          payType: "credit",
+          amount: fastPayInfo.amount || "0",
+          payer: fastPayInfo.payer || ""
+        });
+        return;
+      }
+      setStatus("credit_insufficient");
+      setContext({
+        type: "credit_insufficient",
+        available: "0",
+        required: "0"
+      });
+      return;
+    }
+    if ((balance?.sufficient || delegation?.sufficient) && !isDonation && fastPayInfo) {
+      setStatus("confirming_fast_pay");
+      setContext({
+        type: "fast_pay",
+        payType: fastPayInfo.type || "balance",
+        amount: fastPayInfo.amount || "",
+        payer: fastPayInfo.payer || ""
+      });
+      return;
+    }
+    setStatus("waiting_did");
+    setContext({
+      type: "did_connect",
+      action: session?.mode || "payment",
+      checkpointId: sessionId,
+      extraParams: {
+        checkoutSessionId: sessionId,
+        sessionUserDid: session?.user?.did
+      }
+    });
+  });
+  const handleSubmitError = useMemoizedFn(async (err) => {
+    const { code: errorCode, data: errorData, message: errMessage } = getAxiosErrorDetails(err);
+    if (errorCode && isQuoteError(errorCode)) {
+      await handleQuoteError(errorCode, errorData);
+      return;
+    }
+    if (errorCode === "RATE_BELOW_SLIPPAGE_LIMIT") {
+      try {
+        await refreshSession(true);
+      } catch {
+      }
+      if (!mountedRef.current) return;
+      idempotencyKeyRef.current = "";
+      sessionFingerprintRef.current = "";
+      setStatus("failed");
+      setContext({
+        type: "error",
+        message: errorData?.error || "Exchange rate below acceptable limit, please retry",
+        code: errorCode
+      });
+      return;
+    }
+    if (errorCode === "RATE_UNAVAILABLE") {
+      try {
+        await refreshSession(true);
+      } catch {
+      }
+      if (!mountedRef.current) return;
+      setStatus("failed");
+      setContext({
+        type: "error",
+        message: errorData?.rateError || "Exchange rate unavailable",
+        code: errorCode
+      });
+      return;
+    }
+    if (errorCode === "PRICE_CHANGED") {
+      setStatus("confirming_price");
+      setContext({
+        type: "price_change",
+        changePercent: errorData?.change_percent || 0
+      });
+      return;
+    }
+    if (errorCode === "PRICE_UNAVAILABLE" || errorCode === "PRICE_UNSTABLE") {
+      try {
+        await refreshSession(true);
+      } catch {
+      }
+      if (!mountedRef.current) return;
+      setStatus("failed");
+      setContext({
+        type: "error",
+        message: errorData?.error || "Price unavailable, please retry",
+        code: errorCode
+      });
+      return;
+    }
+    if (errorCode === "UNIFIED_APP_REQUIRED" || errorCode === "CUSTOMER_LIMITED") {
+      setStatus("failed");
+      setContext({
+        type: "error",
+        message: errorData?.error || errMessage || "Cannot complete payment",
+        code: errorCode
+      });
+      return;
+    }
+    const message = errorData?.error || errMessage || "Payment failed";
+    setStatus("failed");
+    setContext({ type: "error", message, code: errorCode });
+  });
+  const execute = useMemoizedFn(async (force = false) => {
+    if (!force && status !== "idle") return;
+    if (!force) quoteRetryCountRef.current = 0;
+    if (!await validateForm()) return;
+    const user = session?.user;
+    if (!user?.sourceAppPid) {
+      const hasVendorConfig = session?.line_items?.some(
+        (item) => !!item?.price?.product?.vendor_config?.length
+      );
+      if (hasVendorConfig) {
+        setStatus("failed");
+        setContext({ type: "error", message: "Vendor account required", code: "VENDOR_ACCOUNT_REQUIRED" });
+        return;
+      }
+    }
+    setStatus("submitting");
+    setContext(null);
+    setResult(null);
+    pollingAbortRef.current = false;
+    const fingerprint = getSessionFingerprint(session, currencyId);
+    if (fingerprint !== sessionFingerprintRef.current || !idempotencyKeyRef.current) {
+      sessionFingerprintRef.current = fingerprint;
+      idempotencyKeyRef.current = generateIdempotencyKey(sessionId, currencyId || "");
+    }
+    const payload = buildSubmitPayload(sessionId, currencyId, formValues, session, false, idempotencyKeyRef.current);
+    lastPayloadRef.current = payload;
+    try {
+      const data = await submitCheckout(sessionId, isDonation, payload);
+      if (!mountedRef.current) return;
+      await routeSubmitResponse(data);
+    } catch (err) {
+      if (!mountedRef.current) return;
+      await handleSubmitError(err);
+    }
+  });
+  const confirm = useMemoizedFn(async () => {
+    if (status === "confirming_fast_pay") {
+      setStatus("submitting");
+      try {
+        const data = await confirmFastCheckout(sessionId);
+        if (!mountedRef.current) return;
+        if (data.fastPaid) {
+          await handleCompletion();
+        } else {
+          setStatus("waiting_did");
+          setContext({
+            type: "did_connect",
+            action: session?.mode || "payment",
+            checkpointId: sessionId,
+            extraParams: {
+              checkoutSessionId: sessionId,
+              sessionUserDid: session?.user?.did
+            }
+          });
+        }
+      } catch (err) {
+        if (!mountedRef.current) return;
+        const { code: errorCode, data: errorData, message: errMsg } = getAxiosErrorDetails(err);
+        if (errorCode && isQuoteError(errorCode)) {
+          await handleQuoteError(errorCode, errorData);
+          return;
+        }
+        if (errorCode === "RATE_UNAVAILABLE") {
+          try {
+            await refreshSession(true);
+          } catch {
+          }
+          if (!mountedRef.current) return;
+          setStatus("failed");
+          setContext({
+            type: "error",
+            message: errorData?.rateError || "Exchange rate unavailable",
+            code: errorCode
+          });
+          return;
+        }
+        setStatus("failed");
+        setContext({
+          type: "error",
+          message: errorData?.error || errMsg || "Fast pay confirmation failed",
+          code: errorCode
+        });
+      }
+      return;
+    }
+    if (status === "confirming_price") {
+      setStatus("submitting");
+      setContext(null);
+      pollingAbortRef.current = false;
+      const payload = buildSubmitPayload(sessionId, currencyId, formValues, session, true, idempotencyKeyRef.current);
+      lastPayloadRef.current = payload;
+      try {
+        const data = await submitCheckout(sessionId, isDonation, payload);
+        if (!mountedRef.current) return;
+        await routeSubmitResponse(data);
+      } catch (err) {
+        if (!mountedRef.current) return;
+        await handleSubmitError(err);
+      }
+    }
+  });
+  const cancel = useMemoizedFn(() => {
+    if (status === "confirming_price" || status === "confirming_fast_pay" || status === "credit_insufficient") {
+      setStatus("idle");
+      setContext(null);
+      unlock();
+    }
+  });
+  const retry = useMemoizedFn(async () => {
+    if (status !== "failed") return;
+    setStatus("idle");
+    setContext(null);
+    setResult(null);
+    await execute(true);
+  });
+  const reset = useMemoizedFn(() => {
+    pollingAbortRef.current = true;
+    setStatus("idle");
+    setContext(null);
+    setResult(null);
+    unlock();
+  });
+  const stripeConfirm = useMemoizedFn(async () => {
+    if (status !== "waiting_stripe") return;
+    setStatus("submitting");
+    setContext(null);
+    await handleCompletion();
+  });
+  const stripeCancel = useMemoizedFn(async () => {
+    if (status !== "waiting_stripe") return;
+    await abortStripePayment(sessionId);
+    setStatus("idle");
+    setContext(null);
+  });
+  return {
+    status,
+    context,
+    execute,
+    confirm,
+    cancel,
+    result,
+    retry,
+    reset,
+    stripeConfirm,
+    stripeCancel,
+    vendorStatus,
+    locked,
+    lock
+  };
+}

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

@@ -0,0 +1,2 @@
+import type { UseSubmitReturn } from './useSubmit';
+export declare function useSubmitFeature(): UseSubmitReturn;

package/es/checkout/hooks/useSubmitFeature.js

@@ -0,0 +1,4 @@
+import { useSubmitContext } from "../context/SubmitContext.js";
+export function useSubmitFeature() {
+  return useSubmitContext();
+}

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

@@ -0,0 +1,5 @@
+export interface UseUpsellReturn {
+    upsell: (fromId: string, toId: string) => Promise<void>;
+    downsell: (priceId: string) => Promise<void>;
+}
+export declare function useUpsell(): UseUpsellReturn;

package/es/checkout/hooks/useUpsell.js

@@ -0,0 +1,25 @@
+import { useMemoizedFn } from "ahooks";
+import { getErrorMessage } from "../../types/checkout-augmented.js";
+import { useSessionContext } from "../context/SessionContext.js";
+import { usePaymentMethodContext } from "../context/PaymentMethodContext.js";
+import { performUpsell, performDownsell } from "../core/lineItems.js";
+export function useUpsell() {
+  const { session, effectiveSessionId, refresh } = useSessionContext();
+  const { currency } = usePaymentMethodContext();
+  const currencyId = currency?.id || null;
+  const upsell = useMemoizedFn(async (fromId, toId) => {
+    try {
+      await performUpsell(effectiveSessionId, fromId, toId, session, currencyId, refresh);
+    } catch (err) {
+      console.error("Failed to upsell:", getErrorMessage(err));
+    }
+  });
+  const downsell = useMemoizedFn(async (priceId) => {
+    try {
+      await performDownsell(effectiveSessionId, priceId, session, currencyId, refresh);
+    } catch (err) {
+      console.error("Failed to downsell:", getErrorMessage(err));
+    }
+  });
+  return { upsell, downsell };
+}

package/es/checkout/index.d.ts

@@ -0,0 +1,37 @@
+export type { UseCheckoutReturn, SubmitStatus, SubmitContext, FieldConfig, CheckoutFormData, CheckoutResult, } from './types';
+export { CheckoutProvider, type CheckoutProviderProps, useSessionContext, usePaymentMethodContext, useExchangeRateContext, useCustomerFormContext, useSubmitContext, } from './context';
+export { useCheckout } from './hooks/useCheckout';
+export { useCheckoutSession } from './hooks/useCheckoutSession';
+export type { UseCheckoutSessionReturn, SessionData } from './hooks/useCheckoutSession';
+export { usePaymentMethod } from './hooks/usePaymentMethod';
+export type { UsePaymentMethodReturn } from './hooks/usePaymentMethod';
+export { usePricing } from './hooks/usePricing';
+export type { UsePricingReturn } from './hooks/usePricing';
+export { useCustomerForm } from './hooks/useCustomerForm';
+export type { UseCustomerFormReturn } from './hooks/useCustomerForm';
+export { useSubmit } from './hooks/useSubmit';
+export type { UseSubmitReturn } from './hooks/useSubmit';
+export { useProduct } from './hooks/useProduct';
+export type { UseProductReturn } from './hooks/useProduct';
+export { useLineItems } from './hooks/useLineItems';
+export type { UseLineItemsReturn } from './hooks/useLineItems';
+export { useBillingInterval } from './hooks/useBillingInterval';
+export type { UseBillingIntervalReturn, BillingIntervalData } from './hooks/useBillingInterval';
+export { useUpsell } from './hooks/useUpsell';
+export type { UseUpsellReturn } from './hooks/useUpsell';
+export { useCrossSell } from './hooks/useCrossSell';
+export type { UseCrossSellReturn } from './hooks/useCrossSell';
+export { usePromotion } from './hooks/usePromotion';
+export type { UsePromotionReturn } from './hooks/usePromotion';
+export { useExchangeRate } from './hooks/useExchangeRate';
+export type { UseExchangeRateReturn } from './hooks/useExchangeRate';
+export { useSlippage } from './hooks/useSlippage';
+export type { UseSlippageReturn } from './hooks/useSlippage';
+export { useCheckoutStatus } from './hooks/useCheckoutStatus';
+export type { UseCheckoutStatusReturn } from './hooks/useCheckoutStatus';
+export { usePricingFeature } from './hooks/usePricingFeature';
+export type { UsePricingFeatureReturn } from './hooks/usePricingFeature';
+export { usePaymentMethodFeature } from './hooks/usePaymentMethodFeature';
+export { useCustomerFormFeature } from './hooks/useCustomerFormFeature';
+export { useSubmitFeature } from './hooks/useSubmitFeature';
+export { getPriceUnitAmountByCurrency } from '../shared/format';

package/es/checkout/index.js

@@ -0,0 +1,28 @@
+export {
+  CheckoutProvider,
+  useSessionContext,
+  usePaymentMethodContext,
+  useExchangeRateContext,
+  useCustomerFormContext,
+  useSubmitContext
+} from "./context/index.js";
+export { useCheckout } from "./hooks/useCheckout.js";
+export { useCheckoutSession } from "./hooks/useCheckoutSession.js";
+export { usePaymentMethod } from "./hooks/usePaymentMethod.js";
+export { usePricing } from "./hooks/usePricing.js";
+export { useCustomerForm } from "./hooks/useCustomerForm.js";
+export { useSubmit } from "./hooks/useSubmit.js";
+export { useProduct } from "./hooks/useProduct.js";
+export { useLineItems } from "./hooks/useLineItems.js";
+export { useBillingInterval } from "./hooks/useBillingInterval.js";
+export { useUpsell } from "./hooks/useUpsell.js";
+export { useCrossSell } from "./hooks/useCrossSell.js";
+export { usePromotion } from "./hooks/usePromotion.js";
+export { useExchangeRate } from "./hooks/useExchangeRate.js";
+export { useSlippage } from "./hooks/useSlippage.js";
+export { useCheckoutStatus } from "./hooks/useCheckoutStatus.js";
+export { usePricingFeature } from "./hooks/usePricingFeature.js";
+export { usePaymentMethodFeature } from "./hooks/usePaymentMethodFeature.js";
+export { useCustomerFormFeature } from "./hooks/useCustomerFormFeature.js";
+export { useSubmitFeature } from "./hooks/useSubmitFeature.js";
+export { getPriceUnitAmountByCurrency } from "../shared/format.js";