Experiment: visibility of plans on plans page

client/my-sites/plans-features-main/index.tsx

@@ -7,7 +7,7 @@ import {
 	PLAN_PERSONAL,
 	PLAN_FREE,
 	type PlanSlug,
-	UrlFriendlyTermType,
+	type UrlFriendlyTermType,
 	isValidFeatureKey,
 	getFeaturesList,
 	isWooExpressPlan,
@@ -16,6 +16,7 @@ import {
 	getPlanFeaturesGroupedForComparisonGrid,
 	getWooExpressFeaturesGroupedForFeaturesGrid,
 	getSimplifiedPlanFeaturesGroupedForFeaturesGrid,
+	isWpcomEnterpriseGridPlan,
 } from '@automattic/calypso-products';
 import page from '@automattic/calypso-router';
 import { Button, Spinner } from '@automattic/components';
@@ -52,6 +53,7 @@ import QuerySites from 'calypso/components/data/query-sites';
 import { retargetViewPlans } from 'calypso/lib/analytics/ad-tracking';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { planItem as getCartItemForPlan } from 'calypso/lib/cart-values/cart-items';
+import { useExperiment } from 'calypso/lib/explat';
 import scrollIntoViewport from 'calypso/lib/scroll-into-viewport';
 import PlanNotice from 'calypso/my-sites/plans-features-main/components/plan-notice';
 import { shouldForceDefaultPlansBasedOnIntent } from 'calypso/my-sites/plans-features-main/components/utils/utils';
@@ -333,6 +335,19 @@ const PlansFeaturesMain = ( {
 	const isTargetedAdminIntent = ! isInSignup && intent === 'plans-default-wpcom';
 	const showSimplifiedFeatures = isTargetedSignupFlow || isTargetedAdminIntent;
 
+	const [ isLoadingHideLowerTierPlansExperiment, hideLowerTierPlansExperimentAssignment ] =
+		useExperiment( 'calypso_pricing_grid_hide_lower_tier_plans', {
+			/**
+			 * Eligible for the experiment only if the user is on the /plans page and
+			 * the user is on a paid plan.
+			 */
+			isEligible:
+				! isInSignup &&
+				intent === 'plans-default-wpcom' &&
+				currentPlan &&
+				! isFreePlan( currentPlan.planSlug ),
+		} );
+
 	const eligibleForFreeHostingTrial = useSelector( isUserEligibleForFreeHostingTrial );
 
 	// TODO: We should move the modal logic into a data store
@@ -428,13 +443,20 @@ const PlansFeaturesMain = ( {
 	// when `deemphasizeFreePlan` is enabled, the Free plan will be presented as a CTA link instead of a plan card in the features grid.
 	const gridPlansForFeaturesGrid = useMemo(
 		() =>
-			gridPlansForFeaturesGridRaw?.filter( ( { planSlug } ) => {
+			gridPlansForFeaturesGridRaw?.filter( ( { planSlug, availableForPurchase, current } ) => {
 				if ( deemphasizeFreePlan ) {
 					return planSlug !== PLAN_FREE;
 				}
+				if ( 'treatment' === hideLowerTierPlansExperimentAssignment?.variationName ) {
+					return current || availableForPurchase || isWpcomEnterpriseGridPlan( planSlug );
+				}
 				return true;
 			} ) ?? null, // optional chaining can result in `undefined`; we don't want to introduce it here.
-		[ gridPlansForFeaturesGridRaw, deemphasizeFreePlan ]
+		[
+			gridPlansForFeaturesGridRaw,
+			deemphasizeFreePlan,
+			hideLowerTierPlansExperimentAssignment?.variationName,
+		]
 	);
 
 	// In some cases, the free plan is not an option at all. Make sure not to offer it in the subheader.
@@ -636,7 +658,8 @@ const PlansFeaturesMain = ( {
 		! intent ||
 			! defaultWpcomPlansIntent || // this may be unnecessary, but just in case
 			! gridPlansForFeaturesGrid ||
-			! gridPlansForComparisonGrid
+			! gridPlansForComparisonGrid ||
+			isLoadingHideLowerTierPlansExperiment
 	);
 
 	const isPlansGridReady = ! isLoadingGridPlans && ! resolvedSubdomainName.isLoading;
@@ -815,7 +838,12 @@ const PlansFeaturesMain = ( {
 										coupon={ coupon }
 										currentSitePlanSlug={ sitePlanSlug }
 										generatedWPComSubdomain={ resolvedSubdomainName }
-										gridPlanForSpotlight={ gridPlanForSpotlight }
+										gridPlanForSpotlight={
+											gridPlansForFeaturesGrid.length >= 4 ||
+											hideLowerTierPlansExperimentAssignment?.variationName !== 'treatment'
+												? gridPlanForSpotlight
+												: undefined
+										}
 										gridPlans={ gridPlansForFeaturesGrid }
 										hideUnavailableFeatures={ hideUnavailableFeatures }
 										intent={ intent }

packages/plans-grid-next/src/components/features-grid/index.tsx

@@ -260,7 +260,7 @@ const TabletView = ( {
 	const gridPlansWithoutSpotlight = ! gridPlanForSpotlight
 		? renderedGridPlans
 		: renderedGridPlans.filter( ( { planSlug } ) => gridPlanForSpotlight.planSlug !== planSlug );
-	const numberOfPlansToShowOnTop = 4 === gridPlansWithoutSpotlight.length ? 2 : 3;
+	const numberOfPlansToShowOnTop = 4 === gridPlansWithoutSpotlight.length ? 4 : 3;
 	const plansForTopRow = gridPlansWithoutSpotlight.slice( 0, numberOfPlansToShowOnTop );
 	const plansForBottomRow = gridPlansWithoutSpotlight.slice( numberOfPlansToShowOnTop );
 	const tableProps = {