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/connect-accounts.jsx

@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+import { useTranslate } 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 { getSelectedSiteId, getSelectedSiteSlug } from 'state/ui/selectors';
+import { savePreference } from 'state/preferences/actions';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
+const ConnectAccountsTask = ( { skipTask, siteSlug } ) => {
+	const translate = useTranslate();
+	const [ isVisible, setIsVisible ] = useState( true );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+	return (
+		<ActionPanel className="tasks connect-accounts">
+			<QueryPublicizeConnections selectedSite />
+			<ActionPanelBody>
+				{ ! isMobile() && (
+					<ActionPanelFigure align="right">
+						<img src="/calypso/images/stats/tasks/social-links.svg" alt="" />
+					</ActionPanelFigure>
+				) }
+				<div className="tasks__timing">
+					<Gridicon icon="time" size={ 18 } />
+					<p>{ translate( '3 minutes' ) }</p>
+				</div>
+				<ActionPanelTitle>{ translate( 'Drive traffic to your site' ) }</ActionPanelTitle>
+				<p className="tasks__description">
+					{ translate(
+						'Integrate your site with social media to automatically post your content and drive traffic to your site.'
+					) }
+				</p>
+				<ActionPanelCta>
+					<Button
+						className="tasks__action"
+						primary
+						href={
+							isMobile()
+								? `/marketing/connections/${ siteSlug }`
+								: `/marketing/connections/${ siteSlug }?tour=marketingConnectionsTour`
+						}
+					>
+						{ translate( 'Connect accounts' ) }
+					</Button>
+					<Button
+						className="tasks__action-skip is-link"
+						onClick={ () => {
+							setIsVisible( false );
+							skipTask();
+						} }
+					>
+						{ translate( 'Skip for now' ) }
+					</Button>
+				</ActionPanelCta>
+			</ActionPanelBody>
+		</ActionPanel>
+	);
+};
+
+const mapStateToProps = state => {
+	return {
+		siteId: getSelectedSiteId( state ),
+		siteSlug: getSelectedSiteSlug( state ),
+	};
+};
+
+const mapDispatchToProps = {
+	skipTask: siteId =>
+		savePreference( `dismissible-card-home-task-connect-accounts-${ siteId }`, true ),
+};
+
+const mergeProps = ( stateProps, dispatchProps, ownProps ) => {
+	return {
+		...stateProps,
+		skipTask: () => dispatchProps.skipTask( stateProps.siteId ),
+		...ownProps,
+	};
+};
+
+export default connect( mapStateToProps, mapDispatchToProps, mergeProps )( ConnectAccountsTask );

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

@@ -0,0 +1,30 @@
+.tasks.action-panel {
+	.tasks__timing {
+		display: flex;
+
+		.gridicon {
+			margin-right: 4px;
+		}
+	}
+
+	.action-panel__title {
+		font-family: 'Recoleta', serif;
+		font-size: 36px;
+	}
+
+	.action-panel__figure {
+		max-width: 280px;
+	}
+
+	.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 ConnectAccountsTask from 'my-sites/customer-home/cards/tasks/connect-accounts';
 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 && <ConnectAccountsTask /> }
 					{ hasChecklistData && (
 						<div className="customer-home__layout">
 							<div className="customer-home__layout-col customer-home__layout-col-left">