@automattic/jetpack-ai-client 0.15.0 → 0.16.1

package/CHANGELOG.md

@@ -5,6 +5,25 @@ 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.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]
+
+### Fixed
+- AI Logo Generator: make the initial prompt update when the site name and description are fully laoded from store. [#38491]
+- AI Logo Generator: provide the saved media ID on the save logo callback. [#38552]
+
 ## [0.15.0] - 2024-07-22
 ### Added
 - Jetpack AI: Add logo generator codebase to the ai-client package. [#38391]
@@ -358,6 +377,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.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
 [0.14.5]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.4...v0.14.5

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';
@@ -13,7 +13,8 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 /**
  * Internal dependencies
  */
-import { DEFAULT_LOGO_COST, EVENT_MODAL_OPEN, EVENT_FEEDBACK, EVENT_MODAL_CLOSE, EVENT_PLACEMENT_QUICK_LINKS, EVENT_GENERATE, } from '../constants.js';
+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,22 +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, siteDetails, context, }) => {
+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 siteURL = siteDetails?.URL;
     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 () => {
@@ -80,13 +81,10 @@ export const GeneratorModal = ({ isOpen, onClose, siteDetails, context, }) => {
                 !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;
             }
@@ -115,9 +113,9 @@ export const GeneratorModal = ({ isOpen, onClose, siteDetails, context, }) => {
     ]);
     const handleModalOpen = useCallback(async () => {
         setContext(context);
-        recordTracksEvent(EVENT_MODAL_OPEN, { context, placement: EVENT_PLACEMENT_QUICK_LINKS });
+        recordTracksEvent(EVENT_MODAL_OPEN, { context, placement });
         initializeModal();
-    }, [setContext, context, initializeModal]);
+    }, [setContext, context, placement, initializeModal]);
     const closeModal = () => {
         // Reset the state when the modal is closed, so we trigger the modal initialization again when it's opened.
         needsToHandleModalOpen.current = true;
@@ -127,17 +125,11 @@ export const GeneratorModal = ({ isOpen, onClose, siteDetails, context, }) => {
         setNeedsMoreRequests(false);
         clearErrors();
         setLogoAccepted(false);
-        recordTracksEvent(EVENT_MODAL_CLOSE, { context, placement: EVENT_PLACEMENT_QUICK_LINKS });
+        recordTracksEvent(EVENT_MODAL_CLOSE, { context, placement });
     };
-    const handleApplyLogo = () => {
+    const handleApplyLogo = (mediaId) => {
         setLogoAccepted(true);
-    };
-    const handleCloseAndReload = () => {
-        closeModal();
-        setTimeout(() => {
-            // Reload the page to update the logo.
-            window.location.reload();
-        }, 1000);
+        onApplyLogo?.(mediaId);
     };
     const handleFeedbackClick = () => {
         recordTracksEvent(EVENT_FEEDBACK, { context });
@@ -149,10 +141,13 @@ export const GeneratorModal = ({ isOpen, onClose, siteDetails, context, }) => {
         }
         // 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.
@@ -170,15 +165,18 @@ export const GeneratorModal = ({ isOpen, onClose, siteDetails, context, }) => {
         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, { siteURL: siteURL, onVisitBlankTarget: handleCloseAndReload }), _jsxs("div", { className: "jetpack-ai-logo-generator__accept-actions", children: [_jsx(Button, { variant: "link", onClick: handleCloseAndReload, children: __('Close and refresh', 'jetpack-ai-client') }), _jsx(Button, { href: siteURL, variant: "primary", children: __('Visit site', '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: logoAccepted ? handleCloseAndReload : closeModal, shouldCloseOnClickOutside: false, shouldCloseOnEsc: false, title: __('Jetpack AI Logo Generator', 'jetpack-ai-client'), children: _jsx("div", { className: clsx('jetpack-ai-logo-generator-modal__body', {
+    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,
                 }), children: body }) })) }));
 };

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

@@ -53,38 +53,32 @@ 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 UseOnSiteButton = ({ onApplyLogo, }) => {
     const { tracks } = useAnalytics();
     const { recordEvent: recordTracksEvent } = tracks;
-    const { applyLogo, isSavingLogoToLibrary, isApplyingLogo, selectedLogo, logos, selectedLogoIndex, context, } = useLogoGenerator();
+    const { isSavingLogoToLibrary, selectedLogo, logos, selectedLogoIndex, context } = useLogoGenerator();
     const handleClick = async () => {
-        if (!isApplyingLogo && !isSavingLogoToLibrary) {
+        if (!isSavingLogoToLibrary) {
             recordTracksEvent(EVENT_USE, {
                 context,
                 logos_count: logos.length,
                 selected_logo: selectedLogoIndex != null ? selectedLogoIndex + 1 : 0,
             });
-            try {
-                await applyLogo();
-                onApplyLogo();
-            }
-            catch (error) {
-                debug('Error applying logo', error);
-            }
+            onApplyLogo?.(selectedLogo?.mediaId);
         }
     };
-    return isApplyingLogo && !isSavingLogoToLibrary ? (_jsxs("button", { className: "jetpack-ai-logo-generator-modal-presenter__action", children: [_jsx(Icon, { icon: _jsx(LogoIcon, {}) }), _jsx("span", { className: "action-text", children: __('Applying logo…', 'jetpack-ai-client') })] })) : (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", onClick: handleClick, disabled: isSavingLogoToLibrary || !selectedLogo?.mediaId, children: [_jsx(Icon, { icon: _jsx(LogoIcon, {}) }), _jsx("span", { className: "action-text", children: __('Use on Site', 'jetpack-ai-client') })] }));
+    return (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", onClick: handleClick, disabled: isSavingLogoToLibrary || !selectedLogo?.mediaId, children: [_jsx(Icon, { icon: _jsx(LogoIcon, {}) }), _jsx("span", { className: "action-text", children: __('Use on block', 'jetpack-ai-client') })] }));
 };
 const LogoLoading = () => {
     return (_jsxs(_Fragment, { children: [_jsx(ImageLoader, { className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsx("span", { className: "jetpack-ai-logo-generator-modal-presenter__loading-text", children: __('Generating new logo…', 'jetpack-ai-client') })] }));
 };
-const LogoReady = ({ siteId, logo, onApplyLogo, }) => {
+const LogoReady = ({ siteId, logo, onApplyLogo }) => {
     return (_jsxs(_Fragment, { children: [_jsx("img", { src: logo.url, alt: logo.description, className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__action-wrapper", children: [_jsx("span", { className: "jetpack-ai-logo-generator-modal-presenter__description", children: logo.description }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__actions", children: [_jsx(SaveInLibraryButton, { siteId: siteId }), _jsx(UseOnSiteButton, { onApplyLogo: onApplyLogo })] })] })] }));
 };
 const LogoUpdated = ({ logo }) => {
-    return (_jsxs(_Fragment, { children: [_jsx("img", { src: logo.url, alt: logo.description, className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__success-wrapper", children: [_jsx(Icon, { icon: _jsx(CheckIcon, {}) }), _jsx("span", { children: __('Your logo has been successfully updated!', 'jetpack-ai-client') })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("img", { src: logo.url, alt: logo.description, className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__success-wrapper", children: [_jsx(Icon, { icon: _jsx(CheckIcon, {}) }), _jsx("span", { children: __('Your new logo was set to the block!', 'jetpack-ai-client') })] })] }));
 };
 export const LogoPresenter = ({ logo = null, loading = false, onApplyLogo, logoAccepted = false, siteId, }) => {
     const { isRequestingImage } = useLogoGenerator();

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

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

@@ -11,6 +11,6 @@ import clsx from 'clsx';
  */
 import jetpackLogo from '../assets/images/jetpack-logo.svg';
 import './visit-site-banner.scss';
-export const VisitSiteBanner = ({ className = null, siteURL = '#', 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: siteURL, target: "_blank", onClick: onVisitBlankTarget, children: [__('Visit website', 'jetpack-ai-client'), _jsx(Icon, { icon: external, size: 20 })] }) })] })] }));
+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 })] }) })] })] }));
 };

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/hooks/use-logo-generator.js

@@ -78,7 +78,7 @@ Site description: ${description}`;
             setFirstLogoPromptFetchError(error);
             throw error;
         }
-    }, [setFirstLogoPromptFetchError, increaseAiAssistantRequestsCount]);
+    }, [setFirstLogoPromptFetchError, increaseAiAssistantRequestsCount, name, description]);
     const enhancePrompt = async function ({ prompt }) {
         setEnhancePromptFetchError(null);
         increaseAiAssistantRequestsCount();

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/lib/wpcom-limited-request.js

@@ -7,7 +7,6 @@ import apiFetch from '../../api-fetch/index.js';
  */
 const MAX_CONCURRENT_REQUESTS = 5;
 let concurrentCounter = 0;
-let lastCallTimestamp = null;
 /**
  * Concurrency-limited request to wpcom-proxy-request.
  * @param { object } params - The request params, as expected by apiFetch.
@@ -20,13 +19,6 @@ export default async function wpcomLimitedRequest(params) {
         concurrentCounter -= 1;
         throw new Error('Too many requests');
     }
-    const now = Date.now();
-    // Check if the last call was made less than 100 milliseconds ago
-    if (lastCallTimestamp && now - lastCallTimestamp < 100) {
-        concurrentCounter -= 1;
-        throw new Error('Too many requests');
-    }
-    lastCallTimestamp = now; // Update the timestamp
     return apiFetch(params).finally(() => {
         concurrentCounter -= 1;
     });

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

@@ -13,12 +13,15 @@ export interface GeneratorModalProps {
     siteDetails?: SiteDetails;
     isOpen: boolean;
     onClose: () => void;
+    onApplyLogo: (mediaId: number) => void;
+    onReload: () => void;
     context: string;
+    placement: string;
 }
 export interface LogoPresenterProps {
     logo?: Logo;
     loading?: boolean;
-    onApplyLogo: () => void;
+    onApplyLogo: (mediaId: number) => void;
     logoAccepted?: boolean;
     siteId: string | number;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.15.0",
+	"version": "0.16.1",
 	"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,7 +44,7 @@
 	"dependencies": {
 		"@automattic/jetpack-base-styles": "^0.6.28",
 		"@automattic/jetpack-connection": "^0.34.1",
-		"@automattic/jetpack-shared-extension-utils": "^0.14.19",
+		"@automattic/jetpack-shared-extension-utils": "^0.15.1",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.3.1",
 		"@types/wordpress__block-editor": "11.5.14",

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';
@@ -17,9 +17,9 @@ import {
 	EVENT_MODAL_OPEN,
 	EVENT_FEEDBACK,
 	EVENT_MODAL_CLOSE,
-	EVENT_PLACEMENT_QUICK_LINKS,
 	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,12 +43,16 @@ const debug = debugFactory( 'jetpack-ai-calypso:generator-modal' );
 export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	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<
 		'loadingFeature' | 'analyzing' | 'generating' | null
 	>( null );
@@ -57,13 +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 siteURL = siteDetails?.URL;
 	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;
 			}
@@ -148,10 +145,10 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 
 	const handleModalOpen = useCallback( async () => {
 		setContext( context );
-		recordTracksEvent( EVENT_MODAL_OPEN, { context, placement: EVENT_PLACEMENT_QUICK_LINKS } );
+		recordTracksEvent( EVENT_MODAL_OPEN, { context, placement } );
 
 		initializeModal();
-	}, [ setContext, context, initializeModal ] );
+	}, [ setContext, context, placement, initializeModal ] );
 
 	const closeModal = () => {
 		// Reset the state when the modal is closed, so we trigger the modal initialization again when it's opened.
@@ -162,20 +159,12 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		setNeedsMoreRequests( false );
 		clearErrors();
 		setLogoAccepted( false );
-		recordTracksEvent( EVENT_MODAL_CLOSE, { context, placement: EVENT_PLACEMENT_QUICK_LINKS } );
+		recordTracksEvent( EVENT_MODAL_CLOSE, { context, placement } );
 	};
 
-	const handleApplyLogo = () => {
+	const handleApplyLogo = ( mediaId: number ) => {
 		setLogoAccepted( true );
-	};
-
-	const handleCloseAndReload = () => {
-		closeModal();
-
-		setTimeout( () => {
-			// Reload the page to update the logo.
-			window.location.reload();
-		}, 1000 );
+		onApplyLogo?.( mediaId );
 	};
 
 	const handleFeedbackClick = () => {
@@ -190,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( () => {
@@ -214,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
@@ -235,13 +235,10 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 				/>
 				{ logoAccepted ? (
 					<div className="jetpack-ai-logo-generator__accept">
-						<VisitSiteBanner siteURL={ siteURL } onVisitBlankTarget={ handleCloseAndReload } />
+						<VisitSiteBanner />
 						<div className="jetpack-ai-logo-generator__accept-actions">
-							<Button variant="link" onClick={ handleCloseAndReload }>
-								{ __( 'Close and refresh', 'jetpack-ai-client' ) }
-							</Button>
-							<Button href={ siteURL } variant="primary">
-								{ __( 'Visit site', 'jetpack-ai-client' ) }
+							<Button variant="primary" onClick={ closeModal }>
+								{ __( 'Close', 'jetpack-ai-client' ) }
 							</Button>
 						</div>
 					</div>
@@ -271,7 +268,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 			{ isOpen && (
 				<Modal
 					className="jetpack-ai-logo-generator-modal"
-					onRequestClose={ logoAccepted ? handleCloseAndReload : closeModal }
+					onRequestClose={ closeModal }
 					shouldCloseOnClickOutside={ false }
 					shouldCloseOnEsc={ false }
 					title={ __( 'Jetpack AI Logo Generator', 'jetpack-ai-client' ) }

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

@@ -79,56 +79,41 @@ 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>
 	);
 };
 
-const UseOnSiteButton: React.FC< { onApplyLogo: () => void } > = ( { onApplyLogo } ) => {
+const UseOnSiteButton: React.FC< { onApplyLogo: ( mediaId: number ) => void } > = ( {
+	onApplyLogo,
+} ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
-	const {
-		applyLogo,
-		isSavingLogoToLibrary,
-		isApplyingLogo,
-		selectedLogo,
-		logos,
-		selectedLogoIndex,
-		context,
-	} = useLogoGenerator();
+	const { isSavingLogoToLibrary, selectedLogo, logos, selectedLogoIndex, context } =
+		useLogoGenerator();
 
 	const handleClick = async () => {
-		if ( ! isApplyingLogo && ! isSavingLogoToLibrary ) {
+		if ( ! isSavingLogoToLibrary ) {
 			recordTracksEvent( EVENT_USE, {
 				context,
 				logos_count: logos.length,
 				selected_logo: selectedLogoIndex != null ? selectedLogoIndex + 1 : 0,
 			} );
 
-			try {
-				await applyLogo();
-				onApplyLogo();
-			} catch ( error ) {
-				debug( 'Error applying logo', error );
-			}
+			onApplyLogo?.( selectedLogo?.mediaId );
 		}
 	};
 
-	return isApplyingLogo && ! isSavingLogoToLibrary ? (
-		<button className="jetpack-ai-logo-generator-modal-presenter__action">
-			<Icon icon={ <LogoIcon /> } />
-			<span className="action-text">{ __( 'Applying logo…', 'jetpack-ai-client' ) }</span>
-		</button>
-	) : (
+	return (
 		<Button
 			className="jetpack-ai-logo-generator-modal-presenter__action"
 			onClick={ handleClick }
 			disabled={ isSavingLogoToLibrary || ! selectedLogo?.mediaId }
 		>
 			<Icon icon={ <LogoIcon /> } />
-			<span className="action-text">{ __( 'Use on Site', 'jetpack-ai-client' ) }</span>
+			<span className="action-text">{ __( 'Use on block', 'jetpack-ai-client' ) }</span>
 		</Button>
 	);
 };
@@ -144,11 +129,11 @@ const LogoLoading: React.FC = () => {
 	);
 };
 
-const LogoReady: React.FC< { siteId: string; logo: Logo; onApplyLogo: () => void } > = ( {
-	siteId,
-	logo,
-	onApplyLogo,
-} ) => {
+const LogoReady: React.FC< {
+	siteId: string;
+	logo: Logo;
+	onApplyLogo: ( mediaId: number ) => void;
+} > = ( { siteId, logo, onApplyLogo } ) => {
 	return (
 		<>
 			<img
@@ -179,7 +164,7 @@ const LogoUpdated: React.FC< { logo: Logo } > = ( { logo } ) => {
 			/>
 			<div className="jetpack-ai-logo-generator-modal-presenter__success-wrapper">
 				<Icon icon={ <CheckIcon /> } />
-				<span>{ __( 'Your logo has been successfully updated!', 'jetpack-ai-client' ) }</span>
+				<span>{ __( 'Your new logo was set to the block!', 'jetpack-ai-client' ) }</span>
 			</div>
 		</>
 	);

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

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/hooks/use-logo-generator.ts

@@ -128,7 +128,7 @@ Site description: ${ description }`;
 				throw error;
 			}
 		},
-		[ setFirstLogoPromptFetchError, increaseAiAssistantRequestsCount ]
+		[ setFirstLogoPromptFetchError, increaseAiAssistantRequestsCount, name, description ]
 	);
 
 	const enhancePrompt = async function ( { prompt }: { prompt: string } ): Promise< string > {

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/lib/wpcom-limited-request.ts

@@ -9,7 +9,6 @@ import apiFetch from '../../api-fetch/index.js';
 const MAX_CONCURRENT_REQUESTS = 5;
 
 let concurrentCounter = 0;
-let lastCallTimestamp: number | null = null;
 
 /**
  * Concurrency-limited request to wpcom-proxy-request.
@@ -25,16 +24,6 @@ export default async function wpcomLimitedRequest< T >( params: object ): Promis
 		throw new Error( 'Too many requests' );
 	}
 
-	const now = Date.now();
-
-	// Check if the last call was made less than 100 milliseconds ago
-	if ( lastCallTimestamp && now - lastCallTimestamp < 100 ) {
-		concurrentCounter -= 1;
-		throw new Error( 'Too many requests' );
-	}
-
-	lastCallTimestamp = now; // Update the timestamp
-
 	return apiFetch< T >( params ).finally( () => {
 		concurrentCounter -= 1;
 	} );

package/src/logo-generator/types.ts

@@ -15,13 +15,16 @@ export interface GeneratorModalProps {
 	siteDetails?: SiteDetails;
 	isOpen: boolean;
 	onClose: () => void;
+	onApplyLogo: ( mediaId: number ) => void;
+	onReload: () => void;
 	context: string;
+	placement: string;
 }
 
 export interface LogoPresenterProps {
 	logo?: Logo;
 	loading?: boolean;
-	onApplyLogo: () => void;
+	onApplyLogo: ( mediaId: number ) => void;
 	logoAccepted?: boolean;
 	siteId: string | number;
 }