woocommerce/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx

208 lines
5.0 KiB
TypeScript
Raw Normal View History

2022-03-21 17:04:15 +00:00
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useEffect, useRef, useState } from '@wordpress/element';
import { Panel, PanelBody, PanelRow } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import {
OPTIONS_STORE_NAME,
ONBOARDING_STORE_NAME,
getVisibleTasks,
2022-04-20 04:49:27 +00:00
WCDataSelector,
2022-03-21 17:04:15 +00:00
} from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
import { List } from '@woocommerce/experimental';
2022-03-21 17:04:15 +00:00
import classnames from 'classnames';
/**
* Internal dependencies
*/
import '../tasks/task-list.scss';
import './sectioned-task-list.scss';
import TaskListCompleted from './completed';
import { TaskListProps } from '~/tasks/task-list';
import { ProgressHeader } from '~/task-lists/progress-header';
import { SectionPanelTitle } from './section-panel-title';
import { TaskListItem } from './task-list-item';
2022-03-21 17:04:15 +00:00
type PanelBodyProps = Omit< PanelBody.Props, 'title' | 'onToggle' > & {
title: string | React.ReactNode | undefined;
onToggle?: ( isOpen: boolean ) => void;
};
const PanelBodyWithUpdatedType = PanelBody as React.ComponentType< PanelBodyProps >;
export const SectionedTaskList: React.FC< TaskListProps > = ( {
query,
id,
eventPrefix,
2022-03-21 17:04:15 +00:00
tasks,
keepCompletedTaskList,
isComplete,
sections,
displayProgressHeader,
2022-03-21 17:04:15 +00:00
} ) => {
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
2022-04-20 04:49:27 +00:00
const { profileItems } = useSelect( ( select: WCDataSelector ) => {
2022-03-21 17:04:15 +00:00
const { getProfileItems } = select( ONBOARDING_STORE_NAME );
return {
profileItems: getProfileItems(),
};
} );
const { hideTaskList } = useDispatch( ONBOARDING_STORE_NAME );
const [ openPanel, setOpenPanel ] = useState< string | null >(
sections?.find( ( section ) => ! section.isComplete )?.id || null
);
const prevQueryRef = useRef( query );
const visibleTasks = getVisibleTasks( tasks );
2022-03-21 17:04:15 +00:00
const recordTaskListView = () => {
if ( query.task ) {
return;
}
recordEvent( `${ eventPrefix }view`, {
2022-03-21 17:04:15 +00:00
number_tasks: visibleTasks.length,
store_connected: profileItems.wccom_connected,
} );
};
useEffect( () => {
recordTaskListView();
}, [] );
useEffect( () => {
const { task: prevTask } = prevQueryRef.current;
const { task } = query;
if ( prevTask !== task ) {
window.document.documentElement.scrollTop = 0;
prevQueryRef.current = query;
}
}, [ query ] );
const hideTasks = () => {
hideTaskList( id );
};
const keepTasks = () => {
const updateOptionsParams = {
woocommerce_task_list_keep_completed: 'yes',
};
updateOptions( {
...updateOptionsParams,
} );
};
let selectedHeaderCard = visibleTasks.find(
( listTask ) => listTask.isComplete === false
);
// If nothing is selected, default to the last task since everything is completed.
if ( ! selectedHeaderCard ) {
selectedHeaderCard = visibleTasks[ visibleTasks.length - 1 ];
}
const getSectionTasks = ( sectionTaskIds: string[] ) => {
return visibleTasks.filter( ( task ) =>
sectionTaskIds.includes( task.id )
);
};
if ( ! visibleTasks.length ) {
return <div className="woocommerce-task-dashboard__container"></div>;
}
if ( isComplete && ! keepCompletedTaskList ) {
return (
<>
<TaskListCompleted
hideTasks={ hideTasks }
keepTasks={ keepTasks }
twoColumns={ false }
/>
</>
);
}
return (
<>
{ displayProgressHeader ? (
<ProgressHeader taskListId={ id } />
) : null }
2022-03-21 17:04:15 +00:00
<div
className={ classnames(
`woocommerce-task-dashboard__container woocommerce-sectioned-task-list two-column-experiment woocommerce-task-list__${ id }`
) }
>
<Panel>
{ ( sections || [] ).map( ( section ) => (
<PanelBodyWithUpdatedType
key={ section.id }
title={
<SectionPanelTitle
section={ section }
tasks={ tasks }
active={ openPanel === section.id }
/>
}
2022-03-21 17:04:15 +00:00
opened={ openPanel === section.id }
onToggle={ ( isOpen: boolean ) => {
if ( ! isOpen && openPanel === section.id ) {
recordEvent(
`${ eventPrefix }section_closed`,
{
id: section.id,
all: true,
}
);
2022-03-21 17:04:15 +00:00
setOpenPanel( null );
} else {
if ( openPanel ) {
recordEvent(
`${ eventPrefix }section_closed`,
{
id: openPanel,
all: false,
}
);
}
2022-03-21 17:04:15 +00:00
setOpenPanel( section.id );
}
if ( isOpen ) {
recordEvent(
`${ eventPrefix }section_opened`,
{
id: section.id,
}
);
}
2022-03-21 17:04:15 +00:00
} }
initialOpen={ false }
>
<PanelRow>
<List animation="custom">
{ getSectionTasks( section.tasks ).map(
( task ) => (
<TaskListItem
key={ task.id }
task={ task }
eventPrefix={ eventPrefix }
/>
)
2022-03-21 17:04:15 +00:00
) }
</List>
</PanelRow>
</PanelBodyWithUpdatedType>
) ) }
</Panel>
</div>
</>
);
};
export default SectionedTaskList;