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 <github-actions@github.com>

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

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;

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() ) {

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 (
+		<WooOnboardingTaskListItem id="launch-your-store">
+			{ ( {
+				defaultTaskItem: DefaultTaskItem,
+				isComplete,
+			}: {
+				defaultTaskItem: ( props: {
+					isClickable: boolean;
+				} ) => JSX.Element;
+				onClick: () => void;
+				isComplete: boolean;
+			} ) => {
+				return <DefaultTaskItem isClickable={ ! isComplete } />;
+			} }
+		</WooOnboardingTaskListItem>
+	);
+};
+
+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,
+} );

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 (
 				<TaskItem
 					key={ taskId }
@@ -87,12 +91,9 @@ export const TaskListItem: React.FC< TaskListItemProps > = ( {
 					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
 					}

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