@stigg/react-sdk 4.1.1 → 4.2.0

package/src/components/paywall/planPriceTier.ts

@@ -0,0 +1,105 @@
+import { PaywallPlan } from './types';
+
+import { BillingModel, TiersMode, BillingPeriod, Price, PriceTierFragment, Subscription } from '@stigg/js-client-sdk';
+
+export function calculateTierPrice(
+  price: Price,
+  currentTier: PriceTierFragment,
+  selectedBillingPeriod: BillingPeriod,
+  shouldShowMonthlyPriceAmount: boolean,
+): number {
+  switch (price.tiersMode) {
+    case TiersMode.Volume:
+      const unitPrice =
+        selectedBillingPeriod === BillingPeriod.Annually && shouldShowMonthlyPriceAmount
+          ? currentTier.unitPrice.amount / 12
+          : currentTier.unitPrice.amount;
+
+      return unitPrice * currentTier.upTo;
+  }
+
+  return 0;
+}
+
+export function getSelectedTier(
+  plan: PaywallPlan,
+  billingPeriod: BillingPeriod,
+  currentSubscription: Subscription | null,
+  selectedTierByFeature: Record<string, PriceTierFragment>,
+): Record<string, PriceTierFragment> {
+  const planTierPrices = plan.pricePoints.filter(price => price.billingPeriod === billingPeriod && price.isTieredPrice);
+
+  if (planTierPrices.length == 1) {
+    const [price] = planTierPrices;
+    const featureId = price.feature!.featureId;
+
+    let currentTier = price.tiers![0];
+
+    if (selectedTierByFeature[featureId]) {
+      currentTier = price.tiers?.find(tier => tier.upTo === selectedTierByFeature[featureId].upTo) || currentTier;
+    } else if (currentSubscription) {
+      const tieredPrice = currentSubscription.prices.find(
+        subscriptionPrice =>
+          subscriptionPrice.pricingModel == BillingModel.PerUnit &&
+          subscriptionPrice.billingPeriod == billingPeriod &&
+          subscriptionPrice.tiersMode &&
+          subscriptionPrice.feature?.featureId === featureId,
+      );
+
+      if (tieredPrice) {
+        const customerTier = tieredPrice.tiers!.find(tier => tier.upTo === tieredPrice.feature!.unitQuantity);
+        currentTier = customerTier || tieredPrice.tiers![0];
+      }
+    }
+
+    const result: Record<string, PriceTierFragment> = {};
+    result[featureId] = currentTier;
+
+    return result;
+  }
+
+  return {};
+}
+
+export enum PriceTierComparison {
+  Lower = -1,
+  Equal = 0,
+  Higher = 1,
+}
+
+export function compareSelectedTierToCurrentTier(
+  selectedTierByFeature: Record<string, PriceTierFragment>,
+  currentSubscription: Subscription | null,
+): PriceTierComparison {
+  if (!currentSubscription || !selectedTierByFeature) {
+    return PriceTierComparison.Equal;
+  }
+
+  const currentTierPrice = currentSubscription.prices.find(
+    price => price.pricingModel == BillingModel.PerUnit && price.tiersMode,
+  );
+  if (!currentTierPrice) {
+    return PriceTierComparison.Equal;
+  }
+
+  const { featureId, unitQuantity } = currentTierPrice.feature!;
+
+  if (!unitQuantity) {
+    return PriceTierComparison.Equal;
+  }
+
+  const selectedTier = selectedTierByFeature[featureId];
+  if (!selectedTier) {
+    return PriceTierComparison.Equal;
+  }
+
+  if (selectedTier.upTo < unitQuantity!) {
+    return PriceTierComparison.Lower;
+  }
+
+  if (selectedTier.upTo > unitQuantity!) {
+    return PriceTierComparison.Higher;
+  }
+
+  return PriceTierComparison.Equal;
+}

package/src/components/paywall/types.ts

@@ -6,6 +6,7 @@ import {
   CustomerPortalSubscriptionScheduledUpdateDataFragment,
   PaywallCurrency,
   PaywallCalculatedPricePoint,
+  BillableFeature,
 } from '@stigg/js-client-sdk';
 import { CustomizedTheme } from '../../theme/Theme';
 
@@ -50,10 +51,12 @@ export type OnPlanSelectedCallbackFn = ({
   subscription,
   intentionType,
   selectedBillingPeriod,
+  billableFeatures,
 }: {
   plan: Plan;
   customer: Customer | null;
   subscription: Subscription | null;
   intentionType: SubscribeIntentionType;
   selectedBillingPeriod: BillingPeriod;
+  billableFeatures?: BillableFeature[];
 }) => void | Promise<void>;

package/src/components/utils/getPaidPriceText.ts

@@ -1,6 +1,13 @@
-import { BillingModel, BillingPeriod, PaywallCalculatedPricePoint, Price } from '@stigg/js-client-sdk';
+import {
+  BillingModel,
+  BillingPeriod,
+  PaywallCalculatedPricePoint,
+  Price,
+  PriceTierFragment,
+} from '@stigg/js-client-sdk';
 import { currencyPriceFormatter } from './currencyUtils';
 import { PlanPriceText } from './getPlanPrice';
+import { calculateTierPrice } from '../paywall/planPriceTier';
 
 type GetPaidPriceTextParams = {
   planPrices: Price[];
@@ -8,6 +15,7 @@ type GetPaidPriceTextParams = {
   selectedBillingPeriod: BillingPeriod;
   locale: string;
   shouldShowMonthlyPriceAmount: boolean;
+  selectedTierByFeature: Record<string, PriceTierFragment>;
 };
 
 export function getPaidPriceText({
@@ -16,32 +24,48 @@ export function getPaidPriceText({
   selectedBillingPeriod,
   locale,
   shouldShowMonthlyPriceAmount,
+  selectedTierByFeature,
 }: GetPaidPriceTextParams): PlanPriceText {
   const { amount, currency } = paywallCalculatedPrice || planPrices[0];
+  const priceAmount = amount || 0;
+
   const isSinglePrice = planPrices.length === 1;
-  const priceNumber =
-    selectedBillingPeriod === BillingPeriod.Annually && shouldShowMonthlyPriceAmount ? amount / 12 : amount;
-  const priceString = currencyPriceFormatter({ amount: priceNumber, currency: currency, locale });
+  let priceNumber =
+    selectedBillingPeriod === BillingPeriod.Annually && shouldShowMonthlyPriceAmount ? priceAmount / 12 : priceAmount;
+
+  let tiers;
+  let tierUnits;
+  let unit = shouldShowMonthlyPriceAmount ? '/ month' : '/ year';
+
+  for (const price of planPrices) {
+    if (price.isTieredPrice) {
+      let currentTier = price.tiers![0];
+      if (selectedTierByFeature[price.feature!.featureId]) {
+        currentTier = selectedTierByFeature[price.feature!.featureId] || currentTier;
+
+        tiers = price.tiers;
+        tierUnits = price.feature!.unitsPlural || '';
+      }
+
+      priceNumber += calculateTierPrice(price, currentTier, selectedBillingPeriod, shouldShowMonthlyPriceAmount);
+    }
+  }
 
   if (isSinglePrice) {
-    const [price] = planPrices;
-    if (price.pricingModel === BillingModel.PerUnit) {
-      const featureUnit = price.feature?.units || '';
-      return {
-        price: priceString,
-        unit: shouldShowMonthlyPriceAmount ? `per ${featureUnit} / month` : `per ${featureUnit} / year`,
-      };
+    const price = planPrices[0];
+    const featureUnit = price.feature?.units || '';
+
+    if (price.pricingModel === BillingModel.PerUnit && !price.isTieredPrice) {
+      unit = shouldShowMonthlyPriceAmount ? `per ${featureUnit} / month` : `per ${featureUnit} / year`;
     } else if (price.pricingModel === BillingModel.UsageBased) {
-      const featureUnit = price.feature?.units || '';
-      return {
-        price: priceString,
-        unit: `per ${featureUnit}`,
-      };
+      unit = `per ${featureUnit}`;
     }
   }
 
   return {
-    price: priceString,
-    unit: shouldShowMonthlyPriceAmount ? '/ month' : '/ year',
+    price: currencyPriceFormatter({ amount: priceNumber, currency: currency, locale }),
+    unit: unit,
+    tiers: tiers,
+    tierUnits: tierUnits,
   };
 }

package/src/components/utils/getPlanPrice.ts

@@ -1,4 +1,4 @@
-import { BillingPeriod, PricingType } from '@stigg/js-client-sdk';
+import { BillingPeriod, PriceTierFragment, PricingType } from '@stigg/js-client-sdk';
 import { PaywallPlan } from '../paywall';
 import { PaywallLocalization } from '../paywall';
 import { getPaidPriceText } from './getPaidPriceText';
@@ -6,6 +6,8 @@ import { getPaidPriceText } from './getPaidPriceText';
 export type PlanPriceText = {
   price: string;
   unit?: string;
+  tiers?: PriceTierFragment[] | null | undefined;
+  tierUnits?: string;
 };
 
 export function getPlanPrice(
@@ -14,6 +16,7 @@ export function getPlanPrice(
   paywallLocale: PaywallLocalization,
   locale: string,
   shouldShowMonthlyPriceAmount: boolean,
+  selectedTierByFeature?: Record<string, PriceTierFragment>,
 ): PlanPriceText {
   switch (plan.pricingType) {
     case PricingType.Free:
@@ -38,7 +41,12 @@ export function getPlanPrice(
         };
       }
 
-      const paidParams = { planPrices, paywallCalculatedPrice, selectedBillingPeriod: billingPeriod };
+      const paidParams = {
+        planPrices,
+        paywallCalculatedPrice,
+        selectedBillingPeriod: billingPeriod,
+        selectedTierByFeature: selectedTierByFeature || {},
+      };
 
       return paywallLocale.price.paid
         ? paywallLocale.price.paid({ ...paidParams, plan })