AI Client: change logo generator upgrade message (#39671)

* use getRedirectUrl package to get URL links to more info on usage and limits

* update upgrade copy edit for logo generator

* add changelogs

projects/js-packages/ai-client/changelog/change-jetpack-ai-logo-generator-upgrade-message

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+AI Client: change upgrade copy edit and redirect URL

projects/js-packages/ai-client/src/logo-generator/components/upgrade-screen.tsx

@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import getRedirectUrl from '../../../../components/tools/jp-redirect/index.js';
 import { EVENT_PLACEMENT_FREE_USER_SCREEN, EVENT_UPGRADE } from '../constants.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
 /**
@@ -21,8 +22,9 @@ export const UpgradeScreen: React.FC< {
 } > = ( { onCancel, upgradeURL, reason } ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
+
 	const upgradeMessageFeature = __(
-		'The logo generator requires a paid Jetpack AI plan. Upgrade your plan to access exclusive features, including logo generation. The upgrade will also increase the amount of requests you can use in all AI-powered features.',
+		'Upgrade your Jetpack AI for access to logo generation. This upgrade will also increase the amount of monthly requests you can use in for all AI-powered features.',
 		'jetpack-ai-client'
 	);
 
@@ -31,6 +33,10 @@ export const UpgradeScreen: React.FC< {
 		'jetpack-ai-client'
 	);
 
+	const upgradeInfoUrl = getRedirectUrl( 'ai-logo-generator-fair-usage-policy', {
+		anchor: 'usage-limitations-and-upgrades',
+	} );
+
 	const { context } = useLogoGenerator();
 
 	const handleUpgradeClick = () => {
@@ -45,7 +51,7 @@ export const UpgradeScreen: React.FC< {
 					{ reason === 'feature' ? upgradeMessageFeature : upgradeMessageRequests }
 				</span>
 				&nbsp;
-				<Button variant="link" href="https://jetpack.com/ai/" target="_blank">
+				<Button variant="link" href={ upgradeInfoUrl } target="_blank">
 					{ __( 'Learn more about Jetpack AI.', 'jetpack-ai-client' ) }
 				</Button>
 			</div>

projects/js-packages/ai-client/src/logo-generator/hooks/use-fair-usage-notice-message.tsx

@@ -1,6 +1,7 @@
 import { useSelect } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import getRedirectUrl from '../../../../components/tools/jp-redirect/index.js';
 /**
  * Internal dependencies
  */
@@ -52,14 +53,12 @@ const useFairUsageNoticeMessage = () => {
 	// Get the proper template based on the presence of the next usage period start date.
 	const fairUsageNoticeMessage = getFairUsageNoticeMessage( nextUsagePeriodStartDateString );
 
+	const upgradeInfoUrl = getRedirectUrl( 'ai-logo-generator-fair-usage-policy', {
+		anchor: 'jetpack-ai-usage-limit',
+	} );
+
 	const fairUsageNoticeMessageElement = createInterpolateElement( fairUsageNoticeMessage, {
-		link: (
-			<a
-				href="https://jetpack.com/redirect/?source=ai-logo-generator-fair-usage-policy"
-				target="_blank"
-				rel="noreferrer"
-			/>
-		),
+		link: <a href={ upgradeInfoUrl } target="_blank" rel="noreferrer" />,
 	} );
 
 	return fairUsageNoticeMessageElement;

projects/js-packages/components/changelog/change-jetpack-ai-logo-generator-upgrade-message

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Components - getRedirectUrl: use file extension on import for linter to find definitions

projects/js-packages/components/tools/jp-redirect/index.ts

@@ -1,6 +1,6 @@
 /* global jetpack_redirects */
 
-import { GetRedirectUrlArgs, QueryVars } from './types';
+import { GetRedirectUrlArgs, QueryVars } from './types.js';
 
 /**
  * Builds an URL using the jetpack.com/redirect/ service