diff --git a/packages/js/data/src/onboarding/utils.ts b/packages/js/data/src/onboarding/utils.ts index 11f44817f72..9623eeff560 100644 --- a/packages/js/data/src/onboarding/utils.ts +++ b/packages/js/data/src/onboarding/utils.ts @@ -6,11 +6,9 @@ import { TaskType } from './types'; /** * Filters tasks to only visible tasks, taking in account snoozed tasks. */ -export function getVisibleTasks( tasks: TaskType[] ) { - const nowTimestamp = Date.now(); - return tasks.filter( +export const getVisibleTasks = ( tasks: TaskType[] ) => + tasks.filter( ( task ) => ! task.isDismissed && - ( ! task.isSnoozed || task.snoozedUntil < nowTimestamp ) + ( ! task.isSnoozed || task.snoozedUntil < Date.now() ) ); -} diff --git a/plugins/woocommerce-admin/client/activity-panel/activity-panel.js b/plugins/woocommerce-admin/client/activity-panel/activity-panel.js index 4f3bef88584..dd8dea3d837 100644 --- a/plugins/woocommerce-admin/client/activity-panel/activity-panel.js +++ b/plugins/woocommerce-admin/client/activity-panel/activity-panel.js @@ -2,7 +2,7 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import { lazy, useState } from '@wordpress/element'; +import { lazy, useState, useContext, useMemo } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { uniqueId, find } from 'lodash'; import { Icon, help as helpIcon, external } from '@wordpress/icons'; @@ -12,6 +12,7 @@ import { OPTIONS_STORE_NAME, useUser, useUserPreferences, + getVisibleTasks, } from '@woocommerce/data'; import { getHistory } from '@woocommerce/navigation'; import { recordEvent } from '@woocommerce/tracks'; @@ -36,6 +37,8 @@ import { import { getUnapprovedReviews } from '../homescreen/activity-panel/reviews/utils'; import { ABBREVIATED_NOTIFICATION_SLOT_NAME } from './panels/inbox/abbreviated-notifications-panel'; import { getAdminSetting } from '~/utils/admin-settings'; +import { useActiveSetupTasklist } from '~/tasks'; +import { LayoutContext } from '~/layout'; const HelpPanel = lazy( () => import( /* webpackChunkName: "activity-panels-help" */ './panels/help' ) @@ -61,6 +64,12 @@ export const ActivityPanel = ( { isEmbedded, query } ) => { const { fills } = useSlot( ABBREVIATED_NOTIFICATION_SLOT_NAME ); const hasExtendedNotifications = Boolean( fills?.length ); const { updateUserPreferences, ...userData } = useUserPreferences(); + const activeSetupList = useActiveSetupTasklist(); + const layoutContext = useContext( LayoutContext ); + const updatedLayoutContext = useMemo( + () => layoutContext.getExtendedContext( 'activity-panel' ), + [ layoutContext ] + ); const getPreviewSiteBtnTrackData = ( select, getOption ) => { let trackData = {}; @@ -137,6 +146,8 @@ export const ActivityPanel = ( { isEmbedded, query } ) => { requestingTaskListOptions, setupTaskListComplete, setupTaskListHidden, + setupTasksCompleteCount, + setupTasksCount, previewSiteBtnTrackData, } = useSelect( ( select ) => { const { getOption } = select( OPTIONS_STORE_NAME ); @@ -144,7 +155,10 @@ export const ActivityPanel = ( { isEmbedded, query } ) => { ONBOARDING_STORE_NAME ); - const isSetupTaskListHidden = getTaskList( 'setup' )?.isHidden; + const setupList = getTaskList( activeSetupList ); + + const isSetupTaskListHidden = setupList?.isHidden; + const setupVisibleTasks = getVisibleTasks( setupList?.tasks || [] ); const extendedTaskList = getTaskList( 'extended' ); const thingsToDoCount = getThingsToDoNextCount( extendedTaskList ); @@ -160,8 +174,12 @@ export const ActivityPanel = ( { isEmbedded, query } ) => { requestingTaskListOptions: ! hasFinishedResolution( 'getTaskLists' ), - setupTaskListComplete: getTaskList( 'setup' )?.isComplete, + setupTaskListComplete: setupList?.isComplete, setupTaskListHidden: isSetupTaskListHidden, + setupTasksCount: setupVisibleTasks.length, + setupTasksCompleteCount: setupVisibleTasks.filter( + ( task ) => task.isComplete + ).length, isCompletedTask: Boolean( query.task && getTask( query.task )?.isComplete ), @@ -230,7 +248,14 @@ export const ActivityPanel = ( { isEmbedded, query } ) => { const setup = { name: 'setup', title: __( 'Finish setup', 'woocommerce' ), - icon: , + icon: ( + + ), visible: currentUserCan( 'manage_woocommerce' ) && ! requestingTaskListOptions && @@ -349,55 +374,57 @@ export const ActivityPanel = ( { isEmbedded, query } ) => { const showHelpHighlightTooltip = shouldShowHelpTooltip(); return ( -
- - { __( 'Store Activity', 'woocommerce' ) } - -
- { - if ( tab.onClick ) { - tab.onClick(); - return; - } + +
+ + { __( 'Store Activity', 'woocommerce' ) } + +
+ { + if ( tab.onClick ) { + tab.onClick(); + return; + } - togglePanel( tab, tabOpen ); - } } - /> - closePanel() } - clearPanel={ () => clearPanel() } - /> -
- { showHelpHighlightTooltip ? ( - closedHelpPanelHighlight() } - onShow={ () => recordEvent( 'help_tooltip_view' ) } - /> - ) : null } -
+ togglePanel( tab, tabOpen ); + } } + /> + closePanel() } + clearPanel={ () => clearPanel() } + /> +
+ { showHelpHighlightTooltip ? ( + closedHelpPanelHighlight() } + onShow={ () => recordEvent( 'help_tooltip_view' ) } + /> + ) : null } +
+ ); }; diff --git a/plugins/woocommerce-admin/client/activity-panel/panels/setup-tasks/setup-tasks-panel.tsx b/plugins/woocommerce-admin/client/activity-panel/panels/setup-tasks/setup-tasks-panel.tsx index eb62c02d863..492e8759ee4 100644 --- a/plugins/woocommerce-admin/client/activity-panel/panels/setup-tasks/setup-tasks-panel.tsx +++ b/plugins/woocommerce-admin/client/activity-panel/panels/setup-tasks/setup-tasks-panel.tsx @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import Tasks from '~/tasks'; +import { Tasks } from '~/tasks'; type QueryTypeProps = { query: { diff --git a/plugins/woocommerce-admin/client/activity-panel/setup-progress.js b/plugins/woocommerce-admin/client/activity-panel/setup-progress.js index 9f242a81f1c..d4de5291a23 100644 --- a/plugins/woocommerce-admin/client/activity-panel/setup-progress.js +++ b/plugins/woocommerce-admin/client/activity-panel/setup-progress.js @@ -1,21 +1,38 @@ -export const SetupProgress = () => ( +export const SetupProgress = ( { + setupTasksComplete, + setupCompletePercent, +} ) => ( 0 ? 'currentColor' : 'white' } + /> + = 50 ? 'currentColor' : 'white' } + /> + = 75 ? 'currentColor' : 'white' } + /> + ); diff --git a/plugins/woocommerce-admin/client/activity-panel/style.scss b/plugins/woocommerce-admin/client/activity-panel/style.scss index ffaada568b5..79fb9eaca73 100644 --- a/plugins/woocommerce-admin/client/activity-panel/style.scss +++ b/plugins/woocommerce-admin/client/activity-panel/style.scss @@ -29,11 +29,12 @@ } } - // custom progress icon, requires specific coloring - &.setup-progress { - path:first-child { - stroke: '#DCDCDE'; - } + .setup-progress-slice { + stroke: none; + } + + .setup-progress-ring { + stroke-width: 2px; } } @@ -69,8 +70,6 @@ outline: none; cursor: pointer; background-color: $studio-white; - max-width: min-content; - min-width: 80px; width: 100%; height: $header-height; color: $gray-700; @@ -204,16 +203,15 @@ } transform: translateX(100%); @include activity-panel-slide(); - position: fixed; + position: absolute; right: 0; - top: #{$header-height + $adminbar-height-mobile}; + top: 100%; z-index: 1000; overflow-x: hidden; overflow-y: auto; @include breakpoint( '>782px' ) { height: calc(100vh - #{$header-height + $adminbar-height}); - top: #{$header-height + $adminbar-height}; } .has-woocommerce-navigation & { height: calc(100vh - #{$header-height}); diff --git a/plugins/woocommerce-admin/client/homescreen/layout.js b/plugins/woocommerce-admin/client/homescreen/layout.js index 813f417a112..df1f31137d5 100644 --- a/plugins/woocommerce-admin/client/homescreen/layout.js +++ b/plugins/woocommerce-admin/client/homescreen/layout.js @@ -44,7 +44,9 @@ import { getAdminSetting } from '~/utils/admin-settings'; import { ProgressTitle } from '../task-lists'; const Tasks = lazy( () => - import( /* webpackChunkName: "tasks" */ '../tasks' ) + import( /* webpackChunkName: "tasks" */ '../tasks' ).then( ( module ) => ( { + default: module.Tasks, + } ) ) ); const TwoColumnTasks = lazy( () => diff --git a/plugins/woocommerce-admin/client/layout/index.js b/plugins/woocommerce-admin/client/layout/index.js index 53df9bff39a..62d9d54db81 100644 --- a/plugins/woocommerce-admin/client/layout/index.js +++ b/plugins/woocommerce-admin/client/layout/index.js @@ -4,7 +4,7 @@ import { SlotFillProvider } from '@wordpress/components'; import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; -import { Component, lazy, Suspense } from '@wordpress/element'; +import { Component, lazy, Suspense, createContext } from '@wordpress/element'; import { unstable_HistoryRouter as HistoryRouter, Route, @@ -15,7 +15,7 @@ import { } from 'react-router-dom'; import { Children, cloneElement } from 'react'; import PropTypes from 'prop-types'; -import { get, isFunction, identity } from 'lodash'; +import { get, isFunction, identity, memoize } from 'lodash'; import { parse } from 'qs'; import { getHistory, getQuery } from '@woocommerce/navigation'; import { @@ -51,6 +51,20 @@ const WCPayUsageModal = lazy( () => ) ); +const LayoutContextPrototype = { + getExtendedContext( newItem ) { + return { ...this, path: [ ...this.path, newItem ] }; + }, + toString() { + return this.path.join( '/' ); + }, + path: [], +}; + +export const LayoutContext = createContext( + LayoutContextPrototype.getExtendedContext( 'root' ) +); + export class PrimaryLayout extends Component { render() { const { children } = this.props; @@ -111,6 +125,13 @@ const LayoutSwitchWrapper = ( props ) => { }; class _Layout extends Component { + memoizedLayoutContext = memoize( ( page ) => + LayoutContextPrototype.getExtendedContext( + page?.breadcrumbs[ page.breadcrumbs.length - 1 ]?.toLowerCase() || + 'page' + ) + ); + componentDidMount() { this.recordPageViewTrack(); } @@ -195,38 +216,45 @@ class _Layout extends Component { const query = this.getQuery( location && location.search ); return ( - -
-
- - { ! isEmbedded && ( - -
- -
- - ) } + + +
+
+ + { ! isEmbedded && ( + +
+ +
+ + ) } - { isEmbedded && this.isWCPaySettingsPage() && ( - - - + { isEmbedded && this.isWCPaySettingsPage() && ( + + + + ) } +
+ + { window.wcAdminFeatures.navigation && ( + ) } -
- - { window.wcAdminFeatures.navigation && ( - - ) } - - + + + ); } } diff --git a/plugins/woocommerce-admin/client/tasks/index.ts b/plugins/woocommerce-admin/client/tasks/index.ts index b168df10bb5..965ee2d89d9 100644 --- a/plugins/woocommerce-admin/client/tasks/index.ts +++ b/plugins/woocommerce-admin/client/tasks/index.ts @@ -1,11 +1,10 @@ /** * Internal dependencies */ -import { Tasks } from './tasks'; import './fills'; import './deprecated-tasks'; +export * from './tasks'; export * from './placeholder'; export * from './reminder-bar'; export * from './hooks/useActiveSetupList'; -export default Tasks; diff --git a/plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx b/plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx index fa0ab892f51..1a96b202e3c 100644 --- a/plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx +++ b/plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx @@ -6,7 +6,8 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { ONBOARDING_STORE_NAME, OPTIONS_STORE_NAME, - TaskListType, + TaskType, + getVisibleTasks, } from '@woocommerce/data'; import { Button } from '@wordpress/components'; import { Link } from '@woocommerce/components'; @@ -112,15 +113,10 @@ export const TasksReminderBar: React.FC< ReminderBarProps > = ( { REMINDER_BAR_HIDDEN_OPTION, ] ); - const visibleTasks = - taskList?.tasks.filter( - ( task ) => - ! task.isDismissed && - ( ! task.isSnoozed || task.snoozedUntil < Date.now() ) - ) || []; + const visibleTasks = getVisibleTasks( taskList?.tasks || [] ); const completedTasks = - visibleTasks?.filter( ( task ) => task.isComplete ) || []; + visibleTasks.filter( ( task: TaskType ) => task.isComplete ) || []; const isResolved = taskListIsResolved && optionIsResolved; diff --git a/plugins/woocommerce-admin/client/tasks/task-list-item.tsx b/plugins/woocommerce-admin/client/tasks/task-list-item.tsx index 4026a3a9535..854c9e2e9cf 100644 --- a/plugins/woocommerce-admin/client/tasks/task-list-item.tsx +++ b/plugins/woocommerce-admin/client/tasks/task-list-item.tsx @@ -10,13 +10,14 @@ import { } from '@woocommerce/data'; import { recordEvent } from '@woocommerce/tracks'; import { TaskItem, useSlot } from '@woocommerce/experimental'; -import { useCallback } from '@wordpress/element'; +import { useCallback, useContext } from '@wordpress/element'; import { useDispatch } from '@wordpress/data'; import { WooOnboardingTaskListItem } from '@woocommerce/onboarding'; /** * Internal dependencies */ +import { LayoutContext } from '~/layout'; import './task-list.scss'; export type TaskListItemProps = { @@ -35,6 +36,7 @@ export const TaskListItem: React.FC< TaskListItemProps > = ( { task, } ) => { const { createNotice } = useDispatch( 'core/notices' ); + const layoutContext = useContext( LayoutContext ); const { dismissTask, @@ -117,6 +119,7 @@ export const TaskListItem: React.FC< TaskListItemProps > = ( { const trackClick = () => { recordEvent( 'tasklist_click', { task_name: id, + context: layoutContext.toString(), } ); if ( ! isComplete ) { diff --git a/plugins/woocommerce-admin/client/tasks/task-list.tsx b/plugins/woocommerce-admin/client/tasks/task-list.tsx index 170834fa92f..a8f9f86e925 100644 --- a/plugins/woocommerce-admin/client/tasks/task-list.tsx +++ b/plugins/woocommerce-admin/client/tasks/task-list.tsx @@ -2,7 +2,7 @@ * External dependencies */ import { __, _n, sprintf } from '@wordpress/i18n'; -import { useEffect, useRef, useState } from '@wordpress/element'; +import { useEffect, useRef, useState, useContext } from '@wordpress/element'; import { Card, CardHeader } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { Badge } from '@woocommerce/components'; @@ -21,6 +21,7 @@ import { TaskListItem } from './task-list-item'; import { TaskListMenu } from './task-list-menu'; import './task-list.scss'; import { ProgressHeader } from '~/task-lists/progress-header'; +import { LayoutContext } from '~/layout'; export type TaskListProps = TaskListType & { query: { @@ -51,6 +52,7 @@ export const TaskList: React.FC< TaskListProps > = ( { } ); const prevQueryRef = useRef( query ); const visibleTasks = getVisibleTasks( tasks ); + const layoutContext = useContext( LayoutContext ); const incompleteTasks = tasks.filter( ( task ) => ! task.isComplete && ! task.isDismissed @@ -64,6 +66,7 @@ export const TaskList: React.FC< TaskListProps > = ( { recordEvent( eventPrefix + 'view', { number_tasks: visibleTasks.length, store_connected: profileItems.wccom_connected, + context: layoutContext.toString(), } ); }; diff --git a/plugins/woocommerce-admin/client/tasks/tasks.tsx b/plugins/woocommerce-admin/client/tasks/tasks.tsx index 2f3a4198ccf..bd02be07688 100644 --- a/plugins/woocommerce-admin/client/tasks/tasks.tsx +++ b/plugins/woocommerce-admin/client/tasks/tasks.tsx @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import { MenuGroup, MenuItem } from '@wordpress/components'; import { check } from '@wordpress/icons'; -import { Fragment, useEffect } from '@wordpress/element'; +import { Fragment, useEffect, useState } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { ONBOARDING_STORE_NAME, @@ -33,6 +33,7 @@ import { SectionedTaskListPlaceholder } from '~/two-column-tasks/sectioned-task- export type TasksProps = { query: { task?: string }; + context?: string; }; function getTaskListComponent( taskListId: string ) { @@ -155,12 +156,9 @@ export const Tasks: React.FC< TasksProps > = ( { query } ) => { ? id.endsWith( 'two_column' ) : ! id.endsWith( 'two_column' ) ) + .filter( ( { isVisible }: TaskListType ) => isVisible ) .map( ( taskList: TaskListType ) => { - const { id, isHidden, isVisible, isToggleable } = taskList; - - if ( ! isVisible ) { - return null; - } + const { id, isHidden, isToggleable } = taskList; const TaskListComponent = getTaskListComponent( id ); return ( diff --git a/plugins/woocommerce-admin/client/tasks/test/task-list.test.tsx b/plugins/woocommerce-admin/client/tasks/test/task-list.test.tsx index 4f5516b67d0..fe6cd2e29b7 100644 --- a/plugins/woocommerce-admin/client/tasks/test/task-list.test.tsx +++ b/plugins/woocommerce-admin/client/tasks/test/task-list.test.tsx @@ -144,6 +144,7 @@ describe( 'TaskList', () => { ); expect( recordEvent ).toHaveBeenCalledTimes( 1 ); expect( recordEvent ).toHaveBeenCalledWith( 'tasklist_view', { + context: 'root', number_tasks: 0, store_connected: null, } ); @@ -166,6 +167,7 @@ describe( 'TaskList', () => { ); expect( recordEvent ).toHaveBeenCalledTimes( 1 ); expect( recordEvent ).toHaveBeenCalledWith( 'extended_tasklist_view', { + context: 'root', number_tasks: 0, store_connected: null, } ); diff --git a/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx b/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx index a7de9d247fc..b69ea01cd8a 100644 --- a/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx +++ b/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import { useEffect, useRef, useState } from '@wordpress/element'; +import { useEffect, useRef, useState, useContext } from '@wordpress/element'; import { Panel, PanelBody, PanelRow } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { ONBOARDING_STORE_NAME, getVisibleTasks } from '@woocommerce/data'; @@ -20,6 +20,7 @@ import { ProgressHeader } from '~/task-lists/progress-header'; import { SectionPanelTitle } from './section-panel-title'; import { TaskListItem } from './task-list-item'; import { TaskListCompletedHeader } from './completed-header'; +import { LayoutContext } from '~/layout'; type PanelBodyProps = Omit< PanelBody.Props, 'title' | 'onToggle' > & { title: string | React.ReactNode | undefined; @@ -51,6 +52,7 @@ export const SectionedTaskList: React.FC< TaskListProps > = ( { const [ openPanel, setOpenPanel ] = useState< string | null >( sections?.find( ( section ) => ! section.isComplete )?.id || null ); + const layoutContext = useContext( LayoutContext ); const prevQueryRef = useRef( query ); @@ -64,6 +66,7 @@ export const SectionedTaskList: React.FC< TaskListProps > = ( { recordEvent( `${ eventPrefix }view`, { number_tasks: visibleTasks.length, store_connected: profileItems.wccom_connected, + context: layoutContext.toString(), } ); }; diff --git a/plugins/woocommerce-admin/client/two-column-tasks/task-list-item.tsx b/plugins/woocommerce-admin/client/two-column-tasks/task-list-item.tsx index 39c64907e85..a92f0e9a25d 100644 --- a/plugins/woocommerce-admin/client/two-column-tasks/task-list-item.tsx +++ b/plugins/woocommerce-admin/client/two-column-tasks/task-list-item.tsx @@ -5,17 +5,21 @@ import { __ } from '@wordpress/i18n'; import { getNewPath, navigateTo } from '@woocommerce/navigation'; import { ONBOARDING_STORE_NAME, - OPTIONS_STORE_NAME, TaskType, useUserPreferences, } from '@woocommerce/data'; import { recordEvent } from '@woocommerce/tracks'; import { TaskItem, useSlot } from '@woocommerce/experimental'; -import { useCallback } from '@wordpress/element'; +import { useCallback, useContext } from '@wordpress/element'; import { useDispatch } from '@wordpress/data'; import { WooOnboardingTaskListItem } from '@woocommerce/onboarding'; import classnames from 'classnames'; +/** + * Internal dependencies + */ +import { LayoutContext } from '~/layout'; + export type TaskListItemProps = { task: TaskType; eventPrefix?: string; @@ -35,6 +39,8 @@ export const TaskListItem: React.FC< TaskListItemProps > = ( { undoSnoozeTask, } = useDispatch( ONBOARDING_STORE_NAME ); + const layoutContext = useContext( LayoutContext ); + const slot = useSlot( `woocommerce_onboarding_task_list_item_${ task.id }` ); @@ -68,6 +74,7 @@ export const TaskListItem: React.FC< TaskListItemProps > = ( { const trackClick = () => { recordEvent( `${ eventPrefix }click`, { task_name: task.id, + context: layoutContext.toString(), } ); if ( ! task.isComplete ) { diff --git a/plugins/woocommerce-admin/client/two-column-tasks/task-list.tsx b/plugins/woocommerce-admin/client/two-column-tasks/task-list.tsx index b37ec2ec225..0745563cac7 100644 --- a/plugins/woocommerce-admin/client/two-column-tasks/task-list.tsx +++ b/plugins/woocommerce-admin/client/two-column-tasks/task-list.tsx @@ -2,7 +2,13 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import { useEffect, useRef, useState, createElement } from '@wordpress/element'; +import { + useEffect, + useRef, + useState, + createElement, + useContext, +} from '@wordpress/element'; import { Button, Card } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { EllipsisMenu } from '@woocommerce/components'; @@ -29,6 +35,7 @@ import TaskListCompleted from './completed'; import { ProgressHeader } from '~/task-lists/progress-header'; import { TaskListItemTwoColumn } from './task-list-item-two-column'; import { TaskListCompletedHeader } from './completed-header'; +import { LayoutContext } from '~/layout'; export type TaskListProps = TaskListType & { eventName?: string; @@ -71,6 +78,7 @@ export const TaskList: React.FC< TaskListProps > = ( { } >( {} ); const [ activeTaskId, setActiveTaskId ] = useState( '' ); const [ showDismissModal, setShowDismissModal ] = useState( false ); + const layoutContext = useContext( LayoutContext ); const prevQueryRef = useRef( query ); @@ -83,6 +91,7 @@ export const TaskList: React.FC< TaskListProps > = ( { recordEvent( `${ listEventPrefix }view`, { number_tasks: visibleTasks.length, store_connected: profileItems.wccom_connected, + context: layoutContext.toString(), } ); }; @@ -179,6 +188,7 @@ export const TaskList: React.FC< TaskListProps > = ( { const trackClick = ( task: TaskType ) => { recordEvent( `${ listEventPrefix }click`, { task_name: task.id, + context: layoutContext.toString(), } ); }; diff --git a/plugins/woocommerce-admin/client/two-column-tasks/test/task-list.test.tsx b/plugins/woocommerce-admin/client/two-column-tasks/test/task-list.test.tsx index 7b392e02d0a..1f7b5d69d7a 100644 --- a/plugins/woocommerce-admin/client/two-column-tasks/test/task-list.test.tsx +++ b/plugins/woocommerce-admin/client/two-column-tasks/test/task-list.test.tsx @@ -148,6 +148,7 @@ describe( 'TaskList', () => { ); expect( recordEvent ).toHaveBeenCalledTimes( 1 ); expect( recordEvent ).toHaveBeenCalledWith( 'tasklist_view', { + context: 'root', number_tasks: 0, store_connected: null, } ); @@ -170,6 +171,7 @@ describe( 'TaskList', () => { ); expect( recordEvent ).toHaveBeenCalledTimes( 1 ); expect( recordEvent ).toHaveBeenCalledWith( 'tasklist_view', { + context: 'root', number_tasks: 0, store_connected: null, } ); @@ -193,6 +195,7 @@ describe( 'TaskList', () => { ); expect( recordEvent ).toHaveBeenCalledTimes( 1 ); expect( recordEvent ).toHaveBeenCalledWith( 'extended_tasklist_view', { + context: 'root', number_tasks: 0, store_connected: null, } ); diff --git a/plugins/woocommerce/changelog/add-33284-task-sidebar-tracks b/plugins/woocommerce/changelog/add-33284-task-sidebar-tracks new file mode 100644 index 00000000000..ff7f64c9c3a --- /dev/null +++ b/plugins/woocommerce/changelog/add-33284-task-sidebar-tracks @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Adding property to tasks tracks events to indicate context. diff --git a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/TaskList.php b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/TaskList.php index 4053546fc9a..bd87b730fca 100644 --- a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/TaskList.php +++ b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/TaskList.php @@ -171,7 +171,7 @@ class TaskList { * @return bool */ public function is_visible() { - if ( ! $this->visible ) { + if ( ! $this->visible || ! count( $this->get_viewable_tasks() ) > 0 ) { return false; } return ! $this->is_hidden(); diff --git a/plugins/woocommerce/tests/legacy/unit-tests/payment-tokens/payment-tokens.php b/plugins/woocommerce/tests/legacy/unit-tests/payment-tokens/payment-tokens.php index 92f607d6df2..ab7c75cf4ef 100644 --- a/plugins/woocommerce/tests/legacy/unit-tests/payment-tokens/payment-tokens.php +++ b/plugins/woocommerce/tests/legacy/unit-tests/payment-tokens/payment-tokens.php @@ -104,7 +104,6 @@ class WC_Tests_Payment_Tokens extends WC_Unit_Test_Case { * Test getting a customers default token, when there no token is expictly set. * This should be the "first created". * @see WC_Payment_Token::create() - * @group failing * @since 2.6.0 */ public function test_wc_get_customer_default_token_returns_first_created_when_no_default_token_set() { diff --git a/plugins/woocommerce/tests/legacy/unit-tests/woocommerce-admin/features/onboarding-tasks/task-list.php b/plugins/woocommerce/tests/legacy/unit-tests/woocommerce-admin/features/onboarding-tasks/task-list.php index ede67db4f55..9822ea6df13 100644 --- a/plugins/woocommerce/tests/legacy/unit-tests/woocommerce-admin/features/onboarding-tasks/task-list.php +++ b/plugins/woocommerce/tests/legacy/unit-tests/woocommerce-admin/features/onboarding-tasks/task-list.php @@ -8,6 +8,7 @@ require_once __DIR__ . '/test-task.php'; use Automattic\WooCommerce\Admin\Features\OnboardingTasks\TaskList; +use Automattic\WooCommerce\Admin\Features\OnboardingTasks\Task; /** * class WC_Admin_Tests_OnboardingTasks_TaskList @@ -89,6 +90,13 @@ class WC_Admin_Tests_OnboardingTasks_TaskList extends WC_Unit_Test_Case { * Tests that lists can be hidden. */ public function test_visible() { + $this->assertFalse( $this->list->is_visible() ); + $this->list->add_task( + new TestTask( + new TaskList(), + array( 'id' => 'my-task' ) + ) + ); $this->assertTrue( $this->list->is_visible() ); }