diff --git a/src/OnboardingSPA/chapters/siteGen/features.js b/src/OnboardingSPA/chapters/siteGen/features.js
index 118f82766..1ac7a4ec4 100644
--- a/src/OnboardingSPA/chapters/siteGen/features.js
+++ b/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,
diff --git a/src/OnboardingSPA/chapters/sitegen.js b/src/OnboardingSPA/chapters/sitegen.js
new file mode 100644
index 000000000..1a93c73ff
--- /dev/null
+++ b/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,
+} );
diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
index 90027c7a6..d8a5297d6 100644
--- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
+++ b/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 ) *
diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js
index 69ea1625f..6905a0cf5 100644
--- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js
+++ b/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 (
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/index.js b/src/OnboardingSPA/steps/SiteGen/Building/index.js
deleted file mode 100644
index 053e8f10e..000000000
--- a/src/OnboardingSPA/steps/SiteGen/Building/index.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import CommonLayout from '../../../components/Layouts/Common';
-
-import { memo, useEffect } from '@wordpress/element';
-
-import { useDispatch } from '@wordpress/data';
-import { store as nfdOnboardingStore } from '../../../store';
-import { HEADER_SITEGEN } from '../../../../constants';
-
-import SiteGenLoader from '../../../components/Loaders/SiteGenLoader';
-import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi';
-
-const SiteGenBuilding = () => {
- const {
- setIsHeaderEnabled,
- setSidebarActiveView,
- setHeaderActiveView,
- setDrawerActiveView,
- setIsHeaderNavigationEnabled,
- } = useDispatch( nfdOnboardingStore );
-
- useEffect( () => {
- setIsHeaderEnabled( true );
- setSidebarActiveView( false );
- setIsHeaderNavigationEnabled( false );
- setHeaderActiveView( HEADER_SITEGEN );
- setDrawerActiveView( false );
- } );
- return (
-
-
-
-
-
-
-
-
- );
-};
-
-export default memo( SiteGenBuilding );
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/step.js b/src/OnboardingSPA/steps/SiteGen/Building/step.js
deleted file mode 100644
index 2cd24d672..000000000
--- a/src/OnboardingSPA/steps/SiteGen/Building/step.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { copy } from '@wordpress/icons';
-import { lazy } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Step } from '../../../data/models/Step';
-
-const SiteGenBuilding = lazy( () => import( './index' ) );
-
-export const stepSiteGenBuilding = new Step( {
- path: '/sitegen/step/building',
- title: __( 'Page Layouts', 'wp-module-onboarding' ),
- Component: SiteGenBuilding,
- icon: copy,
- sidebars: {
- LearnMore: {
- SidebarComponents: [],
- },
- },
-} );
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
deleted file mode 100644
index b698b0a4b..000000000
--- a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-@property --angle {
- inherits: true;
- syntax: "";
- initial-value: 90deg;
-}
-
-@keyframes borderRotate {
-
- 100% {
- --angle: 360deg;
- }
-}
-
-.nfd-onboarding-step--site-gen__building {
- margin: 20px;
- padding: 20px;
- position: relative;
- display: flex;
- place-content: center;
- place-items: flex-start;
-}
-
-.site-gen__building {
-
- &_skimmer {
- max-width: 1800px;
-
- &--main {
- margin-bottom: 30px;
- background: rgba(var(--nfd-onboarding-primary-rgb), 0.05);
- box-shadow: 0 4px 30px rgba(var(--nfd-onboarding-secondary-rgb), 0.1);
- animation: borderRotate 3500ms infinite forwards;
- border: 0.25px solid rgba(var(--nfd-onboarding-secondary-rgb), 0.26);
- border-image: conic-gradient(from var(--angle), rgba(var(--nfd-onboarding-secondary-rgb), 0.26) calc(var(--angle) + 0.5deg), rgba(var(--nfd-onboarding-shimmer-color), 0.5) calc(var(--angle) + 1deg)) 30;
-
- @media (prefers-reduced-motion) {
- animation: none !important;
- }
- }
-
- &--header {
- height: 6vh;
- width: 90vw;
- min-height: 50px;
- }
-
- &--body {
- width: 90vw;
- height: calc(56vh - 150px);
- min-height: 250px;
- }
-
- &--footer {
- width: 90vw;
- display: flex;
- align-items: center;
- flex-direction: row;
- justify-content: space-between;
-
- &_left {
- width: 45vw;
- height: calc(38vh - 100px);
- min-height: 150px;
- }
-
- &_right {
- width: 37vw;
- height: calc(38vh - 100px);
- min-height: 150px;
- }
- }
- }
-
- &_loader__overlay {
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
-}
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
index dc268d267..6be5ffaca 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
@@ -89,7 +89,7 @@ const SiteGenExperience = () => {