@stigg/react-sdk 7.7.1-beta.0 → 7.8.0-beta.0

package/src/components/paywall/PaywallContainer.tsx

@@ -1,119 +0,0 @@
-import { BillingPeriod } from '@stigg/js-client-sdk';
-import { Paywall } from './Paywall';
-import { useLoadPaywallData } from './hooks/useLoadPaywallData';
-import {
-  ShouldHidePlanFn,
-  OnPlanSelectedCallbackFn,
-  SelectDefaultTierIndexFn,
-  CurrentSubscriptionOverrideFn,
-} from './types';
-import { getResolvedPaywallLocalize, PaywallLocalization } from './paywallTextOverrides';
-import { DeepPartial } from '../../types';
-import { PaywallLoader } from './PaywallLoader';
-import { SdkThemeProvider } from '../../theme/Theme';
-import {
-  CustomerPortalContext,
-  useCheckContextExists,
-  useCustomerPortalContext,
-} from '../customerPortal/CustomerPortalContext';
-
-export type PaywallContainerProps = {
-  productId?: string;
-  resourceId?: string;
-  highlightedPlanId?: string;
-  showOnlyEligiblePlans?: boolean;
-  onPlanSelected: OnPlanSelectedCallbackFn;
-  preferredBillingPeriod?: BillingPeriod;
-  onBillingPeriodChange?: (billingPeriod: BillingPeriod) => void;
-  textOverrides?: DeepPartial<PaywallLocalization>;
-  billingCountryCode?: string;
-  shouldHidePlan?: ShouldHidePlanFn;
-  selectDefaultTierIndex?: SelectDefaultTierIndexFn;
-  hideCompatibleAddons?: boolean;
-  // This is used to override the current subscription in case a many to one plan mapping is needed
-  // Many plans mapped to one (fictive) plan
-  currentSubscriptionOverride?: CurrentSubscriptionOverrideFn;
-};
-
-export const PaywallContainer = ({
-  productId,
-  resourceId,
-  highlightedPlanId,
-  showOnlyEligiblePlans,
-  textOverrides,
-  onPlanSelected,
-  preferredBillingPeriod,
-  onBillingPeriodChange,
-  billingCountryCode,
-  shouldHidePlan,
-  selectDefaultTierIndex,
-  currentSubscriptionOverride: currentSubscriptionOverrideFn,
-  hideCompatibleAddons,
-}: PaywallContainerProps) => {
-  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;
-  }
-  const {
-    plans,
-    customer,
-    currentSubscription,
-    currentSubscriptionOverride,
-    isCustomerOnTrial,
-    isLoading,
-    selectedBillingPeriod,
-    setSelectedBillingPeriod,
-    availableBillingPeriods,
-    locale,
-    configuration,
-    showWatermark,
-  } = useLoadPaywallData({
-    productId,
-    resourceId,
-    showOnlyEligiblePlans,
-    billingCountryCode,
-    preferredBillingPeriod,
-    currentSubscriptionOverrideFn,
-  });
-  const paywallLocale = getResolvedPaywallLocalize(textOverrides);
-  const handlePeriodChange = (billingPeriod: BillingPeriod) => {
-    setSelectedBillingPeriod(billingPeriod);
-    if (onBillingPeriodChange) {
-      onBillingPeriodChange(billingPeriod);
-    }
-  };
-
-  const component =
-    !plans || isLoading || isCustomerPortalLoading ? (
-      <PaywallLoader />
-    ) : (
-      <Paywall
-        plans={plans}
-        customer={customer}
-        currentSubscription={currentSubscription}
-        currentSubscriptionOverride={currentSubscriptionOverride}
-        selectedBillingPeriod={selectedBillingPeriod}
-        onBillingPeriodChanged={handlePeriodChange}
-        availableBillingPeriods={availableBillingPeriods}
-        highlightedPlanId={highlightedPlanId}
-        isCustomerOnTrial={isCustomerOnTrial}
-        onPlanSelected={onPlanSelected}
-        paywallLocale={paywallLocale}
-        locale={locale}
-        shouldHidePlan={shouldHidePlan}
-        selectDefaultTierIndex={selectDefaultTierIndex}
-        hideCompatibleAddons={hideCompatibleAddons}
-        showWatermark={showWatermark}
-      />
-    );
-
-  // When rendering the paywall in the customer portal context we don't want to apply paywall theme
-  if (hasCustomerPortalContext) {
-    return component;
-  }
-  return <SdkThemeProvider componentTheme={configuration}>{component}</SdkThemeProvider>;
-};

package/src/components/paywall/PaywallLoader.tsx

@@ -1,96 +0,0 @@
-import styled from '@utils/style';
-import Skeleton from 'react-loading-skeleton';
-import CheckUrl from '../../assets/check-stigg.svg';
-
-const SkeletonContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const EntitlementCheckIcon = styled(CheckUrl)`
-  margin-right: 16px;
-`;
-
-const PlanOfferingSkeleton = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 20px;
-  border-radius: 10px;
-  padding: ${({ theme }) => theme.stigg.layout.planPadding};
-  background-color: ${({ theme }) => theme.stigg.palette.backgroundPaper};
-  min-width: ${({ theme }) => theme.stigg.layout.planMinWidth};
-  max-width: ${({ theme }) => theme.stigg.layout.planMaxWidth};
-  min-height: 450px;
-  border: ${({ theme }) => `1px solid ${theme.stigg.palette.outlinedBorder}`};
-`;
-
-const PlansContainer = styled.div`
-  display: flex;
-  gap: ${({ theme }) => theme.stigg.layout.planMargin};
-  flex-wrap: wrap;
-  justify-content: center;
-`;
-
-const EntitlementContainer = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-`;
-
-const FooterSkeletonLoader = styled.div`
-  margin-top: auto;
-`;
-
-const BillingPeriodLoader = styled.div`
-  width: 150px;
-  margin-bottom: ${({ theme }) => theme.stigg.layout.switchBottomSpacing};
-  padding: 12px 12px;
-  border-radius: 10px;
-  background-color: white;
-  border: ${({ theme }) => `1px solid ${theme.stigg.palette.outlinedBorder}`};
-`;
-
-function PlanOfferingLoader() {
-  return (
-    <PlanOfferingSkeleton>
-      <Skeleton width={120} borderRadius={4} />
-      <Skeleton circle width={40} height={40} />
-      <Skeleton style={{ marginBottom: 33 }} width={120} borderRadius={4} />
-
-      <EntitlementContainer>
-        <EntitlementCheckIcon />
-        <Skeleton width={120} borderRadius={4} />
-      </EntitlementContainer>
-      <EntitlementContainer>
-        <EntitlementCheckIcon />
-        <Skeleton width={120} borderRadius={4} />
-      </EntitlementContainer>
-      <EntitlementContainer>
-        <EntitlementCheckIcon />
-        <Skeleton width={120} borderRadius={4} />
-      </EntitlementContainer>
-
-      <FooterSkeletonLoader>
-        <Skeleton height={50} borderRadius={4} />
-      </FooterSkeletonLoader>
-    </PlanOfferingSkeleton>
-  );
-}
-
-export function PaywallLoader() {
-  return (
-    <SkeletonContainer className="stigg-skeleton-loader-container">
-      <BillingPeriodLoader className="stigg-skeleton-loader-billing-period">
-        <Skeleton borderRadius={4} />
-      </BillingPeriodLoader>
-
-      <PlansContainer className="stigg-skeleton-loader-plans-container">
-        <PlanOfferingLoader />
-        <PlanOfferingLoader />
-        <PlanOfferingLoader />
-      </PlansContainer>
-    </SkeletonContainer>
-  );
-}

package/src/components/paywall/PlanCompatibleAddons.tsx

@@ -1,127 +0,0 @@
-import { useState } from 'react';
-import { Addon, WidgetType } from '@stigg/js-client-sdk';
-import MuiButton from '@mui/material/Button';
-import styled from '@utils/style';
-import classNames from 'classnames';
-import { Typography } from '../common/Typography';
-import { PaywallLocalization } from './paywallTextOverrides';
-import { Icon } from '../common/Icon';
-
-export const StyledButton = styled(MuiButton)`
-  padding: 0px;
-  text-transform: none;
-  margin-left: 0px;
-`;
-
-const ButtonText = styled(Typography)`
-  font-size: 14px;
-  font-weight: 500;
-`;
-
-const AddonsBox = styled.div`
-  width: 100%;
-  gap: 10px;
-`;
-
-const AddonsList = styled.div`
-  margin-top: 10px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  width: 100%;
-`;
-
-const AddonRow = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 0px;
-  max-height: 44px;
-  gap: 16px;
-`;
-
-const AddonName = styled(Typography)`
-  overflow: hidden;
-  font-feature-settings: 'liga' off, 'clig' off;
-  text-overflow: ellipsis;
-  font-family: 'DM Sans';
-  letter-spacing: 0.15px;
-  white-space: nowrap;
-  min-width: 0;
-  flex-shrink: 1;
-`;
-
-const AddonIcon = styled(Icon)`
-  width: 24px;
-  height: 24px;
-  color: ${({ theme }) => theme.stigg.palette.primary};
-`;
-
-const AddonContent = styled.div`
-  flex: 1;
-  min-width: 0;
-`;
-
-const Footer = styled.div`
-  margin-top: 16px;
-  display: flex;
-`;
-
-const MAX_ADDONS = 4;
-
-type PlanCompatibleAddonsProps = {
-  addons: Addon[];
-  paywallLocale: PaywallLocalization;
-};
-
-export function PlanCompatibleAddons({ addons, paywallLocale }: PlanCompatibleAddonsProps) {
-  const [showAllAddons, setShowAllAddons] = useState(false);
-
-  if (!addons || addons.length === 0) return null;
-
-  const visibleAddons = addons.filter((addon) => !addon.hiddenFromWidgets?.includes(WidgetType.Paywall));
-
-  const toggleShowAllAddons = () => {
-    setShowAllAddons(!showAllAddons);
-  };
-
-  const displayedAddons = showAllAddons ? visibleAddons : visibleAddons.slice(0, MAX_ADDONS);
-
-  if (displayedAddons.length === 0) return null;
-
-  return (
-    <AddonsBox className="stigg-compatible-addons-container">
-      <Typography className="stigg-compatible-addons-header" color="secondary" variant="body1" bold>
-        {paywallLocale.addonsTitle}
-      </Typography>
-      <AddonsList className="stigg-compatible-addons-list">
-        {displayedAddons.map((addon) => {
-          return (
-            <AddonRow
-              key={addon.id}
-              className={classNames(`stigg-compatible-addon--${addon.id}`, 'stigg-compatible-addon-item')}>
-              <AddonIcon icon="Add" className="stigg-compatible-addon-icon" />
-              <AddonContent className="stigg-compatible-addon-content">
-                <AddonName variant="body1" color="primary" className="stigg-compatible-addon-name">
-                  {addon.displayName}
-                </AddonName>
-              </AddonContent>
-            </AddonRow>
-          );
-        })}
-      </AddonsList>
-      {visibleAddons.length > MAX_ADDONS && (
-        <Footer>
-          <StyledButton variant="text" onClick={toggleShowAllAddons}>
-            <ButtonText color="primary.main">
-              {showAllAddons ? 'Show less' : `Show ${visibleAddons.length - MAX_ADDONS} more`}
-            </ButtonText>
-          </StyledButton>
-        </Footer>
-      )}
-    </AddonsBox>
-  );
-}

package/src/components/paywall/PlanEntitlements.tsx

@@ -1,75 +0,0 @@
-import styled from '@utils/style';
-import { BillingPeriod, WidgetType } from '@stigg/js-client-sdk';
-import { EntitlementRow } from './EntitlementRow';
-import { PaywallPlan } from './types';
-import { PaywallLocalization } from './paywallTextOverrides';
-import { Typography } from '../common/Typography';
-
-const PlanEntitlementsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-
-function getTitle(plan: PaywallPlan, paywallLocale: PaywallLocalization, hasFeatures: boolean) {
-  if (paywallLocale.entitlementsTitle) {
-    return paywallLocale.entitlementsTitle(plan);
-  }
-  let title = hasFeatures ? `Includes:` : '';
-  if (plan.basePlan) {
-    title = `Everything in ${plan.basePlan.displayName}${hasFeatures ? ', plus:' : ''}`;
-  }
-
-  return title;
-}
-
-export function PlanEntitlements({
-  plan,
-  billingPeriod,
-  paywallLocale,
-}: {
-  plan: PaywallPlan;
-  billingPeriod: BillingPeriod;
-  paywallLocale: PaywallLocalization;
-}) {
-  const prices = plan.pricePoints?.filter((price) => price.billingPeriod === billingPeriod) || [];
-  const unitBasedEntitlements = prices
-    .filter((price) => (price?.minUnitQuantity && price?.minUnitQuantity > 1) || price?.maxUnitQuantity)
-    .map((price) => {
-      return (
-        <EntitlementRow
-          key={`priceUnitEntitlement-${price?.feature?.displayName}`}
-          feature={price?.feature ? { ...price.feature, id: price.feature.featureId } : null}
-          minUnitQuantity={price?.minUnitQuantity}
-          maxUnitQuantity={price?.maxUnitQuantity}
-        />
-      );
-    });
-
-  const visibleEntitlements = plan.entitlements
-    .filter(({ isGranted }) => isGranted)
-    .filter((entitlement) => !(entitlement.hiddenFromWidgets || []).includes(WidgetType.Paywall));
-
-  const hasFeatures = unitBasedEntitlements.length > 0 || visibleEntitlements.length > 0;
-
-  return (
-    <PlanEntitlementsContainer className="stigg-plan-entitlements-container">
-      <Typography className="stigg-plan-entitlements-title" color="secondary" variant="h6" bold>
-        {getTitle(plan, paywallLocale, hasFeatures)}
-      </Typography>
-      {unitBasedEntitlements}
-      {visibleEntitlements.map((entitlement) => (
-        <EntitlementRow
-          key={entitlement.feature?.id}
-          displayNameOverride={entitlement.displayNameOverride}
-          feature={entitlement.feature}
-          resetPeriod={entitlement.resetPeriod}
-          hasUnlimitedUsage={entitlement.hasUnlimitedUsage}
-          usageLimit={entitlement.usageLimit}
-          enumValues={entitlement.enumValues}
-          isCustom={entitlement.isCustom}
-        />
-      ))}
-    </PlanEntitlementsContainer>
-  );
-}

package/src/components/paywall/PlanOffering.tsx

@@ -1,256 +0,0 @@
-import { useState } from 'react';
-import { BillableFeature, BillingPeriod, Customer, PricingType, Subscription } from '@stigg/js-client-sdk';
-import styled from '@utils/style';
-import classNames from 'classnames';
-import Grid from '@mui/material/Grid';
-import { PlanEntitlements } from './PlanEntitlements';
-import { PlanOfferingButton } from './PlanOfferingButton';
-import { CurrentSubscriptionOverride, PaywallPlan, SelectDefaultTierIndexFn, SubscribeIntentionType } from './types';
-import { PaywallLocalization } from './paywallTextOverrides';
-import { flexLayoutMapper } from '../../theme/getResolvedTheme';
-import { Typography } from '../common/Typography';
-import MiniSchedule from '../../assets/mini-schedule.svg';
-import { PlanPrice } from './PlanPrice';
-import { getTiersPerUnitQuantities } from '../utils/priceTierUtils';
-import { PlanCompatibleAddons } from './PlanCompatibleAddons';
-
-const PlanOfferingButtonHeight = '66px';
-
-const PlanOfferingContainer = styled.div<{ $isHighlighted: boolean; $isCurrentPlan: boolean }>`
-  position: relative;
-  background-color: ${({ theme, $isCurrentPlan }) =>
-    $isCurrentPlan ? theme.stigg.palette.backgroundHighlight : theme.stigg.palette.backgroundPaper};
-  border: ${({ theme, $isHighlighted }) =>
-    $isHighlighted ? `3px solid ${theme.stigg.palette.primary}` : `1px solid ${theme.stigg.palette.outlinedBorder}`};
-  border-radius: 10px;
-  padding: ${({ theme }) => theme.stigg.layout.planPadding};
-  display: flex;
-  min-width: ${({ theme }) => theme.stigg.layout.planMinWidth};
-  max-width: ${({ theme }) => theme.stigg.layout.planMaxWidth};
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  position: relative;
-`;
-
-const AddonsContainer = styled.div<{ $planHasEntitlements: boolean }>`
-  margin-top: ${({ $planHasEntitlements }) => ($planHasEntitlements ? '32px' : '0px')};
-`;
-
-const PlanHeader = styled(Typography)`
-  padding-bottom: 8px;
-`;
-
-const Divider = styled.div`
-  height: 2px;
-  width: 100%;
-  background-color: ${({ theme }) => theme.stigg.palette.outlinedBorder};
-  margin-bottom: 40px;
-`;
-
-const PlanDescription = styled(Typography)`
-  text-align: ${({ theme }) => theme.stigg.layout.descriptionAlignment};
-  min-height: ${({ theme }) => theme.stigg.layout.descriptionMinHeight};
-`;
-
-const HighlightBadge = styled.div`
-  background-color: ${({ theme }) => theme.stigg.palette.primary};
-  border-radius: 40px;
-  position: absolute;
-  top: -12px;
-`;
-
-const HighlightText = styled(Typography)`
-  margin: 0;
-  padding: 2px 8px;
-`;
-
-const HeaderWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: ${({ theme }) => flexLayoutMapper(theme.stigg.layout.headerAlignment)};
-`;
-
-type PlanOfferingProps = {
-  withUnitPriceRow: boolean;
-  withTiersRow: boolean;
-  withTrialLeftRow: boolean;
-  customer: Customer | null;
-  plan: PaywallPlan;
-  billingPeriod: BillingPeriod;
-  currentSubscription: Subscription | null;
-  currentSubscriptionOverride?: CurrentSubscriptionOverride | null;
-  isHighlighted: boolean;
-  shouldShowDescriptionSection: boolean;
-  hasAnnuallyPrice: boolean;
-  hasMonthlyPrice: boolean;
-  isCustomerOnTrial: boolean;
-  onPlanSelected: (intentionType: SubscribeIntentionType, billableFeatures: BillableFeature[]) => void | Promise<void>;
-  paywallLocale: PaywallLocalization;
-  locale: string;
-  withStartingAtRow: boolean;
-  isCustomerInCustomPlan: boolean;
-  selectDefaultTierIndex?: SelectDefaultTierIndexFn;
-  hideCompatibleAddons?: boolean;
-};
-
-const NextPlanTagContainer = styled.div`
-  position: absolute;
-  top: 0;
-  background-color: ${({ theme }) => theme.stigg.palette.outlinedBorder};
-  border-radius: 0px 0px 10px 10px;
-  padding: 3px 12px;
-`;
-
-const StyledMiniSchedule = styled(MiniSchedule)<{ $iconsColor?: string }>`
-  display: flex;
-  height: 100%;
-  margin-right: 4px;
-
-  path {
-    fill: ${({ theme }) => theme.stigg.palette.text.primary};
-  }
-`;
-
-function UpcomingChangeTag({ text = 'Next', iconsColor }: { text?: string; iconsColor?: string }) {
-  return (
-    <NextPlanTagContainer>
-      <Grid display="flex" alignItems="center" gap={1}>
-        <StyledMiniSchedule $iconsColor={iconsColor} />
-        <Typography color="primary" variant="body1">
-          {text}
-        </Typography>
-      </Grid>
-    </NextPlanTagContainer>
-  );
-}
-
-export function PlanOffering({
-  withUnitPriceRow,
-  withTiersRow,
-  withTrialLeftRow,
-  customer,
-  plan,
-  billingPeriod,
-  isHighlighted,
-  currentSubscription,
-  currentSubscriptionOverride,
-  shouldShowDescriptionSection,
-  hasMonthlyPrice,
-  hasAnnuallyPrice,
-  isCustomerOnTrial,
-  onPlanSelected,
-  paywallLocale,
-  locale,
-  withStartingAtRow,
-  isCustomerInCustomPlan,
-  selectDefaultTierIndex,
-  hideCompatibleAddons,
-}: PlanOfferingProps) {
-  const isNextPlan = plan.isNextPlan && plan.isNextPlan(billingPeriod);
-  const planPrices = plan.pricePoints.filter((pricePoint) => pricePoint.billingPeriod === billingPeriod);
-  const paywallCalculatedPrice = plan.paywallCalculatedPricePoints?.find(
-    (pricePoint) => pricePoint.billingPeriod === billingPeriod,
-  );
-  const showStartingAt = planPrices.length > 1 && !!paywallCalculatedPrice?.additionalChargesMayApply;
-  const showCTAButton = !isCustomerInCustomPlan || plan.pricingType === PricingType.Custom;
-
-  let planBadge = null;
-  if (isNextPlan) {
-    planBadge = <UpcomingChangeTag text="Next plan" />;
-  } else if (isHighlighted && paywallLocale.highlightChip) {
-    planBadge = (
-      <HighlightBadge className="stigg-highlight-badge">
-        <HighlightText className="stigg-highlight-badge-text" color="white" bold>
-          {paywallLocale.highlightChip}
-        </HighlightText>
-      </HighlightBadge>
-    );
-  }
-
-  const [perUnitQuantityByFeature, setPerUnitQuantityByFeature] = useState<Record<string, number>>(
-    getTiersPerUnitQuantities({
-      plan,
-      billingPeriod,
-      currentSubscription,
-      currentSubscriptionOverride,
-      selectDefaultTierIndex,
-    }),
-  );
-
-  const onPlanButtonClick = (intentionType: SubscribeIntentionType) => {
-    const perUnitBillableFeatures: BillableFeature[] = Object.keys(perUnitQuantityByFeature).map((featureId) => ({
-      featureId,
-      quantity: perUnitQuantityByFeature[featureId],
-    }));
-
-    return onPlanSelected(intentionType, perUnitBillableFeatures);
-  };
-
-  return (
-    <PlanOfferingContainer
-      className={classNames(`stigg-${plan.id}`, 'stigg-plan-offering-container', {
-        'stigg-current-plan': plan.isCurrentCustomerPlan,
-      })}
-      $isHighlighted={isHighlighted}
-      $isCurrentPlan={plan.isCurrentCustomerPlan}>
-      {planBadge}
-
-      <HeaderWrapper className="stigg-header-wrapper">
-        <PlanHeader className="stigg-plan-header" variant="h3">
-          {plan.displayName}
-        </PlanHeader>
-
-        {shouldShowDescriptionSection && (
-          <PlanDescription className="stigg-plan-description" variant="h6" color="secondary">
-            {plan.description}
-          </PlanDescription>
-        )}
-
-        <PlanPrice
-          showStartingAt={showStartingAt}
-          withUnitPriceRow={withUnitPriceRow}
-          withStartingAtRow={withStartingAtRow}
-          withTiersRow={withTiersRow}
-          plan={plan}
-          billingPeriod={billingPeriod}
-          paywallLocale={paywallLocale}
-          locale={locale}
-          hasAnnuallyPrice={hasAnnuallyPrice}
-          hasMonthlyPrice={hasMonthlyPrice}
-          setPerUnitQuantityByFeature={setPerUnitQuantityByFeature}
-          perUnitQuantityByFeature={perUnitQuantityByFeature}
-        />
-
-        {showCTAButton ? (
-          <PlanOfferingButton
-            isNextPlan={isNextPlan}
-            customer={customer}
-            plan={plan}
-            currentSubscription={currentSubscription}
-            currentSubscriptionOverride={currentSubscriptionOverride}
-            billingPeriod={billingPeriod}
-            isCustomerOnTrial={isCustomerOnTrial}
-            onPlanSelected={onPlanButtonClick}
-            paywallLocale={paywallLocale}
-            withTrialLeftRow={withTrialLeftRow}
-            perUnitQuantityByFeature={perUnitQuantityByFeature}
-          />
-        ) : (
-          <div style={{ height: PlanOfferingButtonHeight }} />
-        )}
-
-        <Divider className="stigg-plan-header-divider" />
-      </HeaderWrapper>
-
-      <PlanEntitlements plan={plan} billingPeriod={billingPeriod} paywallLocale={paywallLocale} />
-
-      <AddonsContainer $planHasEntitlements={plan.entitlements.length > 0} className="stigg-addons-container">
-        {!hideCompatibleAddons && plan.compatibleAddons && plan.compatibleAddons.length > 0 && (
-          <PlanCompatibleAddons addons={plan.compatibleAddons} paywallLocale={paywallLocale} />
-        )}
-      </AddonsContainer>
-    </PlanOfferingContainer>
-  );
-}