My Home: Add "Connect social media accounts" Task

client/layout/guided-tours/all-tours.js

@@ -15,6 +15,7 @@ import { JetpackSignInTour } from './tours/jetpack-sign-in-tour';
 import { JetpackSiteAcceleratorTour } from './tours/jetpack-site-accelerator-tour';
 import { JetpackVideoHostingTour } from './tours/jetpack-video-hosting-tour';
 import { MainTour } from './tours/main-tour';
+import { marketingConnectionsTour } from './tours/marketing-connections-tour';
 import { MediaBasicsTour } from './tours/media-basics-tour';
 import { SimplePaymentsEmailTour } from './tours/simple-payments-email-tour';
 import { SimplePaymentsTour } from './tours/simple-payments-tour';
@@ -35,6 +36,7 @@ export default combineTours( {
 	jetpackSiteAccelerator: JetpackSiteAcceleratorTour,
 	jetpackVideoHosting: JetpackVideoHostingTour,
 	main: MainTour,
+	marketingConnectionsTour: marketingConnectionsTour,
 	mediaBasicsTour: MediaBasicsTour,
 	simplePaymentsEmailTour: SimplePaymentsEmailTour,
 	simplePaymentsTour: SimplePaymentsTour,

client/layout/guided-tours/config.js

@@ -6,6 +6,7 @@ import tutorialSitePreview from 'layout/guided-tours/tours/tutorial-site-preview
 import gdocsIntegrationTour from 'layout/guided-tours/tours/gdocs-integration-tour/meta';
 import simplePaymentsTour from 'layout/guided-tours/tours/simple-payments-tour/meta';
 import editorBasicsTour from 'layout/guided-tours/tours/editor-basics-tour/meta';
+import marketingConnectionsTour from 'layout/guided-tours/tours/marketing-connections-tour/meta';
 import mediaBasicsTour from 'layout/guided-tours/tours/media-basics-tour/meta';
 import checklistSiteTitle from 'layout/guided-tours/tours/checklist-site-title-tour/meta';
 import jetpackBackupsRewind from 'layout/guided-tours/tours/jetpack-backups-rewind-tour/meta';
@@ -32,6 +33,7 @@ export default {
 	jetpackVideoHosting,
 	main,
 	editorBasicsTour,
+	marketingConnectionsTour,
 	mediaBasicsTour,
 	tutorialSitePreview,
 	gdocsIntegrationTour,

client/layout/guided-tours/tours/marketing-connections-tour/index.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import meta from './meta';
+import { ButtonRow, makeTour, Quit, Link, Step, Tour } from 'layout/guided-tours/config-elements';
+import { localizeUrl } from 'lib/i18n-utils';
+
+export const marketingConnectionsTour = makeTour(
+	<Tour { ...meta }>
+		<Step
+			arrow="right-middle"
+			name="init"
+			placement="beside"
+			style={ {
+				marginLeft: '-24px',
+			} }
+			target={ '.sharing-service.not-connected .button.is-compact' }
+		>
+			{ ( { translate } ) => (
+				<>
+					<p>
+						{ translate(
+							"Select the service which you'd like to connect. " +
+								'Whenever you publish a new post, your social media followers will receive an update.'
+						) }
+					</p>
+					<ButtonRow>
+						<Link href={ localizeUrl( 'https://wordpress.com/support/publicize/' ) }>
+							{ translate( 'Learn more' ) }
+						</Link>
+						<Quit primary>{ translate( 'Got it' ) }</Quit>
+					</ButtonRow>
+				</>
+			) }
+		</Step>
+	</Tour>
+);

client/layout/guided-tours/tours/marketing-connections-tour/meta.js

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import { isDesktop } from '@automattic/viewport';
+
+export default {
+	name: 'marketingConnectionsTour',
+	version: '20200410',
+	path: [ '/marketing/connections/' ],
+	when: isDesktop,
+};

client/my-sites/customer-home/cards/tasks/index.jsx

@@ -0,0 +1,121 @@
+/**
+ * External dependencies
+ */
+import React, { Component } from 'react';
+import { localize } from 'i18n-calypso';
+import { connect } from 'react-redux';
+import { Button } from '@automattic/components';
+import { isMobile } from '@automattic/viewport';
+
+/**
+ * Internal dependencies
+ */
+import ActionPanel from 'components/action-panel';
+import ActionPanelTitle from 'components/action-panel/title';
+import ActionPanelBody from 'components/action-panel/body';
+import ActionPanelFigure from 'components/action-panel/figure';
+import ActionPanelCta from 'components/action-panel/cta';
+import Gridicon from 'components/gridicon';
+import QueryPublicizeConnections from 'components/data/query-publicize-connections';
+import { savePreference } from 'state/preferences/actions';
+import { getPreference } from 'state/preferences/selectors';
+import { getSelectedSiteId, getSelectedSiteSlug } from 'state/ui/selectors';
+import { getConnectionsBySiteId } from 'state/sharing/publicize/selectors';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
+class RecommendedTask extends Component {
+	render() {
+		const { hideSocialTask, siteId, siteSlug, translate } = this.props;
+
+		if ( hideSocialTask ) {
+			return null;
+		}
+
+		let taskName;
+		let taskId;
+		let taskImage;
+		let taskDescription;
+		let taskMinutes;
+		let actionText;
+		let actionLink;
+		let shouldQueryPublicizeConnections;
+
+		if ( ! hideSocialTask ) {
+			taskName = translate( 'Connect social media accounts' );
+			taskId = 'SocialMedia';
+			taskImage = '/calypso/images/stats/tasks/social-links.svg';
+			taskDescription = translate(
+				'Integrate your site with social media to automatically post your content and drive traffic to your site.'
+			);
+			taskMinutes = '3';
+			actionText = translate( 'Connect accounts' );
+			actionLink = isMobile()
+				? `/marketing/connections/${ siteSlug }`
+				: `/marketing/connections/${ siteSlug }?tour=marketingConnectionsTour`;
+			shouldQueryPublicizeConnections = true;
+		}
+
+		const minuteOrMinutes =
+			taskMinutes > 1
+				? translate( 'minutes', {
+						comment: 'eg. 5 minutes to complete a task',
+				  } )
+				: translate( 'minute', {
+						comment: 'eg. 1 minute to complete a task',
+						context: 'noun',
+				  } );
+		return (
+			<ActionPanel className="tasks">
+				{ shouldQueryPublicizeConnections && <QueryPublicizeConnections selectedSite /> }
+				<ActionPanelBody>
+					{ ! isMobile() && (
+						<ActionPanelFigure align="right">
+							<img src={ taskImage } alt="" />
+						</ActionPanelFigure>
+					) }
+					<div className="tasks__timing">
+						<Gridicon icon="time" size={ 18 } />
+						<p>{ taskMinutes + ' ' + minuteOrMinutes }</p>
+					</div>
+					<ActionPanelTitle>{ taskName }</ActionPanelTitle>
+					<p className="tasks__description">{ taskDescription }</p>
+					<ActionPanelCta>
+						<Button className="tasks__action" primary href={ actionLink }>
+							{ actionText }
+						</Button>
+						<Button
+							className="tasks__action-skip is-link"
+							onClick={ () => {
+								this.props.skipTask( 'homeTask' + taskId + siteId, true );
+							} }
+						>
+							{ translate( 'Skip for now' ) }
+						</Button>
+					</ActionPanelCta>
+				</ActionPanelBody>
+			</ActionPanel>
+		);
+	}
+}
+
+const mapStateToProps = state => {
+	const siteId = getSelectedSiteId( state );
+
+	return {
+		siteId,
+		siteSlug: getSelectedSiteSlug( state ),
+		hideSocialTask:
+			getPreference( state, 'homeTaskSocialMedia' + siteId ) ||
+			getConnectionsBySiteId( state, siteId ).length > 0,
+	};
+};
+
+const mapDispatchToProps = {
+	skipTask: savePreference,
+};
+
+export default connect( mapStateToProps, mapDispatchToProps )( localize( RecommendedTask ) );

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

@@ -0,0 +1,26 @@
+.tasks.action-panel {
+	.tasks__timing {
+		display: flex;
+
+		.gridicon {
+			margin-right: 4px;
+		}
+	}
+
+	.action-panel__title {
+		font-family: 'Recoleta', serif;
+		font-size: 36px;
+	}
+
+	.tasks__description {
+		font-size: 16px;
+	}
+
+	.action-panel__cta {
+		display: flex;
+
+		.tasks__action-skip {
+			margin: auto 16px;
+		}
+	}
+}

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

@@ -31,6 +31,7 @@ import QueryHomeLayout from 'components/data/query-home-layout';
 import { getHomeLayout } from 'state/selectors/get-home-layout';
 import Notices from 'my-sites/customer-home/locations/notices';
 import Upsells from 'my-sites/customer-home/locations/upsells';
+import RecommendedTask from 'my-sites/customer-home/cards/tasks';
 import Primary from 'my-sites/customer-home/locations/primary';
 import Secondary from 'my-sites/customer-home/locations/secondary';
 
@@ -93,6 +94,7 @@ const Home = ( {
 						displayChecklist={ displayChecklist }
 					/>
 					<Upsells cards={ layout.upsells } />
+					{ ! displayChecklist && <RecommendedTask /> }
 					{ hasChecklistData && (
 						<div className="customer-home__layout">
 							<div className="customer-home__layout-col customer-home__layout-col-left">