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

package/src/components/utils/currencyUtils.ts

@@ -0,0 +1,38 @@
+import { Currency } from '@stigg/js-client-sdk';
+import getSymbolFromCurrency from 'currency-symbol-map';
+
+export const currencyPriceFormatter = ({
+  amount,
+  currency = Currency.Usd,
+  locale,
+  maximumFractionDigits = 5,
+  minimumFractionDigits = 0,
+  removeTrailingZero,
+}: {
+  amount: number;
+  currency?: Currency | string;
+  locale?: string;
+  maximumFractionDigits?: number;
+  minimumFractionDigits?: number;
+  removeTrailingZero?: boolean;
+}) => {
+  const currencyString = currency.toString();
+  const currencySymbol = getSymbolFromCurrency(currencyString);
+  let formattedPrice = new Intl.NumberFormat(locale, {
+    maximumFractionDigits,
+    minimumFractionDigits,
+    style: 'currency',
+    currency: currencyString,
+    trailingZeroDisplay: removeTrailingZero ? 'stripIfInteger' : 'auto',
+    ...(currencySymbol ? { currencyDisplay: 'code' } : {}),
+  } as Intl.NumberFormatOptions).format(amount || 0);
+
+  if (currencySymbol) {
+    formattedPrice = formattedPrice.replace(currencyString, currencySymbol);
+  }
+
+  // remove space between currency symbol and price
+  formattedPrice = formattedPrice.replace(/\s/g, '');
+
+  return formattedPrice;
+};

package/src/components/utils/dateUtils.ts

@@ -0,0 +1,17 @@
+import moment, { MomentInput } from 'moment';
+
+/**
+ * Formats a date with time in the format "MMM D, YYYY h:mmA"
+ * Example: "Aug 2, 2025 3:45PM"
+ */
+export function formatDateTime(date: any): string {
+  return moment(date as MomentInput).format('MMM D, YYYY h:mmA');
+}
+
+/**
+ * Formats a date without time in the format "MMM D, YYYY"
+ * Example: "Aug 2, 2025"
+ */
+export function formatDateOnly(date: any): string {
+  return moment(date as MomentInput).format('MMM D, YYYY');
+}

package/src/components/utils/fixtures/price.fixtures.ts

@@ -0,0 +1,42 @@
+import { Currency, Price, TiersMode } from '@stigg/js-client-sdk';
+
+export const money = (amount: number, currency: Currency) => ({ amount, currency });
+
+export const priceTiersFlat = (tiersMode: TiersMode, currency: Currency): Pick<Price, 'tiers' | 'tiersMode'> => {
+  return {
+    tiersMode,
+    tiers: [
+      {
+        upTo: 10,
+        flatPrice: money(100, currency),
+      },
+      {
+        upTo: 20,
+        flatPrice: money(180, currency),
+      },
+      {
+        upTo: 30,
+        flatPrice: money(240, currency),
+      },
+    ],
+  };
+};
+
+export const priceTiersUnit = (tiersMode: TiersMode, currency: Currency): Pick<Price, 'tiers' | 'tiersMode'> => {
+  return {
+    tiersMode,
+    tiers: [
+      {
+        upTo: 10,
+        unitPrice: money(10, currency),
+      },
+      {
+        upTo: 20,
+        unitPrice: money(9, currency),
+      },
+      {
+        unitPrice: money(8, currency),
+      },
+    ],
+  };
+};

package/src/components/utils/formatNumber.ts

@@ -0,0 +1,5 @@
+export function formatNumber(usageLimit: number | null | undefined) {
+  return usageLimit?.toLocaleString('en-US', {
+    maximumFractionDigits: 0,
+  });
+}

package/src/components/utils/getFeatureName.ts

@@ -0,0 +1,26 @@
+import { FeatureFragment } from '@stigg/api-client-js/src/generated/sdk';
+import lowercase from 'lodash/lowerCase';
+
+export function getFeatureDisplayNameText(
+  featureDisplayName: string,
+  featureUnits: string | undefined | null,
+  featureUnitsPlural: string | undefined | null,
+) {
+  if (!featureUnits && !featureUnitsPlural) {
+    return featureDisplayName;
+  }
+
+  const displayNameLowerCase = lowercase(featureDisplayName);
+  if (
+    displayNameLowerCase === lowercase(featureUnits || '') ||
+    displayNameLowerCase === lowercase(featureUnitsPlural || '')
+  ) {
+    return featureDisplayName;
+  }
+
+  return `${featureDisplayName} (${featureUnitsPlural})`;
+}
+
+export function getFeatureDisplayName(feature: FeatureFragment) {
+  return getFeatureDisplayNameText(feature.displayName, feature.featureUnits, feature.featureUnitsPlural);
+}

package/src/components/utils/getPaidPriceText.ts

@@ -0,0 +1,77 @@
+import { BillingModel, BillingPeriod, PaywallCalculatedPricePoint, Price } from '@stigg/js-client-sdk';
+import { currencyPriceFormatter } from './currencyUtils';
+import { PlanPriceText } from './getPlanPrice';
+import { calculateTierPrice, getPriceFeatureUnit } from './priceTierUtils';
+import { PaywallLocalization } from '../paywall';
+import { numberFormatter } from './numberUtils';
+
+type GetPaidPriceTextParams = {
+  planPrices: Price[];
+  paywallCalculatedPrice?: PaywallCalculatedPricePoint;
+  selectedBillingPeriod: BillingPeriod;
+  locale: string;
+  shouldShowMonthlyPriceAmount: boolean;
+  paywallLocale: PaywallLocalization;
+  perUnitQuantityByFeature?: Record<string, number>;
+};
+
+export function getPaidPriceText({
+  planPrices,
+  paywallCalculatedPrice,
+  selectedBillingPeriod,
+  locale,
+  shouldShowMonthlyPriceAmount,
+  paywallLocale,
+  perUnitQuantityByFeature,
+}: GetPaidPriceTextParams): PlanPriceText {
+  const { amount, currency } = paywallCalculatedPrice || planPrices[0];
+  const priceAmount = amount || 0;
+
+  const isSinglePrice = planPrices.length === 1;
+  let priceNumber =
+    selectedBillingPeriod === BillingPeriod.Annually && shouldShowMonthlyPriceAmount ? priceAmount / 12 : priceAmount;
+
+  let tiers;
+  let tierUnits;
+  const pricePeriod = paywallLocale.price.pricePeriod(
+    shouldShowMonthlyPriceAmount ? BillingPeriod.Monthly : BillingPeriod.Annually,
+  );
+  let unit = pricePeriod;
+
+  for (const price of planPrices) {
+    if (price.isTieredPrice && price.tiers) {
+      const quantity = perUnitQuantityByFeature?.[price.feature!.featureId] || 1;
+      tiers = price.tiers;
+      tierUnits = getPriceFeatureUnit(price);
+
+      priceNumber += calculateTierPrice(price, quantity, selectedBillingPeriod, shouldShowMonthlyPriceAmount);
+    }
+  }
+
+  if (isSinglePrice) {
+    const price = planPrices[0];
+    const formattedUnits =
+      price.blockSize && price.blockSize > 1
+        ? `for ${numberFormatter(price.blockSize)} ${price.feature?.unitsPlural || price.feature?.units || ''}`
+        : `per ${price.feature?.units || ''}`;
+
+    if (price.pricingModel === BillingModel.PerUnit && !price.isTieredPrice) {
+      unit = `${formattedUnits} ${pricePeriod}`;
+    } else if (price.pricingModel === BillingModel.UsageBased) {
+      unit = `${formattedUnits}`;
+    }
+  }
+
+  return {
+    price: currencyPriceFormatter({
+      amount: priceNumber,
+      currency,
+      locale,
+      minimumFractionDigits: 2,
+      removeTrailingZero: true,
+    }),
+    unit,
+    tiers,
+    tierUnits,
+  };
+}

package/src/components/utils/getPlanPrice.ts

@@ -0,0 +1,62 @@
+import { BillingPeriod, PriceTierFragment, PricingType } from '@stigg/js-client-sdk';
+import { getPaidPriceText } from './getPaidPriceText';
+import { PaywallPlan, PaywallLocalization } from '../paywall';
+
+export type PlanPriceText = {
+  price: string;
+  unit?: string;
+  tiers?: PriceTierFragment[] | null | undefined;
+  tierUnits?: string;
+};
+
+export function getPlanPrice(
+  plan: PaywallPlan,
+  billingPeriod: BillingPeriod,
+  paywallLocale: PaywallLocalization,
+  locale: string,
+  shouldShowMonthlyPriceAmount: boolean,
+  perUnitQuantityByFeature?: Record<string, number>,
+): PlanPriceText {
+  switch (plan.pricingType) {
+    case PricingType.Free:
+      if (typeof paywallLocale.price.free === 'function') {
+        return paywallLocale.price.free(plan.paywallCurrency);
+      }
+
+      return paywallLocale.price.free;
+    case PricingType.Custom:
+      return {
+        price:
+          typeof paywallLocale.price.custom === 'function'
+            ? paywallLocale.price.custom({ plan, selectedBillingPeriod: billingPeriod })
+            : paywallLocale.price.custom,
+      };
+    case PricingType.Paid: {
+      const planPrices = plan.pricePoints.filter((pricePoint) => pricePoint.billingPeriod === billingPeriod);
+      const paywallCalculatedPrice = plan.paywallCalculatedPricePoints?.find(
+        (pricePoint) => pricePoint.billingPeriod === billingPeriod,
+      );
+
+      if (!planPrices?.length && !paywallCalculatedPrice) {
+        return {
+          price: paywallLocale.price.priceNotSet,
+        };
+      }
+
+      const paidParams = {
+        planPrices,
+        paywallCalculatedPrice,
+        selectedBillingPeriod: billingPeriod,
+        perUnitQuantityByFeature: perUnitQuantityByFeature || {},
+      };
+
+      return paywallLocale.price.paid
+        ? paywallLocale.price.paid({ ...paidParams, plan })
+        : getPaidPriceText({ ...paidParams, locale, shouldShowMonthlyPriceAmount, paywallLocale });
+    }
+    default:
+      return {
+        price: '',
+      };
+  }
+}

package/src/components/utils/getSubscriptionScheduleUpdateTexts.tsx

@@ -0,0 +1,88 @@
+import moment, { MomentInput } from 'moment';
+import { isNil, compact } from 'lodash';
+import {
+  CustomerPortalSubscription,
+  CustomerPortalSubscriptionScheduledUpdateDataFragment,
+  SubscriptionScheduleType,
+} from '@stigg/js-client-sdk';
+import { CustomerPortalSubscriptionPriceFragment } from '@stigg/api-client-js/src/generated/sdk';
+import { BillingPeriodChangeVariables, UnitAmountChangeVariables } from '../../types';
+import { FeatureType } from '../customerPortal/subscriptionOverview/types/customerPortal.types';
+
+const formatDate = (date: string) => moment.utc(date).format('MMMM Do, yyyy');
+
+type GetSubscriptionScheduleUpdateTextsProps = {
+  scheduledUpdate: CustomerPortalSubscriptionScheduledUpdateDataFragment | undefined;
+  subscriptionPrices?: CustomerPortalSubscriptionPriceFragment[];
+  billingPeriodRange?: CustomerPortalSubscription['billingPeriodRange'];
+  options?: { withDate?: boolean; postfix?: string };
+};
+
+export function getSubscriptionScheduleUpdateTexts({
+  scheduledUpdate,
+  subscriptionPrices,
+  billingPeriodRange,
+  options = {},
+}: GetSubscriptionScheduleUpdateTextsProps) {
+  if (!scheduledUpdate) {
+    return {};
+  }
+  const { withDate, postfix = '' } = options;
+
+  switch (scheduledUpdate.subscriptionScheduleType) {
+    case SubscriptionScheduleType.Downgrade: {
+      let shouldShowDate = withDate;
+      if (isNil(shouldShowDate) && billingPeriodRange?.end) {
+        shouldShowDate = !moment(scheduledUpdate.scheduledExecutionTime as MomentInput).isSame(
+          billingPeriodRange?.end as MomentInput,
+          'day',
+        );
+      }
+
+      const line1 = (
+        <>
+          Your subscription will be downgraded to the <b>{scheduledUpdate.targetPackage?.displayName} plan</b>{' '}
+          {shouldShowDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime as string)}</> : postfix}.
+        </>
+      );
+      const line2 = `Until then you still have access to your current plan.`;
+
+      return { line1, line2 };
+    }
+
+    case SubscriptionScheduleType.BillingPeriod: {
+      const variables = scheduledUpdate.scheduleVariables as BillingPeriodChangeVariables;
+      const line1 = (
+        <>
+          Your billing cycle will change to <b>{variables.billingPeriod?.toLocaleLowerCase()}</b>{' '}
+          {withDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime as string)}</> : postfix}.
+        </>
+      );
+
+      return { line1 };
+    }
+
+    case SubscriptionScheduleType.UnitAmount: {
+      const variables = scheduledUpdate.scheduleVariables as UnitAmountChangeVariables;
+      const features: FeatureType[] = compact(subscriptionPrices?.map(({ feature }) => feature));
+      const feature = features.find(({ id }) => id === variables.featureId);
+      const { featureUnits, featureUnitsPlural } = feature || {};
+      const unitsText = variables.newUnitAmount === 1 ? featureUnits : featureUnitsPlural;
+
+      const line1 = (
+        <>
+          Your subscription will be updated to <b>{variables.newUnitAmount}</b> {unitsText}{' '}
+          {withDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime as string)}</> : postfix}.
+        </>
+      );
+
+      const line2 = `Until then you still have access to your current ${featureUnits} count.`;
+
+      return { line1, line2 };
+    }
+
+    default: {
+      return {};
+    }
+  }
+}

package/src/components/utils/numberUtils.ts

@@ -0,0 +1,6 @@
+export function numberFormatter(
+  number: number,
+  { locale, maximumFractionDigits }: { locale?: string; maximumFractionDigits?: number } = {},
+) {
+  return new Intl.NumberFormat(locale, { maximumFractionDigits }).format(number);
+}

package/src/components/utils/onWheelBlur.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const ON_WHEEL_BLUR = (e: React.WheelEvent<HTMLInputElement>) => (e.target as HTMLElement).blur();

package/src/components/utils/planPrices.ts

@@ -0,0 +1,10 @@
+import { Plan } from '@stigg/js-client-sdk';
+import { BillingPeriod } from '@stigg/api-client-js/src/generated/sdk';
+
+export const hasMonthlyPrices = (plan?: Plan) =>
+  !!plan?.pricePoints.some((pricePoint) => pricePoint.billingPeriod === BillingPeriod.Monthly);
+
+export const hasAnnualPrices = (plan?: Plan) =>
+  !!plan?.pricePoints.some((pricePoint) => pricePoint.billingPeriod === BillingPeriod.Annually);
+
+export const hasMultipleBillingPeriods = (plan?: Plan) => hasMonthlyPrices(plan) && hasAnnualPrices(plan);

package/src/components/utils/priceTierUtils.spec.ts

@@ -0,0 +1,84 @@
+import { Currency, TiersMode } from '@stigg/js-client-sdk';
+import { priceTiersFlat, priceTiersUnit } from './fixtures/price.fixtures';
+import { calculateTierPrice, calculateTierPriceGraduated } from './priceTierUtils';
+
+describe('getPrice tests', () => {
+  describe('volume flat price', () => {
+    test('should get total price', () => {
+      const price = priceTiersFlat(TiersMode.Volume, Currency.Usd);
+      expect(calculateTierPrice(price, 1)).toEqual(100);
+      expect(calculateTierPrice(price, 3)).toEqual(100);
+      expect(calculateTierPrice(price, 7)).toEqual(100);
+      expect(calculateTierPrice(price, 10)).toEqual(100);
+      expect(calculateTierPrice(price, 11)).toEqual(180);
+      expect(calculateTierPrice(price, 14)).toEqual(180);
+      expect(calculateTierPrice(price, 20)).toEqual(180);
+      expect(calculateTierPrice(price, 21)).toEqual(240);
+      expect(calculateTierPrice(price, 25)).toEqual(240);
+      expect(calculateTierPrice(price, 30)).toEqual(240);
+
+      // questionable behaviour, but that's the current implementation :)
+      expect(calculateTierPrice(price, 35)).toEqual(240);
+      expect(calculateTierPrice(price, 250)).toEqual(240);
+    });
+  });
+
+  describe('volume per unit', () => {
+    test('should get total price', () => {
+      const price = priceTiersUnit(TiersMode.Volume, Currency.Usd);
+      expect(calculateTierPrice(price, 1)).toEqual(10);
+      expect(calculateTierPrice(price, 3)).toEqual(30);
+      expect(calculateTierPrice(price, 7)).toEqual(70);
+      expect(calculateTierPrice(price, 10)).toEqual(100);
+      expect(calculateTierPrice(price, 11)).toEqual(99);
+      expect(calculateTierPrice(price, 14)).toEqual(126);
+      expect(calculateTierPrice(price, 20)).toEqual(180);
+      expect(calculateTierPrice(price, 21)).toEqual(168);
+      expect(calculateTierPrice(price, 25)).toEqual(200);
+      expect(calculateTierPrice(price, 30)).toEqual(240);
+      expect(calculateTierPrice(price, 35)).toEqual(280);
+      expect(calculateTierPrice(price, 240)).toEqual(1_920);
+    });
+  });
+
+  describe('graduated', () => {
+    test('should get total price', () => {
+      const price = priceTiersUnit(TiersMode.Graduated, Currency.Usd);
+      expect(calculateTierPrice(price, 1)).toEqual(10);
+      expect(calculateTierPrice(price, 3)).toEqual(30);
+      expect(calculateTierPrice(price, 7)).toEqual(70);
+      expect(calculateTierPrice(price, 10)).toEqual(100);
+      expect(calculateTierPrice(price, 11)).toEqual(109);
+      expect(calculateTierPrice(price, 14)).toEqual(136);
+      expect(calculateTierPrice(price, 20)).toEqual(190);
+      expect(calculateTierPrice(price, 21)).toEqual(198);
+      expect(calculateTierPrice(price, 25)).toEqual(230);
+      expect(calculateTierPrice(price, 30)).toEqual(270);
+      expect(calculateTierPrice(price, 35)).toEqual(310);
+      expect(calculateTierPrice(price, 240)).toEqual(1_950);
+    });
+
+    test('should return nested breakdown', () => {
+      const price = priceTiersUnit(TiersMode.Graduated, Currency.Usd);
+
+      const result1 = calculateTierPriceGraduated(price.tiers!, 10);
+      expect(result1.total).toEqual(100);
+      expect(result1.breakdown).toEqual([{ unitQuantity: 10, amount: 100 }]);
+
+      const result2 = calculateTierPriceGraduated(price.tiers!, 13);
+      expect(result2.total).toEqual(127);
+      expect(result2.breakdown).toEqual([
+        { unitQuantity: 10, amount: 100 },
+        { unitQuantity: 3, amount: 27 },
+      ]);
+
+      const result3 = calculateTierPriceGraduated(price.tiers!, 35);
+      expect(result3.total).toEqual(310);
+      expect(result3.breakdown).toEqual([
+        { unitQuantity: 10, amount: 100 },
+        { unitQuantity: 10, amount: 90 },
+        { unitQuantity: 15, amount: 120 },
+      ]);
+    });
+  });
+});