Merge pull request #144 from newfold-labs/fix/disable-navigation-when…

…-loading Disable navigation when in loading states
newfold-labs · Jan 17, 2023 · d10f871 · d10f871
2 parents 5bdb1ec + f64dbf9
commit d10f871
Show file tree

Hide file tree

Showing 13 changed files with 141 additions and 130 deletions.
diff --git a/src/OnboardingSPA/components/StateHandlers/Design/index.js b/src/OnboardingSPA/components/StateHandlers/Design/index.js
@@ -1,5 +1,6 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Fragment, useEffect } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
 
 import { StepLoader } from '../../Loaders';
 import { store as nfdOnboardingStore } from '../../../store';
@@ -15,7 +16,12 @@ import {
 import { StepErrorState } from '../../ErrorState';
 import getContents from './contents';
 
-const DesignStateHandler = ( { children } ) => {
+const DesignStateHandler = ( {
+	children,
+	navigationStateCallback = false,
+} ) => {
+	const isLargeViewport = useViewportMatch( 'medium' );
+
 	const { storedThemeStatus, brandName } = useSelect( ( select ) => {
 		return {
 			storedThemeStatus: select( nfdOnboardingStore ).getThemeStatus(),
@@ -25,7 +31,12 @@ const DesignStateHandler = ( { children } ) => {
 
 	const contents = getContents( brandName );
 
-	const { updateThemeStatus } = useDispatch( nfdOnboardingStore );
+	const {
+		updateThemeStatus,
+		setIsDrawerOpened,
+		setIsDrawerSuppressed,
+		setIsHeaderNavigationEnabled,
+	} = useDispatch( nfdOnboardingStore );
 
 	const checkThemeStatus = async () => {
 		const themeStatus = await getThemeStatus( DESIGN_STEPS_THEME );
@@ -45,7 +56,41 @@ const DesignStateHandler = ( { children } ) => {
 		}, THEME_INSTALL_WAIT_TIMEOUT );
 	};
 
+	const enableNavigation = () => {
+		if ( isLargeViewport ) {
+			setIsDrawerOpened( true );
+		}
+		setIsDrawerSuppressed( false );
+		setIsHeaderNavigationEnabled( true );
+	};
+
+	const disableNavigation = () => {
+		setIsDrawerOpened( false );
+		setIsDrawerSuppressed( true );
+		setIsHeaderNavigationEnabled( false );
+	};
+
+	const handleNavigationStateCallback = () => {
+		if ( typeof navigationStateCallback === 'function' ) {
+			return navigationStateCallback();
+		}
+		enableNavigation();
+	};
+
+	const handleNavigationState = ( themeStatus ) => {
+		switch ( themeStatus ) {
+			case THEME_STATUS_NOT_ACTIVE:
+				return handleNavigationStateCallback();
+			case THEME_STATUS_ACTIVE:
+				return handleNavigationStateCallback();
+			default:
+				disableNavigation();
+		}
+	};
+
 	useEffect( async () => {
+		handleNavigationState( storedThemeStatus );
+
 		if ( storedThemeStatus === THEME_STATUS_INIT ) {
 			const themeStatus = await checkThemeStatus();
 			switch ( themeStatus ) {

diff --git a/src/OnboardingSPA/components/StateHandlers/Ecommerce/index.js b/src/OnboardingSPA/components/StateHandlers/Ecommerce/index.js
@@ -1,3 +1,4 @@
+import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 
@@ -15,7 +16,12 @@ import {
 import { StepErrorState } from '../../ErrorState';
 import getContents from './contents';
 
-const EcommerceStateHandler = ( { children } ) => {
+const EcommerceStateHandler = ( {
+	children,
+	navigationStateCallback = false,
+} ) => {
+	const isLargeViewport = useViewportMatch( 'medium' );
+
 	const [ woocommerceStatus, setWoocommerceStatus ] = useState(
 		PLUGIN_STATUS_INSTALLING
 	);
@@ -30,7 +36,12 @@ const EcommerceStateHandler = ( { children } ) => {
 
 	const contents = getContents( brandName );
 
-	const { updatePluginsStatus } = useDispatch( nfdOnboardingStore );
+	const {
+		updatePluginsStatus,
+		setIsDrawerOpened,
+		setIsDrawerSuppressed,
+		setIsHeaderNavigationEnabled,
+	} = useDispatch( nfdOnboardingStore );
 
 	const checkPluginStatus = async () => {
 		const pluginStatus = await getPluginStatus( ECOMMERCE_STEPS_PLUGIN );
@@ -44,12 +55,51 @@ const EcommerceStateHandler = ( { children } ) => {
 		setTimeout( async () => {
 			const pluginStatus = await checkPluginStatus();
 			if ( pluginStatus !== PLUGIN_STATUS_ACTIVE ) {
+				storedPluginsStatus[ ECOMMERCE_STEPS_PLUGIN ] =
+					PLUGIN_STATUS_NOT_ACTIVE;
+				updatePluginsStatus( storedPluginsStatus );
 				return setWoocommerceStatus( PLUGIN_STATUS_NOT_ACTIVE );
 			}
 			window.location.reload();
 		}, PLUGIN_INSTALL_WAIT_TIMEOUT );
 	};
 
+	const enableNavigation = () => {
+		if ( isLargeViewport ) {
+			setIsDrawerOpened( true );
+		}
+		setIsDrawerSuppressed( false );
+		setIsHeaderNavigationEnabled( true );
+	};
+
+	const disableNavigation = () => {
+		setIsDrawerOpened( false );
+		setIsDrawerSuppressed( true );
+		setIsHeaderNavigationEnabled( false );
+	};
+
+	const handleNavigationStateCallback = () => {
+		if ( typeof navigationStateCallback === 'function' ) {
+			return navigationStateCallback();
+		}
+		enableNavigation();
+	};
+
+	const handleNavigationState = ( pluginStatus ) => {
+		switch ( pluginStatus ) {
+			case PLUGIN_STATUS_NOT_ACTIVE:
+				return handleNavigationStateCallback();
+			case PLUGIN_STATUS_ACTIVE:
+				return handleNavigationStateCallback();
+			default:
+				disableNavigation();
+		}
+	};
+
+	useEffect( () => {
+		handleNavigationState( woocommerceStatus );
+	}, [ woocommerceStatus ] );
+
 	useEffect( async () => {
 		setWoocommerceStatus( storedPluginsStatus[ ECOMMERCE_STEPS_PLUGIN ] );
 		if (

diff --git a/src/OnboardingSPA/pages/Steps/Complete/index.js b/src/OnboardingSPA/pages/Steps/Complete/index.js
@@ -65,14 +65,17 @@ const StepComplete = () => {
 		return true;
 	}
 
-	useEffect( () => {
+	const setNavigationState = () => {
 		setIsHeaderNavigationEnabled( false );
 		setIsDrawerSuppressed( true );
 		setSidebarActiveView( false );
+	}
+
+	useEffect( () => {
 		checkFlowComplete();
 	}, [] );
 	return (
-		<DesignStateHandler>
+		<DesignStateHandler navigationStateCallback={setNavigationState}>
 			{ isError ? (
 				<StepErrorState
 					title={ contents.errorState.title }

diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
@@ -1,5 +1,4 @@
 import { useLocation } from 'react-router-dom';
-import { useViewportMatch } from '@wordpress/compose';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
@@ -22,7 +21,6 @@ const StepDesignColors = () => {
 	const [ isLoaded, setIsLoaded ] = useState( false );
 	const [ pattern, setPattern ] = useState();
 
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const { currentStep } = useSelect( ( select ) => {
 		return {
 			currentStep: select( nfdOnboardingStore ).getStepFromPath(
@@ -31,23 +29,12 @@ const StepDesignColors = () => {
 		};
 	}, [] );
 
-	const {
-		setDrawerActiveView,
-		setIsDrawerOpened,
-		setSidebarActiveView,
-		setIsDrawerSuppressed,
-		setIsHeaderNavigationEnabled,
-		updateThemeStatus,
-	} = useDispatch( nfdOnboardingStore );
+	const { setDrawerActiveView, setSidebarActiveView, updateThemeStatus } =
+		useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
-		if ( isLargeViewport ) {
-			setIsDrawerOpened( true );
-		}
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
-		setIsDrawerSuppressed( false );
 		setDrawerActiveView( VIEW_DESIGN_COLORS );
-		setIsHeaderNavigationEnabled( true );
 	}, [] );
 
 	const getStylesAndPatterns = async () => {

diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js
@@ -1,6 +1,5 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
-import { useViewportMatch } from '@wordpress/compose';
 
 import CommonLayout from '../../../components/Layouts/Common';
 import { DesignStateHandler } from '../../../components/StateHandlers';
@@ -9,7 +8,10 @@ import {
 	GlobalStylesProvider,
 } from '../../../components/LivePreview';
 
-import { SIDEBAR_LEARN_MORE, VIEW_DESIGN_HEADER_MENU } from '../../../../constants';
+import {
+	SIDEBAR_LEARN_MORE,
+	VIEW_DESIGN_HEADER_MENU,
+} from '../../../../constants';
 import { store as nfdOnboardingStore } from '../../../store';
 
 const StepDesignHeaderMenu = () => {
@@ -20,28 +22,17 @@ const StepDesignHeaderMenu = () => {
 	}, [] );
 
 	const [ pattern, setPattern ] = useState();
-	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const {
-		setDrawerActiveView,
-		setIsDrawerOpened,
-		setIsDrawerSuppressed,
-		setSidebarActiveView,
-		setIsHeaderNavigationEnabled,
-	} = useDispatch( nfdOnboardingStore );
+	const { setDrawerActiveView, setSidebarActiveView } =
+		useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
 		setPattern( headerMenu );
 	}, [ headerMenu ] );
 
 	useEffect( () => {
-		if ( isLargeViewport ) {
-			setIsDrawerOpened( true );
-		}
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
-		setIsDrawerSuppressed( false );
 		setDrawerActiveView( VIEW_DESIGN_HEADER_MENU );
-		setIsHeaderNavigationEnabled( true );
 	}, [] );
 
 	return (

diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
@@ -1,4 +1,3 @@
-import { useViewportMatch } from '@wordpress/compose';
 import { useLocation } from 'react-router-dom';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -50,8 +49,6 @@ const StepDesignHomepageMenu = () => {
 	const [ homepagePattern, setHomepagePattern ] = useState();
 	const [ selectedHomepage, setSelectedHomepage ] = useState( 0 );
 
-	const isLargeViewport = useViewportMatch( 'medium' );
-
 	const {
 		currentStep,
 		currentData,
@@ -74,22 +71,14 @@ const StepDesignHomepageMenu = () => {
 
 	const {
 		setDrawerActiveView,
-		setIsDrawerOpened,
 		setSidebarActiveView,
-		setIsDrawerSuppressed,
 		setCurrentOnboardingData,
 		updateThemeStatus,
-		setIsHeaderNavigationEnabled,
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
-		if ( isLargeViewport ) {
-			setIsDrawerOpened( true );
-		}
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
-		setIsDrawerSuppressed( false );
 		setDrawerActiveView( VIEW_NAV_DESIGN );
-		setIsHeaderNavigationEnabled( true );
 	}, [] );
 
 	function refactorPatterns( homepagePatternData ) {

diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js
@@ -1,7 +1,6 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { useViewportMatch } from '@wordpress/compose';
 
 import { store as nfdOnboardingStore } from '../../../../store';
 import CommonLayout from '../../../../components/Layouts/Common';
@@ -29,7 +28,6 @@ const StepDesignThemeStylesMenu = () => {
 	const [ selectedStyle, setSelectedStyle ] = useState();
 
 	const navigate = useNavigate();
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		currentStep,
 		nextStep,
@@ -54,23 +52,15 @@ const StepDesignThemeStylesMenu = () => {
 
 	const {
 		setDrawerActiveView,
-		setIsDrawerOpened,
 		setSidebarActiveView,
-		setIsDrawerSuppressed,
 		updatePreviewSettings,
 		setCurrentOnboardingData,
 		updateThemeStatus,
-		setIsHeaderNavigationEnabled,
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
-		if ( isLargeViewport ) {
-			setIsDrawerOpened( true );
-		}
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
-		setIsDrawerSuppressed( false );
 		setDrawerActiveView( VIEW_NAV_DESIGN );
-		setIsHeaderNavigationEnabled( true );
 	}, [] );
 
 	const getStylesAndPatterns = async () => {