@automattic/plans-grid-next 1.0.2 → 1.0.3

package/dist/cjs/lib/get-plan-features-object.js

@@ -1,11 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 // TODO: Temporary until feature definitions are ported to calypso-products package
-const getPlanFeaturesObject = (featuresList, planFeatures) => {
+const getPlanFeaturesObject = (featuresList, planFeatures, isExperimentVariant) => {
     if (!planFeatures) {
         return [];
     }
-    return planFeatures.map((featuresConst) => featuresList[featuresConst]);
+    return planFeatures.map((featuresConst) => {
+        const feature = featuresList[featuresConst];
+        if (!feature || !isExperimentVariant) {
+            return feature;
+        }
+        // Wrap feature methods to pass isExperimentVariant parameter
+        return {
+            ...feature,
+            getTitle: (params) => feature.getTitle({ ...params, isExperimentVariant }),
+            ...(feature.getDescription && {
+                getDescription: (params) => feature.getDescription({ ...params, isExperimentVariant }),
+            }),
+        };
+    });
 };
 exports.default = getPlanFeaturesObject;
 //# sourceMappingURL=get-plan-features-object.js.map

package/dist/cjs/lib/get-plan-features-object.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-plan-features-object.js","sourceRoot":"","sources":["../../../src/lib/get-plan-features-object.ts"],"names":[],"mappings":";;AAEA,mFAAmF;AACnF,MAAM,qBAAqB,GAAG,CAAE,YAAyB,EAAE,YAA8B,EAAG,EAAE;IAC7F,IAAK,CAAE,YAAY,EAAG,CAAC;QACtB,OAAO,EAAE,CAAC;IACX,CAAC;IAED,OAAO,YAAY,CAAC,GAAG,CAAE,CAAE,aAAa,EAAG,EAAE,CAAC,YAAY,CAAE,aAAa,CAAE,CAAE,CAAC;AAC/E,CAAC,CAAC;AAEF,kBAAe,qBAAqB,CAAC"}
+{"version":3,"file":"get-plan-features-object.js","sourceRoot":"","sources":["../../../src/lib/get-plan-features-object.ts"],"names":[],"mappings":";;AAIA,mFAAmF;AACnF,MAAM,qBAAqB,GAAG,CAC7B,YAAyB,EACzB,YAA8B,EAC9B,mBAA6B,EAC5B,EAAE;IACH,IAAK,CAAE,YAAY,EAAG,CAAC;QACtB,OAAO,EAAE,CAAC;IACX,CAAC;IAED,OAAO,YAAY,CAAC,GAAG,CAAE,CAAE,aAAa,EAAG,EAAE;QAC5C,MAAM,OAAO,GAAG,YAAY,CAAE,aAAa,CAAE,CAAC;QAC9C,IAAK,CAAE,OAAO,IAAI,CAAE,mBAAmB,EAAG,CAAC;YAC1C,OAAO,OAAO,CAAC;QAChB,CAAC;QACD,6DAA6D;QAC7D,OAAO;YACN,GAAG,OAAO;YACV,QAAQ,EAAE,CAAE,MAA4B,EAAG,EAAE,CAC5C,OAAO,CAAC,QAAQ,CAAE,EAAE,GAAG,MAAM,EAAE,mBAAmB,EAAE,CAAE;YACvD,GAAG,CAAE,OAAO,CAAC,cAAc,IAAI;gBAC9B,cAAc,EAAE,CAAE,MAA4B,EAAG,EAAE,CAClD,OAAO,CAAC,cAAe,CAAE,EAAE,GAAG,MAAM,EAAE,mBAAmB,EAAE,CAAE;aAC9D,CAAE;SACH,CAAC;IACH,CAAC,CAAE,CAAC;AACL,CAAC,CAAC;AAEF,kBAAe,qBAAqB,CAAC"}

package/dist/cjs/lib/plan-pricing-utils.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPlanPriceForDuration = getPlanPriceForDuration;
+exports.calculateDiscountPercentage = calculateDiscountPercentage;
+exports.fromPricingMetaForGridPlan = fromPricingMetaForGridPlan;
+exports.fromVariantPriceData = fromVariantPriceData;
+// billingPeriod values are in days (from PERIOD_LIST in calypso-products)
+const BILLING_PERIOD_DAYS_TO_MONTHS = {
+    31: 1,
+    365: 12,
+    730: 24,
+    1095: 36,
+};
+function billingPeriodDaysToMonths(billingPeriod) {
+    if (billingPeriod === undefined || billingPeriod === null) {
+        return null;
+    }
+    return BILLING_PERIOD_DAYS_TO_MONTHS[billingPeriod] ?? null;
+}
+/**
+ * Calculates the total cost of a plan over `durationMonths` months.
+ *
+ * Handles partial billing periods via pro-ration (e.g. a yearly plan priced at
+ * $200/year costs $100 for 6 months).
+ *
+ * When `useIntroOffer` is true (default) and an active intro offer exists, the
+ * intro price is applied for the first `introOffer.durationMonths` months, and
+ * the regular (or discounted) price for the remainder.
+ *
+ * @example
+ * // Monthly plan: $10 intro for 1 month, then $20/month; cost for 6 months:
+ * // 1×$10 + 5×$20 = $110 (in cents: 1100 + 10000 = 11000)
+ * getPlanPriceForDuration( info, 6, { useIntroOffer: true } ) // 11000
+ *
+ * @example
+ * // Yearly plan: $100/yr intro, $200/yr regular; cost for 6 months:
+ * // useIntroOffer=true  → 6×($100/12) = $50   (5000 cents)
+ * // useIntroOffer=false → 6×($200/12) = $100  (10000 cents)
+ */
+function getPlanPriceForDuration(info, durationMonths, { useIntroOffer = true } = {}) {
+    const basePricePerMonth = info.discountedPricePerMonth ?? info.regularPricePerMonth;
+    if (useIntroOffer && info.introOffer?.isActive) {
+        const introMonths = Math.min(durationMonths, info.introOffer.durationMonths);
+        const regularMonths = Math.max(0, durationMonths - info.introOffer.durationMonths);
+        return introMonths * info.introOffer.pricePerMonth + regularMonths * basePricePerMonth;
+    }
+    return durationMonths * basePricePerMonth;
+}
+/**
+ * Calculates the percentage discount between a reference price and a cheaper price.
+ *
+ * Always uses Math.floor — conservative, never overstates savings.
+ *
+ * Returns `undefined` (not 0) when there is no saving, allowing callers to
+ * distinguish "no discount" from a computed "0% discount".
+ */
+function calculateDiscountPercentage(referencePrice, cheaperPrice) {
+    if (cheaperPrice >= referencePrice || referencePrice <= 0) {
+        return undefined;
+    }
+    return Math.floor((100 * (referencePrice - cheaperPrice)) / referencePrice);
+}
+/**
+ * Converts a `PricingMetaForGridPlan` (from @automattic/data-stores Plans hooks)
+ * into a `PlanPriceInfo` suitable for use with `getPlanPriceForDuration` and
+ * `calculateDiscountPercentage`.
+ *
+ * Returns null when required pricing data is absent (e.g. free/enterprise plans
+ * that have no monthly price, or plans whose billing period is unknown).
+ */
+function fromPricingMetaForGridPlan(meta) {
+    const termMonths = billingPeriodDaysToMonths(meta.billingPeriod);
+    if (termMonths === null || meta.originalPrice.monthly === null) {
+        return null;
+    }
+    const isIntroActive = !!meta.introOffer && !meta.introOffer.isOfferComplete;
+    return {
+        termMonths,
+        regularPricePerMonth: meta.originalPrice.monthly,
+        // The API sometimes sets discountedPrice.monthly to the intro offer price rather than
+        // a genuine site-level discount (e.g. currency conversion, proration credit). When an
+        // intro offer is active the intro structure already captures the discounted period, so
+        // using discountedPrice here would contaminate the post-intro "regular" rate used by
+        // getPlanPriceForDuration — producing incorrect totals for the non-intro months.
+        discountedPricePerMonth: isIntroActive ? undefined : meta.discountedPrice.monthly ?? undefined,
+        introOffer: meta.introOffer
+            ? {
+                pricePerMonth: meta.introOffer.rawPrice.monthly,
+                durationMonths: meta.introOffer.intervalCount * (meta.introOffer.intervalUnit === 'year' ? 12 : 1),
+                isActive: isIntroActive,
+            }
+            : undefined,
+    };
+}
+/**
+ * Converts a variant price data object (structurally compatible with
+ * `WPCOMProductVariant`) into a `PlanPriceInfo`.
+ *
+ * `discountedPricePerMonth` is intentionally not set: `WPCOMProductVariant`
+ * does not separate site-level discounts from the intro price. Coupon discounts
+ * in checkout are tracked separately via `product.coupon_savings_integer`.
+ *
+ * Per-month values are derived by dividing full-term prices (integers in the
+ * smallest currency unit) by the number of months. The result is rounded to the
+ * nearest integer (Math.round) so that all fields in the returned `PlanPriceInfo`
+ * remain whole-cent values safe for use with currency formatters. The rounding
+ * error is at most 0.5¢ per month and is negligible for percentage comparisons.
+ */
+function fromVariantPriceData(variant) {
+    const { termIntervalInMonths: termMonths, priceBeforeDiscounts, priceInteger, introductoryInterval, introductoryTerm, } = variant;
+    const regularPricePerMonth = Math.round(priceBeforeDiscounts / termMonths);
+    const introDurationMonths = introductoryInterval > 0 ? introductoryInterval * (introductoryTerm === 'year' ? 12 : 1) : 0;
+    let introOffer;
+    if (introDurationMonths > 0 && priceInteger < priceBeforeDiscounts) {
+        // When the intro spans the full term (introDurationMonths >= termMonths), all of
+        // priceInteger is at the intro rate and there are zero non-intro months.
+        // When the intro is shorter than the term (introDurationMonths < termMonths), we
+        // subtract the non-intro portion (billed at the regular rate) to isolate the intro cost.
+        const nonIntroMonths = Math.max(0, termMonths - introDurationMonths);
+        const introPriceTotal = priceInteger - nonIntroMonths * regularPricePerMonth;
+        // A non-positive introPriceTotal means inconsistent data (e.g. a sub-term intro
+        // with a priceInteger that is less than the non-intro months at the regular rate).
+        if (introPriceTotal > 0) {
+            // When introDurationMonths > termMonths the whole billing term is within the
+            // intro period, so we spread introPriceTotal over termMonths (not introDurationMonths).
+            introOffer = {
+                pricePerMonth: Math.round(introPriceTotal / Math.min(introDurationMonths, termMonths)),
+                durationMonths: introDurationMonths,
+                isActive: true,
+            };
+        }
+    }
+    return { termMonths, regularPricePerMonth, introOffer };
+}
+//# sourceMappingURL=plan-pricing-utils.js.map

package/dist/cjs/lib/plan-pricing-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plan-pricing-utils.js","sourceRoot":"","sources":["../../../src/lib/plan-pricing-utils.ts"],"names":[],"mappings":"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"}

package/dist/esm/_shared.scss

@@ -47,10 +47,11 @@ $mobile-card-max-width: 440px;
 }
 
 .plans-grid-next-storage-dropdown__option {
-	display: inline-block;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
 	line-height: 20px;
 	min-height: 30px;
-	padding-top: 5px;
 	font-size: 0.75rem;
 	text-align: start;
 }
@@ -130,7 +131,7 @@ $storage-feature-label-y-padding: 4px;
 		font-size: 0.75rem;
 
 		/**************
-	     * 1. General *
+		 * 1. General *
 		 **************/
 
 		.components-custom-select-control__label {

package/dist/esm/components/comparison-grid/index.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { getPlanClass, FEATURE_GROUP_ESSENTIAL_FEATURES, FEATURE_GROUP_PAYMENT_TRANSACTION_FEES, getPlans, } from '@automattic/calypso-products';
+import { getPlanClass, FEATURE_GROUP_ESSENTIAL_FEATURES, FEATURE_GROUP_PAYMENT_TRANSACTION_FEES, getPlans, FEATURE_AI_WRITER_DESIGNER, FEATURE_AI_WRITER_DESIGNER_LIMITED, FEATURE_REALTIME_BACKUPS_JP, } from '@automattic/calypso-products';
 import { Gridicon, JetpackLogo } from '@automattic/components';
-import { Plans } from '@automattic/data-stores';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRef, useMemo } from '@wordpress/element';
@@ -12,10 +11,10 @@ import { useState, useCallback, useEffect, forwardRef, } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { plansGridMediumLarge } from '../../css-mixins';
 import PlansGridContextProvider, { usePlansGridContext } from '../../grid-context';
-import usePlanBillingPeriod from '../../hooks/data-store/use-plan-billing-period';
 import useGridSize from '../../hooks/use-grid-size';
 import useHighlightAdjacencyMatrix from '../../hooks/use-highlight-adjacency-matrix';
 import { useManageTooltipToggle } from '../../hooks/use-manage-tooltip-toggle';
+import { useVisibleGridPlans } from '../../hooks/use-visible-grid-plans';
 import filterUnusedFeaturesObject from '../../lib/filter-unused-features-object';
 import getPlanFeaturesObject from '../../lib/get-plan-features-object';
 import PlanTypeSelector from '../plan-type-selector';
@@ -28,14 +27,29 @@ import HeaderPriceContextProvider from '../shared/header-price/header-price-cont
 import { PlanStorage } from '../shared/storage';
 import { StickyContainer } from '../sticky-container';
 import './style.scss';
+// Plans Differentiators Experiment: treat feature variants (e.g., _LIMITED) as the same row
+const FEATURE_ALIASES = {
+    [FEATURE_AI_WRITER_DESIGNER]: [FEATURE_AI_WRITER_DESIGNER_LIMITED],
+};
+// Finds a matching feature, checking both the base slug and any aliases
+const findFeatureWithAlias = (featureSlug, planFeatures) => {
+    if (!featureSlug) {
+        return undefined;
+    }
+    const slugsToCheck = [featureSlug, ...(FEATURE_ALIASES[featureSlug] ?? [])];
+    return planFeatures.find((f) => slugsToCheck.includes(f.getSlug()));
+};
 const featureGroupRowTitleCellMaxWidth = 450;
 const rowCellMaxWidth = 290;
 const JetpackIconContainer = styled.div `
-	padding-inline-start: 6px;
+	padding-inline-start: 3px;
 	display: inline-block;
 	vertical-align: middle;
 	line-height: 1;
 `;
+const TitlePreventOrphans = styled.span `
+	white-space: nowrap;
+`;
 const Title = styled.div `
 	font-weight: 500;
 	font-size: 20px;
@@ -64,11 +78,10 @@ const Title = styled.div `
 		}
 	`)}
 `;
-const Grid = styled.div `
+const StickyGrid = styled(StickyContainer) `
 	display: grid;
 	margin: 0 auto;
 	background: #fff;
-	border: solid 1px #e0e0e0;
 	${(props) => props.visiblePlans &&
     css `
 			max-width: ${rowCellMaxWidth * props.visiblePlans + featureGroupRowTitleCellMaxWidth}px;
@@ -77,11 +90,19 @@ const Grid = styled.div `
 	${plansGridMediumLarge(css `
 		border-radius: 5px;
 	`)}
+`;
+const Grid = styled.div `
+	display: ${(props) => (props.as === 'tbody' ? 'table-row-group' : 'grid')};
+	margin: 0 auto;
+	background: #fff;
+	${(props) => props.visiblePlans &&
+    css `
+			max-width: ${rowCellMaxWidth * props.visiblePlans + featureGroupRowTitleCellMaxWidth}px;
+		`}
 
-	> .is-sticky-header-row {
-		border-bottom: solid 1px #e0e0e0;
-		background: #fff;
-	}
+	${plansGridMediumLarge(css `
+		border-radius: 5px;
+	`)}
 `;
 const Row = styled.div `
 	justify-content: space-between;
@@ -176,7 +197,7 @@ const Cell = styled.div `
 		border-right: none;
 		justify-content: center;
 
-		&:first-of-type {
+		&:first-of-type:not( .popular-plan-parent-class ) {
 			padding-inline-start: 0;
 		}
 		&:last-of-type {
@@ -189,7 +210,23 @@ const Cell = styled.div `
 		}
 	`)}
 `;
-const RowTitleCell = styled.div `
+const RowTitleCell = styled.td `
+	display: none;
+	font-size: 14px;
+	padding-right: 10px;
+	${plansGridMediumLarge(css `
+		display: block;
+		flex: 1;
+		min-width: 290px;
+	`)}
+	max-width: ${(props) => {
+    if (props.isPlaceholderHeaderCell || props.isFeatureGroupRowTitleCell) {
+        return `${featureGroupRowTitleCellMaxWidth}px`;
+    }
+    return `${rowCellMaxWidth}px`;
+}};
+`;
+const RowHeaderCell = styled.th `
 	display: none;
 	font-size: 14px;
 	padding-right: 10px;
@@ -272,7 +309,7 @@ const FeatureFootnote = styled.span `
 	}
 `;
 const ComparisonGridHeaderCell = ({ planSlug, allVisible, isLastInRow, isFooter, isInSignup, visibleGridPlans, onPlanChange, displayedGridPlans, currentSitePlanSlug, planActionOverrides, showRefundPeriod, isStuck, }) => {
-    const { gridPlansIndex } = usePlansGridContext();
+    const { gridPlansIndex, showBillingDescriptionForIncreasedRenewalPrice } = usePlansGridContext();
     const gridPlan = gridPlansIndex[planSlug];
     const highlightAdjacencyMatrix = useHighlightAdjacencyMatrix({
         renderedGridPlans: visibleGridPlans,
@@ -295,13 +332,13 @@ const ComparisonGridHeaderCell = ({ planSlug, allVisible, isLastInRow, isFooter,
         'popular-badge-is-stuck': isStuck,
     });
     const showPlanSelect = !allVisible && !gridPlan.current;
-    return (_jsxs(Cell, { className: headerClasses, textAlign: "start", children: [_jsx(PopularBadge, { isInSignup: isInSignup, planSlug: planSlug, additionalClassName: popularBadgeClasses }), _jsxs(PlanSelector, { children: [_jsxs("h4", { className: clsx('plan-comparison-grid__title', showPlanSelect && 'is-select-trigger'), children: [_jsx("span", { className: "plan-comparison-grid__title-label", children: gridPlan.planTitle }), showPlanSelect && (_jsx("span", { className: "plan-comparison-grid__title-icon", children: _jsx(Icon, { icon: chevronRightSmall, size: 30 }) }))] }), showPlanSelect && (_jsx("select", { onChange: (event) => onPlanChange(planSlug, event), className: "plan-comparison-grid__title-select", value: planSlug, children: displayedGridPlans.map(({ planSlug: otherPlan, planTitle }) => {
+    return (_jsxs(Cell, { as: "th", className: headerClasses, textAlign: "start", scope: 'col', "aria-label": gridPlan.planTitle, children: [_jsx(PopularBadge, { isInSignup: isInSignup, planSlug: planSlug, additionalClassName: popularBadgeClasses }), _jsxs(PlanSelector, { children: [_jsxs("h4", { className: clsx('plan-comparison-grid__title', showPlanSelect && 'is-select-trigger'), children: [_jsx("span", { className: "plan-comparison-grid__title-label", children: gridPlan.planTitle }), showPlanSelect && (_jsx("span", { className: "plan-comparison-grid__title-icon", children: _jsx(Icon, { icon: chevronRightSmall, size: 30 }) }))] }), showPlanSelect && (_jsx("select", { onChange: (event) => onPlanChange(planSlug, event), className: "plan-comparison-grid__title-select", value: planSlug, children: displayedGridPlans.map(({ planSlug: otherPlan, planTitle }) => {
                             const isVisiblePlan = visibleGridPlans.find(({ planSlug }) => planSlug === otherPlan);
                             if (isVisiblePlan && otherPlan !== planSlug) {
                                 return null;
                             }
                             return (_jsx("option", { value: otherPlan, children: planTitle }, otherPlan));
-                        }) }))] }), _jsx(HeaderPrice, { planSlug: planSlug, currentSitePlanSlug: currentSitePlanSlug, visibleGridPlans: visibleGridPlans }), _jsx("div", { className: "plan-comparison-grid__billing-info", children: _jsx(BillingTimeframe, { planSlug: planSlug, showRefundPeriod: showRefundPeriod }) }), _jsx(ActionButton, { currentSitePlanSlug: currentSitePlanSlug, availableForPurchase: gridPlan.availableForPurchase, isInSignup: isInSignup, planSlug: planSlug, planActionOverrides: planActionOverrides, showMonthlyPrice: false, isStuck: false, visibleGridPlans: visibleGridPlans })] }));
+                        }) }))] }), _jsx(HeaderPrice, { planSlug: planSlug, currentSitePlanSlug: currentSitePlanSlug, visibleGridPlans: visibleGridPlans }), _jsx("div", { className: "plan-comparison-grid__billing-info", children: _jsx(BillingTimeframe, { planSlug: planSlug, showRefundPeriod: showRefundPeriod }) }), _jsx(ActionButton, { currentSitePlanSlug: currentSitePlanSlug, availableForPurchase: gridPlan.availableForPurchase, isInSignup: isInSignup, planSlug: planSlug, planActionOverrides: planActionOverrides, showMonthlyPrice: false, isStuck: false, visibleGridPlans: visibleGridPlans, showPostButtonText: showBillingDescriptionForIncreasedRenewalPrice ? false : true })] }));
 };
 const PlanTypeSelectorWrapper = styled.div `
 	display: none;
@@ -313,8 +350,9 @@ const ComparisonGridHeader = forwardRef(({ displayedGridPlans, visibleGridPlans,
     const translate = useTranslate();
     const allVisible = visibleGridPlans.length === displayedGridPlans.length;
     const { coupon } = usePlansGridContext();
-    return (_jsxs(PlanRow, { isHiddenInMobile: isHiddenInMobile, ref: ref, children: [_jsx(RowTitleCell, { className: "plan-comparison-grid__header-cell is-placeholder-header-cell", isPlaceholderHeaderCell: true, children: isStuck && planTypeSelectorProps && (_jsx(PlanTypeSelectorWrapper, { children: _jsx(PlanTypeSelector, { ...planTypeSelectorProps, title: translate('Billing Cycle'), hideDiscount: true, coupon: coupon }) })) }, "feature-name"), _jsx(HeaderPriceContextProvider, { children: visibleGridPlans.map(({ planSlug }, index) => (_jsx(ComparisonGridHeaderCell, { planSlug: planSlug, isLastInRow: index === visibleGridPlans.length - 1, isFooter: isFooter, allVisible: allVisible, isInSignup: isInSignup, visibleGridPlans: visibleGridPlans, onPlanChange: onPlanChange, displayedGridPlans: displayedGridPlans, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides, selectedPlan: selectedPlan, showRefundPeriod: showRefundPeriod, isStuck: isStuck }, planSlug))) })] }));
+    return (_jsxs(PlanRow, { as: "tr", isHiddenInMobile: isHiddenInMobile, ref: ref, children: [_jsx(RowTitleCell, { className: "plan-comparison-grid__header-cell is-placeholder-header-cell", isPlaceholderHeaderCell: true, children: isStuck && planTypeSelectorProps && (_jsx(PlanTypeSelectorWrapper, { children: _jsx(PlanTypeSelector, { ...planTypeSelectorProps, title: translate('Billing Cycle'), hideDiscount: true, coupon: coupon }) })) }, "feature-name"), _jsx(HeaderPriceContextProvider, { children: visibleGridPlans.map(({ planSlug }, index) => (_jsx(ComparisonGridHeaderCell, { planSlug: planSlug, isLastInRow: index === visibleGridPlans.length - 1, isFooter: isFooter, allVisible: allVisible, isInSignup: isInSignup, visibleGridPlans: visibleGridPlans, onPlanChange: onPlanChange, displayedGridPlans: displayedGridPlans, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides, selectedPlan: selectedPlan, showRefundPeriod: showRefundPeriod, isStuck: isStuck }, planSlug))) })] }));
 });
+ComparisonGridHeader.displayName = 'ComparisonGridHeader';
 const ComparisonGridFeatureGroupRowCell = ({ feature, visibleGridPlans, planSlug, isStorageFeature, intervalType, activeTooltipId, setActiveTooltipId, showUpgradeableStorage, onStorageAddOnClick, }) => {
     const { gridPlansIndex, enableFeatureTooltips, hideUnsupportedFeatures } = usePlansGridContext();
     const gridPlan = gridPlansIndex[planSlug];
@@ -326,14 +364,18 @@ const ComparisonGridFeatureGroupRowCell = ({ feature, visibleGridPlans, planSlug
         return null;
     }
     const featureSlug = feature?.getSlug();
-    const hasFeature = isStorageFeature ||
-        (featureSlug
-            ? [...gridPlan.features.wpcomFeatures, ...gridPlan.features.jetpackFeatures]
-                .filter((feature) => 'monthly' === intervalType ? !feature.availableOnlyForAnnualPlans : true)
-                .some((feature) => feature.getSlug() === featureSlug)
-            : false);
-    const featureLabel = featureSlug
-        ? gridPlan?.features?.comparisonGridFeatureLabels?.[featureSlug]
+    const comparisonGridTitle = featureSlug === FEATURE_REALTIME_BACKUPS_JP
+        ? translate('Real-time backups', { textOnly: true })
+        : feature?.getAlternativeTitle?.() || feature?.getTitle();
+    const planFeatures = [
+        ...gridPlan.features.wpcomFeatures,
+        ...gridPlan.features.jetpackFeatures,
+    ].filter((feature) => 'monthly' === intervalType ? !feature.availableOnlyForAnnualPlans : true);
+    const matchingFeature = findFeatureWithAlias(featureSlug, planFeatures);
+    const hasFeature = isStorageFeature || !!matchingFeature;
+    const featureLabelSlug = matchingFeature?.getSlug() ?? featureSlug;
+    const featureLabel = featureLabelSlug
+        ? gridPlan?.features?.comparisonGridFeatureLabels?.[featureLabelSlug]
         : undefined;
     const cellClasses = clsx('plan-comparison-grid__feature-group-row-cell', 'plan-comparison-grid__plan', getPlanClass(planSlug), {
         'popular-plan-parent-class': gridPlan.highlightLabel,
@@ -346,29 +388,34 @@ const ComparisonGridFeatureGroupRowCell = ({ feature, visibleGridPlans, planSlug
         'is-only-highlight': highlightAdjacencyMatrix[planSlug]?.isOnlyHighlight,
     });
     const planPaymentTransactionFees = gridPlan.features.wpcomFeatures?.find((feature) => feature?.getFeatureGroup?.() === FEATURE_GROUP_PAYMENT_TRANSACTION_FEES);
-    return (_jsx(Cell, { className: cellClasses, textAlign: "center", children: isStorageFeature ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "plan-comparison-grid__plan-title", children: translate('Storage') }), _jsx(PlanStorage, { planSlug: planSlug, onStorageAddOnClick: onStorageAddOnClick, showUpgradeableStorage: showUpgradeableStorage })] })) : (_jsx(_Fragment, { children: FEATURE_GROUP_PAYMENT_TRANSACTION_FEES === featureSlug ? (_jsx(_Fragment, { children: planPaymentTransactionFees ? (_jsxs(_Fragment, { children: [_jsx(Plans2023Tooltip, { text: enableFeatureTooltips ? feature?.getDescription?.() : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: `${planSlug}-${featureSlug}`, children: _jsx("span", { className: "plan-comparison-grid__plan-title", children: feature?.getAlternativeTitle?.() || feature?.getTitle() }) }), _jsx("span", { className: "plan-comparison-grid__plan-conditional-title", children: planPaymentTransactionFees?.getAlternativeTitle?.() })] })) : (_jsx(Gridicon, { icon: "minus-small", color: "#C3C4C7" })) })) : (_jsxs(_Fragment, { children: [feature?.getIcon && (_jsx("span", { className: "plan-comparison-grid__plan-image", children: feature.getIcon() })), _jsx(Plans2023Tooltip, { text: enableFeatureTooltips ? feature?.getDescription?.() : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: `${planSlug}-${featureSlug}`, children: _jsx("span", { className: "plan-comparison-grid__plan-title", children: feature?.getAlternativeTitle?.() || feature?.getTitle() }) }), feature?.getCompareTitle && (_jsx("span", { className: "plan-comparison-grid__plan-subtitle", children: feature.getCompareTitle() })), featureLabel && (_jsx("span", { className: "plan-comparison-grid__plan-conditional-title", children: featureLabel })), hasFeature && feature?.getCompareSubtitle && (_jsx("span", { className: "plan-comparison-grid__plan-subtitle", children: feature.getCompareSubtitle() })), hasFeature && !featureLabel && (_jsx(Gridicon, { icon: "checkmark", color: "var(--studio-wordpress-blue-50)" })), !hasFeature && !featureLabel && _jsx(Gridicon, { icon: "minus-small", color: "#C3C4C7" })] })) })) }));
+    return (_jsx(Cell, { as: "td", className: cellClasses, textAlign: "center", children: isStorageFeature ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "plan-comparison-grid__plan-title", children: translate('Storage') }), _jsx(PlanStorage, { planSlug: planSlug, onStorageAddOnClick: onStorageAddOnClick, showUpgradeableStorage: showUpgradeableStorage })] })) : (_jsx(_Fragment, { children: FEATURE_GROUP_PAYMENT_TRANSACTION_FEES === featureSlug ? (_jsx(_Fragment, { children: planPaymentTransactionFees ? (_jsxs(_Fragment, { children: [_jsx(Plans2023Tooltip, { text: enableFeatureTooltips ? feature?.getDescription?.() : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: `${planSlug}-${featureSlug}`, children: _jsx("span", { className: "plan-comparison-grid__plan-title", children: comparisonGridTitle }) }), _jsx("span", { className: "plan-comparison-grid__plan-conditional-title", children: planPaymentTransactionFees?.getAlternativeTitle?.() })] })) : (_jsx(Gridicon, { icon: "minus-small", color: "#C3C4C7" })) })) : (_jsxs(_Fragment, { children: [feature?.getIcon && (_jsx("span", { className: "plan-comparison-grid__plan-image", children: feature.getIcon() })), _jsx(Plans2023Tooltip, { text: enableFeatureTooltips ? feature?.getDescription?.() : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: `${planSlug}-${featureSlug}`, children: _jsx("span", { className: "plan-comparison-grid__plan-title", children: comparisonGridTitle }) }), feature?.getCompareTitle && (_jsx("span", { className: "plan-comparison-grid__plan-subtitle", children: feature.getCompareTitle() })), featureLabel && (_jsx("span", { className: "plan-comparison-grid__plan-conditional-title", children: featureLabel })), hasFeature && feature?.getCompareSubtitle && (_jsx("span", { className: "plan-comparison-grid__plan-subtitle", children: feature.getCompareSubtitle() })), hasFeature && !featureLabel && (_jsx(Gridicon, { icon: "checkmark", color: "var(--studio-wordpress-blue-50)", "aria-label": translate('Feature available') })), !hasFeature && !featureLabel && (_jsx(Gridicon, { icon: "minus-small", color: "#C3C4C7", "aria-label": translate('Feature not available') }))] })) })) }));
 };
-const ComparisonGridFeatureGroupRow = ({ feature, isHiddenInMobile, allJetpackFeatures, visibleGridPlans, planFeatureFootnotes, isStorageFeature, isHighlighted, intervalType, activeTooltipId, setActiveTooltipId, showUpgradeableStorage, onStorageAddOnClick, }) => {
+const ComparisonGridFeatureGroupRow = ({ feature, featureGroupSlug, isHiddenInMobile, allJetpackFeatures, visibleGridPlans, planFeatureFootnotes, isStorageFeature, isHighlighted, intervalType, activeTooltipId, setActiveTooltipId, showUpgradeableStorage, onStorageAddOnClick, }) => {
     const translate = useTranslate();
     const rowClasses = clsx('plan-comparison-grid__feature-group-row', {
         'is-storage-feature': isStorageFeature,
     });
     const featureSlug = feature?.getSlug() ?? '';
     const footnote = planFeatureFootnotes?.footnotesByFeature?.[featureSlug];
-    const tooltipId = `${feature?.getSlug()}-comparison-grid`;
+    const tooltipId = `${featureGroupSlug}-${feature?.getSlug()}-comparison-grid`;
+    const title = featureSlug === FEATURE_REALTIME_BACKUPS_JP
+        ? // Always display the short title for backups in comparison grid.
+            translate('Real-time backups', { textOnly: true })
+        : feature?.getTitle?.();
+    const headerAriaLabel = typeof title === 'string' ? title : '';
     const { enableFeatureTooltips } = usePlansGridContext();
-    return (_jsxs(Row, { isHiddenInMobile: isHiddenInMobile, className: rowClasses, isHighlighted: isHighlighted, children: [_jsx(RowTitleCell, { className: "is-feature-group-row-title-cell", isFeatureGroupRowTitleCell: true, children: isStorageFeature ? (_jsx(Plans2023Tooltip, { text: enableFeatureTooltips
+    return (_jsxs(Row, { as: "tr", isHiddenInMobile: isHiddenInMobile, className: rowClasses, isHighlighted: isHighlighted, children: [_jsx(RowHeaderCell, { className: "is-feature-group-row-title-cell", isFeatureGroupRowTitleCell: true, scope: "row", "aria-label": headerAriaLabel, children: isStorageFeature ? (_jsx(Plans2023Tooltip, { text: enableFeatureTooltips
                         ? translate('Space to store your photos, media, and more.')
-                        : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: tooltipId, children: translate('Storage') })) : (_jsx(_Fragment, { children: feature && (_jsxs(_Fragment, { children: [_jsxs(Plans2023Tooltip, { text: enableFeatureTooltips ? feature.getDescription?.() : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: tooltipId, children: [feature.getTitle(), footnote && (_jsx(FeatureFootnote, { children: _jsx("sup", { children: footnote }) }))] }), allJetpackFeatures.has(feature.getSlug()) ? (_jsx(JetpackIconContainer, { children: _jsx(Plans2023Tooltip, { text: translate('Security, performance, and growth tools—powered by Jetpack.'), setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: `jp-${tooltipId}`, children: _jsx(JetpackLogo, { size: 16 }) }) })) : null] })) })) }, "feature-name"), visibleGridPlans.map(({ planSlug }) => (_jsx(ComparisonGridFeatureGroupRowCell, { feature: feature, allJetpackFeatures: allJetpackFeatures, visibleGridPlans: visibleGridPlans, planSlug: planSlug, isStorageFeature: isStorageFeature, intervalType: intervalType, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, showUpgradeableStorage: showUpgradeableStorage, onStorageAddOnClick: onStorageAddOnClick }, planSlug)))] }));
+                        : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: tooltipId, children: translate('Storage') })) : (_jsx(_Fragment, { children: feature && (_jsx(_Fragment, { children: _jsx(Plans2023Tooltip, { text: enableFeatureTooltips ? feature.getDescription?.() : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: tooltipId, children: typeof title === 'string' ? (_jsxs(_Fragment, { children: [title.split(' ').slice(0, -1).join(' '), title.includes(' ') ? ' ' : null, _jsxs(TitlePreventOrphans, { children: [title.split(' ').slice(-1), footnote && (_jsx(FeatureFootnote, { children: _jsx("sup", { children: footnote }) })), allJetpackFeatures.has(feature.getSlug()) ? (_jsxs(_Fragment, { children: ['\u00A0', _jsx(JetpackIconContainer, { children: _jsx(Plans2023Tooltip, { text: translate('Security, performance, and growth tools—powered by Jetpack.'), setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: `jp-${tooltipId}`, children: _jsx(JetpackLogo, { size: 16 }) }) })] })) : null] })] })) : (_jsxs(_Fragment, { children: [feature.getTitle(), footnote && (_jsx(FeatureFootnote, { children: _jsx("sup", { children: footnote }) }))] })) }) })) })) }, "feature-name"), visibleGridPlans.map(({ planSlug }) => (_jsx(ComparisonGridFeatureGroupRowCell, { feature: feature, allJetpackFeatures: allJetpackFeatures, visibleGridPlans: visibleGridPlans, planSlug: planSlug, isStorageFeature: isStorageFeature, intervalType: intervalType, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, showUpgradeableStorage: showUpgradeableStorage, onStorageAddOnClick: onStorageAddOnClick }, planSlug)))] }));
 };
-const FeatureGroup = ({ featureGroup, selectedFeature, intervalType, activeTooltipId, setActiveTooltipId, showUpgradeableStorage, onStorageAddOnClick, featureGroupMap, visibleGridPlans, planFeatureFootnotes, }) => {
-    const { allFeaturesList } = usePlansGridContext();
+const FeatureGroup = ({ featureGroup, selectedFeature, intervalType, activeTooltipId, setActiveTooltipId, showUpgradeableStorage, onStorageAddOnClick, featureGroupMap, visibleGridPlans, planFeatureFootnotes, plansLength, }) => {
+    const { allFeaturesList, isExperimentVariant } = usePlansGridContext();
     const [firstSetOfFeatures] = Object.keys(featureGroupMap);
     const [visibleFeatureGroups, setVisibleFeatureGroups] = useState([
         firstSetOfFeatures,
     ]);
     const features = featureGroup.getFeatures();
-    const featureObjects = filterUnusedFeaturesObject(visibleGridPlans, getPlanFeaturesObject(allFeaturesList, features));
+    const featureObjects = filterUnusedFeaturesObject(visibleGridPlans, getPlanFeaturesObject(allFeaturesList, features, isExperimentVariant));
     const isHiddenInMobile = !visibleFeatureGroups.includes(featureGroup.slug);
     const allJetpackFeatures = useMemo(() => {
         const allPlans = getPlans();
@@ -399,67 +446,20 @@ const FeatureGroup = ({ featureGroup, selectedFeature, intervalType, activeToolt
     if (featureGroup.slug !== FEATURE_GROUP_ESSENTIAL_FEATURES && !featureObjects.length) {
         return null;
     }
-    return (_jsxs("div", { className: "plan-comparison-grid__feature-group", children: [_jsx(TitleRow, { className: "plan-comparison-grid__feature-group-title-row", onClick: handleFeatureGroupToggle, children: _jsxs(Title, { isHiddenInMobile: isHiddenInMobile, children: [_jsx(Gridicon, { icon: "chevron-up", size: 12, color: "#1E1E1E" }), _jsx("span", { children: featureGroup.getTitle() })] }) }), featureObjects.map((feature) => (_jsx(ComparisonGridFeatureGroupRow, { feature: feature, isHiddenInMobile: isHiddenInMobile, allJetpackFeatures: allJetpackFeatures, visibleGridPlans: visibleGridPlans, planFeatureFootnotes: planFeatureFootnotes, isStorageFeature: false, isHighlighted: feature.getSlug() === selectedFeature, intervalType: intervalType, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, showUpgradeableStorage: showUpgradeableStorage, onStorageAddOnClick: onStorageAddOnClick }, feature.getSlug()))), featureGroup.slug === FEATURE_GROUP_ESSENTIAL_FEATURES ? (_jsx(ComparisonGridFeatureGroupRow, { isHiddenInMobile: isHiddenInMobile, allJetpackFeatures: allJetpackFeatures, visibleGridPlans: visibleGridPlans, planFeatureFootnotes: planFeatureFootnotes, isStorageFeature: true, isHighlighted: false, intervalType: intervalType, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, showUpgradeableStorage: showUpgradeableStorage, onStorageAddOnClick: onStorageAddOnClick }, "feature-storage")) : null] }, featureGroup.slug));
+    return (_jsxs(Grid, { as: "tbody", visiblePlans: plansLength, className: "plan-comparison-grid__feature-group", children: [_jsx(TitleRow, { as: "tr", className: "plan-comparison-grid__feature-group-title-row", onClick: handleFeatureGroupToggle, children: _jsxs(Title, { as: "td", isHiddenInMobile: isHiddenInMobile, children: [_jsx(Gridicon, { icon: "chevron-up", size: 12, color: "#1E1E1E" }), _jsx("span", { children: featureGroup.getTitle() })] }) }), featureObjects.map((feature) => (_jsx(ComparisonGridFeatureGroupRow, { feature: feature, featureGroupSlug: featureGroup.slug, isHiddenInMobile: isHiddenInMobile, allJetpackFeatures: allJetpackFeatures, visibleGridPlans: visibleGridPlans, planFeatureFootnotes: planFeatureFootnotes, isStorageFeature: false, isHighlighted: feature.getSlug() === selectedFeature, intervalType: intervalType, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, showUpgradeableStorage: showUpgradeableStorage, onStorageAddOnClick: onStorageAddOnClick }, feature.getSlug()))), featureGroup.slug === FEATURE_GROUP_ESSENTIAL_FEATURES ? (_jsx(ComparisonGridFeatureGroupRow, { featureGroupSlug: featureGroup.slug, isHiddenInMobile: isHiddenInMobile, allJetpackFeatures: allJetpackFeatures, visibleGridPlans: visibleGridPlans, planFeatureFootnotes: planFeatureFootnotes, isStorageFeature: true, isHighlighted: false, intervalType: intervalType, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, showUpgradeableStorage: showUpgradeableStorage, onStorageAddOnClick: onStorageAddOnClick }, "feature-storage")) : null] }, featureGroup.slug));
 };
-const ComparisonGrid = ({ intervalType, isInSignup, currentSitePlanSlug, planActionOverrides, selectedPlan, selectedFeature, showUpgradeableStorage, stickyRowOffset, onStorageAddOnClick, showRefundPeriod, planTypeSelectorProps, gridSize, siteId, }) => {
-    const { gridPlans, gridPlansIndex, featureGroupMap } = usePlansGridContext();
+const ComparisonGrid = ({ intervalType, isInSignup, currentSitePlanSlug, planActionOverrides, selectedPlan, selectedFeature, showUpgradeableStorage, stickyRowOffset, onStorageAddOnClick, showRefundPeriod, planTypeSelectorProps, gridSize, siteId, onVisiblePlansCountChange, }) => {
+    const { gridPlans, featureGroupMap } = usePlansGridContext();
     const [activeTooltipId, setActiveTooltipId] = useManageTooltipToggle();
-    const [visiblePlans, setVisiblePlans] = useState([]);
-    const currentPlanTerm = Plans.useCurrentPlanTerm({ siteId });
-    const selectedPlanTerm = usePlanBillingPeriod({ intervalType });
-    useEffect(() => {
-        let numPlansToDisplay = gridPlans.length;
-        switch (gridSize) {
-            case 'large':
-                numPlansToDisplay = 4;
-                break;
-            case 'medium':
-                numPlansToDisplay = 3;
-                break;
-            case 'smedium':
-            case 'small':
-                numPlansToDisplay = 2;
-                break;
-        }
-        let visiblePlanSlugs = gridPlans
-            .slice(0, numPlansToDisplay)
-            .map(({ planSlug }) => planSlug);
-        const isCurrentPlanVisible = !!currentSitePlanSlug && visiblePlanSlugs.includes(currentSitePlanSlug);
-        /**
-         * Plans are sorted by least to most expensive unless:
-         * - a current plan exists and
-         * - the current plan's term matches the selected term and
-         * - the current plan would not be displayed due to the number of plans that can be visible at once
-         *
-         * If those conditions are met:
-         * - the current plan is placed at the start of the grid and
-         * - the last plan is removed to maintain the expected number of visible plans
-         */
-        if (currentSitePlanSlug && !isCurrentPlanVisible && currentPlanTerm === selectedPlanTerm) {
-            visiblePlanSlugs = [currentSitePlanSlug, ...visiblePlanSlugs].slice(0, numPlansToDisplay);
-        }
-        setVisiblePlans(visiblePlanSlugs);
-    }, [
+    const { visibleGridPlans, setVisibleGridPlans } = useVisibleGridPlans({
         gridSize,
-        gridPlansIndex,
         currentSitePlanSlug,
-        gridPlans,
-        currentPlanTerm,
-        selectedPlanTerm,
+        siteId,
         intervalType,
-    ]);
-    const visibleGridPlans = useMemo(() => visiblePlans.reduce((acc, planSlug) => {
-        const gridPlan = gridPlans.find((gridPlan) => getPlanClass(gridPlan.planSlug) === getPlanClass(planSlug));
-        if (gridPlan) {
-            acc.push(gridPlan);
-        }
-        return acc;
-    }, []), [visiblePlans, gridPlans]);
-    const onPlanChange = useCallback((currentPlan, event) => {
-        const newPlan = event.currentTarget.value;
-        const newVisiblePlans = visiblePlans.map((plan) => plan === currentPlan ? newPlan : plan);
-        setVisiblePlans(newVisiblePlans);
-    }, [visiblePlans]);
+    });
+    useEffect(() => {
+        onVisiblePlansCountChange?.(visibleGridPlans.length);
+    }, [visibleGridPlans.length, onVisiblePlansCountChange]);
     const planFeatureFootnotes = useMemo(() => {
         // This is the main list of all footnotes. It is displayed at the bottom of the comparison grid.
         const footnoteList = [];
@@ -486,6 +486,13 @@ const ComparisonGrid = ({ intervalType, isInSignup, currentSitePlanSlug, planAct
             footnotesByFeature,
         };
     }, [featureGroupMap]);
+    const onPlanChange = useCallback((currentPlan, event) => {
+        const newPlanSlug = event.currentTarget.value;
+        const newPlan = gridPlans.find((plan) => plan.planSlug === newPlanSlug);
+        if (newPlan) {
+            setVisibleGridPlans((previousGridPlans) => previousGridPlans.map((plan) => (plan.planSlug === currentPlan ? newPlan : plan)));
+        }
+    }, [gridPlans, setVisibleGridPlans]);
     // 100px is the padding of the footer row
     const [bottomHeaderRef, isBottomHeaderInView] = useInView({ rootMargin: '-100px' });
     /**
@@ -497,14 +504,14 @@ const ComparisonGrid = ({ intervalType, isInSignup, currentSitePlanSlug, planAct
     const classes = clsx('plans-grid-next-comparison-grid', {
         'has-highlighted-plan': hasHighlightedPlan,
     });
-    return (_jsxs("div", { className: classes, children: [_jsxs(Grid, { visiblePlans: visiblePlans.length, children: [_jsx(StickyContainer, { disabled: isBottomHeaderInView, stickyClass: "is-sticky-header-row", stickyOffset: stickyRowOffset, zIndex: 1, children: (isStuck) => (_jsx(ComparisonGridHeader, { displayedGridPlans: gridPlans, visibleGridPlans: visibleGridPlans, isInSignup: isInSignup, onPlanChange: onPlanChange, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides, selectedPlan: selectedPlan, showRefundPeriod: showRefundPeriod, isStuck: isStuck, planTypeSelectorProps: planTypeSelectorProps })) }), Object.values(featureGroupMap).map((featureGroup) => (_jsx(FeatureGroup, { featureGroup: featureGroup, visibleGridPlans: visibleGridPlans, featureGroupMap: featureGroupMap, selectedFeature: selectedFeature, intervalType: intervalType, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, showUpgradeableStorage: showUpgradeableStorage, onStorageAddOnClick: onStorageAddOnClick, planFeatureFootnotes: planFeatureFootnotes }, featureGroup.slug))), _jsx(ComparisonGridHeader, { displayedGridPlans: gridPlans, visibleGridPlans: visibleGridPlans, isInSignup: isInSignup, isFooter: true, onPlanChange: onPlanChange, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides, selectedPlan: selectedPlan, showRefundPeriod: showRefundPeriod, isStuck: false, isHiddenInMobile: true, ref: bottomHeaderRef, planTypeSelectorProps: planTypeSelectorProps })] }), _jsx("div", { className: "plan-comparison-grid__footer", children: planFeatureFootnotes?.footnoteList && (_jsx(FeatureFootnotes, { children: _jsx("ol", { children: planFeatureFootnotes?.footnoteList?.map((footnote, index) => {
-                            return _jsx("li", { children: footnote }, `${footnote}-${index}`);
-                        }) }) })) })] }));
+    return (_jsxs("table", { className: classes, children: [_jsx(StickyGrid, { visiblePlans: visibleGridPlans.length, element: "thead", disabled: isBottomHeaderInView, stickyClass: "is-sticky-header-row", stickyOffset: stickyRowOffset, zIndex: 1, children: (isStuck) => (_jsx(ComparisonGridHeader, { displayedGridPlans: gridPlans, visibleGridPlans: visibleGridPlans, isInSignup: isInSignup, onPlanChange: onPlanChange, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides, selectedPlan: selectedPlan, showRefundPeriod: showRefundPeriod, isStuck: isStuck, planTypeSelectorProps: planTypeSelectorProps })) }), Object.values(featureGroupMap).map((featureGroup) => (_jsx(FeatureGroup, { featureGroup: featureGroup, visibleGridPlans: visibleGridPlans, featureGroupMap: featureGroupMap, selectedFeature: selectedFeature, intervalType: intervalType, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, showUpgradeableStorage: showUpgradeableStorage, onStorageAddOnClick: onStorageAddOnClick, planFeatureFootnotes: planFeatureFootnotes, plansLength: visibleGridPlans.length }, featureGroup.slug))), _jsx("tbody", { children: _jsx(ComparisonGridHeader, { displayedGridPlans: gridPlans, visibleGridPlans: visibleGridPlans, isInSignup: isInSignup, isFooter: true, onPlanChange: onPlanChange, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides, selectedPlan: selectedPlan, showRefundPeriod: showRefundPeriod, isStuck: false, isHiddenInMobile: true, ref: bottomHeaderRef, planTypeSelectorProps: planTypeSelectorProps }) }), _jsx("tfoot", { className: "plan-comparison-grid__footer", children: planFeatureFootnotes?.footnoteList && (_jsx(FeatureFootnotes, { as: "tr", children: _jsx("td", { children: _jsx("ol", { children: planFeatureFootnotes?.footnoteList?.map((footnote, index) => {
+                                return _jsx("li", { children: footnote }, `${footnote}-${index}`);
+                            }) }) }) })) })] }));
 };
 // TODO
 // Now that everything under is functional component, we can deprecate this wrapper and only keep ComparisonGrid instead.
 // More details can be found in https://github.com/Automattic/wp-calypso/issues/87047
-const WrappedComparisonGrid = ({ siteId, intent, gridPlans, useCheckPlanAvailabilityForPurchase, useAction, recordTracksEvent, allFeaturesList, intervalType, isInSiteDashboard, isInSignup, currentSitePlanSlug, selectedPlan, selectedFeature, showUpgradeableStorage, onStorageAddOnClick, stickyRowOffset, coupon, className, hideUnsupportedFeatures, enableFeatureTooltips, featureGroupMap, enableTermSavingsPriceDisplay, reflectStorageSelectionInPlanPrices, ...otherProps }) => {
+const WrappedComparisonGrid = ({ siteId, intent, gridPlans, useCheckPlanAvailabilityForPurchase, useAction, recordTracksEvent, allFeaturesList, intervalType, isInSiteDashboard, isInSignup, currentSitePlanSlug, selectedPlan, selectedFeature, showUpgradeableStorage, onStorageAddOnClick, stickyRowOffset, coupon, className, hideUnsupportedFeatures, enableFeatureTooltips, featureGroupMap, enableTermSavingsPriceDisplay, reflectStorageSelectionInPlanPrices, showSimplifiedBillingDescription, showBillingDescriptionForIncreasedRenewalPrice, isExperimentVariant, ...otherProps }) => {
     const gridContainerRef = useRef(null);
     const gridBreakpoints = useMemo(() => {
         // we want to fit up to the Commerce plan in this breakpoint
@@ -530,7 +537,7 @@ const WrappedComparisonGrid = ({ siteId, intent, gridPlans, useCheckPlanAvailabi
         'is-xlarge': 'xlarge' === gridSize,
         'is-visible': true,
     });
-    return (_jsx("div", { ref: gridContainerRef, className: classNames, children: _jsx(PlansGridContextProvider, { intent: intent, siteId: siteId, gridPlans: gridPlans, useCheckPlanAvailabilityForPurchase: useCheckPlanAvailabilityForPurchase, useAction: useAction, recordTracksEvent: recordTracksEvent, allFeaturesList: allFeaturesList, coupon: coupon, enableFeatureTooltips: enableFeatureTooltips, featureGroupMap: featureGroupMap, hideUnsupportedFeatures: hideUnsupportedFeatures, enableTermSavingsPriceDisplay: enableTermSavingsPriceDisplay, reflectStorageSelectionInPlanPrices: reflectStorageSelectionInPlanPrices, children: _jsx(ComparisonGrid, { intervalType: intervalType, isInSiteDashboard: isInSiteDashboard, isInSignup: isInSignup, currentSitePlanSlug: currentSitePlanSlug, siteId: siteId, selectedPlan: selectedPlan, selectedFeature: selectedFeature, showUpgradeableStorage: showUpgradeableStorage, stickyRowOffset: stickyRowOffset, onStorageAddOnClick: onStorageAddOnClick, gridSize: gridSize ?? undefined, ...otherProps }) }) }));
+    return (_jsx("div", { ref: gridContainerRef, className: classNames, children: _jsx(PlansGridContextProvider, { intent: intent, siteId: siteId, gridPlans: gridPlans, useCheckPlanAvailabilityForPurchase: useCheckPlanAvailabilityForPurchase, useAction: useAction, recordTracksEvent: recordTracksEvent, allFeaturesList: allFeaturesList, coupon: coupon, enableFeatureTooltips: enableFeatureTooltips, featureGroupMap: featureGroupMap, hideUnsupportedFeatures: hideUnsupportedFeatures, enableTermSavingsPriceDisplay: enableTermSavingsPriceDisplay, reflectStorageSelectionInPlanPrices: reflectStorageSelectionInPlanPrices, showSimplifiedBillingDescription: showSimplifiedBillingDescription, showBillingDescriptionForIncreasedRenewalPrice: showBillingDescriptionForIncreasedRenewalPrice, isExperimentVariant: isExperimentVariant, children: _jsx(ComparisonGrid, { intervalType: intervalType, isInSiteDashboard: isInSiteDashboard, isInSignup: isInSignup, currentSitePlanSlug: currentSitePlanSlug, siteId: siteId, selectedPlan: selectedPlan, selectedFeature: selectedFeature, showUpgradeableStorage: showUpgradeableStorage, stickyRowOffset: stickyRowOffset, onStorageAddOnClick: onStorageAddOnClick, gridSize: gridSize ?? undefined, ...otherProps }) }, intent) }));
 };
 export default WrappedComparisonGrid;
 //# sourceMappingURL=index.js.map