From a2aec4095920e1d366547db113a19b0dda566abc Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Wed, 28 Aug 2024 10:40:04 -0300 Subject: [PATCH] Jetpack AI: change sidebar usagePanel conditions (#39090) * add changelog * mock fair usage limit, need to revisit this from backend * add conditions and QuotaExceededMessage on document and jetpack sidebar * show usagepanel only with tier plans or free users --- ...tpack-ai-sidebar-hide-usage-panel-on-plans | 4 +++ .../extensions/blocks/ai-assistant/edit.js | 16 ++++++----- .../hooks/use-ai-feature/index.ts | 8 ++++-- .../ai-assistant-plugin-sidebar/index.tsx | 27 ++++++++++++++++--- .../ai-assistant-plugin-sidebar/types.ts | 2 ++ 5 files changed, 46 insertions(+), 11 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/change-jetpack-ai-sidebar-hide-usage-panel-on-plans diff --git a/projects/plugins/jetpack/changelog/change-jetpack-ai-sidebar-hide-usage-panel-on-plans b/projects/plugins/jetpack/changelog/change-jetpack-ai-sidebar-hide-usage-panel-on-plans new file mode 100644 index 0000000000000..10a3084411675 --- /dev/null +++ b/projects/plugins/jetpack/changelog/change-jetpack-ai-sidebar-hide-usage-panel-on-plans @@ -0,0 +1,4 @@ +Significance: minor +Type: other + +Jetpack AI: hide usagepanel when tier plans are disabled. Show QuotaExceededMessage instead of nudges diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js b/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js index b8e65c0df2338..0e848872f88f4 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js @@ -26,7 +26,7 @@ import clsx from 'clsx'; */ import UsagePanel from '../../plugins/ai-assistant-plugin/components/usage-panel'; import { USAGE_PANEL_PLACEMENT_BLOCK_SETTINGS_SIDEBAR } from '../../plugins/ai-assistant-plugin/components/usage-panel/types'; -import { PLAN_TYPE_FREE, usePlanType } from '../../shared/use-plan-type'; +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'; @@ -61,6 +61,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId, requestsLimit, currentTier, loading: loadingAiFeature, + tierPlansEnabled, } = useAiFeature(); const requestsRemaining = Math.max( requestsLimit - requestsCount, 0 ); @@ -360,11 +361,14 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId, { __( 'Discover all features', 'jetpack' ) } - - - - - + { ( planType === PLAN_TYPE_FREE || + ( tierPlansEnabled && planType !== PLAN_TYPE_UNLIMITED ) ) && ( + + + + + + ) } diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/hooks/use-ai-feature/index.ts b/projects/plugins/jetpack/extensions/blocks/ai-assistant/hooks/use-ai-feature/index.ts index 6a75e66bc5326..937d0dbe22b94 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/hooks/use-ai-feature/index.ts +++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/hooks/use-ai-feature/index.ts @@ -22,14 +22,18 @@ export default function useAiFeature() { usagePeriod, requestsCount: allTimeRequestsCount, requestsLimit: freeRequestsLimit, + tierPlansEnabled, } = featureData; const planType = getPlanType( currentTier ); + // TODO: mind this hardcoded value (3000), + // maybe provide it from the backend but we'd be replacing the 9 Billion limit with 3k + const currentTierLimit = tierPlansEnabled ? currentTier?.limit || freeRequestsLimit : 3000; + const actualRequestsCount = planType === PLAN_TYPE_TIERED ? usagePeriod?.requestsCount : allTimeRequestsCount; - const actualRequestsLimit = - planType === PLAN_TYPE_FREE ? freeRequestsLimit : currentTier?.limit; + const actualRequestsLimit = planType === PLAN_TYPE_FREE ? freeRequestsLimit : currentTierLimit; return { data: featureData, 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 4a9047e726ae7..cb9696985e167 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,11 +14,13 @@ import React from 'react'; /** * Internal dependencies */ +import QuotaExceededMessage 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'; import { getFeatureAvailability } from '../../../../blocks/ai-assistant/lib/utils/get-feature-availability'; import JetpackPluginSidebar from '../../../../shared/jetpack-plugin-sidebar'; +import { PLAN_TYPE_FREE, PLAN_TYPE_UNLIMITED, usePlanType } from '../../../../shared/use-plan-type'; import { FeaturedImage } from '../ai-image'; import { Breve, registerBreveHighlights, Highlight } from '../breve'; import useBreveAvailability from '../breve/hooks/use-breve-availability'; @@ -63,6 +65,8 @@ const JetpackAndSettingsContent = ( { placement, requireUpgrade, upgradeType, + showUsagePanel, + showQuotaExceeded, }: JetpackSettingsContentProps ) => { const { checkoutUrl } = useAICheckout(); const { productPageUrl } = useAiProductPage(); @@ -109,12 +113,18 @@ const JetpackAndSettingsContent = ( { ) } - { isUsagePanelAvailable && ( + { isUsagePanelAvailable && showUsagePanel && ( ) } + { showQuotaExceeded && ( + + + + ) } + { __( 'Provide feedback', 'jetpack' ) } @@ -137,7 +147,8 @@ const JetpackAndSettingsContent = ( { }; export default function AiAssistantPluginSidebar() { - const { requireUpgrade, upgradeType, currentTier } = useAiFeature(); + const { requireUpgrade, upgradeType, currentTier, tierPlansEnabled, isOverLimit } = + useAiFeature(); const { checkoutUrl } = useAICheckout(); const { tracks } = useAnalytics(); const isBreveAvailable = useBreveAvailability(); @@ -152,6 +163,8 @@ export default function AiAssistantPluginSidebar() { return postTypeObject?.viewable; }, [] ); + const planType = usePlanType( currentTier ); + // If the post type is not viewable, do not render my plugin. if ( ! isViewable ) { return null; @@ -164,6 +177,10 @@ export default function AiAssistantPluginSidebar() { tracks.recordEvent( 'jetpack_ai_panel_open', { placement } ); }; + const showUsagePanel = + planType === PLAN_TYPE_FREE || ( tierPlansEnabled && planType !== PLAN_TYPE_UNLIMITED ); + const showQuotaExceeded = planType === PLAN_TYPE_UNLIMITED && isOverLimit; + return ( <> { isBreveAvailable && } @@ -180,6 +197,8 @@ export default function AiAssistantPluginSidebar() { placement={ PLACEMENT_JETPACK_SIDEBAR } requireUpgrade={ requireUpgrade } upgradeType={ upgradeType } + showUsagePanel={ showUsagePanel } + showQuotaExceeded={ showQuotaExceeded } /> @@ -193,6 +212,8 @@ export default function AiAssistantPluginSidebar() { placement={ PLACEMENT_DOCUMENT_SETTINGS } requireUpgrade={ requireUpgrade } upgradeType={ upgradeType } + showUsagePanel={ showUsagePanel } + showQuotaExceeded={ showQuotaExceeded } /> @@ -214,7 +235,7 @@ export default function AiAssistantPluginSidebar() { busy={ false } disabled={ requireUpgrade } /> - { requireUpgrade && ( + { requireUpgrade && tierPlansEnabled && (