From 7478c7371b60d91e92eb8d463b44627a4acd0c25 Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Wed, 28 Aug 2024 15:07:16 -0300 Subject: [PATCH] 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 --- ...ack-ai-update-sidebar-fair-usage-messaging | 4 +++ .../quota-exceeded-message/index.tsx | 31 +++++++++++++++---- .../quota-exceeded-message/style.scss | 21 +++++++++++++ .../extensions/blocks/ai-assistant/edit.js | 12 ++++++- .../ai-assistant-plugin-sidebar/index.tsx | 24 +++++++------- .../ai-assistant-plugin-sidebar/types.ts | 2 +- 6 files changed, 75 insertions(+), 19 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/update-jetpack-ai-update-sidebar-fair-usage-messaging 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 new file mode 100644 index 0000000000000..68a0489bb624c --- /dev/null +++ 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/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/index.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/index.tsx index a7a8f17ce8e96..8163e41c2d46e 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/index.tsx +++ b/projects/plugins/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 ( - - { useFairUsageNoticeMessageElement } - - ); + + if ( variant === 'muted' ) { + return ( + + { useFairUsageNoticeMessageElement } + + ); + } + + if ( variant === 'error' ) { + return ( + + { useFairUsageNoticeMessageElement } + + ); + } + + return null; }; const QuotaExceededMessage = props => { diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/style.scss b/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/style.scss index 5e04a8e519ec1..35b21b5ec6713 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/style.scss +++ b/projects/plugins/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 index 0e848872f88f4..f2bed94f0106d 100644 --- 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 && } + ); + const trackUpgradeClick = useCallback( event => { event.preventDefault(); @@ -354,6 +358,12 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId, ) } + { fairUsageNotice && ( +
+ + { fairUsageNotice } +
+ ) } { /* Mock BlockCard component styles to keep alignment */ }
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx index cb9696985e167..0cfd93de39a81 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx +++ b/projects/plugins/jetpack/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 && ( + + + + + + ) } + { isBreveAvailable && ( @@ -119,12 +127,6 @@ const JetpackAndSettingsContent = ( { ) } - { showQuotaExceeded && ( - - - - ) } - { __( '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 } /> @@ -213,7 +215,7 @@ export default function AiAssistantPluginSidebar() { requireUpgrade={ requireUpgrade } upgradeType={ upgradeType } showUsagePanel={ showUsagePanel } - showQuotaExceeded={ showQuotaExceeded } + showFairUsageNotice={ showFairUsageNotice } /> diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/types.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/types.ts index 8384d9189ee12..3647c19c48977 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/types.ts +++ b/projects/plugins/jetpack/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 = {