@sudobility/building_blocks 0.0.54 → 0.0.62

package/dist/index.js

@@ -7,6 +7,7 @@ import { ChevronDownIcon, CalendarDaysIcon, PaintBrushIcon, LanguageIcon, Chevro
 import { GRADIENT_CLASSES, textVariants } from "@sudobility/design";
 import { cva } from "class-variance-authority";
 import { SubscriptionLayout, SubscriptionTile, SegmentedControl } from "@sudobility/subscription-components";
+import { useSubscriptionPeriods, useSubscriptionForPeriod, useSubscribable, useUserSubscription } from "@sudobility/subscription_lib";
 import { createUserWithEmailAndPassword, signInWithEmailAndPassword, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -1259,13 +1260,12 @@ const GlobalSettingsPage = ({
   ) });
 };
 function AppSubscriptionsPage({
-  subscription,
+  offerId,
   rateLimitsConfig,
-  subscriptionUserId,
   labels,
   formatters,
-  entitlementMap,
-  entitlementLevels: _entitlementLevels,
+  onPurchase,
+  onRestore,
   onPurchaseSuccess,
   onRestoreSuccess,
   onError,
@@ -1273,15 +1273,33 @@ function AppSubscriptionsPage({
   onTrack
 }) {
   const {
-    products,
-    currentSubscription,
-    isLoading,
-    error,
-    purchase,
-    restore,
-    clearError
-  } = subscription;
-  const [billingPeriod, setBillingPeriod] = useState("monthly");
+    periods,
+    isLoading: periodsLoading,
+    error: periodsError
+  } = useSubscriptionPeriods(offerId);
+  const [selectedPeriod, setSelectedPeriod] = useState("monthly");
+  useEffect(() => {
+    if (periods.length > 0 && !periods.includes(selectedPeriod)) {
+      setSelectedPeriod(periods[0]);
+    }
+  }, [periods, selectedPeriod]);
+  const {
+    packages,
+    isLoading: packagesLoading,
+    error: packagesError
+  } = useSubscriptionForPeriod(offerId, selectedPeriod);
+  const {
+    subscribablePackageIds,
+    isLoading: subscribableLoading,
+    error: subscribableError
+  } = useSubscribable(offerId);
+  const {
+    subscription: currentSubscription,
+    isLoading: subscriptionLoading,
+    error: subscriptionError
+  } = useUserSubscription();
+  const isLoading = periodsLoading || packagesLoading || subscribableLoading || subscriptionLoading;
+  const error = periodsError || packagesError || subscribableError || subscriptionError;
   const [selectedPlan, setSelectedPlan] = useState(null);
   const [isPurchasing, setIsPurchasing] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
@@ -1296,32 +1314,99 @@ function AppSubscriptionsPage({
     },
     [onTrack]
   );
-  useEffect(() => {
-    if (error) {
-      onError == null ? void 0 : onError(labels.errorTitle, error);
-      clearError();
-    }
-  }, [error, clearError, labels.errorTitle, onError]);
-  const filteredProducts = products.filter((product) => {
-    if (!product.period) return false;
-    const isYearly = product.period.includes("Y") || product.period.includes("year");
-    return billingPeriod === "yearly" ? isYearly : !isYearly;
-  }).sort((a, b) => parseFloat(a.price) - parseFloat(b.price));
   const handlePeriodChange = useCallback(
-    (period) => {
-      setBillingPeriod(period);
+    (value) => {
+      const newPeriod = value;
+      setSelectedPeriod(newPeriod);
       setSelectedPlan(null);
-      track("billing_period_changed", { billing_period: period });
+      track("billing_period_changed", { billing_period: newPeriod });
+    },
+    [track]
+  );
+  const getPeriodLabel = useCallback(
+    (period) => {
+      switch (period) {
+        case "yearly":
+          return labels.periodYear;
+        case "monthly":
+          return labels.periodMonth;
+        case "weekly":
+          return labels.periodWeek;
+        default:
+          return period;
+      }
+    },
+    [labels]
+  );
+  const getYearlySavingsPercent = useCallback(
+    (yearlyPackage) => {
+      if (!yearlyPackage.product) return void 0;
+      const monthlyPackageId = yearlyPackage.packageId.replace(
+        "_yearly",
+        "_monthly"
+      );
+      const monthlyPkg = packages.find((p) => p.packageId === monthlyPackageId);
+      if (!(monthlyPkg == null ? void 0 : monthlyPkg.product)) return void 0;
+      const yearlyPrice = yearlyPackage.product.price;
+      const monthlyPrice = monthlyPkg.product.price;
+      if (monthlyPrice <= 0 || yearlyPrice <= 0) return void 0;
+      const annualizedMonthly = monthlyPrice * 12;
+      const savings = (annualizedMonthly - yearlyPrice) / annualizedMonthly * 100;
+      return Math.round(savings);
+    },
+    [packages]
+  );
+  const billingPeriodOptions = useMemo(() => {
+    return periods.map((period) => ({
+      value: period,
+      label: period === "monthly" ? labels.billingMonthly : labels.billingYearly
+    }));
+  }, [periods, labels]);
+  const isCurrentPlan = useCallback(
+    (packageId, productId) => {
+      if (!(currentSubscription == null ? void 0 : currentSubscription.isActive)) return false;
+      return productId === currentSubscription.productId || packageId === currentSubscription.packageId;
+    },
+    [currentSubscription]
+  );
+  const isPackageEnabled = useCallback(
+    (packageId) => {
+      if (subscribableLoading || subscribablePackageIds.length === 0)
+        return true;
+      return subscribablePackageIds.includes(packageId);
+    },
+    [subscribableLoading, subscribablePackageIds]
+  );
+  const canUpgradeTo = useCallback(
+    (packageId, productId) => {
+      return isPackageEnabled(packageId) && !isCurrentPlan(packageId, productId);
+    },
+    [isPackageEnabled, isCurrentPlan]
+  );
+  useEffect(() => {
+    if ((currentSubscription == null ? void 0 : currentSubscription.isActive) && currentSubscription.packageId) {
+      setSelectedPlan(currentSubscription.packageId);
+      if (currentSubscription.period && periods.includes(currentSubscription.period)) {
+        setSelectedPeriod(currentSubscription.period);
+      }
+    }
+  }, [currentSubscription, periods]);
+  const handlePlanSelect = useCallback(
+    (planIdentifier) => {
+      setSelectedPlan(planIdentifier);
+      track("plan_selected", {
+        plan_identifier: planIdentifier ?? "free",
+        is_free_tier: planIdentifier === null
+      });
     },
     [track]
   );
   const handlePurchase = useCallback(async () => {
     if (!selectedPlan) return;
     setIsPurchasing(true);
-    clearError();
     track("purchase_initiated", { plan_identifier: selectedPlan });
     try {
-      const result = await purchase(selectedPlan, subscriptionUserId);
+      const result = await onPurchase(selectedPlan);
       if (result) {
         track("purchase_completed", { plan_identifier: selectedPlan });
         onPurchaseSuccess == null ? void 0 : onPurchaseSuccess();
@@ -1344,31 +1429,18 @@ function AppSubscriptionsPage({
     }
   }, [
     selectedPlan,
-    clearError,
     track,
-    purchase,
-    subscriptionUserId,
+    onPurchase,
     onPurchaseSuccess,
     labels.errorTitle,
     labels.purchaseError,
     onError
   ]);
-  const handlePlanSelect = useCallback(
-    (planIdentifier) => {
-      setSelectedPlan(planIdentifier);
-      track("plan_selected", {
-        plan_identifier: planIdentifier ?? "free",
-        is_free_tier: planIdentifier === null
-      });
-    },
-    [track]
-  );
   const handleRestore = useCallback(async () => {
     setIsRestoring(true);
-    clearError();
     track("restore_initiated");
     try {
-      const result = await restore(subscriptionUserId);
+      const result = await onRestore();
       if (result) {
         track("restore_completed");
         onRestoreSuccess == null ? void 0 : onRestoreSuccess();
@@ -1384,10 +1456,8 @@ function AppSubscriptionsPage({
       setIsRestoring(false);
     }
   }, [
-    clearError,
     track,
-    restore,
-    subscriptionUserId,
+    onRestore,
     onRestoreSuccess,
     labels.errorTitle,
     labels.restoreNoPurchases,
@@ -1403,32 +1473,20 @@ function AppSubscriptionsPage({
       day: "numeric"
     }).format(date);
   }, []);
-  const getPeriodLabel = useCallback(
-    (period) => {
-      if (!period) return "";
-      if (period.includes("Y") || period.includes("year"))
-        return labels.periodYear;
-      if (period.includes("M") || period.includes("month"))
-        return labels.periodMonth;
-      if (period.includes("W") || period.includes("week"))
-        return labels.periodWeek;
-      return "";
-    },
-    [labels]
-  );
-  const getTrialLabel = useCallback(
-    (trialPeriod) => {
-      if (!trialPeriod) return void 0;
-      const num = parseInt(trialPeriod.replace(/\D/g, "") || "1", 10);
-      if (trialPeriod.includes("W")) {
-        return formatters.formatTrialWeeks(num);
-      }
-      if (trialPeriod.includes("M")) {
-        return formatters.formatTrialMonths(num);
-      }
-      return formatters.formatTrialDays(num);
+  const formatProductName = useCallback(
+    (packageId, productId) => {
+      if (!packageId && !productId) return labels.labelPremium;
+      const pkg = packages.find(
+        (p) => {
+          var _a;
+          return p.packageId === packageId || ((_a = p.product) == null ? void 0 : _a.productId) === productId;
+        }
+      );
+      if (pkg == null ? void 0 : pkg.name) return pkg.name;
+      const identifier = packageId || productId || "";
+      return identifier.split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
     },
-    [formatters]
+    [packages, labels.labelPremium]
   );
   const formatRateLimit = useCallback(
     (limit) => {
@@ -1437,50 +1495,13 @@ function AppSubscriptionsPage({
     },
     [labels.unlimited]
   );
-  const getProductFeatures = useCallback(
-    (packageId) => {
-      return formatters.getProductFeatures(packageId);
-    },
-    [formatters]
-  );
-  const getFreeTierFeatures = useCallback(() => {
-    return labels.freeTierFeatures;
-  }, [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 monthlyProduct = products.find(
-        (p) => p.identifier === monthlyPackageId
-      );
-      if (!monthlyProduct) return void 0;
-      const yearlyPrice = parseFloat(yearlyProduct.price);
-      const monthlyPrice = parseFloat(monthlyProduct.price);
-      if (monthlyPrice <= 0 || yearlyPrice <= 0) return void 0;
-      const annualizedMonthly = monthlyPrice * 12;
-      const savings = (annualizedMonthly - yearlyPrice) / annualizedMonthly * 100;
-      return Math.round(savings);
-    },
-    [products, entitlementMap]
-  );
-  const billingPeriodOptions = [
-    { value: "monthly", label: labels.billingMonthly },
-    { value: "yearly", label: labels.billingYearly }
-  ];
+  const freeTierPackage = packages.find((p) => !p.product);
+  const paidPackages = packages.filter((p) => p.product);
   return /* @__PURE__ */ jsx(
     SubscriptionLayout,
     {
       title: labels.title,
-      error,
+      error: error == null ? void 0 : error.message,
       currentStatusLabel: labels.currentStatusLabel,
       currentStatus: {
         isActive: (currentSubscription == null ? void 0 : currentSubscription.isActive) ?? false,
@@ -1489,7 +1510,10 @@ function AppSubscriptionsPage({
           fields: [
             {
               label: labels.labelPlan,
-              value: currentSubscription.productIdentifier || labels.labelPremium
+              value: formatProductName(
+                currentSubscription.packageId,
+                currentSubscription.productId
+              )
             },
             {
               label: labels.labelExpires,
@@ -1518,11 +1542,11 @@ function AppSubscriptionsPage({
           message: labels.statusInactiveMessage
         } : void 0
       },
-      aboveProducts: !isLoading && products.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ jsx(
+      aboveProducts: !isLoading && periods.length > 1 ? /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ jsx(
         SegmentedControl,
         {
           options: billingPeriodOptions,
-          value: billingPeriod,
+          value: selectedPeriod,
           onChange: handlePeriodChange
         }
       ) }) : null,
@@ -1538,52 +1562,81 @@ function AppSubscriptionsPage({
         disabled: isPurchasing || isRestoring,
         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(
+      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" }) }) : error ? /* @__PURE__ */ jsx("div", { className: "text-center py-12 text-red-500", children: error.message }) : packages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-12 text-theme-text-secondary", children: labels.noProducts }) : paidPackages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-12 text-theme-text-secondary", children: labels.noProductsForPeriod }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        freeTierPackage && !(currentSubscription == null ? void 0 : currentSubscription.isActive) && /* @__PURE__ */ jsx(
           SubscriptionTile,
           {
             id: "free",
             title: labels.freeTierTitle,
             price: labels.freeTierPrice,
             periodLabel: labels.periodMonth,
-            features: getFreeTierFeatures(),
-            isSelected: !(currentSubscription == null ? void 0 : currentSubscription.isActive) && selectedPlan === null,
+            features: labels.freeTierFeatures,
+            isSelected: selectedPlan === null,
+            isCurrentPlan: !(currentSubscription == null ? void 0 : currentSubscription.isActive),
             onSelect: () => handlePlanSelect(null),
-            topBadge: !(currentSubscription == null ? void 0 : currentSubscription.isActive) ? {
+            enabled: isPackageEnabled("free"),
+            topBadge: {
               text: labels.currentPlanBadge,
               color: "green"
-            } : void 0,
+            },
             disabled: isPurchasing || isRestoring,
             hideSelectionIndicator: true
           },
           "free"
         ),
-        filteredProducts.map((product) => {
-          var _a;
+        paidPackages.map((pkg) => {
+          var _a, _b, _c, _d, _e, _f;
+          const isCurrent = isCurrentPlan(
+            pkg.packageId,
+            (_a = pkg.product) == null ? void 0 : _a.productId
+          );
+          const isEnabled = isPackageEnabled(pkg.packageId);
+          const canUpgrade = canUpgradeTo(
+            pkg.packageId,
+            (_b = pkg.product) == null ? void 0 : _b.productId
+          );
+          const canSelect = canUpgrade || isCurrent;
           return /* @__PURE__ */ jsx(
             SubscriptionTile,
             {
-              id: product.identifier,
-              title: product.title,
-              price: product.priceString,
-              periodLabel: getPeriodLabel(product.period),
-              features: getProductFeatures(product.identifier),
-              isSelected: selectedPlan === product.identifier,
-              onSelect: () => handlePlanSelect(product.identifier),
-              isBestValue: product.identifier.includes("pro"),
-              discountBadge: ((_a = product.period) == null ? void 0 : _a.includes("Y")) ? (() => {
-                const savings = getYearlySavingsPercent(
-                  product.identifier
-                );
+              id: pkg.packageId,
+              title: pkg.name,
+              price: ((_c = pkg.product) == null ? void 0 : _c.priceString) ?? "$0",
+              periodLabel: getPeriodLabel(((_d = pkg.product) == null ? void 0 : _d.period) ?? "monthly"),
+              features: formatters.getProductFeatures(pkg.packageId),
+              isSelected: selectedPlan === pkg.packageId,
+              isCurrentPlan: isCurrent,
+              onSelect: () => canSelect && handlePlanSelect(pkg.packageId),
+              enabled: isEnabled,
+              isBestValue: pkg.packageId.includes("pro"),
+              topBadge: isCurrent ? {
+                text: labels.currentPlanBadge,
+                color: "green"
+              } : void 0,
+              discountBadge: selectedPeriod === "yearly" ? (() => {
+                const savings = getYearlySavingsPercent(pkg);
                 return savings && savings > 0 ? {
                   text: formatters.formatSavePercent(savings),
                   isBestValue: true
                 } : void 0;
               })() : void 0,
-              introPriceNote: product.freeTrialPeriod ? getTrialLabel(product.freeTrialPeriod) : product.introPrice ? formatters.formatIntroNote(product.introPrice) : void 0,
-              disabled: isPurchasing || isRestoring
+              introPriceNote: ((_e = pkg.product) == null ? void 0 : _e.trialPeriod) ? (() => {
+                var _a2;
+                const period = (_a2 = pkg.product) == null ? void 0 : _a2.trialPeriod;
+                if (!period) return void 0;
+                const num = parseInt(
+                  period.replace(/\D/g, "") || "1",
+                  10
+                );
+                if (period.includes("W"))
+                  return formatters.formatTrialWeeks(num);
+                if (period.includes("M"))
+                  return formatters.formatTrialMonths(num);
+                return formatters.formatTrialDays(num);
+              })() : ((_f = pkg.product) == null ? void 0 : _f.introPrice) ? formatters.formatIntroNote(pkg.product.introPrice) : void 0,
+              disabled: isPurchasing || isRestoring || !canSelect
             },
-            product.identifier
+            pkg.packageId
           );
         })
       ] })
@@ -1591,21 +1644,46 @@ function AppSubscriptionsPage({
   );
 }
 function AppPricingPage({
-  products,
   isAuthenticated,
-  hasActiveSubscription,
-  currentProductIdentifier,
   labels,
   formatters,
-  entitlementMap,
-  entitlementLevels,
   onPlanClick,
   onFreePlanClick,
   faqItems,
   className,
-  onTrack
+  onTrack,
+  offerId
 }) {
-  const [billingPeriod, setBillingPeriod] = useState("monthly");
+  const {
+    subscription: currentSubscription,
+    isLoading: subscriptionLoading,
+    error: subscriptionError
+  } = useUserSubscription();
+  const hasActiveSubscription = (currentSubscription == null ? void 0 : currentSubscription.isActive) ?? false;
+  const currentProductIdentifier = currentSubscription == null ? void 0 : currentSubscription.productId;
+  const {
+    periods,
+    isLoading: periodsLoading,
+    error: periodsError
+  } = useSubscriptionPeriods(offerId);
+  const [selectedPeriod, setSelectedPeriod] = useState("monthly");
+  useEffect(() => {
+    if (periods.length > 0 && !periods.includes(selectedPeriod)) {
+      setSelectedPeriod(periods[0]);
+    }
+  }, [periods, selectedPeriod]);
+  const {
+    packages,
+    isLoading: packagesLoading,
+    error: packagesError
+  } = useSubscriptionForPeriod(offerId, selectedPeriod);
+  const {
+    subscribablePackageIds,
+    isLoading: subscribableLoading,
+    error: subscribableError
+  } = useSubscribable(offerId);
+  const isLoading = periodsLoading || packagesLoading || subscribableLoading || subscriptionLoading;
+  const error = periodsError || packagesError || subscribableError || subscriptionError;
   const track = useCallback(
     (label, params) => {
       onTrack == null ? void 0 : onTrack({
@@ -1620,7 +1698,7 @@ function AppPricingPage({
   const handleBillingPeriodChange = useCallback(
     (value) => {
       const newPeriod = value;
-      setBillingPeriod(newPeriod);
+      setSelectedPeriod(newPeriod);
       track("billing_period_changed", { billing_period: newPeriod });
     },
     [track]
@@ -1639,93 +1717,87 @@ 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");
-    return billingPeriod === "yearly" ? isYearly : !isYearly;
-  }).sort((a, b) => parseFloat(a.price) - parseFloat(b.price));
   const getPeriodLabel = useCallback(
     (period) => {
-      if (!period) return "";
-      if (period.includes("Y") || period.includes("year"))
-        return labels.periodYear;
-      if (period.includes("M") || period.includes("month"))
-        return labels.periodMonth;
-      if (period.includes("W") || period.includes("week"))
-        return labels.periodWeek;
-      return "";
+      switch (period) {
+        case "yearly":
+          return labels.periodYear;
+        case "monthly":
+          return labels.periodMonth;
+        case "weekly":
+          return labels.periodWeek;
+        default:
+          return period;
+      }
     },
     [labels]
   );
   const getYearlySavingsPercent = useCallback(
-    (yearlyPackageId) => {
-      var _a;
-      const yearlyEntitlement = entitlementMap[yearlyPackageId];
-      if (!yearlyEntitlement) return void 0;
-      const yearlyProduct = products.find(
-        (p) => p.identifier === yearlyPackageId
+    (yearlyPackage) => {
+      if (!yearlyPackage.product) return void 0;
+      const monthlyPackageId = yearlyPackage.packageId.replace(
+        "_yearly",
+        "_monthly"
       );
-      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 monthlyProduct = products.find(
-        (p) => p.identifier === monthlyPackageId
-      );
-      if (!monthlyProduct) return void 0;
-      const yearlyPrice = parseFloat(yearlyProduct.price);
-      const monthlyPrice = parseFloat(monthlyProduct.price);
+      const monthlyPkg = packages.find((p) => p.packageId === monthlyPackageId);
+      if (!(monthlyPkg == null ? void 0 : monthlyPkg.product)) return void 0;
+      const yearlyPrice = yearlyPackage.product.price;
+      const monthlyPrice = monthlyPkg.product.price;
       if (monthlyPrice <= 0 || yearlyPrice <= 0) return void 0;
       const annualizedMonthly = monthlyPrice * 12;
       const savings = (annualizedMonthly - yearlyPrice) / annualizedMonthly * 100;
       return Math.round(savings);
     },
-    [products, entitlementMap]
+    [packages]
   );
-  const billingPeriodOptions = [
-    { value: "monthly", label: labels.billingMonthly },
-    { value: "yearly", label: labels.billingYearly }
-  ];
+  const billingPeriodOptions = useMemo(() => {
+    return periods.map((period) => ({
+      value: period,
+      label: period === "monthly" ? labels.billingMonthly : labels.billingYearly
+    }));
+  }, [periods, labels]);
   const isCurrentPlan = useCallback(
-    (productId) => {
+    (packageId, productId) => {
       if (!isAuthenticated) return false;
       if (!hasActiveSubscription) return false;
-      return getProductLevel(productId) === currentLevel && currentLevel > 0;
+      return productId === currentProductIdentifier || packageId === currentProductIdentifier;
     },
-    [isAuthenticated, hasActiveSubscription, getProductLevel, currentLevel]
+    [isAuthenticated, hasActiveSubscription, currentProductIdentifier]
   );
-  const isUpgrade = useCallback(
-    (productId) => {
-      const productLevel = getProductLevel(productId);
-      return productLevel > currentLevel;
+  const isPackageEnabled = useCallback(
+    (packageId) => {
+      if (!isAuthenticated) return true;
+      if (subscribableLoading || subscribablePackageIds.length === 0)
+        return true;
+      return subscribablePackageIds.includes(packageId);
     },
-    [getProductLevel, currentLevel]
+    [isAuthenticated, subscribableLoading, subscribablePackageIds]
   );
+  const canUpgradeTo = useCallback(
+    (packageId, productId) => {
+      return isPackageEnabled(packageId) && !isCurrentPlan(packageId, productId);
+    },
+    [isPackageEnabled, isCurrentPlan]
+  );
+  const freeTierPackage = packages.find((p) => !p.product);
+  const paidPackages = packages.filter((p) => p.product);
   return /* @__PURE__ */ jsxs("div", { className, children: [
     /* @__PURE__ */ jsx(Section, { spacing: "2xl", maxWidth: "4xl", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx("h1", { className: "text-4xl sm:text-5xl font-bold text-theme-text-primary mb-4", children: labels.title }),
       /* @__PURE__ */ jsx("p", { className: "text-lg text-theme-text-secondary", children: labels.subtitle })
     ] }) }),
     /* @__PURE__ */ jsxs(Section, { spacing: "3xl", maxWidth: "6xl", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-8", children: /* @__PURE__ */ jsx(
+      periods.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-8", children: /* @__PURE__ */ jsx(
         SegmentedControl,
         {
           options: billingPeriodOptions,
-          value: billingPeriod,
+          value: selectedPeriod,
           onChange: handleBillingPeriodChange
         }
       ) }),
-      /* @__PURE__ */ jsxs(
+      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" }) }),
+      error && !isLoading && /* @__PURE__ */ jsx("div", { className: "text-center py-12 text-red-500", children: error.message }),
+      !isLoading && !error && /* @__PURE__ */ jsxs(
         "div",
         {
           style: {
@@ -1736,7 +1808,7 @@ function AppPricingPage({
             overflow: "visible"
           },
           children: [
-            /* @__PURE__ */ jsx(
+            freeTierPackage && /* @__PURE__ */ jsx(
               SubscriptionTile,
               {
                 id: "free",
@@ -1745,8 +1817,10 @@ function AppPricingPage({
                 periodLabel: labels.periodMonth,
                 features: labels.freeTierFeatures,
                 isSelected: false,
+                isCurrentPlan: isAuthenticated && !hasActiveSubscription,
                 onSelect: () => {
                 },
+                enabled: isPackageEnabled("free"),
                 topBadge: isAuthenticated && !hasActiveSubscription ? {
                   text: labels.currentPlanBadge,
                   color: "green"
@@ -1763,22 +1837,29 @@ function AppPricingPage({
                 hideSelectionIndicator: isAuthenticated
               }
             ),
-            filteredProducts.map((product) => {
-              var _a;
-              const isCurrent = isCurrentPlan(product.identifier);
-              const canUpgrade = isUpgrade(product.identifier);
+            paidPackages.map((pkg) => {
+              var _a, _b, _c, _d;
+              const isCurrent = isCurrentPlan(
+                pkg.packageId,
+                (_a = pkg.product) == null ? void 0 : _a.productId
+              );
+              const isEnabled = isPackageEnabled(pkg.packageId);
+              const canUpgrade = canUpgradeTo(
+                pkg.packageId,
+                (_b = pkg.product) == null ? void 0 : _b.productId
+              );
               let ctaButton;
               if (!isAuthenticated) {
                 ctaButton = {
                   label: labels.ctaLogIn,
-                  onClick: () => handlePlanClick(product.identifier, "login")
+                  onClick: () => handlePlanClick(pkg.packageId, "login")
                 };
               } else if (isCurrent) {
                 ctaButton = void 0;
               } else if (canUpgrade) {
                 ctaButton = {
                   label: labels.ctaUpgrade,
-                  onClick: () => handlePlanClick(product.identifier, "upgrade")
+                  onClick: () => handlePlanClick(pkg.packageId, "upgrade")
                 };
               }
               let topBadge;
@@ -1787,7 +1868,7 @@ function AppPricingPage({
                   text: labels.currentPlanBadge,
                   color: "green"
                 };
-              } else if (product.identifier.includes("pro")) {
+              } else if (pkg.packageId.includes("pro")) {
                 topBadge = {
                   text: labels.mostPopularBadge,
                   color: "yellow"
@@ -1796,20 +1877,20 @@ function AppPricingPage({
               return /* @__PURE__ */ jsx(
                 SubscriptionTile,
                 {
-                  id: product.identifier,
-                  title: product.title,
-                  price: product.priceString,
-                  periodLabel: getPeriodLabel(product.period),
-                  features: formatters.getProductFeatures(product.identifier),
+                  id: pkg.packageId,
+                  title: pkg.name,
+                  price: ((_c = pkg.product) == null ? void 0 : _c.priceString) ?? "$0",
+                  periodLabel: getPeriodLabel(((_d = pkg.product) == null ? void 0 : _d.period) ?? "monthly"),
+                  features: formatters.getProductFeatures(pkg.packageId),
                   isSelected: false,
+                  isCurrentPlan: isCurrent,
                   onSelect: () => {
                   },
-                  isBestValue: product.identifier.includes("pro"),
+                  enabled: isEnabled,
+                  isBestValue: pkg.packageId.includes("pro"),
                   topBadge,
-                  discountBadge: ((_a = product.period) == null ? void 0 : _a.includes("Y")) ? (() => {
-                    const savings = getYearlySavingsPercent(
-                      product.identifier
-                    );
+                  discountBadge: selectedPeriod === "yearly" ? (() => {
+                    const savings = getYearlySavingsPercent(pkg);
                     return savings && savings > 0 ? {
                       text: formatters.formatSavePercent(savings),
                       isBestValue: true
@@ -1818,7 +1899,7 @@ function AppPricingPage({
                   ctaButton,
                   hideSelectionIndicator: !ctaButton
                 },
-                product.identifier
+                pkg.packageId
               );
             })
           ]