Settings UI: Move Things To Do config data to a separate definition file. Add settings highlighting. Add todos dismissing.

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js

@@ -1,5 +1,7 @@
 import { ToggleControl, Icon, Button } from '@wordpress/components';
 import { cog } from '@wordpress/icons';
+import { useEffect } from '@wordpress/element';
+import { useActiveHighlight } from '../../../data/common/hooks';
 
 import SettingsBlock from '../SettingsBlock';
 import PaymentMethodIcon from '../PaymentMethodIcon';
@@ -10,8 +12,28 @@ const PaymentMethodItemBlock = ( {
 	onSelect,
 	isSelected,
 } ) => {
+	const { activeHighlight, setActiveHighlight } = useActiveHighlight();
+	const isHighlighted = activeHighlight === paymentMethod.id;
+
+	// Reset the active highlight after 2 seconds
+	useEffect( () => {
+		if ( isHighlighted ) {
+			const timer = setTimeout( () => {
+				setActiveHighlight( null );
+			}, 2000 );
+
+			return () => clearTimeout( timer );
+		}
+	}, [ isHighlighted, setActiveHighlight ] );
+
 	return (
-		<SettingsBlock className="ppcp--method-item" separatorAndGap={ false }>
+		<SettingsBlock
+			id={ paymentMethod.id }
+			className={ `ppcp--method-item ${
+				isHighlighted ? 'ppcp-highlight' : ''
+			}` }
+			separatorAndGap={ false }
+		>
 			<div className="ppcp--method-inner">
 				<div className="ppcp--method-title-wrapper">
 					{ paymentMethod?.icon && (

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js

@@ -1,20 +1,42 @@
 import { selectTab, TAB_IDS } from '../../../utils/tabSelector';
+import { useState } from '@wordpress/element';
+
+const TodoSettingsBlock = ( {
+	todosData,
+	className = '',
+	setActiveModal,
+	setActiveHighlight,
+	onDismissTodo,
+} ) => {
+	const [ dismissingIds, setDismissingIds ] = useState( new Set() );
 
-const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 	if ( todosData.length === 0 ) {
 		return null;
 	}
 
+	const handleDismiss = ( todoId, e ) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setDismissingIds( ( prev ) => new Set( [ ...prev, todoId ] ) );
+
+		setTimeout( () => {
+			onDismissTodo( todoId );
+		}, 300 );
+	};
+
 	return (
 		<div
 			className={ `ppcp-r-settings-block__todo ppcp-r-todo-items ${ className }` }
 		>
-			{ todosData.slice( 0, 5 ).map( ( todo ) => (
+			{ todosData.map( ( todo ) => (
 				<TodoItem
 					key={ todo.id }
+					id={ todo.id }
 					title={ todo.title }
 					description={ todo.description }
 					isCompleted={ todo.isCompleted }
+					isDismissing={ dismissingIds.has( todo.id ) }
+					onDismiss={ ( e ) => handleDismiss( todo.id, e ) }
 					onClick={ async () => {
 						if ( todo.action.type === 'tab' ) {
 							const tabId =
@@ -23,6 +45,13 @@ const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 						} else if ( todo.action.type === 'external' ) {
 							window.open( todo.action.url, '_blank' );
 						}
+
+						if ( todo.action.modal ) {
+							setActiveModal( todo.action.modal );
+						}
+						if ( todo.action.highlight ) {
+							setActiveHighlight( todo.action.highlight );
+						}
 					} }
 				/>
 			) ) }
@@ -30,12 +59,19 @@ const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 	);
 };
 
-const TodoItem = ( { title, description, isCompleted, onClick } ) => {
+const TodoItem = ( {
+	title,
+	description,
+	isCompleted,
+	isDismissing,
+	onClick,
+	onDismiss,
+} ) => {
 	return (
 		<div
 			className={ `ppcp-r-todo-item ${
 				isCompleted ? 'is-completed' : ''
-			}` }
+			} ${ isDismissing ? 'is-dismissing' : '' }` }
 			onClick={ onClick }
 		>
 			<div className="ppcp-r-todo-item__inner">
@@ -54,6 +90,13 @@ const TodoItem = ( { title, description, isCompleted, onClick } ) => {
 						</div>
 					) }
 				</div>
+				<button
+					className="ppcp-r-todo-item__dismiss"
+					onClick={ onDismiss }
+					aria-label="Dismiss todo item"
+				>
+					<span className="dashicons dashicons-no-alt"></span>
+				</button>
 			</div>
 		</div>
 	);