Site migration: go to cart when target site doesn't have a supported …

…plan (Automattic#38743)

* Redirecting to cart and back to start migration when site doesn't have a plan that allows the installation of plugins.

* Added comment to explain condition in

* Rendering progress view when status endpoint returns 'new', to try and avoid flash of loading view when we've started an Atomic transfer but the server status hasn't been updated yet.

* Rebased. Improved comment about accidental resetting of state by status endpoint. Changed height on illustration to a rounder number, 200px.

* Removed forced local migration status used for development.

client/my-sites/migrate/section-migrate.jsx

@@ -23,7 +23,10 @@ import SidebarNavigation from 'my-sites/sidebar-navigation';
 import Site from 'blocks/site';
 import SiteSelector from 'components/site-selector';
 import Spinner from 'components/spinner';
+import { FEATURE_UPLOAD_THEMES_PLUGINS } from 'lib/plans/constants';
+import { planHasFeature } from 'lib/plans';
 import { Interval, EVERY_TEN_SECONDS } from 'lib/interval';
+import getCurrentQueryArguments from 'state/selectors/get-current-query-arguments';
 import { getSite, getSiteAdminUrl, isJetpackSite } from 'state/sites/selectors';
 import { updateSiteMigrationStatus } from 'state/sites/actions';
 import { getSelectedSite, getSelectedSiteId, getSelectedSiteSlug } from 'state/ui/selectors';
@@ -38,6 +41,8 @@ import './section-migrate.scss';
 const wpcom = wpLib.undocumented();
 
 class SectionMigrate extends Component {
+	_startedMigrationFromCart = false;
+
 	state = {
 		migrationStatus: 'unknown',
 		percent: 0,
@@ -46,6 +51,12 @@ class SectionMigrate extends Component {
 	};
 
 	componentDidMount() {
+		if ( true === this.props.startMigration ) {
+			this._startedMigrationFromCart = true;
+			this.setMigrationState( { migrationStatus: 'backing-up' } );
+			this.startMigration();
+		}
+
 		this.updateFromAPI();
 	}
 
@@ -76,11 +87,36 @@ class SectionMigrate extends Component {
 			 * Note this migrationStatus is local, thus the setState vs setMigrationState.
 			 * Call to updateFromAPI will update both local and non-local state.
 			 */
-			this.setState( { migrationStatus: 'inactive', errorMessage: '' }, this.updateFromAPI );
+			this.setState(
+				{
+					migrationStatus: 'inactive',
+					errorMessage: '',
+				},
+				this.updateFromAPI
+			);
 		} );
 	};
 
 	setMigrationState = state => {
+		// A response from the status endpoint may come in after the
+		// migrate/from endpoint has returned an error. This avoids that
+		// response accidentally clearing the error state.
+		if ( 'error' === this.state.migrationStatus ) {
+			return;
+		}
+
+		// When we redirect from the cart, we set migrationState to 'backing-up'
+		// and start migration straight away. This condition prevents a response
+		// from the status endpoint accidentally changing the local state
+		// before the server's properly registered that we're backing up.
+		if (
+			this._startedMigrationFromCart &&
+			'backing-up' === this.state.migrationStatus &&
+			state.migrationStatus === 'inactive'
+		) {
+			return;
+		}
+
 		if ( state.migrationStatus ) {
 			this.props.updateSiteMigrationStatus( this.props.targetSiteId, state.migrationStatus );
 		}
@@ -92,23 +128,51 @@ class SectionMigrate extends Component {
 	};
 
 	startMigration = () => {
-		const { sourceSiteId, targetSiteId } = this.props;
+		const { sourceSiteId, targetSiteId, targetSite } = this.props;
 
 		if ( ! sourceSiteId || ! targetSiteId ) {
 			return;
 		}
 
+		const planSlug = get( targetSite, 'plan.product_slug' );
+		if (
+			planSlug &&
+			! this._startedMigrationFromCart &&
+			! planHasFeature( planSlug, FEATURE_UPLOAD_THEMES_PLUGINS )
+		) {
+			this.goToCart();
+			return;
+		}
+
 		this.setMigrationState( { migrationStatus: 'backing-up' } );
 
 		wpcom
 			.startMigration( sourceSiteId, targetSiteId )
 			.then( () => this.updateFromAPI() )
 			.catch( error => {
-				const { message = '' } = error;
-				this.setMigrationState( { migrationStatus: 'error', errorMessage: message } );
+				const { code = '', message = '' } = error;
+
+				if ( 'no_supported_plan' === code ) {
+					this.goToCart();
+					return;
+				}
+
+				this.setMigrationState( {
+					migrationStatus: 'error',
+					errorMessage: message,
+				} );
 			} );
 	};
 
+	goToCart = () => {
+		const { sourceSite, targetSiteSlug } = this.props;
+		const sourceSiteSlug = get( sourceSite, 'slug' );
+
+		page(
+			`/checkout/${ targetSiteSlug }/business?redirect_to=/migrate/from/${ sourceSiteSlug }/to/${ targetSiteSlug }%3Fstart%3Dtrue`
+		);
+	};
+
 	updateFromAPI = () => {
 		const { targetSiteId } = this.props;
 		wpcom
@@ -158,7 +222,10 @@ class SectionMigrate extends Component {
 			} )
 			.catch( error => {
 				const { message = '' } = error;
-				this.setMigrationState( { migrationStatus: 'error', errorMessage: message } );
+				this.setMigrationState( {
+					migrationStatus: 'error',
+					errorMessage: message,
+				} );
 			} );
 	};
 
@@ -453,6 +520,7 @@ class SectionMigrate extends Component {
 					: this.renderSourceSiteSelector();
 				break;
 
+			case 'new':
 			case 'backing-up':
 			case 'restoring':
 				migrationElement = this.renderMigrationProgress();
@@ -497,6 +565,7 @@ export default connect(
 			isTargetSiteAtomic: !! isSiteAutomatedTransfer( state, targetSiteId ),
 			isTargetSiteJetpack: !! isJetpackSite( state, targetSiteId ),
 			sourceSite: ownProps.sourceSiteId && getSite( state, ownProps.sourceSiteId ),
+			startMigration: !! get( getCurrentQueryArguments( state ), 'start', false ),
 			targetSite: getSelectedSite( state ),
 			targetSiteId,
 			targetSiteImportAdminUrl: getSiteAdminUrl( state, targetSiteId, 'import.php' ),

client/my-sites/migrate/section-migrate.scss

@@ -89,6 +89,7 @@
 	display: block;
 	margin: auto;
 	width: 260px;
+	height: 200px;
 }
 
 .migrate__section-header {