From 95b36650d71ee09021eb9f264ecbc6b00277f70a Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Wed, 10 Apr 2024 20:32:15 +0800 Subject: [PATCH] Fix Launch Your Store task item should not be clickable once completed (#46361) * Fix Launch Your Store task item should not be clickable once completed * Add changefile(s) from automation for the following project(s): @woocommerce/experimental, woocommerce --------- Co-authored-by: github-actions --- ...-fix-lys-task-not-clickable-once-completed | 4 +++ .../src/experimental-list/task-item/index.tsx | 2 +- .../client/task-lists/fills/index.ts | 1 + .../task-lists/fills/launch-your-store.tsx | 30 +++++++++++++++++++ .../components/task-list-item.tsx | 17 ++++++----- ...-fix-lys-task-not-clickable-once-completed | 4 +++ 6 files changed, 49 insertions(+), 9 deletions(-) create mode 100644 packages/js/experimental/changelog/46361-fix-lys-task-not-clickable-once-completed create mode 100644 plugins/woocommerce-admin/client/task-lists/fills/launch-your-store.tsx create mode 100644 plugins/woocommerce/changelog/46361-fix-lys-task-not-clickable-once-completed diff --git a/packages/js/experimental/changelog/46361-fix-lys-task-not-clickable-once-completed b/packages/js/experimental/changelog/46361-fix-lys-task-not-clickable-once-completed new file mode 100644 index 00000000000..d0ba8df72ba --- /dev/null +++ b/packages/js/experimental/changelog/46361-fix-lys-task-not-clickable-once-completed @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix Launch Your Store task item should not be clickable once completed \ No newline at end of file diff --git a/packages/js/experimental/src/experimental-list/task-item/index.tsx b/packages/js/experimental/src/experimental-list/task-item/index.tsx index e84b2e1527d..ee533065141 100644 --- a/packages/js/experimental/src/experimental-list/task-item/index.tsx +++ b/packages/js/experimental/src/experimental-list/task-item/index.tsx @@ -39,7 +39,7 @@ type ActionArgs = { type TaskItemProps = { title: string; completed: boolean; - onClick: React.MouseEventHandler< HTMLElement >; + onClick?: React.MouseEventHandler< HTMLElement >; onCollapse?: () => void; onDelete?: () => void; onDismiss?: () => void; diff --git a/plugins/woocommerce-admin/client/task-lists/fills/index.ts b/plugins/woocommerce-admin/client/task-lists/fills/index.ts index bae3bf48a5f..d57d3954d93 100644 --- a/plugins/woocommerce-admin/client/task-lists/fills/index.ts +++ b/plugins/woocommerce-admin/client/task-lists/fills/index.ts @@ -9,6 +9,7 @@ import './appearance'; import './tax'; import './woocommerce-payments'; import './deprecated-tasks'; +import './launch-your-store'; const possiblyImportProductTask = async () => { if ( isImportProduct() ) { diff --git a/plugins/woocommerce-admin/client/task-lists/fills/launch-your-store.tsx b/plugins/woocommerce-admin/client/task-lists/fills/launch-your-store.tsx new file mode 100644 index 00000000000..3070ed4f6ec --- /dev/null +++ b/plugins/woocommerce-admin/client/task-lists/fills/launch-your-store.tsx @@ -0,0 +1,30 @@ +/** + * External dependencies + */ +import { registerPlugin } from '@wordpress/plugins'; +import { WooOnboardingTaskListItem } from '@woocommerce/onboarding'; + +const LaunchYourStoreTaskItem = () => { + return ( + + { ( { + defaultTaskItem: DefaultTaskItem, + isComplete, + }: { + defaultTaskItem: ( props: { + isClickable: boolean; + } ) => JSX.Element; + onClick: () => void; + isComplete: boolean; + } ) => { + return ; + } } + + ); +}; + +registerPlugin( 'woocommerce-admin-task-launch-your-store', { + // @ts-expect-error scope is not defined in the type definition but it is a valid property + scope: 'woocommerce-tasks', + render: LaunchYourStoreTaskItem, +} ); diff --git a/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-item.tsx b/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-item.tsx index 4bfbc3e0b9f..3874d660b23 100644 --- a/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-item.tsx +++ b/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-item.tsx @@ -62,7 +62,7 @@ export const TaskListItem: React.FC< TaskListItemProps > = ( { }; const DefaultTaskItem = useCallback( - ( props ) => { + ( props: { onClick?: () => void; isClickable?: boolean } ) => { const className = classnames( 'woocommerce-task-list__item index-' + taskIndex, { @@ -71,13 +71,17 @@ export const TaskListItem: React.FC< TaskListItemProps > = ( { } ); - const onClickActions = () => { + const onClick = ( e: React.MouseEvent< HTMLButtonElement > ) => { + if ( ( e.target as HTMLElement ).tagName === 'A' ) { + return; + } if ( props.onClick ) { trackClick(); return props.onClick(); } goToTask(); }; + return ( = ( { completed={ isComplete } additionalInfo={ additionalInfo } content={ content } - onClick={ ( e: React.MouseEvent< HTMLButtonElement > ) => { - if ( ( e.target as HTMLElement ).tagName === 'A' ) { - return; - } - onClickActions(); - } } + onClick={ + props.isClickable === false ? undefined : onClick + } onDismiss={ isDismissable ? () => onDismissTask() : undefined } diff --git a/plugins/woocommerce/changelog/46361-fix-lys-task-not-clickable-once-completed b/plugins/woocommerce/changelog/46361-fix-lys-task-not-clickable-once-completed new file mode 100644 index 00000000000..d0ba8df72ba --- /dev/null +++ b/plugins/woocommerce/changelog/46361-fix-lys-task-not-clickable-once-completed @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix Launch Your Store task item should not be clickable once completed \ No newline at end of file