@sudobility/building_blocks 0.0.53 → 0.0.60

package/dist/components/subscription/AppPricingPage.d.ts

@@ -45,14 +45,6 @@ export interface PricingPageFormatters {
     /** Get features for a product by its identifier */
     getProductFeatures: (productId: string) => string[];
 }
-/** Package ID to entitlement mapping */
-export interface EntitlementMap {
-    [packageId: string]: string;
-}
-/** Entitlement to level mapping for comparing plan tiers */
-export interface EntitlementLevels {
-    [entitlement: string]: number;
-}
 export interface AppPricingPageProps {
     /** Available subscription products */
     products: PricingProduct[];
@@ -68,10 +60,6 @@ export interface AppPricingPageProps {
     labels: PricingPageLabels;
     /** Formatter functions */
     formatters: PricingPageFormatters;
-    /** Package ID to entitlement mapping for calculating savings */
-    entitlementMap: EntitlementMap;
-    /** Entitlement to level mapping for comparing tiers (higher = better) */
-    entitlementLevels: EntitlementLevels;
     /** Called when user clicks on a plan */
     onPlanClick: (planIdentifier: string) => void;
     /** Called when user clicks on free plan */
@@ -82,6 +70,11 @@ export interface AppPricingPageProps {
     className?: string;
     /** Optional analytics tracking callback */
     onTrack?: (params: AnalyticsTrackingParams) => void;
+    /**
+     * Offer ID for subscription_lib hooks (e.g., "api", "default").
+     * Uses useSubscribable hook to determine which packages are enabled.
+     */
+    offerId: string;
 }
 /**
  * Public pricing page for displaying subscription options.
@@ -89,4 +82,4 @@ export interface AppPricingPageProps {
  * - Authenticated on free: Free tile shows "Current Plan" badge (no CTA), paid tiles show "Upgrade"
  * - Authenticated with subscription: Current plan shows badge (no CTA), higher tiers show "Upgrade"
  */
-export declare function AppPricingPage({ products, isAuthenticated, hasActiveSubscription, currentProductIdentifier, labels, formatters, entitlementMap, entitlementLevels, onPlanClick, onFreePlanClick, faqItems, className, onTrack, }: AppPricingPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppPricingPage({ products, isAuthenticated, hasActiveSubscription, currentProductIdentifier, labels, formatters, onPlanClick, onFreePlanClick, faqItems, className, onTrack, offerId, }: AppPricingPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/subscription/AppSubscriptionsPage.d.ts

@@ -1,9 +1,6 @@
 /**
  * @fileoverview App Subscriptions Page
  * @description Page for managing app subscriptions and viewing rate limits.
- *
- * This component uses Section internally for proper page layout.
- * Do NOT wrap this component in a Section when consuming it.
  */
 import type { RateLimitsConfigData } from '@sudobility/types';
 import type { AnalyticsTrackingParams } from '../../types';
@@ -94,14 +91,6 @@ export interface SubscriptionPageFormatters {
     /** Get features for a product by its identifier (required - same as pricing page) */
     getProductFeatures: (productId: string) => string[];
 }
-/** Package ID to entitlement mapping (same as PricingPage) */
-export interface EntitlementMap {
-    [packageId: string]: string;
-}
-/** Entitlement to level mapping for comparing plan tiers (same as PricingPage) */
-export interface EntitlementLevels {
-    [entitlement: string]: number;
-}
 export interface AppSubscriptionsPageProps {
     /** Subscription context value */
     subscription: SubscriptionContextValue;
@@ -113,10 +102,6 @@ export interface AppSubscriptionsPageProps {
     labels: SubscriptionPageLabels;
     /** Formatter functions for dynamic strings */
     formatters: SubscriptionPageFormatters;
-    /** Package ID to entitlement mapping (same as PricingPage) */
-    entitlementMap: EntitlementMap;
-    /** Entitlement to level mapping for comparing tiers (same as PricingPage) */
-    entitlementLevels: EntitlementLevels;
     /** Called when purchase succeeds */
     onPurchaseSuccess?: () => void;
     /** Called when restore succeeds */
@@ -127,9 +112,14 @@ export interface AppSubscriptionsPageProps {
     onWarning?: (title: string, message: string) => void;
     /** Optional analytics tracking callback */
     onTrack?: (params: AnalyticsTrackingParams) => void;
+    /**
+     * Offer ID for subscription_lib hooks (e.g., "api", "default").
+     * Uses useSubscribable hook to determine which packages are enabled.
+     */
+    offerId: string;
 }
 /**
  * Page for managing app subscriptions.
- * Uses the same entitlement mapping and features display as AppPricingPage.
+ * Uses useSubscribable hook to determine which packages are enabled.
  */
-export declare function AppSubscriptionsPage({ subscription, rateLimitsConfig, subscriptionUserId, labels, formatters, entitlementMap, entitlementLevels: _entitlementLevels, onPurchaseSuccess, onRestoreSuccess, onError, onWarning, onTrack, }: AppSubscriptionsPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppSubscriptionsPage({ subscription, rateLimitsConfig, subscriptionUserId, labels, formatters, onPurchaseSuccess, onRestoreSuccess, onError, onWarning, onTrack, offerId, }: AppSubscriptionsPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/subscription/index.d.ts

@@ -1,4 +1,4 @@
 export { AppSubscriptionsPage } from './AppSubscriptionsPage';
 export type { AppSubscriptionsPageProps, SubscriptionProduct, CurrentSubscription, SubscriptionContextValue, SubscriptionPageLabels, SubscriptionPageFormatters, } from './AppSubscriptionsPage';
 export { AppPricingPage } from './AppPricingPage';
-export type { AppPricingPageProps, PricingProduct, FAQItem, PricingPageLabels, PricingPageFormatters, EntitlementMap, EntitlementLevels, } from './AppPricingPage';
+export type { AppPricingPageProps, PricingProduct, FAQItem, PricingPageLabels, PricingPageFormatters, } from './AppPricingPage';

package/dist/index.js

@@ -1258,20 +1258,169 @@ const GlobalSettingsPage = ({
     }
   ) });
 };
+function useSubscriptions(offerId) {
+  const [offer, setOffer] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const loadData = useCallback(async () => {
+    {
+      setError(new Error("Subscription not initialized"));
+      setIsLoading(false);
+      return;
+    }
+  }, [offerId]);
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+  const refetch = useCallback(async () => {
+    return;
+  }, [offerId]);
+  return { offer, isLoading, error, refetch };
+}
+function useUserSubscription() {
+  const [subscription, setSubscription] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const loadData = useCallback(async () => {
+    {
+      setError(new Error("Subscription not initialized"));
+      setIsLoading(false);
+      return;
+    }
+  }, []);
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+  const refetch = useCallback(async () => {
+    return;
+  }, []);
+  return { subscription, isLoading, error, refetch };
+}
+function calculatePackageLevels(packages) {
+  var _a;
+  const levels = /* @__PURE__ */ new Map();
+  const byPeriod = /* @__PURE__ */ new Map();
+  for (const pkg of packages) {
+    if (!pkg.product) {
+      levels.set(pkg.packageId, 0);
+      continue;
+    }
+    const period = pkg.product.period;
+    const existing = byPeriod.get(period) ?? [];
+    existing.push(pkg);
+    byPeriod.set(period, existing);
+  }
+  for (const [_period, periodPackages] of byPeriod) {
+    const sorted = [...periodPackages].sort((a, b) => {
+      var _a2, _b;
+      const priceA = ((_a2 = a.product) == null ? void 0 : _a2.price) ?? 0;
+      const priceB = ((_b = b.product) == null ? void 0 : _b.price) ?? 0;
+      return priceA - priceB;
+    });
+    let currentLevel = 0;
+    let lastPrice = null;
+    for (const pkg of sorted) {
+      const price = ((_a = pkg.product) == null ? void 0 : _a.price) ?? 0;
+      if (lastPrice === null || price > lastPrice) {
+        currentLevel++;
+        lastPrice = price;
+      }
+      levels.set(pkg.packageId, currentLevel);
+    }
+  }
+  return levels;
+}
+function findUpgradeablePackages(current, packages) {
+  let currentPackageId;
+  let currentProductId;
+  if (typeof current === "string") {
+    currentPackageId = current;
+  } else if (current) {
+    currentPackageId = current.packageId;
+    currentProductId = current.productId;
+  }
+  if (!currentPackageId && !currentProductId) {
+    return packages.map((p) => p.packageId);
+  }
+  let currentPkg = currentPackageId ? packages.find((p) => p.packageId === currentPackageId) : void 0;
+  if (!currentPkg && currentProductId) {
+    currentPkg = packages.find((p) => {
+      var _a;
+      return ((_a = p.product) == null ? void 0 : _a.productId) === currentProductId;
+    });
+  }
+  if (!currentPkg) {
+    return packages.map((p) => p.packageId);
+  }
+  const matchedPackageId = currentPkg.packageId;
+  if (!currentPkg.product) {
+    return packages.filter((p) => p.product !== void 0).map((p) => p.packageId);
+  }
+  const levels = calculatePackageLevels(packages);
+  const currentLevel = levels.get(matchedPackageId) ?? 0;
+  const currentPeriod = currentPkg.product.period;
+  const upgrades = [];
+  for (const pkg of packages) {
+    if (!pkg.product)
+      continue;
+    if (pkg.packageId === matchedPackageId) {
+      continue;
+    }
+    const pkgLevel = levels.get(pkg.packageId) ?? 0;
+    const pkgPeriod = pkg.product.period;
+    const periodRanks = {
+      weekly: 1,
+      monthly: 2,
+      quarterly: 3,
+      yearly: 4,
+      lifetime: 5
+    };
+    const isPeriodOk = periodRanks[pkgPeriod] >= periodRanks[currentPeriod];
+    const isLevelOk = pkgLevel >= currentLevel;
+    if (isPeriodOk && isLevelOk) {
+      upgrades.push(pkg.packageId);
+    }
+  }
+  return upgrades;
+}
+function useSubscribable(offerId) {
+  const { offer, isLoading: loadingOffer, error: offerError } = useSubscriptions(offerId);
+  const { subscription, isLoading: loadingSub, error: subError } = useUserSubscription();
+  const isLoading = loadingOffer || loadingSub;
+  const error = offerError || subError;
+  const subscribablePackageIds = useMemo(() => {
+    if (!offer) {
+      return [];
+    }
+    let allPackages = [...offer.packages];
+    if (!subscription || !subscription.isActive) {
+      return allPackages.map((p) => p.packageId);
+    }
+    const current = {
+      packageId: subscription.packageId,
+      productId: subscription.productId
+    };
+    if (!current.packageId && !current.productId) {
+      return allPackages.map((p) => p.packageId);
+    }
+    return findUpgradeablePackages(current, allPackages);
+  }, [offer, subscription]);
+  return { subscribablePackageIds, isLoading, error };
+}
 function AppSubscriptionsPage({
   subscription,
   rateLimitsConfig,
   subscriptionUserId,
   labels,
   formatters,
-  entitlementMap,
-  entitlementLevels: _entitlementLevels,
   onPurchaseSuccess,
   onRestoreSuccess,
   onError,
   onWarning,
-  onTrack
+  onTrack,
+  offerId
 }) {
+  const { subscribablePackageIds } = useSubscribable(offerId);
   const {
     products,
     currentSubscription,
@@ -1285,6 +1434,36 @@ function AppSubscriptionsPage({
   const [selectedPlan, setSelectedPlan] = useState(null);
   const [isPurchasing, setIsPurchasing] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
+  const isCurrentPlanProduct = useCallback(
+    (productId) => {
+      return !!((currentSubscription == null ? void 0 : currentSubscription.isActive) && currentSubscription.productIdentifier === productId);
+    },
+    [currentSubscription]
+  );
+  const isPackageEnabled = useCallback(
+    (productId) => {
+      return subscribablePackageIds.includes(productId);
+    },
+    [subscribablePackageIds]
+  );
+  const canUpgradeTo = useCallback(
+    (productId) => {
+      return isPackageEnabled(productId) && !isCurrentPlanProduct(productId);
+    },
+    [isPackageEnabled, isCurrentPlanProduct]
+  );
+  useEffect(() => {
+    if ((currentSubscription == null ? void 0 : currentSubscription.isActive) && currentSubscription.productIdentifier) {
+      setSelectedPlan(currentSubscription.productIdentifier);
+      const currentProduct = products.find(
+        (p) => p.identifier === currentSubscription.productIdentifier
+      );
+      if (currentProduct == null ? void 0 : currentProduct.period) {
+        const isYearly = currentProduct.period.includes("Y") || currentProduct.period.includes("year");
+        setBillingPeriod(isYearly ? "yearly" : "monthly");
+      }
+    }
+  }, [currentSubscription, products]);
   const track = useCallback(
     (label, params) => {
       onTrack == null ? void 0 : onTrack({
@@ -1403,6 +1582,15 @@ function AppSubscriptionsPage({
       day: "numeric"
     }).format(date);
   }, []);
+  const formatProductIdentifier = useCallback(
+    (identifier) => {
+      if (!identifier) return labels.labelPremium;
+      const product = products.find((p) => p.identifier === identifier);
+      if (product == null ? void 0 : product.title) return product.title;
+      return identifier.split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+    },
+    [products, labels.labelPremium]
+  );
   const getPeriodLabel = useCallback(
     (period) => {
       if (!period) return "";
@@ -1448,17 +1636,11 @@ function AppSubscriptionsPage({
   }, [labels.freeTierFeatures]);
   const getYearlySavingsPercent = useCallback(
     (yearlyPackageId) => {
-      var _a;
-      const yearlyEntitlement = entitlementMap[yearlyPackageId];
-      if (!yearlyEntitlement) return void 0;
       const yearlyProduct = products.find(
         (p) => p.identifier === yearlyPackageId
       );
       if (!yearlyProduct) return void 0;
-      const monthlyPackageId = (_a = Object.entries(entitlementMap).find(
-        ([pkgId, ent]) => ent === yearlyEntitlement && pkgId.includes("monthly")
-      )) == null ? void 0 : _a[0];
-      if (!monthlyPackageId) return void 0;
+      const monthlyPackageId = yearlyPackageId.replace("_yearly", "_monthly");
       const monthlyProduct = products.find(
         (p) => p.identifier === monthlyPackageId
       );
@@ -1470,13 +1652,13 @@ function AppSubscriptionsPage({
       const savings = (annualizedMonthly - yearlyPrice) / annualizedMonthly * 100;
       return Math.round(savings);
     },
-    [products, entitlementMap]
+    [products]
   );
   const billingPeriodOptions = [
     { value: "monthly", label: labels.billingMonthly },
     { value: "yearly", label: labels.billingYearly }
   ];
-  return /* @__PURE__ */ jsx(Section, { spacing: "lg", maxWidth: "4xl", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     SubscriptionLayout,
     {
       title: labels.title,
@@ -1489,7 +1671,9 @@ function AppSubscriptionsPage({
           fields: [
             {
               label: labels.labelPlan,
-              value: currentSubscription.productIdentifier || labels.labelPremium
+              value: formatProductIdentifier(
+                currentSubscription.productIdentifier
+              )
             },
             {
               label: labels.labelExpires,
@@ -1539,7 +1723,7 @@ function AppSubscriptionsPage({
         loading: isRestoring
       },
       children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }) }) : products.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-12 text-theme-text-secondary", children: labels.noProducts }) : filteredProducts.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-12 text-theme-text-secondary", children: labels.noProductsForPeriod }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
+        !(currentSubscription == null ? void 0 : currentSubscription.isActive) && /* @__PURE__ */ jsx(
           SubscriptionTile,
           {
             id: "free",
@@ -1547,12 +1731,14 @@ function AppSubscriptionsPage({
             price: labels.freeTierPrice,
             periodLabel: labels.periodMonth,
             features: getFreeTierFeatures(),
-            isSelected: !(currentSubscription == null ? void 0 : currentSubscription.isActive) && selectedPlan === null,
+            isSelected: selectedPlan === null,
+            isCurrentPlan: !(currentSubscription == null ? void 0 : currentSubscription.isActive),
             onSelect: () => handlePlanSelect(null),
-            topBadge: !(currentSubscription == null ? void 0 : currentSubscription.isActive) ? {
+            enabled: subscribablePackageIds.includes("free"),
+            topBadge: {
               text: labels.currentPlanBadge,
               color: "green"
-            } : void 0,
+            },
             disabled: isPurchasing || isRestoring,
             hideSelectionIndicator: true
           },
@@ -1560,6 +1746,10 @@ function AppSubscriptionsPage({
         ),
         filteredProducts.map((product) => {
           var _a;
+          const isCurrent = isCurrentPlanProduct(product.identifier);
+          const isEnabled = isPackageEnabled(product.identifier);
+          const canUpgrade = canUpgradeTo(product.identifier);
+          const canSelect = canUpgrade || isCurrent;
           return /* @__PURE__ */ jsx(
             SubscriptionTile,
             {
@@ -1569,8 +1759,14 @@ function AppSubscriptionsPage({
               periodLabel: getPeriodLabel(product.period),
               features: getProductFeatures(product.identifier),
               isSelected: selectedPlan === product.identifier,
-              onSelect: () => handlePlanSelect(product.identifier),
+              isCurrentPlan: isCurrent,
+              onSelect: () => canSelect && handlePlanSelect(product.identifier),
+              enabled: isEnabled,
               isBestValue: product.identifier.includes("pro"),
+              topBadge: isCurrent ? {
+                text: labels.currentPlanBadge,
+                color: "green"
+              } : void 0,
               discountBadge: ((_a = product.period) == null ? void 0 : _a.includes("Y")) ? (() => {
                 const savings = getYearlySavingsPercent(
                   product.identifier
@@ -1581,14 +1777,14 @@ function AppSubscriptionsPage({
                 } : void 0;
               })() : void 0,
               introPriceNote: product.freeTrialPeriod ? getTrialLabel(product.freeTrialPeriod) : product.introPrice ? formatters.formatIntroNote(product.introPrice) : void 0,
-              disabled: isPurchasing || isRestoring
+              disabled: isPurchasing || isRestoring || !canSelect
             },
             product.identifier
           );
         })
       ] })
     }
-  ) });
+  );
 }
 function AppPricingPage({
   products,
@@ -1597,15 +1793,15 @@ function AppPricingPage({
   currentProductIdentifier,
   labels,
   formatters,
-  entitlementMap,
-  entitlementLevels,
   onPlanClick,
   onFreePlanClick,
   faqItems,
   className,
-  onTrack
+  onTrack,
+  offerId
 }) {
   const [billingPeriod, setBillingPeriod] = useState("monthly");
+  const { subscribablePackageIds } = useSubscribable(offerId);
   const track = useCallback(
     (label, params) => {
       onTrack == null ? void 0 : onTrack({
@@ -1639,15 +1835,6 @@ function AppPricingPage({
     },
     [track, onPlanClick]
   );
-  const getProductLevel = useCallback(
-    (productId) => {
-      const entitlement = entitlementMap[productId];
-      if (!entitlement) return 0;
-      return entitlementLevels[entitlement] ?? 0;
-    },
-    [entitlementMap, entitlementLevels]
-  );
-  const currentLevel = currentProductIdentifier ? getProductLevel(currentProductIdentifier) : 0;
   const filteredProducts = products.filter((product) => {
     if (!product.period) return false;
     const isYearly = product.period.includes("Y") || product.period.includes("year");
@@ -1668,17 +1855,11 @@ function AppPricingPage({
   );
   const getYearlySavingsPercent = useCallback(
     (yearlyPackageId) => {
-      var _a;
-      const yearlyEntitlement = entitlementMap[yearlyPackageId];
-      if (!yearlyEntitlement) return void 0;
       const yearlyProduct = products.find(
         (p) => p.identifier === yearlyPackageId
       );
       if (!yearlyProduct) return void 0;
-      const monthlyPackageId = (_a = Object.entries(entitlementMap).find(
-        ([pkgId, ent]) => ent === yearlyEntitlement && pkgId.includes("monthly")
-      )) == null ? void 0 : _a[0];
-      if (!monthlyPackageId) return void 0;
+      const monthlyPackageId = yearlyPackageId.replace("_yearly", "_monthly");
       const monthlyProduct = products.find(
         (p) => p.identifier === monthlyPackageId
       );
@@ -1690,7 +1871,7 @@ function AppPricingPage({
       const savings = (annualizedMonthly - yearlyPrice) / annualizedMonthly * 100;
       return Math.round(savings);
     },
-    [products, entitlementMap]
+    [products]
   );
   const billingPeriodOptions = [
     { value: "monthly", label: labels.billingMonthly },
@@ -1700,16 +1881,22 @@ function AppPricingPage({
     (productId) => {
       if (!isAuthenticated) return false;
       if (!hasActiveSubscription) return false;
-      return getProductLevel(productId) === currentLevel && currentLevel > 0;
+      return productId === currentProductIdentifier;
     },
-    [isAuthenticated, hasActiveSubscription, getProductLevel, currentLevel]
+    [isAuthenticated, hasActiveSubscription, currentProductIdentifier]
   );
-  const isUpgrade = useCallback(
+  const isPackageEnabled = useCallback(
     (productId) => {
-      const productLevel = getProductLevel(productId);
-      return productLevel > currentLevel;
+      if (!isAuthenticated) return true;
+      return subscribablePackageIds.includes(productId);
     },
-    [getProductLevel, currentLevel]
+    [isAuthenticated, subscribablePackageIds]
+  );
+  const canUpgradeTo = useCallback(
+    (productId) => {
+      return isPackageEnabled(productId) && !isCurrentPlan(productId);
+    },
+    [isPackageEnabled, isCurrentPlan]
   );
   return /* @__PURE__ */ jsxs("div", { className, children: [
     /* @__PURE__ */ jsx(Section, { spacing: "2xl", maxWidth: "4xl", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
@@ -1745,8 +1932,13 @@ function AppPricingPage({
                 periodLabel: labels.periodMonth,
                 features: labels.freeTierFeatures,
                 isSelected: false,
+                isCurrentPlan: isAuthenticated && !hasActiveSubscription,
                 onSelect: () => {
                 },
+                enabled: (
+                  // Free tier enabled: not authenticated, or in subscribable list
+                  !isAuthenticated || subscribablePackageIds.includes("free")
+                ),
                 topBadge: isAuthenticated && !hasActiveSubscription ? {
                   text: labels.currentPlanBadge,
                   color: "green"
@@ -1766,7 +1958,8 @@ function AppPricingPage({
             filteredProducts.map((product) => {
               var _a;
               const isCurrent = isCurrentPlan(product.identifier);
-              const canUpgrade = isUpgrade(product.identifier);
+              const isEnabled = isPackageEnabled(product.identifier);
+              const canUpgrade = canUpgradeTo(product.identifier);
               let ctaButton;
               if (!isAuthenticated) {
                 ctaButton = {
@@ -1802,8 +1995,10 @@ function AppPricingPage({
                   periodLabel: getPeriodLabel(product.period),
                   features: formatters.getProductFeatures(product.identifier),
                   isSelected: false,
+                  isCurrentPlan: isCurrent,
                   onSelect: () => {
                   },
+                  enabled: isEnabled,
                   isBestValue: product.identifier.includes("pro"),
                   topBadge,
                   discountBadge: ((_a = product.period) == null ? void 0 : _a.includes("Y")) ? (() => {