Site error page

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

@@ -53,7 +53,7 @@
 		}
 	);
 
-	const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore );
+	const { setCurrentOnboardingData, updateSiteGenErrorStatus } = useDispatch( nfdOnboardingStore );
 
 	async function syncStoreToDB() {
 		if ( currentData ) {
@@ -68,7 +68,8 @@
 		skipCache,
 		retryCount = 1
 	) {
 		return new Promise( () =>
+
 			generateSiteGenMeta( siteInfo, identifier, skipCache )
 				.then( ( data ) => {
 					if ( data.body !== null ) {
@@ -82,10 +83,14 @@
 							retryCount + 1
 						);
 					}
+					if ( retryCount === MAX_RETRIES_SITE_GEN ) {
+						updateSiteGenErrorStatus( true );
+					}
 				} )
 				.catch( ( err ) => {
 					/* eslint-disable no-console */
 					console.log( err );
+					updateSiteGenErrorStatus( true );
 				} )
 		);
 	}
@@ -146,20 +151,20 @@
 			initializePlugins( pluginInstallHash );
 			setInterval( cronTrigger, 45000 );
 		}
 	}, [ initialize ] );
 
 	useEffect( () => {
 		syncStoreToDB();
 		generateSiteGenData();
 		handlePreviousStepTracking();
 	}, [ location.pathname ] );
 
 	useEffect( () => {
 		initializeThemes();
 		initializeSettings();
 	}, [] );
 
 	return (
 		<ThemeProvider>
 			<ThemedNewfoldInterfaceSkeleton
 				id={ 'nfd-onboarding-skeleton--sitegen' }

src/OnboardingSPA/components/SiteGenError/contents.js

@@ -0,0 +1,20 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+	return {
+		heading: __( 'Sorry, we\'re having trouble communicating with our AI service.', 'wp-module-onboarding' ),
+		subHeading: __(
+			'Do you keep getting this error?',
+			'wp-module-onboarding'
+		),
+		message: __(
+			'If you continue to get this error, you may either continue creating your site without using our AI assistant, or you can ',
+			'wp-module-onboarding'
+		),
+		buttonText: __( 'Try again', 'wp-module-onboarding' ),
+		buttonSkip: __( 'Continue without AI', 'wp-module-onboarding' ),
+		buttonExit: __( 'exit to WordPress', 'wp-module-onboarding' ),
+	};
+};
+
+export default getContents;

src/OnboardingSPA/components/SiteGenError/index.js

@@ -0,0 +1,149 @@
+import { useViewportMatch } from '@wordpress/compose';
+import { useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import getContents from './contents';
+import { Button, Fill } from '@wordpress/components';
+import { store as nfdOnboardingStore } from '../../store';
+import CommonLayout from '../Layouts/Common';
+import OrbAnimation from '../OrbAnimation';
+import { SITEGEN_FLOW, DEFAULT_FLOW } from '../../data/flows/constants';
+import { validateFlow } from '../../data/flows/utils';
+import { resolveGetDataForFlow } from '../../data/flows';
+import { useNavigate } from 'react-router-dom';
+import {
+	FOOTER_SITEGEN,
+	FOOTER_END,
+	HEADER_SITEGEN,
+	pluginDashboardPage,
+} from '../../../constants';
+
+const SiteGenSiteError = () => {
+	const navigate = useNavigate();
+	const {
+		setIsHeaderEnabled,
+		setSidebarActiveView,
+		setHeaderActiveView,
+		setDrawerActiveView,
+		setHideFooterNav,
+		setIsHeaderNavigationEnabled,
+		updateAllSteps,
+		updateTopSteps,
+		updateRoutes,
+		updateDesignRoutes,
+		updateInitialize,
+		setCurrentOnboardingData,
+		updateSiteGenErrorStatus,
+	} = useDispatch( nfdOnboardingStore );
+
+	useEffect( () => {
+		setHideFooterNav( true );
+		setIsHeaderEnabled( true );
+		setSidebarActiveView( false );
+		setHeaderActiveView( HEADER_SITEGEN );
+		setIsHeaderNavigationEnabled( true );
+		setDrawerActiveView( false );
+	} );
+
+	const { brandConfig, currentData } = useSelect( ( select ) => {
+		return {
+			brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(),
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+		};
+	} );
+	const isLargeViewport = useViewportMatch( 'small' );
+
+	const content = getContents();
+	const oldFlow = window.nfdOnboarding?.oldFlow
+		? window.nfdOnboarding.oldFlow
+		: DEFAULT_FLOW;
+
+	const switchFlow = ( newFlow ) => {
+		if ( ! validateFlow( brandConfig, newFlow ) ) {
+			return false;
+		}
+		const currentFlow = window.nfdOnboarding.currentFlow;
+		const getData = resolveGetDataForFlow( newFlow );
+		const data = getData();
+		updateAllSteps( data.steps );
+		updateTopSteps( data?.topSteps );
+		updateRoutes( data.routes );
+		updateDesignRoutes( data?.designRoutes );
+		if ( SITEGEN_FLOW !== currentFlow ) {
+			window.nfdOnboarding.oldFlow = currentFlow;
+		}
+
+		window.nfdOnboarding.currentFlow = newFlow;
+		currentData.activeFlow = newFlow;
+		setCurrentOnboardingData( currentData );
+		if ( SITEGEN_FLOW !== newFlow ) {
+			updateInitialize( true );
+		}
+		navigate( data.steps[ 1 ].path );
+	};
+	const handleRetry = ( ) => {
+		updateSiteGenErrorStatus( false );
+		window.location.reload();
+	};
+	return (
+		<CommonLayout className="nfd-onboarding-step--site-gen__error">
+			<div className="nfd-onboarding-step--site-gen__error__container">
+				<div className="nfd-onboarding-step--site-gen__error__container__orb">
+					<OrbAnimation height={ `100px` } />
+				</div>
+				<div className="nfd-onboarding-step--site-gen__error__container__heading">
+					<p className="nfd-onboarding-step--site-gen__error__container__heading__text">
+						{ content.heading }
+					</p>
+				</div>
+				<div className="nfd-onboarding-step--site-gen__error__container__sub-heading">
+					<p className="nfd-onboarding-step--site-gen__error__container__sub-heading__text">
+						{ content.subHeading }
+					</p>
+					<p className="nfd-onboarding-step--site-gen__error__container__sub-heading__message">
+						{ content.message }
+						<a
+							className="nfd-onboarding-step--site-gen__error__container__sub-heading__exit"
+							href={ pluginDashboardPage }>
+							{ content.buttonExit }
+						</a>
+
+					</p>
+				</div>
+				<div className="nfd-onboarding-step--site-gen__error__container__buttons">
+					<Button
+						className="nfd-onboarding-step--site-gen__error__container__buttons__skip"
+						onClick={ () => {
+							switchFlow( oldFlow );
+						} }
+					>
+						{ content.buttonSkip }
+					</Button>
+					{ isLargeViewport ? (
+						<Button
+							className="nfd-onboarding-step--site-gen__error__container__buttons__retry"
+							onClick={ () => {
+								handleRetry();
+							} }
+						>
+							<p className="nfd-onboarding-button--site-gen-next--text">{ content.buttonText }</p>
+						</Button>
+					) : (
+						<Fill name={ `${ FOOTER_SITEGEN }/${ FOOTER_END }` }>
+							<Button
+								className="nfd-onboarding-step--site-gen__error__container__buttons__retry"
+								onClick={ () => {
+									handleRetry();
+								} }
+							>
+								<p className="nfd-onboarding-button--site-gen-next--text">{ content.buttonText }</p>
+							</Button>
+						</Fill>
+					) }
+				</div>
+			</div>
+		</CommonLayout>
+	);
+};
+
+export default SiteGenSiteError;

src/OnboardingSPA/components/SiteGenError/stylesheet.scss

@@ -0,0 +1,143 @@
+.nfd-onboarding-step {
+
+	&--site-gen {
+
+		&__error {
+			display: flex;
+			justify-content: center;
+
+			&__container {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				width: 544px;
+
+				@media (max-width: #{ ($break-small) }) {
+					margin: 16px;
+					margin-bottom: 100px;
+				}
+
+				@media (min-width: 2600px ) {
+					width: 1000px;
+				}
+
+				&__animation {
+					background-image: var(--sitegen-ai-animation);
+					background-repeat: no-repeat;
+					background-size: cover;
+					width: 250px;
+					height: 183px;
+				}
+
+				&__heading {
+					padding: 0;
+					width: 100%;
+					display: flex;
+					align-items: center;
+					flex-direction: row;
+					justify-content: center;
+
+					&__text {
+						line-height: 1;
+						font-weight: 500;
+						color: var(--nfd-onboarding-primary);
+						font-size: 18px;
+					}
+				}
+
+				&__sub-heading {
+					padding: 24px 24px 10px 24px;
+					// min-height: 115px;
+					margin-bottom: 50px;
+					border: solid #e01c1c 1px;
+					border-radius: 8px;
+					margin-top: 20px;
+
+					&__text {
+						margin: 0;
+						padding: 0;
+						text-align: left;
+						color: var(--nfd-onboarding-primary);
+						font-size: 16px;
+						font-weight: 600;
+					}
+
+					&__message {
+						margin-top: 10px;
+						padding: 0;
+						text-align: left;
+						color: var(--nfd-onboarding-primary);
+						font-size: 14px;
+						font-weight: 400;
+						// line-height: 0.5 !important;
+					}
+
+					&__exit {
+						font-size: 14px;
+						font-weight: 400;
+						color: var(--nfd-onboarding-primary);
+						margin: 0;
+						padding: 0;
+
+						&:hover {
+							text-decoration: underline;
+							color: var(--nfd-onboarding-primary);
+						}
+					}
+				}
+
+				&__buttons {
+					width: 100%;
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					justify-content: flex-end;
+
+					&__skip {
+						font-size: clamp(0.6rem, 0.755rem + 0.227vw, 1.3rem);
+						font-style: normal;
+						font-weight: 510;
+						margin-right: 24px;
+						color: var(--nfd-onboarding-primary);
+
+						&:hover {
+							text-decoration: underline;
+							color: var(--nfd-onboarding-primary);
+						}
+
+						@media (max-width: #{ ($break-small) }) {
+							margin-right: 0;
+						}
+					}
+
+					&__retry {
+						height: 50px;
+						display: flex;
+						cursor: pointer;
+						padding: 0 16px;
+						text-align: center;
+						border-radius: 8px;
+						align-items: center;
+						justify-content: center;
+						color: var(--nfd-onboarding-secondary);
+						background-color: var(--nfd-onboarding-primary);
+						font-size: clamp(0.5rem, 0.3864rem + 0.5682vw, 1.75rem);
+					}
+
+					@media (max-width: #{ ($break-small) }) {
+						justify-content: center;
+						margin-bottom: 50px;
+						margin-right: 0;
+					}
+				}
+
+			}
+
+			&--button {
+				padding: 0 35px;
+			}
+		}
+
+	}
+}

src/OnboardingSPA/components/StateHandlers/SitegenAi/contents.js

@@ -0,0 +1,34 @@
+import { __, sprintf } from '@wordpress/i18n';
+
+const getContents = ( brandName ) => {
+	return {
+		loader: {
+			title: sprintf(
+				/* translators: %s: Brand */
+				__( 'Preparing your %s design studio', 'wp-module-onboarding' ),
+				brandName
+			),
+			subtitle: __(
+				'Hang tight while we show you some of the best WordPress has to offer!',
+				'wp-module-onboarding'
+			),
+		},
+		errorState: {
+			title: sprintf(
+				/* translators: %s: Brand */
+				__( 'Preparing your %s design studio', 'wp-module-onboarding' ),
+				brandName
+			),
+			subtitle: __(
+				'Hang tight while we show you some of the best WordPress has to offer!',
+				'wp-module-onboarding'
+			),
+			error: __(
+				'Uh-oh, something went wrong. Please contact support.',
+				'wp-module-onboarding'
+			),
+		},
+	};
+};
+
+export default getContents;