MailChimp integration spike.

Rebsed after:
1. MailChimp integration query components. #18751
2. MailChimp getting started UI view. #18779
3. MailChimp setup log into MailChimp.com step. #18783
4. MailChimp API key input. #18789
5. MailChimp store info card. #18797
6. MailChimp newsletter settings UI component. #18804
7. Add MailChimp to plugins installation process. #18777
8. MailChimp Dashboard UI component with sync view. #18818
9. Campaign Defaults Card #18801

client/components/wizard/style.scss

@@ -1,17 +1,21 @@
 /* Progress Indicator */
+
+.progress-bar,
+.progress-bar__progress {
+	border-radius: 0;
+}
+
 .wizard__progress-indicator {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-
-	color: darken( $gray, 20 );
-	font-size: 14px;
-	font-weight: 300;
-	margin-bottom: 10px;
+	color: $gray-text-min;
+	font-size: 12px;
+	margin-bottom: 8px;
 	text-align: center;
 
 	@include breakpoint( '<660px' ) {
-		padding-top: 10px;
+		padding-top: 8px;
 	}
 }
 

client/extensions/woocommerce/app/dashboard/index.js

@@ -3,7 +3,7 @@
  *
  * @format
  */
-
+import config from 'config';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
@@ -29,6 +29,11 @@ import {
 } from 'woocommerce/state/sites/orders/selectors';
 import { fetchOrders } from 'woocommerce/state/sites/orders/actions';
 import { fetchProducts } from 'woocommerce/state/sites/products/actions';
+import { requestSyncStatus } from 'woocommerce/state/sites/settings/email/actions';
+import {
+	isRequestingSyncStatus,
+	hasMailChimpConnection,
+} from 'woocommerce/state/sites/settings/email/selectors';
 import { getSelectedSiteWithFallback } from 'woocommerce/state/sites/selectors';
 import {
 	getTotalProducts,
@@ -42,6 +47,7 @@ import PreSetupView from './pre-setup-view';
 import RequiredPagesSetupView from './required-pages-setup-view';
 import RequiredPluginsInstallView from './required-plugins-install-view';
 import SetupTasksView from './setup-tasks-view';
+import MailChimp from 'woocommerce/app/settings/email/mailchimp/index.js';
 
 class Dashboard extends Component {
 	static propTypes = {
@@ -54,8 +60,10 @@ class Dashboard extends Component {
 			slug: PropTypes.string.isRequired,
 			URL: PropTypes.string.isRequired,
 		} ),
+		mailChimpConfigured: PropTypes.bool,
 		fetchOrders: PropTypes.func,
 		fetchSetupChoices: PropTypes.func,
+		requestSyncStatus: PropTypes.func,
 	};
 
 	componentDidMount = () => {
@@ -64,6 +72,7 @@ class Dashboard extends Component {
 		if ( selectedSite && selectedSite.ID ) {
 			this.props.fetchSetupChoices( selectedSite.ID );
 			this.props.fetchOrders( selectedSite.ID );
+			this.props.requestSyncStatus( selectedSite.ID );
 
 			if ( ! productsLoaded ) {
 				this.props.fetchProducts( selectedSite.ID, { page: 1 } );
@@ -80,6 +89,7 @@ class Dashboard extends Component {
 		if ( newSiteId && oldSiteId !== newSiteId ) {
 			this.props.fetchSetupChoices( newSiteId );
 			this.props.fetchOrders( newSiteId );
+			this.props.requestSyncStatus( newSiteId );
 
 			if ( ! productsLoaded ) {
 				this.props.fetchProducts( newSiteId, { page: 1 } );
@@ -143,11 +153,20 @@ class Dashboard extends Component {
 			return <SetupTasksView onFinished={ this.onStoreSetupFinished } site={ selectedSite } />;
 		}
 
+		let manageView = <ManageOrdersView site={ selectedSite } />;
 		if ( ! hasOrders ) {
-			return <ManageNoOrdersView site={ selectedSite } />;
+			manageView = <ManageNoOrdersView site={ selectedSite } />;
 		}
 
-		return <ManageOrdersView site={ selectedSite } />;
+		return (
+			<div>
+				{ manageView }
+				{ ! this.props.mailChimpConfigured &&
+					( config.isEnabled( 'woocommerce/extension-settings-email' ) && (
+						<MailChimp site={ selectedSite } redirectToSettings />
+					) ) }
+			</div>
+		);
 	};
 
 	render = () => {
@@ -170,10 +189,14 @@ class Dashboard extends Component {
 function mapStateToProps( state ) {
 	const selectedSite = getSelectedSiteWithFallback( state );
 	const loading =
-		areOrdersLoading( state ) || areSetupChoicesLoading( state ) || areProductsLoading( state );
+		areOrdersLoading( state ) ||
+		areSetupChoicesLoading( state ) ||
+		areProductsLoading( state ) ||
+		isRequestingSyncStatus( state );
 	const hasOrders = getNewOrdersWithoutPayPalPending( state ).length > 0;
 	const hasProducts = getTotalProducts( state ) > 0;
 	const productsLoaded = areProductsLoaded( state );
+	const mailChimpConfigured = hasMailChimpConnection( state );
 	const finishedInitialSetup = getFinishedInitialSetup( state );
 
 	return {
@@ -182,6 +205,7 @@ function mapStateToProps( state ) {
 		finishedPageSetup: getFinishedPageSetup( state ),
 		hasOrders,
 		hasProducts,
+		mailChimpConfigured,
 		productsLoaded,
 		loading,
 		selectedSite,
@@ -195,6 +219,7 @@ function mapDispatchToProps( dispatch ) {
 			fetchOrders,
 			fetchSetupChoices,
 			fetchProducts,
+			requestSyncStatus,
 		},
 		dispatch
 	);

client/extensions/woocommerce/app/settings/email/mailchimp/getting-started.js

@@ -10,13 +10,16 @@ import React from 'react';
  */
 import Button from 'components/button';
 import Card from 'components/card';
+import { getLink } from 'woocommerce/lib/nav-utils';
 import { localize } from 'i18n-calypso';
 
-const GettingStarted = localize( ( { translate, onClick } ) => {
+const GettingStarted = localize( ( { translate, onClick, isPlaceholder, site, redirectToSettings } ) => {
 	const allow = translate( 'Allow customers to subscribe to your Email list' );
 	const send = translate( 'Send abandon cart emails' );
 	const create = translate( 'Create purchase-based segments for targeted campaigns' );
+	const getStarted = translate( 'Get started with MailChimp' );
 	const list = [ allow, send, create ];
+	const wizardLink = getLink( 'settings/email/:site/wizard', site );
 
 	return (
 		<div>
@@ -26,7 +29,7 @@ const GettingStarted = localize( ( { translate, onClick } ) => {
 					{ translate( 'Allow your customers to subscribe to your MailChimp email list.' ) }
 				</div>
 			</Card>
-			<Card className="mailchimp__getting-started-content">
+			{ ! isPlaceholder && <Card>
 				<span>
 					<img
 						src={ '/calypso/images/illustrations/illustration-layout.svg' }
@@ -46,17 +49,36 @@ const GettingStarted = localize( ( { translate, onClick } ) => {
 							</li>
 						) }
 					</ul>
-					<Button className="mailchimp__getting-started-button" onClick={ onClick }>
-						{ translate( 'Get started with MailChimp' ) }
-					</Button>
+					{ ! redirectToSettings && (
+						<Button className="mailchimp__getting-started-button" onClick={ onClick }>
+							{ getStarted }
+						</Button>
+					) }
+					{ redirectToSettings && (
+						<Button className="mailchimp__getting-started-button" href={ wizardLink }>
+							{ getStarted }
+						</Button>
+					) }
 				</span>
-			</Card>
+			</Card> }
+			{ isPlaceholder &&
+				<Card
+					className="mailchimp__getting-started-loading-placeholder"
+				>
+					<p />
+					<p />
+					<p />
+					<p />
+				</Card> }
 		</div>
 	);
 } );
 
 GettingStarted.propTypes = {
 	onClick: PropTypes.func.isRequired,
+	isPlaceholder: PropTypes.bool,
+	redirectToSettings: PropTypes.bool,
+	site: PropTypes.object,
 };
 
 export default GettingStarted;

client/extensions/woocommerce/app/settings/email/mailchimp/setup-mailchimp.js

@@ -141,7 +141,7 @@ class MailChimpSetup extends React.Component {
 		if ( this.hasEmptyValues( settings ) ) {
 			return false;
 		}
-		if ( settings.store_phone.length <= 6 ) {
+		if ( settings.store_phone.length < 6 ) {
 			return false;
 		}
 

client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/key-input.js

@@ -19,13 +19,13 @@ const KeyInputStep = localize( ( { translate, onChange, apiKey, isKeyCorrect } )
 			{ translate( 'Now that you\'re signed in to MailChimp, you need an API key to start the connection process' ) }
 		</div>
 		<div className="setup-steps__mailchimp-api-directions" >
-			<span>{ translate( 'To find your Mailchimp API key ' ) }</span>
+			<p><span>{ translate( 'To find your Mailchimp API key ' ) }</span>
 			<span className="setup-steps__mailchimp-api-directions-bold">
 				{ translate( 'click your profile picture, select \'Account\', and go to Extras > API keys.' ) }
 			</span>
-			<div>{ translate( 'From there, grab an existing key or generate a new one for your store.' ) } </div>
+			{ translate( ' From there, grab an existing key or generate a new one for your store.' ) }</p>
 		</div>
-		<FormLabel required={ ! isKeyCorrect }>
+		<FormLabel required >
 			{ translate( 'Mailchimp API Key:' ) }
 		</FormLabel>
 		<FormTextInput
@@ -35,7 +35,11 @@ const KeyInputStep = localize( ( { translate, onChange, apiKey, isKeyCorrect } )
 			onChange={ onChange }
 			value={ apiKey }
 		/>
-		{ ! isKeyCorrect && <FormInputValidation isError text="Key appears to be invalid" /> }
+		{ ! isKeyCorrect && (
+			apiKey
+			? <FormInputValidation isError text={ translate( 'Key appears to be invalid.' ) } />
+			: <FormInputValidation isError text={ translate( 'An API key is required to make a connection.' ) } />
+		) }
 	</FormFieldset>
 ) );
 

client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/log-into-mailchimp.js

@@ -13,12 +13,14 @@ import { translate } from 'i18n-calypso';
 export default () => (
 	<div>
 		<div className="setup-steps__login-title">{ translate( 'Get started' ) }</div>
-		<div>{ translate( 'First, you\'ll have to have a MailChimp account. If you already have one, log in.' ) }</div>
+		<p>
+			{ translate( 'First, you\'ll have to have a MailChimp account. If you already have one, log in.' ) }
+		</p>
 		<Button
 			href="https://login.mailchimp.com/"
 			target="_blank"
 			className="setup-steps__mailchimp-login-button" >
-			{ translate( 'Signup or log in to MailChimp' ) }
+			{ translate( 'Sign up or log in to MailChimp' ) }
 			<Gridicon icon="external" />
 		</Button>
 	</div>

client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/newsletter-settings.js

@@ -21,8 +21,12 @@ const NewsletterSettings = ( { storeData = {}, onChange, siteId, isRequesting, t
 	return (
 		<FormFieldset className="setup-steps__store-info-field">
 			<QueryMailChimpLists siteId={ siteId } />
-			<div>{ translate( 'Pick a list, you will not able to change it for now so pick carefully.' ) }</div>
-			<div>{ translate( 'Create your list at mailchimp.com if you have not done it aready.' ) }</div>
+			<div className="setup-steps__login-title">{ translate( 'Now choose a list to sync!' ) }</div>
+			<p>{ translate(
+					'Choose your list carefully as you wont be able to change it later. ' +
+					'Create a list in MailChimp if you have not already done so.'
+				) }
+			</p>
 			<FormLabel>
 				{ translate( 'Newsletter' ) }
 			</FormLabel>
@@ -37,6 +41,12 @@ const NewsletterSettings = ( { storeData = {}, onChange, siteId, isRequesting, t
 					) )
 				}
 			</FormSelect>
+			<p className="setup-steps__sync-explanation">
+				{ translate(
+					'We will then sync your orders so you can segment based on purchase ' +
+						'history and products so you automatically add product information into customer emails.'
+				) }
+			</p>
 		</FormFieldset>
 	);
 };

client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/store-info.js

@@ -49,7 +49,12 @@ const StoreInfo = ( { storeData = {}, onChange, validateFields } ) => {
 
 	return (
 		<FormFieldset className="setup-steps__store-info-field">
-			<div>{ translate( 'Make sure that store informatin is correct. Every field is required.' ) }</div>
+			<p>
+				{ translate(
+					'MailChimp needs to know a few basic information about your store ' +
+						'to provide you the best experience. Note that every field is required.'
+				) }
+			</p>
 			<SettingsPaymentsLocationCurrency />
 			{ fields.map( ( item, index ) => {
 				const error = isError( item.name );