diff --git a/plugins/woocommerce-admin/client/task-list/index.js b/plugins/woocommerce-admin/client/task-list/index.js
index 030c766915c..de792c6b1a1 100644
--- a/plugins/woocommerce-admin/client/task-list/index.js
+++ b/plugins/woocommerce-admin/client/task-list/index.js
@@ -3,7 +3,6 @@
*/
import { __ } from '@wordpress/i18n';
import { Component, cloneElement, Fragment } from '@wordpress/element';
-import { isEqual } from 'lodash';
import { compose } from '@wordpress/compose';
import classNames from 'classnames';
import {
@@ -16,6 +15,7 @@ import {
} from '@wordpress/components';
import { withDispatch } from '@wordpress/data';
import { Icon, check, chevronRight } from '@wordpress/icons';
+import { xor } from 'lodash';
/**
* WooCommerce dependencies
@@ -47,34 +47,18 @@ class TaskDashboard extends Component {
}
componentDidMount() {
- const { incompleteTasks, updateOptions } = this.props;
document.body.classList.add( 'woocommerce-onboarding' );
document.body.classList.add( 'woocommerce-task-dashboard__body' );
this.recordTaskView();
this.recordTaskListView();
-
- if ( ! incompleteTasks.length ) {
- updateOptions( {
- woocommerce_task_list_complete: 'yes',
- } );
- }
-
+ this.possiblyCompleteTaskList();
this.possiblyTrackCompletedTasks();
}
componentDidUpdate( prevProps ) {
- const {
- completedTaskKeys,
- incompleteTasks,
- query,
- updateOptions,
- } = this.props;
- const {
- completedTaskKeys: prevCompletedTaskKeys,
- incompleteTasks: prevIncompleteTasks,
- query: prevQuery,
- } = prevProps;
+ const { query } = this.props;
+ const { query: prevQuery } = prevProps;
const { task: prevTask } = prevQuery;
const { task } = query;
@@ -83,25 +67,40 @@ class TaskDashboard extends Component {
this.recordTaskView();
}
- if ( ! incompleteTasks.length && prevIncompleteTasks.length ) {
+ this.possiblyCompleteTaskList();
+ this.possiblyTrackCompletedTasks();
+ }
+
+ possiblyCompleteTaskList() {
+ const { isTaskListComplete, updateOptions } = this.props;
+
+ if ( ! this.getIncompleteTasks().length && ! isTaskListComplete ) {
updateOptions( {
woocommerce_task_list_complete: 'yes',
} );
}
+ }
- if ( ! isEqual( prevCompletedTaskKeys, completedTaskKeys ) ) {
- this.possiblyTrackCompletedTasks();
- }
+ getCompletedTaskKeys() {
+ return this.getVisibleTasks()
+ .filter( ( task ) => task.completed )
+ .map( ( task ) => task.key );
+ }
+
+ getIncompleteTasks() {
+ return this.getAllTasks().filter(
+ ( task ) => task.visible && ! task.completed
+ );
}
possiblyTrackCompletedTasks() {
const {
- completedTaskKeys,
trackedCompletedTasks,
updateOptions,
} = this.props;
+ const completedTaskKeys = this.getCompletedTaskKeys();
- if ( ! isEqual( trackedCompletedTasks, completedTaskKeys ) ) {
+ if ( xor( trackedCompletedTasks, completedTaskKeys ).length !== 0 ) {
updateOptions( {
woocommerce_task_list_tracked_completed_tasks: completedTaskKeys,
} );
@@ -144,9 +143,8 @@ class TaskDashboard extends Component {
document.body.classList.remove( 'woocommerce-task-dashboard__body' );
}
- getTasks() {
+ getAllTasks() {
const {
- dismissedTasks,
profileItems,
query,
taskListPayments,
@@ -167,7 +165,13 @@ class TaskDashboard extends Component {
installAndActivatePlugins,
createNotice,
isJetpackConnected,
- } ).filter(
+ } );
+ }
+
+ getVisibleTasks() {
+ const { dismissedTasks } = this.props;
+
+ return this.getAllTasks().filter(
( task ) => task.visible && ! dismissedTasks.includes( task.key )
);
}
@@ -199,7 +203,7 @@ class TaskDashboard extends Component {
}
const { profileItems } = this.props;
- const tasks = this.getTasks();
+ const tasks = this.getVisibleTasks();
recordEvent( 'tasklist_view', {
number_tasks: tasks.length,
@@ -228,27 +232,11 @@ class TaskDashboard extends Component {
}
getCurrentTask() {
- const {
- query,
- profileItems,
- payments,
- activePlugins,
- installedPlugins,
- createNotice,
- isJetpackConnected,
- } = this.props;
- const allTasks = getAllTasks( {
- profileItems,
- options: payments,
- query,
- activePlugins,
- installedPlugins,
- createNotice,
- isJetpackConnected,
- } );
+ const { query } = this.props;
+
const { task } = query;
-
- const currentTask = allTasks.find( ( s ) => s.key === task );
+
+ const currentTask = this.getAllTasks().find( ( s ) => s.key === task );
if ( ! currentTask ) {
return null;
@@ -354,7 +342,7 @@ class TaskDashboard extends Component {
const { query } = this.props;
const { isCartModalOpen, isWelcomeModalOpen } = this.state;
const currentTask = this.getCurrentTask();
- const listTasks = this.getTasks().map( ( task ) => {
+ const listTasks = this.getVisibleTasks().map( ( task ) => {
task.className = classNames(
task.completed ? 'is-complete' : null,
task.className
@@ -401,12 +389,10 @@ class TaskDashboard extends Component {
return task;
} );
- const numCompleteTasks = listTasks.filter( ( task ) => task.completed )
- .length;
const progressBarClass = classNames(
'woocommerce-task-card__progress-bar',
{
- completed: listTasks.length === numCompleteTasks,
+ completed: listTasks.length === this.getCompletedTaskKeys().length,
}
);
@@ -426,7 +412,7 @@ class TaskDashboard extends Component {
@@ -457,7 +443,7 @@ class TaskDashboard extends Component {
}
export default compose(
- withSelect( ( select, props ) => {
+ withSelect( ( select ) => {
const { getProfileItems } = select( ONBOARDING_STORE_NAME );
const { getOption } = select( OPTIONS_STORE_NAME );
const {
@@ -467,6 +453,9 @@ export default compose(
} = select( PLUGINS_STORE_NAME );
const profileItems = getProfileItems();
+ const isTaskListComplete =
+ getOption( 'woocommerce_task_list_complete' ) ||
+ false;
const modalDismissed =
getOption( 'woocommerce_task_list_welcome_modal_dismissed' ) ||
false;
@@ -479,35 +468,18 @@ export default compose(
const activePlugins = getActivePlugins();
const installedPlugins = getInstalledPlugins();
- const { createNotice } = props;
- const tasks = getAllTasks( {
- profileItems,
- options: payments,
- query: props.query,
- activePlugins,
- installedPlugins,
- createNotice,
- isJetpackConnected: isJetpackConnected(),
- } );
- const completedTaskKeys = tasks
- .filter( ( task ) => task.completed )
- .map( ( task ) => task.key );
- const incompleteTasks = tasks.filter(
- ( task ) => task.visible && ! task.completed
- );
return {
+ activePlugins,
dismissedTasks,
+ isJetpackConnected: isJetpackConnected(),
+ installedPlugins,
+ isTaskListComplete,
modalDismissed,
+ payments,
profileItems,
taskListPayments,
- isJetpackConnected: isJetpackConnected(),
- incompleteTasks,
trackedCompletedTasks,
- completedTaskKeys,
- activePlugins,
- installedPlugins,
- payments,
};
} ),
withDispatch( ( dispatch ) => {
@@ -517,8 +489,8 @@ export default compose(
return {
createNotice,
- updateOptions,
installAndActivatePlugins,
+ updateOptions,
};
} )
)( TaskDashboard );