Add a step to ask if the user has an existing store

client/components/steps/existing-store.jsx

@@ -0,0 +1,85 @@
+var React = require( 'react' ),
+	SiteStore = require( 'stores/site-store' ),
+	SetupProgressActions = require( 'actions/setup-progress-actions' ),
+	WelcomeSection = require( '../page/container' ),
+	Paths = require( 'constants/jetpack-onboarding-paths' ),
+	Button = require( '@automattic/dops-components/client/components/button' );
+
+var SelectDropdown = require( '@automattic/dops-components/client/components/select-dropdown' ),
+	DropdownItem = require( '@automattic/dops-components/client/components/select-dropdown/item' );
+
+function getJetpackState() {
+	const { is_shop } = JPS.bloginfo;
+	return {
+		site_title: SiteStore.getTitle(),
+		wooCommerceStatus: SiteStore.getWooCommerceStatus(),
+		wooCommerceSetupUrl: SiteStore.getWooCommerceSetupUrl(),
+		is_shop
+	};
+}
+
+const platforms = [
+	'Shopify',
+	'BigCommerce',
+	'Magento',
+	'WooCommerce',
+	'osCommerce',
+	'Wix',
+	'Other'
+];
+
+module.exports = React.createClass( {
+
+	componentDidMount: function() {
+		SiteStore.addChangeListener( this._onChange );
+	},
+
+	componentWillUnmount: function() {
+		SiteStore.removeChangeListener( this._onChange );
+	},
+
+	_onChange: function() {
+		this.setState( getJetpackState() );
+	},
+
+	getInitialState: function() {
+		return getJetpackState();
+	},
+
+	submitStorePlatform: function( platform ) {
+		SetupProgressActions.completeStep( Paths.EXISTING_STORE_STEP_SLUG, { platform } );
+		this.goToJpoReview();
+	},
+
+	goToJpoReview: function() {
+		SetupProgressActions.setCurrentStep( Paths.REVIEW_STEP_SLUG );
+	},
+
+	render: function() {
+		if ( ! this.state.wooCommerceStatus ) {
+			this.goToJpoReview();
+		}
+
+		const platformSelections = platforms.map( ( platform, i ) => {
+			return (
+				<DropdownItem key={ i } onClick={ () => {
+					this.submitStorePlatform( platform );
+				} }>{ platform }</DropdownItem>
+			);
+		} );
+
+		return (
+			<WelcomeSection id="welcome__jetpack">
+				<h1>Let&apos;s launch <em>{ this.state.site_title }</em></h1>
+				<p className="welcome__callout welcome__jetpack--callout">{ 'Do you already have an existing e-commerce store?' }</p>
+				<div className="welcome__existing-store--button-container welcome__button-container">
+					<SelectDropdown selectedText="Yes, it's powered by…" className="welcome__existing-store--dropdown">
+						{ platformSelections }
+					</SelectDropdown>
+					<Button primary onClick={ this.goToJpoReview }>Next</Button>
+					<Button onClick={ this.goToJpoReview }>Nope</Button>
+				</div>
+			</WelcomeSection>
+		);
+	}
+} );

client/components/steps/woocommerce.jsx

@@ -51,6 +51,10 @@ module.exports = React.createClass( {
 		SetupProgressActions.setCurrentStep( Paths.REVIEW_STEP_SLUG );
 	},
 
+	goToMigrateStep: function() {
+		SetupProgressActions.setCurrentStep( Paths.EXISTING_STORE_STEP_SLUG );
+	},
+
 	handleSubmit: function( event ) {
 		event.preventDefault();
 		SiteActions.installWooCommerce();
@@ -64,7 +68,7 @@ module.exports = React.createClass( {
 
 					<div className="welcome__button-container">
 						<Button className='welcome-submit' primary type="submit">Install WooCommerce</Button>
-						<SkipButton />
+						<SkipButton handleSkip={ this.goToJpoReview } />
 					</div>
 				</form>
 			</div>
@@ -77,7 +81,7 @@ module.exports = React.createClass( {
 				<p className="welcome__callout welcome__jetpack--callout">WooCommerce is ready to go</p>
 				<div className="welcome__button-container">
 					<Button className='welcome-submit' primary onClick={ this.goToWooSetup }>Setup your store</Button>
-					<Button onClick={ this.goToJpoReview }>Not right now</Button>
+					<Button onClick={ this.goToMigrateStep }>Not right now</Button>
 				</div>
 			</div>
 		);

client/constants/jetpack-onboarding-paths.js

@@ -11,5 +11,6 @@ module.exports = {
 	JETPACK_MODULES_STEP_SLUG: 'jetpack',
 	CONTACT_PAGE_STEP_SLUG: 'contact-page',
 	BUSINESS_ADDRESS_SLUG: 'business-address',
-	WOOCOMMERCE_SLUG: 'woocommerce'
+	WOOCOMMERCE_SLUG: 'woocommerce',
+	EXISTING_STORE_STEP_SLUG: 'existing-store'
 };

client/welcome-panel.jsx

@@ -5,8 +5,7 @@ var React = require( 'react' ),
 	SetupProgressStore = require( 'stores/setup-progress-store' );
 
 module.exports = function() {
-	jQuery( document ).ready( function () {
-
+	jQuery( document ).ready( function() {
 		SetupProgressStore.init( [
 			// NOTE: You can have "static: true" to include un-clickable
 			// prefilled steps that act as though they've already been completed
@@ -18,43 +17,48 @@ module.exports = function() {
 			{
 				name: 'Site title',
 				slug: Paths.SITE_TITLE_STEP_SLUG,
-				welcomeView: require('./components/steps/site-title')
+				welcomeView: require( './components/steps/site-title' ),
 			},
 			{
 				name: 'Is this a blog?',
 				slug: Paths.IS_BLOG_STEP_SLUG,
-				welcomeView: require('./components/steps/layout')
+				welcomeView: require( './components/steps/layout' ),
 			},
 			{
 				name: 'Set your homepage',
 				slug: Paths.HOMEPAGE_STEP_SLUG,
-				welcomeView: require('./components/steps/homepage')
+				welcomeView: require( './components/steps/homepage' ),
 			},
 			{
-				name: "Contact Info",
+				name: 'Contact Info',
 				slug: Paths.CONTACT_PAGE_STEP_SLUG,
-				welcomeView: require('./components/steps/contact')
+				welcomeView: require( './components/steps/contact' ),
 			},
 			{
 				name: 'Enable Jetpack',
 				slug: Paths.JETPACK_MODULES_STEP_SLUG,
 				neverSkip: true, // don't skip this even if it's been completed
-				welcomeView: require('./components/steps/jetpack-jumpstart'),
+				welcomeView: require( './components/steps/jetpack-jumpstart' ),
 			},
 			{
 				name: 'Business Address',
 				slug: Paths.BUSINESS_ADDRESS_SLUG,
-				welcomeView: require('./components/steps/business-address'),
+				welcomeView: require( './components/steps/business-address' ),
 			},
 			{
 				name: 'WooCommerce',
 				slug: Paths.WOOCOMMERCE_SLUG,
-				welcomeView: require('./components/steps/woocommerce'),
+				welcomeView: require( './components/steps/woocommerce' ),
+			},
+			{
+				name: 'Existing Store',
+				slug: Paths.EXISTING_STORE_STEP_SLUG,
+				welcomeView: require( './components/steps/existing-store' ),
 			},
 			{
-				name: "Review settings",
+				name: 'Review settings',
 				slug: Paths.REVIEW_STEP_SLUG,
-				welcomeView: require('./components/steps/review'),
+				welcomeView: require( './components/steps/review' ),
 				includeInProgress: false,
 				neverSkip: true
 			}

css/scss/_existing-store.scss

@@ -0,0 +1,20 @@
+.welcome__existing-store--dropdown {
+	.dops-select-dropdown__header {
+		height: auto;
+	}
+}
+
+.welcome__existing-store--button-container {
+	display: flex;
+	margin: auto;
+	max-width: 400px;
+	justify-content: space-between;
+
+	& > * {
+		flex: 0 auto;
+	}
+
+	button + button {
+		margin-left: 0;
+	}
+}

css/scss/welcome-panel.scss

@@ -21,3 +21,4 @@ $very-light-gray: #f5f5f5;
 @import 'jetpack-jumpstart';
 @import 'business-address';
 @import 'woocommerce';
+@import 'existing-store';

css/welcome-panel.css

@@ -582,3 +582,25 @@ img.welcome__get-started-image {
   .welcome__container .welcome__woocommerce--install-container .welcome__woocommerce--checkbox {
     float: none;
     margin: 1px 8px 0 0; }
+
+.welcome__container .dops-select-dropdown__header {
+  height: auto; }
+
+.welcome__existing-store--dropdown .dops-select-dropdown__header {
+  height: auto; }
+
+.welcome__existing-store--button-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: auto;
+  max-width: 400px;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between; }
+  .welcome__existing-store--button-container > * {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 auto;
+            flex: 0 auto; }
+  .welcome__existing-store--button-container button + button {
+    margin-left: 0; }