@sudobility/subscription_pages 0.0.2

package/README.md

@@ -0,0 +1,97 @@
+# @sudobility/subscription_pages
+
+Subscription page components for React web applications.
+
+## Installation
+
+```bash
+bun add @sudobility/subscription_pages
+```
+
+## Usage
+
+```tsx
+import {
+  SubscriptionByDurationPage,
+  SubscriptionByOfferPage,
+} from '@sudobility/subscription_pages';
+
+// Duration-based: tabs for monthly/yearly
+<SubscriptionByDurationPage
+  isLoggedIn={!!user}
+  onNavigateToLogin={() => navigate('/login')}
+  userId={user?.uid}
+  userEmail={user?.email}
+  featuresByPackage={{
+    pro_monthly: ['Unlimited projects', 'Priority support'],
+    pro_yearly: ['Unlimited projects', 'Priority support', 'Save 20%'],
+  }}
+  freeFeatures={['3 projects', 'Community support']}
+/>
+
+// Offer-based: tabs for free/basic/premium
+<SubscriptionByOfferPage
+  isLoggedIn={!!user}
+  onNavigateToLogin={() => navigate('/login')}
+  userId={user?.uid}
+  userEmail={user?.email}
+  featuresByPackage={{
+    basic_monthly: ['10 projects'],
+    premium_monthly: ['Unlimited projects', 'Priority support'],
+  }}
+  freeFeatures={['3 projects']}
+/>
+```
+
+## API
+
+### SubscriptionByDurationPage
+
+Groups packages by billing period (monthly, yearly, etc.) with a segmented control to switch.
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `isLoggedIn` | `boolean` | Yes | Whether user is logged in |
+| `onNavigateToLogin` | `() => void` | Yes | Login navigation callback |
+| `userId` | `string` | No | User ID for subscription lookup |
+| `userEmail` | `string` | No | User email for purchase operations |
+| `featuresByPackage` | `Record<string, string[]>` | No | Features per package ID |
+| `freeFeatures` | `string[]` | No | Features for the free tier |
+| `title` | `string` | No | Page title (default: "Choose Your Plan") |
+| `className` | `string` | No | Additional CSS classes |
+
+### SubscriptionByOfferPage
+
+Organizes packages by offering with a segmented control (Free, then each offering).
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `isLoggedIn` | `boolean` | Yes | Whether user is logged in |
+| `onNavigateToLogin` | `() => void` | Yes | Login navigation callback |
+| `userId` | `string` | No | User ID for subscription lookup |
+| `userEmail` | `string` | No | User email for purchase operations |
+| `featuresByPackage` | `Record<string, string[]>` | No | Features per package ID |
+| `freeFeatures` | `string[]` | No | Features for the free tier |
+| `title` | `string` | No | Page title (default: "Choose Your Plan") |
+| `className` | `string` | No | Additional CSS classes |
+
+## Peer Dependencies
+
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
+- `@sudobility/subscription_lib` >= 0.0.25
+- `@sudobility/subscription-components` >= 1.0.27
+- `@sudobility/types` >= 1.9.58
+
+## Development
+
+```bash
+bun run build        # Build to dist/
+bun run type-check   # TypeScript check (note: hyphenated)
+bun run lint         # ESLint
+bun test             # Run tests
+```
+
+## License
+
+BUSL-1.1

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { SubscriptionByDurationPage, type SubscriptionByDurationPageProps, SubscriptionByOfferPage, type SubscriptionByOfferPageProps, } from './pages';

package/dist/index.js

@@ -0,0 +1,315 @@
+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
+}) {
+  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) => {
+    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"
+      );
+    } finally {
+      A(!1);
+    }
+  }, Y = () => i ? (r == null ? void 0 : r.isActive) && r.packageId ? {
+    title: "Free",
+    price: "$0",
+    features: l ?? [],
+    ctaButton: {
+      label: "Cancel Subscription",
+      onClick: () => {
+        r.managementUrl && window.open(r.managementUrl, "_blank");
+      }
+    }
+  } : {
+    title: "Free",
+    price: "$0",
+    features: l ?? [],
+    ctaButton: {
+      label: "Current Plan"
+    },
+    topBadge: { text: "Current Plan", color: "blue" }
+  } : {
+    title: "Free",
+    price: "$0",
+    features: l ?? [],
+    ctaButton: {
+      label: "Try it for Free",
+      onClick: v
+    }
+  }, L = (t) => {
+    if (!i)
+      return {
+        label: "Log in to Continue",
+        onClick: v
+      };
+    const u = (r == null ? void 0 : r.isActive) && r.packageId;
+    if ((r == null ? void 0 : r.packageId) !== t.package.packageId)
+      return u ? {
+        label: "Change Subscription",
+        onClick: () => D(t.package.packageId, t.offerId)
+      } : {
+        label: "Subscribe",
+        onClick: () => D(t.package.packageId, t.offerId)
+      };
+  };
+  if (U)
+    return /* @__PURE__ */ n(
+      F,
+      {
+        title: C,
+        className: S,
+        variant: "cta",
+        children: /* @__PURE__ */ n("p", { children: "Loading subscription plans..." })
+      }
+    );
+  const $ = P ?? (E ? E.message : null), x = i && (r != null && r.isActive) && r.packageId ? {
+    isActive: !0,
+    activeContent: {
+      title: "Active Subscription",
+      fields: [
+        ...r.productId ? [{ label: "Plan", value: r.productId }] : [],
+        ...r.expirationDate ? [
+          {
+            label: "Expires",
+            value: r.expirationDate.toLocaleDateString()
+          }
+        ] : [],
+        ...r.willRenew !== void 0 ? [
+          {
+            label: "Auto-Renew",
+            value: r.willRenew ? "Yes" : "No"
+          }
+        ] : []
+      ]
+    }
+  } : void 0, _ = h ? m[h] ?? [] : [];
+  return /* @__PURE__ */ n(
+    F,
+    {
+      title: C,
+      className: S,
+      variant: "cta",
+      error: $,
+      currentStatus: x,
+      freeTileConfig: Y(),
+      aboveProducts: p.length > 1 ? /* @__PURE__ */ n(
+        K,
+        {
+          options: p.map((t) => ({
+            value: t,
+            label: t.charAt(0).toUpperCase() + t.slice(1)
+          })),
+          value: h ?? p[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,
+          {
+            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]) ?? [],
+            isSelected: !1,
+            onSelect: () => {
+            },
+            isCurrentPlan: u,
+            ctaButton: c,
+            disabled: w
+          },
+          `${t.offerId}-${t.package.packageId}`
+        );
+      })
+    }
+  );
+}
+function re({
+  isLoggedIn: i,
+  onNavigateToLogin: v,
+  userId: y,
+  userEmail: b,
+  featuresByPackage: o,
+  freeFeatures: l,
+  title: C = "Choose Your Plan",
+  className: S
+}) {
+  var q;
+  const {
+    offerings: m,
+    isLoading: p,
+    error: O
+  } = Q(), {
+    subscription: e,
+    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) => {
+    try {
+      w(!0), P(null), await G().purchase({
+        packageId: a,
+        offeringId: f,
+        customerEmail: b
+      }), await H();
+    } catch (d) {
+      P(
+        d instanceof Error ? d.message : "Purchase failed"
+      );
+    } finally {
+      w(!1);
+    }
+  }, x = [
+    { value: "free", label: "Free" },
+    ...m.map((a) => ({
+      value: a.offerId,
+      label: a.offerId
+    }))
+  ], _ = () => i ? (e == null ? void 0 : e.isActive) && e.packageId ? {
+    title: "Free",
+    price: "$0",
+    features: l ?? [],
+    ctaButton: {
+      label: "Cancel Subscription",
+      onClick: () => {
+        e.managementUrl && window.open(e.managementUrl, "_blank");
+      }
+    }
+  } : {
+    title: "Free",
+    price: "$0",
+    features: l ?? [],
+    ctaButton: {
+      label: "Current Plan"
+    },
+    topBadge: { text: "Current Plan", color: "blue" }
+  } : {
+    title: "Free",
+    price: "$0",
+    features: l ?? [],
+    ctaButton: {
+      label: "Try it for Free",
+      onClick: v
+    }
+  }, t = (a, f) => {
+    if (!i)
+      return {
+        label: "Log in to Continue",
+        onClick: v
+      };
+    const d = (e == null ? void 0 : e.isActive) && e.packageId;
+    if ((e == null ? void 0 : e.packageId) !== a.packageId)
+      return d ? {
+        label: "Change Subscription",
+        onClick: () => $(a.packageId, f)
+      } : {
+        label: "Subscribe",
+        onClick: () => $(a.packageId, f)
+      };
+  };
+  if (Y)
+    return /* @__PURE__ */ n(
+      F,
+      {
+        title: C,
+        className: S,
+        variant: "cta",
+        children: /* @__PURE__ */ n("p", { children: "Loading subscription plans..." })
+      }
+    );
+  const u = R ?? (L ? L.message : null), c = i && (e != null && e.isActive) && e.packageId ? {
+    isActive: !0,
+    activeContent: {
+      title: "Active Subscription",
+      fields: [
+        ...e.productId ? [{ label: "Plan", value: e.productId }] : [],
+        ...e.expirationDate ? [
+          {
+            label: "Expires",
+            value: e.expirationDate.toLocaleDateString()
+          }
+        ] : [],
+        ...e.willRenew !== void 0 ? [
+          {
+            label: "Auto-Renew",
+            value: e.willRenew ? "Yes" : "No"
+          }
+        ] : []
+      ]
+    }
+  } : void 0, I = s === "free";
+  return /* @__PURE__ */ n(
+    F,
+    {
+      title: C,
+      className: S,
+      variant: "cta",
+      error: u,
+      currentStatus: c,
+      freeTileConfig: I ? _() : void 0,
+      aboveProducts: x.length > 1 ? /* @__PURE__ */ n(
+        K,
+        {
+          options: x,
+          value: s,
+          onChange: B
+        }
+      ) : 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: () => {
+            },
+            isCurrentPlan: f,
+            ctaButton: d,
+            disabled: k
+          },
+          a.packageId
+        );
+      })
+    }
+  );
+}
+export {
+  ee as SubscriptionByDurationPage,
+  re as SubscriptionByOfferPage
+};

package/dist/pages/SubscriptionByDurationPage.d.ts

@@ -0,0 +1,25 @@
+/**
+ * SubscriptionByDurationPage
+ *
+ * Subscription page that groups packages by billing duration (monthly, yearly, etc.).
+ * Uses a SegmentedControl to switch between durations.
+ */
+export interface SubscriptionByDurationPageProps {
+    /** Whether the user is logged in */
+    isLoggedIn: boolean;
+    /** Callback when user needs to navigate to login */
+    onNavigateToLogin: () => void;
+    /** User ID for subscription lookup (undefined if not logged in) */
+    userId?: string;
+    /** User email for subscription operations */
+    userEmail?: string;
+    /** Features list for each package, keyed by packageId */
+    featuresByPackage?: Record<string, string[]>;
+    /** Features for the free tier */
+    freeFeatures?: string[];
+    /** Custom title for the page */
+    title?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function SubscriptionByDurationPage({ isLoggedIn, onNavigateToLogin, userId, userEmail, featuresByPackage, freeFeatures, title, className, }: SubscriptionByDurationPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/SubscriptionByOfferPage.d.ts

@@ -0,0 +1,25 @@
+/**
+ * SubscriptionByOfferPage
+ *
+ * Subscription page that organizes packages by offering.
+ * Uses a SegmentedControl to switch between offerings (with a 'Free' option).
+ */
+export interface SubscriptionByOfferPageProps {
+    /** Whether the user is logged in */
+    isLoggedIn: boolean;
+    /** Callback when user needs to navigate to login */
+    onNavigateToLogin: () => void;
+    /** User ID for subscription lookup */
+    userId?: string;
+    /** User email for subscription operations */
+    userEmail?: string;
+    /** Features list for each package, keyed by packageId */
+    featuresByPackage?: Record<string, string[]>;
+    /** Features for the free tier */
+    freeFeatures?: string[];
+    /** Custom title for the page */
+    title?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function SubscriptionByOfferPage({ isLoggedIn, onNavigateToLogin, userId, userEmail, featuresByPackage, freeFeatures, title, className, }: SubscriptionByOfferPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/index.d.ts

@@ -0,0 +1,2 @@
+export { SubscriptionByDurationPage, type SubscriptionByDurationPageProps, } from './SubscriptionByDurationPage';
+export { SubscriptionByOfferPage, type SubscriptionByOfferPageProps, } from './SubscriptionByOfferPage';

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@sudobility/subscription_pages",
+  "version": "0.0.2",
+  "description": "Subscription page components for React web applications",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite build --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@sudobility/subscription_lib": "^0.0.25",
+    "@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/types": "^1.9.58",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "ajv": "^8.18.0",
+    "eslint": "^9.0.0",
+    "jsdom": "^25.0.0",
+    "prettier": "^3.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "~5.9.3",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "vitest": "^4.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "BUSL-1.1"
+}