diff --git a/plugins/woocommerce-admin/client/task-lists/progress-header/progress-header.tsx b/plugins/woocommerce-admin/client/task-lists/progress-header/progress-header.tsx index a80319ecc40..2209df90a12 100644 --- a/plugins/woocommerce-admin/client/task-lists/progress-header/progress-header.tsx +++ b/plugins/woocommerce-admin/client/task-lists/progress-header/progress-header.tsx @@ -20,40 +20,33 @@ type ProgressHeaderProps = { export const ProgressHeader: React.FC< ProgressHeaderProps > = ( { taskListId, } ) => { - const { - loading, - tasksCount, - completedCount, - hasVisitedTasks, - disabledCompletedCount, - } = useSelect( ( select ) => { - const taskList = select( ONBOARDING_STORE_NAME ).getTaskList( - taskListId - ); - const finishedResolution = select( - ONBOARDING_STORE_NAME - ).hasFinishedResolution( 'getTaskList', [ taskListId ] ); - const visibleTasks = getVisibleTasks( taskList?.tasks || [] ); + const { loading, tasksCount, completedCount, hasVisitedTasks } = useSelect( + ( select ) => { + const taskList = select( ONBOARDING_STORE_NAME ).getTaskList( + taskListId + ); + const finishedResolution = select( + ONBOARDING_STORE_NAME + ).hasFinishedResolution( 'getTaskList', [ taskListId ] ); + const visibleTasks = getVisibleTasks( taskList?.tasks || [] ); - return { - loading: ! finishedResolution, - tasksCount: visibleTasks?.length, - completedCount: visibleTasks?.filter( ( task ) => task.isComplete ) - .length, - disabledCompletedCount: visibleTasks?.filter( - ( task ) => task.isComplete && task.isDisabled - ).length, - hasVisitedTasks: - visibleTasks?.filter( ( task ) => task.isVisited ).length > 0, - }; - } ); + return { + loading: ! finishedResolution, + tasksCount: visibleTasks?.length, + completedCount: visibleTasks?.filter( + ( task ) => task.isComplete + ).length, + hasVisitedTasks: + visibleTasks?.filter( + ( task ) => + task.isVisited && task.id !== 'store_details' + ).length > 0, + }; + } + ); const progressTitle = useMemo( () => { - if ( - ( ! hasVisitedTasks && - completedCount < 2 + disabledCompletedCount ) || - completedCount === tasksCount - ) { + if ( ! hasVisitedTasks || completedCount === tasksCount ) { const siteTitle = getSetting( 'siteTitle' ); return siteTitle ? sprintf( @@ -61,7 +54,7 @@ export const ProgressHeader: React.FC< ProgressHeaderProps > = ( { __( 'Welcome to %s', 'woocommerce' ), siteTitle ) - : __( 'Welcome', 'woocommerce' ); + : __( 'Welcome to your store', 'woocommerce' ); } if ( completedCount > 0 && completedCount < 4 ) { return __( "Let's get you started", 'woocommerce' ) + ' 🚀'; @@ -70,7 +63,7 @@ export const ProgressHeader: React.FC< ProgressHeaderProps > = ( { return __( 'You are on the right track', 'woocommerce' ); } return __( 'You are almost there', 'woocommerce' ); - }, [ completedCount, hasVisitedTasks ] ); + }, [ completedCount, hasVisitedTasks, tasksCount ] ); if ( loading ) { return null; 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 a0c11932810..aac93038952 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 @@ -7,7 +7,12 @@ import { getNewPath, updateQueryString, } from '@woocommerce/navigation'; -import { OPTIONS_STORE_NAME, TaskType } from '@woocommerce/data'; +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'; @@ -32,16 +37,46 @@ export const TaskListItem: React.FC< TaskListItemProps > = ( { snoozeTask, undoSnoozeTask, } = useDispatch( OPTIONS_STORE_NAME ); + const { visitedTask } = useDispatch( ONBOARDING_STORE_NAME ); const slot = useSlot( `woocommerce_onboarding_task_list_item_${ task.id }` ); const hasFills = Boolean( slot?.fills?.length ); + const userPreferences = useUserPreferences(); + + const getTaskStartedCount = () => { + const trackedStartedTasks = + userPreferences.task_list_tracked_started_tasks; + if ( ! trackedStartedTasks || ! trackedStartedTasks[ task.id ] ) { + return 0; + } + return trackedStartedTasks[ task.id ]; + }; + + const updateTrackStartedCount = () => { + const newCount = getTaskStartedCount() + 1; + const trackedStartedTasks = + userPreferences.task_list_tracked_started_tasks || {}; + + visitedTask( task.id ); + userPreferences.updateUserPreferences( { + task_list_tracked_started_tasks: { + ...( trackedStartedTasks || {} ), + [ task.id ]: newCount, + }, + } ); + }; + const trackClick = () => { recordEvent( `${ eventPrefix }click`, { task_name: task.id, } ); + + if ( ! task.isComplete ) { + updateTrackStartedCount(); + } }; const onTaskSelected = () => { diff --git a/plugins/woocommerce/changelog/fix-32720_progress-header-title b/plugins/woocommerce/changelog/fix-32720_progress-header-title new file mode 100644 index 00000000000..2cbb7e6f01e --- /dev/null +++ b/plugins/woocommerce/changelog/fix-32720_progress-header-title @@ -0,0 +1,4 @@ +Significance: minor +Type: fix + +Fix progress header title #32786