Jetpack AI: open AI Control upgrade link on new tab

projects/js-packages/ai-client/changelog/update-jetpack-ai-open-ai-control-upgrades-on-new-tab

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Jetpack AI: support upgrade links on the AI Control that will open on a new tab

projects/js-packages/ai-client/src/components/ai-control/extension-ai-control.tsx

@@ -31,6 +31,7 @@ type ExtensionAIControlProps = {
 	error?: RequestingErrorProps;
 	requestsRemaining?: number;
 	showUpgradeMessage?: boolean;
+	upgradeUrl?: string;
 	wrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
 	onChange?: ( newValue: string ) => void;
 	onSend?: ( currentValue: string ) => void;
@@ -61,6 +62,7 @@ export function ExtensionAIControl(
 		error,
 		requestsRemaining,
 		showUpgradeMessage = false,
+		upgradeUrl,
 		wrapperRef,
 		onChange,
 		onSend,
@@ -210,11 +212,16 @@ export function ExtensionAIControl(
 				code={ error.code }
 				onTryAgainClick={ tryAgainHandler }
 				onUpgradeClick={ upgradeHandler }
+				upgradeUrl={ upgradeUrl }
 			/>
 		);
 	} else if ( showUpgradeMessage ) {
 		message = (
-			<UpgradeMessage requestsRemaining={ requestsRemaining } onUpgradeClick={ upgradeHandler } />
+			<UpgradeMessage
+				requestsRemaining={ requestsRemaining }
+				onUpgradeClick={ upgradeHandler }
+				upgradeUrl={ upgradeUrl }
+			/>
 		);
 	} else if ( showGuideLine ) {
 		message = <GuidelineMessage />;

projects/js-packages/ai-client/src/components/message/index.tsx

@@ -45,13 +45,15 @@ export type UpgradeMessageProps = {
 	requestsRemaining: number;
 	severity?: MessageSeverityProp;
 	onUpgradeClick: OnUpgradeClick;
+	upgradeUrl?: string;
 };
 
 export type ErrorMessageProps = {
 	error?: string;
 	code?: SuggestionErrorCode;
 	onTryAgainClick: () => void;
 	onUpgradeClick: OnUpgradeClick;
+	upgradeUrl?: string;
 };
 
 const messageIconsMap = {
@@ -122,6 +124,7 @@ export function UpgradeMessage( {
 	requestsRemaining,
 	severity,
 	onUpgradeClick,
+	upgradeUrl,
 }: UpgradeMessageProps ): React.ReactElement {
 	let messageSeverity = severity;
 
@@ -134,11 +137,16 @@ export function UpgradeMessage( {
 			<span>
 				{ sprintf(
 					// translators: %1$d: number of requests remaining
-					__( 'You have %1$d free requests remaining.', 'jetpack-ai-client' ),
+					__( 'You have %1$d requests remaining.', 'jetpack-ai-client' ),
 					requestsRemaining
 				) }
 			</span>
-			<Button variant="link" onClick={ onUpgradeClick }>
+			<Button
+				variant="link"
+				onClick={ onUpgradeClick }
+				href={ upgradeUrl }
+				target={ upgradeUrl ? '_blank' : null }
+			>
 				{ __( 'Upgrade now', 'jetpack-ai-client' ) }
 			</Button>
 		</Message>
@@ -156,6 +164,7 @@ export function ErrorMessage( {
 	code,
 	onTryAgainClick,
 	onUpgradeClick,
+	upgradeUrl,
 }: ErrorMessageProps ): React.ReactElement {
 	const errorMessage = error || __( 'Something went wrong', 'jetpack-ai-client' );
 
@@ -169,7 +178,12 @@ export function ErrorMessage( {
 				) }
 			</span>
 			{ code === ERROR_QUOTA_EXCEEDED ? (
-				<Button variant="link" onClick={ onUpgradeClick }>
+				<Button
+					variant="link"
+					onClick={ onUpgradeClick }
+					href={ upgradeUrl }
+					target={ upgradeUrl ? '_blank' : null }
+				>
 					{ __( 'Upgrade now', 'jetpack-ai-client' ) }
 				</Button>
 			) : (

projects/plugins/jetpack/changelog/update-jetpack-ai-open-ai-control-upgrades-on-new-tab

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Jetpack AI: open AI Control upgrade links on a new tab.

projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/components/ai-assistant-input/index.tsx

@@ -18,7 +18,7 @@ import './style.scss';
  */
 import type { ExtendedInlineBlockProp } from '../../../extensions/ai-assistant';
 import type { RequestingErrorProps, RequestingStateProp } from '@automattic/jetpack-ai-client';
-import type { ReactElement, MouseEvent } from 'react';
+import type { ReactElement } from 'react';
 
 export type AiAssistantInputProps = {
 	className?: string;
@@ -56,7 +56,7 @@ export default function AiAssistantInput( {
 }: AiAssistantInputProps ): ReactElement {
 	const [ value, setValue ] = useState( '' );
 	const [ placeholder, setPlaceholder ] = useState( __( 'Ask Jetpack AI to edit…', 'jetpack' ) );
-	const { autosaveAndRedirect } = useAICheckout();
+	const { checkoutUrl } = useAICheckout();
 	const { tracks } = useAnalytics();
 	const [ requestsRemaining, setRequestsRemaining ] = useState( 0 );
 	const [ showUpgradeMessage, setShowUpgradeMessage ] = useState( false );
@@ -102,18 +102,13 @@ export default function AiAssistantInput( {
 		undo?.();
 	}, [ blockType, tracks, undo ] );
 
-	const handleUpgrade = useCallback(
-		( event: MouseEvent< HTMLButtonElement > ) => {
-			tracks.recordEvent( 'jetpack_ai_upgrade_button', {
-				current_tier_slug: currentTier?.slug,
-				requests_count: requestsCount,
-				placement: 'jetpack_ai_assistant_extension',
-			} );
-
-			autosaveAndRedirect( event );
-		},
-		[ autosaveAndRedirect, currentTier?.slug, requestsCount, tracks ]
-	);
+	const handleUpgrade = useCallback( () => {
+		tracks.recordEvent( 'jetpack_ai_upgrade_button', {
+			current_tier_slug: currentTier?.slug,
+			requests_count: requestsCount,
+			placement: 'jetpack_ai_assistant_extension',
+		} );
+	}, [ currentTier?.slug, requestsCount, tracks ] );
 
 	const handleTryAgain = useCallback( () => {
 		tracks.recordEvent( 'jetpack_ai_assistant_try_again', {
@@ -167,6 +162,7 @@ export default function AiAssistantInput( {
 			error={ requestingError }
 			requestsRemaining={ requestsRemaining }
 			showUpgradeMessage={ showUpgradeMessage }
+			upgradeUrl={ checkoutUrl }
 			onChange={ setValue }
 			onSend={ handleSend }
 			onStop={ handleStopSuggestion }