From 5d451824fc129d92c33a36a68f56fa07756bdd2d Mon Sep 17 00:00:00 2001 From: Vara Date: Tue, 12 Mar 2024 18:03:03 +0530 Subject: [PATCH 1/2] Add DesignStateHandler to SiteGen Preview step --- .../components/StateHandlers/Design/index.js | 3 +- .../steps/SiteGen/Preview/index.js | 83 ++++++++++--------- 2 files changed, 46 insertions(+), 40 deletions(-) diff --git a/src/OnboardingSPA/components/StateHandlers/Design/index.js b/src/OnboardingSPA/components/StateHandlers/Design/index.js index 686bd4de7..09849556c 100644 --- 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 { handleRender() }; + return { render ? handleRender() : children }; }; export default DesignStateHandler; diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index 41353b534..de1ef8720 100644 --- 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 ( - -
- { ! isPreviewLoading && ( - -
-

- { content.heading } -

-
-
-

- { content.subheading } -

-
- - ) } -
-
- { buildPreviews() } - { isRegenerating && ( - - ) } -
-
- - { content.favouriteNote } -
- + + +
+ { ! isPreviewLoading && ( + +
+

+ { content.heading } +

+
+
+

+ { content.subheading } +

+
+ + ) } +
+
+ { buildPreviews() } + { isRegenerating && ( + + ) } +
+
+ + { content.favouriteNote } +
+ + ); }; From 7b23abe55222ba5b65f144637bce2fefe786dcdb Mon Sep 17 00:00:00 2001 From: Vara Date: Thu, 14 Mar 2024 11:39:59 +0530 Subject: [PATCH 2/2] Add DesignStateHandler to Sitegen Editor step --- .../steps/SiteGen/Editor/index.js | 40 +++++++++++-------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/index.js index 0d759de6d..e10fcb3ea 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/index.js @@ -4,7 +4,7 @@ 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'; @@ -12,6 +12,7 @@ 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 ( - -
- { buildPreview() } -
-
- + + +
+ { buildPreview() } +
+
+ + ); };