Help Center: Refactoring shouldUseHelpCenterExperience (#97352)

* Refactoring shouldUseHelpCenterExperience

* Simplify code

* Unused types

* Refactor again

* Missing refactor

* Refactor

* Fix styling

* Remove unnecessary spread operator

Co-authored-by: Omar Alshaker <[email protected]>

* Update packages/help-center/src/components/help-center-feedback-form.tsx

Co-authored-by: Anthony Grullon <[email protected]>

---------

Co-authored-by: Omar Alshaker <[email protected]>
Co-authored-by: Anthony Grullon <[email protected]>

Author: 3 people

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

@@ -27,12 +27,7 @@ const ArticleContent = ( { isLoading = false, post }: ArticleContentProps ) => {
 							dangerouslySetInnerHTML={ { __html: post.content } }
 							ref={ articleContentRef }
 						/>
-						<HelpCenterFeedbackForm
-							postId={ post.ID }
-							blogId={ post.site_ID }
-							slug={ post.slug }
-							articleUrl={ post.URL }
-						/>
+						<HelpCenterFeedbackForm postId={ post.ID } />
 					</EmbedContainer>
 				</>
 			) }

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

@@ -23,8 +23,7 @@ export function HelpCenterChat( {
 	const navigate = useNavigate();
 	const shouldUseWapuu = useShouldUseWapuu();
 	const preventOdieAccess = ! shouldUseWapuu && ! isUserEligibleForPaidSupport;
-	const { currentUser, site, shouldUseHelpCenterExperience, canConnectToZendesk } =
-		useHelpCenterContext();
+	const { currentUser, site, canConnectToZendesk } = useHelpCenterContext();
 	const { id: conversationId = null } = useParams();
 
 	useEffect( () => {
@@ -37,11 +36,8 @@ export function HelpCenterChat( {
 		}
 	}, [] );
 
-	const odieVersion = null; // Use the default version specified on the back-end
-
 	return (
 		<OdieAssistantProvider
-			shouldUseHelpCenterExperience={ shouldUseHelpCenterExperience }
 			currentUser={ currentUser }
 			canConnectToZendesk={ canConnectToZendesk }
 			selectedSiteId={ site?.ID as number }
@@ -51,7 +47,6 @@ export function HelpCenterChat( {
 			extraContactOptions={
 				<ExtraContactOptions isUserEligible={ isUserEligibleForPaidSupport } />
 			}
-			version={ odieVersion }
 		>
 			<div className="help-center__container-chat">
 				<OdieAssistant />

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

@@ -244,33 +244,21 @@ const HelpCenterFooterButton = ( {
 };
 
 export const HelpCenterContactButton: FC = () => {
-	const { shouldUseHelpCenterExperience } = useHelpCenterContext();
 	const { canConnectToZendesk } = useHelpCenterContext();
 	const { __ } = useI18n();
 	const { data: supportInteractionsResolved } = useGetSupportInteractions(
 		'zendesk',
 		100,
-		'resolved',
-		undefined,
-		shouldUseHelpCenterExperience
-	);
-	const { data: supportInteractionsOpen } = useGetSupportInteractions(
-		'zendesk',
-		10,
-		'open',
-		undefined,
-		shouldUseHelpCenterExperience
+		'resolved'
 	);
+	const { data: supportInteractionsOpen } = useGetSupportInteractions( 'zendesk', 10, 'open' );
 
 	const supportInteractions = [
 		...( supportInteractionsResolved || [] ),
 		...( supportInteractionsOpen || [] ),
 	];
 
-	return shouldUseHelpCenterExperience &&
-		canConnectToZendesk &&
-		supportInteractions &&
-		supportInteractions?.length > 0 ? (
+	return canConnectToZendesk && supportInteractions && supportInteractions?.length > 0 ? (
 		<>
 			<HelpCenterFooterButton
 				icon={ comment }

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

@@ -1,45 +1,27 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
-import { getPlan } from '@automattic/calypso-products';
-import { HelpCenterSite } from '@automattic/data-stores';
 import { GetSupport } from '@automattic/odie-client/src/components/message/get-support';
 import { useManageSupportInteraction } from '@automattic/odie-client/src/data';
 import { useI18n } from '@wordpress/react-i18n';
-import { addQueryArgs } from '@wordpress/url';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { v4 as uuidv4 } from 'uuid';
 import { useHelpCenterContext } from '../contexts/HelpCenterContext';
 import { useSupportStatus } from '../data/use-support-status';
 import { useResetSupportInteraction } from '../hooks/use-reset-support-interaction';
 import { ThumbsDownIcon, ThumbsUpIcon } from '../icons/thumbs';
-import HelpCenterContactSupportOption from './help-center-contact-support-option';
 import { generateContactOnClickEvent } from './utils';
 
 import './help-center-feedback-form.scss';
 
-interface HelpCenterFeedbackFormProps {
-	postId: number;
-	blogId?: number | null;
-	slug?: string;
-	articleUrl?: string | null | undefined;
-}
-const HelpCenterFeedbackForm = ( {
-	postId,
-	blogId,
-	slug,
-	articleUrl,
-}: HelpCenterFeedbackFormProps ) => {
+const HelpCenterFeedbackForm = ( { postId }: { postId: number } ) => {
 	const { __ } = useI18n();
 	const [ startedFeedback, setStartedFeedback ] = useState< boolean | null >( null );
 	const [ answerValue, setAnswerValue ] = useState< number | null >( null );
 
 	const { data } = useSupportStatus();
 	const isUserEligibleForPaidSupport = Boolean( data?.eligibility?.is_user_eligible );
-	const { sectionName, site, shouldUseHelpCenterExperience } = useHelpCenterContext();
+	const { site } = useHelpCenterContext();
 	const navigate = useNavigate();
-	const productSlug = ( site as HelpCenterSite )?.plan?.product_slug;
-	const plan = getPlan( productSlug );
-	const productId = plan?.getProductId();
 	const resetSupportInteraction = useResetSupportInteraction();
 	const { startNewInteraction } = useManageSupportInteraction();
 
@@ -54,12 +36,9 @@ const HelpCenterFeedbackForm = ( {
 	};
 
 	const FeedbackButtons = () => {
-		const feedbackButtonsText = shouldUseHelpCenterExperience
-			? __( 'Was this helpful?' )
-			: __( 'Did you find the answer to your question?' );
 		return (
 			<>
-				<p>{ feedbackButtonsText }</p>
+				<p>{ __( 'Was this helpful?', __i18n_text_domain__ ) }</p>
 				<div className="help-center-feedback-form__buttons">
 					<button
 						// 1 is used as `yes` in crowdsignal as well, do not change
@@ -78,34 +57,6 @@ const HelpCenterFeedbackForm = ( {
 		);
 	};
 
-	const feedbackFormUrl = addQueryArgs(
-		'https://wordpressdotcom.survey.fm/helpcenter-articles-feedback',
-		{
-			q_1_choice: answerValue,
-			guide: slug,
-			postId,
-			blogId,
-		}
-	);
-
-	const FeedbackTextArea = () => {
-		if ( shouldUseHelpCenterExperience ) {
-			return <p>{ __( 'Great! Thanks.', __i18n_text_domain__ ) }</p>;
-		}
-		return (
-			<>
-				<p>{ __( 'How we can improve?' ) }</p>
-				<iframe
-					title={ __( 'Feedback Form' ) }
-					// This is the URL of the feedback form,
-					// `answerValue` is either 1 or 2 and it is used to skip the first question since we are already asking it here.
-					// it is necessary to help crowd signal to `skip` ( display none with css ) the first question and save the correct value.
-					src={ feedbackFormUrl }
-				></iframe>
-			</>
-		);
-	};
-
 	const handleContactSupportClick = async () => {
 		generateContactOnClickEvent( 'chat', 'calypso_helpcenter_feedback_contact_support' );
 		if ( isUserEligibleForPaidSupport ) {
@@ -121,35 +72,25 @@ const HelpCenterFeedbackForm = ( {
 	return (
 		<div className="help-center-feedback__form">
 			{ startedFeedback === null && <FeedbackButtons /> }
-			{ startedFeedback !== null && answerValue === 1 && <FeedbackTextArea /> }
-			{ startedFeedback !== null &&
-				answerValue === 2 &&
-				site &&
-				( shouldUseHelpCenterExperience ? (
-					<>
-						<div className="odie-chatbox-dislike-feedback-message">
-							<p>
-								{ __(
-									'Would you like to contact our support team? Select an option below:',
-									__i18n_text_domain__
-								) }
-							</p>
-						</div>
-						<GetSupport
-							onClickAdditionalEvent={ handleContactSupportClick }
-							isUserEligibleForPaidSupport={ isUserEligibleForPaidSupport }
-						/>
-					</>
-				) : (
-					<HelpCenterContactSupportOption
-						sectionName={ sectionName }
-						productId={ productId }
-						site={ site }
-						triggerSource="article-feedback-form"
-						articleUrl={ articleUrl }
-						trackEventName="calypso_helpcenter_feedback_contact_support"
+			{ startedFeedback !== null && answerValue === 1 && (
+				<p>{ __( 'Great! Thanks.', __i18n_text_domain__ ) }</p>
+			) }
+			{ startedFeedback !== null && answerValue === 2 && site && (
+				<>
+					<div className="odie-chatbox-dislike-feedback-message">
+						<p>
+							{ __(
+								'Would you like to contact our support team? Select an option below:',
+								__i18n_text_domain__
+							) }
+						</p>
+					</div>
+					<GetSupport
+						onClickAdditionalEvent={ handleContactSupportClick }
+						isUserEligibleForPaidSupport={ isUserEligibleForPaidSupport }
 					/>
-				) ) }
+				</>
+			) }
 		</div>
 	);
 };

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

@@ -12,7 +12,6 @@ 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';
@@ -109,8 +108,6 @@ const HeaderText = () => {
 		};
 	}, [] );
 
-	const { shouldUseHelpCenterExperience } = useHelpCenterContext();
-
 	useEffect( () => {
 		if ( currentSupportInteraction ) {
 			const zendeskEvent = currentSupportInteraction?.events.find(
@@ -126,27 +123,22 @@ const HeaderText = () => {
 
 	const headerText = useMemo( () => {
 		const getOdieHeader = () => {
-			if ( shouldUseHelpCenterExperience ) {
-				return isConversationWithZendesk
-					? __( 'Support Team', __i18n_text_domain__ )
-					: __( 'Support Assistant', __i18n_text_domain__ );
-			}
-			return __( 'Wapuu', __i18n_text_domain__ );
+			return isConversationWithZendesk
+				? __( 'Support Team', __i18n_text_domain__ )
+				: __( 'Support Assistant', __i18n_text_domain__ );
 		};
 
 		switch ( pathname ) {
 			case '/odie':
 				return getOdieHeader();
 			case '/contact-form':
-				return shouldUseHelpCenterExperience
-					? __( 'Support Assistant', __i18n_text_domain__ )
-					: __( 'Wapuu', __i18n_text_domain__ );
+				return __( 'Support Assistant', __i18n_text_domain__ );
 			case '/chat-history':
 				return __( 'History', __i18n_text_domain__ );
 			default:
 				return __( 'Help Center', __i18n_text_domain__ );
 		}
-	}, [ __, isConversationWithZendesk, pathname, shouldUseHelpCenterExperience ] );
+	}, [ __, isConversationWithZendesk, pathname ] );
 
 	return (
 		<span id="header-text" role="presentation" className="help-center-header__text">
@@ -159,10 +151,7 @@ const Content = ( { onMinimize }: { onMinimize?: () => void } ) => {
 	const { __ } = useI18n();
 	const { pathname } = useLocation();
 
-	const { shouldUseHelpCenterExperience } = useHelpCenterContext();
-
-	const shouldDisplayClearChatButton =
-		shouldUseHelpCenterExperience && pathname.startsWith( '/odie' );
+	const shouldDisplayClearChatButton = pathname.startsWith( '/odie' );
 	const isHelpCenterHome = pathname === '/';
 
 	return (
@@ -194,7 +183,6 @@ const ContentMinimized = ( {
 	const { __ } = useI18n();
 	const formattedUnreadCount = unreadCount > 9 ? '9+' : unreadCount;
 
-	const { shouldUseHelpCenterExperience } = useHelpCenterContext();
 	return (
 		<>
 			<p
@@ -214,14 +202,7 @@ const ContentMinimized = ( {
 					<Route path="/contact-form" element={ <SupportModeTitle /> } />
 					<Route path="/post" element={ <ArticleTitle /> } />
 					<Route path="/success" element={ __( 'Message Submitted', __i18n_text_domain__ ) } />
-					<Route
-						path="/odie"
-						element={
-							shouldUseHelpCenterExperience
-								? __( 'Support Assistant', __i18n_text_domain__ )
-								: __( 'Wapuu', __i18n_text_domain__ )
-						}
-					/>
+					<Route path="/odie" element={ __( 'Support Assistant', __i18n_text_domain__ ) } />
 					<Route path="/chat-history" element={ __( 'History', __i18n_text_domain__ ) } />
 				</Routes>
 				{ unreadCount > 0 && (

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

@@ -189,7 +189,6 @@ function HelpSearchResults( {
 	currentRoute,
 }: HelpSearchResultsProps ) {
 	const { hasPurchases, sectionName, site } = useHelpCenterContext();
-	const { shouldUseHelpCenterExperience } = useHelpCenterContext();
 
 	const adminResults = useAdminResults( searchQuery );
 
@@ -347,7 +346,7 @@ function HelpSearchResults( {
 
 	return (
 		<div className="help-center-search-results" aria-label={ resultsLabel }>
-			{ shouldUseHelpCenterExperience && <HelpCenterRecentConversations /> }
+			<HelpCenterRecentConversations />
 			{ isSearching && ! searchResults.length && <PlaceholderLines lines={ placeholderLines } /> }
 			{ searchQuery && ! ( hasAPIResults || isSearching ) ? (
 				<p className="help-center-search-results__empty-results">

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

@@ -58,8 +58,7 @@ const HelpCenterSmooch: React.FC< { enableAuth: boolean } > = ( { enableAuth } )
 	const { isMessagingScriptLoaded } = useLoadZendeskMessaging(
 		'zendesk_support_chat_key',
 		isEligibleForChat && enableAuth,
-		isEligibleForChat && enableAuth,
-		true
+		isEligibleForChat && enableAuth
 	);
 	const { setIsChatLoaded, setZendeskClientId } = useDataStoreDispatch( HELP_CENTER_STORE );
 	const getUnreadNotifications = useGetUnreadConversations();

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

@@ -20,15 +20,13 @@ 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';
 
 const HelpCenter: React.FC< Container > = ( {
 	handleClose,
 	hidden,
 	currentRoute = window.location.pathname + window.location.search,
-	shouldUseHelpCenterExperience,
 } ) => {
 	const portalParent = useRef( document.createElement( 'div' ) ).current;
 
@@ -80,7 +78,7 @@ const HelpCenter: React.FC< Container > = ( {
 				currentRoute={ currentRoute }
 				openingCoordinates={ openingCoordinates }
 			/>
-			{ shouldUseHelpCenterExperience && canConnectToZendesk && (
+			{ canConnectToZendesk && (
 				<HelpCenterSmooch enableAuth={ isHelpCenterShown || hasOpenZendeskConversations } />
 			) }
 		</>,
@@ -91,11 +89,9 @@ const HelpCenter: React.FC< Container > = ( {
 export default function ContextualizedHelpCenter(
 	props: Container & HelpCenterRequiredInformation
 ) {
-	const shouldUseHelpCenterExperience = isUseHelpCenterExperienceEnabled();
-
 	return (
-		<HelpCenterRequiredContextProvider value={ { ...props, shouldUseHelpCenterExperience } }>
-			<HelpCenter { ...props } shouldUseHelpCenterExperience={ shouldUseHelpCenterExperience } />
+		<HelpCenterRequiredContextProvider value={ props }>
+			<HelpCenter { ...props } />
 		</HelpCenterRequiredContextProvider>
 	);
 }

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

@@ -123,7 +123,3 @@ export const matchSupportInteractionId = (
 		return foundMatch;
 	}
 };
-
-export const isUseHelpCenterExperienceEnabled = (): boolean => {
-	return true;
-};