@automattic/jetpack-ai-client 0.14.6 → 0.15.0

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

@@ -0,0 +1,291 @@
+/**
+ * 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';
+/**
+ * Types
+ */
+import type { GeneratorModalProps } from '../types.js';
+import type React from 'react';
+
+const debug = debugFactory( 'jetpack-ai-calypso:generator-modal' );
+
+export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
+	isOpen,
+	onClose,
+	siteDetails,
+	context,
+} ) => {
+	const { tracks } = useAnalytics();
+	const { recordEvent: recordTracksEvent } = tracks;
+	const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory } = useDispatch( STORE_NAME );
+	const [ loadingState, setLoadingState ] = useState<
+		'loadingFeature' | 'analyzing' | 'generating' | null
+	>( null );
+	const [ initialPrompt, setInitialPrompt ] = useState< string | undefined >();
+	const needsToHandleModalOpen = useRef< boolean >( true );
+	const requestedFeatureData = useRef< boolean >( false );
+	const [ needsFeature, setNeedsFeature ] = useState( false );
+	const [ needsMoreRequests, setNeedsMoreRequests ] = useState( false );
+	const [ upgradeURL, setUpgradeURL ] = useState( '' );
+	const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext } =
+		useLogoGenerator();
+	const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
+	const siteId = siteDetails?.ID;
+	const siteURL = siteDetails?.URL;
+	const [ logoAccepted, setLogoAccepted ] = useState( false );
+
+	// 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: React.ReactNode;
+
+	if ( loadingState ) {
+		body = <FirstLoadScreen state={ loadingState } />;
+	} else if ( featureFetchError || firstLogoPromptFetchError ) {
+		body = <FeatureFetchFailureScreen onCancel={ closeModal } onRetry={ initializeModal } />;
+	} else if ( needsFeature || needsMoreRequests ) {
+		body = (
+			<UpgradeScreen
+				onCancel={ closeModal }
+				upgradeURL={ upgradeURL }
+				reason={ needsFeature ? 'feature' : 'requests' }
+			/>
+		);
+	} else {
+		body = (
+			<>
+				{ ! logoAccepted && <Prompt initialPrompt={ initialPrompt } /> }
+				<LogoPresenter
+					logo={ selectedLogo }
+					onApplyLogo={ handleApplyLogo }
+					logoAccepted={ logoAccepted }
+					siteId={ String( siteId ) }
+				/>
+				{ logoAccepted ? (
+					<div className="jetpack-ai-logo-generator__accept">
+						<VisitSiteBanner siteURL={ siteURL } onVisitBlankTarget={ handleCloseAndReload } />
+						<div className="jetpack-ai-logo-generator__accept-actions">
+							<Button variant="link" onClick={ handleCloseAndReload }>
+								{ __( 'Close and refresh', 'jetpack-ai-client' ) }
+							</Button>
+							<Button href={ siteURL } variant="primary">
+								{ __( 'Visit site', 'jetpack-ai-client' ) }
+							</Button>
+						</div>
+					</div>
+				) : (
+					<>
+						<HistoryCarousel />
+						<div className="jetpack-ai-logo-generator__footer">
+							<Button
+								variant="link"
+								className="jetpack-ai-logo-generator__feedback-button"
+								href="https://jetpack.com/redirect/?source=jetpack-ai-feedback"
+								target="_blank"
+								onClick={ handleFeedbackClick }
+							>
+								<span>{ __( 'Provide feedback', 'jetpack-ai-client' ) }</span>
+								<Icon icon={ external } className="icon" />
+							</Button>
+						</div>
+					</>
+				) }
+			</>
+		);
+	}
+
+	return (
+		<>
+			{ isOpen && (
+				<Modal
+					className="jetpack-ai-logo-generator-modal"
+					onRequestClose={ logoAccepted ? handleCloseAndReload : closeModal }
+					shouldCloseOnClickOutside={ false }
+					shouldCloseOnEsc={ false }
+					title={ __( 'Jetpack AI Logo Generator', 'jetpack-ai-client' ) }
+				>
+					<div
+						className={ clsx( 'jetpack-ai-logo-generator-modal__body', {
+							'notice-modal':
+								needsFeature || needsMoreRequests || featureFetchError || firstLogoPromptFetchError,
+						} ) }
+					>
+						{ body }
+					</div>
+				</Modal>
+			) }
+		</>
+	);
+};

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

@@ -0,0 +1,36 @@
+@import '@automattic/jetpack-base-styles/root-variables';
+
+.jetpack-ai-logo-generator__carousel {
+	display: flex;
+	gap: 8px;
+	overflow-x: auto;
+	flex-shrink: 0;
+
+	.components-button {
+		height: unset;
+		padding: unset;
+	}
+
+	@media (min-width: 700px) {
+		padding: 2px;
+	}
+}
+
+.jetpack-ai-logo-generator__carousel-logo {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: 1px solid var(--studio-gray-5, #dcdcde);
+	border-radius: 2px;
+	flex-shrink: 0;
+
+	&.is-selected {
+		border-color: var(--color-link, #3858e9);
+		border-width: 1.5px;
+	}
+
+	img {
+		width: 48px;
+		height: 48px;
+	}
+}

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

@@ -0,0 +1,57 @@
+/**
+ * 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';
+/**
+ * Types
+ */
+import type React from 'react';
+
+export const HistoryCarousel: React.FC = () => {
+	const { tracks } = useAnalytics();
+	const { recordEvent: recordTracksEvent } = tracks;
+	const { logos, selectedLogo, setSelectedLogoIndex, context } = useLogoGenerator();
+
+	const handleClick = ( index: number ) => {
+		recordTracksEvent( EVENT_NAVIGATE, {
+			context,
+			logos_count: logos.length,
+			selected_logo: index + 1,
+		} );
+		setSelectedLogoIndex( index );
+	};
+
+	const thumbnailFrom = ( url: string ): string => {
+		const thumbnailURL = new URL( url );
+
+		if ( ! thumbnailURL.searchParams.has( 'resize' ) ) {
+			thumbnailURL.searchParams.append( 'resize', '48,48' );
+		}
+
+		return thumbnailURL.toString();
+	};
+
+	return (
+		<div className="jetpack-ai-logo-generator__carousel">
+			{ logos.map( ( logo, index ) => (
+				<Button
+					key={ logo.url }
+					className={ clsx( 'jetpack-ai-logo-generator__carousel-logo', {
+						'is-selected': logo.url === selectedLogo.url,
+					} ) }
+					onClick={ () => handleClick( index ) }
+				>
+					<img src={ thumbnailFrom( logo.url ) } alt={ logo.description } />
+				</Button>
+			) ) }
+		</div>
+	);
+};

package/src/logo-generator/components/image-loader.tsx

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * Internal dependencies
+ */
+import loader from '../assets/images/loader.gif';
+/**
+ * Types
+ */
+import type React from 'react';
+
+export const ImageLoader: React.FC< { className?: string } > = ( { className = null } ) => {
+	return (
+		<img
+			src={ loader }
+			alt="Loading"
+			className={ clsx( 'jetpack-ai-logo-generator-modal__loader', className ) }
+		/>
+	);
+};

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

@@ -0,0 +1,116 @@
+@import '@automattic/jetpack-base-styles/root-variables';
+
+.jetpack-ai-logo-generator-modal-presenter__wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.jetpack-ai-logo-generator-modal-presenter {
+	display: flex;
+}
+
+.jetpack-ai-logo-generator-modal-presenter__content {
+	border-radius: 4px;
+	background: var(--studio-gray-0, #f6f7f7);
+	display: flex;
+	align-items: center;
+	flex-grow: 1;
+	max-height: 229px;
+
+	@media (max-width: 700px) {
+		flex-direction: column;
+		max-height: unset;
+	}
+}
+
+.jetpack-ai-logo-generator-modal-presenter__rectangle {
+	position: relative;
+	width: 0;
+
+	&::after {
+		width: 15px;
+		height: 15px;
+		transform: rotate(-45deg);
+		background-color: var(--studio-gray-0, #f6f7f7);
+		content: "";
+		position: absolute;
+		top: -7.5px;
+		left: -66px;
+	}
+}
+
+.jetpack-ai-logo-generator-modal-presenter__loading-text {
+	flex-grow: 1;
+	text-align: center;
+}
+
+.jetpack-ai-logo-generator-modal-presenter__logo {
+	width: 198px;
+	height: 198px;
+	margin: 16px 30px 16px 16px;
+
+	@media (max-width: 700px) {
+		margin: 16px;
+	}
+}
+
+.jetpack-ai-logo-generator-modal-presenter__action-wrapper {
+	height: 100%;
+	flex-grow: 1;
+	margin-right: 32px;
+	display: flex;
+	flex-direction: column;
+	padding: 16px 0;
+	box-sizing: border-box;
+
+	@media (max-width: 700px) {
+		margin-left: 32px;
+	}
+}
+
+.jetpack-ai-logo-generator-modal-presenter__description {
+	flex-grow: 1;
+	padding-top: 16px;
+	color: var(--studio-gray-50, #646970);
+	overflow-y: auto;
+}
+
+.jetpack-ai-logo-generator-modal-presenter__actions {
+	padding-top: 16px;
+	margin-top: 16px;
+	border-top: 1px solid var(--studio-gray-5, #dcdcde);
+	display: flex;
+	gap: 24px;
+}
+
+.jetpack-ai-logo-generator-modal-presenter__action {
+	display: flex;
+	align-items: center;
+
+	&.components-button,
+	&.components-button:hover,
+	&.components-button:active {
+		color: var(--color-link, #3858e9);
+	}
+
+	.action-text {
+		font-size: var(--font-body-extra-small);
+	}
+
+	.jetpack-ai-logo-generator-icon {
+		margin-right: 8px;
+	}
+}
+
+.jetpack-ai-logo-generator-modal-presenter__success-wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+	width: 100%;
+
+	@media (max-width: 700px) {
+		padding-bottom: 16px;
+	}
+}