From a3224ce65a765ffa7e9aa09f353ce5cc8498da6e Mon Sep 17 00:00:00 2001 From: Joshua T Flowers Date: Fri, 1 Nov 2019 12:00:57 +0800 Subject: [PATCH] Onboarding: Add task list welcome modal (https://github.com/woocommerce/woocommerce-admin/pull/3142) --- .../client/dashboard/task-list/index.js | 86 +++++++++++++++-- .../client/dashboard/task-list/style.scss | 93 ++++++++++++++++--- .../client/layout/style.scss | 3 +- .../src/Features/Onboarding.php | 1 + 4 files changed, 159 insertions(+), 24 deletions(-) diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/index.js b/plugins/woocommerce-admin/client/dashboard/task-list/index.js index 689a92cfdd0..a63206d2924 100644 --- a/plugins/woocommerce-admin/client/dashboard/task-list/index.js +++ b/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 ( + + + { __( "Woo hoo - you're almost there!", 'woocommerce-admin' ) } + + } + onRequestClose={ () => this.closeWelcomeModal() } + className="woocommerce-task-dashboard__welcome-modal" + > +
+
+

+ { __( + 'Based on the information you provided we’ve prepared some final set up tasks for you to perform.', + 'woocommerce-admin' + ) } +

+

+ { __( + 'Once complete your store will be ready for launch - exciting!', + 'woocommerce-admin' + ) } +

+
+ +
+ + ); + } + 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 ? ( check_circle @@ -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() } > - + - { this.props.inline && this.renderPrompt() } + { inline && this.renderPrompt() } + { isWelcomeModalOpen && this.renderWelcomeModal() } ) } @@ -199,9 +263,14 @@ export default compose( const { getProfileItems, getOptions } = select( 'wc-api' ); const profileItems = getProfileItems(); - const promptShown = get( - getOptions( [ 'woocommerce_task_list_prompt_shown' ] ), - [ 'woocommerce_task_list_prompt_shown' ], + const options = getOptions( [ + '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, diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/style.scss b/plugins/woocommerce-admin/client/dashboard/task-list/style.scss index 939ea67efe4..c608ba5ba09 100644 --- a/plugins/woocommerce-admin/client/dashboard/task-list/style.scss +++ b/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; diff --git a/plugins/woocommerce-admin/client/layout/style.scss b/plugins/woocommerce-admin/client/layout/style.scss index c25c6b23785..51ea29c9504 100644 --- a/plugins/woocommerce-admin/client/layout/style.scss +++ b/plugins/woocommerce-admin/client/layout/style.scss @@ -38,7 +38,8 @@ .woocommerce-message, .notice, .error, - .updated { + .updated, + .components-modal__screen-overlay { display: none; } } diff --git a/plugins/woocommerce-admin/src/Features/Onboarding.php b/plugins/woocommerce-admin/src/Features/Onboarding.php index 808246bc8fe..0f57d5bb2d7 100644 --- a/plugins/woocommerce-admin/src/Features/Onboarding.php +++ b/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';