@automattic/jetpack-ai-client 0.16.4 → 0.18.0

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: {
@@ -77,6 +79,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
                     logo: number;
                 };
             };
+            featuresControl?: import("./types.js").FeaturesControl;
             _meta?: {
                 isRequesting: boolean;
                 asyncRequestCountdown: number;
@@ -97,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[];
@@ -119,6 +123,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context: string;
+        isLoadingHistory: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -137,6 +142,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -157,6 +163,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -177,6 +184,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -197,6 +205,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -217,6 +226,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -237,6 +247,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -257,6 +268,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -277,6 +289,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -297,6 +310,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         logoFetchError?: RequestError;
         logoUpdateError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -317,6 +331,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         logoFetchError?: RequestError;
         saveToLibraryError?: RequestError;
         context?: string;
+        isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -337,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

@@ -53,6 +53,14 @@ export type TierProp = {
 export type TierLimitProp = TierUnlimitedProps['limit'] | TierFreeProps['limit'] | Tier100Props['limit'] | Tier200Props['limit'] | Tier500Props['limit'] | Tier750Props['limit'] | Tier1000Props['limit'];
 export type TierSlugProp = TierUnlimitedProps['slug'] | TierFreeProps['slug'] | Tier100Props['slug'] | Tier200Props['slug'] | Tier500Props['slug'] | Tier750Props['slug'] | Tier1000Props['slug'];
 export type TierValueProp = TierUnlimitedProps['value'] | TierFreeProps['value'] | Tier100Props['value'] | Tier200Props['value'] | Tier500Props['value'] | Tier750Props['value'] | Tier1000Props['value'];
+export type FeatureControl = {
+    enabled: boolean;
+    'min-jetpack-version': string;
+    [key: string]: FeatureControl | boolean | string;
+};
+export type FeaturesControl = {
+    [key: string]: FeatureControl;
+};
 export type AiFeatureProps = {
     hasFeature: boolean;
     isOverLimit: boolean;
@@ -75,6 +83,7 @@ export type AiFeatureProps = {
             logo: number;
         };
     };
+    featuresControl?: FeaturesControl;
 };
 export type AiFeatureStateProps = AiFeatureProps & {
     _meta?: {
@@ -103,6 +112,7 @@ export type LogoGeneratorStateProp = {
         saveToLibraryError?: RequestError;
         logoUpdateError?: RequestError;
         context: string;
+        isLoadingHistory: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
     features: {
@@ -131,6 +141,8 @@ export type Selectors = {
     getSaveToLibraryError(): RequestError;
     getLogoUpdateError(): RequestError;
     getContext(): string;
+    getTierPlansEnabled(): boolean;
+    getIsLoadingHistory(): boolean;
 };
 export type AiAssistantFeatureEndpointResponseProps = {
     'is-enabled': boolean;
@@ -157,6 +169,7 @@ export type AiAssistantFeatureEndpointResponseProps = {
             logo: number;
         };
     };
+    'features-control'?: FeaturesControl;
 };
 export type SaveLogo = (logo: Logo) => Promise<{
     mediaId: number;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.16.4",
+	"version": "0.18.0",
 	"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.31",
+		"@automattic/jetpack-connection": "^0.35.6",
+		"@automattic/jetpack-shared-extension-utils": "^0.15.8",
 		"@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.6.0",
+		"@wordpress/blob": "4.6.0",
+		"@wordpress/block-editor": "14.1.0",
+		"@wordpress/components": "28.6.0",
+		"@wordpress/compose": "7.6.0",
+		"@wordpress/data": "10.6.0",
+		"@wordpress/element": "6.6.0",
+		"@wordpress/i18n": "5.6.0",
+		"@wordpress/icons": "10.6.0",
 		"clsx": "2.1.1",
 		"debug": "4.3.4",
 		"markdown-it": "14.0.0",

package/src/components/ai-control/extension-ai-control.tsx

@@ -10,7 +10,12 @@ import React, { forwardRef } from 'react';
 /**
  * Internal dependencies
  */
-import { GuidelineMessage, ErrorMessage, UpgradeMessage } from '../message/index.js';
+import {
+	GuidelineMessage,
+	ErrorMessage,
+	UpgradeMessage,
+	FairUsageLimitMessage,
+} from '../message/index.js';
 import AIControl from './ai-control.js';
 import './style.scss';
 /**
@@ -31,6 +36,7 @@ type ExtensionAIControlProps = {
 	error?: RequestingErrorProps;
 	requestsRemaining?: number;
 	showUpgradeMessage?: boolean;
+	showFairUsageMessage?: boolean;
 	upgradeUrl?: string;
 	wrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
 	onChange?: ( newValue: string ) => void;
@@ -62,6 +68,7 @@ export function ExtensionAIControl(
 		error,
 		requestsRemaining,
 		showUpgradeMessage = false,
+		showFairUsageMessage = false,
 		upgradeUrl,
 		wrapperRef,
 		onChange,
@@ -215,6 +222,8 @@ export function ExtensionAIControl(
 				upgradeUrl={ upgradeUrl }
 			/>
 		);
+	} else if ( showFairUsageMessage ) {
+		message = <FairUsageLimitMessage />;
 	} else if ( showUpgradeMessage ) {
 		message = (
 			<UpgradeMessage

package/src/components/message/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { ExternalLink, Button } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, arrowRight } from '@wordpress/icons';
 import clsx from 'clsx';
@@ -114,6 +115,25 @@ export function GuidelineMessage(): React.ReactElement {
 	);
 }
 
+/**
+ * React component to render a fair usage limit message.
+ *
+ * @return {React.ReactElement } - Message component.
+ */
+export function FairUsageLimitMessage(): React.ReactElement {
+	const message = __(
+		"You've reached this month's request limit, per our <link>fair usage policy</link>",
+		'jetpack-ai-client'
+	);
+	const element = createInterpolateElement( message, {
+		link: (
+			<ExternalLink href="https://jetpack.com/redirect/?source=ai-assistant-fair-usage-policy" />
+		),
+	} );
+
+	return <Message severity={ MESSAGE_SEVERITY_WARNING }>{ element }</Message>;
+}
+
 /**
  * React component to render an upgrade message for free tier users
  *

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' ) }