Help Center: Set the Support Experience experiment (#96549)

* Set the experiment * Fix type error * Use experiment boolean * Commenting out calypso/explat type * Add experiment module back * Move experiment to Calypso * Missing check on zendesk * Code style --------- Co-authored-by: Tony Arcangelini <tony@arcangelini.com> Co-authored-by: Renan <renansscarvalho@gmail.com>
Automattic · Nov 27, 2024 · e186873 · e186873
1 parent 9476cf4
commit e186873
Show file tree

Hide file tree

Showing 13 changed files with 50 additions and 27 deletions.
diff --git a/client/landing/stepper/declarative-flow/internals/components/help-center/async.tsx b/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'
+			}
+		/>
 	);
 };
 

diff --git a/client/layout/index.jsx b/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'
+			}
 		/>
 	);
 }

diff --git a/packages/help-center/src/components/help-center-chat.tsx b/packages/help-center/src/components/help-center-chat.tsx
@@ -3,7 +3,6 @@
  * External Dependencies
  */
 import { recordTracksEvent } from '@automattic/calypso-analytics';
-import config from '@automattic/calypso-config';
 import OdieAssistantProvider, { OdieAssistant } from '@automattic/odie-client';
 import { useEffect } from '@wordpress/element';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -24,7 +23,8 @@ export function HelpCenterChat( {
 	const navigate = useNavigate();
 	const shouldUseWapuu = useShouldUseWapuu();
 	const preventOdieAccess = ! shouldUseWapuu && ! isUserEligibleForPaidSupport;
-	const { currentUser, site, canConnectToZendesk } = useHelpCenterContext();
+	const { currentUser, site, shouldUseHelpCenterExperience, canConnectToZendesk } =
+		useHelpCenterContext();
 	const { id: conversationId = null } = useParams();
 
 	useEffect( () => {
@@ -37,11 +37,11 @@ export function HelpCenterChat( {
 		}
 	}, [] );
 
-	const odieVersion = config.isEnabled( 'help-center-experience' ) ? '14.0.3' : null;
+	const odieVersion = shouldUseHelpCenterExperience ? '14.0.3' : null;
 
 	return (
 		<OdieAssistantProvider
-			shouldUseHelpCenterExperience={ config.isEnabled( 'help-center-experience' ) }
+			shouldUseHelpCenterExperience={ shouldUseHelpCenterExperience }
 			currentUser={ currentUser }
 			canConnectToZendesk={ canConnectToZendesk }
 			selectedSiteId={ site?.ID as number }

diff --git a/packages/help-center/src/components/help-center-contact-page.tsx b/packages/help-center/src/components/help-center-contact-page.tsx
@@ -3,7 +3,6 @@
  * External Dependencies
  */
 import { recordTracksEvent } from '@automattic/calypso-analytics';
-import config from '@automattic/calypso-config';
 import { getPlan } from '@automattic/calypso-products';
 import { Spinner, GMClosureNotice } from '@automattic/components';
 import { HelpCenterSite } from '@automattic/data-stores';
@@ -242,7 +241,7 @@ const HelpCenterFooterButton = ( {
 };
 
 export const HelpCenterContactButton: FC = () => {
-	const shouldUseHelpCenterExperience = config.isEnabled( 'help-center-experience' );
+	const { shouldUseHelpCenterExperience } = useHelpCenterContext();
 	const { canConnectToZendesk } = useHelpCenterContext();
 	const { __ } = useI18n();
 	const { data: supportInteractionsResolved } = useGetSupportInteractions(

diff --git a/packages/help-center/src/components/help-center-feedback-form.tsx b/packages/help-center/src/components/help-center-feedback-form.tsx
@@ -1,5 +1,4 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
-import config from '@automattic/calypso-config';
 import { getPlan } from '@automattic/calypso-products';
 import { HelpCenterSite } from '@automattic/data-stores';
 import { GetSupport } from '@automattic/odie-client/src/components/message/get-support';
@@ -36,9 +35,7 @@ const HelpCenterFeedbackForm = ( {
 
 	const { data } = useSupportStatus();
 	const isUserEligibleForPaidSupport = data?.eligibility.is_user_eligible ?? false;
-
-	const { sectionName, site } = useHelpCenterContext();
-	const shouldUseHelpCenterExperience = config.isEnabled( 'help-center-experience' );
+	const { sectionName, site, shouldUseHelpCenterExperience } = useHelpCenterContext();
 	const navigate = useNavigate();
 	const productSlug = ( site as HelpCenterSite )?.plan?.product_slug;
 	const plan = getPlan( productSlug );

diff --git a/packages/help-center/src/components/help-center-header.tsx b/packages/help-center/src/components/help-center-header.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable no-restricted-imports */
-import config from '@automattic/calypso-config';
 import { Gridicon } from '@automattic/components';
 import { EllipsisMenu } from '@automattic/odie-client';
 import { useManageSupportInteraction } from '@automattic/odie-client/src/data';
@@ -12,6 +11,7 @@ import { useI18n } from '@wordpress/react-i18n';
 import clsx from 'clsx';
 import { Route, Routes, useLocation, useSearchParams } from 'react-router-dom';
 import { v4 as uuidv4 } from 'uuid';
+import { useHelpCenterContext } from '../contexts/HelpCenterContext';
 import { usePostByUrl } from '../hooks';
 import { useResetSupportInteraction } from '../hooks/use-reset-support-interaction';
 import { DragIcon } from '../icons';
@@ -106,7 +106,7 @@ const HeaderText = () => {
 		};
 	}, [] );
 
-	const shouldUseHelpCenterExperience = config.isEnabled( 'help-center-experience' );
+	const { shouldUseHelpCenterExperience } = useHelpCenterContext();
 
 	useEffect( () => {
 		if ( currentSupportInteraction ) {
@@ -156,7 +156,8 @@ const Content = ( { onMinimize }: { onMinimize?: () => void } ) => {
 	const { __ } = useI18n();
 	const { pathname } = useLocation();
 
-	const shouldUseHelpCenterExperience = config.isEnabled( 'help-center-experience' );
+	const { shouldUseHelpCenterExperience } = useHelpCenterContext();
+
 	const shouldDisplayClearChatButton =
 		shouldUseHelpCenterExperience && pathname.startsWith( '/odie' );
 	const isHelpCenterHome = pathname === '/';
@@ -190,6 +191,7 @@ const ContentMinimized = ( {
 	const { __ } = useI18n();
 	const formattedUnreadCount = unreadCount > 9 ? '9+' : unreadCount;
 
+	const { shouldUseHelpCenterExperience } = useHelpCenterContext();
 	return (
 		<>
 			<p
@@ -212,7 +214,7 @@ const ContentMinimized = ( {
 					<Route
 						path="/odie"
 						element={
-							config.isEnabled( 'help-center-experience' )
+							shouldUseHelpCenterExperience
 								? __( 'Support Assistant', __i18n_text_domain__ )
 								: __( 'Wapuu', __i18n_text_domain__ )
 						}

diff --git a/packages/help-center/src/components/help-center-search-results.tsx b/packages/help-center/src/components/help-center-search-results.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable no-restricted-imports */
 import { recordTracksEvent } from '@automattic/calypso-analytics';
-import config from '@automattic/calypso-config';
 import page from '@automattic/calypso-router';
 import { Gridicon } from '@automattic/components';
 import {
@@ -190,7 +189,7 @@ function HelpSearchResults( {
 	currentRoute,
 }: HelpSearchResultsProps ) {
 	const { hasPurchases, sectionName, site } = useHelpCenterContext();
-	const shouldDisplayRecentConversations = config.isEnabled( 'help-center-experience' );
+	const { shouldUseHelpCenterExperience } = useHelpCenterContext();
 
 	const adminResults = useAdminResults( searchQuery );
 
@@ -358,7 +357,7 @@ function HelpSearchResults( {
 				</p>
 			) : null }
 
-			{ shouldDisplayRecentConversations && <HelpCenterRecentConversations /> }
+			{ shouldUseHelpCenterExperience && <HelpCenterRecentConversations /> }
 			{ sections }
 		</div>
 	);

diff --git a/packages/help-center/src/components/help-center-smooch.tsx b/packages/help-center/src/components/help-center-smooch.tsx
@@ -54,7 +54,8 @@ const HelpCenterSmooch: React.FC = () => {
 	const { isMessagingScriptLoaded } = useLoadZendeskMessaging(
 		'zendesk_support_chat_key',
 		isHelpCenterShown && isEligibleForChat,
-		isEligibleForChat
+		isEligibleForChat,
+		true
 	);
 	const { setIsChatLoaded, setUnreadCount, setZendeskClientId } =
 		useDataStoreDispatch( HELP_CENTER_STORE );

diff --git a/packages/help-center/src/components/help-center.tsx b/packages/help-center/src/components/help-center.tsx
@@ -27,9 +27,9 @@ const HelpCenter: React.FC< Container > = ( {
 	handleClose,
 	hidden,
 	currentRoute = window.location.pathname + window.location.search,
+	shouldUseHelpCenterExperience,
 } ) => {
 	const portalParent = useRef( document.createElement( 'div' ) ).current;
-	const shouldUseHelpCenterExperience = config.isEnabled( 'help-center-experience' );
 
 	const { isHelpCenterShown, isMinimized } = useSelect( ( select ) => {
 		const helpCenterSelect: HelpCenterSelect = select( HELP_CENTER_STORE );
@@ -82,9 +82,12 @@ const HelpCenter: React.FC< Container > = ( {
 export default function ContextualizedHelpCenter(
 	props: Container & HelpCenterRequiredInformation
 ) {
+	const shouldUseHelpCenterExperience =
+		config.isEnabled( 'help-center-experience' ) || props.shouldUseHelpCenterExperience;
+
 	return (
-		<HelpCenterRequiredContextProvider value={ props }>
-			<HelpCenter { ...props } />
+		<HelpCenterRequiredContextProvider value={ { ...props, shouldUseHelpCenterExperience } }>
+			<HelpCenter { ...props } shouldUseHelpCenterExperience={ shouldUseHelpCenterExperience } />
 		</HelpCenterRequiredContextProvider>
 	);
 }
diff --git a/packages/help-center/src/contexts/HelpCenterContext.tsx b/packages/help-center/src/contexts/HelpCenterContext.tsx
@@ -13,6 +13,7 @@ export type HelpCenterRequiredInformation = {
 	googleMailServiceFamily: string;
 	onboardingUrl: string;
 	canConnectToZendesk: boolean;
+	shouldUseHelpCenterExperience?: boolean;
 };
 
 const HelpCenterRequiredContext = createContext< HelpCenterRequiredInformation >( {
@@ -35,6 +36,7 @@ const HelpCenterRequiredContext = createContext< HelpCenterRequiredInformation >
 	googleMailServiceFamily: '',
 	onboardingUrl: '',
 	canConnectToZendesk: false,
+	shouldUseHelpCenterExperience: false,
 } );
 
 export const HelpCenterRequiredContextProvider: React.FC< {

diff --git a/packages/help-center/src/types.ts b/packages/help-center/src/types.ts
@@ -9,6 +9,7 @@ export interface Container {
 	hidden?: boolean;
 	currentRoute?: string;
 	openingCoordinates?: ReturnType< typeof useOpeningCoordinates >;
+	shouldUseHelpCenterExperience?: boolean;
 }
 
 export interface PostObject {

diff --git a/packages/odie-client/src/context/index.tsx b/packages/odie-client/src/context/index.tsx
@@ -1,5 +1,4 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
-import config from '@automattic/calypso-config';
 import { useResetSupportInteraction } from '@automattic/help-center/src/hooks/use-reset-support-interaction';
 import { HELP_CENTER_STORE } from '@automattic/help-center/src/stores';
 import { useSelect } from '@wordpress/data';
@@ -70,6 +69,7 @@ export const OdieAssistantProvider: React.FC< OdieAssistantProviderProps > = ( {
 	version = null,
 	currentUser,
 	children,
+	shouldUseHelpCenterExperience,
 } ) => {
 	const { botNameSlug, isMinimized, isChatLoaded } = useSelect( ( select ) => {
 		const store = select( HELP_CENTER_STORE ) as HelpCenterSelect;
@@ -91,7 +91,7 @@ export const OdieAssistantProvider: React.FC< OdieAssistantProviderProps > = ( {
 	 */
 	const { mainChatState, setMainChatState } = useGetCombinedChat(
 		canConnectToZendesk,
-		config.isEnabled( 'help-center-experience' )
+		shouldUseHelpCenterExperience
 	);
 
 	/**
@@ -188,7 +188,7 @@ export const OdieAssistantProvider: React.FC< OdieAssistantProviderProps > = ( {
 				setChatStatus,
 				setMessageLikedStatus,
 				setWaitAnswerToFirstMessageFromHumanSupport,
-				shouldUseHelpCenterExperience: config.isEnabled( 'help-center-experience' ),
+				shouldUseHelpCenterExperience: shouldUseHelpCenterExperience ?? false,
 				trackEvent,
 				version: overriddenVersion,
 				waitAnswerToFirstMessageFromHumanSupport,

diff --git a/packages/zendesk-client/src/use-load-zendesk-messaging.ts b/packages/zendesk-client/src/use-load-zendesk-messaging.ts
@@ -14,13 +14,14 @@ import type { ZendeskConfigName } from './types';
 export function useLoadZendeskMessaging(
 	keyConfigName: ZendeskConfigName,
 	enabled = true,
-	tryAuthenticating = true
+	tryAuthenticating = true,
+	shouldUseHelpCenterExperience = false
 ) {
 	const [ isMessagingScriptLoaded, setMessagingScriptLoaded ] = useState( false );
 	const zendeskKey: string = config( keyConfigName );
 	const { data: authData } = useAuthenticateZendeskMessaging(
 		isMessagingScriptLoaded && tryAuthenticating,
-		config.isEnabled( 'help-center-experience' ) ? 'messenger' : 'zendesk'
+		shouldUseHelpCenterExperience ? 'messenger' : 'zendesk'
 	);
 	useEffect( () => {
 		if ( ! enabled || isMessagingScriptLoaded ) {