@automattic/jetpack-ai-client 0.33.2 → 0.33.4

package/CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.33.4] - 2025-07-28
+### Fixed
+- Block Editor: Fix Jetpack AI upgrade links. [#44405]
+
+## [0.33.3] - 2025-07-21
+### Changed
+- Internal updates.
+
 ## [0.33.2] - 2025-07-14
 ### Changed
 - Update package dependencies. [#44217] [#44219]
@@ -663,6 +671,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - AI Client: stop using smart document visibility handling on the fetchEventSource library, so it does not restart the completion when changing tabs. [#32004]
 - Updated package dependencies. [#31468] [#31659] [#31785]
 
+[0.33.4]: https://github.com/Automattic/jetpack-ai-client/compare/v0.33.3...v0.33.4
+[0.33.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.33.2...v0.33.3
 [0.33.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.33.1...v0.33.2
 [0.33.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.33.0...v0.33.1
 [0.33.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.32.1...v0.33.0

package/build/components/message/index.js

@@ -90,7 +90,7 @@ export function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, up
     }
     return (_jsxs(Message, { severity: messageSeverity, children: [_jsx("span", { children: sprintf(
                 // translators: %1$d: number of requests remaining
-                __('You have %1$d requests remaining.', 'jetpack-ai-client'), requestsRemaining) }), _jsx(Button, { variant: "link", onClick: onUpgradeClick, href: upgradeUrl, target: upgradeUrl ? '_blank' : null, children: __('Upgrade now', 'jetpack-ai-client') })] }));
+                __('You have %1$d requests remaining.', 'jetpack-ai-client'), requestsRemaining) }), _jsx(Button, { variant: "link", onClick: onUpgradeClick, href: upgradeUrl, target: upgradeUrl ? '_blank' : null, children: _jsx("span", { children: __('Upgrade now', 'jetpack-ai-client') }) })] }));
 }
 /**
  * React component to render an error message
@@ -102,5 +102,5 @@ export function ErrorMessage({ error, code, onTryAgainClick, onUpgradeClick, upg
     const errorMessage = error || __('Something went wrong', 'jetpack-ai-client');
     return (_jsxs(Message, { severity: MESSAGE_SEVERITY_ERROR, children: [_jsx("span", { children: sprintf(
                 // translators: %1$d: A dynamic error message
-                __('Error: %1$s', 'jetpack-ai-client'), errorMessage) }), code === ERROR_QUOTA_EXCEEDED ? (_jsx(Button, { variant: "link", onClick: onUpgradeClick, href: upgradeUrl, target: upgradeUrl ? '_blank' : null, children: __('Upgrade now', 'jetpack-ai-client') })) : (_jsx(Button, { variant: "link", onClick: onTryAgainClick, children: __('Try again', 'jetpack-ai-client') }))] }));
+                __('Error: %1$s', 'jetpack-ai-client'), errorMessage) }), code === ERROR_QUOTA_EXCEEDED ? (_jsx(Button, { variant: "link", onClick: onUpgradeClick, href: upgradeUrl, target: upgradeUrl ? '_blank' : null, children: _jsx("span", { children: __('Upgrade now', 'jetpack-ai-client') }) })) : (_jsx(Button, { variant: "link", onClick: onTryAgainClick, children: _jsx("span", { children: __('Try again', 'jetpack-ai-client') }) }))] }));
 }

package/build/components/quota-exceeded-message/index.js

@@ -33,7 +33,7 @@ const useFairUsageNoticeMessage = () => {
             nextUsagePeriodStartDate.getDate());
     };
     const getFairUsageNoticeMessage = resetDateString => {
-        const fairUsageMessage = __("You've reached this month's request limit, per our <link>fair usage policy</link>.", 'jetpack-ai-client');
+        const fairUsageMessage = __("You've reached this month's request limit, per our <link><span>fair usage policy</span></link>.", 'jetpack-ai-client');
         if (!resetDateString) {
             return fairUsageMessage;
         }
@@ -47,6 +47,7 @@ const useFairUsageNoticeMessage = () => {
     const fairUsageNoticeMessage = getFairUsageNoticeMessage(nextUsagePeriodStartDateString);
     const fairUsageNoticeMessageElement = createInterpolateElement(fairUsageNoticeMessage, {
         link: (_jsx("a", { href: "https://jetpack.com/redirect/?source=ai-assistant-fair-usage-policy", target: "_blank", rel: "noreferrer" })),
+        span: _jsx("span", {}),
     });
     return fairUsageNoticeMessageElement;
 };

package/build/components/quota-exceeded-message/light-nudge.js

@@ -4,5 +4,5 @@ import { __ } from '@wordpress/i18n';
 import './style.scss';
 export const LightNudge = ({ title, description, buttonText = null, checkoutUrl = null, goToCheckoutPage = null, isRedirecting = false, showButton = true, target = '_top', }) => {
     const redirectingText = __('Redirecting…', 'jetpack-ai-client');
-    return (_jsx("div", { className: "jetpack-upgrade-plan-banner-light", children: _jsx(Notice, { status: "error", isDismissible: false, children: _jsxs("p", { children: [title && _jsx("strong", { children: title }), description, ' ', showButton && (_jsx(Button, { href: isRedirecting ? null : checkoutUrl, onClick: goToCheckoutPage, variant: "link", target: target, children: isRedirecting ? redirectingText : buttonText }))] }) }) }));
+    return (_jsx("div", { className: "jetpack-upgrade-plan-banner-light", children: _jsx(Notice, { status: "error", isDismissible: false, children: _jsxs("p", { children: [title && _jsx("strong", { children: title }), description, ' ', showButton && (_jsx(Button, { href: isRedirecting ? null : checkoutUrl, onClick: goToCheckoutPage, variant: "link", target: target, children: _jsx("span", { children: isRedirecting ? redirectingText : buttonText }) }))] }) }) }));
 };

package/build/logo-generator/components/prompt.js

@@ -156,5 +156,5 @@ export const Prompt = ({ initialPrompt = '' }) => {
     }, [context, setStyle, recordTracksEvent]);
     return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt", children: [_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-header", children: [_jsx("div", { className: "jetpack-ai-logo-generator__prompt-label", children: __('Describe your site:', 'jetpack-ai-client') }), _jsx("div", { className: "jetpack-ai-logo-generator__prompt-actions", children: _jsxs(Button, { variant: "link", disabled: isBusy || requireUpgrade || !hasPrompt, onClick: onEnhance, children: [_jsx(AiIcon, {}), enhanceButtonLabel] }) }), showStyleSelector && (_jsx(SelectControl, { __nextHasNoMarginBottom: true, __next40pxDefaultSize: true, value: style, options: styles, onChange: updateStyle, disabled: isBusy || requireUpgrade }))] }), _jsx(AiModalPromptInput, { prompt: prompt, setPrompt: setPrompt, generateHandler: onGenerate, disabled: isBusy || requireUpgrade, actionDisabled: isBusy || requireUpgrade || !hasPrompt, placeholder: __('Describe your site or simply ask for a logo specifying some details about it', 'jetpack-ai-client') }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-footer", children: [!isUnlimited && !requireUpgrade && (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-requests", children: [_jsx("div", { children: sprintf(
                                 // translators: %u is the number of requests
-                                __('%u requests remaining.', 'jetpack-ai-client'), requestsRemaining) }), hasNextTier && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Button, { variant: "link", href: checkoutUrl, target: "_blank", onClick: onUpgradeClick, children: __('Upgrade', 'jetpack-ai-client') })] })), "\u00A0", _jsx(Tooltip, { text: __('Logo generation costs 10 requests; prompt enhancement costs 1 request each', 'jetpack-ai-client'), placement: "bottom", children: _jsx(Icon, { className: "prompt-footer__icon", icon: info }) })] })), requireUpgrade && tierPlansEnabled && _jsx(UpgradeNudge, {}), requireUpgrade && !tierPlansEnabled && _jsx(FairUsageNotice, {}), enhancePromptFetchError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error enhancing prompt. Please try again.', 'jetpack-ai-client') })), logoFetchError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error generating logo. Please try again.', 'jetpack-ai-client') }))] })] }));
+                                __('%u requests remaining.', 'jetpack-ai-client'), requestsRemaining) }), hasNextTier && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Button, { variant: "link", href: checkoutUrl, target: "_blank", onClick: onUpgradeClick, children: _jsx("span", { children: __('Upgrade', 'jetpack-ai-client') }) })] })), "\u00A0", _jsx(Tooltip, { text: __('Logo generation costs 10 requests; prompt enhancement costs 1 request each', 'jetpack-ai-client'), placement: "bottom", children: _jsx(Icon, { className: "prompt-footer__icon", icon: info }) })] })), requireUpgrade && tierPlansEnabled && _jsx(UpgradeNudge, {}), requireUpgrade && !tierPlansEnabled && _jsx(FairUsageNotice, {}), enhancePromptFetchError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error enhancing prompt. Please try again.', 'jetpack-ai-client') })), logoFetchError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error generating logo. Please try again.', 'jetpack-ai-client') }))] })] }));
 };

package/build/logo-generator/components/upgrade-nudge.js

@@ -26,5 +26,5 @@ export const UpgradeNudge = () => {
     const handleUpgradeClick = () => {
         recordTracksEvent(EVENT_UPGRADE, { context, placement: EVENT_PLACEMENT_UPGRADE_PROMPT });
     };
-    return (_jsx("div", { className: "jetpack-upgrade-plan-banner", children: _jsxs("div", { className: "jetpack-upgrade-plan-banner__wrapper", children: [_jsxs("div", { children: [_jsx(Icon, { className: "jetpack-upgrade-plan-banner__icon", icon: warning }), _jsx("span", { className: "jetpack-upgrade-plan-banner__banner-description", children: upgradeMessage })] }), _jsx(Button, { href: checkoutUrl, target: "_blank", className: "is-primary", onClick: handleUpgradeClick, children: buttonText })] }) }));
+    return (_jsx("div", { className: "jetpack-upgrade-plan-banner", children: _jsxs("div", { className: "jetpack-upgrade-plan-banner__wrapper", children: [_jsxs("div", { children: [_jsx(Icon, { className: "jetpack-upgrade-plan-banner__icon", icon: warning }), _jsx("span", { className: "jetpack-upgrade-plan-banner__banner-description", children: upgradeMessage })] }), _jsx(Button, { href: checkoutUrl, target: "_blank", className: "is-primary", onClick: handleUpgradeClick, children: _jsx("span", { children: buttonText }) })] }) }));
 };

package/build/logo-generator/components/upgrade-screen.js

@@ -24,5 +24,5 @@ export const UpgradeScreen = ({ onCancel, upgradeURL, reason }) => {
         recordTracksEvent(EVENT_UPGRADE, { context, placement: EVENT_PLACEMENT_FREE_USER_SCREEN });
         onCancel();
     };
-    return (_jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-message-wrapper", children: [_jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-message", children: [_jsx("span", { className: "jetpack-ai-logo-generator-modal__loading-message", children: reason === 'feature' ? upgradeMessageFeature : upgradeMessageRequests }), "\u00A0", _jsx(Button, { variant: "link", href: upgradeInfoUrl, target: "_blank", children: __('Learn more about Jetpack AI.', 'jetpack-ai-client') })] }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-actions", children: [_jsx(Button, { variant: "tertiary", onClick: onCancel, children: __('Cancel', 'jetpack-ai-client') }), _jsx(Button, { variant: "primary", href: upgradeURL, target: "_blank", onClick: handleUpgradeClick, children: __('Upgrade', 'jetpack-ai-client') })] })] }));
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-message-wrapper", children: [_jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-message", children: [_jsx("span", { className: "jetpack-ai-logo-generator-modal__loading-message", children: reason === 'feature' ? upgradeMessageFeature : upgradeMessageRequests }), "\u00A0", _jsx(Button, { variant: "link", href: upgradeInfoUrl, target: "_blank", children: _jsx("span", { children: __('Learn more about Jetpack AI.', 'jetpack-ai-client') }) })] }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-actions", children: [_jsx(Button, { variant: "tertiary", onClick: onCancel, children: _jsx("span", { children: __('Cancel', 'jetpack-ai-client') }) }), _jsx(Button, { variant: "primary", href: upgradeURL, target: "_blank", onClick: handleUpgradeClick, children: _jsx("span", { children: __('Upgrade', 'jetpack-ai-client') }) })] })] }));
 };

package/build/logo-generator/components/visit-site-banner.js

@@ -12,5 +12,5 @@ import clsx from 'clsx';
 import jetpackLogo from '../assets/images/jetpack-logo.svg';
 import './visit-site-banner.scss';
 export const VisitSiteBanner = ({ className = null, onVisitBlankTarget }) => {
-    return (_jsxs("div", { className: clsx('jetpack-ai-logo-generator-modal-visit-site-banner', className), children: [_jsx("div", { className: "jetpack-ai-logo-generator-modal-visit-site-banner__jetpack-logo", children: _jsx("img", { src: jetpackLogo, alt: "Jetpack" }) }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-visit-site-banner__content", children: [_jsx("strong", { children: __('Do you want to know all the amazing things you can do with Jetpack AI?', 'jetpack-ai-client') }), _jsx("span", { children: __('Generate and tweak content, create forms, get feedback and much more.', 'jetpack-ai-client') }), _jsx("div", { children: _jsxs(Button, { variant: "link", href: "https://jetpack.com/redirect/?source=logo_generator_learn_more_about_jetpack_ai", target: "_blank", onClick: onVisitBlankTarget ? onVisitBlankTarget : null, children: [__('Learn more about Jetpack AI', 'jetpack-ai-client'), _jsx(Icon, { icon: external, size: 20 })] }) })] })] }));
+    return (_jsxs("div", { className: clsx('jetpack-ai-logo-generator-modal-visit-site-banner', className), children: [_jsx("div", { className: "jetpack-ai-logo-generator-modal-visit-site-banner__jetpack-logo", children: _jsx("img", { src: jetpackLogo, alt: "Jetpack" }) }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-visit-site-banner__content", children: [_jsx("strong", { children: __('Do you want to know all the amazing things you can do with Jetpack AI?', 'jetpack-ai-client') }), _jsx("span", { children: __('Generate and tweak content, create forms, get feedback and much more.', 'jetpack-ai-client') }), _jsx("div", { children: _jsxs(Button, { variant: "link", href: "https://jetpack.com/redirect/?source=logo_generator_learn_more_about_jetpack_ai", target: "_blank", onClick: onVisitBlankTarget ? onVisitBlankTarget : null, children: [_jsx("span", { children: __('Learn more about Jetpack AI', 'jetpack-ai-client') }), _jsx(Icon, { icon: external, size: 20 })] }) })] })] }));
 };

package/build/logo-generator/hooks/use-fair-usage-notice-message.js

@@ -24,7 +24,7 @@ const useFairUsageNoticeMessage = () => {
             nextUsagePeriodStartDate.getDate());
     };
     const getFairUsageNoticeMessage = resetDateString => {
-        const fairUsageMessage = __("You've reached this month's request limit, per our <link>fair usage policy</link>.", 'jetpack-ai-client');
+        const fairUsageMessage = __("You've reached this month's request limit, per our <link><span>fair usage policy</span></link>.", 'jetpack-ai-client');
         if (!resetDateString) {
             return fairUsageMessage;
         }
@@ -41,6 +41,7 @@ const useFairUsageNoticeMessage = () => {
     });
     const fairUsageNoticeMessageElement = createInterpolateElement(fairUsageNoticeMessage, {
         link: _jsx("a", { href: upgradeInfoUrl, target: "_blank", rel: "noreferrer" }),
+        span: _jsx("span", {}),
     });
     return fairUsageNoticeMessageElement;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.33.2",
+	"version": "0.33.4",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -44,12 +44,12 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^1.0.4",
-		"@automattic/jetpack-components": "^1.1.13",
-		"@automattic/jetpack-connection": "^1.2.13",
+		"@automattic/jetpack-base-styles": "^1.0.6",
+		"@automattic/jetpack-components": "^1.1.15",
+		"@automattic/jetpack-connection": "^1.3.1",
 		"@automattic/jetpack-explat": "workspace:*",
 		"@automattic/jetpack-script-data": "^0.5.0",
-		"@automattic/jetpack-shared-extension-utils": "^1.3.4",
+		"@automattic/jetpack-shared-extension-utils": "^1.3.7",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/jest": "30.0.0",
 		"@types/react": "18.3.23",

package/src/components/ai-control/style.scss

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/root-variables';
+@use "@automattic/jetpack-base-styles/root-variables";
 
 .jetpack-components-ai-control__container-wrapper {
 	position: sticky;
@@ -6,12 +6,12 @@
 }
 
 .jetpack-components-ai-control__container {
-	color: var( --jp-gray-80 );
-	background-color: var( --jp-white );
+	color: var(--jp-gray-80);
+	background-color: var(--jp-white);
 	box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.12), 0 3px 9px 0 rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
 	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	border-radius: 6px;
-	border: 1px solid var(--gutenberg-gray-400, #CCC);
+	border: 1px solid var(--gutenberg-gray-400, #ccc);
 }
 
 .jetpack-components-ai-control__wrapper {
@@ -35,7 +35,7 @@
 	align-items: center;
 
 	textarea.jetpack-components-ai-control__input {
-		background-color: var( --jp-white );
+		background-color: var(--jp-white);
 		width: 100%;
 		min-height: 20px;
 		border-radius: 2px;
@@ -44,7 +44,7 @@
 		resize: none !important;
 		border: none;
 		box-shadow: none;
-		color: var( --jp-gray-80 );
+		color: var(--jp-gray-80);
 
 		font-size: 16px;
 		font-weight: 400;
@@ -54,7 +54,7 @@
 
 		&:focus {
 			box-shadow: none;
-			color: var( --jp-gray-80 );
+			color: var(--jp-gray-80);
 		}
 
 		@media (min-width: 600px) {

package/src/components/ai-feedback/style.scss

@@ -10,6 +10,6 @@
 	}
 
 	&__thumb-selected {
-		color: var( --wp-components-color-accent, var( --wp-admin-theme-color, #3858e9 ) );
+		color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 	}
 }

package/src/components/ai-image/components/ai-image-modal.scss

@@ -40,7 +40,7 @@
 			border: 1px solid #ccc;
 			border-radius: 6px;
 			padding: 12px;
-			color: var( --studio-black );
+			color: var(--studio-black);
 		}
 
 		textarea:disabled {

package/src/components/ai-image/components/carrousel.scss

@@ -50,7 +50,7 @@ $scale-factor: 0.55;
 			display: flex;
 			align-items: center;
 			overflow: hidden;
-			height: calc( 768px * $scale-factor );
+			height: calc(768px * $scale-factor);
 
 			.ai-carrousel {
 
@@ -80,7 +80,7 @@ $scale-factor: 0.55;
 					background: transparent;
 
 					&:hover {
-						background-color: rgba( 0, 0, 0, 0.3 );
+						background-color: rgba(0, 0, 0, 0.3);
 						opacity: 1;
 					}
 
@@ -136,8 +136,8 @@ $scale-factor: 0.55;
 		}
 
 		&-image {
-			max-height: calc( 768px * $scale-factor );
-			max-width: calc( 1024px * $scale-factor );
+			max-height: calc(768px * $scale-factor);
+			max-width: calc(1024px * $scale-factor);
 			width: auto;
 			height: auto;
 			margin: auto 0;
@@ -149,18 +149,18 @@ $scale-factor: 0.55;
 			height: 100%;
 			position: absolute;
 			left: 8px;
-			transform: translateX( 100% );
+			transform: translateX(100%);
 			transition: transform 0.5s;
 			flex-direction: column;
 			align-items: center;
 
 			&.is-prev {
-				transform: translateX( -100% );
+				transform: translateX(-100%);
 				left: -8px;
 			}
 
 			&.is-current {
-				transform: translateX( 0 );
+				transform: translateX(0);
 				position: static;
 			}
 		}

package/src/components/ai-image/components/usage-counter.scss

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/style';
+@use "@automattic/jetpack-base-styles/style";
 
 .ai-assistant-featured-image__usage-counter {
 	color: var(--studio-gray-50, #646970);

package/src/components/ai-image/style.scss

@@ -30,7 +30,7 @@
 		textarea {
 			width: 100%;
 			outline: none;
-			border: 1px solid #CCC;
+			border: 1px solid #ccc;
 			border-radius: 6px;
 			padding: 12px;
 			color: var(--studio-black);
@@ -76,7 +76,7 @@
 		margin-top: 32px;
 		margin-bottom: -32px;
 		padding: 8px 32px;
-		border-top: solid 1px #DCDCDE;
+		border-top: solid 1px #dcdcde;
 		height: 60px;
 
 		&__feedback-button {

package/src/components/ai-modal-footer/style.scss

@@ -2,11 +2,11 @@
 	display: flex;
 	align-items: center;
 	gap: 4px;
-	color: var( --jp-gray-50 );
-	fill: var( --jp-gray-50 );
+	color: var(--jp-gray-50);
+	fill: var(--jp-gray-50);
 
 	.components-button.is-link {
-		color: var( --jp-gray-50 );
+		color: var(--jp-gray-50);
 	}
 }
 

package/src/components/ai-status-indicator/style.scss

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/style';
+@use "@automattic/jetpack-base-styles/style";
 
 .jetpack-ai-status-indicator__icon-wrapper {
 	transition: opacity 0.25s ease-in-out, width 0.25s;
@@ -12,7 +12,8 @@
 		margin: 6px 0 0;
 	}
 
-	&.is-requesting, &.is-suggesting {
+	&.is-requesting,
+	&.is-suggesting {
 		opacity: 1;
 		width: 24px;
 	}

package/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>

package/src/components/message/style.scss

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/root-variables';
+@use "@automattic/jetpack-base-styles/root-variables";
 
 .jetpack-ai-assistant__message {
 	display: flex;
@@ -11,7 +11,7 @@
 	min-height: 28px;
 
 	> svg {
-		fill: var( --jp-gray-40 );
+		fill: var(--jp-gray-40);
 		flex-shrink: 0;
 	}
 
@@ -29,11 +29,11 @@
 		}
 
 		.components-external-link {
-			color: var( --jp-gray-50 );
+			color: var(--jp-gray-50);
 		}
 
-		// Force padding 0 in link buttons, since default Gutenberg version in WordPress doesn't use iframe and
-		// Buttons receive styles from edit-post-visual-editor.
+		// Force padding 0 in link buttons, since default Gutenberg in WordPress
+		// doesn't use iframe and Buttons receive styles from edit-post-visual-editor.
 		.components-button.is-link {
 			padding: 0;
 		}
@@ -46,30 +46,30 @@
 }
 
 .jetpack-ai-assistant__message-severity-info {
-	background-color: var( --jp-gray-0 );
-	color: var( --jp-gray-50 );
+	background-color: var(--jp-gray-0);
+	color: var(--jp-gray-50);
 }
 
 .jetpack-ai-assistant__message-severity-warning {
-	background-color: #FEF8EE;
-	color: var( --jp-gray-100 );
+	background-color: #fef8ee;
+	color: var(--jp-gray-100);
 }
 
 .jetpack-ai-assistant__message-severity-error {
-	background-color: var( --jp-red-0 );
-	color: var( --jp-gray-100 );
+	background-color: var(--jp-red-0);
+	color: var(--jp-gray-100);
 
 	> svg {
-		fill: var( --jp-red-40, #E65054 );
+		fill: var(--jp-red-40, #e65054);
 	}
 }
 
 .jetpack-ai-assistant__message-severity-success {
-	background-color: var( --jp-green-5 );
-	color: var( --jp-gray-100 );
+	background-color: var(--jp-green-5);
+	color: var(--jp-gray-100);
 
 	> svg {
-		fill: var( --jp-green-30 );
+		fill: var(--jp-green-30);
 	}
 }
 
@@ -79,6 +79,6 @@
 	height: unset;
 
 	> svg {
-		fill: var( --jp-gray-50 );
+		fill: var(--jp-gray-50);
 	}
 }

package/src/components/modal/style.scss

@@ -23,7 +23,7 @@
 	}
 
 	&__divider {
-		background: #DCDCDE;
+		background: #dcdcde;
 		margin: 0 -32px;
 		height: 1px;
 	}

package/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;

package/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>

package/src/components/quota-exceeded-message/style.scss

@@ -1,37 +1,37 @@
-@use '@automattic/jetpack-base-styles/style';
+@use "@automattic/jetpack-base-styles/style";
 
 .jetpack-upgrade-plan-banner__wrapper {
-    column-gap: 32px;
+	column-gap: 32px;
 }
 
 .jetpack-upgrade-plan-banner.jetpack-ai-upgrade-banner {
 
-    .jetpack-upgrade-plan-banner__wrapper {
+	.jetpack-upgrade-plan-banner__wrapper {
 
-        .components-button.is-primary.is-busy {
-            background: var( --jp-white );
-            color: var( --jp-black );
-        }
-    }
+		.components-button.is-primary.is-busy {
+			background: var(--jp-white);
+			color: var(--jp-black);
+		}
+	}
 }
 
 .jetpack-ai-fair-usage-notice-muted-variant {
-    line-height: 1.4;
-    margin: 0;
-    text-wrap: pretty;
-    font-size: calc(13px);
-    font-weight: 400;
-    color: #757575;
-
-    a {
-        color: #757575;
-    }
+	line-height: 1.4;
+	margin: 0;
+	text-wrap: pretty;
+	font-size: calc(13px);
+	font-weight: 400;
+	color: #757575;
+
+	a {
+		color: #757575;
+	}
 }
 
 .jetpack-ai-fair-usage-notice {
-    color: #1E1E1E;
+	color: #1e1e1e;
 
-    a {
-        color: #1E1E1E;
-    }
+	a {
+		color: #1e1e1e;
+	}
 }

package/src/logo-generator/components/generator-modal.scss

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/root-variables';
+@use "@automattic/jetpack-base-styles/root-variables";
 
 .jetpack-ai-logo-generator-modal {
 
@@ -50,7 +50,7 @@
 }
 
 .jetpack-ai-logo-generator-modal__notice-message {
-	font-size: var( --font-body-small );
+	font-size: var(--font-body-small);
 }
 
 .jetpack-ai-logo-generator-modal__notice-actions {

package/src/logo-generator/components/history-carousel.scss

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/root-variables';
+@use "@automattic/jetpack-base-styles/root-variables";
 
 .jetpack-ai-logo-generator__carousel {
 	display: flex;

package/src/logo-generator/components/logo-presenter.scss

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/root-variables';
+@use "@automattic/jetpack-base-styles/root-variables";
 
 .jetpack-ai-logo-generator-modal-presenter__wrapper {
 	display: flex;

package/src/logo-generator/components/prompt.scss

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/root-variables';
+@use "@automattic/jetpack-base-styles/root-variables";
 
 .jetpack-ai-logo-generator__prompt {
 	display: flex;

package/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>
 							</>
 						) }

package/src/logo-generator/components/upgrade-nudge.scss

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/root-variables';
+@use "@automattic/jetpack-base-styles/root-variables";
 
 .jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper {
 	display: flex;

package/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>

package/src/logo-generator/components/upgrade-screen.tsx

@@ -52,12 +52,12 @@ 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"
@@ -65,7 +65,7 @@ export const UpgradeScreen: FC< {
 					target="_blank"
 					onClick={ handleUpgradeClick }
 				>
-					{ __( 'Upgrade', 'jetpack-ai-client' ) }
+					<span>{ __( 'Upgrade', 'jetpack-ai-client' ) }</span>
 				</Button>
 			</div>
 		</div>

package/src/logo-generator/components/visit-site-banner.scss

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/root-variables';
+@use "@automattic/jetpack-base-styles/root-variables";
 
 .jetpack-ai-logo-generator-modal-visit-site-banner {
 	border-radius: 4px;

package/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>

package/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;