Save continue dim UI

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from '@wordpress/element';
 import { useLocation } from 'react-router-dom';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 import Header from '../../Header';
@@ -9,7 +9,7 @@
 import NewfoldInterfaceSkeleton from '../index';
 import { ThemeProvider } from '../../ThemeContextProvider';
 import { store as nfdOnboardingStore } from '../../../store';
 import classNames from 'classnames';
 import { setFlow } from '../../../utils/api/flow';
 import {
 	generateSiteGenMeta,
@@ -45,18 +45,25 @@
 	}, [ newfoldBrand ] );
 	const location = useLocation();
 
-	const { currentData, initialize, pluginInstallHash, siteGenErrorStatus } =
-		useSelect( ( select ) => {
-			return {
-				currentData:
-					select( nfdOnboardingStore ).getCurrentOnboardingData(),
-				initialize: select( nfdOnboardingStore ).getInitialize(),
-				pluginInstallHash:
-					select( nfdOnboardingStore ).getPluginInstallHash(),
-				siteGenErrorStatus:
-					select( nfdOnboardingStore ).getSiteGenErrorStatus(),
-			};
-		} );
+	const {
+		currentData,
+		initialize,
+		pluginInstallHash,
+		siteGenErrorStatus,
+		interactionDisabled,
+	} = useSelect( ( select ) => {
+		return {
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			initialize: select( nfdOnboardingStore ).getInitialize(),
+			pluginInstallHash:
+				select( nfdOnboardingStore ).getPluginInstallHash(),
+			siteGenErrorStatus:
+				select( nfdOnboardingStore ).getSiteGenErrorStatus(),
+			interactionDisabled:
+				select( nfdOnboardingStore ).getInteractionDisabled(),
+		};
+	} );
 
 	const { setCurrentOnboardingData, updateSiteGenErrorStatus } =
 		useDispatch( nfdOnboardingStore );
@@ -172,21 +179,24 @@
 			initializePlugins( pluginInstallHash );
 			setInterval( cronTrigger, 45000 );
 		}
 	}, [ initialize ] );
 
 	useEffect( () => {
 		syncStoreToDB();
 		generateSiteGenData();
 		handlePreviousStepTracking();
 	}, [ location.pathname ] );
 
 	useEffect( () => {
-		if ( prevSiteGenErrorStatus.current === true && siteGenErrorStatus === false ) {
+		if (
+			prevSiteGenErrorStatus.current === true &&
+			siteGenErrorStatus === false
+		) {
 			generateSiteGenData();
 			syncStoreToDB();
 		}
 		prevSiteGenErrorStatus.current = siteGenErrorStatus;
 	}, [ siteGenErrorStatus ] );
 
 	useEffect( () => {
 		initializeThemes();
@@ -205,6 +215,7 @@
 				content={ <Content /> }
 				sidebar={ <Sidebar /> }
 				footer={ <Footer /> }
+				interactionDisabled={ interactionDisabled }
 			/>
 		</ThemeProvider>
 	);

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -60,6 +60,7 @@
 		labels,
 		className,
 		shortcuts,
+		interactionDisabled,
 	},
 	ref
 ) {
@@ -182,6 +183,9 @@
 					{ footer }
 				</div>
 			) }
+			{ interactionDisabled && (
+				<div className="nfd-interface-interface-skeleton__overlay--disabled"></div>
+			) }
 		</div>
 	);
 }

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss

@@ -38,13 +38,28 @@ html.nfd-interface-interface-skeleton__html-container {
 			top: 0;
 		}
 	}
+
+	&__overlay {
+		// z-index: to display over sidebar.
+		&--disabled {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: rgba(var(--nfd-onboarding-secondary-rgb), 0.3);
+			cursor: not-allowed;
+			z-index: 1000001;
+		}
+	}
 }
 
 .nfd-interface-interface-skeleton__editor {
 	display: flex;
 	flex-direction: column;
 	flex: 0 1 100%;
 	overflow: hidden;
+	position: relative;
 }
 
 @include editor-left(".nfd-interface-interface-skeleton");
@@ -197,4 +212,3 @@ html.nfd-interface-interface-skeleton__html-container {
 		}
 	}
 }
-

src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js

@@ -1,4 +1,4 @@
 import { Icon, chevronDown, reusableBlock } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { useRef, useState, useEffect, memo } from '@wordpress/element';
@@ -13,26 +13,31 @@
 		onRenameItemSelect,
 		onViewAll,
 		isLargeViewport,
+		onToggle,
 	} ) => {
+		const onMenuItemClick = ( action ) => () => {
+			action();
+			onToggle();
+		};
 		return (
 			<MenuGroup className="nfd-onboarding-header__version_dropdown-menu">
 				{ ! isLargeViewport && (
 					<>
-						<MenuItem onClick={ onRegenerate }>
+						<MenuItem onClick={ onMenuItemClick( onRegenerate ) }>
 							<Icon icon={ reusableBlock } />
 							{ __( 'Regenerate', 'wp-module-onboarding' ) }
 						</MenuItem>
-						<MenuItem onClick={ onCustomize }>
+						<MenuItem onClick={ onMenuItemClick( onCustomize ) }>
 							<div className="nfd-onboarding-header__version_dropdown-menu__customize-button__icon"></div>
 							{ __( 'Customize', 'wp-module-onboarding' ) }
 						</MenuItem>
 					</>
 				) }
 
-				<MenuItem onClick={ onRenameItemSelect }>
+				<MenuItem onClick={ onMenuItemClick( onRenameItemSelect ) }>
 					{ __( 'Rename', 'wp-module-onboarding' ) }
 				</MenuItem>
-				<MenuItem onClick={ onViewAll }>
+				<MenuItem onClick={ onMenuItemClick( onViewAll ) }>
 					{ __( 'View All', 'wp-module-onboarding' ) }
 				</MenuItem>
 			</MenuGroup>
@@ -126,13 +131,14 @@
 						/>
 					</div>
 				) }
-				renderContent={ () => (
+				renderContent={ ( { onToggle } ) => (
 					<DropDownMenu
 						onRegenerate={ onRegenerate }
 						onCustomize={ onCustomize }
 						onRenameItemSelect={ onRenameItemSelect }
 						onViewAll={ onViewAll }
 						isLargeViewport={ isLargeViewport }
+						onToggle={ onToggle }
 					/>
 				) }
 			/>

src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { Fill } from '@wordpress/components';
 import { Icon, chevronRight } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useState, render } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
@@ -36,6 +36,7 @@
 		setCurrentOnboardingData,
 		setSidebarActiveView,
 		setIsSidebarOpened,
+		setInteractionDisabled,
 	} = useDispatch( nfdOnboardingStore );
 	const { currentData, sideBarView, isSidebarOpened } = useSelect(
 		( select ) => {
@@ -214,7 +215,7 @@
 
 	useEffect( () => {
 		handleCustomize();
 	}, [] );
 
 	useEffect( () => {
 		if ( currentData?.sitegen?.homepages?.active ) {
@@ -222,6 +223,18 @@
 		}
 	}, [ currentData ] );
 
+	useEffect( () => {
+		if ( isSaving || isRegenerating ) {
+			setInteractionDisabled( true );
+		} else {
+			setInteractionDisabled( false );
+		}
+
+		return () => {
+			setInteractionDisabled( false );
+		};
+	}, [ isSaving, isRegenerating ] );
+
 	return (
 		<>
 			<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_START }` }>
@@ -299,9 +312,9 @@
 						>
 							{ isLargeViewport
 								? __(
-										'Save & Continue',
-										'wp-module-onboarding'
-								  )
+									'Save & Continue',
+									'wp-module-onboarding'
+								)
 								: __( 'Next', 'wp-module-onboarding' ) }
 						</div>
 						{ isSaving ? (

src/OnboardingSPA/store/actions.js

@@ -326,3 +326,10 @@ export function updateSiteGenErrorStatus( siteGenErrorStatus ) {
 		siteGenErrorStatus,
 	};
 }
+
+export function setInteractionDisabled( interactionDisabled ) {
+	return {
+		type: 'SET_INTERACTION_DISABLED',
+		interactionDisabled,
+	};
+}

src/OnboardingSPA/store/reducer.js

@@ -34,6 +34,7 @@ export function flow(
 			},
 		},
 		chapter: undefined,
+		interactionDisabled: false,
 	},
 	action
 ) {
@@ -121,6 +122,11 @@ export function flow(
 				...state,
 				chapter: action.chapter,
 			};
+		case 'SET_INTERACTION_DISABLED':
+			return {
+				...state,
+				interactionDisabled: action.interactionDisabled,
+			};
 	}
 
 	return state;

src/OnboardingSPA/store/selectors.js

@@ -470,3 +470,7 @@ export function getCustomizeSidebarData( state ) {
 export function getSiteGenErrorStatus( state ) {
 	return state.data.flowData.sitegen.siteGenErrorStatus;
 }
+
+export function getInteractionDisabled( state ) {
+	return state.flow.interactionDisabled;
+}