Connection: Redirect plugins and dashboard connect buttons to the mai…

…n flow (#13599) * Admin: Load connect button scripts on dashboard and plugins * Connection: Add class to alt connection buttons, add connect in place URL * Connection: Redirect alt connection buttons to connect in place flows * Add a comment * Also hide the cancel button
Automattic · Sep 30, 2019 · b6704e7 · b6704e7
1 parent c470dcb
commit b6704e7
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 17 deletions.
diff --git a/_inc/connect-button.js b/_inc/connect-button.js
@@ -1,30 +1,46 @@
 /* global jpConnect */
 
 jQuery( document ).ready( function( $ ) {
-	var connectButton = $( '.jp-connect-button' );
+	var connectButton = $( '.jp-connect-button, .jp-banner__alt-connect-button' ).eq( 0 );
 	var tosText = $( '.jp-connect-full__tos-blurb' );
-	connectButton.click( function( event ) {
+	var jetpackConnectIframe = $( '<iframe class="jp-jetpack-connect__iframe" />' );
+	var connectionHelpSections = $(
+		'#jetpack-connection-cards, .jp-connect-full__dismiss-paragraph'
+	);
+
+	connectButton.on( 'click', function( event ) {
 		event.preventDefault();
-		$( '#jetpack-connection-cards' ).fadeOut( 600 );
-		if ( ! jetpackConnectButton.isRegistering ) {
-			if ( 'original' === jpConnect.forceVariation ) {
-				// Forcing original connection flow, `JETPACK_SHOULD_USE_CONNECTION_IFRAME = false`
-				// or we're dealing with Safari which has issues with handling 3rd party cookies.
-				jetpackConnectButton.handleOriginalFlow();
-			} else if ( 'in_place' === jpConnect.forceVariation ) {
-				// Forcing new connection flow, `JETPACK_SHOULD_USE_CONNECTION_IFRAME = true`.
-				jetpackConnectButton.handleConnectInPlaceFlow();
-			} else {
-				// Forcing A/B test driven connection flow variation, `JETPACK_SHOULD_USE_CONNECTION_IFRAME` not defined.
-				jetpackConnectButton.startConnectionFlow();
-			}
+
+		if ( connectionHelpSections.length ) {
+			connectionHelpSections.fadeOut( 600 );
 		}
+
+		jetpackConnectButton.selectAndStartConnectionFlow();
 	} );
-	var jetpackConnectIframe = $( '<iframe class="jp-jetpack-connect__iframe" />' );
 
 	var jetpackConnectButton = {
 		isRegistering: false,
 		isPaidPlan: false,
+		selectAndStartConnectionFlow: function() {
+			var connectionHelpSections = $( '#jetpack-connection-cards' );
+			if ( connectionHelpSections.length ) {
+				connectionHelpSections.fadeOut( 600 );
+			}
+
+			if ( ! jetpackConnectButton.isRegistering ) {
+				if ( 'original' === jpConnect.forceVariation ) {
+					// Forcing original connection flow, `JETPACK_SHOULD_USE_CONNECTION_IFRAME = false`
+					// or we're dealing with Safari which has issues with handling 3rd party cookies.
+					jetpackConnectButton.handleOriginalFlow();
+				} else if ( 'in_place' === jpConnect.forceVariation ) {
+					// Forcing new connection flow, `JETPACK_SHOULD_USE_CONNECTION_IFRAME = true`.
+					jetpackConnectButton.handleConnectInPlaceFlow();
+				} else {
+					// Forcing A/B test driven connection flow variation, `JETPACK_SHOULD_USE_CONNECTION_IFRAME` not defined.
+					jetpackConnectButton.startConnectionFlow();
+				}
+			}
+		},
 		startConnectionFlow: function() {
 			var abTestName = 'jetpack_connect_in_place_v2';
 			$.ajax( {
@@ -48,6 +64,12 @@ jQuery( document ).ready( function( $ ) {
 			window.location = connectButton.attr( 'href' );
 		},
 		handleConnectInPlaceFlow: function() {
+			// Alternative connection buttons should redirect to the main one for the "connect in place" flow.
+			if ( connectButton.hasClass( 'jp-banner__alt-connect-button' ) ) {
+				window.location = jpConnect.connectInPlaceUrl;
+				return;
+			}
+
 			jetpackConnectButton.isRegistering = true;
 			tosText.hide();
 			connectButton.hide();
@@ -136,4 +158,14 @@ jQuery( document ).ready( function( $ ) {
 			jetpackConnectButton.handleOriginalFlow();
 		},
 	};
+
+	// When we visit /wp-admin/admin.php?page=jetpack#/setup, immediately start the connection flow.
+	var hash = location.hash.replace( /#\//, '' );
+	if ( 'setup' === hash ) {
+		if ( connectionHelpSections.length ) {
+			connectionHelpSections.hide();
+		}
+
+		jetpackConnectButton.selectAndStartConnectionFlow();
+	}
 } );
diff --git a/_inc/lib/admin-pages/class.jetpack-admin-page.php b/_inc/lib/admin-pages/class.jetpack-admin-page.php
@@ -75,6 +75,16 @@ function add_actions() {
 			delete_transient( 'activated_jetpack' );
 		}
 
+		// If Jetpack not yet connected, but user is viewing one of the pages with a Jetpack connection banner.
+		if (
+			( 'index.php' === $pagenow || 'plugins.php' === $pagenow )
+			&& ! Jetpack::is_active()
+			&& current_user_can( 'jetpack_connect' )
+			&& ! Jetpack::is_development_mode()
+		) {
+			add_action( 'admin_enqueue_scripts', array( 'Jetpack_Connection_Banner', 'enqueue_connect_button_scripts' ) );
+		}
+
 		// Check if the site plan changed and deactivate modules accordingly.
 		add_action( 'current_screen', array( $this, 'check_plan_deactivate_modules' ) );
 

diff --git a/class.jetpack-connection-banner.php b/class.jetpack-connection-banner.php
@@ -179,6 +179,7 @@ public static function enqueue_connect_button_scripts() {
 				'buttonTextRegistering' => __( 'Loading...', 'jetpack' ),
 				'jetpackApiDomain'      => $jetpackApiUrl['scheme'] . '://' . $jetpackApiUrl['host'],
 				'forceVariation'        => $force_variation,
+				'connectInPlaceUrl'     => Jetpack::admin_url( 'page=jetpack#/setup' ),
 				'dashboardUrl'          => Jetpack::admin_url( 'page=jetpack#/dashboard' ),
 				'plansPromptUrl'        => Jetpack::admin_url( 'page=jetpack#/plans-prompt' ),
 			)
@@ -284,7 +285,7 @@ class="jp-wpcom-connect__hide-phone-and-smaller"
 								<span class="jp-banner__tos-blurb"><?php jetpack_render_tos_blurb(); ?></span>
 								<a
 										href="<?php echo esc_url( $this->build_connect_url_for_slide( '72' ) ); ?>"
-										class="dops-button is-primary">
+										class="dops-button is-primary jp-banner__alt-connect-button">
 									<?php esc_html_e( 'Set up Jetpack', 'jetpack' ); ?>
 								</a>
 							</div>