@sudobility/building_blocks 0.0.30 → 0.0.31

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

@@ -88,11 +88,21 @@ export interface SubscriptionPageFormatters {
     formatSavePercent: (percent: number) => string;
     /** Format intro price note */
     formatIntroNote: (price: string) => string;
+    /** 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;
-    /** Rate limit configuration */
+    /** Rate limit configuration (for displaying current usage, not for features) */
     rateLimitsConfig?: RateLimitsConfigData | null;
     /** User ID used for subscription (the selected entity's ID when logged in) */
     subscriptionUserId?: string;
@@ -100,8 +110,10 @@ export interface AppSubscriptionsPageProps {
     labels: SubscriptionPageLabels;
     /** Formatter functions for dynamic strings */
     formatters: SubscriptionPageFormatters;
-    /** Package ID to entitlement mapping */
-    packageEntitlementMap?: Record<string, string>;
+    /** 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 */
@@ -115,5 +127,6 @@ export interface AppSubscriptionsPageProps {
 }
 /**
  * Page for managing app subscriptions.
+ * Uses the same entitlement mapping and features display as AppPricingPage.
  */
-export declare function AppSubscriptionsPage({ subscription, rateLimitsConfig, subscriptionUserId, labels, formatters, packageEntitlementMap, onPurchaseSuccess, onRestoreSuccess, onError, onWarning, onTrack, }: AppSubscriptionsPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppSubscriptionsPage({ subscription, rateLimitsConfig, subscriptionUserId, labels, formatters, entitlementMap, entitlementLevels: _entitlementLevels, onPurchaseSuccess, onRestoreSuccess, onError, onWarning, onTrack, }: AppSubscriptionsPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -4271,21 +4271,14 @@ function Yt({
 createContext(
   void 0
 );
-const DEFAULT_PACKAGE_ENTITLEMENT_MAP = {
-  ultra_yearly: "bandwidth_ultra",
-  ultra_monthly: "bandwidth_ultra",
-  pro_yearly: "bandwidth_pro",
-  pro_monthly: "bandwidth_pro",
-  dev_yearly: "bandwidth_dev",
-  dev_monthly: "bandwidth_dev"
-};
 function AppSubscriptionsPage({
   subscription,
   rateLimitsConfig,
   subscriptionUserId,
   labels,
   formatters,
-  packageEntitlementMap = DEFAULT_PACKAGE_ENTITLEMENT_MAP,
+  entitlementMap,
+  entitlementLevels: _entitlementLevels,
   onPurchaseSuccess,
   onRestoreSuccess,
   onError,
@@ -4450,19 +4443,6 @@ function AppSubscriptionsPage({
     },
     [formatters]
   );
-  const getRateLimitTierForProduct = useCallback(
-    (packageId) => {
-      if (!(rateLimitsConfig == null ? void 0 : rateLimitsConfig.tiers)) return void 0;
-      const entitlement = packageEntitlementMap[packageId];
-      if (entitlement) {
-        return rateLimitsConfig.tiers.find(
-          (tier) => tier.entitlement === entitlement
-        );
-      }
-      return rateLimitsConfig.tiers.find((tier) => tier.entitlement === "none");
-    },
-    [rateLimitsConfig, packageEntitlementMap]
-  );
   const formatRateLimit = useCallback(
     (limit) => {
       if (limit === null) return labels.unlimited;
@@ -4470,84 +4450,25 @@ function AppSubscriptionsPage({
     },
     [labels.unlimited]
   );
-  const getRateLimitFeatures = useCallback(
-    (packageId) => {
-      const tier = getRateLimitTierForProduct(packageId);
-      if (!tier) return [];
-      const features = [];
-      if (tier.limits.hourly !== null) {
-        features.push(
-          formatters.formatHourlyLimit(formatRateLimit(tier.limits.hourly))
-        );
-      }
-      if (tier.limits.daily !== null) {
-        features.push(
-          formatters.formatDailyLimit(formatRateLimit(tier.limits.daily))
-        );
-      }
-      if (tier.limits.monthly !== null) {
-        features.push(
-          formatters.formatMonthlyLimit(formatRateLimit(tier.limits.monthly))
-        );
-      }
-      if (tier.limits.hourly === null && tier.limits.daily === null && tier.limits.monthly === null) {
-        features.push(labels.unlimitedRequests);
-      }
-      return features;
-    },
-    [
-      getRateLimitTierForProduct,
-      formatRateLimit,
-      formatters,
-      labels.unlimitedRequests
-    ]
-  );
   const getProductFeatures = useCallback(
     (packageId) => {
-      return getRateLimitFeatures(packageId);
+      return formatters.getProductFeatures(packageId);
     },
-    [getRateLimitFeatures]
+    [formatters]
   );
   const getFreeTierFeatures = useCallback(() => {
-    const benefits = [...labels.freeTierFeatures];
-    if (rateLimitsConfig == null ? void 0 : rateLimitsConfig.tiers) {
-      const freeTier = rateLimitsConfig.tiers.find(
-        (tier) => tier.entitlement === "none"
-      );
-      if (freeTier) {
-        if (freeTier.limits.hourly !== null) {
-          benefits.push(
-            formatters.formatHourlyLimit(
-              formatRateLimit(freeTier.limits.hourly)
-            )
-          );
-        }
-        if (freeTier.limits.daily !== null) {
-          benefits.push(
-            formatters.formatDailyLimit(formatRateLimit(freeTier.limits.daily))
-          );
-        }
-        if (freeTier.limits.monthly !== null) {
-          benefits.push(
-            formatters.formatMonthlyLimit(
-              formatRateLimit(freeTier.limits.monthly)
-            )
-          );
-        }
-      }
-    }
-    return benefits;
-  }, [rateLimitsConfig, formatRateLimit, formatters, labels.freeTierFeatures]);
+    return labels.freeTierFeatures;
+  }, [labels.freeTierFeatures]);
   const getYearlySavingsPercent = useCallback(
     (yearlyPackageId) => {
       var _a;
-      const yearlyEntitlement = packageEntitlementMap[yearlyPackageId];
+      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(packageEntitlementMap).find(
+      const monthlyPackageId = (_a = Object.entries(entitlementMap).find(
         ([pkgId, ent]) => ent === yearlyEntitlement && pkgId.includes("monthly")
       )) == null ? void 0 : _a[0];
       if (!monthlyPackageId) return void 0;
@@ -4562,7 +4483,7 @@ function AppSubscriptionsPage({
       const savings = (annualizedMonthly - yearlyPrice) / annualizedMonthly * 100;
       return Math.round(savings);
     },
-    [products, packageEntitlementMap]
+    [products, entitlementMap]
   );
   const billingPeriodOptions = [
     { value: "monthly", label: labels.billingMonthly },
@@ -4823,7 +4744,9 @@ function AppPricingPage({
           style: {
             display: "grid",
             gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 280px), 1fr))",
-            gap: "1.5rem"
+            gridAutoRows: "1fr",
+            gap: "1.5rem",
+            overflow: "visible"
           },
           children: [
             /* @__PURE__ */ jsx(