From c934c623510a30bf5e99f7d465912f61cf7991e3 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Wed, 23 Mar 2022 17:01:58 -0300 Subject: [PATCH] Address PR feedback and fix some minor issues --- .../progress-header/progress-header.tsx | 20 ++++++------ .../client/two-column-tasks/task-list.tsx | 31 ++++++++++++++++++- .../Tasks/AdditionalPayments.php | 2 +- 3 files changed, 42 insertions(+), 11 deletions(-) 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 5bfbe2f35f7..29bc6c0683c 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 @@ -22,12 +22,12 @@ export const ProgressHeader: React.FC< ProgressHeaderProps > = ( { } ) => { const { loading, tasksCount, completedCount, hasVisitedTasks } = useSelect( ( select ) => { - const isResolving = select( ONBOARDING_STORE_NAME ).isResolving( - 'getTaskList' - ); const taskList: TaskListType = select( ONBOARDING_STORE_NAME ).getTaskList( taskListId ); + const finishedResolution = select( ONBOARDING_STORE_NAME ).hasFinishedResolution( + 'getTaskList', [ taskListId ] + ); const nowTimestamp = Date.now(); const visibleTasks = taskList?.tasks.filter( ( task ) => @@ -36,7 +36,7 @@ export const ProgressHeader: React.FC< ProgressHeaderProps > = ( { ); return { - loading: isResolving, + loading: ! finishedResolution, tasksCount: visibleTasks?.length, completedCount: visibleTasks?.filter( ( task ) => task.isComplete @@ -49,7 +49,7 @@ export const ProgressHeader: React.FC< ProgressHeaderProps > = ( { ); const progressTitle = useMemo( () => { - if ( ! hasVisitedTasks || completedCount === tasksCount ) { + if ( ( ! hasVisitedTasks && completedCount < 2 ) || completedCount === tasksCount ) { const siteTitle = getSetting( 'siteTitle' ); return siteTitle ? sprintf( @@ -58,12 +58,14 @@ export const ProgressHeader: React.FC< ProgressHeaderProps > = ( { siteTitle ) : __( 'Welcome', 'woocommerce-admin' ); - } else if ( completedCount > 0 && completedCount < 3 ) { - return __( "Let's get you set up", 'woocommerce-admin' ) + ' 🚀'; - } else if ( completedCount > 2 && completedCount < 5 ) { + } + if ( completedCount > 0 && completedCount < 4 ) { + return __( "Let's get you started", 'woocommerce-admin' ) + ' 🚀'; + } + if ( completedCount > 3 && completedCount < 7 ) { return __( 'You are on the right track', 'woocommerce-admin' ); } - return __( 'Just a few tasks left', 'woocommerce-admin' ); + return __( 'You are almost there', 'woocommerce-admin' ); }, [ completedCount, hasVisitedTasks ] ); if ( loading || completedCount === tasksCount ) { 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 21bef6d0ebb..38ce2512b01 100644 --- a/plugins/woocommerce-admin/client/two-column-tasks/task-list.tsx +++ b/plugins/woocommerce-admin/client/two-column-tasks/task-list.tsx @@ -11,6 +11,7 @@ import { OPTIONS_STORE_NAME, ONBOARDING_STORE_NAME, TaskType, + useUserPreferences } from '@woocommerce/data'; import { recordEvent } from '@woocommerce/tracks'; import { List, TaskItem } from '@woocommerce/experimental'; @@ -46,7 +47,8 @@ export const TaskList: React.FC< TaskListProps > = ( { profileItems: getProfileItems(), }; } ); - const { hideTaskList } = useDispatch( ONBOARDING_STORE_NAME ); + const { hideTaskList, visitedTask } = useDispatch( ONBOARDING_STORE_NAME ); + const userPreferences = useUserPreferences(); const [ headerData, setHeaderData ] = useState< { task?: TaskType; goToTask?: () => void; @@ -163,6 +165,30 @@ export const TaskList: React.FC< TaskListProps > = ( { selectedHeaderCard = visibleTasks[ visibleTasks.length - 1 ]; } + const getTaskStartedCount = ( taskId: string ) => { + const trackedStartedTasks = + userPreferences.task_list_tracked_started_tasks; + if ( ! trackedStartedTasks || ! trackedStartedTasks[ taskId ] ) { + return 0; + } + return trackedStartedTasks[ taskId ]; + }; + + // @todo This would be better as a task endpoint that handles updating the count. + const updateTrackStartedCount = ( taskId: string ) => { + const newCount = getTaskStartedCount( taskId ) + 1; + const trackedStartedTasks = + userPreferences.task_list_tracked_started_tasks || {}; + + visitedTask( taskId ); + userPreferences.updateUserPreferences( { + task_list_tracked_started_tasks: { + ...( trackedStartedTasks || {} ), + [ taskId ]: newCount, + }, + } ); + }; + const trackClick = ( task: TaskType ) => { recordEvent( `${ eventName }_click`, { task_name: task.id, @@ -171,6 +197,9 @@ export const TaskList: React.FC< TaskListProps > = ( { const goToTask = ( task: TaskType ) => { trackClick( task ); + if ( ! task.isComplete ) { + updateTrackStartedCount( task.id ); + } updateQueryString( { task: task.id } ); }; diff --git a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/AdditionalPayments.php b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/AdditionalPayments.php index eceae195153..9ca3e1bf365 100644 --- a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/AdditionalPayments.php +++ b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/AdditionalPayments.php @@ -73,7 +73,7 @@ class AdditionalPayments extends Payments { $woocommerce_payments = new WooCommercePayments(); - if ( $woocommerce_payments->is_requested() && $woocommerce_payments->is_supported() && ! $woocommerce_payments->is_connected() ) { + if ( ! $woocommerce_payments->is_requested() || ( $woocommerce_payments->is_supported() && ! $woocommerce_payments->is_connected() ) ) { // Hide task if WC Pay is installed via OBW, in supported country, but not connected. return false; }