@automattic/plans-grid-next 1.0.1 → 1.0.3

package/src/components/comparison-grid/index.tsx

@@ -3,6 +3,9 @@ import {
 	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 { AddOns } from '@automattic/data-stores';
@@ -27,9 +30,9 @@ import PlansGridContextProvider, { usePlansGridContext } from '../../grid-contex
 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 { sortPlans } from '../../lib/sort-plan-properties';
 import PlanTypeSelector from '../plan-type-selector';
 import { Plans2023Tooltip } from '../plans-2023-tooltip';
 import PopularBadge from '../popular-badge';
@@ -46,6 +49,7 @@ import type {
 	PlanActionOverrides,
 	TransformedFeatureObject,
 	PlanTypeSelectorProps,
+	GridSize,
 } from '../../types';
 import type {
 	FeatureObject,
@@ -56,16 +60,37 @@ import type {
 } from '@automattic/calypso-products';
 import './style.scss';
 
+// Plans Differentiators Experiment: treat feature variants (e.g., _LIMITED) as the same row
+const FEATURE_ALIASES: Record< string, string[] > = {
+	[ FEATURE_AI_WRITER_DESIGNER ]: [ FEATURE_AI_WRITER_DESIGNER_LIMITED ],
+};
+
+// Finds a matching feature, checking both the base slug and any aliases
+const findFeatureWithAlias = (
+	featureSlug: string | undefined,
+	planFeatures: { getSlug: () => string }[]
+) => {
+	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< { isHiddenInMobile?: boolean } >`
 	font-weight: 500;
 	font-size: 20px;
@@ -96,11 +121,10 @@ const Title = styled.div< { isHiddenInMobile?: boolean } >`
 	` ) }
 `;
 
-const Grid = styled.div< { visiblePlans: number } >`
+const StickyGrid = styled( StickyContainer )< { visiblePlans: number } >`
 	display: grid;
 	margin: 0 auto;
 	background: #fff;
-	border: solid 1px #e0e0e0;
 	${ ( props ) =>
 		props.visiblePlans &&
 		css`
@@ -110,11 +134,21 @@ const Grid = styled.div< { visiblePlans: number } >`
 	${ plansGridMediumLarge( css`
 		border-radius: 5px;
 	` ) }
+`;
 
-	> .is-sticky-header-row {
-		border-bottom: solid 1px #e0e0e0;
-		background: #fff;
-	}
+const Grid = styled.div< { visiblePlans: number; as?: string } >`
+	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;
+		` }
+
+	${ plansGridMediumLarge( css`
+		border-radius: 5px;
+	` ) }
 `;
 
 const Row = styled.div< {
@@ -218,7 +252,7 @@ const Cell = styled.div< { textAlign?: 'start' | 'center' | 'end' } >`
 		border-right: none;
 		justify-content: center;
 
-		&:first-of-type {
+		&:first-of-type:not( .popular-plan-parent-class ) {
 			padding-inline-start: 0;
 		}
 		&:last-of-type {
@@ -232,7 +266,27 @@ const Cell = styled.div< { textAlign?: 'start' | 'center' | 'end' } >`
 	` ) }
 `;
 
-const RowTitleCell = styled.div< {
+const RowTitleCell = styled.td< {
+	isPlaceholderHeaderCell?: boolean;
+	isFeatureGroupRowTitleCell?: boolean;
+} >`
+	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< {
 	isPlaceholderHeaderCell?: boolean;
 	isFeatureGroupRowTitleCell?: boolean;
 } >`
@@ -361,7 +415,7 @@ const ComparisonGridHeaderCell = ( {
 	showRefundPeriod,
 	isStuck,
 }: ComparisonGridHeaderCellProps ) => {
-	const { gridPlansIndex } = usePlansGridContext();
+	const { gridPlansIndex, showBillingDescriptionForIncreasedRenewalPrice } = usePlansGridContext();
 	const gridPlan = gridPlansIndex[ planSlug ];
 	const highlightAdjacencyMatrix = useHighlightAdjacencyMatrix( {
 		renderedGridPlans: visibleGridPlans,
@@ -388,7 +442,13 @@ const ComparisonGridHeaderCell = ( {
 	const showPlanSelect = ! allVisible && ! gridPlan.current;
 
 	return (
-		<Cell className={ headerClasses } textAlign="start">
+		<Cell
+			as="th"
+			className={ headerClasses }
+			textAlign="start"
+			{ ...{ scope: 'col' } }
+			aria-label={ gridPlan.planTitle as string }
+		>
 			<PopularBadge
 				isInSignup={ isInSignup }
 				planSlug={ planSlug }
@@ -448,6 +508,7 @@ const ComparisonGridHeaderCell = ( {
 				showMonthlyPrice={ false }
 				isStuck={ false }
 				visibleGridPlans={ visibleGridPlans }
+				showPostButtonText={ showBillingDescriptionForIncreasedRenewalPrice ? false : true }
 			/>
 		</Cell>
 	);
@@ -483,7 +544,7 @@ const ComparisonGridHeader = forwardRef< HTMLDivElement, ComparisonGridHeaderPro
 		const { coupon } = usePlansGridContext();
 
 		return (
-			<PlanRow isHiddenInMobile={ isHiddenInMobile } ref={ ref }>
+			<PlanRow as="tr" isHiddenInMobile={ isHiddenInMobile } ref={ ref }>
 				<RowTitleCell
 					key="feature-name"
 					className="plan-comparison-grid__header-cell is-placeholder-header-cell"
@@ -524,6 +585,7 @@ const ComparisonGridHeader = forwardRef< HTMLDivElement, ComparisonGridHeaderPro
 		);
 	}
 );
+ComparisonGridHeader.displayName = 'ComparisonGridHeader';
 
 const ComparisonGridFeatureGroupRowCell: React.FunctionComponent< {
 	feature?: FeatureObject;
@@ -559,19 +621,23 @@ const ComparisonGridFeatureGroupRowCell: React.FunctionComponent< {
 	}
 
 	const featureSlug = feature?.getSlug();
+	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 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 matchingFeature = findFeatureWithAlias( featureSlug, planFeatures );
+	const hasFeature = isStorageFeature || !! matchingFeature;
+	const featureLabelSlug = matchingFeature?.getSlug() ?? featureSlug;
+	const featureLabel = featureLabelSlug
+		? gridPlan?.features?.comparisonGridFeatureLabels?.[ featureLabelSlug ]
 		: undefined;
 
 	const cellClasses = clsx(
@@ -594,7 +660,7 @@ const ComparisonGridFeatureGroupRowCell: React.FunctionComponent< {
 	);
 
 	return (
-		<Cell className={ cellClasses } textAlign="center">
+		<Cell as="td" className={ cellClasses } textAlign="center">
 			{ isStorageFeature ? (
 				<>
 					<span className="plan-comparison-grid__plan-title">{ translate( 'Storage' ) }</span>
@@ -617,7 +683,7 @@ const ComparisonGridFeatureGroupRowCell: React.FunctionComponent< {
 										id={ `${ planSlug }-${ featureSlug }` }
 									>
 										<span className="plan-comparison-grid__plan-title">
-											{ feature?.getAlternativeTitle?.() || feature?.getTitle() }
+											{ comparisonGridTitle }
 										</span>
 									</Plans2023Tooltip>
 									<span className="plan-comparison-grid__plan-conditional-title">
@@ -642,9 +708,7 @@ const ComparisonGridFeatureGroupRowCell: React.FunctionComponent< {
 								activeTooltipId={ activeTooltipId }
 								id={ `${ planSlug }-${ featureSlug }` }
 							>
-								<span className="plan-comparison-grid__plan-title">
-									{ feature?.getAlternativeTitle?.() || feature?.getTitle() }
-								</span>
+								<span className="plan-comparison-grid__plan-title">{ comparisonGridTitle }</span>
 							</Plans2023Tooltip>
 							{ feature?.getCompareTitle && (
 								<span className="plan-comparison-grid__plan-subtitle">
@@ -662,9 +726,19 @@ const ComparisonGridFeatureGroupRowCell: React.FunctionComponent< {
 								</span>
 							) }
 							{ hasFeature && ! featureLabel && (
-								<Gridicon icon="checkmark" color="var(--studio-wordpress-blue-50)" />
+								<Gridicon
+									icon="checkmark"
+									color="var(--studio-wordpress-blue-50)"
+									aria-label={ translate( 'Feature available' ) }
+								/>
+							) }
+							{ ! hasFeature && ! featureLabel && (
+								<Gridicon
+									icon="minus-small"
+									color="#C3C4C7"
+									aria-label={ translate( 'Feature not available' ) }
+								/>
 							) }
-							{ ! hasFeature && ! featureLabel && <Gridicon icon="minus-small" color="#C3C4C7" /> }
 						</>
 					) }
 				</>
@@ -675,6 +749,7 @@ const ComparisonGridFeatureGroupRowCell: React.FunctionComponent< {
 
 const ComparisonGridFeatureGroupRow: React.FunctionComponent< {
 	feature?: FeatureObject | TransformedFeatureObject;
+	featureGroupSlug: string;
 	isHiddenInMobile: boolean;
 	allJetpackFeatures: Set< string >;
 	visibleGridPlans: GridPlan[];
@@ -688,6 +763,7 @@ const ComparisonGridFeatureGroupRow: React.FunctionComponent< {
 	onStorageAddOnClick?: ( addOnSlug: AddOns.StorageAddOnSlug ) => void;
 } > = ( {
 	feature,
+	featureGroupSlug,
 	isHiddenInMobile,
 	allJetpackFeatures,
 	visibleGridPlans,
@@ -706,20 +782,29 @@ const ComparisonGridFeatureGroupRow: React.FunctionComponent< {
 	} );
 	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: string = typeof title === 'string' ? title : '';
 
 	const { enableFeatureTooltips } = usePlansGridContext();
 
 	return (
 		<Row
+			as="tr"
 			isHiddenInMobile={ isHiddenInMobile }
 			className={ rowClasses }
 			isHighlighted={ isHighlighted }
 		>
-			<RowTitleCell
+			<RowHeaderCell
 				key="feature-name"
 				className="is-feature-group-row-title-cell"
 				isFeatureGroupRowTitleCell
+				scope="row"
+				aria-label={ headerAriaLabel }
 			>
 				{ isStorageFeature ? (
 					<Plans2023Tooltip
@@ -744,32 +829,52 @@ const ComparisonGridFeatureGroupRow: React.FunctionComponent< {
 									activeTooltipId={ activeTooltipId }
 									id={ tooltipId }
 								>
-									{ feature.getTitle() }
-									{ footnote && (
-										<FeatureFootnote>
-											<sup>{ footnote }</sup>
-										</FeatureFootnote>
+									{ typeof title === 'string' ? (
+										<>
+											{ title.split( ' ' ).slice( 0, -1 ).join( ' ' ) }
+											{ title.includes( ' ' ) ? ' ' : null }
+											<TitlePreventOrphans>
+												{ title.split( ' ' ).slice( -1 ) }
+												{ footnote && (
+													<FeatureFootnote>
+														<sup>{ footnote }</sup>
+													</FeatureFootnote>
+												) }
+												{ allJetpackFeatures.has( feature.getSlug() ) ? (
+													<>
+														{ '\u00A0' }
+														<JetpackIconContainer>
+															<Plans2023Tooltip
+																text={ translate(
+																	'Security, performance, and growth tools—powered by Jetpack.'
+																) }
+																setActiveTooltipId={ setActiveTooltipId }
+																activeTooltipId={ activeTooltipId }
+																id={ `jp-${ tooltipId }` }
+															>
+																<JetpackLogo size={ 16 } />
+															</Plans2023Tooltip>
+														</JetpackIconContainer>
+													</>
+												) : null }
+											</TitlePreventOrphans>
+										</>
+									) : (
+										<>
+											{ feature.getTitle() }
+											{ footnote && (
+												<FeatureFootnote>
+													<sup>{ footnote }</sup>
+												</FeatureFootnote>
+											) }
+										</>
 									) }
 								</Plans2023Tooltip>
-								{ allJetpackFeatures.has( feature.getSlug() ) ? (
-									<JetpackIconContainer>
-										<Plans2023Tooltip
-											text={ translate(
-												'Security, performance, and growth tools—powered by Jetpack.'
-											) }
-											setActiveTooltipId={ setActiveTooltipId }
-											activeTooltipId={ activeTooltipId }
-											id={ `jp-${ tooltipId }` }
-										>
-											<JetpackLogo size={ 16 } />
-										</Plans2023Tooltip>
-									</JetpackIconContainer>
-								) : null }
 							</>
 						) }
 					</>
 				) }
-			</RowTitleCell>
+			</RowHeaderCell>
 			{ visibleGridPlans.map( ( { planSlug } ) => (
 				<ComparisonGridFeatureGroupRowCell
 					key={ planSlug }
@@ -800,6 +905,7 @@ const FeatureGroup = ( {
 	featureGroupMap,
 	visibleGridPlans,
 	planFeatureFootnotes,
+	plansLength,
 }: {
 	featureGroup: FeatureGroup;
 	selectedFeature?: string;
@@ -814,17 +920,20 @@ const FeatureGroup = ( {
 		footnoteList: string[];
 		footnotesByFeature: Record< string, number >;
 	};
+	plansLength: number;
 } ) => {
-	const { allFeaturesList } = usePlansGridContext();
+	const { allFeaturesList, isExperimentVariant } = usePlansGridContext();
 	const [ firstSetOfFeatures ] = Object.keys( featureGroupMap );
 	const [ visibleFeatureGroups, setVisibleFeatureGroups ] = useState< string[] >( [
 		firstSetOfFeatures,
 	] );
 	const features = featureGroup.getFeatures();
+
 	const featureObjects = filterUnusedFeaturesObject(
 		visibleGridPlans,
-		getPlanFeaturesObject( allFeaturesList, features )
+		getPlanFeaturesObject( allFeaturesList, features, isExperimentVariant )
 	);
+
 	const isHiddenInMobile = ! visibleFeatureGroups.includes( featureGroup.slug );
 
 	const allJetpackFeatures = useMemo( () => {
@@ -870,12 +979,18 @@ const FeatureGroup = ( {
 	}
 
 	return (
-		<div key={ featureGroup.slug } className="plan-comparison-grid__feature-group">
+		<Grid
+			as="tbody"
+			visiblePlans={ plansLength }
+			key={ featureGroup.slug }
+			className="plan-comparison-grid__feature-group"
+		>
 			<TitleRow
+				as="tr"
 				className="plan-comparison-grid__feature-group-title-row"
 				onClick={ handleFeatureGroupToggle }
 			>
-				<Title isHiddenInMobile={ isHiddenInMobile }>
+				<Title as="td" isHiddenInMobile={ isHiddenInMobile }>
 					<Gridicon icon="chevron-up" size={ 12 } color="#1E1E1E" />
 					<span>{ featureGroup.getTitle() }</span>
 				</Title>
@@ -884,6 +999,7 @@ const FeatureGroup = ( {
 				<ComparisonGridFeatureGroupRow
 					key={ feature.getSlug() }
 					feature={ feature }
+					featureGroupSlug={ featureGroup.slug }
 					isHiddenInMobile={ isHiddenInMobile }
 					allJetpackFeatures={ allJetpackFeatures }
 					visibleGridPlans={ visibleGridPlans }
@@ -900,6 +1016,7 @@ const FeatureGroup = ( {
 			{ featureGroup.slug === FEATURE_GROUP_ESSENTIAL_FEATURES ? (
 				<ComparisonGridFeatureGroupRow
 					key="feature-storage"
+					featureGroupSlug={ featureGroup.slug }
 					isHiddenInMobile={ isHiddenInMobile }
 					allJetpackFeatures={ allJetpackFeatures }
 					visibleGridPlans={ visibleGridPlans }
@@ -913,7 +1030,7 @@ const FeatureGroup = ( {
 					onStorageAddOnClick={ onStorageAddOnClick }
 				/>
 			) : null }
-		</div>
+		</Grid>
 	);
 };
 
@@ -930,62 +1047,22 @@ const ComparisonGrid = ( {
 	showRefundPeriod,
 	planTypeSelectorProps,
 	gridSize,
+	siteId,
+	onVisiblePlansCountChange,
 }: ComparisonGridProps ) => {
-	const { gridPlans, gridPlansIndex, featureGroupMap } = usePlansGridContext();
+	const { gridPlans, featureGroupMap } = usePlansGridContext();
 	const [ activeTooltipId, setActiveTooltipId ] = useManageTooltipToggle();
-	const [ visiblePlans, setVisiblePlans ] = useState< PlanSlug[] >( [] );
 
-	const displayedGridPlans = useMemo( () => {
-		return sortPlans( gridPlans, currentSitePlanSlug );
-	}, [ gridPlans, currentSitePlanSlug ] );
+	const { visibleGridPlans, setVisibleGridPlans } = useVisibleGridPlans( {
+		gridSize,
+		currentSitePlanSlug,
+		siteId,
+		intervalType,
+	} );
 
 	useEffect( () => {
-		setVisiblePlans( () => {
-			let visibleLength = displayedGridPlans.length;
-			switch ( gridSize ) {
-				case 'large':
-					visibleLength = 4;
-					break;
-				case 'medium':
-					visibleLength = 3;
-					break;
-				case 'smedium':
-				case 'small':
-					visibleLength = 2;
-					break;
-			}
-
-			return displayedGridPlans.slice( 0, visibleLength ).map( ( { planSlug } ) => planSlug );
-		} );
-	}, [ gridSize, displayedGridPlans, gridPlansIndex ] );
-
-	const visibleGridPlans = useMemo(
-		() =>
-			visiblePlans.reduce( ( acc, planSlug ) => {
-				const gridPlan = displayedGridPlans.find(
-					( gridPlan ) => getPlanClass( gridPlan.planSlug ) === getPlanClass( planSlug )
-				);
-
-				if ( gridPlan ) {
-					acc.push( gridPlan );
-				}
-
-				return acc;
-			}, [] as GridPlan[] ),
-		[ visiblePlans, displayedGridPlans ]
-	);
-
-	const onPlanChange = useCallback(
-		( currentPlan: PlanSlug, event: ChangeEvent< HTMLSelectElement > ) => {
-			const newPlan = event.currentTarget.value;
-			const newVisiblePlans = visiblePlans.map( ( plan ) =>
-				plan === currentPlan ? ( newPlan as PlanSlug ) : plan
-			);
-
-			setVisiblePlans( newVisiblePlans );
-		},
-		[ visiblePlans ]
-	);
+		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.
@@ -1020,6 +1097,20 @@ const ComparisonGrid = ( {
 		};
 	}, [ featureGroupMap ] );
 
+	const onPlanChange = useCallback(
+		( currentPlan: PlanSlug, event: ChangeEvent< HTMLSelectElement > ) => {
+			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' } );
 
@@ -1034,46 +1125,49 @@ const ComparisonGrid = ( {
 	} );
 
 	return (
-		<div className={ classes }>
-			<Grid visiblePlans={ visiblePlans.length }>
-				<StickyContainer
-					disabled={ isBottomHeaderInView }
-					stickyClass="is-sticky-header-row"
-					stickyOffset={ stickyRowOffset }
-					zIndex={ 1 }
-				>
-					{ ( isStuck: boolean ) => (
-						<ComparisonGridHeader
-							displayedGridPlans={ displayedGridPlans }
-							visibleGridPlans={ visibleGridPlans }
-							isInSignup={ isInSignup }
-							onPlanChange={ onPlanChange }
-							currentSitePlanSlug={ currentSitePlanSlug }
-							planActionOverrides={ planActionOverrides }
-							selectedPlan={ selectedPlan }
-							showRefundPeriod={ showRefundPeriod }
-							isStuck={ isStuck }
-							planTypeSelectorProps={ planTypeSelectorProps }
-						/>
-					) }
-				</StickyContainer>
-				{ Object.values( featureGroupMap ).map( ( featureGroup: FeatureGroup ) => (
-					<FeatureGroup
-						key={ featureGroup.slug }
-						featureGroup={ featureGroup }
+		<table className={ classes }>
+			<StickyGrid
+				visiblePlans={ visibleGridPlans.length }
+				element="thead"
+				disabled={ isBottomHeaderInView }
+				stickyClass="is-sticky-header-row"
+				stickyOffset={ stickyRowOffset }
+				zIndex={ 1 }
+			>
+				{ ( isStuck: boolean ) => (
+					<ComparisonGridHeader
+						displayedGridPlans={ gridPlans }
 						visibleGridPlans={ visibleGridPlans }
-						featureGroupMap={ featureGroupMap }
-						selectedFeature={ selectedFeature }
-						intervalType={ intervalType }
-						activeTooltipId={ activeTooltipId }
-						setActiveTooltipId={ setActiveTooltipId }
-						showUpgradeableStorage={ showUpgradeableStorage }
-						onStorageAddOnClick={ onStorageAddOnClick }
-						planFeatureFootnotes={ planFeatureFootnotes }
+						isInSignup={ isInSignup }
+						onPlanChange={ onPlanChange }
+						currentSitePlanSlug={ currentSitePlanSlug }
+						planActionOverrides={ planActionOverrides }
+						selectedPlan={ selectedPlan }
+						showRefundPeriod={ showRefundPeriod }
+						isStuck={ isStuck }
+						planTypeSelectorProps={ planTypeSelectorProps }
 					/>
-				) ) }
+				) }
+			</StickyGrid>
+			{ Object.values( featureGroupMap ).map( ( featureGroup: FeatureGroup ) => (
+				<FeatureGroup
+					key={ featureGroup.slug }
+					featureGroup={ featureGroup }
+					visibleGridPlans={ visibleGridPlans }
+					featureGroupMap={ featureGroupMap }
+					selectedFeature={ selectedFeature }
+					intervalType={ intervalType }
+					activeTooltipId={ activeTooltipId }
+					setActiveTooltipId={ setActiveTooltipId }
+					showUpgradeableStorage={ showUpgradeableStorage }
+					onStorageAddOnClick={ onStorageAddOnClick }
+					planFeatureFootnotes={ planFeatureFootnotes }
+					plansLength={ visibleGridPlans.length }
+				/>
+			) ) }
+			<tbody>
 				<ComparisonGridHeader
-					displayedGridPlans={ displayedGridPlans }
+					displayedGridPlans={ gridPlans }
 					visibleGridPlans={ visibleGridPlans }
 					isInSignup={ isInSignup }
 					isFooter
@@ -1087,20 +1181,22 @@ const ComparisonGrid = ( {
 					ref={ bottomHeaderRef }
 					planTypeSelectorProps={ planTypeSelectorProps }
 				/>
-			</Grid>
+			</tbody>
 
-			<div className="plan-comparison-grid__footer">
+			<tfoot className="plan-comparison-grid__footer">
 				{ planFeatureFootnotes?.footnoteList && (
-					<FeatureFootnotes>
-						<ol>
-							{ planFeatureFootnotes?.footnoteList?.map( ( footnote, index ) => {
-								return <li key={ `${ footnote }-${ index }` }>{ footnote }</li>;
-							} ) }
-						</ol>
+					<FeatureFootnotes as="tr">
+						<td>
+							<ol>
+								{ planFeatureFootnotes?.footnoteList?.map( ( footnote, index ) => {
+									return <li key={ `${ footnote }-${ index }` }>{ footnote }</li>;
+								} ) }
+							</ol>
+						</td>
 					</FeatureFootnotes>
 				) }
-			</div>
-		</div>
+			</tfoot>
+		</table>
 	);
 };
 
@@ -1131,6 +1227,9 @@ const WrappedComparisonGrid = ( {
 	featureGroupMap,
 	enableTermSavingsPriceDisplay,
 	reflectStorageSelectionInPlanPrices,
+	showSimplifiedBillingDescription,
+	showBillingDescriptionForIncreasedRenewalPrice,
+	isExperimentVariant,
 	...otherProps
 }: ComparisonGridExternalProps ) => {
 	const gridContainerRef = useRef< HTMLDivElement >( null );
@@ -1138,7 +1237,7 @@ const WrappedComparisonGrid = ( {
 	const gridBreakpoints = useMemo( () => {
 		// we want to fit up to the Commerce plan in this breakpoint
 		const xlargeBreakpoint = isInSiteDashboard ? 1114 : 1180;
-		return new Map( [
+		return new Map< GridSize, number >( [
 			[ 'small', 0 ],
 			[ 'smedium', 686 ],
 			[ 'medium', 835 ],
@@ -1166,6 +1265,7 @@ const WrappedComparisonGrid = ( {
 		<div ref={ gridContainerRef } className={ classNames }>
 			<PlansGridContextProvider
 				intent={ intent }
+				key={ intent }
 				siteId={ siteId }
 				gridPlans={ gridPlans }
 				useCheckPlanAvailabilityForPurchase={ useCheckPlanAvailabilityForPurchase }
@@ -1178,6 +1278,11 @@ const WrappedComparisonGrid = ( {
 				hideUnsupportedFeatures={ hideUnsupportedFeatures }
 				enableTermSavingsPriceDisplay={ enableTermSavingsPriceDisplay }
 				reflectStorageSelectionInPlanPrices={ reflectStorageSelectionInPlanPrices }
+				showSimplifiedBillingDescription={ showSimplifiedBillingDescription }
+				showBillingDescriptionForIncreasedRenewalPrice={
+					showBillingDescriptionForIncreasedRenewalPrice
+				}
+				isExperimentVariant={ isExperimentVariant }
 			>
 				<ComparisonGrid
 					intervalType={ intervalType }