Slight improvements for loading of the task list
This commit is contained in:
parent
8812feedaa
commit
885516f302
|
@ -15,7 +15,7 @@ import { ONBOARDING_STORE_NAME, PLUGINS_STORE_NAME } from '@woocommerce/data';
|
|||
import CartModal from '../../dashboard/components/cart-modal';
|
||||
import { getCategorizedOnboardingProducts } from '../../dashboard/utils';
|
||||
|
||||
const PurchaseTaskItem = () => {
|
||||
const PurchaseTaskItem = ( { defaultTaskItem } ) => {
|
||||
const [ cartModalOpen, setCartModalOpen ] = useState( false );
|
||||
|
||||
const { installedPlugins, productTypes, profileItems } = useSelect(
|
||||
|
@ -47,25 +47,32 @@ const PurchaseTaskItem = () => {
|
|||
installedPlugins
|
||||
);
|
||||
const { remainingProducts } = groupedProducts;
|
||||
const DefaultTaskItem = defaultTaskItem;
|
||||
|
||||
return (
|
||||
<>
|
||||
<DefaultTaskItem
|
||||
onClick={ () => {
|
||||
if ( remainingProducts.length ) {
|
||||
toggleCartModal();
|
||||
}
|
||||
} }
|
||||
/>
|
||||
{ cartModalOpen && (
|
||||
<CartModal
|
||||
onClose={ () => toggleCartModal() }
|
||||
onClickPurchaseLater={ () => toggleCartModal() }
|
||||
/>
|
||||
) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const PurchaseTaskItemFill = () => {
|
||||
return (
|
||||
<WooOnboardingTaskListItem id="purchase">
|
||||
{ ( { defaultTaskItem: DefaultTaskItem } ) => (
|
||||
<>
|
||||
<DefaultTaskItem
|
||||
onClick={ () => {
|
||||
if ( remainingProducts.length ) {
|
||||
toggleCartModal();
|
||||
}
|
||||
} }
|
||||
/>
|
||||
{ cartModalOpen && (
|
||||
<CartModal
|
||||
onClose={ () => toggleCartModal() }
|
||||
onClickPurchaseLater={ () => toggleCartModal() }
|
||||
/>
|
||||
) }
|
||||
</>
|
||||
{ ( { defaultTaskItem } ) => (
|
||||
<PurchaseTaskItem defaultTaskItem={ defaultTaskItem } />
|
||||
) }
|
||||
</WooOnboardingTaskListItem>
|
||||
);
|
||||
|
@ -73,5 +80,5 @@ const PurchaseTaskItem = () => {
|
|||
|
||||
registerPlugin( 'woocommerce-admin-task-purchase', {
|
||||
scope: 'woocommerce-tasks',
|
||||
render: PurchaseTaskItem,
|
||||
render: PurchaseTaskItemFill,
|
||||
} );
|
||||
|
|
|
@ -18,26 +18,15 @@ import { Task } from './task';
|
|||
import { TasksPlaceholder } from './placeholder';
|
||||
import './tasks.scss';
|
||||
import { TaskListProps } from './task-list';
|
||||
import { TaskList } from './task-list';
|
||||
import { TaskList as TwoColumnTaskList } from '../two-column-tasks/task-list';
|
||||
import '../two-column-tasks/style.scss';
|
||||
|
||||
export type TasksProps = {
|
||||
query: { task?: string };
|
||||
};
|
||||
|
||||
const TaskList = lazy(
|
||||
() => import( /* webpackChunkName: "task-list" */ './task-list' )
|
||||
);
|
||||
|
||||
const TwoColumnTaskList = lazy(
|
||||
() =>
|
||||
import(
|
||||
/* webpackChunkName: "two-column-task-list" */ '../two-column-tasks/task-list'
|
||||
)
|
||||
);
|
||||
|
||||
function getTaskListComponent(
|
||||
taskListId: string
|
||||
): React.LazyExoticComponent< React.FC< TaskListProps > > {
|
||||
function getTaskListComponent( taskListId: string ): React.FC< TaskListProps > {
|
||||
switch ( taskListId ) {
|
||||
case 'setup_experiment_1':
|
||||
return TwoColumnTaskList;
|
||||
|
@ -56,9 +45,9 @@ export const Tasks: React.FC< TasksProps > = ( { query } ) => {
|
|||
|
||||
const { isResolving, taskLists } = useSelect( ( select ) => {
|
||||
return {
|
||||
isResolving: select( ONBOARDING_STORE_NAME ).isResolving(
|
||||
'getTaskLists'
|
||||
),
|
||||
isResolving: ! select(
|
||||
ONBOARDING_STORE_NAME
|
||||
).hasFinishedResolution( 'getTaskLists' ),
|
||||
taskLists: select( ONBOARDING_STORE_NAME ).getTaskLists(),
|
||||
};
|
||||
} );
|
||||
|
@ -131,17 +120,7 @@ export const Tasks: React.FC< TasksProps > = ( { query } ) => {
|
|||
: ! id.endsWith( 'two_column' )
|
||||
)
|
||||
.map( ( taskList ) => {
|
||||
const {
|
||||
id,
|
||||
eventPrefix,
|
||||
isComplete,
|
||||
isHidden,
|
||||
isVisible,
|
||||
isToggleable,
|
||||
title,
|
||||
tasks,
|
||||
displayProgressHeader,
|
||||
} = taskList;
|
||||
const { id, isHidden, isVisible, isToggleable } = taskList;
|
||||
|
||||
if ( ! isVisible ) {
|
||||
return null;
|
||||
|
@ -153,18 +132,13 @@ export const Tasks: React.FC< TasksProps > = ( { query } ) => {
|
|||
<Fragment key={ id }>
|
||||
<Suspense fallback={ null }>
|
||||
<TaskListComponent
|
||||
id={ id }
|
||||
eventPrefix={ eventPrefix }
|
||||
isComplete={ isComplete }
|
||||
isExpandable={
|
||||
experimentAssignment?.variationName ===
|
||||
'treatment'
|
||||
}
|
||||
query={ query }
|
||||
tasks={ tasks }
|
||||
title={ title }
|
||||
twoColumns={ false }
|
||||
displayProgressHeader={ displayProgressHeader }
|
||||
{ ...taskList }
|
||||
/>
|
||||
</Suspense>
|
||||
{ isToggleable && (
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useSelect } from '@wordpress/data';
|
||||
import { ONBOARDING_STORE_NAME, OPTIONS_STORE_NAME } from '@woocommerce/data';
|
||||
import { ONBOARDING_STORE_NAME } from '@woocommerce/data';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
@ -14,25 +14,7 @@ import TaskList from './task-list';
|
|||
import TaskListPlaceholder from './placeholder';
|
||||
import { Task } from '../tasks/task';
|
||||
|
||||
const taskDashboardSelect = ( select ) => {
|
||||
const { getOption, hasFinishedResolution } = select( OPTIONS_STORE_NAME );
|
||||
|
||||
return {
|
||||
keepCompletedTaskList: getOption(
|
||||
'woocommerce_task_list_keep_completed'
|
||||
),
|
||||
isResolving: ! hasFinishedResolution( 'getOption', [
|
||||
'woocommerce_task_list_keep_completed',
|
||||
] ),
|
||||
};
|
||||
};
|
||||
|
||||
const TaskDashboard = ( { query, twoColumns } ) => {
|
||||
const {
|
||||
keepCompletedTaskList,
|
||||
isResolving: isResolvingOptions,
|
||||
} = useSelect( taskDashboardSelect );
|
||||
|
||||
const { task } = query;
|
||||
|
||||
const { isResolving, taskLists } = useSelect( ( select ) => {
|
||||
|
@ -104,7 +86,7 @@ const TaskDashboard = ( { query, twoColumns } ) => {
|
|||
id={ taskList.id }
|
||||
eventName="tasklist"
|
||||
twoColumns={ twoColumns }
|
||||
keepCompletedTaskList={ keepCompletedTaskList }
|
||||
keepCompletedTaskList={ taskList.keepCompletedTaskList }
|
||||
dismissedTasks={ dismissedTasks || [] }
|
||||
isComplete={ isTaskListComplete }
|
||||
query={ query }
|
||||
|
|
|
@ -329,6 +329,15 @@ class TaskList {
|
|||
return $this->get_list_id() . '_tasklist_' . $event_name;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns option to keep completed task list.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function get_keep_completed_task_list() {
|
||||
return get_option( 'woocommerce_task_list_keep_completed', 'no' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove reminder bar four weeks after store creation.
|
||||
*/
|
||||
|
@ -364,6 +373,7 @@ class TaskList {
|
|||
),
|
||||
'eventPrefix' => $this->prefix_event( '' ),
|
||||
'displayProgressHeader' => $this->display_progress_header,
|
||||
'keepCompletedTaskList' => $this->get_keep_completed_task_list(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue