diff --git a/src/OnboardingSPA/chapters/sitegen.js b/src/OnboardingSPA/chapters/sitegen.js index faaf53ad6..1a93c73ff 100644 --- a/src/OnboardingSPA/chapters/sitegen.js +++ b/src/OnboardingSPA/chapters/sitegen.js @@ -6,7 +6,6 @@ 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 { stepSiteGenBuilding } from '../steps/SiteGen/Building/step'; import { stepSiteGenPreview } from '../steps/SiteGen/Preview/step'; import { stepSiteGenEditor } from '../steps/SiteGen/Editor/step'; @@ -16,7 +15,6 @@ const steps = [ stepSiteGenSocialMedia, stepSiteGenSiteLogo, stepSiteGenExperience, - stepSiteGenBuilding, stepSiteGenPreview, stepSiteGenEditor, ]; diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js index 94cd18a97..dcf576d7f 100644 --- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js +++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js @@ -33,9 +33,10 @@ const SiteGenLoader = ( { autoNavigate = false } ) => { }, [] ); 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 ) * + ( currentData?.sitegen?.siteGenMetaStatus?.totalCount / 2 ) ) * 100; setPercentage( percentageValue ); }, [ currentData?.sitegen?.siteGenMetaStatus?.currentStatus ] ); diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index 1b28cdd1c..24f4a155f 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -119,12 +119,7 @@ const SiteGen = () => { 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; } let identifiers = await getSiteGenIdentifiers(); @@ -134,9 +129,6 @@ const SiteGen = () => { 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 ); const siteInfo = { @@ -181,7 +173,10 @@ const SiteGen = () => { }, [ location.pathname ] ); useEffect( () => { - if ( prevSiteGenErrorStatus.current === true && siteGenErrorStatus === false ) { + if ( + prevSiteGenErrorStatus.current === true && + siteGenErrorStatus === false + ) { generateSiteGenData(); syncStoreToDB(); } diff --git a/src/OnboardingSPA/steps/SiteGen/Building/index.js b/src/OnboardingSPA/steps/SiteGen/Building/index.js deleted file mode 100644 index 87bb72cad..000000000 --- a/src/OnboardingSPA/steps/SiteGen/Building/index.js +++ /dev/null @@ -1,48 +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, - } = useDispatch( nfdOnboardingStore ); - - useEffect( () => { - setIsHeaderEnabled( true ); - setSidebarActiveView( 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/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index 030a782ec..da97a33e5 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js @@ -6,12 +6,17 @@ 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, MAX_RETRIES_SITE_GEN } from '../../../../constants'; import { SiteGenPreviewSelectableCard } from '../../../components/LivePreview'; import getContents from './contents'; import HeartAnimation from './heartAnimation'; import RegeneratingSiteCard from './regeneratingCard'; -import { getHomepages, regenerateHomepage } from '../../../utils/api/siteGen'; +import { + getHomepages, + regenerateHomepage, + generateSiteGenMeta, + getSiteGenIdentifiers, +} from '../../../utils/api/siteGen'; import { getGlobalStyles } from '../../../utils/api/themes'; import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; @@ -20,7 +25,9 @@ const SiteGenPreview = () => { const [ homepages, setHomepages ] = useState( false ); const [ isRegenerating, setIsRegenerating ] = useState( false ); const [ isPreviewLoading, setIsPreviewLoading ] = useState( false ); + const [ isMetaApiSuccess, setIsMetaApiSuccess ] = useState( false ); const [ globalStyles, setGlobalStyles ] = useState( false ); + const [ failedApi, setFailedApi ] = useState( [] ); const prevSiteGenErrorStatus = useRef(); @@ -56,17 +63,107 @@ const SiteGenPreview = () => { updateInitialize( true ); }, [ currentData ] ); + useEffect( () => { + generateSiteGenData(); + }, [] ); + + useEffect( () => { + if ( isMetaApiSuccess ) { + loadHomepages(); + loadGlobalStyles(); + } + }, [ isMetaApiSuccess ] ); + useEffect( () => { if ( prevSiteGenErrorStatus.current === true && siteGenErrorStatus === false ) { - loadHomepages(); - loadGlobalStyles(); + if ( ! isMetaApiSuccess ) { + generateSiteGenData(); + } else { + loadHomepages(); + loadGlobalStyles(); + } } prevSiteGenErrorStatus.current = siteGenErrorStatus; }, [ siteGenErrorStatus ] ); + async function performSiteGenMetaGeneration( + siteInfo, + identifier, + skipCache, + retryCount = 1 + ) { + try { + const data = await generateSiteGenMeta( + siteInfo, + identifier, + skipCache + ); + if ( data.body !== null ) { + currentData.sitegen.siteGenMetaStatus.currentStatus += 1; + if ( + currentData.sitegen.siteGenMetaStatus.currentStatus === + currentData.sitegen.siteGenMetaStatus.totalCount + ) { + currentData.sitegen.skipCache = false; + setIsMetaApiSuccess( true ); + } + setCurrentOnboardingData( currentData ); + } + } catch ( err ) { + if ( retryCount < MAX_RETRIES_SITE_GEN ) { + performSiteGenMetaGeneration( + siteInfo, + identifier, + skipCache, + retryCount + 1 + ); + } else { + setFailedApi( ( prevState ) => { + if ( ! prevState.includes( identifier ) ) { + return [ ...prevState, identifier ]; + } + return prevState; + } ); + currentData.sitegen.siteGenErrorStatus = true; + updateSiteGenErrorStatus( true ); + setIsPreviewLoading( false ); + } + } + } + + async function generateSiteGenData() { + setIsPreviewLoading( true ); + // Start the API Requests when the loader is shown. + + 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 ); + identifiers = identifiers.slice( midIndex, identifiers.length ); + currentData.sitegen.siteGenMetaStatus.currentStatus = midIndex; + } + + 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 ); + } ); + } + const loadHomepages = async () => { setIsPreviewLoading( true ); if ( ! isEmpty( currentData.sitegen.homepages.data ) ) { @@ -104,11 +201,6 @@ const SiteGenPreview = () => { setGlobalStyles( globalStylesResponse.body ); }; - useEffect( () => { - loadHomepages(); - loadGlobalStyles(); - }, [] ); - const handlePreview = ( slug ) => { if ( ! ( slug in homepages ) ) { return false; diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index 4b00aa040..61c55c74f 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -86,7 +86,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";