@sudobility/subscription_pages 0.0.6 → 0.0.8

package/dist/index.js

@@ -1,8 +1,8 @@
-import { jsx as i, jsxs as E } from "react/jsx-runtime";
-import { useState as S } from "react";
-import { usePackagesByDuration as oe, useUserSubscription as V, getSubscriptionInstance as X, refreshSubscription as Z, useAllOfferings as le, useOfferingPackages as se, periodToMonths as J } from "@sudobility/subscription_lib";
-import { SubscriptionLayout as L, SubscriptionTile as ue, SegmentedControl as ee } from "@sudobility/subscription-components";
-function me({
+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({
   isLoggedIn: n,
   onNavigateToLogin: l,
   userId: p,
@@ -10,20 +10,20 @@ function me({
   featuresByPackage: f,
   freeFeatures: s,
   title: g = "Choose Your Plan",
-  className: y
+  className: x
 }) {
   const {
-    packagesByDuration: x,
+    packagesByDuration: I,
     availableDurations: h,
-    isLoading: D,
+    isLoading: C,
     error: b
-  } = oe(), {
+  } = le(), {
     subscription: r,
-    isLoading: $,
-    error: B
-  } = V({ userId: p, userEmail: o }), [e, N] = S(null), [F, u] = S(null), [M, P] = S(!1), C = e ?? h[0] ?? null, O = D || $, I = b || B, w = async (t, m) => {
+    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) => {
     try {
-      P(!0), u(null), await X().purchase({
+      A(!0), u(null), await X().purchase({
         packageId: t,
         offeringId: m,
         customerEmail: o
@@ -33,9 +33,9 @@ function me({
         d instanceof Error ? d.message : "Purchase failed"
       );
     } finally {
-      P(!1);
+      A(!1);
     }
-  }, R = () => n ? (r == null ? void 0 : r.isActive) && r.packageId ? {
+  }, T = () => n ? (r == null ? void 0 : r.isActive) && r.packageId ? {
     title: "Free",
     price: "$0",
     features: s ?? [],
@@ -61,7 +61,7 @@ function me({
       label: "Try it for Free",
       onClick: l
     }
-  }, A = (t) => {
+  }, L = (t) => {
     if (!n)
       return {
         label: "Log in to Continue",
@@ -71,23 +71,23 @@ function me({
     if ((r == null ? void 0 : r.packageId) !== t.package.packageId)
       return m ? {
         label: "Change Subscription",
-        onClick: () => w(t.package.packageId, t.offerId)
+        onClick: () => E(t.package.packageId, t.offerId)
       } : {
         label: "Subscribe",
-        onClick: () => w(t.package.packageId, t.offerId)
+        onClick: () => E(t.package.packageId, t.offerId)
       };
   };
-  if (O)
-    return /* @__PURE__ */ i(
-      L,
+  if (R)
+    return /* @__PURE__ */ c(
+      $,
       {
         title: g,
-        className: y,
+        className: x,
         variant: "cta",
-        children: /* @__PURE__ */ i("p", { children: "Loading subscription plans..." })
+        children: /* @__PURE__ */ c("p", { children: "Loading subscription plans..." })
       }
     );
-  const T = F ?? (I ? I.message : null), U = n && (r != null && r.isActive) && r.packageId ? {
+  const U = M ?? (P ? P.message : null), Y = n && (r != null && r.isActive) && r.packageId ? {
     isActive: !0,
     activeContent: {
       title: "Active Subscription",
@@ -107,36 +107,36 @@ function me({
         ] : []
       ]
     }
-  } : void 0, Y = C ? x[C] ?? [] : [];
-  return /* @__PURE__ */ i(
-    L,
+  } : void 0, j = k ? I[k] ?? [] : [];
+  return /* @__PURE__ */ c(
+    $,
     {
       title: g,
-      className: y,
+      className: x,
       variant: "cta",
-      error: T,
-      currentStatus: U,
-      freeTileConfig: R(),
-      aboveProducts: h.length > 1 ? /* @__PURE__ */ i(
+      error: U,
+      currentStatus: Y,
+      freeTileConfig: T(),
+      aboveProducts: h.length > 1 ? /* @__PURE__ */ c(
         ee,
         {
           options: h.map((t) => ({
             value: t,
             label: t.charAt(0).toUpperCase() + t.slice(1)
           })),
-          value: C ?? h[0],
-          onChange: (t) => N(t)
+          value: k ?? h[0],
+          onChange: (t) => F(t)
         }
       ) : void 0,
-      children: Y.map((t) => {
-        var k;
-        const m = n && (r == null ? void 0 : r.isActive) && r.packageId === t.package.packageId, d = A(t);
-        return /* @__PURE__ */ i(
-          ue,
+      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,
           {
             id: t.package.packageId,
             title: t.package.name,
-            price: ((k = t.package.product) == null ? void 0 : k.priceString) ?? "$0",
+            price: ((S = t.package.product) == null ? void 0 : S.priceString) ?? "$0",
             periodLabel: t.package.product ? `/${t.package.product.period}` : void 0,
             features: (f == null ? void 0 : f[t.package.packageId]) ?? [],
             isSelected: !1,
@@ -144,7 +144,7 @@ function me({
             },
             isCurrentPlan: m,
             ctaButton: d,
-            disabled: M
+            disabled: w
           },
           `${t.offerId}-${t.package.packageId}`
         );
@@ -155,14 +155,14 @@ function me({
 function K(n) {
   return n.charAt(0).toUpperCase() + n.slice(1);
 }
-const de = {
+const pe = {
   weekly: "Weekly",
   monthly: "Monthly",
   quarterly: "Quarterly",
   yearly: "Yearly",
   lifetime: "Lifetime"
 };
-function pe(n, l) {
+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;
@@ -173,7 +173,7 @@ function pe(n, l) {
   );
   return g > 0 ? g : null;
 }
-function ve({
+function Ce({
   isLoggedIn: n,
   onNavigateToLogin: l,
   userId: p,
@@ -181,39 +181,43 @@ function ve({
   featuresByPackage: f,
   freeFeatures: s,
   title: g = "Choose Your Plan",
-  className: y,
-  t: x,
+  className: x,
+  t: I,
   renderOfferingContent: h,
-  initialOfferId: D
+  initialOfferId: C
 }) {
   var q;
-  const b = (a, c) => x ? x(a, c) : c, {
+  const b = (a, i) => I ? I(a, i) : i, {
     offerings: r,
-    isLoading: $,
-    error: B
-  } = le(), {
+    isLoading: B,
+    error: N
+  } = se(), {
     subscription: e,
-    isLoading: N,
-    error: F
-  } = V({ userId: p, userEmail: o }), [u, M] = S(
-    D ?? "free"
-  ), [P, C] = S(null), [O, I] = S(!1), w = ((q = r[0]) == null ? void 0 : q.offerId) ?? "", R = u !== "free" ? u : w, {
-    packages: A,
-    isLoading: T,
-    error: U
-  } = se(R), Y = $ || N || T, t = B || F || U, m = async (a, c) => {
+    isLoading: F,
+    error: M
+  } = V({ userId: p, userEmail: o }), [u, w] = y(
+    C ?? "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) => {
     try {
-      I(!0), C(null), await X().purchase({
+      P(!0), k(null), await X().purchase({
         packageId: a,
-        offeringId: c,
+        offeringId: i,
         customerEmail: o
       }), await Z();
     } catch (v) {
-      C(
+      k(
         v instanceof Error ? v.message : "Purchase failed"
       );
     } finally {
-      I(!1);
+      P(!1);
     }
   }, d = [
     { value: "free", label: b("free", "Free") },
@@ -221,7 +225,7 @@ function ve({
       value: a.offerId,
       label: b(a.offerId, K(a.offerId))
     }))
-  ], k = A[0] ?? null, re = () => n ? (e == null ? void 0 : e.isActive) && e.packageId ? {
+  ], S = L[0] ?? null, re = () => n ? (e == null ? void 0 : e.isActive) && e.packageId ? {
     title: b("free", "Free"),
     price: "$0",
     features: s ?? [],
@@ -247,22 +251,22 @@ function ve({
       label: "Try it for Free",
       onClick: l
     }
-  }, 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, 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, c);
+      return () => m(a.packageId, i);
   };
-  if (Y)
-    return /* @__PURE__ */ i(
-      L,
+  if (j)
+    return /* @__PURE__ */ c(
+      $,
       {
         title: g,
-        className: y,
+        className: x,
         variant: "cta",
-        children: /* @__PURE__ */ i("p", { children: "Loading subscription plans..." })
+        children: /* @__PURE__ */ c("p", { children: "Loading subscription plans..." })
       }
     );
-  const ne = P ?? (t ? t.message : null), ie = n && (e != null && e.isActive) && e.packageId ? {
+  const ne = A ?? (t ? t.message : null), ce = n && (e != null && e.isActive) && e.packageId ? {
     isActive: !0,
     activeContent: {
       title: "Active Subscription",
@@ -283,49 +287,49 @@ function ve({
       ]
     }
   } : void 0, _ = u === "free";
-  return /* @__PURE__ */ i(
-    L,
+  return /* @__PURE__ */ c(
+    $,
     {
       title: g,
-      className: y,
+      className: x,
       variant: "cta",
       error: ne,
-      currentStatus: ie,
+      currentStatus: ce,
       freeTileConfig: _ ? re() : void 0,
-      aboveProducts: d.length > 1 ? /* @__PURE__ */ i("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ i(
+      aboveProducts: d.length > 1 ? /* @__PURE__ */ c("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ c(
         ee,
         {
           options: d,
           value: u,
-          onChange: M
+          onChange: w
         }
       ) }) : void 0,
-      children: !_ && /* @__PURE__ */ E("div", { className: "col-span-full space-y-6", children: [
-        h && /* @__PURE__ */ i("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__ */ i("div", { className: "space-y-3", children: A.map((a) => {
+      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 c = (G = a.product) == null ? void 0 : G.period, v = c ? b(c, de[c] ?? K(c)) : a.name, j = n && (e == null ? void 0 : e.isActive) && e.packageId === a.packageId, z = k && a.packageId !== k.packageId ? pe(k, a) : null, Q = te(a), W = ae(a, u), ce = ((H = a.product) == null ? void 0 : H.priceString) ?? "$0";
-          return /* @__PURE__ */ E(
+          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(
             "div",
             {
-              className: "flex items-center justify-between rounded-xl p-4 transition-all " + (j ? "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 " + (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"),
               children: [
-                /* @__PURE__ */ E("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ i("p", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: v }),
-                  /* @__PURE__ */ i("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: a.packageId }),
-                  z !== null ? /* @__PURE__ */ E("p", { className: "text-sm font-medium text-green-600 dark:text-green-400", 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: [
                     "Save ",
                     z,
                     "%"
-                  ] }) : j ? /* @__PURE__ */ i("p", { className: "text-sm font-medium text-blue-600 dark:text-blue-400", children: "Current Plan" }) : null
+                  ] }) : O ? /* @__PURE__ */ c("p", { className: "text-sm font-medium text-blue-600 dark:text-blue-400", children: "Current Plan" }) : null
                 ] }),
-                j ? /* @__PURE__ */ i("span", { className: "ml-4 flex-shrink-0 text-sm font-semibold text-blue-600 dark:text-blue-400", children: Q }) : /* @__PURE__ */ i(
+                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(
                   "button",
                   {
                     onClick: W,
-                    disabled: O || !W,
+                    disabled: R || !W,
                     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: `${ce} · ${Q}`
+                    children: `${ie} · ${Q}`
                   }
                 )
               ]
@@ -338,6 +342,6 @@ function ve({
   );
 }
 export {
-  me as SubscriptionByDurationPage,
-  ve as SubscriptionByOfferPage
+  ve as SubscriptionByDurationPage,
+  Ce as SubscriptionByOfferPage
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/subscription_pages",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "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.27",
+    "@sudobility/subscription_lib": "^0.0.28",
     "@sudobility/subscription-components": "^1.0.27",
     "@sudobility/types": "^1.9.58"
   },
   "devDependencies": {
     "@sudobility/subscription-components": "^1.0.27",
-    "@sudobility/subscription_lib": "^0.0.27",
+    "@sudobility/subscription_lib": "^0.0.28",
     "@sudobility/types": "^1.9.58",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",