AI Client: Fix Jetpack AI upgrade links on block editor (#44405)

dhasilva · web-flow · commit 80cf0b36834b · 2025-07-24T18:24:56.000-03:00
* wrap the link texts

* changelog

* wrap remaining links

* changelog
diff --git a/projects/js-packages/ai-client/changelog/fix-jetpack-ai-upgrade-link b/projects/js-packages/ai-client/changelog/fix-jetpack-ai-upgrade-link
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+AI Client: Fix Jetpack AI upgrade links on block editor
diff --git a/projects/js-packages/ai-client/src/components/message/index.tsx b/projects/js-packages/ai-client/src/components/message/index.tsx
@@ -209,7 +209,7 @@ export function UpgradeMessage( {
 				href={ upgradeUrl }
 				target={ upgradeUrl ? '_blank' : null }
 			>
-				{ __( 'Upgrade now', 'jetpack-ai-client' ) }
+				<span>{ __( 'Upgrade now', 'jetpack-ai-client' ) }</span>
 			</Button>
 		</Message>
 	);
@@ -246,11 +246,11 @@ export function ErrorMessage( {
 					href={ upgradeUrl }
 					target={ upgradeUrl ? '_blank' : null }
 				>
-					{ __( 'Upgrade now', 'jetpack-ai-client' ) }
+					<span>{ __( 'Upgrade now', 'jetpack-ai-client' ) }</span>
 				</Button>
 			) : (
 				<Button variant="link" onClick={ onTryAgainClick }>
-					{ __( 'Try again', 'jetpack-ai-client' ) }
+					<span>{ __( 'Try again', 'jetpack-ai-client' ) }</span>
 				</Button>
 			) }
 		</Message>
diff --git a/projects/js-packages/ai-client/src/components/quota-exceeded-message/index.tsx b/projects/js-packages/ai-client/src/components/quota-exceeded-message/index.tsx
@@ -47,7 +47,7 @@ const useFairUsageNoticeMessage = () => {
 
 	const getFairUsageNoticeMessage = resetDateString => {
 		const fairUsageMessage = __(
-			"You've reached this month's request limit, per our <link>fair usage policy</link>.",
+			"You've reached this month's request limit, per our <link><span>fair usage policy</span></link>.",
 			'jetpack-ai-client'
 		);
 
@@ -75,6 +75,7 @@ const useFairUsageNoticeMessage = () => {
 				rel="noreferrer"
 			/>
 		),
+		span: <span />,
 	} );
 
 	return fairUsageNoticeMessageElement;
diff --git a/projects/js-packages/ai-client/src/components/quota-exceeded-message/light-nudge.tsx b/projects/js-packages/ai-client/src/components/quota-exceeded-message/light-nudge.tsx
@@ -28,7 +28,7 @@ export const LightNudge = ( {
 							variant="link"
 							target={ target }
 						>
-							{ isRedirecting ? redirectingText : buttonText }
+							<span>{ isRedirecting ? redirectingText : buttonText }</span>
 						</Button>
 					) }
 				</p>
diff --git a/projects/js-packages/ai-client/src/logo-generator/components/prompt.tsx b/projects/js-packages/ai-client/src/logo-generator/components/prompt.tsx
@@ -307,7 +307,7 @@ export const Prompt = ( { initialPrompt = '' }: PromptProps ) => {
 									target="_blank"
 									onClick={ onUpgradeClick }
 								>
-									{ __( 'Upgrade', 'jetpack-ai-client' ) }
+									<span>{ __( 'Upgrade', 'jetpack-ai-client' ) }</span>
 								</Button>
 							</>
 						) }
diff --git a/projects/js-packages/ai-client/src/logo-generator/components/upgrade-nudge.tsx b/projects/js-packages/ai-client/src/logo-generator/components/upgrade-nudge.tsx
@@ -50,7 +50,7 @@ export const UpgradeNudge = () => {
 					className="is-primary"
 					onClick={ handleUpgradeClick }
 				>
-					{ buttonText }
+					<span>{ buttonText }</span>
 				</Button>
 			</div>
 		</div>
diff --git a/projects/js-packages/ai-client/src/logo-generator/components/upgrade-screen.tsx b/projects/js-packages/ai-client/src/logo-generator/components/upgrade-screen.tsx
@@ -52,20 +52,20 @@ export const UpgradeScreen: FC< {
 				</span>
 				&nbsp;
 				<Button variant="link" href={ upgradeInfoUrl } target="_blank">
-					{ __( 'Learn more about Jetpack AI.', 'jetpack-ai-client' ) }
+					<span>{ __( 'Learn more about Jetpack AI.', 'jetpack-ai-client' ) }</span>
 				</Button>
 			</div>
 			<div className="jetpack-ai-logo-generator-modal__notice-actions">
 				<Button variant="tertiary" onClick={ onCancel }>
-					{ __( 'Cancel', 'jetpack-ai-client' ) }
+					<span>{ __( 'Cancel', 'jetpack-ai-client' ) }</span>
 				</Button>
 				<Button
 					variant="primary"
 					href={ upgradeURL }
 					target="_blank"
 					onClick={ handleUpgradeClick }
 				>
-					{ __( 'Upgrade', 'jetpack-ai-client' ) }
+					<span>{ __( 'Upgrade', 'jetpack-ai-client' ) }</span>
 				</Button>
 			</div>
 		</div>
diff --git a/projects/js-packages/ai-client/src/logo-generator/components/visit-site-banner.tsx b/projects/js-packages/ai-client/src/logo-generator/components/visit-site-banner.tsx
@@ -44,7 +44,7 @@ export const VisitSiteBanner: FC< {
 						target="_blank"
 						onClick={ onVisitBlankTarget ? onVisitBlankTarget : null }
 					>
-						{ __( 'Learn more about Jetpack AI', 'jetpack-ai-client' ) }
+						<span>{ __( 'Learn more about Jetpack AI', 'jetpack-ai-client' ) }</span>
 						<Icon icon={ external } size={ 20 } />
 					</Button>
 				</div>
diff --git a/projects/js-packages/ai-client/src/logo-generator/hooks/use-fair-usage-notice-message.tsx b/projects/js-packages/ai-client/src/logo-generator/hooks/use-fair-usage-notice-message.tsx
@@ -33,7 +33,7 @@ const useFairUsageNoticeMessage = (): Element => {
 
 	const getFairUsageNoticeMessage = resetDateString => {
 		const fairUsageMessage = __(
-			"You've reached this month's request limit, per our <link>fair usage policy</link>.",
+			"You've reached this month's request limit, per our <link><span>fair usage policy</span></link>.",
 			'jetpack-ai-client'
 		);
 
@@ -59,6 +59,7 @@ const useFairUsageNoticeMessage = (): Element => {
 
 	const fairUsageNoticeMessageElement = createInterpolateElement( fairUsageNoticeMessage, {
 		link: <a href={ upgradeInfoUrl } target="_blank" rel="noreferrer" />,
+		span: <span />,
 	} );
 
 	return fairUsageNoticeMessageElement;
diff --git a/projects/plugins/jetpack/changelog/fix-jetpack-ai-upgrade-link b/projects/plugins/jetpack/changelog/fix-jetpack-ai-upgrade-link
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+AI Assistant: Fix Jetpack AI links on block editor
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/upgrade.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/upgrade.tsx
@@ -34,13 +34,13 @@ export default function Upgrade( {
 	const requestLimit = currentTier?.value && currentTier?.value !== 1 ? currentTier.limit : 20;
 
 	const freeLimitUpgradePrompt = __(
-		'You have reached the limit of <strong>20 free</strong> requests. <button>Upgrade to continue generating feedback.</button>',
+		'You have reached the limit of <strong>20 free</strong> requests. <button><span>Upgrade to continue generating feedback.</span></button>',
 		'jetpack'
 	);
 	const tierLimitUpgradePrompt = sprintf(
 		/* translators: number is the request limit for the current tier/plan */
 		__(
-			'You have reached the limit of <strong>%d requests</strong>. <button>Upgrade to continue generating feedback.</button>',
+			'You have reached the limit of <strong>%d requests</strong>. <button><span>Upgrade to continue generating feedback.</span></button>',
 			'jetpack'
 		),
 		requestLimit
@@ -61,6 +61,7 @@ export default function Upgrade( {
 		{
 			strong: <strong />,
 			button: <Button variant="link" onClick={ handleClick } href={ upgradeUrl } target="_blank" />,
+			span: <span />,
 		}
 	);
 
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/usage-panel/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/usage-panel/index.tsx
@@ -129,7 +129,7 @@ export function UsagePanel( {
 										href={ contactUsURL }
 										onClick={ handleContactUsClick }
 									>
-										{ __( 'Contact Us', 'jetpack' ) }
+										<span>{ __( 'Contact Us', 'jetpack' ) }</span>
 									</Button>
 								</>
 							) }
@@ -141,7 +141,7 @@ export function UsagePanel( {
 									href={ checkoutUrl }
 									onClick={ handleUpgradeClick }
 								>
-									{ upgradeButtonText }
+									<span>{ upgradeButtonText }</span>
 								</Button>
 							) }
 						</div>

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ export const LightNudge = ( {`
`28`	`28`	`variant="link"`
`29`	`29`	`target={ target }`
`30`	`30`	`>`
`31`		`- { isRedirecting ? redirectingText : buttonText }`
	`31`	`+ <span>{ isRedirecting ? redirectingText : buttonText }</span>`
`32`	`32`	`</Button>`
`33`	`33`	`) }`
`34`	`34`	`</p>`
Original file line number	Diff line number	Diff line change
`@@ -307,7 +307,7 @@ export const Prompt = ( { initialPrompt = '' }: PromptProps ) => {`
`307`	`307`	`target="_blank"`
`308`	`308`	`onClick={ onUpgradeClick }`
`309`	`309`	`>`
`310`		`- { __( 'Upgrade', 'jetpack-ai-client' ) }`
	`310`	`+ <span>{ __( 'Upgrade', 'jetpack-ai-client' ) }</span>`
`311`	`311`	`</Button>`
`312`	`312`	`</>`
`313`	`313`	`) }`
Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@ export const UpgradeNudge = () => {`
`50`	`50`	`className="is-primary"`
`51`	`51`	`onClick={ handleUpgradeClick }`
`52`	`52`	`>`
`53`		`- { buttonText }`
	`53`	`+ <span>{ buttonText }</span>`
`54`	`54`	`</Button>`
`55`	`55`	`</div>`
`56`	`56`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ export const VisitSiteBanner: FC< {`
`44`	`44`	`target="_blank"`
`45`	`45`	`onClick={ onVisitBlankTarget ? onVisitBlankTarget : null }`
`46`	`46`	`>`
`47`		`- { __( 'Learn more about Jetpack AI', 'jetpack-ai-client' ) }`
	`47`	`+ <span>{ __( 'Learn more about Jetpack AI', 'jetpack-ai-client' ) }</span>`
`48`	`48`	`<Icon icon={ external } size={ 20 } />`
`49`	`49`	`</Button>`
`50`	`50`	`</div>`