@stigg/react-sdk 4.3.0-beta.1 → 4.3.1

package/dist/stories/CustomerPortal.stories.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("..").CustomerPortalProps>;
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("..").PaywallProps>;
 export default _default;
 export declare const DefaultCustomerPortal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, any>;
 export declare const CustomerPortalTheming: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, any>;

package/dist/theme/getResolvedTheme.d.ts

@@ -3,7 +3,6 @@ export declare const flexLayoutMapper: (horizontalAlignment: HorizontalAlignment
 export declare const getResolvedTheme: (customizedTheme?: {
     palette?: {
         primary?: string | undefined;
-        primaryDark?: string | undefined;
         backgroundPaper?: string | undefined;
         backgroundHighlight?: string | undefined;
         backgroundSection?: string | undefined;

package/dist/theme/types.d.ts

@@ -8,7 +8,6 @@ export declare type FontVariant = {
 export declare type StiggTheme = {
     palette: {
         primary: string;
-        primaryDark: string;
         backgroundPaper: string;
         backgroundHighlight: string;
         backgroundSection: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.3.0-beta.1",
+  "version": "4.3.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -14,10 +14,10 @@
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
+    "lint": "eslint src/**/*.{ts,tsx} --fix --max-warnings=0",
     "size": "size-limit",
     "analyze": "size-limit --why",
-    "storybook": "export NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "docs": "typedoc",
     "link-sdk": "yarn link && cd node_modules/react && yarn link && cd ../../node_modules/react-dom && yarn link && cd ../../",
@@ -28,7 +28,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "tsdx lint"
+      "pre-commit": "yarn lint"
     }
   },
   "name": "@stigg/react-sdk",
@@ -50,7 +50,6 @@
     "@commitlint/config-conventional": "^17.0.3",
     "@rollup/plugin-image": "^2.1.1",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@stigg/eslint-config-stigg": "^0.0.7",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-interactions": "^6.5.9",
@@ -79,20 +78,32 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typedoc": "^0.23.7",
-    "typescript": "^4.6.3"
+    "typescript": "^4.6.3",
+    "prettier": "^3.0.2",
+    "eslint": "^7.11.0",
+    "@stigg/eslint-config-stigg": "^0.0.7",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "eslint-config-airbnb": "^18.0.4",
+    "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^25.3.2",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-unused-imports": "^2.0.0"
   },
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.10.13",
-    "@stigg/js-client-sdk": "2.19.1",
-    "@stripe/react-stripe-js": "^2.1.1",
-    "@stripe/stripe-js": "^1.54.1",
+    "@stigg/js-client-sdk": "2.18.1",
     "@types/styled-components": "^5.1.26",
     "classnames": "^2.3.2",
     "color": "^4.2.3",
     "currency-symbol-map": "^5.1.0",
-    "immer": "^10.0.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.4",
@@ -104,5 +115,5 @@
     "styled-typography": "^1.0.3"
   },
   "readme": "ERROR: No README data found!",
-  "_id": "@stigg/react-sdk@1.0.0"
+  "_id": "@stigg/react-sdk@0.18.0"
 }

package/src/components/StiggProvider.tsx

@@ -128,6 +128,7 @@ export const StiggProvider: React.FC<PropsWithChildren<StiggProviderProps>> = ({
       ctx.stigg.removeListener('entitlementsUpdated', onEntitlementsUpdated);
       ctx.stigg.clearCustomer();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [apiKey]);
 
   useEffect(() => {
@@ -137,6 +138,7 @@ export const StiggProvider: React.FC<PropsWithChildren<StiggProviderProps>> = ({
     } else {
       stiggClient.clearCustomer();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [customerId, customerToken, resourceId]);
 
   useEffect(() => {

package/src/components/common/Icon.tsx

@@ -2,14 +2,12 @@ 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';
 
-export type Icons = keyof typeof customIcons;
-
-const IconWrapper = styled.div<{ $pathColor?: string; $rectColor?: string; $strokeColor?: string }>`
+const IconWrapper = styled.div<{ $pathColor?: string, $rectColor?: string; $strokeColor?: string }>`
   ${({ $pathColor }) =>
-    $pathColor &&
+          $pathColor &&
     css`
       path {
         fill: ${$pathColor};
@@ -17,20 +15,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};
+            }
     `}
 `;
 
@@ -43,8 +41,15 @@ export type IconProps = {
   svgStrokeColor?: IconColor | string;
 };
 
-export function Icon({ icon, className, style, svgPathColor, svgRectColor, svgStrokeColor }: IconProps) {
-  const IconComponent = (customIcons as any)[icon];
+export function Icon({
+  icon,
+  className,
+  style,
+  svgPathColor,
+  svgRectColor,
+  svgStrokeColor,
+}: IconProps) {
+  const IconComponent = ICON_COMPONENTS[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' | 'checkout';
+export type PoweredByStiggSources = 'paywall' | 'customer_portal';
 
 const PoweredByStiggThemedSvg = styled(PoweredByStiggSvg)`
   * {

package/src/components/common/Typography.tsx

@@ -86,17 +86,7 @@ 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,17 +1,28 @@
-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 ArrowForward } from '../../assets/arrow-forward.svg';
-export { default as Close } from '../../assets/close.svg';
+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;

package/src/components/common/mapExternalTheme.ts

@@ -1,10 +1,8 @@
 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';
@@ -31,7 +29,10 @@ function mapFontWeight(defaultValue: FontWeight, fontWeight?: JSFontWeight | nul
   }
 }
 
-function mapTypography(typography?: TypographyConfiguration | null): CustomizedTheme['typography'] {
+function mapTypography(
+  configuration: CustomerPortalConfiguration | PaywallConfiguration,
+): CustomizedTheme['typography'] {
+  const { typography } = configuration;
   return {
     fontFamilyUrl: typography?.fontFamily || undefined,
     h1: {
@@ -68,7 +69,7 @@ function mapAlignment(alignment?: Alignment | null): HorizontalAlignment | undef
 }
 
 export function mapCustomerPortalConfiguration(configuration: CustomerPortalConfiguration): CustomizedTheme {
-  const { palette, typography } = configuration;
+  const { palette } = configuration;
   return {
     palette: {
       primary: palette?.primary || undefined,
@@ -79,12 +80,12 @@ export function mapCustomerPortalConfiguration(configuration: CustomerPortalConf
         primary: palette?.textColor || undefined,
       },
     },
-    typography: mapTypography(typography),
+    typography: mapTypography(configuration),
   };
 }
 
 export function mapPaywallConfiguration(paywallConfiguration: PaywallConfiguration): CustomizedTheme {
-  const { palette, layout, customCss, typography } = paywallConfiguration;
+  const { palette, layout, customCss } = paywallConfiguration;
   return {
     customCss: customCss || undefined,
     palette: {
@@ -96,7 +97,7 @@ export function mapPaywallConfiguration(paywallConfiguration: PaywallConfigurati
         primary: palette?.textColor || undefined,
       },
     },
-    typography: mapTypography(typography),
+    typography: mapTypography(paywallConfiguration),
     layout: {
       ctaAlignment: mapAlignment(layout?.alignment),
       headerAlignment: mapAlignment(layout?.alignment),
@@ -108,20 +109,3 @@ 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,7 +10,8 @@ import { CustomerPortalSection } from '../../CustomerPortal';
 import { CustomerPortalLocalization } from '../../customerPortalTextOverrides';
 import { StyledTabs, TabContent, TabsLayout } from './SubscriptionTabs.style';
 import { CustomerPortalTheme } from '../../customerPortalTheme';
-import { Icon, Icons } from '../../../common/Icon';
+import { Icon } from '../../../common/Icon';
+import { Icons } from '../../../common/customIcons';
 import { FontWeight } from 'styled-typography';
 
 type TabPanelProps = {
@@ -40,16 +41,21 @@ 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);
@@ -75,14 +81,14 @@ export function SubscriptionTabs({ customerPortal, hiddenSections, textOverrides
             <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/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 '../utils/priceTierUtils';
+import { getSelectedTier } from './planPriceTier';
 
 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 '../utils/priceTierUtils';
+import { getSelectedTier } from './planPriceTier';
 
 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 '../utils/priceTierUtils';
+import { compareSelectedTierToCurrentTier, PriceTierComparison } from './planPriceTier';
 
 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 { TiersSelectContainer } from '../common/TiersSelectContainer';
+import { TiersLayout } from './TiersLayout';
 
 const EMPTY_CHAR = '‎';
 
@@ -28,14 +28,21 @@ type PriceBillingPeriodProps = {
   billingPeriod: BillingPeriod;
   hasMonthlyPrice: boolean;
   hasAnnuallyPrice: boolean;
+  paywallLocale: PaywallLocalization;
 };
 
-function PriceBillingPeriod({ plan, billingPeriod, hasMonthlyPrice, hasAnnuallyPrice }: PriceBillingPeriodProps) {
+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 = `, billed ${billingPeriod.toLowerCase()}`;
+    content = paywallLocale.price.billingPeriod?.(billingPeriod) || `, billed ${billingPeriod.toLowerCase()}`;
   }
 
   return (
@@ -133,13 +140,14 @@ export const PlanPrice = ({
               billingPeriod={billingPeriod}
               hasAnnuallyPrice={hasAnnuallyPrice}
               hasMonthlyPrice={hasMonthlyPrice}
+              paywallLocale={paywallLocale}
             />
           </Typography>
         )}
 
         {withTiersRow && (
-          <TiersSelectContainer
-            componentId={`${plan.id}_${featureId}_tier`}
+          <TiersLayout
+            plan={plan}
             tiers={tiers}
             tierUnits={tierUnits}
             selectedTier={selectedTier}

package/src/components/{common/TiersSelectContainer.tsx → paywall/TiersLayout.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,33 +24,32 @@ const TierInput = styled(OutlinedInput)`
   }
 `;
 
-export function TiersSelectContainer({
-  componentId,
+export function TiersLayout({
+  plan,
   tiers,
   tierUnits,
   selectedTier,
   handleTierChange,
 }: {
-  componentId: string;
+  plan: PaywallPlan;
   tiers?: PriceTierFragment[] | null;
   tierUnits?: string;
   selectedTier?: PriceTierFragment;
   handleTierChange: (tier: PriceTierFragment) => void;
 }) {
   const handleChange = (event: SelectChangeEvent<unknown>, _: ReactNode) => {
-    if (!tiers) return;
-
-    handleTierChange(getTierByQuantity(tiers, event.target.value as number)!);
+    handleTierChange(tiers!.find(tier => tier.upTo.toString() === event.target.value)!);
   };
 
   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/paywall/paywallTextOverrides.ts

@@ -26,6 +26,8 @@ export type PaywallLocalization = {
   };
   price: {
     startingAtCaption: string;
+    billingPeriod?: (billingPeriod: BillingPeriod) => string;
+    pricePeriod: (billingPeriod: BillingPeriod) => string;
     custom: string;
     priceNotSet: string;
     free: PlanPriceText | ((currency?: PaywallCurrency) => PlanPriceText);
@@ -56,6 +58,7 @@ 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/{utils/priceTierUtils.ts → paywall/planPriceTier.ts}

@@ -1,30 +1,7 @@
-import { PaywallPlan } from '../paywall/types';
+import { PaywallPlan } from './types';
 
 import { BillingModel, TiersMode, BillingPeriod, Price, PriceTierFragment, Subscription } from '@stigg/js-client-sdk';
 
-export function getPriceFeatureUnit(price: Price) {
-  if (!price.feature) {
-    return '';
-  }
-
-  return (price.feature!.unitQuantity != 1 ? price.feature!.unitsPlural : price.feature!.units) || '';
-}
-
-export function getTierByQuantity(tiers: PriceTierFragment[], quantity: number) {
-  if (!tiers) return;
-
-  const ascendingTiers = [...tiers];
-  ascendingTiers.sort((a, b) => a.upTo - b.upTo);
-
-  for (const tier of ascendingTiers) {
-    if (quantity <= tier.upTo) {
-      return tier;
-    }
-  }
-
-  return ascendingTiers[ascendingTiers.length - 1];
-}
-
 export function calculateTierPrice(
   price: Price,
   currentTier: PriceTierFragment,
@@ -69,7 +46,8 @@ export function getSelectedTier(
       );
 
       if (tieredPrice) {
-        currentTier = getTierByQuantity(price.tiers!, tieredPrice.feature!.unitQuantity || 1)!;
+        const customerTier = price.tiers!.find(tier => tier.upTo === tieredPrice.feature!.unitQuantity);
+        currentTier = customerTier || price.tiers![0];
       }
     }
 

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

@@ -3,21 +3,16 @@ 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}${unitsText}`;
+    return `Up to ${maxUnitQuantity} ${unitsPlural}`;
   }
-
   // both limits
   if (minUnitQuantity && minUnitQuantity > 1 && maxUnitQuantity) {
-    return `${minUnitQuantity}-${maxUnitQuantity}${unitsText}`;
+    return `${minUnitQuantity}-${maxUnitQuantity} ${unitsPlural}`;
   }
-
   if (minUnitQuantity && minUnitQuantity > 1) {
-    return `Minimum ${minUnitQuantity}${unitsText}`;
+    return `Minimum ${minUnitQuantity} ${unitsPlural}`;
   }
-
   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';
 
-export function calculateDiscountRate(monthlyPrice?: number | null, annuallyPrice?: number | null) {
+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 | string;
+  currency?: Currency;
   locale?: string;
   maximumFractionDigits?: number;
 }) => {