Always display control variant when viewing all plans

Automattic · Sep 16, 2024 · bf19e99 · bf19e99
1 parent c27eb64
commit bf19e99
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 23 deletions.
diff --git a/client/my-sites/plans-features-main/hooks/use-simplified-features-grid-experiment.ts b/client/my-sites/plans-features-main/hooks/use-simplified-features-grid-experiment.ts
@@ -4,7 +4,7 @@ import {
 	SIMPLIFIED_FEATURES_GRID_EXPERIMENT_ID as EXPERIMENT_ID,
 	SimplifiedFeaturesGridExperimentVariant as ExperimentVariant,
 } from '@automattic/calypso-products';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useExperiment } from 'calypso/lib/explat';
 
 interface Params {
@@ -16,11 +16,13 @@ interface Params {
 function useSimplifiedFeaturesGridExperiment( { flowName, isInSignup, intent }: Params ): {
 	isLoading: boolean;
 	variant: ExperimentVariant;
+	setVariantOverride: ( variant: ExperimentVariant | null ) => void;
 } {
 	const isEligibleSignupFlow = isInSignup && flowName === 'onboarding';
 	const isEligibleAdminIntent = ! isInSignup && intent === 'plans-default-wpcom';
 	const isEligible = isEligibleSignupFlow || isEligibleAdminIntent;
 	const [ isLoading, assignment ] = useExperiment( EXPERIMENT_ID, { isEligible } );
+	const [ variantOverride, setVariantOverride ] = useState< ExperimentVariant | null >( null );
 
 	let variant = ( assignment?.variationName ?? 'control' ) as ExperimentVariant;
 
@@ -30,9 +32,13 @@ function useSimplifiedFeaturesGridExperiment( { flowName, isInSignup, intent }:
 		variant = 'simplified';
 	}
 
+	if ( variantOverride ) {
+		variant = variantOverride;
+	}
+
 	useEffect( () => setExperimentVariant( variant ), [ isLoading, variant ] );
 
-	return { isLoading, variant };
+	return { isLoading, variant, setVariantOverride };
 }
 
 export default useSimplifiedFeaturesGridExperiment;
diff --git a/client/my-sites/plans-features-main/index.tsx b/client/my-sites/plans-features-main/index.tsx
@@ -331,6 +331,7 @@ const PlansFeaturesMain = ( {
 	const {
 		isLoading: isLoadingSimplifiedFeaturesGridExperiment,
 		variant: simplifiedFeaturesGridExperimentVariant,
+		setVariantOverride: setSimplifiedFeaturesGridExperimentVariantOverride,
 	} = useSimplifiedFeaturesGridExperiment( {
 		flowName,
 		isInSignup,
@@ -717,6 +718,20 @@ const PlansFeaturesMain = ( {
 		[ simplifiedFeaturesGridExperimentVariant, translate ]
 	);
 
+	const viewAllPlansButton = (
+		<div className="plans-features-main__escape-hatch">
+			<Button
+				borderless
+				onClick={ () => {
+					setSimplifiedFeaturesGridExperimentVariantOverride( 'control' );
+					setForceDefaultPlans( true );
+				} }
+			>
+				{ translate( 'View all plans' ) }
+			</Button>
+		</div>
+	);
+
 	return (
 		<>
 			<div className={ clsx( 'plans-features-main', 'is-pricing-grid-2023-plans-features-main' ) }>
@@ -841,26 +856,14 @@ const PlansFeaturesMain = ( {
 										}
 									/>
 								) }
-								{ showEscapeHatch && hidePlansFeatureComparison && (
-									<div className="plans-features-main__escape-hatch">
-										<Button borderless onClick={ () => setForceDefaultPlans( true ) }>
-											{ translate( 'View all plans' ) }
-										</Button>
-									</div>
-								) }
+								{ showEscapeHatch && hidePlansFeatureComparison && viewAllPlansButton }
 								{ ! hidePlansFeatureComparison && (
 									<>
 										<ComparisonGridToggle
 											onClick={ toggleShowPlansComparisonGrid }
 											label={ getComparisonGridToggleLabel() }
 										/>
-										{ showEscapeHatch && (
-											<div className="plans-features-main__escape-hatch">
-												<Button borderless onClick={ () => setForceDefaultPlans( true ) }>
-													{ translate( 'View all plans' ) }
-												</Button>
-											</div>
-										) }
+										{ showEscapeHatch && viewAllPlansButton }
 										<div
 											ref={ plansComparisonGridRef }
 											className={ comparisonGridContainerClasses }
@@ -916,13 +919,7 @@ const PlansFeaturesMain = ( {
 												onClick={ toggleShowPlansComparisonGrid }
 												label={ translate( 'Hide comparison' ) }
 											/>
-											{ showEscapeHatch && (
-												<div className="plans-features-main__escape-hatch">
-													<Button borderless onClick={ () => setForceDefaultPlans( true ) }>
-														{ translate( 'View all plans' ) }
-													</Button>
-												</div>
-											) }
+											{ showEscapeHatch && viewAllPlansButton }
 										</div>
 									</>
 								) }