@solvapay/react 2.2.2 → 2.3.0-preview-f55fd65678532eecc36038f00bffe65a31029a07

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @solvapay/react changelog
 
+## 2.3.0-preview-f55fd65678532eecc36038f00bffe65a31029a07
+
+### Minor Changes
+
+- 227c25e: Drop Stripe's duplicate mandate line from the MCP payment surfaces. Enabling auto-recharge makes the backend set `setup_future_usage`, which made Stripe's `PaymentElement` render its own terms sentence ("you allow <merchant> to charge your card for future payments…") between the card fields and the country selector — a second authorization in Stripe's wording, directly above the `MandateText` that already states the charge. `McpTopupView` and the checkout PAYG step now pass `terms: { card: 'never' }` and own the full mandate.
+
+  `MandateText` takes a new `savesPaymentMethod` prop; the `topup` mandate template appends a saved-card sentence when it is set, so the card-storage disclosure moves into SolvaPay's copy rather than disappearing. `MandateContext` gains a matching optional `savesPaymentMethod` field for custom copy bundles. The default is unchanged for every other call site: `DEFAULT_PAYMENT_ELEMENT_OPTIONS` still leaves Stripe's terms on, so integrators composing `TopupForm` without `MandateText` keep Stripe's line.
+
+### Patch Changes
+
+- b3b5b72: Checkout PAYG amount step now collects the same inline auto-recharge toggle as top-up. The account tool no longer advertises `view: auto-recharge`; leftover stamps still open the account surface.
+- c3e5135: MCP checkout and top-up now always show plans and amounts. The Stripe CSP probe still starts at mount so Stripe.js can warm in the background, but a blocked or slow host only falls back to hosted checkout at the payment step — a cold Stripe.js load can no longer hide the plan picker. Passing `publishableKey={null}` keeps the same plan/amount steps and forces the hosted handoff only when the customer continues to pay.
+
+  A blocked host now costs one extra click (pick a plan or amount, then get the hosted handoff). The cancelled-purchase notice that lives inside the hosted fallback also appears at the payment step rather than immediately on the checkout surface.
+
+- 35da494: MCP account now shows real auto-recharge status and links out to the hosted portal form. Top-up `create_payment_intent` forwards `autoRecharge` so the inline toggle actually persists. `McpAutoRechargeView` and the `views.autoRecharge` override are removed — `view: 'auto-recharge'` renders the account surface.
+- b3b5b72: Top-up success is now a terminal receipt (matching checkout): no back link, "Add more credits", or portal CTA. The conversation continues via `notifySuccess` instead of routing back to a stale account snapshot.
+- Updated dependencies [b3b5b72]
+- Updated dependencies [35da494]
+  - @solvapay/mcp-core@0.4.3-preview-f55fd65678532eecc36038f00bffe65a31029a07
+
 ## 2.2.2
 
 ### Patch Changes

package/dist/{UsageMeter-BZWfC5KX.d.ts → UsageMeter-DZxLZt4A.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { _ as UsageSnapshot } from './useUsage-DSPWQ37m.js';
+import { _ as UsageSnapshot } from './useUsage-CwvxnICf.js';
 
 /**
  * `<UsageMeter>` compound primitive — renders the authenticated customer's

package/dist/{UsageMeter-BiujMmVR.d.cts → UsageMeter-zKMPnwCx.d.cts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { _ as UsageSnapshot } from './useUsage-CRd_E6J3.cjs';
+import { _ as UsageSnapshot } from './useUsage-DNXxsmyG.cjs';
 
 /**
  * `<UsageMeter>` compound primitive — renders the authenticated customer's

package/dist/{chunk-GPP4MY3I.js → chunk-JXH36VLL.js}

@@ -377,7 +377,8 @@ var enCopy = {
     },
     topup: (ctx) => {
       const product = ctx.product?.name ? ` to add credits to your ${ctx.product.name} balance` : " to add credits to your balance";
-      return `By confirming, you authorize ${ctx.merchant.legalName} to charge ${ctx.amountFormatted}${product}. Credits are non-refundable once used. Payments are processed by SolvaPay.${termsSentence(ctx)}`;
+      const savedCard = ctx.savesPaymentMethod ? ` You also authorize ${ctx.merchant.legalName} to save this card and charge it for future auto-recharges, which you can turn off any time.` : "";
+      return `By confirming, you authorize ${ctx.merchant.legalName} to charge ${ctx.amountFormatted}${product}. Credits are non-refundable once used.${savedCard} Payments are processed by SolvaPay.${termsSentence(ctx)}`;
     },
     usageMetered: (ctx) => {
       const measures = ctx.plan?.measures ?? "request";
@@ -616,8 +617,10 @@ var enCopy = {
     addFunds: "Add funds",
     autoRechargeOn: "Auto-recharge on",
     autoRechargeOff: "Auto-recharge off",
-    turnOn: "Turn on \u2192",
-    manage: "Manage \u2192",
+    autoRechargePending: "Auto-recharge starts once this payment clears",
+    turnOn: "Turn on",
+    manage: "Manage",
+    fixCard: "Fix card",
     autoRechargeOffCaption: "Calls fail the moment the balance runs out.",
     autoRechargeOffFixCaption: "Turning it on stops this happening again.",
     callsFailingCaption: "The plan is active, but calls fail until you add credits.",
@@ -3126,6 +3129,7 @@ var MandateText = forwardRef4(
     mode,
     amountMinor,
     currency,
+    savesPaymentMethod,
     asChild,
     children,
     ...rest
@@ -3167,9 +3171,10 @@ var MandateText = forwardRef4(
         } : void 0,
         product: product ? { name: product.name } : void 0,
         amountFormatted,
-        trialDays: plan?.trialDays
+        trialDays: plan?.trialDays,
+        savesPaymentMethod
       }),
-      [merchant, plan, product, amountFormatted]
+      [merchant, plan, product, amountFormatted, savesPaymentMethod]
     );
     const template = copy.mandate[resolvedVariant];
     const text = typeof template === "function" ? template(ctx) : template;
@@ -7037,183 +7042,6 @@ function useUsageMeter() {
   return useUsageMeterCtx("useUsageMeter");
 }
 
-// src/hooks/useAutoRecharge.ts
-import { useCallback as useCallback21, useEffect as useEffect14, useRef as useRef9, useState as useState18 } from "react";
-function mergeAutoRechargeConfig(config, display) {
-  return display ? { ...config, display } : config;
-}
-async function fetchAutoRecharge(config) {
-  const transport = config?.transport ?? createHttpTransport(config);
-  if (!transport.getAutoRecharge) return null;
-  const response = await transport.getAutoRecharge();
-  if (!response.config) return null;
-  return mergeAutoRechargeConfig(response.config, response.display);
-}
-function useAutoRecharge() {
-  const { _config } = useSolvaPay();
-  const key = autoRechargeCacheKeyFor(_config);
-  const [config, setConfig] = useState18(
-    () => autoRechargeCache.get(key)?.config ?? null
-  );
-  const [loading, setLoading] = useState18(() => {
-    const cached = autoRechargeCache.get(key);
-    return !cached || !cached.config && !cached.promise;
-  });
-  const [saving, setSaving] = useState18(false);
-  const [disabling, setDisabling] = useState18(false);
-  const [error, setError] = useState18(null);
-  const requestSeq = useRef9(0);
-  const load = useCallback21(
-    async (force = false) => {
-      const seq = requestSeq.current;
-      const cached = autoRechargeCache.get(key);
-      const now = Date.now();
-      if (!force && cached?.config && now - cached.timestamp < CACHE_DURATION2) {
-        if (seq !== requestSeq.current) return;
-        setConfig(cached.config);
-        setLoading(false);
-        setError(null);
-        return;
-      }
-      if (!force && cached?.promise) {
-        setLoading(true);
-        try {
-          const value = await cached.promise;
-          if (seq !== requestSeq.current) return;
-          setConfig(value);
-          setError(null);
-        } catch (caught) {
-          if (seq !== requestSeq.current) return;
-          setError(caught instanceof Error ? caught : new Error(String(caught)));
-        } finally {
-          if (seq === requestSeq.current) {
-            setLoading(false);
-          }
-        }
-        return;
-      }
-      setLoading(true);
-      setError(null);
-      const promise = fetchAutoRecharge(_config);
-      writeAutoRechargeCache(key, {
-        config: cached?.config ?? null,
-        promise,
-        timestamp: now
-      });
-      try {
-        const value = await promise;
-        if (seq !== requestSeq.current) return;
-        writeAutoRechargeCache(key, { config: value, promise: null, timestamp: Date.now() });
-        setConfig(value);
-      } catch (caught) {
-        if (seq !== requestSeq.current) return;
-        const err = caught instanceof Error ? caught : new Error(String(caught));
-        writeAutoRechargeCache(key, {
-          config: cached?.config ?? null,
-          promise: null,
-          timestamp: Date.now()
-        });
-        setError(err);
-      } finally {
-        if (seq === requestSeq.current) {
-          setLoading(false);
-        }
-      }
-    },
-    [_config, key]
-  );
-  useEffect14(() => {
-    void load();
-  }, [load]);
-  useEffect14(() => {
-    return subscribeAutoRecharge(key, () => {
-      const cached = autoRechargeCache.get(key);
-      if (cached) {
-        setConfig(cached.config);
-        return;
-      }
-      void load(true);
-    });
-  }, [key, load]);
-  const refresh = useCallback21(
-    async (force = true) => {
-      await load(force);
-    },
-    [load]
-  );
-  const save = useCallback21(
-    async (input) => {
-      const transport = _config?.transport ?? createHttpTransport(_config);
-      if (!transport.saveAutoRecharge) {
-        throw new Error("saveAutoRecharge is not available on this transport");
-      }
-      setSaving(true);
-      setError(null);
-      const seq = ++requestSeq.current;
-      try {
-        const result = await transport.saveAutoRecharge(input);
-        if (seq !== requestSeq.current) return result;
-        const nextConfig = mergeAutoRechargeConfig(result.config, result.display);
-        writeAutoRechargeCache(key, {
-          config: nextConfig,
-          promise: null,
-          timestamp: Date.now()
-        });
-        setConfig(nextConfig);
-        return result;
-      } catch (caught) {
-        const err = caught instanceof Error ? caught : new Error(String(caught));
-        setError(err);
-        throw err;
-      } finally {
-        setSaving(false);
-      }
-    },
-    [_config, key]
-  );
-  const disable = useCallback21(async () => {
-    const transport = _config?.transport ?? createHttpTransport(_config);
-    if (!transport.disableAutoRecharge) {
-      throw new Error("disableAutoRecharge is not available on this transport");
-    }
-    setDisabling(true);
-    setError(null);
-    const seq = ++requestSeq.current;
-    try {
-      const result = await transport.disableAutoRecharge();
-      if (seq === requestSeq.current) {
-        setConfig((current) => {
-          const disabledConfig = current ? { ...current, enabled: false } : null;
-          writeAutoRechargeCache(key, {
-            config: disabledConfig,
-            promise: null,
-            timestamp: Date.now()
-          });
-          return disabledConfig;
-        });
-        await refresh(true);
-        setConfig((current) => {
-          const disabledConfig = current ? { ...current, enabled: false } : null;
-          writeAutoRechargeCache(key, {
-            config: disabledConfig,
-            promise: null,
-            timestamp: Date.now()
-          });
-          return disabledConfig;
-        });
-      }
-      return result;
-    } catch (caught) {
-      const err = caught instanceof Error ? caught : new Error(String(caught));
-      setError(err);
-      throw err;
-    } finally {
-      setDisabling(false);
-    }
-  }, [_config, key, refresh]);
-  return { config, loading, saving, disabling, error, refresh, save, disable };
-}
-
 // src/utils/credit-estimation.ts
 import { creditsToDisplayMinorUnits as creditsToDisplayMinorUnits2 } from "@solvapay/core";
 function estimateCredits(resolvedAmountMajor, currency, creditsPerMinorUnit, displayExchangeRate) {
@@ -7518,7 +7346,7 @@ function flipUnitValue(anchor, targetUnit, currency, creditsPerMinorUnit, displa
 }
 
 // src/hooks/useCheckoutFlow.ts
-import { useCallback as useCallback22, useMemo as useMemo17, useRef as useRef10, useState as useState19 } from "react";
+import { useCallback as useCallback21, useMemo as useMemo17, useRef as useRef9, useState as useState18 } from "react";
 
 // src/primitives/checkout/shared.ts
 import {
@@ -7644,10 +7472,10 @@ function resolveInitialCheckoutStep(initialStep) {
 }
 function useCheckoutFlow(opts) {
   const { productRef, initialStep = "plan", initialAmountMinor = null } = opts;
-  const onPlanSelectRef = useRef10(opts.onPlanSelect);
-  const onAmountSelectRef = useRef10(opts.onAmountSelect);
-  const onPurchaseSuccessRef = useRef10(opts.onPurchaseSuccess);
-  const onErrorRef = useRef10(opts.onError);
+  const onPlanSelectRef = useRef9(opts.onPlanSelect);
+  const onAmountSelectRef = useRef9(opts.onAmountSelect);
+  const onPurchaseSuccessRef = useRef9(opts.onPurchaseSuccess);
+  const onErrorRef = useRef9(opts.onError);
   onPlanSelectRef.current = opts.onPlanSelect;
   onAmountSelectRef.current = opts.onAmountSelect;
   onPurchaseSuccessRef.current = opts.onPurchaseSuccess;
@@ -7660,7 +7488,7 @@ function useCheckoutFlow(opts) {
   const { creditsPerMinorUnit, displayExchangeRate, adjustBalance } = balance;
   const { refetchPurchase } = useSolvaPay();
   const { merchant } = useMerchant();
-  const [topupCurrencyOverride, setTopupCurrencyOverride] = useState19(null);
+  const [topupCurrencyOverride, setTopupCurrencyOverride] = useState18(null);
   const topupCurrencies = useMemo17(() => {
     const fromMerchant = (merchant?.supportedTopupCurrencies ?? []).map((code) => code.toUpperCase()).filter(Boolean);
     const fallback = opts.topupCurrency?.toUpperCase() ?? merchant?.defaultCurrency?.toUpperCase() ?? null;
@@ -7671,22 +7499,22 @@ function useCheckoutFlow(opts) {
   const planPickerCurrency = planCtx.preferredCurrency?.toUpperCase() ?? null;
   const topupCurrency = (topupCurrencyOverride && topupCurrencies.includes(topupCurrencyOverride) ? topupCurrencyOverride : null) ?? (planPickerCurrency && topupCurrencies.includes(planPickerCurrency) ? planPickerCurrency : null) ?? resolvedDefaultTopupCurrency;
   const topupCurrencyReady = topupCurrency != null;
-  const setTopupCurrency = useCallback22((code) => {
+  const setTopupCurrency = useCallback21((code) => {
     const normalized = code.toUpperCase();
     setTopupCurrencyOverride(normalized);
   }, []);
-  const [step, setStep] = useState19(() => resolveInitialCheckoutStep(initialStep));
-  const [status, setStatus] = useState19("idle");
-  const [selectedAmountMinor, setSelectedAmountMinor] = useState19(initialAmountMinor);
-  const [successMeta, setSuccessMeta] = useState19(null);
-  const [error, setError] = useState19(null);
-  const selectedAmountMinorRef = useRef10(initialAmountMinor);
+  const [step, setStep] = useState18(() => resolveInitialCheckoutStep(initialStep));
+  const [status, setStatus] = useState18("idle");
+  const [selectedAmountMinor, setSelectedAmountMinor] = useState18(initialAmountMinor);
+  const [successMeta, setSuccessMeta] = useState18(null);
+  const [error, setError] = useState18(null);
+  const selectedAmountMinorRef = useRef9(initialAmountMinor);
   const selectedPlan = planCtx.selectedPlan;
   const selectedPlanRef = planCtx.selectedPlanRef;
   const selectedPlanShape = toBootstrapPlanLike(selectedPlan);
   const branch = selectedPlanShape ? isPayg(selectedPlanShape) ? "payg" : "recurring" : null;
   const canGoBack = step === "amount" || step === "payment";
-  const selectPlan = useCallback22(
+  const selectPlan = useCallback21(
     (ref) => {
       planCtx.select(ref);
       const plan = planCtx.plans.find((p) => p.reference === ref) ?? null;
@@ -7696,7 +7524,7 @@ function useCheckoutFlow(opts) {
     },
     [planCtx]
   );
-  const selectAmount = useCallback22(
+  const selectAmount = useCallback21(
     (amountMinor) => {
       selectedAmountMinorRef.current = amountMinor;
       setSelectedAmountMinor(amountMinor);
@@ -7705,7 +7533,7 @@ function useCheckoutFlow(opts) {
     },
     [topupCurrency]
   );
-  const runActivate = useCallback22(async () => {
+  const runActivate = useCallback21(async () => {
     if (!selectedPlanShape || !selectedPlanRef) return false;
     setError(null);
     setStatus("activating");
@@ -7737,7 +7565,7 @@ function useCheckoutFlow(opts) {
       return false;
     }
   }, [balance, locale, productRef, selectedPlanRef, selectedPlanShape, transport]);
-  const advanceFromPlan = useCallback22(async () => {
+  const advanceFromPlan = useCallback21(async () => {
     if (!selectedPlanShape || !selectedPlanRef) return;
     if (branch === "payg") {
       if (planCtx.currentPlanRef === selectedPlanRef) {
@@ -7775,7 +7603,7 @@ function useCheckoutFlow(opts) {
     setError(null);
     setStep("payment");
   }, [balance, branch, locale, planCtx.currentPlanRef, runActivate, selectedPlanRef, selectedPlanShape]);
-  const recordPaygSuccess = useCallback22(
+  const recordPaygSuccess = useCallback21(
     (creditsAddedFromBackend) => {
       if (!selectedPlanShape || selectedAmountMinor == null) return;
       const currency = topupCurrency ?? "USD";
@@ -7819,7 +7647,7 @@ function useCheckoutFlow(opts) {
       transport
     ]
   );
-  const recordRecurringSuccess = useCallback22(() => {
+  const recordRecurringSuccess = useCallback21(() => {
     if (!selectedPlanShape) return;
     const pricingOption = selectedPlan ? resolvePlanPricingOption(selectedPlan, planSelection?.selectedCurrency) : {
       currency: selectedPlanShape.currency ?? "USD",
@@ -7839,7 +7667,7 @@ function useCheckoutFlow(opts) {
     setStep("success");
     onPurchaseSuccessRef.current?.(meta);
   }, [selectedPlanShape, selectedPlan, planSelection?.selectedCurrency]);
-  const advance = useCallback22(async () => {
+  const advance = useCallback21(async () => {
     if (step === "plan") {
       await advanceFromPlan();
       return;
@@ -7866,7 +7694,7 @@ function useCheckoutFlow(opts) {
     selectedAmountMinor,
     step
   ]);
-  const back = useCallback22(() => {
+  const back = useCallback21(() => {
     setError(null);
     if (step === "amount") {
       setStep("plan");
@@ -7877,7 +7705,7 @@ function useCheckoutFlow(opts) {
       return;
     }
   }, [branch, step]);
-  const reset = useCallback22(() => {
+  const reset = useCallback21(() => {
     setStep("plan");
     selectedAmountMinorRef.current = null;
     setSelectedAmountMinor(null);
@@ -7886,13 +7714,13 @@ function useCheckoutFlow(opts) {
     setStatus("idle");
     setTopupCurrencyOverride(null);
   }, []);
-  const retry = useCallback22(async () => {
+  const retry = useCallback21(async () => {
     if (status !== "error") return;
     if (step === "plan" && branch === "payg") {
       await runActivate();
     }
   }, [branch, runActivate, status, step]);
-  const notifyPaymentSuccess = useCallback22(
+  const notifyPaymentSuccess = useCallback21(
     (_intent, extras) => {
       if (branch === "payg") {
         recordPaygSuccess(extras?.creditsAdded);
@@ -7952,6 +7780,11 @@ function useCheckoutFlow(opts) {
 
 export {
   createTransportCacheKey,
+  autoRechargeCache,
+  CACHE_DURATION2 as CACHE_DURATION,
+  autoRechargeCacheKeyFor,
+  writeAutoRechargeCache,
+  subscribeAutoRecharge,
   filterPurchases,
   getActivePurchases,
   getCancelledPurchasesWithEndDate,
@@ -8112,7 +7945,6 @@ export {
   formatPaygRate,
   inferIncludedUnits,
   planMeterName,
-  useAutoRecharge,
   estimateCredits,
   estimateCurrencyMajorFromCredits,
   createDefaultAutoRechargeForm,
@@ -8121,7 +7953,6 @@ export {
   validateAutoRechargeForm,
   configToAutoRechargeInput,
   configToForm,
-  formatAmountWithUnit,
   buildSummaryLine,
   flipUnitValue,
   useCheckoutFlow