@automattic/jetpack-ai-client 0.14.5 → 0.15.0

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

@@ -0,0 +1,184 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { Modal, Button } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { external, Icon } from '@wordpress/icons';
+import clsx from 'clsx';
+import debugFactory from 'debug';
+import { useState, useEffect, useCallback, useRef } from 'react';
+/**
+ * Internal dependencies
+ */
+import { DEFAULT_LOGO_COST, EVENT_MODAL_OPEN, EVENT_FEEDBACK, EVENT_MODAL_CLOSE, EVENT_PLACEMENT_QUICK_LINKS, EVENT_GENERATE, } from '../constants.js';
+import 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 { FeatureFetchFailureScreen } from './feature-fetch-failure-screen.js';
+import { FirstLoadScreen } from './first-load-screen.js';
+import { HistoryCarousel } from './history-carousel.js';
+import { LogoPresenter } from './logo-presenter.js';
+import { Prompt } from './prompt.js';
+import { UpgradeScreen } from './upgrade-screen.js';
+import { VisitSiteBanner } from './visit-site-banner.js';
+import './generator-modal.scss';
+const debug = debugFactory('jetpack-ai-calypso:generator-modal');
+export const GeneratorModal = ({ isOpen, onClose, siteDetails, context, }) => {
+    const { tracks } = useAnalytics();
+    const { recordEvent: recordTracksEvent } = tracks;
+    const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory } = useDispatch(STORE_NAME);
+    const [loadingState, setLoadingState] = useState(null);
+    const [initialPrompt, setInitialPrompt] = useState();
+    const needsToHandleModalOpen = useRef(true);
+    const requestedFeatureData = useRef(false);
+    const [needsFeature, setNeedsFeature] = useState(false);
+    const [needsMoreRequests, setNeedsMoreRequests] = useState(false);
+    const [upgradeURL, setUpgradeURL] = useState('');
+    const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext } = useLogoGenerator();
+    const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
+    const siteId = siteDetails?.ID;
+    const siteURL = siteDetails?.URL;
+    const [logoAccepted, setLogoAccepted] = useState(false);
+    // First fetch the feature data so we have the most up-to-date info from the backend.
+    const feature = getAiAssistantFeature();
+    const generateFirstLogo = useCallback(async () => {
+        try {
+            // First generate the prompt based on the site's data.
+            setLoadingState('analyzing');
+            recordTracksEvent(EVENT_GENERATE, { context, tool: 'first-prompt' });
+            const prompt = await generateFirstPrompt();
+            setInitialPrompt(prompt);
+            // Then generate the logo based on the prompt.
+            setLoadingState('generating');
+            await generateLogo({ prompt });
+            setLoadingState(null);
+        }
+        catch (error) {
+            debug('Error generating first logo', error);
+            setLoadingState(null);
+        }
+    }, [context, generateFirstPrompt, generateLogo]);
+    /*
+     * Called ONCE to check the feature data to make sure the site is allowed to do the generation.
+     * Also, checks site history and trigger a new generation in case there are no logos to present.
+     */
+    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 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;
+            // If the site requires an upgrade, set the upgrade URL and show the upgrade screen immediately.
+            setNeedsFeature(!feature?.hasFeature ?? true);
+            setNeedsMoreRequests(siteNeedsMoreRequests);
+            if (!feature?.hasFeature || siteNeedsMoreRequests) {
+                const siteUpgradeURL = new URL(`${location.origin}/checkout/${siteDetails?.domain}/${feature?.nextTier?.slug}`);
+                siteUpgradeURL.searchParams.set('redirect_to', location.href);
+                setUpgradeURL(siteUpgradeURL.toString());
+                setLoadingState(null);
+                return;
+            }
+            // 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);
+                return;
+            }
+            // If the site does not require an upgrade and has no logos stored, generate the first prompt based on the site's data.
+            generateFirstLogo();
+        }
+        catch (error) {
+            debug('Error fetching feature', error);
+            setLoadingState(null);
+        }
+    }, [
+        feature,
+        generateFirstLogo,
+        loadLogoHistory,
+        clearDeletedMedia,
+        isLogoHistoryEmpty,
+        siteId,
+    ]);
+    const handleModalOpen = useCallback(async () => {
+        setContext(context);
+        recordTracksEvent(EVENT_MODAL_OPEN, { context, placement: EVENT_PLACEMENT_QUICK_LINKS });
+        initializeModal();
+    }, [setContext, context, initializeModal]);
+    const closeModal = () => {
+        // Reset the state when the modal is closed, so we trigger the modal initialization again when it's opened.
+        needsToHandleModalOpen.current = true;
+        onClose();
+        setLoadingState(null);
+        setNeedsFeature(false);
+        setNeedsMoreRequests(false);
+        clearErrors();
+        setLogoAccepted(false);
+        recordTracksEvent(EVENT_MODAL_CLOSE, { context, placement: EVENT_PLACEMENT_QUICK_LINKS });
+    };
+    const handleApplyLogo = () => {
+        setLogoAccepted(true);
+    };
+    const handleCloseAndReload = () => {
+        closeModal();
+        setTimeout(() => {
+            // Reload the page to update the logo.
+            window.location.reload();
+        }, 1000);
+    };
+    const handleFeedbackClick = () => {
+        recordTracksEvent(EVENT_FEEDBACK, { context });
+    };
+    // Set site details when siteId changes
+    useEffect(() => {
+        if (siteId) {
+            setSiteDetails(siteDetails);
+        }
+        // When the site details are set, we need to fetch the feature data.
+        if (!requestedFeatureData.current) {
+            requestedFeatureData.current = true;
+            fetchAiAssistantFeature();
+        }
+    }, [siteId, siteDetails, setSiteDetails]);
+    // Handles modal opening logic
+    useEffect(() => {
+        // While the modal is not open, the siteId is not set, or the feature data is not available, do nothing.
+        if (!isOpen || !siteId || !feature?.costs) {
+            return;
+        }
+        // Prevent multiple calls of the handleModalOpen function
+        if (needsToHandleModalOpen.current) {
+            needsToHandleModalOpen.current = false;
+            handleModalOpen();
+        }
+    }, [isOpen, siteId, handleModalOpen, feature]);
+    let body;
+    if (loadingState) {
+        body = _jsx(FirstLoadScreen, { state: loadingState });
+    }
+    else if (featureFetchError || firstLogoPromptFetchError) {
+        body = _jsx(FeatureFetchFailureScreen, { onCancel: closeModal, onRetry: initializeModal });
+    }
+    else if (needsFeature || needsMoreRequests) {
+        body = (_jsx(UpgradeScreen, { onCancel: closeModal, upgradeURL: upgradeURL, reason: needsFeature ? 'feature' : 'requests' }));
+    }
+    else {
+        body = (_jsxs(_Fragment, { children: [!logoAccepted && _jsx(Prompt, { initialPrompt: initialPrompt }), _jsx(LogoPresenter, { logo: selectedLogo, onApplyLogo: handleApplyLogo, logoAccepted: logoAccepted, siteId: String(siteId) }), logoAccepted ? (_jsxs("div", { className: "jetpack-ai-logo-generator__accept", children: [_jsx(VisitSiteBanner, { siteURL: siteURL, onVisitBlankTarget: handleCloseAndReload }), _jsxs("div", { className: "jetpack-ai-logo-generator__accept-actions", children: [_jsx(Button, { variant: "link", onClick: handleCloseAndReload, children: __('Close and refresh', 'jetpack-ai-client') }), _jsx(Button, { href: siteURL, variant: "primary", children: __('Visit site', 'jetpack-ai-client') })] })] })) : (_jsxs(_Fragment, { children: [_jsx(HistoryCarousel, {}), _jsx("div", { className: "jetpack-ai-logo-generator__footer", children: _jsxs(Button, { variant: "link", className: "jetpack-ai-logo-generator__feedback-button", href: "https://jetpack.com/redirect/?source=jetpack-ai-feedback", target: "_blank", onClick: handleFeedbackClick, children: [_jsx("span", { children: __('Provide feedback', 'jetpack-ai-client') }), _jsx(Icon, { icon: external, className: "icon" })] }) })] }))] }));
+    }
+    return (_jsx(_Fragment, { children: isOpen && (_jsx(Modal, { className: "jetpack-ai-logo-generator-modal", onRequestClose: logoAccepted ? handleCloseAndReload : closeModal, shouldCloseOnClickOutside: false, shouldCloseOnEsc: false, title: __('Jetpack AI Logo Generator', 'jetpack-ai-client'), children: _jsx("div", { className: clsx('jetpack-ai-logo-generator-modal__body', {
+                    'notice-modal': needsFeature || needsMoreRequests || featureFetchError || firstLogoPromptFetchError,
+                }), children: body }) })) }));
+};

package/build/logo-generator/components/history-carousel.d.ts

@@ -0,0 +1,6 @@
+import './history-carousel.scss';
+/**
+ * Types
+ */
+import type React from 'react';
+export declare const HistoryCarousel: React.FC;

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { Button } from '@wordpress/components';
+import clsx from 'clsx';
+/**
+ * Internal dependencies
+ */
+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 handleClick = (index) => {
+        recordTracksEvent(EVENT_NAVIGATE, {
+            context,
+            logos_count: logos.length,
+            selected_logo: index + 1,
+        });
+        setSelectedLogoIndex(index);
+    };
+    const thumbnailFrom = (url) => {
+        const thumbnailURL = new URL(url);
+        if (!thumbnailURL.searchParams.has('resize')) {
+            thumbnailURL.searchParams.append('resize', '48,48');
+        }
+        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))) }));
+};

package/build/logo-generator/components/image-loader.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Types
+ */
+import type React from 'react';
+export declare const ImageLoader: React.FC<{
+    className?: string;
+}>;

package/build/logo-generator/components/image-loader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * Internal dependencies
+ */
+import loader from '../assets/images/loader.gif';
+export const ImageLoader = ({ className = null }) => {
+    return (_jsx("img", { src: loader, alt: "Loading", className: clsx('jetpack-ai-logo-generator-modal__loader', className) }));
+};

package/build/logo-generator/components/logo-presenter.d.ts

@@ -0,0 +1,4 @@
+import './logo-presenter.scss';
+import type { LogoPresenterProps } from '../types.js';
+import type React from 'react';
+export declare const LogoPresenter: React.FC<LogoPresenterProps>;

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

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { Button, Icon } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import CheckIcon from '../assets/icons/check.js';
+import LogoIcon from '../assets/icons/logo.js';
+import MediaIcon from '../assets/icons/media.js';
+import { EVENT_SAVE, EVENT_USE } from '../constants.js';
+import useLogoGenerator from '../hooks/use-logo-generator.js';
+import useRequestErrors from '../hooks/use-request-errors.js';
+import { updateLogo } from '../lib/logo-storage.js';
+import { STORE_NAME } from '../store/index.js';
+import { ImageLoader } from './image-loader.js';
+import './logo-presenter.scss';
+const debug = debugFactory('jetpack-ai-calypso:logo-presenter');
+const SaveInLibraryButton = ({ siteId }) => {
+    const { tracks } = useAnalytics();
+    const { recordEvent: recordTracksEvent } = tracks;
+    const { saveLogo, selectedLogo, isSavingLogoToLibrary: saving, logos, selectedLogoIndex, context, } = useLogoGenerator();
+    const saved = !!selectedLogo?.mediaId;
+    const { loadLogoHistory } = useDispatch(STORE_NAME);
+    const handleClick = async () => {
+        if (!saved && !saving) {
+            recordTracksEvent(EVENT_SAVE, {
+                context,
+                logos_count: logos.length,
+                selected_logo: selectedLogoIndex ? selectedLogoIndex + 1 : 0,
+            });
+            try {
+                const savedLogo = await saveLogo(selectedLogo);
+                // Update localStorage
+                updateLogo({
+                    siteId,
+                    url: selectedLogo.url,
+                    newUrl: savedLogo.mediaURL,
+                    mediaId: savedLogo.mediaId,
+                });
+                // Update state
+                loadLogoHistory(siteId);
+            }
+            catch (error) {
+                debug('Error saving logo', error);
+            }
+        }
+    };
+    const savingLabel = __('Saving…', 'jetpack-ai-client');
+    const savedLabel = __('Saved', 'jetpack-ai-client');
+    return !saving && !saved ? (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", onClick: handleClick, children: [_jsx(Icon, { icon: _jsx(MediaIcon, {}) }), _jsx("span", { className: "action-text", children: __('Save in Library', 'jetpack-ai-client') })] })) : (_jsxs("button", { className: "jetpack-ai-logo-generator-modal-presenter__action", children: [_jsx(Icon, { icon: saving ? _jsx(MediaIcon, {}) : _jsx(CheckIcon, {}) }), _jsx("span", { className: "action-text", children: saving ? savingLabel : savedLabel })] }));
+};
+const UseOnSiteButton = ({ onApplyLogo }) => {
+    const { tracks } = useAnalytics();
+    const { recordEvent: recordTracksEvent } = tracks;
+    const { applyLogo, isSavingLogoToLibrary, isApplyingLogo, selectedLogo, logos, selectedLogoIndex, context, } = useLogoGenerator();
+    const handleClick = async () => {
+        if (!isApplyingLogo && !isSavingLogoToLibrary) {
+            recordTracksEvent(EVENT_USE, {
+                context,
+                logos_count: logos.length,
+                selected_logo: selectedLogoIndex != null ? selectedLogoIndex + 1 : 0,
+            });
+            try {
+                await applyLogo();
+                onApplyLogo();
+            }
+            catch (error) {
+                debug('Error applying logo', error);
+            }
+        }
+    };
+    return isApplyingLogo && !isSavingLogoToLibrary ? (_jsxs("button", { className: "jetpack-ai-logo-generator-modal-presenter__action", children: [_jsx(Icon, { icon: _jsx(LogoIcon, {}) }), _jsx("span", { className: "action-text", children: __('Applying logo…', 'jetpack-ai-client') })] })) : (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", onClick: handleClick, disabled: isSavingLogoToLibrary || !selectedLogo?.mediaId, children: [_jsx(Icon, { icon: _jsx(LogoIcon, {}) }), _jsx("span", { className: "action-text", children: __('Use on Site', 'jetpack-ai-client') })] }));
+};
+const LogoLoading = () => {
+    return (_jsxs(_Fragment, { children: [_jsx(ImageLoader, { className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsx("span", { className: "jetpack-ai-logo-generator-modal-presenter__loading-text", children: __('Generating new logo…', 'jetpack-ai-client') })] }));
+};
+const LogoReady = ({ siteId, logo, onApplyLogo, }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("img", { src: logo.url, alt: logo.description, className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__action-wrapper", children: [_jsx("span", { className: "jetpack-ai-logo-generator-modal-presenter__description", children: logo.description }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__actions", children: [_jsx(SaveInLibraryButton, { siteId: siteId }), _jsx(UseOnSiteButton, { onApplyLogo: onApplyLogo })] })] })] }));
+};
+const LogoUpdated = ({ logo }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("img", { src: logo.url, alt: logo.description, className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__success-wrapper", children: [_jsx(Icon, { icon: _jsx(CheckIcon, {}) }), _jsx("span", { children: __('Your logo has been successfully updated!', 'jetpack-ai-client') })] })] }));
+};
+export const LogoPresenter = ({ logo = null, loading = false, onApplyLogo, logoAccepted = false, siteId, }) => {
+    const { isRequestingImage } = useLogoGenerator();
+    const { saveToLibraryError, logoUpdateError } = useRequestErrors();
+    if (!logo) {
+        return null;
+    }
+    let logoContent;
+    if (loading || isRequestingImage) {
+        logoContent = _jsx(LogoLoading, {});
+    }
+    else if (logoAccepted) {
+        logoContent = _jsx(LogoUpdated, { logo: logo });
+    }
+    else {
+        logoContent = (_jsx(LogoReady, { siteId: String(siteId), logo: logo, onApplyLogo: onApplyLogo }));
+    }
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__wrapper", children: [_jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter", children: [_jsx("div", { className: "jetpack-ai-logo-generator-modal-presenter__content", children: logoContent }), !logoAccepted && (_jsx("div", { className: "jetpack-ai-logo-generator-modal-presenter__rectangle" }))] }), saveToLibraryError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error saving the logo to your library. Please try again.', 'jetpack-ai-client') })), logoUpdateError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error applying the logo to your site. Please try again.', 'jetpack-ai-client') }))] }));
+};

package/build/logo-generator/components/prompt.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" resolution-mode="require"/>
+import './prompt.scss';
+export declare const Prompt: React.FC<{
+    initialPrompt?: string;
+}>;

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { Button, Tooltip } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, info } from '@wordpress/icons';
+import debugFactory from 'debug';
+import { useCallback, useEffect, useState, useRef } from 'react';
+/**
+ * Internal dependencies
+ */
+import AiIcon from '../assets/icons/ai.js';
+import { EVENT_GENERATE, MINIMUM_PROMPT_LENGTH, EVENT_UPGRADE, EVENT_PLACEMENT_INPUT_FOOTER, } from '../constants.js';
+import { useCheckout } from '../hooks/use-checkout.js';
+import useLogoGenerator from '../hooks/use-logo-generator.js';
+import useRequestErrors from '../hooks/use-request-errors.js';
+import { UpgradeNudge } from './upgrade-nudge.js';
+import './prompt.scss';
+const debug = debugFactory('jetpack-ai-calypso:prompt-box');
+export const Prompt = ({ initialPrompt = '' }) => {
+    const { tracks } = useAnalytics();
+    const { recordEvent: recordTracksEvent } = tracks;
+    const [prompt, setPrompt] = useState(initialPrompt);
+    const [requestsRemaining, setRequestsRemaining] = useState(0);
+    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 enhancingLabel = __('Enhancing…', 'jetpack-ai-client');
+    const enhanceLabel = __('Enhance prompt', 'jetpack-ai-client');
+    const enhanceButtonLabel = isEnhancingPrompt ? enhancingLabel : enhanceLabel;
+    const inputRef = useRef(null);
+    const onEnhance = useCallback(async () => {
+        debug('Enhancing prompt', prompt);
+        setIsEnhancingPrompt(true);
+        recordTracksEvent(EVENT_GENERATE, { context, tool: 'enhance-prompt' });
+        try {
+            const enhancedPrompt = await enhancePrompt({ prompt });
+            setPrompt(enhancedPrompt);
+            setIsEnhancingPrompt(false);
+        }
+        catch (error) {
+            debug('Error enhancing prompt', error);
+            setIsEnhancingPrompt(false);
+        }
+    }, [context, enhancePrompt, prompt, setIsEnhancingPrompt]);
+    const featureData = getAiAssistantFeature(String(site?.id || ''));
+    const currentLimit = featureData?.currentTier?.value || 0;
+    const currentUsage = featureData?.usagePeriod?.requestsCount || 0;
+    const isUnlimited = currentLimit === 1;
+    useEffect(() => {
+        if (currentLimit - currentUsage <= 0) {
+            setRequestsRemaining(0);
+        }
+        else {
+            setRequestsRemaining(currentLimit - currentUsage);
+        }
+    }, [currentLimit, currentUsage]);
+    useEffect(() => {
+        // Update prompt text node after enhancement
+        if (inputRef.current && inputRef.current.textContent !== prompt) {
+            inputRef.current.textContent = prompt;
+        }
+    }, [prompt]);
+    const onGenerate = useCallback(async () => {
+        recordTracksEvent(EVENT_GENERATE, { context, tool: 'image' });
+        generateLogo({ prompt });
+    }, [context, generateLogo, prompt]);
+    const onPromptInput = (event) => {
+        setPrompt(event.target.textContent || '');
+    };
+    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;
+        }
+        selection.deleteFromDocument();
+        const range = selection.getRangeAt(0);
+        range.insertNode(document.createTextNode(text));
+        selection.collapseToEnd();
+        setPrompt(inputRef.current?.textContent || '');
+    };
+    const onUpgradeClick = () => {
+        recordTracksEvent(EVENT_UPGRADE, { context, placement: EVENT_PLACEMENT_INPUT_FOOTER });
+    };
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt", children: [_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-header", children: [_jsx("div", { className: "jetpack-ai-logo-generator__prompt-label", children: __('Describe your site:', 'jetpack-ai-client') }), _jsx("div", { className: "jetpack-ai-logo-generator__prompt-actions", children: _jsxs(Button, { variant: "link", disabled: isBusy || requireUpgrade || !hasPrompt, onClick: onEnhance, children: [_jsx(AiIcon, {}), _jsx("span", { children: enhanceButtonLabel })] }) })] }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-query", children: [_jsx("div", { ref: inputRef, contentEditable: !isBusy && !requireUpgrade, 
+                        // 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') }))] })] }));
+};

package/build/logo-generator/components/upgrade-nudge.d.ts

@@ -0,0 +1,2 @@
+import './upgrade-nudge.scss';
+export declare const UpgradeNudge: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { Button } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, warning } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import { EVENT_PLACEMENT_UPGRADE_PROMPT, EVENT_UPGRADE } from '../constants.js';
+import { useCheckout } from '../hooks/use-checkout.js';
+import useLogoGenerator from '../hooks/use-logo-generator.js';
+import './upgrade-nudge.scss';
+export const UpgradeNudge = () => {
+    const { tracks } = useAnalytics();
+    const { recordEvent: recordTracksEvent } = tracks;
+    const buttonText = __('Upgrade', 'jetpack-ai-client');
+    const upgradeMessage = createInterpolateElement(__('Not enough requests left to generate a logo. <strong>Upgrade now to increase it.</strong>', 'jetpack-ai-client'), {
+        strong: _jsx("strong", {}),
+    });
+    const { nextTierCheckoutURL: checkoutUrl } = useCheckout();
+    const { context } = useLogoGenerator();
+    const handleUpgradeClick = () => {
+        recordTracksEvent(EVENT_UPGRADE, { context, placement: EVENT_PLACEMENT_UPGRADE_PROMPT });
+    };
+    return (_jsx("div", { className: "jetpack-upgrade-plan-banner", children: _jsxs("div", { className: "jetpack-upgrade-plan-banner__wrapper", children: [_jsxs("div", { children: [_jsx(Icon, { className: "jetpack-upgrade-plan-banner__icon", icon: warning }), _jsx("span", { className: "jetpack-upgrade-plan-banner__banner-description", children: upgradeMessage })] }), _jsx(Button, { href: checkoutUrl, target: "_blank", className: "is-primary", onClick: handleUpgradeClick, children: buttonText })] }) }));
+};

package/build/logo-generator/components/upgrade-screen.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Types
+ */
+import type React from 'react';
+export declare const UpgradeScreen: React.FC<{
+    onCancel: () => void;
+    upgradeURL: string;
+    reason: 'feature' | 'requests';
+}>;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import { EVENT_PLACEMENT_FREE_USER_SCREEN, EVENT_UPGRADE } from '../constants.js';
+import useLogoGenerator from '../hooks/use-logo-generator.js';
+export const UpgradeScreen = ({ onCancel, upgradeURL, reason }) => {
+    const { tracks } = useAnalytics();
+    const { recordEvent: recordTracksEvent } = tracks;
+    const upgradeMessageFeature = __('Upgrade your Jetpack AI for access to exclusive features, including logo generation. This upgrade will also increase the amount of requests you can use in all AI-powered features.', 'jetpack-ai-client');
+    const upgradeMessageRequests = __('Not enough requests left to generate a logo. Upgrade your Jetpack AI to increase the amount of requests you can use in all AI-powered features.', 'jetpack-ai-client');
+    const { context } = useLogoGenerator();
+    const handleUpgradeClick = () => {
+        recordTracksEvent(EVENT_UPGRADE, { context, placement: EVENT_PLACEMENT_FREE_USER_SCREEN });
+        onCancel();
+    };
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-message-wrapper", children: [_jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-message", children: [_jsx("span", { className: "jetpack-ai-logo-generator-modal__loading-message", children: reason === 'feature' ? upgradeMessageFeature : upgradeMessageRequests }), "\u00A0", _jsx(Button, { variant: "link", href: "https://jetpack.com/ai/", target: "_blank", children: __('Learn more', 'jetpack-ai-client') })] }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-actions", children: [_jsx(Button, { variant: "tertiary", onClick: onCancel, children: __('Cancel', 'jetpack-ai-client') }), _jsx(Button, { variant: "primary", href: upgradeURL, target: "_blank", onClick: handleUpgradeClick, children: __('Upgrade', 'jetpack-ai-client') })] })] }));
+};

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

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

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { Button, Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { external } from '@wordpress/icons';
+import clsx from 'clsx';
+/**
+ * Internal dependencies
+ */
+import jetpackLogo from '../assets/images/jetpack-logo.svg';
+import './visit-site-banner.scss';
+export const VisitSiteBanner = ({ className = null, siteURL = '#', onVisitBlankTarget }) => {
+    return (_jsxs("div", { className: clsx('jetpack-ai-logo-generator-modal-visit-site-banner', className), children: [_jsx("div", { className: "jetpack-ai-logo-generator-modal-visit-site-banner__jetpack-logo", children: _jsx("img", { src: jetpackLogo, alt: "Jetpack" }) }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-visit-site-banner__content", children: [_jsx("strong", { children: __('Do you want to know all the amazing things you can do with Jetpack AI?', 'jetpack-ai-client') }), _jsx("span", { children: __('Generate and tweak content, create forms, get feedback and much more.', 'jetpack-ai-client') }), _jsx("div", { children: _jsxs(Button, { variant: "link", href: siteURL, target: "_blank", onClick: onVisitBlankTarget, children: [__('Visit website', 'jetpack-ai-client'), _jsx(Icon, { icon: external, size: 20 })] }) })] })] }));
+};

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

@@ -0,0 +1,16 @@
+export declare const JWT_TOKEN_ID = "jetpack-ai-jwt";
+export declare const JWT_TOKEN_EXPIRATION_TIME: number;
+export declare const EVENT_MODAL_OPEN = "jetpack_ai_logo_generator_modal_open";
+export declare const EVENT_MODAL_CLOSE = "jetpack_ai_logo_generator_modal_close";
+export declare const EVENT_GENERATE = "jetpack_ai_logo_generator_generate";
+export declare const EVENT_SAVE = "jetpack_ai_logo_generator_save";
+export declare const EVENT_USE = "jetpack_ai_logo_generator_use";
+export declare const EVENT_NAVIGATE = "jetpack_ai_logo_generator_navigate";
+export declare const EVENT_FEEDBACK = "jetpack_ai_logo_generator_feedback";
+export declare const EVENT_UPGRADE = "jetpack_ai_upgrade_button";
+export declare const EVENT_PLACEMENT_QUICK_LINKS = "quick_links";
+export declare const EVENT_PLACEMENT_INPUT_FOOTER = "input_footer";
+export declare const EVENT_PLACEMENT_FREE_USER_SCREEN = "free_user_screen";
+export declare const EVENT_PLACEMENT_UPGRADE_PROMPT = "upgrade_prompt";
+export declare const MINIMUM_PROMPT_LENGTH = 3;
+export declare const DEFAULT_LOGO_COST = 10;

package/build/logo-generator/constants.js

@@ -0,0 +1,19 @@
+export const JWT_TOKEN_ID = 'jetpack-ai-jwt';
+export const JWT_TOKEN_EXPIRATION_TIME = 2 * 60 * 1000; // 2 minutes
+// Tracks event names
+export const EVENT_MODAL_OPEN = 'jetpack_ai_logo_generator_modal_open';
+export const EVENT_MODAL_CLOSE = 'jetpack_ai_logo_generator_modal_close';
+export const EVENT_GENERATE = 'jetpack_ai_logo_generator_generate';
+export const EVENT_SAVE = 'jetpack_ai_logo_generator_save';
+export const EVENT_USE = 'jetpack_ai_logo_generator_use';
+export const EVENT_NAVIGATE = 'jetpack_ai_logo_generator_navigate';
+export const EVENT_FEEDBACK = 'jetpack_ai_logo_generator_feedback';
+export const EVENT_UPGRADE = 'jetpack_ai_upgrade_button';
+// Event placement constants
+export const EVENT_PLACEMENT_QUICK_LINKS = 'quick_links';
+export const EVENT_PLACEMENT_INPUT_FOOTER = 'input_footer';
+export const EVENT_PLACEMENT_FREE_USER_SCREEN = 'free_user_screen';
+export const EVENT_PLACEMENT_UPGRADE_PROMPT = 'upgrade_prompt';
+// Feature constants
+export const MINIMUM_PROMPT_LENGTH = 3;
+export const DEFAULT_LOGO_COST = 10;

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

@@ -0,0 +1,4 @@
+export declare const useCheckout: () => {
+    nextTierCheckoutURL: string;
+    hasNextTier: boolean;
+};