Help Center: clean-up article component (#92866)

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

@@ -1,7 +1,7 @@
 @import "@automattic/typography/styles/variables";
 @import "calypso/assets/stylesheets/shared/mixins/breakpoints";
 
-.help-center-article-content__story-content {
+.help-center-article-content__main {
 	color: var(--color-neutral-70);
 	font-size: $font-body;
 	line-height: 1.7;

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

@@ -18,15 +18,15 @@ const ArticleContent = ( {
 }: ArticleContentProps ) => {
 	const post = { title, link };
 	return (
-		<article className="help-center-article-content__story">
+		<article className="help-center-article-content">
 			{ isLoading || ! post ? (
 				<Placeholders lines={ 8 } />
 			) : (
 				<>
 					<SupportArticleHeader post={ post } isLoading={ false } />
 					<EmbedContainer>
 						<div
-							className="help-center-article-content__story-content"
+							className="help-center-article-content__main"
 							// eslint-disable-next-line react/no-danger
 							dangerouslySetInnerHTML={ { __html: content } }
 						/>

packages/help-center/src/components/help-center-embed-result.tsx → packages/help-center/src/components/help-center-article.tsx

@@ -6,44 +6,62 @@ import { Icon, external } from '@wordpress/icons';
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useHelpCenterContext } from '../contexts/HelpCenterContext';
+import { usePostByKey, useSupportArticleAlternatePostKey } from '../hooks';
 import { BackButton } from './back-button';
 import { BackToTopButton } from './back-to-top-button';
-import ArticleFetchingContent from './help-center-article-fetching-content';
+import ArticleContent from './help-center-article-content';
 
-export const HelpCenterEmbedResult: React.FC = () => {
-	const { search } = useLocation();
+export const HelpCenterArticle: React.FC = () => {
+	const { search, key } = useLocation();
 	const navigate = useNavigate();
 	const { sectionName } = useHelpCenterContext();
 
 	const params = new URLSearchParams( search );
-	const postId = params.get( 'postId' );
+	const postId = Number( params.get( 'postId' ) );
 	const blogId = params.get( 'blogId' ) ?? undefined;
-	const canNavigateBack = params.get( 'canNavigateBack' ) === 'true';
-	const link = params.get( 'link' );
+	const articleUrl = params.get( 'link' ) ?? undefined;
 	const query = params.get( 'query' );
+	const postKey = useSupportArticleAlternatePostKey( blogId, postId );
+	const post = usePostByKey( postKey ).data;
+	const isLoading = ! post?.content || ! postKey;
+
+	useEffect( () => {
+		//If a url includes an anchor, let's scroll this into view!
+		if ( articleUrl?.includes( '#' ) && post?.content ) {
+			setTimeout( () => {
+				const anchorId = articleUrl.split( '#' ).pop();
+				if ( anchorId ) {
+					const element = document.getElementById( anchorId );
+					if ( element ) {
+						element.scrollIntoView();
+					}
+				}
+			}, 0 );
+		}
+	}, [ articleUrl, post ] );
 
 	useEffect( () => {
 		const tracksData = {
 			search_query: query,
 			force_site_id: true,
 			location: 'help-center',
 			section: sectionName,
-			result_url: link,
+			result_url: articleUrl,
 			post_id: postId,
 			blog_id: blogId,
 		};
 
 		recordTracksEvent( `calypso_inlinehelp_article_open`, tracksData );
-	}, [ query, link, sectionName, postId, blogId ] );
+	}, [ query, articleUrl, sectionName, postId, blogId ] );
 
 	const redirectBack = () => {
 		recordTracksEvent( `calypso_inlinehelp_navigate_back`, {
-			result_url: link,
+			result_url: articleUrl,
 			post_id: postId,
 			blog_id: blogId,
 			search_query: query,
 		} );
-		if ( canNavigateBack ) {
+		if ( key === 'default' ) {
 			navigate( -1 );
 		} else if ( query ) {
 			navigate( `/?query=${ query }` );
@@ -58,7 +76,7 @@ export const HelpCenterEmbedResult: React.FC = () => {
 			force_site_id: true,
 			location: 'help-center',
 			section: sectionName,
-			result_url: link,
+			result_url: articleUrl,
 			post_id: postId,
 			blog_id: blogId,
 		};
@@ -68,25 +86,34 @@ export const HelpCenterEmbedResult: React.FC = () => {
 
 	return (
 		<>
-			<div className="help-center-embed-result__header">
+			<div className="help-center-article__header">
 				<Flex justify="space-between">
 					<FlexItem>
 						<BackButton onClick={ redirectBack } />
 					</FlexItem>
 					<FlexItem>
 						<Button
-							href={ link ?? '' }
+							href={ articleUrl }
 							target="_blank"
 							onClick={ recordTracksAndRedirect }
-							className="help-center-embed-result__external-button"
+							className="help-center-article__external-button"
 						>
 							<Icon icon={ external } size={ 20 } />
 						</Button>
 					</FlexItem>
 				</Flex>
 			</div>
-			<div className="help-center-embed-result">
-				<ArticleFetchingContent articleUrl={ link } postId={ +( postId || 0 ) } blogId={ blogId } />
+			<div className="help-center-article">
+				<ArticleContent
+					content={ post?.content }
+					title={ post?.title }
+					link={ post?.link }
+					isLoading={ isLoading }
+					postId={ postId }
+					blogId={ blogId }
+					slug={ post?.slug }
+					articleUrl={ articleUrl }
+				/>
 			</div>
 			<BackToTopButton />
 		</>

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

@@ -189,8 +189,6 @@ export const HelpCenterContactForm = ( props: HelpCenterContactFormProps ) => {
 		( event: React.MouseEvent< HTMLAnchorElement, MouseEvent >, result: SearchResult ) => {
 			event.preventDefault();
 
-			const navigatingFromGPTResponse = mode === 'FORUM' && showingGPTResponse;
-
 			// if result.post_id isn't set then open in a new window
 			if ( ! result.post_id ) {
 				const tracksData = {
@@ -211,7 +209,6 @@ export const HelpCenterContactForm = ( props: HelpCenterContactFormProps ) => {
 				postId: String( result.post_id ),
 				query: debouncedMessage || '',
 				title: preventWidows( decodeEntities( result.title ) ),
-				...( navigatingFromGPTResponse ? { canNavigateBack: 'true' } : {} ),
 			} );
 
 			if ( result.blog_id ) {

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

@@ -15,9 +15,9 @@ import { Route, Routes, useLocation, Navigate, useNavigate } from 'react-router-
 import { useHelpCenterContext } from '../contexts/HelpCenterContext';
 import { useShouldUseWapuu } from '../hooks';
 import { HELP_CENTER_STORE } from '../stores';
+import { HelpCenterArticle } from './help-center-article';
 import { HelpCenterContactForm } from './help-center-contact-form';
 import { HelpCenterContactPage } from './help-center-contact-page';
-import { HelpCenterEmbedResult } from './help-center-embed-result';
 import { HelpCenterOdie } from './help-center-odie';
 import { HelpCenterSearch } from './help-center-search';
 import { SuccessScreen } from './ticket-success-screen';
@@ -124,7 +124,7 @@ const HelpCenterContent: React.FC< { isRelative?: boolean; currentRoute?: string
 							)
 						}
 					/>
-					<Route path="/post" element={ <HelpCenterEmbedResult /> } />
+					<Route path="/post" element={ <HelpCenterArticle /> } />
 					<Route path="/contact-options" element={ <HelpCenterContactPage /> } />
 					<Route
 						path="/contact-form"

packages/help-center/src/components/help-center-search.scss

@@ -377,23 +377,23 @@
  	 * ARTICLE EMBED
  	 */
 
-	.help-center-embed-result__header {
+	.help-center-article__header {
 		top: 0;
 		background: var(--color-surface);
 		position: sticky;
 		z-index: 99;
 		border-bottom: 1px solid var(--studio-gray-0);
 		padding: 0 10px;
 
-		.help-center-embed-result__external-button {
+		.help-center-article__external-button {
 			display: flex;
 			align-items: center;
 		}
 	}
-	.help-center-embed-result article.help-center-article-content__story {
+	.help-center-article article.help-center-article-content {
 		padding: 0 20px 20px;
 
-		h1.support-article-dialog__header-title > a {
+		h1.help-center-article-content__header-title > a {
 			text-decoration: none;
 			clear: none;
 			color: var(--color-neutral-70);
@@ -436,7 +436,7 @@
 			border-color: inherit;
 		}
 
-		a:not(.support-article-dialog__header-title-link) {
+		a:not(.help-center-article-content__header-title-link) {
 			text-decoration: none;
 		}
 
@@ -492,7 +492,7 @@
 			color: var(--studio-yellow-20);
 		}
 
-		.support-article-dialog__header {
+		.help-center-article-content__header {
 			margin-bottom: 0;
 		}
 

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

@@ -8,14 +8,14 @@ export const SupportArticleHeader = ( {
 	isLoading: boolean;
 } ) =>
 	isLoading || ! post ? (
-		<div className="support-article-dialog__header is-placeholder">
-			<h1 className="support-article-dialog__header-title is-placeholder">Post loading…</h1>
+		<div className="help-center-article-content__header is-placeholder">
+			<h1 className="help-center-article-content__header-title is-placeholder">Post loading…</h1>
 		</div>
 	) : (
-		<div className="support-article-dialog__header">
-			<h1 className="support-article-dialog__header-title">
+		<div className="help-center-article-content__header">
+			<h1 className="help-center-article-content__header-title">
 				<ExternalLink
-					className="support-article-dialog__header-title-link"
+					className="help-center-article-content__header-title-link"
 					href={ post.link }
 					target="_blank"
 					icon={ false }

packages/help-center/src/hooks/index.ts

@@ -6,3 +6,9 @@ export { default as useChatStatus } from './use-chat-status';
 export { useShouldUseWapuu } from './use-should-use-wapuu';
 export { filterListBySearchTerm } from './use-admin-results';
 export { useActionHooks } from './use-action-hooks';
+export { usePostByKey } from './use-post-by-key';
+export {
+	useSupportArticleAlternatePostKey,
+	useSupportArticleAlternatesQuery,
+	getPostKey,
+} from './use-support-article-alternates-query';