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 index d049c27e766652..cecaf4f46709c2 100644 --- 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 index 202a7c2e8b26b0..ef251026e2937f 100644 --- 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 = ( +