/** * External dependencies */ import { __ } from '@wordpress/i18n'; import { Component, cloneElement, Fragment } from '@wordpress/element'; import { compose } from '@wordpress/compose'; import classNames from 'classnames'; import { Button, Card, CardBody, CardHeader, __experimentalText as Text, } from '@wordpress/components'; import { withDispatch, withSelect } from '@wordpress/data'; import { Icon, check, chevronRight } from '@wordpress/icons'; import { xor } from 'lodash'; import { List, EllipsisMenu } from '@woocommerce/components'; import { updateQueryString } from '@woocommerce/navigation'; import { PLUGINS_STORE_NAME, OPTIONS_STORE_NAME, ONBOARDING_STORE_NAME, SETTINGS_STORE_NAME, } from '@woocommerce/data'; /** * Internal dependencies */ import './style.scss'; import CartModal from '../dashboard/components/cart-modal'; import { getAllTasks, recordTaskViewEvent } from './tasks'; import { getCountryCode } from '../dashboard/utils'; import { recordEvent } from '../lib/tracks'; class TaskDashboard extends Component { constructor( props ) { super( props ); this.state = { isCartModalOpen: false, }; } componentDidMount() { document.body.classList.add( 'woocommerce-onboarding' ); document.body.classList.add( 'woocommerce-task-dashboard__body' ); this.recordTaskView(); this.recordTaskListView(); this.possiblyCompleteTaskList(); this.possiblyTrackCompletedTasks(); } componentDidUpdate( prevProps ) { const { query } = this.props; const { query: prevQuery } = prevProps; const { task: prevTask } = prevQuery; const { task } = query; if ( prevTask !== task ) { window.document.documentElement.scrollTop = 0; this.recordTaskView(); } this.possiblyCompleteTaskList(); this.possiblyTrackCompletedTasks(); } possiblyCompleteTaskList() { const { isTaskListComplete, updateOptions } = this.props; if ( ! this.getIncompleteTasks().length && ! isTaskListComplete ) { updateOptions( { woocommerce_task_list_complete: 'yes', } ); } } getCompletedTaskKeys() { return this.getVisibleTasks() .filter( ( task ) => task.completed ) .map( ( task ) => task.key ); } getIncompleteTasks() { return this.getAllTasks().filter( ( task ) => task.visible && ! task.completed ); } possiblyTrackCompletedTasks() { const { trackedCompletedTasks, updateOptions } = this.props; const completedTaskKeys = this.getCompletedTaskKeys(); if ( xor( trackedCompletedTasks, completedTaskKeys ).length !== 0 ) { updateOptions( { woocommerce_task_list_tracked_completed_tasks: completedTaskKeys, } ); } } dismissTask( key ) { const { createNotice, dismissedTasks, updateOptions } = this.props; createNotice( 'success', __( 'Task dismissed' ), { actions: [ { label: __( 'Undo', 'woocommerce-admin' ), onClick: () => this.undoDismissTask( key ), }, ], } ); recordEvent( 'tasklist_dismiss_task', { task_name: key } ); updateOptions( { woocommerce_task_list_dismissed_tasks: [ ...dismissedTasks, key ], } ); } undoDismissTask( key ) { const { dismissedTasks, updateOptions } = this.props; const updatedDismissedTasks = dismissedTasks.filter( ( task ) => task !== key ); updateOptions( { woocommerce_task_list_dismissed_tasks: updatedDismissedTasks, } ); } componentWillUnmount() { document.body.classList.remove( 'woocommerce-onboarding' ); document.body.classList.remove( 'woocommerce-task-dashboard__body' ); } getAllTasks() { const { countryCode, profileItems, query, activePlugins, installedPlugins, installAndActivatePlugins, createNotice, isJetpackConnected, } = this.props; return getAllTasks( { countryCode, profileItems, query, toggleCartModal: this.toggleCartModal.bind( this ), activePlugins, installedPlugins, installAndActivatePlugins, createNotice, isJetpackConnected, } ); } getVisibleTasks() { const { dismissedTasks } = this.props; return this.getAllTasks().filter( ( task ) => task.visible && ! dismissedTasks.includes( task.key ) ); } recordTaskView() { const { isJetpackConnected, activePlugins, installedPlugins, query, } = this.props; const { task: taskName } = query; if ( ! taskName ) { return; } recordTaskViewEvent( taskName, isJetpackConnected, activePlugins, installedPlugins ); } recordTaskListView() { if ( this.getCurrentTask() ) { return; } const { profileItems } = this.props; const tasks = this.getVisibleTasks(); recordEvent( 'tasklist_view', { number_tasks: tasks.length, store_connected: profileItems.wccom_connected, } ); } keepTaskCard() { recordEvent( 'tasklist_completed', { action: 'keep_card', } ); this.props.updateOptions( { woocommerce_task_list_prompt_shown: true, } ); } hideTaskCard( action ) { recordEvent( 'tasklist_completed', { action, } ); this.props.updateOptions( { woocommerce_task_list_hidden: 'yes', woocommerce_task_list_prompt_shown: true, } ); } getCurrentTask() { const { query } = this.props; const { task } = query; const currentTask = this.getAllTasks().find( ( s ) => s.key === task ); if ( ! currentTask ) { return null; } return currentTask; } renderMenu() { return (
(
) } />
); } toggleCartModal() { const { isCartModalOpen } = this.state; if ( ! isCartModalOpen ) { recordEvent( 'tasklist_purchase_extensions' ); } this.setState( { isCartModalOpen: ! isCartModalOpen } ); } render() { const { query } = this.props; const { isCartModalOpen } = this.state; const currentTask = this.getCurrentTask(); const listTasks = this.getVisibleTasks().map( ( task ) => { task.className = classNames( task.completed ? 'is-complete' : null, task.className ); task.before = (
{ task.completed && }
); task.title = ( { task.title } { task.time && ! task.completed && ( { task.time } ) } ); if ( ! task.completed ) { task.after = task.isDismissable ? ( ) : ( ); } if ( ! task.onClick ) { task.onClick = () => updateQueryString( { task: task.key } ); } return task; } ); const progressBarClass = classNames( 'woocommerce-task-card__progress-bar', { completed: listTasks.length === this.getCompletedTaskKeys().length, } ); return (
{ currentTask ? ( cloneElement( currentTask.container, { query, } ) ) : ( { __( 'Finish setup', 'woocommerce-admin' ) } { this.renderMenu() } ) }
{ isCartModalOpen && ( this.toggleCartModal() } onClickPurchaseLater={ () => this.toggleCartModal() } /> ) }
); } } export default compose( withSelect( ( select ) => { const { getProfileItems } = select( ONBOARDING_STORE_NAME ); const { getOption } = select( OPTIONS_STORE_NAME ); const { getSettings } = select( SETTINGS_STORE_NAME ); const { getActivePlugins, getInstalledPlugins, isJetpackConnected, } = select( PLUGINS_STORE_NAME ); const profileItems = getProfileItems(); const isTaskListComplete = getOption( 'woocommerce_task_list_complete' ) || false; const trackedCompletedTasks = getOption( 'woocommerce_task_list_tracked_completed_tasks' ) || []; const dismissedTasks = getOption( 'woocommerce_task_list_dismissed_tasks' ) || []; const { general: generalSettings = {} } = getSettings( 'general' ); const countryCode = getCountryCode( generalSettings.woocommerce_default_country ); const activePlugins = getActivePlugins(); const installedPlugins = getInstalledPlugins(); return { activePlugins, countryCode, dismissedTasks, isJetpackConnected: isJetpackConnected(), installedPlugins, isTaskListComplete, profileItems, trackedCompletedTasks, }; } ), withDispatch( ( dispatch ) => { const { createNotice } = dispatch( 'core/notices' ); const { updateOptions } = dispatch( OPTIONS_STORE_NAME ); const { installAndActivatePlugins } = dispatch( PLUGINS_STORE_NAME ); return { createNotice, installAndActivatePlugins, updateOptions, }; } ) )( TaskDashboard );