From e5f18adb1ba46a2203d331c3919060f7eab50726 Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Wed, 29 Nov 2023 14:13:55 +0530
Subject: [PATCH] Minor dark mode fixes and slot filled footers

---
 .../Footer/components/SiteGenFooter/index.js  | 15 ++++++
 src/OnboardingSPA/components/Footer/index.js  | 37 ++++++++++++++
 .../components/Footer/stylesheet.scss         | 22 ++++++++
 .../SiteBuild/index.js                        | 10 ++--
 .../NewfoldInterfaceSkeleton/SiteGen/index.js |  5 +-
 .../themeToggleHOC.js                         |  5 +-
 .../components/ToggleDarkMode/index.js        | 50 +++++++++++--------
 .../components/ToggleDarkMode/stylesheet.scss |  8 ++-
 src/OnboardingSPA/data/footers/index.js       | 15 ++++++
 .../steps/SiteGen/Experience/index.js         |  2 -
 .../steps/SiteGen/SiteDetails/index.js        |  1 -
 src/OnboardingSPA/steps/TheFork/index.js      |  4 +-
 src/OnboardingSPA/store/actions.js            |  7 +++
 src/OnboardingSPA/store/reducer.js            | 21 ++++++++
 src/OnboardingSPA/store/selectors.js          |  8 +++
 src/OnboardingSPA/styles/app.scss             |  1 +
 src/constants.js                              |  4 ++
 17 files changed, 175 insertions(+), 40 deletions(-)
 create mode 100644 src/OnboardingSPA/components/Footer/components/SiteGenFooter/index.js
 create mode 100644 src/OnboardingSPA/components/Footer/index.js
 create mode 100644 src/OnboardingSPA/components/Footer/stylesheet.scss
 create mode 100644 src/OnboardingSPA/data/footers/index.js

diff --git a/src/OnboardingSPA/components/Footer/components/SiteGenFooter/index.js b/src/OnboardingSPA/components/Footer/components/SiteGenFooter/index.js
new file mode 100644
index 000000000..793f63d04
--- /dev/null
+++ b/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;
diff --git a/src/OnboardingSPA/components/Footer/index.js b/src/OnboardingSPA/components/Footer/index.js
new file mode 100644
index 000000000..6a115f458
--- /dev/null
+++ b/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;
diff --git a/src/OnboardingSPA/components/Footer/stylesheet.scss b/src/OnboardingSPA/components/Footer/stylesheet.scss
new file mode 100644
index 000000000..2564f6d92
--- /dev/null
+++ b/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);
+	}
+}
diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js
index 9681c3f9b..79f4271d1 100644
--- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js
+++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js
@@ -2,7 +2,6 @@ import Header from '../../Header';
 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 { trigger as cronTrigger } from '../../../utils/api/cronTrigger';
 import { stepTheFork } from '../../../steps/TheFork/step';
 import { ThemeProvider } from '../../ThemeContextProvider';
 import themeToggleHOC from '../themeToggleHOC';
+import Footer from '../../Footer';
 
 const SiteBuild = () => {
 	const location = useLocation();
@@ -423,7 +423,7 @@ const SiteBuild = () => {
 		handleConditionalDesignStepsRoutes();
 	}, [ location.pathname, onboardingFlow ] );
 
-	const shouldApplyTheme =
+	const isForkStep =
 		currentStep === stepTheFork ||
 		window.nfdOnboarding.currentFlow === 'sitegen';
 	// wrapping the NewfoldInterfaceSkeleton with the HOC to make 'theme' available
@@ -431,7 +431,7 @@ const SiteBuild = () => {
 		NewfoldInterfaceSkeleton,
 		'nfd-onboarding-sitegen-dark',
 		'nfd-onboarding-sitegen-light',
-		shouldApplyTheme
+		isForkStep
 	);
 
 	return (
@@ -445,14 +445,14 @@ const SiteBuild = () => {
 					{ '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>
 	);
diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js
index 0e16ea38d..db4d1fb09 100644
--- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js
+++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js
@@ -7,7 +7,6 @@ import Content from '../../Content';
 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';
@@ -15,6 +14,7 @@ import {
 	generateSiteGenMeta,
 	getSiteGenIdentifiers,
 } from '../../../utils/api/siteGen';
+import Footer from '../../Footer';
 
 // Wrapping the NewfoldInterfaceSkeleton with the HOC to make theme available
 const ThemedNewfoldInterfaceSkeleton = themeToggleHOC(
@@ -116,11 +116,12 @@ const SiteGen = () => {
 	return (
 		<ThemeProvider>
 			<ThemedNewfoldInterfaceSkeleton
+				id={ 'nfd-onboarding-skeleton--sitegen' }
 				className={ 'nfd-onboarding-skeleton--sitegen' }
 				header={ <Header /> }
 				content={ <Content /> }
 				sidebar={ <Sidebar /> }
-				footer={ <ToggleDarkMode /> }
+				footer={ <Footer /> }
 			/>
 		</ThemeProvider>
 	);
diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js
index 1289c09b4..079324d03 100644
--- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js
+++ b/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,
diff --git a/src/OnboardingSPA/components/ToggleDarkMode/index.js b/src/OnboardingSPA/components/ToggleDarkMode/index.js
index c24b16b92..7cd1b57b6 100644
--- a/src/OnboardingSPA/components/ToggleDarkMode/index.js
+++ b/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>
 	);
 };
 
diff --git a/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss b/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss
index 7bc4870a3..d669b3816 100644
--- a/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss
+++ b/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss
@@ -1,8 +1,7 @@
 .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;
@@ -10,7 +9,6 @@
 		cursor: pointer;
 
 		&__light {
-			animation: fadeIn 600ms ease-in-out;
 			background: var(--sitegen-toggle-theme-icon-light);
 		}
 
diff --git a/src/OnboardingSPA/data/footers/index.js b/src/OnboardingSPA/data/footers/index.js
new file mode 100644
index 000000000..30133d87b
--- /dev/null
+++ b/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,
+	},
+];
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
index d04bb4628..9e8700886 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
@@ -50,8 +50,6 @@ const SiteGenExperience = () => {
 		setSelection( idx );
 		currentData.sitegen.experience.level = idx;
 		setCurrentOnboardingData( currentData );
-		// console.log( selection );
-		// console.log( 'Navigate to the next screen!' );
 		if ( nextStep ) {
 			navigate( nextStep.path );
 		}
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
index a0c71ea32..12a0c97f3 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
@@ -43,7 +43,6 @@ const SiteGenSiteDetails = () => {
 	const checkAndNavigate = () => {
 		currentData.sitegen.siteDetails.prompt = customerInput;
 		setCurrentOnboardingData( currentData );
-		// console.log( 'Navigate to the next screen!' );
 	};
 
 	return (
diff --git a/src/OnboardingSPA/steps/TheFork/index.js b/src/OnboardingSPA/steps/TheFork/index.js
index 0ba4458c5..098a34a54 100644
--- a/src/OnboardingSPA/steps/TheFork/index.js
+++ b/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
diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js
index 1d5d057ed..e28d52f62 100644
--- a/src/OnboardingSPA/store/actions.js
+++ b/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',
diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js
index 7e79658c4..8954a5368 100644
--- a/src/OnboardingSPA/store/reducer.js
+++ b/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,
 } );
diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js
index f0f64886b..db049431d 100644
--- a/src/OnboardingSPA/store/selectors.js
+++ b/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
  *
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index 0ce29485d..91d285a83 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -56,6 +56,7 @@
 @import "../components/Button/NextButtonSiteGen/stylesheet";
 @import "../components/CardWithOptions/stylesheet";
 @import "../components/Loaders/SiteGenLoader/stylesheet";
+@import "../components/Footer/stylesheet";
 
 // CSS for Pages
 @import "../steps/BasicInfo/stylesheet";
diff --git a/src/constants.js b/src/constants.js
index de747c40e..ee39ce994 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -40,10 +40,14 @@ export const SIDEBAR_MENU_SLOTFILL_PREFIX = 'HeaderMenu';
 export const SIDEBAR_LEARN_MORE = 'LearnMore';
 export const HEADER_SITEBUILD = 'HeaderSiteBuild';
 export const HEADER_SITEGEN = 'HeaderSiteGen';
+export const FOOTER_SITEBUILD = 'FooterSiteBuild';
+export const FOOTER_SITEGEN = 'FooterSiteGen';
 export const HEADER_TOP = 'HeaderTop';
 export const HEADER_START = 'HeaderStart';
 export const HEADER_CENTER = 'HeaderCenter';
 export const HEADER_END = 'HeaderEnd';
+export const FOOTER_START = 'FooterStart';
+export const FOOTER_END = 'FooterEnd';
 
 export const MAX_RETRIES_API_QUEUER = 2;
 export const MAX_RETRIES_SETTINGS_INIT = 2;