@stigg/react-sdk 5.2.1 → 5.4.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.2.1",
+  "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/hooks/usePlanStepModel.ts

@@ -75,7 +75,7 @@ function getBillableFeatures(
 
       if (price.isTieredPrice && !hasTierWithUnitPrice(price.tiers)) {
         const tier = getTierByQuantity(price.tiers!, quantity);
-        quantity = tier!.upTo!;
+        quantity = tier.upTo!;
       }
 
       return {

package/src/components/checkout/steps/plan/CheckoutChargeList.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 import { BillableFeatureInput } from '@stigg/api-client-js/src/generated/sdk';
-import { BillingModel, BillingPeriod, Plan, Price, PriceTierFragment } from '@stigg/js-client-sdk';
+import { BillingModel, BillingPeriod, Plan, Price } from '@stigg/js-client-sdk';
 
 import { Typography } from '../../../common/Typography';
 import { useChargesSort } from '../../../hooks/useChargeSort';
@@ -12,7 +12,6 @@ import { currencyPriceFormatter } from '../../../utils/currencyUtils';
 import { InputField } from '../../components';
 import { useCheckoutModel, usePlanStepModel, useProgressBarModel } from '../../hooks';
 import { TiersSelectContainer } from '../../../common/TiersSelectContainer';
-import { getTierByQuantity } from '../../../utils/priceTierUtils';
 import { getValidPriceQuantity } from '../../../utils/priceUtils';
 import { getFeatureDisplayNameText } from '../../../utils/getFeatureName';
 
@@ -104,20 +103,14 @@ export function PlanCharge({
       chargeRow += ' / unit';
     }
   } else if (charge.isTieredPrice && charge.tiersMode && featureId) {
-    const tier = getTierByQuantity(charge.tiers!, billableFeature!.quantity || 1);
+    const quantity = billableFeature?.quantity || 1;
     chargeRow = (
       <TiersSelectContainer
         componentId={`${featureId}-tiers`}
         tiers={charge.tiers}
-        selectedTier={tier}
-        handleTierChange={(tier: PriceTierFragment) => {
-          if (tier.upTo) {
-            setBillableFeature(featureId, tier.upTo);
-          }
-        }}
         tiersMode={charge.tiersMode}
-        perUnitQuantity={billableFeature?.quantity}
-        handlePerUnitQuantityChange={(quantity: number) => {
+        value={quantity}
+        handleChange={(quantity: number) => {
           setBillableFeature(featureId, quantity);
         }}
         width={120}

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/common/TiersSelectContainer.tsx

@@ -1,7 +1,7 @@
 import { PriceTierFragment, TiersMode } from '@stigg/js-client-sdk';
 import React from 'react';
 import styled from '@emotion/styled/macro';
-import { getTierByQuantity, hasTierWithUnitPrice } from '../utils/priceTierUtils';
+import { hasTierWithUnitPrice } from '../utils/priceTierUtils';
 import { Typography } from './Typography';
 import { VolumePerUnitInput } from './VolumePerUnitInput';
 import { VolumeBulkSelect } from './VolumeBulkSelect';
@@ -10,11 +10,9 @@ export type TiersSelectContainerProps = {
   componentId: string;
   tiers?: PriceTierFragment[] | null;
   tierUnits?: string;
-  selectedTier?: PriceTierFragment;
-  handleTierChange: (tier: PriceTierFragment) => void;
   tiersMode?: TiersMode | null;
-  handlePerUnitQuantityChange: (quantity: number) => void;
-  perUnitQuantity?: number;
+  handleChange: (quantity: number) => void;
+  value: number;
   width?: number;
 };
 
@@ -23,20 +21,11 @@ const TiersSelectLayout = styled(Typography)`
 `;
 
 export function TiersSelectContainer(props: TiersSelectContainerProps) {
-  const { tiers, handleTierChange } = props;
-  const handleChange = (quantity: number) => {
-    if (!tiers) return;
-
-    handleTierChange(getTierByQuantity(tiers, quantity)!);
-  };
+  const { tiers } = props;
 
   return (
     <TiersSelectLayout as="div" className="stigg-price-tier-select">
-      {hasTierWithUnitPrice(tiers) ? (
-        <VolumePerUnitInput handleChange={handleChange} {...props} />
-      ) : (
-        <VolumeBulkSelect handleChange={handleChange} {...props} />
-      )}
+      {hasTierWithUnitPrice(tiers) ? <VolumePerUnitInput {...props} /> : <VolumeBulkSelect {...props} />}
     </TiersSelectLayout>
   );
 }

package/src/components/common/VolumeBulkSelect.tsx

@@ -29,12 +29,12 @@ const TierInput = styled(OutlinedInput)`
 `;
 
 export function VolumeBulkSelect({
-  selectedTier,
+  value,
   componentId,
   tierUnits,
   tiers,
   handleChange,
-}: Pick<TiersSelectContainerProps, 'selectedTier' | 'componentId' | 'tiers' | 'tierUnits'> & {
+}: Pick<TiersSelectContainerProps, 'value' | 'componentId' | 'tiers' | 'tierUnits'> & {
   handleChange: (quantity: number) => void;
 }) {
   if (!tiers) {
@@ -43,10 +43,13 @@ export function VolumeBulkSelect({
 
   return (
     <TierSelect
-      value={selectedTier ? selectedTier.upTo?.toString() : tiers[0].upTo?.toString()}
+      value={value.toString()}
       fullWidth
       onChange={(event) => {
-        handleChange(event.target.value as number);
+        const quantity = event?.target?.value ? Number(event?.target?.value) : null;
+        if (quantity) {
+          handleChange(quantity);
+        }
       }}
       id={componentId}
       input={<TierInput />}

package/src/components/common/VolumePerUnitInput.tsx

@@ -7,10 +7,9 @@ import { TiersSelectContainerProps } from './TiersSelectContainer';
 export function VolumePerUnitInput({
   width,
   tierUnits,
-  perUnitQuantity,
-  handlePerUnitQuantityChange,
+  value,
   handleChange,
-}: Pick<TiersSelectContainerProps, 'width' | 'tierUnits' | 'perUnitQuantity' | 'handlePerUnitQuantityChange'> & {
+}: Pick<TiersSelectContainerProps, 'width' | 'tierUnits' | 'value'> & {
   handleChange: (quantity: number) => void;
 }) {
   return (
@@ -27,12 +26,11 @@ export function VolumePerUnitInput({
           </InputAdornment>
         ),
       }}
-      value={perUnitQuantity || 1}
+      value={value}
       onChange={(event) => {
         const quantity = event?.target?.value ? Number(event?.target?.value) : null;
         if (quantity) {
           handleChange(quantity);
-          handlePerUnitQuantityChange(quantity);
         }
       }}
     />

package/src/components/paywall/Paywall.tsx

@@ -17,7 +17,7 @@ import { useStiggContext } from '../..';
 import { hasPricePointsForPlans } from './utils/hasPricePoints';
 import { getPlansToDisplay } from './utils/getPlansToDisplay';
 import { getPlanPrice } from '../utils/getPlanPrice';
-import { getSelectedTier } from '../utils/priceTierUtils';
+import { getTiersPerUnitQuantities } from '../utils/priceTierUtils';
 
 const PaywallPlansContainer = styled.div`
   color: ${({ theme }) => theme.stigg.palette.text.primary};
@@ -123,7 +123,7 @@ export const Paywall = ({
     return (
       !isCustomerInCustomPlan &&
       plansToShow.some((plan) => {
-        const tiers = getSelectedTier(plan, selectedBillingPeriod, currentSubscription, {});
+        const tiers = getTiersPerUnitQuantities(plan, selectedBillingPeriod, currentSubscription);
         return Object.values(tiers).length > 0;
       })
     );

package/src/components/paywall/PlanOffering.tsx

@@ -1,12 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import {
-  BillableFeature,
-  BillingPeriod,
-  Customer,
-  PriceTierFragment,
-  PricingType,
-  Subscription,
-} from '@stigg/js-client-sdk';
+import React, { useState } from 'react';
+import { BillableFeature, BillingPeriod, Customer, PricingType, Subscription } from '@stigg/js-client-sdk';
 import styled from '@emotion/styled/macro';
 import classNames from 'classnames';
 import Grid from '@mui/material/Grid';
@@ -18,7 +11,7 @@ import { flexLayoutMapper } from '../../theme/getResolvedTheme';
 import { Typography } from '../common/Typography';
 import MiniSchedule from '../../assets/mini-schedule.svg';
 import { PlanPrice } from './PlanPrice';
-import { getSelectedTier, getSelectedTierQuantityBeFeature } from '../utils/priceTierUtils';
+import { getTiersPerUnitQuantities } from '../utils/priceTierUtils';
 
 const PlanOfferingButtonHeight = '66px';
 
@@ -167,28 +160,17 @@ export function PlanOffering({
     );
   }
 
-  const [perUnitQuantityByFeature, setPerUnitQuantityByFeature] = useState<Record<string, number>>({});
-  const [selectedTierByFeature, setSelectedTierByFeature] = useState<Record<string, PriceTierFragment>>(
-    getSelectedTier(plan, billingPeriod, currentSubscription, {}, selectDefaultTierIndex),
+  const [perUnitQuantityByFeature, setPerUnitQuantityByFeature] = useState<Record<string, number>>(
+    getTiersPerUnitQuantities(plan, billingPeriod, currentSubscription, selectDefaultTierIndex),
   );
 
-  useEffect(() => {
-    setSelectedTierByFeature(getSelectedTier(plan, billingPeriod, currentSubscription, selectedTierByFeature));
-    setPerUnitQuantityByFeature(getSelectedTierQuantityBeFeature(plan, billingPeriod, currentSubscription));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [billingPeriod, currentSubscription, plan]);
-
   const onPlanButtonClick = (intentionType: SubscribeIntentionType) => {
-    const tierBillableFeatures: BillableFeature[] = Object.keys(selectedTierByFeature).map((featureId) => ({
-      featureId,
-      quantity: selectedTierByFeature[featureId].upTo || 0,
-    }));
     const perUnitBillableFeatures: BillableFeature[] = Object.keys(perUnitQuantityByFeature).map((featureId) => ({
       featureId,
       quantity: perUnitQuantityByFeature[featureId],
     }));
 
-    return onPlanSelected(intentionType, { ...tierBillableFeatures, ...perUnitBillableFeatures });
+    return onPlanSelected(intentionType, perUnitBillableFeatures);
   };
 
   return (
@@ -216,8 +198,6 @@ export function PlanOffering({
           withUnitPriceRow={withUnitPriceRow}
           withStartingAtRow={withStartingAtRow}
           withTiersRow={withTiersRow}
-          selectedTierByFeature={selectedTierByFeature}
-          setSelectedTierByFeature={setSelectedTierByFeature}
           plan={plan}
           billingPeriod={billingPeriod}
           paywallLocale={paywallLocale}
@@ -239,7 +219,6 @@ export function PlanOffering({
             onPlanSelected={onPlanButtonClick}
             paywallLocale={paywallLocale}
             withTrialLeftRow={withTrialLeftRow}
-            selectedTierByFeature={selectedTierByFeature}
             perUnitQuantityByFeature={perUnitQuantityByFeature}
           />
         ) : (

package/src/components/paywall/PlanOfferingButton.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { BillingPeriod, Customer, PriceTierFragment, PricingType, Subscription } from '@stigg/js-client-sdk';
+import { BillingPeriod, Customer, PricingType, Subscription } from '@stigg/js-client-sdk';
 import { isFunction } from 'lodash';
 import ClipLoader from 'react-spinners/ClipLoader';
 import styled from '@emotion/styled/macro';
@@ -82,7 +82,6 @@ type PlanOfferingButtonProps = {
   paywallLocale: PaywallLocalization;
   onPlanSelected: (intentionType: SubscribeIntentionType) => void | Promise<void>;
   withTrialLeftRow: boolean;
-  selectedTierByFeature: Record<string, PriceTierFragment>;
   perUnitQuantityByFeature: Record<string, number>;
 };
 
@@ -96,7 +95,6 @@ export function PlanOfferingButton({
   paywallLocale,
   withTrialLeftRow,
   currentSubscription,
-  selectedTierByFeature,
   perUnitQuantityByFeature,
 }: PlanOfferingButtonProps) {
   const theme = useTheme();
@@ -144,11 +142,7 @@ export function PlanOfferingButton({
       isSameBillingPeriod ||
       (plan.pricingType && [PricingType.Free, PricingType.Custom].includes(plan.pricingType))
     ) {
-      const planComparison = compareSelectedTierToCurrentTier(
-        selectedTierByFeature,
-        perUnitQuantityByFeature,
-        currentSubscription,
-      );
+      const planComparison = compareSelectedTierToCurrentTier(perUnitQuantityByFeature, currentSubscription);
       switch (planComparison) {
         case PriceTierComparison.Lower:
           buttonProps.intentionType = SubscribeIntentionType.CHANGE_UNIT_QUANTITY;

package/src/components/paywall/PlanPrice.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled/macro';
-import { BillingPeriod, PriceTierFragment } from '@stigg/js-client-sdk';
+import { BillingPeriod } from '@stigg/js-client-sdk';
 import { PaywallPlan } from './types';
 import { PaywallLocalization } from './paywallTextOverrides';
 import { getPlanPrice } from '../utils/getPlanPrice';
@@ -57,8 +57,6 @@ export const PlanPrice = ({
   withUnitPriceRow,
   withStartingAtRow,
   withTiersRow,
-  selectedTierByFeature,
-  setSelectedTierByFeature,
   plan,
   billingPeriod,
   paywallLocale,
@@ -72,8 +70,6 @@ export const PlanPrice = ({
   withUnitPriceRow: boolean;
   withStartingAtRow: boolean;
   withTiersRow: boolean;
-  selectedTierByFeature: Record<string, PriceTierFragment>;
-  setSelectedTierByFeature: React.Dispatch<React.SetStateAction<Record<string, PriceTierFragment>>>;
   perUnitQuantityByFeature: Record<string, number>;
   setPerUnitQuantityByFeature: React.Dispatch<React.SetStateAction<Record<string, number>>>;
   plan: PaywallPlan;
@@ -89,7 +85,6 @@ export const PlanPrice = ({
     paywallLocale,
     locale,
     hasMonthlyPrice,
-    selectedTierByFeature,
     perUnitQuantityByFeature,
   );
 
@@ -98,19 +93,7 @@ export const PlanPrice = ({
     return planPrice.billingPeriod === billingPeriod && planPrice.isTieredPrice;
   });
   const featureId = tieredPrice ? tieredPrice.feature!.featureId : undefined;
-  const selectedTier = featureId ? selectedTierByFeature[featureId] : undefined;
-  const perUnitQuantity = featureId ? perUnitQuantityByFeature[featureId] : undefined;
-
-  const handleTierChange = (tier: PriceTierFragment) => {
-    if (!featureId) {
-      return;
-    }
-
-    setSelectedTierByFeature((prevState) => ({
-      ...prevState,
-      [featureId]: tier,
-    }));
-  };
+  const perUnitQuantity = perUnitQuantityByFeature[featureId || ''] ?? 1;
 
   const handlePerUnitQuantityChange = (quantity: number) => {
     if (!featureId) {
@@ -161,11 +144,9 @@ export const PlanPrice = ({
             componentId={`${plan.id}_${featureId}_tier`}
             tiers={tiers}
             tierUnits={tierUnits}
-            selectedTier={selectedTier}
-            handleTierChange={handleTierChange}
             tiersMode={tieredPrice?.tiersMode}
-            handlePerUnitQuantityChange={handlePerUnitQuantityChange}
-            perUnitQuantity={perUnitQuantity}
+            handleChange={handlePerUnitQuantityChange}
+            value={perUnitQuantity}
           />
         ) : null}
       </>

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

@@ -1,10 +1,4 @@
-import {
-  BillingModel,
-  BillingPeriod,
-  PaywallCalculatedPricePoint,
-  Price,
-  PriceTierFragment,
-} from '@stigg/js-client-sdk';
+import { BillingModel, BillingPeriod, PaywallCalculatedPricePoint, Price } from '@stigg/js-client-sdk';
 import { currencyPriceFormatter } from './currencyUtils';
 import { PlanPriceText } from './getPlanPrice';
 import { calculateTierPrice, getPriceFeatureUnit } from './priceTierUtils';
@@ -16,7 +10,6 @@ type GetPaidPriceTextParams = {
   selectedBillingPeriod: BillingPeriod;
   locale: string;
   shouldShowMonthlyPriceAmount: boolean;
-  selectedTierByFeature: Record<string, PriceTierFragment>;
   paywallLocale: PaywallLocalization;
   perUnitQuantityByFeature?: Record<string, number>;
 };
@@ -27,7 +20,6 @@ export function getPaidPriceText({
   selectedBillingPeriod,
   locale,
   shouldShowMonthlyPriceAmount,
-  selectedTierByFeature,
   paywallLocale,
   perUnitQuantityByFeature,
 }: GetPaidPriceTextParams): PlanPriceText {
@@ -46,22 +38,12 @@ export function getPaidPriceText({
   let unit = pricePeriod;
 
   for (const price of planPrices) {
-    if (price.isTieredPrice) {
-      let currentTier = price.tiers![0];
-      if (selectedTierByFeature[price.feature!.featureId]) {
-        currentTier = selectedTierByFeature[price.feature!.featureId] || currentTier;
+    if (price.isTieredPrice && price.tiers) {
+      const quantity = perUnitQuantityByFeature?.[price.feature!.featureId] || 1;
+      tiers = price.tiers;
+      tierUnits = getPriceFeatureUnit(price);
 
-        tiers = price.tiers;
-        tierUnits = getPriceFeatureUnit(price);
-      }
-
-      priceNumber += calculateTierPrice(
-        price,
-        currentTier,
-        selectedBillingPeriod,
-        shouldShowMonthlyPriceAmount,
-        perUnitQuantityByFeature?.[price.feature!.featureId] || 1,
-      );
+      priceNumber += calculateTierPrice(price, quantity, selectedBillingPeriod, shouldShowMonthlyPriceAmount);
     }
   }
 

package/src/components/utils/getPlanPrice.ts

@@ -15,7 +15,6 @@ export function getPlanPrice(
   paywallLocale: PaywallLocalization,
   locale: string,
   shouldShowMonthlyPriceAmount: boolean,
-  selectedTierByFeature?: Record<string, PriceTierFragment>,
   perUnitQuantityByFeature?: Record<string, number>,
 ): PlanPriceText {
   switch (plan.pricingType) {
@@ -48,7 +47,6 @@ export function getPlanPrice(
         planPrices,
         paywallCalculatedPrice,
         selectedBillingPeriod: billingPeriod,
-        selectedTierByFeature: selectedTierByFeature || {},
         perUnitQuantityByFeature: perUnitQuantityByFeature || {},
       };
 

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 },
+      ]);
+    });
+  });
+});