@sudobility/subscription_pages 0.0.13 → 0.0.14

package/dist/index.js

@@ -1,8 +1,8 @@
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { useState as C, useEffect as ke } from "react";
-import { SubscriptionPlatform as se } from "@sudobility/types";
-import { usePackagesByDuration as xe, useUserSubscription as le, useBackendSubscription as de, getSubscriptionInstance as ue, refreshSubscription as pe, useAllOfferings as Ce, useOfferingPackages as Pe, periodToMonths as ie } from "@sudobility/subscription_lib";
-import { SubscriptionLayout as P, SubscriptionTile as Ie, SegmentedControl as fe } from "@sudobility/subscription-components";
+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",
@@ -54,12 +54,12 @@ function $e({
   isLoggedIn: n,
   onNavigateToLogin: c,
   userId: i,
-  userEmail: l,
+  userEmail: d,
   featuresByPackage: b,
-  freeFeatures: u,
-  title: d = "Choose Your Plan",
+  freeFeatures: f,
+  title: u = "Choose Your Plan",
   className: v,
-  currentPlatform: I = se.Web,
+  currentPlatform: P = le.Web,
   networkClient: A,
   baseUrl: w,
   token: E,
@@ -69,27 +69,27 @@ function $e({
   const {
     packagesByDuration: M,
     availableDurations: S,
-    isLoading: k,
+    isLoading: x,
     error: h
-  } = xe(), {
+  } = ke(), {
     subscription: r,
     isLoading: j,
     error: W
-  } = le({ userId: i, userEmail: l }), L = de(
+  } = 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 === I, [N, $] = C(null), [q, p] = C(null), [U, F] = C(!1), x = N ?? S[0] ?? null, z = k || j, D = h || W, Q = async (t, f) => {
+  ), 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 {
-      F(!0), p(null), await ue().purchase({
+      F(!0), s(null), await ue().purchase({
         packageId: t,
-        offeringId: f,
-        customerEmail: l
-      }), await pe();
+        offeringId: p,
+        customerEmail: d
+      }), await fe();
     } catch (g) {
-      p(
+      s(
         g instanceof Error ? g.message : "Purchase failed"
       );
     } finally {
@@ -98,16 +98,16 @@ function $e({
   }, G = () => n ? (r == null ? void 0 : r.isActive) && r.packageId ? {
     title: "Free",
     price: "$0",
-    features: u ?? []
+    features: f ?? []
   } : {
     title: "Free",
     price: "$0",
-    features: u ?? [],
+    features: f ?? [],
     topBadge: { text: "Current", color: "blue" }
   } : {
     title: "Free",
     price: "$0",
-    features: u ?? [],
+    features: f ?? [],
     ctaButton: {
       label: "Try it for Free",
       onClick: c
@@ -120,8 +120,8 @@ function $e({
         label: "Log in to Continue",
         onClick: c
       };
-    const f = (r == null ? void 0 : r.isActive) && r.packageId, g = (r == null ? void 0 : r.packageId) === t.package.packageId;
-    return f ? {
+    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
     } : {
@@ -131,9 +131,9 @@ function $e({
   };
   if (z)
     return /* @__PURE__ */ a(
-      P,
+      I,
       {
-        title: d,
+        title: u,
         className: v,
         variant: "cta",
         children: /* @__PURE__ */ a("p", { children: "Loading subscription plans..." })
@@ -141,9 +141,9 @@ function $e({
     );
   if (!V && L.data)
     return /* @__PURE__ */ a(
-      P,
+      I,
       {
-        title: d,
+        title: u,
         className: v,
         variant: "cta",
         children: /* @__PURE__ */ a(
@@ -151,7 +151,7 @@ function $e({
           {
             backendSubscription: L.data,
             managementUrl: r == null ? void 0 : r.managementUrl,
-            currentPlatform: I
+            currentPlatform: P
           }
         )
       }
@@ -176,32 +176,32 @@ function $e({
         ] : []
       ]
     }
-  } : void 0, R = x ? M[x] ?? [] : [];
+  } : void 0, R = k ? M[k] ?? [] : [];
   return /* @__PURE__ */ a(
-    P,
+    I,
     {
-      title: d,
+      title: u,
       className: v,
       variant: "cta",
       error: J,
       currentStatus: K,
       freeTileConfig: G(),
       aboveProducts: S.length > 1 ? /* @__PURE__ */ a(
-        fe,
+        pe,
         {
           options: S.map((t) => ({
             value: t,
             label: t.charAt(0).toUpperCase() + t.slice(1)
           })),
-          value: x ?? S[0],
+          value: k ?? S[0],
           onChange: (t) => $(t)
         }
       ) : void 0,
       children: R.map((t) => {
         var Y;
-        const f = n && (r == null ? void 0 : r.isActive) && r.packageId === t.package.packageId, g = H(t);
+        const p = n && (r == null ? void 0 : r.isActive) && r.packageId === t.package.packageId && r.offeringId === t.offerId, g = H(t);
         return /* @__PURE__ */ a(
-          Ie,
+          Pe,
           {
             id: t.package.packageId,
             title: t.package.name,
@@ -211,7 +211,7 @@ function $e({
             isSelected: !1,
             onSelect: () => {
             },
-            isCurrentPlan: f,
+            isCurrentPlan: p,
             ctaButton: g,
             disabled: U
           },
@@ -233,35 +233,35 @@ const we = {
 };
 function Ee(n, c) {
   if (!n.product || !c.product) return null;
-  const i = ie(n.product.period), l = ie(c.product.period);
-  if (i <= 0 || l <= 0 || i === 1 / 0 || l === 1 / 0 || i === l) return null;
-  const b = n.product.price / i, u = c.product.price / l;
+  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 d = Math.round(
-    (b - u) / b * 100
+  const u = Math.round(
+    (b - f) / b * 100
   );
-  return d > 0 ? d : null;
+  return u > 0 ? u : null;
 }
 function Ue({
   isLoggedIn: n,
   onNavigateToLogin: c,
   userId: i,
-  userEmail: l,
+  userEmail: d,
   featuresByPackage: b,
-  freeFeatures: u,
-  title: d = "Choose Your Plan",
+  freeFeatures: f,
+  title: u = "Choose Your Plan",
   className: v,
-  currentPlatform: I = se.Web,
+  currentPlatform: P = le.Web,
   networkClient: A,
   baseUrl: w,
   token: E,
   testMode: _,
   t: M,
   renderOfferingContent: S,
-  initialOfferId: k
+  initialOfferId: x
 }) {
   var Z, ee;
-  const h = (o, s) => M ? M(o, s) : s, {
+  const h = (o, l) => M ? M(o, l) : l, {
     offerings: r,
     isLoading: j,
     error: W
@@ -269,31 +269,31 @@ function Ue({
     subscription: e,
     isLoading: L,
     error: B
-  } = le({ userId: i, userEmail: l }), N = de(
+  } = 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 = !$ || $ === I, [p, U] = C(
-    k ?? "free"
+  ), $ = ((Z = N.data) == null ? void 0 : Z.platform) ?? null, q = !$ || $ === P, [s, U] = C(
+    x ?? "free"
   );
-  ke(() => {
-    k && U(k);
-  }, [k]);
-  const [F, x] = C(null), [z, D] = C(!1), Q = ((ee = r[0]) == null ? void 0 : ee.offerId) ?? "", G = p !== "free" ? p : Q, {
+  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
-  } = Pe(G), K = j || L || H, R = W || B || J, O = async (o, s) => {
+  } = Ie(G), K = j || L || H, R = W || B || J, O = async (o, l) => {
     try {
-      D(!0), x(null), await ue().purchase({
+      D(!0), k(null), await ue().purchase({
         packageId: o,
-        offeringId: s,
-        customerEmail: l
-      }), await pe();
+        offeringId: l,
+        customerEmail: d
+      }), await fe();
     } catch (y) {
-      x(
+      k(
         y instanceof Error ? y.message : "Purchase failed"
       );
     } finally {
@@ -305,31 +305,31 @@ function Ue({
       value: o.offerId,
       label: h(o.offerId, ce(o.offerId))
     }))
-  ], f = T[0] ?? null, g = () => n ? (e == null ? void 0 : e.isActive) && e.packageId ? {
+  ], p = T[0] ?? null, g = () => n ? (e == null ? void 0 : e.isActive) && e.packageId ? {
     title: h("free", "Free"),
     price: "$0",
-    features: u ?? []
+    features: f ?? []
   } : {
     title: h("free", "Free"),
     price: "$0",
-    features: u ?? [],
+    features: f ?? [],
     topBadge: { text: "Current", color: "blue" }
   } : {
     title: h("free", "Free"),
     price: "$0",
-    features: u ?? [],
+    features: f ?? [],
     ctaButton: {
       label: "Try it for Free",
       onClick: 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 ? "Manage Subscription" : "Change Subscription" : "Subscribe" : "Log in to Continue", be = (o, s) => n ? (e == null ? void 0 : e.isActive) && e.packageId ? Y : () => O(o.packageId, s) : c;
+  }, 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(
-      P,
+      I,
       {
-        title: d,
+        title: u,
         className: v,
         variant: "cta",
         children: /* @__PURE__ */ a("p", { children: "Loading subscription plans..." })
@@ -337,9 +337,9 @@ function Ue({
     );
   if (!q && N.data)
     return /* @__PURE__ */ a(
-      P,
+      I,
       {
-        title: d,
+        title: u,
         className: v,
         variant: "cta",
         children: /* @__PURE__ */ a(
@@ -347,7 +347,7 @@ function Ue({
           {
             backendSubscription: N.data,
             managementUrl: e == null ? void 0 : e.managementUrl,
-            currentPlatform: I
+            currentPlatform: P
           }
         )
       }
@@ -372,29 +372,29 @@ function Ue({
         ] : []
       ]
     }
-  } : void 0, X = p === "free";
+  } : void 0, X = s === "free";
   return /* @__PURE__ */ a(
-    P,
+    I,
     {
-      title: d,
+      title: u,
       className: v,
       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(
-        fe,
+        pe,
         {
           options: t,
-          value: p,
+          value: s,
           onChange: U
         }
       ) }) : 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(p) }),
+        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 s = (ne = o.product) == null ? void 0 : ne.period, y = s ? h(s, we[s] ?? ce(s)) : o.name, re = n && (e == null ? void 0 : e.isActive) && e.packageId === o.packageId, te = f && o.packageId !== f.packageId ? Ee(f, o) : null, Se = me(o), ae = be(o, p), ye = ((oe = o.product) == null ? void 0 : oe.priceString) ?? "$0";
+          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",
             {

package/package.json

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