@stigg/react-sdk 5.28.4 → 5.30.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.28.4",
+  "version": "5.30.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -114,7 +114,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.12.0",
-    "@stigg/js-client-sdk": "3.35.0",
+    "@stigg/js-client-sdk": "3.36.0",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@types/styled-components": "^5.1.26",

package/src/components/paywall/Paywall.tsx

@@ -10,6 +10,7 @@ import {
   PaywallPlan,
   SubscribeIntentionType,
   SelectDefaultTierIndexFn,
+  CurrentSubscriptionOverride,
 } from './types';
 import { PaywallLocalization } from './paywallTextOverrides';
 import { PoweredByStigg } from '../common/PoweredByStigg';
@@ -49,6 +50,7 @@ type PaywallProps = {
   plans: PaywallPlan[];
   customer: Customer | null;
   currentSubscription: Subscription | null;
+  currentSubscriptionOverride?: CurrentSubscriptionOverride | null;
   selectedBillingPeriod: BillingPeriod;
   highlightedPlanId?: string;
   onBillingPeriodChanged: (billingPeriod: BillingPeriod) => void;
@@ -75,6 +77,7 @@ export const Paywall = ({
   locale,
   shouldHidePlan,
   selectDefaultTierIndex,
+  currentSubscriptionOverride,
 }: PaywallProps) => {
   const { stigg } = useStiggContext();
   const discountRate = calculatePaywallDiscountRate(plans);
@@ -123,11 +126,16 @@ export const Paywall = ({
     return (
       !isCustomerInCustomPlan &&
       plansToShow.some((plan) => {
-        const tiers = getTiersPerUnitQuantities(plan, selectedBillingPeriod, currentSubscription);
+        const tiers = getTiersPerUnitQuantities({
+          plan,
+          billingPeriod: selectedBillingPeriod,
+          currentSubscription,
+          currentSubscriptionOverride,
+        });
         return Object.values(tiers).length > 0;
       })
     );
-  }, [selectedBillingPeriod, currentSubscription, isCustomerInCustomPlan, plansToShow]);
+  }, [selectedBillingPeriod, currentSubscription, currentSubscriptionOverride, isCustomerInCustomPlan, plansToShow]);
 
   const withTrialLeftRow = plansToShow.some((plan) => {
     return plan.isCurrentCustomerPlan && plan.trialDaysLeft;
@@ -156,6 +164,7 @@ export const Paywall = ({
               plan={plan}
               withStartingAtRow={withStartingAtRow}
               currentSubscription={currentSubscription}
+              currentSubscriptionOverride={currentSubscriptionOverride}
               billingPeriod={selectedBillingPeriod}
               isHighlighted={plan.id === highlightedPlanId}
               isCustomerOnTrial={isCustomerOnTrial}

package/src/components/paywall/PaywallContainer.tsx

@@ -2,7 +2,12 @@ import React from 'react';
 import { BillingPeriod } from '@stigg/js-client-sdk';
 import { Paywall } from './Paywall';
 import { useLoadPaywallData } from './hooks/useLoadPaywallData';
-import { ShouldHidePlanFn, OnPlanSelectedCallbackFn, SelectDefaultTierIndexFn } from './types';
+import {
+  ShouldHidePlanFn,
+  OnPlanSelectedCallbackFn,
+  SelectDefaultTierIndexFn,
+  CurrentSubscriptionOverrideFn,
+} from './types';
 import { getResolvedPaywallLocalize, PaywallLocalization } from './paywallTextOverrides';
 import { DeepPartial } from '../../types';
 import { PaywallLoader } from './PaywallLoader';
@@ -25,6 +30,7 @@ export type PaywallContainerProps = {
   billingCountryCode?: string;
   shouldHidePlan?: ShouldHidePlanFn;
   selectDefaultTierIndex?: SelectDefaultTierIndexFn;
+  currentSubscriptionOverride?: CurrentSubscriptionOverrideFn;
 };
 
 export const PaywallContainer = ({
@@ -39,6 +45,7 @@ export const PaywallContainer = ({
   billingCountryCode,
   shouldHidePlan,
   selectDefaultTierIndex,
+  currentSubscriptionOverride: currentSubscriptionOverrideFn,
 }: PaywallContainerProps) => {
   const hasCustomerPortalContext = useCheckContextExists(CustomerPortalContext);
   let isCustomerPortalLoading = false;
@@ -52,6 +59,7 @@ export const PaywallContainer = ({
     plans,
     customer,
     currentSubscription,
+    currentSubscriptionOverride,
     isCustomerOnTrial,
     isLoading,
     selectedBillingPeriod,
@@ -65,6 +73,7 @@ export const PaywallContainer = ({
     showOnlyEligiblePlans,
     billingCountryCode,
     preferredBillingPeriod,
+    currentSubscriptionOverrideFn,
   });
   const paywallLocale = getResolvedPaywallLocalize(textOverrides);
   const handlePeriodChange = (billingPeriod: BillingPeriod) => {
@@ -82,6 +91,7 @@ export const PaywallContainer = ({
         plans={plans}
         customer={customer}
         currentSubscription={currentSubscription}
+        currentSubscriptionOverride={currentSubscriptionOverride}
         selectedBillingPeriod={selectedBillingPeriod}
         onBillingPeriodChanged={handlePeriodChange}
         availableBillingPeriods={availableBillingPeriods}

package/src/components/paywall/PlanOffering.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import Grid from '@mui/material/Grid';
 import { PlanEntitlements } from './PlanEntitlements';
 import { PlanOfferingButton } from './PlanOfferingButton';
-import { PaywallPlan, SelectDefaultTierIndexFn, SubscribeIntentionType } from './types';
+import { CurrentSubscriptionOverride, PaywallPlan, SelectDefaultTierIndexFn, SubscribeIntentionType } from './types';
 import { PaywallLocalization } from './paywallTextOverrides';
 import { flexLayoutMapper } from '../../theme/getResolvedTheme';
 import { Typography } from '../common/Typography';
@@ -75,6 +75,7 @@ type PlanOfferingProps = {
   plan: PaywallPlan;
   billingPeriod: BillingPeriod;
   currentSubscription: Subscription | null;
+  currentSubscriptionOverride?: CurrentSubscriptionOverride | null;
   isHighlighted: boolean;
   shouldShowDescriptionSection: boolean;
   hasAnnuallyPrice: boolean;
@@ -128,6 +129,7 @@ export function PlanOffering({
   billingPeriod,
   isHighlighted,
   currentSubscription,
+  currentSubscriptionOverride,
   shouldShowDescriptionSection,
   hasMonthlyPrice,
   hasAnnuallyPrice,
@@ -161,7 +163,13 @@ export function PlanOffering({
   }
 
   const [perUnitQuantityByFeature, setPerUnitQuantityByFeature] = useState<Record<string, number>>(
-    getTiersPerUnitQuantities(plan, billingPeriod, currentSubscription, selectDefaultTierIndex),
+    getTiersPerUnitQuantities({
+      plan,
+      billingPeriod,
+      currentSubscription,
+      currentSubscriptionOverride,
+      selectDefaultTierIndex,
+    }),
   );
 
   const onPlanButtonClick = (intentionType: SubscribeIntentionType) => {
@@ -214,6 +222,7 @@ export function PlanOffering({
             customer={customer}
             plan={plan}
             currentSubscription={currentSubscription}
+            currentSubscriptionOverride={currentSubscriptionOverride}
             billingPeriod={billingPeriod}
             isCustomerOnTrial={isCustomerOnTrial}
             onPlanSelected={onPlanButtonClick}

package/src/components/paywall/PlanOfferingButton.tsx

@@ -4,7 +4,7 @@ import { isFunction } from 'lodash';
 import ClipLoader from 'react-spinners/ClipLoader';
 import styled from '@emotion/styled/macro';
 import { css, useTheme } from '@emotion/react';
-import { PaywallPlan, SubscribeIntentionType } from './types';
+import { CurrentSubscriptionOverride, PaywallPlan, SubscribeIntentionType } from './types';
 import { PaywallLocalization } from './paywallTextOverrides';
 import { flexLayoutMapper } from '../../theme/getResolvedTheme';
 import { Typography } from '../common/Typography';
@@ -77,6 +77,7 @@ type PlanOfferingButtonProps = {
   customer: Customer | null;
   plan: PaywallPlan;
   currentSubscription: Subscription | null;
+  currentSubscriptionOverride?: CurrentSubscriptionOverride | null;
   billingPeriod: BillingPeriod;
   isCustomerOnTrial: boolean;
   paywallLocale: PaywallLocalization;
@@ -95,6 +96,7 @@ export function PlanOfferingButton({
   paywallLocale,
   withTrialLeftRow,
   currentSubscription,
+  currentSubscriptionOverride,
   perUnitQuantityByFeature,
 }: PlanOfferingButtonProps) {
   const theme = useTheme();
@@ -142,7 +144,12 @@ export function PlanOfferingButton({
       isSameBillingPeriod ||
       (plan.pricingType && [PricingType.Free, PricingType.Custom].includes(plan.pricingType))
     ) {
-      const planComparison = compareSelectedTierToCurrentTier(perUnitQuantityByFeature, currentSubscription);
+      const planComparison = compareSelectedTierToCurrentTier({
+        perUnitQuantityByFeature,
+        plan,
+        currentSubscription,
+        currentSubscriptionOverride,
+      });
       switch (planComparison) {
         case PriceTierComparison.Lower:
           buttonProps.intentionType = SubscribeIntentionType.CHANGE_UNIT_QUANTITY;

package/src/components/paywall/hooks/useLoadPaywallData.ts

@@ -1,7 +1,7 @@
 import { BillingPeriod, Paywall } from '@stigg/js-client-sdk';
 import { useEffect, useState } from 'react';
 import logger from '../../../services/logger';
-import { PaywallData } from '../types';
+import { CurrentSubscriptionOverrideFn, PaywallData } from '../types';
 import { computeBillingPeriods } from '../utils/computeDefaultBillingPeriod';
 import { mapPaywallData } from '../utils/mapPaywallData';
 import { useStiggContext } from '../../../hooks/useStiggContext';
@@ -12,6 +12,7 @@ type UseLoadPaywallDataProps = {
   showOnlyEligiblePlans?: boolean;
   billingCountryCode?: string;
   preferredBillingPeriod?: BillingPeriod;
+  currentSubscriptionOverrideFn?: CurrentSubscriptionOverrideFn;
 };
 
 export function useLoadPaywallData({
@@ -20,6 +21,7 @@ export function useLoadPaywallData({
   showOnlyEligiblePlans,
   billingCountryCode,
   preferredBillingPeriod,
+  currentSubscriptionOverrideFn,
 }: UseLoadPaywallDataProps): PaywallData {
   const { stigg, locale } = useStiggContext();
   const [selectedBillingPeriod, setSelectedBillingPeriod] = useState(BillingPeriod.Annually);
@@ -57,7 +59,7 @@ export function useLoadPaywallData({
     void loadPaywall();
   }, [stigg, productId, stigg.isCustomerLoaded, billingCountryCode, resourceId, preferredBillingPeriod]);
 
-  const paywallData = mapPaywallData(paywall, showOnlyEligiblePlans);
+  const paywallData = mapPaywallData(paywall, showOnlyEligiblePlans, currentSubscriptionOverrideFn);
 
   return {
     customer: paywall?.customer || null,

package/src/components/paywall/types.ts

@@ -14,6 +14,7 @@ export type PaywallData = {
   plans: PaywallPlan[] | null;
   customer: Customer | null;
   currentSubscription: Subscription | null;
+  currentSubscriptionOverride?: CurrentSubscriptionOverride | null;
   isCustomerOnTrial: boolean;
   isLoading: boolean;
   selectedBillingPeriod: BillingPeriod;
@@ -23,6 +24,11 @@ export type PaywallData = {
   configuration?: CustomizedTheme;
 };
 
+export type CurrentSubscriptionOverride = {
+  planId: string;
+  billableFeatures: BillableFeature[];
+};
+
 export enum SubscribeIntentionType {
   START_TRIAL = 'START_TRIAL',
   UPGRADE_TRIAL_TO_PAID = 'UPGRADE_TRIAL_TO_PAID',
@@ -64,4 +70,10 @@ export type OnPlanSelectedCallbackFn = ({
 
 export type ShouldHidePlanFn = ({ plan }: { plan: PaywallPlan }) => boolean | Promise<boolean>;
 
+export type CurrentSubscriptionOverrideFn = ({
+  currentSubscription,
+}: {
+  currentSubscription: Subscription | null;
+}) => CurrentSubscriptionOverride | null | undefined;
+
 export type SelectDefaultTierIndexFn = ({ plan }: { plan: PaywallPlan }) => number;

package/src/components/paywall/utils/mapPaywallData.ts

@@ -8,7 +8,7 @@ import {
 } from '@stigg/js-client-sdk';
 import isNil from 'lodash/isNil';
 import sortBy from 'lodash/sortBy';
-import { PaywallPlan } from '../types';
+import { CurrentSubscriptionOverride, CurrentSubscriptionOverrideFn, PaywallPlan } from '../types';
 import { calculateTrialDaysLeft } from './calculateTrialDaysLeft';
 import { BillingPeriodChangeVariables, DeepPartial, DowngradeChangeVariables } from '../../../types';
 import { StiggTheme } from '../../../theme/types';
@@ -39,16 +39,23 @@ function getCustomerSubscriptionDetails(activeSubscriptions?: Subscription[] | n
 type PaywallData = {
   currentPlan?: Plan;
   currentSubscription: Subscription | null;
+  currentSubscriptionOverride: CurrentSubscriptionOverride | null | undefined;
   isCustomerOnTrial: boolean;
   plans: PaywallPlan[];
   paywallConfiguration?: DeepPartial<StiggTheme>;
 };
 
-export function mapPaywallData(paywall: Paywall | null, showOnlyEligiblePlans?: boolean): PaywallData {
+export function mapPaywallData(
+  paywall: Paywall | null,
+  showOnlyEligiblePlans?: boolean,
+  currentSubscriptionOverrideFn?: CurrentSubscriptionOverrideFn,
+): PaywallData {
   const { plans, currency, configuration, customer, activeSubscriptions, paywallCalculatedPricePoints } = paywall || {};
   const { currentSubscription, currentPlan, isCustomerOnTrial, trialDaysLeft } =
     getCustomerSubscriptionDetails(activeSubscriptions);
 
+  const currentSubscriptionOverride = currentSubscriptionOverrideFn?.({ currentSubscription });
+
   const scheduledUpdates = currentSubscription?.scheduledUpdates || [];
   const currentCustomerPlanBillingPeriod = currentSubscription?.price?.billingPeriod;
   const downgradeSchedule = scheduledUpdates.find(
@@ -62,7 +69,9 @@ export function mapPaywallData(paywall: Paywall | null, showOnlyEligiblePlans?:
     const eligibleForProductTrial = customer?.eligibleForTrial?.find(
       (productTrial) => productTrial.productId === plan.product.id,
     );
-    const isCurrentCustomerPlan = plan.id === currentPlan?.id;
+    const isCurrentCustomerPlan = currentSubscriptionOverride?.planId
+      ? currentSubscriptionOverride?.planId === plan.id
+      : plan.id === currentPlan?.id;
 
     const isNextPlan = (currentBillingPeriod: BillingPeriod) => {
       const downgradeVariables = downgradeSchedule?.scheduleVariables as DowngradeChangeVariables;
@@ -109,6 +118,7 @@ export function mapPaywallData(paywall: Paywall | null, showOnlyEligiblePlans?:
   return {
     currentPlan,
     currentSubscription,
+    currentSubscriptionOverride,
     isCustomerOnTrial,
     plans: paywallPlans,
     paywallConfiguration,

package/src/components/utils/priceTierUtils.ts

@@ -2,7 +2,7 @@ import { BillingModel, TiersMode, BillingPeriod, Price, PriceTierFragment, Subsc
 import isNil from 'lodash/isNil';
 import { sum } from 'lodash';
 import { PaywallPlan } from '../paywall';
-import { SelectDefaultTierIndexFn } from '../paywall/types';
+import { CurrentSubscriptionOverride, SelectDefaultTierIndexFn } from '../paywall/types';
 
 export function getPriceFeatureUnit(price: Price) {
   if (!price.feature) {
@@ -131,12 +131,19 @@ export function isQuantityInFirstTier(tiers: PriceTierFragment[] | null | undefi
   return tiers?.[0].upTo && quantity <= tiers[0].upTo;
 }
 
-export function getTiersPerUnitQuantities(
-  plan: PaywallPlan,
-  billingPeriod: BillingPeriod,
-  currentSubscription: Subscription | null,
-  selectDefaultTierIndex?: SelectDefaultTierIndexFn,
-): Record<string, number> {
+export function getTiersPerUnitQuantities({
+  plan,
+  billingPeriod,
+  currentSubscription,
+  currentSubscriptionOverride,
+  selectDefaultTierIndex,
+}: {
+  plan: PaywallPlan;
+  billingPeriod: BillingPeriod;
+  currentSubscription: Subscription | null;
+  currentSubscriptionOverride?: CurrentSubscriptionOverride | null;
+  selectDefaultTierIndex?: SelectDefaultTierIndexFn;
+}): Record<string, number> {
   const planTierPrices = plan.pricePoints.filter(
     (price) => price.billingPeriod === billingPeriod && price.isTieredPrice,
   );
@@ -161,6 +168,15 @@ export function getTiersPerUnitQuantities(
       }
     }
 
+    if (currentSubscriptionOverride?.planId === plan.id) {
+      const billableFeature = currentSubscriptionOverride.billableFeatures.find(
+        (billableFeature) => billableFeature.featureId === featureId,
+      );
+      if (billableFeature) {
+        quantity = billableFeature.quantity;
+      }
+    }
+
     const result: Record<string, number> = {};
     result[featureId] = quantity;
 
@@ -176,22 +192,47 @@ export enum PriceTierComparison {
   Higher = 1,
 }
 
-export function compareSelectedTierToCurrentTier(
-  perUnitQuantityByFeature: Record<string, number>,
-  currentSubscription: Subscription | null,
-): PriceTierComparison {
+export function compareSelectedTierToCurrentTier({
+  perUnitQuantityByFeature,
+  plan,
+  currentSubscription,
+  currentSubscriptionOverride,
+}: {
+  perUnitQuantityByFeature: Record<string, number>;
+  plan: PaywallPlan;
+  currentSubscription: Subscription | null;
+  currentSubscriptionOverride?: CurrentSubscriptionOverride | null;
+}): PriceTierComparison {
   if (!currentSubscription) {
     return PriceTierComparison.Equal;
   }
 
-  const currentTierPrice = currentSubscription.prices.find(
+  let currentTierPrice = currentSubscription.prices.find(
     (price) => price.pricingModel === BillingModel.PerUnit && price.tiersMode,
   );
+
+  const isCurrentPlanOverride = plan.id === currentSubscriptionOverride?.planId;
+  if (isCurrentPlanOverride) {
+    currentTierPrice =
+      plan.pricePoints.find((price) => price.pricingModel === BillingModel.PerUnit && price.tiersMode) ??
+      currentTierPrice;
+  }
+
   if (!currentTierPrice) {
     return PriceTierComparison.Equal;
   }
 
-  const { featureId, unitQuantity: oldQuantity } = currentTierPrice.feature!;
+  const { featureId, unitQuantity } = currentTierPrice.feature!;
+  let oldQuantity = unitQuantity;
+
+  if (isCurrentPlanOverride) {
+    const billableFeature = currentSubscriptionOverride?.billableFeatures?.find(
+      (billableFeature) => billableFeature.featureId === featureId,
+    );
+    if (billableFeature) {
+      oldQuantity = billableFeature.quantity;
+    }
+  }
 
   if (isNil(oldQuantity)) {
     return PriceTierComparison.Equal;