@sudobility/subscription_pages 0.0.2 → 0.0.3

package/dist/index.js

@@ -1,54 +1,54 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useState as g } from "react";
-import { usePackagesByDuration as M, useUserSubscription as z, getSubscriptionInstance as G, refreshSubscription as H, useAllOfferings as Q, useOfferingPackages as V } from "@sudobility/subscription_lib";
-import { SubscriptionLayout as F, SubscriptionTile as J, SegmentedControl as K } from "@sudobility/subscription-components";
-function ee({
-  isLoggedIn: i,
-  onNavigateToLogin: v,
-  userId: y,
-  userEmail: b,
-  featuresByPackage: o,
-  freeFeatures: l,
-  title: C = "Choose Your Plan",
-  className: S
+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({
+  isLoggedIn: n,
+  onNavigateToLogin: s,
+  userId: f,
+  userEmail: o,
+  featuresByPackage: i,
+  freeFeatures: u,
+  title: g = "Choose Your Plan",
+  className: m
 }) {
   const {
-    packagesByDuration: m,
-    availableDurations: p,
-    isLoading: O,
-    error: e
-  } = M(), {
-    subscription: r,
-    isLoading: T,
-    error: s
-  } = z({ userId: y, userEmail: b }), [B, R] = g(null), [P, k] = g(null), [w, A] = g(!1), h = B ?? p[0] ?? null, U = O || T, E = e || s, D = async (t, u) => {
+    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) => {
     try {
-      A(!0), k(null), await G().purchase({
-        packageId: t,
-        offeringId: u,
-        customerEmail: b
-      }), await H();
-    } catch (c) {
-      k(
-        c instanceof Error ? c.message : "Purchase failed"
+      E(!0), w(null), await J().purchase({
+        packageId: r,
+        offeringId: d,
+        customerEmail: o
+      }), await K();
+    } catch (v) {
+      w(
+        v instanceof Error ? v.message : "Purchase failed"
       );
     } finally {
-      A(!1);
+      E(!1);
     }
-  }, Y = () => i ? (r == null ? void 0 : r.isActive) && r.packageId ? {
+  }, M = () => n ? (e == null ? void 0 : e.isActive) && e.packageId ? {
     title: "Free",
     price: "$0",
-    features: l ?? [],
+    features: u ?? [],
     ctaButton: {
       label: "Cancel Subscription",
       onClick: () => {
-        r.managementUrl && window.open(r.managementUrl, "_blank");
+        e.managementUrl && window.open(e.managementUrl, "_blank");
       }
     }
   } : {
     title: "Free",
     price: "$0",
-    features: l ?? [],
+    features: u ?? [],
     ctaButton: {
       label: "Current Plan"
     },
@@ -56,252 +56,273 @@ function ee({
   } : {
     title: "Free",
     price: "$0",
-    features: l ?? [],
+    features: u ?? [],
     ctaButton: {
       label: "Try it for Free",
-      onClick: v
+      onClick: s
     }
-  }, L = (t) => {
-    if (!i)
+  }, R = (r) => {
+    if (!n)
       return {
         label: "Log in to Continue",
-        onClick: v
+        onClick: s
       };
-    const u = (r == null ? void 0 : r.isActive) && r.packageId;
-    if ((r == null ? void 0 : r.packageId) !== t.package.packageId)
-      return u ? {
+    const d = (e == null ? void 0 : e.isActive) && e.packageId;
+    if ((e == null ? void 0 : e.packageId) !== r.package.packageId)
+      return d ? {
         label: "Change Subscription",
-        onClick: () => D(t.package.packageId, t.offerId)
+        onClick: () => C(r.package.packageId, r.offerId)
       } : {
         label: "Subscribe",
-        onClick: () => D(t.package.packageId, t.offerId)
+        onClick: () => C(r.package.packageId, r.offerId)
       };
   };
   if (U)
-    return /* @__PURE__ */ n(
-      F,
+    return /* @__PURE__ */ c(
+      y,
       {
-        title: C,
-        className: S,
+        title: g,
+        className: m,
         variant: "cta",
-        children: /* @__PURE__ */ n("p", { children: "Loading subscription plans..." })
+        children: /* @__PURE__ */ c("p", { children: "Loading subscription plans..." })
       }
     );
-  const $ = P ?? (E ? E.message : null), x = i && (r != null && r.isActive) && r.packageId ? {
+  const Y = O ?? (D ? D.message : null), L = n && (e != null && e.isActive) && e.packageId ? {
     isActive: !0,
     activeContent: {
       title: "Active Subscription",
       fields: [
-        ...r.productId ? [{ label: "Plan", value: r.productId }] : [],
-        ...r.expirationDate ? [
+        ...e.productId ? [{ label: "Plan", value: e.productId }] : [],
+        ...e.expirationDate ? [
           {
             label: "Expires",
-            value: r.expirationDate.toLocaleDateString()
+            value: e.expirationDate.toLocaleDateString()
           }
         ] : [],
-        ...r.willRenew !== void 0 ? [
+        ...e.willRenew !== void 0 ? [
           {
             label: "Auto-Renew",
-            value: r.willRenew ? "Yes" : "No"
+            value: e.willRenew ? "Yes" : "No"
           }
         ] : []
       ]
     }
-  } : void 0, _ = h ? m[h] ?? [] : [];
-  return /* @__PURE__ */ n(
-    F,
+  } : void 0, $ = S ? P[S] ?? [] : [];
+  return /* @__PURE__ */ c(
+    y,
     {
-      title: C,
-      className: S,
+      title: g,
+      className: m,
       variant: "cta",
-      error: $,
-      currentStatus: x,
-      freeTileConfig: Y(),
-      aboveProducts: p.length > 1 ? /* @__PURE__ */ n(
-        K,
+      error: Y,
+      currentStatus: L,
+      freeTileConfig: M(),
+      aboveProducts: l.length > 1 ? /* @__PURE__ */ c(
+        W,
         {
-          options: p.map((t) => ({
-            value: t,
-            label: t.charAt(0).toUpperCase() + t.slice(1)
+          options: l.map((r) => ({
+            value: r,
+            label: r.charAt(0).toUpperCase() + r.slice(1)
           })),
-          value: h ?? p[0],
-          onChange: (t) => R(t)
+          value: S ?? l[0],
+          onChange: (r) => h(r)
         }
       ) : void 0,
-      children: _.map((t) => {
-        var I;
-        const u = i && (r == null ? void 0 : r.isActive) && r.packageId === t.package.packageId, c = L(t);
-        return /* @__PURE__ */ n(
-          J,
+      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,
           {
-            id: t.package.packageId,
-            title: t.package.name,
-            price: ((I = t.package.product) == null ? void 0 : I.priceString) ?? "$0",
-            periodLabel: t.package.product ? `/${t.package.product.period}` : void 0,
-            features: (o == null ? void 0 : o[t.package.packageId]) ?? [],
+            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]) ?? [],
             isSelected: !1,
             onSelect: () => {
             },
-            isCurrentPlan: u,
-            ctaButton: c,
-            disabled: w
+            isCurrentPlan: d,
+            ctaButton: v,
+            disabled: A
           },
-          `${t.offerId}-${t.package.packageId}`
+          `${r.offerId}-${r.package.packageId}`
         );
       })
     }
   );
 }
-function re({
-  isLoggedIn: i,
-  onNavigateToLogin: v,
-  userId: y,
-  userEmail: b,
-  featuresByPackage: o,
-  freeFeatures: l,
-  title: C = "Choose Your Plan",
-  className: S
+function re(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
+  );
+  return g > 0 ? g : null;
+}
+function le({
+  isLoggedIn: n,
+  onNavigateToLogin: s,
+  userId: f,
+  userEmail: o,
+  featuresByPackage: i,
+  freeFeatures: u,
+  title: g = "Choose Your Plan",
+  className: m,
+  t: P
 }) {
-  var q;
-  const {
-    offerings: m,
-    isLoading: p,
-    error: O
-  } = Q(), {
-    subscription: e,
-    isLoading: r,
+  var V;
+  const l = (a, p) => P ? P(a, p) : p, {
+    offerings: k,
+    isLoading: B,
+    error: e
+  } = ee(), {
+    subscription: t,
+    isLoading: F,
     error: T
-  } = z({ userId: y, userEmail: b }), [s, B] = g("free"), [R, P] = g(null), [k, w] = g(!1), A = ((q = m[0]) == null ? void 0 : q.offerId) ?? "", h = s !== "free" ? s : A, {
-    packages: U,
-    isLoading: E,
-    error: D
-  } = V(h), Y = p || r || E, L = O || T || D, $ = async (a, f) => {
+  } = 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,
+    error: R
+  } = te(D), Y = B || F || M, L = e || T || R, $ = async (a, p) => {
     try {
-      w(!0), P(null), await G().purchase({
+      S(!0), A(null), await J().purchase({
         packageId: a,
-        offeringId: f,
-        customerEmail: b
-      }), await H();
-    } catch (d) {
-      P(
-        d instanceof Error ? d.message : "Purchase failed"
+        offeringId: p,
+        customerEmail: o
+      }), await K();
+    } catch (b) {
+      A(
+        b instanceof Error ? b.message : "Purchase failed"
       );
     } finally {
-      w(!1);
+      S(!1);
     }
-  }, x = [
-    { value: "free", label: "Free" },
-    ...m.map((a) => ({
+  }, r = [
+    { value: "free", label: l("free", "Free") },
+    ...k.map((a) => ({
       value: a.offerId,
-      label: a.offerId
+      label: l(a.offerId, a.offerId.charAt(0).toUpperCase() + a.offerId.slice(1))
     }))
-  ], _ = () => i ? (e == null ? void 0 : e.isActive) && e.packageId ? {
-    title: "Free",
+  ], d = C[0] ?? null, v = () => n ? (t == null ? void 0 : t.isActive) && t.packageId ? {
+    title: l("free", "Free"),
     price: "$0",
-    features: l ?? [],
+    features: u ?? [],
     ctaButton: {
       label: "Cancel Subscription",
       onClick: () => {
-        e.managementUrl && window.open(e.managementUrl, "_blank");
+        t.managementUrl && window.open(t.managementUrl, "_blank");
       }
     }
   } : {
-    title: "Free",
+    title: l("free", "Free"),
     price: "$0",
-    features: l ?? [],
+    features: u ?? [],
     ctaButton: {
       label: "Current Plan"
     },
     topBadge: { text: "Current Plan", color: "blue" }
   } : {
-    title: "Free",
+    title: l("free", "Free"),
     price: "$0",
-    features: l ?? [],
+    features: u ?? [],
     ctaButton: {
       label: "Try it for Free",
-      onClick: v
+      onClick: s
     }
-  }, t = (a, f) => {
-    if (!i)
+  }, x = (a, p) => {
+    if (!n)
       return {
         label: "Log in to Continue",
-        onClick: v
+        onClick: s
       };
-    const d = (e == null ? void 0 : e.isActive) && e.packageId;
-    if ((e == null ? void 0 : e.packageId) !== a.packageId)
-      return d ? {
+    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, f)
+        onClick: () => $(a.packageId, p)
       } : {
         label: "Subscribe",
-        onClick: () => $(a.packageId, f)
+        onClick: () => $(a.packageId, p)
       };
   };
   if (Y)
-    return /* @__PURE__ */ n(
-      F,
+    return /* @__PURE__ */ c(
+      y,
       {
-        title: C,
-        className: S,
+        title: g,
+        className: m,
         variant: "cta",
-        children: /* @__PURE__ */ n("p", { children: "Loading subscription plans..." })
+        children: /* @__PURE__ */ c("p", { children: "Loading subscription plans..." })
       }
     );
-  const u = R ?? (L ? L.message : null), c = i && (e != null && e.isActive) && e.packageId ? {
+  const X = w ?? (L ? L.message : null), Z = n && (t != null && t.isActive) && t.packageId ? {
     isActive: !0,
     activeContent: {
       title: "Active Subscription",
       fields: [
-        ...e.productId ? [{ label: "Plan", value: e.productId }] : [],
-        ...e.expirationDate ? [
+        ...t.productId ? [{ label: "Plan", value: t.productId }] : [],
+        ...t.expirationDate ? [
           {
             label: "Expires",
-            value: e.expirationDate.toLocaleDateString()
+            value: t.expirationDate.toLocaleDateString()
           }
         ] : [],
-        ...e.willRenew !== void 0 ? [
+        ...t.willRenew !== void 0 ? [
           {
             label: "Auto-Renew",
-            value: e.willRenew ? "Yes" : "No"
+            value: t.willRenew ? "Yes" : "No"
           }
         ] : []
       ]
     }
-  } : void 0, I = s === "free";
-  return /* @__PURE__ */ n(
-    F,
+  } : void 0, _ = h === "free";
+  return /* @__PURE__ */ c(
+    y,
     {
-      title: C,
-      className: S,
+      title: g,
+      className: m,
       variant: "cta",
-      error: u,
-      currentStatus: c,
-      freeTileConfig: I ? _() : void 0,
-      aboveProducts: x.length > 1 ? /* @__PURE__ */ n(
-        K,
+      error: X,
+      currentStatus: Z,
+      freeTileConfig: _ ? v() : void 0,
+      aboveProducts: r.length > 1 ? /* @__PURE__ */ c("div", { className: "flex justify-center", children: /* @__PURE__ */ c(
+        W,
         {
-          options: x,
-          value: s,
-          onChange: B
+          options: r,
+          value: h,
+          onChange: O
         }
-      ) : void 0,
-      children: !I && U.map((a) => {
-        var j;
-        const f = i && (e == null ? void 0 : e.isActive) && e.packageId === a.packageId, d = t(a, s);
-        return /* @__PURE__ */ n(
-          J,
+      ) }) : 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: ((j = a.product) == null ? void 0 : j.priceString) ?? "$0",
+            price: ((q = a.product) == null ? void 0 : q.priceString) ?? "$0",
             periodLabel: a.product ? `/${a.product.period}` : void 0,
-            features: (o == null ? void 0 : o[a.packageId]) ?? [],
+            features: (i == null ? void 0 : i[a.packageId]) ?? [],
             isSelected: !1,
             onSelect: () => {
             },
-            isCurrentPlan: f,
-            ctaButton: d,
-            disabled: k
+            isCurrentPlan: p,
+            ctaButton: b,
+            disabled: E,
+            discountBadge: j
           },
           a.packageId
         );
@@ -310,6 +331,6 @@ function re({
   );
 }
 export {
-  ee as SubscriptionByDurationPage,
-  re as SubscriptionByOfferPage
+  oe as SubscriptionByDurationPage,
+  le as SubscriptionByOfferPage
 };

package/dist/pages/SubscriptionByOfferPage.d.ts

@@ -3,6 +3,8 @@
  *
  * 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.
  */
 export interface SubscriptionByOfferPageProps {
     /** Whether the user is logged in */
@@ -21,5 +23,11 @@ export interface SubscriptionByOfferPageProps {
     title?: string;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * Translation function for localizing offer names and labels.
+     * Keys passed: offer identifiers (e.g. "basic", "premium"), "free".
+     * Falls back to the fallback string if not provided.
+     */
+    t?: (key: string, fallback: string) => string;
 }
-export declare function SubscriptionByOfferPage({ isLoggedIn, onNavigateToLogin, userId, userEmail, featuresByPackage, freeFeatures, title, className, }: SubscriptionByOfferPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubscriptionByOfferPage({ isLoggedIn, onNavigateToLogin, userId, userEmail, featuresByPackage, freeFeatures, title, className, t: translate, }: SubscriptionByOfferPageProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/subscription_pages",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "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.25",
+    "@sudobility/subscription_lib": "^0.0.26",
     "@sudobility/subscription-components": "^1.0.27",
     "@sudobility/types": "^1.9.58"
   },
   "devDependencies": {
     "@sudobility/subscription-components": "^1.0.27",
-    "@sudobility/subscription_lib": "^0.0.25",
+    "@sudobility/subscription_lib": "^0.0.26",
     "@sudobility/types": "^1.9.58",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",