@sudobility/entity_pages 0.0.10 → 0.0.13

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 SubscriptionPageLabels, type SubscriptionPageFormatters, } 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 o, jsx as i, Fragment as ie } from "react/jsx-runtime";
+import { useState as S, useEffect as ne, useCallback as P } from "react";
+import { Plus as re } from "lucide-react";
+import { EntityList as B, InvitationForm as ae, InvitationList as $, MemberList as oe } from "@sudobility/entity-components";
+import { useEntities as se, useCreateEntity as le, useEntityMembers as ce, useUpdateMemberRole as de, useRemoveMember as ue, useEntityInvitations as me, useCreateInvitation as he, useCancelInvitation as ye, useMyInvitations as ge, useAcceptInvitation as fe, useDeclineInvitation as pe } from "@sudobility/entity_client";
+import { SubscriptionLayout as ve, SubscriptionTile as O, SegmentedControl as be } from "@sudobility/subscription-components";
+function Ie({
+  client: c,
+  onSelectEntity: r
 }) {
-  const [p, a] = f(!1), [s, c] = f({
+  const [t, a] = S(!1), [h, f] = S({
     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"
+  }), [y, p] = S(null), { data: d = [], isLoading: s } = se(c), m = le(c), x = d.filter((l) => l.entityType === "personal"), w = d.filter(
+    (l) => l.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__ */ o("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ o("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__ */ o(
         "button",
         {
           type: "button",
           onClick: () => a(!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(re, { 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");
+    t && /* @__PURE__ */ i("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ o("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__ */ o("form", { onSubmit: async (l) => {
+        if (l.preventDefault(), p(null), !h.displayName.trim()) {
+          p("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 m.mutateAsync({
+            displayName: h.displayName.trim(),
+            description: h.description.trim() || void 0
+          }), a(!1), f({ displayName: "", description: "" });
+        } catch (v) {
+          p(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__ */ o("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: h.displayName,
+              onChange: (l) => f((v) => ({
+                ...v,
+                displayName: l.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__ */ o("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: h.description,
+              onChange: (l) => f((v) => ({
+                ...v,
+                description: l.target.value
               })),
               placeholder: "What is this organization for?",
               rows: 3,
@@ -80,47 +81,47 @@ 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(
+        y && /* @__PURE__ */ i("p", { className: "text-sm text-destructive", children: y }),
+        /* @__PURE__ */ o("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ i(
             "button",
             {
               type: "button",
               onClick: () => {
-                a(!1), c({ displayName: "", description: "" }), d(null);
+                a(!1), f({ displayName: "", description: "" }), p(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: m.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: m.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,
+    x.length > 0 && /* @__PURE__ */ o("div", { children: [
+      /* @__PURE__ */ i("h2", { className: "text-lg font-semibold mb-3", children: "Personal Workspace" }),
+      /* @__PURE__ */ i(
+        B,
         {
-          entities: b,
-          onSelect: n,
-          isLoading: r
+          entities: x,
+          onSelect: r,
+          isLoading: s
         }
       )
     ] }),
-    /* @__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__ */ o("div", { children: [
+      /* @__PURE__ */ i("h2", { className: "text-lg font-semibold mb-3", children: "Organizations" }),
+      w.length === 0 && !s ? /* @__PURE__ */ o("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",
@@ -129,151 +130,409 @@ function U({
             children: "Create your first organization"
           }
         )
-      ] }) : /* @__PURE__ */ e(
-        x,
+      ] }) : /* @__PURE__ */ i(
+        B,
         {
-          entities: v,
-          onSelect: n,
-          isLoading: r
+          entities: w,
+          onSelect: r,
+          isLoading: s
         }
       )
     ] })
   ] });
 }
-function B({
-  client: i,
-  entity: n,
-  currentUserId: p
+function Te({
+  client: c,
+  entity: r,
+  currentUserId: t
 }) {
-  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 a = r.userRole === "admin", { data: h = [], isLoading: f } = ce(
+    c,
+    r.entitySlug
+  ), y = de(c), p = ue(c), { data: d = [], isLoading: s } = me(c, a ? r.entitySlug : null), m = he(c), x = ye(c), w = async (N, g) => {
     try {
-      await h.mutateAsync({
-        entitySlug: n.entitySlug,
-        memberId: g,
-        role: y
+      await y.mutateAsync({
+        entitySlug: r.entitySlug,
+        memberId: N,
+        role: g
       });
-    } catch (w) {
-      console.error("Failed to update role:", w);
+    } catch (M) {
+      console.error("Failed to update role:", M);
     }
-  }, N = async (g) => {
+  }, C = async (N) => {
     if (confirm("Are you sure you want to remove this member?"))
       try {
-        await d.mutateAsync({
-          entitySlug: n.entitySlug,
-          memberId: g
+        await p.mutateAsync({
+          entitySlug: r.entitySlug,
+          memberId: N
         });
-      } catch (y) {
-        console.error("Failed to remove member:", y);
+      } catch (g) {
+        console.error("Failed to remove member:", g);
       }
-  }, o = async (g) => {
-    await l.mutateAsync({
-      entitySlug: n.entitySlug,
-      request: g
+  }, l = async (N) => {
+    await m.mutateAsync({
+      entitySlug: r.entitySlug,
+      request: N
     });
-  }, u = async (g) => {
+  }, v = async (N) => {
     try {
-      await b.mutateAsync({
-        entitySlug: n.entitySlug,
-        invitationId: g
+      await x.mutateAsync({
+        entitySlug: r.entitySlug,
+        invitationId: N
       });
-    } catch (y) {
-      console.error("Failed to cancel invitation:", y);
+    } catch (g) {
+      console.error("Failed to cancel invitation:", g);
     }
   };
-  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__ */ o("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__ */ o("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ o("div", { children: [
+      /* @__PURE__ */ i("h1", { className: "text-2xl font-bold text-foreground", children: "Members" }),
+      /* @__PURE__ */ o("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,
+    a && /* @__PURE__ */ o("div", { className: "rounded-lg border p-4", children: [
+      /* @__PURE__ */ i("h2", { className: "text-lg font-semibold mb-4", children: "Invite Members" }),
+      /* @__PURE__ */ i(
+        ae,
         {
-          onSubmit: o,
-          isSubmitting: l.isPending
+          onSubmit: l,
+          isSubmitting: m.isPending
         }
       )
     ] }),
-    a && /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-3", children: "Pending Invitations" }),
-      /* @__PURE__ */ e(
-        C,
+    a && /* @__PURE__ */ o("div", { children: [
+      /* @__PURE__ */ i("h2", { className: "text-lg font-semibold mb-3", children: "Pending Invitations" }),
+      /* @__PURE__ */ i(
+        $,
         {
-          invitations: m,
+          invitations: d,
           mode: "admin",
-          onCancel: u,
-          isLoading: r,
+          onCancel: v,
+          isLoading: s,
           emptyMessage: "No pending invitations"
         }
       )
     ] }),
-    /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ t("h2", { className: "text-lg font-semibold mb-3", children: [
+    /* @__PURE__ */ o("div", { children: [
+      /* @__PURE__ */ o("h2", { className: "text-lg font-semibold mb-3", children: [
         "Current Members (",
-        s.length,
+        h.length,
         ")"
       ] }),
-      /* @__PURE__ */ e(
-        S,
+      /* @__PURE__ */ i(
+        oe,
         {
-          members: s,
-          currentUserId: p,
+          members: h,
+          currentUserId: t,
           canManage: a,
-          onRoleChange: v,
-          onRemove: N,
-          isLoading: c
+          onRoleChange: w,
+          onRemove: C,
+          isLoading: f
         }
       )
     ] })
   ] });
 }
-function G({
-  client: i,
-  onInvitationAccepted: n
+function Fe({
+  client: c,
+  onInvitationAccepted: r
 }) {
-  const { data: p = [], isLoading: a } = R(i), s = j(i), c = O(i), h = async (r) => {
+  const { data: t = [], isLoading: a } = ge(c), h = fe(c), f = pe(c), y = async (s) => {
     try {
-      await s.mutateAsync(r), n?.();
-    } catch (l) {
-      console.error("Failed to accept invitation:", l);
+      await h.mutateAsync(s), r?.();
+    } catch (m) {
+      console.error("Failed to accept invitation:", m);
     }
-  }, d = async (r) => {
+  }, p = async (s) => {
     try {
-      await c.mutateAsync(r);
-    } catch (l) {
-      console.error("Failed to decline invitation:", l);
+      await f.mutateAsync(s);
+    } catch (m) {
+      console.error("Failed to decline invitation:", m);
     }
-  }, 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" })
+  }, d = t.filter((s) => s.status === "pending").length;
+  return /* @__PURE__ */ o("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ o("div", { children: [
+      /* @__PURE__ */ i("h1", { className: "text-2xl font-bold text-foreground", children: "Invitations" }),
+      /* @__PURE__ */ i("p", { className: "text-muted-foreground", children: d > 0 ? `You have ${d} pending invitation${d > 1 ? "s" : ""}` : "No pending invitations" })
     ] }),
-    /* @__PURE__ */ e(
-      C,
+    /* @__PURE__ */ i(
+      $,
       {
-        invitations: p,
+        invitations: t,
         mode: "user",
-        onAccept: h,
-        onDecline: d,
+        onAccept: y,
+        onDecline: p,
         isLoading: a,
         emptyMessage: "You don't have any pending invitations"
       }
     )
   ] });
 }
+const L = {
+  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 Ce({
+  subscription: c,
+  rateLimitsConfig: r,
+  labels: t,
+  formatters: a,
+  onPurchaseSuccess: h,
+  onRestoreSuccess: f,
+  onError: y,
+  onWarning: p
+}) {
+  const {
+    products: d,
+    currentSubscription: s,
+    isLoading: m,
+    error: x,
+    purchase: w,
+    restore: C,
+    clearError: l
+  } = c, [v, N] = S("monthly"), [g, M] = S(null), [I, A] = S(!1), [T, E] = S(!1);
+  ne(() => {
+    x && (y?.(t.errorTitle, x), l());
+  }, [x, l, t.errorTitle, y]);
+  const R = d.filter((e) => {
+    if (!e.period) return !1;
+    const n = e.period.includes("Y") || e.period.includes("year");
+    return v === "yearly" ? n : !n;
+  }).sort((e, n) => parseFloat(e.price) - parseFloat(n.price)), U = (e) => {
+    N(e), M(null);
+  }, q = async () => {
+    if (g) {
+      A(!0), l();
+      try {
+        await w(g) && (h?.(), M(null));
+      } catch (e) {
+        y?.(
+          t.errorTitle,
+          e instanceof Error ? e.message : t.purchaseError
+        );
+      } finally {
+        A(!1);
+      }
+    }
+  }, H = async () => {
+    E(!0), l();
+    try {
+      await C() ? f?.() : p?.(t.errorTitle, t.restoreNoPurchases);
+    } catch (e) {
+      y?.(
+        t.errorTitle,
+        e instanceof Error ? e.message : t.restoreError
+      );
+    } finally {
+      E(!1);
+    }
+  }, V = P((e) => e ? new Intl.DateTimeFormat(void 0, {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  }).format(e) : "", []), G = P(
+    (e) => e ? e.includes("Y") || e.includes("year") ? t.periodYear : e.includes("M") || e.includes("month") ? t.periodMonth : e.includes("W") || e.includes("week") ? t.periodWeek : "" : "",
+    [t]
+  ), K = P(
+    (e) => {
+      if (!e) return;
+      const n = parseInt(e.replace(/\D/g, "") || "1", 10);
+      return e.includes("W") ? a.formatTrialWeeks(n) : e.includes("M") ? a.formatTrialMonths(n) : a.formatTrialDays(n);
+    },
+    [a]
+  ), k = P(
+    (e) => {
+      if (!r?.tiers) return;
+      const n = L[e];
+      return n ? r.tiers.find(
+        (u) => u.entitlement === n
+      ) : r.tiers.find((u) => u.entitlement === "none");
+    },
+    [r]
+  ), b = P(
+    (e) => e === null ? t.unlimited : e.toLocaleString(),
+    [t.unlimited]
+  ), D = P(
+    (e) => {
+      const n = k(e);
+      if (!n) return [];
+      const u = [];
+      return n.limits.hourly !== null && u.push(
+        a.formatHourlyLimit(b(n.limits.hourly))
+      ), n.limits.daily !== null && u.push(
+        a.formatDailyLimit(b(n.limits.daily))
+      ), n.limits.monthly !== null && u.push(
+        a.formatMonthlyLimit(b(n.limits.monthly))
+      ), n.limits.hourly === null && n.limits.daily === null && n.limits.monthly === null && u.push(t.unlimitedRequests), u;
+    },
+    [k, b, a, t.unlimitedRequests]
+  ), J = P(
+    (e) => D(e),
+    [D]
+  ), Q = P(() => {
+    const e = [...t.freeTierFeatures];
+    if (r?.tiers) {
+      const n = r.tiers.find(
+        (u) => u.entitlement === "none"
+      );
+      n && (n.limits.hourly !== null && e.push(
+        a.formatHourlyLimit(b(n.limits.hourly))
+      ), n.limits.daily !== null && e.push(
+        a.formatDailyLimit(b(n.limits.daily))
+      ), n.limits.monthly !== null && e.push(
+        a.formatMonthlyLimit(b(n.limits.monthly))
+      ));
+    }
+    return e;
+  }, [r, b, a, t.freeTierFeatures]), X = P(
+    (e) => {
+      const n = L[e];
+      if (!n) return;
+      const u = d.find(
+        (F) => F.identifier === e
+      );
+      if (!u) return;
+      const z = Object.entries(L).find(
+        ([F, te]) => te === n && F.includes("monthly")
+      )?.[0];
+      if (!z) return;
+      const _ = d.find(
+        (F) => F.identifier === z
+      );
+      if (!_) return;
+      const Y = parseFloat(u.price), j = parseFloat(_.price);
+      if (j <= 0 || Y <= 0) return;
+      const W = j * 12, ee = (W - Y) / W * 100;
+      return Math.round(ee);
+    },
+    [d]
+  ), Z = [
+    { value: "monthly", label: t.billingMonthly },
+    { value: "yearly", label: t.billingYearly }
+  ];
+  return /* @__PURE__ */ i(
+    ve,
+    {
+      title: t.title,
+      error: x,
+      currentStatusLabel: t.currentStatusLabel,
+      currentStatus: {
+        isActive: s?.isActive ?? !1,
+        activeContent: s?.isActive ? {
+          title: t.statusActive,
+          fields: [
+            {
+              label: t.labelPlan,
+              value: s.productIdentifier || t.labelPremium
+            },
+            {
+              label: t.labelExpires,
+              value: V(
+                s.expirationDate
+              )
+            },
+            {
+              label: t.labelWillRenew,
+              value: s.willRenew ? t.yes : t.no
+            },
+            ...r ? [
+              {
+                label: t.labelMonthlyUsage,
+                value: `${r.currentUsage.monthly.toLocaleString()} / ${b(r.currentLimits.monthly)}`
+              },
+              {
+                label: t.labelDailyUsage,
+                value: `${r.currentUsage.daily.toLocaleString()} / ${b(r.currentLimits.daily)}`
+              }
+            ] : []
+          ]
+        } : void 0,
+        inactiveContent: s?.isActive ? void 0 : {
+          title: t.statusInactive,
+          message: t.statusInactiveMessage
+        }
+      },
+      aboveProducts: !m && d.length > 0 ? /* @__PURE__ */ i("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ i(
+        be,
+        {
+          options: Z,
+          value: v,
+          onChange: U
+        }
+      ) }) : null,
+      primaryAction: {
+        label: I ? t.buttonPurchasing : t.buttonSubscribe,
+        onClick: q,
+        disabled: !g || I || T,
+        loading: I
+      },
+      secondaryAction: {
+        label: T ? t.buttonRestoring : t.buttonRestore,
+        onClick: H,
+        disabled: I || T,
+        loading: T
+      },
+      children: m ? /* @__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" }) }) : d.length === 0 ? /* @__PURE__ */ i("div", { className: "text-center py-12 text-theme-text-secondary", children: t.noProducts }) : R.length === 0 ? /* @__PURE__ */ i("div", { className: "text-center py-12 text-theme-text-secondary", children: t.noProductsForPeriod }) : /* @__PURE__ */ o(ie, { children: [
+        /* @__PURE__ */ i(
+          O,
+          {
+            id: "free",
+            title: t.freeTierTitle,
+            price: t.freeTierPrice,
+            periodLabel: t.periodMonth,
+            features: Q(),
+            isSelected: !s?.isActive && g === null,
+            onSelect: () => M(null),
+            topBadge: s?.isActive ? void 0 : {
+              text: t.currentPlanBadge,
+              color: "green"
+            },
+            disabled: I || T,
+            hideSelectionIndicator: !0
+          },
+          "free"
+        ),
+        R.map((e) => /* @__PURE__ */ i(
+          O,
+          {
+            id: e.identifier,
+            title: e.title,
+            price: e.priceString,
+            periodLabel: G(e.period),
+            features: J(e.identifier),
+            isSelected: g === e.identifier,
+            onSelect: () => M(e.identifier),
+            isBestValue: e.identifier.includes("pro"),
+            discountBadge: e.period?.includes("Y") ? (() => {
+              const n = X(
+                e.identifier
+              );
+              return n && n > 0 ? {
+                text: a.formatSavePercent(n),
+                isBestValue: !0
+              } : void 0;
+            })() : void 0,
+            introPriceNote: e.freeTrialPeriod ? K(e.freeTrialPeriod) : e.introPrice ? a.formatIntroNote(e.introPrice) : void 0,
+            disabled: I || T
+          },
+          e.identifier
+        ))
+      ] })
+    }
+  );
+}
 export {
-  U as EntityListPage,
-  G as InvitationsPage,
-  B as MembersManagementPage
+  Ie as EntityListPage,
+  Ce as EntitySubscriptionsPage,
+  Fe as InvitationsPage,
+  Te 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(c,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):(c=typeof globalThis<"u"?globalThis:c||self,e(c.EntityPages={},c.jsxRuntime,c.React,c.LucideReact,c.SudobilityEntityComponents,c.SudobilityEntityClient,c.SudobilitySubscriptionComponents))})(this,(function(c,e,o,$,w,g,C){"use strict";function U({client:d,onSelectEntity:r}){const[i,a]=o.useState(!1),[m,v]=o.useState({displayName:"",description:""}),[f,b]=o.useState(null),{data:u=[],isLoading:s}=g.useEntities(d),h=g.useCreateEntity(d),S=u.filter(l=>l.entityType==="personal"),M=u.filter(l=>l.entityType==="organization"),k=async l=>{if(l.preventDefault(),b(null),!m.displayName.trim()){b("Display name is required");return}try{await h.mutateAsync({displayName:m.displayName.trim(),description:m.description.trim()||void 0}),a(!1),v({displayName:"",description:""})}catch(N){b(N.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:()=>a(!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"})]})]}),i&&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:k,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:m.displayName,onChange:l=>v(N=>({...N,displayName:l.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:m.description,onChange:l=>v(N=>({...N,description:l.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"})]}),f&&e.jsx("p",{className:"text-sm text-destructive",children:f}),e.jsxs("div",{className:"flex justify-end gap-2",children:[e.jsx("button",{type:"button",onClick:()=>{a(!1),v({displayName:"",description:""}),b(null)},className:"px-4 py-2 rounded-lg border hover:bg-muted transition-colors",children:"Cancel"}),e.jsx("button",{type:"submit",disabled:h.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:h.isPending?"Creating...":"Create"})]})]})]})}),S.length>0&&e.jsxs("div",{children:[e.jsx("h2",{className:"text-lg font-semibold mb-3",children:"Personal Workspace"}),e.jsx(w.EntityList,{entities:S,onSelect:r,isLoading:s})]}),e.jsxs("div",{children:[e.jsx("h2",{className:"text-lg font-semibold mb-3",children:"Organizations"}),M.length===0&&!s?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:()=>a(!0),className:"mt-2 text-primary hover:underline",children:"Create your first organization"})]}):e.jsx(w.EntityList,{entities:M,onSelect:r,isLoading:s})]})]})}function H({client:d,entity:r,currentUserId:i}){const a=r.userRole==="admin",{data:m=[],isLoading:v}=g.useEntityMembers(d,r.entitySlug),f=g.useUpdateMemberRole(d),b=g.useRemoveMember(d),{data:u=[],isLoading:s}=g.useEntityInvitations(d,a?r.entitySlug:null),h=g.useCreateInvitation(d),S=g.useCancelInvitation(d),M=async(P,p)=>{try{await f.mutateAsync({entitySlug:r.entitySlug,memberId:P,role:p})}catch(T){console.error("Failed to update role:",T)}},k=async P=>{if(confirm("Are you sure you want to remove this member?"))try{await b.mutateAsync({entitySlug:r.entitySlug,memberId:P})}catch(p){console.error("Failed to remove member:",p)}},l=async P=>{await h.mutateAsync({entitySlug:r.entitySlug,request:P})},N=async P=>{try{await S.mutateAsync({entitySlug:r.entitySlug,invitationId:P})}catch(p){console.error("Failed to cancel invitation:",p)}};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]})]}),a&&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(w.InvitationForm,{onSubmit:l,isSubmitting:h.isPending})]}),a&&e.jsxs("div",{children:[e.jsx("h2",{className:"text-lg font-semibold mb-3",children:"Pending Invitations"}),e.jsx(w.InvitationList,{invitations:u,mode:"admin",onCancel:N,isLoading:s,emptyMessage:"No pending invitations"})]}),e.jsxs("div",{children:[e.jsxs("h2",{className:"text-lg font-semibold mb-3",children:["Current Members (",m.length,")"]}),e.jsx(w.MemberList,{members:m,currentUserId:i,canManage:a,onRoleChange:M,onRemove:k,isLoading:v})]})]})}function V({client:d,onInvitationAccepted:r}){const{data:i=[],isLoading:a}=g.useMyInvitations(d),m=g.useAcceptInvitation(d),v=g.useDeclineInvitation(d),f=async s=>{try{await m.mutateAsync(s),r?.()}catch(h){console.error("Failed to accept invitation:",h)}},b=async s=>{try{await v.mutateAsync(s)}catch(h){console.error("Failed to decline invitation:",h)}},u=i.filter(s=>s.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:u>0?`You have ${u} pending invitation${u>1?"s":""}`:"No pending invitations"})]}),e.jsx(w.InvitationList,{invitations:i,mode:"user",onAccept:f,onDecline:b,isLoading:a,emptyMessage:"You don't have any pending invitations"})]})}const F={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:d,rateLimitsConfig:r,labels:i,formatters:a,onPurchaseSuccess:m,onRestoreSuccess:v,onError:f,onWarning:b}){const{products:u,currentSubscription:s,isLoading:h,error:S,purchase:M,restore:k,clearError:l}=d,[N,P]=o.useState("monthly"),[p,T]=o.useState(null),[I,A]=o.useState(!1),[L,D]=o.useState(!1);o.useEffect(()=>{S&&(f?.(i.errorTitle,S),l())},[S,l,i.errorTitle,f]);const z=u.filter(t=>{if(!t.period)return!1;const n=t.period.includes("Y")||t.period.includes("year");return N==="yearly"?n:!n}).sort((t,n)=>parseFloat(t.price)-parseFloat(n.price)),K=t=>{P(t),T(null)},J=async()=>{if(p){A(!0),l();try{await M(p)&&(m?.(),T(null))}catch(t){f?.(i.errorTitle,t instanceof Error?t.message:i.purchaseError)}finally{A(!1)}}},Q=async()=>{D(!0),l();try{await k()?v?.():b?.(i.errorTitle,i.restoreNoPurchases)}catch(t){f?.(i.errorTitle,t instanceof Error?t.message:i.restoreError)}finally{D(!1)}},X=o.useCallback(t=>t?new Intl.DateTimeFormat(void 0,{year:"numeric",month:"long",day:"numeric"}).format(t):"",[]),Z=o.useCallback(t=>t?t.includes("Y")||t.includes("year")?i.periodYear:t.includes("M")||t.includes("month")?i.periodMonth:t.includes("W")||t.includes("week")?i.periodWeek:"":"",[i]),R=o.useCallback(t=>{if(!t)return;const n=parseInt(t.replace(/\D/g,"")||"1",10);return t.includes("W")?a.formatTrialWeeks(n):t.includes("M")?a.formatTrialMonths(n):a.formatTrialDays(n)},[a]),j=o.useCallback(t=>{if(!r?.tiers)return;const n=F[t];return n?r.tiers.find(y=>y.entitlement===n):r.tiers.find(y=>y.entitlement==="none")},[r]),x=o.useCallback(t=>t===null?i.unlimited:t.toLocaleString(),[i.unlimited]),q=o.useCallback(t=>{const n=j(t);if(!n)return[];const y=[];return n.limits.hourly!==null&&y.push(a.formatHourlyLimit(x(n.limits.hourly))),n.limits.daily!==null&&y.push(a.formatDailyLimit(x(n.limits.daily))),n.limits.monthly!==null&&y.push(a.formatMonthlyLimit(x(n.limits.monthly))),n.limits.hourly===null&&n.limits.daily===null&&n.limits.monthly===null&&y.push(i.unlimitedRequests),y},[j,x,a,i.unlimitedRequests]),ee=o.useCallback(t=>q(t),[q]),te=o.useCallback(()=>{const t=[...i.freeTierFeatures];if(r?.tiers){const n=r.tiers.find(y=>y.entitlement==="none");n&&(n.limits.hourly!==null&&t.push(a.formatHourlyLimit(x(n.limits.hourly))),n.limits.daily!==null&&t.push(a.formatDailyLimit(x(n.limits.daily))),n.limits.monthly!==null&&t.push(a.formatMonthlyLimit(x(n.limits.monthly))))}return t},[r,x,a,i.freeTierFeatures]),ie=o.useCallback(t=>{const n=F[t];if(!n)return;const y=u.find(E=>E.identifier===t);if(!y)return;const Y=Object.entries(F).find(([E,ae])=>ae===n&&E.includes("monthly"))?.[0];if(!Y)return;const W=u.find(E=>E.identifier===Y);if(!W)return;const O=parseFloat(y.price),B=parseFloat(W.price);if(B<=0||O<=0)return;const _=B*12,re=(_-O)/_*100;return Math.round(re)},[u]),ne=[{value:"monthly",label:i.billingMonthly},{value:"yearly",label:i.billingYearly}];return e.jsx(C.SubscriptionLayout,{title:i.title,error:S,currentStatusLabel:i.currentStatusLabel,currentStatus:{isActive:s?.isActive??!1,activeContent:s?.isActive?{title:i.statusActive,fields:[{label:i.labelPlan,value:s.productIdentifier||i.labelPremium},{label:i.labelExpires,value:X(s.expirationDate)},{label:i.labelWillRenew,value:s.willRenew?i.yes:i.no},...r?[{label:i.labelMonthlyUsage,value:`${r.currentUsage.monthly.toLocaleString()} / ${x(r.currentLimits.monthly)}`},{label:i.labelDailyUsage,value:`${r.currentUsage.daily.toLocaleString()} / ${x(r.currentLimits.daily)}`}]:[]]}:void 0,inactiveContent:s?.isActive?void 0:{title:i.statusInactive,message:i.statusInactiveMessage}},aboveProducts:!h&&u.length>0?e.jsx("div",{className:"flex justify-center mb-6",children:e.jsx(C.SegmentedControl,{options:ne,value:N,onChange:K})}):null,primaryAction:{label:I?i.buttonPurchasing:i.buttonSubscribe,onClick:J,disabled:!p||I||L,loading:I},secondaryAction:{label:L?i.buttonRestoring:i.buttonRestore,onClick:Q,disabled:I||L,loading:L},children:h?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"})}):u.length===0?e.jsx("div",{className:"text-center py-12 text-theme-text-secondary",children:i.noProducts}):z.length===0?e.jsx("div",{className:"text-center py-12 text-theme-text-secondary",children:i.noProductsForPeriod}):e.jsxs(e.Fragment,{children:[e.jsx(C.SubscriptionTile,{id:"free",title:i.freeTierTitle,price:i.freeTierPrice,periodLabel:i.periodMonth,features:te(),isSelected:!s?.isActive&&p===null,onSelect:()=>T(null),topBadge:s?.isActive?void 0:{text:i.currentPlanBadge,color:"green"},disabled:I||L,hideSelectionIndicator:!0},"free"),z.map(t=>e.jsx(C.SubscriptionTile,{id:t.identifier,title:t.title,price:t.priceString,periodLabel:Z(t.period),features:ee(t.identifier),isSelected:p===t.identifier,onSelect:()=>T(t.identifier),isBestValue:t.identifier.includes("pro"),discountBadge:t.period?.includes("Y")?(()=>{const n=ie(t.identifier);return n&&n>0?{text:a.formatSavePercent(n),isBestValue:!0}:void 0})():void 0,introPriceNote:t.freeTrialPeriod?R(t.freeTrialPeriod):t.introPrice?a.formatIntroNote(t.introPrice):void 0,disabled:I||L},t.identifier))]})})}c.EntityListPage=U,c.EntitySubscriptionsPage=G,c.InvitationsPage=V,c.MembersManagementPage=H,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));

package/dist/pages/EntitySubscriptionsPage.d.ts

@@ -0,0 +1,106 @@
+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;
+}
+/** All localized labels for the subscription page */
+export interface SubscriptionPageLabels {
+    title: string;
+    errorTitle: string;
+    purchaseError: string;
+    restoreError: string;
+    restoreNoPurchases: string;
+    periodYear: string;
+    periodMonth: string;
+    periodWeek: string;
+    billingMonthly: string;
+    billingYearly: string;
+    unlimited: string;
+    unlimitedRequests: string;
+    currentStatusLabel: string;
+    statusActive: string;
+    statusInactive: string;
+    statusInactiveMessage: string;
+    labelPlan: string;
+    labelPremium: string;
+    labelExpires: string;
+    labelWillRenew: string;
+    labelMonthlyUsage: string;
+    labelDailyUsage: string;
+    yes: string;
+    no: string;
+    buttonSubscribe: string;
+    buttonPurchasing: string;
+    buttonRestore: string;
+    buttonRestoring: string;
+    noProducts: string;
+    noProductsForPeriod: string;
+    freeTierTitle: string;
+    freeTierPrice: string;
+    freeTierFeatures: string[];
+    currentPlanBadge: string;
+}
+/** Formatter functions for dynamic strings */
+export interface SubscriptionPageFormatters {
+    /** Format rate limit: "1,000 requests/hour" */
+    formatHourlyLimit: (limit: string) => string;
+    /** Format rate limit: "10,000 requests/day" */
+    formatDailyLimit: (limit: string) => string;
+    /** Format rate limit: "100,000 requests/month" */
+    formatMonthlyLimit: (limit: string) => string;
+    /** Format trial period: "7 days free trial" */
+    formatTrialDays: (count: number) => string;
+    /** Format trial period: "2 weeks free trial" */
+    formatTrialWeeks: (count: number) => string;
+    /** Format trial period: "1 month free trial" */
+    formatTrialMonths: (count: number) => string;
+    /** Format savings badge: "Save 20%" */
+    formatSavePercent: (percent: number) => string;
+    /** Format intro price note */
+    formatIntroNote: (price: string) => string;
+}
+export interface EntitySubscriptionsPageProps {
+    /** Subscription context value */
+    subscription: SubscriptionContextValue;
+    /** Rate limit configuration */
+    rateLimitsConfig?: RateLimitsConfigData | null;
+    /** All localized labels */
+    labels: SubscriptionPageLabels;
+    /** Formatter functions for dynamic strings */
+    formatters: SubscriptionPageFormatters;
+    /** 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, labels, formatters, 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 SubscriptionPageLabels, type SubscriptionPageFormatters, } from './EntitySubscriptionsPage';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/entity_pages",
-  "version": "0.0.10",
+  "version": "0.0.13",
   "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",