@sudobility/building_blocks 0.0.60 → 0.0.64

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));
@@ -1258,212 +1259,54 @@ 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,
+  offerId,
   rateLimitsConfig,
-  subscriptionUserId,
   labels,
   formatters,
+  onPurchase,
+  onRestore,
   onPurchaseSuccess,
   onRestoreSuccess,
   onError,
   onWarning,
-  onTrack,
-  offerId
+  onTrack
 }) {
-  const { subscribablePackageIds } = useSubscribable(offerId);
   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,
+    update: updateSubscription
+  } = useUserSubscription();
+  useEffect(() => {
+    updateSubscription();
+  }, [updateSubscription]);
+  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);
-  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({
@@ -1475,32 +1318,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();
@@ -1523,31 +1433,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();
@@ -1563,10 +1460,8 @@ function AppSubscriptionsPage({
       setIsRestoring(false);
     }
   }, [
-    clearError,
     track,
-    restore,
-    subscriptionUserId,
+    onRestore,
     onRestoreSuccess,
     labels.errorTitle,
     labels.restoreNoPurchases,
@@ -1582,41 +1477,20 @@ 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;
+  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(" ");
     },
-    [products, labels.labelPremium]
-  );
-  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);
-    },
-    [formatters]
+    [packages, labels.labelPremium]
   );
   const formatRateLimit = useCallback(
     (limit) => {
@@ -1625,44 +1499,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) => {
-      const yearlyProduct = products.find(
-        (p) => p.identifier === yearlyPackageId
-      );
-      if (!yearlyProduct) return void 0;
-      const monthlyPackageId = yearlyPackageId.replace("_yearly", "_monthly");
-      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]
-  );
-  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,
@@ -1671,8 +1514,9 @@ function AppSubscriptionsPage({
           fields: [
             {
               label: labels.labelPlan,
-              value: formatProductIdentifier(
-                currentSubscription.productIdentifier
+              value: formatProductName(
+                currentSubscription.packageId,
+                currentSubscription.productId
               )
             },
             {
@@ -1702,11 +1546,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,
@@ -1722,19 +1566,19 @@ 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: [
-        !(currentSubscription == null ? void 0 : currentSubscription.isActive) && /* @__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(),
+            features: labels.freeTierFeatures,
             isSelected: selectedPlan === null,
             isCurrentPlan: !(currentSubscription == null ? void 0 : currentSubscription.isActive),
             onSelect: () => handlePlanSelect(null),
-            enabled: subscribablePackageIds.includes("free"),
+            enabled: isPackageEnabled("free"),
             topBadge: {
               text: labels.currentPlanBadge,
               color: "green"
@@ -1744,42 +1588,59 @@ function AppSubscriptionsPage({
           },
           "free"
         ),
-        filteredProducts.map((product) => {
-          var _a;
-          const isCurrent = isCurrentPlanProduct(product.identifier);
-          const isEnabled = isPackageEnabled(product.identifier);
-          const canUpgrade = canUpgradeTo(product.identifier);
+        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,
+              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(product.identifier),
+              onSelect: () => canSelect && handlePlanSelect(pkg.packageId),
               enabled: isEnabled,
-              isBestValue: product.identifier.includes("pro"),
+              isBestValue: pkg.packageId.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
-                );
+              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,
+              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
           );
         })
       ] })
@@ -1787,10 +1648,7 @@ function AppSubscriptionsPage({
   );
 }
 function AppPricingPage({
-  products,
   isAuthenticated,
-  hasActiveSubscription,
-  currentProductIdentifier,
   labels,
   formatters,
   onPlanClick,
@@ -1800,8 +1658,40 @@ function AppPricingPage({
   onTrack,
   offerId
 }) {
-  const [billingPeriod, setBillingPeriod] = useState("monthly");
-  const { subscribablePackageIds } = useSubscribable(offerId);
+  const {
+    subscription: currentSubscription,
+    isLoading: subscriptionLoading,
+    error: subscriptionError,
+    update: updateSubscription
+  } = useUserSubscription();
+  useEffect(() => {
+    updateSubscription();
+  }, [updateSubscription]);
+  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({
@@ -1816,7 +1706,7 @@ function AppPricingPage({
   const handleBillingPeriodChange = useCallback(
     (value) => {
       const newPeriod = value;
-      setBillingPeriod(newPeriod);
+      setSelectedPeriod(newPeriod);
       track("billing_period_changed", { billing_period: newPeriod });
     },
     [track]
@@ -1835,84 +1725,87 @@ function AppPricingPage({
     },
     [track, onPlanClick]
   );
-  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) => {
-      const yearlyProduct = products.find(
-        (p) => p.identifier === yearlyPackageId
-      );
-      if (!yearlyProduct) return void 0;
-      const monthlyPackageId = yearlyPackageId.replace("_yearly", "_monthly");
-      const monthlyProduct = products.find(
-        (p) => p.identifier === monthlyPackageId
+    (yearlyPackage) => {
+      if (!yearlyPackage.product) return void 0;
+      const monthlyPackageId = yearlyPackage.packageId.replace(
+        "_yearly",
+        "_monthly"
       );
-      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]
+    [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 productId === currentProductIdentifier;
+      return productId === currentProductIdentifier || packageId === currentProductIdentifier;
     },
     [isAuthenticated, hasActiveSubscription, currentProductIdentifier]
   );
   const isPackageEnabled = useCallback(
-    (productId) => {
+    (packageId) => {
       if (!isAuthenticated) return true;
-      return subscribablePackageIds.includes(productId);
+      if (subscribableLoading || subscribablePackageIds.length === 0)
+        return true;
+      return subscribablePackageIds.includes(packageId);
     },
-    [isAuthenticated, subscribablePackageIds]
+    [isAuthenticated, subscribableLoading, subscribablePackageIds]
   );
   const canUpgradeTo = useCallback(
-    (productId) => {
-      return isPackageEnabled(productId) && !isCurrentPlan(productId);
+    (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: {
@@ -1923,7 +1816,7 @@ function AppPricingPage({
             overflow: "visible"
           },
           children: [
-            /* @__PURE__ */ jsx(
+            freeTierPackage && /* @__PURE__ */ jsx(
               SubscriptionTile,
               {
                 id: "free",
@@ -1935,10 +1828,7 @@ function AppPricingPage({
                 isCurrentPlan: isAuthenticated && !hasActiveSubscription,
                 onSelect: () => {
                 },
-                enabled: (
-                  // Free tier enabled: not authenticated, or in subscribable list
-                  !isAuthenticated || subscribablePackageIds.includes("free")
-                ),
+                enabled: isPackageEnabled("free"),
                 topBadge: isAuthenticated && !hasActiveSubscription ? {
                   text: labels.currentPlanBadge,
                   color: "green"
@@ -1955,23 +1845,29 @@ function AppPricingPage({
                 hideSelectionIndicator: isAuthenticated
               }
             ),
-            filteredProducts.map((product) => {
-              var _a;
-              const isCurrent = isCurrentPlan(product.identifier);
-              const isEnabled = isPackageEnabled(product.identifier);
-              const canUpgrade = canUpgradeTo(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;
@@ -1980,7 +1876,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"
@@ -1989,22 +1885,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: () => {
                   },
                   enabled: isEnabled,
-                  isBestValue: product.identifier.includes("pro"),
+                  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
@@ -2013,7 +1907,7 @@ function AppPricingPage({
                   ctaButton,
                   hideSelectionIndicator: !ctaButton
                 },
-                product.identifier
+                pkg.packageId
               );
             })
           ]