Add a function to hold a callback until all data saves are complete (…

…which will prevent anyone from proceeding to Woo or closing the modal before all data is saved).

client/actions/setup-progress-actions.js

@@ -3,6 +3,7 @@ var AppDispatcher = require('../dispatcher/app-dispatcher'),
 	Paths = require('../constants/jetpack-onboarding-paths'),
 	FlashActions = require('./flash-actions'),
 	SiteActions = require('./site-actions'),
+	afterSavingData = require('../utils/after-save'),
 	WPAjax = require('../utils/wp-ajax'),
 	SpinnerActions = require('./spinner-actions'),
 	SetupProgressStore = require('stores/setup-progress-store'),
@@ -102,7 +103,9 @@ var SetupProgressActions = {
 				FlashActions.error(msg);
 			}).
 			always(function() {
-				window.location.reload();
+				afterSavingData( () => {
+					window.location.reload();
+				} );
 			});
 	},
 
@@ -222,4 +225,4 @@ var SetupProgressActions = {
 	}
 };
 
-module.exports = SetupProgressActions;
+module.exports = SetupProgressActions;

client/components/steps/woocommerce.jsx

@@ -4,7 +4,8 @@ var React = require( 'react' ),
 	SetupProgressActions = require( 'actions/setup-progress-actions' ),
 	WelcomeSection = require( '../page/container' ),
 	SiteActions = require( 'actions/site-actions' ),
-	Paths = require('constants/jetpack-onboarding-paths'),
+	afterSavingData = require( '../../utils/after-save' ),
+	Paths = require( 'constants/jetpack-onboarding-paths' ),
 	Button = require( '@automattic/dops-components/client/components/button' );
 
 function getJetpackState() {
@@ -41,14 +42,15 @@ module.exports = React.createClass( {
 	},
 
 	goToWooSetup: function() {
-		jQuery(window).off('beforeunload');
 		SiteActions.redirectToWooCommerceSetup();
 		SetupProgressActions.completeStep( Paths.WOOCOMMERCE_SLUG );
-		window.location = this.state.wooCommerceSetupUrl;
+		afterSavingData( () => {
+			window.location = this.state.wooCommerceSetupUrl;
+		} );
 	},
 
 	goToJpoReview: function() {
-		SetupProgressActions.setCurrentStep( Path.REVIEW_STEP_SLUG );
+		SetupProgressActions.setCurrentStep( Paths.REVIEW_STEP_SLUG );
 	},
 
 	handleSubmit: function( event ) {
@@ -84,13 +86,12 @@ module.exports = React.createClass( {
 	},
 
 	render: function() {
-
 		return (
 			<WelcomeSection id="welcome__jetpack">
 				<h1>Let&apos;s launch <em>{this.state.site_title}</em></h1>
-				{ this.state.wooCommerceStatus
-					? this.renderAlreadyInstalled()
-					: this.renderInstall()
+				{ this.state.wooCommerceStatus ?
+					this.renderAlreadyInstalled() :
+					this.renderInstall()
 				}
 			</WelcomeSection>
 		);

client/stores/data-store.js

@@ -1,12 +1,14 @@
-var AppDispatcher = require('../dispatcher/app-dispatcher'),
-	EventEmitter = require('events').EventEmitter,
-	JPSConstants = require('../constants/jetpack-onboarding-constants');
+var AppDispatcher = require( '../dispatcher/app-dispatcher' ),
+	EventEmitter = require( 'events' ).EventEmitter,
+	JPSConstants = require( '../constants/jetpack-onboarding-constants' );
 
 /*
  * This is a refcounted save monitor which warns if you try to leave the page while the data is still saving
  */
 
-var _currentSaves = 0, jpoTimeout, CHANGE_EVENT = 'change';
+const CHANGE_EVENT = 'change';
+
+var _currentSaves = 0;
 
 function incrementSaveCounter() {
 	_currentSaves = _currentSaves + 1;
@@ -16,54 +18,43 @@ function decrementSaveCounter() {
 	_currentSaves = _currentSaves - 1;
 }
 
-var DataStore = _.extend({}, EventEmitter.prototype, {
+const DataStore = _.extend( {}, EventEmitter.prototype, {
 	isSaving: function() {
 		return _currentSaves > 0;
 	},
 
-	addChangeListener: function(callback) {
-		this.on(CHANGE_EVENT, callback);
+	addChangeListener: function( callback ) {
+		this.on( CHANGE_EVENT, callback );
 	},
 
-	removeChangeListener: function(callback) {
-		this.removeListener(CHANGE_EVENT, callback);
+	removeChangeListener: function( callback ) {
+		this.removeListener( CHANGE_EVENT, callback );
 	},
 
 	emitChange: function() {
-	    this.emit(CHANGE_EVENT);
+		this.emit( CHANGE_EVENT );
 	},
-});
+} );
 
-jQuery(window).on('beforeunload', function() {
-	if(DataStore.isSaving()) {
-		jpoTimeout = setTimeout(function() {
-	        // alert('You stayed');
-	        // noop
-	    }, 1000);
-	    return "Your site changes are still saving.";
+jQuery( window ).on( 'beforeunload', function() {
+	if ( DataStore.isSaving() ) {
+		return 'Your site changes are still saving.';
 	}
-});
-
-jQuery(window).on('unload', function() {
-	clearTimeout(jpoTimeout);
-});
-
-AppDispatcher.register(function(action) {
-
-  switch(action.actionType) {
-    case JPSConstants.SAVE_STARTED:
-    	incrementSaveCounter();
-		DataStore.emitChange();
-		break;
-
-    case JPSConstants.SAVE_FINISHED:
-    	decrementSaveCounter();
-     	DataStore.emitChange();
-     	break;
-
-    default:
-      // no op
-  }
-});
+} );
+
+AppDispatcher.register( function( action ) {
+	switch ( action.actionType ) {
+		case JPSConstants.SAVE_STARTED:
+			incrementSaveCounter();
+			DataStore.emitChange();
+			break;
+		case JPSConstants.SAVE_FINISHED:
+			decrementSaveCounter();
+			DataStore.emitChange();
+			break;
+		default:
+			// no op
+	}
+} );
 
-module.exports = DataStore;
+module.exports = DataStore;

client/utils/after-save.js

@@ -0,0 +1,12 @@
+const DataStore = require( 'stores/data-store' );
+
+const afterSaving = function( callback ) {
+	if ( ! DataStore.isSaving() ) {
+		return callback();
+	}
+	setTimeout( () => {
+		afterSaving( callback );
+	}, 500 );
+};
+
+export default afterSaving;