@stigg/react-sdk 5.2.1 → 5.3.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.2.1",
+  "version": "5.3.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -75,7 +75,7 @@ export const BilledPriceLineItem = ({
   let amount;
   if (price.isTieredPrice) {
     const tier = getTierByQuantity(price.tiers!, quantity);
-    amount = calculateTierPriceVolume(tier!, quantity);
+    amount = calculateTierPriceVolume(tier, quantity);
   } else {
     amount = price.amount!;
   }

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/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, selectedBillingPeriod, shouldShowMonthlyPriceAmount, quantity);
     }
   }
 

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.ts

@@ -11,9 +11,7 @@ export function getPriceFeatureUnit(price: Price) {
   return (price.feature.unitQuantity !== 1 ? price.feature.unitsPlural : price.feature.units) || '';
 }
 
-export function getTierByQuantity(tiers: PriceTierFragment[], quantity: number) {
-  if (!tiers) return undefined;
-
+export function getTierByQuantity(tiers: PriceTierFragment[], quantity: number): PriceTierFragment {
   const ascendingTiers = [...tiers];
   // Sort tiers by upTo value, ascending, if upTo is not set,
   // put it at the end as it represent the last infinity tier
@@ -54,64 +52,34 @@ export function calculateTierPriceVolume(
 
 export function calculateTierPrice(
   price: Price,
-  currentTier: PriceTierFragment,
   selectedBillingPeriod: BillingPeriod,
   shouldShowMonthlyPriceAmount: boolean,
-  perUnitQuantity: number,
+  unitQuantity: number,
 ): number {
+  if (!price.tiers) {
+    return 0;
+  }
+
   switch (price.tiersMode) {
     case TiersMode.Volume: {
-      return calculateTierPriceVolume(
-        currentTier,
-        perUnitQuantity,
-        selectedBillingPeriod,
-        shouldShowMonthlyPriceAmount,
-      );
+      const currentTier = getTierByQuantity(price.tiers, unitQuantity);
+      return calculateTierPriceVolume(currentTier, unitQuantity, selectedBillingPeriod, shouldShowMonthlyPriceAmount);
     }
     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 hasTierWithUnitPrice(tiers: PriceTierFragment[] | null | undefined) {
   return tiers?.some(({ unitPrice, upTo }) => unitPrice && !isNil(upTo));
 }
 
-export function getSelectedTier(
+export function getTiersPerUnitQuantities(
   plan: PaywallPlan,
   billingPeriod: BillingPeriod,
   currentSubscription: Subscription | null,
-  selectedTierByFeature: Record<string, PriceTierFragment>,
   selectDefaultTierIndex?: SelectDefaultTierIndexFn,
-): Record<string, PriceTierFragment> {
+): Record<string, number> {
   const planTierPrices = plan.pricePoints.filter(
     (price) => price.billingPeriod === billingPeriod && price.isTieredPrice,
   );
@@ -120,11 +88,10 @@ export function getSelectedTier(
     const [price] = planTierPrices;
     const { featureId } = price.feature!;
     const selectedDefaultTierIndex = selectDefaultTierIndex ? selectDefaultTierIndex({ plan }) : 0;
-    let currentTier = price.tiers![selectedDefaultTierIndex];
+    const currentTier = price.tiers![selectedDefaultTierIndex];
+    let quantity = hasTierWithUnitPrice(price.tiers) ? 1 : currentTier.upTo || 1;
 
-    if (selectedTierByFeature[featureId]) {
-      currentTier = price.tiers?.find((tier) => tier.upTo === selectedTierByFeature[featureId].upTo) || currentTier;
-    } else if (currentSubscription && currentSubscription.plan.id === plan.id) {
+    if (currentSubscription && currentSubscription.plan.id === plan.id) {
       const tieredPrice = currentSubscription.prices.find(
         (subscriptionPrice) =>
           subscriptionPrice.pricingModel === BillingModel.PerUnit &&
@@ -133,12 +100,12 @@ export function getSelectedTier(
       );
 
       if (tieredPrice) {
-        currentTier = getTierByQuantity(price.tiers!, tieredPrice.feature!.unitQuantity || 1)!;
+        quantity = tieredPrice.feature!.unitQuantity || 1;
       }
     }
 
-    const result: Record<string, PriceTierFragment> = {};
-    result[featureId] = currentTier;
+    const result: Record<string, number> = {};
+    result[featureId] = quantity;
 
     return result;
   }
@@ -153,11 +120,10 @@ export enum PriceTierComparison {
 }
 
 export function compareSelectedTierToCurrentTier(
-  selectedTierByFeature: Record<string, PriceTierFragment>,
   perUnitQuantityByFeature: Record<string, number>,
   currentSubscription: Subscription | null,
 ): PriceTierComparison {
-  if (!currentSubscription || !selectedTierByFeature) {
+  if (!currentSubscription) {
     return PriceTierComparison.Equal;
   }
 
@@ -168,29 +134,19 @@ export function compareSelectedTierToCurrentTier(
     return PriceTierComparison.Equal;
   }
 
-  const { featureId, unitQuantity } = currentTierPrice.feature!;
-  const { tiers } = currentTierPrice;
-
-  if (!unitQuantity) {
-    return PriceTierComparison.Equal;
-  }
+  const { featureId, unitQuantity: oldQuantity } = currentTierPrice.feature!;
 
-  const selectedTier = selectedTierByFeature[featureId];
-  const selectedQuantity = perUnitQuantityByFeature[featureId];
-  if (!selectedTier) {
+  if (isNil(oldQuantity)) {
     return PriceTierComparison.Equal;
   }
 
-  const effectiveQuantity = hasTierWithUnitPrice(tiers) ? selectedQuantity : selectedTier.upTo;
+  const newQuantity = perUnitQuantityByFeature[featureId];
 
-  if (!isNil(effectiveQuantity)) {
-    if (effectiveQuantity < unitQuantity) {
-      return PriceTierComparison.Lower;
-    }
-    if (effectiveQuantity > unitQuantity) {
-      return PriceTierComparison.Higher;
-    }
+  if (newQuantity < oldQuantity) {
+    return PriceTierComparison.Lower;
+  }
+  if (newQuantity > oldQuantity) {
+    return PriceTierComparison.Higher;
   }
-
   return PriceTierComparison.Equal;
 }