@solvapay/react 1.2.1 → 1.3.0-preview-cb8ad16e16ce8f8f357bd7f2e7068d85159df587

package/dist/mcp/index.d.cts

@@ -1,4 +1,4 @@
-import { s as SolvaPayTransport, X as SolvaPayProviderInitial, w as SolvaPayConfig, x as BootstrapPlanLike, E as Merchant } from '../shared-DpS2yEah.cjs';
+import { s as SolvaPayTransport, X as SolvaPayProviderInitial, w as SolvaPayConfig, x as BootstrapPlanLike, E as Merchant } from '../shared-BNZAIWkU.cjs';
 import { TOOL_FOR_VIEW, SolvaPayMcpViewKind, BootstrapMerchant, BootstrapProduct, BootstrapPlan, BootstrapCustomer } from '@solvapay/mcp-core';
 export { MCP_TOOL_NAMES, McpToolName } from '@solvapay/mcp-core';
 import * as react_jsx_runtime from 'react/jsx-runtime';

package/dist/mcp/index.d.ts

@@ -1,4 +1,4 @@
-import { s as SolvaPayTransport, X as SolvaPayProviderInitial, w as SolvaPayConfig, x as BootstrapPlanLike, E as Merchant } from '../shared-CXRbrNFw.js';
+import { s as SolvaPayTransport, X as SolvaPayProviderInitial, w as SolvaPayConfig, x as BootstrapPlanLike, E as Merchant } from '../shared-lIhc8DS3.js';
 import { TOOL_FOR_VIEW, SolvaPayMcpViewKind, BootstrapMerchant, BootstrapProduct, BootstrapPlan, BootstrapCustomer } from '@solvapay/mcp-core';
 export { MCP_TOOL_NAMES, McpToolName } from '@solvapay/mcp-core';
 import * as react_jsx_runtime from 'react/jsx-runtime';

package/dist/mcp/index.js

@@ -3,7 +3,7 @@ import {
   ExternalLinkGlyph,
   LaunchCustomerPortalButton,
   paymentMethodCache
-} from "../chunk-XRNCDI2T.js";
+} from "../chunk-3UR4QQ5P.js";
 import {
   AmountPicker,
   BalanceBadge,
@@ -25,6 +25,7 @@ import {
   planSortByPaygFirstThenAsc,
   plansCache,
   productCache,
+  resolvePlanPricingOption,
   shortCycle,
   useAmountPicker,
   useBalance,
@@ -32,11 +33,12 @@ import {
   useCopy,
   useCustomer,
   useMerchant,
+  usePlanSelection,
   usePlanSelector,
   usePurchase,
   usePurchaseStatus,
   useTransport
-} from "../chunk-Y2UAJG67.js";
+} from "../chunk-ORMHGGOU.js";
 import "../chunk-UMXOAUW7.js";
 
 // src/mcp/adapter.ts
@@ -813,16 +815,20 @@ var PlanStep = memo(function PlanStep2({
   activationError,
   cx
 }) {
-  const { selectedPlan, selectedPlanRef } = usePlanSelector();
+  const { selectedPlan, selectedPlanRef, getSelectedOption } = usePlanSelector();
   const locale = useHostLocale();
   const copy = useCopy();
   const selectedPlanShape = selectedPlan;
-  const ctaLabel = formatContinueLabel(selectedPlanShape, locale);
+  const pricingOption = selectedPlan ? getSelectedOption(selectedPlan) : void 0;
+  const ctaLabel = formatContinueLabel(selectedPlanShape, locale, pricingOption);
   const showBanner = fromPaywall && !hideUpgradeBanner;
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     onBack ? /* @__PURE__ */ jsx5(BackLink, { label: copy.checkout.backToAccount, onClick: onBack }) : null,
     showBanner ? /* @__PURE__ */ jsx5(UpgradeBanner, { kind: paywallKind, cx }) : null,
-    /* @__PURE__ */ jsx5("h2", { className: cx.heading, children: "Choose a plan" }),
+    /* @__PURE__ */ jsxs4("div", { className: "solvapay-mcp-plan-step-header", children: [
+      /* @__PURE__ */ jsx5("h2", { className: cx.heading, children: "Choose a plan" }),
+      /* @__PURE__ */ jsx5(PlanSelector.CurrencySwitcher, { className: "solvapay-plan-selector-currency-switcher" })
+    ] }),
     /* @__PURE__ */ jsx5(PlanSelector.Grid, { className: "solvapay-plan-selector-grid", children: /* @__PURE__ */ jsxs4(PlanSelector.Card, { className: "solvapay-plan-selector-card", children: [
       /* @__PURE__ */ jsx5(PlanSelector.CardBadge, { className: "solvapay-plan-selector-card-badge" }),
       /* @__PURE__ */ jsx5(PlanSelector.CardName, { className: "solvapay-plan-selector-card-name" }),
@@ -878,17 +884,34 @@ function UpgradeBanner({
 import { memo as memo2, useState as useState3 } from "react";
 import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var AmountStep = memo2(function AmountStep2({
-  plan,
+  topupCurrency,
+  topupCurrencies,
+  onCurrencyChange,
   onBack,
   onContinue,
   cx
 }) {
-  const currency = (plan.currency ?? "USD").toUpperCase();
+  const currency = (topupCurrency ?? "USD").toUpperCase();
   const locale = useHostLocale();
   const [stagedAmountMinor, setStagedAmountMinor] = useState3(null);
+  const currencies = topupCurrencies ?? [];
+  const showCurrencySwitch = currencies.length > 1 && !!onCurrencyChange;
+  const currencyDisplay = showCurrencySwitch ? "code" : "symbol";
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     /* @__PURE__ */ jsx6(BackLink, { label: "Back", onClick: onBack }),
-    /* @__PURE__ */ jsx6("h2", { className: cx.heading, children: "How many credits?" }),
+    /* @__PURE__ */ jsxs5("div", { className: "solvapay-mcp-step-header", children: [
+      /* @__PURE__ */ jsx6("h2", { className: cx.heading, children: "How many credits?" }),
+      showCurrencySwitch && /* @__PURE__ */ jsx6(
+        "select",
+        {
+          className: "solvapay-mcp-currency-switch",
+          value: currency,
+          onChange: (event) => onCurrencyChange?.(event.target.value),
+          "aria-label": "Topup currency",
+          children: currencies.map((code) => /* @__PURE__ */ jsx6("option", { value: code, children: code }, code))
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx6("p", { className: cx.muted, children: "Top up to start using the tool." }),
     /* @__PURE__ */ jsxs5(
       AmountPicker.Root,
@@ -898,14 +921,14 @@ var AmountStep = memo2(function AmountStep2({
         className: cx.amountPicker,
         onChange: (value) => setStagedAmountMinor(value),
         children: [
-          /* @__PURE__ */ jsx6(PresetAmountRow, { cx }),
-          /* @__PURE__ */ jsx6(CustomAmountRow, { rowClassName: cx.amountCustom }),
+          /* @__PURE__ */ jsx6(PresetAmountRow, { cx, currencyDisplay }),
+          /* @__PURE__ */ jsx6(CustomAmountRow, { rowClassName: cx.amountCustom, currencyDisplay }),
           /* @__PURE__ */ jsx6(
             AmountPicker.Confirm,
             {
               className: cx.button,
               onConfirm: (amountMinor) => onContinue(amountMinor),
-              children: stagedAmountMinor ? `Continue \u2014 ${formatPrice(stagedAmountMinor, currency, { locale })}` : "Continue"
+              children: stagedAmountMinor ? `Continue \u2014 ${formatPrice(stagedAmountMinor, currency, { locale, currencyDisplay })}` : "Continue"
             }
           )
         ]
@@ -913,14 +936,18 @@ var AmountStep = memo2(function AmountStep2({
     )
   ] });
 });
-function PresetAmountRow({ cx }) {
+function PresetAmountRow({
+  cx,
+  currencyDisplay
+}) {
   const { quickAmounts, currency } = useAmountPicker();
   const locale = useHostLocale();
   const popularIndex = Math.min(1, quickAmounts.length - 1);
   return /* @__PURE__ */ jsx6("div", { className: cx.amountOptions, children: quickAmounts.map((amount, i) => {
     const label = formatPrice(amount * getMinorUnitsPerMajor(currency), currency, {
       locale,
-      free: ""
+      free: "",
+      currencyDisplay
     });
     return /* @__PURE__ */ jsx6(
       AmountPicker.Option,
@@ -928,16 +955,21 @@ function PresetAmountRow({ cx }) {
         amount,
         className: cx.amountOption,
         "data-popular": i === popularIndex ? "" : void 0,
-        "aria-label": `${label}${i === popularIndex ? " (popular)" : ""}`
+        "aria-label": `${label}${i === popularIndex ? " (popular)" : ""}`,
+        children: label
       },
       amount
     );
   }) });
 }
-function CustomAmountRow({ rowClassName }) {
-  const { currencySymbol } = useAmountPicker();
+function CustomAmountRow({
+  rowClassName,
+  currencyDisplay
+}) {
+  const { currencySymbol, currency } = useAmountPicker();
+  const prefix = currencyDisplay === "code" ? currency.toUpperCase() : currencySymbol;
   return /* @__PURE__ */ jsxs5("div", { className: rowClassName, children: [
-    /* @__PURE__ */ jsx6("span", { className: "solvapay-mcp-amount-currency-symbol", children: currencySymbol }),
+    /* @__PURE__ */ jsx6("span", { className: "solvapay-mcp-amount-currency-symbol", children: prefix }),
     /* @__PURE__ */ jsx6(AmountPicker.Custom, { className: "solvapay-mcp-amount-custom-input", placeholder: "0.00" })
   ] });
 }
@@ -946,14 +978,15 @@ function CustomAmountRow({ rowClassName }) {
 import { memo as memo3 } from "react";
 import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var PaygPaymentStep = memo3(function PaygPaymentStep2({
-  plan,
+  plan: _plan,
   amountMinor,
+  topupCurrency,
   returnUrl,
   onBack,
   onSuccess,
   cx
 }) {
-  const currency = (plan.currency ?? "USD").toUpperCase();
+  const currency = (topupCurrency ?? "USD").toUpperCase();
   const locale = useHostLocale();
   const { creditsPerMinorUnit, displayExchangeRate } = useBalance();
   const creditsAdded = creditsPerMinorUnit != null && creditsPerMinorUnit > 0 ? Math.floor(amountMinor / (displayExchangeRate ?? 1) * creditsPerMinorUnit) : null;
@@ -1006,9 +1039,14 @@ var RecurringPaymentStep = memo4(function RecurringPaymentStep2({
   onSuccess,
   cx
 }) {
-  const currency = (plan.currency ?? "USD").toUpperCase();
+  const planSelection = usePlanSelection();
+  const pricingOption = resolvePlanPricingOption(
+    plan,
+    planSelection?.selectedCurrency
+  );
+  const currency = pricingOption.currency.toUpperCase();
   const locale = useHostLocale();
-  const amountMinor = plan.price ?? 0;
+  const amountMinor = pricingOption.price ?? 0;
   const cycle = plan.billingCycle ?? "monthly";
   const credits = inferIncludedCredits(plan);
   const planName = plan.name ?? "Plan";
@@ -1265,6 +1303,9 @@ function McpCheckoutBody({
       AmountStep,
       {
         plan: selectedPlanShape,
+        topupCurrency: flow.topupCurrency,
+        topupCurrencies: flow.topupCurrencies,
+        onCurrencyChange: flow.setTopupCurrency,
         onBack: () => flow.back(),
         onContinue: (amountMinor) => {
           flow.selectAmount(amountMinor);
@@ -1281,6 +1322,7 @@ function McpCheckoutBody({
         {
           plan: selectedPlanShape,
           amountMinor: flow.selectedAmountMinor,
+          topupCurrency: flow.topupCurrency,
           returnUrl,
           onBack: () => flow.back(),
           onSuccess: (extras) => flow.notifyPaymentSuccess(void 0, extras),
@@ -1663,12 +1705,17 @@ function McpTopupView({
   }
   if (probe === "blocked")
     return /* @__PURE__ */ jsx12(HostedTopupFallback, { cx, onBack });
-  const currency = merchant?.defaultCurrency?.toUpperCase() ?? FALLBACK_TOPUP_CURRENCY;
+  const defaultCurrency = merchant?.defaultCurrency?.toUpperCase() ?? FALLBACK_TOPUP_CURRENCY;
+  const fromMerchant = (merchant?.supportedTopupCurrencies ?? []).map((code) => code.toUpperCase()).filter(Boolean);
+  const topupCurrencies = Array.from(
+    new Set(fromMerchant.length > 0 ? fromMerchant : [defaultCurrency])
+  );
   return /* @__PURE__ */ jsx12(
     EmbeddedTopup,
     {
       returnUrl,
-      currency,
+      defaultCurrency,
+      topupCurrencies,
       onTopupSuccess,
       onBack,
       cx
@@ -1677,16 +1724,25 @@ function McpTopupView({
 }
 function EmbeddedTopup({
   returnUrl,
-  currency,
+  defaultCurrency,
+  topupCurrencies,
   onTopupSuccess,
   onBack,
   cx
 }) {
   const [committedAmountMinor, setCommittedAmountMinor] = useState5(null);
   const [justPaidMinor, setJustPaidMinor] = useState5(null);
-  const { adjustBalance, credits, creditsPerMinorUnit, displayExchangeRate } = useBalance();
+  const [selectedCurrency, setSelectedCurrency] = useState5(defaultCurrency);
+  const currency = selectedCurrency;
+  const showCurrencySwitch = topupCurrencies.length > 1;
+  const { adjustBalance, credits, creditsPerMinorUnit, displayCurrency, displayExchangeRate } = useBalance();
   const locale = useHostLocale();
   const { notifyModelContext, notifySuccess } = useMcpBridge();
+  const handleCurrencyChange = (code) => {
+    setSelectedCurrency(code.toUpperCase());
+    setCommittedAmountMinor(null);
+    setJustPaidMinor(null);
+  };
   if (justPaidMinor != null) {
     const displayAmount = formatPrice(justPaidMinor, currency, { locale, free: "" });
     return /* @__PURE__ */ jsxs11("div", { className: cx.card, children: [
@@ -1720,7 +1776,8 @@ function EmbeddedTopup({
   }
   if (committedAmountMinor != null && committedAmountMinor > 0) {
     const displayAmount = formatPrice(committedAmountMinor, currency, { locale, free: "" });
-    const creditsAdded = creditsPerMinorUnit != null && creditsPerMinorUnit > 0 ? Math.floor(
+    const rateAppliesToCurrency = displayCurrency != null && currency.toUpperCase() === displayCurrency.toUpperCase();
+    const creditsAdded = rateAppliesToCurrency && creditsPerMinorUnit != null && creditsPerMinorUnit > 0 ? Math.floor(
       committedAmountMinor / (displayExchangeRate ?? 1) * creditsPerMinorUnit
     ) : null;
     const formattedBalance = credits != null ? new Intl.NumberFormat(locale).format(credits) : null;
@@ -1786,9 +1843,36 @@ function EmbeddedTopup({
       /* @__PURE__ */ jsx12("h2", { className: cx.heading, children: "Add credits" }),
       /* @__PURE__ */ jsx12(BalanceBadge, {})
     ] }),
+    showCurrencySwitch ? /* @__PURE__ */ jsxs11("div", { className: "solvapay-mcp-step-header", children: [
+      /* @__PURE__ */ jsx12("span", { className: cx.muted, children: "Pay in" }),
+      /* @__PURE__ */ jsx12(
+        "select",
+        {
+          className: "solvapay-mcp-currency-switch",
+          value: currency,
+          onChange: (event) => handleCurrencyChange(event.target.value),
+          "aria-label": "Topup currency",
+          children: topupCurrencies.map((code) => /* @__PURE__ */ jsx12("option", { value: code, children: code }, code))
+        }
+      )
+    ] }) : null,
     /* @__PURE__ */ jsxs11(AmountPicker.Root, { currency, emit: "minor", className: cx.amountPicker, children: [
-      /* @__PURE__ */ jsx12(QuickAmountOptions, { className: cx.amountOptions, optionClassName: cx.amountOption }),
-      /* @__PURE__ */ jsx12(CustomAmountRow2, { rowClassName: cx.amountCustom }),
+      /* @__PURE__ */ jsx12(
+        QuickAmountOptions,
+        {
+          className: cx.amountOptions,
+          optionClassName: cx.amountOption,
+          currencyDisplay: showCurrencySwitch ? "code" : "symbol",
+          locale
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        CustomAmountRow2,
+        {
+          rowClassName: cx.amountCustom,
+          currencyDisplay: showCurrencySwitch ? "code" : "symbol"
+        }
+      ),
       /* @__PURE__ */ jsx12(
         AmountPicker.Confirm,
         {
@@ -1810,15 +1894,28 @@ function EmbeddedTopup({
 }
 function QuickAmountOptions({
   className,
-  optionClassName
+  optionClassName,
+  currencyDisplay,
+  locale
 }) {
-  const { quickAmounts } = useAmountPicker();
-  return /* @__PURE__ */ jsx12("div", { className, children: quickAmounts.map((amount) => /* @__PURE__ */ jsx12(AmountPicker.Option, { amount, className: optionClassName }, amount)) });
+  const { quickAmounts, currency } = useAmountPicker();
+  return /* @__PURE__ */ jsx12("div", { className, children: quickAmounts.map((amount) => {
+    const label = formatPrice(amount * getMinorUnitsPerMajor(currency), currency, {
+      locale,
+      free: "",
+      currencyDisplay
+    });
+    return /* @__PURE__ */ jsx12(AmountPicker.Option, { amount, className: optionClassName, children: label }, amount);
+  }) });
 }
-function CustomAmountRow2({ rowClassName }) {
-  const { currencySymbol } = useAmountPicker();
+function CustomAmountRow2({
+  rowClassName,
+  currencyDisplay
+}) {
+  const { currencySymbol, currency } = useAmountPicker();
+  const prefix = currencyDisplay === "code" ? currency.toUpperCase() : currencySymbol;
   return /* @__PURE__ */ jsxs11("div", { className: rowClassName, children: [
-    /* @__PURE__ */ jsx12("span", { className: "solvapay-mcp-amount-currency-symbol", children: currencySymbol }),
+    /* @__PURE__ */ jsx12("span", { className: "solvapay-mcp-amount-currency-symbol", children: prefix }),
     /* @__PURE__ */ jsx12(AmountPicker.Custom, { className: "solvapay-mcp-amount-custom-input", placeholder: "0.00" })
   ] });
 }

package/dist/mcp/styles.css

@@ -225,6 +225,28 @@ body {
   margin-bottom: 4px;
 }
 
+/* AmountStep header: title left, compact topup-currency switcher right.
+ * Only present for multi-currency merchants; single-currency merchants
+ * render the bare heading exactly as before. */
+.solvapay-mcp-step-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.solvapay-mcp-currency-switch {
+  flex: 0 0 auto;
+  padding: 4px 8px;
+  border: 1px solid var(--color-border, #e2e8f0);
+  border-radius: 6px;
+  background: var(--color-background, #ffffff);
+  color: var(--color-text, #0f172a);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
 .solvapay-mcp-muted {
   margin: 0;
   color: var(--color-text-secondary, #475569);
@@ -978,6 +1000,23 @@ body {
   font-size: 13px;
 }
 
+.solvapay-mcp-plan-step-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.solvapay-mcp-plan-step-header .solvapay-mcp-heading,
+.solvapay-mcp-plan-step-header > .solvapay-mcp-heading {
+  margin: 0;
+}
+
+.solvapay-mcp-plan-step-header .solvapay-plan-selector-currency-switcher {
+  flex: 0 0 auto;
+  width: auto;
+}
+
 .solvapay-mcp-checkout-dismiss {
   align-self: center;
 }