Merge pull request #652 from newfold-labs/add/PRESS8-243-resume-or-restart-onboarding

Restart Onboarding

Author: officiallygod

includes/Services/StatusService.php

@@ -1,8 +1,10 @@
 <?php
 namespace NewfoldLabs\WP\Module\Onboarding\Services;
 
+use NewfoldLabs\WP\Module\Onboarding\Data\Brands;
 use NewfoldLabs\WP\Module\Onboarding\Data\Options;
 use NewfoldLabs\WP\Module\Onboarding\WP_Admin;
+use NewfoldLabs\WP\Module\Onboarding\Data\Config;
 
 /**
  * Tracks the Status of Onboarding.
@@ -14,7 +16,7 @@ class StatusService {
 	 *
 	 * @return void
 	 */
-	public static function handle_started() {
+	public static function handle_started(): void {
 		if ( 'started' !== get_option( Options::get_option_name( 'status' ) ) ) {
 			update_option( Options::get_option_name( 'status' ), 'started' );
 			do_action( 'newfold/onboarding/started' );
@@ -26,19 +28,91 @@ public static function handle_started() {
 	 *
 	 * @return void
 	 */
-	public static function handle_completed() {
+	public static function handle_completed(): void {
 		if ( 'started' === get_option( Options::get_option_name( 'status' ) ) ) {
 			update_option( Options::get_option_name( 'status' ), 'completed' );
+			self::update_onboarding_restart_status();
 			do_action( 'newfold/onboarding/completed' );
 		}
 	}
 
+	/**
+	 * Checks if the WordPress site was created within the last 9 months (275 days)
+	 * using the 'bluehost_plugin_install_date' option.
+	 *
+	 * @return bool True if the site was created within the last 275 days, false otherwise.
+	 */
+	private static function is_site_created_within_last_9_months(): bool {
+		$install_date_timestamp = get_option( Options::get_option_name( 'bluehost_plugin_install_date', false ) );
+
+		// If the option is not set or is invalid, return false
+		if ( ! $install_date_timestamp ) {
+			return false;
+		}
+
+		// Calculate the timestamp for 275 days ago (9 months)
+		$nine_months_ago = time() - ( 275 * 24 * 60 * 60 );
+
+		return $install_date_timestamp >= $nine_months_ago;
+	}
+
+	/**
+	 * Checks if the user is eligible to restart onboarding based on brand configuration and AI SiteGen capability.
+	 *
+	 * @return bool True if eligible, false otherwise.
+	 */
+	public static function is_onboarding_restart_eligible(): bool {
+		// Check if the brand is eligible for Restarting Onboarding
+		$brand_config = Brands::get_brands()[ NFD_ONBOARDING_PLUGIN_BRAND ]['config'] ?? array();
+		if ( empty( $brand_config['canRestartOnboarding'] ) || ! $brand_config['canRestartOnboarding'] ) {
+			return false;
+		}
+
+		// Check if AI SiteGen Hiive capability is active and the site was created in the last 9 months
+		if ( ! Config::has_ai_sitegen() || ! self::is_site_created_within_last_9_months() ) {
+			return false;
+		}
+
+		return true;
+	}
+
+	/**
+	 * Handles the flow data and updates the restart eligibility status based on total onboarding tries.
+	 *
+	 * @return void
+	 */
+	public static function update_onboarding_restart_status(): void {
+
+		// Don't do anything if the customer is not eligible
+		if ( ! self::is_onboarding_restart_eligible() ) {
+			return;
+		}
+
+		// Get flow data
+		$flow_data = get_option( Options::get_option_name( 'flow' ) );
+
+		if ( isset( $flow_data['onboardingRetries'] ) && ! empty( $flow_data['onboardingRetries'] ) ) {
+			// Increment the total onboarding tries
+			$flow_data['onboardingRetries']['retryCount'] = ( $flow_data['onboardingRetries']['retryCount'] ?? 0 ) + 1;
+
+			// Update the flow data with the incremented total onboarding tries count
+			update_option( Options::get_option_name( 'flow' ), $flow_data );
+
+			// Determine eligibility for restarting onboarding
+			$current_retry_count = $flow_data['onboardingRetries']['retryCount'];
+			$can_restart         = $current_retry_count < $flow_data['onboardingRetries']['maxRetryCount'];
+
+			// Update the eligibility status in wp_option
+			update_option( Options::get_option_name( 'can_restart' ), $can_restart );
+		}
+	}
+
 	/**
 	 * Begin tracking the Onboarding status in an option.
 	 *
 	 * @return void
 	 */
-	public static function track() {
+	public static function track(): void {
 		global $pagenow;
 
 		if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
@@ -49,7 +123,7 @@ public static function track() {
 			case 'index.php':
 				// If the page is not nfd-onboarding.
 				//phpcs:ignore
-				if ( ! isset( $_GET['page'] ) || WP_Admin::$slug !== \sanitize_text_field( $_GET['page'] ) ) {
+				if ( isset( $_GET['page'] ) && WP_Admin::$slug !== \sanitize_text_field( $_GET['page'] ) ) {
 					self::handle_completed();
 				}
 				break;

includes/WP_Admin.php

@@ -9,6 +9,7 @@
 use NewfoldLabs\WP\Module\Onboarding\Data\Services\SiteGenService;
 use NewfoldLabs\WP\Module\Onboarding\Data\Themes;
 use NewfoldLabs\WP\Module\Onboarding\Services\I18nService;
+use NewfoldLabs\WP\Module\Onboarding\Services\StatusService;
 
 /**
  * Register Admin Page, Assets & Admin functionality with WordPress.
@@ -32,6 +33,7 @@ public function __construct() {
 		\add_action( 'admin_menu', array( __CLASS__, 'register_page' ) );
 		\add_action( 'load-dashboard_page_' . self::$slug, array( __CLASS__, 'page_title' ), 9, 1 );
 		\add_action( 'load-dashboard_page_' . self::$slug, array( __CLASS__, 'initialize' ) );
+		\add_action( 'load-themes.php', array( __CLASS__, 'can_restart_onboarding' ) );
 		if ( 'sitegen' === Data::current_flow() ) {
 			\add_action( 'load-themes.php', array( __CLASS__, 'mark_sitegen_generated_themes' ) );
 			SiteGenService::pre_set_filter_wonder_blocks_transients();
@@ -179,6 +181,8 @@ public static function initialize() {
 		FlowService::initialize_data();
 
 		self::register_assets();
+
+		self::set_onboarding_restart_option();
 	}
 
 	/**
@@ -223,4 +227,73 @@ public static function mark_sitegen_generated_themes() {
 		\wp_enqueue_script( 'sitegen-theme-marker' );
 		\wp_enqueue_style( 'sitegen-theme-marker' );
 	}
+
+	/**
+	 * Sets the option in DB for the Initial Load of Onboarding
+	 *
+	 * @return void
+	 */
+	public static function set_onboarding_restart_option(): void {
+		// Check if the customer is eligible for onboarding restart
+		if ( StatusService::is_onboarding_restart_eligible() ) {
+			// Get the option name for 'can_restart'
+			$option_name = Options::get_option_name( 'can_restart' );
+
+			// Check if the option doesn't exist before adding it
+			if ( ! get_option( $option_name ) ) {
+				// Add the option if it doesn't exist
+				add_option( $option_name, true );
+			}
+		} else {
+			// Get the option name for 'can_restart'
+			$option_name = Options::get_option_name( 'can_restart' );
+
+			// Add the option if it doesn't exist
+			update_option( $option_name, false );
+		}
+	}
+
+	/**
+	 * Enqueue scripts that adds a new button to Restart Onboarding in themes.php
+	 *
+	 * @return void
+	 */
+	public static function can_restart_onboarding(): void {
+		$can_restart = get_option( Options::get_option_name( 'can_restart' ), false );
+
+		// If the customer in ineligible for restart don't enqueue scripts
+		if ( ! $can_restart || ! StatusService::is_onboarding_restart_eligible() ) {
+			return;
+		}
+
+		\wp_register_script(
+			'onboarding-restart-button',
+			NFD_ONBOARDING_BUILD_URL . '/onboarding-restart-button.js',
+			array(),
+			'1.0.0',
+			true
+		);
+
+		\wp_add_inline_script(
+			'onboarding-restart-button',
+			'var nfdOnboardingRestartMeta =' . wp_json_encode(
+				array(
+					'buttonText' => \__( 'Build with AI', 'wp-module-onboarding' ),
+					'buttonHref' => \admin_url( 'index.php?page=' . self::$slug ),
+				)
+			) . ';',
+			'before'
+		);
+
+		\wp_register_style(
+			'onboarding-restart-button',
+			NFD_ONBOARDING_BUILD_URL . '/onboarding-restart-button.css.css',
+			array(),
+			'1.0.0',
+			'all'
+		);
+
+		\wp_enqueue_script( 'onboarding-restart-button' );
+		\wp_enqueue_style( 'onboarding-restart-button' );
+	}
 } // END /NewfoldLabs/WP/Module/Onboarding/Admin()

package.json

@@ -21,9 +21,9 @@
         "webpack-merge": "^5.8.0"
     },
     "scripts": {
-        "build": "wp-scripts build ./src/onboarding.js ./src/Scripts/sitegen-theme-marker/sitegen-theme-marker.js ./src/Scripts/sitegen-theme-marker/sitegen-theme-marker.css",
+        "build": "wp-scripts build ./src/onboarding.js ./src/Scripts/sitegen-theme-marker/sitegen-theme-marker.js ./src/Scripts/sitegen-theme-marker/sitegen-theme-marker.css  ./src/Scripts/onboarding-restart-button/onboarding-restart-button.js ./src/Scripts/onboarding-restart-button/onboarding-restart-button.css",
         "format": "wp-scripts format ./src",
-        "start": "wp-scripts start ./src/onboarding.js ./src/Scripts/sitegen-theme-marker/sitegen-theme-marker.js ./src/Scripts/sitegen-theme-marker/sitegen-theme-marker.css",
+        "start": "wp-scripts start ./src/onboarding.js ./src/Scripts/sitegen-theme-marker/sitegen-theme-marker.js ./src/Scripts/sitegen-theme-marker/sitegen-theme-marker.css  ./src/Scripts/onboarding-restart-button/onboarding-restart-button.js ./src/Scripts/onboarding-restart-button/onboarding-restart-button.css",
         "set-version-bump": "node ./.github/scripts/set-version-bump.js && npm i && rm -rf ./build && npm run build && composer run i18n",
         "lint:js": "wp-scripts lint-js ./src",
         "lint:js:fix": "wp-scripts lint-js ./src --fix",

src/OnboardingSPA/steps/TheFork/index.js

@@ -21,13 +21,16 @@ import {
 	OnboardingEvent,
 	sendOnboardingEvent,
 } from '../../utils/analytics/hiive';
-import { ACTION_SITEGEN_FORK_OPTION_SELECTED } from '../../utils/analytics/hiive/constants';
+import {
+	ACTION_SITEGEN_FORK_OPTION_SELECTED,
+	ACTION_ONBOARDING_RESTARTED,
+} from '../../utils/analytics/hiive/constants';
 import { store as nfdOnboardingStore } from '../../store';
 import { DEFAULT_FLOW } from '../../data/flows/constants';
 
 const TheFork = () => {
-	const { migrationUrl, canMigrateSite, pluginInstallHash } =
-		useSelect( ( select ) => {
+	const { migrationUrl, canMigrateSite, pluginInstallHash } = useSelect(
+		( select ) => {
 			return {
 				migrationUrl: select( nfdOnboardingStore ).getMigrationUrl(),
 				canMigrateSite: select( nfdOnboardingStore ).canMigrateSite(),
@@ -36,7 +39,8 @@ const TheFork = () => {
 				pluginInstallHash:
 					select( nfdOnboardingStore ).getPluginInstallHash(),
 			};
-		} );
+		}
+	);
 	const {
 		setIsHeaderEnabled,
 		setSidebarActiveView,
@@ -58,6 +62,22 @@ const TheFork = () => {
 		initializePlugins( pluginInstallHash );
 	} );
 
+	useEffect( () => {
+		const url = new URL( window.location );
+		const restartParam = url.searchParams.get( 'restart' );
+
+		if ( restartParam ) {
+			// Remove the query parameter from the URL so it doesn't send events on refresh
+			url.searchParams.delete( 'restart' );
+
+			// Use the history API to update the URL without reloading the page
+			window.history.pushState( {}, '', url.toString() );
+			sendOnboardingEvent(
+				new OnboardingEvent( ACTION_ONBOARDING_RESTARTED, restartParam )
+			);
+		}
+	}, [] );
+
 	const oldFlow = window.nfdOnboarding?.oldFlow
 		? window.nfdOnboarding.oldFlow
 		: DEFAULT_FLOW;

src/OnboardingSPA/utils/analytics/hiive/constants.js

@@ -1,5 +1,6 @@
 export const ACTION_ONBOARDING_STARTED = 'onboarding_started';
 export const ACTION_ONBOARDING_COMPLETE = 'onboarding_complete';
+export const ACTION_ONBOARDING_RESTARTED = 'onboarding_restarted';
 export const ACTION_PAGEVIEW = 'pageview';
 export const ACTION_ONBOARDING_TOP_PRIORITY_SET = 'onboarding_top_priority_set';
 export const ACTION_ONBOARDING_STEP_SKIPPED = 'onboarding_step_skipped';
@@ -69,4 +70,5 @@ export const ACTION_TO_LABEL_KEY_MAP = {
 	[ ACTION_MIGRATION_INITIATED ]: 'path',
 	[ ACTION_MFE_MIGRATION_INITIATED ]: 'path',
 	[ ACTION_SITEGEN_ERROR_STATE_TRIGGERED ]: 'identifier',
+	[ ACTION_ONBOARDING_RESTARTED ]: 'location',
 };

src/Scripts/onboarding-restart-button/onboarding-restart-button.css

@@ -0,0 +1,68 @@
+/* Container for Build with AI */
+.build-with-ai {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	height: auto;
+	border: none;
+	box-shadow: none;
+	transition: background 100ms ease-in-out;
+}
+
+/* Link inside the Build with AI container */
+.build-with-ai__link {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	text-decoration: none;
+	height: 100%;
+}
+
+/* Icon container */
+.build-with-ai__icon {
+	flex-grow: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* Icon span */
+.build-with-ai__icon-span {
+	width: 100px;
+	height: 100px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: 25px;
+	margin-bottom: 10px;
+	border-radius: 50%;
+	color: #8c8f94;
+	font-size: 40px;
+	background-color: rgba(140, 143, 148, 0.1);
+	transition: background 100ms ease-in-out;
+}
+
+/* Text under the icon */
+.build-with-ai__text {
+	margin: 0;
+	color: #333;
+	font-weight: 400;
+	padding-bottom: 48px;
+	transition: color 100ms ease-in-out;
+}
+
+/* Hover states for the Build with AI component */
+.build-with-ai:hover {
+	background-color: #2271b1;
+}
+
+/* Hover effect on the icon span */
+.build-with-ai:hover .build-with-ai__icon-span {
+	background-color: #fff;
+}
+
+/* Hover effect on the text */
+.build-with-ai:hover .build-with-ai__text {
+	color: #fff;
+}