@sudobility/subscription_pages 0.0.14 → 0.0.15

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/subscription_pages",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Subscription page components for React web applications",
   "type": "module",
   "main": "dist/index.js",