@automattic/jetpack-ai-client 0.17.0 → 0.18.1

package/CHANGELOG.md

@@ -5,6 +5,18 @@ 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.18.1] - 2024-09-10
+### Changed
+- Updated package dependencies. [#39302]
+
+## [0.18.0] - 2024-09-09
+### Added
+- AI Client: add placeholders for Logo Generator modal commponents [#39244]
+
+### Changed
+- AI Logo generator: add over quota notice, handle disabling tiers on checkout [#39149]
+- Updated package dependencies. [#39176]
+
 ## [0.17.0] - 2024-09-02
 ### Added
 - AI Client: Add FeaturesControl to ai-assistant-feature response parsing. [#39168]
@@ -397,6 +409,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.18.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.18.0...v0.18.1
+[0.18.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.17.0...v0.18.0
 [0.17.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.16.4...v0.17.0
 [0.16.4]: https://github.com/Automattic/jetpack-ai-client/compare/v0.16.3...v0.16.4
 [0.16.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.16.2...v0.16.3

package/build/jwt/index.js

@@ -21,7 +21,6 @@ export default async function requestJwt({ apiNonce, siteId, expirationTime, } =
     apiNonce = apiNonce || window.JP_CONNECTION_INITIAL_STATE.apiNonce;
     siteId = siteId || window.JP_CONNECTION_INITIAL_STATE.siteSuffix;
     expirationTime = expirationTime || JWT_TOKEN_EXPIRATION_TIME;
-    const isSimple = isSimpleSite();
     // Trying to pick the token from localStorage
     const token = localStorage.getItem(JWT_TOKEN_ID);
     let tokenData = null;
@@ -38,6 +37,7 @@ export default async function requestJwt({ apiNonce, siteId, expirationTime, } =
         return tokenData;
     }
     let data;
+    const isSimple = isSimpleSite();
     if (!isSimple) {
         data = await apiFetch({
             /*

package/build/logo-generator/components/fair-usage-notice.d.ts

@@ -0,0 +1,11 @@
+type FairUsageNoticeProps = {
+    variant?: 'error' | 'muted';
+};
+/**
+ * The fair usage notice component.
+ * @param {FairUsageNoticeProps}         props         - Fair usage notice component props.
+ * @param {FairUsageNoticeProps.variant} props.variant - The variant of the notice to render.
+ * @return {ReactElement} the Notice component with the fair usage message.
+ */
+export declare const FairUsageNotice: ({ variant }: FairUsageNoticeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/logo-generator/components/fair-usage-notice.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Notice } from '@wordpress/components';
+import useFairUsageNoticeMessage from '../hooks/use-fair-usage-notice-message.js';
+/**
+ * The fair usage notice component.
+ * @param {FairUsageNoticeProps}         props         - Fair usage notice component props.
+ * @param {FairUsageNoticeProps.variant} props.variant - The variant of the notice to render.
+ * @return {ReactElement} the Notice component with the fair usage message.
+ */
+export const FairUsageNotice = ({ variant = 'error' }) => {
+    const useFairUsageNoticeMessageElement = useFairUsageNoticeMessage();
+    if (variant === 'muted') {
+        return (_jsx("span", { className: "jetpack-ai-fair-usage-notice-muted-variant", children: useFairUsageNoticeMessageElement }));
+    }
+    if (variant === 'error') {
+        return (_jsx(Notice, { status: "error", isDismissible: false, className: "jetpack-ai-fair-usage-notice", children: useFairUsageNoticeMessageElement }));
+    }
+    return null;
+};

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

@@ -19,6 +19,7 @@ import useLogoGenerator from '../hooks/use-logo-generator.js';
 import useRequestErrors from '../hooks/use-request-errors.js';
 import { isLogoHistoryEmpty, clearDeletedMedia } from '../lib/logo-storage.js';
 import { STORE_NAME } from '../store/index.js';
+// import { FairUsageNotice } from './fair-usage-notice.js';
 import { FeatureFetchFailureScreen } from './feature-fetch-failure-screen.js';
 import { FirstLoadScreen } from './first-load-screen.js';
 import { HistoryCarousel } from './history-carousel.js';
@@ -31,7 +32,7 @@ const debug = debugFactory('jetpack-ai-calypso:generator-modal');
 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 { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory, setIsLoadingHistory } = useDispatch(STORE_NAME);
     const { getIsRequestingAiAssistantFeature } = select(STORE_NAME);
     const [loadingState, setLoadingState] = useState(null);
     const [initialPrompt, setInitialPrompt] = useState();
@@ -39,7 +40,7 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
     const requestedFeatureData = useRef(false);
     const [needsFeature, setNeedsFeature] = useState(false);
     const [needsMoreRequests, setNeedsMoreRequests] = useState(false);
-    const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext } = useLogoGenerator();
+    const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext, tierPlansEnabled, } = useLogoGenerator();
     const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
     const siteId = siteDetails?.ID;
     const [logoAccepted, setLogoAccepted] = useState(false);
@@ -74,26 +75,30 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
             const promptCreationCost = 1;
             const currentLimit = feature?.currentTier?.value || 0;
             const currentUsage = feature?.usagePeriod?.requestsCount || 0;
-            const isUnlimited = currentLimit === 1;
+            const isUnlimited = !tierPlansEnabled ? currentLimit > 0 : currentLimit === 1;
             const hasNoNextTier = !feature?.nextTier; // If there is no next tier, the user cannot upgrade.
             // The user needs an upgrade immediately if they have no logos and not enough requests remaining for one prompt and one logo generation.
             const siteNeedsMoreRequests = !isUnlimited &&
                 !hasNoNextTier &&
                 !hasHistory &&
-                currentLimit - currentUsage < logoCost + promptCreationCost;
+                (tierPlansEnabled
+                    ? currentLimit - currentUsage < logoCost + promptCreationCost
+                    : currentLimit < currentUsage);
             // If the site requires an upgrade, show the upgrade screen immediately.
-            setNeedsFeature(!feature?.hasFeature ?? true);
+            setNeedsFeature(currentLimit === 0);
             setNeedsMoreRequests(siteNeedsMoreRequests);
-            if (!feature?.hasFeature || siteNeedsMoreRequests) {
+            if (currentLimit === 0 || siteNeedsMoreRequests) {
                 setLoadingState(null);
                 return;
             }
+            setIsLoadingHistory(true);
             // Load the logo history and clear any deleted media.
             await clearDeletedMedia(String(siteId));
             loadLogoHistory(siteId);
             // If there is any logo, we do not need to generate a first logo again.
             if (!isLogoHistoryEmpty(String(siteId))) {
                 setLoadingState(null);
+                setIsLoadingHistory(false);
                 return;
             }
             // If the site does not require an upgrade and has no logos stored, generate the first prompt based on the site's data.
@@ -102,6 +107,7 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
         catch (error) {
             debug('Error fetching feature', error);
             setLoadingState(null);
+            setIsLoadingHistory(false);
         }
     }, [
         feature,
@@ -125,6 +131,7 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
         setNeedsMoreRequests(false);
         clearErrors();
         setLogoAccepted(false);
+        setIsLoadingHistory(false);
         recordTracksEvent(EVENT_MODAL_CLOSE, { context, placement });
     };
     const handleApplyLogo = (mediaId) => {

package/build/logo-generator/components/history-carousel.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * External dependencies
  */
@@ -8,13 +8,14 @@ import clsx from 'clsx';
 /**
  * Internal dependencies
  */
+import loader from '../assets/images/loader.gif';
 import { EVENT_NAVIGATE } from '../constants.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
 import './history-carousel.scss';
 export const HistoryCarousel = () => {
     const { tracks } = useAnalytics();
     const { recordEvent: recordTracksEvent } = tracks;
-    const { logos, selectedLogo, setSelectedLogoIndex, context } = useLogoGenerator();
+    const { logos, selectedLogo, setSelectedLogoIndex, context, isLoadingHistory } = useLogoGenerator();
     const handleClick = (index) => {
         recordTracksEvent(EVENT_NAVIGATE, {
             context,
@@ -30,7 +31,7 @@ export const HistoryCarousel = () => {
         }
         return thumbnailURL.toString();
     };
-    return (_jsx("div", { className: "jetpack-ai-logo-generator__carousel", children: logos.map((logo, index) => (_jsx(Button, { className: clsx('jetpack-ai-logo-generator__carousel-logo', {
-                'is-selected': logo.url === selectedLogo.url,
-            }), onClick: () => handleClick(index), children: _jsx("img", { src: thumbnailFrom(logo.url), alt: logo.description }) }, logo.url))) }));
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator__carousel", children: [!logos.length && isLoadingHistory && (_jsx(Button, { disabled: true, className: clsx('jetpack-ai-logo-generator__carousel-logo'), children: _jsx("img", { height: "48", width: "48", src: loader, alt: 'loading' }) })), logos.map((logo, index) => (_jsx(Button, { className: clsx('jetpack-ai-logo-generator__carousel-logo', {
+                    'is-selected': logo.url === selectedLogo.url,
+                }), onClick: () => handleClick(index), children: _jsx("img", { src: thumbnailFrom(logo.url), alt: logo.description }) }, logo.url)))] }));
 };

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

@@ -74,6 +74,9 @@ const UseOnSiteButton = ({ onApplyLogo, }) => {
 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 LogoFetching = () => {
+    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: __('Fetching previous logos…', 'jetpack-ai-client') })] }));
+};
 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 })] })] })] }));
 };
@@ -81,13 +84,15 @@ 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 new logo was set to the block!', 'jetpack-ai-client') })] })] }));
 };
 export const LogoPresenter = ({ logo = null, loading = false, onApplyLogo, logoAccepted = false, siteId, }) => {
+    // eslint-disable-next-line @wordpress/no-unused-vars-before-return -- @todo Start extending jetpack-js-tools/eslintrc/react in eslintrc, then we can remove this disable comment.
     const { isRequestingImage } = useLogoGenerator();
     const { saveToLibraryError, logoUpdateError } = useRequestErrors();
+    let logoContent;
     if (!logo) {
-        return null;
+        debug('No logo provided, history still loading or logo being generated');
+        logoContent = _jsx(LogoFetching, {});
     }
-    let logoContent;
-    if (loading || isRequestingImage) {
+    else if (loading || isRequestingImage) {
         logoContent = _jsx(LogoLoading, {});
     }
     else if (logoAccepted) {

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

@@ -16,6 +16,7 @@ import { EVENT_GENERATE, MINIMUM_PROMPT_LENGTH, EVENT_UPGRADE, EVENT_PLACEMENT_I
 import { useCheckout } from '../hooks/use-checkout.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
 import useRequestErrors from '../hooks/use-request-errors.js';
+import { FairUsageNotice } from './fair-usage-notice.js';
 import { UpgradeNudge } from './upgrade-nudge.js';
 import './prompt.scss';
 const debug = debugFactory('jetpack-ai-calypso:prompt-box');
@@ -27,7 +28,7 @@ export const Prompt = ({ initialPrompt = '' }) => {
     const { enhancePromptFetchError, logoFetchError } = useRequestErrors();
     const { nextTierCheckoutURL: checkoutUrl, hasNextTier } = useCheckout();
     const hasPrompt = prompt?.length >= MINIMUM_PROMPT_LENGTH;
-    const { generateLogo, enhancePrompt, setIsEnhancingPrompt, isBusy, isEnhancingPrompt, site, getAiAssistantFeature, requireUpgrade, context, } = useLogoGenerator();
+    const { generateLogo, enhancePrompt, setIsEnhancingPrompt, isBusy, isEnhancingPrompt, site, getAiAssistantFeature, requireUpgrade, context, tierPlansEnabled, } = useLogoGenerator();
     const enhancingLabel = __('Enhancing…', 'jetpack-ai-client');
     const enhanceLabel = __('Enhance prompt', 'jetpack-ai-client');
     const enhanceButtonLabel = isEnhancingPrompt ? enhancingLabel : enhanceLabel;
@@ -73,12 +74,12 @@ export const Prompt = ({ initialPrompt = '' }) => {
     };
     const onPromptPaste = (event) => {
         event.preventDefault();
-        // Paste plain text only
-        const text = event.clipboardData.getData('text/plain');
         const selection = window.getSelection();
         if (!selection || !selection.rangeCount) {
             return;
         }
+        // Paste plain text only
+        const text = event.clipboardData.getData('text/plain');
         selection.deleteFromDocument();
         const range = selection.getRangeAt(0);
         range.insertNode(document.createTextNode(text));
@@ -92,5 +93,5 @@ export const Prompt = ({ initialPrompt = '' }) => {
                         // The content editable div is expected to be updated by the enhance prompt, so warnings are suppressed
                         suppressContentEditableWarning: true, className: "prompt-query__input", onInput: onPromptInput, onPaste: onPromptPaste, "data-placeholder": __('Describe your site or simply ask for a logo specifying some details about it', 'jetpack-ai-client') }), _jsx(Button, { variant: "primary", className: "jetpack-ai-logo-generator__prompt-submit", onClick: onGenerate, disabled: isBusy || requireUpgrade || !hasPrompt, children: __('Generate', '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 }) })] })), !isUnlimited && requireUpgrade && _jsx(UpgradeNudge, {}), 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: __('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/hooks/use-checkout.js

@@ -10,10 +10,11 @@ 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 } = useSelect(select => {
+    const { nextTier, tierPlansEnabled } = useSelect(select => {
         const selectors = select(STORE_NAME);
         return {
             nextTier: selectors.getAiAssistantFeature().nextTier,
+            tierPlansEnabled: selectors.getAiAssistantFeature().tierPlansEnabled,
         };
     }, []);
     /**
@@ -22,7 +23,7 @@ export const useCheckout = () => {
     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}`);
+    wpcomCheckoutUrl.searchParams.set('path', tierPlansEnabled ? `jetpack_ai_yearly:-q-${nextTier?.limit}` : 'jetpack_ai_yearly');
     /**
      * Open the product interstitial page
      */

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

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+declare const useFairUsageNoticeMessage: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default useFairUsageNoticeMessage;

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSelect } from '@wordpress/data';
+import { createInterpolateElement } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../store/index.js';
+const useFairUsageNoticeMessage = () => {
+    const { usagePeriod } = useSelect(select => {
+        const selectors = select(STORE_NAME);
+        return {
+            usagePeriod: selectors.getAiAssistantFeature().nextTier,
+        };
+    }, []);
+    const getFormattedUsagePeriodStartDate = planUsagePeriod => {
+        if (!planUsagePeriod?.nextStart) {
+            return null;
+        }
+        const nextUsagePeriodStartDate = new Date(planUsagePeriod.nextStart);
+        return (nextUsagePeriodStartDate.toLocaleString('default', { month: 'long' }) +
+            ' ' +
+            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');
+        if (!resetDateString) {
+            return fairUsageMessage;
+        }
+        // Translators: %s is the date when the requests will reset.
+        const dateMessage = __('Requests will reset on %s.', 'jetpack-ai-client');
+        const formattedDateMessage = sprintf(dateMessage, resetDateString);
+        return `${fairUsageMessage} ${formattedDateMessage}`;
+    };
+    const nextUsagePeriodStartDateString = getFormattedUsagePeriodStartDate(usagePeriod);
+    // Get the proper template based on the presence of the next usage period start date.
+    const fairUsageNoticeMessage = getFairUsageNoticeMessage(nextUsagePeriodStartDateString);
+    const fairUsageNoticeMessageElement = createInterpolateElement(fairUsageNoticeMessage, {
+        link: (_jsx("a", { href: "https://jetpack.com/redirect/?source=ai-logo-generator-fair-usage-policy", target: "_blank", rel: "noreferrer" })),
+    });
+    return fairUsageNoticeMessageElement;
+};
+export default useFairUsageNoticeMessage;

package/build/logo-generator/hooks/use-logo-generator.d.ts

@@ -42,5 +42,8 @@ declare const useLogoGenerator: () => {
     getAiAssistantFeature: (siteId?: string) => Partial<import("../store/types.js").AiFeatureProps>;
     requireUpgrade: boolean;
     context: string;
+    tierPlansEnabled: boolean;
+    isLoadingHistory: boolean;
+    setIsLoadingHistory: any;
 };
 export default useLogoGenerator;

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

@@ -16,8 +16,8 @@ import { STORE_NAME } from '../store/index.js';
 import useRequestErrors from './use-request-errors.js';
 const debug = debugFactory('jetpack-ai-calypso:use-logo-generator');
 const useLogoGenerator = () => {
-    const { setSelectedLogoIndex, setIsSavingLogoToLibrary, setIsApplyingLogo, setIsRequestingImage, setIsEnhancingPrompt, increaseAiAssistantRequestsCount, addLogoToHistory, setContext, } = useDispatch(STORE_NAME);
-    const { logos, selectedLogoIndex, selectedLogo, siteDetails, isSavingLogoToLibrary, isApplyingLogo, isEnhancingPrompt, isBusy, isRequestingImage, getAiAssistantFeature, requireUpgrade, context, } = useSelect(select => {
+    const { setSelectedLogoIndex, setIsSavingLogoToLibrary, setIsApplyingLogo, setIsRequestingImage, setIsEnhancingPrompt, increaseAiAssistantRequestsCount, addLogoToHistory, setContext, setIsLoadingHistory, } = useDispatch(STORE_NAME);
+    const { logos, selectedLogoIndex, selectedLogo, siteDetails, isSavingLogoToLibrary, isApplyingLogo, isEnhancingPrompt, isBusy, isRequestingImage, getAiAssistantFeature, requireUpgrade, context, tierPlansEnabled, isLoadingHistory, } = useSelect(select => {
         const selectors = select(STORE_NAME);
         return {
             logos: selectors.getLogos(),
@@ -32,6 +32,8 @@ const useLogoGenerator = () => {
             getAiAssistantFeature: selectors.getAiAssistantFeature,
             requireUpgrade: selectors.getRequireUpgrade(),
             context: selectors.getContext(),
+            tierPlansEnabled: selectors.getTierPlansEnabled(),
+            isLoadingHistory: selectors.getIsLoadingHistory(),
         };
     }, []);
     const { setFirstLogoPromptFetchError, setEnhancePromptFetchError, setLogoFetchError, setSaveToLibraryError, setLogoUpdateError, } = useRequestErrors();
@@ -281,6 +283,9 @@ User request:${prompt}`;
         getAiAssistantFeature,
         requireUpgrade,
         context,
+        tierPlansEnabled,
+        isLoadingHistory,
+        setIsLoadingHistory,
     };
 };
 export default useLogoGenerator;

package/build/logo-generator/store/actions.d.ts

@@ -101,5 +101,9 @@ declare const actions: {
         type: string;
         context: string;
     };
+    setIsLoadingHistory(isLoadingHistory: boolean): {
+        type: string;
+        isLoadingHistory: boolean;
+    };
 };
 export default actions;

package/build/logo-generator/store/actions.js

@@ -6,7 +6,7 @@ import wpcomLimitedRequest from '../lib/wpcom-limited-request.js';
 /**
  * Types & Constants
  */
-import { ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT, ACTION_REQUEST_AI_ASSISTANT_FEATURE, ACTION_SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE, ACTION_SET_SITE_DETAILS, ACTION_STORE_AI_ASSISTANT_FEATURE, ACTION_SET_TIER_PLANS_ENABLED, ACTION_SET_SELECTED_LOGO_INDEX, ACTION_ADD_LOGO_TO_HISTORY, ACTION_SET_IS_SAVING_LOGO_TO_LIBRARY, ACTION_SAVE_SELECTED_LOGO, ACTION_SET_IS_REQUESTING_IMAGE, ACTION_SET_IS_APPLYING_LOGO, ACTION_SET_IS_ENHANCING_PROMPT, ACTION_SET_SITE_HISTORY, ACTION_SET_FEATURE_FETCH_ERROR, ACTION_SET_FIRST_LOGO_PROMPT_FETCH_ERROR, ACTION_SET_ENHANCE_PROMPT_FETCH_ERROR, ACTION_SET_LOGO_FETCH_ERROR, ACTION_SET_LOGO_UPDATE_ERROR, ACTION_SET_SAVE_TO_LIBRARY_ERROR, ACTION_SET_CONTEXT, } from './constants.js';
+import { ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT, ACTION_REQUEST_AI_ASSISTANT_FEATURE, ACTION_SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE, ACTION_SET_SITE_DETAILS, ACTION_STORE_AI_ASSISTANT_FEATURE, ACTION_SET_TIER_PLANS_ENABLED, ACTION_SET_SELECTED_LOGO_INDEX, ACTION_ADD_LOGO_TO_HISTORY, ACTION_SET_IS_SAVING_LOGO_TO_LIBRARY, ACTION_SAVE_SELECTED_LOGO, ACTION_SET_IS_REQUESTING_IMAGE, ACTION_SET_IS_APPLYING_LOGO, ACTION_SET_IS_ENHANCING_PROMPT, ACTION_SET_SITE_HISTORY, ACTION_SET_FEATURE_FETCH_ERROR, ACTION_SET_FIRST_LOGO_PROMPT_FETCH_ERROR, ACTION_SET_ENHANCE_PROMPT_FETCH_ERROR, ACTION_SET_LOGO_FETCH_ERROR, ACTION_SET_LOGO_UPDATE_ERROR, ACTION_SET_SAVE_TO_LIBRARY_ERROR, ACTION_SET_CONTEXT, ACTION_SET_IS_LOADING_HISTORY, } from './constants.js';
 /**
  * Map the response from the `sites/$site/ai-assistant-feature`
  * endpoint to the AI Assistant feature props.
@@ -190,5 +190,11 @@ const actions = {
             context,
         };
     },
+    setIsLoadingHistory(isLoadingHistory) {
+        return {
+            type: ACTION_SET_IS_LOADING_HISTORY,
+            isLoadingHistory,
+        };
+    },
 };
 export default actions;

package/build/logo-generator/store/constants.d.ts

@@ -33,6 +33,7 @@ export declare const ACTION_SAVE_SELECTED_LOGO = "SAVE_SELECTED_LOGO";
 export declare const ACTION_SET_IS_REQUESTING_IMAGE = "SET_IS_REQUESTING_IMAGE";
 export declare const ACTION_SET_IS_ENHANCING_PROMPT = "SET_IS_ENHANCING_PROMPT";
 export declare const ACTION_SET_SITE_HISTORY = "SET_SITE_HISTORY";
+export declare const ACTION_SET_IS_LOADING_HISTORY = "SET_IS_LOADING_HISTORY";
 /**
  * Logo generator error actions
  */

package/build/logo-generator/store/constants.js

@@ -33,6 +33,7 @@ export const ACTION_SAVE_SELECTED_LOGO = 'SAVE_SELECTED_LOGO';
 export const ACTION_SET_IS_REQUESTING_IMAGE = 'SET_IS_REQUESTING_IMAGE';
 export const ACTION_SET_IS_ENHANCING_PROMPT = 'SET_IS_ENHANCING_PROMPT';
 export const ACTION_SET_SITE_HISTORY = 'SET_SITE_HISTORY';
+export const ACTION_SET_IS_LOADING_HISTORY = 'SET_IS_LOADING_HISTORY';
 /**
  * Logo generator error actions
  */

package/build/logo-generator/store/reducer.d.ts

@@ -24,6 +24,7 @@ import type { SiteDetails } from '../types.js';
  * @param {Array< { url: string; description: string; mediaId?: number } >} action.history               - The logo history
  * @param {RequestError}                                                    action.error                 - The error to set
  * @param {string}                                                          action.context               - The context where the tool is being used
+ * @param {boolean}                                                         action.isLoadingHistory      - Whether the history is being loaded
  * @return {LogoGeneratorStateProp} The new state
  */
 export default function reducer(state: LogoGeneratorStateProp, action: {
@@ -51,6 +52,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
     }>;
     error?: RequestError;
     context?: string;
+    isLoadingHistory?: boolean;
 }): {
     features: {
         aiAssistantFeature: {
@@ -98,6 +100,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context: string;
+        isLoadingHistory: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     history: import("./types.js").Logo[];
@@ -120,6 +123,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context: string;
+        isLoadingHistory: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -138,6 +142,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -158,6 +163,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -178,6 +184,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -198,6 +205,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -218,6 +226,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -238,6 +247,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -258,6 +268,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -278,6 +289,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -298,6 +310,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         logoFetchError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -318,6 +331,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         logoFetchError?: RequestError;
         saveToLibraryError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -338,6 +352,28 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         logoFetchError?: RequestError;
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
+        isLoadingHistory?: boolean;
+    };
+    siteDetails?: SiteDetails | Record<string, never>;
+    features: {
+        aiAssistantFeature?: AiFeatureStateProps;
+    };
+    history: import("./types.js").Logo[];
+    selectedLogoIndex: number;
+} | {
+    _meta: {
+        isLoadingHistory: boolean;
+        isSavingLogoToLibrary?: boolean;
+        isApplyingLogo?: boolean;
+        isRequestingImage?: boolean;
+        isEnhancingPrompt?: boolean;
+        featureFetchError?: RequestError;
+        firstLogoPromptFetchError?: RequestError;
+        enhancePromptFetchError?: RequestError;
+        logoFetchError?: RequestError;
+        saveToLibraryError?: RequestError;
+        logoUpdateError?: RequestError;
+        context?: string;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {

package/build/logo-generator/store/reducer.js

@@ -2,7 +2,7 @@
  * Types & Constants
  */
 import { DEFAULT_LOGO_COST } from '../constants.js';
-import { ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT, ACTION_REQUEST_AI_ASSISTANT_FEATURE, ACTION_SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE, ACTION_STORE_AI_ASSISTANT_FEATURE, ASYNC_REQUEST_COUNTDOWN_INIT_VALUE, FREE_PLAN_REQUESTS_LIMIT, UNLIMITED_PLAN_REQUESTS_LIMIT, ACTION_SET_TIER_PLANS_ENABLED, ACTION_SET_SITE_DETAILS, ACTION_SET_SELECTED_LOGO_INDEX, ACTION_ADD_LOGO_TO_HISTORY, ACTION_SAVE_SELECTED_LOGO, ACTION_SET_IS_SAVING_LOGO_TO_LIBRARY, ACTION_SET_IS_REQUESTING_IMAGE, ACTION_SET_IS_APPLYING_LOGO, ACTION_SET_IS_ENHANCING_PROMPT, ACTION_SET_SITE_HISTORY, ACTION_SET_FEATURE_FETCH_ERROR, ACTION_SET_FIRST_LOGO_PROMPT_FETCH_ERROR, ACTION_SET_ENHANCE_PROMPT_FETCH_ERROR, ACTION_SET_LOGO_FETCH_ERROR, ACTION_SET_SAVE_TO_LIBRARY_ERROR, ACTION_SET_LOGO_UPDATE_ERROR, ACTION_SET_CONTEXT, } from './constants.js';
+import { ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT, ACTION_REQUEST_AI_ASSISTANT_FEATURE, ACTION_SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE, ACTION_STORE_AI_ASSISTANT_FEATURE, ASYNC_REQUEST_COUNTDOWN_INIT_VALUE, FREE_PLAN_REQUESTS_LIMIT, UNLIMITED_PLAN_REQUESTS_LIMIT, ACTION_SET_TIER_PLANS_ENABLED, ACTION_SET_SITE_DETAILS, ACTION_SET_SELECTED_LOGO_INDEX, ACTION_ADD_LOGO_TO_HISTORY, ACTION_SAVE_SELECTED_LOGO, ACTION_SET_IS_SAVING_LOGO_TO_LIBRARY, ACTION_SET_IS_REQUESTING_IMAGE, ACTION_SET_IS_APPLYING_LOGO, ACTION_SET_IS_ENHANCING_PROMPT, ACTION_SET_SITE_HISTORY, ACTION_SET_FEATURE_FETCH_ERROR, ACTION_SET_FIRST_LOGO_PROMPT_FETCH_ERROR, ACTION_SET_ENHANCE_PROMPT_FETCH_ERROR, ACTION_SET_LOGO_FETCH_ERROR, ACTION_SET_SAVE_TO_LIBRARY_ERROR, ACTION_SET_LOGO_UPDATE_ERROR, ACTION_SET_CONTEXT, ACTION_SET_IS_LOADING_HISTORY, } from './constants.js';
 import INITIAL_STATE from './initial-state.js';
 /**
  * Reducer for the Logo Generator store.
@@ -28,6 +28,7 @@ import INITIAL_STATE from './initial-state.js';
  * @param {Array< { url: string; description: string; mediaId?: number } >} action.history               - The logo history
  * @param {RequestError}                                                    action.error                 - The error to set
  * @param {string}                                                          action.context               - The context where the tool is being used
+ * @param {boolean}                                                         action.isLoadingHistory      - Whether the history is being loaded
  * @return {LogoGeneratorStateProp} The new state
  */
 export default function reducer(state = INITIAL_STATE, action) {
@@ -288,6 +289,14 @@ export default function reducer(state = INITIAL_STATE, action) {
                     context: action.context,
                 },
             };
+        case ACTION_SET_IS_LOADING_HISTORY:
+            return {
+                ...state,
+                _meta: {
+                    ...(state._meta ?? {}),
+                    isLoadingHistory: action.isLoadingHistory,
+                },
+            };
     }
     return state;
 }

package/build/logo-generator/store/selectors.d.ts

@@ -115,5 +115,19 @@ declare const selectors: {
      * @return {string}                       The context value.
      */
     getContext(state: LogoGeneratorStateProp): string;
+    /**
+     * Get tier plans enabled status.
+     *
+     * @param {LogoGeneratorStateProp} state - The app state tree.
+     * @return {boolean}                      The tier plans enabled status.
+     */
+    getTierPlansEnabled(state: LogoGeneratorStateProp): boolean;
+    /**
+     * Get tier plans enabled status.
+     *
+     * @param {LogoGeneratorStateProp} state - The app state tree.
+     * @return {boolean}                      The loading logo history status.
+     */
+    getIsLoadingHistory(state: LogoGeneratorStateProp): boolean;
 };
 export default selectors;

package/build/logo-generator/store/selectors.js

@@ -104,6 +104,9 @@ const selectors = {
      */
     getRequireUpgrade(state) {
         const feature = state.features.aiAssistantFeature;
+        if (!feature?.tierPlansEnabled) {
+            return feature?.requireUpgrade;
+        }
         const logoCost = feature?.costs?.['jetpack-ai-logo-generator']?.logo ?? DEFAULT_LOGO_COST;
         const currentLimit = feature?.currentTier?.value || 0;
         const currentUsage = feature?.usagePeriod?.requestsCount || 0;
@@ -169,5 +172,23 @@ const selectors = {
     getContext(state) {
         return state._meta?.context ?? '';
     },
+    /**
+     * Get tier plans enabled status.
+     *
+     * @param {LogoGeneratorStateProp} state - The app state tree.
+     * @return {boolean}                      The tier plans enabled status.
+     */
+    getTierPlansEnabled(state) {
+        return state.features.aiAssistantFeature?.tierPlansEnabled ?? false;
+    },
+    /**
+     * Get tier plans enabled status.
+     *
+     * @param {LogoGeneratorStateProp} state - The app state tree.
+     * @return {boolean}                      The loading logo history status.
+     */
+    getIsLoadingHistory(state) {
+        return state._meta?.isLoadingHistory ?? false;
+    },
 };
 export default selectors;

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

@@ -112,6 +112,7 @@ export type LogoGeneratorStateProp = {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context: string;
+        isLoadingHistory: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -140,6 +141,8 @@ export type Selectors = {
     getSaveToLibraryError(): RequestError;
     getLogoUpdateError(): RequestError;
     getContext(): string;
+    getTierPlansEnabled(): boolean;
+    getIsLoadingHistory(): boolean;
 };
 export type AiAssistantFeatureEndpointResponseProps = {
     'is-enabled': boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.17.0",
+	"version": "0.18.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": {
@@ -43,21 +43,21 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.30",
-		"@automattic/jetpack-connection": "^0.35.3",
-		"@automattic/jetpack-shared-extension-utils": "^0.15.5",
+		"@automattic/jetpack-base-styles": "^0.6.32",
+		"@automattic/jetpack-connection": "^0.35.7",
+		"@automattic/jetpack-shared-extension-utils": "^0.15.9",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@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",
+		"@wordpress/api-fetch": "7.7.0",
+		"@wordpress/blob": "4.7.0",
+		"@wordpress/block-editor": "14.2.0",
+		"@wordpress/components": "28.7.0",
+		"@wordpress/compose": "7.7.0",
+		"@wordpress/data": "10.7.0",
+		"@wordpress/element": "6.7.0",
+		"@wordpress/i18n": "5.7.0",
+		"@wordpress/icons": "10.7.0",
 		"clsx": "2.1.1",
 		"debug": "4.3.4",
 		"markdown-it": "14.0.0",

package/src/jwt/index.ts

@@ -49,8 +49,6 @@ export default async function requestJwt( {
 	siteId = siteId || window.JP_CONNECTION_INITIAL_STATE.siteSuffix;
 	expirationTime = expirationTime || JWT_TOKEN_EXPIRATION_TIME;
 
-	const isSimple = isSimpleSite();
-
 	// Trying to pick the token from localStorage
 	const token = localStorage.getItem( JWT_TOKEN_ID );
 	let tokenData: TokenDataProps | null = null;
@@ -70,6 +68,7 @@ export default async function requestJwt( {
 
 	let data: TokenDataEndpointResponseProps;
 
+	const isSimple = isSimpleSite();
 	if ( ! isSimple ) {
 		data = await apiFetch( {
 			/*

package/src/logo-generator/components/fair-usage-notice.tsx

@@ -0,0 +1,38 @@
+import { Notice } from '@wordpress/components';
+import useFairUsageNoticeMessage from '../hooks/use-fair-usage-notice-message.js';
+/**
+ * Types
+ */
+import type { ReactElement } from 'react';
+
+type FairUsageNoticeProps = {
+	variant?: 'error' | 'muted';
+};
+
+/**
+ * The fair usage notice component.
+ * @param {FairUsageNoticeProps}         props         - Fair usage notice component props.
+ * @param {FairUsageNoticeProps.variant} props.variant - The variant of the notice to render.
+ * @return {ReactElement} the Notice component with the fair usage message.
+ */
+export const FairUsageNotice = ( { variant = 'error' }: FairUsageNoticeProps ) => {
+	const useFairUsageNoticeMessageElement = useFairUsageNoticeMessage();
+
+	if ( variant === 'muted' ) {
+		return (
+			<span className="jetpack-ai-fair-usage-notice-muted-variant">
+				{ useFairUsageNoticeMessageElement }
+			</span>
+		);
+	}
+
+	if ( variant === 'error' ) {
+		return (
+			<Notice status="error" isDismissible={ false } className="jetpack-ai-fair-usage-notice">
+				{ useFairUsageNoticeMessageElement }
+			</Notice>
+		);
+	}
+
+	return null;
+};

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

@@ -24,6 +24,7 @@ import useLogoGenerator from '../hooks/use-logo-generator.js';
 import useRequestErrors from '../hooks/use-request-errors.js';
 import { isLogoHistoryEmpty, clearDeletedMedia } from '../lib/logo-storage.js';
 import { STORE_NAME } from '../store/index.js';
+// import { FairUsageNotice } from './fair-usage-notice.js';
 import { FeatureFetchFailureScreen } from './feature-fetch-failure-screen.js';
 import { FirstLoadScreen } from './first-load-screen.js';
 import { HistoryCarousel } from './history-carousel.js';
@@ -51,7 +52,8 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 } ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
-	const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory } = useDispatch( STORE_NAME );
+	const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory, setIsLoadingHistory } =
+		useDispatch( STORE_NAME );
 	const { getIsRequestingAiAssistantFeature } = select( STORE_NAME );
 	const [ loadingState, setLoadingState ] = useState<
 		'loadingFeature' | 'analyzing' | 'generating' | null
@@ -61,8 +63,14 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	const requestedFeatureData = useRef< boolean >( false );
 	const [ needsFeature, setNeedsFeature ] = useState( false );
 	const [ needsMoreRequests, setNeedsMoreRequests ] = useState( false );
-	const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext } =
-		useLogoGenerator();
+	const {
+		selectedLogo,
+		getAiAssistantFeature,
+		generateFirstPrompt,
+		generateLogo,
+		setContext,
+		tierPlansEnabled,
+	} = useLogoGenerator();
 	const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
 	const siteId = siteDetails?.ID;
 	const [ logoAccepted, setLogoAccepted ] = useState( false );
@@ -96,11 +104,12 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	const initializeModal = useCallback( async () => {
 		try {
 			const hasHistory = ! isLogoHistoryEmpty( String( siteId ) );
+
 			const logoCost = feature?.costs?.[ 'jetpack-ai-logo-generator' ]?.logo ?? DEFAULT_LOGO_COST;
 			const promptCreationCost = 1;
 			const currentLimit = feature?.currentTier?.value || 0;
 			const currentUsage = feature?.usagePeriod?.requestsCount || 0;
-			const isUnlimited = currentLimit === 1;
+			const isUnlimited = ! tierPlansEnabled ? currentLimit > 0 : currentLimit === 1;
 			const hasNoNextTier = ! feature?.nextTier; // If there is no next tier, the user cannot upgrade.
 
 			// The user needs an upgrade immediately if they have no logos and not enough requests remaining for one prompt and one logo generation.
@@ -108,16 +117,20 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 				! isUnlimited &&
 				! hasNoNextTier &&
 				! hasHistory &&
-				currentLimit - currentUsage < logoCost + promptCreationCost;
+				( tierPlansEnabled
+					? currentLimit - currentUsage < logoCost + promptCreationCost
+					: currentLimit < currentUsage );
 
 			// If the site requires an upgrade, show the upgrade screen immediately.
-			setNeedsFeature( ! feature?.hasFeature ?? true );
+			setNeedsFeature( currentLimit === 0 );
 			setNeedsMoreRequests( siteNeedsMoreRequests );
-			if ( ! feature?.hasFeature || siteNeedsMoreRequests ) {
+
+			if ( currentLimit === 0 || siteNeedsMoreRequests ) {
 				setLoadingState( null );
 				return;
 			}
 
+			setIsLoadingHistory( true );
 			// Load the logo history and clear any deleted media.
 			await clearDeletedMedia( String( siteId ) );
 			loadLogoHistory( siteId );
@@ -125,6 +138,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 			// If there is any logo, we do not need to generate a first logo again.
 			if ( ! isLogoHistoryEmpty( String( siteId ) ) ) {
 				setLoadingState( null );
+				setIsLoadingHistory( false );
 				return;
 			}
 
@@ -133,6 +147,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		} catch ( error ) {
 			debug( 'Error fetching feature', error );
 			setLoadingState( null );
+			setIsLoadingHistory( false );
 		}
 	}, [
 		feature,
@@ -159,6 +174,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		setNeedsMoreRequests( false );
 		clearErrors();
 		setLogoAccepted( false );
+		setIsLoadingHistory( false );
 		recordTracksEvent( EVENT_MODAL_CLOSE, { context, placement } );
 	};
 
@@ -227,6 +243,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		body = (
 			<>
 				{ ! logoAccepted && <Prompt initialPrompt={ initialPrompt } /> }
+
 				<LogoPresenter
 					logo={ selectedLogo }
 					onApplyLogo={ handleApplyLogo }

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

@@ -7,6 +7,7 @@ import clsx from 'clsx';
 /**
  * Internal dependencies
  */
+import loader from '../assets/images/loader.gif';
 import { EVENT_NAVIGATE } from '../constants.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
 import './history-carousel.scss';
@@ -18,7 +19,8 @@ import type React from 'react';
 export const HistoryCarousel: React.FC = () => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
-	const { logos, selectedLogo, setSelectedLogoIndex, context } = useLogoGenerator();
+	const { logos, selectedLogo, setSelectedLogoIndex, context, isLoadingHistory } =
+		useLogoGenerator();
 
 	const handleClick = ( index: number ) => {
 		recordTracksEvent( EVENT_NAVIGATE, {
@@ -41,6 +43,11 @@ export const HistoryCarousel: React.FC = () => {
 
 	return (
 		<div className="jetpack-ai-logo-generator__carousel">
+			{ ! logos.length && isLoadingHistory && (
+				<Button disabled className={ clsx( 'jetpack-ai-logo-generator__carousel-logo' ) }>
+					<img height="48" width="48" src={ loader } alt={ 'loading' } />
+				</Button>
+			) }
 			{ logos.map( ( logo, index ) => (
 				<Button
 					key={ logo.url }

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

@@ -129,6 +129,17 @@ const LogoLoading: React.FC = () => {
 	);
 };
 
+const LogoFetching: React.FC = () => {
+	return (
+		<>
+			<ImageLoader className="jetpack-ai-logo-generator-modal-presenter__logo" />
+			<span className="jetpack-ai-logo-generator-modal-presenter__loading-text">
+				{ __( 'Fetching previous logos…', 'jetpack-ai-client' ) }
+			</span>
+		</>
+	);
+};
+
 const LogoReady: React.FC< {
 	siteId: string;
 	logo: Logo;
@@ -177,16 +188,16 @@ export const LogoPresenter: React.FC< LogoPresenterProps > = ( {
 	logoAccepted = false,
 	siteId,
 } ) => {
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return -- @todo Start extending jetpack-js-tools/eslintrc/react in eslintrc, then we can remove this disable comment.
 	const { isRequestingImage } = useLogoGenerator();
 	const { saveToLibraryError, logoUpdateError } = useRequestErrors();
 
-	if ( ! logo ) {
-		return null;
-	}
-
 	let logoContent: React.ReactNode;
 
-	if ( loading || isRequestingImage ) {
+	if ( ! logo ) {
+		debug( 'No logo provided, history still loading or logo being generated' );
+		logoContent = <LogoFetching />;
+	} else if ( loading || isRequestingImage ) {
 		logoContent = <LogoLoading />;
 	} else if ( logoAccepted ) {
 		logoContent = <LogoUpdated logo={ logo } />;

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

@@ -20,6 +20,7 @@ import {
 import { useCheckout } from '../hooks/use-checkout.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
 import useRequestErrors from '../hooks/use-request-errors.js';
+import { FairUsageNotice } from './fair-usage-notice.js';
 import { UpgradeNudge } from './upgrade-nudge.js';
 import './prompt.scss';
 
@@ -44,6 +45,7 @@ export const Prompt: React.FC< { initialPrompt?: string } > = ( { initialPrompt
 		getAiAssistantFeature,
 		requireUpgrade,
 		context,
+		tierPlansEnabled,
 	} = useLogoGenerator();
 
 	const enhancingLabel = __( 'Enhancing…', 'jetpack-ai-client' );
@@ -100,13 +102,14 @@ export const Prompt: React.FC< { initialPrompt?: string } > = ( { initialPrompt
 	const onPromptPaste = ( event: React.ClipboardEvent< HTMLInputElement > ) => {
 		event.preventDefault();
 
-		// Paste plain text only
-		const text = event.clipboardData.getData( 'text/plain' );
-
 		const selection = window.getSelection();
 		if ( ! selection || ! selection.rangeCount ) {
 			return;
 		}
+
+		// Paste plain text only
+		const text = event.clipboardData.getData( 'text/plain' );
+
 		selection.deleteFromDocument();
 		const range = selection.getRangeAt( 0 );
 		range.insertNode( document.createTextNode( text ) );
@@ -194,7 +197,8 @@ export const Prompt: React.FC< { initialPrompt?: string } > = ( { initialPrompt
 						</Tooltip>
 					</div>
 				) }
-				{ ! isUnlimited && requireUpgrade && <UpgradeNudge /> }
+				{ requireUpgrade && tierPlansEnabled && <UpgradeNudge /> }
+				{ requireUpgrade && ! tierPlansEnabled && <FairUsageNotice /> }
 				{ enhancePromptFetchError && (
 					<div className="jetpack-ai-logo-generator__prompt-error">
 						{ __( 'Error enhancing prompt. Please try again.', 'jetpack-ai-client' ) }

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

@@ -20,10 +20,11 @@ import type { Selectors } from '../store/types.js';
 const debug = debugFactory( 'ai-client:logo-generator:use-checkout' );
 
 export const useCheckout = () => {
-	const { nextTier } = useSelect( select => {
+	const { nextTier, tierPlansEnabled } = useSelect( select => {
 		const selectors: Selectors = select( STORE_NAME );
 		return {
 			nextTier: selectors.getAiAssistantFeature().nextTier,
+			tierPlansEnabled: selectors.getAiAssistantFeature().tierPlansEnabled,
 		};
 	}, [] );
 
@@ -33,7 +34,11 @@ export const useCheckout = () => {
 	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 }` );
+
+	wpcomCheckoutUrl.searchParams.set(
+		'path',
+		tierPlansEnabled ? `jetpack_ai_yearly:-q-${ nextTier?.limit }` : 'jetpack_ai_yearly'
+	);
 
 	/**
 	 * Open the product interstitial page

package/src/logo-generator/hooks/use-fair-usage-notice-message.tsx

@@ -0,0 +1,68 @@
+import { useSelect } from '@wordpress/data';
+import { createInterpolateElement } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../store/index.js';
+/**
+ * Types
+ */
+import type { Selectors } from '../store/types.js';
+
+const useFairUsageNoticeMessage = () => {
+	const { usagePeriod } = useSelect( select => {
+		const selectors: Selectors = select( STORE_NAME );
+		return {
+			usagePeriod: selectors.getAiAssistantFeature().nextTier,
+		};
+	}, [] );
+	const getFormattedUsagePeriodStartDate = planUsagePeriod => {
+		if ( ! planUsagePeriod?.nextStart ) {
+			return null;
+		}
+
+		const nextUsagePeriodStartDate = new Date( planUsagePeriod.nextStart );
+		return (
+			nextUsagePeriodStartDate.toLocaleString( 'default', { month: 'long' } ) +
+			' ' +
+			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'
+		);
+
+		if ( ! resetDateString ) {
+			return fairUsageMessage;
+		}
+
+		// Translators: %s is the date when the requests will reset.
+		const dateMessage = __( 'Requests will reset on %s.', 'jetpack-ai-client' );
+		const formattedDateMessage = sprintf( dateMessage, resetDateString );
+
+		return `${ fairUsageMessage } ${ formattedDateMessage }`;
+	};
+
+	const nextUsagePeriodStartDateString = getFormattedUsagePeriodStartDate( usagePeriod );
+
+	// Get the proper template based on the presence of the next usage period start date.
+	const fairUsageNoticeMessage = getFairUsageNoticeMessage( nextUsagePeriodStartDateString );
+
+	const fairUsageNoticeMessageElement = createInterpolateElement( fairUsageNoticeMessage, {
+		link: (
+			<a
+				href="https://jetpack.com/redirect/?source=ai-logo-generator-fair-usage-policy"
+				target="_blank"
+				rel="noreferrer"
+			/>
+		),
+	} );
+
+	return fairUsageNoticeMessageElement;
+};
+
+export default useFairUsageNoticeMessage;

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

@@ -31,6 +31,7 @@ const useLogoGenerator = () => {
 		increaseAiAssistantRequestsCount,
 		addLogoToHistory,
 		setContext,
+		setIsLoadingHistory,
 	} = useDispatch( STORE_NAME );
 
 	const {
@@ -46,6 +47,8 @@ const useLogoGenerator = () => {
 		getAiAssistantFeature,
 		requireUpgrade,
 		context,
+		tierPlansEnabled,
+		isLoadingHistory,
 	} = useSelect( select => {
 		const selectors: Selectors = select( STORE_NAME );
 
@@ -62,6 +65,8 @@ const useLogoGenerator = () => {
 			getAiAssistantFeature: selectors.getAiAssistantFeature,
 			requireUpgrade: selectors.getRequireUpgrade(),
 			context: selectors.getContext(),
+			tierPlansEnabled: selectors.getTierPlansEnabled(),
+			isLoadingHistory: selectors.getIsLoadingHistory(),
 		};
 	}, [] );
 
@@ -383,6 +388,9 @@ User request:${ prompt }`;
 		getAiAssistantFeature,
 		requireUpgrade,
 		context,
+		tierPlansEnabled,
+		isLoadingHistory,
+		setIsLoadingHistory,
 	};
 };
 

package/src/logo-generator/store/actions.ts

@@ -28,6 +28,7 @@ import {
 	ACTION_SET_LOGO_UPDATE_ERROR,
 	ACTION_SET_SAVE_TO_LIBRARY_ERROR,
 	ACTION_SET_CONTEXT,
+	ACTION_SET_IS_LOADING_HISTORY,
 } from './constants.js';
 import type {
 	AiFeatureProps,
@@ -247,6 +248,13 @@ const actions = {
 			context,
 		};
 	},
+
+	setIsLoadingHistory( isLoadingHistory: boolean ) {
+		return {
+			type: ACTION_SET_IS_LOADING_HISTORY,
+			isLoadingHistory,
+		};
+	},
 };
 
 export default actions;

package/src/logo-generator/store/constants.ts

@@ -37,6 +37,7 @@ export const ACTION_SAVE_SELECTED_LOGO = 'SAVE_SELECTED_LOGO';
 export const ACTION_SET_IS_REQUESTING_IMAGE = 'SET_IS_REQUESTING_IMAGE';
 export const ACTION_SET_IS_ENHANCING_PROMPT = 'SET_IS_ENHANCING_PROMPT';
 export const ACTION_SET_SITE_HISTORY = 'SET_SITE_HISTORY';
+export const ACTION_SET_IS_LOADING_HISTORY = 'SET_IS_LOADING_HISTORY';
 
 /**
  * Logo generator error actions

package/src/logo-generator/store/reducer.ts

@@ -27,6 +27,7 @@ import {
 	ACTION_SET_SAVE_TO_LIBRARY_ERROR,
 	ACTION_SET_LOGO_UPDATE_ERROR,
 	ACTION_SET_CONTEXT,
+	ACTION_SET_IS_LOADING_HISTORY,
 } from './constants.js';
 import INITIAL_STATE from './initial-state.js';
 import type {
@@ -61,6 +62,7 @@ import type { SiteDetails } from '../types.js';
  * @param {Array< { url: string; description: string; mediaId?: number } >} action.history               - The logo history
  * @param {RequestError}                                                    action.error                 - The error to set
  * @param {string}                                                          action.context               - The context where the tool is being used
+ * @param {boolean}                                                         action.isLoadingHistory      - Whether the history is being loaded
  * @return {LogoGeneratorStateProp} The new state
  */
 export default function reducer(
@@ -83,6 +85,7 @@ export default function reducer(
 		history?: Array< { url: string; description: string; mediaId?: number } >;
 		error?: RequestError;
 		context?: string;
+		isLoadingHistory?: boolean;
 	}
 ) {
 	switch ( action.type ) {
@@ -381,6 +384,15 @@ export default function reducer(
 					context: action.context,
 				},
 			};
+
+		case ACTION_SET_IS_LOADING_HISTORY:
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					isLoadingHistory: action.isLoadingHistory,
+				},
+			};
 	}
 
 	return state;

package/src/logo-generator/store/selectors.ts

@@ -121,6 +121,10 @@ const selectors = {
 	 */
 	getRequireUpgrade( state: LogoGeneratorStateProp ): boolean {
 		const feature = state.features.aiAssistantFeature;
+
+		if ( ! feature?.tierPlansEnabled ) {
+			return feature?.requireUpgrade;
+		}
 		const logoCost = feature?.costs?.[ 'jetpack-ai-logo-generator' ]?.logo ?? DEFAULT_LOGO_COST;
 		const currentLimit = feature?.currentTier?.value || 0;
 		const currentUsage = feature?.usagePeriod?.requestsCount || 0;
@@ -196,6 +200,26 @@ const selectors = {
 	getContext( state: LogoGeneratorStateProp ): string {
 		return state._meta?.context ?? '';
 	},
+
+	/**
+	 * Get tier plans enabled status.
+	 *
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @return {boolean}                      The tier plans enabled status.
+	 */
+	getTierPlansEnabled( state: LogoGeneratorStateProp ): boolean {
+		return state.features.aiAssistantFeature?.tierPlansEnabled ?? false;
+	},
+
+	/**
+	 * Get tier plans enabled status.
+	 *
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @return {boolean}                      The loading logo history status.
+	 */
+	getIsLoadingHistory( state: LogoGeneratorStateProp ): boolean {
+		return state._meta?.isLoadingHistory ?? false;
+	},
 };
 
 export default selectors;

package/src/logo-generator/store/types.ts

@@ -152,6 +152,7 @@ export type LogoGeneratorStateProp = {
 		saveToLibraryError?: RequestError;
 		logoUpdateError?: RequestError;
 		context: string;
+		isLoadingHistory: boolean;
 	};
 	siteDetails?: SiteDetails | Record< string, never >;
 	features: {
@@ -181,6 +182,8 @@ export type Selectors = {
 	getSaveToLibraryError(): RequestError;
 	getLogoUpdateError(): RequestError;
 	getContext(): string;
+	getTierPlansEnabled(): boolean;
+	getIsLoadingHistory(): boolean;
 };
 
 /*