@automattic/jetpack-ai-client 0.16.4 → 0.18.0

package/CHANGELOG.md

@@ -5,6 +5,19 @@ 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.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]
+- Jetpack AI: Support fair usage messaging on the Extension AI Control component. [#39103]
+
 ## [0.16.4] - 2024-08-26
 ### Changed
 - Updated package dependencies. [#39004]
@@ -392,6 +405,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.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
 [0.16.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.16.1...v0.16.2

package/build/components/ai-control/extension-ai-control.d.ts

@@ -17,6 +17,7 @@ type ExtensionAIControlProps = {
     error?: RequestingErrorProps;
     requestsRemaining?: number;
     showUpgradeMessage?: boolean;
+    showFairUsageMessage?: boolean;
     upgradeUrl?: string;
     wrapperRef?: React.MutableRefObject<HTMLDivElement | null>;
     onChange?: (newValue: string) => void;
@@ -34,6 +35,6 @@ type ExtensionAIControlProps = {
  * @param {React.MutableRefObject}  ref   - Ref to the component
  * @return {ReactElement}                 Rendered component
  */
-export declare function ExtensionAIControl({ className, disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, }: ExtensionAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
+export declare function ExtensionAIControl({ className, disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, showFairUsageMessage, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, }: ExtensionAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
 declare const _default: React.ForwardRefExoticComponent<ExtensionAIControlProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/build/components/ai-control/extension-ai-control.js

@@ -11,7 +11,7 @@ import { 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';
 /**
@@ -21,7 +21,7 @@ import './style.scss';
  * @param {React.MutableRefObject}  ref   - Ref to the component
  * @return {ReactElement}                 Rendered component
  */
-export function ExtensionAIControl({ className, disabled = false, value = '', placeholder = '', showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, error, requestsRemaining, showUpgradeMessage = false, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, }, ref) {
+export function ExtensionAIControl({ className, disabled = false, value = '', placeholder = '', showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, error, requestsRemaining, showUpgradeMessage = false, showFairUsageMessage = false, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, }, ref) {
     const loading = state === 'requesting' || state === 'suggesting';
     const [editRequest, setEditRequest] = useState(false);
     const [lastValue, setLastValue] = useState(value || null);
@@ -78,6 +78,9 @@ export function ExtensionAIControl({ className, disabled = false, value = '', pl
     if (error?.message) {
         message = (_jsx(ErrorMessage, { error: error.message, code: error.code, onTryAgainClick: tryAgainHandler, onUpgradeClick: upgradeHandler, upgradeUrl: upgradeUrl }));
     }
+    else if (showFairUsageMessage) {
+        message = _jsx(FairUsageLimitMessage, {});
+    }
     else if (showUpgradeMessage) {
         message = (_jsx(UpgradeMessage, { requestsRemaining: requestsRemaining, onUpgradeClick: upgradeHandler, upgradeUrl: upgradeUrl }));
     }

package/build/components/message/index.d.ts

@@ -47,6 +47,12 @@ export default function Message({ severity, icon, showSidebarIcon, onSidebarIcon
  * @return {React.ReactElement } - Message component.
  */
 export declare function GuidelineMessage(): React.ReactElement;
+/**
+ * React component to render a fair usage limit message.
+ *
+ * @return {React.ReactElement } - Message component.
+ */
+export declare function FairUsageLimitMessage(): React.ReactElement;
 /**
  * React component to render an upgrade message for free tier users
  *

package/build/components/message/index.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 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';
@@ -45,6 +46,18 @@ export default function Message({ severity = MESSAGE_SEVERITY_INFO, icon = null,
 export function GuidelineMessage() {
     return (_jsxs(Message, { children: [_jsx("span", { children: __('AI-generated content could be inaccurate or biased.', 'jetpack-ai-client') }), _jsx(ExternalLink, { href: "https://automattic.com/ai-guidelines", children: __('Learn more', 'jetpack-ai-client') })] }));
 }
+/**
+ * React component to render a fair usage limit message.
+ *
+ * @return {React.ReactElement } - Message component.
+ */
+export function FairUsageLimitMessage() {
+    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: (_jsx(ExternalLink, { href: "https://jetpack.com/redirect/?source=ai-assistant-fair-usage-policy" })),
+    });
+    return _jsx(Message, { severity: MESSAGE_SEVERITY_WARNING, children: element });
+}
 /**
  * React component to render an upgrade message for free tier users
  *

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.
@@ -32,6 +32,7 @@ export function mapAiFeatureResponseToAiFeatureProps(response) {
         nextTier: response['next-tier'],
         tierPlansEnabled: !!response['tier-plans-enabled'],
         costs: response.costs,
+        featuresControl: response['features-control'],
     };
 }
 const actions = {
@@ -189,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
  */