Plans: Introduce and hook up Jetpack product installer

client/my-sites/checkout/checkout/index.jsx

@@ -83,7 +83,6 @@ import { abtest } from 'lib/abtest';
  */
 import './style.scss';
 
-
 export class Checkout extends React.Component {
 	static propTypes = {
 		cards: PropTypes.array.isRequired,
@@ -454,15 +453,9 @@ export class Checkout extends React.Component {
 			return `/${ destination }/${ selectedSiteSlug }`;
 		}
 
-		/**
-		 * @TODO Enable when plan setup is completed on the My Plan page
-		 *
-		 * This route skips the checkout thank you page where plan setup currently
-		 * occurs. That's undesireable until the plans can be set up correctly on My Plan.
-		 */
-		// if ( this.props.isJetpackNotAtomic && isEnabled( 'jetpack/checklist' ) ) {
-		// 	return `/plans/my-plan/${ selectedSiteSlug }?thank-you`;
-		// }
+		if ( this.props.isJetpackNotAtomic && config.isEnabled( 'jetpack/checklist' ) ) {
+			return `/plans/my-plan/${ selectedSiteSlug }?thank-you`;
+		}
 
 		return this.props.selectedFeature && isValidFeatureKey( this.props.selectedFeature )
 			? `/checkout/thank-you/features/${

client/my-sites/plans/current-plan/current-plan-thank-you-card/index.js

@@ -1,91 +1,98 @@
-/** @format */
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
-import { get, invoke, isFinite } from 'lodash';
 import { localize } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
+import Button from 'components/button';
 import Card from 'components/card';
-import getCurrentPlanPurchase from 'state/selectors/get-current-plan-purchase';
+import getJetpackProductInstallProgress from 'state/selectors/get-jetpack-product-install-progress';
+import JetpackProductInstall from 'my-sites/plans/current-plan/jetpack-product-install';
 import ProgressBar from 'components/progress-bar';
-import QuerySitePurchases from 'components/data/query-site-purchases';
-import { getPlan } from 'lib/plans';
-import { getSelectedSiteId } from 'state/ui/selectors';
-import { getSitePlanSlug } from 'state/sites/selectors';
+import { getSelectedSiteId, getSelectedSiteSlug } from 'state/ui/selectors';
 
 export class CurrentPlanThankYouCard extends Component {
-	static propTypes = {
-		progressComplete: PropTypes.number,
-		progressTotal: PropTypes.number,
-	};
+	getMyPlanRoute() {
+		const { siteSlug } = this.props;
+
+		return `/plans/my-plan/${ siteSlug }`;
+	}
 
 	render() {
-		const { moment, planName, purchaseExpiryDate, siteId, translate } = this.props;
-		const duration = purchaseExpiryDate
-			? moment.duration( moment().diff( purchaseExpiryDate ) ).humanize()
-			: null;
+		const { progressComplete, translate } = this.props;
+
 		return (
-			<Card className="current-plan-thank-you-card">
-				<QuerySitePurchases siteId={ siteId } />
-				<div className="current-plan-thank-you-card__content">
-					<img
-						className="current-plan-thank-you-card__illustration"
-						alt=""
-						aria-hidden="true"
-						src="/calypso/images/illustrations/fireworks.svg"
-					/>
-					<h1 className="current-plan-thank-you-card__title">
-						{ translate( 'Thank you for your purchase!' ) }
-					</h1>
-					<p>
-						{ duration && planName
-							? translate(
-									'Your website is on a %(planName)s plan for %(duration)s. That means it has lots of useful security tools — let’s walk through a short checklist of the essentials so Jetpack can start monitoring things for you.',
-									{
-										args: { duration, planName },
-									}
-							  )
-							: ' ' /* &nbsp; maintain some space */ }
-					</p>
-					<p>
-						{ translate(
-							'We’ve taken the liberty of starting the first two items, since they’re key to your site’s safety: we’re configuring spam filtering and backups for you now. Once that’s done, we can work through the rest of the checklist.'
-						) }
-					</p>
-					{ /* can be 0 */ isFinite( this.props.progressComplete ) &&
-						/* shouldn't be 0 */ this.props.progressTotal && (
-							<ProgressBar
-								isPulsing
-								total={ this.props.progressTotal }
-								value={ this.props.progressComplete }
-							/>
-						) }
-					<p>
-						<a
-							className="current-plan-thank-you-card__skip-setup"
-							href={ /* @TODO (sirreal) fix this */ document.location.pathname }
-						>
-							{ translate( 'Skip setup. I’ll do this later.' ) }
-						</a>
-					</p>
-				</div>
-			</Card>
+			<Fragment>
+				<JetpackProductInstall />
+
+				{ progressComplete !== null && (
+					<Card className="current-plan-thank-you-card__main">
+						<div className="current-plan-thank-you-card__content">
+							{ progressComplete === 100 ? (
+								<Fragment>
+									<img
+										className="current-plan-thank-you-card__illustration"
+										alt=""
+										aria-hidden="true"
+										src="/calypso/images/illustrations/security.svg"
+									/>
+									<h1 className="current-plan-thank-you-card__title">
+										{ translate( 'So long spam, hello backups!' ) }
+									</h1>
+									<p>
+										{ translate( 'We’ve finished setting up spam filtering and backups for you.' ) }
+										<br />
+										{ translate( "You're now ready to finish the rest of the checklist." ) }
+									</p>
+									<Button primary href={ this.getMyPlanRoute() }>
+										{ translate( 'Continue' ) }
+									</Button>
+								</Fragment>
+							) : (
+								<Fragment>
+									<img
+										className="current-plan-thank-you-card__illustration"
+										alt=""
+										aria-hidden="true"
+										src="/calypso/images/illustrations/fireworks.svg"
+									/>
+									<h1 className="current-plan-thank-you-card__title">
+										{ translate( 'Thank you for your purchase!' ) }
+									</h1>
+									<p>{ translate( "Now let's make sure your site is protected." ) }</p>
+									<p>
+										{ translate(
+											"We're setting up spam filters and site backups for you first. Once that's done, our security checklist will guide you through the next steps."
+										) }
+									</p>
+
+									<ProgressBar isPulsing total={ 100 } value={ progressComplete || 0 } />
+
+									<p>
+										<a href={ this.getMyPlanRoute() }>
+											{ translate( 'Skip setup. I’ll do this later.' ) }
+										</a>
+									</p>
+								</Fragment>
+							) }
+						</div>
+					</Card>
+				) }
+			</Fragment>
 		);
 	}
 }
 
 export default connect( state => {
 	const siteId = getSelectedSiteId( state );
-	const planSlug = getSitePlanSlug( state, siteId );
+
 	return {
-		planName: invoke( getPlan( planSlug ), [ 'getTitle' ] ),
-		purchaseExpiryDate: get( getCurrentPlanPurchase( state, siteId ), [ 'expiryDate' ] ),
+		progressComplete: getJetpackProductInstallProgress( state, siteId ),
 		siteId,
+		siteSlug: getSelectedSiteSlug( state ),
 	};
 } )( localize( CurrentPlanThankYouCard ) );

client/my-sites/plans/current-plan/current-plan-thank-you-card/style.scss

@@ -1,10 +1,14 @@
-.current-plan-thank-you-card {
+.current-plan-thank-you-card__main {
 	box-shadow: none;
 	text-align: center;
 
 	@include breakpoint( '>800px' ) {
 		font-size: 16px;
 		margin-bottom: 40px;
+
+		a {
+			font-size: 14px;
+		}
 	}
 
 	.progress-bar {
@@ -32,7 +36,3 @@
 	font-size: 24px;
 	margin: 18px 0 14px;
 }
-
-.current-plan-thank-you-card__skip-setup {
-	font-size: 14px;
-}

client/my-sites/plans/current-plan/index.jsx

@@ -135,10 +135,7 @@ class CurrentPlan extends Component {
 				) }
 
 				{ this.props.showThankYou ? (
-					<CurrentPlanThankYouCard
-						progressComplete={ /* @TODO (sirreal) hook up progress reporting */ 10 }
-						progressTotal={ 100 }
-					/>
+					<CurrentPlanThankYouCard />
 				) : (
 					<CurrentPlanHeader
 						isPlaceholder={ isLoading }