Press2 1233 new modern layout component

src/OnboardingSPA/chapters/demographic.js

@@ -6,6 +6,7 @@ import { stepExperience } from '../steps/GetStarted/GetStartedExperience/step';
 import { stepPrimarySetup } from '../steps/GetStarted/SiteTypeSetup/PrimarySite/step';
 import { stepSecondarySetup } from '../steps/GetStarted/SiteTypeSetup/SecondarySite/step';
 import { stepTopPriority } from '../steps/TopPriority/step';
+import { stepSiteGenGetStarted } from '../steps/SiteGenGetStarted/step';
 import { Chapter } from '../data/models/Chapter';
 import { Step } from '../data/models/Step';
 import ChapterInterstitialLoader from '../components/Loaders/Chapter/Interstitial';
@@ -22,6 +23,7 @@ const steps = [
 	stepSecondarySetup,
 	stepBasicInfo,
 	stepTopPriority,
+	stepSiteGenGetStarted,
 ];
 
 export const demographic = new Chapter( {

src/OnboardingSPA/components/AdminBarSiteGen/index.js

@@ -0,0 +1,30 @@
+import { __ } from '@wordpress/i18n';
+import { Icon, wordpress } from '@wordpress/icons';
+
+const AdminBarSiteGen = ( {} ) => {
+	return (
+		<div className="nfd-sitegen-admin-bar">
+			<div className="nfd-admin-bar-wplogo">
+				<Icon icon={ wordpress } />
+				<span>{ __( 'WordPress', 'wp-module-onboarding' ) }</span>
+			</div>
+			<div className="nfd-sitegen-admin-bar-profile">
+				<span className="nfd-admin-bar-greeting">
+					Howdy, Maya Jiménez
+				</span>
+				<img
+					alt=""
+					src="http://1.gravatar.com/avatar/729ae85bf62b9917e93538db2f2688ca?s=26&amp;d=mm&amp;r=g"
+					srcSet="http://1.gravatar.com/avatar/729ae85bf62b9917e93538db2f2688ca?s=52&amp;d=mm&amp;r=g 2x"
+					className="avatar avatar-26 photo"
+					height="20"
+					width="20"
+					loading="lazy"
+					decoding="async"
+				></img>
+			</div>
+		</div>
+	);
+};
+
+export default AdminBarSiteGen;

src/OnboardingSPA/components/AdminBarSiteGen/stylesheet.scss

@@ -0,0 +1,37 @@
+.nfd-interface-interface-skeleton__adminbar {
+
+	.nfd-sitegen-admin-bar {
+		padding: 5px;
+		background-color: #23282d; // Dark grayish background
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.nfd-admin-bar-wplogo {
+			color: #fff; // Logo color
+			font-size: 16px;
+			display: flex;
+			align-items: center;
+
+			svg {
+				color: #a0a5aa;
+				fill: #a0a5aa;
+			}
+
+			span {
+				margin-left: 15px;
+			}
+		}
+
+		.nfd-sitegen-admin-bar-profile {
+			display: flex;
+			align-items: center;
+
+			.nfd-admin-bar-greeting {
+				color: #a0a5aa; // Text color
+				font-size: 16px;
+				margin-right: 5px;
+			}
+		}
+	}
+}

src/OnboardingSPA/components/AppSiteGen/index.js

@@ -0,0 +1,78 @@
+import Content from '../Content';
+import Header from '../HeaderSiteGen';
+import ToggleDarkMode from '../ToggleDarkMode';
+import AdminBarSiteGen from '../AdminBarSiteGen';
+import ProgressBarSiteGen from '../ProgressBarSiteGen';
+import classNames from 'classnames';
+import { useLocation } from 'react-router-dom';
+
+import { store as nfdOnboardingStore } from '../../store';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { kebabCase } from 'lodash';
+import { useViewportMatch } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { SlotFillProvider } from '@wordpress/components';
+import { useEffect, Fragment } from '@wordpress/element';
+import { FullscreenMode } from '@wordpress/interface';
+import SiteGenInterfaceSkeleton from '../SiteGenInterfaceSkeleton';
+
+const AppSiteGen = () => {
+	const location = useLocation();
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const pathname = kebabCase( location.pathname );
+
+	const { isDrawerOpen, newfoldBrand, onboardingFlow } = useSelect(
+		( select ) => {
+			return {
+				newfoldBrand: select( nfdOnboardingStore ).getNewfoldBrand(),
+				onboardingFlow:
+					select( nfdOnboardingStore ).getOnboardingFlow(),
+				currentData:
+					select( nfdOnboardingStore ).getCurrentOnboardingData(),
+				allSteps: select( nfdOnboardingStore ).getAllSteps(),
+			};
+		},
+		[ location.pathname ]
+	);
+
+	const { setActiveStep, setActiveFlow } = useDispatch( nfdOnboardingStore );
+
+	useEffect( () => {
+		document.body.classList.add( `nfd-brand-${ newfoldBrand }` );
+	}, [ newfoldBrand ] );
+
+	useEffect( () => {
+		if ( location.pathname.includes( '/step' ) ) {
+			setActiveFlow( onboardingFlow );
+			setActiveStep( location.pathname );
+		}
+	}, [ location.pathname, onboardingFlow ] );
+
+	return (
+		<Fragment>
+			<FullscreenMode isActive={ true } />
+			<SlotFillProvider>
+				<SiteGenInterfaceSkeleton
+					className={ classNames(
+						'nfd-onboarding-skeleton',
+						'nfd-sitegen-skeleton',
+						`brand-${ newfoldBrand }`,
+						`path-${ pathname }`,
+						{ 'is-drawer-open': isDrawerOpen },
+						{ 'is-large-viewport': isLargeViewport },
+						{ 'is-small-viewport': ! isLargeViewport }
+					) }
+					adminbar={ <AdminBarSiteGen /> }
+					progressbar={
+						<ProgressBarSiteGen current={ 20 } total={ 100 } />
+					}
+					header={ <Header /> }
+					content={ <Content /> }
+					darkModeToggle={ <ToggleDarkMode /> }
+				/>
+			</SlotFillProvider>
+		</Fragment>
+	);
+};
+
+export default AppSiteGen;

src/OnboardingSPA/components/HeaderSiteGen/index.js

@@ -0,0 +1,13 @@
+import { memo } from '@wordpress/element';
+
+import StepNavigation from './step-navigation';
+
+const Header = () => {
+	return (
+		<div className="nfd-onboarding-header">
+			<StepNavigation />
+		</div>
+	);
+};
+
+export default memo( Header );

src/OnboardingSPA/components/HeaderSiteGen/step-navigation.js

@@ -0,0 +1,151 @@
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useNavigate } from 'react-router-dom';
+import { Button, ButtonGroup } from '@wordpress/components';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+import { setFlow } from '../../utils/api/flow';
+import { store as nfdOnboardingStore } from '../../store';
+import { pluginDashboardPage } from '../../../constants';
+import { activateInitialPlugins } from '../../utils/api/plugins';
+import {
+	OnboardingEvent,
+	sendOnboardingEvent,
+} from '../../utils/analytics/hiive';
+import { ACTION_ONBOARDING_COMPLETE } from '../../utils/analytics/hiive/constants';
+
+/**
+ * Back step Navigation button.
+ *
+ * @param {*} param0
+ *
+ * @return {WPComponent} Back Component
+ */
+const Back = ( { path, showErrorDialog } ) => {
+	const { setNavErrorContinuePath } = useDispatch( nfdOnboardingStore );
+	const navigate = useNavigate();
+	const navigateBack = () => {
+		if ( showErrorDialog !== false ) {
+			setNavErrorContinuePath( path );
+		} else {
+			navigate( path, { state: { origin: 'header' } } );
+		}
+	};
+	return (
+		<Button
+			className="navigation-buttons navigation-buttons_back"
+			onClick={ navigateBack }
+			variant="secondary"
+		>
+			<Icon icon={ chevronLeft } />
+			{ __( 'Back', 'wp-module-onboarding' ) }
+		</Button>
+	);
+};
+
+/**
+ * Next step naigation button
+ *
+ * @param {*} param0
+ *
+ * @return {WPComponent} Next Component
+ */
+const Next = ( { path, showErrorDialog } ) => {
+	const { setNavErrorContinuePath } = useDispatch( nfdOnboardingStore );
+	/* [TODO]: some sense of isStepComplete to enable/disable */
+	const navigate = useNavigate();
+	const navigateNext = () => {
+		if ( showErrorDialog !== false ) {
+			setNavErrorContinuePath( path );
+		} else {
+			navigate( path, { state: { origin: 'header' } } );
+		}
+	};
+	return (
+		<Button
+			onClick={ navigateNext }
+			variant="primary"
+			className="navigation-buttons navigation-buttons_next"
+		>
+			{ __( 'Next', 'wp-module-onboarding' ) }
+			<Icon icon={ chevronRight } />
+		</Button>
+	);
+};
+
+async function saveDataAndExit( currentData ) {
+	if ( currentData ) {
+		currentData.isComplete = new Date().getTime();
+		setFlow( currentData );
+	}
+
+	activateInitialPlugins();
+	sendOnboardingEvent( new OnboardingEvent( ACTION_ONBOARDING_COMPLETE ) );
+	window.location.replace( pluginDashboardPage );
+}
+
+/**
+ * Finish step navigation button.
+ *
+ * @param {*} param0
+ *
+ * @return {WPComponent} Finish Component
+ */
+const Finish = ( { currentData, saveDataAndExitFunc } ) => (
+	<Button
+		onClick={ () => saveDataAndExitFunc( currentData ) }
+		className="navigation-buttons navigation-buttons_finish"
+		variant="primary"
+	>
+		{ __( 'Finish', 'wp-module-onboarding' ) }
+		<Icon icon={ chevronRight } />
+	</Button>
+);
+
+/**
+ * Step buttons presented in Header.
+ *
+ * @return {WPComponent} StepNavigation Component
+ */
+const StepNavigation = () => {
+	const { previousStep, nextStep, currentData, showErrorDialog } = useSelect(
+		( select ) => {
+			return {
+				nextStep: select( nfdOnboardingStore ).getNextStep(),
+				previousStep: select( nfdOnboardingStore ).getPreviousStep(),
+				currentData:
+					select( nfdOnboardingStore ).getCurrentOnboardingData(),
+				showErrorDialog:
+					select( nfdOnboardingStore ).getShowErrorDialog(),
+			};
+		},
+		[]
+	);
+	const isFirstStep = null === previousStep || false === previousStep;
+	const isLastStep = null === nextStep || false === nextStep;
+	return (
+		<div className="nfd-onboarding-header__step-navigation">
+			<ButtonGroup style={ { display: 'flex', columnGap: '0.5rem' } }>
+				{ isFirstStep || isLastStep ? null : (
+					<Back
+						path={ previousStep.path }
+						showErrorDialog={ showErrorDialog }
+					/>
+				) }
+				{ isLastStep ? (
+					<Finish
+						currentData={ currentData }
+						saveDataAndExitFunc={ saveDataAndExit }
+					/>
+				) : (
+					<Next
+						path={ nextStep.path }
+						showErrorDialog={ showErrorDialog }
+					/>
+				) }
+			</ButtonGroup>
+		</div>
+	);
+};
+
+export default StepNavigation;