Merge pull request #402 from newfold-labs/enhance/coming-soon-logic

Re-enabled exits and enhance the logic for the coming soon.

includes/Application.php

@@ -6,6 +6,8 @@
 use NewfoldLabs\WP\Module\Onboarding\Services\PluginService;
 use NewfoldLabs\WP\ModuleLoader\Container;
 use NewfoldLabs\WP\Module\Onboarding\Data\Options;
+use NewfoldLabs\WP\Module\Onboarding\Services\StatusService;
+
 use function NewfoldLabs\WP\ModuleLoader\container;
 
 /**
@@ -72,6 +74,10 @@ public function __construct( Container $container ) {
 			new WP_Admin();
 		}
 
+		if ( Permissions::is_authorized_admin() ) {
+			StatusService::track();
+		}
+
 		// Adds a transient to activate plugins in all scenarios.
 		PluginService::configure_activation_transient();
 

includes/RestApi/FlowController.php

@@ -5,6 +5,7 @@
 use NewfoldLabs\WP\Module\Onboarding\Permissions;
 use NewfoldLabs\WP\Module\Onboarding\Data\Services\FlowService;
 use NewfoldLabs\WP\Module\Onboarding\Services\PluginService;
+use NewfoldLabs\WP\Module\Onboarding\Services\StatusService;
 
 /**
  * Class FlowController
@@ -110,7 +111,9 @@ public function get() {
 	public function save_onboarding_flow_data( \WP_REST_Request $request ) {
 		$params = json_decode( $request->get_body(), true );
 
+		// Mark Onboarding as started only on the first REST API request from the React App.
 		update_option( Options::get_option_name( 'redirect' ), '0' );
+		StatusService::handle_started();
 
 		$flow_data = FlowService::update_data( $params );
 		if ( is_wp_error( $flow_data ) ) {

includes/RestApi/SettingsController.php

@@ -112,49 +112,6 @@ public function register_routes() {
 				),
 			)
 		);
-
-		\register_rest_route(
-			$this->namespace,
-			$this->rest_base . '/coming-soon',
-			array(
-				array(
-					'methods'             => \WP_REST_Server::CREATABLE,
-					'callback'            => array( $this, 'set_coming_soon' ),
-					'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
-					'args'                => $this->set_coming_soon_params(),
-				),
-			)
-		);
-	}
-
-	/**
-	 * Set query params for coming soon route.
-	 *
-	 * @return array
-	 */
-	public function set_coming_soon_params() {
-		return array(
-			'comingSoon' => array(
-				'type'     => 'boolean',
-				'required' => true,
-			),
-		);
-	}
-	/**
-	 * Endpoint to set Coming Soon for a website.
-	 *
-	 * @param \WP_REST_Request $request Request model.
-	 *
-	 * @return \WP_REST_Response|\WP_Error
-	 */
-	public function set_coming_soon( \WP_REST_Request $request ) {
-
-		$new_value = ( $request->get_param( 'comingSoon' ) ) ? 'true' : 'false';
-		update_option( 'nfd_coming_soon', $new_value );
-		return new \WP_REST_Response(
-			array(),
-			200
-		);
 	}
 
 	/**

includes/Services/StatusService.php

@@ -0,0 +1,60 @@
+<?php
+namespace NewfoldLabs\WP\Module\Onboarding\Services;
+
+use NewfoldLabs\WP\Module\Onboarding\Data\Options;
+use NewfoldLabs\WP\Module\Onboarding\WP_Admin;
+
+/**
+ * Tracks the Status of Onboarding.
+ */
+class StatusService {
+
+	/**
+	 * Handle Onboarding started event.
+	 *
+	 * @return void
+	 */
+	public static function handle_started() {
+		if ( 'started' !== get_option( Options::get_option_name( 'status' ) ) ) {
+			update_option( Options::get_option_name( 'status' ), 'started' );
+			do_action( 'newfold/onboarding/started' );
+		}
+	}
+
+	/**
+	 * Handles Onboarding completed event.
+	 *
+	 * @return void
+	 */
+	public static function handle_completed() {
+		if ( 'started' === get_option( Options::get_option_name( 'status' ) ) ) {
+			update_option( Options::get_option_name( 'status' ), 'completed' );
+			do_action( 'newfold/onboarding/completed' );
+		}
+	}
+
+	/**
+	 * Begin tracking the Onboarding status in an option.
+	 *
+	 * @return void
+	 */
+	public static function track() {
+		global $pagenow;
+
+		if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
+			return;
+		}
+
+		switch ( $pagenow ) {
+			case 'index.php':
+				// If the page is not nfd-onboarding.
+				//phpcs:ignore
+				if ( ! isset( $_GET['page'] ) || WP_Admin::$slug !== \sanitize_text_field( $_GET['page'] ) ) {
+					self::handle_completed();
+				}
+				break;
+			default:
+				self::handle_completed();
+		}
+	}
+}

src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js

@@ -5,6 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 
 import { store as nfdOnboardingStore } from '../../../store';
 import classNames from 'classnames';
+import ExitToWordPress from '../../ExitToWordPress';
 import Animate from '../../Animate';
 
 const NavPrimary = () => {
@@ -18,6 +19,11 @@ const NavPrimary = () => {
 	const { setDrawerActiveView } = useDispatch( nfdOnboardingStore );
 	return (
 		<Animate type={ 'fade-in' } duration="100ms" timingFunction="ease-in">
+			<ExitToWordPress
+				buttonClassName="nfd-onboarding-drawer__panel-back"
+				buttonVariant="tertiary"
+				origin="drawer-panel"
+			/>
 			<div className="nfd-onboarding-drawer__panel-menu">
 				<ul className="nfd-onboarding-drawer__panel-routes">
 					{ topSteps.map( ( step ) => {

src/OnboardingSPA/components/ExitToWordPress/index.js

@@ -20,7 +20,6 @@ import {
 	CATEGORY,
 } from '../../utils/analytics/hiive/constants';
 import { activateInitialPlugins } from '../../utils/api/plugins';
-import { setComingSoon } from '../../utils/api/comingSoon';
 
 /**
  * Self-contained button and confirmation modal for exiting Onboarding page.
@@ -102,7 +101,12 @@ const ExitToWordPress = ( {
 				}
 			}
 			setFlow( currentData );
-			setComingSoon( currentData?.data?.comingSoon );
+			if (
+				true === currentData?.data?.comingSoon &&
+				window.NewfoldRuntime?.comingSoon
+			) {
+				await window.NewfoldRuntime.comingSoon.enable();
+			}
 		}
 		activateInitialPlugins();
 		trackOnboardingEvent(

src/OnboardingSPA/components/Header/index.js

@@ -1,15 +1,33 @@
 import { memo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { useLocation } from 'react-router-dom';
 
 import HeaderEnd from './components/HeaderEnd';
+import ExitToWordPress from '../ExitToWordPress';
+import { store as nfdOnboardingStore } from '../../store';
 
 /**
  * Interface header rendered into header render prop in <InterfaceSkeleton />.
  *
  * @return {WPComponent} Header
  */
 const Header = () => {
+	const location = useLocation();
+
+	const { firstStep } = useSelect( ( select ) => {
+		return {
+			firstStep: select( nfdOnboardingStore ).getFirstStep(),
+		};
+	}, [] );
+
+	const isGettingStarted = firstStep?.path === location?.pathname;
 	return (
 		<div className="nfd-onboarding-header">
+			<div className="nfd-onboarding-header__start">
+				{ isGettingStarted ? (
+					<ExitToWordPress origin="header-first-step" />
+				) : null }
+			</div>
 			<div className="nfd-onboarding-header__center">
 				{ /* Centered Header Slot */ }
 			</div>

src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js

@@ -18,7 +18,6 @@ import {
 import { pluginDashboardPage } from '../../../../../constants';
 import { setFlow } from '../../../../utils/api/flow';
 import { ACTION_ONBOARDING_COMPLETE } from '../../../../utils/analytics/hiive/constants';
-import { setComingSoon } from '../../../../utils/api/comingSoon';
 
 const ChapterInterstitialLoader = () => {
 	const [ countdown, setCountdown ] = useState( 15 );
@@ -30,7 +29,12 @@ const ChapterInterstitialLoader = () => {
 		if ( currentData ) {
 			currentData.isComplete = new Date().getTime();
 			setFlow( currentData );
-			setComingSoon( currentData?.data?.comingSoon );
+			if (
+				true === currentData?.data?.comingSoon &&
+				window.NewfoldRuntime?.comingSoon
+			) {
+				window.NewfoldRuntime.comingSoon.enable();
+			}
 		}
 
 		activateInitialPlugins();

src/OnboardingSPA/steps/Complete/index.js

@@ -9,7 +9,6 @@ import { StepLoader } from '../../components/Loaders';
 import { StepErrorState } from '../../components/ErrorState';
 import { THEME_STATUS_INIT } from '../../../constants';
 import { DesignStateHandler } from '../../components/StateHandlers';
-import { setComingSoon } from '../../utils/api/comingSoon';
 
 const StepComplete = () => {
 	const {
@@ -39,10 +38,13 @@ const StepComplete = () => {
 	const contents = getContents( brandName );
 
 	const checkFlowComplete = async () => {
-		await Promise.all( [
-			completeFlowRequest(),
-			setComingSoon( currentData?.data?.comingSoon ),
-		] ).then( ( values ) =>
+		if (
+			true === currentData?.data?.comingSoon &&
+			window.NewfoldRuntime?.comingSoon
+		) {
+			await window.NewfoldRuntime.comingSoon.enable();
+		}
+		await Promise.all( [ completeFlowRequest() ] ).then( ( values ) =>
 			values.forEach( ( value ) => {
 				// If any Request returns False then Show Error
 				if ( ! value ) {