Site error page

src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js

@@ -8,18 +8,23 @@ import classNames from 'classnames';
 import { THEME_LIGHT } from '../../../../../constants';
 import bytes from 'bytes';
 import { Icon, closeSmall } from '@wordpress/icons';
+import { store as nfdOnboardingStore } from '../../../../store';
+import { useDispatch } from '@wordpress/data';
 
 const ImageUploaderWithText = ( { image, imageSetter } ) => {
 	const inputRef = useRef( null );
 	const { theme } = useContext( ThemeContext );
 	const [ isUploading, setIsUploading ] = useState( false );
 	const [ onDragActive, setOnDragActive ] = useState( false );
 
+	const { updateSiteGenErrorStatus } = useDispatch( nfdOnboardingStore );
+
 	async function updateItem( fileData ) {
 		if ( fileData ) {
 			setIsUploading( true );
 			const res = await uploadImage( fileData );
 			if ( ! res?.body ) {
+				updateSiteGenErrorStatus( true );
 				return setIsUploading( false );
 			}
 			const id = res.body?.id;
@@ -31,7 +36,6 @@ const ImageUploaderWithText = ( { image, imageSetter } ) => {
 				fileSize: fileData?.size,
 			} );
 		}
-
 		setIsUploading( false );
 	}
 

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

@@ -20,7 +20,11 @@
 import { init as initializePlugins } from '../../../utils/api/plugins';
 import { init as initializeThemes } from '../../../utils/api/themes';
 import { trigger as cronTrigger } from '../../../utils/api/cronTrigger';
-import { MAX_RETRIES_SITE_GEN } from '../../../../constants';
+import {
+	MAX_RETRIES_SITE_GEN,
+	SKIP_FLOW_ERROR_CODE_DATABASE,
+	SKIP_FLOW_ERROR_CODE_20,
+} from '../../../../constants';
 
 // Wrapping the NewfoldInterfaceSkeleton with the HOC to make theme available
 const ThemedNewfoldInterfaceSkeleton = themeToggleHOC(
@@ -41,24 +45,38 @@
 	}, [ newfoldBrand ] );
 	const location = useLocation();
 
-	const { currentData, initialize, pluginInstallHash } = useSelect(
-		( select ) => {
+	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 { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore );
+	const { setCurrentOnboardingData, updateSiteGenErrorStatus } =
+		useDispatch( nfdOnboardingStore );
 
 	async function syncStoreToDB() {
 		if ( currentData ) {
 			//Set the Flow Data and sync store and DB
-			setFlow( currentData );
+			const result = await setFlow( currentData );
+			if ( result?.error !== null ) {
+				switch ( result?.error.code ) {
+					case SKIP_FLOW_ERROR_CODE_DATABASE:
+						break;
+					case SKIP_FLOW_ERROR_CODE_20:
+						break;
+					default:
+						currentData.sitegen.siteGenErrorStatus = true;
+						updateSiteGenErrorStatus( true );
+						break;
+				}
+			}
 		}
 	}
 
@@ -68,33 +86,35 @@
 		skipCache,
 		retryCount = 1
 	) {
-		return new Promise( () =>
-			generateSiteGenMeta( siteInfo, identifier, skipCache )
-				.then( ( data ) => {
-					if ( data.body !== null ) {
-						currentData.sitegen.siteGenMetaStatus.currentStatus += 1;
-						if (
-							currentData.sitegen.siteGenMetaStatus
-								.currentStatus ===
-							currentData.sitegen.siteGenMetaStatus.totalCount
-						) {
-							currentData.sitegen.skipCache = false;
-						}
-						setCurrentOnboardingData( currentData );
-					} else if ( retryCount < MAX_RETRIES_SITE_GEN ) {
-						performSiteGenMetaGeneration(
-							siteInfo,
-							identifier,
-							skipCache,
-							retryCount + 1
-						);
-					}
-				} )
-				.catch( ( err ) => {
-					/* eslint-disable no-console */
-					console.log( err );
-				} )
-		);
+		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;
+				}
+				setCurrentOnboardingData( currentData );
+			}
+		} catch ( err ) {
+			if ( retryCount < MAX_RETRIES_SITE_GEN ) {
+				performSiteGenMetaGeneration(
+					siteInfo,
+					identifier,
+					skipCache,
+					retryCount + 1
+				);
+			} else {
+				currentData.sitegen.siteGenErrorStatus = true;
+				updateSiteGenErrorStatus( true );
+			}
+		}
 	}
 
 	async function generateSiteGenData() {
@@ -107,7 +127,6 @@
 		) {
 			return;
 		}
-
 		let identifiers = await getSiteGenIdentifiers();
 		identifiers = identifiers.body;
 
@@ -153,14 +172,21 @@
 			initializePlugins( pluginInstallHash );
 			setInterval( cronTrigger, 45000 );
 		}
 	}, [ initialize ] );
 
 	useEffect( () => {
 		syncStoreToDB();
 		generateSiteGenData();
 		handlePreviousStepTracking();
 	}, [ location.pathname ] );
 
+	useEffect( () => {
+		if ( ! siteGenErrorStatus ) {
+			generateSiteGenData();
+			syncStoreToDB();
+		}
+	}, [ siteGenErrorStatus ] );
+
 	useEffect( () => {
 		initializeThemes();
 		initializeSettings();

src/OnboardingSPA/components/SiteGenError/contents.js

@@ -0,0 +1,23 @@
+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,152 @@
+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 );
+	};
+	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;