@sudobility/subscription_pages 0.0.3 → 0.0.4

package/dist/index.js

@@ -1,48 +1,48 @@
-import { jsx as c } from "react/jsx-runtime";
-import { useState as I } from "react";
-import { usePackagesByDuration as N, useUserSubscription as H, getSubscriptionInstance as J, refreshSubscription as K, useAllOfferings as ee, useOfferingPackages as te, periodToMonths as G } from "@sudobility/subscription_lib";
-import { SubscriptionLayout as y, SubscriptionTile as Q, SegmentedControl as W } from "@sudobility/subscription-components";
-function oe({
+import { jsx as i, jsxs as F } 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 N, SubscriptionTile as se, SegmentedControl as ee } from "@sudobility/subscription-components";
+function he({
   isLoggedIn: n,
   onNavigateToLogin: s,
-  userId: f,
+  userId: d,
   userEmail: o,
-  featuresByPackage: i,
+  featuresByPackage: p,
   freeFeatures: u,
-  title: g = "Choose Your Plan",
-  className: m
+  title: f = "Choose Your Plan",
+  className: S
 }) {
   const {
-    packagesByDuration: P,
-    availableDurations: l,
-    isLoading: k,
-    error: B
-  } = N(), {
-    subscription: e,
-    isLoading: t,
-    error: F
-  } = H({ userId: f, userEmail: o }), [T, h] = I(null), [O, w] = I(null), [A, E] = I(!1), S = T ?? l[0] ?? null, U = k || t, D = B || F, C = async (r, d) => {
+    packagesByDuration: I,
+    availableDurations: v,
+    isLoading: g,
+    error: P
+  } = ce(), {
+    subscription: r,
+    isLoading: M,
+    error: e
+  } = V({ userId: d, userEmail: o }), [O, R] = C(null), [b, x] = C(null), [T, k] = C(!1), y = O ?? v[0] ?? null, w = g || M, A = P || e, E = async (t, h) => {
     try {
-      E(!0), w(null), await J().purchase({
-        packageId: r,
-        offeringId: d,
+      k(!0), x(null), await X().purchase({
+        packageId: t,
+        offeringId: h,
         customerEmail: o
-      }), await K();
-    } catch (v) {
-      w(
-        v instanceof Error ? v.message : "Purchase failed"
+      }), await Z();
+    } catch (l) {
+      x(
+        l instanceof Error ? l.message : "Purchase failed"
       );
     } finally {
-      E(!1);
+      k(!1);
     }
-  }, M = () => n ? (e == null ? void 0 : e.isActive) && e.packageId ? {
+  }, L = () => n ? (r == null ? void 0 : r.isActive) && r.packageId ? {
     title: "Free",
     price: "$0",
     features: u ?? [],
     ctaButton: {
       label: "Cancel Subscription",
       onClick: () => {
-        e.managementUrl && window.open(e.managementUrl, "_blank");
+        r.managementUrl && window.open(r.managementUrl, "_blank");
       }
     }
   } : {
@@ -61,164 +61,175 @@ function oe({
       label: "Try it for Free",
       onClick: s
     }
-  }, R = (r) => {
+  }, U = (t) => {
     if (!n)
       return {
         label: "Log in to Continue",
         onClick: s
       };
-    const d = (e == null ? void 0 : e.isActive) && e.packageId;
-    if ((e == null ? void 0 : e.packageId) !== r.package.packageId)
-      return d ? {
+    const h = (r == null ? void 0 : r.isActive) && r.packageId;
+    if ((r == null ? void 0 : r.packageId) !== t.package.packageId)
+      return h ? {
         label: "Change Subscription",
-        onClick: () => C(r.package.packageId, r.offerId)
+        onClick: () => E(t.package.packageId, t.offerId)
       } : {
         label: "Subscribe",
-        onClick: () => C(r.package.packageId, r.offerId)
+        onClick: () => E(t.package.packageId, t.offerId)
       };
   };
-  if (U)
-    return /* @__PURE__ */ c(
-      y,
+  if (w)
+    return /* @__PURE__ */ i(
+      N,
       {
-        title: g,
-        className: m,
+        title: f,
+        className: S,
         variant: "cta",
-        children: /* @__PURE__ */ c("p", { children: "Loading subscription plans..." })
+        children: /* @__PURE__ */ i("p", { children: "Loading subscription plans..." })
       }
     );
-  const Y = O ?? (D ? D.message : null), L = n && (e != null && e.isActive) && e.packageId ? {
+  const Y = b ?? (A ? A.message : null), j = n && (r != null && r.isActive) && r.packageId ? {
     isActive: !0,
     activeContent: {
       title: "Active Subscription",
       fields: [
-        ...e.productId ? [{ label: "Plan", value: e.productId }] : [],
-        ...e.expirationDate ? [
+        ...r.productId ? [{ label: "Plan", value: r.productId }] : [],
+        ...r.expirationDate ? [
           {
             label: "Expires",
-            value: e.expirationDate.toLocaleDateString()
+            value: r.expirationDate.toLocaleDateString()
           }
         ] : [],
-        ...e.willRenew !== void 0 ? [
+        ...r.willRenew !== void 0 ? [
           {
             label: "Auto-Renew",
-            value: e.willRenew ? "Yes" : "No"
+            value: r.willRenew ? "Yes" : "No"
           }
         ] : []
       ]
     }
-  } : void 0, $ = S ? P[S] ?? [] : [];
-  return /* @__PURE__ */ c(
-    y,
+  } : void 0, D = y ? I[y] ?? [] : [];
+  return /* @__PURE__ */ i(
+    N,
     {
-      title: g,
-      className: m,
+      title: f,
+      className: S,
       variant: "cta",
       error: Y,
-      currentStatus: L,
-      freeTileConfig: M(),
-      aboveProducts: l.length > 1 ? /* @__PURE__ */ c(
-        W,
+      currentStatus: j,
+      freeTileConfig: L(),
+      aboveProducts: v.length > 1 ? /* @__PURE__ */ i(
+        ee,
         {
-          options: l.map((r) => ({
-            value: r,
-            label: r.charAt(0).toUpperCase() + r.slice(1)
+          options: v.map((t) => ({
+            value: t,
+            label: t.charAt(0).toUpperCase() + t.slice(1)
           })),
-          value: S ?? l[0],
-          onChange: (r) => h(r)
+          value: y ?? v[0],
+          onChange: (t) => R(t)
         }
       ) : void 0,
-      children: $.map((r) => {
-        var x;
-        const d = n && (e == null ? void 0 : e.isActive) && e.packageId === r.package.packageId, v = R(r);
-        return /* @__PURE__ */ c(
-          Q,
+      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,
           {
-            id: r.package.packageId,
-            title: r.package.name,
-            price: ((x = r.package.product) == null ? void 0 : x.priceString) ?? "$0",
-            periodLabel: r.package.product ? `/${r.package.product.period}` : void 0,
-            features: (i == null ? void 0 : i[r.package.packageId]) ?? [],
+            id: t.package.packageId,
+            title: t.package.name,
+            price: (($ = t.package.product) == null ? void 0 : $.priceString) ?? "$0",
+            periodLabel: t.package.product ? `/${t.package.product.period}` : void 0,
+            features: (p == null ? void 0 : p[t.package.packageId]) ?? [],
             isSelected: !1,
             onSelect: () => {
             },
-            isCurrentPlan: d,
-            ctaButton: v,
-            disabled: A
+            isCurrentPlan: h,
+            ctaButton: l,
+            disabled: T
           },
-          `${r.offerId}-${r.package.packageId}`
+          `${t.offerId}-${t.package.packageId}`
         );
       })
     }
   );
 }
-function re(n, s) {
+function K(n) {
+  return n.charAt(0).toUpperCase() + n.slice(1);
+}
+const ue = {
+  weekly: "Weekly",
+  monthly: "Monthly",
+  quarterly: "Quarterly",
+  yearly: "Yearly",
+  lifetime: "Lifetime"
+};
+function de(n, s) {
   if (!n.product || !s.product) return null;
-  const f = G(n.product.period), o = G(s.product.period);
-  if (f <= 0 || o <= 0 || f === 1 / 0 || o === 1 / 0 || f === o) return null;
-  const i = n.product.price / f, u = s.product.price / o;
-  if (i <= 0) return null;
-  const g = Math.round(
-    (i - u) / i * 100
+  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
   );
-  return g > 0 ? g : null;
+  return f > 0 ? f : null;
 }
-function le({
+function ve({
   isLoggedIn: n,
   onNavigateToLogin: s,
-  userId: f,
+  userId: d,
   userEmail: o,
-  featuresByPackage: i,
+  featuresByPackage: p,
   freeFeatures: u,
-  title: g = "Choose Your Plan",
-  className: m,
-  t: P
+  title: f = "Choose Your Plan",
+  className: S,
+  t: I,
+  renderOfferingContent: v
 }) {
-  var V;
-  const l = (a, p) => P ? P(a, p) : p, {
-    offerings: k,
-    isLoading: B,
-    error: e
-  } = ee(), {
-    subscription: t,
-    isLoading: F,
-    error: T
-  } = H({ userId: f, userEmail: o }), [h, O] = I("free"), [w, A] = I(null), [E, S] = I(!1), U = ((V = k[0]) == null ? void 0 : V.offerId) ?? "", D = h !== "free" ? h : U, {
-    packages: C,
-    isLoading: M,
+  var q;
+  const g = (a, c) => I ? I(a, c) : c, {
+    offerings: P,
+    isLoading: r,
+    error: M
+  } = oe(), {
+    subscription: e,
+    isLoading: O,
     error: R
-  } = te(D), Y = B || F || M, L = e || T || R, $ = async (a, p) => {
+  } = V({ userId: d, userEmail: o }), [b, x] = C("free"), [T, k] = 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) => {
     try {
-      S(!0), A(null), await J().purchase({
+      w(!0), k(null), await X().purchase({
         packageId: a,
-        offeringId: p,
+        offeringId: c,
         customerEmail: o
-      }), await K();
-    } catch (b) {
-      A(
-        b instanceof Error ? b.message : "Purchase failed"
+      }), await Z();
+    } catch (m) {
+      k(
+        m instanceof Error ? m.message : "Purchase failed"
       );
     } finally {
-      S(!1);
+      w(!1);
     }
-  }, r = [
-    { value: "free", label: l("free", "Free") },
-    ...k.map((a) => ({
+  }, h = [
+    { value: "free", label: g("free", "Free") },
+    ...P.map((a) => ({
       value: a.offerId,
-      label: l(a.offerId, a.offerId.charAt(0).toUpperCase() + a.offerId.slice(1))
+      label: g(a.offerId, K(a.offerId))
     }))
-  ], d = C[0] ?? null, v = () => n ? (t == null ? void 0 : t.isActive) && t.packageId ? {
-    title: l("free", "Free"),
+  ], l = L[0] ?? null, $ = () => n ? (e == null ? void 0 : e.isActive) && e.packageId ? {
+    title: g("free", "Free"),
     price: "$0",
     features: u ?? [],
     ctaButton: {
       label: "Cancel Subscription",
       onClick: () => {
-        t.managementUrl && window.open(t.managementUrl, "_blank");
+        e.managementUrl && window.open(e.managementUrl, "_blank");
       }
     }
   } : {
-    title: l("free", "Free"),
+    title: g("free", "Free"),
     price: "$0",
     features: u ?? [],
     ctaButton: {
@@ -226,111 +237,103 @@ function le({
     },
     topBadge: { text: "Current Plan", color: "blue" }
   } : {
-    title: l("free", "Free"),
+    title: g("free", "Free"),
     price: "$0",
     features: u ?? [],
     ctaButton: {
       label: "Try it for Free",
       onClick: s
     }
-  }, x = (a, p) => {
-    if (!n)
-      return {
-        label: "Log in to Continue",
-        onClick: s
-      };
-    const b = (t == null ? void 0 : t.isActive) && t.packageId;
-    if ((t == null ? void 0 : t.packageId) !== a.packageId)
-      return b ? {
-        label: "Change Subscription",
-        onClick: () => $(a.packageId, p)
-      } : {
-        label: "Subscribe",
-        onClick: () => $(a.packageId, p)
-      };
+  }, 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;
+    if ((e == null ? void 0 : e.packageId) !== a.packageId)
+      return () => t(a.packageId, c);
   };
-  if (Y)
-    return /* @__PURE__ */ c(
-      y,
+  if (j)
+    return /* @__PURE__ */ i(
+      N,
       {
-        title: g,
-        className: m,
+        title: f,
+        className: S,
         variant: "cta",
-        children: /* @__PURE__ */ c("p", { children: "Loading subscription plans..." })
+        children: /* @__PURE__ */ i("p", { children: "Loading subscription plans..." })
       }
     );
-  const X = w ?? (L ? L.message : null), Z = n && (t != null && t.isActive) && t.packageId ? {
+  const ae = T ?? (D ? D.message : null), ne = n && (e != null && e.isActive) && e.packageId ? {
     isActive: !0,
     activeContent: {
       title: "Active Subscription",
       fields: [
-        ...t.productId ? [{ label: "Plan", value: t.productId }] : [],
-        ...t.expirationDate ? [
+        ...e.productId ? [{ label: "Plan", value: e.productId }] : [],
+        ...e.expirationDate ? [
           {
             label: "Expires",
-            value: t.expirationDate.toLocaleDateString()
+            value: e.expirationDate.toLocaleDateString()
           }
         ] : [],
-        ...t.willRenew !== void 0 ? [
+        ...e.willRenew !== void 0 ? [
           {
             label: "Auto-Renew",
-            value: t.willRenew ? "Yes" : "No"
+            value: e.willRenew ? "Yes" : "No"
           }
         ] : []
       ]
     }
-  } : void 0, _ = h === "free";
-  return /* @__PURE__ */ c(
-    y,
+  } : void 0, _ = b === "free";
+  return /* @__PURE__ */ i(
+    N,
     {
-      title: g,
-      className: m,
+      title: f,
+      className: S,
       variant: "cta",
-      error: X,
-      currentStatus: Z,
-      freeTileConfig: _ ? v() : void 0,
-      aboveProducts: r.length > 1 ? /* @__PURE__ */ c("div", { className: "flex justify-center", children: /* @__PURE__ */ c(
-        W,
+      error: ae,
+      currentStatus: ne,
+      freeTileConfig: _ ? $() : void 0,
+      aboveProducts: h.length > 1 ? /* @__PURE__ */ i("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ i(
+        ee,
         {
-          options: r,
-          value: h,
-          onChange: O
+          options: h,
+          value: b,
+          onChange: x
         }
       ) }) : void 0,
-      children: !_ && C.map((a) => {
-        var q;
-        const p = n && (t == null ? void 0 : t.isActive) && t.packageId === a.packageId, b = x(a, h);
-        let j;
-        if (d && a.packageId !== d.packageId) {
-          const z = re(d, a);
-          z !== null && (j = {
-            text: `Save ${z}%`,
-            isBestValue: a === C[C.length - 1]
-          });
-        }
-        return /* @__PURE__ */ c(
-          Q,
-          {
-            id: a.packageId,
-            title: a.name,
-            price: ((q = a.product) == null ? void 0 : q.priceString) ?? "$0",
-            periodLabel: a.product ? `/${a.product.period}` : void 0,
-            features: (i == null ? void 0 : i[a.packageId]) ?? [],
-            isSelected: !1,
-            onSelect: () => {
+      children: !_ && /* @__PURE__ */ F("div", { className: "col-span-full space-y-6", children: [
+        v && /* @__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: v(b) }),
+        /* @__PURE__ */ i("div", { className: "space-y-3", children: L.map((a) => {
+          var G, H;
+          const c = (G = a.product) == null ? void 0 : G.period, m = 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__ */ F(
+            "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"),
+              children: [
+                /* @__PURE__ */ F("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ i("p", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: m }),
+                  z !== null ? /* @__PURE__ */ F("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
+                ] }),
+                /* @__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}`
+                  }
+                )
+              ]
             },
-            isCurrentPlan: p,
-            ctaButton: b,
-            disabled: E,
-            discountBadge: j
-          },
-          a.packageId
-        );
-      })
+            a.packageId
+          );
+        }) })
+      ] })
     }
   );
 }
 export {
-  oe as SubscriptionByDurationPage,
-  le as SubscriptionByOfferPage
+  he as SubscriptionByDurationPage,
+  ve as SubscriptionByOfferPage
 };

package/dist/pages/SubscriptionByOfferPage.d.ts

@@ -1,11 +1,4 @@
-/**
- * SubscriptionByOfferPage
- *
- * Subscription page that organizes packages by offering.
- * Uses a SegmentedControl to switch between offerings (with a 'Free' option).
- * Packages within each offer are sorted by duration (short to long).
- * Savings are calculated relative to the shortest duration package.
- */
+import { default as React } from 'react';
 export interface SubscriptionByOfferPageProps {
     /** Whether the user is logged in */
     isLoggedIn: boolean;
@@ -24,10 +17,17 @@ export interface SubscriptionByOfferPageProps {
     /** Additional CSS classes */
     className?: string;
     /**
-     * Translation function for localizing offer names and labels.
-     * Keys passed: offer identifiers (e.g. "basic", "premium"), "free".
+     * Translation function for localizing offer names, period labels, etc.
+     * Keys passed: offer identifiers (e.g. "basic", "premium"), "free",
+     * period names (e.g. "monthly", "yearly").
      * Falls back to the fallback string if not provided.
      */
     t?: (key: string, fallback: string) => string;
+    /**
+     * Render content describing what an offering includes.
+     * Called with the offering identifier (e.g. "basic", "premium").
+     * Return a list of strings or React elements shown in a styled container.
+     */
+    renderOfferingContent?: (offerId: string) => React.ReactNode;
 }
-export declare function SubscriptionByOfferPage({ isLoggedIn, onNavigateToLogin, userId, userEmail, featuresByPackage, freeFeatures, title, className, t: translate, }: SubscriptionByOfferPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubscriptionByOfferPage({ isLoggedIn, onNavigateToLogin, userId, userEmail, featuresByPackage: _featuresByPackage, freeFeatures, title, className, t: translate, renderOfferingContent, }: SubscriptionByOfferPageProps): import("react/jsx-runtime").JSX.Element;

package/package.json

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