@stigg/react-sdk 4.13.2 → 4.15.0

package/src/components/paywall/PlanPrice.tsx

@@ -65,6 +65,8 @@ export const PlanPrice = ({
   locale,
   hasMonthlyPrice,
   hasAnnuallyPrice,
+  perUnitQuantityByFeature,
+  setPerUnitQuantityByFeature,
 }: {
   showStartingAt: boolean;
   withUnitPriceRow: boolean;
@@ -72,6 +74,8 @@ export const PlanPrice = ({
   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;
   billingPeriod: BillingPeriod;
   paywallLocale: PaywallLocalization;
@@ -86,6 +90,7 @@ export const PlanPrice = ({
     locale,
     hasMonthlyPrice,
     selectedTierByFeature,
+    perUnitQuantityByFeature,
   );
 
   // We currently only support prices with one tier - so we select the first one
@@ -94,6 +99,7 @@ export const PlanPrice = ({
   });
   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) {
@@ -106,6 +112,17 @@ export const PlanPrice = ({
     }));
   };
 
+  const handlePerUnitQuantityChange = (quantity: number) => {
+    if (!featureId) {
+      return;
+    }
+
+    setPerUnitQuantityByFeature((prevState) => ({
+      ...prevState,
+      [featureId]: quantity,
+    }));
+  };
+
   return (
     <PlanPriceContainer as="div" className="stigg-price-text">
       <>
@@ -146,6 +163,9 @@ export const PlanPrice = ({
             tierUnits={tierUnits}
             selectedTier={selectedTier}
             handleTierChange={handleTierChange}
+            tiersMode={tieredPrice?.tiersMode}
+            handlePerUnitQuantityChange={handlePerUnitQuantityChange}
+            perUnitQuantity={perUnitQuantity}
           />
         ) : null}
       </>

package/src/components/paywall/index.ts

@@ -1,3 +1,3 @@
 export { PaywallContainer as Paywall, PaywallContainerProps as PaywallProps } from './PaywallContainer';
-export { PaywallPlan, OnPlanSelectedCallbackFn, SubscribeIntentionType } from './types';
+export * from './types';
 export { PaywallLocalization, PlanPriceText, CurrentPlanParams } from './paywallTextOverrides';

package/src/components/utils/getPaidPriceText.ts

@@ -18,6 +18,7 @@ type GetPaidPriceTextParams = {
   shouldShowMonthlyPriceAmount: boolean;
   selectedTierByFeature: Record<string, PriceTierFragment>;
   paywallLocale: PaywallLocalization;
+  perUnitQuantityByFeature?: Record<string, number>;
 };
 
 export function getPaidPriceText({
@@ -28,6 +29,7 @@ export function getPaidPriceText({
   shouldShowMonthlyPriceAmount,
   selectedTierByFeature,
   paywallLocale,
+  perUnitQuantityByFeature,
 }: GetPaidPriceTextParams): PlanPriceText {
   const { amount, currency } = paywallCalculatedPrice || planPrices[0];
   const priceAmount = amount || 0;
@@ -53,7 +55,13 @@ export function getPaidPriceText({
         tierUnits = getPriceFeatureUnit(price);
       }
 
-      priceNumber += calculateTierPrice(price, currentTier, selectedBillingPeriod, shouldShowMonthlyPriceAmount);
+      priceNumber += calculateTierPrice(
+        price,
+        currentTier,
+        selectedBillingPeriod,
+        shouldShowMonthlyPriceAmount,
+        perUnitQuantityByFeature?.[price.feature!.featureId],
+      );
     }
   }
 

package/src/components/utils/getPlanPrice.ts

@@ -16,6 +16,7 @@ export function getPlanPrice(
   locale: string,
   shouldShowMonthlyPriceAmount: boolean,
   selectedTierByFeature?: Record<string, PriceTierFragment>,
+  perUnitQuantityByFeature?: Record<string, number>,
 ): PlanPriceText {
   switch (plan.pricingType) {
     case PricingType.Free:
@@ -48,6 +49,7 @@ export function getPlanPrice(
         paywallCalculatedPrice,
         selectedBillingPeriod: billingPeriod,
         selectedTierByFeature: selectedTierByFeature || {},
+        perUnitQuantityByFeature: perUnitQuantityByFeature || {},
       };
 
       return paywallLocale.price.paid

package/src/components/utils/priceTierUtils.ts

@@ -14,10 +14,12 @@ export function getTierByQuantity(tiers: PriceTierFragment[], quantity: number)
   if (!tiers) return undefined;
 
   const ascendingTiers = [...tiers];
-  ascendingTiers.sort((a, b) => a.upTo - b.upTo);
+  // Sort tiers by upTo value, ascending, if upTo is not set,
+  // put it at the end as it represent the last infinity tier
+  ascendingTiers.sort((a, b) => (!a.upTo ? 1 : !b.upTo ? -1 : a.upTo - b.upTo));
 
   for (const tier of ascendingTiers) {
-    if (quantity <= tier.upTo) {
+    if (tier.upTo && quantity <= tier.upTo) {
       return tier;
     }
   }
@@ -30,21 +32,52 @@ export function calculateTierPrice(
   currentTier: PriceTierFragment,
   selectedBillingPeriod: BillingPeriod,
   shouldShowMonthlyPriceAmount: boolean,
+  perUnitQuantity?: number,
 ): number {
+  const unitPrice =
+    selectedBillingPeriod === BillingPeriod.Annually && shouldShowMonthlyPriceAmount
+      ? currentTier.unitPrice.amount / 12
+      : currentTier.unitPrice.amount;
   switch (price.tiersMode) {
     case TiersMode.Volume: {
-      const unitPrice =
-        selectedBillingPeriod === BillingPeriod.Annually && shouldShowMonthlyPriceAmount
-          ? currentTier.unitPrice.amount / 12
-          : currentTier.unitPrice.amount;
-
-      return unitPrice * currentTier.upTo;
+      return unitPrice * (currentTier.upTo || 1);
+    }
+    case TiersMode.VolumePerUnit: {
+      return unitPrice * (perUnitQuantity || 1);
     }
     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 getSelectedTier(
   plan: PaywallPlan,
   billingPeriod: BillingPeriod,
@@ -64,7 +97,7 @@ export function getSelectedTier(
 
     if (selectedTierByFeature[featureId]) {
       currentTier = price.tiers?.find((tier) => tier.upTo === selectedTierByFeature[featureId].upTo) || currentTier;
-    } else if (currentSubscription) {
+    } else if (currentSubscription && currentSubscription.plan.id === plan.id) {
       const tieredPrice = currentSubscription.prices.find(
         (subscriptionPrice) =>
           subscriptionPrice.pricingModel === BillingModel.PerUnit &&
@@ -94,6 +127,7 @@ export enum PriceTierComparison {
 
 export function compareSelectedTierToCurrentTier(
   selectedTierByFeature: Record<string, PriceTierFragment>,
+  perUnitQuantityByFeature: Record<string, number>,
   currentSubscription: Subscription | null,
 ): PriceTierComparison {
   if (!currentSubscription || !selectedTierByFeature) {
@@ -108,22 +142,34 @@ export function compareSelectedTierToCurrentTier(
   }
 
   const { featureId, unitQuantity } = currentTierPrice.feature!;
+  const { tiersMode } = currentTierPrice;
 
   if (!unitQuantity) {
     return PriceTierComparison.Equal;
   }
 
   const selectedTier = selectedTierByFeature[featureId];
+  const selectedQuantity = perUnitQuantityByFeature[featureId];
   if (!selectedTier) {
     return PriceTierComparison.Equal;
   }
 
-  if (selectedTier.upTo < unitQuantity) {
-    return PriceTierComparison.Lower;
-  }
+  if (tiersMode === TiersMode.Volume) {
+    if (selectedTier.upTo && selectedTier.upTo < unitQuantity) {
+      return PriceTierComparison.Lower;
+    }
 
-  if (selectedTier.upTo > unitQuantity) {
-    return PriceTierComparison.Higher;
+    if (selectedTier.upTo && selectedTier.upTo > unitQuantity) {
+      return PriceTierComparison.Higher;
+    }
+  } else if (tiersMode === TiersMode.VolumePerUnit) {
+    if (selectedQuantity && selectedQuantity < unitQuantity) {
+      return PriceTierComparison.Lower;
+    }
+
+    if (selectedQuantity && selectedQuantity > unitQuantity) {
+      return PriceTierComparison.Higher;
+    }
   }
 
   return PriceTierComparison.Equal;

package/src/index.ts

@@ -10,6 +10,9 @@ export {
   PaywallLocalization,
   PlanPriceText,
   CurrentPlanParams,
+  PaywallData,
+  SelectDefaultTierIndexFn,
+  ShouldHidePlanFn,
 } from './components/paywall';
 export {
   CustomerPortalProvider,
@@ -24,6 +27,11 @@ export {
   SubscriptionsOverview,
   SubscriptionsOverviewProps,
   Promotions,
+  CustomerPortalIntentionType,
+  OnBuyMoreCallbackFn,
+  OnManageSubscriptionFn,
+  CustomerPortalLocalization,
+  CustomerPortalTheme,
 } from './components/customerPortal';
 export {
   StiggProvider,
@@ -49,5 +57,5 @@ export {
   TaxDetailsInput,
 } from './components/checkout';
 export { useWaitForCheckoutCompleted, ProvisionStatus } from './components/hooks';
-export { HorizontalAlignment, TextAlignment } from './theme/types';
+export { HorizontalAlignment, TextAlignment, FontVariant, FontWeight, StiggTheme } from './theme/types';
 export { CustomizedTheme as Theme } from './theme/Theme';

package/src/stories/mocks/checkout/mockCheckoutPreview.ts

@@ -69,7 +69,7 @@ const billableFeatureCost = (plan: Plan, billingPeriod: BillingPeriod, featureId
   const { tiers } = price;
 
   if (tiers) {
-    const quantityTier = tiers.find((tier) => tier.upTo >= quantity);
+    const quantityTier = tiers.find((tier) => tier.upTo && tier.upTo >= quantity);
     const priceTier = quantityTier || tiers[tiers.length - 1];
     return quantity * priceTier.unitPrice.amount;
   }