@solvapay/react 2.2.2-preview-cf2672297243fbf98ba33872a7348aca170e7b01 → 2.2.2

package/CHANGELOG.md

@@ -1,25 +1,10 @@
 # @solvapay/react changelog
 
-## 2.2.2-preview-cf2672297243fbf98ba33872a7348aca170e7b01
+## 2.2.2
 
 ### 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.
-
 - 567db3e: The customer's active plan is no longer selectable in the plan picker. The active PAYG plan is no longer auto-selected — topping up happens from the account surface, not by re-activating the current plan from the list.
-- 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 [c67e78e]
-- Updated dependencies [dbd0108]
-- Updated dependencies [b3b5b72]
-- Updated dependencies [35da494]
-- Updated dependencies [c67e78e]
-- Updated dependencies [c67e78e]
-- Updated dependencies [c67e78e]
-  - @solvapay/mcp-core@0.4.2-preview-cf2672297243fbf98ba33872a7348aca170e7b01
 
 ## 2.2.1
 

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

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

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

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

package/dist/{chunk-3OR5EEP4.js → chunk-4UFQDYG5.js}

@@ -8,7 +8,7 @@ import {
   useOpenExternal,
   useSolvaPay,
   useTransport
-} from "./chunk-JVBZHE7B.js";
+} from "./chunk-GPP4MY3I.js";
 
 // src/hooks/usePaymentMethod.ts
 import { useCallback, useEffect, useState } from "react";

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

@@ -616,10 +616,8 @@ var enCopy = {
     addFunds: "Add funds",
     autoRechargeOn: "Auto-recharge on",
     autoRechargeOff: "Auto-recharge off",
-    autoRechargePending: "Auto-recharge starts once this payment clears",
-    turnOn: "Turn on",
-    manage: "Manage",
-    fixCard: "Fix card",
+    turnOn: "Turn on \u2192",
+    manage: "Manage \u2192",
     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.",
@@ -7039,6 +7037,183 @@ 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) {
@@ -7343,7 +7518,7 @@ function flipUnitValue(anchor, targetUnit, currency, creditsPerMinorUnit, displa
 }
 
 // src/hooks/useCheckoutFlow.ts
-import { useCallback as useCallback21, useMemo as useMemo17, useRef as useRef9, useState as useState18 } from "react";
+import { useCallback as useCallback22, useMemo as useMemo17, useRef as useRef10, useState as useState19 } from "react";
 
 // src/primitives/checkout/shared.ts
 import {
@@ -7469,10 +7644,10 @@ function resolveInitialCheckoutStep(initialStep) {
 }
 function useCheckoutFlow(opts) {
   const { productRef, initialStep = "plan", initialAmountMinor = null } = opts;
-  const onPlanSelectRef = useRef9(opts.onPlanSelect);
-  const onAmountSelectRef = useRef9(opts.onAmountSelect);
-  const onPurchaseSuccessRef = useRef9(opts.onPurchaseSuccess);
-  const onErrorRef = useRef9(opts.onError);
+  const onPlanSelectRef = useRef10(opts.onPlanSelect);
+  const onAmountSelectRef = useRef10(opts.onAmountSelect);
+  const onPurchaseSuccessRef = useRef10(opts.onPurchaseSuccess);
+  const onErrorRef = useRef10(opts.onError);
   onPlanSelectRef.current = opts.onPlanSelect;
   onAmountSelectRef.current = opts.onAmountSelect;
   onPurchaseSuccessRef.current = opts.onPurchaseSuccess;
@@ -7485,7 +7660,7 @@ function useCheckoutFlow(opts) {
   const { creditsPerMinorUnit, displayExchangeRate, adjustBalance } = balance;
   const { refetchPurchase } = useSolvaPay();
   const { merchant } = useMerchant();
-  const [topupCurrencyOverride, setTopupCurrencyOverride] = useState18(null);
+  const [topupCurrencyOverride, setTopupCurrencyOverride] = useState19(null);
   const topupCurrencies = useMemo17(() => {
     const fromMerchant = (merchant?.supportedTopupCurrencies ?? []).map((code) => code.toUpperCase()).filter(Boolean);
     const fallback = opts.topupCurrency?.toUpperCase() ?? merchant?.defaultCurrency?.toUpperCase() ?? null;
@@ -7496,22 +7671,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 = useCallback21((code) => {
+  const setTopupCurrency = useCallback22((code) => {
     const normalized = code.toUpperCase();
     setTopupCurrencyOverride(normalized);
   }, []);
-  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 [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 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 = useCallback21(
+  const selectPlan = useCallback22(
     (ref) => {
       planCtx.select(ref);
       const plan = planCtx.plans.find((p) => p.reference === ref) ?? null;
@@ -7521,7 +7696,7 @@ function useCheckoutFlow(opts) {
     },
     [planCtx]
   );
-  const selectAmount = useCallback21(
+  const selectAmount = useCallback22(
     (amountMinor) => {
       selectedAmountMinorRef.current = amountMinor;
       setSelectedAmountMinor(amountMinor);
@@ -7530,7 +7705,7 @@ function useCheckoutFlow(opts) {
     },
     [topupCurrency]
   );
-  const runActivate = useCallback21(async () => {
+  const runActivate = useCallback22(async () => {
     if (!selectedPlanShape || !selectedPlanRef) return false;
     setError(null);
     setStatus("activating");
@@ -7562,7 +7737,7 @@ function useCheckoutFlow(opts) {
       return false;
     }
   }, [balance, locale, productRef, selectedPlanRef, selectedPlanShape, transport]);
-  const advanceFromPlan = useCallback21(async () => {
+  const advanceFromPlan = useCallback22(async () => {
     if (!selectedPlanShape || !selectedPlanRef) return;
     if (branch === "payg") {
       if (planCtx.currentPlanRef === selectedPlanRef) {
@@ -7600,7 +7775,7 @@ function useCheckoutFlow(opts) {
     setError(null);
     setStep("payment");
   }, [balance, branch, locale, planCtx.currentPlanRef, runActivate, selectedPlanRef, selectedPlanShape]);
-  const recordPaygSuccess = useCallback21(
+  const recordPaygSuccess = useCallback22(
     (creditsAddedFromBackend) => {
       if (!selectedPlanShape || selectedAmountMinor == null) return;
       const currency = topupCurrency ?? "USD";
@@ -7644,7 +7819,7 @@ function useCheckoutFlow(opts) {
       transport
     ]
   );
-  const recordRecurringSuccess = useCallback21(() => {
+  const recordRecurringSuccess = useCallback22(() => {
     if (!selectedPlanShape) return;
     const pricingOption = selectedPlan ? resolvePlanPricingOption(selectedPlan, planSelection?.selectedCurrency) : {
       currency: selectedPlanShape.currency ?? "USD",
@@ -7664,7 +7839,7 @@ function useCheckoutFlow(opts) {
     setStep("success");
     onPurchaseSuccessRef.current?.(meta);
   }, [selectedPlanShape, selectedPlan, planSelection?.selectedCurrency]);
-  const advance = useCallback21(async () => {
+  const advance = useCallback22(async () => {
     if (step === "plan") {
       await advanceFromPlan();
       return;
@@ -7691,7 +7866,7 @@ function useCheckoutFlow(opts) {
     selectedAmountMinor,
     step
   ]);
-  const back = useCallback21(() => {
+  const back = useCallback22(() => {
     setError(null);
     if (step === "amount") {
       setStep("plan");
@@ -7702,7 +7877,7 @@ function useCheckoutFlow(opts) {
       return;
     }
   }, [branch, step]);
-  const reset = useCallback21(() => {
+  const reset = useCallback22(() => {
     setStep("plan");
     selectedAmountMinorRef.current = null;
     setSelectedAmountMinor(null);
@@ -7711,13 +7886,13 @@ function useCheckoutFlow(opts) {
     setStatus("idle");
     setTopupCurrencyOverride(null);
   }, []);
-  const retry = useCallback21(async () => {
+  const retry = useCallback22(async () => {
     if (status !== "error") return;
     if (step === "plan" && branch === "payg") {
       await runActivate();
     }
   }, [branch, runActivate, status, step]);
-  const notifyPaymentSuccess = useCallback21(
+  const notifyPaymentSuccess = useCallback22(
     (_intent, extras) => {
       if (branch === "payg") {
         recordPaygSuccess(extras?.creditsAdded);
@@ -7777,11 +7952,6 @@ function useCheckoutFlow(opts) {
 
 export {
   createTransportCacheKey,
-  autoRechargeCache,
-  CACHE_DURATION2 as CACHE_DURATION,
-  autoRechargeCacheKeyFor,
-  writeAutoRechargeCache,
-  subscribeAutoRecharge,
   filterPurchases,
   getActivePurchases,
   getCancelledPurchasesWithEndDate,
@@ -7942,6 +8112,7 @@ export {
   formatPaygRate,
   inferIncludedUnits,
   planMeterName,
+  useAutoRecharge,
   estimateCredits,
   estimateCurrencyMajorFromCredits,
   createDefaultAutoRechargeForm,
@@ -7950,6 +8121,7 @@ export {
   validateAutoRechargeForm,
   configToAutoRechargeInput,
   configToForm,
+  formatAmountWithUnit,
   buildSummaryLine,
   flipUnitValue,
   useCheckoutFlow