@stigg/react-sdk 7.7.1-beta.1 → 7.8.0

package/src/components/paywall/PlanPrice.tsx

@@ -0,0 +1,154 @@
+import styled from '@utils/style';
+import { BillingPeriod } from '@stigg/js-client-sdk';
+import { PaywallPlan } from './types';
+import { PaywallLocalization } from './paywallTextOverrides';
+import { getPlanPrice } from '../utils/getPlanPrice';
+import { Typography } from '../common/Typography';
+import { TiersSelectContainer } from '../common/TiersSelectContainer';
+
+const EMPTY_CHAR = '‎';
+
+const PlanPriceContainer = styled(Typography)`
+  word-break: break-word;
+  width: 100%;
+`;
+
+const UnitSpan = styled(Typography)`
+  white-space: nowrap;
+`;
+
+const PriceSpan = styled(Typography)`
+  white-space: normal;
+  min-height: 39px;
+`;
+
+type PriceBillingPeriodProps = {
+  plan: PaywallPlan;
+  billingPeriod: BillingPeriod;
+  hasMonthlyPrice: boolean;
+  hasAnnuallyPrice: boolean;
+  paywallLocale: PaywallLocalization;
+};
+
+function PriceBillingPeriod({
+  plan,
+  billingPeriod,
+  hasMonthlyPrice,
+  hasAnnuallyPrice,
+  paywallLocale,
+}: PriceBillingPeriodProps) {
+  const hasPrice = plan.pricePoints.find((pricePoint) => pricePoint.billingPeriod === billingPeriod);
+
+  let content = EMPTY_CHAR;
+  if (hasPrice && hasMonthlyPrice && hasAnnuallyPrice) {
+    content = paywallLocale.price.billingPeriod?.(billingPeriod) || `, billed ${billingPeriod.toLowerCase()}`;
+  }
+
+  return (
+    <Typography as="span" className="stigg-price-billing-period-text" variant="h6" color="secondary">
+      {content}
+    </Typography>
+  );
+}
+
+export const PlanPrice = ({
+  showStartingAt,
+  withUnitPriceRow,
+  withStartingAtRow,
+  withTiersRow,
+  plan,
+  billingPeriod,
+  paywallLocale,
+  locale,
+  hasMonthlyPrice,
+  hasAnnuallyPrice,
+  perUnitQuantityByFeature,
+  setPerUnitQuantityByFeature,
+}: {
+  showStartingAt: boolean;
+  withUnitPriceRow: boolean;
+  withStartingAtRow: boolean;
+  withTiersRow: boolean;
+  perUnitQuantityByFeature: Record<string, number>;
+  setPerUnitQuantityByFeature: React.Dispatch<React.SetStateAction<Record<string, number>>>;
+  plan: PaywallPlan;
+  billingPeriod: BillingPeriod;
+  paywallLocale: PaywallLocalization;
+  hasMonthlyPrice: boolean;
+  hasAnnuallyPrice: boolean;
+  locale: string;
+}) => {
+  const { price, unit, tiers, tierUnits } = getPlanPrice(
+    plan,
+    billingPeriod,
+    paywallLocale,
+    locale,
+    hasMonthlyPrice,
+    perUnitQuantityByFeature,
+  );
+
+  // We currently only support prices with one tier - so we select the first one
+  const tieredPrice = plan.pricePoints.find((planPrice) => {
+    return planPrice.billingPeriod === billingPeriod && planPrice.isTieredPrice;
+  });
+  const featureId = tieredPrice ? tieredPrice.feature!.featureId : undefined;
+  const perUnitQuantity = perUnitQuantityByFeature[featureId || ''] ?? 1;
+
+  const handlePerUnitQuantityChange = (quantity: number) => {
+    if (!featureId) {
+      return;
+    }
+
+    setPerUnitQuantityByFeature((prevState) => ({
+      ...prevState,
+      [featureId]: quantity,
+    }));
+  };
+
+  return (
+    <PlanPriceContainer as="div" className="stigg-price-text">
+      <>
+        {withStartingAtRow && (
+          <Typography
+            style={{ minHeight: '20px' }}
+            className="stigg-starting-at-text"
+            variant="body1"
+            color="secondary">
+            {showStartingAt ? paywallLocale.price.startingAtCaption : EMPTY_CHAR}
+          </Typography>
+        )}
+
+        <PriceSpan className="stigg-price-point" variant="h1">
+          {price}
+        </PriceSpan>
+
+        {withUnitPriceRow && (
+          <Typography as="div" className="stigg-price-unit-and-billing-period-text" style={{ minHeight: '48px' }}>
+            <UnitSpan className="stigg-price-unit-text" as="span" variant="h6" color="secondary">
+              {unit}
+            </UnitSpan>
+
+            <PriceBillingPeriod
+              plan={plan}
+              billingPeriod={billingPeriod}
+              hasAnnuallyPrice={hasAnnuallyPrice}
+              hasMonthlyPrice={hasMonthlyPrice}
+              paywallLocale={paywallLocale}
+            />
+          </Typography>
+        )}
+
+        {withTiersRow ? (
+          <TiersSelectContainer
+            componentId={`${plan.id}_${featureId}_tier`}
+            tiers={tiers}
+            tierUnits={tierUnits}
+            tiersMode={tieredPrice?.tiersMode}
+            handleChange={handlePerUnitQuantityChange}
+            value={perUnitQuantity}
+          />
+        ) : null}
+      </>
+    </PlanPriceContainer>
+  );
+};

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

@@ -0,0 +1,75 @@
+import { BillingPeriod, Paywall } from '@stigg/js-client-sdk';
+import { useEffect, useState } from 'react';
+import logger from '../../../services/logger';
+import { CurrentSubscriptionOverrideFn, PaywallData } from '../types';
+import { computeBillingPeriods } from '../utils/computeDefaultBillingPeriod';
+import { mapPaywallData } from '../utils/mapPaywallData';
+import { useStiggContext } from '../../../hooks/useStiggContext';
+
+type UseLoadPaywallDataProps = {
+  productId?: string;
+  resourceId?: string;
+  showOnlyEligiblePlans?: boolean;
+  billingCountryCode?: string;
+  preferredBillingPeriod?: BillingPeriod;
+  currentSubscriptionOverrideFn?: CurrentSubscriptionOverrideFn;
+};
+
+export function useLoadPaywallData({
+  productId,
+  resourceId,
+  showOnlyEligiblePlans,
+  billingCountryCode,
+  preferredBillingPeriod,
+  currentSubscriptionOverrideFn,
+}: UseLoadPaywallDataProps): PaywallData {
+  const { stigg, locale } = useStiggContext();
+  const [selectedBillingPeriod, setSelectedBillingPeriod] = useState(BillingPeriod.Annually);
+  const [availableBillingPeriods, setAvailableBillingPeriods] = useState<BillingPeriod[]>([]);
+  const [paywall, setPaywall] = useState<Paywall | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    const loadPaywall = async () => {
+      try {
+        setIsLoading(true);
+
+        await stigg.waitForInitialization();
+        const paywallResult = await stigg.getPaywall({
+          productId,
+          resourceId,
+          billingCountryCode,
+        });
+        const { availableBillingPeriods, defaultBillingPeriod } = computeBillingPeriods(
+          paywallResult.plans,
+          paywallResult.activeSubscriptions,
+          preferredBillingPeriod,
+        );
+
+        setPaywall(paywallResult);
+        setAvailableBillingPeriods(availableBillingPeriods);
+        setSelectedBillingPeriod(defaultBillingPeriod);
+      } catch (err) {
+        logger.error(`Failed to load paywall ${(err as any)?.message}`, err as Error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void loadPaywall();
+  }, [stigg, productId, stigg.isCustomerLoaded, billingCountryCode, resourceId, preferredBillingPeriod]);
+
+  const paywallData = mapPaywallData(paywall, showOnlyEligiblePlans, currentSubscriptionOverrideFn);
+
+  return {
+    customer: paywall?.customer || null,
+    isLoading,
+    selectedBillingPeriod,
+    setSelectedBillingPeriod,
+    availableBillingPeriods,
+    locale,
+    configuration: paywallData.paywallConfiguration,
+    showWatermark: stigg.getShowWatermark(),
+    ...paywallData,
+  };
+}

package/src/components/paywall/index.ts

@@ -0,0 +1,5 @@
+export { PaywallContainer as Paywall } from './PaywallContainer';
+export type { PaywallContainerProps as PaywallProps } from './PaywallContainer';
+export * from './types';
+export type { PlanPriceText, PaywallLocalization, CurrentPlanParams } from './paywallTextOverrides';
+export { PlanCompatibleAddons } from './PlanCompatibleAddons';

package/src/components/paywall/paywallTextOverrides.ts

@@ -0,0 +1,79 @@
+import {
+  BillingPeriod,
+  PaywallCalculatedPricePoint,
+  PaywallCurrency,
+  Plan,
+  Price,
+  PriceTierFragment,
+} from '@stigg/js-client-sdk';
+import merge from 'lodash/merge';
+import { DeepPartial } from '../../types';
+import { PlanPriceText } from '../utils/getPlanPrice';
+import { PaywallPlan } from './types';
+
+export type { PlanPriceText } from '../utils/getPlanPrice';
+
+export type CurrentPlanParams = {
+  plan: Plan;
+  selectedBillingPeriod: BillingPeriod;
+};
+
+export type PaywallLocalization = {
+  highlightChip: string;
+  entitlementsTitle?: (plan: PaywallPlan) => string;
+  addonsTitle?: string;
+  planCTAButton: {
+    upgrade: string | ((plan: PaywallPlan) => string);
+    downgrade: string | ((plan: PaywallPlan) => string);
+    startTrial: (plan: PaywallPlan) => string;
+    custom: ((data: CurrentPlanParams) => string) | string;
+    currentPlan: string;
+    startNew: string;
+    switchToBillingPeriod: (billingPeriod: BillingPeriod) => string;
+    cancelScheduledUpdate: string;
+  };
+  price: {
+    startingAtCaption: string;
+    billingPeriod?: (billingPeriod: BillingPeriod) => string;
+    pricePeriod: (billingPeriod: BillingPeriod) => string;
+    custom: ((data: CurrentPlanParams) => string) | string;
+    priceNotSet: string;
+    free: PlanPriceText | ((currency?: PaywallCurrency) => PlanPriceText);
+    paid?: (priceData: {
+      planPrices: Price[];
+      paywallCalculatedPrice?: PaywallCalculatedPricePoint;
+      plan: Plan;
+      selectedBillingPeriod: BillingPeriod;
+      selectedTier?: PriceTierFragment;
+    }) => PlanPriceText;
+  };
+};
+
+export function getResolvedPaywallLocalize(localizeOverride?: DeepPartial<PaywallLocalization>) {
+  const paywallDefaultLocalization: PaywallLocalization = {
+    highlightChip: 'Recommended',
+    addonsTitle: 'Available add-ons:',
+    planCTAButton: {
+      upgrade: 'Upgrade',
+      downgrade: 'Downgrade',
+      startTrial: (plan: PaywallPlan) => `Start ${plan.defaultTrialConfig?.duration} day trial`,
+      custom: 'Contact us',
+      currentPlan: 'Current plan',
+      startNew: 'Get started',
+      switchToBillingPeriod: (billingPeriod) => {
+        return billingPeriod === BillingPeriod.Monthly ? 'Switch to monthly billing' : 'Switch to annual billing';
+      },
+      cancelScheduledUpdate: 'Cancel',
+    },
+    price: {
+      startingAtCaption: 'Starts at',
+      pricePeriod: (billingPeriod: BillingPeriod) => (billingPeriod === BillingPeriod.Monthly ? '/ month' : '/ year'),
+      free: (currency) => ({
+        price: `${currency?.symbol}0`,
+      }),
+      custom: 'Custom',
+      priceNotSet: 'Price not set',
+    },
+  };
+  return merge(paywallDefaultLocalization, localizeOverride);
+}

package/src/components/paywall/types.ts

@@ -0,0 +1,80 @@
+import {
+  BillingPeriod,
+  Customer,
+  Plan,
+  Subscription,
+  CustomerPortalSubscriptionScheduledUpdateDataFragment,
+  PaywallCurrency,
+  PaywallCalculatedPricePoint,
+  BillableFeature,
+} from '@stigg/js-client-sdk';
+import { CustomizedTheme } from '../../theme/Theme';
+
+export type PaywallData = {
+  plans: PaywallPlan[] | null;
+  customer: Customer | null;
+  currentSubscription: Subscription | null;
+  currentSubscriptionOverride?: CurrentSubscriptionOverride | null;
+  isCustomerOnTrial: boolean;
+  isLoading: boolean;
+  selectedBillingPeriod: BillingPeriod;
+  setSelectedBillingPeriod: (billingPeriod: BillingPeriod) => void;
+  availableBillingPeriods: BillingPeriod[];
+  locale: string;
+  configuration?: CustomizedTheme;
+  showWatermark: boolean;
+};
+
+export type CurrentSubscriptionOverride = {
+  planId: string;
+  billableFeatures: BillableFeature[];
+};
+
+export enum SubscribeIntentionType {
+  START_TRIAL = 'START_TRIAL',
+  UPGRADE_TRIAL_TO_PAID = 'UPGRADE_TRIAL_TO_PAID',
+  REQUEST_CUSTOM_PLAN_ACCESS = 'REQUEST_CUSTOM_PLAN_ACCESS',
+  CHANGE_BILLING_PERIOD = 'CHANGE_BILLING_PERIOD',
+  CHANGE_UNIT_QUANTITY = 'CHANGE_UNIT_QUANTITY',
+  UPGRADE_PLAN = 'UPGRADE_PLAN',
+  DOWNGRADE_PLAN = 'DOWNGRADE_PLAN',
+  CANCEL_SCHEDULED_UPDATES = 'CANCEL_SCHEDULED_UPDATES',
+}
+
+export type PaywallPlan = Plan & {
+  isLowerThanCurrentPlan?: boolean;
+  isTriable: boolean;
+  isCurrentCustomerPlan: boolean;
+  currentCustomerPlanBillingPeriod?: BillingPeriod;
+  trialDaysLeft?: number;
+  isNextPlan?: (billingPeriod: BillingPeriod) => boolean;
+  scheduledUpdate?: CustomerPortalSubscriptionScheduledUpdateDataFragment;
+  paywallCurrency?: PaywallCurrency;
+  paywallCalculatedPricePoints?: PaywallCalculatedPricePoint[];
+};
+
+export type OnPlanSelectedCallbackFn = ({
+  plan,
+  customer,
+  subscription,
+  intentionType,
+  selectedBillingPeriod,
+  billableFeatures,
+}: {
+  plan: Plan;
+  customer: Customer | null;
+  subscription: Subscription | null;
+  intentionType: SubscribeIntentionType;
+  selectedBillingPeriod: BillingPeriod;
+  billableFeatures?: BillableFeature[];
+}) => void | Promise<void>;
+
+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/calculateTrialDaysLeft.ts

@@ -0,0 +1,5 @@
+import moment from 'moment';
+
+export function calculateTrialDaysLeft(trialEndDate: Date) {
+  return moment.utc(trialEndDate).diff(moment.utc(), 'days', false) + 1;
+}

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

@@ -0,0 +1,23 @@
+export function calculateUnitQuantityText(
+  minUnitQuantity?: number | null,
+  maxUnitQuantity?: number | null,
+  unitsPlural?: string | null,
+) {
+  const unitsText = unitsPlural ? ` ${unitsPlural}` : '';
+
+  // copy for only maxunit
+  if ((!minUnitQuantity || minUnitQuantity === 1) && maxUnitQuantity) {
+    return `Up to ${maxUnitQuantity}${unitsText}`;
+  }
+
+  // both limits
+  if (minUnitQuantity && minUnitQuantity > 1 && maxUnitQuantity) {
+    return `${minUnitQuantity}-${maxUnitQuantity}${unitsText}`;
+  }
+
+  if (minUnitQuantity && minUnitQuantity > 1) {
+    return `Minimum ${minUnitQuantity}${unitsText}`;
+  }
+
+  return '';
+}

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

@@ -0,0 +1,36 @@
+import { BillingPeriod, Plan, Subscription, SubscriptionStatus } from '@stigg/js-client-sdk';
+import { countBy, uniq } from 'lodash';
+
+export function computeBillingPeriods(
+  plans: Plan[],
+  activeSubscriptions?: Subscription[] | null,
+  preferredBillingPeriod?: BillingPeriod,
+): { defaultBillingPeriod: BillingPeriod; availableBillingPeriods: BillingPeriod[] } {
+  const billingPeriods: BillingPeriod[] = plans
+    .flatMap((plan) => plan.pricePoints)
+    .map((pricePoint) => pricePoint.billingPeriod);
+
+  const counts = countBy(billingPeriods);
+
+  const availableBillingPeriods = uniq<BillingPeriod>(billingPeriods);
+  let defaultBillingPeriod: BillingPeriod | undefined;
+
+  if (preferredBillingPeriod && availableBillingPeriods.includes(preferredBillingPeriod)) {
+    defaultBillingPeriod = preferredBillingPeriod;
+  } else if (activeSubscriptions) {
+    const activeSubscription = activeSubscriptions.find((x) => x.status === SubscriptionStatus.Active);
+
+    if (activeSubscription && activeSubscription.prices.length > 0) {
+      defaultBillingPeriod = activeSubscription?.prices[0].billingPeriod;
+    }
+  }
+
+  if (!defaultBillingPeriod) {
+    defaultBillingPeriod =
+      (counts[BillingPeriod.Monthly] || 0) > (counts[BillingPeriod.Annually] || 0)
+        ? BillingPeriod.Monthly
+        : BillingPeriod.Annually;
+  }
+
+  return { defaultBillingPeriod, availableBillingPeriods };
+}

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

@@ -0,0 +1,13 @@
+import { BillingPeriod, PricingType } from '@stigg/js-client-sdk';
+import { ShouldHidePlanFn, PaywallPlan } from '../types';
+import { hasPricePoints } from './hasPricePoints';
+
+export function getPlansToDisplay(
+  plans: PaywallPlan[],
+  selectedBillingPeriod: BillingPeriod,
+  shouldHidePlan?: ShouldHidePlanFn,
+): PaywallPlan[] {
+  return plans
+    .filter((plan) => plan.pricingType !== PricingType.Paid || hasPricePoints(plan, selectedBillingPeriod))
+    .filter((plan) => !shouldHidePlan || !shouldHidePlan({ plan }));
+}

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

@@ -0,0 +1,10 @@
+import { BillingPeriod } from '@stigg/js-client-sdk';
+import { PaywallPlan } from '../types';
+
+export function hasPricePoints(plan: PaywallPlan, billingPeriod: BillingPeriod): boolean {
+  return plan.pricePoints.some((pricePoint) => pricePoint.billingPeriod === billingPeriod);
+}
+
+export function hasPricePointsForPlans(plans: PaywallPlan[], billingPeriod: BillingPeriod): boolean {
+  return plans.some((plan) => hasPricePoints(plan, billingPeriod));
+}

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

@@ -0,0 +1,126 @@
+import {
+  BillingPeriod,
+  SubscriptionStatus,
+  Paywall,
+  Plan,
+  Subscription,
+  SubscriptionScheduleType,
+} from '@stigg/js-client-sdk';
+import isNil from 'lodash/isNil';
+import sortBy from 'lodash/sortBy';
+import { CurrentSubscriptionOverride, CurrentSubscriptionOverrideFn, PaywallPlan } from '../types';
+import { calculateTrialDaysLeft } from './calculateTrialDaysLeft';
+import { BillingPeriodChangeVariables, DeepPartial, DowngradeChangeVariables } from '../../../types';
+import { StiggTheme } from '../../../theme/types';
+import { mapPaywallConfiguration } from '../../common/mapExternalTheme';
+
+function getCustomerSubscriptionDetails(activeSubscriptions?: Subscription[] | null) {
+  let isCustomerOnTrial = true;
+  let currentSubscription: Subscription | null =
+    activeSubscriptions?.find((s) => s.status === SubscriptionStatus.InTrial) || null;
+  let currentPlan = currentSubscription?.plan;
+  const trialDaysLeft = currentSubscription?.trialEndDate
+    ? calculateTrialDaysLeft(currentSubscription.trialEndDate)
+    : undefined;
+  if (!currentPlan) {
+    isCustomerOnTrial = false;
+    currentSubscription = activeSubscriptions?.find((s) => s.status === SubscriptionStatus.Active) || null;
+    currentPlan = currentSubscription?.plan;
+  }
+
+  return {
+    currentSubscription,
+    currentPlan,
+    isCustomerOnTrial,
+    trialDaysLeft,
+  };
+}
+
+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,
+  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(
+    ({ subscriptionScheduleType }) => subscriptionScheduleType === SubscriptionScheduleType.Downgrade,
+  );
+  const billingChangedSchedule = scheduledUpdates.find(
+    ({ subscriptionScheduleType }) => subscriptionScheduleType === SubscriptionScheduleType.BillingPeriod,
+  );
+
+  let paywallPlans: PaywallPlan[] = sortBy(plans, (plan) => plan.order).map((plan) => {
+    const eligibleForProductTrial = customer?.eligibleForTrial?.find(
+      (productTrial) => productTrial.productId === plan.product.id,
+    );
+    const isCurrentCustomerPlan = currentSubscriptionOverride?.planId
+      ? currentSubscriptionOverride?.planId === plan.id
+      : plan.id === currentPlan?.id;
+
+    const isNextPlan = (currentBillingPeriod: BillingPeriod) => {
+      const downgradeVariables = downgradeSchedule?.scheduleVariables as DowngradeChangeVariables;
+      const billingChangedVariables = billingChangedSchedule?.scheduleVariables as BillingPeriodChangeVariables;
+      const isPlanHasBillingPeriodPrice = plan.pricePoints.some(
+        (price) => price.billingPeriod === currentBillingPeriod,
+      );
+
+      return downgradeSchedule
+        ? downgradeSchedule.targetPackage?.refId === plan.id &&
+            (!isPlanHasBillingPeriodPrice || downgradeVariables.billingPeriod === currentBillingPeriod)
+        : billingChangedSchedule && isCurrentCustomerPlan
+        ? billingChangedVariables.billingPeriod === currentBillingPeriod
+        : false;
+    };
+
+    return {
+      ...plan,
+      paywallCalculatedPricePoints: paywallCalculatedPricePoints?.filter((pricePoint) => pricePoint.planId === plan.id),
+      isTriable: !isNil(plan.defaultTrialConfig) && (!eligibleForProductTrial || eligibleForProductTrial.eligible),
+      isCurrentCustomerPlan,
+      currentCustomerPlanBillingPeriod,
+      isUpcomingPlan: false,
+      trialDaysLeft,
+      isNextPlan,
+      paywallCurrency: currency,
+      scheduledUpdate: downgradeSchedule || billingChangedSchedule,
+    };
+  });
+  if (plans && currentPlan) {
+    const currentPlanOrder = currentPlan && plans?.find((x) => x.id === currentPlan?.id)?.order;
+    if (!isNil(currentPlanOrder)) {
+      paywallPlans = paywallPlans.map<PaywallPlan>((plan) => ({
+        ...plan,
+        isLowerThanCurrentPlan: currentPlanOrder > plan.order,
+      }));
+      if (showOnlyEligiblePlans) {
+        paywallPlans = paywallPlans.filter((plan) => plan.order >= currentPlanOrder);
+      }
+    }
+  }
+  const paywallConfiguration = configuration ? mapPaywallConfiguration(configuration) : undefined;
+
+  return {
+    currentPlan,
+    currentSubscription,
+    currentSubscriptionOverride,
+    isCustomerOnTrial,
+    plans: paywallPlans,
+    paywallConfiguration,
+  };
+}

package/src/components/utils/calculateDiscountRate.ts

@@ -0,0 +1,49 @@
+import { BillingPeriod, PaywallCalculatedPricePoint, Price } from '@stigg/js-client-sdk';
+import isNil from 'lodash/isNil';
+import { PaywallPlan } from '../paywall';
+import { calculateTierPrice } from './priceTierUtils';
+
+export function calculateDiscountRate(monthlyPrice?: number | null, annuallyPrice?: number | null) {
+  if (!isNil(monthlyPrice) && !isNil(annuallyPrice)) {
+    const annuallyPerMonthPrice = annuallyPrice / 12;
+    return Math.round(((monthlyPrice - annuallyPerMonthPrice) / monthlyPrice) * 100);
+  }
+
+  return null;
+}
+
+function getPlanBillingPeriodAmount(plan: PaywallPlan, billingPeriod: BillingPeriod) {
+  let pricePoint: PaywallCalculatedPricePoint | Price | undefined;
+
+  pricePoint = plan.paywallCalculatedPricePoints?.find((price) => price.billingPeriod === billingPeriod);
+
+  if (!pricePoint) {
+    pricePoint = plan.pricePoints.find((price) => price.billingPeriod === billingPeriod);
+  }
+
+  if (!pricePoint?.amount) {
+    const tieredPrice = plan.pricePoints.find((price) => {
+      return price.isTieredPrice && price.billingPeriod === billingPeriod;
+    });
+
+    if (tieredPrice) {
+      return calculateTierPrice(tieredPrice, 1);
+    }
+  }
+
+  return pricePoint?.amount;
+}
+
+export function calculatePaywallDiscountRate(plans: PaywallPlan[]) {
+  return plans.reduce((maxDiscount, plan) => {
+    const monthlyAmount = getPlanBillingPeriodAmount(plan, BillingPeriod.Monthly);
+    const annuallyAmount = getPlanBillingPeriodAmount(plan, BillingPeriod.Annually);
+
+    const discountRate = calculateDiscountRate(monthlyAmount, annuallyAmount);
+    if (discountRate) {
+      maxDiscount = Math.max(maxDiscount, discountRate);
+    }
+
+    return maxDiscount;
+  }, 0);
+}