Title Optimization: update UI copy based on keywords feature availabi…

…lity (#38911) * Move relevant UI labels to consts * Use the beta flag status to select different labels on UI * Changelog
Automattic · Aug 15, 2024 · f127efd · f127efd
1 parent 05faf89
commit f127efd
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 4 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-title-optimization-update-ui-copy b/projects/plugins/jetpack/changelog/update-title-optimization-update-ui-copy
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+AI Title Optimization: change UI labels when keywords beta flag is enabled.
diff --git a/...k/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx b/...k/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
@@ -17,6 +17,7 @@ import React from 'react';
 import useAICheckout from '../../../../blocks/ai-assistant/hooks/use-ai-checkout';
 import useAiFeature from '../../../../blocks/ai-assistant/hooks/use-ai-feature';
 import useAiProductPage from '../../../../blocks/ai-assistant/hooks/use-ai-product-page';
+import { getFeatureAvailability } from '../../../../blocks/ai-assistant/lib/utils/get-feature-availability';
 import JetpackPluginSidebar from '../../../../shared/jetpack-plugin-sidebar';
 import { FeaturedImage } from '../ai-image';
 import { Breve, registerBreveHighlights, Highlight } from '../breve';
@@ -38,6 +39,9 @@ import type { CoreSelect, JetpackSettingsContentProps } from './types';
 import type * as EditorSelectors from '@wordpress/editor/store/selectors';
 
 const debug = debugFactory( 'jetpack-ai-assistant-plugin:sidebar' );
+/**
+ * TODO: use getFeatureAvailability for all the checks below.
+ */
 // Determine if the usage panel is enabled or not
 const isUsagePanelAvailable =
 	window?.Jetpack_Editor_Initial_State?.available_blocks?.[ 'ai-assistant-usage-panel' ]
@@ -50,6 +54,10 @@ const isAIFeaturedImageAvailable =
 const isAITitleOptimizationAvailable =
 	window?.Jetpack_Editor_Initial_State?.available_blocks?.[ 'ai-title-optimization' ]?.available ||
 	false;
+// Determine if the AI Title Optimization Keywords feature is available
+const isAITitleOptimizationKeywordsFeatureAvailable = getFeatureAvailability(
+	'ai-title-optimization-keywords-support'
+);
 
 const JetpackAndSettingsContent = ( {
 	placement,
@@ -60,6 +68,12 @@ const JetpackAndSettingsContent = ( {
 	const { productPageUrl } = useAiProductPage();
 	const isBreveAvailable = useBreveAvailability();
 
+	const currentTitleOptimizationSectionLabel = __( 'Optimize Publishing', 'jetpack' );
+	const SEOTitleOptimizationSectionLabel = __( 'Optimize Title', 'jetpack' );
+	const titleOptimizationSectionLabel = isAITitleOptimizationKeywordsFeatureAvailable
+		? SEOTitleOptimizationSectionLabel
+		: currentTitleOptimizationSectionLabel;
+
 	return (
 		<>
 			{ isBreveAvailable && (
@@ -78,7 +92,7 @@ const JetpackAndSettingsContent = ( {
 
 			{ isAITitleOptimizationAvailable && (
 				<PanelRow className="jetpack-ai-sidebar__feature-section">
-					<BaseControl label={ __( 'Optimize Publishing', 'jetpack' ) }>
+					<BaseControl label={ titleOptimizationSectionLabel }>
 						<TitleOptimization placement={ placement } busy={ false } disabled={ requireUpgrade } />
 					</BaseControl>
 				</PanelRow>

diff --git a/...ns/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx b/...ns/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx
@@ -10,12 +10,20 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { getFeatureAvailability } from '../../../../blocks/ai-assistant/lib/utils/get-feature-availability';
 import useAutoSaveAndRedirect from '../../../../shared/use-autosave-and-redirect';
 import usePostContent from '../../hooks/use-post-content';
 import AiAssistantModal from '../modal';
 import TitleOptimizationOptions from './title-optimization-options';
 import './style.scss';
 
+/**
+ * Determine if the AI Title Optimization Keywords feature is available.
+ */
+const isKeywordsFeatureAvailable = getFeatureAvailability(
+	'ai-title-optimization-keywords-support'
+);
+
 export default function TitleOptimization( {
 	placement,
 	busy,
@@ -25,7 +33,24 @@ export default function TitleOptimization( {
 	busy: boolean;
 	disabled: boolean;
 } ) {
-	const modalTitle = __( 'Optimize post title', 'jetpack' );
+	const currentModalTitle = __( 'Optimize post title', 'jetpack' );
+	const SEOModalTitle = __( 'Improve title for SEO', 'jetpack' );
+	const modalTitle = isKeywordsFeatureAvailable ? SEOModalTitle : currentModalTitle;
+
+	const currentSidebarDescription = __( 'Use AI to optimize key details of your post.', 'jetpack' );
+	const SEOSidebarDescription = __(
+		'AI suggested titles based on your content and keywords for better SEO results.',
+		'jetpack'
+	);
+	const sidebarDescription = isKeywordsFeatureAvailable
+		? SEOSidebarDescription
+		: currentSidebarDescription;
+
+	const currentSidebarButtonLabel = __( 'Improve title', 'jetpack' );
+	const SEOSidebarButtonLabel = __( 'Improve title for SEO', 'jetpack' );
+	const sidebarButtonLabel = isKeywordsFeatureAvailable
+		? SEOSidebarButtonLabel
+		: currentSidebarButtonLabel;
 
 	const postContent = usePostContent();
 	const [ selected, setSelected ] = useState( null );
@@ -125,14 +150,14 @@ export default function TitleOptimization( {
 
 	return (
 		<div>
-			<p>{ __( 'Use AI to optimize key details of your post.', 'jetpack' ) }</p>
+			<p>{ sidebarDescription }</p>
 			<Button
 				isBusy={ busy }
 				disabled={ ! postContent || disabled }
 				onClick={ handleTitleOptimization }
 				variant="secondary"
 			>
-				{ __( 'Improve title', 'jetpack' ) }
+				{ sidebarButtonLabel }
 			</Button>
 			{ isTitleOptimizationModalVisible && (
 				<AiAssistantModal handleClose={ handleClose } title={ modalTitle } maxWidth={ 512 }>