@stigg/react-sdk 4.3.1 → 4.4.0-beta.0

package/src/components/checkout/textOverrides.ts

@@ -0,0 +1,62 @@
+import { BillingPeriod, SubscriptionPreviewTaxDetails } from '@stigg/js-client-sdk';
+import moment from 'moment';
+import merge from 'lodash/merge';
+import { DeepPartial } from '../../types';
+import { formatBillingPeriod } from './formatting';
+
+export type CheckoutLocalization = {
+  changePlan: string;
+  billingPeriodsTitle: string;
+  addAddonText: string;
+  newPaymentMethodText: string;
+  newPaymentMethodCardTitle: string;
+  newPaymentMethodBillingAddressTitle: string;
+  baseChargeText: string | ((params: { billingPeriod: BillingPeriod }) => string);
+  totalText: string;
+  subTotalText: string;
+  addCouponCodeText: string;
+  couponCodeTitle: string;
+  addonsSectionTitle: string;
+  changesWillApplyAtEndOfBillingPeriod: string | ((params: { billingPeriodEnd: Date }) => string);
+  checkoutButton: {
+    nextText: string;
+    downgradeText: string;
+    upgradeText: string;
+    purchaseText: string;
+  };
+  appliedCreditsTitle: string;
+  taxTitle: (params: { taxDetails: SubscriptionPreviewTaxDetails }) => string;
+};
+
+export function getResolvedCheckoutLocalize(
+  localizeOverride?: DeepPartial<CheckoutLocalization>,
+): CheckoutLocalization {
+  const checkoutDefaultLocalization: CheckoutLocalization = {
+    changePlan: 'Change plan',
+    billingPeriodsTitle: 'Billing cycle',
+    addAddonText: 'Add',
+    newPaymentMethodText: 'New payment method',
+    newPaymentMethodBillingAddressTitle: 'Billing address',
+    newPaymentMethodCardTitle: 'Payment method',
+    baseChargeText: ({ billingPeriod }) => `${formatBillingPeriod(billingPeriod)} charge`,
+    totalText: 'Total due today',
+    subTotalText: 'Subtotal',
+    addCouponCodeText: 'Add coupon code',
+    couponCodeTitle: 'Coupon code',
+    addonsSectionTitle: 'Add-ons',
+    changesWillApplyAtEndOfBillingPeriod: ({ billingPeriodEnd }) =>
+      `Your changes will apply on the end of your current billing cycle on ${moment(billingPeriodEnd).format(
+        'MMM D, YYYY',
+      )}.`,
+    checkoutButton: {
+      nextText: 'Next',
+      downgradeText: 'Downgrade',
+      upgradeText: 'Upgrade',
+      purchaseText: 'Purchase',
+    },
+    appliedCreditsTitle: 'Applied credits',
+    taxTitle: ({ taxDetails }) => `${taxDetails.displayName} (${taxDetails?.percentage}%)`,
+  };
+
+  return merge(checkoutDefaultLocalization, localizeOverride);
+}

package/src/components/checkout/theme.ts

@@ -0,0 +1,43 @@
+import { CheckoutConfiguration } from '@stigg/js-client-sdk';
+import { StiggTheme } from '../../theme/types';
+import { DeepPartial } from '../../types';
+
+export type CheckoutTheme = {
+  primary: string;
+  textColor: string;
+  backgroundColor: string;
+  borderColor: string;
+  selectionColor: string;
+  summaryBackgroundColor: string;
+};
+
+const defaultCheckoutTheme: CheckoutTheme = {
+  primary: 'rgb(50, 126, 238)',
+  textColor: 'rgb(0, 30, 108)',
+  backgroundColor: 'rgb(255, 255, 255)',
+  borderColor: 'rgb(235, 237, 243)',
+  selectionColor: 'rgb(229, 242, 255)',
+  summaryBackgroundColor: 'rgb(109, 121, 144)',
+};
+
+export function getResolvedCheckoutTheme(
+  globalTheme: StiggTheme,
+  themeOverride?: DeepPartial<CheckoutTheme>,
+  _remoteConfiguration?: CheckoutConfiguration | null, // all the remote colors override theme colors, no need to use them here
+): CheckoutTheme {
+  const { palette: globalPalette } = globalTheme || {};
+
+  return {
+    primary: themeOverride?.primary || globalPalette?.primary || defaultCheckoutTheme.primary,
+    textColor: themeOverride?.textColor || globalPalette?.text.primary || defaultCheckoutTheme.textColor,
+    backgroundColor:
+      themeOverride?.backgroundColor || globalPalette?.backgroundPaper || defaultCheckoutTheme.backgroundColor,
+    borderColor: themeOverride?.borderColor || globalPalette?.outlinedBorder || defaultCheckoutTheme.borderColor,
+    selectionColor:
+      themeOverride?.selectionColor || globalPalette?.backgroundSection || defaultCheckoutTheme.selectionColor,
+    summaryBackgroundColor:
+      themeOverride?.summaryBackgroundColor ||
+      globalPalette?.backgroundHighlight ||
+      defaultCheckoutTheme.summaryBackgroundColor,
+  };
+}

package/src/components/common/Icon.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import styled from '@emotion/styled/macro';
 import { CSSProperties } from 'react';
 import { css, Theme, useTheme } from '@emotion/react';
-import { ICON_COMPONENTS, Icons } from './customIcons';
 import { getIconColor, IconColor } from './iconColor';
+import * as customIcons from './customIcons';
 
-const IconWrapper = styled.div<{ $pathColor?: string, $rectColor?: string; $strokeColor?: string }>`
+export type Icons = keyof typeof customIcons;
+
+const IconWrapper = styled.div<{ $pathColor?: string; $rectColor?: string; $strokeColor?: string }>`
   ${({ $pathColor }) =>
-          $pathColor &&
+    $pathColor &&
     css`
       path {
         fill: ${$pathColor};
@@ -15,20 +17,20 @@ const IconWrapper = styled.div<{ $pathColor?: string, $rectColor?: string; $stro
     `}
 
   ${({ $rectColor }) =>
-          $rectColor &&
-          css`
-            svg rect {
-              fill: ${$rectColor};
-            }
+    $rectColor &&
+    css`
+      svg rect {
+        fill: ${$rectColor};
+      }
     `}
 
 
   ${({ $strokeColor }) =>
-          $strokeColor &&
-          css`
-            g {
-              stroke: ${$strokeColor};
-            }
+    $strokeColor &&
+    css`
+      g {
+        stroke: ${$strokeColor};
+      }
     `}
 `;
 
@@ -41,15 +43,8 @@ export type IconProps = {
   svgStrokeColor?: IconColor | string;
 };
 
-export function Icon({
-  icon,
-  className,
-  style,
-  svgPathColor,
-  svgRectColor,
-  svgStrokeColor,
-}: IconProps) {
-  const IconComponent = ICON_COMPONENTS[icon];
+export function Icon({ icon, className, style, svgPathColor, svgRectColor, svgStrokeColor }: IconProps) {
+  const IconComponent = (customIcons as any)[icon];
   const theme = useTheme() as Theme;
 
   return (

package/src/components/common/PoweredByStigg.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled/macro';
 
 export const STIGG_WATERMARK_CLASSNAME = 'stigg-watermark';
 
-export type PoweredByStiggSources = 'paywall' | 'customer_portal';
+export type PoweredByStiggSources = 'paywall' | 'customer_portal' | 'checkout';
 
 const PoweredByStiggThemedSvg = styled(PoweredByStiggSvg)`
   * {

package/src/components/{paywall/TiersLayout.tsx → common/TiersSelectContainer.tsx}

@@ -1,10 +1,10 @@
-import { PaywallPlan } from './types';
 import { PriceTierFragment } from '@stigg/js-client-sdk';
 import { MenuItem, OutlinedInput, Select, SelectChangeEvent } from '@mui/material';
 import { Typography } from '../common/Typography';
 import { map } from 'lodash';
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled/macro';
+import { getTierByQuantity } from '../utils/priceTierUtils';
 
 const TierSelect = styled(Select)`
   border-radius: 10px;
@@ -24,32 +24,33 @@ const TierInput = styled(OutlinedInput)`
   }
 `;
 
-export function TiersLayout({
-  plan,
+export function TiersSelectContainer({
+  componentId,
   tiers,
   tierUnits,
   selectedTier,
   handleTierChange,
 }: {
-  plan: PaywallPlan;
+  componentId: string;
   tiers?: PriceTierFragment[] | null;
   tierUnits?: string;
   selectedTier?: PriceTierFragment;
   handleTierChange: (tier: PriceTierFragment) => void;
 }) {
   const handleChange = (event: SelectChangeEvent<unknown>, _: ReactNode) => {
-    handleTierChange(tiers!.find(tier => tier.upTo.toString() === event.target.value)!);
+    if (!tiers) return;
+
+    handleTierChange(getTierByQuantity(tiers, event.target.value as number)!);
   };
 
   return (
     <Typography className="stigg-price-tier-select" style={{ minHeight: '46px' }}>
       {tiers ? (
         <TierSelect
-          labelId="demo-simple-select-label"
-          id={`select_${plan.id}`}
           value={selectedTier ? selectedTier.upTo.toString() : tiers[0].upTo.toString()}
           fullWidth
           onChange={handleChange}
+          id={componentId}
           input={<TierInput />}
           MenuProps={{
             MenuListProps: { disablePadding: true },

package/src/components/common/Typography.tsx

@@ -86,7 +86,17 @@ function getFontWeight(theme: Theme, variant: TypographyProps['variant']) {
 }
 
 export const Typography = forwardRef((props: TypographyProps, ref) => {
-  const { children, span, style, fontWeight, variant = 'body1', color = 'primary', overrideColor, bold, ...rest } = props;
+  const {
+    children,
+    span,
+    style,
+    fontWeight,
+    variant = 'body1',
+    color = 'primary',
+    overrideColor,
+    bold,
+    ...rest
+  } = props;
   const theme = useTheme() as Theme;
   const level = getLevel(variant);
   const levelClassName = `typography-level-${level}`;

package/src/components/common/customIcons.ts

@@ -1,28 +1,19 @@
-import { ReactElement, SVGProps } from 'react';
-import RenewSubscription from '../../assets/subscription-renews-icon.svg';
-import BillingInfoCustomer from '../../assets/billing-info-customer.svg';
-import CreditCard from '../../assets/credit-card.svg';
-import ScheduleBox from '../../assets/schedule-box.svg';
-import ScheduleClock from '../../assets/schedule.svg';
-import Restore from '../../assets/restore.svg';
-import MiniSchedule from '../../assets/mini-schedule.svg';
-import DollarCoin from '../../assets/dollar-coin.svg';
-import Promotions from '../../assets/promotions.svg';
-import Addons from '../../assets/addons.svg';
-import ContactSupport from '../../assets/contact-support.svg';
-
-export const ICON_COMPONENTS: {[name: string]: ((props: SVGProps<SVGElement>) => ReactElement)} = {
-  RenewSubscription,
-  BillingInfoCustomer,
-  CreditCard,
-  ScheduleBox,
-  ScheduleClock,
-  Restore,
-  MiniSchedule,
-  DollarCoin,
-  Promotions,
-  Addons,
-  ContactSupport,
-};
-
-export type Icons = keyof typeof ICON_COMPONENTS;
+export { default as Addons } from '../../assets/addons.svg';
+export { default as BillingInfoCustomer } from '../../assets/billing-info-customer.svg';
+export { default as ContactSupport } from '../../assets/contact-support.svg';
+export { default as CreditCard } from '../../assets/credit-card.svg';
+export { default as DollarCoin } from '../../assets/dollar-coin.svg';
+export { default as MiniSchedule } from '../../assets/mini-schedule.svg';
+export { default as Promotions } from '../../assets/promotions.svg';
+export { default as Restore } from '../../assets/restore.svg';
+export { default as ScheduleBox } from '../../assets/schedule-box.svg';
+export { default as ScheduleClock } from '../../assets/schedule.svg';
+export { default as RenewSubscription } from '../../assets/subscription-renews-icon.svg';
+export { default as Trash } from '../../assets/trash.svg';
+export { default as PaymentMethod } from '../../assets/payment-method.svg';
+export { default as OutlinedCircle } from '../../assets/outlined-circle.svg';
+export { default as OutlinedCheckedCircle } from '../../assets/outlined-checked-circle.svg';
+export { default as OutlinedCheckedCircleDisabled } from '../../assets/outlined-checked-circle-disabled.svg';
+export { default as ArrowForward } from '../../assets/arrow-forward.svg';
+export { default as Close } from '../../assets/close.svg';
+export { default as Check } from '../../assets/check.svg';

package/src/components/common/mapExternalTheme.ts

@@ -1,13 +1,15 @@
 import {
   Alignment,
+  CheckoutConfiguration,
   CustomerPortalConfiguration,
   FontWeight as JSFontWeight,
   PaywallConfiguration,
+  TypographyConfiguration,
 } from '@stigg/js-client-sdk';
 import { CustomizedTheme } from '../../theme/Theme';
 import { HorizontalAlignment, FontWeight } from '../../theme/types';
 
-function addCssUnits(value?: number | null, unit: string = 'px') {
+function addCssUnits(value?: number | null, unit = 'px') {
   if (!value) {
     return undefined;
   }
@@ -29,10 +31,7 @@ function mapFontWeight(defaultValue: FontWeight, fontWeight?: JSFontWeight | nul
   }
 }
 
-function mapTypography(
-  configuration: CustomerPortalConfiguration | PaywallConfiguration,
-): CustomizedTheme['typography'] {
-  const { typography } = configuration;
+function mapTypography(typography?: TypographyConfiguration | null): CustomizedTheme['typography'] {
   return {
     fontFamilyUrl: typography?.fontFamily || undefined,
     h1: {
@@ -58,6 +57,7 @@ function mapAlignment(alignment?: Alignment | null): HorizontalAlignment | undef
   if (!alignment) {
     return undefined;
   }
+
   switch (alignment) {
     case Alignment.Left:
       return 'left';
@@ -65,11 +65,14 @@ function mapAlignment(alignment?: Alignment | null): HorizontalAlignment | undef
       return 'center';
     case Alignment.Right:
       return 'right';
+    default: {
+      return undefined;
+    }
   }
 }
 
 export function mapCustomerPortalConfiguration(configuration: CustomerPortalConfiguration): CustomizedTheme {
-  const { palette } = configuration;
+  const { palette, typography } = configuration;
   return {
     palette: {
       primary: palette?.primary || undefined,
@@ -80,12 +83,12 @@ export function mapCustomerPortalConfiguration(configuration: CustomerPortalConf
         primary: palette?.textColor || undefined,
       },
     },
-    typography: mapTypography(configuration),
+    typography: mapTypography(typography),
   };
 }
 
 export function mapPaywallConfiguration(paywallConfiguration: PaywallConfiguration): CustomizedTheme {
-  const { palette, layout, customCss } = paywallConfiguration;
+  const { palette, layout, customCss, typography } = paywallConfiguration;
   return {
     customCss: customCss || undefined,
     palette: {
@@ -97,7 +100,7 @@ export function mapPaywallConfiguration(paywallConfiguration: PaywallConfigurati
         primary: palette?.textColor || undefined,
       },
     },
-    typography: mapTypography(paywallConfiguration),
+    typography: mapTypography(typography),
     layout: {
       ctaAlignment: mapAlignment(layout?.alignment),
       headerAlignment: mapAlignment(layout?.alignment),
@@ -109,3 +112,20 @@ export function mapPaywallConfiguration(paywallConfiguration: PaywallConfigurati
     },
   };
 }
+
+export function mapCheckoutConfiguration(configuration: CheckoutConfiguration): CustomizedTheme {
+  const { palette, typography } = configuration;
+  return {
+    palette: {
+      primary: palette?.primary || undefined,
+      backgroundPaper: palette?.backgroundColor || undefined,
+      outlinedBorder: palette?.borderColor || undefined,
+      text: {
+        primary: palette?.textColor || undefined,
+      },
+      backgroundHighlight: palette?.selectionColor || undefined,
+      backgroundSection: palette?.summaryBackgroundColor || undefined,
+    },
+    typography: mapTypography(typography),
+  };
+}

package/src/components/customerPortal/subscriptionOverview/tabs/SubscriptionTabs.tsx

@@ -10,8 +10,7 @@ import { CustomerPortalSection } from '../../CustomerPortal';
 import { CustomerPortalLocalization } from '../../customerPortalTextOverrides';
 import { StyledTabs, TabContent, TabsLayout } from './SubscriptionTabs.style';
 import { CustomerPortalTheme } from '../../customerPortalTheme';
-import { Icon } from '../../../common/Icon';
-import { Icons } from '../../../common/customIcons';
+import { Icon, Icons } from '../../../common/Icon';
 import { FontWeight } from 'styled-typography';
 
 type TabPanelProps = {
@@ -41,21 +40,16 @@ export type SubscriptionTabsProps = {
 function TabTitle({ isSelected, label, icon }: { isSelected: boolean; label: string; icon: Icons }) {
   const color = isSelected ? 'primary' : 'secondary';
   return (
-    <div style={{display: 'flex', gap: 8, alignItems: 'center' }}>
+    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
       <Icon icon={icon} svgStrokeColor={color} />
-      <Typography variant="h6" bold={isSelected} fontWeight={FontWeight.Medium}  color={color}>
+      <Typography variant="h6" bold={isSelected} fontWeight={FontWeight.Medium} color={color}>
         {label}
       </Typography>
     </div>
   );
 }
 
-export function SubscriptionTabs({
-  customerPortal,
-  hiddenSections,
-  textOverrides,
-  theme,
-}: SubscriptionTabsProps) {
+export function SubscriptionTabs({ customerPortal, hiddenSections, textOverrides, theme }: SubscriptionTabsProps) {
   const allAddons = flatMap(customerPortal.subscriptions, subscription => subscription.addons);
   const isSectionHidden = (sectionName: CustomerPortalSection) =>
     hiddenSections?.some(section => section === sectionName);
@@ -81,14 +75,14 @@ export function SubscriptionTabs({
             <Tab
               sx={{ textTransform: 'none' }}
               value={1}
-              label={<TabTitle isSelected={value === 1} label={textOverrides.addonsTabTitle} icon='Addons' />}
+              label={<TabTitle isSelected={value === 1} label={textOverrides.addonsTabTitle} icon="Addons" />}
             />
           ) : null}
           {showPromotions ? (
             <Tab
               sx={{ textTransform: 'none' }}
               value={2}
-              label={<TabTitle isSelected={value === 2} label={textOverrides.promotionsTabTitle} icon='Promotions' />}
+              label={<TabTitle isSelected={value === 2} label={textOverrides.promotionsTabTitle} icon="Promotions" />}
             />
           ) : null}
         </StyledTabs>

package/src/components/hooks/useChargeSort.ts

@@ -0,0 +1,17 @@
+import sortBy from 'lodash/sortBy';
+import { useMemo } from 'react';
+
+import { BillingModel, Price } from '@stigg/js-client-sdk';
+
+const CHARGES_BILLING_MODEL_ORDER = [BillingModel.FlatFee, BillingModel.PerUnit, BillingModel.UsageBased];
+
+export const sortCharges = (charges: Price[]) => {
+  return sortBy(charges, [
+    charge => CHARGES_BILLING_MODEL_ORDER.indexOf(charge.pricingModel),
+    charge => charge.feature?.displayName,
+  ]);
+};
+
+export const useChargesSort = (charges: Price[]) => {
+  return useMemo(() => sortCharges(charges), [charges]);
+};

package/src/components/paywall/Paywall.tsx

@@ -11,7 +11,7 @@ import { useStiggContext } from '../..';
 import { hasPricePointsForPlans } from './utils/hasPricePoints';
 import { getPlansToDisplay } from './utils/getPlansToDisplay';
 import { getPlanPrice } from '../utils/getPlanPrice';
-import { getSelectedTier } from './planPriceTier';
+import { getSelectedTier } from '../utils/priceTierUtils';
 
 const PaywallPlansContainer = styled.div`
   color: ${({ theme }) => theme.stigg.palette.text.primary};

package/src/components/paywall/PlanOffering.tsx

@@ -11,7 +11,7 @@ import classNames from 'classnames';
 import { Grid } from '@mui/material';
 import MiniSchedule from '../../assets/mini-schedule.svg';
 import { PlanPrice } from './PlanPrice';
-import { getSelectedTier } from './planPriceTier';
+import { getSelectedTier } from '../utils/priceTierUtils';
 
 const PlanOfferingContainer = styled.div<{ $isHighlighted: boolean; $isCurrentPlan: boolean }>`
   position: relative;

package/src/components/paywall/PlanOfferingButton.tsx

@@ -9,7 +9,7 @@ import ClipLoader from 'react-spinners/ClipLoader';
 import { Typography } from '../common/Typography';
 import { getSubscriptionScheduleUpdateTexts } from '../utils/getSubscriptionScheduleUpdateTexts';
 import { isFunction } from 'lodash';
-import { compareSelectedTierToCurrentTier, PriceTierComparison } from './planPriceTier';
+import { compareSelectedTierToCurrentTier, PriceTierComparison } from '../utils/priceTierUtils';
 
 const LoadingIndicator = styled(ClipLoader)`
   margin-left: 10px;

package/src/components/paywall/PlanPrice.tsx

@@ -5,7 +5,7 @@ import { Typography } from '../common/Typography';
 import React, { useEffect, useState } from 'react';
 import styled from '@emotion/styled/macro';
 import { BillingPeriod, PriceTierFragment } from '@stigg/js-client-sdk';
-import { TiersLayout } from './TiersLayout';
+import { TiersSelectContainer } from '../common/TiersSelectContainer';
 
 const EMPTY_CHAR = '‎';
 
@@ -28,21 +28,14 @@ type PriceBillingPeriodProps = {
   billingPeriod: BillingPeriod;
   hasMonthlyPrice: boolean;
   hasAnnuallyPrice: boolean;
-  paywallLocale: PaywallLocalization;
 };
 
-function PriceBillingPeriod({
-  plan,
-  billingPeriod,
-  hasMonthlyPrice,
-  hasAnnuallyPrice,
-  paywallLocale,
-}: PriceBillingPeriodProps) {
+function PriceBillingPeriod({ plan, billingPeriod, hasMonthlyPrice, hasAnnuallyPrice }: 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()}`;
+    content = `, billed ${billingPeriod.toLowerCase()}`;
   }
 
   return (
@@ -140,14 +133,13 @@ export const PlanPrice = ({
               billingPeriod={billingPeriod}
               hasAnnuallyPrice={hasAnnuallyPrice}
               hasMonthlyPrice={hasMonthlyPrice}
-              paywallLocale={paywallLocale}
             />
           </Typography>
         )}
 
         {withTiersRow && (
-          <TiersLayout
-            plan={plan}
+          <TiersSelectContainer
+            componentId={`${plan.id}_${featureId}_tier`}
             tiers={tiers}
             tierUnits={tierUnits}
             selectedTier={selectedTier}

package/src/components/paywall/paywallTextOverrides.ts

@@ -26,8 +26,6 @@ export type PaywallLocalization = {
   };
   price: {
     startingAtCaption: string;
-    billingPeriod?: (billingPeriod: BillingPeriod) => string;
-    pricePeriod: (billingPeriod: BillingPeriod) => string;
     custom: string;
     priceNotSet: string;
     free: PlanPriceText | ((currency?: PaywallCurrency) => PlanPriceText);
@@ -58,7 +56,6 @@ export function getResolvedPaywallLocalize(localizeOverride?: DeepPartial<Paywal
     },
     price: {
       startingAtCaption: 'Starts at',
-      pricePeriod: (billingPeriod: BillingPeriod) => (billingPeriod === BillingPeriod.Monthly ? '/ month' : '/ year'),
       free: currency => ({
         price: `${currency?.symbol}0`,
       }),

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

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

package/src/components/utils/calculateDiscountRate.ts

@@ -2,7 +2,7 @@ import { BillingPeriod, PaywallCalculatedPricePoint, Price } from '@stigg/js-cli
 import isNil from 'lodash/isNil';
 import { PaywallPlan } from '../paywall';
 
-function calculateDiscountRate(monthlyPrice?: number | null, annuallyPrice?: number | null) {
+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);

package/src/components/utils/currencyUtils.ts

@@ -8,7 +8,7 @@ export const currencyPriceFormatter = ({
   maximumFractionDigits = 5,
 }: {
   amount: number;
-  currency?: Currency;
+  currency?: Currency | string;
   locale?: string;
   maximumFractionDigits?: number;
 }) => {