My Plan: Add Checklist CTA

_inc/client/my-plan/my-plan-header/checklist-cta.js

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { translate as __ } from 'i18n-calypso';
+
+/**
+ * Internal dependencies
+ */
+import Button from 'components/button';
+
+export default function ChecklistCta( { siteSlug } ) {
+	return (
+		<div className="jp-landing__plan-features-header-checklist-cta-container">
+			<Button primary href={ `https://wordpress.com/plans/my-plan/${ siteSlug }` }>
+				{ __( 'View your setup checklist' ) }
+			</Button>
+		</div>
+	);
+}

_inc/client/my-plan/my-plan-header.jsx → _inc/client/my-plan/my-plan-header/index.js

@@ -10,9 +10,10 @@ import { connect } from 'react-redux';
 /**
  * Internal dependencies
  */
-import { imagePath } from 'constants/urls';
-import { getUpgradeUrl, showBackups } from 'state/initial-state';
+import ChecklistCta from './checklist-cta';
 import ChecklistProgress from './checklist-progress-card';
+import { getUpgradeUrl, getSiteRawUrl, showBackups } from 'state/initial-state';
+import { imagePath } from 'constants/urls';
 
 class MyPlanHeader extends React.Component {
 	trackLearnMore = () => {
@@ -24,6 +25,7 @@ class MyPlanHeader extends React.Component {
 	};
 
 	render() {
+		const { siteSlug } = this.props;
 		let planCard = '';
 		switch ( getPlanClass( this.props.plan ) ) {
 			case 'is-free-plan':
@@ -43,6 +45,7 @@ class MyPlanHeader extends React.Component {
 							<p className="jp-landing__plan-features-text">
 								{ __( 'Get started with hassle-free design, stats, and performance tools.' ) }
 							</p>
+							<ChecklistCta siteSlug={ siteSlug } />
 						</div>
 					</div>
 				);
@@ -71,6 +74,7 @@ class MyPlanHeader extends React.Component {
 									{ __( 'Spam filtering and priority support.' ) }
 								</p>
 							) }
+							<ChecklistCta siteSlug={ siteSlug } />
 						</div>
 					</div>
 				);
@@ -86,7 +90,7 @@ class MyPlanHeader extends React.Component {
 								alt={ __( 'Jetpack Premium Plan' ) }
 							/>
 						</div>
-						<div className="jp-landing__plan-iconcard-current">
+						<div className="jp-landing__plan-card-current">
 							<h3 className="jp-landing__plan-features-title">
 								{ __( 'Welcome to Jetpack Premium' ) }
 							</h3>
@@ -95,6 +99,7 @@ class MyPlanHeader extends React.Component {
 									'Full security suite, marketing and revenue automation tools, unlimited video hosting, and priority support.'
 								) }
 							</p>
+							<ChecklistCta siteSlug={ siteSlug } />
 						</div>
 					</div>
 				);
@@ -119,6 +124,7 @@ class MyPlanHeader extends React.Component {
 									'Full security suite, marketing and revenue automation tools, unlimited video hosting, unlimited themes, enhanced search, and priority support.'
 								) }
 							</p>
+							<ChecklistCta siteSlug={ siteSlug } />
 						</div>
 					</div>
 				);
@@ -146,6 +152,7 @@ class MyPlanHeader extends React.Component {
 }
 export default connect( state => {
 	return {
+		siteSlug: getSiteRawUrl( state ),
 		showBackups: showBackups( state ),
 		plansMainTopUpgradeUrl: getUpgradeUrl( state, 'plans-main-top' ),
 	};

_inc/client/my-plan/style.scss

@@ -9,125 +9,45 @@
 	}
 }
 
-.jp-landing-plans__header {
-	background: $gray-dark;
-
-	@include breakpoint( ">660px" ) {
-		padding: rem( 32px ) 0 0;
+.jp-landing__plan-card-current {
+	// Force a break by including full-width psuedo-element at correct position.
+	&::before {
+		content: '';
+		order: 20;
+		width: 100%;
 	}
 
-	@include breakpoint( "<660px" ) {
-		padding: rem( 32px );
+	h3 {
+		font-size: 1.5em;
+		width: 100%; // Make sure placeholder appears
+		order: 10;
 	}
-}
 
-.jp-landing-plans__header-img-container {
-	margin: rem( 32px ) 0 0;
-	overflow: hidden;
+	.jp-landing__plan-features-text {
+		font-size: rem( 14px );
+		order: 30;
+	}
 
 	@include breakpoint( ">660px" ) {
 		display: flex;
-		flex-wrap: nowrap;
-		flex-direction: row;
-		align-items: center;
-	}
+		flex-wrap: wrap;
 
-	@include breakpoint( "<660px" ) {
-		margin-bottom: 0;
+		.jp-landing__plan-features-text {
+			margin-right: 3em;
+		}
 	}
-}
 
-// clouds are a little hacky, but works for IE11 -jg
-.jp-landing-plans__clouds {
-	position: relative;
-	overflow: hidden;
-	padding-top: rem( 80px );
-
-	img {
-		position: absolute;
-		bottom: -2px;
-		left: -5%;
-		right: -5%;
-		height: auto;
-		width: 110%;
-	}
-
-	@include breakpoint( "<660px" ) {
-		display: none;
-	}
-}
-// end IE11 cloud hack
-
-.jp-landing-plans__header-col-left {
-	flex-basis: 45%;
-
-	@include breakpoint( ">660px" ) {
-		padding-left: rem( 32px );
-	}
 }
 
-.jp-landing-plans__header-col-right {
-	flex-basis: 55%;
+.jp-landing__plan-features-header-checklist-cta-container {
+	order: 30;
+	align-self: center;
 
-	@include breakpoint( ">660px" ) {
-		padding: 0 rem( 32px );
-	}
-
-	@include breakpoint( "<660px" ) {
-		text-align: center;
-	}
-}
-
-.jp-landing-plans__header-title,
-.jp-landing-plans__header-description {
-	line-height: 1.5;
-
-	@include breakpoint( ">660px" ) {
-		text-align: center;
+	.dops-button {
+		margin-right: 0;
 	}
 }
 
-.jp-landing-plans__header-title,
-.jp-landing-plans__header-subtitle {
-	color: $white;
-	font-weight: 400;
-	margin: 0;
-}
-
-.jp-landing-plans__header-title {
-	font-size: rem( 20px );
-}
-
-.jp-landing-plans__header-description {
-	font-size: rem( 14px );
-	margin: 0;
-	padding-bottom: rem( 16px );
-}
-
-.jp-landing-plans__header-subtitle {
-	font-size: rem( 16px );
-	line-height: 1.25;
-}
-
-.jp-landing-plans__header-description,
-.jp-landing-plans__header-text {
-	color: lighten($gray, 10%);
-}
-
-.jp-landing-plans__header-text {
-	font-size: rem( 14px );
-	padding: rem( 24px ) 0;
-	margin: 0;
-}
-
-.jp-landing-plans__header-btn-container {
-	margin: 0;
-}
-
-.jp-landing__plan-iconcard-current h3 {
-	font-size: 1.5em;
-}
-
 .jp-landing__plan-features-card {
 	display: flex;
 	flex-wrap: nowrap;
@@ -279,3 +199,5 @@
 		text-align: center;
 	}
 }
+
+@import './my-plan-header/checklist-progress-card/style.scss';

_inc/client/scss/style.scss

@@ -47,7 +47,6 @@
 @import '../components/apps-card/style';
 @import '../components/jetpack-dialogue/style';
 @import '../components/about-page/style';
-@import '../my-plan/checklist-progress-card/style.scss';
 
 // Page Templates
 @import '../at-a-glance/style';