@monetizekit/react 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -359,13 +359,14 @@ var INTERVAL_SUFFIX = {
   annually: "/yr",
   one_time: ""
 };
-function describePlanPrice(plan, locale) {
+function describePlanPrice(plan, locale, billingCycle = "monthly") {
   const pricing = plan.pricing ?? [];
   const contactSales = (plan.tags ?? []).includes("contact_sales") || pricing.length === 0;
   if (contactSales) {
     return { headline: null, contactSales: true };
   }
-  const base = pricing.find((t) => t.type === "flat");
+  const flats = pricing.filter((t) => t.type === "flat");
+  const base = flats.find((t) => t.interval === billingCycle) ?? flats.find((t) => t.interval === "monthly") ?? flats[0];
   const hasUsage = pricing.some((t) => t.type === "usage");
   const currency = base?.currency ?? pricing[0]?.currency ?? "USD";
   const interval = base?.interval ?? pricing[0]?.interval ?? "monthly";
@@ -377,6 +378,14 @@ function describePlanPrice(plan, locale) {
     contactSales: false
   };
 }
+function annualSavingsPercent(plan) {
+  const flats = (plan.pricing ?? []).filter((t) => t.type === "flat");
+  const monthly = flats.find((t) => t.interval === "monthly");
+  const annual = flats.find((t) => t.interval === "annually");
+  if (!monthly || !annual || monthly.amount <= 0) return null;
+  const pct = Math.round((1 - annual.amount / (monthly.amount * 12)) * 100);
+  return pct > 0 ? pct : null;
+}
 function describeUsageTerm(term, locale) {
   const parts = [];
   if (term.includedUnits && term.includedUnits > 0) {
@@ -498,6 +507,78 @@ function SampleNotice({ children }) {
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: children ?? SAMPLE_NOTICE_TEXT })
   ] });
 }
+var trackStyle = {
+  display: "inline-flex",
+  alignSelf: "center",
+  gap: "0.125rem",
+  padding: "0.25rem",
+  borderRadius: "var(--mk-radius)",
+  background: "color-mix(in srgb, var(--mk-fg) 6%, transparent)",
+  fontFamily: "var(--mk-font)"
+};
+function optionStyle(active) {
+  return {
+    border: "none",
+    cursor: "pointer",
+    borderRadius: "var(--mk-radius)",
+    padding: "0.375rem 0.875rem",
+    fontSize: "0.8125rem",
+    fontWeight: 600,
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.375rem",
+    background: active ? "var(--mk-card)" : "transparent",
+    color: active ? "var(--mk-card-fg)" : "var(--mk-muted)",
+    boxShadow: active ? "var(--mk-shadow)" : "none"
+  };
+}
+function BillingCycleToggle({
+  value,
+  onChange,
+  savingsPercent = 0,
+  monthlyLabel = "Monthly",
+  annuallyLabel = "Yearly"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: trackStyle, role: "group", "aria-label": "Billing cycle", "data-mk-component": "billing-toggle", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        style: optionStyle(value === "monthly"),
+        "aria-pressed": value === "monthly",
+        onClick: () => onChange("monthly"),
+        children: monthlyLabel
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        style: optionStyle(value === "annually"),
+        "aria-pressed": value === "annually",
+        onClick: () => onChange("annually"),
+        children: [
+          annuallyLabel,
+          savingsPercent > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              style: {
+                fontSize: "0.6875rem",
+                fontWeight: 700,
+                color: "var(--mk-success)"
+              },
+              children: [
+                "Save ",
+                savingsPercent,
+                "%"
+              ]
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
 var wrapperStyle = {
   display: "grid",
   gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
@@ -517,6 +598,8 @@ var cardBase = {
 function PricingTable({
   plans: plansProp,
   highlightPlan,
+  billingCycle,
+  showBillingToggle = false,
   locale,
   onSelectPlan,
   onContactSales,
@@ -526,6 +609,10 @@ function PricingTable({
   const { client, tokens } = useMonetizeKit();
   const [plans, setPlans] = react.useState(plansProp ?? null);
   const [error, setError] = react.useState(null);
+  const [cycle, setCycle] = react.useState(billingCycle ?? "monthly");
+  react.useEffect(() => {
+    if (billingCycle) setCycle(billingCycle);
+  }, [billingCycle]);
   react.useEffect(() => {
     if (plansProp) {
       setPlans(plansProp);
@@ -560,8 +647,19 @@ function PricingTable({
       "data-mk-sample": isSample ? "true" : void 0,
       children: [
         isSample ? /* @__PURE__ */ jsxRuntime.jsx(SampleNotice, { children: disclaimer }) : null,
+        showBillingToggle ? /* @__PURE__ */ jsxRuntime.jsx(
+          BillingCycleToggle,
+          {
+            value: cycle,
+            onChange: setCycle,
+            savingsPercent: Math.max(
+              0,
+              ...effectivePlans.map((p) => annualSavingsPercent(p) ?? 0)
+            )
+          }
+        ) : null,
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: wrapperStyle, children: effectivePlans.map((plan) => {
-          const price = describePlanPrice(plan, locale);
+          const price = describePlanPrice(plan, locale, cycle);
           const highlighted = highlightPlan != null && plan.name.toLowerCase() === highlightPlan.toLowerCase();
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
@@ -626,6 +724,169 @@ function PricingTable({
     }
   );
 }
+var UNLIMITED_THRESHOLD = 9999;
+function entitlementCell(ent, locale) {
+  if (!ent) return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--mk-muted)" }, children: "\u2014" });
+  switch (ent.type) {
+    case "boolean":
+      return ent.value ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": "Included", style: { color: "var(--mk-success)", fontWeight: 700 }, children: "\u2713" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": "Not included", style: { color: "var(--mk-muted)" }, children: "\u2014" });
+    case "limit": {
+      const n = Number(ent.value);
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { children: n >= UNLIMITED_THRESHOLD ? "Unlimited" : formatUnits(n, locale) });
+    }
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { children: String(ent.value) });
+  }
+}
+function deriveGroups(plans) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const plan of plans) {
+    for (const ent of plan.entitlements ?? []) {
+      if (!seen.has(ent.featureKey)) seen.set(ent.featureKey, ent.featureDisplayName);
+    }
+  }
+  return [
+    {
+      title: "Features",
+      features: Array.from(seen, ([key, label]) => ({ key, label }))
+    }
+  ];
+}
+var cellStyle = {
+  padding: "0.75rem 1rem",
+  textAlign: "center",
+  fontSize: "0.875rem",
+  borderTop: "1px solid var(--mk-border)"
+};
+function PricingComparison({
+  plans: plansProp,
+  groups,
+  highlightPlan,
+  billingCycle = "monthly",
+  locale,
+  sampleWhenEmpty = true,
+  disclaimer
+}) {
+  const { client, tokens } = useMonetizeKit();
+  const [plans, setPlans] = react.useState(plansProp ?? null);
+  const [error, setError] = react.useState(null);
+  react.useEffect(() => {
+    if (plansProp) {
+      setPlans(plansProp);
+      return;
+    }
+    let active = true;
+    client.listPlans().then((res) => {
+      if (active) setPlans(res.data ?? []);
+    }).catch((e) => {
+      if (active) setError(e instanceof Error ? e : new Error(String(e)));
+    });
+    return () => {
+      active = false;
+    };
+  }, [client, plansProp]);
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", style: { color: "var(--mk-muted)" }, children: "Unable to load plan comparison." });
+  }
+  if (!plans) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-busy": "true", style: { color: "var(--mk-muted)" }, children: "Loading comparison\u2026" });
+  }
+  const isSample = plans.length === 0 && sampleWhenEmpty;
+  const effectivePlans = isSample ? SAMPLE_PLANS : plans;
+  if (effectivePlans.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--mk-muted)" }, children: "No plans to compare." });
+  }
+  const effectiveGroups = groups ?? deriveGroups(effectivePlans);
+  const entByPlan = effectivePlans.map(
+    (plan) => new Map((plan.entitlements ?? []).map((e) => [e.featureKey, e]))
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: { ...tokensToStyle(tokens), display: "flex", flexDirection: "column", gap: "1rem" },
+      "data-mk-component": "pricing-comparison",
+      "data-mk-sample": isSample ? "true" : void 0,
+      children: [
+        isSample ? /* @__PURE__ */ jsxRuntime.jsx(SampleNotice, { children: disclaimer }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "table",
+          {
+            style: {
+              width: "100%",
+              borderCollapse: "collapse",
+              background: "var(--mk-bg)",
+              color: "var(--mk-fg)",
+              fontFamily: "var(--mk-font)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("th", { style: { ...cellStyle, textAlign: "left", borderTop: "none" }, children: "Features" }),
+                effectivePlans.map((plan) => {
+                  const highlighted = highlightPlan != null && plan.name.toLowerCase() === highlightPlan.toLowerCase();
+                  const price = describePlanPrice(plan, locale, billingCycle);
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "th",
+                    {
+                      style: {
+                        ...cellStyle,
+                        borderTop: "none",
+                        color: highlighted ? "var(--mk-primary)" : "var(--mk-fg)"
+                      },
+                      "data-mk-plan": plan.name,
+                      "data-mk-highlighted": highlighted ? "true" : void 0,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 700 }, children: plan.name }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.75rem", color: "var(--mk-muted)", fontWeight: 400 }, children: price.contactSales ? "Custom" : price.headline })
+                      ]
+                    },
+                    plan.id
+                  );
+                })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: effectiveGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+                FeatureGroupRows,
+                {
+                  group,
+                  planCount: effectivePlans.length,
+                  entByPlan,
+                  locale
+                },
+                group.title
+              )) })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+function FeatureGroupRows({
+  group,
+  planCount,
+  entByPlan,
+  locale
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "td",
+      {
+        colSpan: planCount + 1,
+        style: {
+          padding: "0.625rem 1rem",
+          fontSize: "0.8125rem",
+          fontWeight: 700,
+          background: "color-mix(in srgb, var(--mk-fg) 5%, transparent)",
+          borderTop: "1px solid var(--mk-border)"
+        },
+        children: group.title
+      }
+    ) }),
+    group.features.map((feature) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("td", { style: { ...cellStyle, textAlign: "left", color: "var(--mk-fg)" }, children: feature.label }),
+      entByPlan.map((map, i) => /* @__PURE__ */ jsxRuntime.jsx("td", { style: cellStyle, children: entitlementCell(map.get(feature.key), locale) }, i))
+    ] }, feature.key))
+  ] });
+}
 var overlayStyle = {
   border: "1px solid var(--mk-border)",
   borderRadius: "var(--mk-radius)",
@@ -645,14 +906,15 @@ function Paywall({
   title = "Upgrade to unlock this feature",
   description = "This feature isn't included in your current plan.",
   ctaLabel = "Upgrade",
-  onUpgrade
+  onUpgrade,
+  sample = false
 }) {
   const { allowed, loading } = useEntitlement(feature);
   const { tokens } = useMonetizeKit();
-  if (loading) {
+  if (!sample && loading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-busy": "true", style: { color: "var(--mk-muted)" }, children: "Checking access\u2026" });
   }
-  if (allowed) {
+  if (!sample && allowed) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...tokensToStyle(tokens), ...overlayStyle }, "data-mk-component": "paywall", children: [
@@ -731,6 +993,94 @@ function UsageBanner({
     over ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--mk-danger)", fontSize: "0.75rem" }, children: "Over included allotment \u2014 overage billed per usage pricing." }) : null
   ] });
 }
+var VARIANT_COLOR = {
+  info: "var(--mk-accent)",
+  warning: "var(--mk-warning)",
+  danger: "var(--mk-danger)",
+  neutral: "var(--mk-muted)"
+};
+function actionStyle(variant, accent) {
+  if (variant === "ghost") {
+    return {
+      background: "transparent",
+      color: "var(--mk-muted)",
+      border: "none",
+      cursor: "pointer",
+      fontSize: "0.8125rem",
+      fontWeight: 600,
+      padding: "0.375rem 0.5rem"
+    };
+  }
+  return {
+    background: accent,
+    color: "var(--mk-card)",
+    border: "none",
+    borderRadius: "var(--mk-radius)",
+    cursor: "pointer",
+    fontSize: "0.8125rem",
+    fontWeight: 600,
+    padding: "0.375rem 0.75rem"
+  };
+}
+function AlertBanner({
+  variant = "info",
+  title,
+  description,
+  progress,
+  actions = [],
+  icon
+}) {
+  const { tokens } = useMonetizeKit();
+  const accent = VARIANT_COLOR[variant];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "status",
+      "data-mk-component": "alert-banner",
+      "data-mk-variant": variant,
+      style: {
+        ...tokensToStyle(tokens),
+        display: "flex",
+        gap: "0.75rem",
+        alignItems: "flex-start",
+        border: `1px solid color-mix(in srgb, ${accent} 35%, var(--mk-border))`,
+        background: `color-mix(in srgb, ${accent} 8%, var(--mk-card))`,
+        color: "var(--mk-card-fg)",
+        borderRadius: "var(--mk-radius)",
+        padding: "0.875rem 1rem",
+        fontFamily: "var(--mk-font)"
+      },
+      children: [
+        icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { color: accent, fontSize: "1.1rem", lineHeight: 1 }, children: icon }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: title }),
+          description ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.8125rem", color: "var(--mk-muted)" }, children: description }) : null,
+          typeof progress === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: { height: 6, borderRadius: 999, background: "var(--mk-border)", overflow: "hidden" },
+              role: "progressbar",
+              "aria-valuenow": Math.round(Math.min(1, Math.max(0, progress)) * 100),
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: `${Math.min(1, Math.max(0, progress)) * 100}%`, height: "100%", background: accent } })
+            }
+          ) : null,
+          actions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: actions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: action.onClick,
+              style: actionStyle(action.variant, accent),
+              children: action.label
+            },
+            action.label
+          )) }) : null
+        ] })
+      ]
+    }
+  );
+}
 var containerStyle = {
   border: "1px solid var(--mk-border)",
   borderRadius: "var(--mk-radius)",
@@ -963,11 +1313,14 @@ function EntitlementGate({
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: allowed ? children : fallback });
 }
 
+exports.AlertBanner = AlertBanner;
+exports.BillingCycleToggle = BillingCycleToggle;
 exports.CustomerPortal = CustomerPortal;
 exports.EntitlementGate = EntitlementGate;
 exports.MonetizeKitClient = MonetizeKitClient;
 exports.MonetizeKitProvider = MonetizeKitProvider;
 exports.Paywall = Paywall;
+exports.PricingComparison = PricingComparison;
 exports.PricingTable = PricingTable;
 exports.SAMPLE_CREDITS = SAMPLE_CREDITS;
 exports.SAMPLE_INVOICES = SAMPLE_INVOICES;