From bdb72d7ad0b0781b4f1ca1717f4f174b52ec9ab8 Mon Sep 17 00:00:00 2001
From: Emili Castells Guasch <e.castells@inpsyde.com>
Date: Fri, 3 Jan 2025 12:11:31 +0100
Subject: [PATCH] Add todo item click handler

---
 .../SettingsBlocks/TodoSettingsBlock.js                   | 8 ++++++--
 .../js/Components/Screens/Overview/TabOverview.js         | 5 +++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
index ea6119d5a..876b11702 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
@@ -8,7 +8,11 @@ const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 			className={ `ppcp-r-settings-block__todo ppcp-r-todo-items ${ className }` }
 		>
 			{ todosData.map( ( todo ) => (
-				<TodoItem key={ todo.id } title={ todo.title } />
+				<TodoItem
+					key={ todo.id }
+					title={ todo.title }
+					onClick={ todo.onClick }
+				/>
 			) ) }
 		</div>
 	);
@@ -16,7 +20,7 @@ const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 
 const TodoItem = ( props ) => {
 	return (
-		<div className="ppcp-r-todo-item">
+		<div className="ppcp-r-todo-item" onClick={ props.onClick }>
 			<div className="ppcp-r-todo-item__inner">
 				<div className="ppcp-r-todo-item__icon"></div>
 				<div className="ppcp-r-todo-item__description">
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
index aaafd98b0..2f9005f12 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
@@ -10,6 +10,7 @@ import FeatureSettingsBlock from '../../ReusableComponents/SettingsBlocks/Featur
 import { TITLE_BADGE_POSITIVE } from '../../ReusableComponents/TitleBadge';
 import { useMerchantInfo } from '../../../data/common/hooks';
 import { STORE_NAME } from '../../../data/common';
+import { updateQueryString } from '../../../utils/navigation';
 
 const TabOverview = () => {
 	const [ todosData ] = useState( todosDataDefault );
@@ -188,6 +189,10 @@ const todosDataDefault = [
 		isCompleted: () => {
 			return false;
 		},
+		onClick: ( event ) => {
+			event.preventDefault();
+			updateQueryString( { panel: 'payment-methods' } );
+		},
 	},
 	{
 		id: 'enable_credit_debit_cards',