From cb586d7ad1f47b2a5f0500135b0a58d256d15ac6 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 6 Jan 2025 19:29:56 -0300
Subject: [PATCH] reorganize code, add module status management and CTA states

---
 .../ai-assistant-plugin-sidebar/index.tsx     |  12 +-
 .../components/seo-assistant/index.tsx        | 118 +++++++++---------
 2 files changed, 66 insertions(+), 64 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
index 66878a350339b..304e302a39829 100644
--- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
@@ -72,6 +72,14 @@ const JetpackAndSettingsContent = ( {
 	const { checkoutUrl } = useAICheckout();
 	const { productPageUrl } = useAiProductPage();
 	const isBreveAvailable = getBreveAvailability();
+	const isViewable = useSelect( select => {
+		const postTypeName = select( editorStore ).getCurrentPostType();
+		const postTypeObject = ( select( coreStore ) as unknown as CoreSelect ).getPostType(
+			postTypeName
+		);
+
+		return postTypeObject?.viewable;
+	}, [] );
 
 	const currentTitleOptimizationSectionLabel = __( 'Optimize Publishing', 'jetpack' );
 	const SEOTitleOptimizationSectionLabel = __( 'Optimize Title', 'jetpack' );
@@ -89,7 +97,7 @@ const JetpackAndSettingsContent = ( {
 				</PanelRow>
 			) }
 
-			{ isSeoAssistantEnabled && (
+			{ isSeoAssistantEnabled && isViewable && (
 				<PanelRow
 					className={ `jetpack-ai-sidebar__feature-section ${
 						isBetaExtension( 'ai-seo-assistant' ) ? 'is-beta-extension' : ''
@@ -97,7 +105,7 @@ const JetpackAndSettingsContent = ( {
 				>
 					<BaseControl __nextHasNoMarginBottom={ true }>
 						<BaseControl.VisualLabel>{ __( 'SEO', 'jetpack' ) }</BaseControl.VisualLabel>
-						<SeoAssistant busy={ false } disabled={ false } />
+						<SeoAssistant disabled={ false } />
 					</BaseControl>
 				</PanelRow>
 			) }
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/index.tsx
index 4a2ef9104c105..6bda862f650d7 100644
--- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/index.tsx
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/index.tsx
@@ -1,7 +1,5 @@
+import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
 import { Button, TextControl, SVG, Circle } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
 import {
 	useState,
 	useCallback,
@@ -12,8 +10,9 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import debugFactory from 'debug';
+import { SeoPlaceholder } from '../../../../plugins/seo/components/placeholder';
+import usePostContent from '../../hooks/use-post-content';
 import './style.scss';
-import { CoreSelect } from '../ai-assistant-plugin-sidebar/types';
 
 type StepType = 'input' | 'options' | 'completion';
 
@@ -77,7 +76,7 @@ const TypingMessage = () => {
 	);
 };
 
-export default function SeoAssistant( { busy, disabled, onStep }: SeoAssistantProps ) {
+export default function SeoAssistant( { disabled, onStep }: SeoAssistantProps ) {
 	const [ isOpen, setIsOpen ] = useState( false );
 	const [ currentStep, setCurrentStep ] = useState( 0 );
 	const [ keywords, setKeywords ] = useState( '' );
@@ -86,16 +85,9 @@ export default function SeoAssistant( { busy, disabled, onStep }: SeoAssistantPr
 	const [ messages, setMessages ] = useState< Message[] >( [] );
 	const messagesEndRef = useRef< HTMLDivElement >( null );
 	const [ titleOptions, setTitleOptions ] = useState< Option[] >( [] );
-	// const postContent = usePostContent();
-	// const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } = useModuleStatus( 'seo-tools' );
-	const isViewable = useSelect( select => {
-		const postTypeName = select( editorStore ).getCurrentPostType();
-		const postTypeObject = ( select( coreStore ) as unknown as CoreSelect ).getPostType(
-			postTypeName
-		);
-
-		return postTypeObject?.viewable;
-	}, [] );
+	const postContent = usePostContent();
+	const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } =
+		useModuleStatus( 'seo-tools' );
 
 	const [ metaDescriptionOptions, setMetaDescriptionOptions ] = useState< Option[] >( [] );
 
@@ -398,27 +390,6 @@ export default function SeoAssistant( { busy, disabled, onStep }: SeoAssistantPr
 		setMessages( [] );
 	};
 
-	// If the post type is not viewable, do not render my plugin.
-	if ( ! isViewable ) {
-		return null;
-	}
-
-	if ( ! isOpen ) {
-		return (
-			<div>
-				<p>{ __( 'Improve post engagement.', 'jetpack' ) }</p>
-				<Button
-					onClick={ () => setIsOpen( true ) }
-					variant="secondary"
-					disabled={ disabled }
-					isBusy={ busy }
-				>
-					{ __( 'SEO Assistant', 'jetpack' ) }
-				</Button>
-			</div>
-		);
-	}
-
 	const renderCurrentInput = () => {
 		if ( currentStepData.type === 'input' ) {
 			return (
@@ -490,36 +461,59 @@ export default function SeoAssistant( { busy, disabled, onStep }: SeoAssistantPr
 
 		return null;
 	};
+	debug( isModuleActive, isLoadingModules );
 
 	return (
-		<div className="seo-assistant-wizard">
-			<div className="seo-assistant-wizard__header">
-				<button className="seo-assistant-wizard__back" onClick={ handleBack }>
-					{ __( '←', 'jetpack' ) }
-				</button>
-				<h2>{ currentStepData.title }</h2>
-				<button className="seo-assistant-wizard__skip" onClick={ handleSkip }>
-					{ __( 'Skip', 'jetpack' ) }
-				</button>
-			</div>
-
-			<div className="seo-assistant-wizard__content">
-				<div className="seo-assistant-wizard__messages">
-					{ messages.map( message => (
-						<div
-							key={ message.id }
-							className={ clsx( 'seo-assistant-wizard__message', {
-								'is-user': message.isUser,
-							} ) }
-						>
-							{ message.content }
+		<div>
+			<p>{ __( 'Improve post engagement.', 'jetpack' ) }</p>
+			{ ( isModuleActive || isLoadingModules ) && (
+				<Button
+					onClick={ () => setIsOpen( true ) }
+					variant="secondary"
+					disabled={ isLoadingModules || isOpen || ! postContent.trim?.() || disabled }
+					isBusy={ isLoadingModules || isOpen }
+				>
+					{ __( 'SEO Assistant', 'jetpack' ) }
+				</Button>
+			) }
+			{ ! isModuleActive && ! isLoadingModules && (
+				<SeoPlaceholder
+					isLoading={ isChangingStatus }
+					isModuleActive={ isModuleActive }
+					changeStatus={ changeStatus }
+				/>
+			) }
+			{ isOpen && (
+				<div className="seo-assistant-wizard">
+					<div className="seo-assistant-wizard__header">
+						<button className="seo-assistant-wizard__back" onClick={ handleBack }>
+							{ __( '←', 'jetpack' ) }
+						</button>
+						<h2>{ currentStepData.title }</h2>
+						<button className="seo-assistant-wizard__skip" onClick={ handleSkip }>
+							{ __( 'Skip', 'jetpack' ) }
+						</button>
+					</div>
+
+					<div className="seo-assistant-wizard__content">
+						<div className="seo-assistant-wizard__messages">
+							{ messages.map( message => (
+								<div
+									key={ message.id }
+									className={ clsx( 'seo-assistant-wizard__message', {
+										'is-user': message.isUser,
+									} ) }
+								>
+									{ message.content }
+								</div>
+							) ) }
+							<div ref={ messagesEndRef } />
 						</div>
-					) ) }
-					<div ref={ messagesEndRef } />
-				</div>
 
-				<div className="seo-assistant-wizard__input-container">{ renderCurrentInput() }</div>
-			</div>
+						<div className="seo-assistant-wizard__input-container">{ renderCurrentInput() }</div>
+					</div>
+				</div>
+			) }
 		</div>
 	);
 }