Help Center: Support Experience to 50% of ALL users (#97119)

* New HC to 75% of users

* Add logic to determine Help Center experience usage based on user ID

* Update user ID retrieval method in Help Center Gutenberg component

* Revert to 50

* Back to 75

* Move calculation inside the package

* Uncache auth response

* Back to 50

---------

Co-authored-by: Anthony Grullon <agrullon95@gmail.com>
Co-authored-by: Omar Alshaker <omar@omaralshaker.com>

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

@@ -2,29 +2,18 @@ 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 }
-			shouldUseHelpCenterExperience={
-				! isLoading && experimentAssignment?.variationName === 'treatment'
-			}
-		/>
+		<AsyncLoad require="@automattic/help-center" placeholder={ null } handleClose={ handleClose } />
 	);
 };
 

client/layout/index.jsx

@@ -27,7 +27,6 @@ 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';
@@ -150,9 +149,6 @@ 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;
@@ -173,9 +169,6 @@ 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

@@ -21,6 +21,7 @@ import { HELP_CENTER_STORE } from '../stores';
 import { Container } from '../types';
 import HelpCenterContainer from './help-center-container';
 import HelpCenterSmooch from './help-center-smooch';
+import { isUseHelpCenterExperienceEnabled } from './utils';
 import type { HelpCenterSelect } from '@automattic/data-stores';
 import '../styles.scss';
 
@@ -92,7 +93,8 @@ export default function ContextualizedHelpCenter(
 	props: Container & HelpCenterRequiredInformation
 ) {
 	const shouldUseHelpCenterExperience =
-		config.isEnabled( 'help-center-experience' ) || props.shouldUseHelpCenterExperience;
+		config.isEnabled( 'help-center-experience' ) ||
+		isUseHelpCenterExperienceEnabled( props.currentUser?.ID );
 
 	return (
 		<HelpCenterRequiredContextProvider value={ { ...props, shouldUseHelpCenterExperience } }>

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

@@ -139,3 +139,10 @@ export const matchSupportInteractionId = (
 		return foundMatch;
 	}
 };
+
+export const isUseHelpCenterExperienceEnabled = ( userId: number ): boolean => {
+	if ( ! userId || userId % 100 > 50 ) {
+		return false;
+	}
+	return true;
+};

packages/zendesk-client/src/use-authenticate-zendesk-messaging.ts

@@ -11,6 +11,11 @@ import wpcomRequest, { canAccessWpcomApis } from 'wpcom-proxy-request';
  */
 import type { APIFetchOptions, MessagingAuth, ZendeskAuthType } from './types';
 
+/**
+ * Bump me when the API response structure goes through a breaking change.
+ */
+const VERSION = 'v1';
+
 let isLoggedIn = false;
 
 export function useAuthenticateZendeskMessaging(
@@ -21,7 +26,7 @@ export function useAuthenticateZendeskMessaging(
 	const isTestMode = currentEnvironment !== 'production';
 
 	return useQuery( {
-		queryKey: [ 'getMessagingAuth', type, isTestMode ],
+		queryKey: [ 'getMessagingAuth', VERSION, type, isTestMode ],
 		queryFn: () => {
 			const params = { type, test_mode: String( isTestMode ) };
 			const wpcomParams = new URLSearchParams( params );