Jetpack AI: fair usage quota handling on the UI, part 1 (#39043)

* Add first draft of fair usage notice, for the generic upgrade prompt

* Changelog

* Move the fair usage component closer to the exported component

* Move the fair usage notice to it's own subcomponent

* Rename exported component to a generic name

* Update style to expand to 100% of available width

* Move width rule to the right place to apply only on image modal

* Rename UpgradeMessage component to QuotaExceededMessage

* Fix image modal to disable the UI when the site requires an upgrade

projects/plugins/jetpack/changelog/update-jetpack-ai-handle-fair-usage-quota-messaging

@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Jetpack AI: handle fair usage limit messaging on the UI.

projects/plugins/jetpack/extensions/blocks/ai-assistant/components/upgrade-prompt/index.tsx → projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/index.tsx

@@ -3,6 +3,7 @@
  */
 import { getRedirectUrl } from '@automattic/jetpack-components';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { Notice } from '@wordpress/components';
 import { createInterpolateElement, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import debugFactory from 'debug';
@@ -17,7 +18,7 @@ import { LightNudge } from './light-nudge';
 import type { ReactElement } from 'react';
 import './style.scss';
 
-type UpgradePromptProps = {
+type QuotaExceededMessageProps = {
 	placement?: string;
 	description?: string;
 	useLightNudge?: boolean;
@@ -28,14 +29,14 @@ const debug = debugFactory( 'jetpack-ai-assistant:upgrade-prompt' );
  * The default upgrade prompt for the AI Assistant block, containing the Upgrade button and linking
  * to the checkout page or the Jetpack AI interstitial page.
  *
- * @param {UpgradePromptProps} props - Component props.
+ * @param {QuotaExceededMessageProps} props - Component props.
  * @return {ReactElement} the Nudge component with the prompt.
  */
 const DefaultUpgradePrompt = ( {
 	placement = null,
 	description = null,
 	useLightNudge = false,
-}: UpgradePromptProps ): ReactElement => {
+}: QuotaExceededMessageProps ): ReactElement => {
 	const Nudge = useLightNudge ? LightNudge : StandardNudge;
 
 	const { checkoutUrl } = useAICheckout();
@@ -209,8 +210,28 @@ const VIPUpgradePrompt = ( {
 	);
 };
 
-const UpgradePrompt = props => {
-	const { upgradeType } = useAiFeature();
+/**
+ * The fair usage notice component.
+ * @return {ReactElement} the Notice component with the fair usage message.
+ */
+const FairUsageNotice = () => {
+	return (
+		<Notice status="warning" isDismissible={ false } className="jetpack-ai-fair-usage-notice">
+			{ __(
+				'You exceeded your current quota of requests. Check the usage policy for more information.',
+				'jetpack'
+			) }
+		</Notice>
+	);
+};
+
+const QuotaExceededMessage = props => {
+	const { upgradeType, currentTier } = useAiFeature();
+
+	// Return notice component for the fair usage limit message, on unlimited plans.
+	if ( currentTier?.value === 1 ) {
+		return <FairUsageNotice />;
+	}
 
 	// If the user is on a VIP site, show the VIP upgrade prompt.
 	if ( upgradeType === 'vip' ) {
@@ -223,4 +244,4 @@ const UpgradePrompt = props => {
 	return DefaultUpgradePrompt( props );
 };
 
-export default UpgradePrompt;
+export default QuotaExceededMessage;

projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js

@@ -29,8 +29,8 @@ import { USAGE_PANEL_PLACEMENT_BLOCK_SETTINGS_SIDEBAR } from '../../plugins/ai-a
 import { PLAN_TYPE_FREE, 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 ToolbarControls from './components/toolbar-controls';
-import UpgradePrompt from './components/upgrade-prompt';
 import { getStoreBlockId } from './extensions/ai-assistant/with-ai-assistant';
 import useAIAssistant from './hooks/use-ai-assistant';
 import useAICheckout from './hooks/use-ai-checkout';
@@ -303,7 +303,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 
 	const banner = (
 		<>
-			{ isOverLimit && isSelected && <UpgradePrompt placement="ai-assistant-block" /> }
+			{ isOverLimit && isSelected && <QuotaExceededMessage placement="ai-assistant-block" /> }
 			{ ! connected && <ConnectPrompt /> }
 		</>
 	);

projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/index.tsx

@@ -24,7 +24,7 @@ import React from 'react';
  * Internal dependencies
  */
 import ConnectPrompt from '../../../../components/connect-prompt';
-import UpgradePrompt from '../../../../components/upgrade-prompt';
+import QuotaExceededMessage from '../../../../components/quota-exceeded-message';
 import useAiFeature from '../../../../hooks/use-ai-feature';
 import { isUserConnected } from '../../../../lib/connection';
 import { getJetpackFormCustomPrompt } from '../../../../lib/prompt';
@@ -267,7 +267,7 @@ export default function AiAssistantBar( {
 					} ) }
 					tabIndex={ -1 }
 				>
-					{ siteRequireUpgrade && <UpgradePrompt placement="jetpack-form-block" /> }
+					{ siteRequireUpgrade && <QuotaExceededMessage placement="jetpack-form-block" /> }
 					{ ! connected && <ConnectPrompt /> }
 					<BlockAIControl
 						ref={ inputRef }

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/ai-image-modal.scss

@@ -6,6 +6,10 @@
 		justify-content: center;
 		align-items: center;
 		gap: 8px;
+
+		.jetpack-ai-fair-usage-notice {
+			width: 100%;
+		}
 	}
 
 	&__actions {

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/ai-image-modal.tsx

@@ -9,7 +9,7 @@ import { Icon, external } from '@wordpress/icons';
  * Internal dependencies
  */
 import './ai-image-modal.scss';
-import UpgradePrompt from '../../../../../blocks/ai-assistant/components/upgrade-prompt';
+import QuotaExceededMessage from '../../../../../blocks/ai-assistant/components/quota-exceeded-message';
 import AiAssistantModal from '../../modal';
 import Carrousel, { CarrouselImages } from './carrousel';
 import UsageCounter from './usage-counter';
@@ -98,7 +98,7 @@ export default function AiImageModal( {
 	const costTooltipText = cost === 1 ? costTooltipTextSingular : costTooltipTextPlural;
 
 	// Controllers
-	const instructionsDisabled = notEnoughRequests || generating;
+	const instructionsDisabled = notEnoughRequests || generating || requireUpgrade;
 	const upgradePromptVisible = ( requireUpgrade || notEnoughRequests ) && ! generating;
 	const counterVisible = Boolean( ! isUnlimited && cost && currentLimit );
 	const tryAgainButtonDisabled = ! userPrompt && ! postContent;
@@ -159,7 +159,7 @@ export default function AiImageModal( {
 							</div>
 						</div>
 						{ upgradePromptVisible && (
-							<UpgradePrompt
+							<QuotaExceededMessage
 								description={ upgradeDescription }
 								placement={ FEATURED_IMAGE_UPGRADE_PROMPT_PLACEMENT }
 								useLightNudge={ true }

projects/plugins/jetpack/extensions/plugins/ai-content-lens/extend/ai-post-excerpt/index.tsx

@@ -17,7 +17,7 @@ import { count } from '@wordpress/wordcount';
 /**
  * Internal dependencies
  */
-import UpgradePrompt from '../../../../blocks/ai-assistant/components/upgrade-prompt';
+import QuotaExceededMessage from '../../../../blocks/ai-assistant/components/quota-exceeded-message';
 import useAiFeature from '../../../../blocks/ai-assistant/hooks/use-ai-feature';
 import { isBetaExtension } from '../../../../editor';
 import { AiExcerptControl } from '../../components/ai-excerpt-control';
@@ -236,7 +236,7 @@ ${ postContent }
 					</Notice>
 				) }
 
-				{ isOverLimit && <UpgradePrompt placement="excerpt-panel" /> }
+				{ isOverLimit && <QuotaExceededMessage placement="excerpt-panel" /> }
 
 				<AiExcerptControl
 					words={ excerptWordsNumber }