Jetpack SEO: persist selected option (#41637)

* include for option messages * split step values from selected values, add hasSelection output prop, lower delay mocks * changelog
Automattic · Feb 7, 2025 · 5f5dbb8 · 5f5dbb8
1 parent 50eb9aa
commit 5f5dbb8
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 9 deletions.
diff --git a/projects/plugins/jetpack/changelog/fix-jetpack-seo-persist-selected-option b/projects/plugins/jetpack/changelog/fix-jetpack-seo-persist-selected-option
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Jetpack SEO assistant: persist selected options if they haven't changed
diff --git a/...pack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/assistant-wizard.tsx b/...pack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/assistant-wizard.tsx
@@ -221,7 +221,7 @@ export default function AssistantWizard( { close } ) {
 				) }
 				{ currentStep === 2 && steps[ currentStep ].type === 'options' && (
 					<OptionsInput
-						disabled={ ! steps[ currentStep ].value }
+						disabled={ ! steps[ currentStep ].hasSelection }
 						submitCtaLabel={ steps[ currentStep ].submitCtaLabel }
 						retryCtaLabel={ steps[ currentStep ].retryCtaLabel }
 						handleRetry={ handleRetry }
@@ -230,7 +230,7 @@ export default function AssistantWizard( { close } ) {
 				) }
 				{ currentStep === 3 && steps[ currentStep ].type === 'options' && (
 					<OptionsInput
-						disabled={ ! steps[ currentStep ].value }
+						disabled={ ! steps[ currentStep ].hasSelection }
 						submitCtaLabel={ steps[ currentStep ].submitCtaLabel }
 						retryCtaLabel={ steps[ currentStep ].retryCtaLabel }
 						handleRetry={ handleRetry }

diff --git a/...plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/types.tsx b/...plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/types.tsx
@@ -9,7 +9,7 @@ export interface Message {
 	selected?: boolean;
 }
 
-export type OptionMessage = Pick< Message, 'id' | 'content' >;
+export type OptionMessage = Pick< Message, 'id' | 'content' | 'selected' >;
 
 export interface Results {
 	[ key: string ]: {
@@ -44,4 +44,5 @@ export interface Step {
 	submitCtaLabel?: string;
 	onRetry?: () => void;
 	retryCtaLabel?: string;
+	hasSelection?: boolean;
 }
diff --git a/...k/extensions/plugins/ai-assistant-plugin/components/seo-assistant/use-completion-step.tsx b/...k/extensions/plugins/ai-assistant-plugin/components/seo-assistant/use-completion-step.tsx
@@ -20,7 +20,7 @@ export const useCompletionStep = (): Step => {
 			}
 			setMessages( firstMessages );
 
-			await new Promise( resolve => setTimeout( resolve, 1500 ) );
+			await new Promise( resolve => setTimeout( resolve, 1000 ) );
 
 			const resultsString = Object.values( results )
 				.map( ( result: Results[ string ] ) => `${ result.value ? '✅' : '❌' } ${ result.label }` )

diff --git a/...nsions/plugins/ai-assistant-plugin/components/seo-assistant/use-meta-description-step.tsx b/...nsions/plugins/ai-assistant-plugin/components/seo-assistant/use-meta-description-step.tsx
@@ -13,6 +13,7 @@ import { useMessages } from './wizard-messages';
 import type { Step, OptionMessage } from './types';
 
 export const useMetaDescriptionStep = ( { keywords }: { keywords: string } ): Step => {
+	const [ value, setValue ] = useState< string >();
 	const [ selectedMetaDescription, setSelectedMetaDescription ] = useState< string >();
 	const [ metaDescriptionOptions, setMetaDescriptionOptions ] = useState< OptionMessage[] >( [] );
 	const { messages, setMessages, addMessage, editLastMessage, setSelectedMessage } = useMessages();
@@ -47,6 +48,9 @@ export const useMetaDescriptionStep = ( { keywords }: { keywords: string } ): St
 		( option: OptionMessage ) => {
 			setSelectedMetaDescription( option.content as string );
 			setSelectedMessage( option );
+			setMetaDescriptionOptions( prev =>
+				prev.map( o => ( { ...o, selected: o.id === option.id } ) )
+			);
 		},
 		[ setSelectedMessage ]
 	);
@@ -67,6 +71,7 @@ export const useMetaDescriptionStep = ( { keywords }: { keywords: string } ): St
 	}, [ generatedCount, request ] );
 
 	const handleMetaDescriptionSubmit = useCallback( async () => {
+		setValue( selectedMetaDescription );
 		await editPost( { meta: { advanced_seo_description: selectedMetaDescription } } );
 		addMessage( { content: __( 'Meta description updated! ✅', 'jetpack' ) } );
 		return selectedMetaDescription;
@@ -87,8 +92,8 @@ export const useMetaDescriptionStep = ( { keywords }: { keywords: string } ): St
 						showIcon: true,
 				  };
 			let newMetaDescriptions = [ ...metaDescriptionOptions ];
-			// we only generate if options are empty
 			setMessages( [ initialMessage ] );
+			// we only generate if options are empty
 			if ( newMetaDescriptions.length === 0 ) {
 				newMetaDescriptions = await getMetaDescriptions();
 			}
@@ -133,8 +138,9 @@ export const useMetaDescriptionStep = ( { keywords }: { keywords: string } ): St
 		onRetry: handleMetaDescriptionRegenerate,
 		retryCtaLabel: __( 'Regenerate', 'jetpack' ),
 		onStart: handleMetaDescriptionGenerate,
-		value: selectedMetaDescription,
-		setValue: setSelectedMetaDescription,
+		value,
+		setValue,
 		includeInResults: true,
+		hasSelection: !! selectedMetaDescription,
 	};
 };
diff --git a/...etpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/use-title-step.tsx b/...etpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/use-title-step.tsx
@@ -13,6 +13,7 @@ import { useMessages } from './wizard-messages';
 import type { Step, OptionMessage } from './types';
 
 export const useTitleStep = ( { keywords }: { keywords: string } ): Step => {
+	const [ value, setValue ] = useState< string >( '' );
 	const [ selectedTitle, setSelectedTitle ] = useState< string >( '' );
 	const [ titleOptions, setTitleOptions ] = useState< OptionMessage[] >( [] );
 	const { editPost } = useDispatch( 'core/editor' );
@@ -47,6 +48,7 @@ export const useTitleStep = ( { keywords }: { keywords: string } ): Step => {
 		( option: OptionMessage ) => {
 			setSelectedTitle( option.content as string );
 			setSelectedMessage( option );
+			setTitleOptions( prev => prev.map( o => ( { ...o, selected: o.id === option.id } ) ) );
 		},
 		[ setSelectedMessage ]
 	);
@@ -135,6 +137,7 @@ export const useTitleStep = ( { keywords }: { keywords: string } ): Step => {
 	}, [ addMessage, getTitles, titleOptions ] );
 
 	const handleTitleSubmit = useCallback( async () => {
+		setValue( selectedTitle );
 		await editPost( { title: selectedTitle, meta: { jetpack_seo_html_title: selectedTitle } } );
 		addMessage( { content: __( 'Title updated! ✅', 'jetpack' ) } );
 		return selectedTitle;
@@ -153,8 +156,9 @@ export const useTitleStep = ( { keywords }: { keywords: string } ): Step => {
 		onRetry: handleTitleRegenerate,
 		retryCtaLabel: __( 'Regenerate', 'jetpack' ),
 		onStart: handleTitleGenerate,
-		value: selectedTitle,
-		setValue: setSelectedTitle,
+		value,
+		setValue,
 		includeInResults: true,
+		hasSelection: !! selectedTitle,
 	};
 };