Merge pull request #478 from newfold-labs/remove-building-step-with-e…

…rror-ui

Remove building step with error screen UI

src/OnboardingSPA/chapters/siteGen/features.js

@@ -2,10 +2,9 @@ import { __ } from '@wordpress/i18n';
 
 import { CHAPTER_SITEGEN_FEATURES } from '../../../constants';
 import { Chapter } from '../../data/models/Chapter';
-import { stepSiteGenBuilding } from '../../steps/SiteGen/Building/step';
 import { stepSiteGenExperience } from '../../steps/SiteGen/Experience/step';
 
-const steps = [ stepSiteGenExperience, stepSiteGenBuilding ];
+const steps = [ stepSiteGenExperience ];
 
 export const siteGenFeatures = new Chapter( {
 	id: CHAPTER_SITEGEN_FEATURES,

src/OnboardingSPA/chapters/sitegen.js

@@ -0,0 +1,26 @@
+import { CHAPTER_SITEGEN } from '../../constants';
+import { Chapter } from '../data/models/Chapter';
+import { __ } from '@wordpress/i18n';
+import { stepSiteGenWelcome } from '../steps/SiteGen/Welcome/step';
+import { stepSiteGenSiteDetails } from '../steps/SiteGen/SiteDetails/step';
+import { stepSiteGenSiteLogo } from '../steps/SiteGen/SiteLogo/step';
+import { stepSiteGenSocialMedia } from '../steps/SiteGen/SocialMedia/step';
+import { stepSiteGenExperience } from '../steps/SiteGen/Experience/step';
+import { stepSiteGenPreview } from '../steps/SiteGen/Preview/step';
+import { stepSiteGenEditor } from '../steps/SiteGen/Editor/step';
+
+const steps = [
+	stepSiteGenWelcome,
+	stepSiteGenSiteDetails,
+	stepSiteGenSocialMedia,
+	stepSiteGenSiteLogo,
+	stepSiteGenExperience,
+	stepSiteGenPreview,
+	stepSiteGenEditor,
+];
+
+export const sitegen = new Chapter( {
+	id: CHAPTER_SITEGEN,
+	name: __( 'Site Generation', 'wp-module-onboarding' ),
+	steps,
+} );

src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js

@@ -33,6 +33,7 @@ const SiteGenLoader = ( { customNavPercentage, watcher = null } ) => {
 	}, [] );
 
 	useEffect( () => {
+		/* Divided the totalCount by 2 to complete the progress bar in the experience step */
 		const percentageValue =
 			( currentData?.sitegen?.siteGenMetaStatus?.currentStatus /
 				currentData?.sitegen?.siteGenMetaStatus?.totalCount ) *

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { useLocation } from 'react-router-dom';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -44,6 +44,13 @@ const ThemedNewfoldInterfaceSkeleton = themeToggleHOC(
 );
 
 const SiteGen = () => {
+	const [ failedApi, setFailedApi ] = useState( [] );
+
+	useEffect( () => {
+		document.body.classList.add( `nfd-brand-${ newfoldBrand }` );
+	}, [ newfoldBrand ] );
+	const location = useLocation();
+
 	const {
 		currentData,
 		initialize,
@@ -85,7 +92,6 @@ const SiteGen = () => {
 	useEffect( () => {
 		document.body.classList.add( `nfd-brand-${ newfoldBrand }` );
 	}, [ newfoldBrand ] );
-	const location = useLocation();
 
 	const prevSiteGenErrorStatus = useRef();
 
@@ -145,18 +151,21 @@ const SiteGen = () => {
 					retryCount + 1
 				);
 			}
-			updateSiteGenErrorStatus( true );
+
+			setFailedApi( ( prevState ) => {
+				if ( ! prevState.includes( identifier ) ) {
+					return [ ...prevState, identifier ];
+				}
+				return prevState;
+			} );
+			currentData.sitegen.siteGenErrorStatus = true;
+			setCurrentOnboardingData( currentData );
 		}
 	}
 
 	async function generateSiteGenData() {
 		// Start the API Requests when the loader is shown.
-		if (
-			! (
-				location.pathname.includes( 'experience' ) ||
-				location.pathname.includes( 'building' )
-			)
-		) {
+		if ( ! location.pathname.includes( 'experience' ) ) {
 			return;
 		}
 
@@ -167,24 +176,23 @@ const SiteGen = () => {
 			}, 1000 );
 		}
 
-		let identifiers = await getSiteGenIdentifiers();
-		identifiers = identifiers.body;
+		let identifiers;
+		if ( Array.isArray( failedApi ) && failedApi.length > 0 ) {
+			identifiers = failedApi;
+			setFailedApi( [] );
+		} else {
+			identifiers = await getSiteGenIdentifiers();
+			identifiers = identifiers.body;
 
-		const midIndex = Math.floor( identifiers.length / 2 );
-		if ( location.pathname.includes( 'experience' ) ) {
-			identifiers = identifiers.slice( 0, midIndex );
 			currentData.sitegen.siteGenMetaStatus.currentStatus = 0;
-		} else if ( location.pathname.includes( 'building' ) ) {
-			identifiers = identifiers.slice( midIndex );
-			currentData.sitegen.siteGenMetaStatus.currentStatus = midIndex;
+
+			setCurrentOnboardingData( currentData );
 		}
-		setCurrentOnboardingData( currentData );
 		const siteInfo = {
 			site_description: currentData.sitegen?.siteDetails?.prompt,
 		};
 
 		const skipCache = currentData.sitegen?.skipCache;
-
 		// Iterate over Identifiers and fire Requests!
 		identifiers.forEach( ( identifier ) => {
 			performSiteGenMetaGeneration( siteInfo, identifier, skipCache );
@@ -284,6 +292,7 @@ const SiteGen = () => {
 		initializeThemes();
 		initializeSettings();
 		getEditedEntityRecord( 'root', 'site' );
+		updateSiteGenErrorStatus( false );
 	}, [] );
 
 	return (

src/OnboardingSPA/steps/SiteGen/Experience/index.js

@@ -89,7 +89,7 @@ const SiteGenExperience = () => {
 				<div className={ 'nfd-sg-experience-level' }>
 					<SiteGenLoader
 						watcher={ selection !== 0 ? true : false }
-						customNavPercentage={ 50 }
+						customNavPercentage={ 100 }
 					/>
 					<CardWithOptions
 						title={ content.heading }

src/OnboardingSPA/styles/app.scss

@@ -87,7 +87,6 @@
 @import "../steps/SiteGen/SiteLogo/stylesheet";
 @import "../steps/SiteGen/SocialMedia/stylesheet";
 @import "../steps/SiteGen/Welcome/stylesheet";
-@import "../steps/SiteGen/Building/stylesheet";
 @import "../steps/SiteGen/Editor/stylesheet";
 @import "../steps/SiteGen/Editor/Header/stylesheet";