AI Assistant: tier plans upgrade nudge update (Automattic#34254)

* add tier plans flag, use new JP redirect for tier plans checkout link * adjust Nudge for tier plans * changelog * use JP redirect for contact href * Simplify ternary condition for tier plans flag Co-authored-by: Douglas Henri <dhasilva@users.noreply.github.com> * simplify flag assignment here as well --------- Co-authored-by: Douglas Henri <dhasilva@users.noreply.github.com>
anomiex · Nov 22, 2023 · e4262fb · e4262fb
1 parent 663ea3f
commit e4262fb
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 4 deletions.
diff --git a/projects/plugins/jetpack/changelog/add-tier-plans-upgrade-nudge b/projects/plugins/jetpack/changelog/add-tier-plans-upgrade-nudge
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Adjust UpgradeNudge for tier plans
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/upgrade-prompt/index.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/upgrade-prompt/index.tsx
@@ -1,8 +1,9 @@
 /*
  * External dependencies
  */
+import { getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import React from 'react';
 /*
  * Internal dependencies
@@ -22,6 +23,11 @@ const DefaultUpgradePrompt = (): React.ReactNode => {
 	const { checkoutUrl, autosaveAndRedirect, isRedirecting } = useAICheckout();
 	const canUpgrade = canUserPurchasePlan();
 
+	const tierPlansEnabled =
+		window?.Jetpack_Editor_Initial_State?.available_blocks[ 'ai-enable-tier-plans-ui' ]?.available;
+
+	const { nextTier } = useAiFeature();
+
 	if ( ! canUpgrade ) {
 		return (
 			<Nudge
@@ -45,6 +51,58 @@ const DefaultUpgradePrompt = (): React.ReactNode => {
 		);
 	}
 
+	if ( tierPlansEnabled ) {
+		if ( ! nextTier ) {
+			const contactHref = getRedirectUrl( 'jetpack-ai-tiers-more-requests-contact' );
+			return (
+				<Nudge
+					buttonText={ __( 'Contact Us', 'jetpack' ) }
+					description={ __(
+						'You have reached the request limit for your current plan.',
+						'jetpack'
+					) }
+					className={ 'jetpack-ai-upgrade-banner' }
+					checkoutUrl={ contactHref }
+					visible={ true }
+					align={ null }
+					title={ null }
+					context={ null }
+				/>
+			);
+		}
+		return (
+			<Nudge
+				buttonText={ sprintf(
+					/* Translators: number of requests */
+					__( 'Upgrade to %d requests', 'jetpack' ),
+					nextTier.limit
+				) }
+				checkoutUrl={ checkoutUrl }
+				className={ 'jetpack-ai-upgrade-banner' }
+				description={ createInterpolateElement(
+					sprintf(
+						/* Translators: number of requests */
+						__(
+							'You have reached the requests limit for your current plan.<br /><strong>Upgrade now to increase your requests limit to %d.</strong>',
+							'jetpack'
+						),
+						nextTier.limit
+					),
+					{
+						br: <br />,
+						strong: <strong />,
+					}
+				) }
+				goToCheckoutPage={ autosaveAndRedirect }
+				isRedirecting={ isRedirecting }
+				visible={ true }
+				align={ 'center' }
+				title={ null }
+				context={ null }
+			/>
+		);
+	}
+
 	return (
 		<Nudge
 			buttonText={ 'Upgrade' }

diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/hooks/use-ai-checkout/index.ts b/projects/plugins/jetpack/extensions/blocks/ai-assistant/hooks/use-ai-checkout/index.ts
@@ -8,16 +8,28 @@ import {
 	getSiteFragment,
 } from '@automattic/jetpack-shared-extension-utils';
 import useAutosaveAndRedirect from '../../../../shared/use-autosave-and-redirect';
+import useAiFeature from '../use-ai-feature';
 
 export default function useAICheckout(): {
 	checkoutUrl: string;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	autosaveAndRedirect: ( event: any ) => void;
 	isRedirecting: boolean;
 } {
-	const wpcomCheckoutUrl = getRedirectUrl( 'jetpack-ai-monthly-plan-ai-assistant-block-banner', {
-		site: getSiteFragment(),
-	} );
+	const tierPlansEnabled =
+		window?.Jetpack_Editor_Initial_State?.available_blocks[ 'ai-enable-tier-plans-ui' ]?.available;
+
+	const { nextTier } = useAiFeature();
+
+	const wpcomCheckoutUrl = tierPlansEnabled
+		? getRedirectUrl( 'jetpack-ai-yearly-tier-upgrade-nudge', {
+				site: getSiteFragment(),
+				path: `jetpack_ai_yearly:-q-${ nextTier?.limit }`,
+				query: `redirect_to=${ window.location.href }`,
+		  } )
+		: getRedirectUrl( 'jetpack-ai-monthly-plan-ai-assistant-block-banner', {
+				site: getSiteFragment(),
+		  } );
 
 	const checkoutUrl =
 		isAtomicSite() || isSimpleSite()