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

package/src/components/paywall/PlanCompatibleAddons.tsx

@@ -0,0 +1,127 @@
+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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,256 @@
+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>
+  );
+}

package/src/components/paywall/PlanOfferingButton.tsx

@@ -0,0 +1,232 @@
+import { useState } from 'react';
+import { BillingPeriod, Customer, PricingType, Subscription } from '@stigg/js-client-sdk';
+import { isFunction } from 'lodash';
+import ClipLoader from 'react-spinners/ClipLoader';
+import styled from '@utils/style';
+import { css, useTheme } from '@emotion/react';
+import { CurrentSubscriptionOverride, PaywallPlan, SubscribeIntentionType } from './types';
+import { PaywallLocalization } from './paywallTextOverrides';
+import { flexLayoutMapper } from '../../theme/getResolvedTheme';
+import { Typography } from '../common/Typography';
+import { getSubscriptionScheduleUpdateTexts } from '../utils/getSubscriptionScheduleUpdateTexts';
+import { compareSelectedTierToCurrentTier, PriceTierComparison } from '../utils/priceTierUtils';
+
+const LoadingIndicator = styled(ClipLoader)`
+  margin-left: 10px;
+`;
+
+const OfferingButton = styled.button<{ $disabled?: boolean }>`
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
+  padding: 8px 12px;
+  background-color: ${({ theme }) => theme.stigg.palette.backgroundButton};
+  border: ${({ theme }) => `1px solid ${theme.stigg.palette.outlinedRestingBorder}`};
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  min-width: 120px;
+
+  ${({ $disabled }) =>
+    $disabled &&
+    css`
+      opacity: 0.5;
+    `}
+
+  &:hover {
+    background-color: ${({ theme, $disabled }) =>
+      $disabled ? theme.stigg.palette.backgroundButton : theme.stigg.palette.outlinedHoverBackground};
+  }
+`;
+
+const ButtonText = styled(Typography)`
+  margin: 0;
+  font-size: 15px;
+`;
+
+const ScheduledUpdateText = styled(Typography)`
+  min-height: 87px;
+`;
+
+const CancelScheduledUpdateButton = styled.button<{ $disabled?: boolean }>`
+  background: none;
+  border: none;
+  padding: 0;
+  color: ${({ theme }) => theme.stigg.palette.text.secondary};
+
+  text-decoration: underline;
+  cursor: pointer;
+`;
+
+const TrialDaysLeft = styled(Typography)`
+  margin-top: 8px;
+  margin-bottom: 17px;
+  min-height: 20px;
+`;
+
+const ButtonLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 4px;
+  align-self: ${({ theme }) => flexLayoutMapper(theme.stigg.layout.ctaAlignment)};
+  width: 100%;
+`;
+
+type PlanOfferingButtonProps = {
+  isNextPlan?: boolean;
+  customer: Customer | null;
+  plan: PaywallPlan;
+  currentSubscription: Subscription | null;
+  currentSubscriptionOverride?: CurrentSubscriptionOverride | null;
+  billingPeriod: BillingPeriod;
+  isCustomerOnTrial: boolean;
+  paywallLocale: PaywallLocalization;
+  onPlanSelected: (intentionType: SubscribeIntentionType) => void | Promise<void>;
+  withTrialLeftRow: boolean;
+  perUnitQuantityByFeature: Record<string, number>;
+};
+
+export function PlanOfferingButton({
+  isNextPlan,
+  customer,
+  plan,
+  billingPeriod,
+  isCustomerOnTrial,
+  onPlanSelected,
+  paywallLocale,
+  withTrialLeftRow,
+  currentSubscription,
+  currentSubscriptionOverride,
+  perUnitQuantityByFeature,
+}: PlanOfferingButtonProps) {
+  const theme = useTheme();
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    currentPlan,
+    custom,
+    downgrade,
+    startTrial,
+    upgrade,
+    startNew,
+    switchToBillingPeriod,
+    cancelScheduledUpdate,
+  } = paywallLocale.planCTAButton;
+  const resolvedDowngrade = isFunction(downgrade) ? downgrade(plan) : downgrade;
+  const resolvedUpgrade = isFunction(upgrade) ? upgrade(plan) : upgrade;
+
+  const buttonProps: {
+    title: string;
+    disabled: boolean;
+    intentionType: SubscribeIntentionType;
+  } = {
+    title: customer ? (plan.isLowerThanCurrentPlan ? resolvedDowngrade : resolvedUpgrade) : startNew,
+    disabled: false,
+    intentionType: plan.isLowerThanCurrentPlan
+      ? SubscribeIntentionType.DOWNGRADE_PLAN
+      : isCustomerOnTrial
+      ? SubscribeIntentionType.UPGRADE_TRIAL_TO_PAID
+      : SubscribeIntentionType.UPGRADE_PLAN,
+  };
+  const isCustomPrice = plan.pricingType === PricingType.Custom;
+
+  const { line1: scheduledUpdateText } = getSubscriptionScheduleUpdateTexts({
+    scheduledUpdate: plan.scheduledUpdate,
+    options: { withDate: true },
+  });
+
+  if (plan.isTriable && !plan.isCurrentCustomerPlan && !isCustomerOnTrial) {
+    buttonProps.title = startTrial(plan);
+    buttonProps.intentionType = SubscribeIntentionType.START_TRIAL;
+  } else if (plan.isCurrentCustomerPlan && !isCustomerOnTrial) {
+    const isSameBillingPeriod = billingPeriod === plan.currentCustomerPlanBillingPeriod;
+
+    if (
+      isSameBillingPeriod ||
+      (plan.pricingType && [PricingType.Free, PricingType.Custom].includes(plan.pricingType))
+    ) {
+      const planComparison = compareSelectedTierToCurrentTier({
+        perUnitQuantityByFeature,
+        plan,
+        currentSubscription,
+        currentSubscriptionOverride,
+      });
+      switch (planComparison) {
+        case PriceTierComparison.Lower:
+          buttonProps.intentionType = SubscribeIntentionType.CHANGE_UNIT_QUANTITY;
+          buttonProps.title = resolvedDowngrade;
+          break;
+        case PriceTierComparison.Higher:
+          buttonProps.intentionType = SubscribeIntentionType.CHANGE_UNIT_QUANTITY;
+          buttonProps.title = resolvedUpgrade;
+          break;
+
+        default:
+          buttonProps.title = currentPlan;
+          buttonProps.disabled = true;
+          break;
+      }
+    } else {
+      buttonProps.title = switchToBillingPeriod(billingPeriod);
+      buttonProps.intentionType = SubscribeIntentionType.CHANGE_BILLING_PERIOD;
+    }
+  } else if (isCustomPrice) {
+    buttonProps.title = typeof custom === 'function' ? custom({ plan, selectedBillingPeriod: billingPeriod }) : custom;
+    buttonProps.intentionType = SubscribeIntentionType.REQUEST_CUSTOM_PLAN_ACCESS;
+  }
+
+  if (isNextPlan && plan.scheduledUpdate) {
+    buttonProps.disabled = false;
+    buttonProps.title = cancelScheduledUpdate;
+    buttonProps.intentionType = SubscribeIntentionType.CANCEL_SCHEDULED_UPDATES;
+  }
+
+  const isDisabled = isLoading || buttonProps.disabled;
+  return (
+    <>
+      <ButtonLayout className="stigg-paywall-plan-button-layout">
+        {isNextPlan && scheduledUpdateText ? (
+          <ScheduledUpdateText color="secondary" variant="body1" className="stigg-paywall-schedule-update-text">
+            {scheduledUpdateText}{' '}
+            <CancelScheduledUpdateButton
+              color="secondary"
+              onClick={() => {
+                setIsLoading(true);
+                Promise.resolve(onPlanSelected(buttonProps.intentionType)).finally(() => setIsLoading(false));
+              }}>
+              {buttonProps.title}
+            </CancelScheduledUpdateButton>
+          </ScheduledUpdateText>
+        ) : (
+          <>
+            <OfferingButton
+              className="stigg-paywall-plan-button"
+              data-testid={`paywall-card-cta-${plan.displayName}`}
+              disabled={isDisabled}
+              $disabled={isDisabled}
+              onClick={() => {
+                setIsLoading(true);
+                Promise.resolve(onPlanSelected(buttonProps.intentionType)).finally(() => setIsLoading(false));
+              }}>
+              <ButtonText className="stigg-paywall-plan-button-text" variant="h6" color="primary.main">
+                {buttonProps.title}
+              </ButtonText>
+              {isLoading && <LoadingIndicator color={theme.stigg.palette.text.disabled} loading size={16} />}
+            </OfferingButton>
+
+            {!withTrialLeftRow ? (
+              <div style={{ height: '20px' }} />
+            ) : (
+              <TrialDaysLeft className="stigg-trial-days-left-text" variant="h6" color="secondary">
+                {plan.isCurrentCustomerPlan && plan.trialDaysLeft && (
+                  <>
+                    <b>{plan.trialDaysLeft} days</b> left on your free trial
+                  </>
+                )}
+              </TrialDaysLeft>
+            )}
+          </>
+        )}
+      </ButtonLayout>
+    </>
+  );
+}