Favorites, regeneration and maintaining state for previews

src/OnboardingSPA/components/Header/index.js

@@ -9,18 +9,22 @@ import {
 	HEADER_START,
 	HEADER_TOP,
 } from '../../../constants';
+import classNames from 'classnames';
+import { stepSiteGenEditor } from '../../steps/SiteGen/Editor/step';
 
 const Header = () => {
-	const { headers, headerActiveView, isHeaderEnabled } = useSelect(
-		( select ) => {
+	const { headers, headerActiveView, isHeaderEnabled, currentStep } =
+		useSelect( ( select ) => {
 			return {
 				headers: select( nfdOnboardingStore ).getHeaders(),
 				headerActiveView:
 					select( nfdOnboardingStore ).getHeaderActiveView(),
 				isHeaderEnabled: select( nfdOnboardingStore ).isHeaderEnabled(),
+				currentStep: select( nfdOnboardingStore ).getCurrentStep(),
 			};
-		}
-	);
+		} );
+
+	const isEditorStep = currentStep === stepSiteGenEditor;
 
 	return (
 		<>
@@ -35,7 +39,11 @@ const Header = () => {
 			</Suspense>
 			<Slot name={ `${ headerActiveView }/${ HEADER_TOP }` } />
 			{ isHeaderEnabled && (
-				<div className="nfd-onboarding-header">
+				<div
+					className={ classNames( 'nfd-onboarding-header', {
+						'nfd-onboarding-header--dark': isEditorStep,
+					} ) }
+				>
 					<div className="nfd-onboarding-header__start">
 						<Slot
 							name={ `${ headerActiveView }/${ HEADER_START }` }

src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js

@@ -0,0 +1,112 @@
+import { Icon, search } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+import { LivePreview } from '..';
+
+const LivePreviewSiteGenCard = ( {
+	className = 'nfd-onboarding-live-preview--sitegen-card',
+	slug,
+	title,
+	blockGrammer,
+	styling,
+	isFavorite = false,
+	viewportWidth,
+	previewSettings,
+	skeletonLoadingTime = 2500,
+	onFavorite,
+	onRegenerate,
+	onPreview,
+} ) => {
+	const handleFavorite = () => {
+		if ( typeof onFavorite === 'function' ) {
+			return onFavorite( slug );
+		}
+
+		return false;
+	};
+
+	const handleRegenerate = () => {
+		if ( typeof onRegenerate === 'function' ) {
+			return onRegenerate( slug );
+		}
+
+		return false;
+	};
+
+	const handlePreview = () => {
+		if ( typeof onPreview === 'function' ) {
+			return onPreview( slug );
+		}
+
+		return false;
+	};
+	return (
+		<div className={ className }>
+			<div className={ `${ className }__live-preview-container` }>
+				<LivePreview
+					styling={ styling }
+					blockGrammer={ blockGrammer }
+					viewportWidth={ viewportWidth }
+					previewSettings={ previewSettings }
+					skeletonLoadingTime={ skeletonLoadingTime }
+				/>
+				<div
+					className={ `${ className }__live-preview-container__overlay` }
+					role="button"
+					tabIndex={ 0 }
+					onClick={ () => handlePreview( slug ) }
+					onKeyDown={ () => handlePreview( slug ) }
+				>
+					<div
+						className={ `${ className }__live-preview-container__overlay__preview-button` }
+					>
+						<Icon
+							icon={ search }
+							className={ `${ className }__live-preview-container__overlay__preview-button__icon` }
+						></Icon>
+						<p
+							className={ `${ className }__live-preview-container__overlay__preview-button__text` }
+						>
+							{ __( 'Preview', 'wp-module-onboarding' ) }
+						</p>
+					</div>
+				</div>
+			</div>
+			<div className={ `${ className }__buttons` }>
+				<div className={ `${ className }__buttons__favorite` }>
+					<div
+						className={ `${ className }__buttons__favorite__icon ${
+							isFavorite &&
+							`${ className }__buttons__favorite__icon__fill`
+						}` }
+						role="button"
+						tabIndex={ 0 }
+						onClick={ () => handleFavorite() }
+						onKeyDown={ () => handleFavorite() }
+					/>
+					<div
+						className={ `${ className }__buttons__favorite__text` }
+					>
+						{ title }
+					</div>
+				</div>
+				<div className={ `${ className }__buttons__regenerate` }>
+					<div
+						className={ `${ className }__buttons__regenerate__icon` }
+						role="button"
+						tabIndex={ 0 }
+						onClick={ () => handleRegenerate() }
+						onKeyDown={ () => handleRegenerate() }
+					></div>
+					<div
+						className={ `${ className }__buttons__regenerate__text` }
+					>
+						{ __( 'Regenerate', 'wp-module-onboarding' ) }
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default LivePreviewSiteGenCard;

src/OnboardingSPA/components/LivePreview/SiteGenCard/stylesheet.scss

@@ -0,0 +1,123 @@
+.nfd-onboarding-live-preview {
+
+	&--sitegen-card {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+
+		&__live-preview-container {
+			position: relative;
+			width: 90%;
+			overflow: hidden;
+			align-items: center;
+			border-radius: 8px;
+
+			&:hover {
+				cursor: pointer;
+			}
+
+			&__overlay {
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				height: 100%;
+				z-index: 2;
+				width: 100%;
+				opacity: 0;
+				transition: 0.5s ease;
+				background-color: rgba(0, 0, 0, 1);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				&__preview-button {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					width: 250px;
+					height: 30px;
+					z-index: 9999;
+					border-radius: 12px;
+					background-color: var(--nfd-onboarding-primary);
+					opacity: 1;
+
+					&__icon {
+						fill: var(--nfd-onboarding-secondary);
+						font-size: 20px;
+						height: 20px;
+						width: 20px;
+						text-align: center;
+					}
+				}
+
+				&:hover {
+					cursor: pointer;
+					opacity: 0.74;
+				}
+			}
+
+			.live-preview {
+
+				&__container {
+
+					&-custom {
+						width: 100%;
+						overflow: hidden;
+						height: 300px;
+					}
+				}
+			}
+
+		}
+
+		&__buttons {
+			width: 90%;
+			color: var(--nfd-onboarding-primary);
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			padding: 16px;
+
+			&__favorite {
+				display: flex;
+				flex-direction: row;
+				justify-content: center;
+				align-items: center;
+
+				&__icon {
+					width: 20px;
+					height: 21px;
+					margin-right: 12px;
+					cursor: pointer;
+					background-image: var(--sitegen-favorite);
+
+					&__fill {
+						background-image: var(--sitegen-favorite-filled);
+					}
+
+				}
+
+			}
+
+			&__regenerate {
+				display: flex;
+				flex-direction: row;
+				justify-content: center;
+				align-items: center;
+				cursor: pointer;
+
+				&__icon {
+					background-image: var(--sitegen-regenerate);
+					width: 16px;
+					height: 18px;
+					margin-right: 12px;
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,61 @@
+import { Fill, PanelBody, PanelHeader, Button } from '@wordpress/components';
+import { Fragment, memo, Suspense } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+import { store as nfdOnboardingStore } from '../../../../store';
+import {
+	SIDEBAR_SITEGEN_EDITOR_PATTERNS,
+	SIDEBAR_SLOTFILL_PREFIX,
+} from '../../../../../constants';
+
+const SitegenEditorPatternsSidebar = () => {
+	const { currentStep } = useSelect( ( select ) => {
+		return {
+			currentStep: select( nfdOnboardingStore ).getCurrentStep(),
+		};
+	} );
+
+	const { setIsSidebarOpened } = useDispatch( nfdOnboardingStore );
+
+	const closeSideBar = () => {
+		setIsSidebarOpened( false );
+	};
+	return (
+		<Fill
+			name={ `${ SIDEBAR_SLOTFILL_PREFIX }/${ SIDEBAR_SITEGEN_EDITOR_PATTERNS }` }
+		>
+			<PanelBody
+				className="nfd-onboarding-sidebar--sitegen-editor-patterns"
+				initialOpen={ true }
+			>
+				<Suspense fallback={ <></> }>
+					<PanelHeader
+						label={ __( 'Learn More', 'wp-module-onboarding' ) }
+					>
+						<div className="nfd-onboarding-sidebar--sitegen-editor-patterns__header">
+							<Button
+								className="nfd-onboarding-sidebar--sitegen-editor-patterns__header__icon"
+								onClick={ closeSideBar }
+								icon={ closeSmall }
+							></Button>
+						</div>
+					</PanelHeader>
+					{ currentStep?.sidebars?.LearnMore &&
+						currentStep?.sidebars?.LearnMore.SidebarComponents.map(
+							( SidebarComponent, index ) => {
+								return (
+									<Fragment key={ index }>
+										<SidebarComponent />
+									</Fragment>
+								);
+							}
+						) }
+				</Suspense>
+			</PanelBody>
+		</Fill>
+	);
+};
+
+export default memo( SitegenEditorPatternsSidebar );

src/OnboardingSPA/data/sidebars/index.js

@@ -1,6 +1,9 @@
 import { lazy } from '@wordpress/element';
 
-import { SIDEBAR_LEARN_MORE } from '../../../constants';
+import {
+	SIDEBAR_LEARN_MORE,
+	SIDEBAR_SITEGEN_EDITOR_PATTERNS,
+} from '../../../constants';
 
 const LearnMoreMenu = lazy( () =>
 	import( '../../components/Sidebar/components/LearnMore/Menu' )
@@ -9,11 +12,23 @@ const LearnMoreSidebar = lazy( () =>
 	import( '../../components/Sidebar/components/LearnMore/Sidebar' )
 );
 
+const SitegenEditorPatternsSidebar = lazy( () =>
+	import(
+		'../../components/Sidebar/components/SitegenEditorPatterns/Sidebar'
+	)
+);
+
 export const sidebars = [
 	{
 		id: SIDEBAR_LEARN_MORE,
 		menu: LearnMoreMenu,
 		sidebar: LearnMoreSidebar,
 		enabled: true,
 	},
+	{
+		id: SIDEBAR_SITEGEN_EDITOR_PATTERNS,
+		menu: SitegenEditorPatternsSidebar,
+		sidebar: SitegenEditorPatternsSidebar,
+		enabled: true,
+	},
 ];

src/OnboardingSPA/data/sitegen/homepages/homepages.js

@@ -0,0 +1,22 @@
+import { getRandomColorPalette } from '../sitemeta/siteMeta';
+import one from './1.json';
+import two from './2.json';
+import three from './3.json';
+import four from './4.json';
+const getHomepages = () => {
+	return [ one, two, three ];
+};
+
+const getRandom = ( homepage ) => {
+	if ( homepage?.favorite ) {
+		homepage.slug = homepage.slug + '-copy';
+		homepage.title = homepage.title + ' Copy';
+		homepage.favorite = false;
+		homepage.color = getRandomColorPalette( homepage?.color?.slug );
+		return homepage;
+	}
+	four.color = getRandomColorPalette( homepage?.color?.slug );
+	return four;
+};
+
+export { getHomepages, getRandom };