@automattic/jetpack-ai-client 0.16.0 → 0.16.2

package/CHANGELOG.md

@@ -5,6 +5,24 @@ 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.16.2] - 2024-08-19
+### Changed
+- Update dependencies. [#38861] [#38662] [#38665] [#38893]
+
+### Fixed
+- Lossless image optimization for images (should improve performance with no visible changes). [#38750]
+
+## [0.16.1] - 2024-08-05
+### Changed
+- AI Logo Generator: fix UI issues. [#38590]
+- Fixup versions [#38612]
+
+### Fixed
+- AI Logo Generator: fix multiple feature requests error + retry handling. [#38630]
+- AI Logo Generator: fix small UI issues. [#38676]
+- AI Logo Generator: fix upgrade URLs so they work on any site type. [#38598]
+- AI Logo Generator: update upgrade message. [#38690]
+
 ## [0.16.0] - 2024-07-29
 ### Added
 - AI Logo Generator: support placement property on the generator modal, for tracking purposes. [#38574]
@@ -366,6 +384,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.16.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.16.1...v0.16.2
+[0.16.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.16.0...v0.16.1
 [0.16.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.15.0...v0.16.0
 [0.15.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.6...v0.15.0
 [0.14.6]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.5...v0.14.6

package/build/logo-generator/components/feature-fetch-failure-screen.js

@@ -5,6 +5,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 export const FeatureFetchFailureScreen = ({ onCancel, onRetry }) => {
-    const errorMessage = __('We are sorry. There was an error loading your Jetpack AI account settings. Please, try again.', 'jetpack-ai-client');
+    const errorMessage = __('We are sorry. There was an error loading your Jetpack AI plan data. Please, try again.', 'jetpack-ai-client');
     return (_jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-message-wrapper", children: [_jsx("div", { className: "jetpack-ai-logo-generator-modal__notice-message", children: _jsx("span", { className: "jetpack-ai-logo-generator-modal__loading-message", children: errorMessage }) }), _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", onClick: onRetry, children: __('Try again', 'jetpack-ai-client') })] })] }));
 };

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

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Modal, Button } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, select } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { external, Icon } from '@wordpress/icons';
 import clsx from 'clsx';
@@ -14,6 +14,7 @@ import { useState, useEffect, useCallback, useRef } from 'react';
  * Internal dependencies
  */
 import { DEFAULT_LOGO_COST, EVENT_MODAL_OPEN, EVENT_FEEDBACK, EVENT_MODAL_CLOSE, EVENT_GENERATE, } from '../constants.js';
+import { useCheckout } from '../hooks/use-checkout.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
 import useRequestErrors from '../hooks/use-request-errors.js';
 import { isLogoHistoryEmpty, clearDeletedMedia } from '../lib/logo-storage.js';
@@ -27,21 +28,22 @@ import { UpgradeScreen } from './upgrade-screen.js';
 import { VisitSiteBanner } from './visit-site-banner.js';
 import './generator-modal.scss';
 const debug = debugFactory('jetpack-ai-calypso:generator-modal');
-export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, siteDetails, context, placement, }) => {
+export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDetails, context, placement, }) => {
     const { tracks } = useAnalytics();
     const { recordEvent: recordTracksEvent } = tracks;
     const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory } = useDispatch(STORE_NAME);
+    const { getIsRequestingAiAssistantFeature } = select(STORE_NAME);
     const [loadingState, setLoadingState] = useState(null);
     const [initialPrompt, setInitialPrompt] = useState();
     const needsToHandleModalOpen = useRef(true);
     const requestedFeatureData = useRef(false);
     const [needsFeature, setNeedsFeature] = useState(false);
     const [needsMoreRequests, setNeedsMoreRequests] = useState(false);
-    const [upgradeURL, setUpgradeURL] = useState('');
     const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext } = useLogoGenerator();
     const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
     const siteId = siteDetails?.ID;
     const [logoAccepted, setLogoAccepted] = useState(false);
+    const { nextTierCheckoutURL: upgradeURL } = useCheckout();
     // First fetch the feature data so we have the most up-to-date info from the backend.
     const feature = getAiAssistantFeature();
     const generateFirstLogo = useCallback(async () => {
@@ -79,13 +81,10 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, siteDetails, cont
                 !hasNoNextTier &&
                 !hasHistory &&
                 currentLimit - currentUsage < logoCost + promptCreationCost;
-            // If the site requires an upgrade, set the upgrade URL and show the upgrade screen immediately.
+            // If the site requires an upgrade, show the upgrade screen immediately.
             setNeedsFeature(!feature?.hasFeature ?? true);
             setNeedsMoreRequests(siteNeedsMoreRequests);
             if (!feature?.hasFeature || siteNeedsMoreRequests) {
-                const siteUpgradeURL = new URL(`${location.origin}/checkout/${siteDetails?.domain}/${feature?.nextTier?.slug}`);
-                siteUpgradeURL.searchParams.set('redirect_to', location.href);
-                setUpgradeURL(siteUpgradeURL.toString());
                 setLoadingState(null);
                 return;
             }
@@ -142,10 +141,13 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, siteDetails, cont
         }
         // When the site details are set, we need to fetch the feature data.
         if (!requestedFeatureData.current) {
-            requestedFeatureData.current = true;
-            fetchAiAssistantFeature();
+            const isRequestingFeature = getIsRequestingAiAssistantFeature();
+            if (!isRequestingFeature) {
+                requestedFeatureData.current = true;
+                fetchAiAssistantFeature();
+            }
         }
-    }, [siteId, siteDetails, setSiteDetails]);
+    }, [siteId, siteDetails, setSiteDetails, getIsRequestingAiAssistantFeature]);
     // Handles modal opening logic
     useEffect(() => {
         // While the modal is not open, the siteId is not set, or the feature data is not available, do nothing.
@@ -163,13 +165,16 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, siteDetails, cont
         body = _jsx(FirstLoadScreen, { state: loadingState });
     }
     else if (featureFetchError || firstLogoPromptFetchError) {
-        body = _jsx(FeatureFetchFailureScreen, { onCancel: closeModal, onRetry: initializeModal });
+        body = (_jsx(FeatureFetchFailureScreen, { onCancel: closeModal, onRetry: () => {
+                closeModal();
+                onReload?.();
+            } }));
     }
     else if (needsFeature || needsMoreRequests) {
         body = (_jsx(UpgradeScreen, { onCancel: closeModal, upgradeURL: upgradeURL, reason: needsFeature ? 'feature' : 'requests' }));
     }
     else {
-        body = (_jsxs(_Fragment, { children: [!logoAccepted && _jsx(Prompt, { initialPrompt: initialPrompt }), _jsx(LogoPresenter, { logo: selectedLogo, onApplyLogo: handleApplyLogo, logoAccepted: logoAccepted, siteId: String(siteId) }), logoAccepted ? (_jsxs("div", { className: "jetpack-ai-logo-generator__accept", children: [_jsx(VisitSiteBanner, { onVisitBlankTarget: closeModal }), _jsx("div", { className: "jetpack-ai-logo-generator__accept-actions", children: _jsx(Button, { variant: "primary", onClick: closeModal, children: __('Close', 'jetpack-ai-client') }) })] })) : (_jsxs(_Fragment, { children: [_jsx(HistoryCarousel, {}), _jsx("div", { className: "jetpack-ai-logo-generator__footer", children: _jsxs(Button, { variant: "link", className: "jetpack-ai-logo-generator__feedback-button", href: "https://jetpack.com/redirect/?source=jetpack-ai-feedback", target: "_blank", onClick: handleFeedbackClick, children: [_jsx("span", { children: __('Provide feedback', 'jetpack-ai-client') }), _jsx(Icon, { icon: external, className: "icon" })] }) })] }))] }));
+        body = (_jsxs(_Fragment, { children: [!logoAccepted && _jsx(Prompt, { initialPrompt: initialPrompt }), _jsx(LogoPresenter, { logo: selectedLogo, onApplyLogo: handleApplyLogo, logoAccepted: logoAccepted, siteId: String(siteId) }), logoAccepted ? (_jsxs("div", { className: "jetpack-ai-logo-generator__accept", children: [_jsx(VisitSiteBanner, {}), _jsx("div", { className: "jetpack-ai-logo-generator__accept-actions", children: _jsx(Button, { variant: "primary", onClick: closeModal, children: __('Close', 'jetpack-ai-client') }) })] })) : (_jsxs(_Fragment, { children: [_jsx(HistoryCarousel, {}), _jsx("div", { className: "jetpack-ai-logo-generator__footer", children: _jsxs(Button, { variant: "link", className: "jetpack-ai-logo-generator__feedback-button", href: "https://jetpack.com/redirect/?source=jetpack-ai-feedback", target: "_blank", onClick: handleFeedbackClick, children: [_jsx("span", { children: __('Provide feedback', 'jetpack-ai-client') }), _jsx(Icon, { icon: external, className: "icon" })] }) })] }))] }));
     }
     return (_jsx(_Fragment, { children: isOpen && (_jsx(Modal, { className: "jetpack-ai-logo-generator-modal", onRequestClose: closeModal, shouldCloseOnClickOutside: false, shouldCloseOnEsc: false, title: __('Jetpack AI Logo Generator', 'jetpack-ai-client'), children: _jsx("div", { className: clsx('jetpack-ai-logo-generator-modal__body', {
                     'notice-modal': needsFeature || needsMoreRequests || featureFetchError || firstLogoPromptFetchError,

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

@@ -53,7 +53,7 @@ const SaveInLibraryButton = ({ siteId }) => {
     };
     const savingLabel = __('Saving…', 'jetpack-ai-client');
     const savedLabel = __('Saved', 'jetpack-ai-client');
-    return !saving && !saved ? (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", onClick: handleClick, children: [_jsx(Icon, { icon: _jsx(MediaIcon, {}) }), _jsx("span", { className: "action-text", children: __('Save in Library', 'jetpack-ai-client') })] })) : (_jsxs("button", { className: "jetpack-ai-logo-generator-modal-presenter__action", children: [_jsx(Icon, { icon: saving ? _jsx(MediaIcon, {}) : _jsx(CheckIcon, {}) }), _jsx("span", { className: "action-text", children: saving ? savingLabel : savedLabel })] }));
+    return !saving && !saved ? (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", onClick: handleClick, children: [_jsx(Icon, { icon: _jsx(MediaIcon, {}) }), _jsx("span", { className: "action-text", children: __('Save in Library', 'jetpack-ai-client') })] })) : (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", children: [_jsx(Icon, { icon: saving ? _jsx(MediaIcon, {}) : _jsx(CheckIcon, {}) }), _jsx("span", { className: "action-text", children: saving ? savingLabel : savedLabel })] }));
 };
 const UseOnSiteButton = ({ onApplyLogo, }) => {
     const { tracks } = useAnalytics();

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

@@ -13,12 +13,12 @@ import useLogoGenerator from '../hooks/use-logo-generator.js';
 export const UpgradeScreen = ({ onCancel, upgradeURL, reason }) => {
     const { tracks } = useAnalytics();
     const { recordEvent: recordTracksEvent } = tracks;
-    const upgradeMessageFeature = __('Upgrade your Jetpack AI for access to exclusive features, including logo generation. This upgrade will also increase the amount of requests you can use in all AI-powered features.', 'jetpack-ai-client');
+    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.', 'jetpack-ai-client');
     const upgradeMessageRequests = __('Not enough requests left to generate a logo. Upgrade your Jetpack AI to increase the amount of requests you can use in all AI-powered features.', 'jetpack-ai-client');
     const { context } = useLogoGenerator();
     const handleUpgradeClick = () => {
         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: "https://jetpack.com/ai/", target: "_blank", children: __('Learn more', '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: "https://jetpack.com/ai/", 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') })] })] }));
 };

package/build/logo-generator/components/visit-site-banner.d.ts

@@ -5,5 +5,5 @@ import './visit-site-banner.scss';
 import type React from 'react';
 export declare const VisitSiteBanner: React.FC<{
     className?: string;
-    onVisitBlankTarget: () => void;
+    onVisitBlankTarget?: () => void;
 }>;

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, 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: [__('Learn more about Jetpack AI', 'jetpack-ai-client'), _jsx(Icon, { icon: external, size: 20 })] }) })] })] }));
 };

package/build/logo-generator/hooks/use-checkout.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { isAtomicSite, isSimpleSite, getSiteFragment, } from '@automattic/jetpack-shared-extension-utils';
 import { useSelect } from '@wordpress/data';
 import debugFactory from 'debug';
 /**
@@ -9,18 +10,27 @@ import debugFactory from 'debug';
 import { STORE_NAME } from '../store/index.js';
 const debug = debugFactory('ai-client:logo-generator:use-checkout');
 export const useCheckout = () => {
-    const { nextTier, siteDetails } = useSelect(select => {
+    const { nextTier } = useSelect(select => {
         const selectors = select(STORE_NAME);
         return {
             nextTier: selectors.getAiAssistantFeature().nextTier,
-            siteDetails: selectors.getSiteDetails(),
         };
     }, []);
-    const upgradeURL = new URL(`${location.origin}/checkout/${siteDetails?.domain}/${nextTier?.slug}`);
-    upgradeURL.searchParams.set('redirect_to', location.href);
-    debug('Next tier checkout URL: ', upgradeURL.toString());
+    /**
+     * Use the Jetpack redirect URL to open the checkout page
+     */
+    const wpcomCheckoutUrl = new URL(`https://jetpack.com/redirect/`);
+    wpcomCheckoutUrl.searchParams.set('source', 'jetpack-ai-yearly-tier-upgrade-nudge');
+    wpcomCheckoutUrl.searchParams.set('site', getSiteFragment());
+    wpcomCheckoutUrl.searchParams.set('path', `jetpack_ai_yearly:-q-${nextTier?.limit}`);
+    /**
+     * Open the product interstitial page
+     */
+    const jetpackCheckoutUrl = `${window?.Jetpack_Editor_Initial_State?.adminUrl}admin.php?redirect_to_referrer=1&page=my-jetpack#/add-jetpack-ai`;
+    const nextTierCheckoutURL = isAtomicSite() || isSimpleSite() ? wpcomCheckoutUrl.toString() : jetpackCheckoutUrl;
+    debug('Next tier checkout URL: ', nextTierCheckoutURL);
     return {
-        nextTierCheckoutURL: upgradeURL.toString(),
+        nextTierCheckoutURL,
         hasNextTier: !!nextTier,
     };
 };

package/build/logo-generator/lib/logo-storage.js

@@ -119,5 +119,7 @@ export async function clearDeletedMedia(siteId) {
             .filter(({ exists }) => !exists)
             .forEach(({ mediaId }) => removeLogo({ siteId, mediaId }));
     }
-    catch (error) { } // Assume that the media exists if there was a network error and do nothing to avoid data loss.
+    catch (error) {
+        // Assume that the media exists if there was a network error and do nothing to avoid data loss.
+    }
 }

package/build/logo-generator/types.d.ts

@@ -14,6 +14,7 @@ export interface GeneratorModalProps {
     isOpen: boolean;
     onClose: () => void;
     onApplyLogo: (mediaId: number) => void;
+    onReload: () => void;
     context: string;
     placement: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.16.0",
+	"version": "0.16.2",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -23,14 +23,15 @@
 	},
 	"type": "module",
 	"devDependencies": {
-		"@storybook/addon-actions": "8.1.6",
-		"@storybook/blocks": "8.1.6",
-		"@storybook/preview-api": "8.1.6",
-		"@storybook/react": "8.1.6",
-		"@types/markdown-it": "14.0.1",
-		"@types/turndown": "5.0.4",
+		"@storybook/addon-actions": "8.2.9",
+		"@storybook/blocks": "8.2.9",
+		"@storybook/preview-api": "8.2.9",
+		"@storybook/react": "8.2.9",
+		"@types/markdown-it": "14.1.2",
+		"@types/turndown": "5.0.5",
 		"jest": "^29.6.2",
 		"jest-environment-jsdom": "29.7.0",
+		"storybook": "8.2.9",
 		"typescript": "5.0.4"
 	},
 	"exports": {
@@ -42,21 +43,21 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.28",
-		"@automattic/jetpack-connection": "^0.34.1",
-		"@automattic/jetpack-shared-extension-utils": "^0.15.0",
+		"@automattic/jetpack-base-styles": "^0.6.29",
+		"@automattic/jetpack-connection": "^0.35.2",
+		"@automattic/jetpack-shared-extension-utils": "^0.15.3",
 		"@microsoft/fetch-event-source": "2.0.1",
-		"@types/react": "18.3.1",
-		"@types/wordpress__block-editor": "11.5.14",
-		"@wordpress/api-fetch": "7.2.0",
-		"@wordpress/blob": "4.2.0",
-		"@wordpress/block-editor": "13.2.0",
-		"@wordpress/components": "28.2.0",
-		"@wordpress/compose": "7.2.0",
-		"@wordpress/data": "10.2.0",
-		"@wordpress/element": "6.2.0",
-		"@wordpress/i18n": "5.2.0",
-		"@wordpress/icons": "10.2.0",
+		"@types/react": "18.3.3",
+		"@types/wordpress__block-editor": "11.5.15",
+		"@wordpress/api-fetch": "7.5.0",
+		"@wordpress/blob": "4.5.0",
+		"@wordpress/block-editor": "14.0.0",
+		"@wordpress/components": "28.5.0",
+		"@wordpress/compose": "7.5.0",
+		"@wordpress/data": "10.5.0",
+		"@wordpress/element": "6.5.0",
+		"@wordpress/i18n": "5.5.0",
+		"@wordpress/icons": "10.5.0",
 		"clsx": "2.1.1",
 		"debug": "4.3.4",
 		"markdown-it": "14.0.0",

package/src/logo-generator/assets/images/jetpack-logo.svg

@@ -1,4 +1 @@
-<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path d="M16 32.5C24.8366 32.5 32 25.3366 32 16.5C32 7.66344 24.8366 0.5 16 0.5C7.16344 0.5 0 7.66344 0 16.5C0 25.3366 7.16344 32.5 16 32.5Z" fill="#069E08"/>
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3295 3.67557V19.1565H7.36005L15.3295 3.67557ZM16.9478 29.3244V13.813H24.9478L16.9478 29.3244Z" fill="white"/>
-</svg>
+<svg fill="none" height="33" viewBox="0 0 32 33" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m16 32.5c8.8366 0 16-7.1634 16-16 0-8.83656-7.1634-16-16-16-8.83656 0-16 7.16344-16 16 0 8.8366 7.16344 16 16 16z" fill="#069e08"/><path clip-rule="evenodd" d="m15.3295 3.67557v15.48093h-7.96945zm1.6183 25.64883v-15.5114h8z" fill="#fff" fill-rule="evenodd"/></svg>

package/src/logo-generator/components/feature-fetch-failure-screen.tsx

@@ -13,7 +13,7 @@ export const FeatureFetchFailureScreen: React.FC< {
 	onRetry: () => void;
 } > = ( { onCancel, onRetry } ) => {
 	const errorMessage = __(
-		'We are sorry. There was an error loading your Jetpack AI account settings. Please, try again.',
+		'We are sorry. There was an error loading your Jetpack AI plan data. Please, try again.',
 		'jetpack-ai-client'
 	);
 

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

@@ -3,7 +3,7 @@
  */
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Modal, Button } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, select } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { external, Icon } from '@wordpress/icons';
 import clsx from 'clsx';
@@ -19,6 +19,7 @@ import {
 	EVENT_MODAL_CLOSE,
 	EVENT_GENERATE,
 } from '../constants.js';
+import { useCheckout } from '../hooks/use-checkout.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
 import useRequestErrors from '../hooks/use-request-errors.js';
 import { isLogoHistoryEmpty, clearDeletedMedia } from '../lib/logo-storage.js';
@@ -43,6 +44,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	isOpen,
 	onClose,
 	onApplyLogo,
+	onReload,
 	siteDetails,
 	context,
 	placement,
@@ -50,6 +52,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
 	const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory } = useDispatch( STORE_NAME );
+	const { getIsRequestingAiAssistantFeature } = select( STORE_NAME );
 	const [ loadingState, setLoadingState ] = useState<
 		'loadingFeature' | 'analyzing' | 'generating' | null
 	>( null );
@@ -58,12 +61,12 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	const requestedFeatureData = useRef< boolean >( false );
 	const [ needsFeature, setNeedsFeature ] = useState( false );
 	const [ needsMoreRequests, setNeedsMoreRequests ] = useState( false );
-	const [ upgradeURL, setUpgradeURL ] = useState( '' );
 	const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext } =
 		useLogoGenerator();
 	const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
 	const siteId = siteDetails?.ID;
 	const [ logoAccepted, setLogoAccepted ] = useState( false );
+	const { nextTierCheckoutURL: upgradeURL } = useCheckout();
 
 	// First fetch the feature data so we have the most up-to-date info from the backend.
 	const feature = getAiAssistantFeature();
@@ -107,16 +110,10 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 				! hasHistory &&
 				currentLimit - currentUsage < logoCost + promptCreationCost;
 
-			// If the site requires an upgrade, set the upgrade URL and show the upgrade screen immediately.
+			// If the site requires an upgrade, show the upgrade screen immediately.
 			setNeedsFeature( ! feature?.hasFeature ?? true );
 			setNeedsMoreRequests( siteNeedsMoreRequests );
-
 			if ( ! feature?.hasFeature || siteNeedsMoreRequests ) {
-				const siteUpgradeURL = new URL(
-					`${ location.origin }/checkout/${ siteDetails?.domain }/${ feature?.nextTier?.slug }`
-				);
-				siteUpgradeURL.searchParams.set( 'redirect_to', location.href );
-				setUpgradeURL( siteUpgradeURL.toString() );
 				setLoadingState( null );
 				return;
 			}
@@ -182,10 +179,13 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 
 		// When the site details are set, we need to fetch the feature data.
 		if ( ! requestedFeatureData.current ) {
-			requestedFeatureData.current = true;
-			fetchAiAssistantFeature();
+			const isRequestingFeature = getIsRequestingAiAssistantFeature();
+			if ( ! isRequestingFeature ) {
+				requestedFeatureData.current = true;
+				fetchAiAssistantFeature();
+			}
 		}
-	}, [ siteId, siteDetails, setSiteDetails ] );
+	}, [ siteId, siteDetails, setSiteDetails, getIsRequestingAiAssistantFeature ] );
 
 	// Handles modal opening logic
 	useEffect( () => {
@@ -206,7 +206,15 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	if ( loadingState ) {
 		body = <FirstLoadScreen state={ loadingState } />;
 	} else if ( featureFetchError || firstLogoPromptFetchError ) {
-		body = <FeatureFetchFailureScreen onCancel={ closeModal } onRetry={ initializeModal } />;
+		body = (
+			<FeatureFetchFailureScreen
+				onCancel={ closeModal }
+				onRetry={ () => {
+					closeModal();
+					onReload?.();
+				} }
+			/>
+		);
 	} else if ( needsFeature || needsMoreRequests ) {
 		body = (
 			<UpgradeScreen
@@ -227,7 +235,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 				/>
 				{ logoAccepted ? (
 					<div className="jetpack-ai-logo-generator__accept">
-						<VisitSiteBanner onVisitBlankTarget={ closeModal } />
+						<VisitSiteBanner />
 						<div className="jetpack-ai-logo-generator__accept-actions">
 							<Button variant="primary" onClick={ closeModal }>
 								{ __( 'Close', 'jetpack-ai-client' ) }

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

@@ -79,10 +79,10 @@ const SaveInLibraryButton: React.FC< { siteId: string } > = ( { siteId } ) => {
 			<span className="action-text">{ __( 'Save in Library', 'jetpack-ai-client' ) }</span>
 		</Button>
 	) : (
-		<button className="jetpack-ai-logo-generator-modal-presenter__action">
+		<Button className="jetpack-ai-logo-generator-modal-presenter__action">
 			<Icon icon={ saving ? <MediaIcon /> : <CheckIcon /> } />
 			<span className="action-text">{ saving ? savingLabel : savedLabel }</span>
-		</button>
+		</Button>
 	);
 };
 

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

@@ -22,7 +22,7 @@ export const UpgradeScreen: React.FC< {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
 	const upgradeMessageFeature = __(
-		'Upgrade your Jetpack AI for access to exclusive features, including logo generation. This upgrade will also increase the amount of requests you can use in all AI-powered features.',
+		'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.',
 		'jetpack-ai-client'
 	);
 
@@ -46,7 +46,7 @@ export const UpgradeScreen: React.FC< {
 				</span>
 				&nbsp;
 				<Button variant="link" href="https://jetpack.com/ai/" target="_blank">
-					{ __( 'Learn more', 'jetpack-ai-client' ) }
+					{ __( 'Learn more about Jetpack AI.', 'jetpack-ai-client' ) }
 				</Button>
 			</div>
 			<div className="jetpack-ai-logo-generator-modal__notice-actions">

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

@@ -17,7 +17,7 @@ import type React from 'react';
 
 export const VisitSiteBanner: React.FC< {
 	className?: string;
-	onVisitBlankTarget: () => void;
+	onVisitBlankTarget?: () => void;
 } > = ( { className = null, onVisitBlankTarget } ) => {
 	return (
 		<div className={ clsx( 'jetpack-ai-logo-generator-modal-visit-site-banner', className ) }>
@@ -42,7 +42,7 @@ export const VisitSiteBanner: React.FC< {
 						variant="link"
 						href="https://jetpack.com/redirect/?source=logo_generator_learn_more_about_jetpack_ai"
 						target="_blank"
-						onClick={ onVisitBlankTarget }
+						onClick={ onVisitBlankTarget ? onVisitBlankTarget : null }
 					>
 						{ __( 'Learn more about Jetpack AI', 'jetpack-ai-client' ) }
 						<Icon icon={ external } size={ 20 } />

package/src/logo-generator/hooks/use-checkout.ts

@@ -1,6 +1,11 @@
 /**
  * External dependencies
  */
+import {
+	isAtomicSite,
+	isSimpleSite,
+	getSiteFragment,
+} from '@automattic/jetpack-shared-extension-utils';
 import { useSelect } from '@wordpress/data';
 import debugFactory from 'debug';
 /**
@@ -15,23 +20,33 @@ import type { Selectors } from '../store/types.js';
 const debug = debugFactory( 'ai-client:logo-generator:use-checkout' );
 
 export const useCheckout = () => {
-	const { nextTier, siteDetails } = useSelect( select => {
+	const { nextTier } = useSelect( select => {
 		const selectors: Selectors = select( STORE_NAME );
 		return {
 			nextTier: selectors.getAiAssistantFeature().nextTier,
-			siteDetails: selectors.getSiteDetails(),
 		};
 	}, [] );
 
-	const upgradeURL = new URL(
-		`${ location.origin }/checkout/${ siteDetails?.domain }/${ nextTier?.slug }`
-	);
-	upgradeURL.searchParams.set( 'redirect_to', location.href );
+	/**
+	 * Use the Jetpack redirect URL to open the checkout page
+	 */
+	const wpcomCheckoutUrl = new URL( `https://jetpack.com/redirect/` );
+	wpcomCheckoutUrl.searchParams.set( 'source', 'jetpack-ai-yearly-tier-upgrade-nudge' );
+	wpcomCheckoutUrl.searchParams.set( 'site', getSiteFragment() as string );
+	wpcomCheckoutUrl.searchParams.set( 'path', `jetpack_ai_yearly:-q-${ nextTier?.limit }` );
 
-	debug( 'Next tier checkout URL: ', upgradeURL.toString() );
+	/**
+	 * Open the product interstitial page
+	 */
+	const jetpackCheckoutUrl = `${ window?.Jetpack_Editor_Initial_State?.adminUrl }admin.php?redirect_to_referrer=1&page=my-jetpack#/add-jetpack-ai`;
+
+	const nextTierCheckoutURL =
+		isAtomicSite() || isSimpleSite() ? wpcomCheckoutUrl.toString() : jetpackCheckoutUrl;
+
+	debug( 'Next tier checkout URL: ', nextTierCheckoutURL );
 
 	return {
-		nextTierCheckoutURL: upgradeURL.toString(),
+		nextTierCheckoutURL,
 		hasNextTier: !! nextTier,
 	};
 };

package/src/logo-generator/lib/logo-storage.ts

@@ -162,5 +162,7 @@ export async function clearDeletedMedia( siteId: string ) {
 		responses
 			.filter( ( { exists } ) => ! exists )
 			.forEach( ( { mediaId } ) => removeLogo( { siteId, mediaId } ) );
-	} catch ( error ) {} // Assume that the media exists if there was a network error and do nothing to avoid data loss.
+	} catch ( error ) {
+		// Assume that the media exists if there was a network error and do nothing to avoid data loss.
+	}
 }

package/src/logo-generator/types.ts

@@ -16,6 +16,7 @@ export interface GeneratorModalProps {
 	isOpen: boolean;
 	onClose: () => void;
 	onApplyLogo: ( mediaId: number ) => void;
+	onReload: () => void;
 	context: string;
 	placement: string;
 }