@solvapay/react 2.1.1 → 2.2.0-preview-11dbbe603cd1b9a44cc41b5eee3686bc4000f97f

package/CHANGELOG.md

@@ -1,11 +1,32 @@
 # @solvapay/react changelog
 
-## 2.1.1
+## 2.2.0-preview-11dbbe603cd1b9a44cc41b5eee3686bc4000f97f
+
+### Minor Changes
+
+- 4771b85: Fix outbound links being silently dropped inside MCP app iframes. Hosts whose iframe sandbox omits `allow-popups` — Claude on web and desktop — discard both `<a target="_blank">` and `window.open()`, so "Manage account", hosted checkout, "Reopen checkout", Terms/Privacy, the mandate links and the seller support link all rendered as live controls that did nothing when clicked. Every outbound link the SDK renders now routes through the host's `ui/open-link` request when the host declares the `openLinks` capability, and keeps its native `href` navigation everywhere else (plain web checkout, MCP Inspector, ChatGPT).
+
+  Adds `useExternalLinkClick()`, `useOpenExternal()` and `<ExternalLinkProvider>`. `<McpBridgeProvider>` (and therefore `<McpApp>`) mounts the opener automatically from `app.openLink`, so integrators on the turnkey shell get the fix without code changes. Mount `<ExternalLinkProvider>` yourself only when hand-rolling a shell for some other sandboxed host.
+
+- ce04a3b: Fix plan switching and clarify the plan card on the MCP account surface.
+
+  The account view only rendered `<CurrentPlanCard>` for a paid purchase, so customers on Free or pay-as-you-go saw the pick-a-plan empty state instead of their actual plan, with no way to switch. It now renders for any active purchase and offers `Upgrade` or `Change plan` based on the catalog, resolved through the new `mergePlanSnapshot` / `findCatalogPlan` helpers so a thin purchase snapshot still matches its catalog plan.
+
+  A $0 usage-based plan also rendered as `Free`. `<CurrentPlanCard>` now formats a usage rate for metered plans (falling back to the catalog plan when the snapshot has no `options[]`) and omits the price line when no rate can be resolved.
+
+  UI: the plan card no longer nests a second bordered box inside the MCP card, the surface carries a `Your plan` title in the same slot as checkout's `Choose a plan`, and the price/rate and balance values can be captioned via the new `showFieldLabels` prop (off by default).
 
 ### Patch Changes
 
+- 4771b85: Widen the `@solvapay/mcp-core` peer range to accept `^0.4.0`. Existing installs pinned to `^0.3.0` keep resolving to 0.3.x and are unaffected; moving to mcp-core 0.4.x is now an explicit opt-in that no longer forces a peer conflict.
+- 96fc49f: Stop seller-card email and support URL from navigating the MCP widget iframe. `mailto:` and `target="_blank"` anchors were landing the sandboxed frame on a blocked page with no way back; both rows now render as plain `DetailRow` text, matching the customer-card email.
 - Updated dependencies [a98faa9]
-  - @solvapay/core@1.6.0
+- Updated dependencies [0f5db86]
+- Updated dependencies [4d6340a]
+- Updated dependencies [fbaabc8]
+- Updated dependencies [5d37370]
+  - @solvapay/core@1.6.0-preview-11dbbe603cd1b9a44cc41b5eee3686bc4000f97f
+  - @solvapay/mcp-core@0.4.0-preview-11dbbe603cd1b9a44cc41b5eee3686bc4000f97f
 
 ## 2.1.0
 

package/dist/{chunk-HQH6KSXJ.js → chunk-EWB43JVC.js}

@@ -30,6 +30,7 @@ import {
   useBalance,
   useCheckoutFlow,
   useCopy,
+  useExternalLinkClick,
   useLocale,
   usePlan,
   usePlanSelection,
@@ -40,7 +41,7 @@ import {
   useTopupAmountSelector,
   withPaymentElementDefaults,
   writeAutoRechargeCache
-} from "./chunk-LL6AYSTC.js";
+} from "./chunk-WISTNSUH.js";
 
 // src/TopupForm.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -3160,9 +3161,10 @@ function Plans({ className, children }) {
 function hidesFreePlan(plan) {
   return plan.requiresPayment !== false;
 }
-var HostedCheckoutLink = forwardRef7(function PaywallNoticeHostedCheckoutLink({ asChild, children, className, ...rest }, forwardedRef) {
+var HostedCheckoutLink = forwardRef7(function PaywallNoticeHostedCheckoutLink({ asChild, children, className, onClick, ...rest }, forwardedRef) {
   const ctx = usePaywallNoticeCtx("HostedCheckoutLink");
   const copy = useCopy();
+  const handleExternalClick = useExternalLinkClick();
   const href = ctx.content.checkoutUrl;
   if (!href) return null;
   const Comp = asChild ? Slot : "a";
@@ -3175,6 +3177,7 @@ var HostedCheckoutLink = forwardRef7(function PaywallNoticeHostedCheckoutLink({
       rel: "noopener noreferrer",
       "data-solvapay-paywall-hosted-link": "",
       className: className ?? ctx.classNames.hostedLink,
+      onClick: composeEventHandlers(onClick, handleExternalClick),
       ...rest,
       children: children ?? copy.paywall.hostedCheckoutButton
     }

package/dist/{chunk-QXNNMNCV.js → chunk-M6O7ZWNP.js}

@@ -7,14 +7,19 @@ import {
   composeEventHandlers,
   createHttpTransport,
   createTransportCacheKey,
+  formatPaygRate,
   formatPrice,
   interpolate,
+  useBalance,
   useCopy,
+  useExternalLinkClick,
+  useLocale,
+  useOpenExternal,
   usePurchase,
   usePurchaseStatus,
   useSolvaPay,
   useTransport
-} from "./chunk-LL6AYSTC.js";
+} from "./chunk-WISTNSUH.js";
 
 // src/components/CancelledPlanNotice.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -268,6 +273,8 @@ var LaunchCustomerPortalButton = forwardRef(function LaunchCustomerPortalButton2
 }, forwardedRef) {
   const { status, url, ensure } = useCustomerSessionUrl();
   const copy = useCopy();
+  const handleExternalClick = useExternalLinkClick();
+  const openExternal = useOpenExternal();
   const [clickState, setClickState] = useState2("idle");
   const isReady = status === "ready" && typeof url === "string";
   const label = children ?? copy.customerPortal.launchButton;
@@ -277,19 +284,22 @@ var LaunchCustomerPortalButton = forwardRef(function LaunchCustomerPortalButton2
     clickState === "pending" ? loadingClassName : null,
     clickState === "error" ? errorClassName : null
   ].filter(Boolean).join(" ") || void 0;
-  const handleReadyClick = () => {
+  const handleReadyClick = (event) => {
     if (!isReady || !url) return;
     onLaunch?.(url);
+    handleExternalClick(event);
   };
   const handlePendingClick = async (event) => {
     event.preventDefault();
     setClickState("pending");
     try {
       const resolved = await ensure();
-      setClickState("idle");
-      if (typeof window !== "undefined") {
-        window.open(resolved, "_blank", "noopener,noreferrer");
+      if (!await openExternal(resolved)) {
+        setClickState("error");
+        onError?.(new Error(`Host declined to open the customer portal: ${resolved}`));
+        return;
       }
+      setClickState("idle");
       onLaunch?.(resolved);
     } catch (err) {
       const error = err instanceof Error ? err : new Error(String(err));
@@ -363,7 +373,7 @@ var UpdatePaymentMethodButton = forwardRef2(function UpdatePaymentMethodButton2(
 
 // src/components/CurrentPlanCard.tsx
 import { countsUsage } from "@solvapay/core";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function PlanTypeLine({
   purchase,
   formatDate,
@@ -374,14 +384,7 @@ function PlanTypeLine({
   if (purchase.isRecurring) {
     const date2 = formatDate(purchase.nextBillingDate);
     if (!date2) return null;
-    return /* @__PURE__ */ jsx5(
-      "span",
-      {
-        className,
-        "data-solvapay-current-plan-next-billing": "",
-        children: interpolate(copy.currentPlan.nextBilling, { date: date2 })
-      }
-    );
+    return /* @__PURE__ */ jsx5("span", { className, "data-solvapay-current-plan-next-billing": "", children: interpolate(copy.currentPlan.nextBilling, { date: date2 }) });
   }
   if (isMetered) {
     return null;
@@ -389,6 +392,62 @@ function PlanTypeLine({
   const date = formatDate(purchase.endDate);
   return /* @__PURE__ */ jsx5("span", { className, "data-solvapay-current-plan-expires": "", children: date ? interpolate(copy.currentPlan.expiresOn, { date }) : copy.currentPlan.validIndefinitely });
 }
+function asPaygPlan(plan) {
+  if (!plan) return null;
+  return {
+    reference: plan.reference ?? void 0,
+    name: "name" in plan ? plan.name : void 0,
+    price: plan.price ?? void 0,
+    currency: plan.currency ?? void 0,
+    requiresPayment: "requiresPayment" in plan ? plan.requiresPayment ?? void 0 : void 0,
+    // Snapshot `options` are generated as `{ [key: string]: unknown }[]`;
+    // formatPaygRate reads them through `@solvapay/core` as PricingOptionLike.
+    options: plan.options
+  };
+}
+function resolvePriceLabel({
+  isUsageBased,
+  snapshot,
+  catalogPlan,
+  amount,
+  currency,
+  intervalLabel,
+  locale,
+  balance
+}) {
+  if (isUsageBased) {
+    const snapshotPlan = asPaygPlan(snapshot);
+    const fromSnapshot = snapshotPlan ? formatPaygRate(snapshotPlan, locale, balance) : null;
+    if (fromSnapshot) return fromSnapshot;
+    const catalogAsPlan = asPaygPlan(catalogPlan);
+    if (catalogAsPlan) {
+      const fromCatalog = formatPaygRate(catalogAsPlan, locale, balance);
+      if (fromCatalog) return fromCatalog;
+    }
+    return null;
+  }
+  return formatPrice(amount, currency, {
+    interval: intervalLabel
+  });
+}
+function PlanField({
+  label,
+  labelClassName,
+  children
+}) {
+  if (!label) return /* @__PURE__ */ jsx5(Fragment, { children });
+  return /* @__PURE__ */ jsxs4("div", { className: "solvapay-current-plan-field", "data-solvapay-current-plan-field": "", children: [
+    /* @__PURE__ */ jsx5(
+      "span",
+      {
+        className: labelClassName ?? "solvapay-current-plan-field-label",
+        "data-solvapay-current-plan-field-label": "",
+        children: label
+      }
+    ),
+    children
+  ] });
+}
 function PaymentMethodLine({
   paymentMethod,
   className
@@ -422,33 +481,45 @@ var CurrentPlanCard = ({
   hideProductContext,
   showStartDate,
   showReference,
+  showFieldLabels,
+  plans,
   classNames: overrides,
   className
 }) => {
   const copy = useCopy();
+  const locale = useLocale();
+  const balance = useBalance();
   const { activePurchase } = usePurchase();
   const { formatDate, shouldShowCancelledNotice } = usePurchaseStatus();
   const { paymentMethod } = usePaymentMethod();
   if (!activePurchase) return null;
-  const isUsageBased = countsUsage(activePurchase.planSnapshot) || activePurchase.planSnapshot?.isMetered === true;
+  const snapshot = activePurchase.planSnapshot;
+  const catalogPlan = plans?.find(
+    (p) => p.reference === (snapshot?.reference ?? activePurchase.planRef)
+  );
+  const isUsageBased = countsUsage(snapshot) || snapshot?.isMetered === true || countsUsage(catalogPlan);
   const planType = activePurchase.isRecurring ? "recurring" : isUsageBased ? "usage-based" : "one-time";
   const amount = activePurchase.originalAmount ?? activePurchase.amount ?? 0;
   const currency = activePurchase.currency ?? "usd";
   const rawCycle = activePurchase.billingCycle;
   const cycleKey = rawCycle && rawCycle in copy.currentPlan.cycleUnit ? rawCycle : void 0;
   const intervalLabel = cycleKey ? copy.currentPlan.cycleUnit[cycleKey] ?? rawCycle : rawCycle;
-  const priceLabel = formatPrice(amount, currency, {
-    interval: intervalLabel
+  const priceLabel = resolvePriceLabel({
+    isUsageBased,
+    snapshot,
+    catalogPlan,
+    amount,
+    currency,
+    intervalLabel,
+    locale,
+    balance
   });
   const planName = activePurchase.planSnapshot?.name ?? activePurchase.productName;
   const productContext = activePurchase.productName && activePurchase.productName !== planName ? activePurchase.productName : null;
-  const rootClass = [
-    "solvapay-current-plan-card",
-    overrides?.root,
-    className
-  ].filter(Boolean).join(" ");
+  const rootClass = ["solvapay-current-plan-card", overrides?.root, className].filter(Boolean).join(" ");
   const shouldShowPaymentMethod = !hidePaymentMethod && paymentMethod !== null;
   const showCancelButton = !hideCancelButton && !activePurchase.cancelledAt && !shouldShowCancelledNotice;
+  const showActions = !hideUpdatePaymentButton || showCancelButton;
   return /* @__PURE__ */ jsxs4(
     "section",
     {
@@ -481,14 +552,21 @@ var CurrentPlanCard = ({
             children: planName
           }
         ),
-        /* @__PURE__ */ jsx5(
-          "p",
+        priceLabel ? /* @__PURE__ */ jsx5(
+          PlanField,
           {
-            className: overrides?.price ?? "solvapay-current-plan-price",
-            "data-solvapay-current-plan-price": "",
-            children: priceLabel
+            label: showFieldLabels ? isUsageBased ? copy.currentPlan.rateFieldLabel : copy.currentPlan.priceFieldLabel : null,
+            labelClassName: overrides?.fieldLabel,
+            children: /* @__PURE__ */ jsx5(
+              "p",
+              {
+                className: overrides?.price ?? "solvapay-current-plan-price",
+                "data-solvapay-current-plan-price": "",
+                children: priceLabel
+              }
+            )
           }
-        ),
+        ) : null,
         /* @__PURE__ */ jsx5(
           PlanTypeLine,
           {
@@ -497,6 +575,35 @@ var CurrentPlanCard = ({
             className: overrides?.dateLine ?? "solvapay-current-plan-date-line"
           }
         ),
+        isUsageBased && activePurchase.isRecurring && !hideUsageMeter && /* @__PURE__ */ jsx5(
+          "section",
+          {
+            className: overrides?.usageMeter ?? "solvapay-current-plan-usage-meter",
+            "data-solvapay-current-plan-usage-meter": "",
+            children: /* @__PURE__ */ jsxs4(UsageMeter.Root, { children: [
+              /* @__PURE__ */ jsx5(UsageMeter.Label, {}),
+              /* @__PURE__ */ jsx5(UsageMeter.Bar, {}),
+              /* @__PURE__ */ jsx5(UsageMeter.Percentage, {}),
+              /* @__PURE__ */ jsx5(UsageMeter.ResetsIn, {}),
+              /* @__PURE__ */ jsx5(UsageMeter.Loading, {})
+            ] })
+          }
+        ),
+        isUsageBased && /* @__PURE__ */ jsx5(
+          PlanField,
+          {
+            label: showFieldLabels ? copy.currentPlan.balanceFieldLabel : null,
+            labelClassName: overrides?.fieldLabel,
+            children: /* @__PURE__ */ jsx5(
+              "p",
+              {
+                className: overrides?.balanceLine ?? "solvapay-current-plan-balance-line",
+                "data-solvapay-current-plan-balance-line": "",
+                children: /* @__PURE__ */ jsx5(BalanceBadge, {})
+              }
+            )
+          }
+        ),
         showStartDate && (() => {
           const started = formatDate(activePurchase.startDate);
           if (!started) return null;
@@ -517,28 +624,6 @@ var CurrentPlanCard = ({
             children: activePurchase.reference
           }
         ),
-        isUsageBased && activePurchase.isRecurring && !hideUsageMeter && /* @__PURE__ */ jsx5(
-          "section",
-          {
-            className: overrides?.usageMeter ?? "solvapay-current-plan-usage-meter",
-            "data-solvapay-current-plan-usage-meter": "",
-            children: /* @__PURE__ */ jsxs4(UsageMeter.Root, { children: [
-              /* @__PURE__ */ jsx5(UsageMeter.Label, {}),
-              /* @__PURE__ */ jsx5(UsageMeter.Bar, {}),
-              /* @__PURE__ */ jsx5(UsageMeter.Percentage, {}),
-              /* @__PURE__ */ jsx5(UsageMeter.ResetsIn, {}),
-              /* @__PURE__ */ jsx5(UsageMeter.Loading, {})
-            ] })
-          }
-        ),
-        isUsageBased && /* @__PURE__ */ jsx5(
-          "p",
-          {
-            className: overrides?.balanceLine ?? "solvapay-current-plan-balance-line",
-            "data-solvapay-current-plan-balance-line": "",
-            children: /* @__PURE__ */ jsx5(BalanceBadge, {})
-          }
-        ),
         shouldShowPaymentMethod && paymentMethod && /* @__PURE__ */ jsx5(
           PaymentMethodLine,
           {
@@ -546,7 +631,7 @@ var CurrentPlanCard = ({
             className: overrides?.paymentMethod ?? "solvapay-current-plan-payment-method"
           }
         ),
-        /* @__PURE__ */ jsxs4(
+        showActions && /* @__PURE__ */ jsxs4(
           "section",
           {
             className: overrides?.actions ?? "solvapay-current-plan-actions",