From 6ab9a9ae2ce1e6570ecd06ac719704419524704a Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Fri, 22 Apr 2022 12:04:51 -0300 Subject: [PATCH 1/3] Add task list slot fill support in the sectioned task list --- .../tasks/reminder-bar/reminder-bar.tsx | 2 +- .../two-column-tasks/sectioned-task-list.tsx | 101 ++--------- .../two-column-tasks/task-list-item.tsx | 157 ++++++++++++++++++ 3 files changed, 168 insertions(+), 92 deletions(-) create mode 100644 plugins/woocommerce-admin/client/two-column-tasks/task-list-item.tsx 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 f5965e1a6c3..021992095b9 100644 --- a/plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx +++ b/plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx @@ -160,7 +160,7 @@ export const TasksReminderBar: React.FC< ReminderBarProps > = ( { const tracksProps = { completed: completedTasksCount, - is_homescreen: isHomescreen, + is_homescreen: !! isHomescreen, is_active_task_page: isActiveTaskPage, }; 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 3063e03d773..bf349643805 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 @@ -5,22 +5,15 @@ import { __ } from '@wordpress/i18n'; import { useEffect, useRef, useState } from '@wordpress/element'; import { Panel, PanelBody, PanelRow } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; -import { - updateQueryString, - getHistory, - getNewPath, -} from '@woocommerce/navigation'; import { OPTIONS_STORE_NAME, ONBOARDING_STORE_NAME, - TaskType, getVisibleTasks, WCDataSelector, } from '@woocommerce/data'; import { recordEvent } from '@woocommerce/tracks'; -import { List, TaskItem } from '@woocommerce/experimental'; +import { List } from '@woocommerce/experimental'; import classnames from 'classnames'; -import { History } from 'history'; /** * Internal dependencies @@ -31,6 +24,7 @@ import TaskListCompleted from './completed'; import { TaskListProps } from '~/tasks/task-list'; import { ProgressHeader } from '~/task-lists/progress-header'; import { SectionPanelTitle } from './section-panel-title'; +import { TaskListItem } from './task-list-item'; type PanelBodyProps = Omit< PanelBody.Props, 'title' | 'onToggle' > & { title: string | React.ReactNode | undefined; @@ -48,10 +42,7 @@ export const SectionedTaskList: React.FC< TaskListProps > = ( { sections, displayProgressHeader, } ) => { - const { createNotice } = useDispatch( 'core/notices' ); - const { updateOptions, dismissTask, undoDismissTask } = useDispatch( - OPTIONS_STORE_NAME - ); + const { updateOptions } = useDispatch( OPTIONS_STORE_NAME ); const { profileItems } = useSelect( ( select: WCDataSelector ) => { const { getProfileItems } = select( ONBOARDING_STORE_NAME ); return { @@ -92,18 +83,6 @@ export const SectionedTaskList: React.FC< TaskListProps > = ( { } }, [ query ] ); - const onDismissTask = ( taskId: string ) => { - dismissTask( taskId ); - createNotice( 'success', __( 'Task dismissed' ), { - actions: [ - { - label: __( 'Undo', 'woocommerce-admin' ), - onClick: () => undoDismissTask( taskId ), - }, - ], - } ); - }; - const hideTasks = () => { hideTaskList( id ); }; @@ -127,28 +106,6 @@ export const SectionedTaskList: React.FC< TaskListProps > = ( { selectedHeaderCard = visibleTasks[ visibleTasks.length - 1 ]; } - const trackClick = ( task: TaskType ) => { - recordEvent( `${ eventPrefix }_click`, { - task_name: task.id, - } ); - }; - - const onTaskSelected = ( task: TaskType ) => { - trackClick( task ); - if ( task.actionUrl ) { - if ( task.actionUrl.startsWith( 'http' ) ) { - window.location.href = task.actionUrl; - } else { - ( getHistory() as History ).push( - getNewPath( {}, task.actionUrl, {} ) - ); - } - return; - } - - updateQueryString( { task: task.id } ); - }; - const getSectionTasks = ( sectionTaskIds: string[] ) => { return visibleTasks.filter( ( task ) => sectionTaskIds.includes( task.id ) @@ -229,51 +186,13 @@ export const SectionedTaskList: React.FC< TaskListProps > = ( { { getSectionTasks( section.tasks ).map( - ( task ) => { - const className = classnames( - 'woocommerce-task-list__item', - { - complete: task.isComplete, - 'is-disabled': - task.isDisabled, - } - ); - return ( - { - if ( - ! task.isDisabled - ) { - onTaskSelected( - task - ); - } - } } - onDismiss={ - task.isDismissable - ? () => - onDismissTask( - task.id - ) - : undefined - } - action={ () => {} } - actionLabel={ - task.actionLabel - } - /> - ); - } + ( task ) => ( + + ) ) } 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 new file mode 100644 index 00000000000..21c86b2a935 --- /dev/null +++ b/plugins/woocommerce-admin/client/two-column-tasks/task-list-item.tsx @@ -0,0 +1,157 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { + getHistory, + getNewPath, + updateQueryString, +} from '@woocommerce/navigation'; +import { OPTIONS_STORE_NAME, TaskType } from '@woocommerce/data'; +import { recordEvent } from '@woocommerce/tracks'; +import { TaskItem, useSlot } from '@woocommerce/experimental'; +import { useCallback } from '@wordpress/element'; +import { useDispatch } from '@wordpress/data'; +import { WooOnboardingTaskListItem } from '@woocommerce/onboarding'; +import classnames from 'classnames'; +import { History } from 'history'; + +export type TaskListItemProps = { + task: TaskType; + eventPrefix?: string; +}; + +export const TaskListItem: React.FC< TaskListItemProps > = ( { + task, + eventPrefix, +} ) => { + const { createNotice } = useDispatch( 'core/notices' ); + const { + dismissTask, + undoDismissTask, + snoozeTask, + undoSnoozeTask, + } = useDispatch( OPTIONS_STORE_NAME ); + + const slot = useSlot( + `woocommerce_onboarding_task_list_item_${ task.id }` + ); + const hasFills = Boolean( slot?.fills?.length ); + + const trackClick = () => { + recordEvent( `${ eventPrefix }_click`, { + task_name: task.id, + } ); + }; + + const onTaskSelected = () => { + trackClick(); + + if ( task.actionUrl ) { + if ( task.actionUrl.startsWith( 'http' ) ) { + window.location.href = task.actionUrl; + } else { + ( getHistory() as History ).push( + getNewPath( {}, task.actionUrl, {} ) + ); + } + return; + } + + window.document.documentElement.scrollTop = 0; + updateQueryString( { task: task.id } ); + }; + + const onDismiss = useCallback( () => { + dismissTask( task.id ); + createNotice( 'success', __( 'Task dismissed' ), { + actions: [ + { + label: __( 'Undo', 'woocommerce' ), + onClick: () => undoDismissTask( task.id ), + }, + ], + } ); + }, [ task.id ] ); + + const onSnooze = useCallback( () => { + snoozeTask( task.id ); + createNotice( + 'success', + __( 'Task postponed until tomorrow', 'woocommerce' ), + { + actions: [ + { + label: __( 'Undo', 'woocommerce' ), + onClick: () => undoSnoozeTask( task.id ), + }, + ], + } + ); + }, [ task.id ] ); + + const className = classnames( 'woocommerce-task-list__item', { + complete: task.isComplete, + 'is-disabled': task.isDisabled, + } ); + + const taskItemProps = { + completed: task.isComplete, + onSnooze: task.isSnoozeable && onSnooze, + onDismiss: task.isDismissable && onDismiss, + }; + + const DefaultTaskItem = useCallback( + ( props ) => { + const onClickActions = () => { + if ( props.onClick ) { + trackClick(); + return props.onClick(); + } + return onTaskSelected(); + }; + return ( + {} } + actionLabel={ task.actionLabel } + { ...props } + onClick={ () => { + if ( task.isDisabled ) { + return; + } + onClickActions(); + } } + /> + ); + }, + [ + task.id, + task.title, + task.content, + task.time, + task.actionLabel, + task.isComplete, + ] + ); + + return hasFills ? ( + + ) : ( + + ); +}; From d5401cee3c1628c888da8c9d3fb892130f386be2 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Fri, 22 Apr 2022 12:15:22 -0300 Subject: [PATCH 2/3] Fix track format --- .../client/two-column-tasks/task-list-item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 21c86b2a935..25a3d2bf56f 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 @@ -39,7 +39,7 @@ export const TaskListItem: React.FC< TaskListItemProps > = ( { const hasFills = Boolean( slot?.fills?.length ); const trackClick = () => { - recordEvent( `${ eventPrefix }_click`, { + recordEvent( `${ eventPrefix }click`, { task_name: task.id, } ); }; From f379462885f817c8099fed0437fa6d83b0205a6b Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Fri, 22 Apr 2022 12:24:49 -0300 Subject: [PATCH 3/3] Add changelog --- plugins/woocommerce/changelog/fix-32714_wcpay_blank_page | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/fix-32714_wcpay_blank_page diff --git a/plugins/woocommerce/changelog/fix-32714_wcpay_blank_page b/plugins/woocommerce/changelog/fix-32714_wcpay_blank_page new file mode 100644 index 00000000000..0f672f00f29 --- /dev/null +++ b/plugins/woocommerce/changelog/fix-32714_wcpay_blank_page @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Addressing issues with certain tasks in task list experiment leading to blank page. #32742