2021-09-01 21:28:24 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
import { MenuGroup, MenuItem } from '@wordpress/components';
|
|
|
|
import { check } from '@wordpress/icons';
|
|
|
|
import { Fragment, useEffect } from '@wordpress/element';
|
|
|
|
import { useDispatch, useSelect } from '@wordpress/data';
|
|
|
|
import { ONBOARDING_STORE_NAME, OPTIONS_STORE_NAME } from '@woocommerce/data';
|
|
|
|
import { useExperiment } from '@woocommerce/explat';
|
|
|
|
import { recordEvent } from '@woocommerce/tracks';
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
|
|
|
import { DisplayOption } from '../header/activity-panel/display-options';
|
|
|
|
import { Task } from './task';
|
|
|
|
import { TaskList } from './task-list';
|
|
|
|
import { TasksPlaceholder } from './placeholder';
|
2021-10-05 18:20:28 +00:00
|
|
|
import './tasks.scss';
|
2021-09-01 21:28:24 +00:00
|
|
|
|
|
|
|
export type TasksProps = {
|
|
|
|
query: { task: string };
|
|
|
|
};
|
|
|
|
|
|
|
|
export const Tasks: React.FC< TasksProps > = ( { query } ) => {
|
|
|
|
const { task } = query;
|
|
|
|
const { hideTaskList } = useDispatch( ONBOARDING_STORE_NAME );
|
|
|
|
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
|
|
|
|
const [ isLoadingExperiment, experimentAssignment ] = useExperiment(
|
|
|
|
'woocommerce_tasklist_progression'
|
|
|
|
);
|
|
|
|
|
|
|
|
const { isResolving, taskLists } = useSelect( ( select ) => {
|
|
|
|
return {
|
|
|
|
isResolving: select( ONBOARDING_STORE_NAME ).isResolving(
|
2021-09-29 18:30:34 +00:00
|
|
|
'getTaskLists'
|
2021-09-01 21:28:24 +00:00
|
|
|
),
|
|
|
|
taskLists: select( ONBOARDING_STORE_NAME ).getTaskLists(),
|
|
|
|
};
|
|
|
|
} );
|
|
|
|
|
|
|
|
const getCurrentTask = () => {
|
|
|
|
if ( ! task ) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
const tasks = taskLists.reduce(
|
|
|
|
( acc, taskList ) => [ ...acc, ...taskList.tasks ],
|
|
|
|
[]
|
|
|
|
);
|
|
|
|
|
|
|
|
const currentTask = tasks.find( ( t ) => t.id === task );
|
|
|
|
|
|
|
|
if ( ! currentTask ) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return currentTask;
|
|
|
|
};
|
|
|
|
|
|
|
|
const toggleTaskList = ( taskList ) => {
|
|
|
|
const { id, isHidden } = taskList;
|
|
|
|
const newValue = ! isHidden;
|
|
|
|
|
|
|
|
recordEvent(
|
|
|
|
newValue ? `${ id }_tasklist_hide` : `${ id }_tasklist_show`,
|
|
|
|
{}
|
|
|
|
);
|
|
|
|
|
|
|
|
hideTaskList();
|
|
|
|
};
|
|
|
|
|
2021-09-21 19:33:44 +00:00
|
|
|
useEffect( () => {
|
|
|
|
document.body.classList.add( 'woocommerce-onboarding' );
|
|
|
|
document.body.classList.add( 'woocommerce-task-dashboard__body' );
|
|
|
|
}, [] );
|
|
|
|
|
2021-09-01 21:28:24 +00:00
|
|
|
useEffect( () => {
|
|
|
|
// @todo Update this when all task lists have been hidden or completed.
|
|
|
|
const taskListsFinished = false;
|
|
|
|
updateOptions( {
|
|
|
|
woocommerce_task_list_prompt_shown: true,
|
|
|
|
woocommerce_default_homepage_layout: 'two_columns',
|
|
|
|
} );
|
|
|
|
}, [ taskLists, isResolving ] );
|
|
|
|
|
|
|
|
const currentTask = getCurrentTask();
|
|
|
|
|
|
|
|
if ( task && ! currentTask ) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( isResolving ) {
|
|
|
|
return <TasksPlaceholder query={ query } />;
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( currentTask ) {
|
2021-09-21 19:33:44 +00:00
|
|
|
return (
|
|
|
|
<div className="woocommerce-task-dashboard__container">
|
2021-10-06 18:47:41 +00:00
|
|
|
<Task query={ query } task={ currentTask } />
|
2021-09-21 19:33:44 +00:00
|
|
|
</div>
|
|
|
|
);
|
2021-09-01 21:28:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if ( isLoadingExperiment ) {
|
|
|
|
return <TasksPlaceholder query={ query } />;
|
|
|
|
}
|
|
|
|
|
|
|
|
return taskLists.map( ( taskList ) => {
|
|
|
|
const {
|
|
|
|
id,
|
|
|
|
isComplete,
|
2021-10-04 17:02:01 +00:00
|
|
|
isVisible,
|
2021-09-01 21:28:24 +00:00
|
|
|
isToggleable,
|
|
|
|
title,
|
|
|
|
tasks,
|
|
|
|
} = taskList;
|
|
|
|
|
2021-10-04 17:02:01 +00:00
|
|
|
if ( ! isVisible ) {
|
2021-10-01 18:46:23 +00:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2021-09-01 21:28:24 +00:00
|
|
|
return (
|
|
|
|
<Fragment key={ id }>
|
|
|
|
<TaskList
|
|
|
|
id={ id }
|
|
|
|
isComplete={ isComplete }
|
|
|
|
isExpandable={
|
|
|
|
experimentAssignment?.variationName === 'treatment'
|
|
|
|
}
|
|
|
|
query={ query }
|
|
|
|
tasks={ tasks }
|
|
|
|
title={ title }
|
|
|
|
/>
|
|
|
|
{ isToggleable && (
|
|
|
|
<DisplayOption>
|
|
|
|
<MenuGroup
|
|
|
|
className="woocommerce-layout__homescreen-display-options"
|
|
|
|
label={ __( 'Display', 'woocommerce-admin' ) }
|
|
|
|
>
|
|
|
|
<MenuItem
|
|
|
|
className="woocommerce-layout__homescreen-extension-tasklist-toggle"
|
|
|
|
icon={ ! isHidden && check }
|
|
|
|
isSelected={ ! isHidden }
|
|
|
|
role="menuitemcheckbox"
|
|
|
|
onClick={ () => toggleTaskList( taskList ) }
|
|
|
|
>
|
|
|
|
{ __(
|
|
|
|
'Show things to do next',
|
|
|
|
'woocommerce-admin'
|
|
|
|
) }
|
|
|
|
</MenuItem>
|
|
|
|
</MenuGroup>
|
|
|
|
</DisplayOption>
|
|
|
|
) }
|
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
} );
|
|
|
|
};
|