From be94f148a300732e739346c89e61d6348f7230a3 Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Mon, 26 Aug 2024 11:18:45 -0300 Subject: [PATCH] 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 --- ...tpack-ai-handle-fair-usage-quota-messaging | 4 +++ .../index.tsx | 33 +++++++++++++++---- .../light-nudge.tsx | 0 .../style.scss | 0 .../extensions/blocks/ai-assistant/edit.js | 4 +-- .../components/ai-assistant-bar/index.tsx | 4 +-- .../ai-image/components/ai-image-modal.scss | 4 +++ .../ai-image/components/ai-image-modal.tsx | 6 ++-- .../extend/ai-post-excerpt/index.tsx | 4 +-- 9 files changed, 44 insertions(+), 15 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/update-jetpack-ai-handle-fair-usage-quota-messaging rename projects/plugins/jetpack/extensions/blocks/ai-assistant/components/{upgrade-prompt => quota-exceeded-message}/index.tsx (87%) rename projects/plugins/jetpack/extensions/blocks/ai-assistant/components/{upgrade-prompt => quota-exceeded-message}/light-nudge.tsx (100%) rename projects/plugins/jetpack/extensions/blocks/ai-assistant/components/{upgrade-prompt => quota-exceeded-message}/style.scss (100%) diff --git a/projects/plugins/jetpack/changelog/update-jetpack-ai-handle-fair-usage-quota-messaging b/projects/plugins/jetpack/changelog/update-jetpack-ai-handle-fair-usage-quota-messaging new file mode 100644 index 0000000000000..2e8da6cbdde15 --- /dev/null +++ b/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. diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/upgrade-prompt/index.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/index.tsx similarity index 87% rename from projects/plugins/jetpack/extensions/blocks/ai-assistant/components/upgrade-prompt/index.tsx rename to projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/index.tsx index 2cc2bb849a115..7c3feca5a26e4 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/upgrade-prompt/index.tsx +++ b/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 ( + + { __( + 'You exceeded your current quota of requests. Check the usage policy for more information.', + 'jetpack' + ) } + + ); +}; + +const QuotaExceededMessage = props => { + const { upgradeType, currentTier } = useAiFeature(); + + // Return notice component for the fair usage limit message, on unlimited plans. + if ( currentTier?.value === 1 ) { + return ; + } // 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; diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/upgrade-prompt/light-nudge.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/light-nudge.tsx similarity index 100% rename from projects/plugins/jetpack/extensions/blocks/ai-assistant/components/upgrade-prompt/light-nudge.tsx rename to projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/light-nudge.tsx diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/upgrade-prompt/style.scss b/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/style.scss similarity index 100% rename from projects/plugins/jetpack/extensions/blocks/ai-assistant/components/upgrade-prompt/style.scss rename to projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/style.scss diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js b/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js index f5f1107a8b7a0..b8e65c0df2338 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js +++ b/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 && } + { isOverLimit && isSelected && } { ! connected && } ); diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/index.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/index.tsx index edc6f7bdd4da9..75fbb13963429 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/index.tsx +++ b/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 && } + { siteRequireUpgrade && } { ! connected && } { upgradePromptVisible && ( - ) } - { isOverLimit && } + { isOverLimit && }