Onboarding: Add profiler body class on initial load + respect skipped/completed flags (https://github.com/woocommerce/woocommerce-admin/pull/2300) (https://github.com/woocommerce/woocommerce-admin/pull/2318)

* Add profiler body class on initial load, and respect skipped/complete status.

* Handle PR feedback: Remove unnecessary global, add some todos, added a filter around the next step slug, generalized the is-loading class a bit.

plugins/woocommerce-admin/client/dashboard/index.js

@@ -22,9 +22,8 @@ export default class Dashboard extends Component {
 	renderDashboardOutput() {
 		const { query, path } = this.props;
 
-		// @todo This should be replaced by a check from the REST API response from #1897.
-		const profileWizardComplete = true;
-		if ( window.wcAdminFeatures.onboarding && ! profileWizardComplete ) {
+		// @todo This should check a selector client side, with wcSettings.showProfiler as initial state.
+		if ( window.wcAdminFeatures.onboarding && wcSettings.showProfiler ) {
 			return <ProfileWizard query={ query } />;
 		}
 

plugins/woocommerce-admin/client/layout/index.js

@@ -40,6 +40,7 @@ export class PrimaryLayout extends Component {
 class Layout extends Component {
 	componentDidMount() {
 		this.recordPageViewTrack();
+		document.body.classList.remove( 'woocommerce-admin-is-loading' );
 	}
 
 	componentDidUpdate( prevProps ) {

plugins/woocommerce-admin/client/stylesheets/shared/_reset.scss

@@ -126,3 +126,26 @@
 		}
 	}
 }
+
+/* Hide wp-admin and WooCommerce elements when loading the WooCommerce Admin App */
+.woocommerce-admin-is-loading {
+	#adminmenumain,
+	#wpadminbar,
+	.woocommerce-layout__header,
+	.update-nag,
+	.woocommerce-store-alerts,
+	.woocommerce-message,
+	.notice,
+	.error,
+	.updated {
+		display: none;
+	}
+
+	#wpcontent {
+		margin-left: 0;
+	}
+
+	#wpbody {
+		padding-top: 0;
+	}
+}

plugins/woocommerce-admin/includes/api/class-wc-admin-rest-onboarding-plugins-controller.php

@@ -206,13 +206,14 @@ class WC_Admin_REST_Onboarding_Plugins_Controller extends WC_REST_Data_Controlle
 			return new WP_Error( 'woocommerce_rest_jetpack_not_active', __( 'Jetpack is not installed or active.', 'woocommerce-admin' ), 404 );
 		}
 
-		$redirect_url = esc_url_raw(
+		$next_step_slug = apply_filters( 'woocommerce_onboarding_after_jetpack_step', 'store-details' );
+		$redirect_url   = esc_url_raw(
 			add_query_arg(
 				array(
 					'page' => 'wc-admin',
 				),
 				admin_url( 'admin.php' )
-			) . '#/?step=details'
+			) . '#/?step=' . $next_step_slug
 		);
 
 		$connect_url = Jetpack::init()->build_connect_url( true, $redirect_url, 'woocommerce-setup-wizard' );

plugins/woocommerce-admin/includes/api/class-wc-admin-rest-onboarding-profile-controller.php

@@ -193,6 +193,13 @@ class WC_Admin_REST_Onboarding_Profile_Controller extends WC_REST_Data_Controlle
 	 */
 	public static function get_profile_properties() {
 		$properties = array(
+			'completed'       => array(
+				'type'              => 'bool',
+				'description'       => __( 'Whether or not the profile was completed.', 'woocommerce-admin' ),
+				'context'           => array( 'view' ),
+				'readonly'          => true,
+				'validate_callback' => 'rest_validate_request_arg',
+			),
 			'skipped'         => array(
 				'type'              => 'bool',
 				'description'       => __( 'Whether or not the profile was skipped.', 'woocommerce-admin' ),

plugins/woocommerce-admin/includes/class-wc-admin-loader.php

@@ -86,7 +86,7 @@ class WC_Admin_Loader {
 	 */
 	public static function is_feature_enabled( $feature ) {
 		$features = self::get_features();
-		return in_array( $feature, $features );
+		return in_array( $feature, $features, true );
 	}
 
 	/**
@@ -401,8 +401,6 @@ class WC_Admin_Loader {
 	 * @param string $admin_body_class Body class to add.
 	 */
 	public static function add_admin_body_classes( $admin_body_class = '' ) {
-		global $hook_suffix;
-
 		if ( ! self::is_admin_page() && ! self::is_embed_page() ) {
 			return $admin_body_class;
 		}
@@ -413,6 +411,12 @@ class WC_Admin_Loader {
 			$classes[] = 'woocommerce-embed-page';
 		}
 
+		// Some routes or features like onboarding hide the wp-admin navigation and masterbar. Setting `woocommerce_admin_is_loading` to true allows us
+		// to premeptively hide these elements while the JS app loads. This class is removed when `<Layout />` is rendered.
+		if ( self::is_admin_page() && apply_filters( 'woocommerce_admin_is_loading', false ) ) {
+			$classes[] = 'woocommerce-admin-is-loading';
+		}
+
 		$features = self::get_features();
 		foreach ( $features as $feature_key ) {
 			$classes[] = sanitize_html_class( 'woocommerce-feature-enabled-' . $feature_key );

plugins/woocommerce-admin/includes/features/onboarding/class-wc-admin-onboarding.php

@@ -26,6 +26,59 @@ class WC_Admin_Onboarding {
 		}
 		return self::$instance;
 	}
+
+	/**
+	 * Hook into WooCommerce.
+	 */
+	public function __construct() {
+		add_action( 'woocommerce_components_settings', array( $this, 'component_settings' ), 20 ); // Run after WC_Admin_Loader.
+		add_filter( 'woocommerce_admin_is_loading', array( $this, 'is_loading' ) );
+	}
+
+	/**
+	 * Returns true if the profiler should be displayed (not completed and not skipped).
+	 *
+	 * @return bool
+	 */
+	public function should_show_profiler() {
+		// @todo Remove this once we have a proper way to dismiss the profiler.
+		if ( ! defined( 'WOOCOMMERCE_ADMIN_DEV_SHOW_PROFILER' ) || false === WOOCOMMERCE_ADMIN_DEV_SHOW_PROFILER ) {
+			return false;
+		}
+		$onboarding_data = get_option( 'wc_onboarding_profile', array() );
+
+		// @todo Update this to compare to proper bools (https://github.com/woocommerce/woocommerce-admin/issues/2299).
+		$is_completed = isset( $onboarding_data['completed'] ) && 'true' === $onboarding_data['completed'];
+		$is_skipped   = isset( $onboarding_data['skipped'] ) && 'true' === $onboarding_data['skipped'];
+
+		// @todo When merging to WooCommerce Core, we should set the `completed` flag to true during the upgrade progress.
+		// https://github.com/woocommerce/woocommerce-admin/pull/2300#discussion_r287237498.
+		return $is_completed || $is_skipped ? false : true;
+	}
+
+	/**
+	 * Add profiler status to component settings.
+	 *
+	 * @param array $settings Component settings.
+	 */
+	public function component_settings( $settings ) {
+		$settings['showProfiler'] = $this->should_show_profiler();
+		return $settings;
+	}
+
+	/**
+	 * Let the app know that we will be showing the onboarding route, so wp-admin elements should be hidden while loading.
+	 *
+	 * @param bool $is_loading Indicates if the `woocommerce-admin-is-loading` should be appended or not.
+	 * @return bool
+	 */
+	public function is_loading( $is_loading ) {
+		$show_profiler = $this->should_show_profiler();
+		if ( ! $show_profiler ) {
+			return $is_loading;
+		}
+		return true;
+	}
 }
 
 new WC_Admin_Onboarding();

plugins/woocommerce-admin/tests/api/onboarding-profile.php

@@ -97,7 +97,8 @@ class WC_Tests_API_Onboarding_Profiles extends WC_REST_Unit_Test_Case {
 		$data       = $response->get_data();
 		$properties = $data['schema']['properties'];
 
-		$this->assertCount( 9, $properties );
+		$this->assertCount( 10, $properties );
+		$this->assertArrayHasKey( 'completed', $properties );
 		$this->assertArrayHasKey( 'skipped', $properties );
 		$this->assertArrayHasKey( 'account_type', $properties );
 		$this->assertArrayHasKey( 'industry', $properties );