Press2 1562 sitegen editor step regenerate

src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js

@@ -49,7 +49,6 @@ const SiteGenHeader = () => {
 					) }
 				</>
 			</Fill>
-
 			<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_START }` }>
 				<>{ isHeaderNavigationEnabled && <StepNavigation /> }</>
 			</Fill>

src/OnboardingSPA/components/Header/stylesheet.scss

@@ -121,18 +121,16 @@ $nfd-onboarding-editor-header-hover: #272d30;
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		gap: 8px;
+		text-align: left;
 		cursor: pointer;
 		height: 36px;
-		background-color: var(--nfd-onboarding-navigation-back-background);
+		border-radius: 6px;
 		color: var(--nfd-onboarding-primary);
 		fill: var(--nfd-onboarding-primary);
-		border-radius: 6px;
 
-		&:hover {
-			background-color: var(--nfd-onboarding-primary);
-			color: $nfd-onboarding-editor-header-hover;
-			fill: $nfd-onboarding-editor-header-hover;
+		&__favourite {
+			display: flex;
+			align-items: center;
 		}
 	}
 

src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js

@@ -48,25 +48,36 @@ const SitegenEditorPatternsSidebar = () => {
 	};
 
 	const handlePreview = ( slug ) => {
-		if ( ! ( slug in homepages ) ) {
+		const index = homepages.findIndex(
+			( homepage ) => homepage.slug === slug
+		);
+
+		if ( index === -1 ) {
 			return false;
 		}
-		const homepagesCopy = { ...homepages };
-		homepagesCopy[ slug ].active = ! homepagesCopy[ slug ].active;
-		currentData.sitegen.homepages.active = homepagesCopy[ slug ];
-		setActiveHomepage( homepagesCopy[ slug ] );
+
+		const homepagesCopy = [ ...homepages ];
+		homepagesCopy[ index ].active = ! homepagesCopy[ index ].active;
+		currentData.sitegen.homepages.active = homepagesCopy[ index ];
+
+		setActiveHomepage( homepagesCopy[ index ] );
 		setHomepages( homepagesCopy );
 		setCurrentOnboardingData( currentData );
 	};
 
 	const handleFavorite = ( slug ) => {
-		if ( ! ( slug in homepages ) ) {
+		const index = homepages.findIndex(
+			( homepage ) => homepage.slug === slug
+		);
+		if ( index === -1 ) {
 			return false;
 		}
 
-		const homepagesCopy = { ...homepages };
+		const homepagesCopy = [ ...homepages ];
+
+		homepagesCopy[ index ].isFavourited =
+			! homepagesCopy[ index ].isFavourited;
 
-		homepagesCopy[ slug ].favorite = ! homepagesCopy[ slug ].favorite;
 		setHomepages( homepagesCopy );
 		currentData.sitegen.homepages.data = homepagesCopy;
 		setCurrentOnboardingData( currentData );
@@ -155,7 +166,7 @@ const SitegenEditorPatternsSidebar = () => {
 							<div className="nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context">
 								<div
 									className={ `nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context__icon ${
-										data.favorite &&
+										data.isFavourited &&
 										'nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context__icon__fill'
 									}` }
 									role="button"
@@ -262,7 +273,7 @@ const SitegenEditorPatternsSidebar = () => {
 															<div className="nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context">
 																<div
 																	className={ `nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context__icon ${
-																		data.favorite &&
+																		data.isFavourited &&
 																		'nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context__icon__fill'
 																	}` }
 																	role="button"
@@ -317,7 +328,7 @@ const SitegenEditorPatternsSidebar = () => {
 												( homepage ) => {
 													const data =
 														homepages[ homepage ];
-													if ( ! data.favorite ) {
+													if ( ! data.isFavourited ) {
 														return false;
 													}
 													const newPreviewSettings =

src/OnboardingSPA/steps/SiteGen/Editor/Header/TextInput/index.js

@@ -3,7 +3,8 @@ import { useRef, useEffect } from '@wordpress/element';
 const TextInputVersion = ( {
 	isInputDisabled,
 	versionName,
-	setVersionName,
+	handleVersionRename,
+	handleRenameOnBlur,
 } ) => {
 	const inputRef = useRef( null );
 
@@ -13,8 +14,10 @@ const TextInputVersion = ( {
 		}
 	}, [ isInputDisabled ] );
 
-	const handleTextChange = ( e ) => {
-		setVersionName( e.target.value );
+	const onInputBlurHandler = () => {
+		if ( handleRenameOnBlur ) {
+			handleRenameOnBlur( inputRef.current.value );
+		}
 	};
 
 	return (
@@ -24,7 +27,8 @@ const TextInputVersion = ( {
 			disabled={ isInputDisabled }
 			type="text"
 			value={ versionName }
-			onChange={ handleTextChange }
+			onChange={ handleVersionRename }
+			onBlur={ onInputBlurHandler }
 		/>
 	);
 };

src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import { Fill, Dropdown } from '@wordpress/components';
+import { Fill } from '@wordpress/components';
 import {
 	HEADER_CENTER,
 	HEADER_END,
@@ -8,20 +8,24 @@ import {
 	wpEditorPage,
 	SIDEBAR_SITEGEN_EDITOR_PATTERNS,
 } from '../../../../../constants';
-import { Icon, chevronDown, chevronRight } from '@wordpress/icons';
+import { Icon, chevronRight } from '@wordpress/icons';
 import { store as nfdOnboardingStore } from '../../../../store';
 
 import { useSelect, useDispatch } from '@wordpress/data';
 
 import { useEffect, useState } from '@wordpress/element';
-import { getRandom } from '../../../../data/sitegen/homepages/homepages';
 import { setFlow, completeFlow } from '../../../../utils/api/flow';
 import Spinner from '../../../../components/Loaders/Spinner';
+import { getRegeneratedHomePagePreviews } from '../../../../utils/api/siteGen';
+import StepNavigationCenter from './step-navigation-center';
+import { useViewportMatch } from '@wordpress/compose';
 
 const StepSiteGenEditorHeader = () => {
 	const [ homepage, setHomepage ] = useState();
 	const [ isSaving, setIsSaving ] = useState( false );
 
+	const isLargeViewport = useViewportMatch( 'medium' );
+
 	const {
 		setCurrentOnboardingData,
 		setSidebarActiveView,
@@ -42,20 +46,46 @@ const StepSiteGenEditorHeader = () => {
 		if ( isSaving ) {
 			return;
 		}
-		homepage.favorite = ! homepage.favorite;
+		homepage.isFavourited = ! homepage.isFavourited;
 		currentData.sitegen.homepages.data[ homepage.slug ] = homepage;
 		setCurrentOnboardingData( currentData );
 	};
 
-	const handleRegenerate = () => {
+	const handleRegenerate = async () => {
 		if ( isSaving ) {
 			return;
 		}
-		const newPage = getRandom( { ...homepage } );
-		setHomepage( newPage );
-		currentData.sitegen.homepages.data[ newPage.slug ] = newPage;
-		currentData.sitegen.homepages.active = newPage;
-		setCurrentOnboardingData( currentData );
+		const { slug, colorPalattes, isFavourited } =
+			currentData?.sitegen?.homepages?.active || {};
+		try {
+			const response = await getRegeneratedHomePagePreviews(
+				currentData.sitegen.siteDetails.prompt,
+				true,
+				slug,
+				colorPalattes,
+				isFavourited
+			);
+
+			if ( response && response.body && response.body.length > 0 ) {
+				const regeneratedPage = response.body.find(
+					( page ) =>
+						! currentData.sitegen.homepages.data.some(
+							( existingPage ) => existingPage.slug === page.slug
+						)
+				);
+				setHomepage( regeneratedPage );
+				currentData.sitegen.homepages.data[ regeneratedPage.slug ] =
+					regeneratedPage;
+				currentData.sitegen.homepages.active = regeneratedPage;
+				setCurrentOnboardingData( currentData );
+			} else if ( response && response.error ) {
+				/* Handle Error UI state */
+			} else {
+				/* Handle Error UI state */
+			}
+		} catch ( error ) {
+			/* Handle Error UI state */
+		}
 	};
 
 	const saveAndContinue = async () => {
@@ -90,111 +120,59 @@ const StepSiteGenEditorHeader = () => {
 		<>
 			<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_START }` }>
 				<div className="nfd-onboarding-header--sitegen__editor__start">
-					<div
-						className={ `nfd-onboarding-header--sitegen__editor__start__regenerate ${
-							isSaving &&
-							'nfd-onboarding-header--sitegen__editor__start__regenerate__disabled'
-						}` }
-						role="button"
-						tabIndex={ 0 }
-						onClick={ () => handleRegenerate() }
-						onKeyDown={ () => handleRegenerate() }
-					>
-						<div
-							className={ `nfd-onboarding-header--sitegen__editor__start__regenerate__icon` }
-						></div>
+					{ isLargeViewport && (
 						<div
-							className={ `nfd-onboarding-header--sitegen__editor__start__regenerate__text` }
+							className={ `nfd-onboarding-header--sitegen__editor__start__regenerate ${
+								isSaving &&
+								'nfd-onboarding-header--sitegen__editor__start__regenerate__disabled'
+							}` }
+							role="button"
+							tabIndex={ 0 }
+							onClick={ () => handleRegenerate() }
+							onKeyDown={ () => handleRegenerate() }
 						>
-							{ __( 'Regenerate', 'wp-module-onboarding' ) }
+							<div
+								className={ `nfd-onboarding-header--sitegen__editor__start__regenerate__icon` }
+							></div>
+							<div
+								className={ `nfd-onboarding-header--sitegen__editor__start__regenerate__text` }
+							>
+								{ __( 'Regenerate', 'wp-module-onboarding' ) }
+							</div>
 						</div>
-					</div>
+					) }
 				</div>
 			</Fill>
 			<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_CENTER }` }>
 				{ homepage && (
 					<div className="nfd-onboarding-header--sitegen__editor__center">
-						<div className="nfd-onboarding-header--sitegen__editor__center__icon"></div>
-						<Dropdown
-							className="nfd-onboarding-header--sitegen__editor__center__dropdown"
-							renderToggle={ ( { onToggle } ) => {
-								return (
-									<>
-										<div
-											className={ `nfd-onboarding-header--sitegen__editor__center__dropdown__favorite-icon ${
-												homepage.favorite &&
-												'nfd-onboarding-header--sitegen__editor__center__dropdown__favorite-icon__fill'
-											}` }
-											role="button"
-											tabIndex={ 0 }
-											onKeyDown={ handleFavorite }
-											onClick={ handleFavorite }
-										></div>
-										<div
-											className="nfd-onboarding-header--sitegen__editor__center__dropdown__info"
-											role="button"
-											tabIndex={ 0 }
-											onKeyDown={ onToggle }
-											onClick={ onToggle }
-										>
-											<p className="nfd-onboarding-header--sitegen__editor__center__dropdown__info__text">
-												{ homepage.title }
-											</p>
-											<Icon
-												className="nfd-onboarding-header--sitegen__editor__center__dropdown__info__down-icon"
-												icon={ chevronDown }
-											/>
-										</div>
-									</>
-								);
-							} }
-							renderContent={ () => (
-								<div
-									className={ `nfd-onboarding-header--sitegen__editor__center__dropdown__content ${
-										isSaving &&
-										'nfd-onboarding-header--sitegen__editor__center__dropdown__content__disabled'
-									}` }
-								>
-									<p className="nfd-onboarding-header--sitegen__editor__center__dropdown__content__rename">
-										{ __(
-											'Rename',
-											'wp-module-onboarding'
-										) }
-									</p>
-									<div
-										className="nfd-onboarding-header--sitegen__editor__center__dropdown__content__view-all"
-										onClick={ handleViewAll }
-										role="button"
-										tabIndex={ 0 }
-										onKeyDown={ handleViewAll }
-									>
-										{ __(
-											'View All',
-											'wp-module-onboarding'
-										) }
-									</div>
-								</div>
-							) }
+						<StepNavigationCenter
+							handleFavorite={ handleFavorite }
+							handleViewAll={ handleViewAll }
+							handleCustomize={ handleCustomize }
+							handleRegenerate={ handleRegenerate }
 						/>
 					</div>
 				) }
 			</Fill>
 			<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_END }` }>
 				<div className="nfd-onboarding-header--sitegen__editor__end">
-					<div
-						className={ `nfd-onboarding-header--sitegen__editor__end__customize-button ${
-							isSaving &&
-							'nfd-onboarding-header--sitegen__editor__end__customize-button__disabled'
-						}` }
-						onClick={ handleCustomize }
-						onKeyDown={ handleCustomize }
-						role="presentation"
-					>
-						<div className="nfd-onboarding-header--sitegen__editor__end__customize-button__icon"></div>
-						<div className="nfd-onboarding-header--sitegen__editor__end__customize-button__text">
-							{ __( 'Customize', 'wp-module-onboarding' ) }
+					{ isLargeViewport && (
+						<div
+							className={ `nfd-onboarding-header--sitegen__editor__end__customize-button ${
+								isSaving &&
+								'nfd-onboarding-header--sitegen__editor__end__customize-button__disabled'
+							}` }
+							onClick={ handleCustomize }
+							onKeyDown={ handleCustomize }
+							role="presentation"
+						>
+							<div className="nfd-onboarding-header--sitegen__editor__end__customize-button__icon"></div>
+							<div className="nfd-onboarding-header--sitegen__editor__end__customize-button__text">
+								{ __( 'Customize', 'wp-module-onboarding' ) }
+							</div>
 						</div>
-					</div>
+					) }
 					<div className="nfd-onboarding-header--sitegen__editor__end__save-button">
 						<div
 							className="nfd-onboarding-header--sitegen__editor__end__save-button__text"
@@ -203,7 +181,12 @@ const StepSiteGenEditorHeader = () => {
 							tabIndex={ 0 }
 							onKeyDown={ saveAndContinue }
 						>
-							{ __( 'Save & Continue', 'wp-module-onboarding' ) }
+							{ isLargeViewport
+								? __(
+									'Save & Continue',
+									'wp-module-onboarding'
+								)
+								: __( 'Next', 'wp-module-onboarding' ) }
 						</div>
 						{ isSaving ? (
 							<Spinner