@monetizekit/react 0.2.0 → 0.3.0

package/dist/index.d.cts

@@ -162,6 +162,21 @@ interface CreditBalance {
     balance: number;
     currency?: string;
 }
+interface TeamMember {
+    name: string;
+    email: string;
+    role: string;
+    avatarUrl?: string;
+}
+interface Invoice {
+    id: string;
+    /** ISO date string. */
+    date: string;
+    /** Amount in major currency units (e.g. dollars). */
+    amount: number;
+    currency: string;
+    status: "paid" | "pending" | "overdue";
+}
 
 interface PricingTableProps {
     /** Plans to render; if omitted, fetched live from the publishable-key API. */
@@ -214,9 +229,19 @@ interface CustomerPortalProps {
     meterIds?: string[];
     /** Whether to show the credit balance card. */
     showCredits?: boolean;
+    /** Show a team/seats section. Defaults to on in `sample` mode. */
+    showTeam?: boolean;
+    teamMembers?: TeamMember[];
+    seats?: {
+        used: number;
+        max: number;
+    };
+    /** Show a billing-history (invoices) section. Defaults to on in `sample` mode. */
+    showInvoices?: boolean;
+    invoices?: Invoice[];
     /**
-     * Render illustrative sample plan/usage/credit data behind a clear disclaimer.
-     * Use for previews or a fresh workspace with no plans/products defined yet.
+     * Render illustrative sample plan/usage/credit/team/invoice data behind a clear
+     * disclaimer. Use for previews or a fresh workspace with no plans/products yet.
      */
     sample?: boolean;
     /** Override the sample-data disclaimer copy. */
@@ -227,8 +252,8 @@ interface CustomerPortalProps {
     currency?: string;
     onManageBilling?: () => void;
 }
-/** A self-service portal: current plan, usage meters, and credit balance. */
-declare function CustomerPortal({ planName, meterIds, showCredits, sample, disclaimer, showBranding, locale, currency, onManageBilling, }: CustomerPortalProps): react.JSX.Element;
+/** A self-service portal: plan, usage, credits, team, and invoices. */
+declare function CustomerPortal({ planName, meterIds, showCredits, showTeam, teamMembers, seats, showInvoices, invoices, sample, disclaimer, showBranding, locale, currency, onManageBilling, }: CustomerPortalProps): react.JSX.Element;
 
 interface EntitlementGateProps {
     /** Feature key to check for the provider's customer. */
@@ -263,6 +288,12 @@ declare function SampleNotice({ children }: SampleNoticeProps): react.JSX.Elemen
 declare const SAMPLE_PLANS: Plan[];
 declare const SAMPLE_USAGE: Record<string, UsageResult>;
 declare const SAMPLE_CREDITS: CreditBalance;
+declare const SAMPLE_TEAM: {
+    members: TeamMember[];
+    seats: number;
+    maxSeats: number;
+};
+declare const SAMPLE_INVOICES: Invoice[];
 declare const SAMPLE_PORTAL: {
     readonly planName: "Growth";
     readonly meterIds: readonly ["api_calls", "seats"];
@@ -290,4 +321,4 @@ declare function describePlanPrice(plan: Plan, locale?: string): PriceDisplay;
 /** Human-readable description of a usage term's metered tiers. */
 declare function describeUsageTerm(term: PricingTerm, locale?: string): string;
 
-export { type Appearance, type CreditBalance, CustomerPortal, type CustomerPortalProps, EntitlementGate, type EntitlementGateProps, type EntitlementResult, MonetizeKitClient, type MonetizeKitClientConfig, type MonetizeKitContextValue, MonetizeKitProvider, type MonetizeKitProviderProps, Paywall, type PaywallProps, type Plan, type PlanEntitlement, type PriceDisplay, PricingTable, type PricingTableProps, type PricingTerm, type PricingTier, SAMPLE_CREDITS, SAMPLE_NOTICE_TEXT, SAMPLE_PLANS, SAMPLE_PORTAL, SAMPLE_USAGE, SampleNotice, type SampleNoticeProps, THEME_PRESETS, THEME_PRESET_NAMES, type ThemePresetName, type ThemeTokens, UsageBanner, type UsageBannerProps, type UsageResult, describePlanPrice, describeUsageTerm, formatMoney, formatUnits, resolveTokens, tokensToStyle, useCredits, useEntitlement, useMonetizeKit, useUsage };
+export { type Appearance, type CreditBalance, CustomerPortal, type CustomerPortalProps, EntitlementGate, type EntitlementGateProps, type EntitlementResult, type Invoice, MonetizeKitClient, type MonetizeKitClientConfig, type MonetizeKitContextValue, MonetizeKitProvider, type MonetizeKitProviderProps, Paywall, type PaywallProps, type Plan, type PlanEntitlement, type PriceDisplay, PricingTable, type PricingTableProps, type PricingTerm, type PricingTier, SAMPLE_CREDITS, SAMPLE_INVOICES, SAMPLE_NOTICE_TEXT, SAMPLE_PLANS, SAMPLE_PORTAL, SAMPLE_TEAM, SAMPLE_USAGE, SampleNotice, type SampleNoticeProps, THEME_PRESETS, THEME_PRESET_NAMES, type TeamMember, type ThemePresetName, type ThemeTokens, UsageBanner, type UsageBannerProps, type UsageResult, describePlanPrice, describeUsageTerm, formatMoney, formatUnits, resolveTokens, tokensToStyle, useCredits, useEntitlement, useMonetizeKit, useUsage };

package/dist/index.d.ts

@@ -162,6 +162,21 @@ interface CreditBalance {
     balance: number;
     currency?: string;
 }
+interface TeamMember {
+    name: string;
+    email: string;
+    role: string;
+    avatarUrl?: string;
+}
+interface Invoice {
+    id: string;
+    /** ISO date string. */
+    date: string;
+    /** Amount in major currency units (e.g. dollars). */
+    amount: number;
+    currency: string;
+    status: "paid" | "pending" | "overdue";
+}
 
 interface PricingTableProps {
     /** Plans to render; if omitted, fetched live from the publishable-key API. */
@@ -214,9 +229,19 @@ interface CustomerPortalProps {
     meterIds?: string[];
     /** Whether to show the credit balance card. */
     showCredits?: boolean;
+    /** Show a team/seats section. Defaults to on in `sample` mode. */
+    showTeam?: boolean;
+    teamMembers?: TeamMember[];
+    seats?: {
+        used: number;
+        max: number;
+    };
+    /** Show a billing-history (invoices) section. Defaults to on in `sample` mode. */
+    showInvoices?: boolean;
+    invoices?: Invoice[];
     /**
-     * Render illustrative sample plan/usage/credit data behind a clear disclaimer.
-     * Use for previews or a fresh workspace with no plans/products defined yet.
+     * Render illustrative sample plan/usage/credit/team/invoice data behind a clear
+     * disclaimer. Use for previews or a fresh workspace with no plans/products yet.
      */
     sample?: boolean;
     /** Override the sample-data disclaimer copy. */
@@ -227,8 +252,8 @@ interface CustomerPortalProps {
     currency?: string;
     onManageBilling?: () => void;
 }
-/** A self-service portal: current plan, usage meters, and credit balance. */
-declare function CustomerPortal({ planName, meterIds, showCredits, sample, disclaimer, showBranding, locale, currency, onManageBilling, }: CustomerPortalProps): react.JSX.Element;
+/** A self-service portal: plan, usage, credits, team, and invoices. */
+declare function CustomerPortal({ planName, meterIds, showCredits, showTeam, teamMembers, seats, showInvoices, invoices, sample, disclaimer, showBranding, locale, currency, onManageBilling, }: CustomerPortalProps): react.JSX.Element;
 
 interface EntitlementGateProps {
     /** Feature key to check for the provider's customer. */
@@ -263,6 +288,12 @@ declare function SampleNotice({ children }: SampleNoticeProps): react.JSX.Elemen
 declare const SAMPLE_PLANS: Plan[];
 declare const SAMPLE_USAGE: Record<string, UsageResult>;
 declare const SAMPLE_CREDITS: CreditBalance;
+declare const SAMPLE_TEAM: {
+    members: TeamMember[];
+    seats: number;
+    maxSeats: number;
+};
+declare const SAMPLE_INVOICES: Invoice[];
 declare const SAMPLE_PORTAL: {
     readonly planName: "Growth";
     readonly meterIds: readonly ["api_calls", "seats"];
@@ -290,4 +321,4 @@ declare function describePlanPrice(plan: Plan, locale?: string): PriceDisplay;
 /** Human-readable description of a usage term's metered tiers. */
 declare function describeUsageTerm(term: PricingTerm, locale?: string): string;
 
-export { type Appearance, type CreditBalance, CustomerPortal, type CustomerPortalProps, EntitlementGate, type EntitlementGateProps, type EntitlementResult, MonetizeKitClient, type MonetizeKitClientConfig, type MonetizeKitContextValue, MonetizeKitProvider, type MonetizeKitProviderProps, Paywall, type PaywallProps, type Plan, type PlanEntitlement, type PriceDisplay, PricingTable, type PricingTableProps, type PricingTerm, type PricingTier, SAMPLE_CREDITS, SAMPLE_NOTICE_TEXT, SAMPLE_PLANS, SAMPLE_PORTAL, SAMPLE_USAGE, SampleNotice, type SampleNoticeProps, THEME_PRESETS, THEME_PRESET_NAMES, type ThemePresetName, type ThemeTokens, UsageBanner, type UsageBannerProps, type UsageResult, describePlanPrice, describeUsageTerm, formatMoney, formatUnits, resolveTokens, tokensToStyle, useCredits, useEntitlement, useMonetizeKit, useUsage };
+export { type Appearance, type CreditBalance, CustomerPortal, type CustomerPortalProps, EntitlementGate, type EntitlementGateProps, type EntitlementResult, type Invoice, MonetizeKitClient, type MonetizeKitClientConfig, type MonetizeKitContextValue, MonetizeKitProvider, type MonetizeKitProviderProps, Paywall, type PaywallProps, type Plan, type PlanEntitlement, type PriceDisplay, PricingTable, type PricingTableProps, type PricingTerm, type PricingTier, SAMPLE_CREDITS, SAMPLE_INVOICES, SAMPLE_NOTICE_TEXT, SAMPLE_PLANS, SAMPLE_PORTAL, SAMPLE_TEAM, SAMPLE_USAGE, SampleNotice, type SampleNoticeProps, THEME_PRESETS, THEME_PRESET_NAMES, type TeamMember, type ThemePresetName, type ThemeTokens, UsageBanner, type UsageBannerProps, type UsageResult, describePlanPrice, describeUsageTerm, formatMoney, formatUnits, resolveTokens, tokensToStyle, useCredits, useEntitlement, useMonetizeKit, useUsage };

package/dist/index.js

@@ -407,7 +407,7 @@ var SAMPLE_PLANS = [
     id: "sample_pro",
     name: "Growth",
     description: "Product-led monetization at scale",
-    pricing: [{ type: "flat", amount: 49900, currency: "USD", interval: "monthly" }],
+    pricing: [{ type: "flat", amount: 499, currency: "USD", interval: "monthly" }],
     entitlements: [
       { featureKey: "max_customers", featureDisplayName: "Tracked customers", type: "limit", value: 1e4 },
       { featureKey: "stripe", featureDisplayName: "Stripe integration", type: "boolean", value: true },
@@ -420,7 +420,7 @@ var SAMPLE_PLANS = [
     name: "Scale",
     description: "Volume-based capacity pricing",
     pricing: [
-      { type: "flat", amount: 99900, currency: "USD", interval: "monthly" },
+      { type: "flat", amount: 999, currency: "USD", interval: "monthly" },
       {
         type: "usage",
         amount: 0,
@@ -458,7 +458,21 @@ var SAMPLE_USAGE = {
   seats: { meterId: "seats", current: 8, limit: 10 },
   storage_gb: { meterId: "storage_gb", current: 3, limit: 10 }
 };
-var SAMPLE_CREDITS = { balance: 12e4, currency: "USD" };
+var SAMPLE_CREDITS = { balance: 1200, currency: "USD" };
+var SAMPLE_TEAM = {
+  members: [
+    { name: "Jordan Lee", email: "jordan@acme.test", role: "owner" },
+    { name: "Sam Rivera", email: "sam@acme.test", role: "admin" },
+    { name: "Taylor Kim", email: "taylor@acme.test", role: "member" }
+  ],
+  seats: 3,
+  maxSeats: 10
+};
+var SAMPLE_INVOICES = [
+  { id: "in_1003", date: "2026-03-01T00:00:00Z", amount: 499, currency: "USD", status: "paid" },
+  { id: "in_1002", date: "2026-02-01T00:00:00Z", amount: 499, currency: "USD", status: "paid" },
+  { id: "in_1001", date: "2026-01-01T00:00:00Z", amount: 499, currency: "USD", status: "paid" }
+];
 var SAMPLE_PORTAL = {
   planName: "Growth",
   meterIds: ["api_calls", "seats"]
@@ -756,10 +770,38 @@ function SampleUsageRow({
     hasLimit ? /* @__PURE__ */ jsx("div", { style: { height: 6, borderRadius: 999, background: "var(--mk-border)", overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { width: `${fraction * 100}%`, height: "100%", background: barColor } }) }) : null
   ] });
 }
+var ROW_DIVIDER = { borderTop: "1px solid var(--mk-border)" };
+var INVOICE_STATUS_COLOR = {
+  paid: "var(--mk-success)",
+  pending: "var(--mk-warning)",
+  overdue: "var(--mk-danger)"
+};
+function StatusBadge({ label, color }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        fontSize: "0.6875rem",
+        fontWeight: 600,
+        textTransform: "capitalize",
+        color,
+        border: `1px solid ${color}`,
+        borderRadius: 999,
+        padding: "0.0625rem 0.5rem"
+      },
+      children: label
+    }
+  );
+}
 function CustomerPortal({
   planName,
   meterIds,
   showCredits = true,
+  showTeam,
+  teamMembers,
+  seats,
+  showInvoices,
+  invoices,
   sample = false,
   disclaimer,
   showBranding = false,
@@ -774,6 +816,11 @@ function CustomerPortal({
   const creditBalance = sample ? SAMPLE_CREDITS.balance : credits.balance;
   const creditCurrency = sample ? SAMPLE_CREDITS.currency : credits.currency;
   const creditLoading = sample ? false : credits.loading;
+  const teamEnabled = showTeam ?? sample;
+  const resolvedTeam = teamMembers ?? (sample ? SAMPLE_TEAM.members : []);
+  const resolvedSeats = seats ?? (sample ? { used: SAMPLE_TEAM.seats, max: SAMPLE_TEAM.maxSeats } : void 0);
+  const invoicesEnabled = showInvoices ?? sample;
+  const resolvedInvoices = invoices ?? (sample ? SAMPLE_INVOICES : []);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -840,6 +887,64 @@ function CustomerPortal({
           /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: "Credits" }),
           /* @__PURE__ */ jsx("span", { style: { color: "var(--mk-muted)" }, children: creditLoading ? "\u2026" : formatMoney(creditBalance, creditCurrency ?? currency, locale) })
         ] }) : null,
+        teamEnabled ? /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: "Team" }),
+            resolvedSeats ? /* @__PURE__ */ jsxs("span", { style: { color: "var(--mk-muted)", fontSize: "0.75rem" }, children: [
+              resolvedSeats.used,
+              "/",
+              resolvedSeats.max >= 9999 ? "Unlimited" : resolvedSeats.max,
+              " seats"
+            ] }) : null
+          ] }),
+          resolvedTeam.length === 0 ? /* @__PURE__ */ jsx("span", { style: { color: "var(--mk-muted)", fontSize: "0.8125rem" }, children: "No team members." }) : resolvedTeam.map((member, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                gap: "0.75rem",
+                fontSize: "0.8125rem",
+                paddingTop: i === 0 ? 0 : "0.5rem",
+                ...i === 0 ? {} : ROW_DIVIDER
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx("div", { style: { fontWeight: 600 }, children: member.name }),
+                  /* @__PURE__ */ jsx("div", { style: { color: "var(--mk-muted)", fontSize: "0.75rem" }, children: member.email })
+                ] }),
+                /* @__PURE__ */ jsx(StatusBadge, { label: member.role, color: "var(--mk-muted)" })
+              ]
+            },
+            member.email
+          ))
+        ] }) : null,
+        invoicesEnabled ? /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: "Invoices" }),
+          resolvedInvoices.length === 0 ? /* @__PURE__ */ jsx("span", { style: { color: "var(--mk-muted)", fontSize: "0.8125rem" }, children: "No invoices yet." }) : resolvedInvoices.map((invoice, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                gap: "0.75rem",
+                fontSize: "0.8125rem",
+                paddingTop: i === 0 ? 0 : "0.5rem",
+                ...i === 0 ? {} : ROW_DIVIDER
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: new Date(invoice.date).toLocaleDateString(locale) }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                  /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: formatMoney(invoice.amount, invoice.currency, locale) }),
+                  /* @__PURE__ */ jsx(StatusBadge, { label: invoice.status, color: INVOICE_STATUS_COLOR[invoice.status] })
+                ] })
+              ]
+            },
+            invoice.id
+          ))
+        ] }) : null,
         showBranding ? /* @__PURE__ */ jsx("div", { style: { textAlign: "center", fontSize: "0.625rem", color: "var(--mk-muted)" }, children: "Powered by MonetizeKit" }) : null
       ]
     }
@@ -856,6 +961,6 @@ function EntitlementGate({
   return /* @__PURE__ */ jsx(Fragment, { children: allowed ? children : fallback });
 }
 
-export { CustomerPortal, EntitlementGate, MonetizeKitClient, MonetizeKitProvider, Paywall, PricingTable, SAMPLE_CREDITS, SAMPLE_NOTICE_TEXT, SAMPLE_PLANS, SAMPLE_PORTAL, SAMPLE_USAGE, SampleNotice, THEME_PRESETS, THEME_PRESET_NAMES, UsageBanner, describePlanPrice, describeUsageTerm, formatMoney, formatUnits, resolveTokens, tokensToStyle, useCredits, useEntitlement, useMonetizeKit, useUsage };
+export { CustomerPortal, EntitlementGate, MonetizeKitClient, MonetizeKitProvider, Paywall, PricingTable, SAMPLE_CREDITS, SAMPLE_INVOICES, SAMPLE_NOTICE_TEXT, SAMPLE_PLANS, SAMPLE_PORTAL, SAMPLE_TEAM, SAMPLE_USAGE, SampleNotice, THEME_PRESETS, THEME_PRESET_NAMES, UsageBanner, describePlanPrice, describeUsageTerm, formatMoney, formatUnits, resolveTokens, tokensToStyle, useCredits, useEntitlement, useMonetizeKit, useUsage };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map