Prevent onboarding re-entry

An error component will be shown to the user with an action to send them back to the dashboard.

Author: wpalani

includes/Services/StatusService.php

@@ -19,7 +19,8 @@ class StatusService {
 	 * @return bool True if the onboarding started was marked, false if it was already marked.
 	 */
 	public static function handle_started(): bool {
-		if ( 'started' !== get_option( Options::get_option_name( 'status' ) ) ) {
+		$status = get_option( Options::get_option_name( 'status' ) );
+		if ( 'started' !== $status && 'completed' !== $status ) {
 			update_option( Options::get_option_name( 'status' ), 'started' );
 			do_action( 'newfold/onboarding/started' );
 			return true;

src/app/components/AppBody/AppBody.js

@@ -1,11 +1,36 @@
 import { Routes, Route, useLocation } from 'react-router-dom';
-import { ErrorBoundary } from '@newfold/ui-component-library';
+import { ErrorBoundary as AppErrorBoundary } from '@newfold/ui-component-library';
 import { STEPS } from '@/steps';
 import { AnimateRoutes, ErrorBoundaryFallback } from '@/components';
 import { OnboardingEvent, sendOnboardingEvent } from '@/utils/analytics/hiive';
 import { ACTION_PAGEVIEW } from '@/utils/analytics/hiive/constants';
 
 const AppBody = () => {
+	/**
+	 * Check if any conditions prevent the onboarding from being accessed.
+	 * @return {boolean} True if the onboarding can be accessed, false otherwise.
+	 */
+	const canAccessOnboarding = () => {
+		const response = {
+			result: true,
+			error: null,
+		};
+
+		// Block if the onboarding has already been completed.
+		if ( 'completed' === window.nfdOnboarding?.runtime?.status ) {
+			response.result = false;
+			response.error = 'onboarding_completed';
+		}
+
+		// Block if missing 'hasAISiteGen' capability.
+		if ( ! window.NewfoldRuntime?.capabilities?.hasAISiteGen ) {
+			response.result = false;
+			response.error = 'no_sitegen_capability';
+		}
+
+		return response;
+	};
+
 	/**
 	 * Get the routes for the onboarding steps.
 	 * @return {Array} Array of <Route> components.
@@ -22,6 +47,26 @@ const AppBody = () => {
 		} );
 	};
 
+	/**
+	 * Boot the onboarding.
+	 * @return {React.ReactNode} The onboarding routes.
+	 */
+	const boot = () => {
+		// Check if the onboarding can be accessed.
+		const canBoot = canAccessOnboarding();
+		if ( ! canBoot.result ) {
+			throw new Error( canBoot.error );
+		}
+
+		return (
+			<AnimateRoutes>
+				<Routes>
+					{ getRoutes() }
+				</Routes>
+			</AnimateRoutes>
+		);
+	};
+
 	// Analytics: Track pageview events.
 	const location = useLocation();
 	useEffect( () => {
@@ -31,13 +76,9 @@ const AppBody = () => {
 	return (
 		<div className="nfd-onboarding-body nfd-flex nfd-justify-center nfd-py-20">
 			<div className="nfd-onboarding-body-container">
-				<ErrorBoundary FallbackComponent={ ErrorBoundaryFallback }>
-					<AnimateRoutes>
-						<Routes>
-							{ getRoutes() }
-						</Routes>
-					</AnimateRoutes>
-				</ErrorBoundary>
+				<AppErrorBoundary FallbackComponent={ ErrorBoundaryFallback }>
+					{ boot() }
+				</AppErrorBoundary>
 			</div>
 		</div>
 	);

src/app/components/ErrorBoundaryFallback/ErrorBoundaryFallback.js

@@ -1,10 +1,29 @@
 import { Button, Title } from '@newfold/ui-component-library';
-import errorImage from './nfd-err-boundary.png';
+import { pluginDashboardPage } from '@/data/constants';
+import errorImage from './nfd-err-boundary.svg';
 
-const ErrorBoundaryFallback = ( { error } ) => {
+const BootError = () => {
+	return (
+		<div className="nfd-onboarding-error-boot nfd-h-screen nfd-flex nfd-flex-col nfd-items-center nfd-justify-center nfd-gap-8 nfd-text-center nfd--mt-12 nfd-max-w-[425px]">
+			<img src={ errorImage } alt="Error occurred" width="290" />
+			<div>
+				<Title className="nfd-text-[22px]">{ __( 'Whoops! Looks Like You Took a Wrong Turn' ) }</Title>
+				<p className="nfd-mt-3 nfd-mb-5 nfd-text-tiny">{ __( "This page is not currently available. Let's send you back to your dashboard where all the good stuff is!" ) }</p>
+				<Button
+					size="large"
+					onClick={ () => window.location.href = pluginDashboardPage }
+				>
+					{ __( 'Go to Dashboard' ) }
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+const UnspecifiedError = () => {
 	return (
-		<div className="nfd-onboarding-error-boundary nfd-flex nfd-flex-col nfd-items-center nfd-gap-8 nfd-text-center nfd-pt-8">
-			<img src={ errorImage } alt="Error occurred" width="325" />
+		<div className="nfd-onboarding-error-unspecified nfd-flex nfd-flex-col nfd-items-center nfd-gap-8 nfd-text-center nfd-pt-8">
+			<img src={ errorImage } alt="Error occurred" width="290" />
 			<div>
 				<Title>{ __( 'Oops! Something Unexpected Happened' ) }</Title>
 				<p className="nfd-mt-2 nfd-mb-5">{ __( 'We encountered a temporary hiccup, please try again!' ) }</p>
@@ -14,4 +33,23 @@ const ErrorBoundaryFallback = ( { error } ) => {
 	);
 };
 
+const ErrorBoundaryFallback = ( { error } ) => {
+	const getErrorComponent = () => {
+		switch ( error.message ) {
+			case 'onboarding_completed':
+				return <BootError />;
+			case 'no_sitegen_capability':
+				return <BootError />;
+			default:
+				return <UnspecifiedError />;
+		}
+	};
+
+	return (
+		<div className="nfd-onboarding-error-boundary nfd-flex nfd-flex-col nfd-items-center">
+			{ getErrorComponent() }
+		</div>
+	);
+};
+
 export default ErrorBoundaryFallback;