@stigg/react-sdk 4.13.1 → 4.14.0

package/src/components/utils/priceTierUtils.ts

@@ -14,10 +14,12 @@ export function getTierByQuantity(tiers: PriceTierFragment[], quantity: number)
   if (!tiers) return undefined;
 
   const ascendingTiers = [...tiers];
-  ascendingTiers.sort((a, b) => a.upTo - b.upTo);
+  // Sort tiers by upTo value, ascending, if upTo is not set,
+  // put it at the end as it represent the last infinity tier
+  ascendingTiers.sort((a, b) => (!a.upTo ? 1 : !b.upTo ? -1 : a.upTo - b.upTo));
 
   for (const tier of ascendingTiers) {
-    if (quantity <= tier.upTo) {
+    if (tier.upTo && quantity <= tier.upTo) {
       return tier;
     }
   }
@@ -30,21 +32,52 @@ export function calculateTierPrice(
   currentTier: PriceTierFragment,
   selectedBillingPeriod: BillingPeriod,
   shouldShowMonthlyPriceAmount: boolean,
+  perUnitQuantity?: number,
 ): number {
+  const unitPrice =
+    selectedBillingPeriod === BillingPeriod.Annually && shouldShowMonthlyPriceAmount
+      ? currentTier.unitPrice.amount / 12
+      : currentTier.unitPrice.amount;
   switch (price.tiersMode) {
     case TiersMode.Volume: {
-      const unitPrice =
-        selectedBillingPeriod === BillingPeriod.Annually && shouldShowMonthlyPriceAmount
-          ? currentTier.unitPrice.amount / 12
-          : currentTier.unitPrice.amount;
-
-      return unitPrice * currentTier.upTo;
+      return unitPrice * (currentTier.upTo || 1);
+    }
+    case TiersMode.VolumePerUnit: {
+      return unitPrice * (perUnitQuantity || 1);
     }
     default:
       return 0;
   }
 }
 
+export function getSelectedTierQuantityBeFeature(
+  plan: PaywallPlan,
+  billingPeriod: BillingPeriod,
+  currentSubscription: Subscription | null,
+) {
+  const result: Record<string, number> = {};
+  const planTierPrices = plan.pricePoints.filter(
+    (price) => price.billingPeriod === billingPeriod && price.isTieredPrice,
+  );
+  if (planTierPrices.length === 1) {
+    const [price] = planTierPrices;
+    const featureId = price?.feature!.featureId;
+    if (currentSubscription && currentSubscription.plan.id === plan.id) {
+      const tieredPrice = currentSubscription?.prices.find(
+        (subscriptionPrice) =>
+          subscriptionPrice.pricingModel === BillingModel.PerUnit &&
+          subscriptionPrice.tiersMode &&
+          subscriptionPrice.feature?.featureId === featureId,
+      );
+      if (tieredPrice) {
+        result[featureId] = tieredPrice.feature?.unitQuantity || 1;
+      }
+    }
+  }
+
+  return result;
+}
+
 export function getSelectedTier(
   plan: PaywallPlan,
   billingPeriod: BillingPeriod,
@@ -64,7 +97,7 @@ export function getSelectedTier(
 
     if (selectedTierByFeature[featureId]) {
       currentTier = price.tiers?.find((tier) => tier.upTo === selectedTierByFeature[featureId].upTo) || currentTier;
-    } else if (currentSubscription) {
+    } else if (currentSubscription && currentSubscription.plan.id === plan.id) {
       const tieredPrice = currentSubscription.prices.find(
         (subscriptionPrice) =>
           subscriptionPrice.pricingModel === BillingModel.PerUnit &&
@@ -94,6 +127,7 @@ export enum PriceTierComparison {
 
 export function compareSelectedTierToCurrentTier(
   selectedTierByFeature: Record<string, PriceTierFragment>,
+  perUnitQuantityByFeature: Record<string, number>,
   currentSubscription: Subscription | null,
 ): PriceTierComparison {
   if (!currentSubscription || !selectedTierByFeature) {
@@ -108,22 +142,34 @@ export function compareSelectedTierToCurrentTier(
   }
 
   const { featureId, unitQuantity } = currentTierPrice.feature!;
+  const { tiersMode } = currentTierPrice;
 
   if (!unitQuantity) {
     return PriceTierComparison.Equal;
   }
 
   const selectedTier = selectedTierByFeature[featureId];
+  const selectedQuantity = perUnitQuantityByFeature[featureId];
   if (!selectedTier) {
     return PriceTierComparison.Equal;
   }
 
-  if (selectedTier.upTo < unitQuantity) {
-    return PriceTierComparison.Lower;
-  }
+  if (tiersMode === TiersMode.Volume) {
+    if (selectedTier.upTo && selectedTier.upTo < unitQuantity) {
+      return PriceTierComparison.Lower;
+    }
 
-  if (selectedTier.upTo > unitQuantity) {
-    return PriceTierComparison.Higher;
+    if (selectedTier.upTo && selectedTier.upTo > unitQuantity) {
+      return PriceTierComparison.Higher;
+    }
+  } else if (tiersMode === TiersMode.VolumePerUnit) {
+    if (selectedQuantity && selectedQuantity < unitQuantity) {
+      return PriceTierComparison.Lower;
+    }
+
+    if (selectedQuantity && selectedQuantity > unitQuantity) {
+      return PriceTierComparison.Higher;
+    }
   }
 
   return PriceTierComparison.Equal;

package/src/index.ts

@@ -9,6 +9,7 @@ export {
   SubscribeIntentionType,
   PaywallLocalization,
   PlanPriceText,
+  CurrentPlanParams,
 } from './components/paywall';
 export {
   CustomerPortalProvider,

package/src/stories/mocks/checkout/mockCheckoutPreview.ts

@@ -69,7 +69,7 @@ const billableFeatureCost = (plan: Plan, billingPeriod: BillingPeriod, featureId
   const { tiers } = price;
 
   if (tiers) {
-    const quantityTier = tiers.find((tier) => tier.upTo >= quantity);
+    const quantityTier = tiers.find((tier) => tier.upTo && tier.upTo >= quantity);
     const priceTier = quantityTier || tiers[tiers.length - 1];
     return quantity * priceTier.unitPrice.amount;
   }