diff options
Diffstat (limited to 'plugins/jetpack/_inc/connect-button.js')
-rw-r--r-- | plugins/jetpack/_inc/connect-button.js | 173 |
1 files changed, 93 insertions, 80 deletions
diff --git a/plugins/jetpack/_inc/connect-button.js b/plugins/jetpack/_inc/connect-button.js index 16681ea9..58682618 100644 --- a/plugins/jetpack/_inc/connect-button.js +++ b/plugins/jetpack/_inc/connect-button.js @@ -1,74 +1,65 @@ /* global jpConnect */ -jQuery( document ).ready( function( $ ) { +jQuery( document ).ready( function ( $ ) { var connectButton = $( '.jp-connect-button, .jp-banner__alt-connect-button' ).eq( 0 ); var tosText = $( '.jp-connect-full__tos-blurb' ); var jetpackConnectIframe = $( '<iframe class="jp-jetpack-connect__iframe" />' ); + // Sections that only show up in the first Set Up screen var connectionHelpSections = $( - '#jetpack-connection-cards, .jp-connect-full__dismiss-paragraph' + '#jetpack-connection-cards, .jp-connect-full__dismiss-paragraph, .jp-connect-full__testimonial' ); + // Sections that only show up in the "Authorize user" screen + var connectButtonFrom = ''; - connectButton.on( 'click', function( event ) { + connectButton.on( 'click', function ( event ) { event.preventDefault(); + if ( 'undefined' === typeof URLSearchParams ) { + connectButtonFrom = ''; + } else { + var searchParams = new URLSearchParams( $( this ).prop( 'search' ) ); + connectButtonFrom = searchParams && searchParams.get( 'from' ); + } + if ( connectionHelpSections.length ) { connectionHelpSections.fadeOut( 600 ); } - jetpackConnectButton.selectAndStartConnectionFlow(); + jetpackConnectButton.startConnectionFlow(); } ); var jetpackConnectButton = { isRegistering: false, isPaidPlan: false, - selectAndStartConnectionFlow: function() { - var connectionHelpSections = $( '#jetpack-connection-cards' ); + startConnectionFlow: function () { + var connectionHelpSections = $( '#jetpack-connection-cards, .jp-connect-full__testimonial' ); 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(); + jetpackConnectButton.handleConnection(); + } + }, + selectAndStartAuthorizationFlow: function ( data ) { + if ( data.allowInplaceAuthorization && 'original' !== jpConnect.forceVariation ) { + jetpackConnectButton.handleAuthorizeInPlaceFlow( data ); + } else { + // Forcing original connection flow, `JETPACK_SHOULD_NOT_USE_CONNECTION_IFRAME = true` + // or we're dealing with Safari which has issues with handling 3rd party cookies. + if ( data.alternateAuthorizeUrl ) { + window.location = data.alternateAuthorizeUrl; } else { - // Forcing A/B test driven connection flow variation, `JETPACK_SHOULD_USE_CONNECTION_IFRAME` not defined. - jetpackConnectButton.startConnectionFlow(); + window.location = data.authorizeUrl; } } }, - startConnectionFlow: function() { - var abTestName = 'jetpack_connect_in_place_v3'; - - $.ajax( { - url: 'https://public-api.wordpress.com/wpcom/v2/abtest/' + abTestName, - type: 'GET', - error: jetpackConnectButton.handleConnectionError, - data: jpConnect.identity, - xhrFields: { - withCredentials: true, - }, - crossDomain: true, - success: function( data ) { - if ( data && 'in_place' === data.variation ) { - jetpackConnectButton.handleConnectInPlaceFlow(); - return; - } - jetpackConnectButton.handleOriginalFlow(); - }, - } ); - }, - handleOriginalFlow: function() { - window.location = connectButton.attr( 'href' ); - }, - handleConnectInPlaceFlow: function() { + handleConnection: 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; + // Make sure we don't lose the `from` parameter, if set. + var fromParam = ( connectButtonFrom && '&from=' + connectButtonFrom ) || ''; + window.location = jpConnect.connectInPlaceUrl + fromParam; return; } @@ -91,33 +82,35 @@ jQuery( document ).ready( function( $ ) { data: { registration_nonce: jpConnect.registrationNonce, _wpnonce: jpConnect.apiNonce, + from: connectButtonFrom, + no_iframe: 'original' === jpConnect.forceVariation, }, error: jetpackConnectButton.handleConnectionError, - success: jetpackConnectButton.handleConnectionSuccess, + success: jetpackConnectButton.selectAndStartAuthorizationFlow, } ); }, - triggerLoadingState: function() { + triggerLoadingState: function () { var loadingText = $( '<span>' ) .addClass( 'jp-connect-full__button-container-loading' ) .text( jpConnect.buttonTextRegistering ) .appendTo( '.jp-connect-full__button-container' ); var spinner = $( '<div>' ).addClass( 'jp-spinner' ); - var spinnerOuter = $( '<div>' ) - .addClass( 'jp-spinner__outer' ) - .appendTo( spinner ); - $( '<div>' ) - .addClass( 'jp-spinner__inner' ) - .appendTo( spinnerOuter ); + var spinnerOuter = $( '<div>' ).addClass( 'jp-spinner__outer' ).appendTo( spinner ); + $( '<div>' ).addClass( 'jp-spinner__inner' ).appendTo( spinnerOuter ); loadingText.after( spinner ); }, - handleConnectionSuccess: function( data ) { - jetpackConnectButton.fetchPlanType(); + handleAuthorizeInPlaceFlow: function ( data ) { window.addEventListener( 'message', jetpackConnectButton.receiveData ); - jetpackConnectIframe.attr( 'src', data.authorizeUrl ); - jetpackConnectIframe.on( 'load', function() { + jetpackConnectIframe.attr( + 'src', + data.authorizeUrl + '&from=' + connectButtonFrom + '&iframe_source=jetpack-connect-main' + ); + jetpackConnectIframe.on( 'load', function () { jetpackConnectIframe.show(); $( '.jp-connect-full__button-container' ).hide(); + $( '#jp-connect-full__step1-header' ).hide(); + $( '#jp-connect-full__step2-header' ).show(); } ); jetpackConnectIframe.hide(); $( '.jp-connect-full__button-container' ).after( jetpackConnectIframe ); @@ -129,52 +122,72 @@ jQuery( document ).ready( function( $ ) { link.href = jpConnect.preFetchScript; document.head.appendChild( link ); }, - fetchPlanType: function() { - $.ajax( { + fetchPlanType: function () { + return $.ajax( { url: jpConnect.apiBaseUrl + '/site', type: 'GET', data: { _wpnonce: jpConnect.apiSiteDataNonce, }, - success: function( data ) { + success: function ( data ) { var siteData = JSON.parse( data.data ); - jetpackConnectButton.isPaidPlan = ! siteData.plan.is_free; + jetpackConnectButton.isPaidPlan = + siteData.options.is_pending_plan || ! siteData.plan.is_free; }, } ); }, - receiveData: function( event ) { + receiveData: function ( event ) { if ( - event.origin === jpConnect.jetpackApiDomain && - event.source === jetpackConnectIframe.get( 0 ).contentWindow && - event.data === 'close' + event.origin !== jpConnect.jetpackApiDomain || + event.source !== jetpackConnectIframe.get( 0 ).contentWindow ) { - window.removeEventListener( 'message', this.receiveData ); - jetpackConnectButton.handleAuthorizationComplete(); + return; + } + + switch ( event.data ) { + case 'close': + window.removeEventListener( 'message', this.receiveData ); + jetpackConnectButton.handleAuthorizationComplete(); + break; + case 'wpcom_nocookie': + jetpackConnectIframe.hide(); + jetpackConnectButton.handleConnectionError(); + break; } }, - handleAuthorizationComplete: function() { + handleAuthorizationComplete: function () { jetpackConnectButton.isRegistering = false; - if ( jetpackConnectButton.isPaidPlan ) { + // Fetch plan type late to make sure any stored license keys have been + // attached to the site during the connection. + jetpackConnectButton.fetchPlanType().always( function () { + if ( ! jetpackConnectButton.isPaidPlan ) { + window.location.assign( jpConnect.plansPromptUrl ); + return; + } + + var parser = document.createElement( 'a' ); + parser.href = jpConnect.dashboardUrl; + var reload = + window.location.pathname === parser.pathname && + window.location.hash.length && + parser.hash.length; + window.location.assign( jpConnect.dashboardUrl ); - } else { - window.location.assign( jpConnect.plansPromptUrl ); - } - window.location.reload( true ); + + if ( reload ) { + // The Jetpack admin page has hashes in the URLs, so we need to reload the page after .assign() + window.location.reload( true ); + } + } ); }, - handleConnectionError: function( error ) { + handleConnectionError: function ( error ) { jetpackConnectButton.isRegistering = false; - jetpackConnectButton.handleOriginalFlow(); + // If something goes wrong, we take users to Calypso. + window.location = connectButton.attr( 'href' ); }, }; - // 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(); - } + // In case the parameter has been manually set in the URL after redirect. + connectButtonFrom = location.hash.split( '&from=' )[ 1 ]; } ); |