AI Logo Generator: prevent multiple feature data requests (#38630)

* Prevent feature data requests when another one is already happening

* Support modal reloads and handle error retry with a modal reload

* changelog

* Changelog

projects/js-packages/ai-client/changelog/update-ai-logo-generator-prevent-multiple-feature-data-requests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+AI Logo Generator: fix multiple feature requests error + retry handling.

projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx

@@ -3,7 +3,7 @@
  */
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Modal, Button } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, select } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { external, Icon } from '@wordpress/icons';
 import clsx from 'clsx';
@@ -44,13 +44,15 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	isOpen,
 	onClose,
 	onApplyLogo,
+	onReload,
 	siteDetails,
 	context,
 	placement,
 } ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
 	const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory } = useDispatch( STORE_NAME );
+	const { getIsRequestingAiAssistantFeature } = select( STORE_NAME );
 	const [ loadingState, setLoadingState ] = useState<
 		'loadingFeature' | 'analyzing' | 'generating' | null
 	>( null );
@@ -177,10 +179,13 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 
 		// When the site details are set, we need to fetch the feature data.
 		if ( ! requestedFeatureData.current ) {
-			requestedFeatureData.current = true;
-			fetchAiAssistantFeature();
+			const isRequestingFeature = getIsRequestingAiAssistantFeature();
+			if ( ! isRequestingFeature ) {
+				requestedFeatureData.current = true;
+				fetchAiAssistantFeature();
+			}
 		}
-	}, [ siteId, siteDetails, setSiteDetails ] );
+	}, [ siteId, siteDetails, setSiteDetails, getIsRequestingAiAssistantFeature ] );
 
 	// Handles modal opening logic
 	useEffect( () => {
@@ -201,7 +206,15 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	if ( loadingState ) {
 		body = <FirstLoadScreen state={ loadingState } />;
 	} else if ( featureFetchError || firstLogoPromptFetchError ) {
-		body = <FeatureFetchFailureScreen onCancel={ closeModal } onRetry={ initializeModal } />;
+		body = (
+			<FeatureFetchFailureScreen
+				onCancel={ closeModal }
+				onRetry={ () => {
+					closeModal();
+					onReload?.();
+				} }
+			/>
+		);
 	} else if ( needsFeature || needsMoreRequests ) {
 		body = (
 			<UpgradeScreen

projects/js-packages/ai-client/src/logo-generator/types.ts

@@ -16,6 +16,7 @@ export interface GeneratorModalProps {
 	isOpen: boolean;
 	onClose: () => void;
 	onApplyLogo: ( mediaId: number ) => void;
+	onReload: () => void;
 	context: string;
 	placement: string;
 }

projects/plugins/jetpack/changelog/update-ai-logo-generator-prevent-multiple-feature-data-requests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+AI Logo Generator: Fix the retry button when a feature request fails.

projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx

@@ -100,6 +100,11 @@ const siteLogoEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
 			setIsLogoGeneratorModalVisible( false );
 		}, [] );
 
+		const reloadModal = useCallback( () => {
+			closeModal();
+			showModal();
+		}, [ closeModal, showModal ] );
+
 		const applyLogoHandler = useCallback(
 			( mediaId: number ) => {
 				if ( mediaId ) {
@@ -128,6 +133,7 @@ const siteLogoEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
 					isOpen={ isLogoGeneratorModalVisible }
 					onClose={ closeModal }
 					onApplyLogo={ applyLogoHandler }
+					onReload={ reloadModal }
 					context={ PLACEMENT_CONTEXT }
 					placement={ TOOL_PLACEMENT }
 					siteDetails={ siteDetails }