@sudobility/subscription_pages 0.0.11 → 0.0.14

package/dist/components/CrossPlatformSubscriptionInfo.d.ts

@@ -0,0 +1,8 @@
+import { SubscriptionPlatform } from '@sudobility/types';
+import { BackendSubscriptionResult } from '@sudobility/subscription_lib';
+export interface CrossPlatformSubscriptionInfoProps {
+    backendSubscription: BackendSubscriptionResult;
+    managementUrl?: string;
+    currentPlatform: SubscriptionPlatform;
+}
+export declare function CrossPlatformSubscriptionInfo({ backendSubscription, managementUrl, }: CrossPlatformSubscriptionInfoProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -1,93 +1,162 @@
-import { jsx as c, jsxs as D } from "react/jsx-runtime";
-import { useState as y, useEffect as oe } from "react";
-import { usePackagesByDuration as le, useUserSubscription as V, getSubscriptionInstance as X, refreshSubscription as Z, useAllOfferings as se, useOfferingPackages as ue, periodToMonths as J } from "@sudobility/subscription_lib";
-import { SubscriptionLayout as $, SubscriptionTile as de, SegmentedControl as ee } from "@sudobility/subscription-components";
-function ve({
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { useState as C, useEffect as xe } from "react";
+import { SubscriptionPlatform as le } from "@sudobility/types";
+import { usePackagesByDuration as ke, useUserSubscription as se, useBackendSubscription as de, getSubscriptionInstance as ue, refreshSubscription as fe, useAllOfferings as Ce, useOfferingPackages as Ie, periodToMonths as ie } from "@sudobility/subscription_lib";
+import { SubscriptionLayout as I, SubscriptionTile as Pe, SegmentedControl as pe } from "@sudobility/subscription-components";
+const Ae = {
+  web: "Web",
+  ios: "iOS",
+  android: "Android",
+  macos: "macOS"
+};
+function ge({
+  backendSubscription: n,
+  managementUrl: c
+}) {
+  const i = n.platform ? Ae[n.platform] ?? n.platform : "another platform";
+  return /* @__PURE__ */ m("div", { className: "col-span-full rounded-xl border border-amber-200 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20 p-6 text-center space-y-4", children: [
+    /* @__PURE__ */ a("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: "Subscription Active" }),
+    /* @__PURE__ */ m("div", { className: "space-y-2 text-sm text-gray-700 dark:text-gray-300", children: [
+      /* @__PURE__ */ m("p", { children: [
+        "Entitlements:",
+        " ",
+        /* @__PURE__ */ a("span", { className: "font-medium", children: n.entitlements.join(", ") })
+      ] }),
+      n.subscriptionStartedAt && /* @__PURE__ */ m("p", { children: [
+        "Subscribed since:",
+        " ",
+        /* @__PURE__ */ a("span", { className: "font-medium", children: new Date(
+          n.subscriptionStartedAt
+        ).toLocaleDateString() })
+      ] })
+    ] }),
+    /* @__PURE__ */ m("p", { className: "text-sm text-amber-800 dark:text-amber-300", children: [
+      "Your subscription was purchased on",
+      " ",
+      /* @__PURE__ */ a("span", { className: "font-semibold", children: i }),
+      ". To manage your subscription, please visit your ",
+      i,
+      " settings."
+    ] }),
+    c && /* @__PURE__ */ a(
+      "a",
+      {
+        href: c,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "inline-block rounded-lg px-5 py-2.5 text-sm font-semibold bg-blue-600 text-white hover:bg-blue-700 transition-colors",
+        children: "Manage Subscription"
+      }
+    )
+  ] });
+}
+function $e({
   isLoggedIn: n,
-  onNavigateToLogin: l,
-  userId: p,
-  userEmail: o,
-  featuresByPackage: f,
-  freeFeatures: s,
-  title: g = "Choose Your Plan",
-  className: x
+  onNavigateToLogin: c,
+  userId: i,
+  userEmail: d,
+  featuresByPackage: b,
+  freeFeatures: f,
+  title: u = "Choose Your Plan",
+  className: v,
+  currentPlatform: P = le.Web,
+  networkClient: A,
+  baseUrl: w,
+  token: E,
+  testMode: _
 }) {
+  var O;
   const {
-    packagesByDuration: I,
-    availableDurations: h,
-    isLoading: C,
-    error: b
-  } = le(), {
+    packagesByDuration: M,
+    availableDurations: S,
+    isLoading: x,
+    error: h
+  } = ke(), {
     subscription: r,
-    isLoading: B,
-    error: N
-  } = V({ userId: p, userEmail: o }), [e, F] = y(null), [M, u] = y(null), [w, A] = y(!1), k = e ?? h[0] ?? null, R = C || B, P = b || N, E = async (t, m) => {
+    isLoading: j,
+    error: W
+  } = se({ userId: i, userEmail: d }), L = de(
+    A ?? {},
+    w ?? "",
+    E ?? "",
+    i ?? "",
+    { testMode: _, enabled: !!(A && w && E && i) }
+  ), B = ((O = L.data) == null ? void 0 : O.platform) ?? null, V = !B || B === P, [N, $] = C(null), [q, s] = C(null), [U, F] = C(!1), k = N ?? S[0] ?? null, z = x || j, D = h || W, Q = async (t, p) => {
     try {
-      A(!0), u(null), await X().purchase({
+      F(!0), s(null), await ue().purchase({
         packageId: t,
-        offeringId: m,
-        customerEmail: o
-      }), await Z();
-    } catch (d) {
-      u(
-        d instanceof Error ? d.message : "Purchase failed"
+        offeringId: p,
+        customerEmail: d
+      }), await fe();
+    } catch (g) {
+      s(
+        g instanceof Error ? g.message : "Purchase failed"
       );
     } finally {
-      A(!1);
+      F(!1);
     }
-  }, T = () => n ? (r == null ? void 0 : r.isActive) && r.packageId ? {
+  }, G = () => n ? (r == null ? void 0 : r.isActive) && r.packageId ? {
     title: "Free",
     price: "$0",
-    features: s ?? [],
-    ctaButton: {
-      label: "Cancel Subscription",
-      onClick: () => {
-        r.managementUrl && window.open(r.managementUrl, "_blank");
-      }
-    }
+    features: f ?? []
   } : {
     title: "Free",
     price: "$0",
-    features: s ?? [],
-    ctaButton: {
-      label: "Current Plan"
-    },
-    topBadge: { text: "Current Plan", color: "blue" }
+    features: f ?? [],
+    topBadge: { text: "Current", color: "blue" }
   } : {
     title: "Free",
     price: "$0",
-    features: s ?? [],
+    features: f ?? [],
     ctaButton: {
       label: "Try it for Free",
-      onClick: l
+      onClick: c
     }
-  }, L = (t) => {
+  }, T = () => {
+    r != null && r.managementUrl && window.open(r.managementUrl, "_blank");
+  }, H = (t) => {
     if (!n)
       return {
         label: "Log in to Continue",
-        onClick: l
-      };
-    const m = (r == null ? void 0 : r.isActive) && r.packageId;
-    if ((r == null ? void 0 : r.packageId) !== t.package.packageId)
-      return m ? {
-        label: "Change Subscription",
-        onClick: () => E(t.package.packageId, t.offerId)
-      } : {
-        label: "Subscribe",
-        onClick: () => E(t.package.packageId, t.offerId)
+        onClick: c
       };
+    const p = (r == null ? void 0 : r.isActive) && r.packageId, g = (r == null ? void 0 : r.packageId) === t.package.packageId && (r == null ? void 0 : r.offeringId) === t.offerId;
+    return p ? {
+      label: g ? "Manage Subscription" : "Change Subscription",
+      onClick: T
+    } : {
+      label: "Subscribe",
+      onClick: () => Q(t.package.packageId, t.offerId)
+    };
   };
-  if (R)
-    return /* @__PURE__ */ c(
-      $,
+  if (z)
+    return /* @__PURE__ */ a(
+      I,
+      {
+        title: u,
+        className: v,
+        variant: "cta",
+        children: /* @__PURE__ */ a("p", { children: "Loading subscription plans..." })
+      }
+    );
+  if (!V && L.data)
+    return /* @__PURE__ */ a(
+      I,
       {
-        title: g,
-        className: x,
+        title: u,
+        className: v,
         variant: "cta",
-        children: /* @__PURE__ */ c("p", { children: "Loading subscription plans..." })
+        children: /* @__PURE__ */ a(
+          ge,
+          {
+            backendSubscription: L.data,
+            managementUrl: r == null ? void 0 : r.managementUrl,
+            currentPlatform: P
+          }
+        )
       }
     );
-  const U = M ?? (P ? P.message : null), Y = n && (r != null && r.isActive) && r.packageId ? {
+  const J = q ?? (D ? D.message : null), K = n && (r != null && r.isActive) && r.packageId ? {
     isActive: !0,
     activeContent: {
       title: "Active Subscription",
@@ -107,44 +176,44 @@ function ve({
         ] : []
       ]
     }
-  } : void 0, j = k ? I[k] ?? [] : [];
-  return /* @__PURE__ */ c(
-    $,
+  } : void 0, R = k ? M[k] ?? [] : [];
+  return /* @__PURE__ */ a(
+    I,
     {
-      title: g,
-      className: x,
+      title: u,
+      className: v,
       variant: "cta",
-      error: U,
-      currentStatus: Y,
-      freeTileConfig: T(),
-      aboveProducts: h.length > 1 ? /* @__PURE__ */ c(
-        ee,
+      error: J,
+      currentStatus: K,
+      freeTileConfig: G(),
+      aboveProducts: S.length > 1 ? /* @__PURE__ */ a(
+        pe,
         {
-          options: h.map((t) => ({
+          options: S.map((t) => ({
             value: t,
             label: t.charAt(0).toUpperCase() + t.slice(1)
           })),
-          value: k ?? h[0],
-          onChange: (t) => F(t)
+          value: k ?? S[0],
+          onChange: (t) => $(t)
         }
       ) : void 0,
-      children: j.map((t) => {
-        var S;
-        const m = n && (r == null ? void 0 : r.isActive) && r.packageId === t.package.packageId, d = L(t);
-        return /* @__PURE__ */ c(
-          de,
+      children: R.map((t) => {
+        var Y;
+        const p = n && (r == null ? void 0 : r.isActive) && r.packageId === t.package.packageId && r.offeringId === t.offerId, g = H(t);
+        return /* @__PURE__ */ a(
+          Pe,
           {
             id: t.package.packageId,
             title: t.package.name,
-            price: ((S = t.package.product) == null ? void 0 : S.priceString) ?? "$0",
+            price: ((Y = t.package.product) == null ? void 0 : Y.priceString) ?? "$0",
             periodLabel: t.package.product ? `/${t.package.product.period}` : void 0,
-            features: (f == null ? void 0 : f[t.package.packageId]) ?? [],
+            features: (b == null ? void 0 : b[t.package.packageId]) ?? [],
             isSelected: !1,
             onSelect: () => {
             },
-            isCurrentPlan: m,
-            ctaButton: d,
-            disabled: w
+            isCurrentPlan: p,
+            ctaButton: g,
+            disabled: U
           },
           `${t.offerId}-${t.package.packageId}`
         );
@@ -152,121 +221,138 @@ function ve({
     }
   );
 }
-function K(n) {
+function ce(n) {
   return n.charAt(0).toUpperCase() + n.slice(1);
 }
-const pe = {
+const we = {
   weekly: "Weekly",
   monthly: "Monthly",
   quarterly: "Quarterly",
   yearly: "Yearly",
   lifetime: "Lifetime"
 };
-function fe(n, l) {
-  if (!n.product || !l.product) return null;
-  const p = J(n.product.period), o = J(l.product.period);
-  if (p <= 0 || o <= 0 || p === 1 / 0 || o === 1 / 0 || p === o) return null;
-  const f = n.product.price / p, s = l.product.price / o;
-  if (f <= 0) return null;
-  const g = Math.round(
-    (f - s) / f * 100
+function Ee(n, c) {
+  if (!n.product || !c.product) return null;
+  const i = ie(n.product.period), d = ie(c.product.period);
+  if (i <= 0 || d <= 0 || i === 1 / 0 || d === 1 / 0 || i === d) return null;
+  const b = n.product.price / i, f = c.product.price / d;
+  if (b <= 0) return null;
+  const u = Math.round(
+    (b - f) / b * 100
   );
-  return g > 0 ? g : null;
+  return u > 0 ? u : null;
 }
-function Ce({
+function Ue({
   isLoggedIn: n,
-  onNavigateToLogin: l,
-  userId: p,
-  userEmail: o,
-  featuresByPackage: f,
-  freeFeatures: s,
-  title: g = "Choose Your Plan",
-  className: x,
-  t: I,
-  renderOfferingContent: h,
-  initialOfferId: C
+  onNavigateToLogin: c,
+  userId: i,
+  userEmail: d,
+  featuresByPackage: b,
+  freeFeatures: f,
+  title: u = "Choose Your Plan",
+  className: v,
+  currentPlatform: P = le.Web,
+  networkClient: A,
+  baseUrl: w,
+  token: E,
+  testMode: _,
+  t: M,
+  renderOfferingContent: S,
+  initialOfferId: x
 }) {
-  var q;
-  const b = (a, i) => I ? I(a, i) : i, {
+  var Z, ee;
+  const h = (o, l) => M ? M(o, l) : l, {
     offerings: r,
-    isLoading: B,
-    error: N
-  } = se(), {
+    isLoading: j,
+    error: W
+  } = Ce(), {
     subscription: e,
-    isLoading: F,
-    error: M
-  } = V({ userId: p, userEmail: o }), [u, w] = y(
-    C ?? "free"
+    isLoading: L,
+    error: B
+  } = se({ userId: i, userEmail: d }), N = de(
+    A ?? {},
+    w ?? "",
+    E ?? "",
+    i ?? "",
+    { testMode: _, enabled: !!(A && w && E && i) }
+  ), $ = ((Z = N.data) == null ? void 0 : Z.platform) ?? null, q = !$ || $ === P, [s, U] = C(
+    x ?? "free"
   );
-  oe(() => {
-    C && w(C);
-  }, [C]);
-  const [A, k] = y(null), [R, P] = y(!1), E = ((q = r[0]) == null ? void 0 : q.offerId) ?? "", T = u !== "free" ? u : E, {
-    packages: L,
-    isLoading: U,
-    error: Y
-  } = ue(T), j = B || F || U, t = N || M || Y, m = async (a, i) => {
+  xe(() => {
+    x && U(x);
+  }, [x]);
+  const [F, k] = C(null), [z, D] = C(!1), Q = ((ee = r[0]) == null ? void 0 : ee.offerId) ?? "", G = s !== "free" ? s : Q, {
+    packages: T,
+    isLoading: H,
+    error: J
+  } = Ie(G), K = j || L || H, R = W || B || J, O = async (o, l) => {
     try {
-      P(!0), k(null), await X().purchase({
-        packageId: a,
-        offeringId: i,
-        customerEmail: o
-      }), await Z();
-    } catch (v) {
+      D(!0), k(null), await ue().purchase({
+        packageId: o,
+        offeringId: l,
+        customerEmail: d
+      }), await fe();
+    } catch (y) {
       k(
-        v instanceof Error ? v.message : "Purchase failed"
+        y instanceof Error ? y.message : "Purchase failed"
       );
     } finally {
-      P(!1);
+      D(!1);
     }
-  }, d = [
-    { value: "free", label: b("free", "Free") },
-    ...r.map((a) => ({
-      value: a.offerId,
-      label: b(a.offerId, K(a.offerId))
+  }, t = [
+    { value: "free", label: h("free", "Free") },
+    ...r.map((o) => ({
+      value: o.offerId,
+      label: h(o.offerId, ce(o.offerId))
     }))
-  ], S = L[0] ?? null, re = () => n ? (e == null ? void 0 : e.isActive) && e.packageId ? {
-    title: b("free", "Free"),
+  ], p = T[0] ?? null, g = () => n ? (e == null ? void 0 : e.isActive) && e.packageId ? {
+    title: h("free", "Free"),
     price: "$0",
-    features: s ?? [],
-    ctaButton: {
-      label: "Cancel Subscription",
-      onClick: () => {
-        e.managementUrl && window.open(e.managementUrl, "_blank");
-      }
-    }
+    features: f ?? []
   } : {
-    title: b("free", "Free"),
+    title: h("free", "Free"),
     price: "$0",
-    features: s ?? [],
-    ctaButton: {
-      label: "Current Plan"
-    },
-    topBadge: { text: "Current Plan", color: "blue" }
+    features: f ?? [],
+    topBadge: { text: "Current", color: "blue" }
   } : {
-    title: b("free", "Free"),
+    title: h("free", "Free"),
     price: "$0",
-    features: s ?? [],
+    features: f ?? [],
     ctaButton: {
       label: "Try it for Free",
-      onClick: l
+      onClick: c
     }
-  }, te = (a) => n ? (e == null ? void 0 : e.packageId) === a.packageId ? "Current Plan" : (e == null ? void 0 : e.isActive) && e.packageId ? "Change Subscription" : "Subscribe" : "Log in to Continue", ae = (a, i) => {
-    if (!n) return l;
-    if ((e == null ? void 0 : e.packageId) !== a.packageId)
-      return () => m(a.packageId, i);
-  };
-  if (j)
-    return /* @__PURE__ */ c(
-      $,
+  }, Y = () => {
+    e != null && e.managementUrl && window.open(e.managementUrl, "_blank");
+  }, me = (o) => n ? (e == null ? void 0 : e.isActive) && e.packageId ? (e == null ? void 0 : e.packageId) === o.packageId && (e == null ? void 0 : e.offeringId) === s ? "Manage Subscription" : "Change Subscription" : "Subscribe" : "Log in to Continue", be = (o, l) => n ? (e == null ? void 0 : e.isActive) && e.packageId ? Y : () => O(o.packageId, l) : c;
+  if (K)
+    return /* @__PURE__ */ a(
+      I,
       {
-        title: g,
-        className: x,
+        title: u,
+        className: v,
         variant: "cta",
-        children: /* @__PURE__ */ c("p", { children: "Loading subscription plans..." })
+        children: /* @__PURE__ */ a("p", { children: "Loading subscription plans..." })
+      }
+    );
+  if (!q && N.data)
+    return /* @__PURE__ */ a(
+      I,
+      {
+        title: u,
+        className: v,
+        variant: "cta",
+        children: /* @__PURE__ */ a(
+          ge,
+          {
+            backendSubscription: N.data,
+            managementUrl: e == null ? void 0 : e.managementUrl,
+            currentPlatform: P
+          }
+        )
       }
     );
-  const ne = A ?? (t ? t.message : null), ce = n && (e != null && e.isActive) && e.packageId ? {
+  const he = F ?? (R ? R.message : null), ve = n && (e != null && e.isActive) && e.packageId ? {
     isActive: !0,
     activeContent: {
       title: "Active Subscription",
@@ -286,55 +372,55 @@ function Ce({
         ] : []
       ]
     }
-  } : void 0, _ = u === "free";
-  return /* @__PURE__ */ c(
-    $,
+  } : void 0, X = s === "free";
+  return /* @__PURE__ */ a(
+    I,
     {
-      title: g,
-      className: x,
+      title: u,
+      className: v,
       variant: "cta",
-      error: ne,
-      currentStatus: ce,
-      freeTileConfig: _ ? re() : void 0,
-      aboveProducts: d.length > 1 ? /* @__PURE__ */ c("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ c(
-        ee,
+      error: he,
+      currentStatus: ve,
+      freeTileConfig: X ? g() : void 0,
+      aboveProducts: t.length > 1 ? /* @__PURE__ */ a("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ a(
+        pe,
         {
-          options: d,
-          value: u,
-          onChange: w
+          options: t,
+          value: s,
+          onChange: U
         }
       ) }) : void 0,
-      children: !_ && /* @__PURE__ */ D("div", { className: "col-span-full space-y-6", children: [
-        h && /* @__PURE__ */ c("div", { className: "rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 p-5", children: h(u) }),
-        /* @__PURE__ */ c("div", { className: "space-y-3", children: L.map((a) => {
-          var G, H;
-          const i = (G = a.product) == null ? void 0 : G.period, v = i ? b(i, pe[i] ?? K(i)) : a.name, O = n && (e == null ? void 0 : e.isActive) && e.packageId === a.packageId, z = S && a.packageId !== S.packageId ? fe(S, a) : null, Q = te(a), W = ae(a, u), ie = ((H = a.product) == null ? void 0 : H.priceString) ?? "$0";
-          return /* @__PURE__ */ D(
+      children: !X && /* @__PURE__ */ m("div", { className: "col-span-full space-y-6", children: [
+        S && /* @__PURE__ */ a("div", { className: "rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 p-5", children: S(s) }),
+        /* @__PURE__ */ a("div", { className: "space-y-3", children: T.map((o) => {
+          var ne, oe;
+          const l = (ne = o.product) == null ? void 0 : ne.period, y = l ? h(l, we[l] ?? ce(l)) : o.name, re = n && (e == null ? void 0 : e.isActive) && e.packageId === o.packageId && e.offeringId === s, te = p && o.packageId !== p.packageId ? Ee(p, o) : null, Se = me(o), ae = be(o, s), ye = ((oe = o.product) == null ? void 0 : oe.priceString) ?? "$0";
+          return /* @__PURE__ */ m(
             "div",
             {
-              className: "flex items-center justify-between rounded-xl p-4 transition-all " + (O ? "bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-500 dark:border-blue-400" : "bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700"),
+              className: "flex items-center justify-between rounded-xl p-4 transition-all " + (re ? "bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-500 dark:border-blue-400" : "bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700"),
               children: [
-                /* @__PURE__ */ D("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ c("p", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: v }),
-                  /* @__PURE__ */ c("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: a.packageId }),
-                  z !== null ? /* @__PURE__ */ D("p", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: [
+                /* @__PURE__ */ m("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ a("p", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: y }),
+                  /* @__PURE__ */ a("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: o.packageId }),
+                  te !== null ? /* @__PURE__ */ m("p", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: [
                     "Save ",
-                    z,
+                    te,
                     "%"
-                  ] }) : O ? /* @__PURE__ */ c("p", { className: "text-sm font-medium text-blue-600 dark:text-blue-400", children: "Current Plan" }) : null
+                  ] }) : re ? /* @__PURE__ */ a("p", { className: "text-sm font-medium text-blue-600 dark:text-blue-400", children: "Current Plan" }) : null
                 ] }),
-                O ? /* @__PURE__ */ c("span", { className: "ml-4 flex-shrink-0 text-sm font-semibold text-blue-600 dark:text-blue-400", children: Q }) : /* @__PURE__ */ c(
+                /* @__PURE__ */ a(
                   "button",
                   {
-                    onClick: W,
-                    disabled: R || !W,
+                    onClick: ae,
+                    disabled: z || !ae,
                     className: "ml-4 flex-shrink-0 rounded-lg px-4 py-2 text-sm font-semibold transition-colors bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed",
-                    children: `${ie} · ${Q}`
+                    children: `${ye} · ${Se}`
                   }
                 )
               ]
             },
-            a.packageId
+            o.packageId
           );
         }) })
       ] })
@@ -342,6 +428,6 @@ function Ce({
   );
 }
 export {
-  ve as SubscriptionByDurationPage,
-  Ce as SubscriptionByOfferPage
+  $e as SubscriptionByDurationPage,
+  Ue as SubscriptionByOfferPage
 };

package/dist/pages/SubscriptionByDurationPage.d.ts

@@ -1,9 +1,4 @@
-/**
- * SubscriptionByDurationPage
- *
- * Subscription page that groups packages by billing duration (monthly, yearly, etc.).
- * Uses a SegmentedControl to switch between durations.
- */
+import { SubscriptionPlatform, NetworkClient } from '@sudobility/types';
 export interface SubscriptionByDurationPageProps {
     /** Whether the user is logged in */
     isLoggedIn: boolean;
@@ -21,5 +16,15 @@ export interface SubscriptionByDurationPageProps {
     title?: string;
     /** Additional CSS classes */
     className?: string;
+    /** Current platform (defaults to Web) */
+    currentPlatform?: SubscriptionPlatform;
+    /** Network client for backend subscription fetch */
+    networkClient?: NetworkClient;
+    /** Backend API base URL */
+    baseUrl?: string;
+    /** Auth token for backend API */
+    token?: string;
+    /** Include sandbox purchases */
+    testMode?: boolean;
 }
-export declare function SubscriptionByDurationPage({ isLoggedIn, onNavigateToLogin, userId, userEmail, featuresByPackage, freeFeatures, title, className, }: SubscriptionByDurationPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubscriptionByDurationPage({ isLoggedIn, onNavigateToLogin, userId, userEmail, featuresByPackage, freeFeatures, title, className, currentPlatform, networkClient, baseUrl, token, testMode, }: SubscriptionByDurationPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/SubscriptionByOfferPage.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { SubscriptionPlatform, NetworkClient } from '@sudobility/types';
 export interface SubscriptionByOfferPageProps {
     /** Whether the user is logged in */
     isLoggedIn: boolean;
@@ -16,6 +17,16 @@ export interface SubscriptionByOfferPageProps {
     title?: string;
     /** Additional CSS classes */
     className?: string;
+    /** Current platform (defaults to Web) */
+    currentPlatform?: SubscriptionPlatform;
+    /** Network client for backend subscription fetch */
+    networkClient?: NetworkClient;
+    /** Backend API base URL */
+    baseUrl?: string;
+    /** Auth token for backend API */
+    token?: string;
+    /** Include sandbox purchases */
+    testMode?: boolean;
     /**
      * Translation function for localizing offer names, period labels, etc.
      * Keys passed: offer identifiers (e.g. "basic", "premium"), "free",
@@ -35,4 +46,4 @@ export interface SubscriptionByOfferPageProps {
      */
     initialOfferId?: string;
 }
-export declare function SubscriptionByOfferPage({ isLoggedIn, onNavigateToLogin, userId, userEmail, featuresByPackage: _featuresByPackage, freeFeatures, title, className, t: translate, renderOfferingContent, initialOfferId, }: SubscriptionByOfferPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubscriptionByOfferPage({ isLoggedIn, onNavigateToLogin, userId, userEmail, featuresByPackage: _featuresByPackage, freeFeatures, title, className, currentPlatform, networkClient, baseUrl, token, testMode, t: translate, renderOfferingContent, initialOfferId, }: SubscriptionByOfferPageProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/subscription_pages",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "description": "Subscription page components for React web applications",
   "type": "module",
   "main": "dist/index.js",
@@ -28,14 +28,15 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@sudobility/subscription_lib": "^0.0.31",
-    "@sudobility/subscription-components": "^1.0.27",
+    "@sudobility/subscription_lib": "^0.0.34",
+    "@sudobility/subscription-components": "^1.0.28",
     "@sudobility/types": "^1.9.59"
   },
   "devDependencies": {
-    "@sudobility/subscription-components": "^1.0.27",
-    "@sudobility/subscription_lib": "^0.0.31",
+    "@sudobility/subscription-components": "^1.0.28",
+    "@sudobility/subscription_lib": "^0.0.34",
     "@sudobility/types": "^1.9.59",
+    "@tanstack/react-query": "^5.91.2",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@types/react": "^19.2.5",