Add Blueprint details step to blueprint selection flow

src/components/no-studio-sites/index.tsx

@@ -10,7 +10,7 @@ export function NoStudioSites() {
 		setDeeplinkPhpVersion,
 		setDeeplinkWpVersion,
 		setBlueprintPreferredVersions,
-		setBlueprintDeeplinkWarnings,
+		setBlueprintWarnings,
 		setBlueprintSuggestedDomain,
 		setBlueprintSuggestedHttps,
 		setBlueprintSuggestedSiteName,
@@ -23,7 +23,7 @@ export function NoStudioSites() {
 		setPhpVersion: setDeeplinkPhpVersion,
 		setWpVersion: setDeeplinkWpVersion,
 		setBlueprintPreferredVersions,
-		setBlueprintDeeplinkWarnings,
+		setBlueprintWarnings,
 		setBlueprintSuggestedDomain,
 		setBlueprintSuggestedHttps,
 		setBlueprintSuggestedSiteName,

src/hooks/use-add-site.ts

@@ -61,7 +61,7 @@ export function useAddSite() {
 	const [ blueprintPreferredVersions, setBlueprintPreferredVersions ] = useState<
 		BlueprintPreferredVersions | undefined
 	>();
-	const [ blueprintDeeplinkWarnings, setBlueprintDeeplinkWarnings ] = useState<
+	const [ blueprintWarnings, setBlueprintWarnings ] = useState<
 		BlueprintValidationWarning[] | undefined
 	>();
 	const [ blueprintSuggestedDomain, setBlueprintSuggestedDomain ] = useState<
@@ -82,7 +82,7 @@ export function useAddSite() {
 		setIsDeeplinkFlow( false );
 		setSelectedBlueprint( undefined );
 		setBlueprintPreferredVersions( undefined );
-		setBlueprintDeeplinkWarnings( undefined );
+		setBlueprintWarnings( undefined );
 		setBlueprintSuggestedDomain( undefined );
 		setBlueprintSuggestedHttps( undefined );
 		setBlueprintSuggestedSiteName( undefined );
@@ -98,7 +98,7 @@ export function useAddSite() {
 		setFileForImport( null );
 		setSelectedBlueprint( undefined );
 		setBlueprintPreferredVersions( undefined );
-		setBlueprintDeeplinkWarnings( undefined );
+		setBlueprintWarnings( undefined );
 		setBlueprintSuggestedDomain( undefined );
 		setBlueprintSuggestedHttps( undefined );
 		setBlueprintSuggestedSiteName( undefined );
@@ -327,8 +327,8 @@ export function useAddSite() {
 			setSelectedBlueprint,
 			blueprintPreferredVersions,
 			setBlueprintPreferredVersions,
-			blueprintDeeplinkWarnings,
-			setBlueprintDeeplinkWarnings,
+			blueprintWarnings,
+			setBlueprintWarnings,
 			blueprintSuggestedDomain,
 			setBlueprintSuggestedDomain,
 			blueprintSuggestedHttps,
@@ -358,7 +358,7 @@ export function useAddSite() {
 			fileForImport,
 			selectedBlueprint,
 			blueprintPreferredVersions,
-			blueprintDeeplinkWarnings,
+			blueprintWarnings,
 			blueprintSuggestedDomain,
 			blueprintSuggestedHttps,
 			blueprintSuggestedSiteName,

src/modules/add-site/components/blueprint-deeplink.tsx → src/modules/add-site/components/blueprint-details.tsx

@@ -5,26 +5,38 @@ import {
 	__experimentalText as Text,
 	Icon,
 } from '@wordpress/components';
-import { check, link } from '@wordpress/icons';
+import { check, link, upload, starFilled } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import { BlueprintValidationWarning } from 'common/lib/blueprint-validation';
 import { Blueprint } from 'src/stores/wpcom-api';
 import { BlueprintWarningNotice } from './blueprint-warning-notice';
 
-interface BlueprintDeeplinkProps {
+export type BlueprintSource = 'deeplink' | 'file' | 'featured';
+
+interface BlueprintDetailsProps {
 	selectedBlueprint?: Blueprint;
 	warnings?: BlueprintValidationWarning[];
+	source?: BlueprintSource;
 }
 
-export default function BlueprintDeeplink( {
+export default function BlueprintDetails( {
 	selectedBlueprint,
 	warnings,
-}: BlueprintDeeplinkProps ) {
+	source = 'deeplink',
+}: BlueprintDetailsProps ) {
 	const { __ } = useI18n();
 
 	const blueprintTitle = selectedBlueprint?.title || __( 'Blueprint' );
 	const blueprintDescription = selectedBlueprint?.excerpt || '';
 
+	const sourceConfig = {
+		deeplink: { icon: link, label: __( 'Blueprint loaded from URL' ) },
+		file: { icon: upload, label: __( 'Blueprint loaded from file' ) },
+		featured: { icon: starFilled, label: __( 'Featured Blueprint' ) },
+	};
+
+	const { icon: sourceIcon, label: sourceLabel } = sourceConfig[ source ];
+
 	return (
 		<VStack className="text-center w-full" alignment="top" spacing={ 0 }>
 			<Heading className="text-center text-[32px] text-gray-900 mb-5" weight={ 500 }>
@@ -61,10 +73,8 @@ export default function BlueprintDeeplink( {
 					alignment="start"
 					className="w-full bg-[#FAFAFA] border border-t-0 rounded-b-lg py-[14px] pe-[14px] ps-[68px] justify-start"
 				>
-					<Icon icon={ link } size={ 18 } />
-					<Text className="text-[13px] text-a8c-gray-800">
-						{ __( 'Blueprint loaded from URL' ) }
-					</Text>
+					<Icon icon={ sourceIcon } size={ 18 } />
+					<Text className="text-[13px] text-a8c-gray-800">{ sourceLabel }</Text>
 				</HStack>
 			</VStack>
 		</VStack>

src/modules/add-site/components/blueprints.tsx

@@ -12,13 +12,13 @@ import { sprintf } from '@wordpress/i18n';
 import { Icon, external, upload } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import { useCallback, useRef, useState, useMemo } from 'react';
+import { BlueprintValidationWarning } from 'common/lib/blueprint-validation';
 import StudioButton from 'src/components/button';
 import { LearnMoreLink } from 'src/components/learn-more';
 import { cx } from 'src/lib/cx';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { useI18nLocale } from 'src/stores';
 import { useGetBlueprints } from 'src/stores/wpcom-api';
-import { BlueprintWarningNotice } from './blueprint-warning-notice';
 
 import './blueprints.css';
 
@@ -48,7 +48,7 @@ interface AddSiteBlueprintProps {
 	isLoading: boolean;
 	selectedBlueprint: string | null;
 	onBlueprintChange: ( blueprintId: string ) => void;
-	onFileBlueprintSelect?: ( blueprint: Blueprint ) => void;
+	onFileBlueprintSelect?: ( blueprint: Blueprint, warnings?: BlueprintValidationWarning[] ) => void;
 }
 
 export function AddSiteBlueprintSelector( {
@@ -66,14 +66,6 @@ export function AddSiteBlueprintSelector( {
 	} );
 	const fileRef = useRef< HTMLInputElement | null >( null );
 	const [ validationError, setValidationError ] = useState< string | undefined >( undefined );
-	const [ blueprintWarnings, setBlueprintWarnings ] = useState<
-		| Array< {
-				feature: string;
-				reason: string;
-				alternative?: string;
-		  } >
-		| undefined
-	>( undefined );
 	const [ uploadedFileName, setUploadedFileName ] = useState< string | null >( null );
 
 	// Check if current selection is a file-based blueprint
@@ -84,7 +76,6 @@ export function AddSiteBlueprintSelector( {
 	const handleRemoveFile = useCallback( () => {
 		onBlueprintChange( '' );
 		setValidationError( undefined );
-		setBlueprintWarnings( undefined );
 		setUploadedFileName( null );
 		if ( fileRef.current ) {
 			fileRef.current.value = '';
@@ -94,7 +85,6 @@ export function AddSiteBlueprintSelector( {
 	const handleBlueprintClick = useCallback(
 		( item: DataViewBlueprint ) => {
 			setValidationError( undefined );
-			setBlueprintWarnings( undefined );
 			onBlueprintChange( item.slug );
 		},
 		[ onBlueprintChange ]
@@ -195,7 +185,6 @@ export function AddSiteBlueprintSelector( {
 	const handleFileSelect = async ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		const file = event.target.files?.[ 0 ];
 		setValidationError( undefined );
-		setBlueprintWarnings( undefined );
 		setUploadedFileName( null );
 
 		if ( file && file.type === 'application/json' && onFileBlueprintSelect ) {
@@ -224,9 +213,8 @@ export function AddSiteBlueprintSelector( {
 					return;
 				}
 
-				if ( validation.warnings && validation.warnings.length > 0 ) {
-					setBlueprintWarnings( validation.warnings );
-				}
+				const fileWarnings =
+					validation.warnings && validation.warnings.length > 0 ? validation.warnings : undefined;
 
 				const fileBlueprint: Blueprint = {
 					slug: `file:${ file.name }`, // Use filename as part of the slug
@@ -238,7 +226,7 @@ export function AddSiteBlueprintSelector( {
 				};
 
 				setUploadedFileName( null );
-				onFileBlueprintSelect( fileBlueprint );
+				onFileBlueprintSelect( fileBlueprint, fileWarnings );
 			} catch ( error ) {
 				if ( error instanceof SyntaxError ) {
 					setValidationError(
@@ -315,14 +303,6 @@ export function AddSiteBlueprintSelector( {
 				</Notice>
 			) }
 
-			{ ! validationError && (
-				<BlueprintWarningNotice
-					warnings={ blueprintWarnings }
-					fileName={ selectedFileName || '' }
-					className="mx-0 mb-4"
-				/>
-			) }
-
 			<HStack alignment="edge" className="w-full mb-5 h-7">
 				<HStack alignment="left" className="flex-1">
 					<Text className="text-[16px]" weight={ 500 }>

src/modules/add-site/components/stepper.tsx

@@ -9,11 +9,13 @@ interface StepperProps {
 	currentPath?: string;
 	onBack?: () => void;
 	onBlueprintContinue?: () => void;
+	onBlueprintDetailsContinue?: () => void;
 	onBlueprintDeeplinkContinue?: () => void;
 	onBackupContinue?: () => void;
 	onPullRemoteContinue?: () => void;
 	onCreateSubmit?: ( event: FormEvent ) => void;
 	canSubmitBlueprint?: boolean;
+	canSubmitBlueprintDetails?: boolean;
 	canSubmitBlueprintDeeplink?: boolean;
 	canSubmitBackup?: boolean;
 	canSubmitPullRemote?: boolean;
@@ -24,11 +26,13 @@ export default function Stepper( {
 	currentPath,
 	onBack,
 	onBlueprintContinue,
+	onBlueprintDetailsContinue,
 	onBlueprintDeeplinkContinue,
 	onBackupContinue,
 	onPullRemoteContinue,
 	onCreateSubmit,
 	canSubmitBlueprint,
+	canSubmitBlueprintDetails,
 	canSubmitBlueprintDeeplink,
 	canSubmitBackup,
 	canSubmitPullRemote,
@@ -37,11 +41,13 @@ export default function Stepper( {
 	const { __ } = useI18n();
 	const { steps, isVisible, actionButton, onSubmit, canSubmit } = useStepper( {
 		onBlueprintContinue,
+		onBlueprintDetailsContinue,
 		onBlueprintDeeplinkContinue,
 		onBackupContinue,
 		onPullRemoteContinue,
 		onCreateSubmit,
 		canSubmitBlueprint,
+		canSubmitBlueprintDetails,
 		canSubmitBlueprintDeeplink,
 		canSubmitBackup,
 		canSubmitPullRemote,

src/modules/add-site/hooks/tests/use-blueprint-deeplink.test.tsx

@@ -20,7 +20,7 @@ describe( 'useBlueprintDeeplink', () => {
 	const mockSetPhpVersion = vi.fn();
 	const mockSetWpVersion = vi.fn();
 	const mockSetBlueprintPreferredVersions = vi.fn();
-	const mockSetBlueprintDeeplinkWarnings = vi.fn();
+	const mockSetBlueprintWarnings = vi.fn();
 	const mockSetBlueprintSuggestedDomain = vi.fn();
 	const mockSetBlueprintSuggestedHttps = vi.fn();
 	const mockSetBlueprintSuggestedSiteName = vi.fn();
@@ -36,7 +36,7 @@ describe( 'useBlueprintDeeplink', () => {
 					setPhpVersion: mockSetPhpVersion,
 					setWpVersion: mockSetWpVersion,
 					setBlueprintPreferredVersions: mockSetBlueprintPreferredVersions,
-					setBlueprintDeeplinkWarnings: mockSetBlueprintDeeplinkWarnings,
+					setBlueprintWarnings: mockSetBlueprintWarnings,
 					setBlueprintSuggestedDomain: mockSetBlueprintSuggestedDomain,
 					setBlueprintSuggestedHttps: mockSetBlueprintSuggestedHttps,
 					setBlueprintSuggestedSiteName: mockSetBlueprintSuggestedSiteName,
@@ -96,7 +96,7 @@ describe( 'useBlueprintDeeplink', () => {
 				blueprint: mockBlueprintData,
 			} )
 		);
-		expect( mockSetBlueprintDeeplinkWarnings ).toHaveBeenCalledWith( [] );
+		expect( mockSetBlueprintWarnings ).toHaveBeenCalledWith( [] );
 		expect( mockSetIsDeeplinkFlow ).toHaveBeenCalledWith( true );
 	} );
 

src/modules/add-site/hooks/use-blueprint-deeplink.ts

@@ -20,7 +20,7 @@ interface UseBlueprintDeeplinkOptions {
 	setPhpVersion: ( version: string ) => void;
 	setWpVersion: ( version: string ) => void;
 	setBlueprintPreferredVersions: ( versions: BlueprintPreferredVersions | undefined ) => void;
-	setBlueprintDeeplinkWarnings: ( warnings: BlueprintValidationWarning[] | undefined ) => void;
+	setBlueprintWarnings: ( warnings: BlueprintValidationWarning[] | undefined ) => void;
 	setBlueprintSuggestedDomain: ( domain: string | undefined ) => void;
 	setBlueprintSuggestedHttps: ( https: boolean | undefined ) => void;
 	setBlueprintSuggestedSiteName: ( name: string | undefined ) => void;
@@ -36,7 +36,7 @@ export function useBlueprintDeeplink( options: UseBlueprintDeeplinkOptions ): vo
 		setPhpVersion,
 		setWpVersion,
 		setBlueprintPreferredVersions,
-		setBlueprintDeeplinkWarnings,
+		setBlueprintWarnings,
 		setBlueprintSuggestedDomain,
 		setBlueprintSuggestedHttps,
 		setBlueprintSuggestedSiteName,
@@ -97,7 +97,7 @@ export function useBlueprintDeeplink( options: UseBlueprintDeeplinkOptions ): vo
 						setBlueprintSuggestedSiteName( formValues.siteName );
 					}
 
-					setBlueprintDeeplinkWarnings( warnings );
+					setBlueprintWarnings( warnings );
 					setIsDeeplinkFlow( true );
 					onModalOpen?.();
 				} catch ( error ) {
@@ -110,7 +110,7 @@ export function useBlueprintDeeplink( options: UseBlueprintDeeplinkOptions ): vo
 				setPhpVersion,
 				setWpVersion,
 				setBlueprintPreferredVersions,
-				setBlueprintDeeplinkWarnings,
+				setBlueprintWarnings,
 				setBlueprintSuggestedDomain,
 				setBlueprintSuggestedHttps,
 				setBlueprintSuggestedSiteName,

src/modules/add-site/hooks/use-stepper.ts

@@ -16,11 +16,13 @@ interface StepperStep {
 
 interface StepperConfig {
 	onBlueprintContinue?: () => void;
+	onBlueprintDetailsContinue?: () => void;
 	onBlueprintDeeplinkContinue?: () => void;
 	onBackupContinue?: () => void;
 	onPullRemoteContinue?: () => void;
 	onCreateSubmit?: ( event: FormEvent ) => void;
 	canSubmitBlueprint?: boolean;
+	canSubmitBlueprintDetails?: boolean;
 	canSubmitBlueprintDeeplink?: boolean;
 	canSubmitBackup?: boolean;
 	canSubmitPullRemote?: boolean;
@@ -51,6 +53,11 @@ export function useStepper( config?: StepperConfig ): UseStepper {
 	const stepperContext = useMemo( (): StepperContext | null => {
 		const blueprintSteps: StepperStep[] = [
 			{ id: 'choose-blueprint', label: __( 'Choose Blueprint' ), path: '/blueprint/select' },
+			{
+				id: 'blueprint-details',
+				label: __( 'Blueprint details' ),
+				path: '/blueprint/select/details',
+			},
 			{ id: 'site-details', label: __( 'Site name & details' ), path: '/blueprint/select/create' },
 		];
 
@@ -167,6 +174,7 @@ export function useStepper( config?: StepperConfig ): UseStepper {
 
 		switch ( location.path ) {
 			case '/blueprint/select':
+			case '/blueprint/select/details':
 			case '/blueprint/deeplink':
 			case '/backup':
 			case '/pullRemote':
@@ -196,6 +204,9 @@ export function useStepper( config?: StepperConfig ): UseStepper {
 			case '/blueprint/select':
 				config?.onBlueprintContinue?.();
 				break;
+			case '/blueprint/select/details':
+				config?.onBlueprintDetailsContinue?.();
+				break;
 			case '/blueprint/deeplink':
 				config?.onBlueprintDeeplinkContinue?.();
 				break;
@@ -222,6 +233,8 @@ export function useStepper( config?: StepperConfig ): UseStepper {
 		switch ( location.path ) {
 			case '/blueprint/select':
 				return config?.canSubmitBlueprint ?? false;
+			case '/blueprint/select/details':
+				return config?.canSubmitBlueprintDetails ?? false;
 			case '/blueprint/deeplink':
 				return config?.canSubmitBlueprintDeeplink ?? false;
 			case '/backup':