Move experiment to Calypso

client/landing/stepper/declarative-flow/internals/components/help-center/async.tsx

@@ -2,18 +2,29 @@ import { HelpCenter } from '@automattic/data-stores';
 import { useDispatch } from '@wordpress/data';
 import { useCallback } from 'react';
 import AsyncLoad from 'calypso/components/async-load';
+import { useExperiment } from 'calypso/lib/explat';
 
 const HELP_CENTER_STORE = HelpCenter.register();
 
 const AsyncHelpCenter = () => {
 	const { setShowHelpCenter } = useDispatch( HELP_CENTER_STORE );
+	const [ isLoading, experimentAssignment ] = useExperiment(
+		'calypso_helpcenter_new_support_flow'
+	);
 
 	const handleClose = useCallback( () => {
 		setShowHelpCenter( false );
 	}, [ setShowHelpCenter ] );
 
 	return (
-		<AsyncLoad require="@automattic/help-center" placeholder={ null } handleClose={ handleClose } />
+		<AsyncLoad
+			require="@automattic/help-center"
+			placeholder={ null }
+			handleClose={ handleClose }
+			shouldUseHelpCenterExperience={
+				! isLoading && experimentAssignment?.variationName === 'treatment'
+			}
+		/>
 	);
 };
 

client/layout/index.jsx

@@ -27,6 +27,7 @@ import EmptyMasterbar from 'calypso/layout/masterbar/empty';
 import MasterbarLoggedIn from 'calypso/layout/masterbar/logged-in';
 import OfflineStatus from 'calypso/layout/offline-status';
 import isA8CForAgencies from 'calypso/lib/a8c-for-agencies/is-a8c-for-agencies';
+import { useExperiment } from 'calypso/lib/explat';
 import { getGoogleMailServiceFamily } from 'calypso/lib/gsuite';
 import isJetpackCloud from 'calypso/lib/jetpack/is-jetpack-cloud';
 import { isWcMobileApp, isWpMobileApp } from 'calypso/lib/mobile-app';
@@ -149,6 +150,9 @@ function HelpCenterLoader( { sectionName, loadHelpCenter, currentRoute } ) {
 	const selectedSite = useSelector( getSelectedSite );
 	const primarySiteSlug = useSelector( getPrimarySiteSlug );
 	const primarySite = useSelector( ( state ) => getSiteBySlug( state, primarySiteSlug ) );
+	const [ isLoading, experimentAssignment ] = useExperiment(
+		'calypso_helpcenter_new_support_flow'
+	);
 
 	if ( ! loadHelpCenter ) {
 		return null;
@@ -169,6 +173,9 @@ function HelpCenterLoader( { sectionName, loadHelpCenter, currentRoute } ) {
 			hidden={ sectionName === 'gutenberg-editor' && isDesktop }
 			onboardingUrl={ onboardingUrl() }
 			googleMailServiceFamily={ getGoogleMailServiceFamily() }
+			shouldUseHelpCenterExperience={
+				! isLoading && experimentAssignment?.variationName === 'treatment'
+			}
 		/>
 	);
 }

packages/help-center/src/components/help-center.tsx

@@ -6,7 +6,6 @@ import { initializeAnalytics } from '@automattic/calypso-analytics';
 import config from '@automattic/calypso-config';
 import { useSelect } from '@wordpress/data';
 import { createPortal, useEffect, useRef } from '@wordpress/element';
-import { useExperiment } from 'calypso/lib/explat';
 /**
  * Internal Dependencies
  */
@@ -83,13 +82,8 @@ const HelpCenter: React.FC< Container > = ( {
 export default function ContextualizedHelpCenter(
 	props: Container & HelpCenterRequiredInformation
 ) {
-	// Just testing with the Stepper experiment
-	const [ isLoadingExperiment, experimentAssignment ] = useExperiment(
-		'calypso_signup_onboarding_stepper_flow_2'
-	);
 	const shouldUseHelpCenterExperience =
-		config.isEnabled( 'help-center-experience' ) ||
-		( ! isLoadingExperiment && experimentAssignment?.variationName === 'stepper' );
+		config.isEnabled( 'help-center-experience' ) || props.shouldUseHelpCenterExperience;
 
 	return (
 		<HelpCenterRequiredContextProvider value={ { ...props, shouldUseHelpCenterExperience } }>

packages/help-center/src/components/index.d.ts

@@ -184,13 +184,3 @@ declare module '*.svg' {
 	const content: string;
 	export default content;
 }
-
-// Can be removed after experiment is removed - shouldUseHelpCenterExperience
-declare module 'calypso/server/lib/logger';
-
-// Can be removed after experiment is removed - shouldUseHelpCenterExperience
-declare module 'calypso/lib/explat' {
-	export const useExperiment: (
-		experimentName: string
-	) => [ boolean, { variationName: string } | undefined ];
-}