@stigg/react-sdk 4.5.3 → 4.5.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.3",
+  "version": "4.5.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -109,7 +109,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.12.0",
-    "@stigg/js-client-sdk": "2.24.1",
+    "@stigg/js-client-sdk": "2.24.2",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@types/styled-components": "^5.1.26",

package/src/components/checkout/CheckoutContainer.tsx

@@ -1,6 +1,12 @@
 import React, { useMemo } from 'react';
 import { Elements } from '@stripe/react-stripe-js';
-import { PricingType, BillingAddress, ApplySubscription, CheckoutStatePlan } from '@stigg/js-client-sdk';
+import {
+  PricingType,
+  BillingAddress,
+  ApplySubscription,
+  CheckoutStatePlan,
+  ApplySubscriptionResults,
+} from '@stigg/js-client-sdk';
 import { CheckoutContent, CheckoutLayout, CheckoutPanel } from './CheckoutContainer.style';
 import { CheckoutProgressBar } from './progressBar/CheckoutProgressBar';
 import { CheckoutSummary, CheckoutSummarySkeleton } from './summary';
@@ -45,9 +51,13 @@ const getStepProps = (
   }
 };
 
-export type CheckoutResult = { success: boolean; errorMessage?: string };
+export type CheckoutResult = { success: boolean; errorMessage?: string; results?: ApplySubscriptionResults };
 
-export type OnCheckoutParams = { checkoutParams: ApplySubscription; checkoutAction: () => Promise<CheckoutResult> };
+export type OnCheckoutParams = {
+  customerId: string;
+  checkoutParams: ApplySubscription;
+  checkoutAction: (params: ApplySubscription) => Promise<CheckoutResult>;
+};
 
 export type OnCheckoutCompletedParams = { success: boolean; error?: string };
 

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

@@ -1,9 +1,9 @@
-import { ApplySubscription } from '@stigg/js-client-sdk';
+import { ApplySubscription, PreviewSubscription } from '@stigg/js-client-sdk';
 import { useCheckoutContext } from '../CheckoutProvider';
 import { useCheckoutModel } from './useCheckoutModel';
 import { useSubscriptionModel } from './useSubscriptionModel';
 
-export function useSubscriptionState(): ApplySubscription | undefined {
+export function useSubscriptionState(): ApplySubscription | PreviewSubscription | undefined {
   const subscription = useSubscriptionModel();
   const [{ resourceId }] = useCheckoutContext();
   const { checkoutState } = useCheckoutModel();
@@ -22,6 +22,5 @@ export function useSubscriptionState(): ApplySubscription | undefined {
     addons,
     promotionCode: subscription.promotionCode,
     billingCountryCode: subscription.billingCountryCode,
-    ...(subscription.taxPercentage ? { billingInformation: { taxPercentage: subscription.taxPercentage } } : {}),
   };
 }

package/src/components/checkout/steps/payment/stripe/stripe.utils.ts

@@ -23,28 +23,6 @@ export async function handleStripeFormValidations({ elements }: Pick<StripeEleme
   return { success: true };
 }
 
-export async function handleNewPaymentMethod({
-  stripe,
-  elements,
-  setupIntentClientSecret,
-}: {
-  stripe: Stripe | null;
-  elements: StripeElements | null;
-  setupIntentClientSecret?: string;
-}) {
-  if (!stripe || !elements || !setupIntentClientSecret) {
-    return { success: false };
-  }
-
-  const { newPaymentMethodId, setupErrorMessage } = await handleStripeSetup({
-    stripe,
-    elements,
-    clientSecret: setupIntentClientSecret,
-  });
-
-  return { success: !!newPaymentMethodId, paymentMethodId: newPaymentMethodId, errorMessage: setupErrorMessage };
-}
-
 export async function handleStripeNextAction({
   applySubscriptionResults,
   stripe,
@@ -108,3 +86,34 @@ async function handleStripeSetup({
 
   return { newPaymentMethodId, setupErrorMessage };
 }
+
+export async function handleNewPaymentMethod({
+  stripe,
+  elements,
+  setupIntentClientSecret,
+}: {
+  stripe: Stripe | null;
+  elements: StripeElements | null;
+  setupIntentClientSecret?: string;
+}): Promise<{ success: boolean; errorMessage?: string; paymentMethodId?: string }> {
+  if (!stripe || !elements || !setupIntentClientSecret) {
+    return { success: false };
+  }
+
+  const stripeFormValidationsResults = await handleStripeFormValidations({ elements });
+  if (!stripeFormValidationsResults.success) {
+    return { success: false, errorMessage: stripeFormValidationsResults.errorMessage };
+  }
+
+  const { newPaymentMethodId, setupErrorMessage } = await handleStripeSetup({
+    stripe,
+    elements,
+    clientSecret: setupIntentClientSecret,
+  });
+
+  if (setupErrorMessage || !newPaymentMethodId) {
+    return { success: false, errorMessage: setupErrorMessage };
+  }
+
+  return { success: true, paymentMethodId: newPaymentMethodId };
+}

package/src/components/checkout/steps/payment/stripe/useSubmit.ts

@@ -5,7 +5,7 @@ import { useCheckoutModel } from '../../../hooks';
 import { usePaymentStepModel } from '../../../hooks/usePaymentStepModel';
 import { useSubscriptionState } from '../../../hooks/useSubscriptionState';
 import { CheckoutContainerProps, CheckoutResult } from '../../../CheckoutContainer';
-import { handleNewPaymentMethod, handleStripeFormValidations, handleStripeNextAction } from './stripe.utils';
+import { handleNewPaymentMethod, handleStripeNextAction } from './stripe.utils';
 import { ANIMATION_DURATION } from '../../../summary/CheckoutSuccess';
 
 const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
@@ -14,14 +14,21 @@ export type HandleSubmitResult = { results?: ApplySubscriptionResults; success:
 
 export type UseSubmitProps = {
   onSuccess?: () => void;
+  isMocked?: boolean;
 } & Pick<CheckoutContainerProps, 'onCheckout' | 'onCheckoutCompleted' | 'disableSuccessAnimation'>;
 
-export function useSubmit({ onCheckout, onCheckoutCompleted, onSuccess, disableSuccessAnimation }: UseSubmitProps) {
+export function useSubmit({
+  isMocked = false,
+  onCheckout,
+  onCheckoutCompleted,
+  onSuccess,
+  disableSuccessAnimation,
+}: UseSubmitProps) {
   const { stigg } = useStiggContext();
   const { useNewPaymentMethod } = usePaymentStepModel();
   const subscriptionState = useSubscriptionState();
   const { checkoutState, widgetState, setWidgetReadOnly } = useCheckoutModel();
-  const { setupSecret: setupIntentClientSecret } = checkoutState || {};
+  const { setupSecret: setupIntentClientSecret, customer } = checkoutState || {};
   const stripe = useStripe();
   const elements = useElements();
 
@@ -32,48 +39,38 @@ export function useSubmit({ onCheckout, onCheckoutCompleted, onSuccess, disableS
       return { success: false, errorMessage: 'Unexpected error, please contact support.' };
     }
 
-    let checkoutParams: ApplySubscription = { ...subscriptionState };
-    let checkoutResults: ApplySubscriptionResults | undefined;
+    let success = true;
     let errorMessage: string | undefined;
+    let usedStiggCheckoutAction = false;
     let paymentMethodId: string | undefined;
 
-    const checkoutAction = async (): Promise<CheckoutResult> => {
-      if (useNewPaymentMethod) {
-        const { success, errorMessage: stripeValidationsErrorMessage } = await handleStripeFormValidations({
-          elements,
-        });
-
-        if (!success) {
-          return { success: false, errorMessage: stripeValidationsErrorMessage };
-        }
-
-        const paymentMethodResults = await handleNewPaymentMethod({ elements, stripe, setupIntentClientSecret });
-        if (!paymentMethodResults.success) {
-          errorMessage = paymentMethodResults.errorMessage;
-        }
+    setWidgetReadOnly(true);
 
+    if (!isMocked && useNewPaymentMethod) {
+      const paymentMethodResults = await handleNewPaymentMethod({ elements, stripe, setupIntentClientSecret });
+      if (!paymentMethodResults.success) {
+        errorMessage = paymentMethodResults.errorMessage;
+        success = false;
+      } else {
         paymentMethodId = paymentMethodResults.paymentMethodId;
       }
+    }
 
-      if (errorMessage) {
-        return { success: false, errorMessage };
-      }
+    const checkoutParams: ApplySubscription = { ...subscriptionState, paymentMethodId };
 
-      checkoutParams = { ...checkoutParams, paymentMethodId };
+    const checkoutAction = async (params: ApplySubscription): Promise<CheckoutResult> => {
+      usedStiggCheckoutAction = true;
 
       try {
-        const applySubscriptionResults = await stigg.applySubscription(checkoutParams);
-        const nextActionResults = await handleStripeNextAction({
-          applySubscriptionResults,
-          stripe,
-        });
+        const applySubscriptionResults = await stigg.applySubscription(params);
 
-        checkoutResults = nextActionResults;
-        if (nextActionResults.errorMessage) {
-          errorMessage = nextActionResults.errorMessage;
-        }
+        const nextActionResults = await handleStripeNextAction({ applySubscriptionResults, stripe });
 
-        return { success: !nextActionResults.errorMessage, errorMessage: nextActionResults.errorMessage };
+        return {
+          success: !nextActionResults.errorMessage,
+          errorMessage: nextActionResults.errorMessage,
+          results: applySubscriptionResults,
+        };
       } catch (e) {
         console.error(e);
         errorMessage = (e as any)?.message;
@@ -81,21 +78,41 @@ export function useSubmit({ onCheckout, onCheckoutCompleted, onSuccess, disableS
       }
     };
 
-    setWidgetReadOnly(true);
+    let checkoutResults: ApplySubscriptionResults | undefined;
 
-    let success = false;
-    if (onCheckout) {
-      const externalCheckoutResults = await onCheckout({ checkoutParams, checkoutAction });
-      if (!externalCheckoutResults.success && externalCheckoutResults.errorMessage) {
-        errorMessage = externalCheckoutResults.errorMessage;
-      }
-      success = externalCheckoutResults.success && !errorMessage;
-    } else {
-      const checkoutActionResults = await checkoutAction();
-      if (!checkoutActionResults.success && checkoutActionResults.errorMessage) {
-        errorMessage = checkoutActionResults.errorMessage;
+    if (success) {
+      if (onCheckout) {
+        const externalCheckoutResults = await onCheckout({
+          customerId: customer!.id,
+          checkoutParams,
+          checkoutAction,
+        });
+        if (externalCheckoutResults.errorMessage) {
+          errorMessage = externalCheckoutResults.errorMessage;
+        }
+
+        if (!usedStiggCheckoutAction && externalCheckoutResults.results && externalCheckoutResults.success) {
+          const nextActionResults = await handleStripeNextAction({
+            applySubscriptionResults: externalCheckoutResults.results,
+            stripe,
+          });
+
+          if (nextActionResults.errorMessage) {
+            errorMessage = nextActionResults.errorMessage;
+            success = false;
+          }
+        }
+
+        success = success && externalCheckoutResults.success && !errorMessage;
+        checkoutResults = externalCheckoutResults.results;
+      } else {
+        const checkoutActionResults = await checkoutAction(checkoutParams);
+        if (!checkoutActionResults.success && checkoutActionResults.errorMessage) {
+          errorMessage = checkoutActionResults.errorMessage;
+        }
+        success = checkoutActionResults.success && !errorMessage;
+        checkoutResults = checkoutActionResults.results;
       }
-      success = checkoutActionResults.success && !errorMessage;
     }
 
     setWidgetReadOnly(false);

package/src/components/checkout/summary/CheckoutSummary.tsx

@@ -122,6 +122,7 @@ export const CheckoutSummary = ({
   const { subscriptionPreview, isFetchingSubscriptionPreview } = usePreviewSubscription({ onMockCheckoutPreview });
 
   const { handleSubmit, isLoading } = useSubmit({
+    isMocked: !!onMockCheckoutPreview, // This is a hack to make the submit button work with mocked data
     disableSuccessAnimation,
     onCheckout,
     onCheckoutCompleted,

package/src/components/customerPortal/CustomerPortalContainer.tsx

@@ -4,7 +4,6 @@ import { CustomerPortalHeader } from './CustomerPortalHeader';
 import { PaymentDetailsSection } from './billing/PaymentDetailsSection';
 import { CustomerPortalPaywall } from './paywall/CustomerPortalPaywall';
 import { useCustomerPortalContext } from './CustomerPortalProvider';
-import { PricingType } from '@stigg/js-client-sdk';
 import { CustomerPortalLayout, CustomerPortalSections } from './CustomerPortal.style';
 import { CustomerPortalProps } from './CustomerPortal';
 import { InvoicesSection, useStiggContext } from '../..';
@@ -24,20 +23,19 @@ export function CustomerPortalContainer({
 
   const onManageClick = () => {
     if (onManageSubscription) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       onManageSubscription();
     } else {
       customerPortalSectionRef?.current?.scrollIntoView({ behavior: 'smooth' });
     }
   };
-  const hasCustomSubscription = customerPortal?.subscriptions.some(
-    subscription => subscription.pricingType === PricingType.Custom,
-  );
-  const shouldShowUsage = !hiddenSections?.some(section => section === 'usage');
+
+  const shouldShowUsage = !hiddenSections?.some((section) => section === 'usage');
   const shouldShowPaymentDetails = !hiddenSections?.some(
-    section => section === 'paymentDetails' || section === 'billingInformation',
+    (section) => section === 'paymentDetails' || section === 'billingInformation',
   );
   const shouldShowInvoices = !hiddenSections?.some(
-    section => section === 'invoices' || section === 'billingInformation',
+    (section) => section === 'invoices' || section === 'billingInformation',
   );
 
   return (
@@ -56,7 +54,6 @@ export function CustomerPortalContainer({
         <CustomerPortalPaywall
           ref={customerPortalSectionRef}
           paywallComponent={paywallComponent}
-          hidePaywallButtons={!!hasCustomSubscription}
           theme={theme}
           title={textOverrides.paywallSectionTitle}
           isLoading={!customerPortal || isLoading}

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/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/Grid';
 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,6 +142,7 @@ export function PlanOffering({
   paywallLocale,
   locale,
   withStartingAtRow,
+  isCustomerInCustomPlan,
 }: PlanOfferingProps) {
   const isNextPlan = plan.isNextPlan && plan.isNextPlan(billingPeriod);
   const planPrices = plan.pricePoints.filter((pricePoint) => pricePoint.billingPeriod === billingPeriod);
@@ -139,6 +150,7 @@ export function PlanOffering({
     (pricePoint) => pricePoint.billingPeriod === billingPeriod,
   );
   const showStartingAt = planPrices.length > 1 && !!paywallCalculatedPrice?.additionalChargesMayApply;
+  const showCTAButton = !isCustomerInCustomPlan || plan.pricingType === PricingType.Custom;
 
   let planBadge = null;
   if (isNextPlan) {
@@ -159,7 +171,7 @@ 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) => ({
@@ -205,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">