From b7ada2608795f7cbd756acded3a7ea7703d56c2b Mon Sep 17 00:00:00 2001
From: Vara <varaprasadmaruboina@gmail.com>
Date: Thu, 25 Jan 2024 08:18:03 +0530
Subject: [PATCH 1/2] fix issue with onboarding in AI branch

---
 src/OnboardingSPA/components/Button/index.js  |  8 +--
 .../HeadingWithSubHeading/SiteGen/index.js    |  3 +-
 .../SiteGenPreviewSelectableCard/index.js     | 16 ++++--
 .../SiteBuild/index.js                        | 51 +++++++++++--------
 .../NewfoldInterfaceSkeleton/index.js         | 15 ++++--
 5 files changed, 56 insertions(+), 37 deletions(-)

diff --git a/src/OnboardingSPA/components/Button/index.js b/src/OnboardingSPA/components/Button/index.js
index a5efeaee4..52d5502d7 100644
--- a/src/OnboardingSPA/components/Button/index.js
+++ b/src/OnboardingSPA/components/Button/index.js
@@ -5,10 +5,10 @@
  * @return Button
  */
 
-const Button = ( { children, onClick, disabled, className } ) => {
+const Button = ( { text, handleClick, disabled, className } ) => {
 	const handleBtnClick = () => {
-		if ( onClick ) {
-			onClick();
+		if ( handleClick ) {
+			handleClick();
 		}
 	};
 
@@ -19,7 +19,7 @@ const Button = ( { children, onClick, disabled, className } ) => {
 			onClick={ handleBtnClick }
 			disabled={ disabled }
 		>
-			{ children }
+			{ text }
 		</button>
 	);
 };
diff --git a/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js
index e0973c695..a9d22011f 100644
--- a/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js
+++ b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js
@@ -12,7 +12,8 @@ import { ThemeContext } from '../../ThemeContextProvider';
  */
 
 const HeadingWithSubHeading = ( { title, subtitle } ) => {
-	const { theme } = useContext( ThemeContext );
+	const themeContext = useContext( ThemeContext );
+	const theme = themeContext?.theme || false;
 
 	return (
 		<div className="nfd-onboarding-step__heading">
diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js
index e97c10b23..4ea6bd485 100644
--- a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js
+++ b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js
@@ -85,11 +85,17 @@ const SiteGenPreviewSelectableCard = ( {
 					>
 						<Button
 							className={ `${ className }__live-preview-container__overlay__button` }
-							onClick={ () => handlePreview() }
-						>
-							<Icon icon={ search } />
-							{ __( 'Preview Version', 'wp-module-onboarding' ) }
-						</Button>
+							text={
+								<>
+									<Icon icon={ search } />
+									{ __(
+										'Preview Version',
+										'wp-module-onboarding'
+									) }
+								</>
+							}
+							handleClick={ handlePreview }
+						/>
 					</div>
 				) }
 				<div
diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js
index 79f4271d1..1c0a2dc4c 100644
--- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js
+++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js
@@ -434,28 +434,35 @@ const SiteBuild = () => {
 		isForkStep
 	);
 
-	return (
-		<ThemeProvider>
-			<ThemedNewfoldInterfaceSkeleton
-				className={ classNames(
-					'nfd-onboarding-skeleton',
-					`brand-${ newfoldBrand }`,
-					`path-${ pathname }`,
-					{ 'is-drawer-open': isDrawerOpen },
-					{ 'is-large-viewport': isLargeViewport },
-					{ 'is-small-viewport': ! isLargeViewport },
-					{
-						'nfd-onboarding-skeleton--sitegen': isForkStep,
-					}
-				) }
-				header={ <Header /> }
-				drawer={ <Drawer /> }
-				content={ <Content /> }
-				sidebar={ <Sidebar /> }
-				footer={ isForkStep ? <Footer /> : null }
-			/>
-		</ThemeProvider>
-	);
+	const commonSkeletonProps = {
+		className: classNames(
+			'nfd-onboarding-skeleton',
+			`brand-${ newfoldBrand }`,
+			`path-${ pathname }`,
+			{ 'is-drawer-open': isDrawerOpen },
+			{ 'is-large-viewport': isLargeViewport },
+			{ 'is-small-viewport': ! isLargeViewport },
+			{ 'nfd-onboarding-skeleton--sitegen': isForkStep }
+		),
+		header: <Header />,
+		drawer: <Drawer />,
+		content: <Content />,
+		sidebar: <Sidebar />,
+		footer: isForkStep ? <Footer /> : null,
+	};
+
+	const renderSkeleton = ( Component ) =>
+		isForkStep ? (
+			<ThemeProvider>
+				<Component { ...commonSkeletonProps } />
+			</ThemeProvider>
+		) : (
+			<Component { ...commonSkeletonProps } />
+		);
+
+	return isForkStep
+		? renderSkeleton( ThemedNewfoldInterfaceSkeleton )
+		: renderSkeleton( NewfoldInterfaceSkeleton );
 };
 
 export default SiteBuild;
diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js
index bd5e914e1..dc1e17083 100644
--- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js
+++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js
@@ -64,11 +64,16 @@ function NewfoldInterfaceSkeleton(
 	ref
 ) {
 	const navigateRegionsProps = useNavigateRegions( shortcuts );
-	const { theme } = useContext( ThemeContext );
-	useHTMLClass(
-		'nfd-interface-interface-skeleton__html-container',
-		theme === THEME_DARK
-	);
+	const isSiteGenFlow = window.nfdOnboarding.currentFlow === 'sitegen';
+	if ( isSiteGenFlow ) {
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		const { theme } = useContext( ThemeContext );
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		useHTMLClass(
+			'nfd-interface-interface-skeleton__html-container',
+			theme === THEME_DARK
+		);
+	}
 
 	const defaultLabels = {
 		/* translators: accessibility text for the nav bar landmark region. */

From 92457397973ed08ff72d35c3fab11a1b4c61f89e Mon Sep 17 00:00:00 2001
From: Vara <varaprasadmaruboina@gmail.com>
Date: Thu, 25 Jan 2024 17:59:04 +0530
Subject: [PATCH 2/2] Fix issue with step complete

---
 .../NewfoldInterfaceSkeleton/SiteBuild/index.js        | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js
index 1c0a2dc4c..e677434e4 100644
--- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js
+++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js
@@ -334,7 +334,9 @@ const SiteBuild = () => {
 
 		if ( lastChapter !== currentChapter ) {
 			if ( lastChapter ) {
-				currentData.data.chapters[ lastChapter ].completed = true;
+				if ( currentData.data.chapters[ lastChapter ] ) {
+					currentData.data.chapters[ lastChapter ].completed = true;
+				}
 				trackOnboardingEvent(
 					new OnboardingEvent(
 						ACTION_ONBOARDING_CHAPTER_COMPLETE,
@@ -344,7 +346,11 @@ const SiteBuild = () => {
 			}
 
 			if ( currentChapter ) {
-				currentData.data.chapters[ currentChapter ].completed = false;
+				if ( currentData.data.chapters[ currentChapter ] ) {
+					currentData.data.chapters[
+						currentChapter
+					].completed = false;
+				}
 				trackOnboardingEvent(
 					new OnboardingEvent(
 						ACTION_ONBOARDING_CHAPTER_STARTED,