Customer Home: Add a welcome banner.

client/my-sites/customer-home/main.jsx

@@ -57,6 +57,7 @@ import { getCurrentUser, isCurrentUserEmailVerified } from 'state/current-user/s
 import QueryActiveTheme from 'components/data/query-active-theme';
 import QueryCanonicalTheme from 'components/data/query-canonical-theme';
 import GoMobileCard from 'my-sites/customer-home/go-mobile-card';
+import WelcomeBanner from './welcome-banner';
 import StatsCard from './stats-card';
 import isEligibleForDotcomChecklist from 'state/selectors/is-eligible-for-dotcom-checklist';
 
@@ -218,6 +219,7 @@ class Home extends Component {
 			siteIsUnlaunched,
 			isAtomic,
 			trackAction,
+			displayWelcomeBanner,
 		} = this.props;
 
 		// Show a thank-you message 30 mins post site creation/purchase
@@ -287,7 +289,7 @@ class Home extends Component {
 						</div>
 					) }
 				</div>
-				{ ! siteIsUnlaunched && 'launched' === checklistMode && (
+				{ ! siteIsUnlaunched && 'launched' === checklistMode ? (
 					<Card className="customer-home__launch-card" highlight="info">
 						<img
 							src="/calypso/images/illustrations/fireworks.svg"
@@ -302,6 +304,8 @@ class Home extends Component {
 							</p>
 						</div>
 					</Card>
+				) : (
+					displayWelcomeBanner && <WelcomeBanner />
 				) }
 			</>
 		);
@@ -316,6 +320,7 @@ class Home extends Component {
 			isChecklistComplete,
 			siteIsUnlaunched,
 			isEstablishedSite,
+			displayWelcomeBanner,
 		} = this.props;
 
 		if ( ! canUserUseCustomerHome ) {
@@ -337,7 +342,7 @@ class Home extends Component {
 				<SidebarNavigation />
 				<div className="customer-home__page-heading">{ this.renderCustomerHomeHeader() }</div>
 				{ //Only show upgrade nudges to sites > 2 days old
-				isEstablishedSite && (
+				isEstablishedSite && ! displayWelcomeBanner && (
 					<div className="customer-home__upsells">
 						<StatsBanners
 							siteId={ siteId }
@@ -644,10 +649,13 @@ const connectHome = connect(
 		const isAtomic = isAtomicSite( state, siteId );
 		const isChecklistComplete = isSiteChecklistComplete( state, siteId );
 		const createdAt = getSiteOption( state, siteId, 'created_at' );
+		const user = getCurrentUser( state );
+		const displayWelcomeBanner = user.date && new Date( user.date ) < new Date( '2019-08-06' );
 
 		return {
 			displayChecklist:
 				isEligibleForDotcomChecklist( state, siteId ) && hasChecklistData && ! isChecklistComplete,
+			displayWelcomeBanner,
 			site: getSelectedSite( state ),
 			siteId,
 			siteSlug: getSelectedSiteSlug( state ),
@@ -667,7 +675,7 @@ const connectHome = connect(
 			staticHomePageId: getSiteFrontPage( state, siteId ),
 			showCustomizer: ! isSiteUsingFullSiteEditing( state, siteId ),
 			hasCustomDomain: getGSuiteSupportedDomains( domains ).length > 0,
-			user: getCurrentUser( state ),
+			user,
 			...themeInfo,
 		};
 	},

client/my-sites/customer-home/style.scss

@@ -26,6 +26,42 @@
 		}
 	}
 
+	&__welcome-banner {
+		@include breakpoint( '>1040px' ) {
+			@include display-grid;
+			@include grid-template-columns( 12, 24px, 1fr );
+			padding: 0;
+		}
+
+		img {
+			margin: 0 33%;
+			@include breakpoint( '>1040px' ) {
+				@include grid-column( 2, 2 );
+				margin: 0;
+				padding: 24px 0;
+			}
+
+		}
+
+		div {
+			@include breakpoint( '>1040px' ) {
+				@include grid-column( 5, 8 );
+				padding: 24px 24px 24px 0;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+
+				.card-heading {
+					margin-top: 0;
+				}
+			}
+
+			p {
+				margin-bottom: 0;
+			}
+		}
+	}
+
 	&__upsells {
 		@include grid-column( 1, 12 );
 	}

client/my-sites/customer-home/welcome-banner.jsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { connect } from 'react-redux';
+import DismissibleCard from 'blocks/dismissible-card';
+import { localize } from 'i18n-calypso';
+
+/**
+ * Internal dependencies
+ */
+import CardHeading from 'components/card-heading';
+import { bumpStat, composeAnalytics, recordTracksEvent } from 'state/analytics/actions';
+
+export const WelcomeBanner = ( { translate, recordStats } ) => {
+	return (
+		<DismissibleCard
+			className="customer-home__welcome-banner"
+			preferenceName="home-welcome-banner-dismissed"
+			onClick={ recordStats }
+		>
+			<img
+				src="/calypso/images/extensions/woocommerce/woocommerce-setup.svg"
+				aria-hidden="true"
+				alt=""
+			/>
+			<div>
+				<CardHeading>{ translate( 'Learn and grow with My Home' ) }</CardHeading>
+				<p>
+					{ translate(
+						'This is your new home for quick links to common tasks, easy access to support, and guidance ' +
+							'tailored to you. We’ll keep improving what you see here to help you learn and grow with us.'
+					) }
+				</p>
+			</div>
+		</DismissibleCard>
+	);
+};
+
+export default connect( null, dispatch => ( {
+	recordStats: () =>
+		dispatch(
+			composeAnalytics(
+				recordTracksEvent( 'calypso_home_welcome_banner_dismiss' ),
+				bumpStat( 'calypso-home-welcome-banner', 'dismiss' )
+			)
+		),
+} ) )( localize( WelcomeBanner ) );