@sudobility/subscription_pages 0.0.5 → 0.0.6

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 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({
   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: y
 }) {
   const {
-    packagesByDuration: I,
-    availableDurations: m,
-    isLoading: g,
-    error: P
-  } = ce(), {
+    packagesByDuration: x,
+    availableDurations: h,
+    isLoading: D,
+    error: b
+  } = oe(), {
     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: $,
+    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) => {
     try {
-      S(!0), x(null), await X().purchase({
+      P(!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);
+      P(!1);
     }
-  }, L = () => n ? (r == null ? void 0 : r.isActive) && r.packageId ? {
+  }, R = () => 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,38 +56,38 @@ function he({
   } : {
     title: "Free",
     price: "$0",
-    features: u ?? [],
+    features: s ?? [],
     ctaButton: {
       label: "Try it for Free",
-      onClick: s
+      onClick: l
     }
-  }, U = (t) => {
+  }, A = (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)
+        onClick: () => w(t.package.packageId, t.offerId)
       } : {
         label: "Subscribe",
-        onClick: () => E(t.package.packageId, t.offerId)
+        onClick: () => w(t.package.packageId, t.offerId)
       };
   };
-  if (w)
+  if (O)
     return /* @__PURE__ */ i(
-      F,
+      L,
       {
-        title: f,
-        className: k,
+        title: g,
+        className: y,
         variant: "cta",
         children: /* @__PURE__ */ i("p", { children: "Loading subscription plans..." })
       }
     );
-  const Y = b ?? (A ? A.message : null), j = n && (r != null && r.isActive) && r.packageId ? {
+  const T = F ?? (I ? I.message : null), U = 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] ?? [] : [];
+  } : void 0, Y = C ? x[C] ?? [] : [];
   return /* @__PURE__ */ i(
-    F,
+    L,
     {
-      title: f,
-      className: k,
+      title: g,
+      className: y,
       variant: "cta",
-      error: Y,
-      currentStatus: j,
-      freeTileConfig: L(),
-      aboveProducts: m.length > 1 ? /* @__PURE__ */ i(
+      error: T,
+      currentStatus: U,
+      freeTileConfig: R(),
+      aboveProducts: h.length > 1 ? /* @__PURE__ */ i(
         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: C ?? h[0],
+          onChange: (t) => N(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);
+      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(
-          se,
+          ue,
           {
             id: t.package.packageId,
             title: t.package.name,
-            price: (($ = t.package.product) == null ? void 0 : $.priceString) ?? "$0",
+            price: ((k = t.package.product) == null ? void 0 : k.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: M
           },
           `${t.offerId}-${t.package.packageId}`
         );
@@ -155,73 +155,76 @@ function he({
 function K(n) {
   return n.charAt(0).toUpperCase() + n.slice(1);
 }
-const ue = {
+const de = {
   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 pe(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 ve({
   isLoggedIn: n,
-  onNavigateToLogin: s,
-  userId: d,
+  onNavigateToLogin: l,
+  userId: p,
   userEmail: o,
-  featuresByPackage: p,
-  freeFeatures: u,
-  title: f = "Choose Your Plan",
-  className: k,
-  t: I,
-  renderOfferingContent: m
+  featuresByPackage: f,
+  freeFeatures: s,
+  title: g = "Choose Your Plan",
+  className: y,
+  t: x,
+  renderOfferingContent: h,
+  initialOfferId: D
 }) {
   var q;
-  const g = (a, c) => I ? I(a, c) : c, {
-    offerings: P,
-    isLoading: r,
-    error: M
-  } = oe(), {
+  const b = (a, c) => x ? x(a, c) : c, {
+    offerings: r,
+    isLoading: $,
+    error: B
+  } = le(), {
     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, {
-    packages: L,
-    isLoading: U,
-    error: Y
-  } = le(E), j = r || O || U, D = M || R || Y, t = async (a, c) => {
+    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) => {
     try {
-      w(!0), S(null), await X().purchase({
+      I(!0), C(null), await X().purchase({
         packageId: a,
         offeringId: c,
         customerEmail: o
       }), await Z();
     } catch (v) {
-      S(
+      C(
         v instanceof Error ? v.message : "Purchase failed"
       );
     } finally {
-      w(!1);
+      I(!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"),
+  ], k = A[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 +232,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, c) => {
+    if (!n) return l;
     if ((e == null ? void 0 : e.packageId) !== a.packageId)
-      return () => t(a.packageId, c);
+      return () => m(a.packageId, c);
   };
-  if (j)
+  if (Y)
     return /* @__PURE__ */ i(
-      F,
+      L,
       {
-        title: f,
-        className: k,
+        title: g,
+        className: y,
         variant: "cta",
         children: /* @__PURE__ */ i("p", { children: "Loading subscription plans..." })
       }
     );
-  const ae = T ?? (D ? D.message : null), ne = n && (e != null && e.isActive) && e.packageId ? {
+  const ne = P ?? (t ? t.message : null), ie = n && (e != null && e.isActive) && e.packageId ? {
     isActive: !0,
     activeContent: {
       title: "Active Subscription",
@@ -279,50 +282,50 @@ function me({
         ] : []
       ]
     }
-  } : void 0, _ = b === "free";
+  } : void 0, _ = u === "free";
   return /* @__PURE__ */ i(
-    F,
+    L,
     {
-      title: f,
-      className: k,
+      title: g,
+      className: y,
       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: ie,
+      freeTileConfig: _ ? re() : void 0,
+      aboveProducts: d.length > 1 ? /* @__PURE__ */ i("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ i(
         ee,
         {
-          options: h,
-          value: b,
-          onChange: x
+          options: d,
+          value: u,
+          onChange: M
         }
       ) }) : 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__ */ 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) => {
           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 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(
             "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 " + (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"),
               children: [
-                /* @__PURE__ */ N("div", { className: "min-w-0 flex-1", 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__ */ N("p", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: [
+                  z !== null ? /* @__PURE__ */ E("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
+                  ] }) : j ? /* @__PURE__ */ i("p", { className: "text-sm font-medium text-blue-600 dark:text-blue-400", children: "Current Plan" }) : null
                 ] }),
-                /* @__PURE__ */ i(
+                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(
                   "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: O || !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}`
                   }
                 )
               ]
@@ -335,6 +338,6 @@ function me({
   );
 }
 export {
-  he as SubscriptionByDurationPage,
-  me as SubscriptionByOfferPage
+  me as SubscriptionByDurationPage,
+  ve 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.6",
   "description": "Subscription page components for React web applications",
   "type": "module",
   "main": "dist/index.js",