Merge pull request #32786 from woocommerce/fix/32720_progress-header-title
Fix progress header title
This commit is contained in:
commit
c60884ef20
|
@ -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;
|
||||
|
|
|
@ -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 = () => {
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: fix
|
||||
|
||||
Fix progress header title #32786
|
Loading…
Reference in New Issue