Merge pull request #28 from Automattic/add/v1.3

JPO v1.3
Automattic · May 12, 2016 · 232c9e9 · 232c9e9
2 parents cd1fb28 + 24fbb01
commit 232c9e9
Show file tree

Hide file tree

Showing 22 changed files with 204 additions and 19,859 deletions.
diff --git a/README.md b/README.md
@@ -46,12 +46,12 @@ An integration might look like this:
 
 class JetpackOnboardingTracking {
 	static function track_jpo_usage() {
-		add_action('jpo_started', array(__CLASS__, 'track_started'));
+		add_action('jpo_started', array(__CLASS__, 'track_started'), 10, 1);
 		add_action('jpo_step_skipped', array(__CLASS__, 'track_step_skipped'));
 		add_action('jpo_step_completed', array(__CLASS__, 'track_step_completed'));
 	}
 
-	static function track_started() {
+	static function track_started( $siteType ) { // 'personal' or 'business'
 		self::record_user_event('none', 'started');
 	}
 

diff --git a/class.jetpack-onboarding-end-points.php b/class.jetpack-onboarding-end-points.php
@@ -4,7 +4,6 @@ class Jetpack_Onboarding_EndPoints {
 	const STEP_STATUS_KEY = 'jpo_step_statuses';
 	const FIRSTRUN_KEY = 'jpo_firstrun';
 	const STARTED_KEY = 'jpo_started';
-	const DISABLED_KEY = 'jpo_disabled';
 	const CONTACTPAGE_ID_KEY = 'jpo_contactpage_id';
 	const MAX_THEMES = 3;
 	const NUM_RAND_THEMES = 3;
@@ -36,6 +35,7 @@ static function init_ajax() {
 			add_action( 'wp_ajax_jpo_step_complete', array( __CLASS__, 'step_complete' ) );
 			add_action( 'wp_ajax_jpo_started', array( __CLASS__, 'started' ) );
 			add_action( 'wp_ajax_jpo_disabled', array( __CLASS__, 'disabled' ) );
+			add_action( 'wp_ajax_jpo_closed', array( __CLASS__, 'closed' ) );
 			add_action( 'wp_ajax_jpo_reset_data', array( __CLASS__, 'reset_data' ) );
 		}
 	}
@@ -103,6 +103,7 @@ static function js_vars() {
 			'step_actions' => array(
 				'start' => 'jpo_started',
 				'disable' => 'jpo_disabled',
+				'close' => 'jpo_closed',
 				'view' => 'jpo_step_view',
 				'skip' => 'jpo_step_skip',
 				'complete' => 'jpo_step_complete'
@@ -321,17 +322,52 @@ static function set_default_publicize_config() {
 	static function started() {
 		check_ajax_referer( self::AJAX_NONCE, 'nonce' );
 		update_option( self::STARTED_KEY, true );
-		do_action('jpo_started');
+		do_action('jpo_started', $_REQUEST['siteType']);
 		wp_send_json_success( 'true' );
 	}
 
+	// These next two functions are the same,
+	// but the first == "NO" on opening screen,
+	// whereas the second happens if you close the metabox
 	static function disabled() {
 		check_ajax_referer( self::AJAX_NONCE, 'nonce' );
-		update_option( self::DISABLED_KEY, true );
+		self::hide_dashboard_widget();
 		do_action('jpo_disabled');
 		wp_send_json_success( 'true' );
 	}
 
+	static function closed() {
+		check_ajax_referer( self::AJAX_NONCE, 'nonce' );
+		self::hide_dashboard_widget();
+		wp_send_json_success( 'true' );
+	}
+
+	static function hide_dashboard_widget() {
+		$setting = get_user_option( get_current_user_id(), "metaboxhidden_dashboard" );
+
+		if ( !$setting || !is_array( $setting ) ) {
+			$setting = array();
+		}
+
+		if ( ! in_array( Jetpack_Onboarding_WelcomePanel::DASHBOARD_WIDGET_ID, $setting ) ) {
+			$setting[] = Jetpack_Onboarding_WelcomePanel::DASHBOARD_WIDGET_ID;
+			update_user_option( get_current_user_id(), "metaboxhidden_dashboard", $setting, true);
+		}
+	}
+
+	static function show_dashboard_widget() {
+		$setting = get_user_option( get_current_user_id(), "metaboxhidden_dashboard" );
+
+		if ( !$setting || !is_array( $setting ) ) {
+			$setting = array();
+		}
+
+		if ( in_array( Jetpack_Onboarding_WelcomePanel::DASHBOARD_WIDGET_ID, $setting ) ) {
+			$setting = array_diff( $setting, array(Jetpack_Onboarding_WelcomePanel::DASHBOARD_WIDGET_ID) );
+			update_user_option( get_current_user_id(), "metaboxhidden_dashboard", $setting, true);
+		}
+	}
+
 	static function step_view() {
 		check_ajax_referer( self::AJAX_NONCE, 'nonce' );
 		do_action('jpo_step_viewed', $_REQUEST['step']);

diff --git a/class.jetpack-onboarding-welcome-panel.php b/class.jetpack-onboarding-welcome-panel.php
@@ -3,77 +3,99 @@
 class Jetpack_Onboarding_WelcomePanel {
 
 	const CHANGE_TITLE_KEY = 'change-title';
+	const DASHBOARD_WIDGET_ID = 'jetpack-onboarding';
 
 	static function init() {
-		add_action( 'load-index.php', array( __CLASS__, 'init_welcome_panel' ) );
+		add_filter( 'update_user_metadata', array( __CLASS__, 'check_for_widget_visibility' ), 10, 5 );
+		add_action( 'wp_dashboard_setup', array( __CLASS__, 'add_dashboard_widgets' ) );
 	}
 
-	static function init_welcome_panel() {
-		$screen = get_current_screen();
-		if( $screen->base == 'dashboard' ) {
-
-			//reset data
-			if ( isset( $_GET['jpo_reset'] ) ) {
-				delete_option( Jetpack_Onboarding_EndPoints::STEP_STATUS_KEY );
-				delete_option( Jetpack_Onboarding_EndPoints::FIRSTRUN_KEY );
-				delete_option( Jetpack_Onboarding_EndPoints::STARTED_KEY );
-				delete_option( Jetpack_Onboarding_EndPoints::DISABLED_KEY );
-				delete_option( Jetpack_Onboarding_EndPoints::CONTACTPAGE_ID_KEY );
-
-				delete_option( 'jetpack_blog_token' );
-				delete_option( 'jetpack_id' );
-
-				//also reset JP data
-				delete_option( 'jetpack_options'        );
-
-				// Delete all non-compact options
-				delete_option( 'jetpack_register'       );
-				delete_option( 'jetpack_activated'      );
-				delete_option( 'jetpack_active_modules' );
-				delete_option( 'jetpack_do_activate'    );
-
-				// Delete all legacy options
-				delete_option( 'jetpack_was_activated'  );
-				delete_option( 'jetpack_auto_installed' );
-				delete_transient( 'jetpack_register'    );
-
-				wp_redirect(remove_query_arg('jpo_reset'));
-				die();
+	static function check_for_widget_visibility( $check, $object_id, $meta_key, $meta_value, $prev_value ) {
+		if ( $meta_key === 'metaboxhidden_dashboard' ) {
+			$prev_value = get_user_meta( $object_id, $meta_key, true );
+			$is_hidden = is_array( $meta_value ) && in_array( self::DASHBOARD_WIDGET_ID, $meta_value );
+			$was_hidden = is_array( $prev_value ) && in_array( self::DASHBOARD_WIDGET_ID, $prev_value );
+			if ( ! $was_hidden && $is_hidden ) {
+				do_action('jpo_closed');
+			} elseif ( $was_hidden && !$is_hidden ) {
+				do_action('jpo_opened');
 			}
+		}
 
-			if ( get_option( Jetpack_Onboarding_EndPoints::DISABLED_KEY, false ) ) {
-				return;
-			}
+		return $check;
+	}
+
+	static function add_dashboard_widgets() {
+		self::reset_data_if_necessary();
+
+		wp_add_dashboard_widget( self::DASHBOARD_WIDGET_ID, 'Jetpack Onboarding Wizard', array( __CLASS__, 'render_widget' ) ); //, $control_callback = null
 
-			//replace the usual welcome panel with our own
-			remove_action( 'welcome_panel', 'wp_welcome_panel' );
-			add_action( 'welcome_panel', array( __CLASS__, 'wp_welcome_panel' ) );
+		// Add to Screen menu
+		global $wp_meta_boxes;
 
-			// vars to inject into javascript
-			$jpo_vars = Jetpack_Onboarding_EndPoints::js_vars();
+		$dashboard = $wp_meta_boxes['dashboard']['normal']['core'];
+		$ours      = array( self::DASHBOARD_WIDGET_ID => $dashboard[self::DASHBOARD_WIDGET_ID] );
 
-			//IE-only shims
-			global $wp_scripts;
+		$wp_meta_boxes['dashboard']['normal']['core'] = array_merge( $ours, $dashboard );
 
-			wp_register_script( 'react', plugins_url( 'js/react-0.13.3.min.js', __FILE__ ), array());
-			wp_enqueue_script( 'react' );
+		// Add assets
+		global $wp_scripts;
 
-			wp_register_script( 'ie-shims', plugins_url( 'dist/ie-shims.js', __FILE__ ), array( 'react' ));
-			$wp_scripts->add_data( 'ie-shims', 'conditional', 'lt IE 9' );
+		// vars to inject into javascript
+		$jpo_vars = Jetpack_Onboarding_EndPoints::js_vars();
 
-			//Core JS app
-			wp_register_script( 'jetpack-onboarding', plugins_url( 'dist/jetpack-onboarding.js', __FILE__ ), array( 'jquery', 'underscore', 'wp-pointer', 'ie-shims', 'react' ) );
-			wp_localize_script( 'jetpack-onboarding', 'JPS', $jpo_vars );
-			wp_enqueue_script( 'jetpack-onboarding' );
+		//Shared libs, e.g. React, ReactDOM
+		wp_register_script( 'jetpack-onboarding-vendor', plugins_url( 'dist/vendor.bundle.js', __FILE__ ), array());
+		wp_enqueue_script( 'jetpack-onboarding-vendor' );
+
+		//IE-only shims
+		wp_register_script( 'ie-shims', plugins_url( 'dist/ie-shims.js', __FILE__ ), array( 'jetpack-onboarding-vendor' ));
+		$wp_scripts->add_data( 'ie-shims', 'conditional', 'lt IE 9' );
+
+		//Core JS app
+		wp_register_script( 'jetpack-onboarding', plugins_url( 'dist/jetpack-onboarding.js', __FILE__ ), array( 'jquery', 'underscore', 'wp-pointer', 'ie-shims', 'jetpack-onboarding-vendor' ) );
+		wp_localize_script( 'jetpack-onboarding', 'JPS', $jpo_vars );
+		wp_enqueue_script( 'jetpack-onboarding' );
+
+		// CSS
+		wp_enqueue_style( 'jetpack-onboarding-components', plugins_url( 'dist/jetpack-onboarding.css', __FILE__ ), array( 'wp-admin' ) );
+		wp_enqueue_style( 'jetpack-onboarding-panel', plugins_url( 'css/welcome-panel.css', __FILE__ ), array( 'wp-admin', 'wp-pointer' ) );
+		wp_enqueue_style( 'ie8' );
+
+	}
 
-			// CSS
-			wp_enqueue_style( 'jetpack-onboarding-components', plugins_url( 'dist/jetpack-onboarding.css', __FILE__ ), array( 'wp-admin' ) );
-			wp_enqueue_style( 'jetpack-onboarding-panel', plugins_url( 'css/welcome-panel.css', __FILE__ ), array( 'wp-admin', 'wp-pointer' ) );
-			wp_enqueue_style( 'ie8' );
+	static function reset_data_if_necessary() {
+		//reset data
+		if ( isset( $_GET['jpo_reset'] ) ) {
+			delete_option( Jetpack_Onboarding_EndPoints::STEP_STATUS_KEY );
+			delete_option( Jetpack_Onboarding_EndPoints::FIRSTRUN_KEY );
+			delete_option( Jetpack_Onboarding_EndPoints::STARTED_KEY );
+			Jetpack_Onboarding_EndPoints::show_dashboard_widget();
+			delete_option( Jetpack_Onboarding_EndPoints::CONTACTPAGE_ID_KEY );
+
+			delete_option( 'jetpack_blog_token' );
+			delete_option( 'jetpack_id' );
+
+			//also reset JP data
+			delete_option( 'jetpack_options'        );
+
+			// Delete all non-compact options
+			delete_option( 'jetpack_register'       );
+			delete_option( 'jetpack_activated'      );
+			delete_option( 'jetpack_active_modules' );
+			delete_option( 'jetpack_do_activate'    );
+
+			// Delete all legacy options
+			delete_option( 'jetpack_was_activated'  );
+			delete_option( 'jetpack_auto_installed' );
+			delete_transient( 'jetpack_register'    );
+
+			wp_redirect(remove_query_arg('jpo_reset'));
+			die();
 		}
 	}
 
-	static function wp_welcome_panel() {
+	static function render_widget() {
 		if ( false === get_option( Jetpack_Onboarding_EndPoints::FIRSTRUN_KEY, false ) ) {
 			update_option( Jetpack_Onboarding_EndPoints::FIRSTRUN_KEY, true );
 			do_action( Jetpack_Onboarding_EndPoints::FIRSTRUN_KEY );

diff --git a/client/actions/setup-progress-actions.js b/client/actions/setup-progress-actions.js
@@ -70,9 +70,9 @@ var SetupProgressActions = {
 		this._recordStepViewed( { slug: stepSlug } );
 	},
 
-	getStarted: function() {
+	getStarted: function( siteType ) {
 		WPAjax.
-			post(JPS.step_actions.start).
+			post(JPS.step_actions.start, { siteType: siteType }).
 			fail(function(msg) {
 				FlashActions.error(msg);
 			});
@@ -82,7 +82,20 @@ var SetupProgressActions = {
 		});
 	},
 
-	disableJPS: function() {
+	closeJPO: function() {
+		SpinnerActions.show("");
+		WPAjax.
+			post(JPS.step_actions.close).
+			fail(function(msg) {
+				SpinnerActions.hide();
+				FlashActions.error(msg);
+			}).
+			always(function() {
+				window.location.reload();
+			});
+	},
+
+	disableJPO: function() {
 		SpinnerActions.show("");
 		WPAjax.
 			post(JPS.step_actions.disable).

diff --git a/client/components/steps/get-started.jsx b/client/components/steps/get-started.jsx
@@ -24,25 +24,28 @@ var GetStarted = React.createClass({
 		return getSetupState();
 	},
 
-	handleGetStarted: function(e) {
+	handleGetStarted: function(sitePurpose, e) {
 		e.preventDefault();
-		SetupProgressActions.getStarted();
+		SetupProgressActions.getStarted( sitePurpose );
 	},
 
 	handleNoThanks: function(e) {
 		e.preventDefault();
-		SetupProgressActions.disableJPS();
+		SetupProgressActions.disableJPO();
 	},
 
 	render: function() {
 		return (
 			<div className="welcome__get-started--intro">
 				<div className="welcome__get-started--wrapper">
 					<h1>Welcome to WordPress</h1>
-					<p className="welcome__callout welcome__get-started--callout">Would you like help launching your site?</p>
+					<p className="welcome__callout welcome__get-started--callout">What kind of site can we help you set up?</p>
 					<p>
-						<Button onClick={ this.handleGetStarted } primary>Yes</Button>
-						<Button onClick={ this.handleNoThanks }>No thanks</Button>
+						<Button onClick={ this.handleGetStarted.bind(this, "business") } primary>Business</Button>
+						<Button onClick={ this.handleGetStarted.bind(this, "personal") } primary>Personal</Button>
+					</p>
+					<p>
+						<Button onClick={ this.handleNoThanks }>I don't need help</Button>
 					</p>
 				</div>
 				<img className='welcome__get-started-image' src={ `${ JPS.base_url }/img/jpo-welcome.png` } />

diff --git a/client/components/steps/review.jsx b/client/components/steps/review.jsx
@@ -42,7 +42,7 @@ var AdvancedSettingsStep = React.createClass({
 
 	handleDismiss: function( event ) {
 		event.preventDefault();
-		jQuery( '#welcome-panel .welcome-panel-close' ).trigger( 'click' );
+		SetupProgressActions.closeJPO();
 	},
 
 	render: function() {

diff --git a/client/vendor.js b/client/vendor.js
@@ -0,0 +1,2 @@
+require( 'react' );
+require( 'react-dom' );
diff --git a/client/welcome-panel.jsx b/client/welcome-panel.jsx
@@ -1,4 +1,5 @@
 var React = require( 'react' ),
+	ReactDOM = require( 'react-dom' ),
 	WelcomeWidget = require( './components/page' ),
 	Paths = require( './constants/jetpack-onboarding-paths' ),
 	SetupProgressStore = require( 'stores/setup-progress-store' );
@@ -48,7 +49,7 @@ module.exports = function() {
 			}
 		] );
 
-		React.render(
+		ReactDOM.render(
 			React.createElement( WelcomeWidget, {} ), document.getElementById( 'jpo-welcome-panel' )
 		);
 	} );

diff --git a/css/scss/mixins/_calypso-forms.scss b/css/scss/mixins/_calypso-forms.scss
@@ -3,6 +3,11 @@
 // Below, you can choose from either using global form styles or class-driven
 // form styles. By default, the global styles are on.
 
+%clear-text {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
 %form {
 	ul {
 		margin: 0;