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

package/dist/mcp/index.js

@@ -3,11 +3,12 @@ import {
   ExternalLinkGlyph,
   LaunchCustomerPortalButton,
   paymentMethodCache
-} from "../chunk-QXNNMNCV.js";
+} from "../chunk-M6O7ZWNP.js";
 import {
   AmountPicker,
   BalanceBadge,
   CancelledPlanNotice,
+  ExternalLinkProvider,
   LegalFooter,
   MandateText,
   PaymentForm,
@@ -34,6 +35,7 @@ import {
   useCheckoutFlow,
   useCopy,
   useCustomer,
+  useExternalLinkClick,
   useMerchant,
   usePlanSelection,
   usePlanSelector,
@@ -41,7 +43,7 @@ import {
   usePurchaseStatus,
   useTopupAmountSelector,
   useTransport
-} from "../chunk-LL6AYSTC.js";
+} from "../chunk-WISTNSUH.js";
 import "../chunk-UMXOAUW7.js";
 import "../chunk-MLKGABMK.js";
 
@@ -76,15 +78,30 @@ function pickDefined(input) {
 function createMcpAppAdapter(app) {
   const callTool = async (name, args = {}) => unwrap(await app.callServerTool({ name, arguments: args }));
   return {
-    createPayment: (params) => callTool(MCP_TOOL_NAMES.createPayment, pickDefined({ ...params })),
+    createPayment: (params) => callTool(
+      MCP_TOOL_NAMES.createPayment,
+      pickDefined({ purpose: "plan", ...params })
+    ),
     processPayment: (params) => callTool(MCP_TOOL_NAMES.processPayment, pickDefined({ ...params })),
-    createTopupPayment: (params) => callTool(MCP_TOOL_NAMES.createTopupPayment, pickDefined({ ...params })),
+    createTopupPayment: (params) => callTool(
+      MCP_TOOL_NAMES.createPayment,
+      pickDefined({ purpose: "topup", ...params })
+    ),
     attachBusinessDetails: (params) => callTool(MCP_TOOL_NAMES.attachBusinessDetails, pickDefined({ ...params })),
-    cancelRenewal: (params) => callTool(MCP_TOOL_NAMES.cancelRenewal, pickDefined({ ...params })),
-    reactivateRenewal: (params) => callTool(MCP_TOOL_NAMES.reactivateRenewal, pickDefined({ ...params })),
+    cancelRenewal: (params) => callTool(
+      MCP_TOOL_NAMES.setRenewal,
+      pickDefined({ enabled: false, ...params })
+    ),
+    reactivateRenewal: (params) => callTool(
+      MCP_TOOL_NAMES.setRenewal,
+      pickDefined({ enabled: true, ...params })
+    ),
     activatePlan: (params) => callTool(MCP_TOOL_NAMES.activatePlan, pickDefined({ ...params })),
-    createCheckoutSession: (params) => callTool(MCP_TOOL_NAMES.createCheckoutSession, pickDefined({ ...params ?? {} })),
-    createCustomerSession: () => callTool(MCP_TOOL_NAMES.createCustomerSession)
+    createCheckoutSession: (params) => callTool(
+      MCP_TOOL_NAMES.createHostedSession,
+      pickDefined({ kind: "checkout", ...params ?? {} })
+    ),
+    createCustomerSession: () => callTool(MCP_TOOL_NAMES.createHostedSession, { kind: "portal" })
   };
 }
 
@@ -125,6 +142,7 @@ function useStripeProbe(publishableKey) {
       }
     };
     const isStripeFrameViolation = (event) => {
+      if (event.disposition === "report") return false;
       const directive = event.effectiveDirective || event.violatedDirective || "";
       const blockedURI = event.blockedURI || "";
       const isFrameSrc = directive === "frame-src" || directive.startsWith("frame-src ");
@@ -133,6 +151,16 @@ function useStripeProbe(publishableKey) {
     const onCspViolation = (event) => {
       if (!isStripeFrameViolation(event)) return;
       cspBlockedStripeFrame = true;
+      const directive = event.effectiveDirective || event.violatedDirective || "";
+      console.warn(
+        "[solvapay-mcp] host CSP refused the Stripe iframe; falling back to hosted checkout.",
+        {
+          blockedURI: event.blockedURI,
+          effectiveDirective: directive,
+          originalPolicy: event.originalPolicy,
+          sourceFile: event.sourceFile
+        }
+      );
       resolve("blocked");
     };
     document.addEventListener("securitypolicyviolation", onCspViolation);
@@ -339,7 +367,26 @@ function McpBridgeProvider({ app, messageOnSuccess, children }) {
       }
     };
   }, [app, locale, messageOnSuccess]);
-  return /* @__PURE__ */ jsx(McpBridgeContext.Provider, { value, children });
+  const opener = useMemo(
+    () => ({
+      // Capabilities are read at click time, not render time: the
+      // bridge can mount before `connect()` has populated them, and a
+      // render-time snapshot would go stale.
+      canOpen: () => typeof app.openLink === "function" && Boolean(app.getHostCapabilities?.()?.openLinks),
+      open: async (url) => {
+        if (typeof app.openLink !== "function") return false;
+        try {
+          const result = await app.openLink({ url });
+          return result?.isError !== true;
+        } catch (err) {
+          console.error("[solvapay] ui/open-link failed:", err);
+          return false;
+        }
+      }
+    }),
+    [app]
+  );
+  return /* @__PURE__ */ jsx(McpBridgeContext.Provider, { value, children: /* @__PURE__ */ jsx(ExternalLinkProvider, { opener, children }) });
 }
 function useMcpBridge() {
   return useContext(McpBridgeContext);
@@ -558,6 +605,82 @@ import { VIEW_FOR_TOOL as VIEW_FOR_TOOL2 } from "@solvapay/mcp-core";
 // src/mcp/McpAppShell.tsx
 import { useState as useState6 } from "react";
 
+// src/mcp/plan-actions.ts
+import {
+  billingCycle,
+  charges,
+  countsUsage,
+  trialDays
+} from "@solvapay/core";
+function isPaidPlan(plan) {
+  if (plan.requiresPayment === false) return false;
+  if (charges(plan).some((charge) => charge.amountMinor > 0)) return true;
+  return (plan.price ?? 0) > 0;
+}
+function isMeteredPlan(plan) {
+  return countsUsage(plan);
+}
+function resolvePlanShape(plan) {
+  if (!plan) return null;
+  if ((trialDays(plan) ?? 0) > 0) return "trial";
+  if (!isPaidPlan(plan)) return "free";
+  const metered = isMeteredPlan(plan);
+  if (billingCycle(plan)) return metered ? "recurring-metered" : "recurring-unlimited";
+  return metered ? "usage-based" : "recurring-unlimited";
+}
+function resolveActivationStrategy(plan) {
+  const shape = resolvePlanShape(plan);
+  if (shape === "usage-based") return "topup-first";
+  if (shape === "free" || shape === "trial") return "activate";
+  return "paid-checkout";
+}
+function mergePlanSnapshot(snapshot, catalog) {
+  if (!snapshot && !catalog) return null;
+  if (!catalog) return snapshot ?? null;
+  if (!snapshot) return catalog;
+  const snapshotHasOptions = Array.isArray(snapshot.options) && snapshot.options.length > 0;
+  return {
+    ...catalog,
+    ...snapshot,
+    options: snapshotHasOptions ? snapshot.options : catalog.options,
+    requiresPayment: snapshot.requiresPayment ?? catalog.requiresPayment,
+    isMetered: snapshot.isMetered ?? catalog.isMetered
+  };
+}
+function findCatalogPlan(plans, snapshot, planRef) {
+  const ref = snapshot?.reference ?? planRef;
+  if (!ref || !plans) return void 0;
+  return plans.find((p) => p.reference === ref);
+}
+function resolvePlanActions({
+  purchase,
+  planCount,
+  paidPlanCount
+}) {
+  const shape = resolvePlanShape(purchase?.planSnapshot);
+  const hasPaymentMethod = Boolean(purchase?.hasPaymentMethod);
+  const canOfferChange = planCount > 1;
+  const isFree = shape === "free";
+  const canUpgrade = isFree && paidPlanCount > 0;
+  return {
+    topUp: shape === "usage-based",
+    cancel: shape === "recurring-unlimited" || shape === "recurring-metered" || shape === "free" || shape === "trial",
+    changePlan: canOfferChange && !canUpgrade,
+    managePortal: hasPaymentMethod,
+    upgrade: canUpgrade
+  };
+}
+function resolveActivityStrip(purchase) {
+  const shape = resolvePlanShape(purchase?.planSnapshot);
+  if (!shape) return "none";
+  if (shape === "usage-based") return "payg-balance";
+  if (shape === "recurring-unlimited") return "recurring-unlimited-renew";
+  if (shape === "recurring-metered") return "recurring-metered-usage";
+  if (shape === "free") return "free-usage";
+  if (shape === "trial") return "free-usage";
+  return "none";
+}
+
 // src/mcp/views/detail-cards.tsx
 import { creditsToDisplayMinorUnits, resolveSellerIdentityDisplay } from "@solvapay/core";
 
@@ -721,17 +844,8 @@ function McpSellerDetailsCard({
     /* @__PURE__ */ jsxs("dl", { className: "solvapay-mcp-detail-grid", children: [
       /* @__PURE__ */ jsx2(DetailRow, { value: merchant.displayName, muted: cx.muted }),
       merchant.legalName && merchant.legalName !== merchant.displayName ? /* @__PURE__ */ jsx2(DetailRow, { value: merchant.legalName, muted: cx.muted }) : null,
-      supportEmail ? /* @__PURE__ */ jsx2("dd", { className: "solvapay-mcp-detail-row", children: /* @__PURE__ */ jsx2("a", { className: "solvapay-mcp-detail-link", href: `mailto:${supportEmail}`, children: supportEmail }) }) : null,
-      supportUrl ? /* @__PURE__ */ jsx2("dd", { className: "solvapay-mcp-detail-row", children: /* @__PURE__ */ jsx2(
-        "a",
-        {
-          className: "solvapay-mcp-detail-link",
-          href: supportUrl,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: "Support centre"
-        }
-      ) }) : null,
+      supportEmail ? /* @__PURE__ */ jsx2(DetailRow, { value: supportEmail, muted: cx.muted }) : null,
+      supportUrl ? /* @__PURE__ */ jsx2(DetailRow, { value: supportUrl, muted: cx.muted }) : null,
       sellerIdentity.companyNumber ? /* @__PURE__ */ jsx2(
         DetailRow,
         {
@@ -763,6 +877,7 @@ function McpAccountView({
   classNames,
   onTopup,
   onChangePlan,
+  plans,
   hideDetailCards
 }) {
   const cx = resolveMcpClassNames(classNames);
@@ -773,14 +888,27 @@ function McpAccountView({
   if (loading) {
     return /* @__PURE__ */ jsx3("div", { className: cx.card, children: /* @__PURE__ */ jsx3("p", { children: "Loading account\u2026" }) });
   }
-  const hasAnyPlan = hasPaidPurchase || shouldShowCancelledNotice;
+  const hasAnyPlan = Boolean(activePurchase) || shouldShowCancelledNotice;
   const hasCredits = (credits ?? 0) > 0;
   const showPortalCta = Boolean(
     hasPaidPurchase && activePurchase && activePurchase.amount && activePurchase.amount > 0
   );
+  const catalogPlan = findCatalogPlan(plans, activePurchase?.planSnapshot, activePurchase?.planRef);
+  const planForActions = mergePlanSnapshot(activePurchase?.planSnapshot, catalogPlan);
+  const paidPlanCount = (plans ?? []).filter((plan) => resolvePlanShape(plan) !== "free").length;
+  const actions = resolvePlanActions({
+    purchase: {
+      planSnapshot: planForActions,
+      hasPaymentMethod: false
+    },
+    planCount: plans?.length ?? 0,
+    paidPlanCount
+  });
+  const showChangePlanCta = Boolean(onChangePlan && (actions.upgrade || actions.changePlan));
   return /* @__PURE__ */ jsxs2("div", { className: "solvapay-mcp-account", children: [
     /* @__PURE__ */ jsxs2("div", { className: cx.card, children: [
-      hasPaidPurchase ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      activePurchase ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx3("h2", { className: cx.heading, children: copy.currentPlan.heading }),
         /* @__PURE__ */ jsx3(
           CurrentPlanCard,
           {
@@ -789,11 +917,13 @@ function McpAccountView({
             hideUpdatePaymentButton: true,
             hideCancelButton: true,
             hideCancelledNotice: true,
+            hidePaymentMethod: true,
             showStartDate: true,
-            showReference: true
+            showFieldLabels: true,
+            plans
           }
         ),
-        showPortalCta ? /* @__PURE__ */ jsx3("p", { className: cx.muted, "data-solvapay-mcp-portal-hint": "", children: copy.currentPlan.portalHint }) : null
+        showChangePlanCta ? /* @__PURE__ */ jsx3("button", { type: "button", className: cx.button, onClick: onChangePlan, children: actions.upgrade ? copy.account.upgradeButton : copy.account.changePlanButton }) : null
       ] }) : null,
       /* @__PURE__ */ jsxs2(CancelledPlanNotice.Root, { className: cx.notice, children: [
         /* @__PURE__ */ jsx3(CancelledPlanNotice.Heading, {}),
@@ -814,14 +944,17 @@ function McpAccountView({
         /* @__PURE__ */ jsx3("p", { className: cx.muted, children: copy.account.noPlanBody }),
         onChangePlan ? /* @__PURE__ */ jsx3("button", { type: "button", className: cx.button, onClick: onChangePlan, children: copy.account.pickPlanButton }) : null
       ] }),
-      showPortalCta ? /* @__PURE__ */ jsx3(
-        LaunchCustomerPortalButton,
-        {
-          className: cx.button,
-          loadingClassName: cx.button,
-          errorClassName: cx.button
-        }
-      ) : null
+      showPortalCta ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx3("p", { className: cx.muted, "data-solvapay-mcp-portal-hint": "", children: copy.currentPlan.portalHint }),
+        /* @__PURE__ */ jsx3(
+          LaunchCustomerPortalButton,
+          {
+            className: cx.button,
+            loadingClassName: cx.button,
+            errorClassName: cx.button
+          }
+        )
+      ] }) : null
     ] }),
     !hideDetailCards ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
       /* @__PURE__ */ jsx3(McpCustomerDetailsCard, { classNames, onTopup }),
@@ -1536,6 +1669,7 @@ var HostedLinkButton = React8.memo(function HostedLinkButton2({
   onLaunch,
   cx
 }) {
+  const handleExternalClick = useExternalLinkClick();
   if (state.status === "ready") {
     return /* @__PURE__ */ jsx11(
       "a",
@@ -1545,7 +1679,10 @@ var HostedLinkButton = React8.memo(function HostedLinkButton2({
         target: "_blank",
         rel: "noopener noreferrer",
         "aria-label": `${readyLabel} (opens in a new tab)`,
-        onClick: () => onLaunch?.(state.href),
+        onClick: (event) => {
+          onLaunch?.(state.href);
+          handleExternalClick(event);
+        },
         children: /* @__PURE__ */ jsxs10("button", { type: "button", className: cx.button, children: [
           readyLabel,
           /* @__PURE__ */ jsx11(ExternalLinkGlyph, {})
@@ -1565,6 +1702,7 @@ var AwaitingBody = React8.memo(function AwaitingBody2({
   onCancel,
   cx
 }) {
+  const handleExternalClick = useExternalLinkClick();
   return /* @__PURE__ */ jsxs10(Fragment8, { children: [
     /* @__PURE__ */ jsxs10("div", { className: cx.awaitingHeader, children: [
       /* @__PURE__ */ jsx11(Spinner, {}),
@@ -1579,7 +1717,10 @@ var AwaitingBody = React8.memo(function AwaitingBody2({
         target: "_blank",
         rel: "noopener noreferrer",
         "aria-label": "Reopen checkout (opens in a new tab)",
-        onClick: () => onReopen(),
+        onClick: (event) => {
+          onReopen();
+          handleExternalClick(event);
+        },
         children: /* @__PURE__ */ jsxs10("button", { type: "button", className: cx.button, children: [
           "Reopen checkout",
           /* @__PURE__ */ jsx11(ExternalLinkGlyph, {})
@@ -2182,6 +2323,7 @@ function McpViewRouter({
           classNames,
           onTopup: goTopup,
           onChangePlan: goCheckout,
+          plans: bootstrap.plans,
           hideDetailCards: suppressDetailCards
         }
       );
@@ -2555,64 +2697,6 @@ function McpApp({
     ) }) })
   ] }) });
 }
-
-// src/mcp/plan-actions.ts
-import {
-  billingCycle,
-  charges,
-  countsUsage,
-  trialDays
-} from "@solvapay/core";
-function isPaidPlan(plan) {
-  if (plan.requiresPayment === false) return false;
-  if (charges(plan).some((charge) => charge.amountMinor > 0)) return true;
-  return (plan.price ?? 0) > 0;
-}
-function isMeteredPlan(plan) {
-  return countsUsage(plan);
-}
-function resolvePlanShape(plan) {
-  if (!plan) return null;
-  if ((trialDays(plan) ?? 0) > 0) return "trial";
-  if (!isPaidPlan(plan)) return "free";
-  const metered = isMeteredPlan(plan);
-  if (billingCycle(plan)) return metered ? "recurring-metered" : "recurring-unlimited";
-  return metered ? "usage-based" : "recurring-unlimited";
-}
-function resolveActivationStrategy(plan) {
-  const shape = resolvePlanShape(plan);
-  if (shape === "usage-based") return "topup-first";
-  if (shape === "free" || shape === "trial") return "activate";
-  return "paid-checkout";
-}
-function resolvePlanActions({
-  purchase,
-  planCount,
-  paidPlanCount
-}) {
-  const shape = resolvePlanShape(purchase?.planSnapshot);
-  const hasPaymentMethod = Boolean(purchase?.hasPaymentMethod);
-  const canOfferChange = planCount > 1;
-  const isFree = shape === "free";
-  const canUpgrade = isFree && paidPlanCount > 0;
-  return {
-    topUp: shape === "usage-based",
-    cancel: shape === "recurring-unlimited" || shape === "recurring-metered" || shape === "free" || shape === "trial",
-    changePlan: canOfferChange && !canUpgrade,
-    managePortal: hasPaymentMethod,
-    upgrade: canUpgrade
-  };
-}
-function resolveActivityStrip(purchase) {
-  const shape = resolvePlanShape(purchase?.planSnapshot);
-  if (!shape) return "none";
-  if (shape === "usage-based") return "payg-balance";
-  if (shape === "recurring-unlimited") return "recurring-unlimited-renew";
-  if (shape === "recurring-metered") return "recurring-metered-usage";
-  if (shape === "free") return "free-usage";
-  if (shape === "trial") return "free-usage";
-  return "none";
-}
 export {
   AppHeader,
   BackLink,
@@ -2633,7 +2717,9 @@ export {
   createMcpAppAdapter,
   fetchMcpBootstrap,
   fetchMcpBootstrapViaResource,
+  findCatalogPlan,
   isTransportToolName,
+  mergePlanSnapshot,
   parseBootstrapFromToolResult,
   resolveActivationStrategy,
   resolveActivityStrip,

package/dist/mcp/styles.css

@@ -355,6 +355,41 @@ body {
 
 /* Account view */
 
+/* `<CurrentPlanCard>` ships its own card frame for standalone web
+ * surfaces. Inside the MCP account view the surrounding
+ * `.solvapay-mcp-card` already IS the frame, so the default chrome
+ * nested a second bordered box and doubled the inset (16px card
+ * padding + 16px card padding). Flatten it: the plan facts then align
+ * to the same left edge and 16px gutter as the heading, the CTA, and
+ * every other MCP surface (checkout, topup, success). */
+.solvapay-mcp-account [data-solvapay-current-plan-card] {
+  padding: 0;
+  border: 0;
+  background: none;
+  border-radius: 0;
+  gap: 10px;
+}
+
+/* Type scale inside the flattened plan card, descending from the
+ * surface title so each rank is legible at a glance:
+ * 18 title → 16 plan name → 14 captioned value → 13 muted date
+ * → 11 field label. Left at the sheet defaults the plan name and the
+ * price both land near 18px and compete with the title. */
+.solvapay-mcp-account [data-solvapay-current-plan-name] {
+  font-size: 16px;
+  line-height: 1.3;
+}
+
+.solvapay-mcp-account [data-solvapay-current-plan-price],
+.solvapay-mcp-account [data-solvapay-current-plan-balance-line] {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.solvapay-mcp-account [data-solvapay-current-plan-field-label] {
+  color: var(--color-text-secondary, #475569);
+}
+
 .solvapay-mcp-account-credit-stack {
   flex: 1;
 }
@@ -498,9 +533,9 @@ body {
   cursor: pointer;
 }
 
-.solvapay-mcp-business-details:not(:has([data-solvapay-topup-form-business-details-toggle]:checked)):not(
-    :has([data-solvapay-payment-form-business-details-toggle]:checked)
-  )
+.solvapay-mcp-business-details:not(
+    :has([data-solvapay-topup-form-business-details-toggle]:checked)
+  ):not(:has([data-solvapay-payment-form-business-details-toggle]:checked))
   .solvapay-mcp-business-field {
   display: none;
 }
@@ -829,6 +864,7 @@ body {
 .solvapay-mcp-detail-value {
   font-size: 14px;
   color: var(--color-text-primary, #0f172a);
+  word-break: break-word;
 }
 
 .solvapay-mcp-detail-value-mono {
@@ -838,17 +874,6 @@ body {
   font-size: 12px;
 }
 
-.solvapay-mcp-detail-link {
-  color: var(--color-text-primary, #0f172a);
-  font-size: 14px;
-  text-decoration: none;
-  word-break: break-word;
-}
-
-.solvapay-mcp-detail-link:hover {
-  text-decoration: underline;
-}
-
 .solvapay-mcp-detail-heading-row {
   display: flex;
   align-items: center;