@stigg/react-sdk 4.6.1 → 4.7.0

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

@@ -3,7 +3,7 @@ import { useCustomerPortalContext } from '../CustomerPortalProvider';
 import { SectionTitle } from '../common/SectionTitle';
 import { SectionContainer } from '../common/SectionContainer';
 import { ExternalLinkButton } from '../common/ExternalLinkButton';
-import { Divider } from '@mui/material';
+import Divider from '@mui/material/Divider';
 import { InformationGrid, InformationGridContainer } from './InformationGrid';
 import { padStart } from 'lodash';
 import { SectionHeader } from '../common/SectionHeader';
@@ -108,8 +108,7 @@ export function PaymentDetailsSection() {
     <SectionContainer
       className="stigg-payment-details-section-layout"
       $backgroundColor={theme.backgroundColor}
-      $borderColor={theme.borderColor}
-    >
+      $borderColor={theme.borderColor}>
       <SectionHeader className="stigg-payment-details-section-header">
         <SectionTitle
           isLoading={isLoadingData}

package/src/components/customerPortal/paywall/CustomerPortalPaywall.style.ts

@@ -1,10 +1,8 @@
-import { css } from '@emotion/react';
 import styled from '@emotion/styled/macro';
 import { STIGG_WATERMARK_CLASSNAME } from '../../common/PoweredByStigg';
 import { SectionContainer } from '../common/SectionContainer';
 
 export const CustomerPortalPaywallLayout = styled(SectionContainer)<{
-  $hideButtons: boolean;
   $backgroundColor: string;
   $borderColor: string;
 }>`
@@ -29,14 +27,6 @@ export const CustomerPortalPaywallLayout = styled(SectionContainer)<{
     margin-right: auto;
   }
 
-  ${({ $hideButtons }) =>
-    $hideButtons &&
-    css`
-      .stigg-paywall-plan-button:not([disabled]) {
-        display: none;
-      }
-    `}
-
   .${STIGG_WATERMARK_CLASSNAME} {
     display: none;
   }

package/src/components/customerPortal/paywall/CustomerPortalPaywall.tsx

@@ -6,14 +6,13 @@ import { SectionHeader } from '../common/SectionHeader';
 
 type CustomerPortalPaywallProps = {
   paywallComponent?: React.ReactNode;
-  hidePaywallButtons: boolean;
   theme: CustomerPortalTheme;
   title: string;
   isLoading: boolean;
 };
 
 export const CustomerPortalPaywall = React.forwardRef<HTMLDivElement, CustomerPortalPaywallProps>(
-  ({ paywallComponent, hidePaywallButtons, theme, title, isLoading }, ref) => {
+  ({ paywallComponent, theme, title, isLoading }, ref) => {
     if (!paywallComponent) {
       return null;
     }
@@ -22,10 +21,8 @@ export const CustomerPortalPaywall = React.forwardRef<HTMLDivElement, CustomerPo
       <CustomerPortalPaywallLayout
         className="stigg-customer-portal-paywall-section"
         ref={ref}
-        $hideButtons={hidePaywallButtons}
         $backgroundColor={theme.backgroundColor}
-        $borderColor={theme.borderColor}
-      >
+        $borderColor={theme.borderColor}>
         <SectionHeader className="stigg-customer-portal-paywall-header">
           <SectionTitle isLoading={isLoading} className="stigg-customer-portal-paywall-section-title" title={title} />
         </SectionHeader>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ArrowDown } from 'react-feather';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import {
   CustomerPortalSubscription,
   CustomerPortalSubscriptionScheduledUpdateDataFragment,
@@ -67,7 +67,7 @@ function SubscriptionScheduledUpdateUnitQuantityChangeRow({
   const newQuantityUnits = newUnitAmount === 1 ? featureUnits : featureUnitsPlural;
 
   return (
-    <Grid container alignItems="flex-start" flexWrap='nowrap'>
+    <Grid container alignItems="flex-start" flexWrap="nowrap">
       <Grid>
         <ArrowDown color="#D94052" height={20} className="stigg-scheduled-updates-arrow-down" />
       </Grid>

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Box, Grid } from '@mui/material';
+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';
@@ -51,7 +52,7 @@ function MultipleScheduledUpdates({ subscription }: Pick<SubscriptionScheduledUp
         </Grid>
       </Grid>
       <Grid>
-        {(scheduledUpdates || []).map(scheduleUpdate => (
+        {(scheduledUpdates || []).map((scheduleUpdate) => (
           <SubscriptionScheduledUpdateRow
             key={scheduleUpdate.subscriptionScheduleType}
             scheduleUpdate={scheduleUpdate}
@@ -115,11 +116,10 @@ export function SubscriptionScheduledUpdatesAlert({
   return (
     <SubscriptionScheduleUpdateAlertContainer
       $borderColor={theme.borderColor}
-      className="stigg-scheduled-updates-alert-container"
-    >
+      className="stigg-scheduled-updates-alert-container">
       <Grid container alignItems={isSingleScheduledUpdate ? 'center' : 'flex-start'} gap={2}>
         <Grid item display="flex">
-          <Icon icon='ScheduleBox' svgPathColor={theme.iconsColor} svgRectColor={theme.iconsBackgroundColor}  />
+          <Icon icon="ScheduleBox" svgPathColor={theme.iconsColor} svgRectColor={theme.iconsBackgroundColor} />
         </Grid>
 
         <Grid item flex={1}>
@@ -137,8 +137,7 @@ export function SubscriptionScheduledUpdatesAlert({
               onClick={() => {
                 setIsLoading(true);
                 Promise.resolve(onCancelScheduledUpdates(subscription)).finally(() => setIsLoading(false));
-              }}
-            >
+              }}>
               {isLoading ? (
                 <LoadingIndicator loading size={16} color={stiggTheme.stigg.palette.text.disabled} />
               ) : (

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

@@ -3,7 +3,7 @@ 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';
+import Link from '@mui/material/Link';
 import { LongText } from '../../../common/LongText';
 
 const OnTrialBadge = styled.div`

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

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled/macro';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { range } from 'lodash';
 import Skeleton from 'react-loading-skeleton';
 import React from 'react';
@@ -18,4 +18,4 @@ export function CustomerUsageLoader() {
       ))}
     </Grid>
   );
-}
+}

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

@@ -9,7 +9,7 @@ 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';
+import Grid from '@mui/material/Grid';
 import { OnBuyMoreCallbackFn } from '../types';
 
 const MAX_BOXES = 6;
@@ -25,20 +25,26 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerU
   const isLoadingData = isLoading || !customerPortal;
   const { entitlements, subscriptions } = customerPortal || {};
   const meteredEntitlements = entitlements?.filter(
-    entitlement =>
+    (entitlement) =>
       entitlement.feature?.meterType === MeterType.Fluctuating ||
       entitlement.feature?.meterType === MeterType.Incremental,
   );
   const activeSubscription = subscriptions?.find(({ status }) => status === SubscriptionStatus.Active);
   const hasCustomSubscription = activeSubscription?.pricingType === PricingType.Custom;
-  const canUpgradeSubscription = !!customerPortal?.canUpgradeSubscription
+  const canUpgradeSubscription = !!customerPortal?.canUpgradeSubscription;
 
   const subscriptionPriceByFeature = keyBy(activeSubscription?.prices, 'feature.refId');
   const entitlementByFeature = keyBy(meteredEntitlements, 'feature.refId');
 
   // sort features by prices first, then other entitlements
-  const priceEntitlements = compact(activeSubscription?.prices.map((subscriptionPrice) => subscriptionPrice.feature && entitlementByFeature[subscriptionPrice.feature.refId]));
-  const otherEntitlements = compact(meteredEntitlements?.filter((entitlement) => !subscriptionPriceByFeature[entitlement.feature!.refId]));
+  const priceEntitlements = compact(
+    activeSubscription?.prices.map(
+      (subscriptionPrice) => subscriptionPrice.feature && entitlementByFeature[subscriptionPrice.feature.refId],
+    ),
+  );
+  const otherEntitlements = compact(
+    meteredEntitlements?.filter((entitlement) => !subscriptionPriceByFeature[entitlement.feature!.refId]),
+  );
   const sortedEntitlements = [...priceEntitlements, ...otherEntitlements];
 
   // 4 -> 3 per row, 6 -> 2 per row
@@ -46,7 +52,7 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerU
 
   const entitlementsToShow = showAll ? sortedEntitlements : sortedEntitlements.slice(0, MAX_BOXES);
 
-  const toggleShowAll = () => setShowAll(prevState => !prevState);
+  const toggleShowAll = () => setShowAll((prevState) => !prevState);
 
   if (!isLoadingData && !meteredEntitlements?.length) {
     return null;
@@ -57,9 +63,12 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerU
       className="stigg-subscription-usage-layout"
       $backgroundColor={theme.backgroundColor}
       $borderColor={theme.borderColor}>
-
       <SectionHeader>
-        <SectionTitle title={textOverrides.usageTabTitle} className="stigg-customer-portal-usage-section-title" isLoading={isLoadingData} />
+        <SectionTitle
+          title={textOverrides.usageTabTitle}
+          className="stigg-customer-portal-usage-section-title"
+          isLoading={isLoadingData}
+        />
       </SectionHeader>
 
       {isLoadingData ? (
@@ -71,7 +80,7 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerU
               <Grid item xs={xs}>
                 <FeatureUsage
                   key={entitlement.feature!.refId}
-                  subscriptionPrice={subscriptionPriceByFeature[(entitlement.feature!.refId)]}
+                  subscriptionPrice={subscriptionPriceByFeature[entitlement.feature!.refId]}
                   entitlement={entitlement}
                   onManageSubscription={onManageSubscription}
                   onBuyMore={onBuyMore}
@@ -85,17 +94,16 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerU
           {sortedEntitlements.length > MAX_BOXES && (
             <Footer>
               <StyledButton
-                  className="stigg-usage-toggle-many-button"
-                  variant="text"
-                  startIcon={showAll ? <Minus /> : <Plus />}
-                  onClick={toggleShowAll}
-              >
+                className="stigg-usage-toggle-many-button"
+                variant="text"
+                startIcon={showAll ? <Minus /> : <Plus />}
+                onClick={toggleShowAll}>
                 {showAll ? 'Show less' : 'Show more'}
               </StyledButton>
             </Footer>
           )}
-          </>
+        </>
       )}
     </SectionContainer>
   );
-}
+}

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

@@ -3,15 +3,12 @@ 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';
+import Divider from '@mui/material/Divider';
 import Color from 'color';
 
 export const StyledLinearProgress = styled(LinearProgress)<{ $progressStatus: 'standard' | 'warning' | 'error' }>`
   height: 4px;
-  background-color: ${({ theme }) =>
-    Color(theme.stigg.palette.primary)
-      .alpha(0.4)
-      .string()};
+  background-color: ${({ theme }) => Color(theme.stigg.palette.primary).alpha(0.4).string()};
 
   span {
     background-color: ${({ $progressStatus, theme }) => {
@@ -32,10 +29,7 @@ export const StyledLinearProgress = styled(LinearProgress)<{ $progressStatus: 's
 export const StyledDivider = styled(Divider)`
   border-style: dotted;
   border-bottom-width: 2px;
-  border-color: ${({ theme }) =>
-    Color(theme.stigg.palette.outlinedRestingBorder)
-      .alpha(0.4)
-      .string()};
+  border-color: ${({ theme }) => Color(theme.stigg.palette.outlinedRestingBorder).alpha(0.4).string()};
 `;
 
 export type FeatureUsageProgressBarProps = {

package/src/components/paywall/EntitlementRow.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import CheckUrl from '../../assets/check-stigg.svg';
 import styled from '@emotion/styled/macro';
-import { calculateUnitQuantityText } from './utils/calculateUnitQuantityText';
 import { EntitlementResetPeriod } from '@stigg/js-client-sdk';
+import CheckUrl from '../../assets/check-stigg.svg';
+import { calculateUnitQuantityText } from './utils/calculateUnitQuantityText';
 import { Typography } from '../common/Typography';
 
 const EntitlementName = styled(Typography)`
@@ -10,12 +10,19 @@ const EntitlementName = styled(Typography)`
 `;
 
 const EntitlementRowContainer = styled.div`
+  display: flex;
+  align-items: baseline;
+`;
+
+const EntitlementIconContainer = styled.div`
   display: flex;
   align-items: center;
+  margin-right: 16px;
+  height: ${({ theme }) => theme.stigg.typography.h3.fontSize};
+  flex-shrink: 0;
 `;
 
 const EntitlementCheckIcon = styled(CheckUrl)`
-  margin-right: 16px;
   flex-shrink: 0;
   * {
     fill: ${({ theme }) => theme.stigg.palette.text.disabled};
@@ -62,6 +69,9 @@ function getResetPeriodText(resetPeriod?: EntitlementResetPeriod) {
     case EntitlementResetPeriod.Month: {
       return 'per month';
     }
+    default: {
+      return '';
+    }
   }
 }
 
@@ -79,12 +89,18 @@ function getEntitlementDisplay({
 
   if (hasUnlimitedUsage) {
     return `Unlimited ${feature?.unitsPlural}`;
-  } else if (isCustom) {
+  }
+
+  if (isCustom) {
     return `Custom ${feature?.unitsPlural}`;
-  } else if (usageLimit) {
+  }
+
+  if (usageLimit) {
     const featureUnits = usageLimit === 1 ? feature?.units : feature?.unitsPlural;
     return `${formatUsageNumber(usageLimit)} ${featureUnits} ${resetPeriodSuffix}`;
-  } else if (unitBasedEntitlement) {
+  }
+
+  if (unitBasedEntitlement) {
     return calculateUnitQuantityText(minUnitQuantity, maxUnitQuantity, feature?.unitsPlural);
   }
 
@@ -97,7 +113,9 @@ export function EntitlementRow(props: EntitlementRowProps) {
 
   return (
     <EntitlementRowContainer className="stigg-entitlement-row-container">
-      <EntitlementCheckIcon className="stigg-entitlement-row-icon" />
+      <EntitlementIconContainer>
+        <EntitlementCheckIcon className="stigg-entitlement-row-icon" />
+      </EntitlementIconContainer>
       <EntitlementName className="stigg-entitlement-name" variant="h6" color="secondary">
         {displayNameOverride || displayName}
       </EntitlementName>

package/src/components/paywall/Paywall.tsx

@@ -1,5 +1,5 @@
-import { BillableFeature, BillingPeriod, Customer, Plan, Subscription } from '@stigg/js-client-sdk';
-import React, { useCallback } from 'react';
+import { BillableFeature, BillingPeriod, Customer, Plan, PricingType, Subscription } from '@stigg/js-client-sdk';
+import React, { useCallback, useMemo } from 'react';
 import styled from '@emotion/styled/macro';
 import { PlanOffering } from './PlanOffering';
 import { BillingPeriodPicker } from './BillingPeriodPicker';
@@ -47,7 +47,6 @@ type PaywallProps = {
   highlightedPlanId?: string;
   onBillingPeriodChanged: (billingPeriod: BillingPeriod) => void;
   availableBillingPeriods: BillingPeriod[];
-  isLoading: boolean;
   isCustomerOnTrial: boolean;
   onPlanSelected: OnPlanSelectedCallbackFn;
   paywallLocale: PaywallLocalization;
@@ -69,7 +68,7 @@ export const Paywall = ({
 }: PaywallProps) => {
   const { stigg } = useStiggContext();
   const discountRate = calculatePaywallDiscountRate(plans);
-  const shouldShowDescriptionSection = plans.some(plan => !!plan.description);
+  const shouldShowDescriptionSection = plans.some((plan) => !!plan.description);
   const hasMonthlyPrice = hasPricePointsForPlans(plans, BillingPeriod.Monthly);
   const hasAnnuallyPrice = hasPricePointsForPlans(plans, BillingPeriod.Annually);
   const plansToShow = getPlansToDisplay(plans, selectedBillingPeriod);
@@ -85,26 +84,42 @@ export const Paywall = ({
         billableFeatures,
       });
     },
-    [customer, selectedBillingPeriod],
+    [customer, selectedBillingPeriod, currentSubscription, onPlanSelected],
   );
 
-  const withStartingAtRow = plansToShow.some(plan => {
-    const planPrices = plan.pricePoints.filter(pricePoint => pricePoint.billingPeriod === selectedBillingPeriod);
-    const paywallCalculatedPrice = plan.paywallCalculatedPricePoints?.find(
-      pricePoint => pricePoint.billingPeriod === selectedBillingPeriod,
-    );
-    return planPrices.length > 1 && !!paywallCalculatedPrice?.additionalChargesMayApply;
-  });
+  const isCustomerInCustomPlan = !!currentSubscription && currentSubscription.plan.pricingType === PricingType.Custom;
 
-  const withUnitPriceRow = plansToShow.some(plan => {
-    return !!getPlanPrice(plan, selectedBillingPeriod, paywallLocale, locale, hasMonthlyPrice).unit;
-  });
+  const withStartingAtRow = useMemo(
+    () =>
+      plansToShow.some((plan) => {
+        const planPrices = plan.pricePoints.filter((pricePoint) => pricePoint.billingPeriod === selectedBillingPeriod);
+        const paywallCalculatedPrice = plan.paywallCalculatedPricePoints?.find(
+          (pricePoint) => pricePoint.billingPeriod === selectedBillingPeriod,
+        );
+        return planPrices.length > 1 && !!paywallCalculatedPrice?.additionalChargesMayApply;
+      }),
+    [selectedBillingPeriod, plansToShow],
+  );
 
-  const withTiersRow = plansToShow.some(plan => {
-    return !!getSelectedTier(plan, selectedBillingPeriod, currentSubscription, {});
-  });
+  const withUnitPriceRow = useMemo(
+    () =>
+      plansToShow.some((plan) => {
+        return !!getPlanPrice(plan, selectedBillingPeriod, paywallLocale, locale, hasMonthlyPrice).unit;
+      }),
+    [selectedBillingPeriod, hasMonthlyPrice, locale, paywallLocale, plansToShow],
+  );
+
+  const withTiersRow = useMemo(() => {
+    return (
+      !isCustomerInCustomPlan &&
+      plansToShow.some((plan) => {
+        const tiers = getSelectedTier(plan, selectedBillingPeriod, currentSubscription, {});
+        return Object.values(tiers).length > 0;
+      })
+    );
+  }, [selectedBillingPeriod, currentSubscription, isCustomerInCustomPlan, plansToShow]);
 
-  const withTrialLeftRow = plansToShow.some(plan => {
+  const withTrialLeftRow = plansToShow.some((plan) => {
     return plan.isCurrentCustomerPlan && plan.trialDaysLeft;
   });
 
@@ -119,7 +134,7 @@ export const Paywall = ({
         />
 
         <PaywallPlansContainer className="stigg-paywall-plans-layout">
-          {plansToShow.map(plan => (
+          {plansToShow.map((plan) => (
             <PlanOffering
               withUnitPriceRow={withUnitPriceRow}
               withTiersRow={withTiersRow}
@@ -140,6 +155,7 @@ export const Paywall = ({
               paywallLocale={paywallLocale}
               locale={locale}
               customer={customer}
+              isCustomerInCustomPlan={isCustomerInCustomPlan}
             />
           ))}
         </PaywallPlansContainer>

package/src/components/paywall/PaywallContainer.tsx

@@ -22,7 +22,7 @@ export type PaywallContainerProps = {
   preferredBillingPeriod?: BillingPeriod;
   onBillingPeriodChange?: (billingPeriod: BillingPeriod) => void;
   textOverrides?: DeepPartial<PaywallLocalization>;
-  billingCountryCode?: string
+  billingCountryCode?: string;
 };
 
 export const PaywallContainer = ({
@@ -39,6 +39,7 @@ export const PaywallContainer = ({
   const hasCustomerPortalContext = useCheckContextExists(CustomerPortalContext);
   let isCustomerPortalLoading = false;
   if (hasCustomerPortalContext) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { isLoading, resourceId: customerPortalResourceId } = useCustomerPortalContext();
     isCustomerPortalLoading = isLoading;
     resourceId = customerPortalResourceId;
@@ -81,7 +82,6 @@ export const PaywallContainer = ({
         onBillingPeriodChanged={handlePeriodChange}
         availableBillingPeriods={availableBillingPeriods}
         highlightedPlanId={highlightedPlanId}
-        isLoading={isLoading}
         isCustomerOnTrial={isCustomerOnTrial}
         onPlanSelected={onPlanSelected}
         paywallLocale={paywallLocale}

package/src/components/paywall/PlanOffering.tsx

@@ -1,18 +1,27 @@
 import React, { useEffect } from 'react';
-import { BillableFeature, BillingPeriod, Customer, PriceTierFragment, Subscription } from '@stigg/js-client-sdk';
+import {
+  BillableFeature,
+  BillingPeriod,
+  Customer,
+  PriceTierFragment,
+  PricingType,
+  Subscription,
+} from '@stigg/js-client-sdk';
 import styled from '@emotion/styled/macro';
+import classNames from 'classnames';
+import Grid from '@mui/material/Grid';
 import { PlanEntitlements } from './PlanEntitlements';
 import { PlanOfferingButton } from './PlanOfferingButton';
 import { PaywallPlan, SubscribeIntentionType } from './types';
 import { PaywallLocalization } from './paywallTextOverrides';
 import { flexLayoutMapper } from '../../theme/getResolvedTheme';
 import { Typography } from '../common/Typography';
-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';
 
+const PlanOfferingButtonHeight = '66px';
+
 const PlanOfferingContainer = styled.div<{ $isHighlighted: boolean; $isCurrentPlan: boolean }>`
   position: relative;
   background-color: ${({ theme, $isCurrentPlan }) =>
@@ -82,6 +91,7 @@ type PlanOfferingProps = {
   paywallLocale: PaywallLocalization;
   locale: string;
   withStartingAtRow: boolean;
+  isCustomerInCustomPlan: boolean;
 };
 
 const NextPlanTagContainer = styled.div`
@@ -132,13 +142,15 @@ export function PlanOffering({
   paywallLocale,
   locale,
   withStartingAtRow,
+  isCustomerInCustomPlan,
 }: PlanOfferingProps) {
   const isNextPlan = plan.isNextPlan && plan.isNextPlan(billingPeriod);
-  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,
   );
   const showStartingAt = planPrices.length > 1 && !!paywallCalculatedPrice?.additionalChargesMayApply;
+  const showCTAButton = !isCustomerInCustomPlan || plan.pricingType === PricingType.Custom;
 
   let planBadge = null;
   if (isNextPlan) {
@@ -159,10 +171,10 @@ export function PlanOffering({
 
   useEffect(() => {
     setSelectedTierByFeature(getSelectedTier(plan, billingPeriod, currentSubscription, selectedTierByFeature));
-  }, [billingPeriod]);
+  }, [billingPeriod, currentSubscription, plan, selectedTierByFeature]);
 
   const onPlanButtonClick = (intentionType: SubscribeIntentionType) => {
-    const billableFeatures: BillableFeature[] = Object.keys(selectedTierByFeature).map(featureId => ({
+    const billableFeatures: BillableFeature[] = Object.keys(selectedTierByFeature).map((featureId) => ({
       featureId,
       quantity: selectedTierByFeature[featureId].upTo,
     }));
@@ -176,8 +188,7 @@ export function PlanOffering({
         'stigg-current-plan': plan.isCurrentCustomerPlan,
       })}
       $isHighlighted={isHighlighted}
-      $isCurrentPlan={plan.isCurrentCustomerPlan}
-    >
+      $isCurrentPlan={plan.isCurrentCustomerPlan}>
       {planBadge}
 
       <HeaderWrapper className="stigg-header-wrapper">
@@ -206,19 +217,22 @@ export function PlanOffering({
           hasMonthlyPrice={hasMonthlyPrice}
         />
 
-        <PlanOfferingButton
-          isNextPlan={isNextPlan}
-          customer={customer}
-          plan={plan}
-          currentSubscription={currentSubscription}
-          billingPeriod={billingPeriod}
-          isCustomerOnTrial={isCustomerOnTrial}
-          onPlanSelected={onPlanButtonClick}
-          paywallLocale={paywallLocale}
-          hasTiersRow={withTiersRow}
-          withTrialLeftRow={withTrialLeftRow}
-          selectedTierByFeature={selectedTierByFeature}
-        />
+        {showCTAButton ? (
+          <PlanOfferingButton
+            isNextPlan={isNextPlan}
+            customer={customer}
+            plan={plan}
+            currentSubscription={currentSubscription}
+            billingPeriod={billingPeriod}
+            isCustomerOnTrial={isCustomerOnTrial}
+            onPlanSelected={onPlanButtonClick}
+            paywallLocale={paywallLocale}
+            withTrialLeftRow={withTrialLeftRow}
+            selectedTierByFeature={selectedTierByFeature}
+          />
+        ) : (
+          <div style={{ height: PlanOfferingButtonHeight }} />
+        )}
 
         <Divider className="stigg-plan-header-divider" />
       </HeaderWrapper>

package/src/components/paywall/PlanOfferingButton.tsx

@@ -81,7 +81,6 @@ type PlanOfferingButtonProps = {
   isCustomerOnTrial: boolean;
   paywallLocale: PaywallLocalization;
   onPlanSelected: (intentionType: SubscribeIntentionType) => void | Promise<void>;
-  hasTiersRow: boolean;
   withTrialLeftRow: boolean;
   selectedTierByFeature: Record<string, PriceTierFragment>;
 };
@@ -94,7 +93,6 @@ export function PlanOfferingButton({
   isCustomerOnTrial,
   onPlanSelected,
   paywallLocale,
-  hasTiersRow,
   withTrialLeftRow,
   currentSubscription,
   selectedTierByFeature,
@@ -208,7 +206,7 @@ export function PlanOfferingButton({
               {isLoading && <LoadingIndicator color={theme.stigg.palette.text.disabled} loading size={16} />}
             </OfferingButton>
 
-            {hasTiersRow && !withTrialLeftRow ? (
+            {!withTrialLeftRow ? (
               <div style={{ height: '20px' }} />
             ) : (
               <TrialDaysLeft className="stigg-trial-days-left-text" variant="h6" color="secondary">