Minor dark mode fixes and slot filled footers

src/OnboardingSPA/components/Footer/components/SiteGenFooter/index.js

@@ -0,0 +1,15 @@
+import { Fill } from '@wordpress/components';
+import { FOOTER_SITEGEN, FOOTER_START } from '../../../../../constants';
+import ToggleDarkMode from '../../../ToggleDarkMode';
+
+const SiteGenFooter = () => {
+	return (
+		<>
+			<Fill name={ `${ FOOTER_SITEGEN }/${ FOOTER_START }` }>
+				<ToggleDarkMode />
+			</Fill>
+		</>
+	);
+};
+
+export default SiteGenFooter;

src/OnboardingSPA/components/Footer/index.js

@@ -0,0 +1,37 @@
+import { FOOTER_END, FOOTER_START } from '../../../constants';
+import { Slot } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { Fragment, Suspense } from '@wordpress/element';
+
+import { store as nfdOnboardingStore } from '../../store';
+
+const Footer = () => {
+	const { footers, footerActiveView } = useSelect( ( select ) => {
+		return {
+			footers: select( nfdOnboardingStore ).getFooters(),
+			footerActiveView:
+				select( nfdOnboardingStore ).getFooterActiveView(),
+		};
+	} );
+	return (
+		<div className={ 'nfd-onboarding-footer' }>
+			<Suspense fallback={ <Fragment /> }>
+				{ footers.map( ( footer ) => {
+					return (
+						<Fragment key={ footer.id }>
+							<footer.footer />
+						</Fragment>
+					);
+				} ) }
+			</Suspense>
+			<div className="nfd-onboarding-footer__start">
+				<Slot name={ `${ footerActiveView }/${ FOOTER_START }` } />
+			</div>
+			<div className="nfd-onboarding-footer__end">
+				<Slot name={ `${ footerActiveView }/${ FOOTER_END }` } />
+			</div>
+		</div>
+	);
+};
+
+export default Footer;

src/OnboardingSPA/components/Footer/stylesheet.scss

@@ -0,0 +1,22 @@
+.nfd-onboarding-footer {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	z-index: 1;
+
+	display: flex;
+	flex-direction: row;
+
+	height: auto;
+	width: 100%;
+	border: none;
+
+	&__end {
+		position: absolute;
+		right: 25px;
+	}
+
+	&--background {
+		background-color: rgba(var(--nfd-onboarding-secondary-rgb), 0.75);
+	}
+}

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js

@@ -2,7 +2,6 @@
 import Content from '../../Content';
 import Drawer from '../../Drawer';
 import Sidebar from '../../Sidebar';
-import ToggleDarkMode from '../../ToggleDarkMode';
 import classNames from 'classnames';
 import { useLocation } from 'react-router-dom';
 import { setFlow } from '../../../utils/api/flow';
@@ -55,6 +54,7 @@
 import { stepTheFork } from '../../../steps/TheFork/step';
 import { ThemeProvider } from '../../ThemeContextProvider';
 import themeToggleHOC from '../themeToggleHOC';
+import Footer from '../../Footer';
 
 const SiteBuild = () => {
 	const location = useLocation();
@@ -101,7 +101,7 @@
 					select( nfdOnboardingStore ).getPluginInstallHash(),
 			};
 		},
 		[ location.pathname ]
 	);
 
 	const [ isRequestPlaced, setIsRequestPlaced ] = useState( false );
@@ -364,7 +364,7 @@
 
 	useEffect( () => {
 		trackChapters();
 	}, [ currentStep ] );
 
 	const prioritizeFlow = () => {
 		const currentFlow = window.nfdOnboarding.currentFlow;
@@ -405,13 +405,13 @@
 			initializeSettings();
 			setInterval( cronTrigger, 45000 );
 		}
 	}, [ initialize ] );
 
 	useEffect( () => {
 		if ( false !== brandConfig?.prioritization ) {
 			return prioritizeFlow();
 		}
 	}, [ experienceLevel, topPriority ] );
 
 	useEffect( () => {
 		document.body.classList.add( `nfd-brand-${ newfoldBrand }` );
@@ -421,17 +421,17 @@
 		syncStoreToDB();
 		handlePreviousStepTracking();
 		handleConditionalDesignStepsRoutes();
 	}, [ location.pathname, onboardingFlow ] );
 
-	const shouldApplyTheme =
+	const isForkStep =
 		currentStep === stepTheFork ||
 		window.nfdOnboarding.currentFlow === 'sitegen';
 	// wrapping the NewfoldInterfaceSkeleton with the HOC to make 'theme' available
 	const ThemedNewfoldInterfaceSkeleton = themeToggleHOC(
 		NewfoldInterfaceSkeleton,
 		'nfd-onboarding-sitegen-dark',
 		'nfd-onboarding-sitegen-light',
-		shouldApplyTheme
+		isForkStep
 	);
 
 	return (
@@ -445,14 +445,14 @@
 					{ 'is-large-viewport': isLargeViewport },
 					{ 'is-small-viewport': ! isLargeViewport },
 					{
-						'nfd-onboarding-skeleton--sitegen': shouldApplyTheme,
+						'nfd-onboarding-skeleton--sitegen': isForkStep,
 					}
 				) }
 				header={ <Header /> }
 				drawer={ <Drawer /> }
 				content={ <Content /> }
 				sidebar={ <Sidebar /> }
-				footer={ shouldApplyTheme ? <ToggleDarkMode /> : null }
+				footer={ isForkStep ? <Footer /> : null }
 			/>
 		</ThemeProvider>
 	);

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js

@@ -7,14 +7,14 @@
 import Sidebar from '../../Sidebar';
 import themeToggleHOC from '../themeToggleHOC';
 import NewfoldInterfaceSkeleton from '../index';
-import ToggleDarkMode from '../../ToggleDarkMode';
 import { ThemeProvider } from '../../ThemeContextProvider';
 import { store as nfdOnboardingStore } from '../../../store';
 import { setFlow } from '../../../utils/api/flow';
 import {
 	generateSiteGenMeta,
 	getSiteGenIdentifiers,
 } from '../../../utils/api/siteGen';
+import Footer from '../../Footer';
 
 // Wrapping the NewfoldInterfaceSkeleton with the HOC to make theme available
 const ThemedNewfoldInterfaceSkeleton = themeToggleHOC(
@@ -111,16 +111,17 @@
 		syncStoreToDB();
 		generateSiteGenData();
 		handlePreviousStepTracking();
 	}, [ location.pathname ] );
 
 	return (
 		<ThemeProvider>
 			<ThemedNewfoldInterfaceSkeleton
+				id={ 'nfd-onboarding-skeleton--sitegen' }
 				className={ 'nfd-onboarding-skeleton--sitegen' }
 				header={ <Header /> }
 				content={ <Content /> }
 				sidebar={ <Sidebar /> }
-				footer={ <ToggleDarkMode /> }
+				footer={ <Footer /> }
 			/>
 		</ThemeProvider>
 	);

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js

@@ -7,13 +7,12 @@ const themeToggleHOC = (
 	WrappedComponent,
 	darkClass,
 	lightClass,
-	shouldApplyTheme = true
+	isForkStep = true
 ) => {
 	return ( props ) => {
 		const { theme } = useContext( ThemeContext );
 		const isDarkMode = theme === THEME_DARK;
-		const shouldApply =
-			shouldApplyTheme !== undefined ? shouldApplyTheme : true;
+		const shouldApply = isForkStep !== undefined ? isForkStep : true;
 		const className = classNames( props.className, {
 			[ darkClass ]: isDarkMode && shouldApply,
 			[ lightClass ]: ! isDarkMode && shouldApply,

src/OnboardingSPA/components/ToggleDarkMode/index.js

@@ -2,6 +2,7 @@ import { useContext } from '@wordpress/element';
 import { ThemeContext } from '../ThemeContextProvider';
 import classNames from 'classnames';
 import { THEME_DARK } from '../../../constants';
+import Animate from '../Animate';
 
 const ToggleDarkMode = () => {
 	const { theme, toggleTheme } = useContext( ThemeContext );
@@ -11,27 +12,34 @@ const ToggleDarkMode = () => {
 	};
 
 	return (
-		<div className="nfd-onboarding-toggle__theme">
-			<div
-				className={ classNames(
-					'nfd-onboarding-toggle__theme__button',
-					{
-						'nfd-onboarding-toggle__theme__button__light':
-							! isDarkMode,
-						'nfd-onboarding-toggle__theme__button__dark':
-							isDarkMode,
-					}
-				) }
-				onClick={ () => onChange() }
-				role="button"
-				onKeyDown={ ( event ) => {
-					if ( event.key === 'Enter' ) {
-						onChange();
-					}
-				} }
-				tabIndex="0"
-			></div>
-		</div>
+		<Animate
+			type={ 'fade-in' }
+			duration="200ms"
+			key={ isDarkMode }
+			timingFunction="ease-in-out"
+		>
+			<div className="nfd-onboarding-toggle__theme">
+				<div
+					className={ classNames(
+						'nfd-onboarding-toggle__theme__button',
+						{
+							'nfd-onboarding-toggle__theme__button__light':
+								! isDarkMode,
+							'nfd-onboarding-toggle__theme__button__dark':
+								isDarkMode,
+						}
+					) }
+					onClick={ () => onChange() }
+					role="button"
+					onKeyDown={ ( event ) => {
+						if ( event.key === 'Enter' ) {
+							onChange();
+						}
+					} }
+					tabIndex="0"
+				></div>
+			</div>
+		</Animate>
 	);
 };
 

src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss

@@ -1,16 +1,14 @@
 .nfd-onboarding-toggle__theme {
-	position: absolute;
-	bottom: 25px;
-	left: 25px;
-	z-index: 1;
+	margin-left: 25px;
+	margin-top: 10px;
+	margin-bottom: 10px;
 
 	&__button {
 		width: 60px;
 		height: 60px;
 		cursor: pointer;
 
 		&__light {
-			animation: fadeIn 600ms ease-in-out;
 			background: var(--sitegen-toggle-theme-icon-light);
 		}
 

src/OnboardingSPA/data/footers/index.js

@@ -0,0 +1,15 @@
+import { lazy } from '@wordpress/element';
+
+import { FOOTER_SITEGEN } from '../../../constants';
+
+const SiteGenFooter = lazy( () =>
+	import( '../../components/Footer/components/SiteGenFooter' )
+);
+
+export const footers = [
+	{
+		id: FOOTER_SITEGEN,
+		footer: SiteGenFooter,
+		enabled: true,
+	},
+];

src/OnboardingSPA/steps/SiteGen/Experience/index.js

@@ -32,7 +32,7 @@
 		setCurrentOnboardingData,
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
 		setIsHeaderEnabled( true );
 		setSidebarActiveView( false );
 		setHeaderActiveView( HEADER_SITEGEN );
@@ -50,8 +50,6 @@
 		setSelection( idx );
 		currentData.sitegen.experience.level = idx;
 		setCurrentOnboardingData( currentData );
-		// console.log( selection );
-		// console.log( 'Navigate to the next screen!' );
 		if ( nextStep ) {
 			navigate( nextStep.path );
 		}

src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js

@@ -38,12 +38,11 @@
 		if ( currentData.sitegen.siteDetails?.prompt !== '' ) {
 			setCustomerInput( currentData.sitegen.siteDetails.prompt );
 		}
 	}, [] );
 
 	const checkAndNavigate = () => {
 		currentData.sitegen.siteDetails.prompt = customerInput;
 		setCurrentOnboardingData( currentData );
-		// console.log( 'Navigate to the next screen!' );
 	};
 
 	return (

src/OnboardingSPA/steps/TheFork/index.js

@@ -4,7 +4,7 @@ import { useEffect } from '@wordpress/element';
 
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as nfdOnboardingStore } from '../../store';
-import { HEADER_SITEGEN } from '../../../constants';
+import { FOOTER_SITEGEN, HEADER_SITEGEN } from '../../../constants';
 
 import { useNavigate } from 'react-router-dom';
 
@@ -34,6 +34,7 @@ const TheFork = () => {
 		updateRoutes,
 		updateDesignRoutes,
 		updateInitialize,
+		setFooterActiveView,
 	} = useDispatch( nfdOnboardingStore );
 
 	const switchFlow = ( newFlow ) => {
@@ -61,6 +62,7 @@ const TheFork = () => {
 		setIsHeaderNavigationEnabled( false );
 		setHeaderActiveView( HEADER_SITEGEN );
 		setDrawerActiveView( false );
+		setFooterActiveView( FOOTER_SITEGEN );
 	} );
 
 	const oldFlow = window.nfdOnboarding?.oldFlow

src/OnboardingSPA/store/actions.js

@@ -189,6 +189,13 @@ export function setHeaderActiveView( view ) {
 	};
 }
 
+export function setFooterActiveView( view ) {
+	return {
+		type: 'SET_FOOTER_ACTIVE_VIEW',
+		view,
+	};
+}
+
 export function updatePreviewSettings( previewSettings ) {
 	return {
 		type: 'SET_PREVIEW_SETTINGS',

src/OnboardingSPA/store/reducer.js

@@ -4,6 +4,7 @@ import {
 	VIEW_NAV_PRIMARY,
 	THEME_STATUS_INIT,
 	HEADER_SITEBUILD,
+	FOOTER_SITEGEN,
 } from '../../constants';
 
 import {
@@ -14,6 +15,7 @@ import {
 } from '../data/flows/index';
 import { sidebars } from '../data/sidebars/index';
 import { headers } from '../data/headers';
+import { footers } from '../data/footers';
 import apiQueueExecutor from '../utils/api-queuer/api-queue-executor';
 import { DEFAULT_FLOW } from '../data/flows/constants';
 
@@ -297,6 +299,24 @@ export function queue( state = [], action ) {
 	return state;
 }
 
+export function footer(
+	state = {
+		footers,
+		view: FOOTER_SITEGEN,
+	},
+	action
+) {
+	switch ( action.type ) {
+		case 'SET_FOOTER_ACTIVE_VIEW':
+			return {
+				...state,
+				view: action.view,
+			};
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	drawer,
 	runtime,
@@ -305,5 +325,6 @@ export default combineReducers( {
 	flow,
 	sidebar,
 	header,
+	footer,
 	queue,
 } );

src/OnboardingSPA/store/selectors.js

@@ -45,10 +45,18 @@ export function getHeaders( state ) {
 	return state.header.headers;
 }
 
+export function getFooters( state ) {
+	return state.footer.footers;
+}
+
 export function getHeaderActiveView( state ) {
 	return state.header.view;
 }
 
+export function getFooterActiveView( state ) {
+	return state.footer.view;
+}
+
 /**
  * Gets current Newfold brand
  *