@stigg/react-sdk 4.9.0 → 4.11.0

package/src/components/customerPortal/subscriptionOverview/subscriptionScheduledUpdates/SubscriptionScheduledUpdatesAlert.tsx

@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import { CustomerPortalSubscription } from '@stigg/js-client-sdk';
 import styled from '@emotion/styled/macro';
-import { Theme, useTheme } from '@emotion/react';
+import { useTheme } from '@emotion/react';
 import ClipLoader from 'react-spinners/ClipLoader';
 import { CustomerPortalTheme } from '../../customerPortalTheme';
 import Restore from '../../../../assets/restore.svg';
@@ -103,7 +103,7 @@ export function SubscriptionScheduledUpdatesAlert({
   theme,
   cancelScheduledUpdatesButtonTitle,
 }: SubscriptionScheduledUpdatesAlertProps) {
-  const stiggTheme = useTheme() as Theme;
+  const stiggTheme = useTheme();
   const [isLoading, setIsLoading] = useState(false);
   const { scheduledUpdates } = subscription;
 

package/src/components/customerPortal/subscriptionOverview/subscriptionView/SubscriptionView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Typography } from '../../../common/Typography';
 import { CustomerPortalSubscription } from '@stigg/js-client-sdk';
+import { Typography } from '../../../common/Typography';
 import { TrialPanel } from './TrialPanel';
 import { CustomerPortalTheme } from '../../customerPortalTheme';
 
@@ -11,15 +11,19 @@ type SubscriptionViewProps = {
   theme: CustomerPortalTheme;
 };
 
-export function SubscriptionView({ mainSubscription, trialSubscription, onManageSubscription, theme }: SubscriptionViewProps) {
+export function SubscriptionView({
+  mainSubscription,
+  trialSubscription,
+  onManageSubscription,
+  theme,
+}: SubscriptionViewProps) {
   return (
     <div className="stigg-subscription-view-layout">
       <Typography
         className="stigg-subscription-plan-name"
-        variant='h1'
+        variant="h1"
         overrideColor={theme.planNameColor}
-        style={{ marginTop: 8 }}
-      >
+        style={{ marginTop: 8 }}>
         {mainSubscription.planName} plan
       </Typography>
 

package/src/components/customerPortal/subscriptionOverview/subscriptionView/TrialPanel.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled/macro';
 import React from 'react';
-import SandClockIcon from '../../../../assets/sand-clock.svg';
-import { Typography } from '../../../common/Typography';
 import { CustomerPortalSubscription, SubscriptionStatus } from '@stigg/js-client-sdk';
 import Link from '@mui/material/Link';
+import SandClockIcon from '../../../../assets/sand-clock.svg';
+import { Typography } from '../../../common/Typography';
 import { LongText } from '../../../common/LongText';
 
 const OnTrialBadge = styled.div`

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

@@ -6,7 +6,7 @@ import { useCustomerPortalContext } from '../../CustomerPortalProvider';
 
 export function AddonsList() {
   const { customerPortal } = useCustomerPortalContext();
-  const addons = flatMap(customerPortal?.subscriptions, subscription => subscription.addons);
+  const addons = flatMap(customerPortal?.subscriptions, (subscription) => subscription.addons);
   if (isEmpty(addons)) {
     return null;
   }

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

@@ -1,9 +1,9 @@
 import { CustomerPortalPromotionalEntitlement } from '@stigg/js-client-sdk';
 import moment from 'moment';
 import React from 'react';
+import styled from '@emotion/styled/macro';
 import { Typography } from '../../../common/Typography';
 import { useCustomerPortalContext } from '../../CustomerPortalProvider';
-import styled from '@emotion/styled/macro';
 
 const Row = styled.div<{ $borderColor: string }>`
   display: flex;
@@ -47,7 +47,7 @@ export function Promotions() {
             Expiration date
           </Typography>
         </Row>
-        {promotionalEntitlements?.map(promotionalEntitlement => (
+        {promotionalEntitlements?.map((promotionalEntitlement) => (
           <Row $borderColor={theme.borderColor}>
             <Typography variant="body1">{getPromotionTitle(promotionalEntitlement)}</Typography>
             <Typography variant="body1" color="disabled">

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

@@ -3,6 +3,7 @@ import { CustomerPortal } from '@stigg/js-client-sdk';
 import flatMap from 'lodash/flatMap';
 import Box from '@mui/material/Box';
 import Tab from '@mui/material/Tab';
+import { FontWeight } from 'styled-typography';
 import { Typography } from '../../../common/Typography';
 import { AddonsList } from './AddonsList';
 import { Promotions } from './Promotions';
@@ -11,7 +12,6 @@ import { CustomerPortalLocalization } from '../../customerPortalTextOverrides';
 import { StyledTabs, TabContent, TabsLayout } from './SubscriptionTabs.style';
 import { CustomerPortalTheme } from '../../customerPortalTheme';
 import { Icon, Icons } from '../../../common/Icon';
-import { FontWeight } from 'styled-typography';
 
 type TabPanelProps = {
   children?: React.ReactNode;
@@ -50,9 +50,9 @@ function TabTitle({ isSelected, label, icon }: { isSelected: boolean; label: str
 }
 
 export function SubscriptionTabs({ customerPortal, hiddenSections, textOverrides, theme }: SubscriptionTabsProps) {
-  const allAddons = flatMap(customerPortal.subscriptions, subscription => subscription.addons);
+  const allAddons = flatMap(customerPortal.subscriptions, (subscription) => subscription.addons);
   const isSectionHidden = (sectionName: CustomerPortalSection) =>
-    hiddenSections?.some(section => section === sectionName);
+    hiddenSections?.some((section) => section === sectionName);
   const showAddons = allAddons.length > 0 && !isSectionHidden('addons');
   const showPromotions =
     customerPortal.promotionalEntitlements.length > 0 && !isSectionHidden('promotionalEntitlements');

package/src/components/customerPortal/subscriptionOverview/upcomingBilling/NextEstimatedBill.tsx

@@ -1,8 +1,8 @@
-import { Typography } from '../../../common/Typography';
-import { currencyPriceFormatter } from '../../../utils/currencyUtils';
 import { BillingPeriod, Currency } from '@stigg/js-client-sdk';
 import moment from 'moment';
 import React from 'react';
+import { currencyPriceFormatter } from '../../../utils/currencyUtils';
+import { Typography } from '../../../common/Typography';
 
 export type NextEstimatedBillProps = {
   billingPeriod: BillingPeriod;

package/src/components/customerPortal/subscriptionOverview/upcomingBilling/NoUpcomingBilling.tsx

@@ -1,5 +1,5 @@
-import { Typography } from '../../../common/Typography';
 import React from 'react';
+import { Typography } from '../../../common/Typography';
 
 type NoUpcomingBillingProps = {
   description: string;
@@ -8,8 +8,10 @@ type NoUpcomingBillingProps = {
 export function NoUpcomingBilling({ description }: NoUpcomingBillingProps) {
   return (
     <>
-      <Typography variant='h6' color='secondary'>No upcoming bill</Typography>
-      <Typography variant='body1' color='secondary'>
+      <Typography variant="h6" color="secondary">
+        No upcoming bill
+      </Typography>
+      <Typography variant="body1" color="secondary">
         {description}
       </Typography>
     </>

package/src/components/customerPortal/subscriptionOverview/upcomingBilling/UpcomingBilling.tsx

@@ -35,7 +35,7 @@ export function UpcomingBilling({ subscription, theme, textOverrides, onContactS
   const { pricingType } = subscription;
   let content: ReactNode;
   const noUsageBasedPrices =
-    subscription.prices?.every(price => price.billingModel !== BillingModel.UsageBased) ?? true;
+    subscription.prices?.every((price) => price.billingModel !== BillingModel.UsageBased) ?? true;
   const scheduledDowngradeToFree = subscription.scheduledUpdates?.find(
     ({ subscriptionScheduleType, targetPackage }) =>
       subscriptionScheduleType === SubscriptionScheduleType.Downgrade &&

package/src/components/customerPortal/types.ts

@@ -1,4 +1,4 @@
 import { CustomerPortalEntitlement } from '@stigg/js-client-sdk';
-import { FeatureFragment, } from '@stigg/api-client-js/src/generated/sdk';
+import { FeatureFragment } from '@stigg/api-client-js/src/generated/sdk';
 
-export type OnBuyMoreCallbackFn = (feature: FeatureFragment, entitlement: CustomerPortalEntitlement) => void
+export type OnBuyMoreCallbackFn = (feature: FeatureFragment, entitlement: CustomerPortalEntitlement) => void;

package/src/components/customerPortal/usage/CustomerUsageData.tsx

@@ -1,15 +1,15 @@
-import { useCustomerPortalContext } from '../CustomerPortalProvider';
 import { MeterType, PricingType, SubscriptionStatus } from '@stigg/js-client-sdk';
 import React from 'react';
+import { compact, keyBy } from 'lodash';
+import { Minus, Plus } from 'react-feather';
+import Grid from '@mui/material/Grid';
+import { useCustomerPortalContext } from '../CustomerPortalProvider';
 import { FeatureUsage } from './featureUsage/FeatureUsage';
 import { Footer, CustomerUsageLoader } from './CustomerUsageData.style';
 import { SectionContainer } from '../common/SectionContainer';
 import { SectionHeader } from '../common/SectionHeader';
 import { SectionTitle } from '../common/SectionTitle';
-import { compact, keyBy } from 'lodash';
 import { StyledButton } from '../common/StyledButton';
-import { Minus, Plus } from 'react-feather';
-import Grid from '@mui/material/Grid';
 import { OnBuyMoreCallbackFn } from '../types';
 
 const MAX_BOXES = 6;

package/src/components/customerPortal/usage/featureUsage/EntitlementCTAButton.tsx

@@ -1,11 +1,11 @@
 import { CustomerPortalEntitlement } from '@stigg/js-client-sdk';
 import { FeatureFragment } from '@stigg/api-client-js/src/generated/sdk';
-import { getUsagePercentage, USAGE_PERCENTAGE_WARNING_THRESHOLD } from './FeatureUsage.helper';
 import Button from '@mui/material/Button';
-import { Typography } from '../../../common/Typography';
 import React from 'react';
-import { OnBuyMoreCallbackFn } from '../../types';
 import styled from 'styled-components';
+import { getUsagePercentage, USAGE_PERCENTAGE_WARNING_THRESHOLD } from './FeatureUsage.helper';
+import { Typography } from '../../../common/Typography';
+import { OnBuyMoreCallbackFn } from '../../types';
 
 const StyledButton = styled(Button)`
   text-transform: none;
@@ -23,8 +23,15 @@ export type EntitlementCtaButtonProps = {
   hasCustomSubscription: boolean;
 };
 
-export function EntitlementCtaButton({ entitlement, feature, onManageSubscription, onBuyMore, canBuyMore, canUpgradeSubscription, hasCustomSubscription }: EntitlementCtaButtonProps) {
-
+export function EntitlementCtaButton({
+  entitlement,
+  feature,
+  onManageSubscription,
+  onBuyMore,
+  canBuyMore,
+  canUpgradeSubscription,
+  hasCustomSubscription,
+}: EntitlementCtaButtonProps) {
   if (hasCustomSubscription || entitlement.hasUnlimitedUsage) {
     return null;
   }
@@ -50,4 +57,4 @@ export function EntitlementCtaButton({ entitlement, feature, onManageSubscriptio
   }
 
   return null;
-}
+}

package/src/components/customerPortal/usage/featureUsage/FeatureUsage.style.ts

@@ -10,4 +10,4 @@ export const FeatureUsageContainer = styled.div<{ $highlight: boolean; $borderCo
   height: 100%;
 
   ${({ theme, $highlight }) => $highlight && `background-color: ${theme.stigg.palette.backgroundSection}`};
-`;
+`;

package/src/components/customerPortal/usage/featureUsage/FeatureUsage.tsx

@@ -1,15 +1,15 @@
-import { Typography } from '../../../common/Typography';
 import isUndefined from 'lodash/isUndefined';
 import React from 'react';
-import { useCustomerPortalContext } from '../../CustomerPortalProvider';
 import { BillingModel, CustomerPortalEntitlement } from '@stigg/js-client-sdk';
+import { CustomerPortalSubscriptionPriceFragment } from '@stigg/api-client-js/src/generated/sdk';
+import { Typography } from '../../../common/Typography';
+import { useCustomerPortalContext } from '../../CustomerPortalProvider';
 import { getResetUsageText, getUsagePercentage } from './FeatureUsage.helper';
 import { getFeatureDisplayName } from '../../../utils/getFeatureName';
 import { FeatureUsageContainer } from './FeatureUsage.style';
 import { FeatureUsageProgressBar } from './FeatureUsageProgressBar';
 import { Icon } from '../../../common/Icon';
 import { InformationTooltip } from '../../../common/InformationTooltip';
-import { CustomerPortalSubscriptionPriceFragment } from '@stigg/api-client-js/src/generated/sdk';
 import { LongText } from '../../../common/LongText';
 import { EntitlementCtaButton } from './EntitlementCTAButton';
 import { OnBuyMoreCallbackFn } from '../../types';
@@ -51,8 +51,7 @@ export function FeatureUsage({
                   ? 'Billed for committed usage'
                   : 'Billed for actual usage'}
               </Typography>
-            }
-          >
+            }>
             <Icon icon="DollarCoin" svgStrokeColor={theme.iconsColor} />
           </InformationTooltip>
         )}
@@ -62,8 +61,7 @@ export function FeatureUsage({
         <LongText
           variant="body1"
           color={hasOverageUsage ? 'error' : 'primary'}
-          data-testid={`usage-data-${entitlement.feature?.refId}`}
-        >
+          data-testid={`usage-data-${entitlement.feature?.refId}`}>
           {entitlement.currentUsage?.toLocaleString()}
           {!entitlement.hasUnlimitedUsage &&
             ` / ${entitlement.usageLimit?.toLocaleString()} (${getUsagePercentage(

package/src/components/customerPortal/usage/featureUsage/FeatureUsageProgressBar.tsx

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled/macro';
 import LinearProgress from '@mui/material/LinearProgress';
-import { getUsagePercentage, getUsageProgressStatus } from './FeatureUsage.helper';
 import React from 'react';
 import { CustomerPortalEntitlement } from '@stigg/js-client-sdk';
 import Divider from '@mui/material/Divider';
 import Color from 'color';
+import { getUsagePercentage, getUsageProgressStatus } from './FeatureUsage.helper';
 
 export const StyledLinearProgress = styled(LinearProgress)<{ $progressStatus: 'standard' | 'warning' | 'error' }>`
   height: 4px;

package/src/components/hooks/useChargeSort.ts

@@ -7,8 +7,8 @@ const CHARGES_BILLING_MODEL_ORDER = [BillingModel.FlatFee, BillingModel.PerUnit,
 
 export const sortCharges = (charges: Price[]) => {
   return sortBy(charges, [
-    charge => CHARGES_BILLING_MODEL_ORDER.indexOf(charge.pricingModel),
-    charge => charge.feature?.displayName,
+    (charge) => CHARGES_BILLING_MODEL_ORDER.indexOf(charge.pricingModel),
+    (charge) => charge.feature?.displayName,
   ]);
 };
 

package/src/components/hooks/useWaitForCheckoutCompleted.ts

@@ -6,6 +6,7 @@ function useQueryParams(paramName?: string) {
   return useMemo(() => {
     const urlSearchParams = new URLSearchParams(window.location.search);
     return paramName ? urlSearchParams.get(paramName) : urlSearchParams;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [paramName, window.location.search]);
 }
 
@@ -36,21 +37,28 @@ export const useWaitForCheckoutCompleted = ({
       }
 
       setIsAwaitingCheckout(true);
-      onProvisionStart && onProvisionStart();
+      if (onProvisionStart) {
+        onProvisionStart();
+      }
       try {
         const subscription = await stigg.waitForCheckoutCompleted();
         setProvisionStatus(ProvisionStatus.SUCCEEDED);
-        onProvisionSucceeded && onProvisionSucceeded(subscription);
+        if (onProvisionSucceeded) {
+          onProvisionSucceeded(subscription);
+        }
       } catch (err) {
         console.error('Failed to wait for checkout to complete', err);
         setProvisionStatus(ProvisionStatus.FAILED);
-        onProvisionFailed && onProvisionFailed(err);
+        if (onProvisionFailed) {
+          onProvisionFailed(err);
+        }
       } finally {
         setIsAwaitingCheckout(false);
       }
     };
 
-    waitForCheckoutToComplete();
+    void waitForCheckoutToComplete();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [stigg, checkoutCompleted]);
 
   return { isAwaitingCheckout, provisionStatus };

package/src/components/paywall/PlanEntitlements.tsx

@@ -33,8 +33,8 @@ export function PlanEntitlements({
   billingPeriod: BillingPeriod;
   paywallLocale: PaywallLocalization;
 }) {
-  const prices = plan.pricePoints?.filter(price => price.billingPeriod === billingPeriod);
-  const unitBasedEntitlements = prices?.map(price => {
+  const prices = plan.pricePoints?.filter((price) => price.billingPeriod === billingPeriod);
+  const unitBasedEntitlements = prices?.map((price) => {
     const shouldRenderUnitBasedEntitlement =
       (price?.minUnitQuantity && price?.minUnitQuantity > 1) || price?.maxUnitQuantity;
 
@@ -59,8 +59,8 @@ export function PlanEntitlements({
       </Typography>
       {unitBasedEntitlements}
       {plan.entitlements
-        .filter(entitlement => !(entitlement.hiddenFromWidgets || []).includes(WidgetType.Paywall))
-        .map(entitlement => (
+        .filter((entitlement) => !(entitlement.hiddenFromWidgets || []).includes(WidgetType.Paywall))
+        .map((entitlement) => (
           <EntitlementRow
             key={entitlement.feature?.id}
             displayNameOverride={entitlement.displayNameOverride}

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

@@ -6,7 +6,7 @@ import { PaywallData } from '../types';
 import { computeBillingPeriods } from '../utils/computeDefaultBillingPeriod';
 import { mapPaywallData } from '../utils/mapPaywallData';
 
-type useLoadPaywallDataProps = {
+type UseLoadPaywallDataProps = {
   productId?: string;
   resourceId?: string;
   showOnlyEligiblePlans?: boolean;
@@ -20,7 +20,7 @@ export function useLoadPaywallData({
   showOnlyEligiblePlans,
   billingCountryCode,
   preferredBillingPeriod,
-}: useLoadPaywallDataProps): PaywallData {
+}: UseLoadPaywallDataProps): PaywallData {
   const { stigg, locale } = useStiggContext();
   const [selectedBillingPeriod, setSelectedBillingPeriod] = useState(BillingPeriod.Annually);
   const [availableBillingPeriods, setAvailableBillingPeriods] = useState<BillingPeriod[]>([]);
@@ -55,13 +55,13 @@ export function useLoadPaywallData({
     };
 
     void loadPaywall();
-  }, [stigg, productId, stigg.isCustomerLoaded, billingCountryCode, resourceId]);
+  }, [stigg, productId, stigg.isCustomerLoaded, billingCountryCode, resourceId, preferredBillingPeriod]);
 
   const paywallData = mapPaywallData(paywall, showOnlyEligiblePlans);
 
   return {
     customer: paywall?.customer || null,
-    isLoading: isLoading,
+    isLoading,
     selectedBillingPeriod,
     setSelectedBillingPeriod,
     availableBillingPeriods,

package/src/components/paywall/paywallTextOverrides.ts

@@ -51,7 +51,7 @@ export function getResolvedPaywallLocalize(localizeOverride?: DeepPartial<Paywal
       custom: 'Contact us',
       currentPlan: 'Current plan',
       startNew: 'Get started',
-      switchToBillingPeriod: billingPeriod => {
+      switchToBillingPeriod: (billingPeriod) => {
         return billingPeriod === BillingPeriod.Monthly ? 'Switch to monthly billing' : 'Switch to annual billing';
       },
       cancelScheduledUpdate: 'Cancel',
@@ -59,7 +59,7 @@ export function getResolvedPaywallLocalize(localizeOverride?: DeepPartial<Paywal
     price: {
       startingAtCaption: 'Starts at',
       pricePeriod: (billingPeriod: BillingPeriod) => (billingPeriod === BillingPeriod.Monthly ? '/ month' : '/ year'),
-      free: currency => ({
+      free: (currency) => ({
         price: `${currency?.symbol}0`,
       }),
       custom: 'Custom',

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

@@ -6,7 +6,7 @@ export function computeBillingPeriods(
   activeSubscriptions?: Subscription[] | null,
   preferredBillingPeriod?: BillingPeriod,
 ): { defaultBillingPeriod: BillingPeriod; availableBillingPeriods: BillingPeriod[] } {
-  const billingPeriods = plans.flatMap(x => x.pricePoints).map(x => x.billingPeriod);
+  const billingPeriods = plans.flatMap((x) => x.pricePoints).map((x) => x.billingPeriod);
   const counts = countBy(billingPeriods);
 
   const availableBillingPeriods = uniq(billingPeriods);
@@ -15,7 +15,7 @@ export function computeBillingPeriods(
   if (preferredBillingPeriod && availableBillingPeriods.includes(preferredBillingPeriod)) {
     defaultBillingPeriod = preferredBillingPeriod;
   } else if (activeSubscriptions) {
-    const activeSubscription = activeSubscriptions.find(x => x.status == SubscriptionStatus.Active);
+    const activeSubscription = activeSubscriptions.find((x) => x.status === SubscriptionStatus.Active);
 
     if (activeSubscription && activeSubscription.prices.length > 0) {
       defaultBillingPeriod = activeSubscription?.prices[0].billingPeriod;

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

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

@@ -14,14 +14,14 @@ export function calculateDiscountRate(monthlyPrice?: number | null, annuallyPric
 function getPlanBillingPeriodAmount(plan: PaywallPlan, billingPeriod: BillingPeriod) {
   let pricePoint: PaywallCalculatedPricePoint | Price | undefined;
 
-  pricePoint = plan.paywallCalculatedPricePoints?.find(price => price.billingPeriod === billingPeriod);
+  pricePoint = plan.paywallCalculatedPricePoints?.find((price) => price.billingPeriod === billingPeriod);
 
   if (!pricePoint) {
-    pricePoint = plan.pricePoints.find(price => price.billingPeriod === billingPeriod);
+    pricePoint = plan.pricePoints.find((price) => price.billingPeriod === billingPeriod);
   }
 
   if (!pricePoint?.amount) {
-    const tieredPrice = plan.pricePoints.find(price => {
+    const tieredPrice = plan.pricePoints.find((price) => {
       return price.isTieredPrice && price.billingPeriod === billingPeriod;
     });
 

package/src/components/utils/getFeatureName.ts

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

package/src/components/utils/getPaidPriceText.ts

@@ -69,9 +69,9 @@ export function getPaidPriceText({
   }
 
   return {
-    price: currencyPriceFormatter({ amount: priceNumber, currency: currency, locale }),
-    unit: unit,
-    tiers: tiers,
-    tierUnits: tierUnits,
+    price: currencyPriceFormatter({ amount: priceNumber, currency, locale }),
+    unit,
+    tiers,
+    tierUnits,
   };
 }

package/src/components/utils/getPlanPrice.ts

@@ -1,6 +1,5 @@
 import { BillingPeriod, PriceTierFragment, PricingType } from '@stigg/js-client-sdk';
-import { PaywallPlan } from '../paywall';
-import { PaywallLocalization } from '../paywall';
+import { PaywallPlan, PaywallLocalization } from '../paywall';
 import { getPaidPriceText } from './getPaidPriceText';
 
 export type PlanPriceText = {
@@ -24,15 +23,15 @@ export function getPlanPrice(
         return paywallLocale.price.free(plan.paywallCurrency);
       }
 
-      return paywallLocale.price.free as PlanPriceText;
+      return paywallLocale.price.free;
     case PricingType.Custom:
       return {
         price: paywallLocale.price.custom,
       };
     case PricingType.Paid: {
-      const planPrices = plan.pricePoints.filter(pricePoint => pricePoint.billingPeriod === billingPeriod);
+      const planPrices = plan.pricePoints.filter((pricePoint) => pricePoint.billingPeriod === billingPeriod);
       const paywallCalculatedPrice = plan.paywallCalculatedPricePoints?.find(
-        pricePoint => pricePoint.billingPeriod === billingPeriod,
+        (pricePoint) => pricePoint.billingPeriod === billingPeriod,
       );
 
       if (!planPrices?.length && !paywallCalculatedPrice) {

package/src/components/utils/getSubscriptionScheduleUpdateTexts.tsx

@@ -6,9 +6,9 @@ import {
   CustomerPortalSubscriptionScheduledUpdateDataFragment,
   SubscriptionScheduleType,
 } from '@stigg/js-client-sdk';
-import { BillingPeriodChangeVariables, UnitAmountChangeVariables } from '../../types';
 import { CustomerPortalSubscriptionPriceFragment } from '@stigg/api-client-js/src/generated/sdk';
 import { compact, map } from 'lodash';
+import { BillingPeriodChangeVariables, UnitAmountChangeVariables } from '../../types';
 
 const formatDate = (date: string) => moment.utc(date).format('MMMM Do, yyyy');