Add experiment assignment to Big Sky before plans

client/landing/stepper/declarative-flow/helpers/use-bigsky-before-plans-experiment.ts

@@ -0,0 +1,33 @@
+import { isEnabled } from '@automattic/calypso-config';
+import { ONBOARDING_FLOW } from '@automattic/onboarding';
+import { useMemo } from 'react';
+import { useExperiment } from 'calypso/lib/explat';
+import { getFlowFromURL } from '../../utils/get-flow-from-url';
+
+// TODO: change the experiment name accordingly
+export const EXPERIMENT_NAME = 'calypso_woo_express_plans_grid_2023';
+
+/**
+ * Check whether the user should have the "Big Sky before plans" onboarding experience.
+ *
+ * Returns [ isLoading, isBigSkyBeforePlans ]
+ */
+export function useBigSkyBeforePlans(): [ boolean, boolean ] {
+	const flow = useMemo( () => getFlowFromURL(), [] );
+
+	const [ isLoading, experimentAssignment ] = useExperiment( EXPERIMENT_NAME, {
+		isEligible: flow === ONBOARDING_FLOW && ! isEnabled( 'onboarding/force-big-sky-before-plan' ),
+	} );
+
+	if ( isEnabled( 'onboarding/force-big-sky-before-plan' ) ) {
+		return [ false, true ];
+	}
+
+	/**
+	 * This fallback is necessary because experimentAssignment returns null when the user
+	 * is not eligible, and we're using this hook within steps that are used by other flows.
+	 */
+	const variationName = experimentAssignment?.variationName ?? 'control';
+
+	return [ isLoading, variationName === 'treatment' ];
+}

client/landing/stepper/declarative-flow/internals/steps-repository/__user/index.tsx

@@ -1,4 +1,3 @@
-import configApi from '@automattic/calypso-config';
 import { OnboardSelect } from '@automattic/data-stores';
 import { isOnboardingFlow, StepContainer } from '@automattic/onboarding';
 import { Button } from '@wordpress/components';
@@ -22,6 +21,7 @@ import WpcomLoginForm from 'calypso/signup/wpcom-login-form';
 import { useSelector } from 'calypso/state';
 import { fetchCurrentUser } from 'calypso/state/current-user/actions';
 import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
+import { useBigSkyBeforePlans } from '../../../helpers/use-bigsky-before-plans-experiment';
 import { Step } from '../../types';
 import { useHandleSocialResponse } from './handle-social-response';
 import { useSocialService } from './use-social-service';
@@ -38,7 +38,7 @@ const UserStepComponent: Step = function UserStep( {
 	const isLoggedIn = useSelector( isUserLoggedIn );
 	const dispatch = useDispatch();
 	const { handleSocialResponse, notice, accountCreateResponse } = useHandleSocialResponse( flow );
-
+	const [ , isBigSkyBeforePlansExperiment ] = useBigSkyBeforePlans();
 	const [ wpAccountCreateResponse, setWpAccountCreateResponse ] = useState< AccountCreateReturn >();
 	const { socialServiceResponse } = useSocialService();
 	const creatingWithBigSky = ( select( ONBOARD_STORE ) as OnboardSelect ).getCreateWithBigSky();
@@ -66,11 +66,7 @@ const UserStepComponent: Step = function UserStep( {
 	} );
 
 	const getSubHeaderText = () => {
-		if (
-			configApi.isEnabled( 'onboarding/big-sky-before-plans' ) &&
-			isOnboardingFlow( flow ) &&
-			creatingWithBigSky
-		) {
+		if ( isBigSkyBeforePlansExperiment && isOnboardingFlow( flow ) && creatingWithBigSky ) {
 			return translate(
 				'Great choice! Pick an option to start building your site with our AI Website Builder.'
 			);

client/landing/stepper/declarative-flow/internals/steps-repository/design-choices/index.tsx

@@ -1,4 +1,3 @@
-import { isEnabled } from '@automattic/calypso-config';
 import { PLAN_PERSONAL } from '@automattic/calypso-products';
 import { OnboardSelect, ProductsList } from '@automattic/data-stores';
 import { themesIllustrationImage } from '@automattic/design-picker';
@@ -14,6 +13,7 @@ import { preventWidows } from 'calypso/lib/formatting';
 import { useIsBigSkyEligible } from '../../../../hooks/use-is-site-big-sky-eligible';
 import { ONBOARD_STORE } from '../../../../stores';
 import kebabCase from '../../../../utils/kebabCase';
+import { useBigSkyBeforePlans } from '../../../helpers/use-bigsky-before-plans-experiment';
 import hiBigSky from './big-sky-no-text-small.png';
 import DesignChoice from './design-choice';
 import type { Step } from '../../types';
@@ -23,8 +23,8 @@ import './style.scss';
  * The design choices step
  */
 const DesignChoicesStep: Step = ( { navigation, flow, stepName } ) => {
-	const isGoalsFirstVariation =
-		isOnboardingFlow( flow ) && isEnabled( 'onboarding/big-sky-before-plans' );
+	const [ , isBigSkyBeforePlansExperiment ] = useBigSkyBeforePlans();
+	const isGoalsFirstVariation = isOnboardingFlow( flow ) && isBigSkyBeforePlansExperiment;
 
 	const translate = useTranslate();
 	const { submit, goBack } = navigation;

client/landing/stepper/declarative-flow/onboarding.ts

@@ -29,6 +29,7 @@ import { useQuery } from '../hooks/use-query';
 import { ONBOARD_STORE, USER_STORE } from '../stores';
 import { getLoginUrl } from '../utils/path';
 import { stepsWithRequiredLogin } from '../utils/steps-with-required-login';
+import { useBigSkyBeforePlans } from './helpers/use-bigsky-before-plans-experiment';
 import { useGoalsFirstExperiment } from './helpers/use-goals-first-experiment';
 import { recordStepNavigation } from './internals/analytics/record-step-navigation';
 import { STEPS } from './internals/steps';
@@ -158,16 +159,12 @@ const onboarding: Flow = {
 		const [ useMyDomainTracksEventProps, setUseMyDomainTracksEventProps ] = useState( {} );
 
 		const [ , isGoalsAtFrontExperiment ] = useGoalsFirstExperiment();
-
+		const [ , isBigSkyBeforePlansExperiment ] = useBigSkyBeforePlans();
 		const { isEligible: isBigSkyEligible } = useIsBigSkyEligible();
 		const isDesignChoicesStepEnabled = isBigSkyEligible && isGoalsAtFrontExperiment;
 
 		const getPostCheckoutDestination = ( providedDependencies: ProvidedDependencies ) => {
-			if (
-				createWithBigSky &&
-				config.isEnabled( 'onboarding/big-sky-before-plans' ) &&
-				isGoalsAtFrontExperiment
-			) {
+			if ( createWithBigSky && isBigSkyBeforePlansExperiment && isGoalsAtFrontExperiment ) {
 				return addQueryArgs( '/setup/site-setup/launch-big-sky', {
 					siteSlug: providedDependencies.siteSlug,
 				} );
@@ -400,7 +397,7 @@ const onboarding: Flow = {
 					return navigate( 'domains' );
 				case 'domains':
 					if ( isGoalsAtFrontExperiment ) {
-						if ( config.isEnabled( 'onboarding/big-sky-before-plans' ) && createWithBigSky ) {
+						if ( isBigSkyBeforePlansExperiment && createWithBigSky ) {
 							return navigate( 'design-choices' );
 						}
 						return navigate( 'designSetup' );
@@ -451,11 +448,13 @@ const onboarding: Flow = {
 		}, [ currentStepSlug, reduxDispatch, resetOnboardStore ] );
 
 		const [ isGoalsFirstExperimentLoading, isGoalsFirstExperiment ] = useGoalsFirstExperiment();
+		const [ isBigSkyExperimentLoading, isBigSkyBeforePlansExperiment ] = useBigSkyBeforePlans();
 		// The personal plan price appears on the design choice step under these conditions. Pre-load it so it doesn't flash into existence
 		const preloadPersonalProduct =
 			! isGoalsFirstExperimentLoading &&
+			! isBigSkyExperimentLoading &&
 			isGoalsFirstExperiment &&
-			config.isEnabled( 'onboarding/big-sky-before-plans' );
+			isBigSkyBeforePlansExperiment;
 
 		useSelect(
 			( select ) =>

client/landing/stepper/hooks/use-is-site-big-sky-eligible.ts

@@ -3,6 +3,7 @@ import { isBusinessPlan, isPremiumPlan } from '@automattic/calypso-products';
 import { Onboard } from '@automattic/data-stores';
 import { useSelect } from '@wordpress/data';
 import userAgent from 'calypso/lib/user-agent';
+import { useBigSkyBeforePlans } from '../declarative-flow/helpers/use-bigsky-before-plans-experiment';
 import { useIsSiteOwner } from '../hooks/use-is-site-owner';
 import { ONBOARD_STORE } from '../stores';
 import { useSite } from './use-site';
@@ -32,8 +33,13 @@ export function useIsBigSkyEligible() {
 
 	const isEligibleGoals = isGoalsBigSkyEligible( goals );
 	const isEligiblePlan = isPremiumPlan( product_slug ) || isBusinessPlan( product_slug );
+	const [ isLoadingBigsky, isBigSkyBeforePlansExperiment ] = useBigSkyBeforePlans();
 
-	if ( config.isEnabled( 'onboarding/big-sky-before-plans' ) ) {
+	if ( isLoadingBigsky ) {
+		return { isLoading: true, isEligible: null };
+	}
+
+	if ( isBigSkyBeforePlansExperiment ) {
 		const eligibilityResult = featureFlagEnabled && isEligibleGoals && onSupportedDevice;
 		return { isLoading: false, isEligible: eligibilityResult };
 	}

config/development.json

@@ -144,7 +144,6 @@
 		"onboarding/trail-map-feature-grid-structure": false,
 		"onboarding/trail-map-feature-grid": false,
 		"onboarding/user-on-stepper-hosting": true,
-		"onboarding/big-sky-before-plans": true,
 		"onboarding/force-goals-first": true,
 		"p2/p2-plus": true,
 		"p2-enabled": false,

config/wpcalypso.json

@@ -118,7 +118,7 @@
 		"onboarding/trail-map-feature-grid-structure": false,
 		"onboarding/trail-map-feature-grid": false,
 		"onboarding/user-on-stepper-hosting": true,
-		"onboarding/big-sky-before-plans": true,
+		"onboarding/force-big-sky-before-plan": true,
 		"onboarding/force-goals-first": true,
 		"p2/p2-plus": true,
 		"p2-enabled": false,