Onboarding: Add task list welcome modal (https://github.com/woocommerce/woocommerce-admin/pull/3142)
This commit is contained in:
Joshua T Flowers
GitHub
parent
dcea8db86a
commit
a3224ce65a
|
|
@ -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(
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -38,7 +38,8 @@
|
|||
.woocommerce-message,
|
||||
.notice,
|
||||
.error,
|
||||
.updated {
|
||||
.updated,
|
||||
.components-modal__screen-overlay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in New Issue