Jetpack AI: Update sidebar fair usage messaging (#39122)

* Export the FairUsageNotice so we can use it outside the QuotaExceeded component logic * Rename flag to make clear it is used for the fair usage notice * Change position of fair usage notice on the sidebar, moving to top * Add fair usage notice on the AI Assistant block inspector * Add muted variant to the fair usage notice * Use muted variant of fair usage message on block inspector and sidebar * Fix links colors to use the same color as the text * Changelog
Automattic · Aug 28, 2024 · 6f04b20 · 6f04b20
1 parent beee5c1
commit 6f04b20
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 19 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-jetpack-ai-update-sidebar-fair-usage-messaging b/projects/plugins/jetpack/changelog/update-jetpack-ai-update-sidebar-fair-usage-messaging
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Jetpack AI: update fair usage messaging on the sidebar.
diff --git a/...lugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/index.tsx b/...lugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/index.tsx
@@ -266,17 +266,36 @@ const VIPUpgradePrompt = ( {
 	);
 };
 
+type FairUsageNoticeProps = {
+	variant?: 'error' | 'muted';
+};
+
 /**
  * The fair usage notice component.
+ * @param {FairUsageNoticeProps}         props         - Fair usage notice component props.
+ * @param {FairUsageNoticeProps.variant} props.variant - The variant of the notice to render.
  * @return {ReactElement} the Notice component with the fair usage message.
  */
-const FairUsageNotice = () => {
+export const FairUsageNotice = ( { variant = 'error' }: FairUsageNoticeProps ) => {
 	const useFairUsageNoticeMessageElement = useFairUsageNoticeMessage();
-	return (
-		<Notice status="error" isDismissible={ false } className="jetpack-ai-fair-usage-notice">
-			{ useFairUsageNoticeMessageElement }
-		</Notice>
-	);
+
+	if ( variant === 'muted' ) {
+		return (
+			<span className="jetpack-ai-fair-usage-notice-muted-variant">
+				{ useFairUsageNoticeMessageElement }
+			</span>
+		);
+	}
+
+	if ( variant === 'error' ) {
+		return (
+			<Notice status="error" isDismissible={ false } className="jetpack-ai-fair-usage-notice">
+				{ useFairUsageNoticeMessageElement }
+			</Notice>
+		);
+	}
+
+	return null;
 };
 
 const QuotaExceededMessage = props => {

diff --git a/...ugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/style.scss b/...ugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/style.scss
@@ -12,3 +12,24 @@
         }
     }
 }
+
+.jetpack-ai-fair-usage-notice-muted-variant {
+    line-height: 1.4;
+    margin: 0px;
+    text-wrap: pretty;
+    font-size: calc(13px);
+    font-weight: normal;
+    color: #757575;
+
+    a {
+        color: #757575;
+    }
+}
+
+.jetpack-ai-fair-usage-notice {
+    color: #1E1E1E;
+
+    a {
+        color: #1E1E1E;
+    }
+}
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js b/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js
@@ -29,7 +29,7 @@ import { USAGE_PANEL_PLACEMENT_BLOCK_SETTINGS_SIDEBAR } from '../../plugins/ai-a
 import { PLAN_TYPE_FREE, PLAN_TYPE_UNLIMITED, usePlanType } from '../../shared/use-plan-type';
 import ConnectPrompt from './components/connect-prompt';
 import FeedbackControl from './components/feedback-control';
-import QuotaExceededMessage from './components/quota-exceeded-message';
+import QuotaExceededMessage, { FairUsageNotice } from './components/quota-exceeded-message';
 import ToolbarControls from './components/toolbar-controls';
 import { getStoreBlockId } from './extensions/ai-assistant/with-ai-assistant';
 import useAIAssistant from './hooks/use-ai-assistant';
@@ -323,6 +323,10 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 		</>
 	);
 
+	const fairUsageNotice = (
+		<>{ isOverLimit && planType === PLAN_TYPE_UNLIMITED && <FairUsageNotice variant="muted" /> }</>
+	);
+
 	const trackUpgradeClick = useCallback(
 		event => {
 			event.preventDefault();
@@ -354,6 +358,12 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 					</div>
 				) }
 				<InspectorControls>
+					{ fairUsageNotice && (
+						<div className="block-editor-block-card" style={ { paddingTop: 0 } }>
+							<span className="block-editor-block-icon"></span>
+							{ fairUsageNotice }
+						</div>
+					) }
 					{ /* Mock BlockCard component styles to keep alignment */ }
 					<div className="block-editor-block-card" style={ { paddingTop: 0 } }>
 						<span className="block-editor-block-icon"></span>

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
@@ -14,7 +14,7 @@ import React from 'react';
 /**
  * Internal dependencies
  */
-import QuotaExceededMessage from '../../../../blocks/ai-assistant/components/quota-exceeded-message';
+import { FairUsageNotice } from '../../../../blocks/ai-assistant/components/quota-exceeded-message';
 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';
@@ -66,7 +66,7 @@ const JetpackAndSettingsContent = ( {
 	requireUpgrade,
 	upgradeType,
 	showUsagePanel,
-	showQuotaExceeded,
+	showFairUsageNotice,
 }: JetpackSettingsContentProps ) => {
 	const { checkoutUrl } = useAICheckout();
 	const { productPageUrl } = useAiProductPage();
@@ -80,6 +80,14 @@ const JetpackAndSettingsContent = ( {
 
 	return (
 		<>
+			{ showFairUsageNotice && (
+				<PanelRow className="jetpack-ai-sidebar__feature-section">
+					<BaseControl>
+						<FairUsageNotice variant="muted" />
+					</BaseControl>
+				</PanelRow>
+			) }
+
 			{ isBreveAvailable && (
 				<PanelRow>
 					<BaseControl label={ __( 'Write Brief with AI (BETA)', 'jetpack' ) }>
@@ -119,12 +127,6 @@ const JetpackAndSettingsContent = ( {
 				</PanelRow>
 			) }
 
-			{ showQuotaExceeded && (
-				<PanelRow>
-					<QuotaExceededMessage />
-				</PanelRow>
-			) }
-
 			<PanelRow>
 				<ExternalLink href="https://jetpack.com/redirect/?source=jetpack-ai-feedback">
 					{ __( 'Provide feedback', 'jetpack' ) }
@@ -179,7 +181,7 @@ export default function AiAssistantPluginSidebar() {
 
 	const showUsagePanel =
 		planType === PLAN_TYPE_FREE || ( tierPlansEnabled && planType !== PLAN_TYPE_UNLIMITED );
-	const showQuotaExceeded = planType === PLAN_TYPE_UNLIMITED && isOverLimit;
+	const showFairUsageNotice = planType === PLAN_TYPE_UNLIMITED && isOverLimit;
 
 	return (
 		<>
@@ -198,7 +200,7 @@ export default function AiAssistantPluginSidebar() {
 						requireUpgrade={ requireUpgrade }
 						upgradeType={ upgradeType }
 						showUsagePanel={ showUsagePanel }
-						showQuotaExceeded={ showQuotaExceeded }
+						showFairUsageNotice={ showFairUsageNotice }
 					/>
 				</PanelBody>
 			</JetpackPluginSidebar>
@@ -213,7 +215,7 @@ export default function AiAssistantPluginSidebar() {
 					requireUpgrade={ requireUpgrade }
 					upgradeType={ upgradeType }
 					showUsagePanel={ showUsagePanel }
-					showQuotaExceeded={ showQuotaExceeded }
+					showFairUsageNotice={ showFairUsageNotice }
 				/>
 			</PluginDocumentSettingPanel>
 

diff --git a/...ck/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/types.ts b/...ck/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/types.ts
@@ -5,7 +5,7 @@ export type JetpackSettingsContentProps = {
 	requireUpgrade: boolean;
 	upgradeType: string;
 	showUsagePanel: boolean;
-	showQuotaExceeded: boolean;
+	showFairUsageNotice: boolean;
 };
 
 export type CoreSelect = {