@stigg/react-sdk 4.8.1 → 4.10.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.8.1",
+  "version": "4.10.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -18,6 +18,8 @@
     "lint-fix": "yarn run lint --fix",
     "size": "size-limit",
     "analyze": "size-limit --why",
+    "fix:prettier": "prettier \"src/**/*.(js|jsx|ts|tsx)\" --write",
+    "pretty-quick": "pretty-quick --staged --pattern 'src/**/*.*(js|jsx|ts|tsx)'",
     "storybook": "export NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "prepare": "husky install",
@@ -87,14 +89,15 @@
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jest": "^25.3.2",
     "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^7.0.4",
     "lint-staged": "^14.0.1",
     "postcss": "^8.4.24",
-    "prettier": "^3.0.2",
+    "prettier": "^2.4.1",
+    "pretty-quick": "^3.1.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rollup-plugin-postcss": "^4.0.2",
@@ -119,10 +122,10 @@
     "immer": "^10.0.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
+    "lottie-react": "^2.4.0",
     "moment": "^2.29.4",
     "react-feather": "^2.0.10",
     "react-loading-skeleton": "^3.1.0",
-    "lottie-react": "^2.4.0",
     "react-spinners": "^0.13.3",
     "react-switch": "^7.0.0",
     "styled-components": "^5.3.6",

package/src/components/checkout/hooks/useCouponModel.ts

@@ -13,7 +13,7 @@ function useSetPromotionCode() {
   const [, setState] = useCheckoutContext();
 
   return (promotionCode: string) =>
-    setState(draft => {
+    setState((draft) => {
       draft.promotionCode = promotionCode;
     });
 }

package/src/components/checkout/steps/addons/addon.utils.ts

@@ -23,8 +23,8 @@ export function filterAddons({
 }: { addons?: Addon[] } & filterAddonsBaseProps): Addon[] {
   return (
     addons
-      ?.filter(addon => filterAddonPricePointsByBillingPeriod(addon, billingPeriod))
-      ?.map(addon => mapAddonPricePointsByBillingCountryCode({ addon, currency, billingCountryCode })) || []
+      ?.filter((addon) => filterAddonPricePointsByBillingPeriod(addon, billingPeriod))
+      ?.map((addon) => mapAddonPricePointsByBillingCountryCode({ addon, currency, billingCountryCode })) || []
   );
 }
 
@@ -36,8 +36,8 @@ export function filterSubscriptionAddons({
 }: { addons?: SubscriptionAddon[] } & filterAddonsBaseProps): SubscriptionAddon[] {
   return (
     addons
-      ?.filter(addon => filterAddonPricePointsByBillingPeriod(addon.addon, billingPeriod))
-      ?.map(addon => ({
+      ?.filter((addon) => filterAddonPricePointsByBillingPeriod(addon.addon, billingPeriod))
+      ?.map((addon) => ({
         ...addon,
         addon: mapAddonPricePointsByBillingCountryCode({ addon: addon.addon, currency, billingCountryCode }),
       })) || []
@@ -45,7 +45,7 @@ export function filterSubscriptionAddons({
 }
 
 function filterAddonPricePointsByBillingPeriod(addon: Addon, billingPeriod: BillingPeriod) {
-  return addon.pricePoints.some(pricePoint => pricePoint.billingPeriod === billingPeriod);
+  return addon.pricePoints.some((pricePoint) => pricePoint.billingPeriod === billingPeriod);
 }
 
 function mapAddonPricePointsByBillingCountryCode({
@@ -60,7 +60,7 @@ function mapAddonPricePointsByBillingCountryCode({
   return {
     ...addon,
     pricePoints: addon.pricePoints.filter(
-      pricePoint =>
+      (pricePoint) =>
         pricePoint.currency === currency &&
         (billingCountryCode ? pricePoint.billingCountryCode === billingCountryCode : true),
     ),

package/src/components/common/PoweredByStigg.tsx

@@ -45,8 +45,7 @@ export function PoweredByStigg({ source, showWatermark, align, style = {} }: Pow
       $alignSelf={align}
       className={STIGG_WATERMARK_CLASSNAME}
       style={{ cursor: 'pointer', ...style }}
-      onClick={onWatermarkClick}
-    >
+      onClick={onWatermarkClick}>
       <PoweredByStiggThemedSvg />
     </StyledPoweredByStigg>
   );

package/src/components/common/iconColor.ts

@@ -1,10 +1,8 @@
 import { Theme } from '@emotion/react';
 
-export type IconColor =
-  | 'primary'
-  | 'secondary'
+export type IconColor = 'primary' | 'secondary';
 
-export const getIconColor = (color: IconColor | string | undefined, theme: Theme ) => {
+export const getIconColor = (color: IconColor | string | undefined, theme: Theme) => {
   switch (color) {
     case 'primary':
       return theme.stigg.palette.text.primary;

package/src/components/customerPortal/CustomerPortal.style.ts

@@ -5,7 +5,7 @@ export const CustomerPortalLayout = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  
+
   & * {
     box-sizing: border-box;
   }
@@ -17,4 +17,4 @@ export const CustomerPortalSections = styled.div`
   flex-direction: column;
   align-items: center;
   row-gap: 24px;
-`;
+`;

package/src/components/customerPortal/CustomerPortalProvider.tsx

@@ -65,8 +65,7 @@ export function CustomerPortalProvider({
           textOverrides: resolvedTextOverrides,
           theme: customerPortalTheme,
           resourceId,
-        }}
-      >
+        }}>
         {children}
       </CustomerPortalContext.Provider>
     </SdkThemeProvider>

package/src/components/customerPortal/billing/InformationGrid.tsx

@@ -42,8 +42,7 @@ export function InformationGrid({ title, rows }: InformationGridProps) {
             variant="body1"
             color="secondary"
             style={{ width: 80 }}
-            {...labelTypographyProps}
-          >
+            {...labelTypographyProps}>
             {label}
           </Typography>
           <Typography className={`${classNamePrefix}-text`} variant="body1" color="secondary" {...valueTypographyProps}>

package/src/components/customerPortal/billing/InvoicesSection.tsx

@@ -10,7 +10,9 @@ export function InvoicesSection() {
   const { customerPortal, isLoading, textOverrides, theme } = useCustomerPortalContext();
   const isLoadingData = !customerPortal || isLoading;
 
-  const viewInvoiceHistoryButton = isLoadingData ? <SkeletonButton /> : customerPortal?.billingPortalUrl ? (
+  const viewInvoiceHistoryButton = isLoadingData ? (
+    <SkeletonButton />
+  ) : customerPortal?.billingPortalUrl ? (
     <ExternalLinkButton
       url={customerPortal.billingPortalUrl}
       text={textOverrides.viewInvoiceHistory}
@@ -26,10 +28,13 @@ export function InvoicesSection() {
     <SectionContainer
       className="stigg-invoices-section-layout"
       $backgroundColor={theme.backgroundColor}
-      $borderColor={theme.borderColor}
-    >
+      $borderColor={theme.borderColor}>
       <SectionHeader className="stigg-invoices-section-header">
-        <SectionTitle isLoading={isLoadingData} className="stigg-invoices-section-title" title={textOverrides.invoicesTitle} />
+        <SectionTitle
+          isLoading={isLoadingData}
+          className="stigg-invoices-section-title"
+          title={textOverrides.invoicesTitle}
+        />
         {viewInvoiceHistoryButton}
       </SectionHeader>
     </SectionContainer>

package/src/components/customerPortal/common/ExternalLinkButton.tsx

@@ -28,9 +28,8 @@ export function ExternalLinkButton({ text, url, className }: ExternalLinkButtonP
       className={className}
       variant="outlined"
       startIcon={<LinkIcon size={20} strokeWidth={2.5} />}
-      onClick={onClick}
-    >
+      onClick={onClick}>
       <ExternalLinkText color="primary.main">{text}</ExternalLinkText>
     </StyledButton>
   );
-}
+}

package/src/components/customerPortal/common/SectionContainer.tsx

@@ -8,4 +8,4 @@ export const SectionContainer = styled.div<{ $backgroundColor: string; $borderCo
   background-color: ${({ $backgroundColor }) => $backgroundColor};
   border: ${({ $borderColor }) => `1px solid ${$borderColor}`};
   padding: 64px;
-`;
+`;

package/src/components/customerPortal/common/SectionHeader.ts

@@ -5,9 +5,11 @@ export const SectionHeader = styled.div<{ $disableMargin?: boolean }>`
   align-items: center;
   justify-content: space-between;
 
-  ${({ $disableMargin }) => !$disableMargin && `
+  ${({ $disableMargin }) =>
+    !$disableMargin &&
+    `
     &:not(:last-child) {
       margin-bottom: 32px;
     }
   `};
-`;
+`;

package/src/components/customerPortal/common/SkeletonButton.tsx

@@ -3,4 +3,4 @@ import React from 'react';
 
 export function SkeletonButton() {
   return <Skeleton width={220} height={42} />;
-}
+}

package/src/components/customerPortal/subscriptionOverview/ContactCustomerSupport.tsx

@@ -38,8 +38,7 @@ export function ContactCustomerSupport({ onContactSupport, label, linkLabel }: C
           className="stigg-contact-support-button"
           style={{ textTransform: 'none' }}
           variant="text"
-          onClick={onContactSupport}
-        >
+          onClick={onContactSupport}>
           {contactSupportText}
         </ContactSupportButton>
       ) : (

package/src/components/customerPortal/subscriptionOverview/SubscriptionsOverview.tsx

@@ -42,8 +42,7 @@ export function SubscriptionsOverview({
     <SectionContainer
       className="stigg-customer-portal-subscriptions-overview"
       $backgroundColor={theme.backgroundColor}
-      $borderColor={theme.borderColor}
-    >
+      $borderColor={theme.borderColor}>
       {!isLoadingData && activeSubscription && activeSubscription.scheduledUpdates && (
         <SubscriptionScheduledUpdatesAlert
           theme={theme}

package/src/components/customerPortal/subscriptionOverview/SubscriptionsOverviewHeader.tsx

@@ -28,20 +28,15 @@ export function SubscriptionsOverviewHeader({
 }: SubscriptionsOverviewHeaderProps) {
   return (
     <SectionHeader className="stigg-customer-portal-overview-header" $disableMargin>
-      <SectionTitle title='Subscription' className="stigg-overview-title" />
+      <SectionTitle title="Subscription" className="stigg-overview-title" />
       {!hideManageButton && (
-        <StyledButton
-          className="stigg-manage-subscription-button"
-          variant="outlined"
-          onClick={onManageSubscription}
-        >
+        <StyledButton className="stigg-manage-subscription-button" variant="outlined" onClick={onManageSubscription}>
           <StyledEditIcon className="stigg-manage-subscription-button-image" />
           <Typography
             className="stigg-manage-subscription-button-text"
             color="primary.main"
             style={{ marginLeft: '8px' }}
-            variant="body1"
-          >
+            variant="body1">
             {textOverrides?.manageSubscription}
           </Typography>
         </StyledButton>

package/src/components/customerPortal/subscriptionOverview/charges/ChargeItem.tsx

@@ -32,7 +32,7 @@ export function ChargeItem({
   hasCustomSubscription,
 }: UsageBasedChargeProps) {
   return (
-    <div className='stigg-charge-list-item' style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+    <div className="stigg-charge-list-item" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
       <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
         <div style={{ display: 'flex', gap: 12 }}>
           <LongText variant="body1" color="primary">

package/src/components/customerPortal/subscriptionOverview/charges/ChargeList.tsx

@@ -32,7 +32,7 @@ export function ChargeList({
   }
 
   return (
-    <div className='stigg-charge-list' style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 32 }}>
+    <div className="stigg-charge-list" style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 32 }}>
       {filteredSubscriptionPrices.map(({ feature, price, billingModel }) => {
         if (!feature || !price) {
           return null;

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

@@ -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/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

@@ -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

@@ -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/NoUpcomingBilling.tsx

@@ -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/featureUsage/EntitlementCTAButton.tsx

@@ -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

@@ -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/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/paywall/Paywall.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled/macro';
 import { PlanOffering } from './PlanOffering';
 import { BillingPeriodPicker } from './BillingPeriodPicker';
 import { calculatePaywallDiscountRate } from '../utils/calculateDiscountRate';
-import { OnPlanSelectedCallbackFn, PaywallPlan, SubscribeIntentionType } from './types';
+import { ShouldHidePlanFn, OnPlanSelectedCallbackFn, PaywallPlan, SubscribeIntentionType } from './types';
 import { PaywallLocalization } from './paywallTextOverrides';
 import { PoweredByStigg } from '../common/PoweredByStigg';
 import { useStiggContext } from '../..';
@@ -51,6 +51,7 @@ type PaywallProps = {
   onPlanSelected: OnPlanSelectedCallbackFn;
   paywallLocale: PaywallLocalization;
   locale: string;
+  shouldHidePlan?: ShouldHidePlanFn;
 };
 
 export const Paywall = ({
@@ -65,13 +66,14 @@ export const Paywall = ({
   onPlanSelected,
   paywallLocale,
   locale,
+  shouldHidePlan,
 }: PaywallProps) => {
   const { stigg } = useStiggContext();
   const discountRate = calculatePaywallDiscountRate(plans);
   const shouldShowDescriptionSection = plans.some((plan) => !!plan.description);
   const hasMonthlyPrice = hasPricePointsForPlans(plans, BillingPeriod.Monthly);
   const hasAnnuallyPrice = hasPricePointsForPlans(plans, BillingPeriod.Annually);
-  const plansToShow = getPlansToDisplay(plans, selectedBillingPeriod);
+  const plansToShow = getPlansToDisplay(plans, selectedBillingPeriod, shouldHidePlan);
 
   const handleOnSubscribe = useCallback(
     (plan: Plan, intentionType: SubscribeIntentionType, billableFeatures: BillableFeature[]) => {

package/src/components/paywall/PaywallContainer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { BillingPeriod } from '@stigg/js-client-sdk';
 import { Paywall } from './Paywall';
 import { useLoadPaywallData } from './hooks/useLoadPaywallData';
-import { OnPlanSelectedCallbackFn } from './types';
+import { ShouldHidePlanFn, OnPlanSelectedCallbackFn } from './types';
 import { getResolvedPaywallLocalize, PaywallLocalization } from './paywallTextOverrides';
 import { DeepPartial } from '../../types';
 import { PaywallLoader } from './PaywallLoader';
@@ -23,6 +23,7 @@ export type PaywallContainerProps = {
   onBillingPeriodChange?: (billingPeriod: BillingPeriod) => void;
   textOverrides?: DeepPartial<PaywallLocalization>;
   billingCountryCode?: string;
+  shouldHidePlan?: ShouldHidePlanFn;
 };
 
 export const PaywallContainer = ({
@@ -35,6 +36,7 @@ export const PaywallContainer = ({
   preferredBillingPeriod,
   onBillingPeriodChange,
   billingCountryCode,
+  shouldHidePlan,
 }: PaywallContainerProps) => {
   const hasCustomerPortalContext = useCheckContextExists(CustomerPortalContext);
   let isCustomerPortalLoading = false;
@@ -86,6 +88,7 @@ export const PaywallContainer = ({
         onPlanSelected={onPlanSelected}
         paywallLocale={paywallLocale}
         locale={locale}
+        shouldHidePlan={shouldHidePlan}
       />
     );
 

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/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/types.ts

@@ -61,3 +61,5 @@ export type OnPlanSelectedCallbackFn = ({
   selectedBillingPeriod: BillingPeriod;
   billableFeatures?: BillableFeature[];
 }) => void | Promise<void>;
+
+export type ShouldHidePlanFn = ({ plan }: { plan: PaywallPlan }) => boolean | Promise<boolean>;

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/getPlansToDisplay.ts

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

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

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