Add "warm welcome" for newly purchased plans

_inc/client/components/jetpack-dialogue/index.jsx

@@ -6,6 +6,7 @@ import { Component } from 'react';
 import { translate as __ } from 'i18n-calypso';
 import Card from 'components/card';
 import noop from 'lodash/noop';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -16,6 +17,10 @@ import { imagePath } from 'constants';
 
 class JetpackDialogue extends Component {
 	render() {
+		const classes = classNames(
+			this.props.className,
+			'jp-dialogue'
+		);
 		return (
 			<div className="jp-dialogue-full__container">
 				<img src={ imagePath + 'stars-full.svg' } width="60" height="60" alt={ __( 'Stars' ) } className="jp-jumpstart-full__svg-stars" />
@@ -30,7 +35,7 @@ class JetpackDialogue extends Component {
 					/>
 				}
 
-				<div className="jp-dialogue">
+				<div className={ classes }>
 					{ this.props.svg }
 
 					<h1 className="jp-dialogue__title">
@@ -40,6 +45,9 @@ class JetpackDialogue extends Component {
 					<Card>
 						{ this.props.content }
 					</Card>
+					<div>
+						{ this.props.belowContent }
+					</div>
 				</div>
 			</div>
 		);
@@ -51,6 +59,10 @@ JetpackDialogue.propTypes = {
 		React.PropTypes.string,
 		React.PropTypes.object,
 	] ).isRequired,
+	belowContent: React.PropTypes.oneOfType( [
+		React.PropTypes.string,
+		React.PropTypes.object,
+	] ).isRequired,
 	svg: React.PropTypes.oneOfType( [
 		React.PropTypes.bool,
 		React.PropTypes.object,
@@ -65,6 +77,7 @@ JetpackDialogue.defaultProps = {
 	showDismiss: true,
 	dismiss: noop,
 	content: '',
+	belowContent: '',
 	title: '',
 };
 

_inc/client/components/jetpack-dialogue/style.scss

@@ -15,7 +15,7 @@
 	text-align: center;
 	max-width: rem( 600px );
 	margin: 0 auto rem( 32px );
-	overflow: auto;
+	overflow: hidden;
 
 	@include breakpoint( "<660px" ) {
 		text-align: left;
@@ -33,6 +33,14 @@
 	p + img {
 		margin: rem( 32px ) 0 rem( 16px );
 	}
+
+	.dops-card {
+		margin-bottom: 0;
+	}
+
+	.jp-dialogue-card__below {
+		text-align: left;
+	}
 }
 
 .jp-dialogue-full__dismiss {

_inc/client/components/welcome-new-plan/index.jsx

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { connect } from 'react-redux';
+import { Component } from 'react';
+import { getPlanClass } from 'lib/plans/constants';
+
+/**
+ * Internal dependencies
+ */
+import { getSitePlan } from 'state/site';
+import { updateSettings } from 'state/settings';
+import WelcomePersonal from './personal';
+import WelcomePremium from './premium';
+import WelcomeProfessional from './professional';
+
+class WelcomeNewPlan extends Component {
+	constructor() {
+		super();
+		this.state = {
+			planWelcomeDismissed: false,
+		};
+	}
+
+	dismissWelcome() {
+		this.setState( { planWelcomeDismissed: true } );
+		this.props.dismiss();
+	}
+
+	render() {
+		const planClass = getPlanClass( this.props.sitePlan.product_slug );
+		const defaultProps = {
+			dismiss: this.dismissWelcome.bind( this ),
+			siteRawUrl: this.props.siteRawUrl,
+		};
+
+		// Hide from non-admins
+		if ( ! this.props.newPlanActivated || ! this.props.userCanManageModules || this.state.planWelcomeDismissed ) {
+			return false;
+		}
+
+		switch ( planClass ) {
+			case 'is-personal-plan' :
+				return <WelcomePersonal { ...defaultProps } />;
+			case 'is-premium-plan' :
+				return <WelcomePremium { ...defaultProps } />;
+			case 'is-business-plan' :
+				return <WelcomeProfessional { ...defaultProps } />;
+			default :
+				return false;
+		}
+	}
+}
+
+WelcomeNewPlan.propTypes = {
+	dismiss: React.PropTypes.func,
+	newPlanActivated: React.PropTypes.bool,
+	userCanManageModules: React.PropTypes.bool,
+};
+
+WelcomeNewPlan.defaultProps = {
+	newPlanActivated: false,
+	userCanManageModules: false,
+};
+
+export default connect(
+	( state ) => {
+		return {
+			sitePlan: getSitePlan( state ),
+		};
+	},
+	( dispatch ) => ( {
+		dismiss: () => {
+			return dispatch( updateSettings( { show_welcome_for_new_plan: false } ) );
+		}
+	} )
+)( WelcomeNewPlan );

_inc/client/components/welcome-new-plan/personal.jsx

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { Component } from 'react';
+import { translate as __ } from 'i18n-calypso';
+
+/**
+ * Internal dependencies
+ */
+import JetpackDialogue from 'components/jetpack-dialogue';
+import Button from 'components/button';
+import { imagePath } from 'constants';
+
+class WelcomePersonal extends Component {
+	renderInnerContent() {
+		return (
+			<div>
+				<p>
+					{ __( 'Thanks for choosing a Jetpack Personal plan. Jetpack is now backing up your site and ' +
+						'scanning for security threats.'
+					) }
+				</p>
+				<img src={ imagePath + 'customize-theme.svg' } className="jp-welcome__svg" alt={ __( 'Themes' ) } />
+				<p>
+					{ __( 'With Jetpack Personal, you have access to more than 100 free, professionally-designed WordPress ' +
+						'themes. Choose the theme that best fits your site and customize colors, images, or add a variety of ' +
+						'new widgets.'
+					) }
+				</p>
+				<img src={ imagePath + 'wordads.svg' } className="jp-welcome__svg" alt={ __( 'Sharing' ) } />
+				<p>
+					{ __( 'Using Jetpack’s powerful Publicize feature and built-in sharing tools, you’ll find new ways ' +
+						'to grow your following and increase traffic. Automatically share your newest posts on social media, ' +
+						'or allow followers to subscribe via email for your latest content right in their inbox.'
+					) }
+				</p>
+				<img src={ imagePath + 'security.svg' } className="jp-welcome__svg" alt={ __( 'Security' ) } />
+				<p>
+					{ __( 'Jetpack keeps you safe, too: you’re protected from spam in comments and contact forms, and our' +
+						' brute force login protection prevents hackers from accessing your data. And if something does go ' +
+						'wrong, you can restore a backup of your site in a single click.'
+					) }
+				</p>
+				<Button
+					className="jp-welcome-new-plan__button"
+					href={ '#/traffic' }
+					onClick={ this.props.dismiss }
+					primary
+				>
+					{ __( 'Got it!' ) }
+				</Button>
+			</div>
+		);
+	}
+
+	render() {
+		return (
+			<JetpackDialogue
+				svg={ <img src={ imagePath + 'connect-jetpack.svg' } width="160" alt={ __( 'Welcome personal' ) } style={ { paddingLeft: '60px' } } /> }
+				title={ __( 'Your Personal Jetpack plan is powering up!' ) }
+				content={ this.renderInnerContent() }
+				dismiss={ this.props.dismiss }
+				className="jp-welcome-new-plan is-personal"
+			/>
+		);
+	}
+}
+
+WelcomePersonal.propTypes = {
+	dismiss: React.PropTypes.func
+};
+
+export default WelcomePersonal;

_inc/client/components/welcome-new-plan/premium.jsx

@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { Component } from 'react';
+import { translate as __ } from 'i18n-calypso';
+import Card from 'components/card';
+
+/**
+ * Internal dependencies
+ */
+import JetpackDialogue from 'components/jetpack-dialogue';
+import { imagePath } from 'constants';
+
+class WelcomePremium extends Component {
+	renderInnerContent() {
+		return (
+			<div>
+				<p>
+					{ __( 'Thanks for choosing a Jetpack Premium plan. Jetpack is now backing up your site, scanning for' +
+						' security threats, and enabling monetization features.'
+					) }
+				</p>
+				<img src={ imagePath + 'customize-theme.svg' } className="jp-welcome__svg" alt={ __( 'Themes' ) } />
+				<p>
+					{ __( 'With Jetpack Premium, you can create the perfect site, no matter its purpose. Customize your site’s' +
+						' appearance with one of more than 200 free themes, or enhance your content with up to 13 GB of HD video ' +
+						'-- all hosted free of ads or watermarks.'
+					) }
+				</p>
+				<img src={ imagePath + 'wordads.svg' } className="jp-welcome__svg" alt={ __( 'Sharing' ) } />
+				<p>
+					{ __( 'Using Jetpack’s powerful sharing tools, you can automatically share your newest posts on social media,' +
+						' or schedule your content to be re-shared at any date or time you choose. And along with growing your ' +
+						'following, you can grow your business with tools like payment buttons and ads.'
+					) }
+				</p>
+				<img src={ imagePath + 'security.svg' } className="jp-welcome__svg" alt={ __( 'Security' ) } />
+				<p>
+					{ __( 'Keeping your hard work safe is important, too. Jetpack Premium gives you brute force' +
+						' login protection, automated spam filtering, and malware scanning. You also get daily backups ' +
+						' with hassle-free restores, just in case you need them.'
+					) }
+				</p>
+				<p>
+					{ __( 'Start exploring Jetpack Premium now to see all the benefits of your new plan.' ) }
+				</p>
+			</div>
+		);
+	}
+
+	renderBelowContent() {
+		return (
+			<div>
+				<Card
+					href={ '#/writing' }
+					compact
+					className="jp-dialogue-card__below"
+					onClick={ this.props.dismiss }
+				>
+					{ __( 'Enable premium video player' ) }
+				</Card>
+				<Card
+					href={ '#/traffic' }
+					compact
+					className="jp-dialogue-card__below"
+					onClick={ this.props.dismiss }
+				>
+					{ __( 'Monetize your site with ads' ) }
+				</Card>
+			</div>
+		);
+	}
+
+	render() {
+		return (
+			<JetpackDialogue
+				svg={ <img src={ imagePath + 'generating-cash-2.svg' } width="250" alt={ __( 'Welcome Premium' ) } /> }
+				title={ __( 'Your Premium Jetpack plan is powering up!' ) }
+				content={ this.renderInnerContent() }
+				belowContent={ this.renderBelowContent() }
+				dismiss={ this.props.dismiss }
+				className="jp-welcome-new-plan is-premium"
+			/>
+		);
+	}
+}
+
+WelcomePremium.propTypes = {
+	dismiss: React.PropTypes.func
+};
+
+export default WelcomePremium;