Merge pull request #523 from newfold-labs/add-theme-expedite-for-sitegen

Enhancement: Verify 'Yith Wonder' Theme Activation in Preview & Editor Step
newfold-labs · Apr 8, 2024 · 8f649e6 · 8f649e6
2 parents 0854eb5 + 7b23abe
commit 8f649e6
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 57 deletions.
diff --git a/src/OnboardingSPA/components/StateHandlers/Design/index.js b/src/OnboardingSPA/components/StateHandlers/Design/index.js
@@ -26,6 +26,7 @@ const DesignStateHandler = ( {
 	children,
 	navigationStateCallback = false,
 	refresh = true,
+	render = true,
 } ) => {
 	const isLargeViewport = useViewportMatch( 'medium' );
 
@@ -176,7 +177,7 @@ const DesignStateHandler = ( {
 		}
 	};
 
-	return <Fragment>{ handleRender() }</Fragment>;
+	return <Fragment>{ render ? handleRender() : children }</Fragment>;
 };
 
 export default DesignStateHandler;
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/index.js
@@ -4,14 +4,15 @@ import { useEffect, useState } from '@wordpress/element';
 
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as nfdOnboardingStore } from '../../../store';
-import { HEADER_SITEGEN } from '../../../../constants';
+import { HEADER_SITEGEN, THEME_STATUS_ACTIVE } from '../../../../constants';
 
 import { LivePreview } from '../../../components/LivePreview';
 import { getGlobalStyles } from '../../../utils/api/themes';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { cloneDeep } from 'lodash';
 import { publishSitemapPages } from '../../../utils/api/siteGen';
+import { DesignStateHandler } from '../../../components/StateHandlers';
 
 const StepSiteGenEditor = () => {
 	const [ homepage, setHomepage ] = useState( false );
@@ -25,10 +26,11 @@ const StepSiteGenEditor = () => {
 		setIsHeaderNavigationEnabled,
 	} = useDispatch( nfdOnboardingStore );
 
-	const { currentData } = useSelect( ( select ) => {
+	const { currentData, themeStatus } = useSelect( ( select ) => {
 		return {
 			currentData:
 				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
 		};
 	} );
 
@@ -57,12 +59,14 @@ const StepSiteGenEditor = () => {
 	};
 
 	useEffect( () => {
-		setIsHeaderEnabled( true );
-		setHeaderActiveView( HEADER_SITEGEN );
-		setDrawerActiveView( false );
-		loadData();
-		handleSitemapPagesGeneration();
-	}, [] );
+		if ( THEME_STATUS_ACTIVE === themeStatus ) {
+			setIsHeaderEnabled( true );
+			setHeaderActiveView( HEADER_SITEGEN );
+			setDrawerActiveView( false );
+			loadData();
+			handleSitemapPagesGeneration();
+		}
+	}, [ themeStatus ] );
 
 	useEffect( () => {
 		if ( currentData?.sitegen?.homepages?.active ) {
@@ -117,15 +121,17 @@ const StepSiteGenEditor = () => {
 	};
 
 	return (
-		<CommonLayout
-			isCentered
-			className="nfd-onboarding-step--site-gen__editor"
-		>
-			<div className="nfd-onboarding-step--site-gen__editor__live-preview">
-				{ buildPreview() }
-			</div>
-			<div className="nfd-onboarding-screenshot-container"></div>
-		</CommonLayout>
+		<DesignStateHandler render={ false }>
+			<CommonLayout
+				isCentered
+				className="nfd-onboarding-step--site-gen__editor"
+			>
+				<div className="nfd-onboarding-step--site-gen__editor__live-preview">
+					{ buildPreview() }
+				</div>
+				<div className="nfd-onboarding-screenshot-container"></div>
+			</CommonLayout>
+		</DesignStateHandler>
 	);
 };
 

diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js
@@ -6,7 +6,7 @@ import { cloneDeep, isEmpty } from 'lodash';
 
 import CommonLayout from '../../../components/Layouts/Common';
 import { store as nfdOnboardingStore } from '../../../store';
-import { HEADER_SITEGEN } from '../../../../constants';
+import { HEADER_SITEGEN, THEME_STATUS_ACTIVE } from '../../../../constants';
 import { SiteGenPreviewSelectableCard } from '../../../components/LivePreview';
 import getContents from './contents';
 import HeartAnimation from './heartAnimation';
@@ -26,6 +26,7 @@ import {
 	ACTION_SITEGEN_SITE_GENERATION_TIME,
 } from '../../../utils/analytics/hiive/constants';
 import { SITEGEN_FLOW } from '../../../data/flows/constants';
+import { DesignStateHandler } from '../../../components/StateHandlers';
 
 const SiteGenPreview = () => {
 	const navigate = useNavigate();
@@ -48,17 +49,17 @@ const SiteGenPreview = () => {
 		setIsHeaderNavigationEnabled,
 	} = useDispatch( nfdOnboardingStore );
 
-	const { currentData, nextStep, siteGenErrorStatus } = useSelect(
-		( select ) => {
+	const { currentData, nextStep, siteGenErrorStatus, themeStatus } =
+		useSelect( ( select ) => {
 			return {
 				currentData:
 					select( nfdOnboardingStore ).getCurrentOnboardingData(),
 				nextStep: select( nfdOnboardingStore ).getNextStep(),
 				siteGenErrorStatus:
 					select( nfdOnboardingStore ).getSiteGenErrorStatus(),
+				themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
 			};
-		}
-	);
+		} );
 
 	useEffect( () => {
 		setIsHeaderEnabled( true );
@@ -136,9 +137,11 @@ const SiteGenPreview = () => {
 	};
 
 	useEffect( () => {
-		loadHomepages();
-		loadGlobalStyles();
-	}, [] );
+		if ( THEME_STATUS_ACTIVE === themeStatus ) {
+			loadHomepages();
+			loadGlobalStyles();
+		}
+	}, [ themeStatus ] );
 
 	const handlePreview = ( slug, position ) => {
 		if ( ! ( slug in homepages ) ) {
@@ -295,37 +298,39 @@ const SiteGenPreview = () => {
 
 	return (
 		<SitegenAiStateHandler>
-			<CommonLayout className="nfd-onboarding-step--site-gen__preview">
-				<div className="nfd-onboarding-step--site-gen__preview__container">
-					{ ! isPreviewLoading && (
-						<Animate type={ 'fade-in' }>
-							<div className="nfd-onboarding-step--site-gen__preview__container__heading">
-								<p className="nfd-onboarding-step--site-gen__preview__container__heading__text">
-									{ content.heading }
-								</p>
-							</div>
-							<div className="nfd-onboarding-step--site-gen__preview__container__sub-heading">
-								<p className="nfd-onboarding-step--site-gen__preview__container__sub-heading__text">
-									{ content.subheading }
-								</p>
-							</div>
-						</Animate>
-					) }
-				</div>
-				<div className="nfd-onboarding-step--site-gen__preview__options">
-					{ buildPreviews() }
-					{ isRegenerating && (
-						<RegeneratingSiteCard
-							count={ 1 }
-							isRegenerating={ true }
-						/>
-					) }
-				</div>
-				<div className="nfd-onboarding-step--site-gen__preview__note">
-					<HeartAnimation />
-					<span>{ content.favouriteNote }</span>
-				</div>
-			</CommonLayout>
+			<DesignStateHandler render={ false }>
+				<CommonLayout className="nfd-onboarding-step--site-gen__preview">
+					<div className="nfd-onboarding-step--site-gen__preview__container">
+						{ ! isPreviewLoading && (
+							<Animate type={ 'fade-in' }>
+								<div className="nfd-onboarding-step--site-gen__preview__container__heading">
+									<p className="nfd-onboarding-step--site-gen__preview__container__heading__text">
+										{ content.heading }
+									</p>
+								</div>
+								<div className="nfd-onboarding-step--site-gen__preview__container__sub-heading">
+									<p className="nfd-onboarding-step--site-gen__preview__container__sub-heading__text">
+										{ content.subheading }
+									</p>
+								</div>
+							</Animate>
+						) }
+					</div>
+					<div className="nfd-onboarding-step--site-gen__preview__options">
+						{ buildPreviews() }
+						{ isRegenerating && (
+							<RegeneratingSiteCard
+								count={ 1 }
+								isRegenerating={ true }
+							/>
+						) }
+					</div>
+					<div className="nfd-onboarding-step--site-gen__preview__note">
+						<HeartAnimation />
+						<span>{ content.favouriteNote }</span>
+					</div>
+				</CommonLayout>
+			</DesignStateHandler>
 		</SitegenAiStateHandler>
 	);
 };