@sudobility/subscription_pages 0.0.2 → 0.0.4

package/dist/index.js

@@ -1,44 +1,44 @@
-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",
+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: d,
+  userEmail: o,
+  featuresByPackage: p,
+  freeFeatures: u,
+  title: f = "Choose Your Plan",
   className: S
 }) {
   const {
-    packagesByDuration: m,
-    availableDurations: p,
-    isLoading: O,
-    error: e
-  } = M(), {
+    packagesByDuration: I,
+    availableDurations: v,
+    isLoading: g,
+    error: P
+  } = ce(), {
     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) => {
+    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 {
-      A(!0), k(null), await G().purchase({
+      k(!0), x(null), await X().purchase({
         packageId: t,
-        offeringId: u,
-        customerEmail: b
-      }), await H();
-    } catch (c) {
-      k(
-        c instanceof Error ? c.message : "Purchase failed"
+        offeringId: h,
+        customerEmail: o
+      }), await Z();
+    } catch (l) {
+      x(
+        l instanceof Error ? l.message : "Purchase failed"
       );
     } finally {
-      A(!1);
+      k(!1);
     }
-  }, Y = () => i ? (r == null ? void 0 : r.isActive) && r.packageId ? {
+  }, L = () => n ? (r == null ? void 0 : r.isActive) && r.packageId ? {
     title: "Free",
     price: "$0",
-    features: l ?? [],
+    features: u ?? [],
     ctaButton: {
       label: "Cancel Subscription",
       onClick: () => {
@@ -48,7 +48,7 @@ function ee({
   } : {
     title: "Free",
     price: "$0",
-    features: l ?? [],
+    features: u ?? [],
     ctaButton: {
       label: "Current Plan"
     },
@@ -56,38 +56,38 @@ function ee({
   } : {
     title: "Free",
     price: "$0",
-    features: l ?? [],
+    features: u ?? [],
     ctaButton: {
       label: "Try it for Free",
-      onClick: v
+      onClick: s
     }
-  }, L = (t) => {
-    if (!i)
+  }, U = (t) => {
+    if (!n)
       return {
         label: "Log in to Continue",
-        onClick: v
+        onClick: s
       };
-    const u = (r == null ? void 0 : r.isActive) && r.packageId;
+    const h = (r == null ? void 0 : r.isActive) && r.packageId;
     if ((r == null ? void 0 : r.packageId) !== t.package.packageId)
-      return u ? {
+      return h ? {
         label: "Change Subscription",
-        onClick: () => D(t.package.packageId, t.offerId)
+        onClick: () => E(t.package.packageId, t.offerId)
       } : {
         label: "Subscribe",
-        onClick: () => D(t.package.packageId, t.offerId)
+        onClick: () => E(t.package.packageId, t.offerId)
       };
   };
-  if (U)
-    return /* @__PURE__ */ n(
-      F,
+  if (w)
+    return /* @__PURE__ */ i(
+      N,
       {
-        title: C,
+        title: f,
         className: S,
         variant: "cta",
-        children: /* @__PURE__ */ n("p", { children: "Loading subscription plans..." })
+        children: /* @__PURE__ */ i("p", { children: "Loading subscription plans..." })
       }
     );
-  const $ = P ?? (E ? E.message : null), x = i && (r != null && r.isActive) && r.packageId ? {
+  const Y = b ?? (A ? A.message : null), j = n && (r != null && r.isActive) && r.packageId ? {
     isActive: !0,
     activeContent: {
       title: "Active Subscription",
@@ -107,44 +107,44 @@ function ee({
         ] : []
       ]
     }
-  } : void 0, _ = h ? m[h] ?? [] : [];
-  return /* @__PURE__ */ n(
-    F,
+  } : void 0, D = y ? I[y] ?? [] : [];
+  return /* @__PURE__ */ i(
+    N,
     {
-      title: C,
+      title: f,
       className: S,
       variant: "cta",
-      error: $,
-      currentStatus: x,
-      freeTileConfig: Y(),
-      aboveProducts: p.length > 1 ? /* @__PURE__ */ n(
-        K,
+      error: Y,
+      currentStatus: j,
+      freeTileConfig: L(),
+      aboveProducts: v.length > 1 ? /* @__PURE__ */ i(
+        ee,
         {
-          options: p.map((t) => ({
+          options: v.map((t) => ({
             value: t,
             label: t.charAt(0).toUpperCase() + t.slice(1)
           })),
-          value: h ?? p[0],
+          value: y ?? v[0],
           onChange: (t) => R(t)
         }
       ) : 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: 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: t.package.packageId,
             title: t.package.name,
-            price: ((I = t.package.product) == null ? void 0 : I.priceString) ?? "$0",
+            price: (($ = t.package.product) == null ? void 0 : $.priceString) ?? "$0",
             periodLabel: t.package.product ? `/${t.package.product.period}` : void 0,
-            features: (o == null ? void 0 : o[t.package.packageId]) ?? [],
+            features: (p == null ? void 0 : p[t.package.packageId]) ?? [],
             isSelected: !1,
             onSelect: () => {
             },
-            isCurrentPlan: u,
-            ctaButton: c,
-            disabled: w
+            isCurrentPlan: h,
+            ctaButton: l,
+            disabled: T
           },
           `${t.offerId}-${t.package.packageId}`
         );
@@ -152,53 +152,76 @@ function ee({
     }
   );
 }
-function re({
-  isLoggedIn: i,
-  onNavigateToLogin: v,
-  userId: y,
-  userEmail: b,
-  featuresByPackage: o,
-  freeFeatures: l,
-  title: C = "Choose Your Plan",
-  className: 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 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 f > 0 ? f : null;
+}
+function ve({
+  isLoggedIn: n,
+  onNavigateToLogin: s,
+  userId: d,
+  userEmail: o,
+  featuresByPackage: p,
+  freeFeatures: u,
+  title: f = "Choose Your Plan",
+  className: S,
+  t: I,
+  renderOfferingContent: v
 }) {
   var q;
-  const {
-    offerings: m,
-    isLoading: p,
-    error: O
-  } = Q(), {
-    subscription: e,
+  const g = (a, c) => I ? I(a, c) : c, {
+    offerings: P,
     isLoading: r,
-    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) => {
+    error: M
+  } = oe(), {
+    subscription: e,
+    isLoading: O,
+    error: R
+  } = 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 {
-      w(!0), P(null), await G().purchase({
+      w(!0), k(null), await X().purchase({
         packageId: a,
-        offeringId: f,
-        customerEmail: b
-      }), await H();
-    } catch (d) {
-      P(
-        d instanceof Error ? d.message : "Purchase failed"
+        offeringId: c,
+        customerEmail: o
+      }), await Z();
+    } catch (m) {
+      k(
+        m instanceof Error ? m.message : "Purchase failed"
       );
     } finally {
       w(!1);
     }
-  }, x = [
-    { value: "free", label: "Free" },
-    ...m.map((a) => ({
+  }, h = [
+    { value: "free", label: g("free", "Free") },
+    ...P.map((a) => ({
       value: a.offerId,
-      label: a.offerId
+      label: g(a.offerId, K(a.offerId))
     }))
-  ], _ = () => i ? (e == null ? void 0 : e.isActive) && e.packageId ? {
-    title: "Free",
+  ], l = L[0] ?? null, $ = () => n ? (e == null ? void 0 : e.isActive) && e.packageId ? {
+    title: g("free", "Free"),
     price: "$0",
-    features: l ?? [],
+    features: u ?? [],
     ctaButton: {
       label: "Cancel Subscription",
       onClick: () => {
@@ -206,48 +229,37 @@ function re({
       }
     }
   } : {
-    title: "Free",
+    title: g("free", "Free"),
     price: "$0",
-    features: l ?? [],
+    features: u ?? [],
     ctaButton: {
       label: "Current Plan"
     },
     topBadge: { text: "Current Plan", color: "blue" }
   } : {
-    title: "Free",
+    title: g("free", "Free"),
     price: "$0",
-    features: l ?? [],
+    features: u ?? [],
     ctaButton: {
       label: "Try it for Free",
-      onClick: v
+      onClick: s
     }
-  }, t = (a, f) => {
-    if (!i)
-      return {
-        label: "Log in to Continue",
-        onClick: v
-      };
-    const d = (e == null ? void 0 : e.isActive) && e.packageId;
+  }, 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 d ? {
-        label: "Change Subscription",
-        onClick: () => $(a.packageId, f)
-      } : {
-        label: "Subscribe",
-        onClick: () => $(a.packageId, f)
-      };
+      return () => t(a.packageId, c);
   };
-  if (Y)
-    return /* @__PURE__ */ n(
-      F,
+  if (j)
+    return /* @__PURE__ */ i(
+      N,
       {
-        title: C,
+        title: f,
         className: S,
         variant: "cta",
-        children: /* @__PURE__ */ n("p", { children: "Loading subscription plans..." })
+        children: /* @__PURE__ */ i("p", { children: "Loading subscription plans..." })
       }
     );
-  const u = R ?? (L ? L.message : null), c = i && (e != null && e.isActive) && e.packageId ? {
+  const ae = T ?? (D ? D.message : null), ne = n && (e != null && e.isActive) && e.packageId ? {
     isActive: !0,
     activeContent: {
       title: "Active Subscription",
@@ -267,49 +279,61 @@ function re({
         ] : []
       ]
     }
-  } : void 0, I = s === "free";
-  return /* @__PURE__ */ n(
-    F,
+  } : void 0, _ = b === "free";
+  return /* @__PURE__ */ i(
+    N,
     {
-      title: C,
+      title: f,
       className: S,
       variant: "cta",
-      error: u,
-      currentStatus: c,
-      freeTileConfig: I ? _() : void 0,
-      aboveProducts: x.length > 1 ? /* @__PURE__ */ n(
-        K,
+      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: x,
-          value: s,
-          onChange: B
+          options: h,
+          value: b,
+          onChange: x
         }
-      ) : 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,
-          {
-            id: a.packageId,
-            title: a.name,
-            price: ((j = a.product) == null ? void 0 : j.priceString) ?? "$0",
-            periodLabel: a.product ? `/${a.product.period}` : void 0,
-            features: (o == null ? void 0 : o[a.packageId]) ?? [],
-            isSelected: !1,
-            onSelect: () => {
+      ) }) : void 0,
+      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: f,
-            ctaButton: d,
-            disabled: k
-          },
-          a.packageId
-        );
-      })
+            a.packageId
+          );
+        }) })
+      ] })
     }
   );
 }
 export {
-  ee as SubscriptionByDurationPage,
-  re as SubscriptionByOfferPage
+  he as SubscriptionByDurationPage,
+  ve as SubscriptionByOfferPage
 };

package/dist/pages/SubscriptionByOfferPage.d.ts

@@ -1,9 +1,4 @@
-/**
- * SubscriptionByOfferPage
- *
- * Subscription page that organizes packages by offering.
- * Uses a SegmentedControl to switch between offerings (with a 'Free' option).
- */
+import { default as React } from 'react';
 export interface SubscriptionByOfferPageProps {
     /** Whether the user is logged in */
     isLoggedIn: boolean;
@@ -21,5 +16,18 @@ export interface SubscriptionByOfferPageProps {
     title?: string;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * 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, }: 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.2",
+  "version": "0.0.4",
   "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",