@sudobility/subscription_pages 0.0.5 → 0.0.7

package/dist/index.js

@@ -1,44 +1,44 @@
-import { jsx as i, jsxs as N } from "react/jsx-runtime";
-import { useState as C } from "react";
-import { usePackagesByDuration as ce, useUserSubscription as V, getSubscriptionInstance as X, refreshSubscription as Z, useAllOfferings as oe, useOfferingPackages as le, periodToMonths as J } from "@sudobility/subscription_lib";
-import { SubscriptionLayout as F, SubscriptionTile as se, SegmentedControl as ee } from "@sudobility/subscription-components";
-function he({
+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: s,
-  userId: d,
+  onNavigateToLogin: l,
+  userId: p,
   userEmail: o,
-  featuresByPackage: p,
-  freeFeatures: u,
-  title: f = "Choose Your Plan",
-  className: k
+  featuresByPackage: f,
+  freeFeatures: s,
+  title: g = "Choose Your Plan",
+  className: x
 }) {
   const {
     packagesByDuration: I,
-    availableDurations: m,
-    isLoading: g,
-    error: P
-  } = ce(), {
+    availableDurations: h,
+    isLoading: C,
+    error: b
+  } = le(), {
     subscription: r,
-    isLoading: M,
-    error: e
-  } = V({ userId: d, userEmail: o }), [O, R] = C(null), [b, x] = C(null), [T, S] = C(!1), y = O ?? m[0] ?? null, w = g || M, A = P || e, E = async (t, h) => {
+    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 {
-      S(!0), x(null), await X().purchase({
+      A(!0), u(null), await X().purchase({
         packageId: t,
-        offeringId: h,
+        offeringId: m,
         customerEmail: o
       }), await Z();
-    } catch (l) {
-      x(
-        l instanceof Error ? l.message : "Purchase failed"
+    } catch (d) {
+      u(
+        d instanceof Error ? d.message : "Purchase failed"
       );
     } finally {
-      S(!1);
+      A(!1);
     }
-  }, L = () => n ? (r == null ? void 0 : r.isActive) && r.packageId ? {
+  }, T = () => n ? (r == null ? void 0 : r.isActive) && r.packageId ? {
     title: "Free",
     price: "$0",
-    features: u ?? [],
+    features: s ?? [],
     ctaButton: {
       label: "Cancel Subscription",
       onClick: () => {
@@ -48,7 +48,7 @@ function he({
   } : {
     title: "Free",
     price: "$0",
-    features: u ?? [],
+    features: s ?? [],
     ctaButton: {
       label: "Current Plan"
     },
@@ -56,20 +56,20 @@ function he({
   } : {
     title: "Free",
     price: "$0",
-    features: u ?? [],
+    features: s ?? [],
     ctaButton: {
       label: "Try it for Free",
-      onClick: s
+      onClick: l
     }
-  }, U = (t) => {
+  }, L = (t) => {
     if (!n)
       return {
         label: "Log in to Continue",
-        onClick: s
+        onClick: l
       };
-    const h = (r == null ? void 0 : r.isActive) && r.packageId;
+    const m = (r == null ? void 0 : r.isActive) && r.packageId;
     if ((r == null ? void 0 : r.packageId) !== t.package.packageId)
-      return h ? {
+      return m ? {
         label: "Change Subscription",
         onClick: () => E(t.package.packageId, t.offerId)
       } : {
@@ -77,17 +77,17 @@ function he({
         onClick: () => E(t.package.packageId, t.offerId)
       };
   };
-  if (w)
-    return /* @__PURE__ */ i(
-      F,
+  if (R)
+    return /* @__PURE__ */ c(
+      $,
       {
-        title: f,
-        className: k,
+        title: g,
+        className: x,
         variant: "cta",
-        children: /* @__PURE__ */ i("p", { children: "Loading subscription plans..." })
+        children: /* @__PURE__ */ c("p", { children: "Loading subscription plans..." })
       }
     );
-  const Y = b ?? (A ? A.message : null), j = 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,44 +107,44 @@ function he({
         ] : []
       ]
     }
-  } : void 0, D = y ? I[y] ?? [] : [];
-  return /* @__PURE__ */ i(
-    F,
+  } : void 0, j = k ? I[k] ?? [] : [];
+  return /* @__PURE__ */ c(
+    $,
     {
-      title: f,
-      className: k,
+      title: g,
+      className: x,
       variant: "cta",
-      error: Y,
-      currentStatus: j,
-      freeTileConfig: L(),
-      aboveProducts: m.length > 1 ? /* @__PURE__ */ i(
+      error: U,
+      currentStatus: Y,
+      freeTileConfig: T(),
+      aboveProducts: h.length > 1 ? /* @__PURE__ */ c(
         ee,
         {
-          options: m.map((t) => ({
+          options: h.map((t) => ({
             value: t,
             label: t.charAt(0).toUpperCase() + t.slice(1)
           })),
-          value: y ?? m[0],
-          onChange: (t) => R(t)
+          value: k ?? h[0],
+          onChange: (t) => F(t)
         }
       ) : void 0,
-      children: D.map((t) => {
-        var $;
-        const h = n && (r == null ? void 0 : r.isActive) && r.packageId === t.package.packageId, l = U(t);
-        return /* @__PURE__ */ i(
-          se,
+      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: (($ = t.package.product) == null ? void 0 : $.priceString) ?? "$0",
+            price: ((S = t.package.product) == null ? void 0 : S.priceString) ?? "$0",
             periodLabel: t.package.product ? `/${t.package.product.period}` : void 0,
-            features: (p == null ? void 0 : p[t.package.packageId]) ?? [],
+            features: (f == null ? void 0 : f[t.package.packageId]) ?? [],
             isSelected: !1,
             onSelect: () => {
             },
-            isCurrentPlan: h,
-            ctaButton: l,
-            disabled: T
+            isCurrentPlan: m,
+            ctaButton: d,
+            disabled: w
           },
           `${t.offerId}-${t.package.packageId}`
         );
@@ -155,73 +155,80 @@ function he({
 function K(n) {
   return n.charAt(0).toUpperCase() + n.slice(1);
 }
-const ue = {
+const pe = {
   weekly: "Weekly",
   monthly: "Monthly",
   quarterly: "Quarterly",
   yearly: "Yearly",
   lifetime: "Lifetime"
 };
-function de(n, s) {
-  if (!n.product || !s.product) return null;
-  const d = J(n.product.period), o = J(s.product.period);
-  if (d <= 0 || o <= 0 || d === 1 / 0 || o === 1 / 0 || d === o) return null;
-  const p = n.product.price / d, u = s.product.price / o;
-  if (p <= 0) return null;
-  const f = Math.round(
-    (p - u) / p * 100
+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
   );
-  return f > 0 ? f : null;
+  return g > 0 ? g : null;
 }
-function me({
+function Ce({
   isLoggedIn: n,
-  onNavigateToLogin: s,
-  userId: d,
+  onNavigateToLogin: l,
+  userId: p,
   userEmail: o,
-  featuresByPackage: p,
-  freeFeatures: u,
-  title: f = "Choose Your Plan",
-  className: k,
+  featuresByPackage: f,
+  freeFeatures: s,
+  title: g = "Choose Your Plan",
+  className: x,
   t: I,
-  renderOfferingContent: m
+  renderOfferingContent: h,
+  initialOfferId: C
 }) {
   var q;
-  const g = (a, c) => I ? I(a, c) : c, {
-    offerings: P,
-    isLoading: r,
-    error: M
-  } = oe(), {
+  const b = (a, i) => I ? I(a, i) : i, {
+    offerings: r,
+    isLoading: B,
+    error: N
+  } = se(), {
     subscription: e,
-    isLoading: O,
-    error: R
-  } = V({ userId: d, userEmail: o }), [b, x] = C("free"), [T, S] = C(null), [y, w] = C(!1), A = ((q = P[0]) == null ? void 0 : q.offerId) ?? "", E = b !== "free" ? b : A, {
+    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
-  } = le(E), j = r || O || U, D = M || R || Y, t = async (a, c) => {
+  } = ue(T), j = B || F || U, t = N || M || Y, m = async (a, i) => {
     try {
-      w(!0), S(null), await X().purchase({
+      P(!0), k(null), await X().purchase({
         packageId: a,
-        offeringId: c,
+        offeringId: i,
         customerEmail: o
       }), await Z();
     } catch (v) {
-      S(
+      k(
         v instanceof Error ? v.message : "Purchase failed"
       );
     } finally {
-      w(!1);
+      P(!1);
     }
-  }, h = [
-    { value: "free", label: g("free", "Free") },
-    ...P.map((a) => ({
+  }, d = [
+    { value: "free", label: b("free", "Free") },
+    ...r.map((a) => ({
       value: a.offerId,
-      label: g(a.offerId, K(a.offerId))
+      label: b(a.offerId, K(a.offerId))
     }))
-  ], l = L[0] ?? null, $ = () => n ? (e == null ? void 0 : e.isActive) && e.packageId ? {
-    title: g("free", "Free"),
+  ], S = L[0] ?? null, re = () => n ? (e == null ? void 0 : e.isActive) && e.packageId ? {
+    title: b("free", "Free"),
     price: "$0",
-    features: u ?? [],
+    features: s ?? [],
     ctaButton: {
       label: "Cancel Subscription",
       onClick: () => {
@@ -229,37 +236,37 @@ function me({
       }
     }
   } : {
-    title: g("free", "Free"),
+    title: b("free", "Free"),
     price: "$0",
-    features: u ?? [],
+    features: s ?? [],
     ctaButton: {
       label: "Current Plan"
     },
     topBadge: { text: "Current Plan", color: "blue" }
   } : {
-    title: g("free", "Free"),
+    title: b("free", "Free"),
     price: "$0",
-    features: u ?? [],
+    features: s ?? [],
     ctaButton: {
       label: "Try it for Free",
-      onClick: s
+      onClick: l
     }
-  }, re = (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", te = (a, c) => {
-    if (!n) return s;
+  }, 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 () => t(a.packageId, c);
+      return () => m(a.packageId, i);
   };
   if (j)
-    return /* @__PURE__ */ i(
-      F,
+    return /* @__PURE__ */ c(
+      $,
       {
-        title: f,
-        className: k,
+        title: g,
+        className: x,
         variant: "cta",
-        children: /* @__PURE__ */ i("p", { children: "Loading subscription plans..." })
+        children: /* @__PURE__ */ c("p", { children: "Loading subscription plans..." })
       }
     );
-  const ae = T ?? (D ? D.message : null), ne = 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",
@@ -279,50 +286,50 @@ function me({
         ] : []
       ]
     }
-  } : void 0, _ = b === "free";
-  return /* @__PURE__ */ i(
-    F,
+  } : void 0, _ = u === "free";
+  return /* @__PURE__ */ c(
+    $,
     {
-      title: f,
-      className: k,
+      title: g,
+      className: x,
       variant: "cta",
-      error: ae,
-      currentStatus: ne,
-      freeTileConfig: _ ? $() : void 0,
-      aboveProducts: h.length > 1 ? /* @__PURE__ */ i("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ i(
+      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,
         {
-          options: h,
-          value: b,
-          onChange: x
+          options: d,
+          value: u,
+          onChange: w
         }
       ) }) : void 0,
-      children: !_ && /* @__PURE__ */ N("div", { className: "col-span-full space-y-6", children: [
-        m && /* @__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: m(b) }),
-        /* @__PURE__ */ i("div", { className: "space-y-3", children: L.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 ? g(c, ue[c] ?? K(c)) : a.name, B = n && (e == null ? void 0 : e.isActive) && e.packageId === a.packageId, z = l && a.packageId !== l.packageId ? de(l, a) : null, Q = re(a), W = te(a, b), ie = ((H = a.product) == null ? void 0 : H.priceString) ?? "$0";
-          return /* @__PURE__ */ N(
+          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 " + (B ? "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__ */ N("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__ */ N("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,
                     "%"
-                  ] }) : B ? /* @__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
                 ] }),
-                /* @__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: y || !W,
-                    className: "ml-4 flex-shrink-0 rounded-lg px-4 py-2 text-sm font-semibold transition-colors " + (B ? "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 cursor-default" : "bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"),
-                    children: B ? Q : `${ie} · ${Q}`
+                    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: `${ie} · ${Q}`
                   }
                 )
               ]
@@ -335,6 +342,6 @@ function me({
   );
 }
 export {
-  he as SubscriptionByDurationPage,
-  me as SubscriptionByOfferPage
+  ve as SubscriptionByDurationPage,
+  Ce as SubscriptionByOfferPage
 };

package/dist/pages/SubscriptionByOfferPage.d.ts

@@ -29,5 +29,10 @@ export interface SubscriptionByOfferPageProps {
      * Return a list of strings or React elements shown in a styled container.
      */
     renderOfferingContent?: (offerId: string) => React.ReactNode;
+    /**
+     * If set, automatically select the specified offering on mount.
+     * Must match an offering identifier from RevenueCat.
+     */
+    initialOfferId?: string;
 }
-export declare function SubscriptionByOfferPage({ isLoggedIn, onNavigateToLogin, userId, userEmail, featuresByPackage: _featuresByPackage, freeFeatures, title, className, t: translate, renderOfferingContent, }: SubscriptionByOfferPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubscriptionByOfferPage({ isLoggedIn, onNavigateToLogin, userId, userEmail, featuresByPackage: _featuresByPackage, freeFeatures, title, className, 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.5",
+  "version": "0.0.7",
   "description": "Subscription page components for React web applications",
   "type": "module",
   "main": "dist/index.js",