@sudobility/entity_pages 0.0.10 → 0.0.11

package/dist/index.d.ts

@@ -20,4 +20,4 @@
  * }
  * ```
  */
-export { EntityListPage, type EntityListPageProps, MembersManagementPage, type MembersManagementPageProps, InvitationsPage, type InvitationsPageProps, } from './pages';
+export { EntityListPage, type EntityListPageProps, MembersManagementPage, type MembersManagementPageProps, InvitationsPage, type InvitationsPageProps, EntitySubscriptionsPage, type EntitySubscriptionsPageProps, type SubscriptionProduct, type CurrentSubscription, type SubscriptionContextValue, type TranslationFunction, } from './pages';

package/dist/index.esm.js

@@ -1,78 +1,79 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { useState as f } from "react";
-import { Plus as I } from "lucide-react";
-import { EntityList as x, InvitationForm as M, InvitationList as C, MemberList as S } from "@sudobility/entity-components";
-import { useEntities as z, useCreateEntity as k, useEntityMembers as L, useUpdateMemberRole as A, useRemoveMember as F, useEntityInvitations as E, useCreateInvitation as P, useCancelInvitation as D, useMyInvitations as R, useAcceptInvitation as j, useDeclineInvitation as O } from "@sudobility/entity_client";
-function U({
-  client: i,
-  onSelectEntity: n
+import { jsxs as a, jsx as i, Fragment as te } from "react/jsx-runtime";
+import { useState as w, useEffect as ie, useCallback as x } from "react";
+import { Plus as ne } from "lucide-react";
+import { EntityList as j, InvitationForm as re, InvitationList as B, MemberList as ae } from "@sudobility/entity-components";
+import { useEntities as se, useCreateEntity as le, useEntityMembers as oe, useUpdateMemberRole as ce, useRemoveMember as de, useEntityInvitations as ue, useCreateInvitation as me, useCancelInvitation as he, useMyInvitations as ye, useAcceptInvitation as ge, useDeclineInvitation as pe } from "@sudobility/entity_client";
+import { SubscriptionLayout as fe, SubscriptionTile as O, SegmentedControl as be } from "@sudobility/subscription-components";
+function Ie({
+  client: l,
+  onSelectEntity: r
 }) {
-  const [p, a] = f(!1), [s, c] = f({
+  const [e, h] = w(!1), [p, y] = w({
     displayName: "",
     description: ""
-  }), [h, d] = f(null), { data: m = [], isLoading: r } = z(i), l = k(i), b = m.filter((o) => o.entityType === "personal"), v = m.filter(
-    (o) => o.entityType === "organization"
+  }), [N, o] = w(null), { data: s = [], isLoading: d } = se(l), c = le(l), I = s.filter((u) => u.entityType === "personal"), L = s.filter(
+    (u) => u.entityType === "organization"
   );
-  return /* @__PURE__ */ t("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ t("div", { children: [
-        /* @__PURE__ */ e("h1", { className: "text-2xl font-bold text-foreground", children: "Workspaces" }),
-        /* @__PURE__ */ e("p", { className: "text-muted-foreground", children: "Manage your personal and organization workspaces" })
+  return /* @__PURE__ */ a("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ i("h1", { className: "text-2xl font-bold text-foreground", children: "Workspaces" }),
+        /* @__PURE__ */ i("p", { className: "text-muted-foreground", children: "Manage your personal and organization workspaces" })
       ] }),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ a(
         "button",
         {
           type: "button",
-          onClick: () => a(!0),
+          onClick: () => h(!0),
           className: "flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors",
           children: [
-            /* @__PURE__ */ e(I, { className: "h-4 w-4" }),
-            /* @__PURE__ */ e("span", { children: "New Organization" })
+            /* @__PURE__ */ i(ne, { className: "h-4 w-4" }),
+            /* @__PURE__ */ i("span", { children: "New Organization" })
           ]
         }
       )
     ] }),
-    p && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ t("div", { className: "w-full max-w-md rounded-lg bg-background p-6 shadow-lg", children: [
-      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-4", children: "Create Organization" }),
-      /* @__PURE__ */ t("form", { onSubmit: async (o) => {
-        if (o.preventDefault(), d(null), !s.displayName.trim()) {
-          d("Display name is required");
+    e && /* @__PURE__ */ i("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ a("div", { className: "w-full max-w-md rounded-lg bg-background p-6 shadow-lg", children: [
+      /* @__PURE__ */ i("h2", { className: "text-lg font-semibold mb-4", children: "Create Organization" }),
+      /* @__PURE__ */ a("form", { onSubmit: async (u) => {
+        if (u.preventDefault(), o(null), !p.displayName.trim()) {
+          o("Display name is required");
           return;
         }
         try {
-          await l.mutateAsync({
-            displayName: s.displayName.trim(),
-            description: s.description.trim() || void 0
-          }), a(!1), c({ displayName: "", description: "" });
-        } catch (u) {
-          d(u.message || "Failed to create organization");
+          await c.mutateAsync({
+            displayName: p.displayName.trim(),
+            description: p.description.trim() || void 0
+          }), h(!1), y({ displayName: "", description: "" });
+        } catch (v) {
+          o(v.message || "Failed to create organization");
         }
       }, className: "space-y-4", children: [
-        /* @__PURE__ */ t("div", { children: [
-          /* @__PURE__ */ e("label", { className: "block text-sm font-medium mb-1", children: "Display Name" }),
-          /* @__PURE__ */ e(
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ i("label", { className: "block text-sm font-medium mb-1", children: "Display Name" }),
+          /* @__PURE__ */ i(
             "input",
             {
               type: "text",
-              value: s.displayName,
-              onChange: (o) => c((u) => ({
-                ...u,
-                displayName: o.target.value
+              value: p.displayName,
+              onChange: (u) => y((v) => ({
+                ...v,
+                displayName: u.target.value
               })),
               placeholder: "My Organization",
               className: "w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary"
             }
           )
         ] }),
-        /* @__PURE__ */ t("div", { children: [
-          /* @__PURE__ */ e("label", { className: "block text-sm font-medium mb-1", children: "Description (optional)" }),
-          /* @__PURE__ */ e(
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ i("label", { className: "block text-sm font-medium mb-1", children: "Description (optional)" }),
+          /* @__PURE__ */ i(
             "textarea",
             {
-              value: s.description,
-              onChange: (o) => c((u) => ({
-                ...u,
-                description: o.target.value
+              value: p.description,
+              onChange: (u) => y((v) => ({
+                ...v,
+                description: u.target.value
               })),
               placeholder: "What is this organization for?",
               rows: 3,
@@ -80,200 +81,481 @@ function U({
             }
           )
         ] }),
-        h && /* @__PURE__ */ e("p", { className: "text-sm text-destructive", children: h }),
-        /* @__PURE__ */ t("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ e(
+        N && /* @__PURE__ */ i("p", { className: "text-sm text-destructive", children: N }),
+        /* @__PURE__ */ a("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ i(
             "button",
             {
               type: "button",
               onClick: () => {
-                a(!1), c({ displayName: "", description: "" }), d(null);
+                h(!1), y({ displayName: "", description: "" }), o(null);
               },
               className: "px-4 py-2 rounded-lg border hover:bg-muted transition-colors",
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ i(
             "button",
             {
               type: "submit",
-              disabled: l.isPending,
+              disabled: c.isPending,
               className: "px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50",
-              children: l.isPending ? "Creating..." : "Create"
+              children: c.isPending ? "Creating..." : "Create"
             }
           )
         ] })
       ] })
     ] }) }),
-    b.length > 0 && /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-3", children: "Personal Workspace" }),
-      /* @__PURE__ */ e(
-        x,
+    I.length > 0 && /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ i("h2", { className: "text-lg font-semibold mb-3", children: "Personal Workspace" }),
+      /* @__PURE__ */ i(
+        j,
         {
-          entities: b,
-          onSelect: n,
-          isLoading: r
+          entities: I,
+          onSelect: r,
+          isLoading: d
         }
       )
     ] }),
-    /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-3", children: "Organizations" }),
-      v.length === 0 && !r ? /* @__PURE__ */ t("div", { className: "text-center py-8 text-muted-foreground border border-dashed rounded-lg", children: [
-        /* @__PURE__ */ e("p", { children: "No organizations yet" }),
-        /* @__PURE__ */ e(
+    /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ i("h2", { className: "text-lg font-semibold mb-3", children: "Organizations" }),
+      L.length === 0 && !d ? /* @__PURE__ */ a("div", { className: "text-center py-8 text-muted-foreground border border-dashed rounded-lg", children: [
+        /* @__PURE__ */ i("p", { children: "No organizations yet" }),
+        /* @__PURE__ */ i(
           "button",
           {
             type: "button",
-            onClick: () => a(!0),
+            onClick: () => h(!0),
             className: "mt-2 text-primary hover:underline",
             children: "Create your first organization"
           }
         )
-      ] }) : /* @__PURE__ */ e(
-        x,
+      ] }) : /* @__PURE__ */ i(
+        j,
         {
-          entities: v,
-          onSelect: n,
-          isLoading: r
+          entities: L,
+          onSelect: r,
+          isLoading: d
         }
       )
     ] })
   ] });
 }
-function B({
-  client: i,
-  entity: n,
-  currentUserId: p
+function Le({
+  client: l,
+  entity: r,
+  currentUserId: e
 }) {
-  const a = n.userRole === "admin", { data: s = [], isLoading: c } = L(
-    i,
-    n.entitySlug
-  ), h = A(i), d = F(i), { data: m = [], isLoading: r } = E(i, a ? n.entitySlug : null), l = P(i), b = D(i), v = async (g, y) => {
+  const h = r.userRole === "admin", { data: p = [], isLoading: y } = oe(
+    l,
+    r.entitySlug
+  ), N = ce(l), o = de(l), { data: s = [], isLoading: d } = ue(l, h ? r.entitySlug : null), c = me(l), I = he(l), L = async (g, f) => {
     try {
-      await h.mutateAsync({
-        entitySlug: n.entitySlug,
+      await N.mutateAsync({
+        entitySlug: r.entitySlug,
         memberId: g,
-        role: y
+        role: f
       });
-    } catch (w) {
-      console.error("Failed to update role:", w);
+    } catch (S) {
+      console.error("Failed to update role:", S);
     }
-  }, N = async (g) => {
+  }, P = async (g) => {
     if (confirm("Are you sure you want to remove this member?"))
       try {
-        await d.mutateAsync({
-          entitySlug: n.entitySlug,
+        await o.mutateAsync({
+          entitySlug: r.entitySlug,
           memberId: g
         });
-      } catch (y) {
-        console.error("Failed to remove member:", y);
+      } catch (f) {
+        console.error("Failed to remove member:", f);
       }
-  }, o = async (g) => {
-    await l.mutateAsync({
-      entitySlug: n.entitySlug,
+  }, u = async (g) => {
+    await c.mutateAsync({
+      entitySlug: r.entitySlug,
       request: g
     });
-  }, u = async (g) => {
+  }, v = async (g) => {
     try {
-      await b.mutateAsync({
-        entitySlug: n.entitySlug,
+      await I.mutateAsync({
+        entitySlug: r.entitySlug,
         invitationId: g
       });
-    } catch (y) {
-      console.error("Failed to cancel invitation:", y);
+    } catch (f) {
+      console.error("Failed to cancel invitation:", f);
     }
   };
-  return n.entityType === "personal" ? /* @__PURE__ */ t("div", { className: "text-center py-12 text-muted-foreground", children: [
-    /* @__PURE__ */ e("p", { children: "Personal workspaces cannot have additional members." }),
-    /* @__PURE__ */ e("p", { className: "mt-2", children: "Create an organization to collaborate with others." })
-  ] }) : /* @__PURE__ */ t("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ e("h1", { className: "text-2xl font-bold text-foreground", children: "Members" }),
-      /* @__PURE__ */ t("p", { className: "text-muted-foreground", children: [
+  return r.entityType === "personal" ? /* @__PURE__ */ a("div", { className: "text-center py-12 text-muted-foreground", children: [
+    /* @__PURE__ */ i("p", { children: "Personal workspaces cannot have additional members." }),
+    /* @__PURE__ */ i("p", { className: "mt-2", children: "Create an organization to collaborate with others." })
+  ] }) : /* @__PURE__ */ a("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ i("h1", { className: "text-2xl font-bold text-foreground", children: "Members" }),
+      /* @__PURE__ */ a("p", { className: "text-muted-foreground", children: [
         "Manage members and invitations for ",
-        n.displayName
+        r.displayName
       ] })
     ] }),
-    a && /* @__PURE__ */ t("div", { className: "rounded-lg border p-4", children: [
-      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-4", children: "Invite Members" }),
-      /* @__PURE__ */ e(
-        M,
+    h && /* @__PURE__ */ a("div", { className: "rounded-lg border p-4", children: [
+      /* @__PURE__ */ i("h2", { className: "text-lg font-semibold mb-4", children: "Invite Members" }),
+      /* @__PURE__ */ i(
+        re,
         {
-          onSubmit: o,
-          isSubmitting: l.isPending
+          onSubmit: u,
+          isSubmitting: c.isPending
         }
       )
     ] }),
-    a && /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-3", children: "Pending Invitations" }),
-      /* @__PURE__ */ e(
-        C,
+    h && /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ i("h2", { className: "text-lg font-semibold mb-3", children: "Pending Invitations" }),
+      /* @__PURE__ */ i(
+        B,
         {
-          invitations: m,
+          invitations: s,
           mode: "admin",
-          onCancel: u,
-          isLoading: r,
+          onCancel: v,
+          isLoading: d,
           emptyMessage: "No pending invitations"
         }
       )
     ] }),
-    /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ t("h2", { className: "text-lg font-semibold mb-3", children: [
+    /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ a("h2", { className: "text-lg font-semibold mb-3", children: [
         "Current Members (",
-        s.length,
+        p.length,
         ")"
       ] }),
-      /* @__PURE__ */ e(
-        S,
+      /* @__PURE__ */ i(
+        ae,
         {
-          members: s,
-          currentUserId: p,
-          canManage: a,
-          onRoleChange: v,
-          onRemove: N,
-          isLoading: c
+          members: p,
+          currentUserId: e,
+          canManage: h,
+          onRoleChange: L,
+          onRemove: P,
+          isLoading: y
         }
       )
     ] })
   ] });
 }
-function G({
-  client: i,
-  onInvitationAccepted: n
+function Me({
+  client: l,
+  onInvitationAccepted: r
 }) {
-  const { data: p = [], isLoading: a } = R(i), s = j(i), c = O(i), h = async (r) => {
+  const { data: e = [], isLoading: h } = ye(l), p = ge(l), y = pe(l), N = async (d) => {
     try {
-      await s.mutateAsync(r), n?.();
-    } catch (l) {
-      console.error("Failed to accept invitation:", l);
+      await p.mutateAsync(d), r?.();
+    } catch (c) {
+      console.error("Failed to accept invitation:", c);
     }
-  }, d = async (r) => {
+  }, o = async (d) => {
     try {
-      await c.mutateAsync(r);
-    } catch (l) {
-      console.error("Failed to decline invitation:", l);
+      await y.mutateAsync(d);
+    } catch (c) {
+      console.error("Failed to decline invitation:", c);
     }
-  }, m = p.filter((r) => r.status === "pending").length;
-  return /* @__PURE__ */ t("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ e("h1", { className: "text-2xl font-bold text-foreground", children: "Invitations" }),
-      /* @__PURE__ */ e("p", { className: "text-muted-foreground", children: m > 0 ? `You have ${m} pending invitation${m > 1 ? "s" : ""}` : "No pending invitations" })
+  }, s = e.filter((d) => d.status === "pending").length;
+  return /* @__PURE__ */ a("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ i("h1", { className: "text-2xl font-bold text-foreground", children: "Invitations" }),
+      /* @__PURE__ */ i("p", { className: "text-muted-foreground", children: s > 0 ? `You have ${s} pending invitation${s > 1 ? "s" : ""}` : "No pending invitations" })
     ] }),
-    /* @__PURE__ */ e(
-      C,
+    /* @__PURE__ */ i(
+      B,
       {
-        invitations: p,
+        invitations: e,
         mode: "user",
-        onAccept: h,
-        onDecline: d,
-        isLoading: a,
+        onAccept: N,
+        onDecline: o,
+        isLoading: h,
         emptyMessage: "You don't have any pending invitations"
       }
     )
   ] });
 }
+const C = {
+  ultra_yearly: "bandwidth_ultra",
+  ultra_monthly: "bandwidth_ultra",
+  pro_yearly: "bandwidth_pro",
+  pro_monthly: "bandwidth_pro",
+  dev_yearly: "bandwidth_dev",
+  dev_monthly: "bandwidth_dev"
+};
+function Ae({
+  subscription: l,
+  rateLimitsConfig: r,
+  t: e,
+  onPurchaseSuccess: h,
+  onRestoreSuccess: p,
+  onError: y,
+  onWarning: N
+}) {
+  const {
+    products: o,
+    currentSubscription: s,
+    isLoading: d,
+    error: c,
+    purchase: I,
+    restore: L,
+    clearError: P
+  } = l, [u, v] = w("monthly"), [g, f] = w(null), [S, F] = w(!1), [M, T] = w(!1);
+  ie(() => {
+    c && (y?.(e("common.error"), c), P());
+  }, [c, P, e, y]);
+  const k = o.filter((t) => {
+    if (!t.period) return !1;
+    const n = t.period.includes("Y") || t.period.includes("year");
+    return u === "yearly" ? n : !n;
+  }).sort((t, n) => parseFloat(t.price) - parseFloat(n.price)), Y = (t) => {
+    v(t), f(null);
+  }, $ = async () => {
+    if (g) {
+      F(!0), P();
+      try {
+        await I(g) && (h?.(), f(null));
+      } catch (t) {
+        y?.(
+          e("common.error"),
+          t instanceof Error ? t.message : e("purchase.error")
+        );
+      } finally {
+        F(!1);
+      }
+    }
+  }, W = async () => {
+    T(!0), P();
+    try {
+      await L() ? p?.() : N?.(e("common.error"), e("restore.noPurchases"));
+    } catch (t) {
+      y?.(
+        e("common.error"),
+        t instanceof Error ? t.message : e("restore.error")
+      );
+    } finally {
+      T(!1);
+    }
+  }, V = x((t) => t ? new Intl.DateTimeFormat(void 0, {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  }).format(t) : "", []), G = x(
+    (t) => t ? t.includes("Y") || t.includes("year") ? e("periods.year") : t.includes("M") || t.includes("month") ? e("periods.month") : t.includes("W") || t.includes("week") ? e("periods.week") : "" : "",
+    [e]
+  ), J = x(
+    (t) => {
+      if (!t) return;
+      const n = t.replace(/\D/g, "") || "1";
+      return t.includes("W") ? e("trial.weeks", { count: parseInt(n, 10) }) : t.includes("M") ? e("trial.months", { count: parseInt(n, 10) }) : e("trial.days", { count: parseInt(n, 10) });
+    },
+    [e]
+  ), E = x(
+    (t) => {
+      if (!r?.tiers) return;
+      const n = C[t];
+      return n ? r.tiers.find(
+        (m) => m.entitlement === n
+      ) : r.tiers.find((m) => m.entitlement === "none");
+    },
+    [r]
+  ), b = x(
+    (t) => t === null ? e("rateLimits.unlimited", "Unlimited") : t.toLocaleString(),
+    [e]
+  ), R = x(
+    (t) => {
+      const n = E(t);
+      if (!n) return [];
+      const m = [];
+      return n.limits.hourly !== null && m.push(
+        e("rateLimits.hourly", "{{limit}} requests/hour", {
+          limit: b(n.limits.hourly)
+        })
+      ), n.limits.daily !== null && m.push(
+        e("rateLimits.daily", "{{limit}} requests/day", {
+          limit: b(n.limits.daily)
+        })
+      ), n.limits.monthly !== null && m.push(
+        e("rateLimits.monthly", "{{limit}} requests/month", {
+          limit: b(n.limits.monthly)
+        })
+      ), n.limits.hourly === null && n.limits.daily === null && n.limits.monthly === null && m.push(
+        e("rateLimits.unlimitedRequests", "Unlimited API requests")
+      ), m;
+    },
+    [E, b, e]
+  ), K = x(
+    (t) => R(t),
+    [R]
+  ), H = x(() => {
+    const t = [
+      e("freeTier.schemaValidation", "JSON Schema-validated outputs"),
+      e(
+        "freeTier.allProviders",
+        "All LLM providers (OpenAI, Anthropic, Google)"
+      ),
+      e("freeTier.endpointTesting", "Built-in endpoint testing"),
+      e("freeTier.analytics", "Basic usage analytics")
+    ];
+    if (r?.tiers) {
+      const n = r.tiers.find(
+        (m) => m.entitlement === "none"
+      );
+      n && (n.limits.hourly !== null && t.push(
+        e("rateLimits.hourly", "{{limit}} requests/hour", {
+          limit: b(n.limits.hourly)
+        })
+      ), n.limits.daily !== null && t.push(
+        e("rateLimits.daily", "{{limit}} requests/day", {
+          limit: b(n.limits.daily)
+        })
+      ), n.limits.monthly !== null && t.push(
+        e("rateLimits.monthly", "{{limit}} requests/month", {
+          limit: b(n.limits.monthly)
+        })
+      ));
+    }
+    return t;
+  }, [r, b, e]), Q = x(
+    (t) => {
+      const n = C[t];
+      if (!n) return;
+      const m = o.find(
+        (A) => A.identifier === t
+      );
+      if (!m) return;
+      const z = Object.entries(C).find(
+        ([A, ee]) => ee === n && A.includes("monthly")
+      )?.[0];
+      if (!z) return;
+      const D = o.find(
+        (A) => A.identifier === z
+      );
+      if (!D) return;
+      const _ = parseFloat(m.price), q = parseFloat(D.price);
+      if (q <= 0 || _ <= 0) return;
+      const U = q * 12, Z = (U - _) / U * 100;
+      return Math.round(Z);
+    },
+    [o]
+  ), X = [
+    { value: "monthly", label: e("billingPeriod.monthly") },
+    { value: "yearly", label: e("billingPeriod.yearly") }
+  ];
+  return /* @__PURE__ */ i(
+    fe,
+    {
+      title: e("title"),
+      error: c,
+      currentStatusLabel: e("currentStatus.label"),
+      currentStatus: {
+        isActive: s?.isActive ?? !1,
+        activeContent: s?.isActive ? {
+          title: e("currentStatus.active"),
+          fields: [
+            {
+              label: e("currentStatus.plan"),
+              value: s.productIdentifier || e("currentStatus.premium")
+            },
+            {
+              label: e("currentStatus.expires"),
+              value: V(
+                s.expirationDate
+              )
+            },
+            {
+              label: e("currentStatus.willRenew"),
+              value: s.willRenew ? e("common.yes") : e("common.no")
+            },
+            ...r ? [
+              {
+                label: e("currentStatus.monthlyUsage", "Monthly Usage"),
+                value: `${r.currentUsage.monthly.toLocaleString()} / ${b(r.currentLimits.monthly)}`
+              },
+              {
+                label: e("currentStatus.dailyUsage", "Daily Usage"),
+                value: `${r.currentUsage.daily.toLocaleString()} / ${b(r.currentLimits.daily)}`
+              }
+            ] : []
+          ]
+        } : void 0,
+        inactiveContent: s?.isActive ? void 0 : {
+          title: e("currentStatus.inactive"),
+          message: e("currentStatus.inactiveMessage")
+        }
+      },
+      aboveProducts: !d && o.length > 0 ? /* @__PURE__ */ i("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ i(
+        be,
+        {
+          options: X,
+          value: u,
+          onChange: Y
+        }
+      ) }) : null,
+      primaryAction: {
+        label: e(S ? "buttons.purchasing" : "buttons.subscribe"),
+        onClick: $,
+        disabled: !g || S || M,
+        loading: S
+      },
+      secondaryAction: {
+        label: e(M ? "buttons.restoring" : "buttons.restore"),
+        onClick: W,
+        disabled: S || M,
+        loading: M
+      },
+      children: d ? /* @__PURE__ */ i("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ i("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }) }) : o.length === 0 ? /* @__PURE__ */ i("div", { className: "text-center py-12 text-theme-text-secondary", children: e("noProducts") }) : k.length === 0 ? /* @__PURE__ */ i("div", { className: "text-center py-12 text-theme-text-secondary", children: e("noProductsForPeriod") }) : /* @__PURE__ */ a(te, { children: [
+        /* @__PURE__ */ i(
+          O,
+          {
+            id: "free",
+            title: e("freeTier.title"),
+            price: e("freeTier.price"),
+            periodLabel: e("periods.month"),
+            features: H(),
+            isSelected: !s?.isActive && g === null,
+            onSelect: () => f(null),
+            topBadge: s?.isActive ? void 0 : {
+              text: e("badges.currentPlan", "Current Plan"),
+              color: "green"
+            },
+            disabled: S || M,
+            hideSelectionIndicator: !0
+          },
+          "free"
+        ),
+        k.map((t) => /* @__PURE__ */ i(
+          O,
+          {
+            id: t.identifier,
+            title: t.title,
+            price: t.priceString,
+            periodLabel: G(t.period),
+            features: K(t.identifier),
+            isSelected: g === t.identifier,
+            onSelect: () => f(t.identifier),
+            isBestValue: t.identifier.includes("pro"),
+            discountBadge: t.period?.includes("Y") ? (() => {
+              const n = Q(
+                t.identifier
+              );
+              return n && n > 0 ? {
+                text: e("badges.savePercent", "Save {{percent}}%", {
+                  percent: n
+                }),
+                isBestValue: !0
+              } : void 0;
+            })() : void 0,
+            introPriceNote: t.freeTrialPeriod ? J(t.freeTrialPeriod) : t.introPrice ? e("intro.note", { price: t.introPrice }) : void 0,
+            disabled: S || M
+          },
+          t.identifier
+        ))
+      ] })
+    }
+  );
+}
 export {
-  U as EntityListPage,
-  G as InvitationsPage,
-  B as MembersManagementPage
+  Ie as EntityListPage,
+  Ae as EntitySubscriptionsPage,
+  Me as InvitationsPage,
+  Le as MembersManagementPage
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("lucide-react"),require("@sudobility/entity-components"),require("@sudobility/entity_client")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","lucide-react","@sudobility/entity-components","@sudobility/entity_client"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.EntityPages={},a.jsxRuntime,a.React,a.LucideReact,a.SudobilityEntityComponents,a.SudobilityEntityClient))})(this,(function(a,e,x,w,h,s){"use strict";function C({client:n,onSelectEntity:t}){const[y,i]=x.useState(!1),[d,c]=x.useState({displayName:"",description:""}),[b,g]=x.useState(null),{data:m=[],isLoading:r}=s.useEntities(n),l=s.useCreateEntity(n),f=m.filter(o=>o.entityType==="personal"),N=m.filter(o=>o.entityType==="organization"),S=async o=>{if(o.preventDefault(),g(null),!d.displayName.trim()){g("Display name is required");return}try{await l.mutateAsync({displayName:d.displayName.trim(),description:d.description.trim()||void 0}),i(!1),c({displayName:"",description:""})}catch(u){g(u.message||"Failed to create organization")}};return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl font-bold text-foreground",children:"Workspaces"}),e.jsx("p",{className:"text-muted-foreground",children:"Manage your personal and organization workspaces"})]}),e.jsxs("button",{type:"button",onClick:()=>i(!0),className:"flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors",children:[e.jsx(w.Plus,{className:"h-4 w-4"}),e.jsx("span",{children:"New Organization"})]})]}),y&&e.jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50",children:e.jsxs("div",{className:"w-full max-w-md rounded-lg bg-background p-6 shadow-lg",children:[e.jsx("h2",{className:"text-lg font-semibold mb-4",children:"Create Organization"}),e.jsxs("form",{onSubmit:S,className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium mb-1",children:"Display Name"}),e.jsx("input",{type:"text",value:d.displayName,onChange:o=>c(u=>({...u,displayName:o.target.value})),placeholder:"My Organization",className:"w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium mb-1",children:"Description (optional)"}),e.jsx("textarea",{value:d.description,onChange:o=>c(u=>({...u,description:o.target.value})),placeholder:"What is this organization for?",rows:3,className:"w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary resize-none"})]}),b&&e.jsx("p",{className:"text-sm text-destructive",children:b}),e.jsxs("div",{className:"flex justify-end gap-2",children:[e.jsx("button",{type:"button",onClick:()=>{i(!1),c({displayName:"",description:""}),g(null)},className:"px-4 py-2 rounded-lg border hover:bg-muted transition-colors",children:"Cancel"}),e.jsx("button",{type:"submit",disabled:l.isPending,className:"px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50",children:l.isPending?"Creating...":"Create"})]})]})]})}),f.length>0&&e.jsxs("div",{children:[e.jsx("h2",{className:"text-lg font-semibold mb-3",children:"Personal Workspace"}),e.jsx(h.EntityList,{entities:f,onSelect:t,isLoading:r})]}),e.jsxs("div",{children:[e.jsx("h2",{className:"text-lg font-semibold mb-3",children:"Organizations"}),N.length===0&&!r?e.jsxs("div",{className:"text-center py-8 text-muted-foreground border border-dashed rounded-lg",children:[e.jsx("p",{children:"No organizations yet"}),e.jsx("button",{type:"button",onClick:()=>i(!0),className:"mt-2 text-primary hover:underline",children:"Create your first organization"})]}):e.jsx(h.EntityList,{entities:N,onSelect:t,isLoading:r})]})]})}function M({client:n,entity:t,currentUserId:y}){const i=t.userRole==="admin",{data:d=[],isLoading:c}=s.useEntityMembers(n,t.entitySlug),b=s.useUpdateMemberRole(n),g=s.useRemoveMember(n),{data:m=[],isLoading:r}=s.useEntityInvitations(n,i?t.entitySlug:null),l=s.useCreateInvitation(n),f=s.useCancelInvitation(n),N=async(p,v)=>{try{await b.mutateAsync({entitySlug:t.entitySlug,memberId:p,role:v})}catch(L){console.error("Failed to update role:",L)}},S=async p=>{if(confirm("Are you sure you want to remove this member?"))try{await g.mutateAsync({entitySlug:t.entitySlug,memberId:p})}catch(v){console.error("Failed to remove member:",v)}},o=async p=>{await l.mutateAsync({entitySlug:t.entitySlug,request:p})},u=async p=>{try{await f.mutateAsync({entitySlug:t.entitySlug,invitationId:p})}catch(v){console.error("Failed to cancel invitation:",v)}};return t.entityType==="personal"?e.jsxs("div",{className:"text-center py-12 text-muted-foreground",children:[e.jsx("p",{children:"Personal workspaces cannot have additional members."}),e.jsx("p",{className:"mt-2",children:"Create an organization to collaborate with others."})]}):e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl font-bold text-foreground",children:"Members"}),e.jsxs("p",{className:"text-muted-foreground",children:["Manage members and invitations for ",t.displayName]})]}),i&&e.jsxs("div",{className:"rounded-lg border p-4",children:[e.jsx("h2",{className:"text-lg font-semibold mb-4",children:"Invite Members"}),e.jsx(h.InvitationForm,{onSubmit:o,isSubmitting:l.isPending})]}),i&&e.jsxs("div",{children:[e.jsx("h2",{className:"text-lg font-semibold mb-3",children:"Pending Invitations"}),e.jsx(h.InvitationList,{invitations:m,mode:"admin",onCancel:u,isLoading:r,emptyMessage:"No pending invitations"})]}),e.jsxs("div",{children:[e.jsxs("h2",{className:"text-lg font-semibold mb-3",children:["Current Members (",d.length,")"]}),e.jsx(h.MemberList,{members:d,currentUserId:y,canManage:i,onRoleChange:N,onRemove:S,isLoading:c})]})]})}function I({client:n,onInvitationAccepted:t}){const{data:y=[],isLoading:i}=s.useMyInvitations(n),d=s.useAcceptInvitation(n),c=s.useDeclineInvitation(n),b=async r=>{try{await d.mutateAsync(r),t?.()}catch(l){console.error("Failed to accept invitation:",l)}},g=async r=>{try{await c.mutateAsync(r)}catch(l){console.error("Failed to decline invitation:",l)}},m=y.filter(r=>r.status==="pending").length;return e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl font-bold text-foreground",children:"Invitations"}),e.jsx("p",{className:"text-muted-foreground",children:m>0?`You have ${m} pending invitation${m>1?"s":""}`:"No pending invitations"})]}),e.jsx(h.InvitationList,{invitations:y,mode:"user",onAccept:b,onDecline:g,isLoading:i,emptyMessage:"You don't have any pending invitations"})]})}a.EntityListPage=C,a.InvitationsPage=I,a.MembersManagementPage=M,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
+(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("lucide-react"),require("@sudobility/entity-components"),require("@sudobility/entity_client"),require("@sudobility/subscription-components")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","lucide-react","@sudobility/entity-components","@sudobility/entity_client","@sudobility/subscription-components"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.EntityPages={},l.jsxRuntime,l.React,l.LucideReact,l.SudobilityEntityComponents,l.SudobilityEntityClient,l.SudobilitySubscriptionComponents))})(this,(function(l,e,s,_,I,b,A){"use strict";function $({client:o,onSelectEntity:r}){const[t,y]=s.useState(!1),[f,g]=s.useState({displayName:"",description:""}),[N,c]=s.useState(null),{data:a=[],isLoading:u}=b.useEntities(o),d=b.useCreateEntity(o),L=a.filter(m=>m.entityType==="personal"),M=a.filter(m=>m.entityType==="organization"),P=async m=>{if(m.preventDefault(),c(null),!f.displayName.trim()){c("Display name is required");return}try{await d.mutateAsync({displayName:f.displayName.trim(),description:f.description.trim()||void 0}),y(!1),g({displayName:"",description:""})}catch(x){c(x.message||"Failed to create organization")}};return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl font-bold text-foreground",children:"Workspaces"}),e.jsx("p",{className:"text-muted-foreground",children:"Manage your personal and organization workspaces"})]}),e.jsxs("button",{type:"button",onClick:()=>y(!0),className:"flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors",children:[e.jsx(_.Plus,{className:"h-4 w-4"}),e.jsx("span",{children:"New Organization"})]})]}),t&&e.jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50",children:e.jsxs("div",{className:"w-full max-w-md rounded-lg bg-background p-6 shadow-lg",children:[e.jsx("h2",{className:"text-lg font-semibold mb-4",children:"Create Organization"}),e.jsxs("form",{onSubmit:P,className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium mb-1",children:"Display Name"}),e.jsx("input",{type:"text",value:f.displayName,onChange:m=>g(x=>({...x,displayName:m.target.value})),placeholder:"My Organization",className:"w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium mb-1",children:"Description (optional)"}),e.jsx("textarea",{value:f.description,onChange:m=>g(x=>({...x,description:m.target.value})),placeholder:"What is this organization for?",rows:3,className:"w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary resize-none"})]}),N&&e.jsx("p",{className:"text-sm text-destructive",children:N}),e.jsxs("div",{className:"flex justify-end gap-2",children:[e.jsx("button",{type:"button",onClick:()=>{y(!1),g({displayName:"",description:""}),c(null)},className:"px-4 py-2 rounded-lg border hover:bg-muted transition-colors",children:"Cancel"}),e.jsx("button",{type:"submit",disabled:d.isPending,className:"px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50",children:d.isPending?"Creating...":"Create"})]})]})]})}),L.length>0&&e.jsxs("div",{children:[e.jsx("h2",{className:"text-lg font-semibold mb-3",children:"Personal Workspace"}),e.jsx(I.EntityList,{entities:L,onSelect:r,isLoading:u})]}),e.jsxs("div",{children:[e.jsx("h2",{className:"text-lg font-semibold mb-3",children:"Organizations"}),M.length===0&&!u?e.jsxs("div",{className:"text-center py-8 text-muted-foreground border border-dashed rounded-lg",children:[e.jsx("p",{children:"No organizations yet"}),e.jsx("button",{type:"button",onClick:()=>y(!0),className:"mt-2 text-primary hover:underline",children:"Create your first organization"})]}):e.jsx(I.EntityList,{entities:M,onSelect:r,isLoading:u})]})]})}function W({client:o,entity:r,currentUserId:t}){const y=r.userRole==="admin",{data:f=[],isLoading:g}=b.useEntityMembers(o,r.entitySlug),N=b.useUpdateMemberRole(o),c=b.useRemoveMember(o),{data:a=[],isLoading:u}=b.useEntityInvitations(o,y?r.entitySlug:null),d=b.useCreateInvitation(o),L=b.useCancelInvitation(o),M=async(p,v)=>{try{await N.mutateAsync({entitySlug:r.entitySlug,memberId:p,role:v})}catch(w){console.error("Failed to update role:",w)}},P=async p=>{if(confirm("Are you sure you want to remove this member?"))try{await c.mutateAsync({entitySlug:r.entitySlug,memberId:p})}catch(v){console.error("Failed to remove member:",v)}},m=async p=>{await d.mutateAsync({entitySlug:r.entitySlug,request:p})},x=async p=>{try{await L.mutateAsync({entitySlug:r.entitySlug,invitationId:p})}catch(v){console.error("Failed to cancel invitation:",v)}};return r.entityType==="personal"?e.jsxs("div",{className:"text-center py-12 text-muted-foreground",children:[e.jsx("p",{children:"Personal workspaces cannot have additional members."}),e.jsx("p",{className:"mt-2",children:"Create an organization to collaborate with others."})]}):e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl font-bold text-foreground",children:"Members"}),e.jsxs("p",{className:"text-muted-foreground",children:["Manage members and invitations for ",r.displayName]})]}),y&&e.jsxs("div",{className:"rounded-lg border p-4",children:[e.jsx("h2",{className:"text-lg font-semibold mb-4",children:"Invite Members"}),e.jsx(I.InvitationForm,{onSubmit:m,isSubmitting:d.isPending})]}),y&&e.jsxs("div",{children:[e.jsx("h2",{className:"text-lg font-semibold mb-3",children:"Pending Invitations"}),e.jsx(I.InvitationList,{invitations:a,mode:"admin",onCancel:x,isLoading:u,emptyMessage:"No pending invitations"})]}),e.jsxs("div",{children:[e.jsxs("h2",{className:"text-lg font-semibold mb-3",children:["Current Members (",f.length,")"]}),e.jsx(I.MemberList,{members:f,currentUserId:t,canManage:y,onRoleChange:M,onRemove:P,isLoading:g})]})]})}function V({client:o,onInvitationAccepted:r}){const{data:t=[],isLoading:y}=b.useMyInvitations(o),f=b.useAcceptInvitation(o),g=b.useDeclineInvitation(o),N=async u=>{try{await f.mutateAsync(u),r?.()}catch(d){console.error("Failed to accept invitation:",d)}},c=async u=>{try{await g.mutateAsync(u)}catch(d){console.error("Failed to decline invitation:",d)}},a=t.filter(u=>u.status==="pending").length;return e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl font-bold text-foreground",children:"Invitations"}),e.jsx("p",{className:"text-muted-foreground",children:a>0?`You have ${a} pending invitation${a>1?"s":""}`:"No pending invitations"})]}),e.jsx(I.InvitationList,{invitations:t,mode:"user",onAccept:N,onDecline:c,isLoading:y,emptyMessage:"You don't have any pending invitations"})]})}const T={ultra_yearly:"bandwidth_ultra",ultra_monthly:"bandwidth_ultra",pro_yearly:"bandwidth_pro",pro_monthly:"bandwidth_pro",dev_yearly:"bandwidth_dev",dev_monthly:"bandwidth_dev"};function G({subscription:o,rateLimitsConfig:r,t,onPurchaseSuccess:y,onRestoreSuccess:f,onError:g,onWarning:N}){const{products:c,currentSubscription:a,isLoading:u,error:d,purchase:L,restore:M,clearError:P}=o,[m,x]=s.useState("monthly"),[p,v]=s.useState(null),[w,E]=s.useState(!1),[k,F]=s.useState(!1);s.useEffect(()=>{d&&(g?.(t("common.error"),d),P())},[d,P,t,g]);const q=c.filter(i=>{if(!i.period)return!1;const n=i.period.includes("Y")||i.period.includes("year");return m==="yearly"?n:!n}).sort((i,n)=>parseFloat(i.price)-parseFloat(n.price)),J=i=>{x(i),v(null)},K=async()=>{if(p){E(!0),P();try{await L(p)&&(y?.(),v(null))}catch(i){g?.(t("common.error"),i instanceof Error?i.message:t("purchase.error"))}finally{E(!1)}}},H=async()=>{F(!0),P();try{await M()?f?.():N?.(t("common.error"),t("restore.noPurchases"))}catch(i){g?.(t("common.error"),i instanceof Error?i.message:t("restore.error"))}finally{F(!1)}},Q=s.useCallback(i=>i?new Intl.DateTimeFormat(void 0,{year:"numeric",month:"long",day:"numeric"}).format(i):"",[]),X=s.useCallback(i=>i?i.includes("Y")||i.includes("year")?t("periods.year"):i.includes("M")||i.includes("month")?t("periods.month"):i.includes("W")||i.includes("week")?t("periods.week"):"":"",[t]),Z=s.useCallback(i=>{if(!i)return;const n=i.replace(/\D/g,"")||"1";return i.includes("W")?t("trial.weeks",{count:parseInt(n,10)}):i.includes("M")?t("trial.months",{count:parseInt(n,10)}):t("trial.days",{count:parseInt(n,10)})},[t]),z=s.useCallback(i=>{if(!r?.tiers)return;const n=T[i];return n?r.tiers.find(h=>h.entitlement===n):r.tiers.find(h=>h.entitlement==="none")},[r]),S=s.useCallback(i=>i===null?t("rateLimits.unlimited","Unlimited"):i.toLocaleString(),[t]),D=s.useCallback(i=>{const n=z(i);if(!n)return[];const h=[];return n.limits.hourly!==null&&h.push(t("rateLimits.hourly","{{limit}} requests/hour",{limit:S(n.limits.hourly)})),n.limits.daily!==null&&h.push(t("rateLimits.daily","{{limit}} requests/day",{limit:S(n.limits.daily)})),n.limits.monthly!==null&&h.push(t("rateLimits.monthly","{{limit}} requests/month",{limit:S(n.limits.monthly)})),n.limits.hourly===null&&n.limits.daily===null&&n.limits.monthly===null&&h.push(t("rateLimits.unlimitedRequests","Unlimited API requests")),h},[z,S,t]),R=s.useCallback(i=>D(i),[D]),ee=s.useCallback(()=>{const i=[t("freeTier.schemaValidation","JSON Schema-validated outputs"),t("freeTier.allProviders","All LLM providers (OpenAI, Anthropic, Google)"),t("freeTier.endpointTesting","Built-in endpoint testing"),t("freeTier.analytics","Basic usage analytics")];if(r?.tiers){const n=r.tiers.find(h=>h.entitlement==="none");n&&(n.limits.hourly!==null&&i.push(t("rateLimits.hourly","{{limit}} requests/hour",{limit:S(n.limits.hourly)})),n.limits.daily!==null&&i.push(t("rateLimits.daily","{{limit}} requests/day",{limit:S(n.limits.daily)})),n.limits.monthly!==null&&i.push(t("rateLimits.monthly","{{limit}} requests/month",{limit:S(n.limits.monthly)})))}return i},[r,S,t]),te=s.useCallback(i=>{const n=T[i];if(!n)return;const h=c.find(C=>C.identifier===i);if(!h)return;const j=Object.entries(T).find(([C,re])=>re===n&&C.includes("monthly"))?.[0];if(!j)return;const O=c.find(C=>C.identifier===j);if(!O)return;const U=parseFloat(h.price),B=parseFloat(O.price);if(B<=0||U<=0)return;const Y=B*12,ne=(Y-U)/Y*100;return Math.round(ne)},[c]),ie=[{value:"monthly",label:t("billingPeriod.monthly")},{value:"yearly",label:t("billingPeriod.yearly")}];return e.jsx(A.SubscriptionLayout,{title:t("title"),error:d,currentStatusLabel:t("currentStatus.label"),currentStatus:{isActive:a?.isActive??!1,activeContent:a?.isActive?{title:t("currentStatus.active"),fields:[{label:t("currentStatus.plan"),value:a.productIdentifier||t("currentStatus.premium")},{label:t("currentStatus.expires"),value:Q(a.expirationDate)},{label:t("currentStatus.willRenew"),value:a.willRenew?t("common.yes"):t("common.no")},...r?[{label:t("currentStatus.monthlyUsage","Monthly Usage"),value:`${r.currentUsage.monthly.toLocaleString()} / ${S(r.currentLimits.monthly)}`},{label:t("currentStatus.dailyUsage","Daily Usage"),value:`${r.currentUsage.daily.toLocaleString()} / ${S(r.currentLimits.daily)}`}]:[]]}:void 0,inactiveContent:a?.isActive?void 0:{title:t("currentStatus.inactive"),message:t("currentStatus.inactiveMessage")}},aboveProducts:!u&&c.length>0?e.jsx("div",{className:"flex justify-center mb-6",children:e.jsx(A.SegmentedControl,{options:ie,value:m,onChange:J})}):null,primaryAction:{label:t(w?"buttons.purchasing":"buttons.subscribe"),onClick:K,disabled:!p||w||k,loading:w},secondaryAction:{label:t(k?"buttons.restoring":"buttons.restore"),onClick:H,disabled:w||k,loading:k},children:u?e.jsx("div",{className:"flex items-center justify-center py-12",children:e.jsx("div",{className:"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"})}):c.length===0?e.jsx("div",{className:"text-center py-12 text-theme-text-secondary",children:t("noProducts")}):q.length===0?e.jsx("div",{className:"text-center py-12 text-theme-text-secondary",children:t("noProductsForPeriod")}):e.jsxs(e.Fragment,{children:[e.jsx(A.SubscriptionTile,{id:"free",title:t("freeTier.title"),price:t("freeTier.price"),periodLabel:t("periods.month"),features:ee(),isSelected:!a?.isActive&&p===null,onSelect:()=>v(null),topBadge:a?.isActive?void 0:{text:t("badges.currentPlan","Current Plan"),color:"green"},disabled:w||k,hideSelectionIndicator:!0},"free"),q.map(i=>e.jsx(A.SubscriptionTile,{id:i.identifier,title:i.title,price:i.priceString,periodLabel:X(i.period),features:R(i.identifier),isSelected:p===i.identifier,onSelect:()=>v(i.identifier),isBestValue:i.identifier.includes("pro"),discountBadge:i.period?.includes("Y")?(()=>{const n=te(i.identifier);return n&&n>0?{text:t("badges.savePercent","Save {{percent}}%",{percent:n}),isBestValue:!0}:void 0})():void 0,introPriceNote:i.freeTrialPeriod?Z(i.freeTrialPeriod):i.introPrice?t("intro.note",{price:i.introPrice}):void 0,disabled:w||k},i.identifier))]})})}l.EntityListPage=$,l.EntitySubscriptionsPage=G,l.InvitationsPage=V,l.MembersManagementPage=W,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/dist/pages/EntitySubscriptionsPage.d.ts

@@ -0,0 +1,50 @@
+import { RateLimitsConfigData } from '@sudobility/types';
+/** Product from subscription provider */
+export interface SubscriptionProduct {
+    identifier: string;
+    title: string;
+    price: string;
+    priceString: string;
+    period?: string;
+    freeTrialPeriod?: string;
+    introPrice?: string;
+}
+/** Current subscription state */
+export interface CurrentSubscription {
+    isActive: boolean;
+    productIdentifier?: string;
+    expirationDate?: Date;
+    willRenew?: boolean;
+}
+/** Subscription context value passed from consumer */
+export interface SubscriptionContextValue {
+    products: SubscriptionProduct[];
+    currentSubscription: CurrentSubscription | null;
+    isLoading: boolean;
+    error: string | null;
+    purchase: (productId: string) => Promise<boolean>;
+    restore: () => Promise<boolean>;
+    clearError: () => void;
+}
+/** Translation function type */
+export type TranslationFunction = (key: string, defaultValueOrOptions?: string | Record<string, unknown>, options?: Record<string, unknown>) => string;
+export interface EntitySubscriptionsPageProps {
+    /** Subscription context value */
+    subscription: SubscriptionContextValue;
+    /** Rate limit configuration */
+    rateLimitsConfig?: RateLimitsConfigData | null;
+    /** Translation function */
+    t: TranslationFunction;
+    /** Called when purchase succeeds */
+    onPurchaseSuccess?: () => void;
+    /** Called when restore succeeds */
+    onRestoreSuccess?: () => void;
+    /** Called on error */
+    onError?: (title: string, message: string) => void;
+    /** Called on warning */
+    onWarning?: (title: string, message: string) => void;
+}
+/**
+ * Page for managing entity subscriptions.
+ */
+export declare function EntitySubscriptionsPage({ subscription, rateLimitsConfig, t, onPurchaseSuccess, onRestoreSuccess, onError, onWarning, }: EntitySubscriptionsPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/index.d.ts

@@ -4,3 +4,4 @@
 export { EntityListPage, type EntityListPageProps } from './EntityListPage';
 export { MembersManagementPage, type MembersManagementPageProps, } from './MembersManagementPage';
 export { InvitationsPage, type InvitationsPageProps } from './InvitationsPage';
+export { EntitySubscriptionsPage, type EntitySubscriptionsPageProps, type SubscriptionProduct, type CurrentSubscription, type SubscriptionContextValue, type TranslationFunction, } from './EntitySubscriptionsPage';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/entity_pages",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Page containers for entity/organization management",
   "type": "module",
   "main": "dist/index.umd.js",
@@ -44,12 +44,19 @@
     "@tanstack/react-query": "^5.0.0",
     "@sudobility/types": "^1.9.43",
     "@sudobility/entity_client": "^0.0.9",
-    "@sudobility/entity-components": "^1.0.4"
+    "@sudobility/entity-components": "^1.0.4",
+    "@sudobility/subscription-components": "^1.0.13"
+  },
+  "peerDependenciesMeta": {
+    "@sudobility/subscription-components": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@eslint/js": "^9.38.0",
     "@sudobility/entity-components": "^1.0.4",
     "@sudobility/entity_client": "^0.0.9",
+    "@sudobility/subscription-components": "^1.0.13",
     "@sudobility/types": "^1.9.43",
     "@tanstack/react-query": "^5.0.0",
     "@testing-library/dom": "^10.4.0",
@@ -69,6 +76,7 @@
     "prettier": "^3.6.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-helmet-async": "^2.0.5",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.32.1",
     "vite": "^7.1.12",