@stigg/react-sdk 4.13.2 → 4.15.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.13.2",
+  "version": "4.15.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -112,7 +112,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.12.0",
-    "@stigg/js-client-sdk": "2.24.6",
+    "@stigg/js-client-sdk": "2.25.0",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@types/styled-components": "^5.1.26",

package/src/components/checkout/hooks/usePlanStepModel.ts

@@ -1,6 +1,6 @@
 import keyBy from 'lodash/keyBy';
 import compact from 'lodash/compact';
-import { BillableFeatureInput, BillingPeriod } from '@stigg/api-client-js/src/generated/sdk';
+import { BillableFeatureInput, BillingPeriod, TiersMode } from '@stigg/api-client-js/src/generated/sdk';
 import { BillableFeature, BillingModel, Plan, Price, Subscription } from '@stigg/js-client-sdk';
 import { useCheckoutContext } from '../CheckoutProvider';
 import { getTierByQuantity } from '../../utils/priceTierUtils';
@@ -73,9 +73,9 @@ function getBillableFeatures(
 
       quantity = getValidPriceQuantity(price, preconfiguredQuantity || 1);
 
-      if (price.isTieredPrice) {
+      if (price.isTieredPrice && price.tiersMode === TiersMode.Volume) {
         const tier = getTierByQuantity(price.tiers!, quantity);
-        quantity = tier!.upTo;
+        quantity = tier!.upTo!;
       }
 
       return {

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

@@ -103,7 +103,7 @@ export function PlanCharge({
     if (isPayAsYouGo) {
       chargeRow += ' / unit';
     }
-  } else if (charge.isTieredPrice && featureId) {
+  } else if (charge.isTieredPrice && charge.tiersMode && featureId) {
     const tier = getTierByQuantity(charge.tiers!, billableFeature!.quantity || 1);
     chargeRow = (
       <TiersSelectContainer
@@ -111,8 +111,16 @@ export function PlanCharge({
         tiers={charge.tiers}
         selectedTier={tier}
         handleTierChange={(tier: PriceTierFragment) => {
-          setBillableFeature(featureId, tier.upTo);
+          if (tier.upTo) {
+            setBillableFeature(featureId, tier.upTo);
+          }
         }}
+        tiersMode={charge.tiersMode}
+        perUnitQuantity={billableFeature?.quantity}
+        handlePerUnitQuantityChange={(quantity: number) => {
+          setBillableFeature(featureId, quantity);
+        }}
+        width={120}
       />
     );
   } else {

package/src/components/common/TiersSelectContainer.tsx

@@ -1,78 +1,49 @@
-import { PriceTierFragment } from '@stigg/js-client-sdk';
-import MenuItem from '@mui/material/MenuItem';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import { map } from 'lodash';
-import React, { ReactNode } from 'react';
+import { PriceTierFragment, TiersMode } from '@stigg/js-client-sdk';
+import React from 'react';
 import styled from '@emotion/styled/macro';
 import { getTierByQuantity } from '../utils/priceTierUtils';
 import { Typography } from './Typography';
+import { VolumePerUnitInput } from './VolumePerUnitInput';
+import { VolumeBulkSelect } from './VolumeBulkSelect';
 
-const TierSelect = styled(Select)`
-  border-radius: 10px;
-  min-height: 42px;
-  min-width: 120px;
-
-  &:hover .MuiOutlinedInput-notchedOutline {
-    border-color: ${({ theme }) => theme.stigg.palette.outlinedBorder};
-  }
-`;
-
-const TierInput = styled(OutlinedInput)`
-  & .MuiInputBase-input {
-    padding: 10px 12px;
-  }
-
-  &.Mui-focused .MuiOutlinedInput-notchedOutline {
-    border-color: ${({ theme }) => theme.stigg.palette.primary} !important;
-  }
-`;
-
-export function TiersSelectContainer({
-  componentId,
-  tiers,
-  tierUnits,
-  selectedTier,
-  handleTierChange,
-}: {
+export type TiersSelectContainerProps = {
   componentId: string;
   tiers?: PriceTierFragment[] | null;
   tierUnits?: string;
   selectedTier?: PriceTierFragment;
   handleTierChange: (tier: PriceTierFragment) => void;
-}) {
-  const handleChange = (event: SelectChangeEvent<unknown>, _: ReactNode) => {
+  tiersMode?: TiersMode | null;
+  handlePerUnitQuantityChange: (quantity: number) => void;
+  perUnitQuantity?: number;
+  width?: number;
+};
+
+const TiersSelectLayout = styled(Typography)`
+  min-height: 46px;
+`;
+
+export function TiersSelectContainer(props: TiersSelectContainerProps) {
+  const { tiers, tiersMode, handleTierChange } = props;
+  const handleChange = (quantity: number) => {
     if (!tiers) return;
 
-    handleTierChange(getTierByQuantity(tiers, event.target.value as number)!);
+    handleTierChange(getTierByQuantity(tiers, quantity)!);
+  };
+
+  const getContent = () => {
+    switch (tiersMode) {
+      case TiersMode.VolumePerUnit:
+        return <VolumePerUnitInput handleChange={handleChange} {...props} />;
+      case TiersMode.Volume:
+        return <VolumeBulkSelect handleChange={handleChange} {...props} />;
+      default:
+        return <div />;
+    }
   };
 
   return (
-    <Typography as="div" className="stigg-price-tier-select" style={{ minHeight: '46px' }}>
-      {tiers ? (
-        <TierSelect
-          value={selectedTier ? selectedTier.upTo.toString() : tiers[0].upTo.toString()}
-          fullWidth
-          onChange={handleChange}
-          id={componentId}
-          input={<TierInput />}
-          MenuProps={{
-            MenuListProps: { disablePadding: true },
-            PaperProps: {
-              sx: { marginTop: '4px', borderRadius: '10px' },
-            },
-          }}>
-          {map(tiers, (tier: PriceTierFragment) => (
-            <MenuItem className="stigg-price-tier-menu-item-text" key={tier.upTo} value={tier.upTo.toString()}>
-              <Typography variant="body1" color="primary" style={{ lineHeight: 'unset' }}>
-                {tier.upTo} {tierUnits}
-              </Typography>
-            </MenuItem>
-          ))}
-        </TierSelect>
-      ) : (
-        <div />
-      )}
-    </Typography>
+    <TiersSelectLayout as="div" className="stigg-price-tier-select">
+      {getContent()}
+    </TiersSelectLayout>
   );
 }

package/src/components/common/VolumeBulkSelect.tsx

@@ -0,0 +1,68 @@
+import { PriceTierFragment } from '@stigg/js-client-sdk';
+import styled from '@emotion/styled/macro';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { map } from 'lodash';
+import React from 'react';
+import { Typography } from './Typography';
+import { TiersSelectContainerProps } from './TiersSelectContainer';
+
+const TierSelect = styled(Select)`
+  border-radius: 10px;
+  min-height: 42px;
+  min-width: 120px;
+
+  &:hover .MuiOutlinedInput-notchedOutline {
+    border-color: ${({ theme }) => theme.stigg.palette.outlinedBorder};
+  }
+`;
+
+const TierInput = styled(OutlinedInput)`
+  & .MuiInputBase-input {
+    padding: 10px 12px;
+  }
+
+  &.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: ${({ theme }) => theme.stigg.palette.primary} !important;
+  }
+`;
+
+export function VolumeBulkSelect({
+  selectedTier,
+  componentId,
+  tierUnits,
+  tiers,
+  handleChange,
+}: Pick<TiersSelectContainerProps, 'selectedTier' | 'componentId' | 'tiers' | 'tierUnits'> & {
+  handleChange: (quantity: number) => void;
+}) {
+  if (!tiers) {
+    return null;
+  }
+
+  return (
+    <TierSelect
+      value={selectedTier ? selectedTier.upTo?.toString() : tiers[0].upTo?.toString()}
+      fullWidth
+      onChange={(event) => {
+        handleChange(event.target.value as number);
+      }}
+      id={componentId}
+      input={<TierInput />}
+      MenuProps={{
+        MenuListProps: { disablePadding: true },
+        PaperProps: {
+          sx: { marginTop: '4px', borderRadius: '10px' },
+        },
+      }}>
+      {map(tiers, (tier: PriceTierFragment) => (
+        <MenuItem className="stigg-price-tier-menu-item-text" key={tier.upTo} value={tier.upTo?.toString()}>
+          <Typography variant="body1" color="primary" style={{ lineHeight: 'unset' }}>
+            {tier.upTo} {tierUnits}
+          </Typography>
+        </MenuItem>
+      ))}
+    </TierSelect>
+  );
+}

package/src/components/common/VolumePerUnitInput.tsx

@@ -0,0 +1,40 @@
+import InputAdornment from '@mui/material/InputAdornment';
+import React from 'react';
+import { Typography } from './Typography';
+import { InputField } from '../checkout/components';
+import { TiersSelectContainerProps } from './TiersSelectContainer';
+
+export function VolumePerUnitInput({
+  width,
+  tierUnits,
+  perUnitQuantity,
+  handlePerUnitQuantityChange,
+  handleChange,
+}: Pick<TiersSelectContainerProps, 'width' | 'tierUnits' | 'perUnitQuantity' | 'handlePerUnitQuantityChange'> & {
+  handleChange: (quantity: number) => void;
+}) {
+  return (
+    <InputField
+      type="number"
+      fullWidth
+      sx={{ minHeight: '46px', width }}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <Typography variant="body1" color="primary">
+              {tierUnits}
+            </Typography>
+          </InputAdornment>
+        ),
+      }}
+      value={perUnitQuantity || 1}
+      onChange={(event) => {
+        const quantity = event?.target?.value ? Number(event?.target?.value) : null;
+        if (quantity) {
+          handleChange(quantity);
+          handlePerUnitQuantityChange(quantity);
+        }
+      }}
+    />
+  );
+}

package/src/components/customerPortal/CustomerPortal.tsx

@@ -5,7 +5,7 @@ import { CustomerPortalContainer } from './CustomerPortalContainer';
 import { DeepPartial } from '../../types';
 import { CustomerPortalLocalization } from './customerPortalTextOverrides';
 import { CustomerPortalTheme } from './customerPortalTheme';
-import { OnBuyMoreCallbackFn } from './types';
+import { OnBuyMoreCallbackFn, OnManageSubscriptionFn } from './types';
 
 export type CustomerPortalSection =
   | 'usage'
@@ -16,7 +16,7 @@ export type CustomerPortalSection =
   | 'invoices';
 
 export type CustomerPortalProps = {
-  onManageSubscription?: () => Promise<void> | void;
+  onManageSubscription?: OnManageSubscriptionFn;
   onBuyMore?: OnBuyMoreCallbackFn;
   onCancelScheduledUpdates?: (subscription: CustomerPortalSubscription) => Promise<void> | void;
   onContactSupport?: () => Promise<void> | void;

package/src/components/customerPortal/CustomerPortalContainer.tsx

@@ -8,6 +8,9 @@ import { CustomerPortalLayout, CustomerPortalSections } from './CustomerPortal.s
 import { CustomerPortalProps } from './CustomerPortal';
 import { InvoicesSection, useStiggContext } from '../..';
 import { CustomerUsageData } from './usage/CustomerUsageData';
+import { CustomerPortalIntentionType } from './types';
+
+export type OnManageClick = ({ intentionType }: { intentionType: CustomerPortalIntentionType }) => void;
 
 export function CustomerPortalContainer({
   onManageSubscription,
@@ -21,10 +24,12 @@ export function CustomerPortalContainer({
   const { customerPortal, textOverrides, theme, isLoading } = useCustomerPortalContext();
   const customerPortalSectionRef = useRef<HTMLDivElement>(null);
 
-  const onManageClick = () => {
+  const onManageClick: OnManageClick = ({ intentionType }: { intentionType: CustomerPortalIntentionType }) => {
     if (onManageSubscription) {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      onManageSubscription();
+      void onManageSubscription({
+        intentionType,
+        customerSubscriptions: customerPortal?.subscriptions ?? [],
+      });
     } else {
       customerPortalSectionRef?.current?.scrollIntoView({ behavior: 'smooth' });
     }

package/src/components/customerPortal/index.ts

@@ -6,3 +6,6 @@ export { CustomerUsageData, CustomerUsageDataProps } from './usage/CustomerUsage
 export { AddonsList } from './subscriptionOverview/tabs/AddonsList';
 export { Promotions } from './subscriptionOverview/tabs/Promotions';
 export { CustomerPortalProvider } from './CustomerPortalProvider';
+export { CustomerPortalLocalization } from './customerPortalTextOverrides';
+export { CustomerPortalTheme } from './customerPortalTheme';
+export * from './types';

package/src/components/customerPortal/subscriptionOverview/SubscriptionsOverview.tsx

@@ -11,9 +11,10 @@ import { UpcomingBilling } from './upcomingBilling/UpcomingBilling';
 import { SubscriptionView } from './subscriptionView/SubscriptionView';
 import { ChargeList } from './charges/ChargeList';
 import { OnBuyMoreCallbackFn } from '../types';
+import { OnManageClick } from '../CustomerPortalContainer';
 
 export type SubscriptionsOverviewProps = {
-  onManageSubscription: () => void;
+  onManageSubscription: OnManageClick;
   onBuyMore?: OnBuyMoreCallbackFn;
   onCancelScheduledUpdates?: (subscription: CustomerPortalSubscription) => void;
   onContactSupport?: () => void;

package/src/components/customerPortal/subscriptionOverview/SubscriptionsOverviewHeader.tsx

@@ -6,9 +6,11 @@ import EditIcon from '../../../assets/edit-icon.svg';
 import { CustomerPortalLocalization } from '../customerPortalTextOverrides';
 import { SectionHeader } from '../common/SectionHeader';
 import { SectionTitle } from '../common/SectionTitle';
+import { OnManageClick } from '../CustomerPortalContainer';
+import { CustomerPortalIntentionType } from '../types';
 
 type SubscriptionsOverviewHeaderProps = {
-  onManageSubscription: () => void;
+  onManageSubscription: OnManageClick;
   hideManageButton: boolean;
   textOverrides: CustomerPortalLocalization;
 };
@@ -28,7 +30,10 @@ export function SubscriptionsOverviewHeader({
     <SectionHeader className="stigg-customer-portal-overview-header" $disableMargin>
       <SectionTitle title="Subscription" className="stigg-overview-title" />
       {!hideManageButton && (
-        <StyledButton className="stigg-manage-subscription-button" variant="outlined" onClick={onManageSubscription}>
+        <StyledButton
+          className="stigg-manage-subscription-button"
+          variant="outlined"
+          onClick={() => onManageSubscription({ intentionType: CustomerPortalIntentionType.MANAGE_SUBSCRIPTION })}>
           <StyledEditIcon className="stigg-manage-subscription-button-image" />
           <Typography
             className="stigg-manage-subscription-button-text"

package/src/components/customerPortal/subscriptionOverview/charges/ChargeItem.tsx

@@ -7,6 +7,7 @@ import { FeatureUsageProgressBar } from '../../usage/featureUsage/FeatureUsagePr
 import { LongText } from '../../../common/LongText';
 import { EntitlementCtaButton } from '../../usage/featureUsage/EntitlementCTAButton';
 import { OnBuyMoreCallbackFn } from '../../types';
+import { OnManageClick } from '../../CustomerPortalContainer';
 
 export type UsageBasedChargeProps = {
   entitlement: Exclude<CustomerPortalEntitlement, 'feature'>;
@@ -14,7 +15,7 @@ export type UsageBasedChargeProps = {
   amount: number;
   currency: Currency;
   onBuyMore?: OnBuyMoreCallbackFn;
-  onManageSubscription: () => void;
+  onManageSubscription: OnManageClick;
   canUpgradeSubscription: boolean;
   hasCustomSubscription: boolean;
   hideChargePrice?: boolean;

package/src/components/customerPortal/subscriptionOverview/charges/ChargeList.tsx

@@ -3,12 +3,13 @@ import React from 'react';
 import { keyBy } from 'lodash';
 import { ChargeItem } from './ChargeItem';
 import { OnBuyMoreCallbackFn } from '../../types';
+import { OnManageClick } from '../../CustomerPortalContainer';
 
 export type ChargesProps = {
   subscription: CustomerPortalSubscription;
   entitlements: CustomerPortalEntitlement[];
   onBuyMore?: OnBuyMoreCallbackFn;
-  onManageSubscription: () => void;
+  onManageSubscription: OnManageClick;
   canUpgradeSubscription: boolean;
   hasCustomSubscription: boolean;
 };

package/src/components/customerPortal/subscriptionOverview/subscriptionView/SubscriptionView.tsx

@@ -3,11 +3,12 @@ import { CustomerPortalSubscription } from '@stigg/js-client-sdk';
 import { Typography } from '../../../common/Typography';
 import { TrialPanel } from './TrialPanel';
 import { CustomerPortalTheme } from '../../customerPortalTheme';
+import { OnManageClick } from '../../CustomerPortalContainer';
 
 type SubscriptionViewProps = {
   mainSubscription: CustomerPortalSubscription;
   trialSubscription: CustomerPortalSubscription | undefined;
-  onManageSubscription: () => void;
+  onManageSubscription: OnManageClick;
   theme: CustomerPortalTheme;
 };
 

package/src/components/customerPortal/subscriptionOverview/subscriptionView/TrialPanel.tsx

@@ -5,6 +5,8 @@ import Link from '@mui/material/Link';
 import SandClockIcon from '../../../../assets/sand-clock.svg';
 import { Typography } from '../../../common/Typography';
 import { LongText } from '../../../common/LongText';
+import { OnManageClick } from '../../CustomerPortalContainer';
+import { CustomerPortalIntentionType } from '../../types';
 
 const OnTrialBadge = styled.div`
   width: 100%;
@@ -30,7 +32,7 @@ export function TrialPanel({
 }: {
   subscription: CustomerPortalSubscription | undefined;
   includePlanName: boolean;
-  onManageSubscription?: () => void;
+  onManageSubscription: OnManageClick;
 }) {
   if (subscription?.status !== SubscriptionStatus.InTrial) {
     return null;
@@ -47,7 +49,9 @@ export function TrialPanel({
         </LongText>
       </div>
 
-      <StyledLink className="stigg-subscription-trial-upgrade-button" onClick={onManageSubscription}>
+      <StyledLink
+        className="stigg-subscription-trial-upgrade-button"
+        onClick={() => onManageSubscription({ intentionType: CustomerPortalIntentionType.UPGRADE_TRIAL_PLAN })}>
         <Typography color="white">Upgrade plan</Typography>
       </StyledLink>
     </OnTrialBadge>

package/src/components/customerPortal/types.ts

@@ -1,4 +1,18 @@
-import { CustomerPortalEntitlement } from '@stigg/js-client-sdk';
+import { CustomerPortalEntitlement, CustomerPortalSubscription } from '@stigg/js-client-sdk';
 import { FeatureFragment } from '@stigg/api-client-js/src/generated/sdk';
 
 export type OnBuyMoreCallbackFn = (feature: FeatureFragment, entitlement: CustomerPortalEntitlement) => void;
+
+export enum CustomerPortalIntentionType {
+  MANAGE_SUBSCRIPTION = 'MANAGE_SUBSCRIPTION',
+  UPGRADE_PLAN = 'UPGRADE_PLAN',
+  UPGRADE_TRIAL_PLAN = 'UPGRADE_TRIAL_PLAN',
+}
+
+export type OnManageSubscriptionFn = ({
+  intentionType,
+  customerSubscriptions,
+}: {
+  intentionType: CustomerPortalIntentionType;
+  customerSubscriptions: CustomerPortalSubscription[];
+}) => Promise<void> | void;

package/src/components/customerPortal/usage/CustomerUsageData.tsx

@@ -11,11 +11,12 @@ import { SectionHeader } from '../common/SectionHeader';
 import { SectionTitle } from '../common/SectionTitle';
 import { StyledButton } from '../common/StyledButton';
 import { OnBuyMoreCallbackFn } from '../types';
+import { OnManageClick } from '../CustomerPortalContainer';
 
 const MAX_BOXES = 6;
 
 export type CustomerUsageDataProps = {
-  onManageSubscription?: () => void;
+  onManageSubscription?: OnManageClick;
   onBuyMore?: OnBuyMoreCallbackFn;
 };
 

package/src/components/customerPortal/usage/featureUsage/EntitlementCTAButton.tsx

@@ -5,7 +5,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { getUsagePercentage, USAGE_PERCENTAGE_WARNING_THRESHOLD } from './FeatureUsage.helper';
 import { Typography } from '../../../common/Typography';
-import { OnBuyMoreCallbackFn } from '../../types';
+import { CustomerPortalIntentionType, OnBuyMoreCallbackFn } from '../../types';
+import { OnManageClick } from '../../CustomerPortalContainer';
 
 const StyledButton = styled(Button)`
   text-transform: none;
@@ -16,7 +17,7 @@ const StyledButton = styled(Button)`
 export type EntitlementCtaButtonProps = {
   entitlement: Exclude<CustomerPortalEntitlement, 'feature'>;
   feature: FeatureFragment;
-  onManageSubscription: (() => void) | undefined;
+  onManageSubscription: OnManageClick | undefined;
   onBuyMore?: OnBuyMoreCallbackFn;
   canBuyMore: boolean;
   canUpgradeSubscription: boolean;
@@ -50,7 +51,9 @@ export function EntitlementCtaButton({
 
   if (canUpgradeSubscription) {
     return onManageSubscription ? (
-      <StyledButton variant="text" onClick={onManageSubscription}>
+      <StyledButton
+        variant="text"
+        onClick={() => onManageSubscription({ intentionType: CustomerPortalIntentionType.UPGRADE_PLAN })}>
         <Typography color="primary.main">Upgrade</Typography>
       </StyledButton>
     ) : null;

package/src/components/customerPortal/usage/featureUsage/FeatureUsage.tsx

@@ -13,11 +13,12 @@ import { InformationTooltip } from '../../../common/InformationTooltip';
 import { LongText } from '../../../common/LongText';
 import { EntitlementCtaButton } from './EntitlementCTAButton';
 import { OnBuyMoreCallbackFn } from '../../types';
+import { OnManageClick } from '../../CustomerPortalContainer';
 
 export type UsageBoxProps = {
   entitlement: CustomerPortalEntitlement;
   subscriptionPrice: CustomerPortalSubscriptionPriceFragment | undefined;
-  onManageSubscription: (() => void) | undefined;
+  onManageSubscription: OnManageClick | undefined;
   onBuyMore?: OnBuyMoreCallbackFn;
   hasCustomSubscription: boolean;
   canUpgradeSubscription: boolean;

package/src/components/paywall/PlanOffering.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   BillableFeature,
   BillingPeriod,
@@ -18,7 +18,7 @@ import { flexLayoutMapper } from '../../theme/getResolvedTheme';
 import { Typography } from '../common/Typography';
 import MiniSchedule from '../../assets/mini-schedule.svg';
 import { PlanPrice } from './PlanPrice';
-import { getSelectedTier } from '../utils/priceTierUtils';
+import { getSelectedTier, getSelectedTierQuantityBeFeature } from '../utils/priceTierUtils';
 
 const PlanOfferingButtonHeight = '66px';
 
@@ -167,22 +167,28 @@ export function PlanOffering({
     );
   }
 
-  const [selectedTierByFeature, setSelectedTierByFeature] = React.useState<Record<string, PriceTierFragment>>(
+  const [perUnitQuantityByFeature, setPerUnitQuantityByFeature] = useState<Record<string, number>>({});
+  const [selectedTierByFeature, setSelectedTierByFeature] = useState<Record<string, PriceTierFragment>>(
     getSelectedTier(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 billableFeatures: BillableFeature[] = Object.keys(selectedTierByFeature).map((featureId) => ({
+    const tierBillableFeatures: BillableFeature[] = Object.keys(selectedTierByFeature).map((featureId) => ({
       featureId,
-      quantity: selectedTierByFeature[featureId].upTo,
+      quantity: selectedTierByFeature[featureId].upTo || 0,
+    }));
+    const perUnitBillableFeatures: BillableFeature[] = Object.keys(perUnitQuantityByFeature).map((featureId) => ({
+      featureId,
+      quantity: perUnitQuantityByFeature[featureId],
     }));
 
-    return onPlanSelected(intentionType, billableFeatures);
+    return onPlanSelected(intentionType, { ...tierBillableFeatures, ...perUnitBillableFeatures });
   };
 
   return (
@@ -218,6 +224,8 @@ export function PlanOffering({
           locale={locale}
           hasAnnuallyPrice={hasAnnuallyPrice}
           hasMonthlyPrice={hasMonthlyPrice}
+          setPerUnitQuantityByFeature={setPerUnitQuantityByFeature}
+          perUnitQuantityByFeature={perUnitQuantityByFeature}
         />
 
         {showCTAButton ? (
@@ -232,6 +240,7 @@ export function PlanOffering({
             paywallLocale={paywallLocale}
             withTrialLeftRow={withTrialLeftRow}
             selectedTierByFeature={selectedTierByFeature}
+            perUnitQuantityByFeature={perUnitQuantityByFeature}
           />
         ) : (
           <div style={{ height: PlanOfferingButtonHeight }} />

package/src/components/paywall/PlanOfferingButton.tsx

@@ -83,6 +83,7 @@ type PlanOfferingButtonProps = {
   onPlanSelected: (intentionType: SubscribeIntentionType) => void | Promise<void>;
   withTrialLeftRow: boolean;
   selectedTierByFeature: Record<string, PriceTierFragment>;
+  perUnitQuantityByFeature: Record<string, number>;
 };
 
 export function PlanOfferingButton({
@@ -96,6 +97,7 @@ export function PlanOfferingButton({
   withTrialLeftRow,
   currentSubscription,
   selectedTierByFeature,
+  perUnitQuantityByFeature,
 }: PlanOfferingButtonProps) {
   const theme = useTheme();
   const [isLoading, setIsLoading] = useState(false);
@@ -142,7 +144,11 @@ export function PlanOfferingButton({
       isSameBillingPeriod ||
       (plan.pricingType && [PricingType.Free, PricingType.Custom].includes(plan.pricingType))
     ) {
-      const planComparison = compareSelectedTierToCurrentTier(selectedTierByFeature, currentSubscription);
+      const planComparison = compareSelectedTierToCurrentTier(
+        selectedTierByFeature,
+        perUnitQuantityByFeature,
+        currentSubscription,
+      );
       switch (planComparison) {
         case PriceTierComparison.Lower:
           buttonProps.intentionType = SubscribeIntentionType.CHANGE_UNIT_QUANTITY;