Signup: move MLB flow to Calypso

assets/stylesheets/_components.scss

@@ -373,3 +373,4 @@
 @import 'signup/validation-fieldset/style';
 @import 'support/support-user/style';
 @import 'vip/vip-logs/style';
+@import 'signup/steps/mlb-theme-selection/style';

client/signup/config/flows.js

@@ -229,6 +229,19 @@ const flows = {
 		destination: getFreeTrialDestination,
 		description: 'Signup flow for free trials',
 		lastModified: '2016-03-21'
+	},
+
+	/*
+	 * MLB signup flow is not production ready.
+	 * Some API changes are neeeded to
+	 * - allow mlblogs.com sites creation as a free product.
+	 * - allow updating theme_options for team-specific styles.
+	 */
+	'mlb.com': {
+		steps: [ 'mlb-themes', 'mlb-domains', 'user' ],
+		destination: '/me/next?welcome',
+		description: 'Major League Baseball Blogs Signup flow',
+		lastModified: '2015-11-22'
 	}
 };
 

client/signup/config/step-components.js

@@ -9,7 +9,9 @@ var config = require( 'config' ),
 	SiteComponent = require( 'signup/steps/site' ),
 	SurveyStepComponent = require( 'signup/steps/survey' ),
 	ThemeSelectionComponent = require( 'signup/steps/theme-selection' ),
-	UserSignupComponent = require( 'signup/steps/user' );
+	UserSignupComponent = require( 'signup/steps/user' ),
+	MlbThemeSelectionComponent = require( 'signup/steps/mlb-theme-selection' ),
+	MlbDomainsStepComponent = require( 'signup/steps/mlb-domains' );
 
 module.exports = {
 	'design-type': DesignTypeComponent,
@@ -24,5 +26,7 @@ module.exports = {
 	'survey-user': UserSignupComponent,
 	test: config( 'env' ) === 'development' ? require( 'signup/steps/test-step' ) : undefined,
 	themes: ThemeSelectionComponent,
-	user: UserSignupComponent
+	user: UserSignupComponent,
+	'mlb-themes': MlbThemeSelectionComponent,
+	'mlb-domains': MlbDomainsStepComponent
 };

client/signup/config/steps.js

@@ -100,5 +100,18 @@ module.exports = {
 			subHeaderText: i18n.translate( 'You\'re moments away from connecting Jetpack.' )
 		},
 		providesDependencies: [ 'bearer_token', 'username' ]
+	},
+
+	'mlb-themes': {
+		stepName: 'mlb-themes',
+		apiRequestFunction: stepActions.setThemeOnSite,
+		dependencies: [ 'siteSlug' ]
+	},
+
+	'mlb-domains': {
+		stepName: 'mlb-domains',
+		apiRequestFunction: stepActions.createSite,
+		providesDependencies: [ 'siteSlug' ],
+		delayApiRequestUntilComplete: true
 	}
 };

client/signup/steps/mlb-domains/README.md

@@ -0,0 +1,11 @@
+## MLB.com blogs domain selection step
+
+This step is used by the MLB blogs signup flow (flow `mlb`)
+
+This step offers the user:
+
+* Domain selection with proposal of free .mlblogs.com domain and regular `.wordpress.com` domains and prices.
+
+### Copytext
+
+* Link to Terms of Use on team/theme selection step. Text: *By clicking continue, you understand that activating an MLB.com/blogs account indicates your acceptance of the [Terms of Use](http://mlb.mlb.com/mlb/official_info/about_mlb_com/terms_of_use.jsp)*.

client/signup/steps/mlb-domains/index.jsx

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+var React = require( 'react' );
+
+/**
+ * Internal dependencies
+ */
+var SiteCreationStep = require( 'signup/steps/site' );
+
+module.exports = React.createClass( {
+	displayName: 'MlbDomainsStep',
+
+	getDefaultProps: function() {
+		return {
+			domain: '.mlblogs.com'
+		};
+	},
+
+	render: function() {
+		return (
+			<SiteCreationStep {...this.props }/>
+		);
+	}
+} );

client/signup/steps/mlb-theme-selection/README.md

@@ -0,0 +1,13 @@
+## MLB.com blogs theme selection step
+
+This step is used by the MLB blogs signup flow (flow `mlb`)
+
+This step offers the user:
+
+* Team selection (Defaulting to generic MLB theme set).
+* Theme selection (Selectable by thumbnail clicking).
+  * Fan
+  * Modern
+  * Retro
+* Continue (button) on team/theme selection step.
+* Link to MLB.com/blogs on team/theme selection step. Text: *Welcome to [MLB.com/blogs](http://www.mlb.com/blogs). After choosing your team and theme below you'll be ready to start blogging.*

client/signup/steps/mlb-theme-selection/index.jsx

@@ -0,0 +1,143 @@
+var React = require( 'react' ),
+	noop = require( 'lodash/noop' );
+
+/**
+ * Internal dependencies
+ */
+var StepWrapper = require( 'signup/step-wrapper' ),
+	analytics = require( 'lib/analytics' ),
+	SignupActions = require( 'lib/signup/actions' );
+import ThemesList from 'components/themes-list' ;
+
+module.exports = React.createClass( {
+	displayName: 'MlbThemeSelection',
+	getDefaultProps: function() {
+		var props = {
+			variations: [ 'Fan', 'Modern', 'Retro' ],
+			teams: {
+				mlb: 'MLB',
+				'minor-league': 'MiLB.com',
+				diamondbacks: 'Arizona Diamondbacks',
+				braves: 'Atlanta Braves',
+				orioles: 'Baltimore Orioles',
+				redsox: 'Boston Red Sox',
+				cubs: 'Chicago Cubs',
+				whitesox: 'Chicago White Sox',
+				reds: 'Cincinnati Reds',
+				indians: 'Cleveland Indians',
+				rockies: 'Colorado Rockies',
+				tigers: 'Detroit Tigers',
+				astros: 'Houston Astros',
+				royals: 'Kansas City Royals',
+				angels: 'Los Angeles Angels',
+				dodgers: 'Los Angeles Dodgers',
+				marlins: 'Miami Marlins',
+				brewers: 'Milwaukee Brewers',
+				twins: 'Minnesota Twins',
+				mets: 'New York Mets',
+				yankees: 'New York Yankees',
+				athletics: 'Oakland Athletics',
+				phillies: 'Philadelphia Phillies',
+				pirates: 'Pittsburgh Pirates',
+				padres: 'San Diego Padres',
+				giants: 'San Francisco Giants',
+				mariners: 'Seattle Mariners',
+				cardinals: 'St. Louis Cardinals',
+				rays: 'Tampa Bay Rays',
+				rangers: 'Texas Rangers',
+				bluejays: 'Toronto Blue Jays',
+				nationals: 'Washington Nationals'
+			}
+		};
+		return props;
+	},
+
+	getInitialState: function() {
+		return {
+			team: 'mlb'
+		};
+	},
+
+	handleTeamSelect: function( event ) {
+		event.preventDefault();
+		this.setState( { team: event.target.value } );
+	},
+
+	getThumbnailUrl: function( team, variation ) {
+		var url = 'https://i1.wp.com/s0.wp.com/wp-content/themes/vip/partner-' +
+			team + '-' + variation.toLowerCase() + '/screenshot.png?w=660';
+		if ( team !== 'mlb' ) {
+			url = 'https://signup.wordpress.com/wp-content/mu-plugins/signup-variants/mlblogs/images/themes/' +
+				variation.toLowerCase() + '/' + team + '.jpg';
+		}
+		return url;
+	},
+
+	handleSubmit: function( theme ) {
+		var variation = theme.name,
+			themeSlug = 'partner-mlb-' + variation.toLowerCase();
+
+		analytics.tracks.recordEvent( 'calypso_mlb_signup_theme_select', { theme: themeSlug, team: this.state.team } );
+		SignupActions.submitSignupStep( {
+			stepName: this.props.stepName,
+			processingMessage: this.translate( 'Adding your theme' ),
+			themeSlug
+		} );
+
+		this.props.goToNextStep();
+	},
+
+	renderThemes: function() {
+		var actionLabel = this.translate( 'Pick' ),
+			themes = this.props.variations.map( ( variation ) => {
+				return {
+					id: variation.toLowerCase(),
+					name: variation,
+					screenshot: this.getThumbnailUrl( this.state.team, variation ),
+					actionLabel: actionLabel
+				};
+			} );
+		return (
+			<div>
+				<div className="mlb-theme-selection__team-select-container">
+					<fieldset className="form-fieldset">
+						<select onChange={ this.handleTeamSelect } name="team-field">
+							<option key="mlb" value="mlb">{ this.translate( 'Choose your team…' ) }</option>
+							{ Object.keys( this.props.teams ).map( ( key ) => {
+								let team = this.props.teams[ key ];
+								return <option key={ key } value={ key }>{ team }</option>;
+							}.bind( this ) ) }
+						</select>
+					</fieldset>
+				</div>
+				<ThemesList
+					getButtonOptions= { noop }
+					onScreenshotClick= { this.handleSubmit }
+					onMoreButtonClick= { noop }
+					{ ...this.props }
+					themes= { themes } />
+				<div className="mlb-theme-selection__terms">
+					<p>
+						{ this.translate( 'By selecting a theme or clicking Skip, you understand that activating an MLB.com/blogs account indicates your acceptance of the {{a}}Terms of Use{{/a}}.', {
+							components: {
+								a: <a href="http://mlb.mlb.com/mlb/official_info/about_mlb_com/terms_of_use.jsp" target="_blank" />
+							}
+						} ) }
+					</p>
+				</div>
+			</div>
+		);
+	},
+
+	render: function() {
+		return (
+			<StepWrapper
+				headerText={ this.translate( 'Welcome to MLB.com/blogs.' ) }
+				fallbackHeaderText={ this.translate( 'Register.' ) }
+				fallbackSubHeaderText={ this.translate( 'No need to overthink it. You can always switch to a different theme\u00a0later.' ) }
+				subHeaderText={ this.translate( 'After choosing your team and theme below you\'ll be ready to start blogging.' ) }
+				stepContent={ this.renderThemes() }
+				{ ...this.props } />
+		);
+	}
+} );

client/signup/steps/mlb-theme-selection/style.scss

@@ -0,0 +1,29 @@
+.mlb-theme-selection__terms p {
+	text-align: center;
+	color: #87a6bc;
+	font-size: 11px;
+}
+
+.mlb-theme-selection__team-select-container {
+	display: flex;
+	flex: row wrap;
+}
+
+.mlb-theme-selection__team-select-container fieldset {
+	width: 220px;
+	padding: 1px;
+	flex-grow: 1;
+	flex-shrink: 0;
+}
+
+.mlb-theme-selection__team-select-container::before,
+.mlb-theme-selection__team-select-container::after {
+	content: " ";
+	display: block;
+	width: 230px;
+	flex-grow: 1;
+}
+
+.mlb-theme-selection__team-select-container select {
+	width: 100%;
+}

client/signup/steps/site/index.jsx

@@ -36,6 +36,12 @@ var siteUrlsSearched = [],
 module.exports = React.createClass( {
 	displayName: 'Site',
 
+	getDefaultProps: function() {
+		return {
+			domain: '.wordpress.com'
+		};
+	},
+
 	getInitialState: function() {
 		return {
 			form: null,
@@ -167,7 +173,7 @@ module.exports = React.createClass( {
 
 	save: function() {
 		SignupActions.saveSignupStep( {
-			stepName: 'site',
+			stepName: this.props.stepName,
 			form: this.state.form
 		} );
 	},
@@ -231,7 +237,7 @@ module.exports = React.createClass( {
 				isValid={ formState.isFieldValid( this.state.form, 'site' ) }
 				onBlur={ this.handleBlur }
 				onChange={ this.handleChangeEvent } />
-			<span className='site-signup-step__wordpress-domain-suffix'>.wordpress.com</span>
+			<span className='site-signup-step__wordpress-domain-suffix'>{ this.props.domain }</span>
 		</ValidationFieldset>;
 	},