@stigg/react-sdk 5.3.0 → 5.4.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.3.0",
+  "version": "5.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -13,7 +13,7 @@
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
+    "test": "tsdx test",
     "lint": "eslint src --ext .ts,.tsx --max-warnings=0",
     "lint-fix": "yarn run lint --fix",
     "size": "size-limit",

package/src/components/checkout/summary/components/LineItems.tsx

@@ -10,7 +10,7 @@ import {
 } from '@stigg/js-client-sdk';
 import { Typography } from '../../../common/Typography';
 import { currencyPriceFormatter } from '../../../utils/currencyUtils';
-import { calculateTierPriceVolume, getTierByQuantity } from '../../../utils/priceTierUtils';
+import { calculateTierPrice } from '../../../utils/priceTierUtils';
 import { WithSkeleton } from './WithSkeleton';
 import { Skeleton } from '../../components/Skeletons.style';
 import { CheckoutLocalization } from '../../configurations/textOverrides';
@@ -74,14 +74,11 @@ export const BilledPriceLineItem = ({
 
   let amount;
   if (price.isTieredPrice) {
-    const tier = getTierByQuantity(price.tiers!, quantity);
-    amount = calculateTierPriceVolume(tier, quantity);
+    amount = calculateTierPrice(price, quantity);
   } else {
-    amount = price.amount!;
+    amount = price.amount! * quantity;
   }
 
-  const totalLineAmount = price.isTieredPrice ? amount : amount * quantity;
-
   return (
     <LineItemContainer>
       <LineItemRow style={{ alignItems: 'flex-start' }}>
@@ -91,7 +88,7 @@ export const BilledPriceLineItem = ({
           </Typography>
           {(quantity > 1 || billingPeriod === BillingPeriod.Annually) && (
             <Typography variant="body1" color="secondary">
-              {getPriceString({ amount: totalLineAmount, price, quantity })}
+              {getPriceString({ amount, price, quantity })}
             </Typography>
           )}
         </Grid>
@@ -99,7 +96,7 @@ export const BilledPriceLineItem = ({
           {isPayAsYouGo && <PayAsYouGoPriceTooltip checkoutLocalization={checkoutLocalization} />}
           <Typography variant="body1" color="secondary" style={{ wordBreak: 'break-word' }}>
             {currencyPriceFormatter({
-              amount: totalLineAmount,
+              amount,
               currency: price.currency,
               minimumFractionDigits: 2,
             })}

package/src/components/utils/calculateDiscountRate.ts

@@ -1,7 +1,7 @@
 import { BillingPeriod, PaywallCalculatedPricePoint, Price } from '@stigg/js-client-sdk';
 import isNil from 'lodash/isNil';
 import { PaywallPlan } from '../paywall';
-import { calculateTierPriceVolume } from './priceTierUtils';
+import { calculateTierPrice } from './priceTierUtils';
 
 export function calculateDiscountRate(monthlyPrice?: number | null, annuallyPrice?: number | null) {
   if (!isNil(monthlyPrice) && !isNil(annuallyPrice)) {
@@ -27,7 +27,7 @@ function getPlanBillingPeriodAmount(plan: PaywallPlan, billingPeriod: BillingPer
     });
 
     if (tieredPrice) {
-      return calculateTierPriceVolume(tieredPrice.tiers![0], 1);
+      return calculateTierPrice(tieredPrice, 1);
     }
   }
 

package/src/components/utils/fixtures/price.fixtures.ts

@@ -0,0 +1,42 @@
+import { Currency, Price, TiersMode } from '@stigg/js-client-sdk';
+
+export const money = (amount: number, currency: Currency) => ({ amount, currency });
+
+export const priceTiersFlat = (tiersMode: TiersMode, currency: Currency): Pick<Price, 'tiers' | 'tiersMode'> => {
+  return {
+    tiersMode,
+    tiers: [
+      {
+        upTo: 10,
+        flatPrice: money(100, currency),
+      },
+      {
+        upTo: 20,
+        flatPrice: money(180, currency),
+      },
+      {
+        upTo: 30,
+        flatPrice: money(240, currency),
+      },
+    ],
+  };
+};
+
+export const priceTiersUnit = (tiersMode: TiersMode, currency: Currency): Pick<Price, 'tiers' | 'tiersMode'> => {
+  return {
+    tiersMode,
+    tiers: [
+      {
+        upTo: 10,
+        unitPrice: money(10, currency),
+      },
+      {
+        upTo: 20,
+        unitPrice: money(9, currency),
+      },
+      {
+        unitPrice: money(8, currency),
+      },
+    ],
+  };
+};

package/src/components/utils/getPaidPriceText.ts

@@ -43,7 +43,7 @@ export function getPaidPriceText({
       tiers = price.tiers;
       tierUnits = getPriceFeatureUnit(price);
 
-      priceNumber += calculateTierPrice(price, selectedBillingPeriod, shouldShowMonthlyPriceAmount, quantity);
+      priceNumber += calculateTierPrice(price, quantity, selectedBillingPeriod, shouldShowMonthlyPriceAmount);
     }
   }
 

package/src/components/utils/priceTierUtils.spec.ts

@@ -0,0 +1,84 @@
+import { Currency, TiersMode } from '@stigg/js-client-sdk';
+import { priceTiersFlat, priceTiersUnit } from './fixtures/price.fixtures';
+import { calculateTierPrice, calculateTierPriceGraduated } from './priceTierUtils';
+
+describe('getPrice tests', () => {
+  describe('volume flat price', () => {
+    test('should get total price', () => {
+      const price = priceTiersFlat(TiersMode.Volume, Currency.Usd);
+      expect(calculateTierPrice(price, 1)).toEqual(100);
+      expect(calculateTierPrice(price, 3)).toEqual(100);
+      expect(calculateTierPrice(price, 7)).toEqual(100);
+      expect(calculateTierPrice(price, 10)).toEqual(100);
+      expect(calculateTierPrice(price, 11)).toEqual(180);
+      expect(calculateTierPrice(price, 14)).toEqual(180);
+      expect(calculateTierPrice(price, 20)).toEqual(180);
+      expect(calculateTierPrice(price, 21)).toEqual(240);
+      expect(calculateTierPrice(price, 25)).toEqual(240);
+      expect(calculateTierPrice(price, 30)).toEqual(240);
+
+      // questionable behaviour, but that's the current implementation :)
+      expect(calculateTierPrice(price, 35)).toEqual(240);
+      expect(calculateTierPrice(price, 250)).toEqual(240);
+    });
+  });
+
+  describe('volume per unit', () => {
+    test('should get total price', () => {
+      const price = priceTiersUnit(TiersMode.Volume, Currency.Usd);
+      expect(calculateTierPrice(price, 1)).toEqual(10);
+      expect(calculateTierPrice(price, 3)).toEqual(30);
+      expect(calculateTierPrice(price, 7)).toEqual(70);
+      expect(calculateTierPrice(price, 10)).toEqual(100);
+      expect(calculateTierPrice(price, 11)).toEqual(99);
+      expect(calculateTierPrice(price, 14)).toEqual(126);
+      expect(calculateTierPrice(price, 20)).toEqual(180);
+      expect(calculateTierPrice(price, 21)).toEqual(168);
+      expect(calculateTierPrice(price, 25)).toEqual(200);
+      expect(calculateTierPrice(price, 30)).toEqual(240);
+      expect(calculateTierPrice(price, 35)).toEqual(280);
+      expect(calculateTierPrice(price, 240)).toEqual(1_920);
+    });
+  });
+
+  describe('graduated', () => {
+    test('should get total price', () => {
+      const price = priceTiersUnit(TiersMode.Graduated, Currency.Usd);
+      expect(calculateTierPrice(price, 1)).toEqual(10);
+      expect(calculateTierPrice(price, 3)).toEqual(30);
+      expect(calculateTierPrice(price, 7)).toEqual(70);
+      expect(calculateTierPrice(price, 10)).toEqual(100);
+      expect(calculateTierPrice(price, 11)).toEqual(109);
+      expect(calculateTierPrice(price, 14)).toEqual(136);
+      expect(calculateTierPrice(price, 20)).toEqual(190);
+      expect(calculateTierPrice(price, 21)).toEqual(198);
+      expect(calculateTierPrice(price, 25)).toEqual(230);
+      expect(calculateTierPrice(price, 30)).toEqual(270);
+      expect(calculateTierPrice(price, 35)).toEqual(310);
+      expect(calculateTierPrice(price, 240)).toEqual(1_950);
+    });
+
+    test('should return nested breakdown', () => {
+      const price = priceTiersUnit(TiersMode.Graduated, Currency.Usd);
+
+      const result1 = calculateTierPriceGraduated(price.tiers!, 10);
+      expect(result1.total).toEqual(100);
+      expect(result1.breakdown).toEqual([{ unitQuantity: 10, amount: 100 }]);
+
+      const result2 = calculateTierPriceGraduated(price.tiers!, 13);
+      expect(result2.total).toEqual(127);
+      expect(result2.breakdown).toEqual([
+        { unitQuantity: 10, amount: 100 },
+        { unitQuantity: 3, amount: 27 },
+      ]);
+
+      const result3 = calculateTierPriceGraduated(price.tiers!, 35);
+      expect(result3.total).toEqual(310);
+      expect(result3.breakdown).toEqual([
+        { unitQuantity: 10, amount: 100 },
+        { unitQuantity: 10, amount: 90 },
+        { unitQuantity: 15, amount: 120 },
+      ]);
+    });
+  });
+});

package/src/components/utils/priceTierUtils.ts

@@ -1,5 +1,6 @@
 import { BillingModel, TiersMode, BillingPeriod, Price, PriceTierFragment, Subscription } from '@stigg/js-client-sdk';
 import isNil from 'lodash/isNil';
+import { sum } from 'lodash';
 import { PaywallPlan } from '../paywall';
 import { SelectDefaultTierIndexFn } from '../paywall/types';
 
@@ -30,7 +31,7 @@ function getAmount(amount: number, selectedBillingPeriod?: BillingPeriod, should
   return selectedBillingPeriod === BillingPeriod.Annually && shouldShowMonthlyPriceAmount ? amount / 12 : amount;
 }
 
-export function calculateTierPriceVolume(
+function calculateTierPriceVolume(
   currentTier: PriceTierFragment,
   perUnitQuantity: number,
   selectedBillingPeriod?: BillingPeriod,
@@ -50,11 +51,55 @@ export function calculateTierPriceVolume(
   return amount;
 }
 
+export function calculateTierPriceGraduated(
+  tiers: PriceTierFragment[],
+  unitQuantity: number,
+  selectedBillingPeriod?: BillingPeriod,
+  shouldShowMonthlyPriceAmount?: boolean,
+): { total: number; breakdown: Array<{ unitQuantity: number; amount: number }> } {
+  let remainingQuantity = unitQuantity;
+  let prevUpTo = 0;
+  let currentTierIndex = 0;
+
+  const breakdown: Array<{ unitQuantity: number; amount: number }> = [];
+
+  while (remainingQuantity > 0 && currentTierIndex < tiers.length) {
+    const tier = tiers[currentTierIndex];
+    const { upTo } = tier;
+
+    if (isNil(upTo)) {
+      breakdown.push({
+        unitQuantity: remainingQuantity,
+        amount: calculateTierPriceVolume(tier, remainingQuantity, selectedBillingPeriod, shouldShowMonthlyPriceAmount),
+      });
+      remainingQuantity = 0;
+    } else {
+      const unitsInTier = upTo - prevUpTo;
+      const consumed = Math.min(remainingQuantity, unitsInTier);
+      breakdown.push({
+        unitQuantity: consumed,
+        amount: calculateTierPriceVolume(tier, consumed, selectedBillingPeriod, shouldShowMonthlyPriceAmount),
+      });
+      remainingQuantity -= consumed;
+      prevUpTo = upTo;
+    }
+
+    currentTierIndex += 1;
+  }
+
+  const total = sum(breakdown.map(({ amount }) => amount));
+
+  return {
+    breakdown,
+    total,
+  };
+}
+
 export function calculateTierPrice(
-  price: Price,
-  selectedBillingPeriod: BillingPeriod,
-  shouldShowMonthlyPriceAmount: boolean,
+  price: Pick<Price, 'tiers' | 'tiersMode'>,
   unitQuantity: number,
+  selectedBillingPeriod?: BillingPeriod,
+  shouldShowMonthlyPriceAmount?: boolean,
 ): number {
   if (!price.tiers) {
     return 0;
@@ -65,6 +110,10 @@ export function calculateTierPrice(
       const currentTier = getTierByQuantity(price.tiers, unitQuantity);
       return calculateTierPriceVolume(currentTier, unitQuantity, selectedBillingPeriod, shouldShowMonthlyPriceAmount);
     }
+    case TiersMode.Graduated: {
+      return calculateTierPriceGraduated(price.tiers, unitQuantity, selectedBillingPeriod, shouldShowMonthlyPriceAmount)
+        .total;
+    }
     default:
       return 0;
   }