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
Automattic · Aug 28, 2024 · 492cc34 · 492cc34
1 parent a1da228
commit 492cc34
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 11 deletions.
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
@@ -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
@@ -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' ) }
 						</ExternalLink>
 					</div>
-					<PanelBody initialOpen={ true }>
-						<PanelRow>
-							<UsagePanel placement={ USAGE_PANEL_PLACEMENT_BLOCK_SETTINGS_SIDEBAR } />
-						</PanelRow>
-					</PanelBody>
+					{ ( planType === PLAN_TYPE_FREE ||
+						( tierPlansEnabled && planType !== PLAN_TYPE_UNLIMITED ) ) && (
+						<PanelBody initialOpen={ true }>
+							<PanelRow>
+								<UsagePanel placement={ USAGE_PANEL_PLACEMENT_BLOCK_SETTINGS_SIDEBAR } />
+							</PanelRow>
+						</PanelBody>
+					) }
 					<PanelBody initialOpen={ true }>
 						<PanelRow>
 							<FeedbackControl />

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
@@ -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/...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,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 = ( {
 					<Upgrade placement={ placement } type={ upgradeType } upgradeUrl={ checkoutUrl } />
 				</PanelRow>
 			) }
-			{ isUsagePanelAvailable && (
+			{ isUsagePanelAvailable && showUsagePanel && (
 				<PanelRow className="jetpack-ai-sidebar__feature-section">
 					<UsagePanel placement={ placement } />
 				</PanelRow>
 			) }
 
+			{ showQuotaExceeded && (
+				<PanelRow>
+					<QuotaExceededMessage />
+				</PanelRow>
+			) }
+
 			<PanelRow>
 				<ExternalLink href="https://jetpack.com/redirect/?source=jetpack-ai-feedback">
 					{ __( '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 && <Highlight /> }
@@ -180,6 +197,8 @@ export default function AiAssistantPluginSidebar() {
 						placement={ PLACEMENT_JETPACK_SIDEBAR }
 						requireUpgrade={ requireUpgrade }
 						upgradeType={ upgradeType }
+						showUsagePanel={ showUsagePanel }
+						showQuotaExceeded={ showQuotaExceeded }
 					/>
 				</PanelBody>
 			</JetpackPluginSidebar>
@@ -193,6 +212,8 @@ export default function AiAssistantPluginSidebar() {
 					placement={ PLACEMENT_DOCUMENT_SETTINGS }
 					requireUpgrade={ requireUpgrade }
 					upgradeType={ upgradeType }
+					showUsagePanel={ showUsagePanel }
+					showQuotaExceeded={ showQuotaExceeded }
 				/>
 			</PluginDocumentSettingPanel>
 
@@ -214,7 +235,7 @@ export default function AiAssistantPluginSidebar() {
 						busy={ false }
 						disabled={ requireUpgrade }
 					/>
-					{ requireUpgrade && (
+					{ requireUpgrade && tierPlansEnabled && (
 						<Upgrade
 							placement={ PLACEMENT_PRE_PUBLISH }
 							type={ upgradeType }

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
@@ -4,6 +4,8 @@ export type JetpackSettingsContentProps = {
 	placement: typeof PLACEMENT_JETPACK_SIDEBAR | typeof PLACEMENT_DOCUMENT_SETTINGS;
 	requireUpgrade: boolean;
 	upgradeType: string;
+	showUsagePanel: boolean;
+	showQuotaExceeded: boolean;
 };
 
 export type CoreSelect = {