Merge pull request #1559 from Automattic/add/design-type-flow

Signup: Add first draft of "Triforce" flow

assets/stylesheets/_components.scss

@@ -302,6 +302,7 @@
 @import 'signup/step-header/style';
 @import 'signup/steps/domains/style';
 @import 'signup/steps/survey/style';
+@import 'signup/steps/design-type/style';
 @import 'signup/steps/plans/style';
 @import 'signup/steps/site-creation/style';
 @import 'signup/validation-fieldset/style';

client/signup/config/flows.js

@@ -135,6 +135,13 @@ const flows = {
 		lastModified: '2015-11-13'
 	},
 
+	'layout': {
+		steps: [ 'design-type', 'themes', 'domains', 'plans', 'user' ],
+		destination: getCheckoutDestination,
+		description: 'Theme trifurcation flow',
+		lastModified: '2015-12-14'
+	},
+
 	developer: {
 		steps: [ 'themes', 'site', 'user' ],
 		destination: '/devdocs/welcome',

client/signup/config/step-components.js

@@ -6,6 +6,7 @@ var EmailSignupComponent = require( 'signup/steps/email-signup-form' ),
 	ThemeSelectionComponent = require( 'signup/steps/theme-selection' ),
 	PlansStepComponent = require( 'signup/steps/plans' ),
 	DomainsStepComponent = require( 'signup/steps/domains' ),
+	DesignTypeComponent = require( 'signup/steps/design-type' ),
 	DSSStepComponent = require( 'signup/steps/dss' ),
 	SurveyStepComponent = require( 'signup/steps/survey' ),
 	config = require( 'config' );
@@ -22,5 +23,6 @@ module.exports = {
 	'survey-user': EmailSignupComponent,
 	'domains-with-theme': DomainsStepComponent,
 	'theme-dss': DSSStepComponent,
+	'design-type': DesignTypeComponent,
 	'jetpack-user': EmailSignupComponent
 };

client/signup/config/steps.js

@@ -25,6 +25,11 @@ module.exports = {
 		providesDependencies: [ 'theme', 'images' ]
 	},
 
+	'design-type': {
+		stepName: 'design-type',
+		providesDependencies: [ 'themes' ]
+	},
+
 	site: {
 		stepName: 'site',
 		apiRequestFunction: stepActions.createSite,

client/signup/steps/design-type/index.jsx

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import StepWrapper from 'signup/step-wrapper';
+import SignupActions from 'lib/signup/actions';
+import analytics from 'analytics';
+import getThemes from './themes-map';
+import Card from 'components/card';
+
+export default React.createClass( {
+	displayName: 'DesignType',
+
+	getChoices() {
+		return [
+			{ type: 'blog', label: this.translate( 'A list of my latest posts' ), image: '/calypso/images/signup/design-type/design-type-latest.svg' },
+			{ type: 'page', label: this.translate( 'A welcome page for my site' ), image: '/calypso/images/signup/design-type/design-type-welcome.svg' },
+			{ type: 'grid', label: this.translate( 'A grid of my latest posts' ), image: '/calypso/images/signup/design-type/design-type-grid.svg' },
+		];
+	},
+
+	renderChoice( choice ) {
+		return (
+			<Card className="design-type__choice" key={ choice.type }>
+				<a className="design-type__choice__link" href="#" onClick={ ( event ) => this.handleChoiceClick( event, choice.type ) }>
+					<img src={ choice.image } />
+					<h2>{ choice.label }</h2>
+				</a>
+			</Card>
+		);
+	},
+
+	renderChoices() {
+		return (
+			<div className="design-type__list">
+				{ this.getChoices().map( this.renderChoice ) }
+			</div>
+		);
+	},
+
+	render() {
+		return (
+			<div className="design-type__section-wrapper">
+				<StepWrapper
+					flowName={ this.props.flowName }
+					stepName={ this.props.stepName }
+					positionInFlow={ this.props.positionInFlow }
+					headerText={ this.translate( 'What would you like your homepage to look like?' ) }
+					subHeaderText={ this.translate( 'This will help us figure out what kinds of designs to show you.' ) }
+					signupProgressStore={ this.props.signupProgressStore }
+					stepContent={ this.renderChoices() } />
+			</div>
+		);
+	},
+
+	handleChoiceClick( event, type ) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.handleNextStep( type );
+	},
+
+	handleNextStep( designType ) {
+		const themes = getThemes( designType );
+
+		analytics.tracks.recordEvent( 'calypso_triforce_select_design', { category: designType } );
+
+		SignupActions.submitSignupStep( { stepName: this.props.stepName }, [], { themes } );
+		this.props.goToNextStep();
+	}
+} );

client/signup/steps/design-type/style.scss

@@ -0,0 +1,28 @@
+.design-type__list {
+	display: flex;
+	flex-flow: row wrap;
+}
+
+.design-type__choice {
+	padding: 0;
+	margin: 0 10px 20px 10px;
+	width: 230px;
+	flex-grow: 1;
+	transition: all 100ms ease-in-out;
+
+	a, img {
+		display: block;
+	}
+
+	h2 {
+		color: #000;
+		padding-left: 15px;
+		border-top: 1px solid transparentize( lighten( $gray, 20% ), .5 );
+		font-weight: bold;
+		line-height: 54px;
+	}
+
+	&:hover {
+		box-shadow: 0 0 0 1px $gray, 0 2px 4px lighten( $gray, 20 );
+	}
+}

client/signup/steps/design-type/themes-map.js

@@ -0,0 +1,41 @@
+import shuffle from 'lodash/collection/shuffle';
+
+const map = {
+	blog: [
+		{ name: 'Button', slug: 'button' },
+		{ name: 'Franklin', slug: 'franklin' },
+		{ name: 'Sapor', slug: 'sapor' },
+		{ name: 'Colinear', slug: 'colinear' },
+		{ name: 'Minnow', slug: 'minnow' },
+		{ name: 'Eighties', slug: 'eighties' },
+		{ name: 'Libre', slug: 'libre' },
+		{ name: 'Penscratch', slug: 'penscratch' },
+		{ name: 'Libretto', slug: 'libretto' },
+	],
+	page: [
+		{ name: 'Gateway', slug: 'gateway' },
+		{ name: 'Edin', slug: 'edin' },
+		{ name: 'Sequential', slug: 'sequential' },
+		{ name: 'Goran', slug: 'goran' },
+		{ name: 'Sela', slug: 'sela' },
+		{ name: 'Motif', slug: 'motif' },
+		{ name: 'Big Brother', slug: 'big-brother' },
+		{ name: 'Argent', slug: 'argent' },
+		{ name: 'Harmonic', slug: 'harmonic' },
+	],
+	grid: [
+		{ name: 'Dyad', slug: 'dyad' },
+		{ name: 'Blask', slug: 'blask' },
+		{ name: 'Cubic', slug: 'cubic' },
+		{ name: 'Illustratr', slug: 'illustratr' },
+		{ name: 'Snaps', slug: 'snaps' },
+		{ name: 'Sketch', slug: 'sketch' },
+		{ name: 'Gazette', slug: 'gazette' },
+		{ name: 'Apostrophe', slug: 'apostrophe' },
+		{ name: 'Pictorico', slug: 'pictorico' },
+	]
+};
+
+export default function getThemes( key ) {
+	return shuffle( map[ key ] || [] );
+}

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

@@ -64,9 +64,13 @@ module.exports = React.createClass( {
 		this.props.goToNextStep();
 	},
 
+	getThemes() {
+		return this.props.signupDependencies.themes || this.props.themes;
+	},
+
 	renderThemesList: function() {
 		var actionLabel = this.translate( 'Pick' ),
-			themes = this.props.themes.map( function( theme ) {
+			themes = this.getThemes().map( function( theme ) {
 				return {
 					id: theme.slug,
 					name: theme.name,