Site Migration: Add A/B test check before showing certain UI/UX updat…

…es (#97572) * Enable A/B test on feature flag * Switch to using experiment only check * Move logic into a hook * Fix tests * Add flow check before we use experimental UI
Automattic · Jan 9, 2025 · 28bcfde · 28bcfde
1 parent a6674aa
commit 28bcfde
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 26 deletions.
diff --git a/client/landing/stepper/declarative-flow/internals/hooks/use-migration-experiment/index.ts b/client/landing/stepper/declarative-flow/internals/hooks/use-migration-experiment/index.ts
@@ -0,0 +1,9 @@
+import { useExperiment } from 'calypso/lib/explat';
+
+export function useMigrationExperiment( flowName: string ) {
+	const [ , experimentAssignment ] = useExperiment(
+		'calypso_signup_onboarding_site_migration_flow_202501_v1'
+	);
+
+	return 'treatment' === experimentAssignment?.variationName && 'site-migration' === flowName;
+}
diff --git a/...epper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx b/...epper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx
@@ -1,4 +1,3 @@
-import config from '@automattic/calypso-config';
 import { PLAN_BUSINESS, getPlan, isWpComBusinessPlan } from '@automattic/calypso-products';
 import { NextButton, StepContainer } from '@automattic/onboarding';
 import { Icon, copy, globe, lockOutline, scheduled } from '@wordpress/icons';
@@ -15,6 +14,7 @@ import { useSite } from 'calypso/landing/stepper/hooks/use-site';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { usePresalesChat } from 'calypso/lib/presales-chat';
 import useHostingProviderName from 'calypso/site-profiler/hooks/use-hosting-provider-name';
+import { useMigrationExperiment } from '../../hooks/use-migration-experiment';
 import FlowCard from '../components/flow-card';
 import { DIYOption } from './diy-option';
 import type { StepProps } from '../../types';
@@ -26,8 +26,8 @@ interface Props extends StepProps {
 }
 
 const SiteMigrationHowToMigrate: FC< Props > = ( props ) => {
-	const { navigation, headerText, stepName, subHeaderText } = props;
-	const isMigrationExperimentEnabled = config.isEnabled( 'migration-flow/experiment' );
+	const { navigation, headerText, stepName, subHeaderText, flow } = props;
+	const isMigrationExperimentEnabled = useMigrationExperiment( flow );
 	const translate = useTranslate();
 	const importSiteQueryParam = useQuery().get( 'from' ) || '';
 	const site = useSite();

diff --git a/.../declarative-flow/internals/steps-repository/site-migration-how-to-migrate/test/index.tsx b/.../declarative-flow/internals/steps-repository/site-migration-how-to-migrate/test/index.tsx
@@ -1,15 +1,14 @@
 /**
  * @jest-environment jsdom
  */
-import config, { isEnabled } from '@automattic/calypso-config';
 import { screen } from '@testing-library/react';
 import { ComponentProps } from 'react';
 import { useSite } from 'calypso/landing/stepper/hooks/use-site';
 import SiteMigrationHowToMigrate from '../';
+import { useMigrationExperiment } from '../../../hooks/use-migration-experiment';
 import { defaultSiteDetails } from '../../launchpad/test/lib/fixtures';
 import { mockStepProps, renderStep, RenderStepOptions } from '../../test/helpers';
 
-const isMigrationExperimentEnabled = isEnabled( 'migration-flow/experiment' );
 const navigation = { submit: jest.fn() };
 
 type Props = ComponentProps< typeof SiteMigrationHowToMigrate >;
@@ -28,17 +27,16 @@ jest.mock( 'calypso/lib/presales-chat', () => ( {
 	usePresalesChat: () => {},
 } ) );
 
-describe( 'SiteMigrationHowToMigrate', () => {
-	beforeAll( () => {
-		config.enable( 'migration-flow/experiment' );
-	} );
+jest.mock(
+	'calypso/landing/stepper/declarative-flow/internals/hooks/use-migration-experiment/index.ts',
+	() => ( {
+		useMigrationExperiment: jest.fn( ( flowName: string ) => flowName === 'site-migration' ),
+	} )
+);
 
-	afterAll( () => {
-		if ( isMigrationExperimentEnabled ) {
-			config.enable( 'migration-flow/experiment' );
-		} else {
-			config.disable( 'migration-flow/experiment' );
-		}
+describe( 'SiteMigrationHowToMigrate', () => {
+	beforeEach( () => {
+		( useMigrationExperiment as jest.Mock ).mockReturnValue( true );
 	} );
 
 	afterEach( () => {

diff --git a/...ing/stepper/declarative-flow/internals/steps-repository/site-migration-identify/index.tsx b/...ing/stepper/declarative-flow/internals/steps-repository/site-migration-identify/index.tsx
@@ -1,4 +1,3 @@
-import config from '@automattic/calypso-config';
 import { StepContainer, Title, SubTitle, HOSTED_SITE_MIGRATION_FLOW } from '@automattic/onboarding';
 import { Icon, next, published, shield } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
@@ -12,6 +11,7 @@ import { useSiteSlug } from 'calypso/landing/stepper/hooks/use-site-slug';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import wpcom from 'calypso/lib/wp';
 import { GUIDED_ONBOARDING_FLOW_REFERRER } from 'calypso/signup/steps/initial-intent/constants';
+import { useMigrationExperiment } from '../../hooks/use-migration-experiment';
 import { useSitePreviewMShotImageHandler } from '../site-migration-instructions/site-preview/hooks/use-site-preview-mshot-image-handler';
 import type { Step } from '../../types';
 import type { UrlData } from 'calypso/blocks/import/types';
@@ -29,8 +29,6 @@ interface HostingDetailsWithIconsProps {
 	}[];
 }
 
-const isMigrationExperimentEnabled = config.isEnabled( 'migration-flow/experiment' );
-
 const HostingDetailsWithIcons: FC< HostingDetailsWithIconsProps > = ( { items } ) => {
 	const translate = useTranslate();
 
@@ -84,9 +82,15 @@ interface Props {
 	onComplete: ( siteInfo: UrlData ) => void;
 	onSkip: () => void;
 	hideImporterListLink: boolean;
+	flowName: string;
 }
 
-export const Analyzer: FC< Props > = ( { onComplete, onSkip, hideImporterListLink = false } ) => {
+export const Analyzer: FC< Props > = ( {
+	onComplete,
+	onSkip,
+	hideImporterListLink = false,
+	flowName,
+} ) => {
 	const translate = useTranslate();
 	const [ siteURL, setSiteURL ] = useState< string >( '' );
 	const {
@@ -96,6 +100,8 @@ export const Analyzer: FC< Props > = ( { onComplete, onSkip, hideImporterListLin
 		isFetched,
 	} = useAnalyzeUrlQuery( siteURL, siteURL !== '' );
 
+	const isMigrationExperimentEnabled = useMigrationExperiment( flowName );
+
 	useEffect( () => {
 		if ( siteInfo ) {
 			onComplete( siteInfo );
@@ -199,7 +205,7 @@ const saveSiteSettings = async ( siteSlug: string, settings: Record< string, unk
 	);
 };
 
-const SiteMigrationIdentify: Step = function ( { navigation, variantSlug } ) {
+const SiteMigrationIdentify: Step = function ( { navigation, variantSlug, flow } ) {
 	const siteSlug = useSiteSlug();
 	const translate = useTranslate();
 	const { createScreenshots } = useSitePreviewMShotImageHandler();
@@ -262,6 +268,7 @@ const SiteMigrationIdentify: Step = function ( { navigation, variantSlug } ) {
 						onSkip={ () => {
 							handleSubmit( 'skip_platform_identification' );
 						} }
+						flowName={ flow }
 					/>
 				}
 				recordTracksEvent={ recordTracksEvent }

diff --git a/...er/declarative-flow/internals/steps-repository/site-migration-import-or-migrate/index.tsx b/...er/declarative-flow/internals/steps-repository/site-migration-import-or-migrate/index.tsx
@@ -1,4 +1,3 @@
-import config from '@automattic/calypso-config';
 import { getPlan, isWpComBusinessPlan, PLAN_BUSINESS } from '@automattic/calypso-products';
 import { BadgeType } from '@automattic/components';
 import { StepContainer } from '@automattic/onboarding';
@@ -12,13 +11,12 @@ import { useMigrationStickerMutation } from 'calypso/data/site-migration/use-mig
 import { useHostingProviderUrlDetails } from 'calypso/data/site-profiler/use-hosting-provider-url-details';
 import { useSite } from 'calypso/landing/stepper/hooks/use-site';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
+import { useMigrationExperiment } from '../../hooks/use-migration-experiment';
 import FlowCard from '../components/flow-card';
 import type { Step } from '../../types';
 import './style.scss';
 
-const isMigrationExperimentEnabled = config.isEnabled( 'migration-flow/experiment' );
-
-const SiteMigrationImportOrMigrate: Step = function ( { navigation } ) {
+const SiteMigrationImportOrMigrate: Step = function ( { navigation, flow } ) {
 	const translate = useTranslate();
 	const site = useSite();
 	const importSiteQueryParam = getQueryArg( window.location.href, 'from' )?.toString() || '';
@@ -31,6 +29,8 @@ const SiteMigrationImportOrMigrate: Step = function ( { navigation } ) {
 
 	let options;
 
+	const isMigrationExperimentEnabled = useMigrationExperiment( flow );
+
 	if ( isMigrationExperimentEnabled ) {
 		const badgeText = isBusinessPlan
 			? translate( 'Included with your plan' )

diff --git a/...stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx b/...stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
@@ -1,4 +1,3 @@
-import config from '@automattic/calypso-config';
 import {
 	PLAN_BUSINESS,
 	PLAN_MIGRATION_TRIAL_MONTHLY,
@@ -20,6 +19,7 @@ import { useSite } from 'calypso/landing/stepper/hooks/use-site';
 import { useSiteSlug } from 'calypso/landing/stepper/hooks/use-site-slug';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { MigrationAssistanceModal } from '../../components/migration-assistance-modal';
+import { useMigrationExperiment } from '../../hooks/use-migration-experiment';
 import type { StepProps } from '../../types';
 import './style.scss';
 
@@ -37,9 +37,10 @@ const SiteMigrationUpgradePlan: FC< Props > = ( {
 	navigation,
 	data,
 	customizedActionButtons,
+	flow,
 	...props
 } ) => {
-	const showVariants = config.isEnabled( 'migration-flow/experiment' );
+	const showVariants = useMigrationExperiment( flow );
 	const { onSkip, skipLabelText, skipPosition } = props;
 	const siteItem = useSite();
 	const siteSlug = useSiteSlug();