Onboarding: Add task list welcome modal (https://github.com/woocommerce/woocommerce-admin/pull/3142)

plugins/woocommerce-admin/client/dashboard/task-list/index.js

@@ -7,7 +7,7 @@ import { Component, Fragment } from '@wordpress/element';
 import { filter, get } from 'lodash';
 import { compose } from '@wordpress/compose';
 import classNames from 'classnames';
-import { Snackbar, Icon, Button } from '@wordpress/components';
+import { Snackbar, Icon, Button, Modal } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
 
 /**
@@ -25,6 +25,13 @@ import { recordEvent } from 'lib/tracks';
 import { getTasks } from './tasks';
 
 class TaskDashboard extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = {
+			isWelcomeModalOpen: ! props.modalDismissed,
+		};
+	}
+
 	componentDidMount() {
 		document.body.classList.add( 'woocommerce-onboarding' );
 		document.body.classList.add( 'woocommerce-task-dashboard__body' );
@@ -149,9 +156,65 @@ class TaskDashboard extends Component {
 		);
 	}
 
+	closeWelcomeModal() {
+		// Prevent firing this event before the modal is seen.
+		if ( document.body.classList.contains( 'woocommerce-admin-is-loading' ) ) {
+			return;
+		}
+
+		this.setState( { isWelcomeModalOpen: false } );
+		this.props.updateOptions( {
+			woocommerce_task_list_welcome_modal_dismissed: true,
+		} );
+	}
+
+	renderWelcomeModal() {
+		return (
+			<Modal
+				title={
+					<Fragment>
+						<span
+							role="img"
+							aria-hidden="true"
+							focusable="false"
+							className="woocommerce-task-dashboard__welcome-modal-icon"
+						>
+							🚀
+						</span>
+						{ __( "Woo hoo - you're almost there!", 'woocommerce-admin' ) }
+					</Fragment>
+				}
+				onRequestClose={ () => this.closeWelcomeModal() }
+				className="woocommerce-task-dashboard__welcome-modal"
+			>
+				<div className="woocommerce-task-dashboard__welcome-modal-wrapper">
+					<div className="woocommerce-task-dashboard__welcome-modal-message">
+						<p>
+							{ __(
+								'Based on the information you provided we’ve prepared some final set up tasks for you to perform.',
+								'woocommerce-admin'
+							) }
+						</p>
+						<p>
+							{ __(
+								'Once complete your store will be ready for launch - exciting!',
+								'woocommerce-admin'
+							) }
+						</p>
+					</div>
+					<Button isPrimary isDefault onClick={ () => this.closeWelcomeModal() }>
+						{ __( 'Continue', 'woocommerce-admin' ) }
+					</Button>
+				</div>
+			</Modal>
+		);
+	}
+
 	render() {
+		const { inline, tasks } = this.props;
+		const { isWelcomeModalOpen } = this.state;
 		const currentTask = this.getCurrentTask();
-		const tasks = filter( this.props.tasks, task => task.visible ).map( task => {
+		const listTasks = filter( tasks, task => task.visible ).map( task => {
 			task.className = classNames( task.completed ? 'is-complete' : null, task.className );
 			task.before = task.completed ? (
 				<i className="material-icons-outlined">check_circle</i>
@@ -181,11 +244,12 @@ class TaskDashboard extends Component {
 									'Below you’ll find a list of the most important steps to get your store up and running.',
 									'woocommerce-admin'
 								) }
-								menu={ this.props.inline && this.renderMenu() }
+								menu={ inline && this.renderMenu() }
 							>
-								<List items={ tasks } />
+								<List items={ listTasks } />
 							</Card>
-							{ this.props.inline && this.renderPrompt() }
+							{ inline && this.renderPrompt() }
+							{ isWelcomeModalOpen && this.renderWelcomeModal() }
 						</Fragment>
 					) }
 				</div>
@@ -199,9 +263,14 @@ export default compose(
 		const { getProfileItems, getOptions } = select( 'wc-api' );
 		const profileItems = getProfileItems();
 
-		const promptShown = get(
+		const options = getOptions( [
-			getOptions( [ 'woocommerce_task_list_prompt_shown' ] ),
+			'woocommerce_task_list_prompt_shown',
-			[ 'woocommerce_task_list_prompt_shown' ],
+			'woocommerce_task_list_welcome_modal_dismissed',
+		] );
+		const promptShown = get( options, [ 'woocommerce_task_list_prompt_shown' ], false );
+		const modalDismissed = get(
+			options,
+			[ 'woocommerce_task_list_welcome_modal_dismissed' ],
 			false
 		);
 
@@ -212,6 +281,7 @@ export default compose(
 		} );
 
 		return {
+			modalDismissed,
 			profileItems,
 			promptShown,
 			tasks,

plugins/woocommerce-admin/client/dashboard/task-list/style.scss

@@ -16,7 +16,8 @@
 		margin-right: auto;
 	}
 
-	.muriel-button.components-button {
+	.muriel-button.components-button,
+	.components-modal__frame .components-button.is-button {
 		height: 40px;
 		min-width: 106px;
 		margin: $gap $gap-smaller 0 0;
@@ -69,6 +70,82 @@
 	#wpbody-content {
 		position: relative;
 	}
+
+	.components-modal__screen-overlay {
+		background: rgba(43, 45, 47, 0.4);
+	}
+
+	.components-modal__frame {
+		.components-modal__header {
+			border-bottom: 0;
+			margin-bottom: 0;
+		}
+
+		.woocommerce-task-payments__stripe-error-wrapper {
+			align-items: flex-end;
+			flex-grow: 1;
+			display: flex;
+			flex-direction: column;
+		}
+	}
+
+	.woocommerce-task-dashboard__welcome-modal {
+		width: 400px;
+
+		.components-modal__header-heading-container {
+			justify-content: center;
+		}
+
+		.components-modal__header-heading {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			font-size: 20px;
+		}
+
+		.woocommerce-task-dashboard__welcome-modal-icon {
+			font-size: 56px;
+			margin-bottom: $gap;
+		}
+
+		.components-modal__header {
+			height: auto;
+			margin-bottom: $gap;
+			position: static;
+		}
+
+		.components-modal__content {
+			padding: $gap * 2;
+			text-align: center;
+		}
+
+		.woocommerce-task-dashboard__welcome-modal-message p {
+			font-size: 16px;
+			color: $studio-gray-60;
+		}
+
+		.components-modal__header .components-icon-button {
+			position: absolute;
+			left: auto;
+			right: 0;
+			top: 0;
+			padding: $gap;
+
+			&:hover {
+				box-shadow: none;
+			}
+
+			svg {
+				width: 30px;
+				height: 30px;
+			}
+
+			svg path {
+				fill: $studio-gray-60;
+			}
+		}
+	}
 }
 
 .woocommerce-shipping-rate {
@@ -243,20 +320,6 @@
 	}
 }
 
-.components-modal__frame.woocommerce-task-payments__stripe-error-modal {
-	.components-modal__header {
-		border-bottom: 0;
-		margin-bottom: 0;
-	}
-
-	.woocommerce-task-payments__stripe-error-wrapper {
-		align-items: flex-end;
-		flex-grow: 1;
-		display: flex;
-		flex-direction: column;
-	}
-}
-
 .woocommerce-task-appearance {
 	.muriel-image-upload {
 		margin-bottom: $gap-smallest;

plugins/woocommerce-admin/client/layout/style.scss

@@ -38,7 +38,8 @@
 	.woocommerce-message,
 	.notice,
 	.error,
-	.updated {
+	.updated,
+	.components-modal__screen-overlay {
 		display: none;
 	}
 }

plugins/woocommerce-admin/src/Features/Onboarding.php

@@ -366,6 +366,7 @@ class Onboarding {
 		}
 
 		$options[] = 'wc_connect_options';
+		$options[] = 'woocommerce_task_list_welcome_modal_dismissed';
 		$options[] = 'woocommerce_task_list_prompt_shown';
 		$options[] = 'woocommerce_onboarding_payments';
 		$options[] = 'woocommerce_allow_tracking';